From 1076e005de726c2a2c55bd6be5cc41a02dd67a05 Mon Sep 17 00:00:00 2001 From: zbeyens Date: Sat, 19 Oct 2024 04:26:18 +0200 Subject: [PATCH 1/4] doc --- .eslintrc.cjs | 2 +- apps/www/content/docs/components/cloud.mdx | 108 ---- .../docs/components/code-block-element.mdx | 3 +- .../docs/components/color-dropdown-menu.mdx | 10 +- .../docs/components/comments-popover.mdx | 15 +- .../docs/components/emoji-dropdown-menu.mdx | 14 +- .../components/emoji-toolbar-dropdown.mdx | 2 +- apps/www/contentlayer.config.js | 12 +- apps/www/package.json | 1 + apps/www/public/r/index.json | 34 -- apps/www/public/r/styles/default/button.json | 2 +- apps/www/public/r/styles/default/cloud.json | 46 -- apps/www/scripts/build-registry.mts | 59 ++- apps/www/scripts/capture-screenshots.mts | 72 +++ apps/www/scripts/fix-import.mts | 24 + apps/www/src/__registry__/index.tsx | 126 ++++- apps/www/src/components/block-preview.tsx | 1 + apps/www/src/components/block-toolbar.tsx | 1 + .../www/src/components/code-block-wrapper.tsx | 4 + apps/www/src/components/component-preview.tsx | 15 + apps/www/src/components/component-source.tsx | 41 +- .../www/src/components/tailwind-indicator.tsx | 5 +- apps/www/src/components/typography.tsx | 7 +- apps/www/src/hooks/useCopyToClipboard.ts | 1 + apps/www/src/lib/_blocks.ts | 1 + apps/www/src/lib/highlighter-theme.json | 380 ------------- .../src/lib/plate/demo/values/cloudValue.tsx | 137 ----- .../registry/default/example/cloud-demo.tsx | 58 -- .../src/registry/default/plate-ui/button.tsx | 2 +- .../plate-ui/cloud-attachment-element.tsx | 70 --- .../default/plate-ui/cloud-image-element.tsx | 100 ---- .../plate-ui/cloud-resize-controls.tsx | 191 ------- .../default/plate-ui/cloud-status-bar.tsx | 94 ---- .../plate-ui/cloud-toolbar-buttons.tsx | 41 -- .../src/registry/default/plate-ui/cloud.tsx | 9 - .../default/plate-ui/dropdown-menu.tsx | 1 + apps/www/src/registry/registry-examples.ts | 6 - apps/www/src/registry/registry-ui.ts | 14 - yarn.lock | 497 +++++++++++++++++- 39 files changed, 834 insertions(+), 1372 deletions(-) delete mode 100644 apps/www/content/docs/components/cloud.mdx delete mode 100644 apps/www/public/r/styles/default/cloud.json create mode 100644 apps/www/scripts/capture-screenshots.mts create mode 100644 apps/www/scripts/fix-import.mts delete mode 100644 apps/www/src/lib/highlighter-theme.json delete mode 100644 apps/www/src/lib/plate/demo/values/cloudValue.tsx delete mode 100644 apps/www/src/registry/default/example/cloud-demo.tsx delete mode 100644 apps/www/src/registry/default/plate-ui/cloud-attachment-element.tsx delete mode 100644 apps/www/src/registry/default/plate-ui/cloud-image-element.tsx delete mode 100644 apps/www/src/registry/default/plate-ui/cloud-resize-controls.tsx delete mode 100644 apps/www/src/registry/default/plate-ui/cloud-status-bar.tsx delete mode 100644 apps/www/src/registry/default/plate-ui/cloud-toolbar-buttons.tsx delete mode 100644 apps/www/src/registry/default/plate-ui/cloud.tsx diff --git a/.eslintrc.cjs b/.eslintrc.cjs index f364cb7ea3..93b2410194 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -34,7 +34,7 @@ module.exports = { '.out', '**/*.mdx', '**/__registry__', - '**/scripts/build-registry.mts', + '**/scripts/*.mts', ], overrides: [ { diff --git a/apps/www/content/docs/components/cloud.mdx b/apps/www/content/docs/components/cloud.mdx deleted file mode 100644 index 13e822cad7..0000000000 --- a/apps/www/content/docs/components/cloud.mdx +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: Cloud -description: Integrate cloud functionality to enable seamless access to cloud-based resources. -component: true -docs: - - route: /docs/cloud - title: Cloud ---- - -## Installation - - - - -CLI -Manual - - - -```bash -npx shadcx@latest add cloud -r plate-ui -``` - - - - - - - - - -Install the following dependencies: - -- [Cloud](/docs/cloud) - - - - - -Copy and paste the following code into your project. - - - - - - - - - - - -Update the import paths to match your project setup. - - - - - - - - - -## Examples - - - -### Usage - -```tsx -const plugins = createMyPlugins( - [ - ...basicNodesPlugins, - createCloudPlugin({ - options: {}, - }), - createCloudAttachmentPlugin(), - createCloudImagePlugin({ - options: { - maxInitialWidth: 320, - maxInitialHeight: 320, - minResizeWidth: 100, - maxResizeWidth: 720, - }, - }), - ], - { - components: { - ...plateUI, - [CloudAttachmentPlugin.key]: CloudAttachmentElement, - [CloudImagePlugin.key]: CloudImageElement, - }, - } -); -``` - -### Demo - -```tsx -export default function CloudDemo() { - return ( - plugins={plugins} initialValue={cloudValue}> - - - - - - ); -} -``` diff --git a/apps/www/content/docs/components/code-block-element.mdx b/apps/www/content/docs/components/code-block-element.mdx index 735374ef33..ab837ebde6 100644 --- a/apps/www/content/docs/components/code-block-element.mdx +++ b/apps/www/content/docs/components/code-block-element.mdx @@ -45,7 +45,8 @@ Copy and paste the following code into your project. - + + diff --git a/apps/www/content/docs/components/color-dropdown-menu.mdx b/apps/www/content/docs/components/color-dropdown-menu.mdx index 0d8d615e8b..697360de59 100644 --- a/apps/www/content/docs/components/color-dropdown-menu.mdx +++ b/apps/www/content/docs/components/color-dropdown-menu.mdx @@ -56,11 +56,11 @@ Copy and paste the following code into your project. - - - - - + + + + + diff --git a/apps/www/content/docs/components/comments-popover.mdx b/apps/www/content/docs/components/comments-popover.mdx index 107b4e7e71..9c8ac6b1da 100644 --- a/apps/www/content/docs/components/comments-popover.mdx +++ b/apps/www/content/docs/components/comments-popover.mdx @@ -51,14 +51,15 @@ Copy and paste the following code into your project. - - - - - - - + + + + + + + + diff --git a/apps/www/content/docs/components/emoji-dropdown-menu.mdx b/apps/www/content/docs/components/emoji-dropdown-menu.mdx index 752483bf62..de64eaa4ec 100644 --- a/apps/www/content/docs/components/emoji-dropdown-menu.mdx +++ b/apps/www/content/docs/components/emoji-dropdown-menu.mdx @@ -49,13 +49,13 @@ Copy and paste the following code into your project. - - - - - - - + + + + + + + diff --git a/apps/www/content/docs/components/emoji-toolbar-dropdown.mdx b/apps/www/content/docs/components/emoji-toolbar-dropdown.mdx index b00166407b..367447e887 100644 --- a/apps/www/content/docs/components/emoji-toolbar-dropdown.mdx +++ b/apps/www/content/docs/components/emoji-toolbar-dropdown.mdx @@ -40,7 +40,7 @@ Copy and paste the following code into your project. - + diff --git a/apps/www/contentlayer.config.js b/apps/www/contentlayer.config.js index cce45c5605..94dc5fae42 100644 --- a/apps/www/contentlayer.config.js +++ b/apps/www/contentlayer.config.js @@ -1,10 +1,9 @@ -import { getHighlighter, loadTheme } from '@shikijs/compat'; +import { getHighlighter } from '@shikijs/compat'; import { defineDocumentType, defineNestedType, makeSource, } from 'contentlayer2/source-files'; -import path from 'node:path'; import rehypeAutolinkHeadings from 'rehype-autolink-headings'; import rehypePrettyCode from 'rehype-pretty-code'; import rehypeSlug from 'rehype-slug'; @@ -130,13 +129,8 @@ export default makeSource({ [ rehypePrettyCode, { - getHighlighter: async () => { - const theme = await loadTheme( - path.join(process.cwd(), '/src/lib/highlighter-theme.json') - ); - - return await getHighlighter({ theme }); - }, + getHighlighter, + theme: 'github-dark', onVisitHighlightedLine(node) { node.properties.className.push('line--highlighted'); }, diff --git a/apps/www/package.json b/apps/www/package.json index 688e0b0b88..2d47c49b38 100644 --- a/apps/www/package.json +++ b/apps/www/package.json @@ -178,6 +178,7 @@ "glob": "^11.0.0", "mdast-util-toc": "^7.1.0", "postcss": "^8.4.45", + "puppeteer": "^23.6.0", "rehype": "^12.0.1", "rehype-autolink-headings": "^6.1.1", "rehype-pretty-code": "^0.6.0", diff --git a/apps/www/public/r/index.json b/apps/www/public/r/index.json index fcfdd4ebd0..b527c62e39 100644 --- a/apps/www/public/r/index.json +++ b/apps/www/public/r/index.json @@ -39,40 +39,6 @@ ], "type": "registry:ui" }, - { - "dependencies": [ - "@udecode/plate-cloud" - ], - "files": [ - { - "path": "plate-ui/cloud.tsx", - "type": "registry:ui" - }, - { - "path": "plate-ui/cloud-attachment-element.tsx", - "type": "registry:ui" - }, - { - "path": "plate-ui/cloud-image-element.tsx", - "type": "registry:ui" - }, - { - "path": "plate-ui/cloud-resize-controls.tsx", - "type": "registry:ui" - }, - { - "path": "plate-ui/cloud-status-bar.tsx", - "type": "registry:ui" - }, - { - "path": "plate-ui/cloud-toolbar-buttons.tsx", - "type": "registry:ui" - } - ], - "name": "cloud", - "registryDependencies": [], - "type": "registry:ui" - }, { "dependencies": [ "@udecode/plate-code-block" diff --git a/apps/www/public/r/styles/default/button.json b/apps/www/public/r/styles/default/button.json index 7beeda0cdc..4d9599755b 100644 --- a/apps/www/public/r/styles/default/button.json +++ b/apps/www/public/r/styles/default/button.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "import * as React from 'react';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { cn, withRef } from '@udecode/cn';\nimport { type VariantProps, cva } from 'class-variance-authority';\n\nexport const buttonVariants = cva(\n 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n {\n defaultVariants: {\n size: 'default',\n variant: 'default',\n },\n variants: {\n isMenu: {\n true: 'h-auto w-full cursor-pointer justify-start',\n },\n size: {\n default: 'h-10 px-4 py-2',\n icon: 'size-10',\n lg: 'h-11 rounded-md px-8',\n none: '',\n sm: 'h-9 rounded-md px-3',\n sms: 'size-9 rounded-md px-0',\n xs: 'h-8 rounded-md px-3',\n },\n variant: {\n default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n destructive:\n 'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n ghost: 'hover:bg-accent hover:text-accent-foreground',\n inlineLink: 'text-base text-primary underline underline-offset-4',\n link: 'text-primary underline-offset-4 hover:underline',\n outline:\n 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n secondary:\n 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n },\n },\n }\n);\n\nexport const Button = withRef<\n 'button',\n {\n asChild?: boolean;\n } & VariantProps\n>(({ asChild = false, className, isMenu, size, variant, ...props }, ref) => {\n const Comp = asChild ? Slot : 'button';\n\n return (\n \n );\n});\n", + "content": "import * as React from 'react';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { cn, withRef } from '@udecode/cn';\nimport { type VariantProps, cva } from 'class-variance-authority';\n\nexport const buttonVariants = cva(\n 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n {\n defaultVariants: {\n size: 'default',\n variant: 'default',\n },\n variants: {\n isMenu: {\n true: 'h-auto w-full cursor-pointer justify-start',\n },\n size: {\n default: 'h-10 px-4 py-2',\n icon: 'size-10',\n lg: 'h-11 rounded-md px-8',\n none: '',\n sm: 'h-9 rounded-md px-3',\n sms: 'size-9 rounded-md px-0',\n xs: 'h-8 rounded-md px-3',\n },\n variant: {\n default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n destructive:\n 'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n ghost: 'hover:bg-accent hover:text-accent-foreground',\n inlineLink: 'text-base text-primary underline underline-offset-4',\n link: 'text-primary underline-offset-4 hover:underline',\n outline:\n 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n secondary:\n 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n },\n },\n }\n);\n\nexport const Button = withRef<\n 'button',\n {\n asChild?: boolean;\n } & VariantProps\n>(({ asChild = false, className, isMenu, size, variant, ...props }, ref) => {\n const Comp = asChild ? Slot : 'button';\n\n return (\n \n );\n});\n", "path": "plate-ui/button.tsx", "target": "", "type": "registry:ui" diff --git a/apps/www/public/r/styles/default/cloud.json b/apps/www/public/r/styles/default/cloud.json deleted file mode 100644 index e0bdc07c42..0000000000 --- a/apps/www/public/r/styles/default/cloud.json +++ /dev/null @@ -1,46 +0,0 @@ -{ - "dependencies": [ - "@udecode/plate-cloud" - ], - "files": [ - { - "content": "export * from './cloud-attachment-element';\n\nexport * from './cloud-image-element';\n\nexport * from './cloud-resize-controls';\n\nexport * from './cloud-status-bar';\n\nexport * from './cloud-toolbar-buttons';\n", - "path": "plate-ui/cloud.tsx", - "target": "", - "type": "registry:ui" - }, - { - "content": "'use client';\n\nimport React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n type TCloudAttachmentElement,\n useCloudAttachmentElementState,\n} from '@udecode/plate-cloud';\nimport {\n type PlateElementProps,\n PlateElement,\n} from '@udecode/plate-common/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { StatusBar } from './cloud-status-bar';\n\nexport interface CloudAttachmentElementProps\n extends PlateElementProps {}\n\nexport function CloudAttachmentElement({\n className,\n ...props\n}: CloudAttachmentElementProps) {\n const { children, element } = props;\n\n const { focused, selected, upload } = useCloudAttachmentElementState({\n element,\n });\n\n return (\n \n
\n \n
\n
\n
{element.filename}
\n \n
\n {element.bytes} bytes\n
\n \n
\n \n {upload.status === 'success' && (\n \n \n \n )}\n \n {children}\n \n );\n}\n", - "path": "plate-ui/cloud-attachment-element.tsx", - "target": "", - "type": "registry:ui" - }, - { - "content": "'use client';\n\nimport React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n type TCloudImageElement,\n useCloudImageElementState,\n} from '@udecode/plate-cloud';\nimport {\n type PlateElementProps,\n PlateElement,\n} from '@udecode/plate-common/react';\n\nimport { ResizeControls } from './cloud-resize-controls';\nimport { StatusBar } from './cloud-status-bar';\n\nexport interface CloudImageElementProps\n extends PlateElementProps {}\n\nexport function CloudImageElement({\n className,\n ...props\n}: CloudImageElementProps) {\n const { children, element } = props;\n\n const { focused, selected, setSize, size, src, srcSet, upload } =\n useCloudImageElementState({ element });\n\n return (\n \n on the inside is display: 'block'.\n */\n verticalAlign: 'top',\n }}\n contentEditable={false}\n >\n {src === '' ? (\n \n ) : (\n \n )}\n
\n \n
\n {selected && focused && (\n \n )}\n \n {children}\n \n );\n}\n", - "path": "plate-ui/cloud-image-element.tsx", - "target": "", - "type": "registry:ui" - }, - { - "content": "'use client';\n\nimport React, {\n type Dispatch,\n type SetStateAction,\n useCallback,\n useRef,\n useState,\n} from 'react';\n\nimport { resizeInWidth } from '@portive/client';\nimport {\n type TCloudImageElement,\n CloudImagePlugin,\n} from '@udecode/plate-cloud';\nimport { setNodes } from '@udecode/plate-common';\nimport { findNodePath, useEditorRef } from '@udecode/plate-common/react';\n\ntype ImageSize = { height: number; width: number };\n\ntype SetImageSize = Dispatch>;\n\n/** The resize label that shows the width/height of the image */\nfunction ResizeLabel({ size }: { size: { height: number; width: number } }) {\n const isBelow = size.width < 100 || size.height < 100;\n const bottom = isBelow ? -24 : 4;\n\n return (\n \n {size.width} × {size.height}\n \n );\n}\n\n/** The little divets on the resize handle bar. */\nconst barStyle = {\n background: 'rgba(255,255,255,0.75)',\n height: 16,\n position: 'absolute',\n top: 8,\n width: 1,\n} as const;\n\n/** The handle used to drag resize an image */\nfunction ResizeHandles({\n onMouseDown,\n}: {\n onMouseDown: React.MouseEventHandler;\n}) {\n return (\n <>\n {/* Invisible Handle */}\n \n {/* Visible Handle */}\n \n
\n
\n
\n
\n
\n \n );\n}\n\nexport function ResizeControls({\n element,\n setSize,\n size,\n}: {\n element: TCloudImageElement;\n setSize: SetImageSize;\n size: ImageSize;\n}) {\n const editor = useEditorRef();\n const [isResizing, setIsResizing] = useState(false);\n\n const { maxResizeWidth, minResizeWidth } =\n editor.getOptions(CloudImagePlugin);\n\n const currentSizeRef = useRef<{ height: number; width: number }>();\n\n const onMouseDown = useCallback(\n (mouseDownEvent: React.MouseEvent) => {\n setIsResizing(true);\n const startX = mouseDownEvent.clientX;\n const startWidth = size.width;\n const minWidth = minResizeWidth;\n const maxWidth = Math.min(element.maxWidth, maxResizeWidth);\n\n /**\n * Handle resize dragging through an event handler on mouseMove on the\n * document.\n */\n function onDocumentMouseMove(mouseMoveEvent: MouseEvent) {\n mouseMoveEvent.preventDefault();\n mouseMoveEvent.stopPropagation();\n /** Calculate the proposed width based on drag position */\n const proposedWidth = startWidth + mouseMoveEvent.clientX - startX;\n\n /** Constrain the proposed with between min, max and original width */\n const nextWidth = Math.min(maxWidth, Math.max(minWidth, proposedWidth));\n\n const currentSize = resizeInWidth(\n { height: element.maxHeight, width: element.maxWidth },\n nextWidth\n );\n\n currentSizeRef.current = currentSize;\n setSize(currentSize);\n }\n\n const originalCursor = document.body.style.cursor;\n\n /** When the user releases the mouse, remove all the event handlers */\n function onDocumentMouseUp() {\n setIsResizing(false);\n document.removeEventListener('mousemove', onDocumentMouseMove);\n document.removeEventListener('mouseup', onDocumentMouseUp);\n document.body.style.cursor = originalCursor;\n\n const at = findNodePath(editor, element);\n\n if (!currentSizeRef.current) return;\n\n setNodes(editor, currentSizeRef.current, { at });\n }\n\n /** Attach document event listeners */\n document.addEventListener('mousemove', onDocumentMouseMove);\n document.addEventListener('mouseup', onDocumentMouseUp);\n\n /**\n * While dragging, we want the cursor to be `ew-resize` (left-right arrow)\n * even if the cursor happens to not be exactly on the handle at the\n * moment due to a delay in the cursor moving to a location and the image\n * resizing to it.\n *\n * Also, image has max width/height and the cursor can fall outside of it.\n */\n document.body.style.cursor = 'ew-resize';\n },\n [size.width, minResizeWidth, element, maxResizeWidth, setSize, editor]\n );\n\n if (element.width < minResizeWidth) return null;\n\n return (\n <>\n {isResizing ? : null}\n \n \n );\n}\n", - "path": "plate-ui/cloud-resize-controls.tsx", - "target": "", - "type": "registry:ui" - }, - { - "content": "'use client';\n\nimport React, { type HTMLAttributes, useEffect, useRef, useState } from 'react';\n\nimport type { Upload, UploadProgress } from '@udecode/plate-cloud';\n\nimport { cn } from '@udecode/cn';\n\nexport function ProgressBar({\n className,\n upload,\n ...props\n}: {\n upload: UploadProgress;\n} & HTMLAttributes) {\n const [width, setWidth] = useState(null);\n const ref = useRef(null);\n\n useEffect(() => {\n if (ref.current) setWidth(ref.current.offsetWidth);\n }, []);\n\n /**\n * This formula looks a little funny because we want the `0` value of the\n * progress bar to have a width that is still the height of the progress bar.\n *\n * This is for a few reasons:\n *\n * 1. We want the zero point to start with the progress bar being a circle\n * 2. If we want rounded edges, if the width is shorter than the height, we get\n * an oval instead of a circle\n * 3. The halfway point looks visually wrong because of the circle progress bar\n * when it is technically at the halfway point.\n */\n const progressWidth =\n width == null\n ? 0\n : (upload.sentBytes / upload.totalBytes) * (width - 16) + 16;\n\n return (\n \n \n
\n );\n}\n\nexport function FailBar({\n className,\n ...props\n}: HTMLAttributes) {\n return (\n \n );\n}\n\nexport function StatusBar(props: {\n upload: Upload;\n children?: React.ReactNode;\n}) {\n const { children, upload } = props;\n\n switch (upload.status) {\n case 'progress': {\n return ;\n }\n case 'error': {\n return Upload Failed;\n }\n case 'not-found': {\n return Uploading...;\n }\n case 'success': {\n return children || null;\n }\n default: {\n throw new Error(`Should be unreachable`);\n }\n }\n}\n", - "path": "plate-ui/cloud-status-bar.tsx", - "target": "", - "type": "registry:ui" - }, - { - "content": "'use client';\n\nimport React from 'react';\n\nimport { CloudPlugin } from '@udecode/plate-cloud';\nimport { useEditorPlugin } from '@udecode/plate-common/react';\n\nconst buttonStyle: React.CSSProperties = {\n background: '#f0f0f0',\n border: 'none',\n cursor: 'pointer',\n marginRight: 4,\n padding: 8,\n};\n\nexport function CloudToolbarButtons() {\n const { api, editor } = useEditorPlugin(CloudPlugin);\n\n const getSaveValue = () => {\n console.info('editor.children', editor.children);\n console.info('editor.cloud.getSaveValue()', api.cloud.getSaveValue());\n };\n\n const finishUploads = async () => {\n await api.cloud.finishUploads();\n };\n\n return (\n <>\n \n \n \n Note: After clicking a button, output will be shown in console.\n \n \n );\n}\n", - "path": "plate-ui/cloud-toolbar-buttons.tsx", - "target": "", - "type": "registry:ui" - } - ], - "name": "cloud", - "registryDependencies": [], - "type": "registry:ui" -} \ No newline at end of file diff --git a/apps/www/scripts/build-registry.mts b/apps/www/scripts/build-registry.mts index 353058c98b..87b36c9d6b 100644 --- a/apps/www/scripts/build-registry.mts +++ b/apps/www/scripts/build-registry.mts @@ -19,6 +19,7 @@ import { registryItemTypeSchema, registrySchema, } from "../src/registry/schema" +import { fixImport } from "./fix-import.mts" const REGISTRY_PATH = path.join(process.cwd(), "public/r") @@ -28,6 +29,7 @@ const REGISTRY_INDEX_WHITELIST: z.infer[] = [ "registry:hook", "registry:theme", "registry:block", + "registry:example", ] const project = new Project({ @@ -73,11 +75,23 @@ export const Index: Record = { if (item.type === "registry:block") { const file = resolveFiles[0] const filename = path.basename(file) - const raw = await fs.readFile(file, "utf8") + let raw: string + try { + raw = await fs.readFile(file, "utf8") + } catch (error) { + continue + } const tempFile = await createTempSourceFile(filename) const sourceFile = project.createSourceFile(tempFile, raw, { scriptKind: ScriptKind.TSX, }) + + const description = sourceFile + .getVariableDeclaration("description") + ?.getInitializerOrThrow() + .asKindOrThrow(SyntaxKind.StringLiteral) + .getLiteralValue() + item.description = description ?? "" // Find all imports. const imports = new Map< @@ -268,13 +282,14 @@ export const Index: Record = { index += ` "${item.name}": { name: "${item.name}", + description: "${item.description ?? ""}", type: "${item.type}", registryDependencies: ${JSON.stringify(item.registryDependencies)}, files: [${resolveFiles.map((file) => `"${file}"`)}], component: React.lazy(() => import("${componentPath}")), source: "${sourceFilename}", - category: "${item.category}", - subcategory: "${item.subcategory}", + category: "${item.category ?? ''}", + subcategory: "${item.subcategory ?? ''}", chunks: [${chunks.map( (chunk: any) => `{ name: "${chunk.name}", @@ -366,10 +381,17 @@ async function buildStyles(registry: Registry) { } : _file - const content = await fs.readFile( - path.join(process.cwd(), "src/registry", style.name, file.path), - "utf8" - ) + let content: string + + try { + content = await fs.readFile( + path.join(process.cwd(), "src/registry", style.name, file.path), + "utf8" + ) + content = fixImport(content) + } catch (error) { + return + } const tempFile = await createTempSourceFile(file.path) const sourceFile = project.createSourceFile(tempFile, content, { @@ -380,11 +402,32 @@ async function buildStyles(registry: Registry) { sourceFile.getVariableDeclaration("containerClassName")?.remove() sourceFile.getVariableDeclaration("description")?.remove() + let target = file.target + if (!target || target === "") { + const fileName = file.path.split("/").pop() + if ( + file.type === "registry:block" || + file.type === "registry:component" || + file.type === "registry:example" + ) { + target = `components/${fileName}` + } + if (file.type === "registry:ui") { + target = `components/ui/${fileName}` + } + if (file.type === "registry:hook") { + target = `hooks/${fileName}` + } + if (file.type === "registry:lib") { + target = `lib/${fileName}` + } + } + return { path: file.path, type: file.type, content: sourceFile.getText(), - target: file.target, + target, } }) ) diff --git a/apps/www/scripts/capture-screenshots.mts b/apps/www/scripts/capture-screenshots.mts new file mode 100644 index 0000000000..5728eec8a6 --- /dev/null +++ b/apps/www/scripts/capture-screenshots.mts @@ -0,0 +1,72 @@ +import puppeteer from "puppeteer" + +const BLOCKS = [ + // "demo-sidebar", +] + +try { + const browser = await puppeteer.launch({ + defaultViewport: { + width: 1440, + height: 900, + deviceScaleFactor: 2, + }, + }) + + console.log("β˜€οΈ Capturing screenshots for light theme") + for (const block of BLOCKS) { + const pageUrl = `http://localhost:3000/blocks/default/${block}` + console.log(`- ${block}`) + + const page = await browser.newPage() + await page.goto(pageUrl, { + waitUntil: "networkidle2", + }) + + // Hide Tailwind indicator + await page.evaluate(() => { + const indicator = document.querySelector("[data-tailwind-indicator]") + if (indicator) { + indicator.remove() + } + }) + + await page.screenshot({ + path: `./public/images/blocks/${block}.png`, + }) + } + + console.log("πŸŒ™ Capturing screenshots for dark theme") + for (const block of BLOCKS) { + const pageUrl = `http://localhost:3000/blocks/default/${block}` + console.log(`- ${block}`) + + const page = await browser.newPage() + await page.goto(pageUrl, { + waitUntil: "networkidle2", + }) + + // Hide Tailwind indicator + await page.evaluate(() => { + const indicator = document.querySelector("[data-tailwind-indicator]") + if (indicator) { + indicator.remove() + } + }) + + // Set theme to dark + await page.evaluate(() => { + localStorage.setItem("theme", "dark") + }) + + await page.screenshot({ + path: `./public/images/blocks/${block}-dark.png`, + }) + } + + await browser.close() + console.log("βœ… Done!") +} catch (error) { + console.error(error) + process.exit(1) +} \ No newline at end of file diff --git a/apps/www/scripts/fix-import.mts b/apps/www/scripts/fix-import.mts new file mode 100644 index 0000000000..77c3cab8d8 --- /dev/null +++ b/apps/www/scripts/fix-import.mts @@ -0,0 +1,24 @@ +export function fixImport(content: string) { + const regex = /@\/(.+?)\/((?:.*?\/)?(?:components|ui|hooks|lib))\/([\w-]+)/g + + const replacement = ( + match: string, + path: string, + type: string, + component: string + ) => { + if (type.endsWith("components")) { + return `@/components/${component}` + } else if (type.endsWith("ui")) { + return `@/components/ui/${component}` + } else if (type.endsWith("hooks")) { + return `@/hooks/${component}` + } else if (type.endsWith("lib")) { + return `@/lib/${component}` + } + + return match + } + + return content.replace(regex, replacement) +} \ No newline at end of file diff --git a/apps/www/src/__registry__/index.tsx b/apps/www/src/__registry__/index.tsx index 05e1589a64..34be58493f 100644 --- a/apps/www/src/__registry__/index.tsx +++ b/apps/www/src/__registry__/index.tsx @@ -7,6 +7,7 @@ export const Index: Record = { "default": { "editor": { name: "editor", + title: "undefined", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/editor.tsx"], @@ -18,6 +19,7 @@ export const Index: Record = { }, "block-selection": { name: "block-selection", + title: "undefined", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/block-selection.tsx"], @@ -29,6 +31,7 @@ export const Index: Record = { }, "plate-element": { name: "plate-element", + title: "undefined", type: "registry:ui", registryDependencies: ["block-selection"], files: ["registry/default/plate-ui/plate-element.tsx"], @@ -38,19 +41,9 @@ export const Index: Record = { subcategory: "undefined", chunks: [] }, - "cloud": { - name: "cloud", - type: "registry:ui", - registryDependencies: [], - files: ["registry/default/plate-ui/cloud.tsx","registry/default/plate-ui/cloud-attachment-element.tsx","registry/default/plate-ui/cloud-image-element.tsx","registry/default/plate-ui/cloud-resize-controls.tsx","registry/default/plate-ui/cloud-status-bar.tsx","registry/default/plate-ui/cloud-toolbar-buttons.tsx"], - component: React.lazy(() => import("@/registry/default/plate-ui/cloud.tsx")), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [] - }, "code-block-element": { name: "code-block-element", + title: "undefined", type: "registry:ui", 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"], @@ -62,6 +55,7 @@ export const Index: Record = { }, "column-element": { name: "column-element", + title: "undefined", type: "registry:ui", registryDependencies: ["command","resizable","plate-element"], files: ["registry/default/plate-ui/column-element.tsx","registry/default/plate-ui/column-group-element.tsx"], @@ -73,6 +67,7 @@ export const Index: Record = { }, "color-dropdown-menu": { name: "color-dropdown-menu", + title: "undefined", type: "registry:ui", registryDependencies: ["dropdown-menu","toolbar","separator","button","tooltip"], files: ["registry/default/plate-ui/color-dropdown-menu.tsx","registry/default/plate-ui/color-constants.ts","registry/default/plate-ui/color-dropdown-menu-items.tsx","registry/default/plate-ui/color-input.tsx","registry/default/plate-ui/color-picker.tsx","registry/default/plate-ui/colors-custom.tsx"], @@ -84,6 +79,7 @@ export const Index: Record = { }, "comments-popover": { name: "comments-popover", + title: "undefined", type: "registry:ui", registryDependencies: ["popover","avatar"], files: ["registry/default/plate-ui/comments-popover.tsx","registry/default/plate-ui/comment-avatar.tsx","registry/default/plate-ui/comment-create-form.tsx","registry/default/plate-ui/comment-item.tsx","registry/default/plate-ui/comment-more-dropdown.tsx","registry/default/plate-ui/comment-reply-items.tsx","registry/default/plate-ui/comment-resolve-button.tsx","registry/default/plate-ui/comment-value.tsx"], @@ -95,6 +91,7 @@ export const Index: Record = { }, "draggable": { name: "draggable", + title: "undefined", type: "registry:ui", registryDependencies: ["tooltip"], files: ["registry/default/plate-ui/draggable.tsx","registry/default/plate-ui/with-draggables.tsx"], @@ -106,6 +103,7 @@ export const Index: Record = { }, "emoji-dropdown-menu": { name: "emoji-dropdown-menu", + title: "undefined", type: "registry:ui", registryDependencies: ["toolbar"], files: ["registry/default/plate-ui/emoji-dropdown-menu.tsx","registry/default/plate-ui/emoji-toolbar-dropdown.tsx","registry/default/plate-ui/emoji-icons.tsx","registry/default/plate-ui/emoji-picker.tsx","registry/default/plate-ui/emoji-picker-content.tsx","registry/default/plate-ui/emoji-picker-navigation.tsx","registry/default/plate-ui/emoji-picker-preview.tsx","registry/default/plate-ui/emoji-picker-search-and-clear.tsx","registry/default/plate-ui/emoji-picker-search-bar.tsx"], @@ -117,6 +115,7 @@ export const Index: Record = { }, "emoji-input-element": { name: "emoji-input-element", + title: "undefined", type: "registry:ui", registryDependencies: ["inline-combobox","plate-element","use-debounce"], files: ["registry/default/plate-ui/emoji-input-element.tsx"], @@ -128,6 +127,7 @@ export const Index: Record = { }, "align-dropdown-menu": { name: "align-dropdown-menu", + title: "undefined", type: "registry:ui", registryDependencies: ["dropdown-menu","toolbar"], files: ["registry/default/plate-ui/align-dropdown-menu.tsx"], @@ -139,6 +139,7 @@ export const Index: Record = { }, "avatar": { name: "avatar", + title: "undefined", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/avatar.tsx"], @@ -150,6 +151,7 @@ export const Index: Record = { }, "blockquote-element": { name: "blockquote-element", + title: "undefined", type: "registry:ui", registryDependencies: ["plate-element"], files: ["registry/default/plate-ui/blockquote-element.tsx"], @@ -161,6 +163,7 @@ export const Index: Record = { }, "date-element": { name: "date-element", + title: "undefined", type: "registry:ui", registryDependencies: ["calendar","plate-element"], files: ["registry/default/plate-ui/date-element.tsx"], @@ -172,6 +175,7 @@ export const Index: Record = { }, "calendar": { name: "calendar", + title: "undefined", type: "registry:ui", registryDependencies: ["button"], files: ["registry/default/plate-ui/calendar.tsx"], @@ -183,6 +187,7 @@ export const Index: Record = { }, "button": { name: "button", + title: "undefined", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/button.tsx"], @@ -194,6 +199,7 @@ export const Index: Record = { }, "caption": { name: "caption", + title: "undefined", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/caption.tsx"], @@ -205,6 +211,7 @@ export const Index: Record = { }, "checkbox": { name: "checkbox", + title: "undefined", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/checkbox.tsx"], @@ -216,6 +223,7 @@ export const Index: Record = { }, "code-leaf": { name: "code-leaf", + title: "undefined", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/code-leaf.tsx"], @@ -227,6 +235,7 @@ export const Index: Record = { }, "code-line-element": { name: "code-line-element", + title: "undefined", type: "registry:ui", registryDependencies: ["plate-element"], files: ["registry/default/plate-ui/code-line-element.tsx"], @@ -238,6 +247,7 @@ export const Index: Record = { }, "code-syntax-leaf": { name: "code-syntax-leaf", + title: "undefined", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/code-syntax-leaf.tsx"], @@ -249,6 +259,7 @@ export const Index: Record = { }, "command": { name: "command", + title: "undefined", type: "registry:ui", registryDependencies: ["dialog"], files: ["registry/default/plate-ui/command.tsx"], @@ -260,6 +271,7 @@ export const Index: Record = { }, "comment-leaf": { name: "comment-leaf", + title: "undefined", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/comment-leaf.tsx"], @@ -271,6 +283,7 @@ export const Index: Record = { }, "comment-toolbar-button": { name: "comment-toolbar-button", + title: "undefined", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/comment-toolbar-button.tsx"], @@ -282,6 +295,7 @@ export const Index: Record = { }, "cursor-overlay": { name: "cursor-overlay", + title: "undefined", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/cursor-overlay.tsx"], @@ -293,6 +307,7 @@ export const Index: Record = { }, "dialog": { name: "dialog", + title: "undefined", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/dialog.tsx"], @@ -304,6 +319,7 @@ export const Index: Record = { }, "dropdown-menu": { name: "dropdown-menu", + title: "undefined", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/dropdown-menu.tsx"], @@ -315,6 +331,7 @@ export const Index: Record = { }, "excalidraw-element": { name: "excalidraw-element", + title: "undefined", type: "registry:ui", registryDependencies: ["plate-element"], files: ["registry/default/plate-ui/excalidraw-element.tsx"], @@ -326,6 +343,7 @@ export const Index: Record = { }, "fixed-toolbar": { name: "fixed-toolbar", + title: "undefined", type: "registry:ui", registryDependencies: ["toolbar"], files: ["registry/default/plate-ui/fixed-toolbar.tsx"], @@ -337,6 +355,7 @@ export const Index: Record = { }, "fixed-toolbar-buttons": { name: "fixed-toolbar-buttons", + title: "undefined", type: "registry:ui", registryDependencies: ["toolbar","insert-dropdown-menu","mark-toolbar-button","mode-dropdown-menu","turn-into-dropdown-menu"], files: ["registry/default/plate-ui/fixed-toolbar-buttons.tsx"], @@ -348,6 +367,7 @@ export const Index: Record = { }, "floating-toolbar": { name: "floating-toolbar", + title: "undefined", type: "registry:ui", registryDependencies: ["toolbar"], files: ["registry/default/plate-ui/floating-toolbar.tsx"], @@ -359,6 +379,7 @@ export const Index: Record = { }, "floating-toolbar-buttons": { name: "floating-toolbar-buttons", + title: "undefined", type: "registry:ui", registryDependencies: ["mark-toolbar-button","more-dropdown-menu","turn-into-dropdown-menu"], files: ["registry/default/plate-ui/floating-toolbar-buttons.tsx"], @@ -370,6 +391,7 @@ export const Index: Record = { }, "heading-element": { name: "heading-element", + title: "undefined", type: "registry:ui", registryDependencies: ["plate-element"], files: ["registry/default/plate-ui/heading-element.tsx"], @@ -381,6 +403,7 @@ export const Index: Record = { }, "highlight-leaf": { name: "highlight-leaf", + title: "undefined", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/highlight-leaf.tsx"], @@ -392,6 +415,7 @@ export const Index: Record = { }, "hr-element": { name: "hr-element", + title: "undefined", type: "registry:ui", registryDependencies: ["plate-element"], files: ["registry/default/plate-ui/hr-element.tsx"], @@ -403,6 +427,7 @@ export const Index: Record = { }, "image-element": { name: "image-element", + title: "undefined", type: "registry:ui", registryDependencies: ["media-popover","caption","resizable","plate-element"], files: ["registry/default/plate-ui/image-element.tsx"], @@ -414,6 +439,7 @@ export const Index: Record = { }, "indent-list-toolbar-button": { name: "indent-list-toolbar-button", + title: "undefined", type: "registry:ui", registryDependencies: ["toolbar"], files: ["registry/default/plate-ui/indent-list-toolbar-button.tsx"], @@ -425,6 +451,7 @@ export const Index: Record = { }, "indent-toolbar-button": { name: "indent-toolbar-button", + title: "undefined", type: "registry:ui", registryDependencies: ["toolbar"], files: ["registry/default/plate-ui/indent-toolbar-button.tsx"], @@ -436,6 +463,7 @@ export const Index: Record = { }, "indent-todo-toolbar-button": { name: "indent-todo-toolbar-button", + title: "undefined", type: "registry:ui", registryDependencies: ["toolbar"], files: ["registry/default/plate-ui/indent-todo-toolbar-button.tsx"], @@ -447,6 +475,7 @@ export const Index: Record = { }, "indent-todo-marker-component": { name: "indent-todo-marker-component", + title: "undefined", type: "registry:ui", registryDependencies: ["checkbox"], files: ["registry/default/plate-ui/indent-todo-marker-component.tsx"], @@ -458,6 +487,7 @@ export const Index: Record = { }, "inline-combobox": { name: "inline-combobox", + title: "undefined", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/inline-combobox.tsx"], @@ -469,6 +499,7 @@ export const Index: Record = { }, "input": { name: "input", + title: "undefined", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/input.tsx"], @@ -480,6 +511,7 @@ export const Index: Record = { }, "insert-dropdown-menu": { name: "insert-dropdown-menu", + title: "undefined", type: "registry:ui", registryDependencies: ["dropdown-menu","toolbar"], files: ["registry/default/plate-ui/insert-dropdown-menu.tsx"], @@ -491,6 +523,7 @@ export const Index: Record = { }, "kbd-leaf": { name: "kbd-leaf", + title: "undefined", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/kbd-leaf.tsx"], @@ -502,6 +535,7 @@ export const Index: Record = { }, "line-height-dropdown-menu": { name: "line-height-dropdown-menu", + title: "undefined", type: "registry:ui", registryDependencies: ["toolbar","dropdown-menu"], files: ["registry/default/plate-ui/line-height-dropdown-menu.tsx"], @@ -513,6 +547,7 @@ export const Index: Record = { }, "link-element": { name: "link-element", + title: "undefined", type: "registry:ui", registryDependencies: ["plate-element"], files: ["registry/default/plate-ui/link-element.tsx"], @@ -524,6 +559,7 @@ export const Index: Record = { }, "link-floating-toolbar": { name: "link-floating-toolbar", + title: "undefined", type: "registry:ui", registryDependencies: ["button","input","popover","separator"], files: ["registry/default/plate-ui/link-floating-toolbar.tsx"], @@ -535,6 +571,7 @@ export const Index: Record = { }, "link-toolbar-button": { name: "link-toolbar-button", + title: "undefined", type: "registry:ui", registryDependencies: ["toolbar"], files: ["registry/default/plate-ui/link-toolbar-button.tsx"], @@ -546,6 +583,7 @@ export const Index: Record = { }, "list-element": { name: "list-element", + title: "undefined", type: "registry:ui", registryDependencies: ["plate-element"], files: ["registry/default/plate-ui/list-element.tsx"], @@ -557,6 +595,7 @@ export const Index: Record = { }, "list-toolbar-button": { name: "list-toolbar-button", + title: "undefined", type: "registry:ui", registryDependencies: ["toolbar"], files: ["registry/default/plate-ui/list-toolbar-button.tsx"], @@ -568,6 +607,7 @@ export const Index: Record = { }, "mark-toolbar-button": { name: "mark-toolbar-button", + title: "undefined", type: "registry:ui", registryDependencies: ["toolbar"], files: ["registry/default/plate-ui/mark-toolbar-button.tsx"], @@ -579,6 +619,7 @@ export const Index: Record = { }, "media-embed-element": { name: "media-embed-element", + title: "undefined", type: "registry:ui", registryDependencies: ["media-popover","caption","resizable","plate-element"], files: ["registry/default/plate-ui/media-embed-element.tsx"], @@ -590,6 +631,7 @@ export const Index: Record = { }, "media-popover": { name: "media-popover", + title: "undefined", type: "registry:ui", registryDependencies: ["button","input","popover","separator"], files: ["registry/default/plate-ui/media-popover.tsx"], @@ -601,6 +643,7 @@ export const Index: Record = { }, "media-toolbar-button": { name: "media-toolbar-button", + title: "undefined", type: "registry:ui", registryDependencies: ["toolbar"], files: ["registry/default/plate-ui/media-toolbar-button.tsx"], @@ -612,6 +655,7 @@ export const Index: Record = { }, "mention-element": { name: "mention-element", + title: "undefined", type: "registry:ui", registryDependencies: ["plate-element","use-mounted"], files: ["registry/default/plate-ui/mention-element.tsx"], @@ -623,6 +667,7 @@ export const Index: Record = { }, "mention-input-element": { name: "mention-input-element", + title: "undefined", type: "registry:ui", registryDependencies: ["inline-combobox","plate-element"], files: ["registry/default/plate-ui/mention-input-element.tsx"], @@ -634,6 +679,7 @@ export const Index: Record = { }, "mode-dropdown-menu": { name: "mode-dropdown-menu", + title: "undefined", type: "registry:ui", registryDependencies: ["dropdown-menu","toolbar"], files: ["registry/default/plate-ui/mode-dropdown-menu.tsx"], @@ -645,6 +691,7 @@ export const Index: Record = { }, "more-dropdown-menu": { name: "more-dropdown-menu", + title: "undefined", type: "registry:ui", registryDependencies: ["dropdown-menu","toolbar"], files: ["registry/default/plate-ui/more-dropdown-menu.tsx"], @@ -656,6 +703,7 @@ export const Index: Record = { }, "outdent-toolbar-button": { name: "outdent-toolbar-button", + title: "undefined", type: "registry:ui", registryDependencies: ["toolbar"], files: ["registry/default/plate-ui/outdent-toolbar-button.tsx"], @@ -667,6 +715,7 @@ export const Index: Record = { }, "paragraph-element": { name: "paragraph-element", + title: "undefined", type: "registry:ui", registryDependencies: ["plate-element"], files: ["registry/default/plate-ui/paragraph-element.tsx"], @@ -678,6 +727,7 @@ export const Index: Record = { }, "placeholder": { name: "placeholder", + title: "undefined", type: "registry:ui", registryDependencies: ["paragraph-element"], files: ["registry/default/plate-ui/placeholder.tsx"], @@ -689,6 +739,7 @@ export const Index: Record = { }, "popover": { name: "popover", + title: "undefined", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/popover.tsx"], @@ -700,6 +751,7 @@ export const Index: Record = { }, "search-highlight-leaf": { name: "search-highlight-leaf", + title: "undefined", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/search-highlight-leaf.tsx"], @@ -711,6 +763,7 @@ export const Index: Record = { }, "separator": { name: "separator", + title: "undefined", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/separator.tsx"], @@ -722,6 +775,7 @@ export const Index: Record = { }, "slash-input-element": { name: "slash-input-element", + title: "undefined", type: "registry:ui", registryDependencies: ["inline-combobox","plate-element"], files: ["registry/default/plate-ui/slash-input-element.tsx"], @@ -733,6 +787,7 @@ export const Index: Record = { }, "table-cell-element": { name: "table-cell-element", + title: "undefined", type: "registry:ui", registryDependencies: ["resizable","plate-element"], files: ["registry/default/plate-ui/table-cell-element.tsx"], @@ -744,6 +799,7 @@ export const Index: Record = { }, "table-dropdown-menu": { name: "table-dropdown-menu", + title: "undefined", type: "registry:ui", registryDependencies: ["dropdown-menu","toolbar"], files: ["registry/default/plate-ui/table-dropdown-menu.tsx"], @@ -755,6 +811,7 @@ export const Index: Record = { }, "table-element": { name: "table-element", + title: "undefined", type: "registry:ui", registryDependencies: ["dropdown-menu","plate-element"], files: ["registry/default/plate-ui/table-element.tsx"], @@ -766,6 +823,7 @@ export const Index: Record = { }, "table-row-element": { name: "table-row-element", + title: "undefined", type: "registry:ui", registryDependencies: ["plate-element"], files: ["registry/default/plate-ui/table-row-element.tsx"], @@ -777,6 +835,7 @@ export const Index: Record = { }, "todo-list-element": { name: "todo-list-element", + title: "undefined", type: "registry:ui", registryDependencies: ["checkbox","plate-element"], files: ["registry/default/plate-ui/todo-list-element.tsx"], @@ -788,6 +847,7 @@ export const Index: Record = { }, "toggle-element": { name: "toggle-element", + title: "undefined", type: "registry:ui", registryDependencies: ["plate-element"], files: ["registry/default/plate-ui/toggle-element.tsx"], @@ -799,6 +859,7 @@ export const Index: Record = { }, "toggle-toolbar-button": { name: "toggle-toolbar-button", + title: "undefined", type: "registry:ui", registryDependencies: ["toolbar"], files: ["registry/default/plate-ui/toggle-toolbar-button.tsx"], @@ -810,6 +871,7 @@ export const Index: Record = { }, "toolbar": { name: "toolbar", + title: "undefined", type: "registry:ui", registryDependencies: ["tooltip","separator"], files: ["registry/default/plate-ui/toolbar.tsx"], @@ -821,6 +883,7 @@ export const Index: Record = { }, "tooltip": { name: "tooltip", + title: "undefined", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/tooltip.tsx"], @@ -832,6 +895,7 @@ export const Index: Record = { }, "turn-into-dropdown-menu": { name: "turn-into-dropdown-menu", + title: "undefined", type: "registry:ui", registryDependencies: ["dropdown-menu","toolbar"], files: ["registry/default/plate-ui/turn-into-dropdown-menu.tsx"], @@ -843,6 +907,7 @@ export const Index: Record = { }, "resizable": { name: "resizable", + title: "undefined", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/resizable.tsx"], @@ -854,6 +919,7 @@ export const Index: Record = { }, "editor-default": { name: "editor-default", + title: "undefined", type: "registry:example", registryDependencies: [], files: ["registry/default/example/editor-default.tsx"], @@ -865,6 +931,7 @@ export const Index: Record = { }, "editor-disabled": { name: "editor-disabled", + title: "undefined", type: "registry:example", registryDependencies: [], files: ["registry/default/example/editor-disabled.tsx"], @@ -876,6 +943,7 @@ export const Index: Record = { }, "editor-ghost": { name: "editor-ghost", + title: "undefined", type: "registry:example", registryDependencies: [], files: ["registry/default/example/editor-ghost.tsx"], @@ -887,6 +955,7 @@ export const Index: Record = { }, "editor-label": { name: "editor-label", + title: "undefined", type: "registry:example", registryDependencies: [], files: ["registry/default/example/editor-label.tsx"], @@ -898,6 +967,7 @@ export const Index: Record = { }, "editor-text": { name: "editor-text", + title: "undefined", type: "registry:example", registryDependencies: [], files: ["registry/default/example/editor-text.tsx"], @@ -909,6 +979,7 @@ export const Index: Record = { }, "editor-button": { name: "editor-button", + title: "undefined", type: "registry:example", registryDependencies: [], files: ["registry/default/example/editor-button.tsx"], @@ -920,6 +991,7 @@ export const Index: Record = { }, "editor-form": { name: "editor-form", + title: "undefined", type: "registry:example", registryDependencies: [], files: ["registry/default/example/editor-form.tsx"], @@ -931,6 +1003,7 @@ export const Index: Record = { }, "basic-editor-default-demo": { name: "basic-editor-default-demo", + title: "undefined", type: "registry:example", registryDependencies: [], files: ["registry/default/example/basic-editor-default-demo.tsx"], @@ -942,6 +1015,7 @@ export const Index: Record = { }, "controlled-demo": { name: "controlled-demo", + title: "undefined", type: "registry:example", registryDependencies: [], files: ["registry/default/example/controlled-demo.tsx"], @@ -953,6 +1027,7 @@ export const Index: Record = { }, "basic-editor-styling-demo": { name: "basic-editor-styling-demo", + title: "undefined", type: "registry:example", registryDependencies: [], files: ["registry/default/example/basic-editor-styling-demo.tsx"], @@ -964,6 +1039,7 @@ export const Index: Record = { }, "basic-editor-handler-demo": { name: "basic-editor-handler-demo", + title: "undefined", type: "registry:example", registryDependencies: [], files: ["registry/default/example/basic-editor-handler-demo.tsx"], @@ -975,6 +1051,7 @@ export const Index: Record = { }, "basic-editor-value-demo": { name: "basic-editor-value-demo", + title: "undefined", type: "registry:example", registryDependencies: [], files: ["registry/default/example/basic-editor-value-demo.tsx"], @@ -986,6 +1063,7 @@ export const Index: Record = { }, "basic-plugins-components-demo": { name: "basic-plugins-components-demo", + title: "undefined", type: "registry:example", registryDependencies: [], files: ["registry/default/example/basic-plugins-components-demo.tsx"], @@ -997,6 +1075,7 @@ export const Index: Record = { }, "basic-plugins-default-demo": { name: "basic-plugins-default-demo", + title: "undefined", type: "registry:example", registryDependencies: [], files: ["registry/default/example/basic-plugins-default-demo.tsx"], @@ -1006,19 +1085,9 @@ export const Index: Record = { subcategory: "undefined", chunks: [] }, - "cloud-demo": { - name: "cloud-demo", - type: "registry:example", - registryDependencies: [], - files: ["registry/default/example/cloud-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/cloud-demo.tsx")), - source: "", - category: "undefined", - subcategory: "undefined", - chunks: [] - }, "editable-voids-demo": { name: "editable-voids-demo", + title: "undefined", type: "registry:example", registryDependencies: [], files: ["registry/default/example/editable-voids-demo.tsx"], @@ -1030,6 +1099,7 @@ export const Index: Record = { }, "find-replace-demo": { name: "find-replace-demo", + title: "undefined", type: "registry:example", registryDependencies: [], files: ["registry/default/example/find-replace-demo.tsx"], @@ -1041,6 +1111,7 @@ export const Index: Record = { }, "hundreds-blocks-demo": { name: "hundreds-blocks-demo", + title: "undefined", type: "registry:example", registryDependencies: [], files: ["registry/default/example/hundreds-blocks-demo.tsx"], @@ -1052,6 +1123,7 @@ export const Index: Record = { }, "hundreds-editors-demo": { name: "hundreds-editors-demo", + title: "undefined", type: "registry:example", registryDependencies: [], files: ["registry/default/example/hundreds-editors-demo.tsx"], @@ -1063,6 +1135,7 @@ export const Index: Record = { }, "iframe-demo": { name: "iframe-demo", + title: "undefined", type: "registry:example", registryDependencies: [], files: ["registry/default/example/iframe-demo.tsx"], @@ -1074,6 +1147,7 @@ export const Index: Record = { }, "mode-toggle": { name: "mode-toggle", + title: "undefined", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/mode-toggle.tsx"], @@ -1085,6 +1159,7 @@ export const Index: Record = { }, "multiple-editors-demo": { name: "multiple-editors-demo", + title: "undefined", type: "registry:example", registryDependencies: [], files: ["registry/default/example/multiple-editors-demo.tsx"], @@ -1096,6 +1171,7 @@ export const Index: Record = { }, "version-history-demo": { name: "version-history-demo", + title: "undefined", type: "registry:example", registryDependencies: [], files: ["registry/default/example/version-history-demo.tsx"], @@ -1107,6 +1183,7 @@ export const Index: Record = { }, "playground-demo": { name: "playground-demo", + title: "undefined", type: "registry:example", registryDependencies: [], files: ["registry/default/example/playground-demo.tsx"], @@ -1118,6 +1195,7 @@ export const Index: Record = { }, "preview-md-demo": { name: "preview-md-demo", + title: "undefined", type: "registry:example", registryDependencies: [], files: ["registry/default/example/preview-md-demo.tsx"], @@ -1129,6 +1207,7 @@ export const Index: Record = { }, "plate-types": { name: "plate-types", + title: "undefined", type: "registry:lib", registryDependencies: undefined, files: ["registry/default/lib/plate-types.ts"], @@ -1140,6 +1219,7 @@ export const Index: Record = { }, "utils": { name: "utils", + title: "undefined", type: "registry:lib", registryDependencies: undefined, files: ["registry/default/lib/utils.ts"], @@ -1151,6 +1231,7 @@ export const Index: Record = { }, "use-debounce": { name: "use-debounce", + title: "undefined", type: "registry:hook", registryDependencies: undefined, files: ["registry/default/hooks/use-debounce.ts"], @@ -1162,6 +1243,7 @@ export const Index: Record = { }, "use-mounted": { name: "use-mounted", + title: "undefined", type: "registry:hook", registryDependencies: undefined, files: ["registry/default/hooks/use-mounted.ts"], diff --git a/apps/www/src/components/block-preview.tsx b/apps/www/src/components/block-preview.tsx index cb50066238..76f33efa9b 100644 --- a/apps/www/src/components/block-preview.tsx +++ b/apps/www/src/components/block-preview.tsx @@ -23,6 +23,7 @@ const block: any = { name: 'playground', }; +// TODO: sync export function BlockPreview({ children, className, diff --git a/apps/www/src/components/block-toolbar.tsx b/apps/www/src/components/block-toolbar.tsx index ff76e33fcb..8fc1cfc4a0 100644 --- a/apps/www/src/components/block-toolbar.tsx +++ b/apps/www/src/components/block-toolbar.tsx @@ -17,6 +17,7 @@ import { BlockCopyButton } from './block-copy-button'; import { Label } from './ui/label'; import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group'; +// TODO: sync export function BlockToolbar({ block, fullScreen, diff --git a/apps/www/src/components/code-block-wrapper.tsx b/apps/www/src/components/code-block-wrapper.tsx index 5c2afee7cf..235f0aa764 100644 --- a/apps/www/src/components/code-block-wrapper.tsx +++ b/apps/www/src/components/code-block-wrapper.tsx @@ -26,6 +26,10 @@ export function CodeBlockWrapper({ }: CodeBlockProps) { const [isOpened, setIsOpened] = React.useState(open); + React.useEffect(() => { + setIsOpened(open); + }, [open]); + return (
diff --git a/apps/www/src/components/component-preview.tsx b/apps/www/src/components/component-preview.tsx index 9dc1716301..b29e40f8ce 100644 --- a/apps/www/src/components/component-preview.tsx +++ b/apps/www/src/components/component-preview.tsx @@ -21,6 +21,7 @@ interface ComponentPreviewProps extends React.HTMLAttributes { extractedClassNames?: string; hideCode?: boolean; padding?: 'md'; + type?: 'block' | 'component' | 'example'; } export function ComponentPreview({ @@ -33,6 +34,7 @@ export function ComponentPreview({ hideCode = false, name, padding, + type, ...props }: ComponentPreviewProps) { const [config] = useConfig(); @@ -69,6 +71,19 @@ export function ComponentPreview({ } }, [Code]); + // if (type === 'block') { + // return ( + //
+ //
+ // \n );\n}\n\nexport default function IframeDemo() {\n const editor = usePlateEditor({\n override: { components: PlateUI },\n plugins: [BasicElementsPlugin, BasicMarksPlugin, EditableVoidPlugin],\n value: iframeValue,\n });\n\n return (\n \n );\n}\n", + "path": "example/iframe-demo.tsx", + "target": "components/iframe-demo.tsx", + "type": "registry:example" + } + ], + "name": "iframe-demo", + "registryDependencies": [], + "type": "registry:example" +} \ 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 251cc06fa7..86a6f71b29 100644 --- a/apps/www/public/r/styles/default/image-element.json +++ b/apps/www/public/r/styles/default/image-element.json @@ -6,7 +6,7 @@ { "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": "", + "target": "components/plate-ui/image-element.tsx", "type": "registry:ui" } ], diff --git a/apps/www/public/r/styles/default/indent-list-toolbar-button.json b/apps/www/public/r/styles/default/indent-list-toolbar-button.json index 23b6684f0b..b19a93df96 100644 --- a/apps/www/public/r/styles/default/indent-list-toolbar-button.json +++ b/apps/www/public/r/styles/default/indent-list-toolbar-button.json @@ -6,7 +6,7 @@ { "content": "import React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { ListStyleType } from '@udecode/plate-indent-list';\nimport {\n useIndentListToolbarButton,\n useIndentListToolbarButtonState,\n} from '@udecode/plate-indent-list/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const IndentListToolbarButton = withRef<\n typeof ToolbarButton,\n {\n nodeType?: ListStyleType;\n }\n>(({ nodeType = ListStyleType.Disc }, ref) => {\n const state = useIndentListToolbarButtonState({ nodeType });\n const { props } = useIndentListToolbarButton(state);\n\n return (\n \n {nodeType === ListStyleType.Disc ? : }\n \n );\n});\n", "path": "plate-ui/indent-list-toolbar-button.tsx", - "target": "", + "target": "components/plate-ui/indent-list-toolbar-button.tsx", "type": "registry:ui" } ], diff --git a/apps/www/public/r/styles/default/indent-todo-marker-component.json b/apps/www/public/r/styles/default/indent-todo-marker-component.json index 1e59cbea8b..dbc8fd0044 100644 --- a/apps/www/public/r/styles/default/indent-todo-marker-component.json +++ b/apps/www/public/r/styles/default/indent-todo-marker-component.json @@ -6,7 +6,7 @@ { "content": "import type { PlateRenderElementProps } from '@udecode/plate-common/react';\n\nimport { cn } from '@udecode/cn';\nimport {\n useIndentTodoListElement,\n useIndentTodoListElementState,\n} from '@udecode/plate-indent-list/react';\n\nimport { Checkbox } from './checkbox';\n\nexport const TodoMarker = ({\n element,\n}: Omit) => {\n const state = useIndentTodoListElementState({ element });\n const { checkboxProps } = useIndentTodoListElement(state);\n\n return (\n
\n \n
\n );\n};\n\nexport const TodoLi = (props: PlateRenderElementProps) => {\n const { children, element } = props;\n\n return (\n \n {children}\n \n );\n};\n", "path": "plate-ui/indent-todo-marker-component.tsx", - "target": "", + "target": "components/plate-ui/indent-todo-marker-component.tsx", "type": "registry:ui" } ], diff --git a/apps/www/public/r/styles/default/indent-todo-toolbar-button.json b/apps/www/public/r/styles/default/indent-todo-toolbar-button.json index a8e9da877a..5ed5c0d2b6 100644 --- a/apps/www/public/r/styles/default/indent-todo-toolbar-button.json +++ b/apps/www/public/r/styles/default/indent-todo-toolbar-button.json @@ -6,7 +6,7 @@ { "content": "import { withRef } from '@udecode/cn';\nimport {\n useIndentTodoToolBarButton,\n useIndentTodoToolBarButtonState,\n} from '@udecode/plate-indent-list/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const IndentTodoToolbarButton = withRef(\n (rest, ref) => {\n const state = useIndentTodoToolBarButtonState({ nodeType: 'todo' });\n const { props } = useIndentTodoToolBarButton(state);\n\n return (\n \n \n \n );\n }\n);\n", "path": "plate-ui/indent-todo-toolbar-button.tsx", - "target": "", + "target": "components/plate-ui/indent-todo-toolbar-button.tsx", "type": "registry:ui" } ], diff --git a/apps/www/public/r/styles/default/indent-toolbar-button.json b/apps/www/public/r/styles/default/indent-toolbar-button.json index c2ad89f8f7..1ba607f593 100644 --- a/apps/www/public/r/styles/default/indent-toolbar-button.json +++ b/apps/www/public/r/styles/default/indent-toolbar-button.json @@ -6,7 +6,7 @@ { "content": "import React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { useIndentButton } from '@udecode/plate-indent/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const IndentToolbarButton = withRef(\n (rest, ref) => {\n const { props } = useIndentButton();\n\n return (\n \n \n \n );\n }\n);\n", "path": "plate-ui/indent-toolbar-button.tsx", - "target": "", + "target": "components/plate-ui/indent-toolbar-button.tsx", "type": "registry:ui" } ], diff --git a/apps/www/public/r/styles/default/inline-combobox.json b/apps/www/public/r/styles/default/inline-combobox.json index bc19d2a5cd..e75ce0a50d 100644 --- a/apps/www/public/r/styles/default/inline-combobox.json +++ b/apps/www/public/r/styles/default/inline-combobox.json @@ -7,7 +7,7 @@ { "content": "import React, {\n type HTMLAttributes,\n type ReactNode,\n type RefObject,\n createContext,\n forwardRef,\n startTransition,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n} from 'react';\n\nimport type { PointRef } from 'slate';\n\nimport {\n type ComboboxItemProps,\n Combobox,\n ComboboxItem,\n ComboboxPopover,\n ComboboxProvider,\n Portal,\n useComboboxContext,\n useComboboxStore,\n} from '@ariakit/react';\nimport { cn } from '@udecode/cn';\nimport { filterWords } from '@udecode/plate-combobox';\nimport {\n type UseComboboxInputResult,\n useComboboxInput,\n useHTMLInputCursorState,\n} from '@udecode/plate-combobox/react';\nimport {\n type TElement,\n createPointRef,\n getPointBefore,\n insertText,\n moveSelection,\n} from '@udecode/plate-common';\nimport {\n findNodePath,\n useComposedRef,\n useEditorRef,\n} from '@udecode/plate-common/react';\nimport { cva } from 'class-variance-authority';\n\ntype FilterFn = (\n item: { value: string; keywords?: string[] },\n search: string\n) => boolean;\n\ninterface InlineComboboxContextValue {\n filter: FilterFn | false;\n inputProps: UseComboboxInputResult['props'];\n inputRef: RefObject;\n removeInput: UseComboboxInputResult['removeInput'];\n setHasEmpty: (hasEmpty: boolean) => void;\n showTrigger: boolean;\n trigger: string;\n}\n\nconst InlineComboboxContext = createContext(\n null as any\n);\n\nexport const defaultFilter: FilterFn = ({ keywords = [], value }, search) =>\n [value, ...keywords].some((keyword) => filterWords(keyword, search));\n\ninterface InlineComboboxProps {\n children: ReactNode;\n element: TElement;\n trigger: string;\n filter?: FilterFn | false;\n hideWhenNoValue?: boolean;\n setValue?: (value: string) => void;\n showTrigger?: boolean;\n value?: string;\n}\n\nconst InlineCombobox = ({\n children,\n element,\n filter = defaultFilter,\n hideWhenNoValue = false,\n setValue: setValueProp,\n showTrigger = true,\n trigger,\n value: valueProp,\n}: InlineComboboxProps) => {\n const editor = useEditorRef();\n const inputRef = React.useRef(null);\n const cursorState = useHTMLInputCursorState(inputRef);\n\n const [valueState, setValueState] = useState('');\n const hasValueProp = valueProp !== undefined;\n const value = hasValueProp ? valueProp : valueState;\n\n const setValue = useCallback(\n (newValue: string) => {\n setValueProp?.(newValue);\n\n if (!hasValueProp) {\n setValueState(newValue);\n }\n },\n [setValueProp, hasValueProp]\n );\n\n /**\n * Track the point just before the input element so we know where to\n * insertText if the combobox closes due to a selection change.\n */\n const [insertPoint, setInsertPoint] = useState(null);\n\n useEffect(() => {\n const path = findNodePath(editor, element);\n\n if (!path) return;\n\n const point = getPointBefore(editor, path);\n\n if (!point) return;\n\n const pointRef = createPointRef(editor, point);\n setInsertPoint(pointRef);\n\n return () => {\n pointRef.unref();\n };\n }, [editor, element]);\n\n const { props: inputProps, removeInput } = useComboboxInput({\n cancelInputOnBlur: false,\n cursorState,\n ref: inputRef,\n onCancelInput: (cause) => {\n if (cause !== 'backspace') {\n insertText(editor, trigger + value, {\n at: insertPoint?.current ?? undefined,\n });\n }\n if (cause === 'arrowLeft' || cause === 'arrowRight') {\n moveSelection(editor, {\n distance: 1,\n reverse: cause === 'arrowLeft',\n });\n }\n },\n });\n\n const [hasEmpty, setHasEmpty] = useState(false);\n\n const contextValue: InlineComboboxContextValue = useMemo(\n () => ({\n filter,\n inputProps,\n inputRef,\n removeInput,\n setHasEmpty,\n showTrigger,\n trigger,\n }),\n [\n trigger,\n showTrigger,\n filter,\n inputRef,\n inputProps,\n removeInput,\n setHasEmpty,\n ]\n );\n\n const store = useComboboxStore({\n // open: ,\n setValue: (newValue) => startTransition(() => setValue(newValue)),\n });\n\n const items = store.useState('items');\n\n /**\n * If there is no active ID and the list of items changes, select the first\n * item.\n */\n useEffect(() => {\n if (!store.getState().activeId) {\n store.setActiveId(store.first());\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [items, store]);\n\n return (\n \n 0 || hasEmpty) &&\n (!hideWhenNoValue || value.length > 0)\n }\n store={store}\n >\n \n {children}\n \n \n \n );\n};\n\nconst InlineComboboxInput = forwardRef<\n HTMLInputElement,\n HTMLAttributes\n>(({ className, ...props }, propRef) => {\n const {\n inputProps,\n inputRef: contextRef,\n showTrigger,\n trigger,\n } = useContext(InlineComboboxContext);\n\n const store = useComboboxContext()!;\n const value = store.useState('value');\n\n const ref = useComposedRef(propRef, contextRef);\n\n /**\n * To create an auto-resizing input, we render a visually hidden span\n * containing the input value and position the input element on top of it.\n * This works well for all cases except when input exceeds the width of the\n * container.\n */\n\n return (\n <>\n {showTrigger && trigger}\n\n \n \n {value || '\\u200B'}\n \n\n \n \n \n );\n});\n\nInlineComboboxInput.displayName = 'InlineComboboxInput';\n\nconst InlineComboboxContent: typeof ComboboxPopover = ({\n className,\n ...props\n}) => {\n // Portal prevents CSS from leaking into popover\n return (\n \n \n \n );\n};\n\nconst comboboxItemVariants = cva(\n 'relative flex h-9 select-none items-center rounded-sm px-2 py-1.5 text-sm text-foreground outline-none',\n {\n defaultVariants: {\n interactive: true,\n },\n variants: {\n interactive: {\n false: '',\n true: 'cursor-pointer transition-colors hover:bg-accent hover:text-accent-foreground data-[active-item=true]:bg-accent data-[active-item=true]:text-accent-foreground',\n },\n },\n }\n);\n\nexport type InlineComboboxItemProps = {\n keywords?: string[];\n} & ComboboxItemProps &\n Required>;\n\nconst InlineComboboxItem = ({\n className,\n keywords,\n onClick,\n ...props\n}: InlineComboboxItemProps) => {\n const { value } = props;\n\n const { filter, removeInput } = useContext(InlineComboboxContext);\n\n const store = useComboboxContext()!;\n\n // Optimization: Do not subscribe to value if filter is false\n const search = filter && store.useState('value');\n\n const visible = useMemo(\n () => !filter || filter({ keywords, value }, search as string),\n [filter, value, keywords, search]\n );\n\n if (!visible) return null;\n\n return (\n {\n removeInput(true);\n onClick?.(event);\n }}\n {...props}\n />\n );\n};\n\nconst InlineComboboxEmpty = ({\n children,\n className,\n}: HTMLAttributes) => {\n const { setHasEmpty } = useContext(InlineComboboxContext);\n const store = useComboboxContext()!;\n const items = store.useState('items');\n\n useEffect(() => {\n setHasEmpty(true);\n\n return () => {\n setHasEmpty(false);\n };\n }, [setHasEmpty]);\n\n if (items.length > 0) return null;\n\n return (\n \n {children}\n
\n );\n};\n\nexport {\n InlineCombobox,\n InlineComboboxContent,\n InlineComboboxEmpty,\n InlineComboboxInput,\n InlineComboboxItem,\n};\n", "path": "plate-ui/inline-combobox.tsx", - "target": "", + "target": "components/plate-ui/inline-combobox.tsx", "type": "registry:ui" } ], diff --git a/apps/www/public/r/styles/default/input.json b/apps/www/public/r/styles/default/input.json index 6f913b7f35..72ee17464c 100644 --- a/apps/www/public/r/styles/default/input.json +++ b/apps/www/public/r/styles/default/input.json @@ -4,7 +4,7 @@ { "content": "import { withVariants } from '@udecode/cn';\nimport { cva } from 'class-variance-authority';\n\nexport const inputVariants = cva(\n 'flex w-full rounded-md bg-transparent text-sm file:border-0 file:bg-background file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',\n {\n defaultVariants: {\n h: 'md',\n variant: 'default',\n },\n variants: {\n h: {\n md: 'h-10 px-3 py-2',\n sm: 'h-9 px-3 py-2',\n },\n variant: {\n default:\n 'border border-input ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n ghost: 'border-none focus-visible:ring-transparent',\n },\n },\n }\n);\n\nexport const Input = withVariants('input', inputVariants, ['variant', 'h']);\n", "path": "plate-ui/input.tsx", - "target": "", + "target": "components/plate-ui/input.tsx", "type": "registry:ui" } ], diff --git a/apps/www/public/r/styles/default/insert-dropdown-menu.json b/apps/www/public/r/styles/default/insert-dropdown-menu.json index e4574215c1..ba930b672a 100644 --- a/apps/www/public/r/styles/default/insert-dropdown-menu.json +++ b/apps/www/public/r/styles/default/insert-dropdown-menu.json @@ -7,7 +7,7 @@ { "content": "import React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { insertEmptyElement } from '@udecode/plate-common';\nimport {\n ParagraphPlugin,\n focusEditor,\n useEditorRef,\n} from '@udecode/plate-common/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst items = [\n {\n items: [\n {\n description: 'Paragraph',\n icon: Icons.paragraph,\n label: 'Paragraph',\n value: ParagraphPlugin.key,\n },\n {\n description: 'Heading 1',\n icon: Icons.h1,\n label: 'Heading 1',\n value: HEADING_KEYS.h1,\n },\n {\n description: 'Heading 2',\n icon: Icons.h2,\n label: 'Heading 2',\n value: HEADING_KEYS.h2,\n },\n {\n description: 'Heading 3',\n icon: Icons.h3,\n label: 'Heading 3',\n value: HEADING_KEYS.h3,\n },\n {\n description: 'Quote (⌘+⇧+.)',\n icon: Icons.blockquote,\n label: 'Quote',\n value: BlockquotePlugin.key,\n },\n // {\n // value: TablePlugin.key,\n // label: 'Table',\n // description: 'Table',\n // icon: Icons.table,\n // },\n // {\n // value: 'ul',\n // label: 'Bulleted list',\n // description: 'Bulleted list',\n // icon: Icons.ul,\n // },\n // {\n // value: 'ol',\n // label: 'Numbered list',\n // description: 'Numbered list',\n // icon: Icons.ol,\n // },\n // {\n // value: HorizontalRulePlugin.key,\n // label: 'Divider',\n // description: 'Divider (---)',\n // icon: Icons.hr,\n // },\n ],\n label: 'Basic blocks',\n },\n // {\n // label: 'Media',\n // items: [\n // {\n // value: CodeBlockPlugin.key,\n // label: 'Code',\n // description: 'Code (```)',\n // icon: Icons.codeblock,\n // },\n // {\n // value: ImagePlugin.key,\n // label: 'Image',\n // description: 'Image',\n // icon: Icons.image,\n // },\n // {\n // value: MediaEmbedPlugin.key,\n // label: 'Embed',\n // description: 'Embed',\n // icon: Icons.embed,\n // },\n // {\n // value: ExcalidrawPlugin.key,\n // label: 'Excalidraw',\n // description: 'Excalidraw',\n // icon: Icons.excalidraw,\n // },\n // ],\n // },\n // {\n // label: 'Inline',\n // items: [\n // {\n // value: LinkPlugin.key,\n // label: 'Link',\n // description: 'Link',\n // icon: Icons.link,\n // },\n // ],\n // },\n];\n\nexport function InsertDropdownMenu(props: DropdownMenuProps) {\n const editor = useEditorRef();\n const openState = useOpenState();\n\n return (\n \n \n \n \n \n \n\n \n {items.map(({ items: nestedItems, label }, index) => (\n \n {index !== 0 && }\n\n {label}\n {nestedItems.map(\n ({ icon: Icon, label: itemLabel, value: type }) => (\n {\n switch (type) {\n // case CodeBlockPlugin.key: {\n // insertEmptyCodeBlock(editor);\n //\n // break;\n // }\n // case ImagePlugin.key: {\n // await insertMedia(editor, { type: ImagePlugin.key });\n //\n // break;\n // }\n // case MediaEmbedPlugin.key: {\n // await insertMedia(editor, {\n // type: MediaEmbedPlugin.key,\n // });\n //\n // break;\n // }\n // case 'ul':\n // case 'ol': {\n // insertEmptyElement(editor, ParagraphPlugin.key, {\n // select: true,\n // nextBlock: true,\n // });\n //\n // if (settingsStore.get.checkedId(IndentListPlugin.key)) {\n // toggleIndentList(editor, {\n // listStyleType: type === 'ul' ? 'disc' : 'decimal',\n // });\n // } else if (settingsStore.get.checkedId('list')) {\n // toggleList(editor, { type });\n // }\n //\n // break;\n // }\n // case TablePlugin.key: {\n // insertTable(editor);\n //\n // break;\n // }\n // case LinkPlugin.key: {\n // triggerFloatingLink(editor, { focused: true });\n //\n // break;\n // }\n default: {\n insertEmptyElement(editor, type, {\n nextBlock: true,\n select: true,\n });\n }\n }\n\n focusEditor(editor);\n }}\n >\n \n {itemLabel}\n \n )\n )}\n \n ))}\n \n \n );\n}\n", "path": "plate-ui/insert-dropdown-menu.tsx", - "target": "", + "target": "components/plate-ui/insert-dropdown-menu.tsx", "type": "registry:ui" } ], diff --git a/apps/www/public/r/styles/default/kbd-leaf.json b/apps/www/public/r/styles/default/kbd-leaf.json index c0591669d6..54dfd7cb10 100644 --- a/apps/www/public/r/styles/default/kbd-leaf.json +++ b/apps/www/public/r/styles/default/kbd-leaf.json @@ -6,7 +6,7 @@ { "content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateLeaf } from '@udecode/plate-common/react';\n\nexport const KbdLeaf = withRef(\n ({ children, className, ...props }, ref) => (\n \n {children}\n \n )\n);\n", "path": "plate-ui/kbd-leaf.tsx", - "target": "", + "target": "components/plate-ui/kbd-leaf.tsx", "type": "registry:ui" } ], diff --git a/apps/www/public/r/styles/default/line-height-dropdown-menu.json b/apps/www/public/r/styles/default/line-height-dropdown-menu.json index c5206046b0..7c1b6a5314 100644 --- a/apps/www/public/r/styles/default/line-height-dropdown-menu.json +++ b/apps/www/public/r/styles/default/line-height-dropdown-menu.json @@ -6,7 +6,7 @@ { "content": "import React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n useLineHeightDropdownMenu,\n useLineHeightDropdownMenuState,\n} from '@udecode/plate-line-height/react';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport function LineHeightDropdownMenu({ ...props }: DropdownMenuProps) {\n const openState = useOpenState();\n const state = useLineHeightDropdownMenuState();\n const { radioGroupProps } = useLineHeightDropdownMenu(state);\n\n return (\n \n \n \n \n \n \n\n \n \n {state.values.map((_value) => (\n \n {_value}\n \n ))}\n \n \n \n );\n}\n", "path": "plate-ui/line-height-dropdown-menu.tsx", - "target": "", + "target": "components/plate-ui/line-height-dropdown-menu.tsx", "type": "registry:ui" } ], diff --git a/apps/www/public/r/styles/default/link-element.json b/apps/www/public/r/styles/default/link-element.json index 8f9c8ee646..1a123a4268 100644 --- a/apps/www/public/r/styles/default/link-element.json +++ b/apps/www/public/r/styles/default/link-element.json @@ -6,7 +6,7 @@ { "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": "", + "target": "components/plate-ui/link-element.tsx", "type": "registry:ui" } ], diff --git a/apps/www/public/r/styles/default/link-floating-toolbar.json b/apps/www/public/r/styles/default/link-floating-toolbar.json index 8b9ff6eb19..ed0d9a74e0 100644 --- a/apps/www/public/r/styles/default/link-floating-toolbar.json +++ b/apps/www/public/r/styles/default/link-floating-toolbar.json @@ -6,7 +6,7 @@ { "content": "'use client';\n\nimport React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport { useFormInputProps } from '@udecode/plate-common/react';\nimport {\n type UseVirtualFloatingOptions,\n flip,\n offset,\n} from '@udecode/plate-floating';\nimport {\n type LinkFloatingToolbarState,\n FloatingLinkUrlInput,\n LinkOpenButton,\n useFloatingLinkEdit,\n useFloatingLinkEditState,\n useFloatingLinkInsert,\n useFloatingLinkInsertState,\n} from '@udecode/plate-link/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { buttonVariants } from './button';\nimport { inputVariants } from './input';\nimport { popoverVariants } from './popover';\nimport { Separator } from './separator';\n\nconst floatingOptions: UseVirtualFloatingOptions = {\n middleware: [\n offset(12),\n flip({\n fallbackPlacements: ['bottom-end', 'top-start', 'top-end'],\n padding: 12,\n }),\n ],\n placement: 'bottom-start',\n};\n\nexport interface LinkFloatingToolbarProps {\n state?: LinkFloatingToolbarState;\n}\n\nexport function LinkFloatingToolbar({ state }: LinkFloatingToolbarProps) {\n const insertState = useFloatingLinkInsertState({\n ...state,\n floatingOptions: {\n ...floatingOptions,\n ...state?.floatingOptions,\n },\n });\n const {\n hidden,\n props: insertProps,\n ref: insertRef,\n textInputProps,\n } = useFloatingLinkInsert(insertState);\n\n const editState = useFloatingLinkEditState({\n ...state,\n floatingOptions: {\n ...floatingOptions,\n ...state?.floatingOptions,\n },\n });\n const {\n editButtonProps,\n props: editProps,\n ref: editRef,\n unlinkButtonProps,\n } = useFloatingLinkEdit(editState);\n const inputProps = useFormInputProps({\n preventDefaultOnEnterKeydown: true,\n });\n\n if (hidden) return null;\n\n const input = (\n
\n
\n
\n \n
\n\n \n
\n \n
\n
\n \n
\n \n
\n
\n );\n\n const editContent = editState.isEditing ? (\n input\n ) : (\n
\n \n Edit link\n \n\n \n\n \n \n \n\n \n\n \n \n \n
\n );\n\n return (\n <>\n \n {input}\n
\n\n \n {editContent}\n
\n \n );\n}\n", "path": "plate-ui/link-floating-toolbar.tsx", - "target": "", + "target": "components/plate-ui/link-floating-toolbar.tsx", "type": "registry:ui" } ], diff --git a/apps/www/public/r/styles/default/link-toolbar-button.json b/apps/www/public/r/styles/default/link-toolbar-button.json index 8b5c675a42..b91f68a212 100644 --- a/apps/www/public/r/styles/default/link-toolbar-button.json +++ b/apps/www/public/r/styles/default/link-toolbar-button.json @@ -6,7 +6,7 @@ { "content": "import React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport {\n useLinkToolbarButton,\n useLinkToolbarButtonState,\n} from '@udecode/plate-link/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const LinkToolbarButton = withRef((rest, ref) => {\n const state = useLinkToolbarButtonState();\n const { props } = useLinkToolbarButton(state);\n\n return (\n \n \n \n );\n});\n", "path": "plate-ui/link-toolbar-button.tsx", - "target": "", + "target": "components/plate-ui/link-toolbar-button.tsx", "type": "registry:ui" } ], diff --git a/apps/www/public/r/styles/default/list-element.json b/apps/www/public/r/styles/default/list-element.json index d82a2ec45c..c3ee2ea445 100644 --- a/apps/www/public/r/styles/default/list-element.json +++ b/apps/www/public/r/styles/default/list-element.json @@ -6,7 +6,7 @@ { "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": "", + "target": "components/plate-ui/list-element.tsx", "type": "registry:ui" } ], diff --git a/apps/www/public/r/styles/default/list-toolbar-button.json b/apps/www/public/r/styles/default/list-toolbar-button.json index c7adf0008d..31bb3ce6f9 100644 --- a/apps/www/public/r/styles/default/list-toolbar-button.json +++ b/apps/www/public/r/styles/default/list-toolbar-button.json @@ -6,7 +6,7 @@ { "content": "import React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport {\n BulletedListPlugin,\n useListToolbarButton,\n useListToolbarButtonState,\n} from '@udecode/plate-list/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const ListToolbarButton = withRef<\n typeof ToolbarButton,\n {\n nodeType?: string;\n }\n>(({ nodeType = BulletedListPlugin.key, ...rest }, ref) => {\n const state = useListToolbarButtonState({ nodeType });\n const { props } = useListToolbarButton(state);\n\n return (\n \n {nodeType === BulletedListPlugin.key ? : }\n \n );\n});\n", "path": "plate-ui/list-toolbar-button.tsx", - "target": "", + "target": "components/plate-ui/list-toolbar-button.tsx", "type": "registry:ui" } ], diff --git a/apps/www/public/r/styles/default/mark-toolbar-button.json b/apps/www/public/r/styles/default/mark-toolbar-button.json index c5e554328d..ec2f175cc4 100644 --- a/apps/www/public/r/styles/default/mark-toolbar-button.json +++ b/apps/www/public/r/styles/default/mark-toolbar-button.json @@ -6,7 +6,7 @@ { "content": "'use client';\n\nimport React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport {\n useMarkToolbarButton,\n useMarkToolbarButtonState,\n} from '@udecode/plate-common/react';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const MarkToolbarButton = withRef<\n typeof ToolbarButton,\n {\n nodeType: string;\n clear?: string[] | string;\n }\n>(({ clear, nodeType, ...rest }, ref) => {\n const state = useMarkToolbarButtonState({ clear, nodeType });\n const { props } = useMarkToolbarButton(state);\n\n return ;\n});\n", "path": "plate-ui/mark-toolbar-button.tsx", - "target": "", + "target": "components/plate-ui/mark-toolbar-button.tsx", "type": "registry:ui" } ], 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 8cd87c466c..ad86494145 100644 --- a/apps/www/public/r/styles/default/media-embed-element.json +++ b/apps/www/public/r/styles/default/media-embed-element.json @@ -8,7 +8,7 @@ { "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": "", + "target": "components/plate-ui/media-embed-element.tsx", "type": "registry:ui" } ], diff --git a/apps/www/public/r/styles/default/media-popover.json b/apps/www/public/r/styles/default/media-popover.json index 41bfb7c992..e7218f66e5 100644 --- a/apps/www/public/r/styles/default/media-popover.json +++ b/apps/www/public/r/styles/default/media-popover.json @@ -6,7 +6,7 @@ { "content": "import React, { useEffect } from 'react';\n\nimport {\n type WithRequiredKey,\n isSelectionExpanded,\n} from '@udecode/plate-common';\nimport {\n useEditorSelector,\n useElement,\n useRemoveNodeButton,\n} from '@udecode/plate-common/react';\nimport {\n FloatingMedia as FloatingMediaPrimitive,\n floatingMediaActions,\n useFloatingMediaSelectors,\n} from '@udecode/plate-media/react';\nimport { useReadOnly, useSelected } from 'slate-react';\n\nimport { Icons } from '@/components/icons';\n\nimport { Button, buttonVariants } from './button';\nimport { CaptionButton } from './caption';\nimport { inputVariants } from './input';\nimport { Popover, PopoverAnchor, PopoverContent } from './popover';\nimport { Separator } from './separator';\n\nexport interface MediaPopoverProps {\n children: React.ReactNode;\n plugin: WithRequiredKey;\n}\n\nexport function MediaPopover({ children, plugin }: MediaPopoverProps) {\n const readOnly = useReadOnly();\n const selected = useSelected();\n\n const selectionCollapsed = useEditorSelector(\n (editor) => !isSelectionExpanded(editor),\n []\n );\n const isOpen = !readOnly && selected && selectionCollapsed;\n const isEditing = useFloatingMediaSelectors().isEditing();\n\n useEffect(() => {\n if (!isOpen && isEditing) {\n floatingMediaActions.isEditing(false);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isOpen]);\n\n const element = useElement();\n const { props: buttonProps } = useRemoveNodeButton({ element });\n\n if (readOnly) return <>{children};\n\n return (\n \n {children}\n\n e.preventDefault()}\n >\n {isEditing ? (\n
\n
\n
\n \n
\n\n \n
\n
\n ) : (\n
\n \n Edit link\n \n\n Caption\n\n \n\n \n
\n )}\n \n \n );\n}\n", "path": "plate-ui/media-popover.tsx", - "target": "", + "target": "components/plate-ui/media-popover.tsx", "type": "registry:ui" } ], diff --git a/apps/www/public/r/styles/default/media-toolbar-button.json b/apps/www/public/r/styles/default/media-toolbar-button.json index 32f49e291d..bfd7827586 100644 --- a/apps/www/public/r/styles/default/media-toolbar-button.json +++ b/apps/www/public/r/styles/default/media-toolbar-button.json @@ -6,7 +6,7 @@ { "content": "import React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport {\n type ImagePlugin,\n type MediaEmbedPlugin,\n useMediaToolbarButton,\n} from '@udecode/plate-media/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const MediaToolbarButton = withRef<\n typeof ToolbarButton,\n {\n nodeType?: typeof ImagePlugin.key | typeof MediaEmbedPlugin.key;\n }\n>(({ nodeType, ...rest }, ref) => {\n const { props } = useMediaToolbarButton({ nodeType });\n\n return (\n \n \n \n );\n});\n", "path": "plate-ui/media-toolbar-button.tsx", - "target": "", + "target": "components/plate-ui/media-toolbar-button.tsx", "type": "registry:ui" } ], diff --git a/apps/www/public/r/styles/default/mention-element.json b/apps/www/public/r/styles/default/mention-element.json index 5051c11cb6..e06fc07c7b 100644 --- a/apps/www/public/r/styles/default/mention-element.json +++ b/apps/www/public/r/styles/default/mention-element.json @@ -4,9 +4,9 @@ ], "files": [ { - "content": "import React from 'react';\n\nimport type { TMentionElement } from '@udecode/plate-mention';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { IS_APPLE, getHandler } from '@udecode/plate-common';\nimport { useElement } from '@udecode/plate-common/react';\nimport { useFocused, useSelected } from 'slate-react';\n\nimport { useMounted } from '@/registry/default/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", + "content": "import React from 'react';\n\nimport type { TMentionElement } from '@udecode/plate-mention';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { IS_APPLE, getHandler } from '@udecode/plate-common';\nimport { useElement } from '@udecode/plate-common/react';\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": "", + "target": "components/plate-ui/mention-element.tsx", "type": "registry:ui" } ], 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 92e3464db5..c60210648b 100644 --- a/apps/www/public/r/styles/default/mention-input-element.json +++ b/apps/www/public/r/styles/default/mention-input-element.json @@ -6,7 +6,7 @@ { "content": "import React, { useState } from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { getMentionOnSelectItem } from '@udecode/plate-mention';\n\nimport {\n InlineCombobox,\n InlineComboboxContent,\n InlineComboboxEmpty,\n InlineComboboxInput,\n InlineComboboxItem,\n} from './inline-combobox';\nimport { PlateElement } from './plate-element';\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": "", + "target": "components/plate-ui/mention-input-element.tsx", "type": "registry:ui" } ], diff --git a/apps/www/public/r/styles/default/mode-dropdown-menu.json b/apps/www/public/r/styles/default/mode-dropdown-menu.json index 4f581a36ec..736795610b 100644 --- a/apps/www/public/r/styles/default/mode-dropdown-menu.json +++ b/apps/www/public/r/styles/default/mode-dropdown-menu.json @@ -4,7 +4,7 @@ { "content": "import React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n focusEditor,\n useEditorReadOnly,\n useEditorRef,\n usePlateStore,\n} from '@udecode/plate-common/react';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport function ModeDropdownMenu(props: DropdownMenuProps) {\n const editor = useEditorRef();\n const setReadOnly = usePlateStore().set.readOnly();\n const readOnly = useEditorReadOnly();\n const openState = useOpenState();\n\n let value = 'editing';\n\n if (readOnly) value = 'viewing';\n\n const item: any = {\n editing: (\n <>\n \n Editing\n \n ),\n viewing: (\n <>\n \n Viewing\n \n ),\n };\n\n return (\n \n \n \n {item[value]}\n \n \n\n \n {\n if (newValue !== 'viewing') {\n setReadOnly(false);\n }\n if (newValue === 'viewing') {\n setReadOnly(true);\n\n return;\n }\n if (newValue === 'editing') {\n focusEditor(editor);\n\n return;\n }\n }}\n >\n \n {item.editing}\n \n\n \n {item.viewing}\n \n \n \n \n );\n}\n", "path": "plate-ui/mode-dropdown-menu.tsx", - "target": "", + "target": "components/plate-ui/mode-dropdown-menu.tsx", "type": "registry:ui" } ], diff --git a/apps/www/public/r/styles/default/mode-toggle.json b/apps/www/public/r/styles/default/mode-toggle.json new file mode 100644 index 0000000000..52956389a4 --- /dev/null +++ b/apps/www/public/r/styles/default/mode-toggle.json @@ -0,0 +1,12 @@ +{ + "files": [ + { + "content": "'use client';\n\nimport * as React from 'react';\n\nimport { useTheme } from 'next-themes';\n\nimport { Icons } from '@/components/icons';\nimport { Button } from '@/components/plate-ui/button';\n\nexport default function ModeToggle() {\n const { setTheme, theme } = useTheme();\n\n return (\n setTheme(theme === 'dark' ? 'light' : 'dark')}\n >\n {theme === 'dark' ? (\n \n ) : (\n \n )}\n Toggle theme\n \n );\n}\n", + "path": "example/mode-toggle.tsx", + "target": "components/mode-toggle.tsx", + "type": "registry:example" + } + ], + "name": "mode-toggle", + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/more-dropdown-menu.json b/apps/www/public/r/styles/default/more-dropdown-menu.json index 2d094658c8..5895af94da 100644 --- a/apps/www/public/r/styles/default/more-dropdown-menu.json +++ b/apps/www/public/r/styles/default/more-dropdown-menu.json @@ -6,7 +6,7 @@ { "content": "import React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n SubscriptPlugin,\n SuperscriptPlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { focusEditor, useEditorRef } from '@udecode/plate-common/react';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport function MoreDropdownMenu(props: DropdownMenuProps) {\n const editor = useEditorRef();\n const openState = useOpenState();\n\n return (\n \n \n \n \n \n \n\n \n {\n editor.tf.toggle.mark({\n key: SuperscriptPlugin.key,\n clear: [SubscriptPlugin.key, SuperscriptPlugin.key],\n });\n focusEditor(editor);\n }}\n >\n \n Superscript\n {/* (⌘+,) */}\n \n {\n editor.tf.toggle.mark({\n key: SubscriptPlugin.key,\n clear: [SuperscriptPlugin.key, SubscriptPlugin.key],\n });\n focusEditor(editor);\n }}\n >\n \n Subscript\n {/* (⌘+.) */}\n \n \n \n );\n}\n", "path": "plate-ui/more-dropdown-menu.tsx", - "target": "", + "target": "components/plate-ui/more-dropdown-menu.tsx", "type": "registry:ui" } ], diff --git a/apps/www/public/r/styles/default/multiple-editors-demo.json b/apps/www/public/r/styles/default/multiple-editors-demo.json new file mode 100644 index 0000000000..fe1f70768d --- /dev/null +++ b/apps/www/public/r/styles/default/multiple-editors-demo.json @@ -0,0 +1,13 @@ +{ + "files": [ + { + "content": "import React from 'react';\n\nimport { BasicElementsPlugin } from '@udecode/plate-basic-elements/react';\nimport { BasicMarksPlugin } from '@udecode/plate-basic-marks/react';\nimport { Plate, usePlateEditor } from '@udecode/plate-common/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { ImagePlugin } from '@udecode/plate-media/react';\nimport { SelectOnBackspacePlugin } from '@udecode/plate-select';\n\nimport { PlaygroundTurnIntoDropdownMenu } from '@/components/plate-ui/playground-turn-into-dropdown-menu';\nimport { PlateUI } from '@/plate/demo/plate-ui';\nimport { basicElementsValue } from '@/plate/demo/values/basicElementsValue';\nimport { basicMarksValue } from '@/plate/demo/values/basicMarksValue';\nimport { imageValue } from '@/plate/demo/values/mediaValue';\nimport { Editor } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { Separator } from '@/components/plate-ui/separator';\n\nexport default function MultipleEditorsDemo() {\n const editor = usePlateEditor({\n override: { components: PlateUI },\n plugins: [BasicElementsPlugin, BasicMarksPlugin],\n value: basicElementsValue,\n });\n\n const editorMarks = usePlateEditor({\n id: 'marks',\n override: { components: PlateUI },\n plugins: [BasicElementsPlugin, BasicMarksPlugin],\n value: basicMarksValue,\n });\n\n const editorImage = usePlateEditor({\n id: 'marks',\n override: { components: PlateUI },\n plugins: [\n BasicElementsPlugin,\n BasicMarksPlugin,\n ImagePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n ],\n value: imageValue,\n });\n\n return (\n \n \n \n \n \n \n\n
\n \n \n \n \n \n
\n \n \n \n );\n}\n", + "path": "example/multiple-editors-demo.tsx", + "target": "components/multiple-editors-demo.tsx", + "type": "registry:example" + } + ], + "name": "multiple-editors-demo", + "registryDependencies": [], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/outdent-toolbar-button.json b/apps/www/public/r/styles/default/outdent-toolbar-button.json index 1613701961..01bf3d8894 100644 --- a/apps/www/public/r/styles/default/outdent-toolbar-button.json +++ b/apps/www/public/r/styles/default/outdent-toolbar-button.json @@ -6,7 +6,7 @@ { "content": "import React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { useOutdentButton } from '@udecode/plate-indent/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const OutdentToolbarButton = withRef(\n (rest, ref) => {\n const { props } = useOutdentButton();\n\n return (\n \n \n \n );\n }\n);\n", "path": "plate-ui/outdent-toolbar-button.tsx", - "target": "", + "target": "components/plate-ui/outdent-toolbar-button.tsx", "type": "registry:ui" } ], diff --git a/apps/www/public/r/styles/default/paragraph-element.json b/apps/www/public/r/styles/default/paragraph-element.json index 0f796c8209..35b0587a2a 100644 --- a/apps/www/public/r/styles/default/paragraph-element.json +++ b/apps/www/public/r/styles/default/paragraph-element.json @@ -3,7 +3,7 @@ { "content": "import React from 'react';\n\nimport { 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": "", + "target": "components/plate-ui/paragraph-element.tsx", "type": "registry:ui" } ], diff --git a/apps/www/public/r/styles/default/placeholder.json b/apps/www/public/r/styles/default/placeholder.json index 7c6f98d460..19d5a90f78 100644 --- a/apps/www/public/r/styles/default/placeholder.json +++ b/apps/www/public/r/styles/default/placeholder.json @@ -6,7 +6,7 @@ { "content": "import React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport { ParagraphPlugin } from '@udecode/plate-common/react';\nimport {\n type PlaceholderProps,\n createNodeHOC,\n createNodesHOC,\n usePlaceholderState,\n} from '@udecode/plate-common/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\n\nexport const Placeholder = (props: PlaceholderProps) => {\n const { children, nodeProps, placeholder } = props;\n\n const { enabled } = usePlaceholderState(props);\n\n return React.Children.map(children, (child) => {\n return React.cloneElement(child, {\n className: child.props.className,\n nodeProps: {\n ...nodeProps,\n className: cn(\n enabled &&\n 'before:absolute before:cursor-text before:opacity-30 before:content-[attr(placeholder)]'\n ),\n placeholder,\n },\n });\n });\n};\n\nexport const withPlaceholder = createNodeHOC(Placeholder);\n\nexport const withPlaceholdersPrimitive = createNodesHOC(Placeholder);\n\nexport const withPlaceholders = (components: any) =>\n withPlaceholdersPrimitive(components, [\n {\n key: ParagraphPlugin.key,\n hideOnBlur: true,\n placeholder: 'Type a paragraph',\n query: {\n maxLevel: 1,\n },\n },\n {\n key: HEADING_KEYS.h1,\n hideOnBlur: false,\n placeholder: 'Untitled',\n },\n ]);\n", "path": "plate-ui/placeholder.tsx", - "target": "", + "target": "components/plate-ui/placeholder.tsx", "type": "registry:ui" } ], diff --git a/apps/www/public/r/styles/default/plate-element.json b/apps/www/public/r/styles/default/plate-element.json index 2d276ff66d..06d726ecd2 100644 --- a/apps/www/public/r/styles/default/plate-element.json +++ b/apps/www/public/r/styles/default/plate-element.json @@ -4,7 +4,7 @@ { "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": "", + "target": "components/plate-ui/plate-element.tsx", "type": "registry:ui" } ], diff --git a/apps/www/public/r/styles/default/plate-types.json b/apps/www/public/r/styles/default/plate-types.json index 728d50626b..588114433d 100644 --- a/apps/www/public/r/styles/default/plate-types.json +++ b/apps/www/public/r/styles/default/plate-types.json @@ -4,7 +4,7 @@ { "content": "import type React from 'react';\n\nimport type { usePlaygroundEditor } from '@/registry/default/example/playground-demo';\nimport type { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport type {\n CodeBlockPlugin,\n CodeLinePlugin,\n} from '@udecode/plate-code-block/react';\nimport type { TCommentText } from '@udecode/plate-comments';\nimport type { ElementOf, TElement, TText } from '@udecode/plate-common';\nimport type { TExcalidrawElement } from '@udecode/plate-excalidraw';\nimport type { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport type { HEADING_KEYS } from '@udecode/plate-heading';\nimport type { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport type { TLinkElement } from '@udecode/plate-link';\nimport type { LinkPlugin } from '@udecode/plate-link/react';\nimport type { TTodoListItemElement } from '@udecode/plate-list';\nimport type {\n BulletedListPlugin,\n ListItemPlugin,\n NumberedListPlugin,\n TodoListPlugin,\n} from '@udecode/plate-list/react';\nimport type { TImageElement, TMediaEmbedElement } from '@udecode/plate-media';\nimport type { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport type {\n TMentionElement,\n TMentionInputElement,\n} from '@udecode/plate-mention';\nimport type {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport type { TTableElement } from '@udecode/plate-table';\nimport type {\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport type { TToggleElement } from '@udecode/plate-toggle';\nimport type { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport {\n type ParagraphPlugin,\n useEditorRef,\n} from '@udecode/plate-common/react';\n\n/** Text */\n\nexport type EmptyText = {\n text: '';\n};\n\nexport type PlainText = {\n text: string;\n};\n\nexport interface RichText extends TText, TCommentText {\n backgroundColor?: React.CSSProperties['backgroundColor'];\n bold?: boolean;\n code?: boolean;\n color?: React.CSSProperties['color'];\n fontFamily?: React.CSSProperties['fontFamily'];\n fontSize?: React.CSSProperties['fontSize'];\n fontWeight?: React.CSSProperties['fontWeight'];\n italic?: boolean;\n kbd?: boolean;\n strikethrough?: boolean;\n subscript?: boolean;\n underline?: boolean;\n}\n\n/** Inline Elements */\n\nexport interface MyLinkElement extends TLinkElement {\n children: RichText[];\n type: typeof LinkPlugin.key;\n}\n\nexport interface MyMentionInputElement extends TMentionInputElement {\n children: [PlainText];\n type: typeof MentionInputPlugin.key;\n}\n\nexport interface MyMentionElement extends TMentionElement {\n children: [EmptyText];\n type: typeof MentionPlugin.key;\n}\n\nexport type MyInlineElement =\n | MyLinkElement\n | MyMentionElement\n | MyMentionInputElement;\n\nexport type MyInlineDescendant = MyInlineElement | RichText;\n\nexport type MyInlineChildren = MyInlineDescendant[];\n\n/** Block props */\n\nexport interface MyIndentProps {\n indent?: number;\n}\n\nexport interface MyIndentListProps extends MyIndentProps {\n listRestart?: number;\n listStart?: number;\n listStyleType?: string;\n}\n\nexport interface MyLineHeightProps {\n lineHeight?: React.CSSProperties['lineHeight'];\n}\n\nexport interface MyAlignProps {\n align?: React.CSSProperties['textAlign'];\n}\n\nexport interface MyBlockElement\n extends TElement,\n MyIndentListProps,\n MyLineHeightProps {\n id?: string;\n}\n\n/** Blocks */\n\nexport interface MyParagraphElement extends MyBlockElement {\n children: MyInlineChildren;\n type: typeof ParagraphPlugin.key;\n}\n\nexport interface MyH1Element extends MyBlockElement {\n children: MyInlineChildren;\n type: typeof HEADING_KEYS.h1;\n}\n\nexport interface MyH2Element extends MyBlockElement {\n children: MyInlineChildren;\n type: typeof HEADING_KEYS.h2;\n}\n\nexport interface MyH3Element extends MyBlockElement {\n children: MyInlineChildren;\n type: typeof HEADING_KEYS.h3;\n}\n\nexport interface MyH4Element extends MyBlockElement {\n children: MyInlineChildren;\n type: typeof HEADING_KEYS.h4;\n}\n\nexport interface MyH5Element extends MyBlockElement {\n children: MyInlineChildren;\n type: typeof HEADING_KEYS.h5;\n}\n\nexport interface MyH6Element extends MyBlockElement {\n children: MyInlineChildren;\n type: typeof HEADING_KEYS.h6;\n}\n\nexport interface MyBlockquoteElement extends MyBlockElement {\n children: MyInlineChildren;\n type: typeof BlockquotePlugin.key;\n}\n\nexport interface MyCodeBlockElement extends MyBlockElement {\n children: MyCodeLineElement[];\n type: typeof CodeBlockPlugin.key;\n}\n\nexport interface MyCodeLineElement extends TElement {\n children: PlainText[];\n type: typeof CodeLinePlugin.key;\n}\n\nexport interface MyTableElement extends TTableElement, MyBlockElement {\n children: MyTableRowElement[];\n type: typeof TablePlugin.key;\n}\n\nexport interface MyTableRowElement extends TElement {\n children: MyTableCellElement[];\n type: typeof TableRowPlugin.key;\n}\n\nexport interface MyTableCellElement extends TElement {\n children: MyNestableBlock[];\n type: typeof TableCellPlugin.key;\n}\n\nexport interface MyBulletedListElement extends TElement, MyBlockElement {\n children: MyListItemElement[];\n type: typeof BulletedListPlugin.key;\n}\n\nexport interface MyNumberedListElement extends TElement, MyBlockElement {\n children: MyListItemElement[];\n type: typeof NumberedListPlugin.key;\n}\n\nexport interface MyListItemElement extends TElement, MyBlockElement {\n children: MyInlineChildren;\n type: typeof ListItemPlugin.key;\n}\n\nexport interface MyTodoListElement\n extends TTodoListItemElement,\n MyBlockElement {\n children: MyInlineChildren;\n type: typeof TodoListPlugin.key;\n}\n\nexport interface MyToggleElement extends TToggleElement, MyBlockElement {\n children: MyInlineChildren;\n type: typeof TogglePlugin.key;\n}\n\nexport interface MyImageElement extends TImageElement, MyBlockElement {\n children: [EmptyText];\n type: typeof ImagePlugin.key;\n}\n\nexport interface MyMediaEmbedElement\n extends TMediaEmbedElement,\n MyBlockElement {\n children: [EmptyText];\n type: typeof MediaEmbedPlugin.key;\n}\n\nexport interface MyHrElement extends MyBlockElement {\n children: [EmptyText];\n type: typeof HorizontalRulePlugin.key;\n}\n\nexport interface MyExcalidrawElement\n extends TExcalidrawElement,\n MyBlockElement {\n children: [EmptyText];\n type: typeof ExcalidrawPlugin.key;\n}\n\nexport type MyNestableBlock = MyParagraphElement;\n\nexport type MyElement = ElementOf;\n\nexport type MyBlock = Exclude;\n\nexport type MyRootBlock =\n | MyBlockquoteElement\n | MyBulletedListElement\n | MyCodeBlockElement\n | MyExcalidrawElement\n | MyH1Element\n | MyH2Element\n | MyH3Element\n | MyH4Element\n | MyH5Element\n | MyH6Element\n | MyHrElement\n | MyImageElement\n | MyMediaEmbedElement\n | MyNumberedListElement\n | MyParagraphElement\n | MyTableElement\n | MyTodoListElement\n | MyToggleElement;\n\n/** Editor types */\n\nexport type MyValue = MyRootBlock[];\n\nexport type MyEditor = ReturnType;\n\nexport const useMyEditorRef = () => useEditorRef();\n", "path": "lib/plate-types.ts", - "target": "", + "target": "lib/plate-types.ts", "type": "registry:lib" } ], diff --git a/apps/www/public/r/styles/default/playground-demo.json b/apps/www/public/r/styles/default/playground-demo.json new file mode 100644 index 0000000000..8f4a70f721 --- /dev/null +++ b/apps/www/public/r/styles/default/playground-demo.json @@ -0,0 +1,13 @@ +{ + "files": [ + { + "content": "'use client';\n\nimport React, { useRef } from 'react';\nimport { DndProvider } from 'react-dnd';\nimport { HTML5Backend } from 'react-dnd-html5-backend';\n\nimport type { ValueId } from '@/config/customizer-plugins';\n\nimport { cn } from '@udecode/cn';\nimport { AlignPlugin } from '@udecode/plate-alignment/react';\nimport { AutoformatPlugin } from '@udecode/plate-autoformat/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { SingleLinePlugin } from '@udecode/plate-break/react';\nimport { CaptionPlugin } from '@udecode/plate-caption/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n ParagraphPlugin,\n Plate,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DndPlugin } from '@udecode/plate-dnd';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { IndentPlugin } from '@udecode/plate-indent/react';\nimport { IndentListPlugin } from '@udecode/plate-indent-list/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LineHeightPlugin } from '@udecode/plate-line-height/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ListPlugin, TodoListPlugin } from '@udecode/plate-list/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { MentionPlugin } from '@udecode/plate-mention/react';\nimport { NodeIdPlugin } from '@udecode/plate-node-id';\nimport { NormalizeTypesPlugin } from '@udecode/plate-normalizers';\nimport { PlaywrightPlugin } from '@udecode/plate-playwright';\nimport { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';\nimport { BlockSelectionPlugin } from '@udecode/plate-selection/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\nimport Prism from 'prismjs';\n\nimport { CheckPlugin } from '@/components/context/check-plugin';\nimport { settingsStore } from '@/components/context/settings-store';\nimport { PlaygroundFixedToolbarButtons } from '@/components/plate-ui/playground-fixed-toolbar-buttons';\nimport { PlaygroundFloatingToolbarButtons } from '@/components/plate-ui/playground-floating-toolbar-buttons';\nimport { getAutoformatOptions } from '@/lib/plate/demo/plugins/autoformatOptions';\nimport { createPlateUI } from '@/plate/create-plate-ui';\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { isEnabled } from '@/plate/demo/is-enabled';\nimport { DragOverCursorPlugin } from '@/plate/demo/plugins/DragOverCursorPlugin';\nimport { exitBreakPlugin } from '@/plate/demo/plugins/exitBreakPlugin';\nimport { resetBlockTypePlugin } from '@/plate/demo/plugins/resetBlockTypePlugin';\nimport { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';\nimport { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';\nimport { commentsData, usersData } from '@/plate/demo/values/commentsValue';\nimport { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\nimport { CursorOverlay } from '@/components/plate-ui/cursor-overlay';\nimport { Editor } from '@/components/plate-ui/editor';\nimport { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';\nimport { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';\nimport { ImagePreview } from '@/components/plate-ui/image-preview';\nimport {\n FireLiComponent,\n FireMarker,\n} from '@/components/plate-ui/indent-fire-marker-component';\nimport {\n TodoLi,\n TodoMarker,\n} from '@/components/plate-ui/indent-todo-marker-component';\nimport { LinkFloatingToolbar } from '@/components/plate-ui/link-floating-toolbar';\n\nimport { usePlaygroundEnabled } from './usePlaygroundEnabled';\n\nexport const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {\n const enabledPlugins = settingsStore.use.checkedPlugins();\n const overridePlugins = usePlaygroundEnabled(id);\n const autoformatOptions = getAutoformatOptions(id, enabledPlugins);\n\n const value = usePlaygroundValue(id);\n const key = settingsStore.use.version();\n\n const editorId = id || 'playground-' + key;\n\n const a = usePlateEditor(\n {\n id: editorId,\n override: {\n components: createPlateUI({\n draggable: isEnabled('dnd', id),\n placeholder: isEnabled('placeholder', id),\n }),\n plugins: overridePlugins,\n },\n plugins: [\n // Nodes\n HeadingPlugin,\n TocPlugin.configure({\n options: {\n isScroll: true,\n scrollContainerSelector: `#${scrollSelector}`,\n topOffset: 80,\n },\n }),\n BlockquotePlugin,\n CodeBlockPlugin.configure({\n options: {\n prism: Prism,\n },\n }),\n HorizontalRulePlugin,\n LinkPlugin.extend({\n render: { afterEditable: () => },\n }),\n ListPlugin,\n ImagePlugin.extend({\n render: { afterEditable: ImagePreview },\n }),\n MediaEmbedPlugin,\n CaptionPlugin.configure({\n options: {\n plugins: [ImagePlugin, MediaEmbedPlugin],\n },\n }),\n DatePlugin,\n MentionPlugin.configure({\n options: {\n triggerPreviousCharPattern: /^$|^[\\s\"']$/,\n },\n }),\n SlashPlugin,\n TablePlugin.configure({\n options: {\n enableMerging: id === 'tableMerge',\n },\n }),\n TodoListPlugin,\n TogglePlugin,\n ExcalidrawPlugin,\n\n // Marks\n BoldPlugin,\n ItalicPlugin,\n UnderlinePlugin,\n StrikethroughPlugin,\n CodePlugin,\n SubscriptPlugin,\n SuperscriptPlugin,\n FontColorPlugin,\n FontBackgroundColorPlugin,\n FontSizePlugin,\n HighlightPlugin,\n KbdPlugin,\n\n // Block Style\n AlignPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n MediaEmbedPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ImagePlugin.key,\n HEADING_KEYS.h6,\n ],\n },\n }),\n IndentPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n }),\n IndentListPlugin.extend({\n inject: {\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n BlockquotePlugin.key,\n CodeBlockPlugin.key,\n TogglePlugin.key,\n ],\n },\n options: {\n listStyleTypes: {\n fire: {\n liComponent: FireLiComponent,\n markerComponent: FireMarker,\n type: 'fire',\n },\n todo: {\n liComponent: TodoLi,\n markerComponent: TodoMarker,\n type: 'todo',\n },\n },\n },\n }),\n LineHeightPlugin.extend({\n inject: {\n nodeProps: {\n defaultNodeValue: 1.5,\n validNodeValues: [1, 1.2, 1.5, 2, 3],\n },\n targetPlugins: [\n ParagraphPlugin.key,\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n HEADING_KEYS.h6,\n ],\n },\n }),\n\n // Functionality\n AutoformatPlugin.configure({ options: autoformatOptions }),\n BlockSelectionPlugin.configure({\n enabled: !!scrollSelector,\n options: {\n areaOptions: {\n boundaries: `#${scrollSelector}`,\n container: `#${scrollSelector}`,\n selectables: [`#${scrollSelector} .slate-selectable`],\n selectionAreaClass: 'slate-selection-area',\n },\n enableContextMenu: false,\n },\n }),\n DndPlugin.configure({ options: { enableScroller: true } }),\n EmojiPlugin,\n exitBreakPlugin,\n NodeIdPlugin,\n NormalizeTypesPlugin.configure({\n options: {\n rules: [{ path: [0], strictType: HEADING_KEYS.h1 }],\n },\n }),\n resetBlockTypePlugin,\n SelectOnBackspacePlugin.configure({\n options: {\n query: {\n allow: [ImagePlugin.key, HorizontalRulePlugin.key],\n },\n },\n }),\n DeletePlugin,\n SingleLinePlugin,\n softBreakPlugin,\n tabbablePlugin,\n TrailingBlockPlugin.configure({\n options: { type: ParagraphPlugin.key },\n }),\n DragOverCursorPlugin,\n\n // Collaboration\n CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: usersData,\n },\n }),\n\n // Deserialization\n DocxPlugin,\n MarkdownPlugin,\n JuicePlugin,\n ColumnPlugin,\n\n // Testing\n PlaywrightPlugin.configure({\n enabled: process.env.NODE_ENV !== 'production',\n }),\n ],\n value: value,\n },\n []\n );\n\n return a;\n};\n\nexport default function PlaygroundDemo({\n id,\n className,\n scrollSelector,\n}: {\n id?: ValueId;\n className?: string;\n scrollSelector?: string;\n}) {\n const containerRef = useRef(null);\n const enabled = settingsStore.use.checkedComponents();\n\n const editor = usePlaygroundEditor(id, scrollSelector);\n\n return (\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n \n \n \n \n );\n}\n\nconst DemoIdContext = React.createContext(undefined);\n\nexport function DemoId({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) {\n return {children};\n}\n\nexport function useDemoId() {\n return React.useContext(DemoIdContext);\n}\n", + "path": "example/playground-demo.tsx", + "target": "components/playground-demo.tsx", + "type": "registry:example" + } + ], + "name": "playground-demo", + "registryDependencies": [], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/popover.json b/apps/www/public/r/styles/default/popover.json index 05f59cbf2f..b9e9e66200 100644 --- a/apps/www/public/r/styles/default/popover.json +++ b/apps/www/public/r/styles/default/popover.json @@ -6,7 +6,7 @@ { "content": "'use client';\n\nimport * as React from 'react';\n\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { cn, withRef } from '@udecode/cn';\nimport { cva } from 'class-variance-authority';\n\nexport const Popover = PopoverPrimitive.Root;\n\nexport const PopoverTrigger = PopoverPrimitive.Trigger;\n\nexport const PopoverAnchor = PopoverPrimitive.Anchor;\n\nexport const popoverVariants = cva(\n 'w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 print:hidden'\n);\n\nexport const PopoverContent = withRef(\n ({ align = 'center', className, sideOffset = 4, style, ...props }, ref) => (\n \n \n \n )\n);\n", "path": "plate-ui/popover.tsx", - "target": "", + "target": "components/plate-ui/popover.tsx", "type": "registry:ui" } ], diff --git a/apps/www/public/r/styles/default/preview-md-demo.json b/apps/www/public/r/styles/default/preview-md-demo.json new file mode 100644 index 0000000000..d8cc0da7d8 --- /dev/null +++ b/apps/www/public/r/styles/default/preview-md-demo.json @@ -0,0 +1,13 @@ +{ + "files": [ + { + "content": "import React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport { BasicElementsPlugin } from \"@udecode/plate-basic-elements/react\";\nimport { BasicMarksPlugin } from \"@udecode/plate-basic-marks/react\";\nimport {\n type Decorate,\n type TText, createSlatePlugin, isText\n} from \"@udecode/plate-common\";\nimport { type TRenderLeafProps, Plate , usePlateEditor } from \"@udecode/plate-common/react\";\nimport Prism from 'prismjs';\n\nimport { editableProps } from '@/plate/demo/editableProps';\nimport { PlateUI } from '@/plate/demo/plate-ui';\nimport { previewMdValue } from '@/plate/demo/values/previewMdValue';\nimport { Editor } from '@/components/plate-ui/editor';\n\nimport 'prismjs/components/prism-markdown.js';\n\n/**\n * Decorate texts with markdown preview.\n */\nconst decoratePreview: Decorate =\n ({entry: [node, path]}) => {\n const ranges: any[] = [];\n\n if (!isText(node)) {\n return ranges;\n }\n\n const getLength = (token: any) => {\n if (typeof token === 'string') {\n return token.length;\n }\n if (typeof token.content === 'string') {\n return token.content.length;\n }\n\n return token.content.reduce((l: any, t: any) => l + getLength(t), 0);\n };\n\n const tokens = Prism.tokenize(node.text, Prism.languages.markdown);\n let start = 0;\n\n for (const token of tokens) {\n const length = getLength(token);\n const end = start + length;\n\n if (typeof token !== 'string') {\n ranges.push({\n anchor: { offset: start, path },\n focus: { offset: end, path },\n [token.type]: true,\n });\n }\n\n start = end;\n }\n\n return ranges;\n };\n\nfunction PreviewLeaf({\n attributes,\n children,\n leaf,\n}: TRenderLeafProps<\n {\n blockquote?: boolean;\n bold?: boolean;\n code?: boolean;\n hr?: boolean;\n italic?: boolean;\n list?: boolean;\n title?: boolean;\n } & TText\n>) {\n const { blockquote, bold, code, hr, italic, list, title } = leaf;\n\n return (\n \n {children}\n \n );\n}\n\nconst _editableProps = {\n ...editableProps,\n renderLeaf: PreviewLeaf,\n};\n\nexport default function PreviewMdDemo() {\n const editor = usePlateEditor({\n override: { components: PlateUI },\n plugins: [BasicElementsPlugin, BasicMarksPlugin, createSlatePlugin({\n key: 'preview-md',\n decorate: decoratePreview,\n })],\n value: previewMdValue,\n })\n \n return (\n
\n \n \n \n
\n );\n}\n", + "path": "example/preview-md-demo.tsx", + "target": "components/preview-md-demo.tsx", + "type": "registry:example" + } + ], + "name": "preview-md-demo", + "registryDependencies": [], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/resizable.json b/apps/www/public/r/styles/default/resizable.json index bef4ba55a8..3e01313de6 100644 --- a/apps/www/public/r/styles/default/resizable.json +++ b/apps/www/public/r/styles/default/resizable.json @@ -6,7 +6,7 @@ { "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef, withVariants } from '@udecode/cn';\nimport {\n Resizable as ResizablePrimitive,\n ResizeHandle as ResizeHandlePrimitive,\n} from '@udecode/plate-resizable';\nimport { cva } from 'class-variance-authority';\n\nexport const mediaResizeHandleVariants = cva(\n cn(\n 'top-0 flex w-6 select-none flex-col justify-center',\n \"after:flex after:h-16 after:w-[3px] after:rounded-[6px] after:bg-ring after:opacity-0 after:content-['_'] group-hover:after:opacity-100\"\n ),\n {\n variants: {\n direction: {\n left: '-left-3 -ml-3 pl-3',\n right: '-right-3 -mr-3 items-end pr-3',\n },\n },\n }\n);\n\nconst resizeHandleVariants = cva(cn('absolute z-40'), {\n variants: {\n direction: {\n bottom: 'w-full cursor-row-resize',\n left: 'h-full cursor-col-resize',\n right: 'h-full cursor-col-resize',\n top: 'w-full cursor-row-resize',\n },\n },\n});\n\nconst ResizeHandleVariants = withVariants(\n ResizeHandlePrimitive,\n resizeHandleVariants,\n ['direction']\n);\n\nexport const ResizeHandle = withRef(\n (props, ref) => (\n \n )\n);\n\nconst resizableVariants = cva('', {\n variants: {\n align: {\n center: 'mx-auto',\n left: 'mr-auto',\n right: 'ml-auto',\n },\n },\n});\n\nexport const Resizable = withVariants(ResizablePrimitive, resizableVariants, [\n 'align',\n]);\n", "path": "plate-ui/resizable.tsx", - "target": "", + "target": "components/plate-ui/resizable.tsx", "type": "registry:ui" } ], diff --git a/apps/www/public/r/styles/default/search-highlight-leaf.json b/apps/www/public/r/styles/default/search-highlight-leaf.json index 27c4a5f165..95008718d6 100644 --- a/apps/www/public/r/styles/default/search-highlight-leaf.json +++ b/apps/www/public/r/styles/default/search-highlight-leaf.json @@ -6,7 +6,7 @@ { "content": "import { withCn } from '@udecode/cn';\nimport { PlateLeaf } from '@udecode/plate-common/react';\n\nexport const SearchHighlightLeaf = withCn(PlateLeaf, 'bg-yellow-100');\n", "path": "plate-ui/search-highlight-leaf.tsx", - "target": "", + "target": "components/plate-ui/search-highlight-leaf.tsx", "type": "registry:ui" } ], diff --git a/apps/www/public/r/styles/default/separator.json b/apps/www/public/r/styles/default/separator.json index cc5ff32e73..d230bcfed0 100644 --- a/apps/www/public/r/styles/default/separator.json +++ b/apps/www/public/r/styles/default/separator.json @@ -6,7 +6,7 @@ { "content": "'use client';\n\nimport * as SeparatorPrimitive from '@radix-ui/react-separator';\nimport { withProps, withVariants } from '@udecode/cn';\nimport { cva } from 'class-variance-authority';\n\nconst separatorVariants = cva('shrink-0 bg-border', {\n defaultVariants: {\n orientation: 'horizontal',\n },\n variants: {\n orientation: {\n horizontal: 'h-px w-full',\n vertical: 'h-full w-px',\n },\n },\n});\n\nexport const Separator = withVariants(\n withProps(SeparatorPrimitive.Root, {\n decorative: true,\n orientation: 'horizontal',\n }),\n separatorVariants\n);\n", "path": "plate-ui/separator.tsx", - "target": "", + "target": "components/plate-ui/separator.tsx", "type": "registry:ui" } ], 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 331ca91a7f..d3b8e0138c 100644 --- a/apps/www/public/r/styles/default/slash-input-element.json +++ b/apps/www/public/r/styles/default/slash-input-element.json @@ -7,7 +7,7 @@ { "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": "", + "target": "components/plate-ui/slash-input-element.tsx", "type": "registry:ui" } ], 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 f5e6565552..48301120b2 100644 --- a/apps/www/public/r/styles/default/table-cell-element.json +++ b/apps/www/public/r/styles/default/table-cell-element.json @@ -6,7 +6,7 @@ { "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": "", + "target": "components/plate-ui/table-cell-element.tsx", "type": "registry:ui" } ], diff --git a/apps/www/public/r/styles/default/table-dropdown-menu.json b/apps/www/public/r/styles/default/table-dropdown-menu.json index 785f1650b1..6a6ab79b06 100644 --- a/apps/www/public/r/styles/default/table-dropdown-menu.json +++ b/apps/www/public/r/styles/default/table-dropdown-menu.json @@ -6,7 +6,7 @@ { "content": "import React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { someNode } from '@udecode/plate-common';\nimport {\n focusEditor,\n useEditorPlugin,\n useEditorSelector,\n} from '@udecode/plate-common/react';\nimport { deleteTable, insertTableRow } from '@udecode/plate-table';\nimport {\n TablePlugin,\n deleteColumn,\n deleteRow,\n insertTable,\n} from '@udecode/plate-table/react';\n\nimport { Icons, iconVariants } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport function TableDropdownMenu(props: DropdownMenuProps) {\n const tableSelected = useEditorSelector(\n (editor) => someNode(editor, { match: { type: TablePlugin.key } }),\n []\n );\n\n const { editor, tf } = useEditorPlugin(TablePlugin);\n\n const openState = useOpenState();\n\n return (\n \n \n \n \n \n \n\n \n \n \n \n Table\n \n \n {\n insertTable(editor, {}, { select: true });\n focusEditor(editor);\n }}\n >\n \n Insert table\n \n {\n deleteTable(editor);\n focusEditor(editor);\n }}\n >\n \n Delete table\n \n \n \n\n \n \n \n Column\n \n \n {\n tf.insert.tableColumn();\n focusEditor(editor);\n }}\n >\n \n Insert column after\n \n {\n deleteColumn(editor);\n focusEditor(editor);\n }}\n >\n \n Delete column\n \n \n \n\n \n \n \n Row\n \n \n {\n insertTableRow(editor);\n focusEditor(editor);\n }}\n >\n \n Insert row after\n \n {\n deleteRow(editor);\n focusEditor(editor);\n }}\n >\n \n Delete row\n \n \n \n \n \n );\n}\n", "path": "plate-ui/table-dropdown-menu.tsx", - "target": "", + "target": "components/plate-ui/table-dropdown-menu.tsx", "type": "registry:ui" } ], diff --git a/apps/www/public/r/styles/default/table-element.json b/apps/www/public/r/styles/default/table-element.json index 4284ed0b9e..7427164d5c 100644 --- a/apps/www/public/r/styles/default/table-element.json +++ b/apps/www/public/r/styles/default/table-element.json @@ -6,7 +6,7 @@ { "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": "", + "target": "components/plate-ui/table-element.tsx", "type": "registry:ui" } ], 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 db11efadb8..5c5ef6d474 100644 --- a/apps/www/public/r/styles/default/table-row-element.json +++ b/apps/www/public/r/styles/default/table-row-element.json @@ -6,7 +6,7 @@ { "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": "", + "target": "components/plate-ui/table-row-element.tsx", "type": "registry:ui" } ], 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 6d075256e4..fdf30a39c8 100644 --- a/apps/www/public/r/styles/default/todo-list-element.json +++ b/apps/www/public/r/styles/default/todo-list-element.json @@ -6,7 +6,7 @@ { "content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n useTodoListElement,\n useTodoListElementState,\n} from '@udecode/plate-list/react';\n\nimport { Checkbox } from './checkbox';\nimport { PlateElement } from './plate-element';\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": "", + "target": "components/plate-ui/todo-list-element.tsx", "type": "registry:ui" } ], diff --git a/apps/www/public/r/styles/default/toggle-element.json b/apps/www/public/r/styles/default/toggle-element.json index 26d6334dd5..c2e65e89b4 100644 --- a/apps/www/public/r/styles/default/toggle-element.json +++ b/apps/www/public/r/styles/default/toggle-element.json @@ -6,7 +6,7 @@ { "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": "", + "target": "components/plate-ui/toggle-element.tsx", "type": "registry:ui" } ], diff --git a/apps/www/public/r/styles/default/toggle-toolbar-button.json b/apps/www/public/r/styles/default/toggle-toolbar-button.json index 511152b3e7..d5375efda6 100644 --- a/apps/www/public/r/styles/default/toggle-toolbar-button.json +++ b/apps/www/public/r/styles/default/toggle-toolbar-button.json @@ -6,7 +6,7 @@ { "content": "import React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport {\n useToggleToolbarButton,\n useToggleToolbarButtonState,\n} from '@udecode/plate-toggle/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const ToggleToolbarButton = withRef(\n (rest, ref) => {\n const state = useToggleToolbarButtonState();\n const { props } = useToggleToolbarButton(state);\n\n return (\n \n \n \n );\n }\n);\n", "path": "plate-ui/toggle-toolbar-button.tsx", - "target": "", + "target": "components/plate-ui/toggle-toolbar-button.tsx", "type": "registry:ui" } ], diff --git a/apps/www/public/r/styles/default/toolbar.json b/apps/www/public/r/styles/default/toolbar.json index 9197df6d92..6314b41734 100644 --- a/apps/www/public/r/styles/default/toolbar.json +++ b/apps/www/public/r/styles/default/toolbar.json @@ -6,7 +6,7 @@ { "content": "'use client';\n\nimport * as React from 'react';\n\nimport * as ToolbarPrimitive from '@radix-ui/react-toolbar';\nimport { cn, withCn, withRef, withVariants } from '@udecode/cn';\nimport { type VariantProps, cva } from 'class-variance-authority';\n\nimport { Icons } from '@/components/icons';\n\nimport { Separator } from './separator';\nimport { withTooltip } from './tooltip';\n\nexport const Toolbar = withCn(\n ToolbarPrimitive.Root,\n 'relative flex select-none items-center gap-1 bg-background'\n);\n\nexport const ToolbarToggleGroup = withCn(\n ToolbarPrimitive.ToolbarToggleGroup,\n 'flex items-center'\n);\n\nexport const ToolbarLink = withCn(\n ToolbarPrimitive.Link,\n 'font-medium underline underline-offset-4'\n);\n\nexport const ToolbarSeparator = withCn(\n ToolbarPrimitive.Separator,\n 'my-1 w-px shrink-0 bg-border'\n);\n\nconst toolbarButtonVariants = cva(\n cn(\n 'inline-flex items-center justify-center rounded-md text-sm font-medium text-foreground ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n '[&_svg:not([data-icon])]:size-5'\n ),\n {\n defaultVariants: {\n size: 'sm',\n variant: 'default',\n },\n variants: {\n size: {\n default: 'h-10 px-3',\n lg: 'h-11 px-5',\n sm: 'h-9 px-2',\n },\n variant: {\n default:\n 'bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground',\n outline:\n 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n },\n },\n }\n);\n\nconst ToolbarButton = withTooltip(\n // eslint-disable-next-line react/display-name\n React.forwardRef<\n React.ElementRef,\n {\n isDropdown?: boolean;\n pressed?: boolean;\n } & Omit<\n React.ComponentPropsWithoutRef,\n 'asChild' | 'value'\n > &\n VariantProps\n >(\n (\n { children, className, isDropdown, pressed, size, variant, ...props },\n ref\n ) => {\n return typeof pressed === 'boolean' ? (\n \n \n {isDropdown ? (\n <>\n
{children}
\n
\n \n
\n \n ) : (\n children\n )}\n \n \n ) : (\n \n {children}\n \n );\n }\n )\n);\nToolbarButton.displayName = 'ToolbarButton';\n\nexport { ToolbarButton };\n\nexport const ToolbarToggleItem = withVariants(\n ToolbarPrimitive.ToggleItem,\n toolbarButtonVariants,\n ['variant', 'size']\n);\n\nexport const ToolbarGroup = withRef<\n 'div',\n {\n noSeparator?: boolean;\n }\n>(({ children, className, noSeparator }, ref) => {\n const childArr = React.Children.map(children, (c) => c);\n\n if (!childArr || childArr.length === 0) return null;\n\n return (\n
\n {!noSeparator && (\n
\n \n
\n )}\n\n
{children}
\n
\n );\n});\n", "path": "plate-ui/toolbar.tsx", - "target": "", + "target": "components/plate-ui/toolbar.tsx", "type": "registry:ui" } ], diff --git a/apps/www/public/r/styles/default/tooltip.json b/apps/www/public/r/styles/default/tooltip.json index 357e4999fd..ce06a7d530 100644 --- a/apps/www/public/r/styles/default/tooltip.json +++ b/apps/www/public/r/styles/default/tooltip.json @@ -6,7 +6,7 @@ { "content": "'use client';\n\nimport React from 'react';\n\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport { withCn, withProps } from '@udecode/cn';\n\nexport const TooltipProvider = withProps(TooltipPrimitive.Provider, {\n delayDuration: 0,\n disableHoverableContent: true,\n skipDelayDuration: 0,\n});\n\nexport const Tooltip = TooltipPrimitive.Root;\n\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\n\nexport const TooltipPortal = TooltipPrimitive.Portal;\n\nexport const TooltipContent = withCn(\n withProps(TooltipPrimitive.Content, {\n sideOffset: 4,\n }),\n 'z-50 overflow-hidden rounded-md bg-black px-3 py-1.5 text-sm font-semibold text-white shadow-md'\n);\n\nexport function withTooltip<\n T extends React.ComponentType | keyof HTMLElementTagNameMap,\n>(Component: T) {\n return React.forwardRef<\n React.ElementRef,\n {\n tooltipContentProps?: Omit<\n React.ComponentPropsWithoutRef,\n 'children'\n >;\n tooltipProps?: Omit<\n React.ComponentPropsWithoutRef,\n 'children'\n >;\n tooltip?: React.ReactNode;\n } & React.ComponentPropsWithoutRef &\n Omit\n >(function ExtendComponent(\n {\n delayDuration = 0,\n disableHoverableContent = true,\n skipDelayDuration = 0,\n tooltip,\n tooltipContentProps,\n tooltipProps,\n ...props\n },\n ref\n ) {\n const [mounted, setMounted] = React.useState(false);\n\n React.useEffect(() => {\n setMounted(true);\n }, []);\n\n const component = ;\n\n if (tooltip && mounted) {\n return (\n \n \n {component}\n\n \n \n {tooltip}\n \n \n \n \n );\n }\n\n return component;\n });\n}\n", "path": "plate-ui/tooltip.tsx", - "target": "", + "target": "components/plate-ui/tooltip.tsx", "type": "registry:ui" } ], diff --git a/apps/www/public/r/styles/default/turn-into-dropdown-menu.json b/apps/www/public/r/styles/default/turn-into-dropdown-menu.json index 57bfebd012..502b986c06 100644 --- a/apps/www/public/r/styles/default/turn-into-dropdown-menu.json +++ b/apps/www/public/r/styles/default/turn-into-dropdown-menu.json @@ -7,7 +7,7 @@ { "content": "import React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { getNodeEntries, isBlock } from '@udecode/plate-common';\nimport {\n ParagraphPlugin,\n focusEditor,\n useEditorRef,\n useEditorSelector,\n} from '@udecode/plate-common/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 DropdownMenu,\n DropdownMenuContent,\n DropdownMenuLabel,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst items = [\n {\n description: 'Paragraph',\n icon: Icons.paragraph,\n label: 'Paragraph',\n value: ParagraphPlugin.key,\n },\n {\n description: 'Heading 1',\n icon: Icons.h1,\n label: 'Heading 1',\n value: HEADING_KEYS.h1,\n },\n {\n description: 'Heading 2',\n icon: Icons.h2,\n label: 'Heading 2',\n value: HEADING_KEYS.h2,\n },\n {\n description: 'Heading 3',\n icon: Icons.h3,\n label: 'Heading 3',\n value: HEADING_KEYS.h3,\n },\n {\n description: 'Quote (⌘+⇧+.)',\n icon: Icons.blockquote,\n label: 'Quote',\n value: BlockquotePlugin.key,\n },\n {\n description: 'Bulleted list',\n icon: Icons.ul,\n label: 'Bulleted list',\n value: ListStyleType.Disc,\n },\n {\n description: 'Numbered list',\n icon: Icons.ol,\n label: 'Numbered list',\n value: ListStyleType.Decimal,\n },\n];\n\nconst defaultItem = items.find((item) => item.value === ParagraphPlugin.key)!;\n\nexport function TurnIntoDropdownMenu(props: DropdownMenuProps) {\n const value: string = useEditorSelector((editor) => {\n let initialNodeType: string = ParagraphPlugin.key;\n let allNodesMatchInitialNodeType = false;\n const codeBlockEntries = getNodeEntries(editor, {\n match: (n) => isBlock(editor, n),\n mode: 'highest',\n });\n const nodes = Array.from(codeBlockEntries);\n\n if (nodes.length > 0) {\n initialNodeType = nodes[0][0].type as string;\n allNodesMatchInitialNodeType = nodes.every(([node]) => {\n const type: string = (node?.type as string) || ParagraphPlugin.key;\n\n return type === initialNodeType;\n });\n }\n\n return allNodesMatchInitialNodeType ? initialNodeType : ParagraphPlugin.key;\n }, []);\n\n const editor = useEditorRef();\n const openState = useOpenState();\n\n const selectedItem =\n // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison\n items.find((item) => item.value === value) ?? defaultItem;\n const { icon: SelectedItemIcon, label: selectedItemLabel } = selectedItem;\n\n return (\n \n \n \n \n {selectedItemLabel}\n \n \n\n \n Turn into\n\n {\n if (type === ListStyleType.Disc || type === ListStyleType.Decimal) {\n toggleIndentList(editor, {\n listStyleType: type,\n });\n }\n\n editor.tf.toggle.block({ type });\n\n focusEditor(editor);\n }}\n >\n {items.map(({ icon: Icon, label, value: itemValue }) => (\n \n \n {label}\n \n ))}\n \n \n \n );\n}\n", "path": "plate-ui/turn-into-dropdown-menu.tsx", - "target": "", + "target": "components/plate-ui/turn-into-dropdown-menu.tsx", "type": "registry:ui" } ], diff --git a/apps/www/public/r/styles/default/use-debounce.json b/apps/www/public/r/styles/default/use-debounce.json index 9fb7aafb2b..baecef0fb7 100644 --- a/apps/www/public/r/styles/default/use-debounce.json +++ b/apps/www/public/r/styles/default/use-debounce.json @@ -3,6 +3,7 @@ { "content": "import * as React from 'react';\n\nexport const useDebounce = (value: T, delay = 500) => {\n const [debouncedValue, setDebouncedValue] = React.useState(value);\n\n React.useEffect(() => {\n const handler: NodeJS.Timeout = setTimeout(() => {\n setDebouncedValue(value);\n }, delay);\n\n // Cancel the timeout if value changes (also on delay change or unmount)\n return () => {\n clearTimeout(handler);\n };\n }, [value, delay]);\n\n return debouncedValue;\n};\n", "path": "hooks/use-debounce.ts", + "target": "hooks/use-debounce.ts", "type": "registry:hook" } ], diff --git a/apps/www/public/r/styles/default/use-mounted.json b/apps/www/public/r/styles/default/use-mounted.json index 700e40dfd5..ff44f21dc7 100644 --- a/apps/www/public/r/styles/default/use-mounted.json +++ b/apps/www/public/r/styles/default/use-mounted.json @@ -3,6 +3,7 @@ { "content": "import * as React from 'react';\n\nexport function useMounted() {\n const [mounted, setMounted] = React.useState(false);\n\n React.useEffect(() => {\n setMounted(true);\n }, []);\n\n return mounted;\n}\n", "path": "hooks/use-mounted.ts", + "target": "hooks/use-mounted.ts", "type": "registry:hook" } ], diff --git a/apps/www/public/r/styles/default/utils.json b/apps/www/public/r/styles/default/utils.json index 9f9205a62a..6dd6a39ab4 100644 --- a/apps/www/public/r/styles/default/utils.json +++ b/apps/www/public/r/styles/default/utils.json @@ -7,6 +7,7 @@ { "content": "import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n", "path": "lib/utils.ts", + "target": "lib/utils.ts", "type": "registry:lib" } ], diff --git a/apps/www/public/r/styles/default/version-history-demo.json b/apps/www/public/r/styles/default/version-history-demo.json new file mode 100644 index 0000000000..bbc33b06aa --- /dev/null +++ b/apps/www/public/r/styles/default/version-history-demo.json @@ -0,0 +1,13 @@ +{ + "files": [ + { + "content": "import React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport { BoldPlugin, ItalicPlugin } from '@udecode/plate-basic-marks/react';\nimport { SoftBreakPlugin } from '@udecode/plate-break/react';\nimport { type Value, createSlatePlugin, isInline } from '@udecode/plate-common';\nimport {\n ParagraphPlugin,\n createPlatePlugin,\n toPlatePlugin,\n} from '@udecode/plate-common/react';\nimport {\n type PlateElementProps,\n type PlateLeafProps,\n type PlateProps,\n Plate,\n PlateContent,\n PlateElement,\n PlateLeaf,\n createPlateEditor,\n usePlateEditor,\n} from '@udecode/plate-common/react';\nimport {\n type DiffOperation,\n type DiffUpdate,\n computeDiff,\n withGetFragmentExcludeDiff,\n} from '@udecode/plate-diff';\nimport { cloneDeep } from 'lodash';\nimport { useSelected } from 'slate-react';\n\nimport { PlateUI } from '@/lib/plate/demo/plate-ui';\nimport { Button } from '@/components/plate-ui/button';\n\nconst InlinePlugin = createPlatePlugin({\n key: 'inline',\n node: { isElement: true, isInline: true },\n});\n\nconst InlineVoidPlugin = createPlatePlugin({\n key: 'inline-void',\n node: { isElement: true, isInline: true, isVoid: true },\n});\n\nconst diffOperationColors: Record = {\n delete: 'bg-red-200',\n insert: 'bg-green-200',\n update: 'bg-blue-200',\n};\n\nconst describeUpdate = ({ newProperties, properties }: DiffUpdate) => {\n const addedProps: string[] = [];\n const removedProps: string[] = [];\n const updatedProps: string[] = [];\n\n Object.keys(newProperties).forEach((key) => {\n const oldValue = properties[key];\n const newValue = newProperties[key];\n\n if (oldValue === undefined) {\n addedProps.push(key);\n\n return;\n }\n if (newValue === undefined) {\n removedProps.push(key);\n\n return;\n }\n\n updatedProps.push(key);\n });\n\n const descriptionParts = [];\n\n if (addedProps.length > 0) {\n descriptionParts.push(`Added ${addedProps.join(', ')}`);\n }\n if (removedProps.length > 0) {\n descriptionParts.push(`Removed ${removedProps.join(', ')}`);\n }\n if (updatedProps.length > 0) {\n updatedProps.forEach((key) => {\n descriptionParts.push(\n `Updated ${key} from ${properties[key]} to ${newProperties[key]}`\n );\n });\n }\n\n return descriptionParts.join('\\n');\n};\n\nconst InlineElement = ({ children, ...props }: PlateElementProps) => {\n return (\n \n {children}\n \n );\n};\n\nconst InlineVoidElement = ({ children, ...props }: PlateElementProps) => {\n const selected = useSelected();\n\n return (\n \n \n Inline void\n \n {children}\n \n );\n};\n\nconst DiffPlugin = toPlatePlugin(\n createSlatePlugin({\n key: 'diff',\n extendEditor: withGetFragmentExcludeDiff,\n node: { isLeaf: true },\n }),\n {\n render: {\n aboveNodes:\n () =>\n ({ children, editor, element }) => {\n if (!element.diff) return children;\n\n const diffOperation = element.diffOperation as DiffOperation;\n\n const label = (\n {\n delete: 'deletion',\n insert: 'insertion',\n update: 'update',\n } as any\n )[diffOperation.type];\n\n const Component = isInline(editor, element) ? 'span' : 'div';\n\n return (\n \n {children}\n \n );\n },\n node: DiffLeaf,\n },\n }\n);\n\nfunction DiffLeaf({ children, ...props }: PlateLeafProps) {\n const diffOperation = props.leaf.diffOperation as DiffOperation;\n\n const Component = (\n {\n delete: 'del',\n insert: 'ins',\n update: 'span',\n } as any\n )[diffOperation.type];\n\n return (\n \n \n {children}\n \n \n );\n}\n\nconst initialValue: Value = [\n {\n children: [{ text: 'This is a version history demo.' }],\n type: ParagraphPlugin.key,\n },\n {\n children: [\n { text: 'Try editing the ' },\n { bold: true, text: 'text and see what' },\n { text: ' happens.' },\n ],\n type: ParagraphPlugin.key,\n },\n {\n children: [\n { text: 'This is an ' },\n { children: [{ text: '' }], type: InlineVoidPlugin.key },\n { text: '. Try removing it.' },\n ],\n type: ParagraphPlugin.key,\n },\n {\n children: [\n { text: 'This is an ' },\n { children: [{ text: 'editable inline' }], type: InlinePlugin.key },\n { text: '. Try editing it.' },\n ],\n type: ParagraphPlugin.key,\n },\n];\n\nconst plugins = [\n InlinePlugin.withComponent(InlineElement),\n InlineVoidPlugin.withComponent(InlineVoidElement),\n BoldPlugin,\n ItalicPlugin,\n DiffPlugin,\n SoftBreakPlugin,\n];\n\nfunction VersionHistoryPlate(props: Omit) {\n return (\n \n \n \n );\n}\n\ninterface DiffProps {\n current: Value;\n previous: Value;\n}\n\nfunction Diff({ current, previous }: DiffProps) {\n const diffValue = React.useMemo(() => {\n const editor = createPlateEditor({\n plugins,\n });\n\n return computeDiff(previous, cloneDeep(current), {\n isInline: editor.isInline,\n lineBreakChar: 'ΒΆ',\n }) as Value;\n }, [previous, current]);\n\n const editor = usePlateEditor(\n {\n override: { components: PlateUI },\n plugins,\n value: diffValue,\n },\n [diffValue]\n );\n\n return (\n <>\n \n\n 
{JSON.stringify(diffValue, null, 2)}
\n \n );\n}\n\nexport default function VersionHistoryDemo() {\n const [revisions, setRevisions] = React.useState([initialValue]);\n const [selectedRevisionIndex, setSelectedRevisionIndex] =\n React.useState(0);\n const [value, setValue] = React.useState(initialValue);\n\n const selectedRevisionValue = React.useMemo(\n () => revisions[selectedRevisionIndex],\n [revisions, selectedRevisionIndex]\n );\n\n const saveRevision = () => {\n setRevisions([...revisions, value]);\n };\n\n const editor = usePlateEditor({\n override: { components: PlateUI },\n plugins,\n value: initialValue,\n });\n\n const editorRevision = usePlateEditor(\n {\n override: { components: PlateUI },\n plugins,\n value: selectedRevisionValue,\n },\n [selectedRevisionValue]\n );\n\n return (\n
\n \n\n setValue(value)}\n editor={editor}\n />\n\n \n\n
\n
\n

Revision {selectedRevisionIndex + 1}

\n \n
\n\n
\n

Diff

\n \n
\n
\n
\n );\n}\n", + "path": "example/version-history-demo.tsx", + "target": "components/version-history-demo.tsx", + "type": "registry:example" + } + ], + "name": "version-history-demo", + "registryDependencies": [], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/www/scripts/build-registry.mts b/apps/www/scripts/build-registry.mts index 87b36c9d6b..678f106a9e 100644 --- a/apps/www/scripts/build-registry.mts +++ b/apps/www/scripts/build-registry.mts @@ -413,7 +413,7 @@ async function buildStyles(registry: Registry) { target = `components/${fileName}` } if (file.type === "registry:ui") { - target = `components/ui/${fileName}` + target = `components/plate-ui/${fileName}` } if (file.type === "registry:hook") { target = `hooks/${fileName}` diff --git a/apps/www/scripts/fix-import.mts b/apps/www/scripts/fix-import.mts index 77c3cab8d8..19da908e49 100644 --- a/apps/www/scripts/fix-import.mts +++ b/apps/www/scripts/fix-import.mts @@ -1,5 +1,5 @@ export function fixImport(content: string) { - const regex = /@\/(.+?)\/((?:.*?\/)?(?:components|ui|hooks|lib))\/([\w-]+)/g + const regex = /@\/(.+?)\/((?:.*?\/)?(?:components|plate-ui|hooks|lib))\/([\w-]+)/g const replacement = ( match: string, @@ -9,8 +9,8 @@ export function fixImport(content: string) { ) => { if (type.endsWith("components")) { return `@/components/${component}` - } else if (type.endsWith("ui")) { - return `@/components/ui/${component}` + } else if (type.endsWith("plate-ui")) { + return `@/components/plate-ui/${component}` } else if (type.endsWith("hooks")) { return `@/hooks/${component}` } else if (type.endsWith("lib")) { diff --git a/apps/www/src/__registry__/index.tsx b/apps/www/src/__registry__/index.tsx index 34be58493f..8a65836fb5 100644 --- a/apps/www/src/__registry__/index.tsx +++ b/apps/www/src/__registry__/index.tsx @@ -7,1250 +7,1250 @@ export const Index: Record = { "default": { "editor": { name: "editor", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/editor.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/editor.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "block-selection": { name: "block-selection", - title: "undefined", + description: "", 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", + category: "", + subcategory: "", chunks: [] }, "plate-element": { name: "plate-element", - title: "undefined", + description: "", 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", + category: "", + subcategory: "", chunks: [] }, "code-block-element": { name: "code-block-element", - title: "undefined", + description: "", type: "registry:ui", 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: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "column-element": { name: "column-element", - title: "undefined", + description: "", type: "registry:ui", 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: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "color-dropdown-menu": { name: "color-dropdown-menu", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["dropdown-menu","toolbar","separator","button","tooltip"], files: ["registry/default/plate-ui/color-dropdown-menu.tsx","registry/default/plate-ui/color-constants.ts","registry/default/plate-ui/color-dropdown-menu-items.tsx","registry/default/plate-ui/color-input.tsx","registry/default/plate-ui/color-picker.tsx","registry/default/plate-ui/colors-custom.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/color-dropdown-menu.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "comments-popover": { name: "comments-popover", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["popover","avatar"], files: ["registry/default/plate-ui/comments-popover.tsx","registry/default/plate-ui/comment-avatar.tsx","registry/default/plate-ui/comment-create-form.tsx","registry/default/plate-ui/comment-item.tsx","registry/default/plate-ui/comment-more-dropdown.tsx","registry/default/plate-ui/comment-reply-items.tsx","registry/default/plate-ui/comment-resolve-button.tsx","registry/default/plate-ui/comment-value.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/comments-popover.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "draggable": { name: "draggable", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["tooltip"], files: ["registry/default/plate-ui/draggable.tsx","registry/default/plate-ui/with-draggables.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/draggable.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "emoji-dropdown-menu": { name: "emoji-dropdown-menu", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["toolbar"], files: ["registry/default/plate-ui/emoji-dropdown-menu.tsx","registry/default/plate-ui/emoji-toolbar-dropdown.tsx","registry/default/plate-ui/emoji-icons.tsx","registry/default/plate-ui/emoji-picker.tsx","registry/default/plate-ui/emoji-picker-content.tsx","registry/default/plate-ui/emoji-picker-navigation.tsx","registry/default/plate-ui/emoji-picker-preview.tsx","registry/default/plate-ui/emoji-picker-search-and-clear.tsx","registry/default/plate-ui/emoji-picker-search-bar.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/emoji-dropdown-menu.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "emoji-input-element": { name: "emoji-input-element", - title: "undefined", + description: "", type: "registry:ui", 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: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "align-dropdown-menu": { name: "align-dropdown-menu", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["dropdown-menu","toolbar"], files: ["registry/default/plate-ui/align-dropdown-menu.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/align-dropdown-menu.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "avatar": { name: "avatar", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/avatar.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/avatar.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "blockquote-element": { name: "blockquote-element", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["plate-element"], files: ["registry/default/plate-ui/blockquote-element.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/blockquote-element.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "date-element": { name: "date-element", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["calendar","plate-element"], files: ["registry/default/plate-ui/date-element.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/date-element.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "calendar": { name: "calendar", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["button"], files: ["registry/default/plate-ui/calendar.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/calendar.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "button": { name: "button", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/button.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/button.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "caption": { name: "caption", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/caption.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/caption.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "checkbox": { name: "checkbox", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/checkbox.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/checkbox.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "code-leaf": { name: "code-leaf", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/code-leaf.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/code-leaf.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "code-line-element": { name: "code-line-element", - title: "undefined", + description: "", type: "registry:ui", 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: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "code-syntax-leaf": { name: "code-syntax-leaf", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/code-syntax-leaf.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/code-syntax-leaf.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "command": { name: "command", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["dialog"], files: ["registry/default/plate-ui/command.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/command.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "comment-leaf": { name: "comment-leaf", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/comment-leaf.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/comment-leaf.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "comment-toolbar-button": { name: "comment-toolbar-button", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/comment-toolbar-button.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/comment-toolbar-button.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "cursor-overlay": { name: "cursor-overlay", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/cursor-overlay.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/cursor-overlay.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "dialog": { name: "dialog", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/dialog.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/dialog.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "dropdown-menu": { name: "dropdown-menu", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/dropdown-menu.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/dropdown-menu.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "excalidraw-element": { name: "excalidraw-element", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["plate-element"], files: ["registry/default/plate-ui/excalidraw-element.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/excalidraw-element.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "fixed-toolbar": { name: "fixed-toolbar", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["toolbar"], files: ["registry/default/plate-ui/fixed-toolbar.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/fixed-toolbar.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "fixed-toolbar-buttons": { name: "fixed-toolbar-buttons", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["toolbar","insert-dropdown-menu","mark-toolbar-button","mode-dropdown-menu","turn-into-dropdown-menu"], files: ["registry/default/plate-ui/fixed-toolbar-buttons.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/fixed-toolbar-buttons.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "floating-toolbar": { name: "floating-toolbar", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["toolbar"], files: ["registry/default/plate-ui/floating-toolbar.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/floating-toolbar.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "floating-toolbar-buttons": { name: "floating-toolbar-buttons", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["mark-toolbar-button","more-dropdown-menu","turn-into-dropdown-menu"], files: ["registry/default/plate-ui/floating-toolbar-buttons.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/floating-toolbar-buttons.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "heading-element": { name: "heading-element", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["plate-element"], files: ["registry/default/plate-ui/heading-element.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/heading-element.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "highlight-leaf": { name: "highlight-leaf", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/highlight-leaf.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/highlight-leaf.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "hr-element": { name: "hr-element", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["plate-element"], files: ["registry/default/plate-ui/hr-element.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/hr-element.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "image-element": { name: "image-element", - title: "undefined", + description: "", type: "registry:ui", 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: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "indent-list-toolbar-button": { name: "indent-list-toolbar-button", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["toolbar"], files: ["registry/default/plate-ui/indent-list-toolbar-button.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/indent-list-toolbar-button.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "indent-toolbar-button": { name: "indent-toolbar-button", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["toolbar"], files: ["registry/default/plate-ui/indent-toolbar-button.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/indent-toolbar-button.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "indent-todo-toolbar-button": { name: "indent-todo-toolbar-button", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["toolbar"], files: ["registry/default/plate-ui/indent-todo-toolbar-button.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/indent-todo-toolbar-button.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "indent-todo-marker-component": { name: "indent-todo-marker-component", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["checkbox"], files: ["registry/default/plate-ui/indent-todo-marker-component.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/indent-todo-marker-component.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "inline-combobox": { name: "inline-combobox", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/inline-combobox.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/inline-combobox.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "input": { name: "input", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/input.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/input.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "insert-dropdown-menu": { name: "insert-dropdown-menu", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["dropdown-menu","toolbar"], files: ["registry/default/plate-ui/insert-dropdown-menu.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/insert-dropdown-menu.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "kbd-leaf": { name: "kbd-leaf", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/kbd-leaf.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/kbd-leaf.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "line-height-dropdown-menu": { name: "line-height-dropdown-menu", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["toolbar","dropdown-menu"], files: ["registry/default/plate-ui/line-height-dropdown-menu.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/line-height-dropdown-menu.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "link-element": { name: "link-element", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["plate-element"], files: ["registry/default/plate-ui/link-element.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/link-element.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "link-floating-toolbar": { name: "link-floating-toolbar", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["button","input","popover","separator"], files: ["registry/default/plate-ui/link-floating-toolbar.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/link-floating-toolbar.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "link-toolbar-button": { name: "link-toolbar-button", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["toolbar"], files: ["registry/default/plate-ui/link-toolbar-button.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/link-toolbar-button.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "list-element": { name: "list-element", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["plate-element"], files: ["registry/default/plate-ui/list-element.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/list-element.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "list-toolbar-button": { name: "list-toolbar-button", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["toolbar"], files: ["registry/default/plate-ui/list-toolbar-button.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/list-toolbar-button.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "mark-toolbar-button": { name: "mark-toolbar-button", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["toolbar"], files: ["registry/default/plate-ui/mark-toolbar-button.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/mark-toolbar-button.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "media-embed-element": { name: "media-embed-element", - title: "undefined", + description: "", type: "registry:ui", 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: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "media-popover": { name: "media-popover", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["button","input","popover","separator"], files: ["registry/default/plate-ui/media-popover.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/media-popover.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "media-toolbar-button": { name: "media-toolbar-button", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["toolbar"], files: ["registry/default/plate-ui/media-toolbar-button.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/media-toolbar-button.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "mention-element": { name: "mention-element", - title: "undefined", + description: "", type: "registry:ui", 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: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "mention-input-element": { name: "mention-input-element", - title: "undefined", + description: "", type: "registry:ui", 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: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "mode-dropdown-menu": { name: "mode-dropdown-menu", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["dropdown-menu","toolbar"], files: ["registry/default/plate-ui/mode-dropdown-menu.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/mode-dropdown-menu.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "more-dropdown-menu": { name: "more-dropdown-menu", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["dropdown-menu","toolbar"], files: ["registry/default/plate-ui/more-dropdown-menu.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/more-dropdown-menu.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "outdent-toolbar-button": { name: "outdent-toolbar-button", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["toolbar"], files: ["registry/default/plate-ui/outdent-toolbar-button.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/outdent-toolbar-button.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "paragraph-element": { name: "paragraph-element", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["plate-element"], files: ["registry/default/plate-ui/paragraph-element.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/paragraph-element.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "placeholder": { name: "placeholder", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["paragraph-element"], files: ["registry/default/plate-ui/placeholder.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/placeholder.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "popover": { name: "popover", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/popover.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/popover.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "search-highlight-leaf": { name: "search-highlight-leaf", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/search-highlight-leaf.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/search-highlight-leaf.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "separator": { name: "separator", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/separator.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/separator.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "slash-input-element": { name: "slash-input-element", - title: "undefined", + description: "", type: "registry:ui", 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: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "table-cell-element": { name: "table-cell-element", - title: "undefined", + description: "", type: "registry:ui", 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: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "table-dropdown-menu": { name: "table-dropdown-menu", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["dropdown-menu","toolbar"], files: ["registry/default/plate-ui/table-dropdown-menu.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/table-dropdown-menu.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "table-element": { name: "table-element", - title: "undefined", + description: "", type: "registry:ui", 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: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "table-row-element": { name: "table-row-element", - title: "undefined", + description: "", type: "registry:ui", 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: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "todo-list-element": { name: "todo-list-element", - title: "undefined", + description: "", type: "registry:ui", 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: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "toggle-element": { name: "toggle-element", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["plate-element"], files: ["registry/default/plate-ui/toggle-element.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/toggle-element.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "toggle-toolbar-button": { name: "toggle-toolbar-button", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["toolbar"], files: ["registry/default/plate-ui/toggle-toolbar-button.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/toggle-toolbar-button.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "toolbar": { name: "toolbar", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["tooltip","separator"], files: ["registry/default/plate-ui/toolbar.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/toolbar.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "tooltip": { name: "tooltip", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/tooltip.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/tooltip.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "turn-into-dropdown-menu": { name: "turn-into-dropdown-menu", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: ["dropdown-menu","toolbar"], files: ["registry/default/plate-ui/turn-into-dropdown-menu.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/turn-into-dropdown-menu.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "resizable": { name: "resizable", - title: "undefined", + description: "", type: "registry:ui", registryDependencies: [], files: ["registry/default/plate-ui/resizable.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/resizable.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "editor-default": { name: "editor-default", - title: "undefined", + description: "", type: "registry:example", registryDependencies: [], files: ["registry/default/example/editor-default.tsx"], component: React.lazy(() => import("@/registry/default/example/editor-default.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "editor-disabled": { name: "editor-disabled", - title: "undefined", + description: "", type: "registry:example", registryDependencies: [], files: ["registry/default/example/editor-disabled.tsx"], component: React.lazy(() => import("@/registry/default/example/editor-disabled.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "editor-ghost": { name: "editor-ghost", - title: "undefined", + description: "", type: "registry:example", registryDependencies: [], files: ["registry/default/example/editor-ghost.tsx"], component: React.lazy(() => import("@/registry/default/example/editor-ghost.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "editor-label": { name: "editor-label", - title: "undefined", + description: "", type: "registry:example", registryDependencies: [], files: ["registry/default/example/editor-label.tsx"], component: React.lazy(() => import("@/registry/default/example/editor-label.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "editor-text": { name: "editor-text", - title: "undefined", + description: "", type: "registry:example", registryDependencies: [], files: ["registry/default/example/editor-text.tsx"], component: React.lazy(() => import("@/registry/default/example/editor-text.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "editor-button": { name: "editor-button", - title: "undefined", + description: "", type: "registry:example", registryDependencies: [], files: ["registry/default/example/editor-button.tsx"], component: React.lazy(() => import("@/registry/default/example/editor-button.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "editor-form": { name: "editor-form", - title: "undefined", + description: "", type: "registry:example", registryDependencies: [], files: ["registry/default/example/editor-form.tsx"], component: React.lazy(() => import("@/registry/default/example/editor-form.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "basic-editor-default-demo": { name: "basic-editor-default-demo", - title: "undefined", + description: "", type: "registry:example", registryDependencies: [], files: ["registry/default/example/basic-editor-default-demo.tsx"], component: React.lazy(() => import("@/registry/default/example/basic-editor-default-demo.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "controlled-demo": { name: "controlled-demo", - title: "undefined", + description: "", type: "registry:example", registryDependencies: [], files: ["registry/default/example/controlled-demo.tsx"], component: React.lazy(() => import("@/registry/default/example/controlled-demo.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "basic-editor-styling-demo": { name: "basic-editor-styling-demo", - title: "undefined", + description: "", type: "registry:example", registryDependencies: [], files: ["registry/default/example/basic-editor-styling-demo.tsx"], component: React.lazy(() => import("@/registry/default/example/basic-editor-styling-demo.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "basic-editor-handler-demo": { name: "basic-editor-handler-demo", - title: "undefined", + description: "", type: "registry:example", registryDependencies: [], files: ["registry/default/example/basic-editor-handler-demo.tsx"], component: React.lazy(() => import("@/registry/default/example/basic-editor-handler-demo.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "basic-editor-value-demo": { name: "basic-editor-value-demo", - title: "undefined", + description: "", type: "registry:example", registryDependencies: [], files: ["registry/default/example/basic-editor-value-demo.tsx"], component: React.lazy(() => import("@/registry/default/example/basic-editor-value-demo.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "basic-plugins-components-demo": { name: "basic-plugins-components-demo", - title: "undefined", + description: "", type: "registry:example", registryDependencies: [], files: ["registry/default/example/basic-plugins-components-demo.tsx"], component: React.lazy(() => import("@/registry/default/example/basic-plugins-components-demo.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "basic-plugins-default-demo": { name: "basic-plugins-default-demo", - title: "undefined", + description: "", type: "registry:example", registryDependencies: [], files: ["registry/default/example/basic-plugins-default-demo.tsx"], component: React.lazy(() => import("@/registry/default/example/basic-plugins-default-demo.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "editable-voids-demo": { name: "editable-voids-demo", - title: "undefined", + description: "", type: "registry:example", registryDependencies: [], files: ["registry/default/example/editable-voids-demo.tsx"], component: React.lazy(() => import("@/registry/default/example/editable-voids-demo.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "find-replace-demo": { name: "find-replace-demo", - title: "undefined", + description: "", type: "registry:example", registryDependencies: [], files: ["registry/default/example/find-replace-demo.tsx"], component: React.lazy(() => import("@/registry/default/example/find-replace-demo.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "hundreds-blocks-demo": { name: "hundreds-blocks-demo", - title: "undefined", + description: "", type: "registry:example", registryDependencies: [], files: ["registry/default/example/hundreds-blocks-demo.tsx"], component: React.lazy(() => import("@/registry/default/example/hundreds-blocks-demo.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "hundreds-editors-demo": { name: "hundreds-editors-demo", - title: "undefined", + description: "", type: "registry:example", registryDependencies: [], files: ["registry/default/example/hundreds-editors-demo.tsx"], component: React.lazy(() => import("@/registry/default/example/hundreds-editors-demo.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "iframe-demo": { name: "iframe-demo", - title: "undefined", + description: "", type: "registry:example", registryDependencies: [], files: ["registry/default/example/iframe-demo.tsx"], component: React.lazy(() => import("@/registry/default/example/iframe-demo.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "mode-toggle": { name: "mode-toggle", - title: "undefined", + description: "", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/mode-toggle.tsx"], component: React.lazy(() => import("@/registry/default/example/mode-toggle.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "multiple-editors-demo": { name: "multiple-editors-demo", - title: "undefined", + description: "", type: "registry:example", registryDependencies: [], files: ["registry/default/example/multiple-editors-demo.tsx"], component: React.lazy(() => import("@/registry/default/example/multiple-editors-demo.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "version-history-demo": { name: "version-history-demo", - title: "undefined", + description: "", type: "registry:example", registryDependencies: [], files: ["registry/default/example/version-history-demo.tsx"], component: React.lazy(() => import("@/registry/default/example/version-history-demo.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "playground-demo": { name: "playground-demo", - title: "undefined", + description: "", type: "registry:example", registryDependencies: [], files: ["registry/default/example/playground-demo.tsx"], component: React.lazy(() => import("@/registry/default/example/playground-demo.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "preview-md-demo": { name: "preview-md-demo", - title: "undefined", + description: "", type: "registry:example", registryDependencies: [], files: ["registry/default/example/preview-md-demo.tsx"], component: React.lazy(() => import("@/registry/default/example/preview-md-demo.tsx")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "plate-types": { name: "plate-types", - title: "undefined", + description: "", type: "registry:lib", registryDependencies: undefined, files: ["registry/default/lib/plate-types.ts"], component: React.lazy(() => import("@/registry/default/lib/plate-types.ts")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "utils": { name: "utils", - title: "undefined", + description: "", type: "registry:lib", registryDependencies: undefined, files: ["registry/default/lib/utils.ts"], component: React.lazy(() => import("@/registry/default/lib/utils.ts")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "use-debounce": { name: "use-debounce", - title: "undefined", + description: "", type: "registry:hook", registryDependencies: undefined, files: ["registry/default/hooks/use-debounce.ts"], component: React.lazy(() => import("@/registry/default/hooks/use-debounce.ts")), source: "", - category: "undefined", - subcategory: "undefined", + category: "", + subcategory: "", chunks: [] }, "use-mounted": { name: "use-mounted", - title: "undefined", + description: "", 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", + category: "", + subcategory: "", chunks: [] }, }, From 8d934e52dd274fb05857db921fbd8f1ed93c8e09 Mon Sep 17 00:00:00 2001 From: zbeyens Date: Sat, 19 Oct 2024 04:45:45 +0200 Subject: [PATCH 3/4] fix --- apps/www/src/components/code-block-wrapper.tsx | 4 ---- apps/www/src/components/component-source.tsx | 7 +++---- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/apps/www/src/components/code-block-wrapper.tsx b/apps/www/src/components/code-block-wrapper.tsx index 235f0aa764..5c2afee7cf 100644 --- a/apps/www/src/components/code-block-wrapper.tsx +++ b/apps/www/src/components/code-block-wrapper.tsx @@ -26,10 +26,6 @@ export function CodeBlockWrapper({ }: CodeBlockProps) { const [isOpened, setIsOpened] = React.useState(open); - React.useEffect(() => { - setIsOpened(open); - }, [open]); - return (
diff --git a/apps/www/src/components/component-source.tsx b/apps/www/src/components/component-source.tsx index 56106c7bfc..69a4775579 100644 --- a/apps/www/src/components/component-source.tsx +++ b/apps/www/src/components/component-source.tsx @@ -26,7 +26,6 @@ export function ComponentSource({ }: ComponentSourceProps) { const displaySrc = title ?? props.src?.split('/').pop() ?? name + '.tsx'; const { copyToClipboard } = useCopyToClipboard(); - const [open, setOpen] = React.useState(false); return (
@@ -36,8 +35,9 @@ export function ComponentSource({ variant="ghost" className="mb-1 w-fit select-auto px-4 py-1 text-sm font-medium text-foreground" onClick={() => { - copyToClipboard(displaySrc); - setOpen((prev) => !prev); + copyToClipboard(displaySrc, { + tooltip: 'Copied to clipboard', + }); }} > {displaySrc} @@ -46,7 +46,6 @@ export function ComponentSource({ From 27dddceeceabd0139fad9ba36332d167f45e1c0e Mon Sep 17 00:00:00 2001 From: zbeyens Date: Sat, 19 Oct 2024 04:46:00 +0200 Subject: [PATCH 4/4] fix --- apps/www/src/hooks/useCopyToClipboard.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/www/src/hooks/useCopyToClipboard.ts b/apps/www/src/hooks/useCopyToClipboard.ts index ecec552abb..79795bd808 100644 --- a/apps/www/src/hooks/useCopyToClipboard.ts +++ b/apps/www/src/hooks/useCopyToClipboard.ts @@ -43,7 +43,6 @@ export const useCopyToClipboard = ({ }); if (tooltip) { - console.log('a'); toast.success(tooltip, data); } };