docs

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

@@ -18,7 +18,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { getEditorDOMFromHtmlString } from '@udecode/plate';\nimport { useEditorRef } from '@udecode/plate/react';\nimport { ArrowUpToLineIcon } from 'lucide-react';\nimport { useFilePicker } from 'use-file-picker';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport function ImportToolbarButton({ children, ...props }: DropdownMenuProps) {\n  const editor = useEditorRef();\n  const openState = useOpenState();\n\n  const { openFilePicker } = useFilePicker({\n    accept: ['text/html'],\n    multiple: false,\n    onFilesSelected: async ({ plainFiles }) => {\n      const text = await plainFiles[0].text();\n\n      const editorNode = getEditorDOMFromHtmlString(text);\n\n      const nodes = editor.api.html.deserialize({\n        collapseWhiteSpace: false,\n        element: editorNode,\n      });\n\n      editor.tf.insertNodes(nodes);\n    },\n  });\n\n  return (\n    <DropdownMenu modal={false} {...openState} {...props}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarButton pressed={openState.open} tooltip=\"Import\" isDropdown>\n          <ArrowUpToLineIcon className=\"size-4\" />\n        </ToolbarButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent align=\"start\">\n        <DropdownMenuGroup>\n          <DropdownMenuItem\n            onSelect={() => {\n              openFilePicker();\n            }}\n          >\n            Import from HTML\n          </DropdownMenuItem>\n\n          <DropdownMenuItem disabled>\n            Import from Markdown{' '}\n            <span className=\"text-xs text-muted-foreground\">(coming soon)</span>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { getEditorDOMFromHtmlString } from '@udecode/plate';\nimport { useEditorRef } from '@udecode/plate/react';\nimport { ArrowUpToLineIcon } from 'lucide-react';\nimport { useFilePicker } from 'use-file-picker';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport function ImportToolbarButton({ children, ...props }: DropdownMenuProps) {\n  const editor = useEditorRef();\n  const openState = useOpenState();\n\n  const { openFilePicker } = useFilePicker({\n    accept: ['text/html'],\n    multiple: false,\n    onFilesSelected: async ({ plainFiles }) => {\n      const text = await plainFiles[0].text();\n\n      const editorNode = getEditorDOMFromHtmlString(text);\n\n      const nodes = editor.api.html.deserialize({\n        element: editorNode,\n      });\n\n      editor.tf.insertNodes(nodes);\n    },\n  });\n\n  return (\n    <DropdownMenu modal={false} {...openState} {...props}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarButton pressed={openState.open} tooltip=\"Import\" isDropdown>\n          <ArrowUpToLineIcon className=\"size-4\" />\n        </ToolbarButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent align=\"start\">\n        <DropdownMenuGroup>\n          <DropdownMenuItem\n            onSelect={() => {\n              openFilePicker();\n            }}\n          >\n            Import from HTML\n          </DropdownMenuItem>\n\n          <DropdownMenuItem disabled>\n            Import from Markdown{' '}\n            <span className=\"text-xs text-muted-foreground\">(coming soon)</span>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
       "path": "plate-ui/import-toolbar-button.tsx",
       "target": "components/plate-ui/import-toolbar-button.tsx",
       "type": "registry:ui"