Basic Marks

Commonly used text styling features.

Mark Toolbar Button

Bold

Apply bold formatting to emphasize important text.

Italic

Apply italic formatting for emphasis or stylistic purposes.

Underline

Apply underline formatting to text.

Strikethrough

Apply strikethrough formatting to indicate deleted content.

Code

Format inline code snippets and technical terms.

Subscript

Format text as subscript for mathematical expressions.

Superscript

Format text as superscript for mathematical expressions.

Kbd

Display keyboard shortcuts and key combinations.

Highlight

Highlight important text with background colors.

Loading...
Files
components/demo.tsx
'use client';

import * as React from 'react';

import { Plate, usePlateEditor } from 'platejs/react';

import { EditorKit } from '@/components/editor/editor-kit';
import { Editor, EditorContainer } from '@/components/ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = usePlateEditor({
    plugins: EditorKit,
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

Kit Usage

Installation

The BasicMarksKit bundles plugins for Bold, Italic, Underline, Strikethrough, Code, Subscript, Superscript, Highlight, and Kbd marks, along with their respective UI components from Plate UI.

'use client';
 
import {
  BoldPlugin,
  CodePlugin,
  HighlightPlugin,
  ItalicPlugin,
  KbdPlugin,
  StrikethroughPlugin,
  SubscriptPlugin,
  SuperscriptPlugin,
  UnderlinePlugin,
} from '@platejs/basic-nodes/react';
 
import { CodeLeaf } from '@/components/ui/code-node';
import { HighlightLeaf } from '@/components/ui/highlight-node';
import { KbdLeaf } from '@/components/ui/kbd-node';
 
export const BasicMarksKit = [
  BoldPlugin,
  ItalicPlugin,
  UnderlinePlugin,
  CodePlugin.configure({
    node: { component: CodeLeaf },
    shortcuts: { toggle: { keys: 'mod+e' } },
  }),
  StrikethroughPlugin.configure({
    shortcuts: { toggle: { keys: 'mod+shift+x' } },
  }),
  SubscriptPlugin.configure({
    shortcuts: { toggle: { keys: 'mod+comma' } },
  }),
  SuperscriptPlugin.configure({
    shortcuts: { toggle: { keys: 'mod+period' } },
  }),
  HighlightPlugin.configure({
    node: { component: HighlightLeaf },
    shortcuts: { toggle: { keys: 'mod+shift+h' } },
  }),
  KbdPlugin.withComponent(KbdLeaf),
];

Add Kit

Add the kit to your plugins:

import { createPlateEditor } from 'platejs/react';
import { BasicMarksKit } from '@/components/editor/plugins/basic-marks-kit';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...BasicMarksKit,
  ],
});

Manual Usage

pnpm add @platejs/basic-nodes

Add Toolbar Button

You can add MarkToolbarButton to your Toolbar to control text formatting marks.

For individual plugin setup and configuration, see the specific plugin documentation pages linked above.