diff --git a/.changeset/few-points-clean.md b/.changeset/few-points-clean.md new file mode 100644 index 0000000000..f1017639d7 --- /dev/null +++ b/.changeset/few-points-clean.md @@ -0,0 +1,12 @@ +--- +'@udecode/plate-indent-list': patch +'@udecode/plate-line-height': patch +'@udecode/plate-code-block': patch +'@udecode/plate-comments': patch +'@udecode/plate-layout': patch +'@udecode/plate-media': patch +'@udecode/plate-table': patch +'@udecode/plate-docx': patch +--- + +Support deserialization from PlateStatic. diff --git a/.changeset/twenty-rivers-tell.md b/.changeset/twenty-rivers-tell.md new file mode 100644 index 0000000000..e9f86a0955 --- /dev/null +++ b/.changeset/twenty-rivers-tell.md @@ -0,0 +1,17 @@ +--- +'@udecode/plate-core': patch +--- + +`editor.api.html.deserialize`: Support deserialization from PlateStatic. + +New: `getEditorDOMFromHtmlString` returns the editor element in html string (the one with `data-slate-editor="true"`). + +New utilities for checking Slate nodes in HTML: +- `isSlateVoid`: Check if an HTML element is a Slate void node +- `isSlateElement`: Check if an HTML element is a Slate element node +- `isSlateString`: Check if an HTML element is a Slate string node +- `isSlateLeaf`: Check if an HTML element is a Slate leaf node +- `isSlateNode`: Check if an HTML element is any type of Slate node +- `isSlatePluginElement`: Check if an HTML element is a Slate element node with a specific plugin key +- `isSlatePluginNode`: Check if an HTML element has a specific plugin key class +- `getSlateElements`: Get all Slate element nodes in an HTML element diff --git a/apps/www/content/docs/cn/html.mdx b/apps/www/content/docs/cn/html.mdx index a3816dfdd8..b12dc385ef 100644 --- a/apps/www/content/docs/cn/html.mdx +++ b/apps/www/content/docs/cn/html.mdx @@ -191,14 +191,14 @@ const html = await serializeHtml(editor, { components }); ### 使用方法 -The `editor.api.html.deserialize` function allows you to convert HTML content into Slate value: +`editor.api.html.deserialize` 函数允许你将 HTML 内容转换为 Slate 值: ```typescript import { createPlateEditor } from '@udecode/plate/react'; const editor = createPlateEditor({ plugins: [ - // all plugins that you want to deserialize + // 所有你想要反序列化的插件 ] }) editor.children = editor.api.html.deserialize('
Hello, world!
') diff --git a/apps/www/public/r/index.json b/apps/www/public/r/index.json index a69602dd6d..5ba4e11882 100644 --- a/apps/www/public/r/index.json +++ b/apps/www/public/r/index.json @@ -1922,6 +1922,34 @@ ], "type": "registry:ui" }, + { + "dependencies": [], + "doc": { + "description": "A toolbar button to import editor content from a file.", + "docs": [ + { + "route": "/docs/import", + "title": "Import" + } + ], + "examples": [ + "basic-nodes-demo" + ], + "label": "New", + "title": "Import Toolbar Button" + }, + "files": [ + { + "path": "plate-ui/import-toolbar-button.tsx", + "type": "registry:ui" + } + ], + "name": "import-toolbar-button", + "registryDependencies": [ + "toolbar" + ], + "type": "registry:ui" + }, { "dependencies": [ "@udecode/plate-caption" diff --git a/apps/www/public/r/styles/default/comments-demo.json b/apps/www/public/r/styles/default/comments-demo.json index a7cbe6d036..7d7f8a5172 100644 --- a/apps/www/public/r/styles/default/comments-demo.json +++ b/apps/www/public/r/styles/default/comments-demo.json @@ -16,7 +16,7 @@ "type": "registry:example" }, { - "content": "import type { Value } from '@udecode/plate';\n\nexport const commentsValue: Value = [\n {\n children: [{ text: 'Comments' }],\n type: 'h2',\n },\n {\n children: [\n {\n text: 'Add ',\n },\n {\n comment: true,\n comment_1: true,\n text: 'comments to your content',\n },\n { text: ' to provide additional context, insights, or ' },\n {\n comment: true,\n comment_2: true,\n text: 'collaborate',\n },\n {\n text: ' with others',\n },\n ],\n type: 'p',\n },\n];\n", + "content": "import type { Value } from '@udecode/plate';\n\nexport const commentsValue: Value = [\n {\n children: [{ text: 'Comments' }],\n type: 'h2',\n },\n {\n children: [\n {\n text: 'Add ',\n },\n {\n comment: true,\n comment_1: true,\n text: 'comments to your content',\n },\n { text: ' to provide additional context, insights, or ' },\n {\n comment: true,\n comment_2: true,\n text: 'collaborate',\n },\n {\n text: ' with others',\n },\n ],\n type: 'p',\n },\n];\n", "path": "example/values/comments-value.tsx", "target": "components/comments-value.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/fixed-toolbar-buttons.json b/apps/www/public/r/styles/default/fixed-toolbar-buttons.json index a63b3c6f8c..6b28059ca0 100644 --- a/apps/www/public/r/styles/default/fixed-toolbar-buttons.json +++ b/apps/www/public/r/styles/default/fixed-toolbar-buttons.json @@ -14,7 +14,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React from 'react';\n\nimport { useEditorReadOnly } from '@udecode/plate/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport {\n FontBackgroundColorPlugin,\n FontColorPlugin,\n} from '@udecode/plate-font/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport {\n AudioPlugin,\n FilePlugin,\n ImagePlugin,\n VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n ArrowUpToLineIcon,\n BaselineIcon,\n BoldIcon,\n Code2Icon,\n HighlighterIcon,\n ItalicIcon,\n PaintBucketIcon,\n StrikethroughIcon,\n UnderlineIcon,\n WandSparklesIcon,\n} from 'lucide-react';\n\nimport { MoreDropdownMenu } from '@/components/plate-ui/more-dropdown-menu';\n\nimport { AIToolbarButton } from './ai-toolbar-button';\nimport { AlignDropdownMenu } from './align-dropdown-menu';\nimport { ColorDropdownMenu } from './color-dropdown-menu';\nimport { CommentToolbarButton } from './comment-toolbar-button';\nimport { EmojiDropdownMenu } from './emoji-dropdown-menu';\nimport { ExportToolbarButton } from './export-toolbar-button';\nimport { FontSizeToolbarButton } from './font-size-toolbar-button';\nimport { RedoToolbarButton, UndoToolbarButton } from './history-toolbar-button';\nimport {\n BulletedIndentListToolbarButton,\n NumberedIndentListToolbarButton,\n} from './indent-list-toolbar-button';\nimport { IndentTodoToolbarButton } from './indent-todo-toolbar-button';\nimport { IndentToolbarButton } from './indent-toolbar-button';\nimport { InsertDropdownMenu } from './insert-dropdown-menu';\nimport { LineHeightDropdownMenu } from './line-height-dropdown-menu';\nimport { LinkToolbarButton } from './link-toolbar-button';\nimport { MarkToolbarButton } from './mark-toolbar-button';\nimport { MediaToolbarButton } from './media-toolbar-button';\nimport { ModeDropdownMenu } from './mode-dropdown-menu';\nimport { OutdentToolbarButton } from './outdent-toolbar-button';\nimport { TableDropdownMenu } from './table-dropdown-menu';\nimport { ToggleToolbarButton } from './toggle-toolbar-button';\nimport { ToolbarGroup } from './toolbar';\nimport { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';\n\nexport function FixedToolbarButtons() {\n const readOnly = useEditorReadOnly();\n\n return (\n