Merge pull request #3493 from udecode/fix/node-component

fix plugin.node.component
udecode · Sep 2, 2024 · 1ef6e10 · 1ef6e10
2 parents fde7ac9 + 40621e8
commit 1ef6e10
Show file tree

Hide file tree

Showing 49 changed files with 147 additions and 62 deletions.
diff --git a/.changeset/sour-beds-sort.md b/.changeset/sour-beds-sort.md
@@ -0,0 +1,5 @@
+---
+'@udecode/plate-core': patch
+---
+
+Fix plugin.node.component should work like plugin.render.node
diff --git a/.changeset/witty-oranges-punch.md b/.changeset/witty-oranges-punch.md
@@ -0,0 +1,6 @@
+---
+'@udecode/plate-floating': patch
+---
+
+- Fixes #3492
+- Add `state.showWhenReadOnly` prop to show the toolbar when read-only
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -181,7 +181,7 @@ No software is without bugs. If you encounter a problem, please follow these ste
 
 ### Reproductions
 
-The best way to help us understand and fix your issue is to provide a minimal reproduction of the problem. You can do this using **[our CodeSandbox](https://codesandbox.io/p/devbox/dgfyh7)**.
+The best way to help us understand and fix your issue is to provide a minimal reproduction of the problem. You can do this using **[our CodeSandbox](https://codesandbox.io/p/github/udecode/plate-template/main)**.
 
 ### Responding to questions
 

diff --git a/apps/www/content/docs/autoformat.mdx b/apps/www/content/docs/autoformat.mdx
@@ -58,32 +58,22 @@ const plugins = [
 
 ### `autoformatRules`
 
-<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/autoformatRules.ts" />
+<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/autoformat-rules.ts" />
 
 ### `autoformatBlocks`
 
-<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/autoformatBlocks.ts" />
-
 ### `autoformatIndentLists`
 
 If using the [Indent List plugin](/docs/indent-list), you can use the following rules:
 
-<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/autoformatIndentLists.ts" />
-
 ### `autoformatLists`
 
 If using the [List plugin](/docs/list), you can use the following rules:
 
-<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/autoformatLists.ts" />
-
 ### `autoformatMarks`
 
-<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/autoformatMarks.ts" />
-
 ### `autoformatUtils`
 
-<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/autoformatUtils.ts" />
-
 ## API
 
 ### AutoformatPlugin

diff --git a/apps/www/content/docs/components/blockquote-element.mdx b/apps/www/content/docs/components/blockquote-element.mdx
@@ -59,4 +59,4 @@ Update the import paths to match your project setup.
 
 <ComponentPreview name="playground-demo" id="basicnodes" />
 
-<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />
+<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />
diff --git a/apps/www/content/docs/components/changelog.mdx b/apps/www/content/docs/components/changelog.mdx
@@ -8,8 +8,15 @@ Since Plate UI is not a component library, a changelog is maintained here.
 
 Use the [CLI](https://platejs.org/docs/components/cli) to install the latest version of the components.
 
+## September 2024 #14
+
+### September 10 #14.1
+
+- fix `floating-toolbar`: show toolbar when readOnly
+
 ## August 2024 #13
 
+
 ### August 27 #13.3
 
 - Migrate to Plate 37

diff --git a/apps/www/content/docs/components/code-block-element.mdx b/apps/www/content/docs/components/code-block-element.mdx
@@ -63,4 +63,4 @@ Update the import paths to match your project setup.
 
 <ComponentPreview name="playground-demo" id="basicnodes" />
 
-<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />
+<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />
diff --git a/apps/www/content/docs/components/code-leaf.mdx b/apps/www/content/docs/components/code-leaf.mdx
@@ -59,4 +59,4 @@ Update the import paths to match your project setup.
 
 <ComponentPreview name="playground-demo" id="basicnodes" />
 
-<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />
+<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />
diff --git a/apps/www/content/docs/components/code-line-element.mdx b/apps/www/content/docs/components/code-line-element.mdx
@@ -59,4 +59,4 @@ Update the import paths to match your project setup.
 
 <ComponentPreview name="playground-demo" id="basicnodes" />
 
-<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />
+<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />
diff --git a/apps/www/content/docs/components/code-syntax-leaf.mdx b/apps/www/content/docs/components/code-syntax-leaf.mdx
@@ -59,4 +59,4 @@ Update the import paths to match your project setup.
 
 <ComponentPreview name="playground-demo" id="basicnodes" />
 
-<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />
+<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />
diff --git a/apps/www/content/docs/components/column-element.mdx b/apps/www/content/docs/components/column-element.mdx
@@ -62,4 +62,4 @@ Update the import paths to match your project setup.
 
 <ComponentPreview name="playground-demo" id="column" />
 
-<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />
+<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />
diff --git a/apps/www/content/docs/components/column-group-element.mdx b/apps/www/content/docs/components/column-group-element.mdx
@@ -64,4 +64,4 @@ Update the import paths to match your project setup.
 
 <ComponentPreview name="playground-demo" id="column" />
 
-<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />
+<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />
diff --git a/apps/www/content/docs/components/comment-leaf.mdx b/apps/www/content/docs/components/comment-leaf.mdx
@@ -59,4 +59,4 @@ Update the import paths to match your project setup.
 
 <ComponentPreview name="playground-demo" id="comment" />
 
-<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />
+<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />
diff --git a/apps/www/content/docs/components/comments-popover.mdx b/apps/www/content/docs/components/comments-popover.mdx
@@ -77,4 +77,3 @@ Update the import paths to match your project setup.
 <ComponentPreview name="playground-demo" id="comment" />
 
 <ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />
-<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/comments.ts" />
diff --git a/apps/www/content/docs/components/date-element.mdx b/apps/www/content/docs/components/date-element.mdx
@@ -41,7 +41,7 @@ Copy and paste the following code into your project.
 
 </Step>
 
-<ComponentSource name="date" />
+<ComponentSource name="date-element" />
 
 <Step>
 

diff --git a/apps/www/content/docs/components/draggable.mdx b/apps/www/content/docs/components/draggable.mdx
@@ -106,4 +106,4 @@ import { HTML5Backend } from 'react-dnd-html5-backend';
 
 ## Examples
 
-<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />
+<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />
diff --git a/apps/www/content/docs/components/emoji-input-element.mdx b/apps/www/content/docs/components/emoji-input-element.mdx
@@ -60,4 +60,4 @@ Update the import paths to match your project setup.
 
 <ComponentPreview name="playground-demo" id="emoji" />
 
-<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />
+<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />
diff --git a/apps/www/content/docs/components/excalidraw-element.mdx b/apps/www/content/docs/components/excalidraw-element.mdx
@@ -59,4 +59,4 @@ Update the import paths to match your project setup.
 
 <ComponentPreview name="playground-demo" id="excalidraw" />
 
-<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />
+<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />
diff --git a/apps/www/content/docs/components/heading-element.mdx b/apps/www/content/docs/components/heading-element.mdx
@@ -59,4 +59,4 @@ Update the import paths to match your project setup.
 
 <ComponentPreview name="playground-demo" id="basicnodes" />
 
-<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />
+<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />
diff --git a/apps/www/content/docs/components/highlight-leaf.mdx b/apps/www/content/docs/components/highlight-leaf.mdx
@@ -59,4 +59,4 @@ Update the import paths to match your project setup.
 
 <ComponentPreview name="playground-demo" id="highlight" />
 
-<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />
+<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />
diff --git a/apps/www/content/docs/components/hr-element.mdx b/apps/www/content/docs/components/hr-element.mdx
@@ -59,4 +59,4 @@ Update the import paths to match your project setup.
 
 <ComponentPreview name="playground-demo" id="hr" />
 
-<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />
+<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />
diff --git a/apps/www/content/docs/components/image-element.mdx b/apps/www/content/docs/components/image-element.mdx
@@ -68,4 +68,4 @@ Update the import paths to match your project setup.
 
 <ComponentPreview name="playground-demo" id="media" />
 
-<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />
+<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />
diff --git a/apps/www/content/docs/components/kbd-leaf.mdx b/apps/www/content/docs/components/kbd-leaf.mdx
@@ -58,4 +58,4 @@ Update the import paths to match your project setup.
 
 <ComponentPreview name="playground-demo" id="kbd" />
 
-<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />
+<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />
diff --git a/apps/www/content/docs/components/link-element.mdx b/apps/www/content/docs/components/link-element.mdx
@@ -59,4 +59,4 @@ Update the import paths to match your project setup.
 
 <ComponentPreview name="playground-demo" id="link" />
 
-<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />
+<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />
diff --git a/apps/www/content/docs/components/link-floating-toolbar.mdx b/apps/www/content/docs/components/link-floating-toolbar.mdx
@@ -71,4 +71,4 @@ Update the import paths to match your project setup.
 
 <ComponentPreview name="playground-demo" id="link" />
 
-<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />
+<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />
diff --git a/apps/www/content/docs/components/list-element.mdx b/apps/www/content/docs/components/list-element.mdx
@@ -59,4 +59,4 @@ Update the import paths to match your project setup.
 
 <ComponentPreview name="playground-demo" id="list" />
 
-<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />
+<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />
diff --git a/apps/www/content/docs/components/media-embed-element.mdx b/apps/www/content/docs/components/media-embed-element.mdx
@@ -67,4 +67,4 @@ Update the import paths to match your project setup.
 
 <ComponentPreview name="playground-demo" id="media" />
 
-<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />
+<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />
diff --git a/apps/www/content/docs/components/mention-element.mdx b/apps/www/content/docs/components/mention-element.mdx
@@ -59,4 +59,4 @@ Update the import paths to match your project setup.
 
 <ComponentPreview name="playground-demo" id="mention" />
 
-<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />
+<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />
diff --git a/apps/www/content/docs/components/mention-input-element.mdx b/apps/www/content/docs/components/mention-input-element.mdx
@@ -60,4 +60,4 @@ Update the import paths to match your project setup.
 
 <ComponentPreview name="playground-demo" id="mention" />
 
-<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />
+<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />
diff --git a/apps/www/content/docs/components/paragraph-element.mdx b/apps/www/content/docs/components/paragraph-element.mdx
@@ -59,4 +59,4 @@ Update the import paths to match your project setup.
 
 <ComponentPreview name="playground-demo" id="basicnodes" />
 
-<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />
+<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />
diff --git a/apps/www/content/docs/components/table-cell-element.mdx b/apps/www/content/docs/components/table-cell-element.mdx
@@ -59,4 +59,4 @@ Update the import paths to match your project setup.
 
 <ComponentPreview name="playground-demo" id="table" />
 
-<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />
+<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />
diff --git a/apps/www/content/docs/components/table-element.mdx b/apps/www/content/docs/components/table-element.mdx
@@ -59,4 +59,4 @@ Update the import paths to match your project setup.
 
 <ComponentPreview name="playground-demo" id="table" />
 
-<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />
+<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />
diff --git a/apps/www/content/docs/components/table-row-element.mdx b/apps/www/content/docs/components/table-row-element.mdx
@@ -59,4 +59,4 @@ Update the import paths to match your project setup.
 
 <ComponentPreview name="playground-demo" id="table" />
 
-<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />
+<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />
diff --git a/apps/www/content/docs/components/todo-list-element.mdx b/apps/www/content/docs/components/todo-list-element.mdx
@@ -59,4 +59,4 @@ Update the import paths to match your project setup.
 
 <ComponentPreview name="playground-demo" id="list" />
 
-<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />
+<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />
diff --git a/apps/www/content/docs/components/toggle-element.mdx b/apps/www/content/docs/components/toggle-element.mdx
@@ -60,4 +60,4 @@ Update the import paths to match your project setup.
 
 <ComponentPreview name="playground-demo" id="toggle" />
 
-<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />
+<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />
diff --git a/apps/www/public/registry/index.json b/apps/www/public/registry/index.json
@@ -181,6 +181,17 @@
     "registryDependencies": [],
     "type": "components:plate-ui"
   },
+  {
+    "dependencies": [
+      "@udecode/plate-date"
+    ],
+    "files": [
+      "plate-ui/date-element.tsx"
+    ],
+    "name": "date-element",
+    "registryDependencies": [],
+    "type": "components:plate-ui"
+  },
   {
     "dependencies": [
       "@radix-ui/react-slot"

diff --git a/apps/www/public/registry/styles/default/date-element.json b/apps/www/public/registry/styles/default/date-element.json
@@ -0,0 +1,14 @@
+{
+  "dependencies": [
+    "@udecode/plate-date"
+  ],
+  "files": [
+    {
+      "content": "'use client';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { setNodes } from '@udecode/plate-common';\nimport { PlateElement, findNodePath } from '@udecode/plate-common/react';\n\nimport { Calendar } from './calendar';\nimport { Popover, PopoverContent, PopoverTrigger } from './popover';\n\nexport const DateElement = withRef<typeof PlateElement>(\n  ({ children, className, ...props }, ref) => {\n    const { editor, element } = props;\n\n    return (\n      <PlateElement\n        className={cn('inline-block', className)}\n        contentEditable={false}\n        ref={ref}\n        {...props}\n      >\n        <Popover>\n          <PopoverTrigger asChild>\n            <span\n              className={cn(\n                'w-fit cursor-pointer rounded-sm bg-muted px-1 text-muted-foreground'\n              )}\n              contentEditable={false}\n            >\n              {element.date ? (\n                (() => {\n                  const today = new Date();\n                  const elementDate = new Date(element.date as string);\n                  const isToday =\n                    elementDate.getDate() === today.getDate() &&\n                    elementDate.getMonth() === today.getMonth() &&\n                    elementDate.getFullYear() === today.getFullYear();\n\n                  const isYesterday =\n                    new Date(\n                      today.setDate(today.getDate() - 1)\n                    ).toDateString() === elementDate.toDateString();\n                  const isTomorrow =\n                    new Date(\n                      today.setDate(today.getDate() + 2)\n                    ).toDateString() === elementDate.toDateString();\n\n                  if (isToday) return 'Today';\n                  if (isYesterday) return 'Yesterday';\n                  if (isTomorrow) return 'Tomorrow';\n\n                  return elementDate.toLocaleDateString(undefined, {\n                    day: 'numeric',\n                    month: 'long',\n                    year: 'numeric',\n                  });\n                })()\n              ) : (\n                <span>Pick a date</span>\n              )}\n            </span>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\">\n            <Calendar\n              initialFocus\n              mode=\"single\"\n              onSelect={(date) => {\n                if (!date) return;\n\n                setNodes(\n                  editor,\n                  { date: date.toDateString() },\n                  { at: findNodePath(editor, element) }\n                );\n              }}\n              selected={new Date(element.date as string)}\n            />\n          </PopoverContent>\n        </Popover>\n        {children}\n      </PlateElement>\n    );\n  }\n);\n",
+      "name": "date-element.tsx"
+    }
+  ],
+  "name": "date-element",
+  "registryDependencies": [],
+  "type": "components:plate-ui"
+}
diff --git a/apps/www/public/registry/styles/default/floating-toolbar-buttons.json b/apps/www/public/registry/styles/default/floating-toolbar-buttons.json
@@ -4,7 +4,7 @@
   ],
   "files": [
     {
-      "content": "import React from 'react';\n\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { useEditorReadOnly } from '@udecode/plate-common/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { MarkToolbarButton } from './mark-toolbar-button';\nimport { MoreDropdownMenu } from './more-dropdown-menu';\nimport { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';\n\nexport function FloatingToolbarButtons() {\n  const readOnly = useEditorReadOnly();\n\n  return (\n    <>\n      {!readOnly && (\n        <>\n          <TurnIntoDropdownMenu />\n\n          <MarkToolbarButton nodeType={BoldPlugin.key} tooltip=\"Bold (⌘+B)\">\n            <Icons.bold />\n          </MarkToolbarButton>\n          <MarkToolbarButton nodeType={ItalicPlugin.key} tooltip=\"Italic (⌘+I)\">\n            <Icons.italic />\n          </MarkToolbarButton>\n          <MarkToolbarButton\n            nodeType={UnderlinePlugin.key}\n            tooltip=\"Underline (⌘+U)\"\n          >\n            <Icons.underline />\n          </MarkToolbarButton>\n          <MarkToolbarButton\n            nodeType={StrikethroughPlugin.key}\n            tooltip=\"Strikethrough (⌘+⇧+M)\"\n          >\n            <Icons.strikethrough />\n          </MarkToolbarButton>\n          <MarkToolbarButton nodeType={CodePlugin.key} tooltip=\"Code (⌘+E)\">\n            <Icons.code />\n          </MarkToolbarButton>\n        </>\n      )}\n\n      <MoreDropdownMenu />\n    </>\n  );\n}\n",
+      "content": "import React from 'react';\n\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { useEditorReadOnly } from '@udecode/plate-common/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { MarkToolbarButton } from './mark-toolbar-button';\nimport { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';\n\nexport function FloatingToolbarButtons() {\n  const readOnly = useEditorReadOnly();\n\n  return (\n    <>\n      {!readOnly && (\n        <>\n          <TurnIntoDropdownMenu />\n\n          <MarkToolbarButton nodeType={BoldPlugin.key} tooltip=\"Bold (⌘+B)\">\n            <Icons.bold />\n          </MarkToolbarButton>\n          <MarkToolbarButton nodeType={ItalicPlugin.key} tooltip=\"Italic (⌘+I)\">\n            <Icons.italic />\n          </MarkToolbarButton>\n          <MarkToolbarButton\n            nodeType={UnderlinePlugin.key}\n            tooltip=\"Underline (⌘+U)\"\n          >\n            <Icons.underline />\n          </MarkToolbarButton>\n          <MarkToolbarButton\n            nodeType={StrikethroughPlugin.key}\n            tooltip=\"Strikethrough (⌘+⇧+M)\"\n          >\n            <Icons.strikethrough />\n          </MarkToolbarButton>\n          <MarkToolbarButton nodeType={CodePlugin.key} tooltip=\"Code (⌘+E)\">\n            <Icons.code />\n          </MarkToolbarButton>\n        </>\n      )}\n    </>\n  );\n}\n",
       "name": "floating-toolbar-buttons.tsx"
     }
   ],

diff --git a/apps/www/src/__registry__/index.tsx b/apps/www/src/__registry__/index.tsx
@@ -308,6 +308,15 @@ export const Index: Record<string, any> = {
       subcategory: "undefined",
       component: React.lazy(() => import('@/registry/default/plate-ui/blockquote-element')),
     },
+    'date-element': {
+      name: 'date-element',
+      type: 'components:plate-ui',
+      registryDependencies: [],
+      files: ['registry/default/plate-ui/date-element.tsx'],
+      category: "undefined",
+      subcategory: "undefined",
+      component: React.lazy(() => import('@/registry/default/plate-ui/date-element')),
+    },
     'button': {
       name: 'button',
       type: 'components:plate-ui',

diff --git a/apps/www/src/components/plate-ui/playground-floating-toolbar-buttons.tsx b/apps/www/src/components/plate-ui/playground-floating-toolbar-buttons.tsx
@@ -60,7 +60,7 @@ export function PlaygroundFloatingToolbarButtons({ id }: { id?: ValueId }) {
 
       {isEnabled('comment', id) && <CommentToolbarButton />}
 
-      <PlaygroundMoreDropdownMenu />
+      {!readOnly && <PlaygroundMoreDropdownMenu />}
     </>
   );
 }
diff --git a/apps/www/src/registry/default/example/playground-demo.tsx b/apps/www/src/registry/default/example/playground-demo.tsx
@@ -375,7 +375,9 @@ export default function PlaygroundDemo({
               />
 
               {enabled['floating-toolbar'] && (
-                <FloatingToolbar>
+                <FloatingToolbar
+                  state={{ showWhenReadOnly: isEnabled('comment', id) }}
+                >
                   {enabled['floating-toolbar-buttons'] && (
                     <PlaygroundFloatingToolbarButtons id={id} />
                   )}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -59,4 +59,4 @@ Update the import paths to match your project setup.

		<ComponentPreview name="playground-demo" id="basicnodes" />

		<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />
		<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -63,4 +63,4 @@ Update the import paths to match your project setup.

		<ComponentPreview name="playground-demo" id="basicnodes" />

		<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />
		<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -62,4 +62,4 @@ Update the import paths to match your project setup.

		<ComponentPreview name="playground-demo" id="column" />

		<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />
		<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -64,4 +64,4 @@ Update the import paths to match your project setup.

		<ComponentPreview name="playground-demo" id="column" />

		<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />
		<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -77,4 +77,3 @@ Update the import paths to match your project setup.
		<ComponentPreview name="playground-demo" id="comment" />

		<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />
		<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/comments.ts" />
-Original file line number
+Diff line change
@@ Expand Up / @@ -41,7 +41,7 @@ Copy and paste the following code into your project. @@
     </Step>
-    <ComponentSource name="date" />
+    <ComponentSource name="date-element" />
     <Step>
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
Expand Up		@@ -106,4 +106,4 @@ import { HTML5Backend } from 'react-dnd-html5-backend';

		## Examples

		<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />
		<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -60,4 +60,4 @@ Update the import paths to match your project setup.

		<ComponentPreview name="playground-demo" id="emoji" />

		<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />
		<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -68,4 +68,4 @@ Update the import paths to match your project setup.

		<ComponentPreview name="playground-demo" id="media" />

		<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />
		<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -58,4 +58,4 @@ Update the import paths to match your project setup.

		<ComponentPreview name="playground-demo" id="kbd" />

		<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />
		<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />