Basic Marks

Mark Toolbar Button
Loading...
Files
components/demo.tsx
'use client';

import React from 'react';

import { Plate } from '@udecode/plate/react';

import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { Editor, EditorContainer } from '@/components/plate-ui/editor';

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

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

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

Features

  • Includes commonly used text styling features: bold, italic, underline, strikethrough, subscript, superscript, and code.

Plugins

  • BoldPlugin for bold mark
  • ItalicPlugin for italic mark
  • UnderlinePlugin for underline mark
  • StrikethroughPlugin for strikethrough mark
  • SubscriptPlugin for subscript mark
  • SuperscriptPlugin for superscript mark
  • CodePlugin for code mark

Installation

npm install @udecode/plate-basic-marks

Usage

import { BasicMarksPlugin } from '@udecode/plate-basic-marks/react';
 
const plugins = [
  // ...otherPlugins,
  BasicMarksPlugin,
];

Keyboard Shortcuts

KeyDescription
Cmd + B

Toggle the bold formatting for the selected text.

Cmd + I

Toggle the italic formatting for the selected text.

Cmd + U

Toggle the underline formatting for the selected text.

Cmd + E

Toggle the code formatting for the selected text.

Cmd + Shift + X

Toggle the strikethrough formatting for the selected text.

Cmd + ,

Toggle the subscript formatting for the selected text.

Cmd + .

Toggle the superscript formatting for the selected text.

Plugins

BasicMarksPlugin

Plugin that includes all basic mark plugins.

BoldPlugin

Plugin for bold formatting.

CodePlugin

Plugin for code formatting.

ItalicPlugin

Plugin for italic formatting.

UnderlinePlugin

Plugin for underline formatting.

StrikethroughPlugin

Plugin for strikethrough formatting.

SubscriptPlugin

Plugin for subscript formatting.

SuperscriptPlugin

Plugin for superscript formatting.