Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@remirror/core

Package Overview
Dependencies
Maintainers
1
Versions
335
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@remirror/core

Provides the core abstractions for managing your remirror editor functionality

  • 0.6.1-ci.1570407282.7
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
38K
increased by5.87%
Maintainers
1
Weekly downloads
 
Created
Source

@remirror/core

npm bundle size (scoped) npm

This packages provides the core building blocks for the remirror editing experience. It provides the api for extensions and TypeScript types used throughout the other packages.

It should rarely be used independently.

Note that this package itself is framework agnostic and while remirror today is targeted at react users it's possible to widen the scope to angular, vue and other popular framework libraries.

Installation

yarn add @remirror/core prosemirror-view

Extensions

Extensions are the building blocks of the editing experience in remirror. They provide behaviour, plugins, marks, and nodes as well as configuration at instantiation for any extension.

Create an extension

Extension can be Extension, MarkExtension or NodeExtension.

  • Extension Pure extensions only concern themselves with the behaviour of the editor. For example the extension called History is a plain extension and it tracks all the actions and provides undo and redo commands to your configured editor.
  • MarkExtension These are used to add extra styling or other information to inline content. Marks are used for adding links to content, bold stying, italic and other changes which affect the content in a standard way.
  • NodeExtension These add make nodes available to the content of the editor. Examples include @remirror/extension-emoji and @remirror/extension-mention

To create an extension extend from the class provided from the core library. The following example is taken from the Strikethrough extension in the @remirror/core-extensions library.

import {
  MarkExtension,
  MarkExtensionSpec,
  markInputRule,
  markPasteRule,
  ExtensionManagerMarkTypeParams,
  toggleMark,
} from '@remirror/core';

export class StrikeExtension extends MarkExtension {
  get name() {
    return 'strike' as const;
  }

  // This is the prosemirror related schema information
  get schema(): MarkExtensionSpec {
    return {
      parseDOM: [
        {
          tag: 's',
        },
        {
          tag: 'del',
        },
        {
          tag: 'strike',
        },
        {
          style: 'text-decoration',
          getAttrs: value => (value === 'line-through' ? {} : false),
        },
      ],
      toDOM: () => ['s', 0],
    };
  }

  // Defines keymaps for this extension
  public keys({ type }: ExtensionManagerMarkTypeParams) {
    return {
      'Mod-d': toggleMark(type),
    };
  }

  // Defines commands that can be used to build menu UI's
  public commands({ type }: CommandMarkTypeParams) {
    return () => toggleMark(type);
  }

  // Input rules happen as code is being typed
  public inputRules({ type }: ExtensionManagerMarkTypeParams) {
    return [markInputRule({ regexp: /~([^~]+)~$/, type })];
  }

  // Paste rules are activated when code is pasted into the editor
  public pasteRules({ type }: ExtensionManagerMarkTypeParams) {
    return [markPasteRule({ regexp: /~([^~]+)~/g, type })];
  }
}

Extension Manager

The extension manager is used to manage the extensions passed into the editor. It automatically creates the nodes and marks which are used for generating a schema.

import { ExtensionManager, DocExtension, TextExtension } from '@remirror/core';
import { BoldExtension, ItalicExtension, ParagraphExtension } from '@remirror/core-extensions';

const manager = ExtensionManager.create([
  { extension: new DocExtension(), priority: 2 },
  { extension: new TextExtension(), priority: 2 },
  { extension: new ParagraphExtension(), priority: 2 },
  { extension: new BoldExtension(), priority: 2 },
  { extension: new ItalicExtension(), priority: 2 },
]);

log(manager.nodes); // { doc: { ... }, paragraph: { ... }, text: { ... } }
log(extension.marks); // { bold: { ... }, italic: { ... } }

// Can also create a schema for you
manager.createSchema(); // Returns a schema composed of nodes and marks in the extensions provided

FAQs

Package last updated on 07 Oct 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc