Skip to main content

Basic Marks

Includes the following plugins:

  • createBoldPlugin() for the bold mark
  • createItalicPlugin() for the italic mark
  • createUnderlinePlugin() for the underline mark
  • createStrikethroughPlugin() for the strikethrough mark
  • createSubscriptPlugin() for the subscript mark
  • createSuperscriptPlugin() for the superscript mark
  • createCodePlugin() for the code mark

Installation#

npm install @udecode/plate
# or
npm install @udecode/plate-basic-marks

Usage#

import React from 'react';
import { createBasicMarksPlugin, Plate, PlateProvider } from '@udecode/plate';
import { basicElementsPlugins } from './basic-elements/basicElementsPlugins';
import { basicMarksValue } from './basic-marks/basicMarksValue';
import { BasicMarkToolbarButtons } from './basic-marks/BasicMarkToolbarButtons';
import { editableProps } from './common/editableProps';
import { plateUI } from './common/plateUI';
import { Toolbar } from './toolbar/Toolbar';
import { createMyPlugins, MyValue } from './typescript/plateTypes';

const plugins = createMyPlugins(
  [...basicElementsPlugins, createBasicMarksPlugin()],
  {
    components: plateUI,
  }
);

export default () => (
  <PlateProvider<MyValue> initialValue={basicMarksValue} plugins={plugins}>
    <Toolbar>
      <BasicMarkToolbarButtons />
    </Toolbar>

    <Plate<MyValue> editableProps={editableProps} />
  </PlateProvider>

Options#

export type HotkeyPlugin = {
/**
* Hotkeys to listen to trigger a plugin action.
*/
hotkey?: string | string[];
};
export interface ToggleMarkPlugin extends HotkeyPlugin {
/**
* Node properties to delete.
*/
clear?: string | string[];
}

Source Code#

Edit this page