import { useMemo, useEffect } from 'react'; import YooptaEditor, { createYooptaEditor, type YooptaContentValue } from '@yoopta/editor'; import Paragraph from '@yoopta/paragraph'; import Headings from '@yoopta/headings'; import { Bold, Italic, Underline, Strike, CodeMark, Highlight } from '@yoopta/marks'; const PLUGINS = [Paragraph, Headings.HeadingOne, Headings.HeadingTwo, Headings.HeadingThree]; const MARKS = [Bold, Italic, Underline, Strike, CodeMark, Highlight]; const initialValue = {} as YooptaContentValue; const EDITOR_STYLES = { width: 750, // useful when you want to create default block by clicking on empty are paddingBottom: 150, }; export default function Editor() { const editor = useMemo( () => createYooptaEditor({ plugins: PLUGINS, marks: MARKS, value: initialValue }), [], ); return ( <YooptaEditor editor={editor} style={EDITOR_STYLES} placeholder="Type / to open menu" onChange={(value) => console.log('onChange', value)} /> ); }

import { applyTheme } from '@yoopta/themes-shadcn'; const plugins = applyTheme([ Paragraph, Callout, Headings.HeadingOne, Headings.HeadingTwo, Headings.HeadingThree, ]); const editor = createYooptaEditor({ plugins, marks: MARKS });

import Callout from '@yoopta/callout'; import { CalloutUI } from '@yoopta/themes-shadcn/callout'; const CalloutWithUI = Callout.extend({ elements: CalloutUI }); // Use CalloutWithUI in your plugins array

import { useMemo, useState, useRef } from 'react'; import YooptaEditor, { createYooptaEditor, Blocks, Marks, useYooptaEditor } from '@yoopta/editor'; import { FloatingToolbar, FloatingBlockActions, BlockOptions, SlashCommandMenu } from '@yoopta/ui'; // Floating toolbar for text formatting function MyToolbar() { const editor = useYooptaEditor(); return ( <FloatingToolbar> <FloatingToolbar.Content> <FloatingToolbar.Group> {editor.formats.bold && ( <FloatingToolbar.Button onClick={() => Marks.toggle(editor, { type: 'bold' })} active={Marks.isActive(editor, { type: 'bold' })}> B </FloatingToolbar.Button> )} </FloatingToolbar.Group> </FloatingToolbar.Content> </FloatingToolbar> ); } // Floating block actions (plus button, drag handle) function MyFloatingBlockActions() { const editor = useYooptaEditor(); const [blockOptionsOpen, setBlockOptionsOpen] = useState(false); const dragHandleRef = useRef<HTMLButtonElement>(null); return ( <FloatingBlockActions frozen={blockOptionsOpen}> {({ blockId }) => ( <> <FloatingBlockActions.Button onClick={() => { if (!blockId) return; const block = Blocks.getBlock(editor, { id: blockId }); if (block) editor.insertBlock('Paragraph', { at: block.meta.order + 1, focus: true }); }}> + </FloatingBlockActions.Button> <FloatingBlockActions.Button ref={dragHandleRef} onClick={() => setBlockOptionsOpen(true)}> ⋮⋮ </FloatingBlockActions.Button> <BlockOptions open={blockOptionsOpen} onOpenChange={setBlockOptionsOpen} anchor={dragHandleRef.current}> <BlockOptions.Content>{/* Block options menu items */}</BlockOptions.Content> </BlockOptions> </> )} </FloatingBlockActions> ); } export default function Editor() { const editor = useMemo( () => createYooptaEditor({ plugins: PLUGINS, marks: MARKS, }), [], ); return ( <YooptaEditor editor={editor} autoFocus placeholder="Type / to open menu" style={{ width: 750 }}> <MyToolbar /> <MyFloatingBlockActions /> <SlashCommandMenu /> </YooptaEditor> ); }

const editor = useMemo( () => createYooptaEditor({ plugins: PLUGINS, marks: MARKS, // value: initialValue, // optional; or set later with setEditorValue() }), [], ); // Element builder - create complex nested structures const elements = editor.y('paragraph', { children: [editor.y.text('Hello '), editor.y.text('world', { bold: true, italic: true })], }); // Inline elements (e.g., links) const linkElement = editor.y.inline('link', { props: { url: 'https://example.com', target: '_blank' }, children: [editor.y.text('Click here', { bold: true })], }); // Insert block with elements editor.insertBlock('Paragraph', { elements, at: 0, focus: true }); // Toggle block type (preserves content) editor.toggleBlock('HeadingOne', { at: editor.path.current, focus: true }); // Batch multiple operations editor.batchOperations(() => { editor.insertBlock('HeadingOne', { at: 0 }); editor.insertBlock('Paragraph', { at: 1 }); }); // Export content const html = editor.getHTML(); const markdown = editor.getMarkdown(); const plainText = editor.getPlainText(); // History editor.undo(); editor.redo(); // Content getter (or use value from onChange) const value = editor.getEditorValue(); // Events editor.on('change', ({ value, operations }) => console.log(value)); editor.on('focus', () => console.log('focused')); editor.on('blur', () => console.log('blurred'));

Blocks.insertBlock(editor, { ... }) // Insert a new block Blocks.deleteBlock(editor, { ... }) // Delete a block Blocks.updateBlock(editor, { ... }) // Update block properties Blocks.moveBlock(editor, { ... }) // Move block to new position Blocks.duplicateBlock(editor, { ... }) // Duplicate a block Blocks.toggleBlock(editor, { ... }) // Change block type Blocks.focusBlock(editor, { ... }) // Focus a specific block Blocks.splitBlock(editor, { ... }) // Split block at cursor Blocks.mergeBlock(editor, { ... }) // Merge with adjacent block Blocks.increaseBlockDepth(editor, { ... }) // Indent block Blocks.decreaseBlockDepth(editor, { ... }) // Outdent block Blocks.getBlock(editor, { ... }) // Get block by ID Blocks.getBlockSlate(editor, { ... }) // Get Slate instance for block Blocks.buildBlockData(editor, { ... }) // Build block data structure

Elements.insertElement(editor, { ... }) // Insert element in block Elements.updateElement(editor, { ... }) // Update element properties Elements.deleteElement(editor, { ... }) // Delete element Elements.getElement(editor, { ... }) // Get element by matcher Elements.getElements(editor, { ... }) // Get multiple elements Elements.getElementEntry(editor, { ... }) // Get element with path Elements.getElementPath(editor, { ... }) // Get path to element Elements.getParentElementPath(editor, { ... }) // Get parent path Elements.getElementChildren(editor, { ... }) // Get child elements Elements.isElementEmpty(editor, { ... }) // Check if element is empty

// Apply marks to text at specific block positions Marks.update(editor, { type: 'bold', value: true, at: [0, 1, 2], // block indices }); // Apply highlight with custom styles Marks.update(editor, { type: 'highlight', value: { color: 'red', backgroundColor: '#ffff00' }, at: [0], });

import { createYooptaMark } from '@yoopta/editor'; const CustomMark = createYooptaMark({ type: 'custom', hotkey: 'mod+shift+c', render: (props) => <span className="custom-mark">{props.children}</span>, });