@poool/oak-addon-richtext-field-prosemirror NPM

Content

New field type:

richtext: Allows to use rich text editing capabilities (bold, italic, font size, color, ...)

Installation

yarn add @poool/oak @poool/oak-addon-richtext-field-prosemirror

Usage

import { render } from '@poool/oak';
import richTextField from '@poool/oak-addon-richtext-field-prosemirror';

render(document.getElementById('app'), {
  addons: [richTextField],
  overrides: [{
    type: 'component',
    components: ['title', 'text', 'button', /* ... */],
    fields: [{
      key: 'content',
      type: 'richtext',
    }],
  }]
  /* ... */
});

Don't forget to import styles, for example using style-loader and webpack:

import '@poool/oak-addon-richtext-field-prosemirror/dist/oak-addon-richtext-field-prosemirror.min.css';

Or import them directly inside your own styles using less, sass or stylus:

@import "@poool/oak-addon-richtext-field-prosemirror/dist/oak-addon-richtext-field-prosemirror.min.css";

Translations

Available languages:

English (default)
French

To import translations and replace text with translations, use the texts setting:

import { render, localeFr } from '@poool/oak';
import richTextField, { localeFr as richTextLocaleFr } from '@poool/oak-addon-richtext-field-prosemirror';
import { mergeDeep } from '@poool/junipero-utils';

render(document.getElementById('app'), {
  addons: [richTextField],
  texts: mergeDeep({}, localeFr, richTextLocaleFr),
  /* ... */
});