@oakjs/addon-remirror NPM

@oakjs/addon-remirror

An addon to use Remirror as an oak field

Installation

yarn add @oakjs/addon-remirror remirror @remirror/react @remirror/pm

Usage

import { Builder, baseAddon } from '@oakjs/react';
import { remirrorFieldAddon } from '@oakjs/addon-remirror';

import '@oakjs/theme/dist/oak.min.css';
import '@oakjs/addon-remirror/dist/oak-addon-remirror.min.css';

const myAddon = () => ({
  overrides: [{
    type: 'component',
    targets: ['title', 'text', 'button'],
    fields: [{
      key: 'content',
      type: 'remirror',
    }],
  }],
});

export default () => {
  const [content, setContent] = useState([]);

  return (
    <Builder
      addons={[baseAddon(), remirrorFieldAddon(), myAddon()]}
      value={content}
      onChange={setContent}
    />
  );
};

Documentation

The remirrorFieldAddon() addon adds a new field with the remirror type.

You can then either directly create component settings with the remirror field type:

import { BuilderField, baseAddon } from '@oakjs/react';
import { remirrorFieldAddon } from '@oakjs/addon-remirror';

const myAddon = () => ({
  settings: [{
    id: 'my-setting',
    type: 'remirror',
    key: 'property.subProperty',
  }],
});

export default () => (
  <BuilderField
    addons={[baseAddon(), remirrorFieldAddon(), myAddon()]}
    value={content}
    onChange={setContent}
  />
);

Or override existing component settings:

import { Builder, baseAddon } from '@oakjs/react';
import { remirrorFieldAddon } from '@oakjs/addon-remirror';

const myAddon = () => ({
  overrides: [{
    type: 'component',
    targets: ['title', 'text', 'button'],
    fields: [{
      key: 'content',
      type: 'remirror',
    }],
  }],
});

export default () => (
  <Builder
    addons={[baseAddon(), remirrorFieldAddon(), myAddon()]}
    value={content}
    onChange={setContent}
  />
);