@remirror/core

core

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

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 pure 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 },
]);

console.log(manager.nodes); // { doc: { ... }, paragraph: { ... }, text: { ... } }
console.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