Core package

This is core package for Yoopta-Editor

Installation

1yarn add @yoopta/editor

Usage

1import YooptaEditor, { createYooptaEditor, YooEditor } from '@yoopta/editor';
2// plugins
3import Paragraph from '@yoopta/paragraph';
4
5const plugins = [Paragraph];
6
7const Editor = () => {
8  // create instance
9  const editor: YooEditor = useMemo(() => createYooptaEditor(), []);
10  const [value, setValue] = useState();
11
12  const onChange = (newValue) => setValue(newValue);
13
14  return <YooptaEditor editor={editor} plugins={plugins} value={value} onChange={onChange} />;
15};

YooptaEditor component props

1type Props = {
2  /**
3   * Instance of editor
4   */
5  editor: YooEditor;
6  /**
7   * Optional custom id. Useful for multiple instances
8   */
9  id?: string;
10  /**
11   * List of plugins
12   */
13  plugins: YooptaPlugin[];
14  /**
15   * List of marks from @yoopta/marks
16   */
17  marks?: YooptaMark<any>[];
18  /**
19   * Optional value of editor. DEFAULT - [undefined]
20   */
21  value?: YooptaContentValue;
22  /**
23   * Autofocus when editor is ready. DEFAULT - [true]
24   */
25  autoFocus?: boolean;
26  /**
27   * Additional className for your needs. DEFAULT - [.yoopta-editor]
28   */
29  className?: string;
30  /**
31   * Box for selection area to select by mouse several blocks. DEFAULT - [document]
32   */
33  selectionBoxRoot?: HTMLElement | React.MutableRefObject<HTMLElement | null> | false;
34  children?: React.ReactNode;
35  tools?: Partial<Tools>;
36  placeholder?: string;
37  readOnly?: boolean;
38  /* Width. [Default] - 400px. Will be DEPRECATED, use style object  */
39  width?: number | string;
40  /* Style CSS Object. [Default] - { width: 400, paddingBottom: 100 }
41   */
42  style?: number | string;
43  /* Change handler  */
44  onChange?: (value: YooptaContentValue, options: YooptaOnChangeOptions) => void;
45  /* Path change handler */
46  onPathChange?: (path: YooptaPath) => void;
47};

Editor API

1export type YooEditor = {
2  id: string;
3  readOnly: boolean;
4  isEmpty: () => boolean;
5
6  // block handlers
7  insertBlock: WithoutFirstArg<typeof insertBlock>;
8  updateBlock: WithoutFirstArg<typeof updateBlock>;
9  deleteBlock: WithoutFirstArg<typeof deleteBlock>;
10  duplicateBlock: WithoutFirstArg<typeof duplicateBlock>;
11  toggleBlock: WithoutFirstArg<typeof toggleBlock>;
12  increaseBlockDepth: WithoutFirstArg<typeof increaseBlockDepth>;
13  decreaseBlockDepth: WithoutFirstArg<typeof decreaseBlockDepth>;
14  moveBlock: WithoutFirstArg<typeof moveBlock>;
15  focusBlock: WithoutFirstArg<typeof focusBlock>;
16  mergeBlock: () => void;
17  splitBlock: (options?: SplitBlockOptions) => void;
18  getBlock: (options: GetBlockOptions) => YooptaBlockData | null;
19
20  // path handlers
21  path: YooptaPath;
22  setPath: (path: YooptaPath) => void;
23
24  children: YooptaContentValue;
25  getEditorValue: () => YooptaContentValue;
26  setEditorValue: WithoutFirstArg<typeof setEditorValue>;
27  blockEditorsMap: YooptaPluginsEditorMap;
28  blocks: YooptaBlocks;
29  formats: YooptaFormats;
30  shortcuts: Record<string, YooptaBlock>;
31  plugins: Record<string, Plugin<Record<string, SlateElement>, unknown>>;
32  commands: Record<string, (...args: any[]) => any>;
33
34  // core handlers
35  applyTransforms: WithoutFirstArg<typeof applyTransforms>;
36  batchOperations: (fn: () => void) => void;
37
38  // events handlers
39  on: <K extends keyof YooptaEventsMap>(event: K, fn: (payload: YooptaEventsMap[K]) => void) => void;
40  once: <K extends keyof YooptaEventsMap>(event: K, fn: (payload: YooptaEventsMap[K]) => void) => void;
41  off: <K extends keyof YooptaEventsMap>(event: K, fn: (payload: YooptaEventsMap[K]) => void) => void;
42  emit: <K extends keyof YooptaEventsMap>(event: K, payload: YooptaEventsMap[K]) => void;
43
44  // focus handlers
45  isFocused: () => boolean;
46  blur: (options?: EditorBlurOptions) => void;
47  focus: () => void;
48
49  // parser handlers
50  getHTML: (content: YooptaContentValue) => string;
51  getMarkdown: (content: YooptaContentValue) => string;
52  getPlainText: (content: YooptaContentValue) => string;
53  getEmail: (content: YooptaContentValue, templateOptions: EmailTemplateOptions) => string;
54
55  // history
56  historyStack: Record<HistoryStackName, HistoryStack[]>;
57  isSavingHistory: WithoutFirstArg<typeof YooptaHistory.isSavingHistory>;
58  isMergingHistory: WithoutFirstArg<typeof YooptaHistory.isMergingHistory>;
59  withoutSavingHistory: WithoutFirstArg<typeof YooptaHistory.withoutSavingHistory>;
60  withoutMergingHistory: WithoutFirstArg<typeof YooptaHistory.withoutMergingHistory>;
61  withMergingHistory: WithoutFirstArg<typeof YooptaHistory.withMergingHistory>;
62  withSavingHistory: WithoutFirstArg<typeof YooptaHistory.withSavingHistory>;
63  redo: WithoutFirstArg<typeof YooptaHistory.redo>;
64  undo: WithoutFirstArg<typeof YooptaHistory.undo>;
65
66  // ref to editor element
67  refElement: HTMLElement | null;
68};

Hooks from @yoopta/editor

1/**
2 * Hook to access the Yoopta editor instance. Must be used in children components of <YooptaEditor />.
3 * @returns {YooEditor} The editor instance.
4 */
5useYooptaEditor();
6
7/**
8 * Hook to check if the editor is in read-only mode.
9 * @returns {boolean} True if the editor is read-only.
10 */
11useYooptaReadOnly();
12
13/**
14 * Hook to check if the editor is focused.
15 * @returns {boolean} True if the editor is focused.
16 */
17useYooptaFocused();
18
19/**
20 * Hook to get the data for a specific block by its ID.
21 * @param {string} blockId The ID of the block.
22 * @returns {YooptaBlockData | undefined} The data of the block, or undefined if not found.
23 */
24useBlockData(blockId);
25
26/**
27 * Hook to get the options for a plugin.
28 * @template TOptions The type of options expected.
29 * @param {string} blockType The block type associated with the plugin.
30 * @returns {PluginOptions<TOptions>} The options of the plugin.
31 */
32useYooptaPluginOptions<TOptions>(blockType);