docs

apps/www/public/r/index.json

@@ -1371,7 +1371,7 @@
   },
   {
     "dependencies": [
-      "@udecode/plate-comments/react"
+      "@udecode/plate-comments"
     ],
     "doc": {
       "description": "A toolbar button for adding inline comments.",

apps/www/public/r/styles/default/comment-toolbar-button.json

@@ -1,6 +1,6 @@
 {
   "dependencies": [
-    "@udecode/plate-comments/react"
+    "@udecode/plate-comments"
   ],
   "doc": {
     "description": "A toolbar button for adding inline comments.",

apps/www/public/r/styles/default/slash-input-element.json

@@ -24,7 +24,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { AIChatPlugin } from '@udecode/plate-ai/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { type PlateEditor, ParagraphPlugin } from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { INDENT_LIST_KEYS, ListStyleType } from '@udecode/plate-indent-list';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport {\n  CalendarIcon,\n  ChevronRightIcon,\n  Code2,\n  Columns3Icon,\n  Heading1Icon,\n  Heading2Icon,\n  Heading3Icon,\n  ListIcon,\n  ListOrdered,\n  PilcrowIcon,\n  Quote,\n  SparklesIcon,\n  Square,\n  Table,\n  TableOfContentsIcon,\n} from 'lucide-react';\n\nimport {\n  insertBlock,\n  insertInlineElement,\n} from '@/lib/transforms';\n\nimport {\n  InlineCombobox,\n  InlineComboboxContent,\n  InlineComboboxEmpty,\n  InlineComboboxGroup,\n  InlineComboboxGroupLabel,\n  InlineComboboxInput,\n  InlineComboboxItem,\n} from './inline-combobox';\nimport { PlateElement } from './plate-element';\n\ntype Group = {\n  group: string;\n  items: Item[];\n};\n\ninterface Item {\n  icon: React.ReactNode;\n\n  onSelect: (editor: PlateEditor, value: string) => void;\n\n  value: string;\n  className?: string;\n  focusEditor?: boolean;\n  keywords?: string[];\n  label?: string;\n}\n\nconst groups: Group[] = [\n  {\n    group: 'AI',\n    items: [\n      {\n        focusEditor: false,\n        icon: <SparklesIcon />,\n        value: 'AI',\n        onSelect: (editor) => {\n          editor.getApi(AIChatPlugin).aiChat.show();\n        },\n      },\n    ],\n  },\n  {\n    group: 'Basic blocks',\n    items: [\n      {\n        icon: <PilcrowIcon />,\n        keywords: ['paragraph'],\n        label: 'Text',\n        value: ParagraphPlugin.key,\n      },\n      {\n        icon: <Heading1Icon />,\n        keywords: ['title', 'h1'],\n        label: 'Heading 1',\n        value: HEADING_KEYS.h1,\n      },\n      {\n        icon: <Heading2Icon />,\n        keywords: ['subtitle', 'h2'],\n        label: 'Heading 2',\n        value: HEADING_KEYS.h2,\n      },\n      {\n        icon: <Heading3Icon />,\n        keywords: ['subtitle', 'h3'],\n        label: 'Heading 3',\n        value: HEADING_KEYS.h3,\n      },\n      {\n        icon: <ListIcon />,\n        keywords: ['unordered', 'ul', '-'],\n        label: 'Bulleted list',\n        value: ListStyleType.Disc,\n      },\n      {\n        icon: <ListOrdered />,\n        keywords: ['ordered', 'ol', '1'],\n        label: 'Numbered list',\n        value: ListStyleType.Decimal,\n      },\n      {\n        icon: <Square />,\n        keywords: ['checklist', 'task', 'checkbox', '[]'],\n        label: 'To-do list',\n        value: INDENT_LIST_KEYS.todo,\n      },\n      {\n        icon: <ChevronRightIcon />,\n        keywords: ['collapsible', 'expandable'],\n        label: 'Toggle',\n        value: TogglePlugin.key,\n      },\n      {\n        icon: <Code2 />,\n        keywords: ['```'],\n        label: 'Code Block',\n        value: CodeBlockPlugin.key,\n      },\n      {\n        icon: <Table />,\n        label: 'Table',\n        value: TablePlugin.key,\n      },\n      {\n        icon: <Quote />,\n        keywords: ['citation', 'blockquote', 'quote', '>'],\n        label: 'Blockquote',\n        value: BlockquotePlugin.key,\n      },\n    ].map((item) => ({\n      ...item,\n      onSelect: (editor, value) => {\n        insertBlock(editor, value);\n      },\n    })),\n  },\n  {\n    group: 'Advanced blocks',\n    items: [\n      {\n        icon: <TableOfContentsIcon />,\n        keywords: ['toc'],\n        value: 'Table of Contents',\n      },\n      {\n        icon: <Columns3Icon />,\n        label: '3 columns',\n        value: 'action_three_columns',\n      },\n    ].map((item) => ({\n      ...item,\n      onSelect: (editor, value) => {\n        insertBlock(editor, value);\n      },\n    })),\n  },\n  {\n    group: 'Inline',\n    items: [\n      {\n        focusEditor: true,\n        icon: <CalendarIcon />,\n        keywords: ['time'],\n        label: 'Date',\n        value: DatePlugin.key,\n      },\n    ].map((item) => ({\n      ...item,\n      onSelect: (editor, value) => {\n        insertInlineElement(editor, value);\n      },\n    })),\n  },\n];\n\nexport const SlashInputElement = withRef<typeof PlateElement>(\n  ({ className, ...props }, ref) => {\n    const { children, editor, element } = props;\n\n    return (\n      <PlateElement\n        ref={ref}\n        as=\"span\"\n        data-slate-value={element.value}\n        {...props}\n      >\n        <InlineCombobox element={element} trigger=\"/\">\n          <InlineComboboxInput />\n\n          <InlineComboboxContent>\n            <InlineComboboxEmpty>No results</InlineComboboxEmpty>\n\n            {groups.map(({ group, items }) => (\n              <InlineComboboxGroup key={group}>\n                <InlineComboboxGroupLabel>{group}</InlineComboboxGroupLabel>\n\n                {items.map(\n                  ({ focusEditor, icon, keywords, label, value, onSelect }) => (\n                    <InlineComboboxItem\n                      key={value}\n                      value={value}\n                      onClick={() => onSelect(editor, value)}\n                      label={label}\n                      focusEditor={focusEditor}\n                      group={group}\n                      keywords={keywords}\n                    >\n                      <div className=\"mr-2 text-muted-foreground\">{icon}</div>\n                      {label ?? value}\n                    </InlineComboboxItem>\n                  )\n                )}\n              </InlineComboboxGroup>\n            ))}\n          </InlineComboboxContent>\n        </InlineCombobox>\n\n        {children}\n      </PlateElement>\n    );\n  }\n);\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { AIChatPlugin } from '@udecode/plate-ai/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { type PlateEditor, ParagraphPlugin } from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { INDENT_LIST_KEYS, ListStyleType } from '@udecode/plate-indent-list';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport {\n  CalendarIcon,\n  ChevronRightIcon,\n  Code2,\n  Columns3Icon,\n  Heading1Icon,\n  Heading2Icon,\n  Heading3Icon,\n  ListIcon,\n  ListOrdered,\n  PilcrowIcon,\n  Quote,\n  SparklesIcon,\n  Square,\n  Table,\n  TableOfContentsIcon,\n} from 'lucide-react';\n\nimport {\n  insertBlock,\n  insertInlineElement,\n} from '@/lib/transforms';\n\nimport {\n  InlineCombobox,\n  InlineComboboxContent,\n  InlineComboboxEmpty,\n  InlineComboboxGroup,\n  InlineComboboxGroupLabel,\n  InlineComboboxInput,\n  InlineComboboxItem,\n} from './inline-combobox';\nimport { PlateElement } from './plate-element';\n\ntype Group = {\n  group: string;\n  items: Item[];\n};\n\ninterface Item {\n  icon: React.ReactNode;\n\n  onSelect: (editor: PlateEditor, value: string) => void;\n\n  value: string;\n  className?: string;\n  focusEditor?: boolean;\n  keywords?: string[];\n  label?: string;\n}\n\nconst groups: Group[] = [\n  {\n    group: 'AI',\n    items: [\n      {\n        focusEditor: false,\n        icon: <SparklesIcon />,\n        value: 'AI',\n        onSelect: (editor) => {\n          editor.getApi(AIChatPlugin).aiChat.show();\n        },\n      },\n    ],\n  },\n  {\n    group: 'Basic blocks',\n    items: [\n      {\n        icon: <PilcrowIcon />,\n        keywords: ['paragraph'],\n        label: 'Text',\n        value: ParagraphPlugin.key,\n      },\n      {\n        icon: <Heading1Icon />,\n        keywords: ['title', 'h1'],\n        label: 'Heading 1',\n        value: HEADING_KEYS.h1,\n      },\n      {\n        icon: <Heading2Icon />,\n        keywords: ['subtitle', 'h2'],\n        label: 'Heading 2',\n        value: HEADING_KEYS.h2,\n      },\n      {\n        icon: <Heading3Icon />,\n        keywords: ['subtitle', 'h3'],\n        label: 'Heading 3',\n        value: HEADING_KEYS.h3,\n      },\n      {\n        icon: <ListIcon />,\n        keywords: ['unordered', 'ul', '-'],\n        label: 'Bulleted list',\n        value: ListStyleType.Disc,\n      },\n      {\n        icon: <ListOrdered />,\n        keywords: ['ordered', 'ol', '1'],\n        label: 'Numbered list',\n        value: ListStyleType.Decimal,\n      },\n      {\n        icon: <Square />,\n        keywords: ['checklist', 'task', 'checkbox', '[]'],\n        label: 'To-do list',\n        value: INDENT_LIST_KEYS.todo,\n      },\n      {\n        icon: <ChevronRightIcon />,\n        keywords: ['collapsible', 'expandable'],\n        label: 'Toggle',\n        value: TogglePlugin.key,\n      },\n      {\n        icon: <Code2 />,\n        keywords: ['```'],\n        label: 'Code Block',\n        value: CodeBlockPlugin.key,\n      },\n      {\n        icon: <Table />,\n        label: 'Table',\n        value: TablePlugin.key,\n      },\n      {\n        icon: <Quote />,\n        keywords: ['citation', 'blockquote', 'quote', '>'],\n        label: 'Blockquote',\n        value: BlockquotePlugin.key,\n      },\n    ].map((item) => ({\n      ...item,\n      onSelect: (editor, value) => {\n        insertBlock(editor, value);\n      },\n    })),\n  },\n  {\n    group: 'Advanced blocks',\n    items: [\n      {\n        icon: <TableOfContentsIcon />,\n        keywords: ['toc'],\n        label: 'Table of contents',\n        value: TocPlugin.key,\n      },\n      {\n        icon: <Columns3Icon />,\n        label: '3 columns',\n        value: 'action_three_columns',\n      },\n    ].map((item) => ({\n      ...item,\n      onSelect: (editor, value) => {\n        insertBlock(editor, value);\n      },\n    })),\n  },\n  {\n    group: 'Inline',\n    items: [\n      {\n        focusEditor: true,\n        icon: <CalendarIcon />,\n        keywords: ['time'],\n        label: 'Date',\n        value: DatePlugin.key,\n      },\n    ].map((item) => ({\n      ...item,\n      onSelect: (editor, value) => {\n        insertInlineElement(editor, value);\n      },\n    })),\n  },\n];\n\nexport const SlashInputElement = withRef<typeof PlateElement>(\n  ({ className, ...props }, ref) => {\n    const { children, editor, element } = props;\n\n    return (\n      <PlateElement\n        ref={ref}\n        as=\"span\"\n        data-slate-value={element.value}\n        {...props}\n      >\n        <InlineCombobox element={element} trigger=\"/\">\n          <InlineComboboxInput />\n\n          <InlineComboboxContent>\n            <InlineComboboxEmpty>No results</InlineComboboxEmpty>\n\n            {groups.map(({ group, items }) => (\n              <InlineComboboxGroup key={group}>\n                <InlineComboboxGroupLabel>{group}</InlineComboboxGroupLabel>\n\n                {items.map(\n                  ({ focusEditor, icon, keywords, label, value, onSelect }) => (\n                    <InlineComboboxItem\n                      key={value}\n                      value={value}\n                      onClick={() => onSelect(editor, value)}\n                      label={label}\n                      focusEditor={focusEditor}\n                      group={group}\n                      keywords={keywords}\n                    >\n                      <div className=\"mr-2 text-muted-foreground\">{icon}</div>\n                      {label ?? value}\n                    </InlineComboboxItem>\n                  )\n                )}\n              </InlineComboboxGroup>\n            ))}\n          </InlineComboboxContent>\n        </InlineCombobox>\n\n        {children}\n      </PlateElement>\n    );\n  }\n);\n",
       "path": "plate-ui/slash-input-element.tsx",
       "target": "components/plate-ui/slash-input-element.tsx",
       "type": "registry:ui"