64:Tc1e,

import { Toaster } from 'sonner';

import { RichTextEditor } from '@/components/editor/rich-text-editor';

export default function Page() {
  return (
    <div className="h-screen w-full">
      <RichTextEditor />

      <Toaster />
    </div>
  );
}

65:T6f5,'use client'; import { CommentsPlugin } from 'platejs/comments/react'; import { EditorRoot, useCreateEditor } from 'platejs/react'; import { TooltipProvider } from '@/components/ui/tooltip'; import { DiscussionKit } from '@/components/editor/discussion'; import { Editor, EditorContainer, EditorFrame, } from '@/components/editor/editor'; import { EditorKit } from '@/components/editor/plugins'; import { SettingsDialog } from '@/components/editor/settings-dialog'; import { richTextEditorComments, richTextEditorValue, } from './rich-text-editor-value'; export function RichTextEditor() { const editor = useCreateEditor({ plugins: [ ...EditorKit, ...DiscussionKit, CommentsPlugin.configure({ initialState: { users: { alice: { id: 'alice', name: 'Alice', avatarUrl: 'https://api.dicebear.com/9.x/glass/svg?seed=alice6', }, bob: { id: 'bob', name: 'Bob', avatarUrl: 'https://api.dicebear.com/9.x/glass/svg?seed=bob4', }, charlie: { id: 'charlie', name: 'Charlie', avatarUrl: 'https://api.dicebear.com/9.x/glass/svg?seed=charlie2', }, }, initialComments: richTextEditorComments, }, }), ], userId: 'alice', initialValue: richTextEditorValue, }); return ( ); } 66:T3542,

'use client';

import { CommentsPlugin } from 'platejs/comments/react';
import { EditorRoot, useCreateEditor } from 'platejs/react';

import { TooltipProvider } from '@/components/ui/tooltip';
import { DiscussionKit } from '@/components/editor/discussion';
import {
  Editor,
  EditorContainer,
  EditorFrame,
} from '@/components/editor/editor';
import { EditorKit } from '@/components/editor/plugins';
import { SettingsDialog } from '@/components/editor/settings-dialog';

import {
  richTextEditorComments,
  richTextEditorValue,
} from './rich-text-editor-value';

export function RichTextEditor() {
  const editor = useCreateEditor({
    plugins: [
      ...EditorKit,
      ...DiscussionKit,
      CommentsPlugin.configure({
        initialState: {
          users: {
            alice: {
              id: 'alice',
              name: 'Alice',
              avatarUrl: 'https://api.dicebear.com/9.x/glass/svg?seed=alice6',
            },
            bob: {
              id: 'bob',
              name: 'Bob',
              avatarUrl: 'https://api.dicebear.com/9.x/glass/svg?seed=bob4',
            },
            charlie: {
              id: 'charlie',
              name: 'Charlie',
              avatarUrl: 'https://api.dicebear.com/9.x/glass/svg?seed=charlie2',
            },
          },
          initialComments: richTextEditorComments,
        },
      }),
    ],
    userId: 'alice',
    initialValue: richTextEditorValue,
  });

  return (
    <TooltipProvider>
      <EditorRoot editor={editor} authored={{ intent: 'edit' }}>
        <EditorFrame>
          <EditorContainer>
            <Editor className="min-w-0" variant="demo" />
          </EditorContainer>
        </EditorFrame>
        <SettingsDialog />
      </EditorRoot>
    </TooltipProvider>
  );
}

67:T5a62,import type { EditorDocumentValue } from 'platejs'; import type { CommentsJSON } from 'platejs/comments'; // Saved native document. Regenerate with apps/www/scripts/generate-rich-text-editor-value.ts. export const richTextEditorValue: EditorDocumentValue = { children: [ { level: 1, type: 'heading', children: [ { text: 'Welcome to the Plate Playground!', }, ], }, { type: 'paragraph', children: [ { text: 'Experience a modern rich-text editor built with ', }, { type: 'link', url: 'https://reactjs.org', children: [ { text: 'React', }, ], }, { text: ". This playground showcases just a part of Plate's capabilities. ", }, { type: 'link', url: '/docs', children: [ { text: 'Explore the documentation', }, ], }, { text: ' to discover more.', }, ], }, { level: 2, type: 'heading', children: [ { text: 'Collaborative Editing', }, ], }, { type: 'paragraph', children: [ { text: 'Review and refine content seamlessly. Use ', }, { type: 'link', url: '/docs/suggestion', authored: [ { at: 1_791_864_172_518, author: 'alice', change: '3eebfcc2-04a2-475e-9c41-c1375ad2b72c', kind: 'insert', }, ], children: [ { authored: [ { at: 1_791_864_172_518, author: 'alice', change: '3eebfcc2-04a2-475e-9c41-c1375ad2b72c', kind: 'insert', }, ], text: 'suggestions', }, ], }, { text: '', }, { authored: [ { at: 1_791_864_172_518, author: 'alice', change: '3eebfcc2-04a2-475e-9c41-c1375ad2b72c', kind: 'insert', }, ], text: ' like this added text', }, { text: ' or to ', }, { authored: [ { at: 1_791_864_172_425, author: 'bob', change: '8b7c7323-a04b-4eac-911c-f4b55fb69550', kind: 'delete', }, ], text: 'mark text for removal', }, { text: '. Discuss changes using ', }, { type: 'link', url: '/docs/comment', children: [ { text: 'comments', }, ], }, { text: ' on many text segments. You can even have ', }, { authored: [ { at: 1_791_864_172_481, author: 'charlie', change: '11ecbc4a-799d-4ffe-a1ed-d515e9e0c30b', kind: 'insert', }, ], text: 'overlapping ', }, { text: 'annotations!', }, ], }, { level: 2, type: 'heading', children: [ { text: 'AI-Powered Editing', }, ], }, { type: 'paragraph', children: [ { text: 'Boost your productivity with integrated ', }, { type: 'link', url: '/docs/ai', children: [ { text: 'AI SDK', }, ], }, { text: '. Press ', }, { kbd: true, text: '⌘+J', }, { text: ' or ', }, { kbd: true, text: 'Space', }, { text: ' in an empty line to:', }, ], }, { indent: 1, listType: 'bulleted', type: 'paragraph', children: [ { text: 'Generate content (continue writing, summarize, explain)', }, ], }, { indent: 1, listType: 'bulleted', type: 'paragraph', children: [ { text: 'Edit existing text (improve, fix grammar, change tone)', }, ], }, { level: 2, type: 'heading', children: [ { text: 'Rich Content Editing', }, ], }, { type: 'paragraph', children: [ { text: 'Structure your content with ', }, { type: 'link', url: '/docs/heading', children: [ { text: 'headings', }, ], }, { text: ', ', }, { type: 'link', url: '/docs/list', children: [ { text: 'lists', }, ], }, { text: ', and ', }, { type: 'link', url: '/docs/blockquote', children: [ { text: 'quotes', }, ], }, { text: '. Apply ', }, { type: 'link', url: '/docs/basic-marks', children: [ { text: 'marks', }, ], }, { text: ' like ', }, { bold: true, text: 'bold', }, { text: ', ', }, { italic: true, text: 'italic', }, { text: ', ', }, { underline: true, text: 'underline', }, { text: ', ', }, { strikethrough: true, text: 'strikethrough', }, { text: ', and ', }, { code: true, text: 'code', }, { text: '. Use ', }, { type: 'link', url: '/docs/autoformat', children: [ { text: 'autoformatting', }, ], }, { text: ' for ', }, { type: 'link', url: '/docs/markdown', children: [ { text: 'Markdown', }, ], }, { text: '-like shortcuts (e.g., ', }, { kbd: true, text: '* ', }, { text: ' for lists, ', }, { kbd: true, text: '# ', }, { text: ' for H1).', }, ], }, { type: 'blockquote', children: [ { type: 'paragraph', children: [ { text: 'Blockquotes can group paragraphs, quoted lists, and reply chains.', }, ], }, { type: 'paragraph', children: [ { text: 'Markdown blockquotes keep this nested structure instead of flattening it.', }, ], }, { indent: 1, listType: 'bulleted', type: 'paragraph', children: [ { text: 'Quoted list item inside the same container.', }, ], }, { type: 'blockquote', children: [ { type: 'paragraph', children: [ { text: 'Nested blockquotes work here too.', }, ], }, ], }, ], }, { language: 'javascript', type: 'codeBlock', children: [ { text: "function hello() {\n console.info('Code blocks are supported!');\n}", }, ], }, { type: 'paragraph', children: [ { text: 'Create ', }, { type: 'link', url: '/docs/link', children: [ { text: 'links', }, ], }, { text: ', ', }, { type: 'link', url: '/docs/mention', children: [ { text: '@mention', }, ], }, { text: ' users like ', }, { label: 'Alice', ref: 'alice', type: 'mention', children: [ { text: '', }, ], }, { text: ', or insert ', }, { type: 'link', url: '/docs/emoji', children: [ { text: 'emojis', }, ], }, { text: ' ✨. Use the ', }, { type: 'link', url: '/docs/slash-command', children: [ { text: 'slash command', }, ], }, { text: ' (/) for quick access to elements.', }, ], }, { level: 3, type: 'heading', children: [ { text: 'How Plate Compares', }, ], }, { type: 'paragraph', children: [ { text: 'Plate offers many features out-of-the-box as free, open-source plugins.', }, ], }, { type: 'table', children: [ { type: 'tableRow', children: [ { header: true, type: 'tableCell', children: [ { type: 'paragraph', children: [ { bold: true, text: 'Feature', }, ], }, ], }, { header: true, type: 'tableCell', children: [ { type: 'paragraph', children: [ { bold: true, text: 'Plate (Free & OSS)', }, ], }, ], }, { header: true, type: 'tableCell', children: [ { type: 'paragraph', children: [ { bold: true, text: 'Tiptap', }, ], }, ], }, ], }, { type: 'tableRow', children: [ { type: 'tableCell', children: [ { type: 'paragraph', children: [ { text: 'AI', }, ], }, ], }, { type: 'tableCell', children: [ { textAlign: 'center', type: 'paragraph', children: [ { text: '✅', }, ], }, ], }, { type: 'tableCell', children: [ { type: 'paragraph', children: [ { text: 'Paid Extension', }, ], }, ], }, ], }, { type: 'tableRow', children: [ { type: 'tableCell', children: [ { type: 'paragraph', children: [ { text: 'Comments', }, ], }, ], }, { type: 'tableCell', children: [ { textAlign: 'center', type: 'paragraph', children: [ { text: '✅', }, ], }, ], }, { type: 'tableCell', children: [ { type: 'paragraph', children: [ { text: 'Paid Extension', }, ], }, ], }, ], }, { type: 'tableRow', children: [ { type: 'tableCell', children: [ { type: 'paragraph', children: [ { text: 'Suggestions', }, ], }, ], }, { type: 'tableCell', children: [ { textAlign: 'center', type: 'paragraph', children: [ { text: '✅', }, ], }, ], }, { type: 'tableCell', children: [ { type: 'paragraph', children: [ { text: 'Paid (Comments Pro)', }, ], }, ], }, ], }, { type: 'tableRow', children: [ { type: 'tableCell', children: [ { type: 'paragraph', children: [ { text: 'Emoji Picker', }, ], }, ], }, { type: 'tableCell', children: [ { textAlign: 'center', type: 'paragraph', children: [ { text: '✅', }, ], }, ], }, { type: 'tableCell', children: [ { type: 'paragraph', children: [ { text: 'Paid Extension', }, ], }, ], }, ], }, { type: 'tableRow', children: [ { type: 'tableCell', children: [ { type: 'paragraph', children: [ { text: 'Table of Contents', }, ], }, ], }, { type: 'tableCell', children: [ { textAlign: 'center', type: 'paragraph', children: [ { text: '✅', }, ], }, ], }, { type: 'tableCell', children: [ { type: 'paragraph', children: [ { text: 'Paid Extension', }, ], }, ], }, ], }, { type: 'tableRow', children: [ { type: 'tableCell', children: [ { type: 'paragraph', children: [ { text: 'Drag Handle', }, ], }, ], }, { type: 'tableCell', children: [ { textAlign: 'center', type: 'paragraph', children: [ { text: '✅', }, ], }, ], }, { type: 'tableCell', children: [ { type: 'paragraph', children: [ { text: 'Paid Extension', }, ], }, ], }, ], }, { type: 'tableRow', children: [ { type: 'tableCell', children: [ { type: 'paragraph', children: [ { text: 'Collaboration (Yjs)', }, ], }, ], }, { type: 'tableCell', children: [ { textAlign: 'center', type: 'paragraph', children: [ { text: '✅', }, ], }, ], }, { type: 'tableCell', children: [ { type: 'paragraph', children: [ { text: 'Hocuspocus (OSS/Paid)', }, ], }, ], }, ], }, ], }, { level: 3, type: 'heading', children: [ { text: 'Images and Media', }, ], }, { type: 'paragraph', children: [ { text: 'Embed rich media like images directly in your content. Supports ', }, { type: 'link', url: '/docs/media', children: [ { text: 'Media uploads', }, ], }, { text: ' and ', }, { type: 'link', url: '/docs/dnd', children: [ { text: 'drag & drop', }, ], }, { text: ' for a smooth experience.', }, ], }, { textAlign: 'center', type: 'image', url: 'https://images.unsplash.com/photo-1712688930249-98e1963af7bd?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', width: '75%', children: [ { text: 'Images with captions provide context.', }, ], }, { name: 'sample.pdf', type: 'file', url: 'https://s26.q4cdn.com/900411403/files/doc_downloads/test.pdf', children: [ { text: '', }, ], }, { type: 'audio', url: 'https://samplelib.com/lib/preview/mp3/sample-3s.mp3', children: [ { text: '', }, ], }, { level: 3, type: 'heading', children: [ { text: 'Table of Contents', }, ], }, { type: 'toc', children: [ { text: '', }, ], }, { type: 'paragraph', children: [ { text: '', }, ], }, ], }; export const richTextEditorComments: CommentsJSON = { kind: 'comments', version: 1, threads: [ { id: 'discussion1', createdAt: '2026-09-14T18:18:51.315Z', status: 'published', excerpt: 'comments', userId: 'charlie', target: { type: 'range', }, messages: [ { id: 'discussion1-comment', userId: 'charlie', createdAt: '2026-09-14T18:18:51.315Z', body: [ { children: [ { text: 'Comments are a great way to provide feedback and discuss changes.', }, ], type: 'paragraph', }, ], }, { id: 'discussion1-reply', userId: 'bob', createdAt: '2026-09-14T18:20:51.315Z', body: [ { children: [ { text: 'Agreed! The link to the docs makes it easy to learn more.', }, ], type: 'paragraph', }, ], }, ], resolution: null, }, { id: 'discussion2', createdAt: '2026-09-14T18:23:51.315Z', status: 'published', excerpt: 'overlapping', userId: 'bob', target: { id: '11ecbc4a-799d-4ffe-a1ed-d515e9e0c30b', type: 'change', }, messages: [ { id: 'discussion2-comment', userId: 'bob', createdAt: '2026-09-14T18:23:51.315Z', body: [ { children: [ { text: 'Nice demonstration of overlapping annotations with both comments and suggestions!', }, ], type: 'paragraph', }, ], }, { id: 'discussion2-reply', userId: 'charlie', createdAt: '2026-09-14T18:25:51.315Z', body: [ { children: [ { text: 'This helps users understand how powerful the editor can be.', }, ], type: 'paragraph', }, ], }, ], resolution: null, }, ], ranges: [ { threadId: 'discussion1', range: { kind: 'range', version: 1, value: { association: 'inward', deletion: 'nearest', range: { anchor: { path: [3, 7, 0], offset: 0, }, focus: { path: [3, 8], offset: 22, }, }, root: 'main', }, }, }, ], }; 68:T285b9,

import type { EditorDocumentValue } from 'platejs';
import type { CommentsJSON } from 'platejs/comments';

