From 7943d8c4834106954c1b64bfb7bd81c2a03b7be8 Mon Sep 17 00:00:00 2001 From: zbeyens Date: Tue, 1 Oct 2024 03:30:31 +0200 Subject: [PATCH] fix --- .changeset/core.md | 5 + apps/www/public/r/index.json | 108 ++++++++++++++---- .../r/styles/default/block-selection.json | 16 +++ .../r/styles/default/blockquote-element.json | 6 +- .../r/styles/default/code-block-element.json | 5 +- .../r/styles/default/code-line-element.json | 6 +- .../r/styles/default/column-element.json | 7 +- .../public/r/styles/default/comment-leaf.json | 2 +- .../public/r/styles/default/date-element.json | 5 +- .../public/r/styles/default/draggable.json | 5 +- .../r/styles/default/emoji-input-element.json | 6 +- .../r/styles/default/excalidraw-element.json | 6 +- .../r/styles/default/heading-element.json | 6 +- .../r/styles/default/highlight-leaf.json | 2 +- .../public/r/styles/default/hr-element.json | 6 +- .../r/styles/default/image-element.json | 5 +- .../public/r/styles/default/link-element.json | 6 +- .../public/r/styles/default/list-element.json | 6 +- .../r/styles/default/media-embed-element.json | 5 +- .../r/styles/default/mention-element.json | 7 +- .../styles/default/mention-input-element.json | 5 +- .../r/styles/default/paragraph-element.json | 6 +- .../r/styles/default/plate-element.json | 16 +++ .../r/styles/default/slash-input-element.json | 5 +- .../r/styles/default/table-cell-element.json | 5 +- .../r/styles/default/table-element.json | 5 +- .../r/styles/default/table-row-element.json | 6 +- .../r/styles/default/todo-list-element.json | 5 +- .../r/styles/default/toggle-element.json | 6 +- apps/www/src/__registry__/index.tsx | 77 +++++++++---- .../registry/default/plate-ui/draggable.tsx | 2 +- apps/www/src/registry/registry-ui.ts | 1 + packages/core/src/react/editor/withPlate.ts | 8 +- tailwind.config.cjs | 2 - 34 files changed, 271 insertions(+), 98 deletions(-) create mode 100644 .changeset/core.md create mode 100644 apps/www/public/r/styles/default/block-selection.json create mode 100644 apps/www/public/r/styles/default/plate-element.json diff --git a/.changeset/core.md b/.changeset/core.md new file mode 100644 index 000000000..b87fb676c --- /dev/null +++ b/.changeset/core.md @@ -0,0 +1,5 @@ +--- +'@udecode/plate-core': patch +--- + +`useOptions`, `useOption` missing plugins now warn instead of erroring. diff --git a/apps/www/public/r/index.json b/apps/www/public/r/index.json index 05a1d3220..1127fcbb9 100644 --- a/apps/www/public/r/index.json +++ b/apps/www/public/r/index.json @@ -11,6 +11,34 @@ "registryDependencies": [], "type": "registry:ui" }, + { + "dependencies": [ + "@udecode/plate-selection" + ], + "files": [ + { + "path": "plate-ui/block-selection.tsx", + "type": "registry:ui" + } + ], + "name": "block-selection", + "registryDependencies": [], + "type": "registry:ui" + }, + { + "dependencies": [], + "files": [ + { + "path": "plate-ui/plate-element.tsx", + "type": "registry:ui" + } + ], + "name": "plate-element", + "registryDependencies": [ + "block-selection" + ], + "type": "registry:ui" + }, { "dependencies": [ "@udecode/plate-cloud" @@ -65,7 +93,8 @@ ], "name": "code-block-element", "registryDependencies": [ - "command" + "command", + "plate-element" ], "type": "registry:ui" }, @@ -86,7 +115,8 @@ "name": "column-element", "registryDependencies": [ "command", - "resizable" + "resizable", + "plate-element" ], "type": "registry:ui" }, @@ -176,6 +206,7 @@ { "dependencies": [ "@udecode/plate-dnd", + "@udecode/plate-selection", "react-dnd", "react-dnd-html5-backend" ], @@ -255,7 +286,9 @@ ], "name": "emoji-input-element", "registryDependencies": [ - "inline-combobox" + "inline-combobox", + "plate-element", + "use-debounce" ], "type": "registry:ui" }, @@ -301,7 +334,9 @@ } ], "name": "blockquote-element", - "registryDependencies": [], + "registryDependencies": [ + "plate-element" + ], "type": "registry:ui" }, { @@ -316,7 +351,8 @@ ], "name": "date-element", "registryDependencies": [ - "calendar" + "calendar", + "plate-element" ], "type": "registry:ui" }, @@ -404,7 +440,9 @@ } ], "name": "code-line-element", - "registryDependencies": [], + "registryDependencies": [ + "plate-element" + ], "type": "registry:ui" }, { @@ -514,7 +552,9 @@ } ], "name": "excalidraw-element", - "registryDependencies": [], + "registryDependencies": [ + "plate-element" + ], "type": "registry:ui" }, { @@ -596,7 +636,9 @@ } ], "name": "heading-element", - "registryDependencies": [], + "registryDependencies": [ + "plate-element" + ], "type": "registry:ui" }, { @@ -624,7 +666,9 @@ } ], "name": "hr-element", - "registryDependencies": [], + "registryDependencies": [ + "plate-element" + ], "type": "registry:ui" }, { @@ -641,7 +685,8 @@ "registryDependencies": [ "media-popover", "caption", - "resizable" + "resizable", + "plate-element" ], "type": "registry:ui" }, @@ -764,7 +809,9 @@ } ], "name": "link-element", - "registryDependencies": [], + "registryDependencies": [ + "plate-element" + ], "type": "registry:ui" }, { @@ -813,7 +860,9 @@ } ], "name": "list-element", - "registryDependencies": [], + "registryDependencies": [ + "plate-element" + ], "type": "registry:ui" }, { @@ -864,7 +913,8 @@ "registryDependencies": [ "media-popover", "caption", - "resizable" + "resizable", + "plate-element" ], "type": "registry:ui" }, @@ -914,7 +964,10 @@ } ], "name": "mention-element", - "registryDependencies": [], + "registryDependencies": [ + "plate-element", + "use-mounted" + ], "type": "registry:ui" }, { @@ -929,7 +982,8 @@ ], "name": "mention-input-element", "registryDependencies": [ - "inline-combobox" + "inline-combobox", + "plate-element" ], "type": "registry:ui" }, @@ -989,7 +1043,9 @@ } ], "name": "paragraph-element", - "registryDependencies": [], + "registryDependencies": [ + "plate-element" + ], "type": "registry:ui" }, { @@ -1063,7 +1119,8 @@ ], "name": "slash-input-element", "registryDependencies": [ - "inline-combobox" + "inline-combobox", + "plate-element" ], "type": "registry:ui" }, @@ -1079,7 +1136,8 @@ ], "name": "table-cell-element", "registryDependencies": [ - "resizable" + "resizable", + "plate-element" ], "type": "registry:ui" }, @@ -1112,7 +1170,8 @@ ], "name": "table-element", "registryDependencies": [ - "dropdown-menu" + "dropdown-menu", + "plate-element" ], "type": "registry:ui" }, @@ -1127,7 +1186,9 @@ } ], "name": "table-row-element", - "registryDependencies": [], + "registryDependencies": [ + "plate-element" + ], "type": "registry:ui" }, { @@ -1142,7 +1203,8 @@ ], "name": "todo-list-element", "registryDependencies": [ - "checkbox" + "checkbox", + "plate-element" ], "type": "registry:ui" }, @@ -1157,7 +1219,9 @@ } ], "name": "toggle-element", - "registryDependencies": [], + "registryDependencies": [ + "plate-element" + ], "type": "registry:ui" }, { diff --git a/apps/www/public/r/styles/default/block-selection.json b/apps/www/public/r/styles/default/block-selection.json new file mode 100644 index 000000000..b0f71815c --- /dev/null +++ b/apps/www/public/r/styles/default/block-selection.json @@ -0,0 +1,16 @@ +{ + "dependencies": [ + "@udecode/plate-selection" + ], + "files": [ + { + "content": "import { useBlockSelected } from '@udecode/plate-selection/react';\nimport { type VariantProps, cva } from 'class-variance-authority';\n\nconst blockSelectionVariants = cva(\n 'pointer-events-none absolute inset-0 z-[1] bg-brand/[.13] transition-opacity',\n {\n defaultVariants: {\n active: false,\n },\n variants: {\n active: {\n false: 'opacity-0',\n true: 'opacity-100',\n },\n },\n }\n);\n\nexport function BlockSelection({\n className,\n ...props\n}: React.HTMLAttributes &\n VariantProps) {\n const isBlockSelected = useBlockSelected();\n\n if (!isBlockSelected) return null;\n\n return (\n \n );\n}\n", + "path": "plate-ui/block-selection.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "block-selection", + "registryDependencies": [], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/blockquote-element.json b/apps/www/public/r/styles/default/blockquote-element.json index 5b55d29b4..6577256e1 100644 --- a/apps/www/public/r/styles/default/blockquote-element.json +++ b/apps/www/public/r/styles/default/blockquote-element.json @@ -4,13 +4,15 @@ ], "files": [ { - "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\n\nexport const BlockquoteElement = withRef(\n ({ children, className, ...props }, ref) => {\n return (\n \n
{children}
\n \n );\n }\n);\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\n\nimport { PlateElement } from './plate-element';\n\nexport const BlockquoteElement = withRef(\n ({ children, className, ...props }, ref) => {\n return (\n \n {children}\n \n );\n }\n);\n", "path": "plate-ui/blockquote-element.tsx", "target": "", "type": "registry:ui" } ], "name": "blockquote-element", - "registryDependencies": [], + "registryDependencies": [ + "plate-element" + ], "type": "registry:ui" } \ No newline at end of file diff --git a/apps/www/public/r/styles/default/code-block-element.json b/apps/www/public/r/styles/default/code-block-element.json index 8690146cf..259938b53 100644 --- a/apps/www/public/r/styles/default/code-block-element.json +++ b/apps/www/public/r/styles/default/code-block-element.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { useCodeBlockElementState } from '@udecode/plate-code-block/react';\nimport { PlateElement } from '@udecode/plate-common/react';\n\nimport { CodeBlockCombobox } from './code-block-combobox';\n\nimport './code-block-element.css';\n\nexport const CodeBlockElement = withRef(\n ({ children, className, ...props }, ref) => {\n const { element } = props;\n const state = useCodeBlockElementState({ element });\n\n return (\n \n 
\n          {children}\n
\n\n {state.syntax && (\n \n \n \n )}\n \n );\n }\n);\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { useCodeBlockElementState } from '@udecode/plate-code-block/react';\n\nimport { CodeBlockCombobox } from './code-block-combobox';\nimport { PlateElement } from './plate-element';\n\nimport './code-block-element.css';\n\nexport const CodeBlockElement = withRef(\n ({ children, className, ...props }, ref) => {\n const { element } = props;\n const state = useCodeBlockElementState({ element });\n\n return (\n \n 
\n          {children}\n
\n\n {state.syntax && (\n \n \n \n )}\n \n );\n }\n);\n", "path": "plate-ui/code-block-element.tsx", "target": "", "type": "registry:ui" @@ -24,7 +24,8 @@ ], "name": "code-block-element", "registryDependencies": [ - "command" + "command", + "plate-element" ], "type": "registry:ui" } \ No newline at end of file diff --git a/apps/www/public/r/styles/default/code-line-element.json b/apps/www/public/r/styles/default/code-line-element.json index eed0120cb..1d5b20b5b 100644 --- a/apps/www/public/r/styles/default/code-line-element.json +++ b/apps/www/public/r/styles/default/code-line-element.json @@ -4,13 +4,15 @@ ], "files": [ { - "content": "'use client';\n\nimport React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\n\nexport const CodeLineElement = withRef((props, ref) => (\n \n));\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { PlateElement } from './plate-element';\n\nexport const CodeLineElement = withRef((props, ref) => (\n \n));\n", "path": "plate-ui/code-line-element.tsx", "target": "", "type": "registry:ui" } ], "name": "code-line-element", - "registryDependencies": [], + "registryDependencies": [ + "plate-element" + ], "type": "registry:ui" } \ No newline at end of file diff --git a/apps/www/public/r/styles/default/column-element.json b/apps/www/public/r/styles/default/column-element.json index 30c842633..7cd90b1b7 100644 --- a/apps/www/public/r/styles/default/column-element.json +++ b/apps/www/public/r/styles/default/column-element.json @@ -4,13 +4,13 @@ ], "files": [ { - "content": "import React from 'react';\n\nimport type { TColumnElement } from '@udecode/plate-layout';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement, useElement, withHOC } from '@udecode/plate-common/react';\nimport { ResizableProvider } from '@udecode/plate-resizable';\nimport { useReadOnly } from 'slate-react';\n\nexport const ColumnElement = withHOC(\n ResizableProvider,\n withRef(({ children, className, ...props }, ref) => {\n const readOnly = useReadOnly();\n const { width } = useElement();\n\n return (\n \n {children}\n \n );\n })\n);\n", + "content": "import React from 'react';\n\nimport type { TColumnElement } from '@udecode/plate-layout';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { useElement, withHOC } from '@udecode/plate-common/react';\nimport { ResizableProvider } from '@udecode/plate-resizable';\nimport { useReadOnly } from 'slate-react';\n\nimport { PlateElement } from './plate-element';\n\nexport const ColumnElement = withHOC(\n ResizableProvider,\n withRef(({ children, className, ...props }, ref) => {\n const readOnly = useReadOnly();\n const { width } = useElement();\n\n return (\n \n {children}\n \n );\n })\n);\n", "path": "plate-ui/column-element.tsx", "target": "", "type": "registry:ui" }, { - "content": "import React from 'react';\n\nimport type { TColumnElement } from '@udecode/plate-layout';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n PlateElement,\n useElement,\n useRemoveNodeButton,\n} from '@udecode/plate-common/react';\nimport {\n ColumnItemPlugin,\n useColumnState,\n useDebouncePopoverOpen,\n} from '@udecode/plate-layout/react';\nimport { useReadOnly } from 'slate-react';\n\nimport { Icons } from '@/components/icons';\n\nimport { Button } from './button';\nimport { Popover, PopoverAnchor, PopoverContent } from './popover';\nimport { Separator } from './separator';\n\nexport const ColumnGroupElement = withRef(\n ({ children, className, ...props }, ref) => {\n return (\n \n \n
{children}
\n \n \n );\n }\n);\n\nexport function ColumnFloatingToolbar({ children }: React.PropsWithChildren) {\n const readOnly = useReadOnly();\n\n const {\n setDoubleColumn,\n setDoubleSideDoubleColumn,\n setLeftSideDoubleColumn,\n setRightSideDoubleColumn,\n setThreeColumn,\n } = useColumnState();\n\n const element = useElement(ColumnItemPlugin.key);\n\n const { props: buttonProps } = useRemoveNodeButton({ element });\n\n const isOpen = useDebouncePopoverOpen();\n\n if (readOnly) return <>{children};\n\n return (\n \n {children}\n e.preventDefault()}\n align=\"center\"\n side=\"top\"\n sideOffset={10}\n >\n
\n \n \n \n \n \n \n \n\n \n \n
\n \n \n );\n}\n", + "content": "import React from 'react';\n\nimport type { TColumnElement } from '@udecode/plate-layout';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { useElement, useRemoveNodeButton } from '@udecode/plate-common/react';\nimport {\n ColumnItemPlugin,\n useColumnState,\n useDebouncePopoverOpen,\n} from '@udecode/plate-layout/react';\nimport { useReadOnly } from 'slate-react';\n\nimport { Icons } from '@/components/icons';\n\nimport { Button } from './button';\nimport { PlateElement } from './plate-element';\nimport { Popover, PopoverAnchor, PopoverContent } from './popover';\nimport { Separator } from './separator';\n\nexport const ColumnGroupElement = withRef(\n ({ children, className, ...props }, ref) => {\n return (\n \n \n
{children}
\n \n \n );\n }\n);\n\nexport function ColumnFloatingToolbar({ children }: React.PropsWithChildren) {\n const readOnly = useReadOnly();\n\n const {\n setDoubleColumn,\n setDoubleSideDoubleColumn,\n setLeftSideDoubleColumn,\n setRightSideDoubleColumn,\n setThreeColumn,\n } = useColumnState();\n\n const element = useElement(ColumnItemPlugin.key);\n\n const { props: buttonProps } = useRemoveNodeButton({ element });\n\n const isOpen = useDebouncePopoverOpen();\n\n if (readOnly) return <>{children};\n\n return (\n \n {children}\n e.preventDefault()}\n align=\"center\"\n side=\"top\"\n sideOffset={10}\n >\n
\n \n \n \n \n \n \n \n\n \n \n
\n \n \n );\n}\n", "path": "plate-ui/column-group-element.tsx", "target": "", "type": "registry:ui" @@ -19,7 +19,8 @@ "name": "column-element", "registryDependencies": [ "command", - "resizable" + "resizable", + "plate-element" ], "type": "registry:ui" } \ No newline at end of file diff --git a/apps/www/public/r/styles/default/comment-leaf.json b/apps/www/public/r/styles/default/comment-leaf.json index 744474f69..7ce05e737 100644 --- a/apps/www/public/r/styles/default/comment-leaf.json +++ b/apps/www/public/r/styles/default/comment-leaf.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "'use client';\n\nimport React from 'react';\n\nimport type { TCommentText } from '@udecode/plate-comments';\n\nimport { cn } from '@udecode/cn';\nimport {\n useCommentLeaf,\n useCommentLeafState,\n} from '@udecode/plate-comments/react';\nimport { type PlateLeafProps, PlateLeaf } from '@udecode/plate-common/react';\n\nexport function CommentLeaf({\n className,\n ...props\n}: PlateLeafProps) {\n const { children, leaf, nodeProps } = props;\n\n const state = useCommentLeafState({ leaf });\n const { props: rootProps } = useCommentLeaf(state);\n\n if (!state.commentCount) return <>{children};\n\n let aboveChildren = <>{children};\n\n if (!state.isActive) {\n for (let i = 1; i < state.commentCount; i++) {\n aboveChildren = {aboveChildren};\n }\n }\n\n return (\n \n {aboveChildren}\n \n );\n}\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport type { TCommentText } from '@udecode/plate-comments';\n\nimport { cn } from '@udecode/cn';\nimport {\n useCommentLeaf,\n useCommentLeafState,\n} from '@udecode/plate-comments/react';\nimport { type PlateLeafProps, PlateLeaf } from '@udecode/plate-common/react';\n\nexport function CommentLeaf({\n className,\n ...props\n}: PlateLeafProps) {\n const { children, leaf, nodeProps } = props;\n\n const state = useCommentLeafState({ leaf });\n const { props: rootProps } = useCommentLeaf(state);\n\n if (!state.commentCount) return <>{children};\n\n let aboveChildren = <>{children};\n\n if (!state.isActive) {\n for (let i = 1; i < state.commentCount; i++) {\n aboveChildren = {aboveChildren};\n }\n }\n\n return (\n \n {aboveChildren}\n \n );\n}\n", "path": "plate-ui/comment-leaf.tsx", "target": "", "type": "registry:ui" diff --git a/apps/www/public/r/styles/default/date-element.json b/apps/www/public/r/styles/default/date-element.json index c03270851..f41f1aa0c 100644 --- a/apps/www/public/r/styles/default/date-element.json +++ b/apps/www/public/r/styles/default/date-element.json @@ -4,7 +4,7 @@ ], "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(\n ({ children, className, ...props }, ref) => {\n const { editor, element } = props;\n\n return (\n \n \n \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 Pick a date\n )}\n \n \n \n {\n if (!date) return;\n\n setNodes(\n editor,\n { date: date.toDateString() },\n { at: findNodePath(editor, element) }\n );\n }}\n mode=\"single\"\n initialFocus\n />\n \n \n {children}\n \n );\n }\n);\n", + "content": "'use client';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { setNodes } from '@udecode/plate-common';\nimport { findNodePath } from '@udecode/plate-common/react';\n\nimport { Calendar } from './calendar';\nimport { PlateElement } from './plate-element';\nimport { Popover, PopoverContent, PopoverTrigger } from './popover';\n\nexport const DateElement = withRef(\n ({ children, className, ...props }, ref) => {\n const { editor, element } = props;\n\n return (\n \n \n \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 Pick a date\n )}\n \n \n \n {\n if (!date) return;\n\n setNodes(\n editor,\n { date: date.toDateString() },\n { at: findNodePath(editor, element) }\n );\n }}\n mode=\"single\"\n initialFocus\n />\n \n \n {children}\n \n );\n }\n);\n", "path": "plate-ui/date-element.tsx", "target": "", "type": "registry:ui" @@ -12,7 +12,8 @@ ], "name": "date-element", "registryDependencies": [ - "calendar" + "calendar", + "plate-element" ], "type": "registry:ui" } \ No newline at end of file diff --git a/apps/www/public/r/styles/default/draggable.json b/apps/www/public/r/styles/default/draggable.json index 823fd6f73..6422636d1 100644 --- a/apps/www/public/r/styles/default/draggable.json +++ b/apps/www/public/r/styles/default/draggable.json @@ -1,18 +1,19 @@ { "dependencies": [ "@udecode/plate-dnd", + "@udecode/plate-selection", "react-dnd", "react-dnd-html5-backend" ], "files": [ { - "content": "'use client';\n\nimport React from 'react';\n\nimport type { ClassNames, TEditor } from '@udecode/plate-common';\nimport type { DropTargetMonitor } from 'react-dnd';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n type PlateElementProps,\n useEditorRef,\n} from '@udecode/plate-common/react';\nimport {\n type DragItemNode,\n useDraggable,\n useDraggableState,\n} from '@udecode/plate-dnd';\nimport { BlockSelectionPlugin } from '@udecode/plate-selection/react';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n Tooltip,\n TooltipContent,\n TooltipPortal,\n TooltipProvider,\n TooltipTrigger,\n} from './tooltip';\n\nexport interface DraggableProps\n extends PlateElementProps,\n ClassNames<{\n /** Block. */\n block: string;\n\n /** Block and gutter. */\n blockAndGutter: string;\n\n /** Block toolbar in the gutter. */\n blockToolbar: string;\n\n /**\n * Block toolbar wrapper in the gutter left. It has the height of a line\n * of the block.\n */\n blockToolbarWrapper: string;\n\n blockWrapper: string;\n\n /** Button to dnd the block, in the block toolbar. */\n dragHandle: string;\n\n /** Icon of the drag button, in the drag icon. */\n dragIcon: string;\n\n /** Show a dropline above or below the block when dragging a block. */\n dropLine: string;\n\n /** Gutter at the left side of the editor. It has the height of the block */\n gutterLeft: string;\n }> {\n /**\n * Intercepts the drop handling. If `false` is returned, the default drop\n * behavior is called after. If `true` is returned, the default behavior is\n * not called.\n */\n onDropHandler?: (\n editor: TEditor,\n props: {\n id: string;\n dragItem: DragItemNode;\n monitor: DropTargetMonitor;\n nodeRef: any;\n }\n ) => boolean;\n}\n\nconst DragHandle = () => {\n const editor = useEditorRef();\n\n return (\n \n \n \n {\n event.stopPropagation();\n event.preventDefault();\n\n // if (element.id) {\n // editor.getApi(BlockSelectionPlugin).blockSelection.addSelectedRow(element.id as string);\n // api.blockContextMenu.show(editor.id, event as any);\n // }\n }}\n onMouseDown={() => {\n editor\n .getApi(BlockSelectionPlugin)\n .blockSelection.resetSelectedIds();\n }}\n />\n \n \n Drag to move\n \n \n \n );\n};\n\nexport const Draggable = withRef<'div', DraggableProps>(\n ({ className, classNames = {}, onDropHandler, ...props }, ref) => {\n const { children, element } = props;\n\n const state = useDraggableState({ element, onDropHandler });\n const { dropLine, isDragging, isHovered } = state;\n const {\n droplineProps,\n groupProps,\n gutterLeftProps,\n previewRef,\n handleRef,\n } = useDraggable(state);\n\n return (\n \n \n
\n \n \n {isHovered && }\n
\n \n \n \n\n
\n {children}\n\n {!!dropLine && (\n \n )}\n
\n \n );\n }\n);\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport type { TEditor } from '@udecode/plate-common';\nimport type { DropTargetMonitor } from 'react-dnd';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n type PlateElementProps,\n MemoizedChildren,\n useEditorPlugin,\n useEditorRef,\n withHOC,\n} from '@udecode/plate-common/react';\nimport {\n type DragItemNode,\n DraggableProvider,\n useDraggable,\n useDraggableGutter,\n useDraggableState,\n useDropLine,\n} from '@udecode/plate-dnd';\nimport { BlockSelectionPlugin } from '@udecode/plate-selection/react';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n Tooltip,\n TooltipContent,\n TooltipPortal,\n TooltipProvider,\n TooltipTrigger,\n} from './tooltip';\n\nexport interface DraggableProps extends PlateElementProps {\n /**\n * Intercepts the drop handling. If `false` is returned, the default drop\n * behavior is called after. If `true` is returned, the default behavior is\n * not called.\n */\n onDropHandler?: (\n editor: TEditor,\n props: {\n id: string;\n dragItem: DragItemNode;\n monitor: DropTargetMonitor;\n nodeRef: any;\n }\n ) => boolean;\n}\n\nexport const Draggable = withHOC(\n DraggableProvider,\n withRef<'div', DraggableProps>(\n ({ className, onDropHandler, ...props }, ref) => {\n const { children, element } = props;\n\n const state = useDraggableState({ element, onDropHandler });\n const { isDragging } = state;\n const { previewRef, handleRef } = useDraggable(state);\n\n return (\n \n \n
\n \n \n \n
\n \n \n \n\n
\n {children}\n\n \n
\n \n );\n }\n )\n);\n\nconst Gutter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ children, className, ...props }, ref) => {\n const { useOption } = useEditorPlugin(BlockSelectionPlugin);\n const isSelectionAreaVisible = useOption('isSelectionAreaVisible');\n const gutter = useDraggableGutter();\n\n return (\n \n {children}\n \n );\n});\n\nconst DragHandle = React.memo(() => {\n const editor = useEditorRef();\n\n return (\n \n \n \n {\n event.stopPropagation();\n event.preventDefault();\n }}\n onMouseDown={() => {\n editor\n .getApi(BlockSelectionPlugin)\n .blockSelection?.resetSelectedIds();\n }}\n />\n \n \n Drag to move\n \n \n \n );\n});\n\nconst DropLine = React.memo(\n React.forwardRef>(\n ({ children, className, ...props }, ref) => {\n const state = useDropLine();\n\n if (!state.dropLine) return null;\n\n return (\n \n {children}\n \n );\n }\n )\n);\n", "path": "plate-ui/draggable.tsx", "target": "", "type": "registry:ui" }, { - "content": "import type { FC } from 'react';\n\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport {\n ParagraphPlugin,\n createNodesWithHOC,\n} from '@udecode/plate-common/react';\nimport {\n type WithDraggableOptions,\n withDraggable as withDraggablePrimitive,\n} from '@udecode/plate-dnd';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport {\n BulletedListPlugin,\n NumberedListPlugin,\n} from '@udecode/plate-list/react';\nimport {\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n} from '@udecode/plate-media/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { type DraggableProps, Draggable } from './draggable';\n\nexport const withDraggable = (\n Component: FC,\n options?: WithDraggableOptions<\n Partial>\n >\n) =>\n withDraggablePrimitive(Draggable, Component, options as any);\n\nexport const withDraggablesPrimitive = createNodesWithHOC(withDraggable);\n\nexport const withDraggables = (components: any) => {\n return withDraggablesPrimitive(components, [\n {\n keys: [\n ParagraphPlugin.key,\n BulletedListPlugin.key,\n NumberedListPlugin.key,\n ],\n level: 0,\n },\n {\n key: HEADING_KEYS.h1,\n draggableProps: {\n classNames: {\n blockToolbarWrapper: 'h-[1.3em]',\n gutterLeft: 'px-0 pb-1 text-[1.875em]',\n },\n },\n },\n {\n key: HEADING_KEYS.h2,\n draggableProps: {\n classNames: {\n blockToolbarWrapper: 'h-[1.3em]',\n gutterLeft: 'px-0 pb-1 text-[1.5em]',\n },\n },\n },\n {\n key: HEADING_KEYS.h3,\n draggableProps: {\n classNames: {\n blockToolbarWrapper: 'h-[1.3em]',\n gutterLeft: 'pt-[2px] px-0 pb-1 text-[1.25em]',\n },\n },\n },\n {\n keys: [HEADING_KEYS.h4, HEADING_KEYS.h5],\n draggableProps: {\n classNames: {\n blockToolbarWrapper: 'h-[1.3em]',\n gutterLeft: 'pt-[3px] px-0 pb-0 text-[1.1em]',\n },\n },\n },\n {\n keys: [ParagraphPlugin.key],\n draggableProps: {\n classNames: {\n gutterLeft: 'pt-[3px] px-0 pb-0',\n },\n },\n },\n {\n keys: [HEADING_KEYS.h6, BulletedListPlugin.key, NumberedListPlugin.key],\n draggableProps: {\n classNames: {\n gutterLeft: 'px-0 pb-0',\n },\n },\n },\n {\n key: BlockquotePlugin.key,\n draggableProps: {\n classNames: {\n gutterLeft: 'px-0 pb-0',\n },\n },\n },\n {\n key: CodeBlockPlugin.key,\n draggableProps: {\n classNames: {\n gutterLeft: 'pt-6 px-0 pb-0',\n },\n },\n },\n {\n key: ImagePlugin.key,\n draggableProps: {\n classNames: {\n gutterLeft: 'pt-0 px-0 pb-0',\n },\n },\n },\n {\n key: MediaEmbedPlugin.key,\n draggableProps: {\n classNames: {\n gutterLeft: 'pt-0 px-0 pb-0',\n },\n },\n },\n {\n key: ExcalidrawPlugin.key,\n draggableProps: {\n classNames: {\n gutterLeft: 'pt-0 px-0 pb-0',\n },\n },\n },\n {\n key: TogglePlugin.key,\n draggableProps: {\n classNames: {\n gutterLeft: 'pt-0 px-0 pb-0',\n },\n },\n },\n {\n key: ColumnPlugin.key,\n draggableProps: {\n classNames: {\n gutterLeft: 'pt-0 px-0 pb-0',\n },\n },\n },\n {\n key: PlaceholderPlugin.key,\n draggableProps: {\n classNames: {\n gutterLeft: 'pt-3 px-0 pb-0',\n },\n },\n },\n {\n key: TablePlugin.key,\n draggableProps: {\n classNames: {\n gutterLeft: 'pt-3 px-0 pb-0',\n },\n },\n },\n ]);\n};\n", + "content": "import type { FC } from 'react';\n\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport {\n ParagraphPlugin,\n createNodesWithHOC,\n} from '@udecode/plate-common/react';\nimport {\n type WithDraggableOptions,\n withDraggable as withDraggablePrimitive,\n} from '@udecode/plate-dnd';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport {\n BulletedListPlugin,\n NumberedListPlugin,\n} from '@udecode/plate-list/react';\nimport {\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n} from '@udecode/plate-media/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { type DraggableProps, Draggable } from './draggable';\n\nexport const withDraggable = (\n Component: FC,\n options?: WithDraggableOptions<\n Partial>\n >\n) =>\n withDraggablePrimitive(Draggable, Component, options as any);\n\nexport const withDraggablesPrimitive = createNodesWithHOC(withDraggable);\n\nexport const withDraggables = (components: any) => {\n return withDraggablesPrimitive(components, [\n {\n keys: [\n ParagraphPlugin.key,\n BulletedListPlugin.key,\n NumberedListPlugin.key,\n ],\n level: 0,\n },\n {\n key: HEADING_KEYS.h1,\n draggableProps: {\n className:\n '[&_.slate-blockToolbarWrapper]:h-[1.3em] [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-1 [&_.slate-gutterLeft]:text-[1.875em]',\n },\n },\n {\n key: HEADING_KEYS.h2,\n draggableProps: {\n className:\n '[&_.slate-blockToolbarWrapper]:h-[1.3em] [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-1 [&_.slate-gutterLeft]:text-[1.5em]',\n },\n },\n {\n key: HEADING_KEYS.h3,\n draggableProps: {\n className:\n '[&_.slate-blockToolbarWrapper]:h-[1.3em] [&_.slate-gutterLeft]:pt-[2px] [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-1 [&_.slate-gutterLeft]:text-[1.25em]',\n },\n },\n {\n keys: [HEADING_KEYS.h4, HEADING_KEYS.h5],\n draggableProps: {\n className:\n '[&_.slate-blockToolbarWrapper]:h-[1.3em] [&_.slate-gutterLeft]:pt-[3px] [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-0 [&_.slate-gutterLeft]:text-[1.1em]',\n },\n },\n {\n keys: [ParagraphPlugin.key],\n draggableProps: {\n className:\n '[&_.slate-gutterLeft]:pt-[3px] [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-0',\n },\n },\n {\n keys: [HEADING_KEYS.h6, BulletedListPlugin.key, NumberedListPlugin.key],\n draggableProps: {\n className: '[&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-0',\n },\n },\n {\n key: BlockquotePlugin.key,\n draggableProps: {\n className: '[&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-0',\n },\n },\n {\n key: CodeBlockPlugin.key,\n draggableProps: {\n className:\n '[&_.slate-gutterLeft]:pt-6 [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-0',\n },\n },\n {\n key: ImagePlugin.key,\n draggableProps: {\n className:\n '[&_.slate-gutterLeft]:pt-0 [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-0',\n },\n },\n {\n key: MediaEmbedPlugin.key,\n draggableProps: {\n className:\n '[&_.slate-gutterLeft]:pt-0 [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-0',\n },\n },\n {\n key: ExcalidrawPlugin.key,\n draggableProps: {\n className:\n '[&_.slate-gutterLeft]:pt-0 [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-0',\n },\n },\n {\n key: TogglePlugin.key,\n draggableProps: {\n className:\n '[&_.slate-gutterLeft]:pt-0 [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-0',\n },\n },\n {\n key: ColumnPlugin.key,\n draggableProps: {\n className:\n '[&_.slate-gutterLeft]:pt-0 [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-0',\n },\n },\n {\n key: PlaceholderPlugin.key,\n draggableProps: {\n className:\n '[&_.slate-gutterLeft]:pt-3 [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-0',\n },\n },\n {\n key: TablePlugin.key,\n draggableProps: {\n className:\n '[&_.slate-gutterLeft]:pt-3 [&_.slate-gutterLeft]:px-0 [&_.slate-gutterLeft]:pb-0',\n },\n },\n ]);\n};\n", "path": "plate-ui/with-draggables.tsx", "target": "", "type": "registry:ui" diff --git a/apps/www/public/r/styles/default/emoji-input-element.json b/apps/www/public/r/styles/default/emoji-input-element.json index 4cd8ed33e..5964810e4 100644 --- a/apps/www/public/r/styles/default/emoji-input-element.json +++ b/apps/www/public/r/styles/default/emoji-input-element.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "import React, { useMemo, useState } from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\nimport { EmojiInlineIndexSearch, insertEmoji } from '@udecode/plate-emoji';\n\nimport { useDebounce } from '@/registry/default/hooks/use-debounce';\n\nimport {\n InlineCombobox,\n InlineComboboxContent,\n InlineComboboxEmpty,\n InlineComboboxInput,\n InlineComboboxItem,\n} from './inline-combobox';\n\nexport const EmojiInputElement = withRef(\n ({ className, ...props }, ref) => {\n const { children, editor, element } = props;\n const [value, setValue] = useState('');\n const debouncedValue = useDebounce(value, 100);\n const isPending = value !== debouncedValue;\n\n const filteredEmojis = useMemo(() => {\n if (debouncedValue.trim().length === 0) return [];\n\n return EmojiInlineIndexSearch.getInstance()\n .search(debouncedValue.replace(/:$/, ''))\n .get();\n }, [debouncedValue]);\n\n return (\n \n \n \n\n \n {!isPending && (\n No matching emoji found\n )}\n\n {filteredEmojis.map((emoji) => (\n insertEmoji(editor, emoji)}\n >\n {emoji.skins[0].native} {emoji.name}\n \n ))}\n \n \n\n {children}\n \n );\n }\n);\n", + "content": "import React, { useMemo, useState } from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { PlateElement } from './plate-element';\nimport { EmojiInlineIndexSearch, insertEmoji } from '@udecode/plate-emoji';\n\nimport { useDebounce } from '@/registry/default/hooks/use-debounce';\n\nimport {\n InlineCombobox,\n InlineComboboxContent,\n InlineComboboxEmpty,\n InlineComboboxInput,\n InlineComboboxItem,\n} from './inline-combobox';\n\nexport const EmojiInputElement = withRef(\n ({ className, ...props }, ref) => {\n const { children, editor, element } = props;\n const [value, setValue] = useState('');\n const debouncedValue = useDebounce(value, 100);\n const isPending = value !== debouncedValue;\n\n const filteredEmojis = useMemo(() => {\n if (debouncedValue.trim().length === 0) return [];\n\n return EmojiInlineIndexSearch.getInstance()\n .search(debouncedValue.replace(/:$/, ''))\n .get();\n }, [debouncedValue]);\n\n return (\n \n \n \n\n \n {!isPending && (\n No matching emoji found\n )}\n\n {filteredEmojis.map((emoji) => (\n insertEmoji(editor, emoji)}\n >\n {emoji.skins[0].native} {emoji.name}\n \n ))}\n \n \n\n {children}\n \n );\n }\n);\n", "path": "plate-ui/emoji-input-element.tsx", "target": "", "type": "registry:ui" @@ -12,7 +12,9 @@ ], "name": "emoji-input-element", "registryDependencies": [ - "inline-combobox" + "inline-combobox", + "plate-element", + "use-debounce" ], "type": "registry:ui" } \ No newline at end of file diff --git a/apps/www/public/r/styles/default/excalidraw-element.json b/apps/www/public/r/styles/default/excalidraw-element.json index 216544d22..7e0e94cf9 100644 --- a/apps/www/public/r/styles/default/excalidraw-element.json +++ b/apps/www/public/r/styles/default/excalidraw-element.json @@ -4,13 +4,15 @@ ], "files": [ { - "content": "import React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\nimport { useExcalidrawElement } from '@udecode/plate-excalidraw/react';\n\nexport const ExcalidrawElement = withRef(\n ({ nodeProps, ...props }, ref) => {\n const { children, element } = props;\n\n const { Excalidraw, excalidrawProps } = useExcalidrawElement({\n element,\n });\n\n return (\n \n
\n
\n {Excalidraw && (\n \n )}\n
\n
\n {children}\n \n );\n }\n);\n", + "content": "import React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { PlateElement } from './plate-element';\nimport { useExcalidrawElement } from '@udecode/plate-excalidraw/react';\n\nexport const ExcalidrawElement = withRef(\n ({ nodeProps, ...props }, ref) => {\n const { children, element } = props;\n\n const { Excalidraw, excalidrawProps } = useExcalidrawElement({\n element,\n });\n\n return (\n \n
\n
\n {Excalidraw && (\n \n )}\n
\n
\n {children}\n \n );\n }\n);\n", "path": "plate-ui/excalidraw-element.tsx", "target": "", "type": "registry:ui" } ], "name": "excalidraw-element", - "registryDependencies": [], + "registryDependencies": [ + "plate-element" + ], "type": "registry:ui" } \ No newline at end of file diff --git a/apps/www/public/r/styles/default/heading-element.json b/apps/www/public/r/styles/default/heading-element.json index 8af1132a1..63cebfbfe 100644 --- a/apps/www/public/r/styles/default/heading-element.json +++ b/apps/www/public/r/styles/default/heading-element.json @@ -4,13 +4,15 @@ ], "files": [ { - "content": "import React from 'react';\n\nimport { withRef, withVariants } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\nimport { cva } from 'class-variance-authority';\n\nconst headingVariants = cva('relative mb-1', {\n variants: {\n variant: {\n h1: 'mt-[1.6em] pb-1 font-heading text-4xl font-bold',\n h2: 'mt-[1.4em] pb-px font-heading text-2xl font-semibold tracking-tight',\n h3: 'mt-[1em] pb-px font-heading text-xl font-semibold tracking-tight',\n h4: 'mt-[0.75em] font-heading text-lg font-semibold tracking-tight',\n h5: 'mt-[0.75em] text-lg font-semibold tracking-tight',\n h6: 'mt-[0.75em] text-base font-semibold tracking-tight',\n },\n },\n});\n\nconst blockVariants = cva('', {\n variants: {\n isFirstBlock: {\n false: '',\n true: 'mt-0',\n },\n },\n});\n\nconst HeadingElementVariants = withVariants(\n withVariants(PlateElement, headingVariants, ['variant']),\n blockVariants,\n ['isFirstBlock']\n);\n\nexport const HeadingElement = withRef(\n ({ children, isFirstBlock, variant = 'h1', ...props }, ref) => {\n const { editor, element } = props;\n\n const Element = variant!;\n\n return (\n \n {children}\n \n );\n }\n);\n", + "content": "import React from 'react';\n\nimport { withRef, withVariants } from '@udecode/cn';\nimport { cva } from 'class-variance-authority';\n\nimport { PlateElement } from './plate-element';\n\nconst headingVariants = cva('relative mb-1', {\n variants: {\n variant: {\n h1: 'mt-[1.6em] pb-1 font-heading text-4xl font-bold',\n h2: 'mt-[1.4em] pb-px font-heading text-2xl font-semibold tracking-tight',\n h3: 'mt-[1em] pb-px font-heading text-xl font-semibold tracking-tight',\n h4: 'mt-[0.75em] font-heading text-lg font-semibold tracking-tight',\n h5: 'mt-[0.75em] text-lg font-semibold tracking-tight',\n h6: 'mt-[0.75em] text-base font-semibold tracking-tight',\n },\n },\n});\n\nconst blockVariants = cva('', {\n variants: {\n isFirstBlock: {\n false: '',\n true: 'mt-0',\n },\n },\n});\n\nconst HeadingElementVariants = withVariants(\n withVariants(PlateElement, headingVariants, ['variant']),\n blockVariants,\n ['isFirstBlock']\n);\n\nexport const HeadingElement = withRef(\n ({ children, isFirstBlock, variant = 'h1', ...props }, ref) => {\n const { editor, element } = props;\n\n return (\n \n {children}\n \n );\n }\n);\n", "path": "plate-ui/heading-element.tsx", "target": "", "type": "registry:ui" } ], "name": "heading-element", - "registryDependencies": [], + "registryDependencies": [ + "plate-element" + ], "type": "registry:ui" } \ No newline at end of file diff --git a/apps/www/public/r/styles/default/highlight-leaf.json b/apps/www/public/r/styles/default/highlight-leaf.json index 69e88f4af..b00103bc3 100644 --- a/apps/www/public/r/styles/default/highlight-leaf.json +++ b/apps/www/public/r/styles/default/highlight-leaf.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateLeaf } from '@udecode/plate-common/react';\n\nexport const HighlightLeaf = withRef(\n ({ children, className, ...props }, ref) => (\n \n {children}\n \n )\n);\n", + "content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateLeaf } from '@udecode/plate-common/react';\n\nexport const HighlightLeaf = withRef(\n ({ children, className, ...props }, ref) => (\n \n {children}\n \n )\n);\n", "path": "plate-ui/highlight-leaf.tsx", "target": "", "type": "registry:ui" diff --git a/apps/www/public/r/styles/default/hr-element.json b/apps/www/public/r/styles/default/hr-element.json index 2f4001032..9c8a34ebf 100644 --- a/apps/www/public/r/styles/default/hr-element.json +++ b/apps/www/public/r/styles/default/hr-element.json @@ -4,13 +4,15 @@ ], "files": [ { - "content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\nimport { useFocused, useSelected } from 'slate-react';\n\nexport const HrElement = withRef(\n ({ className, nodeProps, ...props }, ref) => {\n const { children } = props;\n\n const selected = useSelected();\n const focused = useFocused();\n\n return (\n \n
\n \n
\n {children}\n \n );\n }\n);\n", + "content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement } from './plate-element';\nimport { useFocused, useSelected } from 'slate-react';\n\nexport const HrElement = withRef(\n ({ className, nodeProps, ...props }, ref) => {\n const { children } = props;\n\n const selected = useSelected();\n const focused = useFocused();\n\n return (\n \n
\n \n
\n {children}\n \n );\n }\n);\n", "path": "plate-ui/hr-element.tsx", "target": "", "type": "registry:ui" } ], "name": "hr-element", - "registryDependencies": [], + "registryDependencies": [ + "plate-element" + ], "type": "registry:ui" } \ No newline at end of file diff --git a/apps/www/public/r/styles/default/image-element.json b/apps/www/public/r/styles/default/image-element.json index 305022c00..251cc06fa 100644 --- a/apps/www/public/r/styles/default/image-element.json +++ b/apps/www/public/r/styles/default/image-element.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement, withHOC } from '@udecode/plate-common/react';\nimport { Image, ImagePlugin, useMediaState } from '@udecode/plate-media/react';\nimport { ResizableProvider, useResizableStore } from '@udecode/plate-resizable';\n\nimport { Caption, CaptionTextarea } from './caption';\nimport { MediaPopover } from './media-popover';\nimport {\n Resizable,\n ResizeHandle,\n mediaResizeHandleVariants,\n} from './resizable';\n\nexport const ImageElement = withHOC(\n ResizableProvider,\n withRef(\n ({ children, className, nodeProps, ...props }, ref) => {\n const { align = 'center', focused, readOnly, selected } = useMediaState();\n\n const width = useResizableStore().get.width();\n\n return (\n \n \n
\n \n \n \n \n \n\n \n \n \n
\n\n {children}\n \n \n );\n }\n )\n);\n", + "content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { withHOC } from '@udecode/plate-common/react';\nimport { Image, ImagePlugin, useMediaState } from '@udecode/plate-media/react';\nimport { ResizableProvider, useResizableStore } from '@udecode/plate-resizable';\n\nimport { Caption, CaptionTextarea } from './caption';\nimport { MediaPopover } from './media-popover';\nimport { PlateElement } from './plate-element';\nimport {\n Resizable,\n ResizeHandle,\n mediaResizeHandleVariants,\n} from './resizable';\n\nexport const ImageElement = withHOC(\n ResizableProvider,\n withRef(\n ({ children, className, nodeProps, ...props }, ref) => {\n const { align = 'center', focused, readOnly, selected } = useMediaState();\n\n const width = useResizableStore().get.width();\n\n return (\n \n \n
\n \n \n \n \n \n\n \n \n \n
\n\n {children}\n \n \n );\n }\n )\n);\n", "path": "plate-ui/image-element.tsx", "target": "", "type": "registry:ui" @@ -14,7 +14,8 @@ "registryDependencies": [ "media-popover", "caption", - "resizable" + "resizable", + "plate-element" ], "type": "registry:ui" } \ No newline at end of file diff --git a/apps/www/public/r/styles/default/link-element.json b/apps/www/public/r/styles/default/link-element.json index 2403a9bbb..8f9c8ee64 100644 --- a/apps/www/public/r/styles/default/link-element.json +++ b/apps/www/public/r/styles/default/link-element.json @@ -4,13 +4,15 @@ ], "files": [ { - "content": "import React from 'react';\n\nimport type { TLinkElement } from '@udecode/plate-link';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement, useElement } from '@udecode/plate-common/react';\nimport { useLink } from '@udecode/plate-link/react';\n\nexport const LinkElement = withRef(\n ({ children, className, ...props }, ref) => {\n const element = useElement();\n const { props: linkProps } = useLink({ element });\n\n return (\n \n {children}\n \n );\n }\n);\n", + "content": "import React from 'react';\n\nimport type { TLinkElement } from '@udecode/plate-link';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { useElement } from '@udecode/plate-common/react';\nimport { useLink } from '@udecode/plate-link/react';\n\nimport { PlateElement } from './plate-element';\n\nexport const LinkElement = withRef(\n ({ children, className, ...props }, ref) => {\n const element = useElement();\n const { props: linkProps } = useLink({ element });\n\n return (\n \n {children}\n \n );\n }\n);\n", "path": "plate-ui/link-element.tsx", "target": "", "type": "registry:ui" } ], "name": "link-element", - "registryDependencies": [], + "registryDependencies": [ + "plate-element" + ], "type": "registry:ui" } \ No newline at end of file diff --git a/apps/www/public/r/styles/default/list-element.json b/apps/www/public/r/styles/default/list-element.json index 8e7e5db11..d82a2ec45 100644 --- a/apps/www/public/r/styles/default/list-element.json +++ b/apps/www/public/r/styles/default/list-element.json @@ -4,13 +4,15 @@ ], "files": [ { - "content": "import React from 'react';\n\nimport { withRef, withVariants } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\nimport { cva } from 'class-variance-authority';\n\nconst listVariants = cva('m-0 ps-6', {\n variants: {\n variant: {\n ol: 'list-decimal',\n ul: 'list-disc [&_ul]:list-[circle] [&_ul_ul]:list-[square]',\n },\n },\n});\n\nconst ListElementVariants = withVariants(PlateElement, listVariants, [\n 'variant',\n]);\n\nexport const ListElement = withRef(\n ({ children, variant = 'ul', ...props }, ref) => {\n const Component = variant!;\n\n return (\n \n {children}\n \n );\n }\n);\n", + "content": "import React from 'react';\n\nimport { withRef, withVariants } from '@udecode/cn';\nimport { cva } from 'class-variance-authority';\n\nimport { PlateElement } from './plate-element';\n\nconst listVariants = cva('m-0 ps-6', {\n variants: {\n variant: {\n ol: 'list-decimal',\n ul: 'list-disc [&_ul]:list-[circle] [&_ul_ul]:list-[square]',\n },\n },\n});\n\nconst ListElementVariants = withVariants(PlateElement, listVariants, [\n 'variant',\n]);\n\nexport const ListElement = withRef(\n ({ children, variant = 'ul', ...props }, ref) => {\n return (\n \n {children}\n \n );\n }\n);\n", "path": "plate-ui/list-element.tsx", "target": "", "type": "registry:ui" } ], "name": "list-element", - "registryDependencies": [], + "registryDependencies": [ + "plate-element" + ], "type": "registry:ui" } \ No newline at end of file diff --git a/apps/www/public/r/styles/default/media-embed-element.json b/apps/www/public/r/styles/default/media-embed-element.json index 230ee02b1..8cd87c466 100644 --- a/apps/www/public/r/styles/default/media-embed-element.json +++ b/apps/www/public/r/styles/default/media-embed-element.json @@ -6,7 +6,7 @@ ], "files": [ { - "content": "import React from 'react';\nimport LiteYouTubeEmbed from 'react-lite-youtube-embed';\nimport { Tweet } from 'react-tweet';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement, withHOC } from '@udecode/plate-common/react';\nimport { parseTwitterUrl, parseVideoUrl } from '@udecode/plate-media';\nimport { MediaEmbedPlugin, useMediaState } from '@udecode/plate-media/react';\nimport { ResizableProvider, useResizableStore } from '@udecode/plate-resizable';\n\nimport { Caption, CaptionTextarea } from './caption';\nimport { MediaPopover } from './media-popover';\nimport {\n Resizable,\n ResizeHandle,\n mediaResizeHandleVariants,\n} from './resizable';\n\nexport const MediaEmbedElement = withHOC(\n ResizableProvider,\n withRef(({ children, className, ...props }, ref) => {\n const {\n align = 'center',\n embed,\n focused,\n isTweet,\n isVideo,\n isYoutube,\n readOnly,\n selected,\n } = useMediaState({\n urlParsers: [parseTwitterUrl, parseVideoUrl],\n });\n const width = useResizableStore().get.width();\n const provider = embed?.provider;\n\n return (\n \n \n
\n \n \n\n {isVideo ? (\n isYoutube ? (\n _iframe]:absolute [&_>_iframe]:left-0 [&_>_iframe]:top-0 [&_>_iframe]:size-full',\n '[&_>_.lty-playbtn]:z-[1] [&_>_.lty-playbtn]:h-[46px] [&_>_.lty-playbtn]:w-[70px] [&_>_.lty-playbtn]:rounded-[14%] [&_>_.lty-playbtn]:bg-[#212121] [&_>_.lty-playbtn]:opacity-80 [&_>_.lty-playbtn]:[transition:all_0.2s_cubic-bezier(0,_0,_0.2,_1)]',\n '[&:hover_>_.lty-playbtn]:bg-[red] [&:hover_>_.lty-playbtn]:opacity-100',\n '[&_>_.lty-playbtn]:before:border-y-[11px] [&_>_.lty-playbtn]:before:border-l-[19px] [&_>_.lty-playbtn]:before:border-r-0 [&_>_.lty-playbtn]:before:border-[transparent_transparent_transparent_#fff] [&_>_.lty-playbtn]:before:content-[\"\"]',\n '[&_>_.lty-playbtn]:absolute [&_>_.lty-playbtn]:left-1/2 [&_>_.lty-playbtn]:top-1/2 [&_>_.lty-playbtn]:[transform:translate3d(-50%,-50%,0)]',\n '[&_>_.lty-playbtn]:before:absolute [&_>_.lty-playbtn]:before:left-1/2 [&_>_.lty-playbtn]:before:top-1/2 [&_>_.lty-playbtn]:before:[transform:translate3d(-50%,-50%,0)]',\n '[&.lyt-activated]:cursor-[unset]',\n '[&.lyt-activated]:before:pointer-events-none [&.lyt-activated]:before:opacity-0',\n '[&.lyt-activated_>_.lty-playbtn]:pointer-events-none [&.lyt-activated_>_.lty-playbtn]:!opacity-0'\n )}\n />\n ) : (\n \n \n \n )\n ) : null}\n\n {isTweet && (\n \n \n \n )}\n\n \n \n\n \n \n \n
\n\n {children}\n \n \n );\n })\n);\n", + "content": "import React from 'react';\nimport LiteYouTubeEmbed from 'react-lite-youtube-embed';\nimport { Tweet } from 'react-tweet';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { withHOC } from '@udecode/plate-common/react';\nimport { parseTwitterUrl, parseVideoUrl } from '@udecode/plate-media';\nimport { MediaEmbedPlugin, useMediaState } from '@udecode/plate-media/react';\nimport { ResizableProvider, useResizableStore } from '@udecode/plate-resizable';\n\nimport { Caption, CaptionTextarea } from './caption';\nimport { MediaPopover } from './media-popover';\nimport { PlateElement } from './plate-element';\nimport {\n Resizable,\n ResizeHandle,\n mediaResizeHandleVariants,\n} from './resizable';\n\nexport const MediaEmbedElement = withHOC(\n ResizableProvider,\n withRef(({ children, className, ...props }, ref) => {\n const {\n align = 'center',\n embed,\n focused,\n isTweet,\n isVideo,\n isYoutube,\n readOnly,\n selected,\n } = useMediaState({\n urlParsers: [parseTwitterUrl, parseVideoUrl],\n });\n const width = useResizableStore().get.width();\n const provider = embed?.provider;\n\n return (\n \n \n
\n \n \n\n {isVideo ? (\n isYoutube ? (\n _iframe]:absolute [&_>_iframe]:left-0 [&_>_iframe]:top-0 [&_>_iframe]:size-full',\n '[&_>_.lty-playbtn]:z-[1] [&_>_.lty-playbtn]:h-[46px] [&_>_.lty-playbtn]:w-[70px] [&_>_.lty-playbtn]:rounded-[14%] [&_>_.lty-playbtn]:bg-[#212121] [&_>_.lty-playbtn]:opacity-80 [&_>_.lty-playbtn]:[transition:all_0.2s_cubic-bezier(0,_0,_0.2,_1)]',\n '[&:hover_>_.lty-playbtn]:bg-[red] [&:hover_>_.lty-playbtn]:opacity-100',\n '[&_>_.lty-playbtn]:before:border-y-[11px] [&_>_.lty-playbtn]:before:border-l-[19px] [&_>_.lty-playbtn]:before:border-r-0 [&_>_.lty-playbtn]:before:border-[transparent_transparent_transparent_#fff] [&_>_.lty-playbtn]:before:content-[\"\"]',\n '[&_>_.lty-playbtn]:absolute [&_>_.lty-playbtn]:left-1/2 [&_>_.lty-playbtn]:top-1/2 [&_>_.lty-playbtn]:[transform:translate3d(-50%,-50%,0)]',\n '[&_>_.lty-playbtn]:before:absolute [&_>_.lty-playbtn]:before:left-1/2 [&_>_.lty-playbtn]:before:top-1/2 [&_>_.lty-playbtn]:before:[transform:translate3d(-50%,-50%,0)]',\n '[&.lyt-activated]:cursor-[unset]',\n '[&.lyt-activated]:before:pointer-events-none [&.lyt-activated]:before:opacity-0',\n '[&.lyt-activated_>_.lty-playbtn]:pointer-events-none [&.lyt-activated_>_.lty-playbtn]:!opacity-0'\n )}\n />\n ) : (\n \n \n \n )\n ) : null}\n\n {isTweet && (\n \n \n \n )}\n\n \n \n\n \n \n \n
\n\n {children}\n \n \n );\n })\n);\n", "path": "plate-ui/media-embed-element.tsx", "target": "", "type": "registry:ui" @@ -16,7 +16,8 @@ "registryDependencies": [ "media-popover", "caption", - "resizable" + "resizable", + "plate-element" ], "type": "registry:ui" } \ No newline at end of file diff --git a/apps/www/public/r/styles/default/mention-element.json b/apps/www/public/r/styles/default/mention-element.json index 654419f28..cee45ef9f 100644 --- a/apps/www/public/r/styles/default/mention-element.json +++ b/apps/www/public/r/styles/default/mention-element.json @@ -4,13 +4,16 @@ ], "files": [ { - "content": "import React from 'react';\n\nimport type { TMentionElement } from '@udecode/plate-mention';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { getHandler } from '@udecode/plate-common';\nimport { PlateElement, useElement } from '@udecode/plate-common/react';\nimport { useFocused, useSelected } from 'slate-react';\n\nexport const MentionElement = withRef<\n typeof PlateElement,\n {\n prefix?: string;\n renderLabel?: (mentionable: TMentionElement) => string;\n onClick?: (mentionNode: any) => void;\n }\n>(({ children, className, prefix, renderLabel, onClick, ...props }, ref) => {\n const element = useElement();\n const selected = useSelected();\n const focused = useFocused();\n\n return (\n \n {prefix}\n {renderLabel ? renderLabel(element) : element.value}\n {children}\n \n );\n});\n", + "content": "import React from 'react';\n\nimport type { TMentionElement } from '@udecode/plate-mention';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { getHandler } from '@udecode/plate-common';\nimport { useElement } from '@udecode/plate-common/react';\nimport { IS_APPLE } from '@udecode/utils';\nimport { useFocused, useSelected } from 'slate-react';\n\nimport { useMounted } from '@/hooks/use-mounted';\n\nimport { PlateElement } from './plate-element';\n\nexport const MentionElement = withRef<\n typeof PlateElement,\n {\n prefix?: string;\n renderLabel?: (mentionable: TMentionElement) => string;\n onClick?: (mentionNode: any) => void;\n }\n>(({ children, className, prefix, renderLabel, onClick, ...props }, ref) => {\n const element = useElement();\n const selected = useSelected();\n const focused = useFocused();\n const mounted = useMounted();\n\n return (\n \n {mounted && IS_APPLE ? (\n // Mac OS IME https://github.com/ianstormtaylor/slate/issues/3490\n \n {children}\n {prefix}\n {renderLabel ? renderLabel(element) : element.value}\n \n ) : (\n // Others like Android https://github.com/ianstormtaylor/slate/pull/5360\n \n {prefix}\n {renderLabel ? renderLabel(element) : element.value}\n {children}\n \n )}\n \n );\n});\n", "path": "plate-ui/mention-element.tsx", "target": "", "type": "registry:ui" } ], "name": "mention-element", - "registryDependencies": [], + "registryDependencies": [ + "plate-element", + "use-mounted" + ], "type": "registry:ui" } \ No newline at end of file diff --git a/apps/www/public/r/styles/default/mention-input-element.json b/apps/www/public/r/styles/default/mention-input-element.json index 0c7ed62d0..95320fac6 100644 --- a/apps/www/public/r/styles/default/mention-input-element.json +++ b/apps/www/public/r/styles/default/mention-input-element.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "import React, { useState } from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\nimport { getMentionOnSelectItem } from '@udecode/plate-mention';\n\nimport {\n InlineCombobox,\n InlineComboboxContent,\n InlineComboboxEmpty,\n InlineComboboxInput,\n InlineComboboxItem,\n} from './inline-combobox';\n\nconst onSelectItem = getMentionOnSelectItem();\n\nexport const MentionInputElement = withRef(\n ({ className, ...props }, ref) => {\n const { children, editor, element } = props;\n const [search, setSearch] = useState('');\n\n return (\n \n \n \n \n \n\n \n No results found\n\n {MENTIONABLES.map((item) => (\n onSelectItem(editor, item, search)}\n >\n {item.text}\n \n ))}\n \n \n\n {children}\n \n );\n }\n);\n\nexport const MENTIONABLES = [\n { key: '0', text: 'Aayla Secura' },\n { key: '1', text: 'Adi Gallia' },\n {\n key: '2',\n text: 'Admiral Dodd Rancit',\n },\n {\n key: '3',\n text: 'Admiral Firmus Piett',\n },\n {\n key: '4',\n text: 'Admiral Gial Ackbar',\n },\n { key: '5', text: 'Admiral Ozzel' },\n { key: '6', text: 'Admiral Raddus' },\n {\n key: '7',\n text: 'Admiral Terrinald Screed',\n },\n { key: '8', text: 'Admiral Trench' },\n {\n key: '9',\n text: 'Admiral U.O. Statura',\n },\n { key: '10', text: 'Agen Kolar' },\n { key: '11', text: 'Agent Kallus' },\n {\n key: '12',\n text: 'Aiolin and Morit Astarte',\n },\n { key: '13', text: 'Aks Moe' },\n { key: '14', text: 'Almec' },\n { key: '15', text: 'Alton Kastle' },\n { key: '16', text: 'Amee' },\n { key: '17', text: 'AP-5' },\n { key: '18', text: 'Armitage Hux' },\n { key: '19', text: 'Artoo' },\n { key: '20', text: 'Arvel Crynyd' },\n { key: '21', text: 'Asajj Ventress' },\n { key: '22', text: 'Aurra Sing' },\n { key: '23', text: 'AZI-3' },\n { key: '24', text: 'Bala-Tik' },\n { key: '25', text: 'Barada' },\n { key: '26', text: 'Bargwill Tomder' },\n { key: '27', text: 'Baron Papanoida' },\n { key: '28', text: 'Barriss Offee' },\n { key: '29', text: 'Baze Malbus' },\n { key: '30', text: 'Bazine Netal' },\n { key: '31', text: 'BB-8' },\n { key: '32', text: 'BB-9E' },\n { key: '33', text: 'Ben Quadinaros' },\n { key: '34', text: 'Berch Teller' },\n { key: '35', text: 'Beru Lars' },\n { key: '36', text: 'Bib Fortuna' },\n {\n key: '37',\n text: 'Biggs Darklighter',\n },\n { key: '38', text: 'Black Krrsantan' },\n { key: '39', text: 'Bo-Katan Kryze' },\n { key: '40', text: 'Boba Fett' },\n { key: '41', text: 'Bobbajo' },\n { key: '42', text: 'Bodhi Rook' },\n { key: '43', text: 'Borvo the Hutt' },\n { key: '44', text: 'Boss Nass' },\n { key: '45', text: 'Bossk' },\n {\n key: '46',\n text: 'Breha Antilles-Organa',\n },\n { key: '47', text: 'Bren Derlin' },\n { key: '48', text: 'Brendol Hux' },\n { key: '49', text: 'BT-1' },\n];\n", + "content": "import React, { useState } from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement } from './plate-element';\nimport { getMentionOnSelectItem } from '@udecode/plate-mention';\n\nimport {\n InlineCombobox,\n InlineComboboxContent,\n InlineComboboxEmpty,\n InlineComboboxInput,\n InlineComboboxItem,\n} from './inline-combobox';\n\nconst onSelectItem = getMentionOnSelectItem();\n\nexport const MentionInputElement = withRef(\n ({ className, ...props }, ref) => {\n const { children, editor, element } = props;\n const [search, setSearch] = useState('');\n\n return (\n \n \n \n \n \n\n \n No results found\n\n {MENTIONABLES.map((item) => (\n onSelectItem(editor, item, search)}\n >\n {item.text}\n \n ))}\n \n \n\n {children}\n \n );\n }\n);\n\nexport const MENTIONABLES = [\n { key: '0', text: 'Aayla Secura' },\n { key: '1', text: 'Adi Gallia' },\n {\n key: '2',\n text: 'Admiral Dodd Rancit',\n },\n {\n key: '3',\n text: 'Admiral Firmus Piett',\n },\n {\n key: '4',\n text: 'Admiral Gial Ackbar',\n },\n { key: '5', text: 'Admiral Ozzel' },\n { key: '6', text: 'Admiral Raddus' },\n {\n key: '7',\n text: 'Admiral Terrinald Screed',\n },\n { key: '8', text: 'Admiral Trench' },\n {\n key: '9',\n text: 'Admiral U.O. Statura',\n },\n { key: '10', text: 'Agen Kolar' },\n { key: '11', text: 'Agent Kallus' },\n {\n key: '12',\n text: 'Aiolin and Morit Astarte',\n },\n { key: '13', text: 'Aks Moe' },\n { key: '14', text: 'Almec' },\n { key: '15', text: 'Alton Kastle' },\n { key: '16', text: 'Amee' },\n { key: '17', text: 'AP-5' },\n { key: '18', text: 'Armitage Hux' },\n { key: '19', text: 'Artoo' },\n { key: '20', text: 'Arvel Crynyd' },\n { key: '21', text: 'Asajj Ventress' },\n { key: '22', text: 'Aurra Sing' },\n { key: '23', text: 'AZI-3' },\n { key: '24', text: 'Bala-Tik' },\n { key: '25', text: 'Barada' },\n { key: '26', text: 'Bargwill Tomder' },\n { key: '27', text: 'Baron Papanoida' },\n { key: '28', text: 'Barriss Offee' },\n { key: '29', text: 'Baze Malbus' },\n { key: '30', text: 'Bazine Netal' },\n { key: '31', text: 'BB-8' },\n { key: '32', text: 'BB-9E' },\n { key: '33', text: 'Ben Quadinaros' },\n { key: '34', text: 'Berch Teller' },\n { key: '35', text: 'Beru Lars' },\n { key: '36', text: 'Bib Fortuna' },\n {\n key: '37',\n text: 'Biggs Darklighter',\n },\n { key: '38', text: 'Black Krrsantan' },\n { key: '39', text: 'Bo-Katan Kryze' },\n { key: '40', text: 'Boba Fett' },\n { key: '41', text: 'Bobbajo' },\n { key: '42', text: 'Bodhi Rook' },\n { key: '43', text: 'Borvo the Hutt' },\n { key: '44', text: 'Boss Nass' },\n { key: '45', text: 'Bossk' },\n {\n key: '46',\n text: 'Breha Antilles-Organa',\n },\n { key: '47', text: 'Bren Derlin' },\n { key: '48', text: 'Brendol Hux' },\n { key: '49', text: 'BT-1' },\n];\n", "path": "plate-ui/mention-input-element.tsx", "target": "", "type": "registry:ui" @@ -12,7 +12,8 @@ ], "name": "mention-input-element", "registryDependencies": [ - "inline-combobox" + "inline-combobox", + "plate-element" ], "type": "registry:ui" } \ No newline at end of file diff --git a/apps/www/public/r/styles/default/paragraph-element.json b/apps/www/public/r/styles/default/paragraph-element.json index 30c24b205..753c1f817 100644 --- a/apps/www/public/r/styles/default/paragraph-element.json +++ b/apps/www/public/r/styles/default/paragraph-element.json @@ -1,13 +1,15 @@ { "files": [ { - "content": "import { withCn } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\n\nexport const ParagraphElement = withCn(PlateElement, 'm-0 px-0 py-1');\n", + "content": "import { cn } from '@udecode/cn';\nimport { withRef } from '@udecode/plate-common/react';\n\nimport { PlateElement } from './plate-element';\n\nexport const ParagraphElement = withRef(\n ({ children, className, ...props }, ref) => {\n return (\n \n {children}\n \n );\n }\n);\n", "path": "plate-ui/paragraph-element.tsx", "target": "", "type": "registry:ui" } ], "name": "paragraph-element", - "registryDependencies": [], + "registryDependencies": [ + "plate-element" + ], "type": "registry:ui" } \ No newline at end of file diff --git a/apps/www/public/r/styles/default/plate-element.json b/apps/www/public/r/styles/default/plate-element.json new file mode 100644 index 000000000..2d276ff66 --- /dev/null +++ b/apps/www/public/r/styles/default/plate-element.json @@ -0,0 +1,16 @@ +{ + "dependencies": [], + "files": [ + { + "content": "import React from 'react';\n\nimport type { PlateElementProps } from '@udecode/plate-common/react';\n\nimport { cn } from '@udecode/cn';\nimport { PlateElement as PlateElementPrimitive } from '@udecode/plate-common/react';\nimport { useBlockSelectableStore } from '@udecode/plate-selection/react';\n\nimport { BlockSelection } from './block-selection';\n\nexport const PlateElement = React.forwardRef(\n ({ children, className, ...props }: PlateElementProps, ref) => {\n const selectable = useBlockSelectableStore().get.selectable();\n\n return (\n \n {children}\n\n {selectable && }\n \n );\n }\n);\n", + "path": "plate-ui/plate-element.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "plate-element", + "registryDependencies": [ + "block-selection" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/slash-input-element.json b/apps/www/public/r/styles/default/slash-input-element.json index f026267f3..331ca91a7 100644 --- a/apps/www/public/r/styles/default/slash-input-element.json +++ b/apps/www/public/r/styles/default/slash-input-element.json @@ -5,7 +5,7 @@ ], "files": [ { - "content": "import React, { type ComponentType, type SVGProps } from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { type PlateEditor, PlateElement } from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListStyleType, toggleIndentList } from '@udecode/plate-indent-list';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n InlineCombobox,\n InlineComboboxContent,\n InlineComboboxEmpty,\n InlineComboboxInput,\n InlineComboboxItem,\n} from './inline-combobox';\n\ninterface SlashCommandRule {\n icon: ComponentType>;\n onSelect: (editor: PlateEditor) => void;\n value: string;\n keywords?: string[];\n}\n\nconst rules: SlashCommandRule[] = [\n {\n icon: Icons.h1,\n value: 'Heading 1',\n onSelect: (editor) => {\n editor.tf.toggle.block({ type: HEADING_KEYS.h1 });\n },\n },\n {\n icon: Icons.h2,\n value: 'Heading 2',\n onSelect: (editor) => {\n editor.tf.toggle.block({ type: HEADING_KEYS.h2 });\n },\n },\n {\n icon: Icons.h3,\n value: 'Heading 3',\n onSelect: (editor) => {\n editor.tf.toggle.block({ type: HEADING_KEYS.h3 });\n },\n },\n {\n icon: Icons.ul,\n keywords: ['ul', 'unordered list'],\n value: 'Bulleted list',\n onSelect: (editor) => {\n toggleIndentList(editor, {\n listStyleType: ListStyleType.Disc,\n });\n },\n },\n {\n icon: Icons.ol,\n keywords: ['ol', 'ordered list'],\n value: 'Numbered list',\n onSelect: (editor) => {\n toggleIndentList(editor, {\n listStyleType: ListStyleType.Decimal,\n });\n },\n },\n {\n icon: Icons.add,\n keywords: ['inline', 'date'],\n value: 'Date',\n onSelect: (editor) => {\n editor.getTransforms(DatePlugin).insert.date();\n },\n },\n];\n\nexport const SlashInputElement = withRef(\n ({ className, ...props }, ref) => {\n const { children, editor, element } = props;\n\n return (\n \n \n \n\n \n \n No matching commands found\n \n\n {rules.map(({ icon: Icon, keywords, value, onSelect }) => (\n onSelect(editor)}\n keywords={keywords}\n >\n \n {value}\n \n ))}\n \n \n\n {children}\n \n );\n }\n);\n", + "content": "import React, { type ComponentType, type SVGProps } from 'react';\n\nimport type { PlateEditor } from '@udecode/plate-common/react';\n\nimport { withRef } from '@udecode/cn';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListStyleType, toggleIndentList } from '@udecode/plate-indent-list';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n InlineCombobox,\n InlineComboboxContent,\n InlineComboboxEmpty,\n InlineComboboxInput,\n InlineComboboxItem,\n} from './inline-combobox';\nimport { PlateElement } from './plate-element';\n\ninterface SlashCommandRule {\n icon: ComponentType>;\n onSelect: (editor: PlateEditor) => void;\n value: string;\n keywords?: string[];\n}\n\nconst rules: SlashCommandRule[] = [\n {\n icon: Icons.h1,\n value: 'Heading 1',\n onSelect: (editor) => {\n editor.tf.toggle.block({ type: HEADING_KEYS.h1 });\n },\n },\n {\n icon: Icons.h2,\n value: 'Heading 2',\n onSelect: (editor) => {\n editor.tf.toggle.block({ type: HEADING_KEYS.h2 });\n },\n },\n {\n icon: Icons.h3,\n value: 'Heading 3',\n onSelect: (editor) => {\n editor.tf.toggle.block({ type: HEADING_KEYS.h3 });\n },\n },\n {\n icon: Icons.ul,\n keywords: ['ul', 'unordered list'],\n value: 'Bulleted list',\n onSelect: (editor) => {\n toggleIndentList(editor, {\n listStyleType: ListStyleType.Disc,\n });\n },\n },\n {\n icon: Icons.ol,\n keywords: ['ol', 'ordered list'],\n value: 'Numbered list',\n onSelect: (editor) => {\n toggleIndentList(editor, {\n listStyleType: ListStyleType.Decimal,\n });\n },\n },\n {\n icon: Icons.add,\n keywords: ['inline', 'date'],\n value: 'Date',\n onSelect: (editor) => {\n editor.getTransforms(DatePlugin).insert.date();\n },\n },\n];\n\nexport const SlashInputElement = withRef(\n ({ className, ...props }, ref) => {\n const { children, editor, element } = props;\n\n return (\n \n \n \n\n \n \n No matching commands found\n \n\n {rules.map(({ icon: Icon, keywords, value, onSelect }) => (\n onSelect(editor)}\n keywords={keywords}\n >\n \n {value}\n \n ))}\n \n \n\n {children}\n \n );\n }\n);\n", "path": "plate-ui/slash-input-element.tsx", "target": "", "type": "registry:ui" @@ -13,7 +13,8 @@ ], "name": "slash-input-element", "registryDependencies": [ - "inline-combobox" + "inline-combobox", + "plate-element" ], "type": "registry:ui" } \ No newline at end of file diff --git a/apps/www/public/r/styles/default/table-cell-element.json b/apps/www/public/r/styles/default/table-cell-element.json index a17957cf6..f5e656555 100644 --- a/apps/www/public/r/styles/default/table-cell-element.json +++ b/apps/www/public/r/styles/default/table-cell-element.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "import React from 'react';\n\nimport { cn, withProps, withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\nimport {\n useTableCellElement,\n useTableCellElementResizable,\n useTableCellElementResizableState,\n useTableCellElementState,\n} from '@udecode/plate-table/react';\n\nimport { ResizeHandle } from './resizable';\n\nexport const TableCellElement = withRef<\n typeof PlateElement,\n {\n hideBorder?: boolean;\n isHeader?: boolean;\n }\n>(({ children, className, hideBorder, isHeader, style, ...props }, ref) => {\n const { element } = props;\n\n const {\n borders,\n colIndex,\n colSpan,\n hovered,\n hoveredLeft,\n isSelectingCell,\n readOnly,\n rowIndex,\n rowSize,\n selected,\n } = useTableCellElementState();\n const { props: cellProps } = useTableCellElement({ element: props.element });\n const resizableState = useTableCellElementResizableState({\n colIndex,\n colSpan,\n rowIndex,\n });\n\n const { bottomProps, hiddenLeft, leftProps, rightProps } =\n useTableCellElementResizable(resizableState);\n\n const Cell = isHeader ? 'th' : 'td';\n\n return (\n _*]:m-0',\n 'before:size-full',\n selected && 'before:z-10 before:bg-muted',\n \"before:absolute before:box-border before:select-none before:content-['']\",\n borders &&\n cn(\n borders.bottom?.size &&\n `before:border-b before:border-b-border`,\n borders.right?.size && `before:border-r before:border-r-border`,\n borders.left?.size && `before:border-l before:border-l-border`,\n borders.top?.size && `before:border-t before:border-t-border`\n )\n ),\n className\n )}\n {...cellProps}\n {...props}\n style={\n {\n '--cellBackground': element.background,\n ...style,\n } as React.CSSProperties\n }\n >\n \n \n {children}\n \n\n {!isSelectingCell && (\n \n {!readOnly && (\n <>\n \n \n {!hiddenLeft && (\n \n )}\n\n {hovered && (\n \n )}\n {hoveredLeft && (\n \n )}\n \n )}\n \n )}\n \n \n );\n});\n\nTableCellElement.displayName = 'TableCellElement';\n\nexport const TableCellHeaderElement = withProps(TableCellElement, {\n isHeader: true,\n});\n", + "content": "import React from 'react';\n\nimport { cn, withProps, withRef } from '@udecode/cn';\nimport {\n useTableCellElement,\n useTableCellElementResizable,\n useTableCellElementResizableState,\n useTableCellElementState,\n} from '@udecode/plate-table/react';\n\nimport { PlateElement } from './plate-element';\nimport { ResizeHandle } from './resizable';\n\nexport const TableCellElement = withRef<\n typeof PlateElement,\n {\n hideBorder?: boolean;\n isHeader?: boolean;\n }\n>(({ children, className, hideBorder, isHeader, style, ...props }, ref) => {\n const { element } = props;\n\n const {\n borders,\n colIndex,\n colSpan,\n hovered,\n hoveredLeft,\n isSelectingCell,\n readOnly,\n rowIndex,\n rowSize,\n selected,\n } = useTableCellElementState();\n const { props: cellProps } = useTableCellElement({ element: props.element });\n const resizableState = useTableCellElementResizableState({\n colIndex,\n colSpan,\n rowIndex,\n });\n\n const { bottomProps, hiddenLeft, leftProps, rightProps } =\n useTableCellElementResizable(resizableState);\n\n return (\n _*]:m-0',\n 'before:size-full',\n selected && 'before:z-10 before:bg-muted',\n \"before:absolute before:box-border before:select-none before:content-['']\",\n borders &&\n cn(\n borders.bottom?.size &&\n `before:border-b before:border-b-border`,\n borders.right?.size && `before:border-r before:border-r-border`,\n borders.left?.size && `before:border-l before:border-l-border`,\n borders.top?.size && `before:border-t before:border-t-border`\n )\n ),\n className\n )}\n {...cellProps}\n {...props}\n style={\n {\n '--cellBackground': element.background,\n ...style,\n } as React.CSSProperties\n }\n >\n \n {children}\n \n\n {!isSelectingCell && (\n \n {!readOnly && (\n <>\n \n \n {!hiddenLeft && (\n \n )}\n\n {hovered && (\n \n )}\n {hoveredLeft && (\n \n )}\n \n )}\n \n )}\n \n );\n});\n\nTableCellElement.displayName = 'TableCellElement';\n\nexport const TableCellHeaderElement = withProps(TableCellElement, {\n isHeader: true,\n});\n", "path": "plate-ui/table-cell-element.tsx", "target": "", "type": "registry:ui" @@ -12,7 +12,8 @@ ], "name": "table-cell-element", "registryDependencies": [ - "resizable" + "resizable", + "plate-element" ], "type": "registry:ui" } \ No newline at end of file diff --git a/apps/www/public/r/styles/default/table-element.json b/apps/www/public/r/styles/default/table-element.json index abba3ca04..4284ed0b9 100644 --- a/apps/www/public/r/styles/default/table-element.json +++ b/apps/www/public/r/styles/default/table-element.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "import React from 'react';\n\nimport type * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport type { TTableElement } from '@udecode/plate-table';\n\nimport { PopoverAnchor } from '@radix-ui/react-popover';\nimport { cn, withRef } from '@udecode/cn';\nimport { isSelectionExpanded } from '@udecode/plate-common';\nimport {\n PlateElement,\n useEditorRef,\n useEditorSelector,\n useElement,\n useRemoveNodeButton,\n withHOC,\n} from '@udecode/plate-common/react';\nimport {\n TableProvider,\n mergeTableCells,\n unmergeTableCells,\n useTableBordersDropdownMenuContentState,\n useTableElement,\n useTableElementState,\n useTableMergeState,\n} from '@udecode/plate-table/react';\nimport { useReadOnly, useSelected } from 'slate-react';\n\nimport { Icons, iconVariants } from '@/components/icons';\n\nimport { Button } from './button';\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuPortal,\n DropdownMenuTrigger,\n} from './dropdown-menu';\nimport { Popover, PopoverContent, popoverVariants } from './popover';\nimport { Separator } from './separator';\n\nexport const TableBordersDropdownMenuContent = withRef<\n typeof DropdownMenuPrimitive.Content\n>((props, ref) => {\n const {\n getOnSelectTableBorder,\n hasBottomBorder,\n hasLeftBorder,\n hasNoBorders,\n hasOuterBorders,\n hasRightBorder,\n hasTopBorder,\n } = useTableBordersDropdownMenuContentState();\n\n return (\n \n \n \n
Bottom Border
\n \n \n \n
Top Border
\n \n \n \n
Left Border
\n \n \n \n
Right Border
\n \n\n \n\n \n \n
No Border
\n \n \n \n
Outside Borders
\n \n \n );\n});\n\nexport const TableFloatingToolbar = withRef(\n ({ children, ...props }, ref) => {\n const element = useElement();\n const { props: buttonProps } = useRemoveNodeButton({ element });\n\n const selectionCollapsed = useEditorSelector(\n (editor) => !isSelectionExpanded(editor),\n []\n );\n\n const readOnly = useReadOnly();\n const selected = useSelected();\n const editor = useEditorRef();\n\n const collapsed = !readOnly && selected && selectionCollapsed;\n const open = !readOnly && selected;\n\n const { canMerge, canUnmerge } = useTableMergeState();\n\n const mergeContent = canMerge && (\n mergeTableCells(editor)}\n contentEditable={false}\n isMenu\n >\n \n Merge\n \n );\n\n const unmergeButton = canUnmerge && (\n unmergeTableCells(editor)}\n contentEditable={false}\n isMenu\n >\n \n Unmerge\n \n );\n\n const bordersContent = collapsed && (\n <>\n \n \n \n \n\n \n \n \n \n\n \n \n );\n\n return (\n \n {children}\n {(canMerge || canUnmerge || collapsed) && (\n e.preventDefault()}\n {...props}\n >\n {unmergeButton}\n {mergeContent}\n {bordersContent}\n \n )}\n \n );\n }\n);\n\nexport const TableElement = withHOC(\n TableProvider,\n withRef(({ children, className, ...props }, ref) => {\n const { colSizes, isSelectingCell, marginLeft, minColumnWidth } =\n useTableElementState();\n const { colGroupProps, props: tableProps } = useTableElement();\n\n return (\n \n
\n \n \n \n {colSizes.map((width, index) => (\n \n ))}\n \n\n {children}\n
\n \n
\n \n );\n })\n);\n", + "content": "import React from 'react';\n\nimport type * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport type { TTableElement } from '@udecode/plate-table';\n\nimport { PopoverAnchor } from '@radix-ui/react-popover';\nimport { cn, withRef } from '@udecode/cn';\nimport { isSelectionExpanded } from '@udecode/plate-common';\nimport {\n useEditorRef,\n useEditorSelector,\n useElement,\n useRemoveNodeButton,\n withHOC,\n} from '@udecode/plate-common/react';\nimport {\n TableProvider,\n mergeTableCells,\n unmergeTableCells,\n useTableBordersDropdownMenuContentState,\n useTableElement,\n useTableElementState,\n useTableMergeState,\n} from '@udecode/plate-table/react';\nimport { useReadOnly, useSelected } from 'slate-react';\n\nimport { Icons, iconVariants } from '@/components/icons';\n\nimport { Button } from './button';\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuPortal,\n DropdownMenuTrigger,\n} from './dropdown-menu';\nimport { PlateElement } from './plate-element';\nimport { Popover, PopoverContent, popoverVariants } from './popover';\nimport { Separator } from './separator';\n\nexport const TableBordersDropdownMenuContent = withRef<\n typeof DropdownMenuPrimitive.Content\n>((props, ref) => {\n const {\n getOnSelectTableBorder,\n hasBottomBorder,\n hasLeftBorder,\n hasNoBorders,\n hasOuterBorders,\n hasRightBorder,\n hasTopBorder,\n } = useTableBordersDropdownMenuContentState();\n\n return (\n \n \n \n
Bottom Border
\n \n \n \n
Top Border
\n \n \n \n
Left Border
\n \n \n \n
Right Border
\n \n\n \n\n \n \n
No Border
\n \n \n \n
Outside Borders
\n \n \n );\n});\n\nexport const TableFloatingToolbar = withRef(\n ({ children, ...props }, ref) => {\n const element = useElement();\n const { props: buttonProps } = useRemoveNodeButton({ element });\n\n const selectionCollapsed = useEditorSelector(\n (editor) => !isSelectionExpanded(editor),\n []\n );\n\n const readOnly = useReadOnly();\n const selected = useSelected();\n const editor = useEditorRef();\n\n const collapsed = !readOnly && selected && selectionCollapsed;\n const open = !readOnly && selected;\n\n const { canMerge, canUnmerge } = useTableMergeState();\n\n const mergeContent = canMerge && (\n mergeTableCells(editor)}\n contentEditable={false}\n isMenu\n >\n \n Merge\n \n );\n\n const unmergeButton = canUnmerge && (\n unmergeTableCells(editor)}\n contentEditable={false}\n isMenu\n >\n \n Unmerge\n \n );\n\n const bordersContent = collapsed && (\n <>\n \n \n \n \n\n \n \n \n \n\n \n \n );\n\n return (\n \n {children}\n {(canMerge || canUnmerge || collapsed) && (\n e.preventDefault()}\n {...props}\n >\n {unmergeButton}\n {mergeContent}\n {bordersContent}\n \n )}\n \n );\n }\n);\n\nexport const TableElement = withHOC(\n TableProvider,\n withRef(({ children, className, ...props }, ref) => {\n const { colSizes, isSelectingCell, marginLeft, minColumnWidth } =\n useTableElementState();\n const { colGroupProps, props: tableProps } = useTableElement();\n\n return (\n \n
\n \n \n {colSizes.map((width, index) => (\n \n ))}\n \n\n {children}\n \n
\n \n );\n })\n);\n", "path": "plate-ui/table-element.tsx", "target": "", "type": "registry:ui" @@ -12,7 +12,8 @@ ], "name": "table-element", "registryDependencies": [ - "dropdown-menu" + "dropdown-menu", + "plate-element" ], "type": "registry:ui" } \ No newline at end of file diff --git a/apps/www/public/r/styles/default/table-row-element.json b/apps/www/public/r/styles/default/table-row-element.json index d0b11642c..db11efadb 100644 --- a/apps/www/public/r/styles/default/table-row-element.json +++ b/apps/www/public/r/styles/default/table-row-element.json @@ -4,13 +4,15 @@ ], "files": [ { - "content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\n\nexport const TableRowElement = withRef<\n typeof PlateElement,\n {\n hideBorder?: boolean;\n }\n>(({ children, hideBorder, ...props }, ref) => {\n return (\n \n {children}\n \n );\n});\n", + "content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\n\nimport { PlateElement } from './plate-element';\n\nexport const TableRowElement = withRef<\n typeof PlateElement,\n {\n hideBorder?: boolean;\n }\n>(({ children, hideBorder, ...props }, ref) => {\n return (\n \n {children}\n \n );\n});\n", "path": "plate-ui/table-row-element.tsx", "target": "", "type": "registry:ui" } ], "name": "table-row-element", - "registryDependencies": [], + "registryDependencies": [ + "plate-element" + ], "type": "registry:ui" } \ No newline at end of file diff --git a/apps/www/public/r/styles/default/todo-list-element.json b/apps/www/public/r/styles/default/todo-list-element.json index 3bd6e5a24..e14dd33c2 100644 --- a/apps/www/public/r/styles/default/todo-list-element.json +++ b/apps/www/public/r/styles/default/todo-list-element.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\nimport {\n useTodoListElement,\n useTodoListElementState,\n} from '@udecode/plate-list/react';\n\nimport { Checkbox } from './checkbox';\n\nexport const TodoListElement = withRef(\n ({ children, className, ...props }, ref) => {\n const { element } = props;\n const state = useTodoListElementState({ element });\n const { checkboxProps } = useTodoListElement(state);\n\n return (\n \n \n \n \n \n {children}\n \n \n );\n }\n);\n", + "content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement } from './plate-element';\nimport {\n useTodoListElement,\n useTodoListElementState,\n} from '@udecode/plate-list/react';\n\nimport { Checkbox } from './checkbox';\n\nexport const TodoListElement = withRef(\n ({ children, className, ...props }, ref) => {\n const { element } = props;\n const state = useTodoListElementState({ element });\n const { checkboxProps } = useTodoListElement(state);\n\n return (\n \n \n \n \n \n {children}\n \n \n );\n }\n);\n", "path": "plate-ui/todo-list-element.tsx", "target": "", "type": "registry:ui" @@ -12,7 +12,8 @@ ], "name": "todo-list-element", "registryDependencies": [ - "checkbox" + "checkbox", + "plate-element" ], "type": "registry:ui" } \ No newline at end of file diff --git a/apps/www/public/r/styles/default/toggle-element.json b/apps/www/public/r/styles/default/toggle-element.json index 6c583fcde..26d6334dd 100644 --- a/apps/www/public/r/styles/default/toggle-element.json +++ b/apps/www/public/r/styles/default/toggle-element.json @@ -4,13 +4,15 @@ ], "files": [ { - "content": "import { withRef } from '@udecode/cn';\nimport { PlateElement, useElement } from '@udecode/plate-common/react';\nimport {\n useToggleButton,\n useToggleButtonState,\n} from '@udecode/plate-toggle/react';\n\nimport { Icons } from '@/components/icons';\n\nexport const ToggleElement = withRef(\n ({ children, ...props }, ref) => {\n const element = useElement();\n const state = useToggleButtonState(element.id as string);\n const { buttonProps, open } = useToggleButton(state);\n\n return (\n \n
\n \n {open ? : }\n \n {children}\n
\n \n );\n }\n);\n", + "content": "import { cn, withRef } from '@udecode/cn';\nimport { useElement } from '@udecode/plate-common/react';\nimport {\n useToggleButton,\n useToggleButtonState,\n} from '@udecode/plate-toggle/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { PlateElement } from './plate-element';\n\nexport const ToggleElement = withRef(\n ({ children, className, ...props }, ref) => {\n const element = useElement();\n const state = useToggleButtonState(element.id as string);\n const { buttonProps, open } = useToggleButton(state);\n\n return (\n \n \n {open ? : }\n \n {children}\n \n );\n }\n);\n", "path": "plate-ui/toggle-element.tsx", "target": "", "type": "registry:ui" } ], "name": "toggle-element", - "registryDependencies": [], + "registryDependencies": [ + "plate-element" + ], "type": "registry:ui" } \ No newline at end of file diff --git a/apps/www/src/__registry__/index.tsx b/apps/www/src/__registry__/index.tsx index 27b2f3e48..44c011550 100644 --- a/apps/www/src/__registry__/index.tsx +++ b/apps/www/src/__registry__/index.tsx @@ -16,6 +16,28 @@ export const Index: Record = { subcategory: "undefined", chunks: [] }, + "block-selection": { + name: "block-selection", + type: "registry:ui", + registryDependencies: [], + files: ["registry/default/plate-ui/block-selection.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/block-selection.tsx")), + source: "", + category: "undefined", + subcategory: "undefined", + chunks: [] + }, + "plate-element": { + name: "plate-element", + type: "registry:ui", + registryDependencies: ["block-selection"], + files: ["registry/default/plate-ui/plate-element.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/plate-element.tsx")), + source: "", + category: "undefined", + subcategory: "undefined", + chunks: [] + }, "cloud": { name: "cloud", type: "registry:ui", @@ -30,7 +52,7 @@ export const Index: Record = { "code-block-element": { name: "code-block-element", type: "registry:ui", - registryDependencies: ["command"], + registryDependencies: ["command","plate-element"], files: ["registry/default/plate-ui/code-block-element.tsx","registry/default/plate-ui/code-block-element.css","registry/default/plate-ui/code-block-combobox.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/code-block-element.tsx")), source: "", @@ -41,7 +63,7 @@ export const Index: Record = { "column-element": { name: "column-element", type: "registry:ui", - registryDependencies: ["command","resizable"], + registryDependencies: ["command","resizable","plate-element"], files: ["registry/default/plate-ui/column-element.tsx","registry/default/plate-ui/column-group-element.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/column-element.tsx")), source: "", @@ -96,7 +118,7 @@ export const Index: Record = { "emoji-input-element": { name: "emoji-input-element", type: "registry:ui", - registryDependencies: ["inline-combobox"], + registryDependencies: ["inline-combobox","plate-element","use-debounce"], files: ["registry/default/plate-ui/emoji-input-element.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/emoji-input-element.tsx")), source: "", @@ -129,7 +151,7 @@ export const Index: Record = { "blockquote-element": { name: "blockquote-element", type: "registry:ui", - registryDependencies: [], + registryDependencies: ["plate-element"], files: ["registry/default/plate-ui/blockquote-element.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/blockquote-element.tsx")), source: "", @@ -140,7 +162,7 @@ export const Index: Record = { "date-element": { name: "date-element", type: "registry:ui", - registryDependencies: ["calendar"], + registryDependencies: ["calendar","plate-element"], files: ["registry/default/plate-ui/date-element.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/date-element.tsx")), source: "", @@ -206,7 +228,7 @@ export const Index: Record = { "code-line-element": { name: "code-line-element", type: "registry:ui", - registryDependencies: [], + registryDependencies: ["plate-element"], files: ["registry/default/plate-ui/code-line-element.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/code-line-element.tsx")), source: "", @@ -294,7 +316,7 @@ export const Index: Record = { "excalidraw-element": { name: "excalidraw-element", type: "registry:ui", - registryDependencies: [], + registryDependencies: ["plate-element"], files: ["registry/default/plate-ui/excalidraw-element.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/excalidraw-element.tsx")), source: "", @@ -349,7 +371,7 @@ export const Index: Record = { "heading-element": { name: "heading-element", type: "registry:ui", - registryDependencies: [], + registryDependencies: ["plate-element"], files: ["registry/default/plate-ui/heading-element.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/heading-element.tsx")), source: "", @@ -371,7 +393,7 @@ export const Index: Record = { "hr-element": { name: "hr-element", type: "registry:ui", - registryDependencies: [], + registryDependencies: ["plate-element"], files: ["registry/default/plate-ui/hr-element.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/hr-element.tsx")), source: "", @@ -382,7 +404,7 @@ export const Index: Record = { "image-element": { name: "image-element", type: "registry:ui", - registryDependencies: ["media-popover","caption","resizable"], + registryDependencies: ["media-popover","caption","resizable","plate-element"], files: ["registry/default/plate-ui/image-element.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/image-element.tsx")), source: "", @@ -470,7 +492,7 @@ export const Index: Record = { "link-element": { name: "link-element", type: "registry:ui", - registryDependencies: [], + registryDependencies: ["plate-element"], files: ["registry/default/plate-ui/link-element.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/link-element.tsx")), source: "", @@ -503,7 +525,7 @@ export const Index: Record = { "list-element": { name: "list-element", type: "registry:ui", - registryDependencies: [], + registryDependencies: ["plate-element"], files: ["registry/default/plate-ui/list-element.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/list-element.tsx")), source: "", @@ -536,7 +558,7 @@ export const Index: Record = { "media-embed-element": { name: "media-embed-element", type: "registry:ui", - registryDependencies: ["media-popover","caption","resizable"], + registryDependencies: ["media-popover","caption","resizable","plate-element"], files: ["registry/default/plate-ui/media-embed-element.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/media-embed-element.tsx")), source: "", @@ -569,7 +591,7 @@ export const Index: Record = { "mention-element": { name: "mention-element", type: "registry:ui", - registryDependencies: [], + registryDependencies: ["plate-element","use-mounted"], files: ["registry/default/plate-ui/mention-element.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/mention-element.tsx")), source: "", @@ -580,7 +602,7 @@ export const Index: Record = { "mention-input-element": { name: "mention-input-element", type: "registry:ui", - registryDependencies: ["inline-combobox"], + registryDependencies: ["inline-combobox","plate-element"], files: ["registry/default/plate-ui/mention-input-element.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/mention-input-element.tsx")), source: "", @@ -624,7 +646,7 @@ export const Index: Record = { "paragraph-element": { name: "paragraph-element", type: "registry:ui", - registryDependencies: [], + registryDependencies: ["plate-element"], files: ["registry/default/plate-ui/paragraph-element.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/paragraph-element.tsx")), source: "", @@ -679,7 +701,7 @@ export const Index: Record = { "slash-input-element": { name: "slash-input-element", type: "registry:ui", - registryDependencies: ["inline-combobox"], + registryDependencies: ["inline-combobox","plate-element"], files: ["registry/default/plate-ui/slash-input-element.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/slash-input-element.tsx")), source: "", @@ -690,7 +712,7 @@ export const Index: Record = { "table-cell-element": { name: "table-cell-element", type: "registry:ui", - registryDependencies: ["resizable"], + registryDependencies: ["resizable","plate-element"], files: ["registry/default/plate-ui/table-cell-element.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/table-cell-element.tsx")), source: "", @@ -712,7 +734,7 @@ export const Index: Record = { "table-element": { name: "table-element", type: "registry:ui", - registryDependencies: ["dropdown-menu"], + registryDependencies: ["dropdown-menu","plate-element"], files: ["registry/default/plate-ui/table-element.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/table-element.tsx")), source: "", @@ -723,7 +745,7 @@ export const Index: Record = { "table-row-element": { name: "table-row-element", type: "registry:ui", - registryDependencies: [], + registryDependencies: ["plate-element"], files: ["registry/default/plate-ui/table-row-element.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/table-row-element.tsx")), source: "", @@ -734,7 +756,7 @@ export const Index: Record = { "todo-list-element": { name: "todo-list-element", type: "registry:ui", - registryDependencies: ["checkbox"], + registryDependencies: ["checkbox","plate-element"], files: ["registry/default/plate-ui/todo-list-element.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/todo-list-element.tsx")), source: "", @@ -745,7 +767,7 @@ export const Index: Record = { "toggle-element": { name: "toggle-element", type: "registry:ui", - registryDependencies: [], + registryDependencies: ["plate-element"], files: ["registry/default/plate-ui/toggle-element.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/toggle-element.tsx")), source: "", @@ -1116,5 +1138,16 @@ export const Index: Record = { subcategory: "undefined", chunks: [] }, + "use-mounted": { + name: "use-mounted", + type: "registry:hook", + registryDependencies: undefined, + files: ["registry/default/hooks/use-mounted.ts"], + component: React.lazy(() => import("@/registry/default/hooks/use-mounted.ts")), + source: "", + category: "undefined", + subcategory: "undefined", + chunks: [] + }, }, } diff --git a/apps/www/src/registry/default/plate-ui/draggable.tsx b/apps/www/src/registry/default/plate-ui/draggable.tsx index a1347cd4b..1a5438a8e 100644 --- a/apps/www/src/registry/default/plate-ui/draggable.tsx +++ b/apps/www/src/registry/default/plate-ui/draggable.tsx @@ -142,7 +142,7 @@ const DragHandle = React.memo(() => { onMouseDown={() => { editor .getApi(BlockSelectionPlugin) - .blockSelection.resetSelectedIds(); + .blockSelection?.resetSelectedIds(); }} /> diff --git a/apps/www/src/registry/registry-ui.ts b/apps/www/src/registry/registry-ui.ts index 1e0c141d9..8cec2a27f 100644 --- a/apps/www/src/registry/registry-ui.ts +++ b/apps/www/src/registry/registry-ui.ts @@ -93,6 +93,7 @@ export const ui: Registry = [ { dependencies: [ '@udecode/plate-dnd', + '@udecode/plate-selection', 'react-dnd', 'react-dnd-html5-backend', ], diff --git a/packages/core/src/react/editor/withPlate.ts b/packages/core/src/react/editor/withPlate.ts index 02e53ec1a..398313889 100644 --- a/packages/core/src/react/editor/withPlate.ts +++ b/packages/core/src/react/editor/withPlate.ts @@ -62,10 +62,12 @@ export const withPlate = < const store = editor.getOptionsStore(plugin); if (!store) { - editor.api.debug.error( + editor.api.debug.warn( `editor.useOptions: ${plugin.key} plugin is missing`, 'PLUGIN_MISSING' ); + + return {}; } return store.useStore(selector, equalityFn); @@ -75,10 +77,12 @@ export const withPlate = < const store = editor.getOptionsStore(plugin); if (!store) { - editor.api.debug.error( + editor.api.debug.warn( `editor.useOption: ${plugin.key} plugin is missing`, 'PLUGIN_MISSING' ); + + return; } const useState = (store as any)?.use[key]; diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 814464b1d..1aaf7d7b9 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -40,9 +40,7 @@ module.exports = { border: 'hsl(var(--border))', brand: { DEFAULT: 'hsl(var(--brand))', - active: 'hsl(var(--brand-active))', foreground: 'hsl(var(--brand-foreground))', - hover: 'hsl(var(--brand-hover))', }, card: { DEFAULT: 'hsl(var(--card))',