marks

@yoopta/marks

Text formatting marks for Yoopta Editor: bold, italic, underline, strike, code, highlight, and support for custom marks. Pass marks to createYooptaEditor({ marks }); use the Marks namespace from @yoopta/editor to toggle or query marks in your UI.

Installation

yarn add @yoopta/marks

Usage

Register marks when creating the editor. Do not pass marks to <YooptaEditor>.

import { useMemo } from 'react';
import YooptaEditor, { createYooptaEditor, Marks } from '@yoopta/editor';
import { Bold, Italic, Underline, Strike, CodeMark, Highlight } from '@yoopta/marks';

const marks = [Bold, Italic, Underline, Strike, CodeMark, Highlight];

export default function Editor() {
  const editor = useMemo(
    () => createYooptaEditor({ plugins: PLUGINS, marks }),
    [],
  );

  return (
    <YooptaEditor editor={editor} onChange={() => {}}>
      {/* In toolbar: Marks.toggle(editor, { type: 'bold' }), Marks.isActive(editor, { type: 'bold' }) */}
    </YooptaEditor>
  );
}

Built-in marks

Mark	Type	Hotkey
Bold	bold	Cmd/Ctrl + B
Italic	italic	Cmd/Ctrl + I
Underline	underline	Cmd/Ctrl + U
Strike	strike	Cmd/Ctrl + Shift + S
Code	code	Cmd/Ctrl + E
Highlight	highlight	(toolbar; supports colors)

Marks API

Use the Marks namespace from @yoopta/editor (not on the editor instance):

import { Marks } from '@yoopta/editor';

Marks.toggle(editor, { type: 'bold' });
Marks.isActive(editor, { type: 'bold' });
Marks.add(editor, { type: 'highlight', value: { color: '#fef08a' } });
Marks.getValue(editor, { type: 'highlight' });
Marks.remove(editor, { type: 'bold' });
Marks.clear(editor);

See Marks overview and Marks API reference for options (at, blockId, etc.) and custom marks.