// Saved native document. Regenerate with apps/www/scripts/generate-rich-text-editor-value.ts.
export const richTextEditorValue: EditorDocumentValue = {
  children: [
    {
      level: 1,
      type: 'heading',
      children: [
        {
          text: 'Welcome to the Plate Playground!',
        },
      ],
    },
    {
      type: 'paragraph',
      children: [
        {
          text: 'Experience a modern rich-text editor built with ',
        },
        {
          type: 'link',
          url: 'https://reactjs.org',
          children: [
            {
              text: 'React',
            },
          ],
        },
        {
          text: ". This playground showcases just a part of Plate's capabilities. ",
        },
        {
          type: 'link',
          url: '/docs',
          children: [
            {
              text: 'Explore the documentation',
            },
          ],
        },
        {
          text: ' to discover more.',
        },
      ],
    },
    {
      level: 2,
      type: 'heading',
      children: [
        {
          text: 'Collaborative Editing',
        },
      ],
    },
    {
      type: 'paragraph',
      children: [
        {
          text: 'Review and refine content seamlessly. Use ',
        },
        {
          type: 'link',
          url: '/docs/suggestion',
          authored: [
            {
              at: 1_791_864_172_518,
              author: 'alice',
              change: '3eebfcc2-04a2-475e-9c41-c1375ad2b72c',
              kind: 'insert',
            },
          ],
          children: [
            {
              authored: [
                {
                  at: 1_791_864_172_518,
                  author: 'alice',
                  change: '3eebfcc2-04a2-475e-9c41-c1375ad2b72c',
                  kind: 'insert',
                },
              ],
              text: 'suggestions',
            },
          ],
        },
        {
          text: '',
        },
        {
          authored: [
            {
              at: 1_791_864_172_518,
              author: 'alice',
              change: '3eebfcc2-04a2-475e-9c41-c1375ad2b72c',
              kind: 'insert',
            },
          ],
          text: ' like this added text',
        },
        {
          text: ' or to ',
        },
        {
          authored: [
            {
              at: 1_791_864_172_425,
              author: 'bob',
              change: '8b7c7323-a04b-4eac-911c-f4b55fb69550',
              kind: 'delete',
            },
          ],
          text: 'mark text for removal',
        },
        {
          text: '. Discuss changes using ',
        },
        {
          type: 'link',
          url: '/docs/comment',
          children: [
            {
              text: 'comments',
            },
          ],
        },
        {
          text: ' on many text segments. You can even have ',
        },
        {
          authored: [
            {
              at: 1_791_864_172_481,
              author: 'charlie',
              change: '11ecbc4a-799d-4ffe-a1ed-d515e9e0c30b',
              kind: 'insert',
            },
          ],
          text: 'overlapping ',
        },
        {
          text: 'annotations!',
        },
      ],
    },
    {
      level: 2,
      type: 'heading',
      children: [
        {
          text: 'AI-Powered Editing',
        },
      ],
    },
    {
      type: 'paragraph',
      children: [
        {
          text: 'Boost your productivity with integrated ',
        },
        {
          type: 'link',
          url: '/docs/ai',
          children: [
            {
              text: 'AI SDK',
            },
          ],
        },
        {
          text: '. Press ',
        },
        {
          kbd: true,
          text: '⌘+J',
        },
        {
          text: ' or ',
        },
        {
          kbd: true,
          text: 'Space',
        },
        {
          text: ' in an empty line to:',
        },
      ],
    },
    {
      indent: 1,
      listType: 'bulleted',
      type: 'paragraph',
      children: [
        {
          text: 'Generate content (continue writing, summarize, explain)',
        },
      ],
    },
    {
      indent: 1,
      listType: 'bulleted',
      type: 'paragraph',
      children: [
        {
          text: 'Edit existing text (improve, fix grammar, change tone)',
        },
      ],
    },
    {
      level: 2,
      type: 'heading',
      children: [
        {
          text: 'Rich Content Editing',
        },
      ],
    },
    {
      type: 'paragraph',
      children: [
        {
          text: 'Structure your content with ',
        },
        {
          type: 'link',
          url: '/docs/heading',
          children: [
            {
              text: 'headings',
            },
          ],
        },
        {
          text: ', ',
        },
        {
          type: 'link',
          url: '/docs/list',
          children: [
            {
              text: 'lists',
            },
          ],
        },
        {
          text: ', and ',
        },
        {
          type: 'link',
          url: '/docs/blockquote',
          children: [
            {
              text: 'quotes',
            },
          ],
        },
        {
          text: '. Apply ',
        },
        {
          type: 'link',
          url: '/docs/basic-marks',
          children: [
            {
              text: 'marks',
            },
          ],
        },
        {
          text: ' like ',
        },
        {
          bold: true,
          text: 'bold',
        },
        {
          text: ', ',
        },
        {
          italic: true,
          text: 'italic',
        },
        {
          text: ', ',
        },
        {
          underline: true,
          text: 'underline',
        },
        {
          text: ', ',
        },
        {
          strikethrough: true,
          text: 'strikethrough',
        },
        {
          text: ', and ',
        },
        {
          code: true,
          text: 'code',
        },
        {
          text: '. Use ',
        },
        {
          type: 'link',
          url: '/docs/autoformat',
          children: [
            {
              text: 'autoformatting',
            },
          ],
        },
        {
          text: ' for ',
        },
        {
          type: 'link',
          url: '/docs/markdown',
          children: [
            {
              text: 'Markdown',
            },
          ],
        },
        {
          text: '-like shortcuts (e.g., ',
        },
        {
          kbd: true,
          text: '* ',
        },
        {
          text: ' for lists, ',
        },
        {
          kbd: true,
          text: '# ',
        },
        {
          text: ' for H1).',
        },
      ],
    },
    {
      type: 'blockquote',
      children: [
        {
          type: 'paragraph',
          children: [
            {
              text: 'Blockquotes can group paragraphs, quoted lists, and reply chains.',
            },
          ],
        },
        {
          type: 'paragraph',
          children: [
            {
              text: 'Markdown blockquotes keep this nested structure instead of flattening it.',
            },
          ],
        },
        {
          indent: 1,
          listType: 'bulleted',
          type: 'paragraph',
          children: [
            {
              text: 'Quoted list item inside the same container.',
            },
          ],
        },
        {
          type: 'blockquote',
          children: [
            {
              type: 'paragraph',
              children: [
                {
                  text: 'Nested blockquotes work here too.',
                },
              ],
            },
          ],
        },
      ],
    },
    {
      language: 'javascript',
      type: 'codeBlock',
      children: [
        {
          text: "function hello() {\n  console.info('Code blocks are supported!');\n}",
        },
      ],
    },
    {
      type: 'paragraph',
      children: [
        {
          text: 'Create ',
        },
        {
          type: 'link',
          url: '/docs/link',
          children: [
            {
              text: 'links',
            },
          ],
        },
        {
          text: ', ',
        },
        {
          type: 'link',
          url: '/docs/mention',
          children: [
            {
              text: '@mention',
            },
          ],
        },
        {
          text: ' users like ',
        },
        {
          label: 'Alice',
          ref: 'alice',
          type: 'mention',
          children: [
            {
              text: '',
            },
          ],
        },
        {
          text: ', or insert ',
        },
        {
          type: 'link',
          url: '/docs/emoji',
          children: [
            {
              text: 'emojis',
            },
          ],
        },
        {
          text: ' ✨. Use the ',
        },
        {
          type: 'link',
          url: '/docs/slash-command',
          children: [
            {
              text: 'slash command',
            },
          ],
        },
        {
          text: ' (/) for quick access to elements.',
        },
      ],
    },
    {
      level: 3,
      type: 'heading',
      children: [
        {
          text: 'How Plate Compares',
        },
      ],
    },
    {
      type: 'paragraph',
      children: [
        {
          text: 'Plate offers many features out-of-the-box as free, open-source plugins.',
        },
      ],
    },
    {
      type: 'table',
      children: [
        {
          type: 'tableRow',
          children: [
            {
              header: true,
              type: 'tableCell',
              children: [
                {
                  type: 'paragraph',
                  children: [
                    {
                      bold: true,
                      text: 'Feature',
                    },
                  ],
                },
              ],
            },
            {
              header: true,
              type: 'tableCell',
              children: [
                {
                  type: 'paragraph',
                  children: [
                    {
                      bold: true,
                      text: 'Plate (Free & OSS)',
                    },
                  ],
                },
              ],
            },
            {
              header: true,
              type: 'tableCell',
              children: [
                {
                  type: 'paragraph',
                  children: [
                    {
                      bold: true,
                      text: 'Tiptap',
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          type: 'tableRow',
          children: [
            {
              type: 'tableCell',
              children: [
                {
                  type: 'paragraph',
                  children: [
                    {
                      text: 'AI',
                    },
                  ],
                },
              ],
            },
            {
              type: 'tableCell',
              children: [
                {
                  textAlign: 'center',
                  type: 'paragraph',
                  children: [
                    {
                      text: '✅',
                    },
                  ],
                },
              ],
            },
            {
              type: 'tableCell',
              children: [
                {
                  type: 'paragraph',
                  children: [
                    {
                      text: 'Paid Extension',
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          type: 'tableRow',
          children: [
            {
              type: 'tableCell',
              children: [
                {
                  type: 'paragraph',
                  children: [
                    {
                      text: 'Comments',
                    },
                  ],
                },
              ],
            },
            {
              type: 'tableCell',
              children: [
                {
                  textAlign: 'center',
                  type: 'paragraph',
                  children: [
                    {
                      text: '✅',
                    },
                  ],
                },
              ],
            },
            {
              type: 'tableCell',
              children: [
                {
                  type: 'paragraph',
                  children: [
                    {
                      text: 'Paid Extension',
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          type: 'tableRow',
          children: [
            {
              type: 'tableCell',
              children: [
                {
                  type: 'paragraph',
                  children: [
                    {
                      text: 'Suggestions',
                    },
                  ],
                },
              ],
            },
            {
              type: 'tableCell',
              children: [
                {
                  textAlign: 'center',
                  type: 'paragraph',
                  children: [
                    {
                      text: '✅',
                    },
                  ],
                },
              ],
            },
            {
              type: 'tableCell',
              children: [
                {
                  type: 'paragraph',
                  children: [
                    {
                      text: 'Paid (Comments Pro)',
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          type: 'tableRow',
          children: [
            {
              type: 'tableCell',
              children: [
                {
                  type: 'paragraph',
                  children: [
                    {
                      text: 'Emoji Picker',
                    },
                  ],
                },
              ],
            },
            {
              type: 'tableCell',
              children: [
                {
                  textAlign: 'center',
                  type: 'paragraph',
                  children: [
                    {
                      text: '✅',
                    },
                  ],
                },
              ],
            },
            {
              type: 'tableCell',
              children: [
                {
                  type: 'paragraph',
                  children: [
                    {
                      text: 'Paid Extension',
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          type: 'tableRow',
          children: [
            {
              type: 'tableCell',
              children: [
                {
                  type: 'paragraph',
                  children: [
                    {
                      text: 'Table of Contents',
                    },
                  ],
                },
              ],
            },
            {
              type: 'tableCell',
              children: [
                {
                  textAlign: 'center',
                  type: 'paragraph',
                  children: [
                    {
                      text: '✅',
                    },
                  ],
                },
              ],
            },
            {
              type: 'tableCell',
              children: [
                {
                  type: 'paragraph',
                  children: [
                    {
                      text: 'Paid Extension',
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          type: 'tableRow',
          children: [
            {
              type: 'tableCell',
              children: [
                {
                  type: 'paragraph',
                  children: [
                    {
                      text: 'Drag Handle',
                    },
                  ],
                },
              ],
            },
            {
              type: 'tableCell',
              children: [
                {
                  textAlign: 'center',
                  type: 'paragraph',
                  children: [
                    {
                      text: '✅',
                    },
                  ],
                },
              ],
            },
            {
              type: 'tableCell',
              children: [
                {
                  type: 'paragraph',
                  children: [
                    {
                      text: 'Paid Extension',
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          type: 'tableRow',
          children: [
            {
              type: 'tableCell',
              children: [
                {
                  type: 'paragraph',
                  children: [
                    {
                      text: 'Collaboration (Yjs)',
                    },
                  ],
                },
              ],
            },
            {
              type: 'tableCell',
              children: [
                {
                  textAlign: 'center',
                  type: 'paragraph',
                  children: [
                    {
                      text: '✅',
                    },
                  ],
                },
              ],
            },
            {
              type: 'tableCell',
              children: [
                {
                  type: 'paragraph',
                  children: [
                    {
                      text: 'Hocuspocus (OSS/Paid)',
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
    },
    {
      level: 3,
      type: 'heading',
      children: [
        {
          text: 'Images and Media',
        },
      ],
    },
    {
      type: 'paragraph',
      children: [
        {
          text: 'Embed rich media like images directly in your content. Supports ',
        },
        {
          type: 'link',
          url: '/docs/media',
          children: [
            {
              text: 'Media uploads',
            },
          ],
        },
        {
          text: ' and ',
        },
        {
          type: 'link',
          url: '/docs/dnd',
          children: [
            {
              text: 'drag & drop',
            },
          ],
        },
        {
          text: ' for a smooth experience.',
        },
      ],
    },
    {
      textAlign: 'center',
      type: 'image',
      url: 'https://images.unsplash.com/photo-1712688930249-98e1963af7bd?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
      width: '75%',
      children: [
        {
          text: 'Images with captions provide context.',
        },
      ],
    },
    {
      name: 'sample.pdf',
      type: 'file',
      url: 'https://s26.q4cdn.com/900411403/files/doc_downloads/test.pdf',
      children: [
        {
          text: '',
        },
      ],
    },
    {
      type: 'audio',
      url: 'https://samplelib.com/lib/preview/mp3/sample-3s.mp3',
      children: [
        {
          text: '',
        },
      ],
    },
    {
      level: 3,
      type: 'heading',
      children: [
        {
          text: 'Table of Contents',
        },
      ],
    },
    {
      type: 'toc',
      children: [
        {
          text: '',
        },
      ],
    },
    {
      type: 'paragraph',
      children: [
        {
          text: '',
        },
      ],
    },
  ],
};

export const richTextEditorComments: CommentsJSON = {
  kind: 'comments',
  version: 1,
  threads: [
    {
      id: 'discussion1',
      createdAt: '2026-09-14T18:18:51.315Z',
      status: 'published',
      excerpt: 'comments',
      userId: 'charlie',
      target: {
        type: 'range',
      },
      messages: [
        {
          id: 'discussion1-comment',
          userId: 'charlie',
          createdAt: '2026-09-14T18:18:51.315Z',
          body: [
            {
              children: [
                {
                  text: 'Comments are a great way to provide feedback and discuss changes.',
                },
              ],
              type: 'paragraph',
            },
          ],
        },
        {
          id: 'discussion1-reply',
          userId: 'bob',
          createdAt: '2026-09-14T18:20:51.315Z',
          body: [
            {
              children: [
                {
                  text: 'Agreed! The link to the docs makes it easy to learn more.',
                },
              ],
              type: 'paragraph',
            },
          ],
        },
      ],
      resolution: null,
    },
    {
      id: 'discussion2',
      createdAt: '2026-09-14T18:23:51.315Z',
      status: 'published',
      excerpt: 'overlapping',
      userId: 'bob',
      target: {
        id: '11ecbc4a-799d-4ffe-a1ed-d515e9e0c30b',
        type: 'change',
      },
      messages: [
        {
          id: 'discussion2-comment',
          userId: 'bob',
          createdAt: '2026-09-14T18:23:51.315Z',
          body: [
            {
              children: [
                {
                  text: 'Nice demonstration of overlapping annotations with both comments and suggestions!',
                },
              ],
              type: 'paragraph',
            },
          ],
        },
        {
          id: 'discussion2-reply',
          userId: 'charlie',
          createdAt: '2026-09-14T18:25:51.315Z',
          body: [
            {
              children: [
                {
                  text: 'This helps users understand how powerful the editor can be.',
                },
              ],
              type: 'paragraph',
            },
          ],
        },
      ],
      resolution: null,
    },
  ],
  ranges: [
    {
      threadId: 'discussion1',
      range: {
        kind: 'range',
        version: 1,
        value: {
          association: 'inward',
          deletion: 'nearest',
          range: {
            anchor: {
              path: [3, 7, 0],
              offset: 0,
            },
            focus: {
              path: [3, 8],
              offset: 22,
            },
          },
          root: 'main',
        },
      },
    },
  ],
};

69:T51b8,'use client'; import { differenceInDays, differenceInHours, differenceInMinutes, format, } from 'date-fns'; import { ArrowUpIcon, CheckIcon, MoreHorizontalIcon, PencilIcon, RotateCcwIcon, TrashIcon, XIcon, } from 'lucide-react'; import { type DecorationAttributes, type Value, NodeApi } from 'platejs'; import type { CommentMessage, CommentMutationResult, CommentThread, } from 'platejs/comments'; import { CommentsPlugin } from 'platejs/comments/react'; import { EditorRoot, useCreateEditor, useEditor, usePluginStore, } from 'platejs/react'; import * as React from 'react'; import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import { Button } from '@/components/ui/button'; import { cn } from '@/lib/utils'; import { BasicMarksKit } from '@/components/editor/basic-marks'; import { BaseBasicMarksKit } from '@/components/editor/basic-marks-static'; import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuTrigger, } from '@/components/editor/dropdown-menu'; import { Editor, EditorContainer, EditorView } from './editor'; export const commentDecorationAttributes: DecorationAttributes = { className: 'border-b-2 border-b-highlight/40 bg-highlight/15 transition-colors hover:border-b-highlight/70 hover:bg-highlight/25 data-comment-active:border-b-highlight! data-comment-active:bg-highlight/30! [&_[data-comment-id]]:border-b-highlight/80 [&_[data-comment-id]]:bg-highlight/25', }; export const CommentKit = [ CommentsPlugin.configure({ decorate: { attributes: commentDecorationAttributes }, }), ]; export const createCommentValue = (text = ''): Value => [ { children: [{ text }], type: 'paragraph' }, ]; const cloneCommentValue = (body: Value): Value => structuredClone(body); const getCommentText = (body: Value) => body.map((node) => NodeApi.string(node)).join('\n'); const normalizeBody = (body: Value) => getCommentText(body).trim() ? cloneCommentValue(body) : null; const EMPTY_COMMENT_IDS = Object.freeze([]) as readonly string[]; export const useCommentUser = (id: string | null) => usePluginStore(CommentsPlugin, (state) => (id ? state.users[id] : undefined)); export const usePendingComment = () => { const { api: comments } = useEditor().plugin(CommentsPlugin); return React.useSyncExternalStore( comments.subscribePending, () => comments.getSnapshot().pending, () => comments.getSnapshot().pending ); }; export const useCommentThread = (id: string) => { const { api: comments } = useEditor().plugin(CommentsPlugin); const subscribe = React.useCallback( (listener: () => void) => comments.subscribeThread(id, listener), [comments, id] ); return React.useSyncExternalStore( subscribe, () => comments.getThread(id), () => comments.getThread(id) ); }; export const useVisibleCommentThreadIds = () => { const portal = useEditor().plugin(CommentsPlugin); const comments = portal.installed ? portal.api : null; const subscribe = React.useCallback( (listener: () => void) => comments?.subscribeVisibleThreadIds(listener) ?? (() => {}), [comments] ); return React.useSyncExternalStore( subscribe, () => comments?.getSnapshot().visibleThreadIds ?? EMPTY_COMMENT_IDS, () => comments?.getSnapshot().visibleThreadIds ?? EMPTY_COMMENT_IDS ); }; export const useDraftCommentThreadIds = () => { const portal = useEditor().plugin(CommentsPlugin); const comments = portal.installed ? portal.api : null; const subscribe = React.useCallback( (listener: () => void) => comments?.subscribeDraftThreadIds(listener) ?? (() => {}), [comments] ); return React.useSyncExternalStore( subscribe, () => comments?.getSnapshot().draftThreadIds ?? EMPTY_COMMENT_IDS, () => comments?.getSnapshot().draftThreadIds ?? EMPTY_COMMENT_IDS ); }; export function CommentComposer(props: { ariaLabel: string; onSubmit: (body: Value) => Promise>; placeholder: string; autoFocus?: boolean; cancelLabel?: string; initialBody?: Value; onCancel?: () => void; onInteractionChange?: (blocked: boolean) => void; }) { return ; } function CommentInput({ ariaLabel, autoFocus = false, cancelLabel = 'Cancel comment', initialBody, onCancel, onInteractionChange, onSubmit, placeholder, showAvatar, }: { ariaLabel: string; onSubmit: (body: Value) => Promise>; placeholder: string; showAvatar: boolean; autoFocus?: boolean; cancelLabel?: string; initialBody?: Value; onCancel?: () => void; onInteractionChange?: (blocked: boolean) => void; }) { const currentUser = useCommentUser(useEditor().userId); const initialValue = React.useMemo( () => cloneCommentValue(initialBody ?? createCommentValue()), [initialBody] ); const commentEditor = useCreateEditor( { plugins: BasicMarksKit, initialValue, }, [initialValue] ); const [canSubmit, setCanSubmit] = React.useState( Boolean(normalizeBody(initialValue)) ); const [saving, setSaving] = React.useState(false); const [failed, setFailed] = React.useState(false); const submitting = React.useRef(false); const cancel = () => { onInteractionChange?.(false); onCancel?.(); }; const submit = async () => { if (submitting.current) return; const nextBody = normalizeBody(commentEditor.read.value().children); if (!nextBody) return; submitting.current = true; setSaving(true); setFailed(false); onInteractionChange?.(true); let applied = false; try { const saved = await onSubmit(nextBody); if (saved.status !== 'applied') { setFailed(true); return; } commentEditor.update({ history: 'skip' }).value.replace({ children: createCommentValue(), selection: null, }); applied = true; setCanSubmit(false); } catch { setFailed(true); } finally { submitting.current = false; setSaving(false); onInteractionChange?.(applied ? false : canSubmit); } }; return (

{ event.preventDefault(); void submit(); }} > {showAvatar && (

{currentUser?.name?.[0] ?? '?'}

)}

{ const nextCanSubmit = Boolean(normalizeBody(value.children)); setCanSubmit(nextCanSubmit); onInteractionChange?.(nextCanSubmit || saving); }} > { if (event.key === 'Escape' && onCancel && !submitting.current) { event.preventDefault(); cancel(); return true; } if ( event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing ) { event.preventDefault(); void submit(); return true; } return undefined; }} placeholder={placeholder} variant="comment" /> {!showAvatar && onCancel && (

)} {showAvatar && (

{canSubmit && onCancel && ( )}

)} {failed && (

Could not save comment. Try again.

)}

); } function CommentBody({ body }: { body: Value }) { const initialValue = React.useMemo(() => cloneCommentValue(body), [body]); const commentEditor = useCreateEditor( { plugins: BaseBasicMarksKit, initialValue }, [initialValue] ); return ( ); } export function CommentThreadCard({ id, onInteractionChange, showReply = true, }: { id: string; onInteractionChange?: (blocked: boolean) => void; showReply?: boolean; }) { const editor = useEditor(); const { api: comments } = editor.plugin(CommentsPlugin); const thread = useCommentThread(id); const [editingId, setEditingId] = React.useState(null); const [replyVersion, setReplyVersion] = React.useState(0); const interactionsRef = React.useRef>(new Set()); const [interactions, setInteractions] = React.useState>( () => new Set() ); const interactionChangeRef = React.useRef(onInteractionChange); React.useEffect(() => { interactionChangeRef.current = onInteractionChange; }, [onInteractionChange]); React.useEffect(() => () => interactionChangeRef.current?.(false), []); const setInteraction = React.useCallback( (key: string, blocked: boolean) => { const { current } = interactionsRef; const next = new Set(current); if (blocked) next.add(key); else next.delete(key); if ( next.size === current.size && [...next].every((entry) => current.has(entry)) ) { return; } interactionsRef.current = next; setInteractions(next); onInteractionChange?.(next.size > 0); }, [onInteractionChange] ); const setReplyInteraction = React.useCallback( (blocked: boolean) => setInteraction('reply', blocked), [setInteraction] ); if (!thread) return null; return (

{thread.messages.map((message, index) => ( 0} editing={editingId === message.id} excerpt={thread.excerpt} id={id} index={index} isLast={index === thread.messages.length - 1} key={message.id} message={message} onEdit={() => { setInteraction(`${message.id}:edit`, true); setEditingId(message.id); }} onEditingChange={(next) => { if (next === null) { setInteraction(`${message.id}:edit`, false); } setEditingId(next); }} onInteractionChange={setInteraction} mine={message.userId === editor.userId} resolved={thread.resolution !== null} showExcerpt={thread.target.type === 'range' && index === 0} status={thread.status} threadLength={thread.messages.length} /> ))} {showReply && (!thread.resolution || interactions.has('reply')) && ( { setReplyInteraction(false); setReplyVersion((version) => version + 1); }} onInteractionChange={setReplyInteraction} onSubmit={(body) => comments.reply(id, body)} placeholder="Reply..." /> )}

); } function CommentMessageRow({ editing, excerpt, id, index, isLast, message, mine, onEdit, onEditingChange, onInteractionChange, interactionBlocked, resolved, showExcerpt, status, threadLength, }: { editing: boolean; interactionBlocked: boolean; excerpt: string; id: string; index: number; isLast: boolean; message: CommentMessage; mine: boolean; onEdit: () => void; onEditingChange: React.Dispatch>; onInteractionChange: (key: string, blocked: boolean) => void; resolved: boolean; showExcerpt: boolean; status: CommentThread['status']; threadLength: number; }) { const { api: comments } = useEditor().plugin(CommentsPlugin); const [menuOpen, setMenuOpen] = React.useState(false); const [saving, setSaving] = React.useState(false); const [failed, setFailed] = React.useState(false); const submitting = React.useRef(false); const user = useCommentUser(message.userId); const mutate = async (operation: 'resolve' | 'reopen' | 'remove') => { if (submitting.current) return; submitting.current = true; setSaving(true); setFailed(false); onInteractionChange(`${message.id}:action`, true); try { const result = await (operation === 'remove' ? comments.removeMessage(id, message.id) : comments[operation](id)); if (result.status !== 'applied') { setFailed(true); return; } if (operation === 'remove') onEditingChange(null); } catch { setFailed(true); } finally { submitting.current = false; setSaving(false); onInteractionChange(`${message.id}:action`, false); } }; return (

{user?.name?.[0] ?? '?'}

{user?.name ?? 'Unknown'}

{formatCommentDate(message.editedAt ?? message.createdAt)} {message.editedAt && (edited)} {resolved && index === 0 && Resolved} {status === 'draft' && index === 0 && ( AI draft )}

{mine && !editing && (

{index === 0 && ( )} Edit comment void mutate('remove')} > Delete comment

)}

{showExcerpt && (

{threadLength > 1 && (

)}

{excerpt &&

{excerpt}

}

)}

{!isLast && (

)} {editing ? ( onEditingChange(null)} onSubmit={async (body) => { const saved = await comments.edit(id, message.id, body); if (saved.status === 'applied') onEditingChange(null); return saved; }} placeholder="Edit comment" showAvatar={false} /> ) : ( )} {failed && (

Could not save comment. Try again.

)}

); } export const formatCommentDate = (date: Date | string) => { const now = new Date(); const diffMinutes = differenceInMinutes(now, date); const diffHours = differenceInHours(now, date); const diffDays = differenceInDays(now, date); if (diffMinutes < 60) return `${diffMinutes}m`; if (diffHours < 24) return `${diffHours}h`; if (diffDays < 2) return `${diffDays}d`; return format(date, 'MM/dd/yyyy'); }; 6a:T2e899,

'use client';

import {
  differenceInDays,
  differenceInHours,
  differenceInMinutes,
  format,
} from 'date-fns';
import {
  ArrowUpIcon,
  CheckIcon,
  MoreHorizontalIcon,
  PencilIcon,
  RotateCcwIcon,
  TrashIcon,
  XIcon,
} from 'lucide-react';
import { type DecorationAttributes, type Value, NodeApi } from 'platejs';
import type {
  CommentMessage,
  CommentMutationResult,
  CommentThread,
} from 'platejs/comments';
import { CommentsPlugin } from 'platejs/comments/react';
import {
  EditorRoot,
  useCreateEditor,
  useEditor,
  usePluginStore,
} from 'platejs/react';
import * as React from 'react';

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import { BasicMarksKit } from '@/components/editor/basic-marks';
import { BaseBasicMarksKit } from '@/components/editor/basic-marks-static';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/editor/dropdown-menu';

import { Editor, EditorContainer, EditorView } from './editor';

export const commentDecorationAttributes: DecorationAttributes = {
  className:
    'border-b-2 border-b-highlight/40 bg-highlight/15 transition-colors hover:border-b-highlight/70 hover:bg-highlight/25 data-comment-active:border-b-highlight! data-comment-active:bg-highlight/30! [&_[data-comment-id]]:border-b-highlight/80 [&_[data-comment-id]]:bg-highlight/25',
};

export const CommentKit = [
  CommentsPlugin.configure({
    decorate: { attributes: commentDecorationAttributes },
  }),
];

export const createCommentValue = (text = ''): Value => [
  { children: [{ text }], type: 'paragraph' },
];

const cloneCommentValue = (body: Value): Value => structuredClone(body);
const getCommentText = (body: Value) =>
  body.map((node) => NodeApi.string(node)).join('\n');
const normalizeBody = (body: Value) =>
  getCommentText(body).trim() ? cloneCommentValue(body) : null;

const EMPTY_COMMENT_IDS = Object.freeze([]) as readonly string[];

export const useCommentUser = (id: string | null) =>
  usePluginStore(CommentsPlugin, (state) => (id ? state.users[id] : undefined));

export const usePendingComment = () => {
  const { api: comments } = useEditor().plugin(CommentsPlugin);

  return React.useSyncExternalStore(
    comments.subscribePending,
    () => comments.getSnapshot().pending,
    () => comments.getSnapshot().pending
  );
};

export const useCommentThread = (id: string) => {
  const { api: comments } = useEditor().plugin(CommentsPlugin);
  const subscribe = React.useCallback(
    (listener: () => void) => comments.subscribeThread(id, listener),
    [comments, id]
  );

  return React.useSyncExternalStore(
    subscribe,
    () => comments.getThread(id),
    () => comments.getThread(id)
  );
};

export const useVisibleCommentThreadIds = () => {
  const portal = useEditor().plugin(CommentsPlugin);
  const comments = portal.installed ? portal.api : null;
  const subscribe = React.useCallback(
    (listener: () => void) =>
      comments?.subscribeVisibleThreadIds(listener) ?? (() => {}),
    [comments]
  );

  return React.useSyncExternalStore(
    subscribe,
    () => comments?.getSnapshot().visibleThreadIds ?? EMPTY_COMMENT_IDS,
    () => comments?.getSnapshot().visibleThreadIds ?? EMPTY_COMMENT_IDS
  );
};

export const useDraftCommentThreadIds = () => {
  const portal = useEditor().plugin(CommentsPlugin);
  const comments = portal.installed ? portal.api : null;
  const subscribe = React.useCallback(
    (listener: () => void) =>
      comments?.subscribeDraftThreadIds(listener) ?? (() => {}),
    [comments]
  );

  return React.useSyncExternalStore(
    subscribe,
    () => comments?.getSnapshot().draftThreadIds ?? EMPTY_COMMENT_IDS,
    () => comments?.getSnapshot().draftThreadIds ?? EMPTY_COMMENT_IDS
  );
};

export function CommentComposer(props: {
  ariaLabel: string;
  onSubmit: (body: Value) => Promise<CommentMutationResult<string | undefined>>;
  placeholder: string;
  autoFocus?: boolean;
  cancelLabel?: string;
  initialBody?: Value;
  onCancel?: () => void;
  onInteractionChange?: (blocked: boolean) => void;
}) {
  return <CommentInput {...props} showAvatar />;
}

function CommentInput({
  ariaLabel,
  autoFocus = false,
  cancelLabel = 'Cancel comment',
  initialBody,
  onCancel,
  onInteractionChange,
  onSubmit,
  placeholder,
  showAvatar,
}: {
  ariaLabel: string;
  onSubmit: (body: Value) => Promise<CommentMutationResult<string | undefined>>;
  placeholder: string;
  showAvatar: boolean;
  autoFocus?: boolean;
  cancelLabel?: string;
  initialBody?: Value;
  onCancel?: () => void;
  onInteractionChange?: (blocked: boolean) => void;
}) {
  const currentUser = useCommentUser(useEditor().userId);
  const initialValue = React.useMemo(
    () => cloneCommentValue(initialBody ?? createCommentValue()),
    [initialBody]
  );
  const commentEditor = useCreateEditor(
    {
      plugins: BasicMarksKit,
      initialValue,
    },
    [initialValue]
  );
  const [canSubmit, setCanSubmit] = React.useState(
    Boolean(normalizeBody(initialValue))
  );
  const [saving, setSaving] = React.useState(false);
  const [failed, setFailed] = React.useState(false);
  const submitting = React.useRef(false);
  const cancel = () => {
    onInteractionChange?.(false);
    onCancel?.();
  };
  const submit = async () => {
    if (submitting.current) return;
    const nextBody = normalizeBody(commentEditor.read.value().children);
    if (!nextBody) return;
    submitting.current = true;
    setSaving(true);
    setFailed(false);
    onInteractionChange?.(true);
    let applied = false;
    try {
      const saved = await onSubmit(nextBody);
      if (saved.status !== 'applied') {
        setFailed(true);
        return;
      }
      commentEditor.update({ history: 'skip' }).value.replace({
        children: createCommentValue(),
        selection: null,
      });
      applied = true;
      setCanSubmit(false);
    } catch {
      setFailed(true);
    } finally {
      submitting.current = false;
      setSaving(false);
      onInteractionChange?.(applied ? false : canSubmit);
    }
  };

  return (
    <form
      aria-busy={saving}
      className="flex w-full"
      data-editor-keep-selection-visible
      onSubmit={(event) => {
        event.preventDefault();
        void submit();
      }}
    >
      {showAvatar && (
        <div className="mt-2 mr-1 shrink-0">
          <Avatar className="size-5">
            <AvatarImage alt={currentUser?.name} src={currentUser?.avatarUrl} />
            <AvatarFallback>{currentUser?.name?.[0] ?? '?'}</AvatarFallback>
          </Avatar>
        </div>
      )}

      <div className="relative flex grow flex-col gap-2">
        <EditorRoot
          editor={commentEditor}
          readOnly={saving}
          onValueChange={({ value }) => {
            const nextCanSubmit = Boolean(normalizeBody(value.children));
            setCanSubmit(nextCanSubmit);
            onInteractionChange?.(nextCanSubmit || saving);
          }}
        >
          <EditorContainer variant="comment">
            <Editor
              aria-label={ariaLabel}
              autoComplete="off"
              autoFocus={autoFocus}
              className={cn(
                'min-h-[25px] grow pt-0.5',
                showAvatar ? 'pr-8' : 'pr-16'
              )}
              onKeyDown={(event) => {
                if (event.key === 'Escape' && onCancel && !submitting.current) {
                  event.preventDefault();
                  cancel();
                  return true;
                }
                if (
                  event.key === 'Enter' &&
                  !event.shiftKey &&
                  !event.nativeEvent.isComposing
                ) {
                  event.preventDefault();
                  void submit();
                  return true;
                }
                return undefined;
              }}
              placeholder={placeholder}
              variant="comment"
            />

            {!showAvatar && onCancel && (
              <div className="ml-auto flex shrink-0 gap-1">
                <Button
                  aria-label="Cancel comment"
                  className="size-[28px]"
                  disabled={saving}
                  onClick={cancel}
                  size="icon"
                  type="button"
                  variant="ghost"
                >
                  <span className="flex size-5 shrink-0 items-center justify-center rounded-full bg-primary/40">
                    <XIcon className="size-3 stroke-[3px] text-background" />
                  </span>
                </Button>
                <Button
                  aria-label="Send comment"
                  disabled={!canSubmit || saving}
                  size="icon"
                  type="submit"
                  variant="ghost"
                >
                  <span className="flex size-5 shrink-0 items-center justify-center rounded-full bg-brand">
                    <CheckIcon className="size-3 stroke-[3px] text-background" />
                  </span>
                </Button>
              </div>
            )}

            {showAvatar && (
              <div className="absolute right-0.5 bottom-0.5 ml-auto flex items-center gap-1">
                {canSubmit && onCancel && (
                  <Button
                    aria-label={cancelLabel}
                    disabled={saving}
                    onClick={cancel}
                    size="sm"
                    type="button"
                    variant="ghost"
                  >
                    Cancel
                  </Button>
                )}
                <Button
                  aria-label="Send comment"
                  className="size-6 shrink-0"
                  disabled={!canSubmit || saving}
                  size="icon"
                  type="submit"
                  variant="ghost"
                >
                  <span className="flex size-6 items-center justify-center rounded-full">
                    <ArrowUpIcon />
                  </span>
                </Button>
              </div>
            )}
          </EditorContainer>
        </EditorRoot>
        {failed && (
          <p className="text-xs text-destructive" role="alert">
            Could not save comment. Try again.
          </p>
        )}
      </div>
    </form>
  );
}

function CommentBody({ body }: { body: Value }) {
  const initialValue = React.useMemo(() => cloneCommentValue(body), [body]);
  const commentEditor = useCreateEditor(
    { plugins: BaseBasicMarksKit, initialValue },
    [initialValue]
  );

  return (
    <EditorView
      className="min-h-0 w-auto grow px-1 py-1.5 text-sm"
      editor={commentEditor}
      variant="comment"
    />
  );
}

export function CommentThreadCard({
  id,
  onInteractionChange,
  showReply = true,
}: {
  id: string;
  onInteractionChange?: (blocked: boolean) => void;
  showReply?: boolean;
}) {
  const editor = useEditor();
  const { api: comments } = editor.plugin(CommentsPlugin);
  const thread = useCommentThread(id);
  const [editingId, setEditingId] = React.useState<string | null>(null);
  const [replyVersion, setReplyVersion] = React.useState(0);
  const interactionsRef = React.useRef<ReadonlySet<string>>(new Set());
  const [interactions, setInteractions] = React.useState<ReadonlySet<string>>(
    () => new Set()
  );
  const interactionChangeRef = React.useRef(onInteractionChange);
  React.useEffect(() => {
    interactionChangeRef.current = onInteractionChange;
  }, [onInteractionChange]);
  React.useEffect(() => () => interactionChangeRef.current?.(false), []);
  const setInteraction = React.useCallback(
    (key: string, blocked: boolean) => {
      const { current } = interactionsRef;
      const next = new Set(current);
      if (blocked) next.add(key);
      else next.delete(key);
      if (
        next.size === current.size &&
        [...next].every((entry) => current.has(entry))
      ) {
        return;
      }
      interactionsRef.current = next;
      setInteractions(next);
      onInteractionChange?.(next.size > 0);
    },
    [onInteractionChange]
  );
  const setReplyInteraction = React.useCallback(
    (blocked: boolean) => setInteraction('reply', blocked),
    [setInteraction]
  );
  if (!thread) return null;

  return (
    <article
      className="relative"
      data-comment-thread={id}
      data-status={thread.status}
    >
      {thread.messages.map((message, index) => (
        <CommentMessageRow
          interactionBlocked={interactions.size > 0}
          editing={editingId === message.id}
          excerpt={thread.excerpt}
          id={id}
          index={index}
          isLast={index === thread.messages.length - 1}
          key={message.id}
          message={message}
          onEdit={() => {
            setInteraction(`${message.id}:edit`, true);
            setEditingId(message.id);
          }}
          onEditingChange={(next) => {
            if (next === null) {
              setInteraction(`${message.id}:edit`, false);
            }
            setEditingId(next);
          }}
          onInteractionChange={setInteraction}
          mine={message.userId === editor.userId}
          resolved={thread.resolution !== null}
          showExcerpt={thread.target.type === 'range' && index === 0}
          status={thread.status}
          threadLength={thread.messages.length}
        />
      ))}

      {showReply && (!thread.resolution || interactions.has('reply')) && (
        <CommentComposer
          ariaLabel="Reply to thread"
          cancelLabel="Cancel reply"
          key={replyVersion}
          onCancel={() => {
            setReplyInteraction(false);
            setReplyVersion((version) => version + 1);
          }}
          onInteractionChange={setReplyInteraction}
          onSubmit={(body) => comments.reply(id, body)}
          placeholder="Reply..."
        />
      )}
    </article>
  );
}

function CommentMessageRow({
  editing,
  excerpt,
  id,
  index,
  isLast,
  message,
  mine,
  onEdit,
  onEditingChange,
  onInteractionChange,
  interactionBlocked,
  resolved,
  showExcerpt,
  status,
  threadLength,
}: {
  editing: boolean;
  interactionBlocked: boolean;
  excerpt: string;
  id: string;
  index: number;
  isLast: boolean;
  message: CommentMessage;
  mine: boolean;
  onEdit: () => void;
  onEditingChange: React.Dispatch<React.SetStateAction<string | null>>;
  onInteractionChange: (key: string, blocked: boolean) => void;
  resolved: boolean;
  showExcerpt: boolean;
  status: CommentThread['status'];
  threadLength: number;
}) {
  const { api: comments } = useEditor().plugin(CommentsPlugin);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [saving, setSaving] = React.useState(false);
  const [failed, setFailed] = React.useState(false);
  const submitting = React.useRef(false);
  const user = useCommentUser(message.userId);
  const mutate = async (operation: 'resolve' | 'reopen' | 'remove') => {
    if (submitting.current) return;
    submitting.current = true;
    setSaving(true);
    setFailed(false);
    onInteractionChange(`${message.id}:action`, true);
    try {
      const result = await (operation === 'remove'
        ? comments.removeMessage(id, message.id)
        : comments[operation](id));
      if (result.status !== 'applied') {
        setFailed(true);
        return;
      }
      if (operation === 'remove') onEditingChange(null);
    } catch {
      setFailed(true);
    } finally {
      submitting.current = false;
      setSaving(false);
      onInteractionChange(`${message.id}:action`, false);
    }
  };

  return (
    <div
      aria-busy={saving}
      className="focus-within:[&>div>.editor-comment-actions]:pointer-events-auto focus-within:[&>div>.editor-comment-actions]:opacity-100 hover:[&>div>.editor-comment-actions]:pointer-events-auto hover:[&>div>.editor-comment-actions]:opacity-100"
      data-comment-message={message.id}
    >
      <div className="relative flex items-center">
        <Avatar className="size-5">
          <AvatarImage alt={user?.name} src={user?.avatarUrl} />
          <AvatarFallback>{user?.name?.[0] ?? '?'}</AvatarFallback>
        </Avatar>
        <h4 className="mx-2 text-sm leading-none font-semibold">
          {user?.name ?? 'Unknown'}
        </h4>
        <div className="text-xs leading-none text-muted-foreground/80">
          <span className="mr-1">
            {formatCommentDate(message.editedAt ?? message.createdAt)}
          </span>
          {message.editedAt && <span>(edited)</span>}
          {resolved && index === 0 && <span className="ml-1">Resolved</span>}
          {status === 'draft' && index === 0 && (
            <span className="ml-1">AI draft</span>
          )}
        </div>

        {mine && !editing && (
          <div
            className={cn(
              'editor-comment-actions pointer-events-none absolute top-0 right-0 flex gap-1 opacity-0 [@media(hover:none)]:pointer-events-auto [@media(hover:none)]:opacity-100',
              menuOpen && 'pointer-events-auto opacity-100'
            )}
          >
            {index === 0 && (
              <Button
                aria-label={resolved ? 'Reopen thread' : 'Resolve thread'}
                className="h-6 p-1 text-muted-foreground"
                disabled={saving}
                onClick={() => void mutate(resolved ? 'reopen' : 'resolve')}
                type="button"
                variant="ghost"
              >
                {resolved ? (
                  <RotateCcwIcon className="size-4" />
                ) : (
                  <CheckIcon className="size-4" />
                )}
              </Button>
            )}

            <DropdownMenu
              modal={false}
              open={menuOpen}
              onOpenChange={setMenuOpen}
            >
              <DropdownMenuTrigger>
                <Button
                  aria-label="More comment actions"
                  className="h-6 p-1 text-muted-foreground"
                  disabled={saving}
                  type="button"
                  variant="ghost"
                >
                  <MoreHorizontalIcon className="size-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent className="w-48">
                <DropdownMenuGroup>
                  <DropdownMenuItem disabled={saving} onClick={onEdit}>
                    <PencilIcon className="size-4" />
                    Edit comment
                  </DropdownMenuItem>
                  <DropdownMenuItem
                    disabled={saving || interactionBlocked}
                    onClick={() => void mutate('remove')}
                  >
                    <TrashIcon className="size-4" />
                    Delete comment
                  </DropdownMenuItem>
                </DropdownMenuGroup>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        )}
      </div>

      {showExcerpt && (
        <div
          className="text-subtle-foreground relative mt-1 flex pl-[32px] text-sm"
          data-comment-excerpt=""
        >
          {threadLength > 1 && (
            <div className="absolute top-[5px] left-3 h-full w-0.5 shrink-0 bg-muted" />
          )}
          <div className="my-px w-0.5 shrink-0 bg-highlight" />
          {excerpt && <div className="ml-2">{excerpt}</div>}
        </div>
      )}

      <div className="relative my-1 pl-[26px]">
        {!isLast && (
          <div className="absolute top-0 left-3 h-full w-0.5 shrink-0 bg-muted" />
        )}
        {editing ? (
          <CommentInput
            ariaLabel="Edit comment"
            autoFocus
            initialBody={message.body}
            onCancel={() => onEditingChange(null)}
            onSubmit={async (body) => {
              const saved = await comments.edit(id, message.id, body);
              if (saved.status === 'applied') onEditingChange(null);
              return saved;
            }}
            placeholder="Edit comment"
            showAvatar={false}
          />
        ) : (
          <CommentBody body={message.body} />
        )}
        {failed && (
          <p className="text-xs text-destructive" role="alert">
            Could not save comment. Try again.
          </p>
        )}
      </div>
    </div>
  );
}

export const formatCommentDate = (date: Date | string) => {
  const now = new Date();
  const diffMinutes = differenceInMinutes(now, date);
  const diffHours = differenceInHours(now, date);
  const diffDays = differenceInDays(now, date);

  if (diffMinutes < 60) return `${diffMinutes}m`;
  if (diffHours < 24) return `${diffHours}h`;
  if (diffDays < 2) return `${diffDays}d`;

  return format(date, 'MM/dd/yyyy');
};

6b:T8ca,'use client'; import { BoldRules, CodeRules, HighlightRules, ItalicRules, MarkComboRules, ScriptRules, StrikethroughRules, UnderlineRules, } from 'platejs'; import { BoldPlugin, CodePlugin, HighlightPlugin, ItalicPlugin, KbdPlugin, ScriptPlugin, StrikethroughPlugin, UnderlinePlugin, } from 'platejs/react'; import { CodeLeaf } from '@/components/editor/code'; import { HighlightLeaf } from '@/components/editor/highlight'; import { KbdLeaf } from '@/components/editor/kbd'; export const BasicMarksKit = [ BoldPlugin.configure({ inputRules: [ BoldRules.markdown({ variant: '*' }), BoldRules.markdown({ variant: '_' }), MarkComboRules.markdown({ variant: 'boldItalic' }), MarkComboRules.markdown({ variant: 'boldUnderline' }), MarkComboRules.markdown({ variant: 'boldItalicUnderline' }), MarkComboRules.markdown({ variant: 'italicUnderline' }), ], }), ItalicPlugin.configure({ inputRules: [ ItalicRules.markdown({ variant: '*' }), ItalicRules.markdown({ variant: '_' }), ], }), UnderlinePlugin.configure({ inputRules: [UnderlineRules.markdown()], }), CodePlugin.configure({ component: CodeLeaf, inputRules: [CodeRules.markdown()], shortcuts: { toggle: { keys: 'mod+e' } }, }), StrikethroughPlugin.configure({ inputRules: [StrikethroughRules.markdown()], shortcuts: { toggle: { keys: 'mod+shift+x' } }, }), ScriptPlugin.configure({ inputRules: [ ScriptRules.markdown({ value: 'sub' }), ScriptRules.markdown({ value: 'sup' }), ], shortcuts: { subscript: { keys: 'mod+comma', handler: ({ editor }) => { editor.plugin(ScriptPlugin).update.toggle('sub'); }, }, superscript: { keys: 'mod+period', handler: ({ editor }) => { editor.plugin(ScriptPlugin).update.toggle('sup'); }, }, }, }), HighlightPlugin.configure({ component: HighlightLeaf, inputRules: [ HighlightRules.markdown({ variant: '==' }), HighlightRules.markdown({ variant: '≡' }), ], shortcuts: { toggle: { keys: 'mod+shift+h' } }, }), KbdPlugin.configure({ component: KbdLeaf }), ] as const; 6c:T4620,

'use client';

import {
  BoldRules,
  CodeRules,
  HighlightRules,
  ItalicRules,
  MarkComboRules,
  ScriptRules,
  StrikethroughRules,
  UnderlineRules,
} from 'platejs';
import {
  BoldPlugin,
  CodePlugin,
  HighlightPlugin,
  ItalicPlugin,
  KbdPlugin,
  ScriptPlugin,
  StrikethroughPlugin,
  UnderlinePlugin,
} from 'platejs/react';

import { CodeLeaf } from '@/components/editor/code';
import { HighlightLeaf } from '@/components/editor/highlight';
import { KbdLeaf } from '@/components/editor/kbd';

export const BasicMarksKit = [
  BoldPlugin.configure({
    inputRules: [
      BoldRules.markdown({ variant: '*' }),
      BoldRules.markdown({ variant: '_' }),
      MarkComboRules.markdown({ variant: 'boldItalic' }),
      MarkComboRules.markdown({ variant: 'boldUnderline' }),
      MarkComboRules.markdown({ variant: 'boldItalicUnderline' }),
      MarkComboRules.markdown({ variant: 'italicUnderline' }),
    ],
  }),
  ItalicPlugin.configure({
    inputRules: [
      ItalicRules.markdown({ variant: '*' }),
      ItalicRules.markdown({ variant: '_' }),
    ],
  }),
  UnderlinePlugin.configure({
    inputRules: [UnderlineRules.markdown()],
  }),
  CodePlugin.configure({
    component: CodeLeaf,
    inputRules: [CodeRules.markdown()],
    shortcuts: { toggle: { keys: 'mod+e' } },
  }),
  StrikethroughPlugin.configure({
    inputRules: [StrikethroughRules.markdown()],
    shortcuts: { toggle: { keys: 'mod+shift+x' } },
  }),
  ScriptPlugin.configure({
    inputRules: [
      ScriptRules.markdown({ value: 'sub' }),
      ScriptRules.markdown({ value: 'sup' }),
    ],
    shortcuts: {
      subscript: {
        keys: 'mod+comma',
        handler: ({ editor }) => {
          editor.plugin(ScriptPlugin).update.toggle('sub');
        },
      },
      superscript: {
        keys: 'mod+period',
        handler: ({ editor }) => {
          editor.plugin(ScriptPlugin).update.toggle('sup');
        },
      },
    },
  }),
  HighlightPlugin.configure({
    component: HighlightLeaf,
    inputRules: [
      HighlightRules.markdown({ variant: '==' }),
      HighlightRules.markdown({ variant: '≡' }),
    ],
    shortcuts: { toggle: { keys: 'mod+shift+h' } },
  }),
  KbdPlugin.configure({ component: KbdLeaf }),
] as const;

6d:T7e6,'use client'; import type { ScriptValue } from 'platejs'; import { type BoldPlugin, type CodePlugin, type HighlightPlugin, type ItalicPlugin, type KbdPlugin, type ScriptPlugin, type StrikethroughPlugin, type UnderlinePlugin, useEditor, useEditorReadOnly, useOptionalEditor, useEditorSelector, } from 'platejs/react'; import * as React from 'react'; import { ToolbarButton } from '@/components/editor/toolbar'; type BooleanMarkPlugin = | typeof BoldPlugin | typeof CodePlugin | typeof HighlightPlugin | typeof ItalicPlugin | typeof KbdPlugin | typeof StrikethroughPlugin | typeof UnderlinePlugin; export function MarkToolbarButton( props: React.ComponentProps & ( | { plugin: BooleanMarkPlugin; value?: never; } | { plugin: typeof ScriptPlugin; value: ScriptValue; } ) ) { const editor = useOptionalEditor(); if (!editor) { const { plugin, value, ...buttonProps } = props; return ; } return ; } function MountedMarkToolbarButton({ plugin, value, ...props }: React.ComponentProps) { const editor = useEditor(); const readOnly = useEditorReadOnly(); const { installed } = editor.plugin(plugin); const pressed = useEditorSelector((innerEditor) => { const portal = innerEditor.plugin(plugin); return portal.installed && portal.read.isActive(value); }); return ( { if (editor.read.view.isReadOnly() || !editor.plugin(plugin).installed) { return; } if (value === undefined) { editor.plugin(plugin).update.toggle(); } else { editor.plugin(plugin).update.toggle(value); } editor.api.dom.focus(); }} /> ); } 6e:T4fce,

'use client';

import type { ScriptValue } from 'platejs';
import {
  type BoldPlugin,
  type CodePlugin,
  type HighlightPlugin,
  type ItalicPlugin,
  type KbdPlugin,
  type ScriptPlugin,
  type StrikethroughPlugin,
  type UnderlinePlugin,
  useEditor,
  useEditorReadOnly,
  useOptionalEditor,
  useEditorSelector,
} from 'platejs/react';
import * as React from 'react';

import { ToolbarButton } from '@/components/editor/toolbar';

type BooleanMarkPlugin =
  | typeof BoldPlugin
  | typeof CodePlugin
  | typeof HighlightPlugin
  | typeof ItalicPlugin
  | typeof KbdPlugin
  | typeof StrikethroughPlugin
  | typeof UnderlinePlugin;

export function MarkToolbarButton(
  props: React.ComponentProps<typeof ToolbarButton> &
    (
      | {
          plugin: BooleanMarkPlugin;
          value?: never;
        }
      | {
          plugin: typeof ScriptPlugin;
          value: ScriptValue;
        }
    )
) {
  const editor = useOptionalEditor();
  if (!editor) {
    const { plugin, value, ...buttonProps } = props;
    return <ToolbarButton {...buttonProps} disabled />;
  }
  return <MountedMarkToolbarButton {...props} />;
}

function MountedMarkToolbarButton({
  plugin,
  value,
  ...props
}: React.ComponentProps<typeof MarkToolbarButton>) {
  const editor = useEditor();
  const readOnly = useEditorReadOnly();
  const { installed } = editor.plugin(plugin);
  const pressed = useEditorSelector((innerEditor) => {
    const portal = innerEditor.plugin(plugin);
    return portal.installed && portal.read.isActive(value);
  });

  return (
    <ToolbarButton
      {...props}
      disabled={props.disabled || readOnly || !installed}
      pressed={pressed}
      onClick={() => {
        if (editor.read.view.isReadOnly() || !editor.plugin(plugin).installed) {
          return;
        }
        if (value === undefined) {
          editor.plugin(plugin).update.toggle();
        } else {
          editor.plugin(plugin).update.toggle(value);
        }

        editor.api.dom.focus();
      }}
    />
  );
}

6f:T2303,'use client'; import { Toolbar as ToolbarPrimitive } from '@base-ui/react/toolbar'; import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'; import { type VariantProps, cva } from 'class-variance-authority'; import { ChevronDown } from 'lucide-react'; import * as React from 'react'; import { cn } from '@/lib/utils'; import { ToolbarOverlayProvider, useToolbarOverlayTrigger, } from '@/components/editor/toolbar-overlay'; export function Toolbar({ className, onOverlayOpenChange, ...props }: ToolbarPrimitive.Root.Props & { onOverlayOpenChange?: (open: boolean) => void; }) { return ( ); } const toolbarButtonVariants = cva( 'cn-toggle group/toggle inline-flex cursor-pointer items-center justify-center whitespace-nowrap outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0', { defaultVariants: { size: 'default', variant: 'default', }, variants: { size: { default: 'cn-toggle-size-default', lg: 'cn-toggle-size-lg', sm: 'cn-toggle-size-sm', }, variant: { default: 'cn-toggle-variant-default', outline: 'cn-toggle-variant-outline', }, }, } ); const dropdownArrowVariants = cva( 'cn-toggle inline-flex items-center justify-center rounded-r-md text-foreground disabled:pointer-events-none disabled:opacity-50', { defaultVariants: { size: 'sm', variant: 'default', }, variants: { size: { default: 'h-9 w-6', lg: 'h-10 w-8', sm: 'h-8 w-4', }, variant: { default: 'cn-toggle-variant-default', outline: 'cn-toggle-variant-outline border-l-0', }, }, } ); export function ToolbarButton({ children, className, isDropdown, onKeyDown, onMouseDown, onPointerDown, pressed, size = 'sm', tooltip, tooltipContentProps, tooltipProps, tooltipTriggerProps, variant, ...props }: { isDropdown?: boolean; pressed?: boolean; tooltip?: React.ReactNode; tooltipContentProps?: Omit; tooltipProps?: Omit; tooltipTriggerProps?: Omit< TooltipPrimitive.Trigger.Props, 'render' | 'children' >; } & Omit & VariantProps) { const reportOverlayOpening = useToolbarOverlayTrigger(props); const button = ( { if ( !props.disabled && ['Enter', ' ', 'ArrowDown'].includes(event.key) ) { reportOverlayOpening(); } onKeyDown?.(event); }} onMouseDown={(event) => { event.preventDefault(); onMouseDown?.(event); }} onPointerDown={(event) => { if (!props.disabled && event.button === 0 && !event.ctrlKey) { reportOverlayOpening(); } onPointerDown?.(event); }} > {isDropdown ? ( <>

{children}

) : ( children )} ); if (!tooltip) return button; return ( {tooltip} ); } export function ToolbarSplitButton({ className, pressed, ...props }: React.ComponentPropsWithoutRef<'div'> & { pressed?: boolean }) { return (

); } export function ToolbarSplitButtonPrimary({ children, className, onKeyDown, onMouseDown, onPointerDown, size = 'sm', variant, ...props }: Omit< React.ComponentPropsWithoutRef, 'size' > & VariantProps) { const reportOverlayOpening = useToolbarOverlayTrigger(props); return ( { if ( !props.disabled && ['Enter', ' ', 'ArrowDown'].includes(event.key) ) { reportOverlayOpening(); } onKeyDown?.(event); }} onMouseDown={(event) => { event.preventDefault(); onMouseDown?.(event); }} onPointerDown={(event) => { if (!props.disabled && event.button === 0 && !event.ctrlKey) { reportOverlayOpening(); } onPointerDown?.(event); }} > {children} ); } export function ToolbarSplitButtonSecondary({ className, onKeyDown, onMouseDown, onPointerDown, size, variant, ...props }: React.ComponentPropsWithoutRef & VariantProps) { const reportOverlayOpening = useToolbarOverlayTrigger(props); return ( { if ( !props.disabled && ['Enter', ' ', 'ArrowDown'].includes(event.key) ) { reportOverlayOpening(); } onKeyDown?.(event); }} onMouseDown={(event) => { event.preventDefault(); onMouseDown?.(event); }} onPointerDown={(event) => { if (!props.disabled && event.button === 0 && !event.ctrlKey) { reportOverlayOpening(); } onPointerDown?.(event); }} > ); } export function ToolbarGroup({ children, className, }: React.ComponentProps<'div'>) { return (

{children}

); } export function ToolbarMenuGroup({ children, className, label, ...props }: React.ComponentProps<'div'> & { label?: string }) { return ( <>

{label && (

{label}

)} {children}

); } 70:T12eb7,

'use client';

import { Toolbar as ToolbarPrimitive } from '@base-ui/react/toolbar';
import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
import { type VariantProps, cva } from 'class-variance-authority';
import { ChevronDown } from 'lucide-react';
import * as React from 'react';

import { cn } from '@/lib/utils';
import {
  ToolbarOverlayProvider,
  useToolbarOverlayTrigger,
} from '@/components/editor/toolbar-overlay';

export function Toolbar({
  className,
  onOverlayOpenChange,
  ...props
}: ToolbarPrimitive.Root.Props & {
  onOverlayOpenChange?: (open: boolean) => void;
}) {
  return (
    <ToolbarOverlayProvider onOpenChange={onOverlayOpenChange}>
      <ToolbarPrimitive.Root
        className={cn('relative flex select-none items-center', className)}
        {...props}
      />
    </ToolbarOverlayProvider>
  );
}

const toolbarButtonVariants = cva(
  'cn-toggle group/toggle inline-flex cursor-pointer items-center justify-center whitespace-nowrap outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
  {
    defaultVariants: {
      size: 'default',
      variant: 'default',
    },
    variants: {
      size: {
        default: 'cn-toggle-size-default',
        lg: 'cn-toggle-size-lg',
        sm: 'cn-toggle-size-sm',
      },
      variant: {
        default: 'cn-toggle-variant-default',
        outline: 'cn-toggle-variant-outline',
      },
    },
  }
);

const dropdownArrowVariants = cva(
  'cn-toggle inline-flex items-center justify-center rounded-r-md text-foreground disabled:pointer-events-none disabled:opacity-50',
  {
    defaultVariants: {
      size: 'sm',
      variant: 'default',
    },
    variants: {
      size: {
        default: 'h-9 w-6',
        lg: 'h-10 w-8',
        sm: 'h-8 w-4',
      },
      variant: {
        default: 'cn-toggle-variant-default',
        outline: 'cn-toggle-variant-outline border-l-0',
      },
    },
  }
);

export function ToolbarButton({
  children,
  className,
  isDropdown,
  onKeyDown,
  onMouseDown,
  onPointerDown,
  pressed,
  size = 'sm',
  tooltip,
  tooltipContentProps,
  tooltipProps,
  tooltipTriggerProps,
  variant,
  ...props
}: {
  isDropdown?: boolean;
  pressed?: boolean;
  tooltip?: React.ReactNode;
  tooltipContentProps?: Omit<TooltipPrimitive.Popup.Props, 'children'>;
  tooltipProps?: Omit<TooltipPrimitive.Root.Props, 'children'>;
  tooltipTriggerProps?: Omit<
    TooltipPrimitive.Trigger.Props,
    'render' | 'children'
  >;
} & Omit<ToolbarPrimitive.Button.Props, 'render'> &
  VariantProps<typeof toolbarButtonVariants>) {
  const reportOverlayOpening = useToolbarOverlayTrigger(props);

  const button = (
    <ToolbarPrimitive.Button
      className={cn(
        toolbarButtonVariants({ size, variant }),
        isDropdown && 'justify-between gap-1 pr-1',
        className
      )}
      aria-label={typeof tooltip === 'string' ? tooltip : undefined}
      aria-pressed={pressed}
      data-state={pressed === undefined ? undefined : pressed ? 'on' : 'off'}
      {...props}
      onKeyDown={(event) => {
        if (
          !props.disabled &&
          ['Enter', ' ', 'ArrowDown'].includes(event.key)
        ) {
          reportOverlayOpening();
        }

        onKeyDown?.(event);
      }}
      onMouseDown={(event) => {
        event.preventDefault();
        onMouseDown?.(event);
      }}
      onPointerDown={(event) => {
        if (!props.disabled && event.button === 0 && !event.ctrlKey) {
          reportOverlayOpening();
        }

        onPointerDown?.(event);
      }}
    >
      {isDropdown ? (
        <>
          <div className="flex flex-1 items-center gap-2 whitespace-nowrap">
            {children}
          </div>
          <ChevronDown className="size-3.5 text-muted-foreground" data-icon />
        </>
      ) : (
        children
      )}
    </ToolbarPrimitive.Button>
  );

  if (!tooltip) return button;

  return (
    <TooltipPrimitive.Root {...tooltipProps}>
      <TooltipPrimitive.Trigger render={button} {...tooltipTriggerProps} />

      <TooltipPrimitive.Portal>
        <TooltipPrimitive.Positioner sideOffset={4}>
          <TooltipPrimitive.Popup
            {...tooltipContentProps}
            className={cn(
              'cn-tooltip-content cn-tooltip-content-logical z-50 w-fit origin-(--transform-origin) bg-primary text-balance text-primary-foreground',
              tooltipContentProps?.className
            )}
          >
            {tooltip}
          </TooltipPrimitive.Popup>
        </TooltipPrimitive.Positioner>
      </TooltipPrimitive.Portal>
    </TooltipPrimitive.Root>
  );
}

export function ToolbarSplitButton({
  className,
  pressed,
  ...props
}: React.ComponentPropsWithoutRef<'div'> & { pressed?: boolean }) {
  return (
    <div
      className={cn('group flex gap-0 px-0 hover:bg-transparent', className)}
      data-pressed={pressed || undefined}
      role="group"
      {...props}
    />
  );
}

export function ToolbarSplitButtonPrimary({
  children,
  className,
  onKeyDown,
  onMouseDown,
  onPointerDown,
  size = 'sm',
  variant,
  ...props
}: Omit<
  React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Button>,
  'size'
> &
  VariantProps<typeof toolbarButtonVariants>) {
  const reportOverlayOpening = useToolbarOverlayTrigger(props);

  return (
    <ToolbarPrimitive.Button
      className={cn(
        toolbarButtonVariants({
          size,
          variant,
        }),
        'rounded-r-none',
        'group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground',
        className
      )}
      type="button"
      {...props}
      onKeyDown={(event) => {
        if (
          !props.disabled &&
          ['Enter', ' ', 'ArrowDown'].includes(event.key)
        ) {
          reportOverlayOpening();
        }

        onKeyDown?.(event);
      }}
      onMouseDown={(event) => {
        event.preventDefault();
        onMouseDown?.(event);
      }}
      onPointerDown={(event) => {
        if (!props.disabled && event.button === 0 && !event.ctrlKey) {
          reportOverlayOpening();
        }

        onPointerDown?.(event);
      }}
    >
      {children}
    </ToolbarPrimitive.Button>
  );
}

export function ToolbarSplitButtonSecondary({
  className,
  onKeyDown,
  onMouseDown,
  onPointerDown,
  size,
  variant,
  ...props
}: React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Button> &
  VariantProps<typeof dropdownArrowVariants>) {
  const reportOverlayOpening = useToolbarOverlayTrigger(props);

  return (
    <ToolbarPrimitive.Button
      className={cn(
        dropdownArrowVariants({
          size,
          variant,
        }),
        'group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground',
        className
      )}
      type="button"
      {...props}
      onKeyDown={(event) => {
        if (
          !props.disabled &&
          ['Enter', ' ', 'ArrowDown'].includes(event.key)
        ) {
          reportOverlayOpening();
        }

        onKeyDown?.(event);
      }}
      onMouseDown={(event) => {
        event.preventDefault();
        onMouseDown?.(event);
      }}
      onPointerDown={(event) => {
        if (!props.disabled && event.button === 0 && !event.ctrlKey) {
          reportOverlayOpening();
        }

        onPointerDown?.(event);
      }}
    >
      <ChevronDown className="size-3.5 text-muted-foreground" data-icon />
    </ToolbarPrimitive.Button>
  );
}

export function ToolbarGroup({
  children,
  className,
}: React.ComponentProps<'div'>) {
  return (
    <div
      className={cn(
        'group/toolbar-group',
        'relative hidden has-[button]:flex',
        className
      )}
    >
      <div className="flex items-center">{children}</div>

      <div
        className="mx-1.5 h-6 w-px bg-border group-last/toolbar-group:hidden!"
        aria-hidden="true"
      />
    </div>
  );
}

export function ToolbarMenuGroup({
  children,
  className,
  label,
  ...props
}: React.ComponentProps<'div'> & { label?: string }) {
  return (
    <>
      <hr
        className={cn(
          'hidden',
          'mb-0 shrink-0 peer-has-[[role=gridcell]]/menu-group:block peer-has-[[role=menuitem]]/menu-group:block peer-has-[[role=menuitemcheckbox]]/menu-group:block peer-has-[[role=menuitemradio]]/menu-group:block peer-has-[[role=option]]/menu-group:block'
        )}
      />

      <div
        role="group"
        {...props}
        className={cn(
          'hidden',
          'peer/menu-group group/menu-group my-1.5 has-[[role=gridcell]]:block has-[[role=menuitem]]:block has-[[role=menuitemcheckbox]]:block has-[[role=menuitemradio]]:block has-[[role=option]]:block',
          className
        )}
      >
        {label && (
          <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground select-none">
            {label}
          </div>
        )}
        {children}
      </div>
    </>
  );
}

71:Ta13,'use client'; import { EditorProvider, useOptionalEditor } from 'platejs/react'; import * as React from 'react'; const ToolbarOverlayContext = React.createContext< (id: symbol, open: boolean) => void >(() => {}); export function useToolbarOverlayTrigger( props: Pick ) { const [overlayId] = React.useState(() => Symbol('toolbar-overlay')); const reportOverlayOpen = React.useContext(ToolbarOverlayContext); const ownsOverlay = props['aria-haspopup'] !== undefined && props['aria-haspopup'] !== false; const open = props['aria-expanded'] === true || props['aria-expanded'] === 'true'; const registeredRef = React.useRef(false); React.useEffect(() => { if (ownsOverlay) { registeredRef.current = true; reportOverlayOpen(overlayId, open); } else if (registeredRef.current) { registeredRef.current = false; reportOverlayOpen(overlayId, false); } }, [open, overlayId, ownsOverlay, reportOverlayOpen]); React.useEffect( () => () => { if (registeredRef.current) reportOverlayOpen(overlayId, false); }, [overlayId, reportOverlayOpen] ); return () => { if (ownsOverlay) reportOverlayOpen(overlayId, true); }; } export function ToolbarOverlayProvider({ children, onOpenChange, }: { children: React.ReactNode; onOpenChange?: (open: boolean) => void; }) { const editor = useOptionalEditor(); const liveRef = React.useRef({ editor, onOpenChange }); const [capturedEditor, setCapturedEditor] = React.useState< typeof editor | undefined >(undefined); React.useInsertionEffect(() => { liveRef.current = { editor, onOpenChange }; }, [editor, onOpenChange]); const openOverlayIdsRef = React.useRef(new Set()); const overlayOpenRef = React.useRef(false); const reportOverlayOpen = React.useCallback((id: symbol, open: boolean) => { if (open) { openOverlayIdsRef.current.add(id); } else { openOverlayIdsRef.current.delete(id); } const nextOpen = openOverlayIdsRef.current.size > 0; if (overlayOpenRef.current !== nextOpen) { overlayOpenRef.current = nextOpen; setCapturedEditor(nextOpen ? liveRef.current.editor : undefined); liveRef.current.onOpenChange?.(nextOpen); } }, []); return ( {children} ); } 72:T610c,

'use client';

import { EditorProvider, useOptionalEditor } from 'platejs/react';
import * as React from 'react';

const ToolbarOverlayContext = React.createContext<
  (id: symbol, open: boolean) => void
>(() => {});

export function useToolbarOverlayTrigger(
  props: Pick<React.AriaAttributes, 'aria-expanded' | 'aria-haspopup'>
) {
  const [overlayId] = React.useState(() => Symbol('toolbar-overlay'));
  const reportOverlayOpen = React.useContext(ToolbarOverlayContext);
  const ownsOverlay =
    props['aria-haspopup'] !== undefined && props['aria-haspopup'] !== false;
  const open =
    props['aria-expanded'] === true || props['aria-expanded'] === 'true';
  const registeredRef = React.useRef(false);

  React.useEffect(() => {
    if (ownsOverlay) {
      registeredRef.current = true;
      reportOverlayOpen(overlayId, open);
    } else if (registeredRef.current) {
      registeredRef.current = false;
      reportOverlayOpen(overlayId, false);
    }
  }, [open, overlayId, ownsOverlay, reportOverlayOpen]);

  React.useEffect(
    () => () => {
      if (registeredRef.current) reportOverlayOpen(overlayId, false);
    },
    [overlayId, reportOverlayOpen]
  );

  return () => {
    if (ownsOverlay) reportOverlayOpen(overlayId, true);
  };
}

export function ToolbarOverlayProvider({
  children,
  onOpenChange,
}: {
  children: React.ReactNode;
  onOpenChange?: (open: boolean) => void;
}) {
  const editor = useOptionalEditor();
  const liveRef = React.useRef({ editor, onOpenChange });
  const [capturedEditor, setCapturedEditor] = React.useState<
    typeof editor | undefined
  >(undefined);
  React.useInsertionEffect(() => {
    liveRef.current = { editor, onOpenChange };
  }, [editor, onOpenChange]);
  const openOverlayIdsRef = React.useRef(new Set<symbol>());
  const overlayOpenRef = React.useRef(false);
  const reportOverlayOpen = React.useCallback((id: symbol, open: boolean) => {
    if (open) {
      openOverlayIdsRef.current.add(id);
    } else {
      openOverlayIdsRef.current.delete(id);
    }

    const nextOpen = openOverlayIdsRef.current.size > 0;

    if (overlayOpenRef.current !== nextOpen) {
      overlayOpenRef.current = nextOpen;
      setCapturedEditor(nextOpen ? liveRef.current.editor : undefined);
      liveRef.current.onOpenChange?.(nextOpen);
    }
  }, []);

  return (
    <ToolbarOverlayContext.Provider value={reportOverlayOpen}>
      <EditorProvider
        editor={capturedEditor === undefined ? editor : capturedEditor}
      >
        {children}
      </EditorProvider>
    </ToolbarOverlayContext.Provider>
  );
}

73:T1153,

'use client';

import {
  type CodePlugin,
  type EditorLeafProps,
  EditorLeaf,
} from 'platejs/react';
import * as React from 'react';

export function CodeLeaf(props: EditorLeafProps<typeof CodePlugin>) {
  return (
    <EditorLeaf
      {...props}
      as="code"
      className="rounded-md bg-muted px-[0.3em] py-[0.2em] font-mono text-sm whitespace-pre-wrap"
    >
      {props.children}
    </EditorLeaf>
  );
}

74:T107c,

'use client';

import {
  type HighlightPlugin,
  type EditorLeafProps,
  EditorLeaf,
} from 'platejs/react';
import * as React from 'react';

export function HighlightLeaf(props: EditorLeafProps<typeof HighlightPlugin>) {
  return (
    <EditorLeaf {...props} as="mark" className="bg-highlight/30 text-inherit">
      {props.children}
    </EditorLeaf>
  );
}

75:T12e4,

'use client';

import {
  type KbdPlugin,
  type EditorLeafProps,
  EditorLeaf,
} from 'platejs/react';
import * as React from 'react';

export function KbdLeaf(props: EditorLeafProps<typeof KbdPlugin>) {
  return (
    <EditorLeaf
      {...props}
      as="kbd"
      className="rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-sm shadow-[rgba(255,_255,_255,_0.1)_0px_0.5px_0px_0px_inset,_rgb(248,_249,_250)_0px_1px_5px_0px_inset,_rgb(193,_200,_205)_0px_0px_0px_0.5px,_rgb(193,_200,_205)_0px_2px_1px_-1px,_rgb(193,_200,_205)_0px_1px_0px_0px] dark:shadow-[rgba(255,_255,_255,_0.1)_0px_0.5px_0px_0px_inset,_rgb(26,_29,_30)_0px_1px_5px_0px_inset,_rgb(76,_81,_85)_0px_0px_0px_0.5px,_rgb(76,_81,_85)_0px_2px_1px_-1px,_rgb(76,_81,_85)_0px_1px_0px_0px]"
    >
      {props.children}
    </EditorLeaf>
  );
}

76:T435,import { BaseBoldPlugin, BaseCodePlugin, BaseHighlightPlugin, BaseItalicPlugin, BaseKbdPlugin, BaseScriptPlugin, BaseStrikethroughPlugin, BaseUnderlinePlugin, } from 'platejs'; import { type EditorLeafProps, EditorLeaf } from 'platejs/static'; import * as React from 'react'; import { CodeLeafStatic } from '@/components/editor/code-static'; import { HighlightLeafStatic } from '@/components/editor/highlight-static'; import { KbdLeafStatic } from '@/components/editor/kbd-static'; const ScriptLeafStatic = (props: EditorLeafProps) => ( {props.children} ); export const BaseBasicMarksKit = [ BaseBoldPlugin, BaseItalicPlugin, BaseUnderlinePlugin, BaseCodePlugin.configure({ component: CodeLeafStatic }), BaseStrikethroughPlugin, BaseScriptPlugin.configure({ component: ScriptLeafStatic }), BaseHighlightPlugin.configure({ component: HighlightLeafStatic, }), BaseKbdPlugin.configure({ component: KbdLeafStatic }), ]; 77:T20e5,

import {
  BaseBoldPlugin,
  BaseCodePlugin,
  BaseHighlightPlugin,
  BaseItalicPlugin,
  BaseKbdPlugin,
  BaseScriptPlugin,
  BaseStrikethroughPlugin,
  BaseUnderlinePlugin,
} from 'platejs';
import { type EditorLeafProps, EditorLeaf } from 'platejs/static';
import * as React from 'react';

import { CodeLeafStatic } from '@/components/editor/code-static';
import { HighlightLeafStatic } from '@/components/editor/highlight-static';
import { KbdLeafStatic } from '@/components/editor/kbd-static';

const ScriptLeafStatic = (props: EditorLeafProps<typeof BaseScriptPlugin>) => (
  <EditorLeaf {...props} as={props.leaf.script === 'sub' ? 'sub' : 'sup'}>
    {props.children}
  </EditorLeaf>
);

export const BaseBasicMarksKit = [
  BaseBoldPlugin,
  BaseItalicPlugin,
  BaseUnderlinePlugin,
  BaseCodePlugin.configure({ component: CodeLeafStatic }),
  BaseStrikethroughPlugin,
  BaseScriptPlugin.configure({ component: ScriptLeafStatic }),
  BaseHighlightPlugin.configure({
    component: HighlightLeafStatic,
  }),
  BaseKbdPlugin.configure({ component: KbdLeafStatic }),
];

78:T10a3,

import type { BaseCodePlugin } from 'platejs';
import { type EditorLeafProps, EditorLeaf } from 'platejs/static';
import * as React from 'react';

export function CodeLeafStatic(props: EditorLeafProps<typeof BaseCodePlugin>) {
  return (
    <EditorLeaf
      {...props}
      as="code"
      className="rounded-md bg-muted px-[0.3em] py-[0.2em] font-mono text-sm whitespace-pre-wrap"
    >
      {props.children}
    </EditorLeaf>
  );
}

79:T1056,

import type { BaseHighlightPlugin } from 'platejs';
import { type EditorLeafProps, EditorLeaf } from 'platejs/static';
import * as React from 'react';

export function HighlightLeafStatic(
  props: EditorLeafProps<typeof BaseHighlightPlugin>
) {
  return (
    <EditorLeaf {...props} as="mark" className="bg-highlight/30 text-inherit">
      {props.children}
    </EditorLeaf>
  );
}

7a:T1234,

import type { BaseKbdPlugin } from 'platejs';
import { type EditorLeafProps, EditorLeaf } from 'platejs/static';
import * as React from 'react';

export function KbdLeafStatic(props: EditorLeafProps<typeof BaseKbdPlugin>) {
  return (
    <EditorLeaf
      {...props}
      as="kbd"
      className="rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-sm shadow-[rgba(255,_255,_255,_0.1)_0px_0.5px_0px_0px_inset,_rgb(248,_249,_250)_0px_1px_5px_0px_inset,_rgb(193,_200,_205)_0px_0px_0px_0.5px,_rgb(193,_200,_205)_0px_2px_1px_-1px,_rgb(193,_200,_205)_0px_1px_0px_0px] dark:shadow-[rgba(255,_255,_255,_0.1)_0px_0.5px_0px_0px_inset,_rgb(26,_29,_30)_0px_1px_5px_0px_inset,_rgb(76,_81,_85)_0px_0px_0px_0.5px,_rgb(76,_81,_85)_0px_2px_1px_-1px,_rgb(76,_81,_85)_0px_1px_0px_0px]"
    >
      {props.children}
    </EditorLeaf>
  );
}

7b:T127a,'use client'; import type { VariantProps } from 'class-variance-authority'; import { cva } from 'class-variance-authority'; import { type EditorContentProps, type EditorPreviewProps, NodeSelectionDrag, NodeSelectionHighlight, EditorContainer as EditorContainerPrimitive, EditorContent, EditorPreview, } from 'platejs/react'; import * as React from 'react'; import { cn } from '@/lib/utils'; const editorContainerVariants = cva( 'relative w-full cursor-text select-text overflow-y-auto caret-primary selection:bg-brand/25 focus-visible:outline-none', { defaultVariants: { variant: 'default', }, variants: { variant: { comment: cn( 'flex flex-wrap justify-between gap-1 px-1 py-0.5 text-sm', 'rounded-md border-[1.5px] border-transparent bg-transparent', 'has-[[data-editor]:focus]:border-brand/50 has-[[data-editor]:focus]:ring-2 has-[[data-editor]:focus]:ring-brand/30', 'has-aria-disabled:border-input has-aria-disabled:bg-muted' ), default: 'min-h-0 flex-1', select: cn( 'group rounded-md border border-input ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2', 'has-data-readonly:w-fit has-data-readonly:cursor-default has-data-readonly:border-transparent has-data-readonly:focus-within:[box-shadow:none]' ), }, }, } ); export function EditorFrame({ className, ...props }: React.ComponentProps<'div'>) { return (

); } export function EditorContainer({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps) { return ( ); } const editorVariants = cva( cn( 'group/editor ignore-click-outside/toolbar', 'relative w-full cursor-text select-text overflow-x-hidden whitespace-break-spaces break-words', 'rounded-md ring-offset-background focus-visible:outline-none', '**:data-editor-placeholder:!top-1/2 **:data-editor-placeholder:-translate-y-1/2 placeholder:text-muted-foreground/80 **:data-editor-placeholder:text-muted-foreground/80 **:data-editor-placeholder:opacity-100! **:data-editor-drop-cursor:z-20 **:data-editor-drop-cursor:rounded-full **:data-editor-drop-cursor:bg-brand **:data-editor-inactive-selection:bg-brand/25 **:data-editor-inactive-selection-caret:z-20 **:data-editor-inactive-selection-caret:w-0.5 **:data-editor-inactive-selection-caret:bg-primary', '[&_strong]:font-bold', '[--node-selection-tint:color-mix(in_oklab,var(--color-brand)_13%,transparent)]' ), { defaultVariants: { variant: 'default', }, variants: { disabled: { true: 'cursor-not-allowed opacity-50', }, focused: { true: 'ring-2 ring-ring ring-offset-2', }, variant: { ai: 'w-full px-0 text-base md:text-sm', aiChat: 'max-h-[min(70vh,320px)] w-full overflow-y-auto px-3 py-2 text-base md:text-sm', comment: cn('rounded-none border-none bg-transparent text-sm'), default: 'size-full px-[max(clamp(24px,12.5%,64px),calc(50%-350px))] pt-4 pb-72 text-base', demo: 'size-full px-[max(clamp(24px,12.5%,64px),calc(50%-350px))] pt-4 pb-72 text-base', fullWidth: 'size-full px-[clamp(24px,15%,96px)] pt-4 pb-72 text-base', none: '', select: 'px-3 py-2 text-base data-readonly:w-fit', }, }, } ); export function Editor({ className, disabled, focused, variant, ref, ...props }: (EditorContentProps & VariantProps) & { ref?: React.Ref; }) { return ( <> ); } export function EditorView({ className, variant, ...props }: EditorPreviewProps & VariantProps) { return ( ); } 7c:T783a,

'use client';

import type { VariantProps } from 'class-variance-authority';
import { cva } from 'class-variance-authority';
import {
  type EditorContentProps,
  type EditorPreviewProps,
  NodeSelectionDrag,
  NodeSelectionHighlight,
  EditorContainer as EditorContainerPrimitive,
  EditorContent,
  EditorPreview,
} from 'platejs/react';
import * as React from 'react';

import { cn } from '@/lib/utils';

const editorContainerVariants = cva(
  'relative w-full cursor-text select-text overflow-y-auto caret-primary selection:bg-brand/25 focus-visible:outline-none',
  {
    defaultVariants: {
      variant: 'default',
    },
    variants: {
      variant: {
        comment: cn(
          'flex flex-wrap justify-between gap-1 px-1 py-0.5 text-sm',
          'rounded-md border-[1.5px] border-transparent bg-transparent',
          'has-[[data-editor]:focus]:border-brand/50 has-[[data-editor]:focus]:ring-2 has-[[data-editor]:focus]:ring-brand/30',
          'has-aria-disabled:border-input has-aria-disabled:bg-muted'
        ),
        default: 'min-h-0 flex-1',
        select: cn(
          'group rounded-md border border-input ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2',
          'has-data-readonly:w-fit has-data-readonly:cursor-default has-data-readonly:border-transparent has-data-readonly:focus-within:[box-shadow:none]'
        ),
      },
    },
  }
);

export function EditorFrame({
  className,
  ...props
}: React.ComponentProps<'div'>) {
  return (
    <div
      className={cn('relative flex h-full min-h-0 w-full flex-col', className)}
      data-slot="editor-frame"
      {...props}
    />
  );
}

export function EditorContainer({
  className,
  variant,
  ...props
}: React.ComponentProps<'div'> & VariantProps<typeof editorContainerVariants>) {
  return (
    <EditorContainerPrimitive
      className={cn(
        'ignore-click-outside/toolbar',
        editorContainerVariants({ variant }),
        className
      )}
      data-slot="editor-container"
      {...props}
    />
  );
}

const editorVariants = cva(
  cn(
    'group/editor ignore-click-outside/toolbar',
    'relative w-full cursor-text select-text overflow-x-hidden whitespace-break-spaces break-words',
    'rounded-md ring-offset-background focus-visible:outline-none',
    '**:data-editor-placeholder:!top-1/2 **:data-editor-placeholder:-translate-y-1/2 placeholder:text-muted-foreground/80 **:data-editor-placeholder:text-muted-foreground/80 **:data-editor-placeholder:opacity-100! **:data-editor-drop-cursor:z-20 **:data-editor-drop-cursor:rounded-full **:data-editor-drop-cursor:bg-brand **:data-editor-inactive-selection:bg-brand/25 **:data-editor-inactive-selection-caret:z-20 **:data-editor-inactive-selection-caret:w-0.5 **:data-editor-inactive-selection-caret:bg-primary',
    '[&_strong]:font-bold',
    '[--node-selection-tint:color-mix(in_oklab,var(--color-brand)_13%,transparent)]'
  ),
  {
    defaultVariants: {
      variant: 'default',
    },
    variants: {
      disabled: {
        true: 'cursor-not-allowed opacity-50',
      },
      focused: {
        true: 'ring-2 ring-ring ring-offset-2',
      },
      variant: {
        ai: 'w-full px-0 text-base md:text-sm',
        aiChat:
          'max-h-[min(70vh,320px)] w-full overflow-y-auto px-3 py-2 text-base md:text-sm',
        comment: cn('rounded-none border-none bg-transparent text-sm'),
        default:
          'size-full px-[max(clamp(24px,12.5%,64px),calc(50%-350px))] pt-4 pb-72 text-base',
        demo: 'size-full px-[max(clamp(24px,12.5%,64px),calc(50%-350px))] pt-4 pb-72 text-base',
        fullWidth: 'size-full px-[clamp(24px,15%,96px)] pt-4 pb-72 text-base',
        none: '',
        select: 'px-3 py-2 text-base data-readonly:w-fit',
      },
    },
  }
);

export function Editor({
  className,
  disabled,
  focused,
  variant,
  ref,
  ...props
}: (EditorContentProps & VariantProps<typeof editorVariants>) & {
  ref?: React.Ref<HTMLDivElement>;
}) {
  return (
    <>
      <EditorContent
        ref={ref}
        className={cn(
          editorVariants({
            disabled,
            focused,
            variant,
          }),
          className
        )}
        disabled={disabled}
        disableDefaultStyles
        {...props}
      />
      <NodeSelectionHighlight className="z-1 bg-(--node-selection-tint)" />
      <NodeSelectionDrag className="z-50 border border-brand/25 bg-brand/15" />
    </>
  );
}

export function EditorView({
  className,
  variant,
  ...props
}: EditorPreviewProps<unknown> & VariantProps<typeof editorVariants>) {
  return (
    <EditorPreview
      {...props}
      className={cn(editorVariants({ variant }), className)}
    />
  );
}

7d:T1a38,'use client'; import type { Menu as BaseMenuPrimitive } from '@base-ui/react/menu'; import * as React from 'react'; import { DropdownMenuCheckboxItem as ShadcnDropdownMenuCheckboxItem, DropdownMenuContent as ShadcnDropdownMenuContent, DropdownMenuItem as ShadcnDropdownMenuItem, DropdownMenuRadioItem as ShadcnDropdownMenuRadioItem, DropdownMenuTrigger as ShadcnDropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; type BaseDropdownMenuContentProps = BaseMenuPrimitive.Popup.Props & Pick< BaseMenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset' >; const BaseDropdownMenuContent = ShadcnDropdownMenuContent as React.ComponentType; const BaseDropdownMenuItem = ShadcnDropdownMenuItem as React.ComponentType< BaseMenuPrimitive.Item.Props & { inset?: boolean; ref?: React.Ref; variant?: 'default' | 'destructive'; } >; const BaseDropdownMenuCheckboxItem = ShadcnDropdownMenuCheckboxItem as React.ComponentType< BaseMenuPrimitive.CheckboxItem.Props & { ref?: React.Ref; } >; const BaseDropdownMenuRadioItem = ShadcnDropdownMenuRadioItem as React.ComponentType< BaseMenuPrimitive.RadioItem.Props & { ref?: React.Ref; } >; const BaseDropdownMenuTrigger = ShadcnDropdownMenuTrigger as React.ComponentType; // biome-ignore lint/performance/noBarrelFile: This adapter owns one stable menu API across registry bases. export { DropdownMenu, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, } from '@/components/ui/dropdown-menu'; type SelectEventHandler = (event: Event) => void; type FinalFocus = false | (() => void); type BaseUIEvent = React.MouseEvent & { preventBaseUIHandler?: () => void; }; type FinalFocusRef = React.RefObject; const FinalFocusContext = React.createContext(null); function dispatchSelect( onSelect: SelectEventHandler | undefined, event: BaseUIEvent ) { if (!onSelect) return true; const selectEvent = new Event('select', { cancelable: true }); onSelect(selectEvent); if (selectEvent.defaultPrevented) event.preventBaseUIHandler?.(); return !selectEvent.defaultPrevented; } function handleItemClick( event: BaseUIEvent, { closeOnClick, finalFocus, onClick, onSelect, }: { closeOnClick: boolean; finalFocus: FinalFocus | undefined; onClick: BaseMenuPrimitive.Item.Props['onClick']; onSelect: SelectEventHandler | undefined; }, finalFocusRef: FinalFocusRef | null ) { let baseHandlerPrevented = false; const { preventBaseUIHandler } = event; if (preventBaseUIHandler) { event.preventBaseUIHandler = () => { baseHandlerPrevented = true; preventBaseUIHandler(); }; } const selectAllowed = dispatchSelect(onSelect, event); onClick?.(event as never); if ( closeOnClick && selectAllowed && !baseHandlerPrevented && !event.defaultPrevented && finalFocusRef ) { finalFocusRef.current = finalFocus; } } export function DropdownMenuItem({ closeOnClick = true, finalFocus, onClick, onSelect, ...props }: Omit< React.ComponentProps, 'onClick' | 'onSelect' > & Pick & { finalFocus?: FinalFocus; onSelect?: SelectEventHandler; }) { const finalFocusRef = React.useContext(FinalFocusContext); return ( { handleItemClick( event, { closeOnClick, finalFocus, onClick, onSelect }, finalFocusRef ); }} /> ); } export function DropdownMenuCheckboxItem({ closeOnClick = true, finalFocus, onClick, onSelect, ...props }: Omit< React.ComponentProps, 'checked' | 'closeOnClick' | 'onClick' | 'onSelect' > & Pick< BaseMenuPrimitive.CheckboxItem.Props, 'checked' | 'closeOnClick' | 'onClick' > & { finalFocus?: FinalFocus; onSelect?: SelectEventHandler; }) { const finalFocusRef = React.useContext(FinalFocusContext); return ( { handleItemClick( event, { closeOnClick, finalFocus, onClick, onSelect }, finalFocusRef ); }} /> ); } export function DropdownMenuRadioItem({ closeOnClick = true, finalFocus, onClick, onSelect, ...props }: Omit< React.ComponentProps, 'closeOnClick' | 'onClick' | 'onSelect' > & Pick & { finalFocus?: FinalFocus; onSelect?: SelectEventHandler; }) { const finalFocusRef = React.useContext(FinalFocusContext); return ( { handleItemClick( event, { closeOnClick, finalFocus, onClick, onSelect }, finalFocusRef ); }} /> ); } export function DropdownMenuContent({ onFinalFocus, ...props }: Omit, 'onAbort'> & { align?: 'center' | 'end' | 'start'; alignOffset?: number; onFinalFocus?: (event: Event) => void; side?: 'bottom' | 'left' | 'right' | 'top'; sideOffset?: number; }) { const finalFocusRef = React.useRef(undefined); return ( { const finalFocus = finalFocusRef.current; finalFocusRef.current = undefined; if (finalFocus === false) return false; if (finalFocus) { finalFocus(); return false; } if (onFinalFocus) { const event = new Event('closeAutoFocus', { cancelable: true }); onFinalFocus(event); return !event.defaultPrevented; } return true; }} /> ); } export function DropdownMenuTrigger({ children, ...props }: Omit, 'children'> & { children: React.ReactElement; }) { return ; } 7e:Tff23,

'use client';

import type { Menu as BaseMenuPrimitive } from '@base-ui/react/menu';
import * as React from 'react';

import {
  DropdownMenuCheckboxItem as ShadcnDropdownMenuCheckboxItem,
  DropdownMenuContent as ShadcnDropdownMenuContent,
  DropdownMenuItem as ShadcnDropdownMenuItem,
  DropdownMenuRadioItem as ShadcnDropdownMenuRadioItem,
  DropdownMenuTrigger as ShadcnDropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';

type BaseDropdownMenuContentProps = BaseMenuPrimitive.Popup.Props &
  Pick<
    BaseMenuPrimitive.Positioner.Props,
    'align' | 'alignOffset' | 'side' | 'sideOffset'
  >;

const BaseDropdownMenuContent =
  ShadcnDropdownMenuContent as React.ComponentType<BaseDropdownMenuContentProps>;
const BaseDropdownMenuItem = ShadcnDropdownMenuItem as React.ComponentType<
  BaseMenuPrimitive.Item.Props & {
    inset?: boolean;
    ref?: React.Ref<HTMLElement>;
    variant?: 'default' | 'destructive';
  }
>;
const BaseDropdownMenuCheckboxItem =
  ShadcnDropdownMenuCheckboxItem as React.ComponentType<
    BaseMenuPrimitive.CheckboxItem.Props & {
      ref?: React.Ref<HTMLElement>;
    }
  >;
const BaseDropdownMenuRadioItem =
  ShadcnDropdownMenuRadioItem as React.ComponentType<
    BaseMenuPrimitive.RadioItem.Props & {
      ref?: React.Ref<HTMLElement>;
    }
  >;
const BaseDropdownMenuTrigger =
  ShadcnDropdownMenuTrigger as React.ComponentType<BaseMenuPrimitive.Trigger.Props>;

// biome-ignore lint/performance/noBarrelFile: This adapter owns one stable menu API across registry bases.
export {
  DropdownMenu,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuPortal,
  DropdownMenuRadioGroup,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
} from '@/components/ui/dropdown-menu';

type SelectEventHandler = (event: Event) => void;
type FinalFocus = false | (() => void);
type BaseUIEvent = React.MouseEvent<HTMLElement> & {
  preventBaseUIHandler?: () => void;
};
type FinalFocusRef = React.RefObject<FinalFocus | undefined>;

const FinalFocusContext = React.createContext<FinalFocusRef | null>(null);

function dispatchSelect(
  onSelect: SelectEventHandler | undefined,
  event: BaseUIEvent
) {
  if (!onSelect) return true;

  const selectEvent = new Event('select', { cancelable: true });
  onSelect(selectEvent);

  if (selectEvent.defaultPrevented) event.preventBaseUIHandler?.();

  return !selectEvent.defaultPrevented;
}

function handleItemClick(
  event: BaseUIEvent,
  {
    closeOnClick,
    finalFocus,
    onClick,
    onSelect,
  }: {
    closeOnClick: boolean;
    finalFocus: FinalFocus | undefined;
    onClick: BaseMenuPrimitive.Item.Props['onClick'];
    onSelect: SelectEventHandler | undefined;
  },
  finalFocusRef: FinalFocusRef | null
) {
  let baseHandlerPrevented = false;
  const { preventBaseUIHandler } = event;

  if (preventBaseUIHandler) {
    event.preventBaseUIHandler = () => {
      baseHandlerPrevented = true;
      preventBaseUIHandler();
    };
  }

  const selectAllowed = dispatchSelect(onSelect, event);
  onClick?.(event as never);

  if (
    closeOnClick &&
    selectAllowed &&
    !baseHandlerPrevented &&
    !event.defaultPrevented &&
    finalFocusRef
  ) {
    finalFocusRef.current = finalFocus;
  }
}

export function DropdownMenuItem({
  closeOnClick = true,
  finalFocus,
  onClick,
  onSelect,
  ...props
}: Omit<
  React.ComponentProps<typeof ShadcnDropdownMenuItem>,
  'onClick' | 'onSelect'
> &
  Pick<BaseMenuPrimitive.Item.Props, 'closeOnClick' | 'onClick'> & {
    finalFocus?: FinalFocus;
    onSelect?: SelectEventHandler;
  }) {
  const finalFocusRef = React.useContext(FinalFocusContext);

  return (
    <BaseDropdownMenuItem
      {...props}
      closeOnClick={closeOnClick}
      onClick={(event) => {
        handleItemClick(
          event,
          { closeOnClick, finalFocus, onClick, onSelect },
          finalFocusRef
        );
      }}
    />
  );
}

export function DropdownMenuCheckboxItem({
  closeOnClick = true,
  finalFocus,
  onClick,
  onSelect,
  ...props
}: Omit<
  React.ComponentProps<typeof ShadcnDropdownMenuCheckboxItem>,
  'checked' | 'closeOnClick' | 'onClick' | 'onSelect'
> &
  Pick<
    BaseMenuPrimitive.CheckboxItem.Props,
    'checked' | 'closeOnClick' | 'onClick'
  > & {
    finalFocus?: FinalFocus;
    onSelect?: SelectEventHandler;
  }) {
  const finalFocusRef = React.useContext(FinalFocusContext);

  return (
    <BaseDropdownMenuCheckboxItem
      {...props}
      closeOnClick={closeOnClick}
      onClick={(event) => {
        handleItemClick(
          event,
          { closeOnClick, finalFocus, onClick, onSelect },
          finalFocusRef
        );
      }}
    />
  );
}

export function DropdownMenuRadioItem({
  closeOnClick = true,
  finalFocus,
  onClick,
  onSelect,
  ...props
}: Omit<
  React.ComponentProps<typeof ShadcnDropdownMenuRadioItem>,
  'closeOnClick' | 'onClick' | 'onSelect'
> &
  Pick<BaseMenuPrimitive.RadioItem.Props, 'closeOnClick' | 'onClick'> & {
    finalFocus?: FinalFocus;
    onSelect?: SelectEventHandler;
  }) {
  const finalFocusRef = React.useContext(FinalFocusContext);

  return (
    <BaseDropdownMenuRadioItem
      {...props}
      closeOnClick={closeOnClick}
      onClick={(event) => {
        handleItemClick(
          event,
          { closeOnClick, finalFocus, onClick, onSelect },
          finalFocusRef
        );
      }}
    />
  );
}

export function DropdownMenuContent({
  onFinalFocus,
  ...props
}: Omit<React.ComponentPropsWithoutRef<'div'>, 'onAbort'> & {
  align?: 'center' | 'end' | 'start';
  alignOffset?: number;
  onFinalFocus?: (event: Event) => void;
  side?: 'bottom' | 'left' | 'right' | 'top';
  sideOffset?: number;
}) {
  const finalFocusRef = React.useRef<FinalFocus | undefined>(undefined);

  return (
    <FinalFocusContext.Provider value={finalFocusRef}>
      <BaseDropdownMenuContent
        {...props}
        finalFocus={() => {
          const finalFocus = finalFocusRef.current;

          finalFocusRef.current = undefined;

          if (finalFocus === false) return false;
          if (finalFocus) {
            finalFocus();

            return false;
          }
          if (onFinalFocus) {
            const event = new Event('closeAutoFocus', { cancelable: true });
            onFinalFocus(event);

            return !event.defaultPrevented;
          }
          return true;
        }}
      />
    </FinalFocusContext.Provider>
  );
}

export function DropdownMenuTrigger({
  children,
  ...props
}: Omit<React.ComponentPropsWithoutRef<'button'>, 'children'> & {
  children: React.ReactElement;
}) {
  return <BaseDropdownMenuTrigger {...props} render={children} />;
}

7f:T23d3,'use client'; import { AuthoredPlugin } from 'platejs/authored'; import { type EditableSiblingProps, useEditor, useEditorSelector, } from 'platejs/react'; import { suggestionColorOf } from 'platejs/suggestion'; import { SuggestionPlugin, useActiveSuggestion, } from 'platejs/suggestion/react'; import * as React from 'react'; import { toast } from 'sonner'; type SuggestionColor = Readonly<{ active: string; background: string; foreground: string; hover: string; }>; const SUGGESTION_COLORS: readonly SuggestionColor[] = [ { active: 'var(--color-emerald-800)', background: 'var(--color-emerald-100)', foreground: 'var(--color-emerald-700)', hover: 'color-mix(in oklab, var(--color-emerald-200) 80%, transparent)', }, { active: 'var(--color-violet-800)', background: 'var(--color-violet-100)', foreground: 'var(--color-violet-700)', hover: 'color-mix(in oklab, var(--color-violet-200) 80%, transparent)', }, { active: 'var(--color-sky-800)', background: 'var(--color-sky-100)', foreground: 'var(--color-sky-700)', hover: 'color-mix(in oklab, var(--color-sky-200) 80%, transparent)', }, { active: 'var(--color-fuchsia-800)', background: 'var(--color-fuchsia-100)', foreground: 'var(--color-fuchsia-700)', hover: 'color-mix(in oklab, var(--color-fuchsia-200) 80%, transparent)', }, { active: 'var(--color-orange-800)', background: 'var(--color-orange-100)', foreground: 'var(--color-orange-700)', hover: 'color-mix(in oklab, var(--color-orange-200) 80%, transparent)', }, { active: 'var(--color-cyan-800)', background: 'var(--color-cyan-100)', foreground: 'var(--color-cyan-700)', hover: 'color-mix(in oklab, var(--color-cyan-200) 80%, transparent)', }, { active: 'var(--color-rose-800)', background: 'var(--color-rose-100)', foreground: 'var(--color-rose-700)', hover: 'color-mix(in oklab, var(--color-rose-200) 80%, transparent)', }, ] as const; const escapeCssString = (value: string) => Array.from(value) .map((character) => { const code = character.codePointAt(0) ?? 0; if (character === '"' || character === '\\') return `\\${character}`; if (code < 0x20 || code === 0x7f) return `\\${code.toString(16)} `; return character; }) .join(''); const colorDeclarations = ({ active, background, foreground, hover, }: SuggestionColor) => `--suggestion-active:${active};--suggestion-bg:${background};--suggestion-fg:${foreground};--suggestion-hover:${hover};`; function SuggestionColorStyles({ editableRef }: EditableSiblingProps) { const scopeId = React.useId(); const { activeId } = useActiveSuggestion(); // The active change's card, read again after each review commit, so the // active rule follows the card through a merge or a new oldest change. const activeCard = useEditorSelector((editor) => activeId ? (editor.plugin(AuthoredPlugin).read.groupOf(activeId)?.id ?? null) : null ); React.useLayoutEffect(() => { const root = editableRef.current; if (!root) return undefined; root.setAttribute('data-editor-suggestion-scope', scopeId); return () => { if (root.getAttribute('data-editor-suggestion-scope') === scopeId) { root.removeAttribute('data-editor-suggestion-scope'); } }; }, [editableRef, scopeId]); const scope = `[data-editor-suggestion-scope="${escapeCssString(scopeId)}"]`; // The active rule follows the color rules, so it wins on a highlight that // also paints another card, and it shows the active card's own colors. const rules = SUGGESTION_COLORS.map( (color, slot) => `${scope} [data-editor-authored-color="${slot}"]{${colorDeclarations(color)}}` ); if (activeCard) { const color = SUGGESTION_COLORS[ suggestionColorOf(activeCard, SUGGESTION_COLORS.length) ]; rules.push( `${scope} [data-editor-authored-groups~="${escapeCssString( activeCard )}"]{${colorDeclarations(color)}--suggestion-bg:${color.hover};--suggestion-fg:${color.active};}` ); } return ( ); } const REFUSED: Readonly> = { 'code-block': 'code blocks', table: 'tables', }; const refusedPlaces = new Intl.ListFormat('en'); function vetoMessage(reasons: readonly string[]) { const places = reasons .filter((reason) => reason !== 'list') .map((reason) => REFUSED[reason] ?? reason); const sentences = places.length > 0 ? [ `Suggesting is off in ${refusedPlaces.format(places)} for now. Switch to Editing to change them.`, ] : []; if (reasons.includes('list')) { sentences.push( "Suggesting can't change list items yet, only the text in them." ); } return sentences.join(' '); } function SuggestionRefusals() { const editor = useEditor(); React.useEffect(() => { const authored = editor.plugin(AuthoredPlugin); return authored.api.subscribeRefusals((refusal) => { const view = authored.read.view(); toast.error( refusal.code === 'veto' ? vetoMessage(refusal.reasons) : refusal.code === 'generated-values' ? 'Suggesting is off in this editor.' : 'intent' in view && view.intent === 'edit' ? 'Editing cannot record this change next to a pending suggestion yet. Accept or reject that suggestion first.' : 'Suggesting cannot record this change yet. Switch to Editing to make it.', { id: 'suggestion-refusal' } ); }); }, [editor]); return null; } function SuggestionSiblings(props: EditableSiblingProps) { return ( <> ); } export const SuggestionKit = [ SuggestionPlugin.configure(() => ({ render: { contentAttributes: { // A block's own mark, such as a split, a join or a format change, // may leave its text unmarked, so the block gets a gutter marker: // a pilcrow at a suggested line break, a bar otherwise. className: [ '[&_[data-editor-node=text][data-editor-authored-change]]:bg-[var(--suggestion-bg,var(--color-emerald-100))] [&_[data-editor-node=text][data-editor-authored-change]]:text-[var(--suggestion-fg,var(--color-emerald-700))] [&_[data-editor-node=text][data-editor-authored-change]:hover]:bg-[var(--suggestion-hover,var(--color-emerald-200))] [&_[data-editor-node=text][data-editor-authored-kind~=insert]]:underline [&_[data-editor-node=text][data-editor-authored-kind~=insert]]:decoration-2 [&_[data-editor-node=text][data-editor-authored-kind~=insert]]:underline-offset-2 [&_[data-editor-node=text][data-editor-authored-kind~=delete]]:line-through', '[&_[data-editor-node=element][data-editor-authored-change]:not([data-editor-inline])]:after:pointer-events-none [&_[data-editor-node=element][data-editor-authored-change]:not([data-editor-inline])]:after:absolute [&_[data-editor-node=element][data-editor-authored-change]:not([data-editor-inline])]:after:inset-y-1 [&_[data-editor-node=element][data-editor-authored-change]:not([data-editor-inline])]:after:-left-7 [&_[data-editor-node=element][data-editor-authored-change]:not([data-editor-inline])]:after:w-0.5 [&_[data-editor-node=element][data-editor-authored-change]:not([data-editor-inline])]:after:rounded-full [&_[data-editor-node=element][data-editor-authored-change]:not([data-editor-inline])]:after:bg-[var(--suggestion-fg,var(--color-emerald-700))] [&_[data-editor-node=element][data-editor-authored-change]:not([data-editor-inline])]:after:content-[""]', '[&_[data-editor-node=element][data-editor-authored-change]:is([data-editor-authored-kind~=split],[data-editor-authored-kind~=join]):not([data-editor-inline])]:after:-left-8 [&_[data-editor-node=element][data-editor-authored-change]:is([data-editor-authored-kind~=split],[data-editor-authored-kind~=join]):not([data-editor-inline])]:after:w-auto [&_[data-editor-node=element][data-editor-authored-change]:is([data-editor-authored-kind~=split],[data-editor-authored-kind~=join]):not([data-editor-inline])]:after:bg-transparent [&_[data-editor-node=element][data-editor-authored-change]:is([data-editor-authored-kind~=split],[data-editor-authored-kind~=join]):not([data-editor-inline])]:after:font-semibold [&_[data-editor-node=element][data-editor-authored-change]:is([data-editor-authored-kind~=split],[data-editor-authored-kind~=join]):not([data-editor-inline])]:after:text-[var(--suggestion-fg,var(--color-emerald-700))] [&_[data-editor-node=element][data-editor-authored-change]:is([data-editor-authored-kind~=split],[data-editor-authored-kind~=join]):not([data-editor-inline])]:after:content-["¶"] [&_[data-editor-node=element][data-editor-authored-change][data-editor-authored-kind~=join]:not([data-editor-inline])]:after:line-through', ].join(' '), }, }, slots: { afterEditable: SuggestionSiblings }, })), ]; 80:Tdd7d,

'use client';

import { AuthoredPlugin } from 'platejs/authored';
import {
  type EditableSiblingProps,
  useEditor,
  useEditorSelector,
} from 'platejs/react';
import { suggestionColorOf } from 'platejs/suggestion';
import {
  SuggestionPlugin,
  useActiveSuggestion,
} from 'platejs/suggestion/react';
import * as React from 'react';
import { toast } from 'sonner';

type SuggestionColor = Readonly<{
  active: string;
  background: string;
  foreground: string;
  hover: string;
}>;

const SUGGESTION_COLORS: readonly SuggestionColor[] = [
  {
    active: 'var(--color-emerald-800)',
    background: 'var(--color-emerald-100)',
    foreground: 'var(--color-emerald-700)',
    hover: 'color-mix(in oklab, var(--color-emerald-200) 80%, transparent)',
  },
  {
    active: 'var(--color-violet-800)',
    background: 'var(--color-violet-100)',
    foreground: 'var(--color-violet-700)',
    hover: 'color-mix(in oklab, var(--color-violet-200) 80%, transparent)',
  },
  {
    active: 'var(--color-sky-800)',
    background: 'var(--color-sky-100)',
    foreground: 'var(--color-sky-700)',
    hover: 'color-mix(in oklab, var(--color-sky-200) 80%, transparent)',
  },
  {
    active: 'var(--color-fuchsia-800)',
    background: 'var(--color-fuchsia-100)',
    foreground: 'var(--color-fuchsia-700)',
    hover: 'color-mix(in oklab, var(--color-fuchsia-200) 80%, transparent)',
  },
  {
    active: 'var(--color-orange-800)',
    background: 'var(--color-orange-100)',
    foreground: 'var(--color-orange-700)',
    hover: 'color-mix(in oklab, var(--color-orange-200) 80%, transparent)',
  },
  {
    active: 'var(--color-cyan-800)',
    background: 'var(--color-cyan-100)',
    foreground: 'var(--color-cyan-700)',
    hover: 'color-mix(in oklab, var(--color-cyan-200) 80%, transparent)',
  },
  {
    active: 'var(--color-rose-800)',
    background: 'var(--color-rose-100)',
    foreground: 'var(--color-rose-700)',
    hover: 'color-mix(in oklab, var(--color-rose-200) 80%, transparent)',
  },
] as const;

const escapeCssString = (value: string) =>
  Array.from(value)
    .map((character) => {
      const code = character.codePointAt(0) ?? 0;

      if (character === '"' || character === '\\') return `\\${character}`;
      if (code < 0x20 || code === 0x7f) return `\\${code.toString(16)} `;

      return character;
    })
    .join('');

const colorDeclarations = ({
  active,
  background,
  foreground,
  hover,
}: SuggestionColor) =>
  `--suggestion-active:${active};--suggestion-bg:${background};--suggestion-fg:${foreground};--suggestion-hover:${hover};`;

function SuggestionColorStyles({ editableRef }: EditableSiblingProps) {
  const scopeId = React.useId();
  const { activeId } = useActiveSuggestion();
  // The active change's card, read again after each review commit, so the
  // active rule follows the card through a merge or a new oldest change.
  const activeCard = useEditorSelector((editor) =>
    activeId
      ? (editor.plugin(AuthoredPlugin).read.groupOf(activeId)?.id ?? null)
      : null
  );

  React.useLayoutEffect(() => {
    const root = editableRef.current;
    if (!root) return undefined;

    root.setAttribute('data-editor-suggestion-scope', scopeId);

    return () => {
      if (root.getAttribute('data-editor-suggestion-scope') === scopeId) {
        root.removeAttribute('data-editor-suggestion-scope');
      }
    };
  }, [editableRef, scopeId]);

  const scope = `[data-editor-suggestion-scope="${escapeCssString(scopeId)}"]`;
  // The active rule follows the color rules, so it wins on a highlight that
  // also paints another card, and it shows the active card's own colors.
  const rules = SUGGESTION_COLORS.map(
    (color, slot) =>
      `${scope} [data-editor-authored-color="${slot}"]{${colorDeclarations(color)}}`
  );

  if (activeCard) {
    const color =
      SUGGESTION_COLORS[
        suggestionColorOf(activeCard, SUGGESTION_COLORS.length)
      ];

    rules.push(
      `${scope} [data-editor-authored-groups~="${escapeCssString(
        activeCard
      )}"]{${colorDeclarations(color)}--suggestion-bg:${color.hover};--suggestion-fg:${color.active};}`
    );

Building Editors for the Web