From e80501a9a451e91587156981de63ad9c0b9ea35a Mon Sep 17 00:00:00 2001 From: Felix Feng Date: Sat, 21 Dec 2024 15:36:17 +0800 Subject: [PATCH 01/27] content cn --- .ai/translate.md | 26 + apps/www/content/{ => cn}/docs/ai.mdx | 0 apps/www/content/{ => cn}/docs/alignment.mdx | 0 apps/www/content/cn/docs/api/cn.mdx | 78 + apps/www/content/cn/docs/api/common.mdx | 11 + apps/www/content/cn/docs/api/core.mdx | 489 ++++++ .../cn/docs/api/core/plate-controller.mdx | 172 ++ .../content/cn/docs/api/core/plate-editor.mdx | 150 ++ .../content/cn/docs/api/core/plate-plugin.mdx | 333 ++++ apps/www/content/cn/docs/api/core/plate.mdx | 86 + apps/www/content/cn/docs/api/core/store.mdx | 188 ++ .../content/{ => cn}/docs/api/floating.mdx | 0 .../content/{ => cn}/docs/api/react-utils.mdx | 0 .../content/{ => cn}/docs/api/resizable.mdx | 0 .../content/{ => cn}/docs/api/slate-react.mdx | 0 .../content/{ => cn}/docs/api/slate-utils.mdx | 0 apps/www/content/{ => cn}/docs/api/slate.mdx | 0 apps/www/content/{ => cn}/docs/api/utils.mdx | 0 apps/www/content/{ => cn}/docs/autoformat.mdx | 0 .../content/{ => cn}/docs/basic-elements.mdx | 0 .../www/content/{ => cn}/docs/basic-marks.mdx | 0 apps/www/content/{ => cn}/docs/block-menu.mdx | 0 .../content/{ => cn}/docs/block-selection.mdx | 0 apps/www/content/{ => cn}/docs/callout.mdx | 0 apps/www/content/{ => cn}/docs/caption.mdx | 0 .../content/{ => cn}/docs/collaboration.mdx | 0 apps/www/content/{ => cn}/docs/column.mdx | 0 apps/www/content/{ => cn}/docs/combobox.mdx | 0 apps/www/content/{ => cn}/docs/comments.mdx | 0 .../{ => cn}/docs/components/changelog.mdx | 0 .../content/{ => cn}/docs/components/cli.mdx | 0 .../docs/components/components-json.mdx | 0 .../docs/components/dark-mode/index.mdx | 0 .../docs/components/dark-mode/next.mdx | 0 .../docs/components/dark-mode/vite.mdx | 0 .../{ => cn}/docs/components/installation.mdx | 0 .../docs/components/installation/astro.mdx | 0 .../docs/components/installation/gatsby.mdx | 0 .../docs/components/installation/laravel.mdx | 0 .../docs/components/installation/manual.mdx | 0 .../docs/components/installation/next.mdx | 0 .../docs/components/installation/remix.mdx | 0 .../docs/components/installation/vite.mdx | 0 .../{ => cn}/docs/components/introduction.mdx | 0 .../{ => cn}/docs/components/theming.mdx | 0 apps/www/content/{ => cn}/docs/controlled.mdx | 0 apps/www/content/{ => cn}/docs/copilot.mdx | 0 apps/www/content/{ => cn}/docs/csv.mdx | 0 .../content/{ => cn}/docs/cursor-overlay.mdx | 0 apps/www/content/{ => cn}/docs/date.mdx | 0 apps/www/content/{ => cn}/docs/debugging.mdx | 0 apps/www/content/{ => cn}/docs/dnd.mdx | 0 apps/www/content/{ => cn}/docs/docx.mdx | 0 .../content/{ => cn}/docs/editor-methods.mdx | 0 apps/www/content/{ => cn}/docs/editor.mdx | 0 apps/www/content/{ => cn}/docs/emoji.mdx | 0 apps/www/content/{ => cn}/docs/equation.mdx | 0 .../{ => cn}/docs/examples/editable-voids.mdx | 0 .../content/{ => cn}/docs/examples/export.mdx | 0 .../docs/examples/hundreds-blocks.mdx | 0 .../docs/examples/hundreds-editors.mdx | 0 .../docs/examples/preview-markdown.mdx | 0 .../docs/examples/version-history.mdx | 0 apps/www/content/{ => cn}/docs/excalidraw.mdx | 0 apps/www/content/{ => cn}/docs/exit-break.mdx | 0 .../content/{ => cn}/docs/find-replace.mdx | 0 apps/www/content/{ => cn}/docs/font.mdx | 0 .../content/{ => cn}/docs/forced-layout.mdx | 0 .../content/{ => cn}/docs/getting-started.mdx | 0 apps/www/content/{ => cn}/docs/highlight.mdx | 0 .../content/{ => cn}/docs/horizontal-rule.mdx | 0 apps/www/content/{ => cn}/docs/html.mdx | 0 apps/www/content/{ => cn}/docs/img.png | Bin .../www/content/{ => cn}/docs/indent-list.mdx | 0 apps/www/content/{ => cn}/docs/indent.mdx | 0 apps/www/content/{ => cn}/docs/index.mdx | 0 apps/www/content/{ => cn}/docs/kbd.mdx | 0 .../www/content/{ => cn}/docs/line-height.mdx | 0 apps/www/content/{ => cn}/docs/link.mdx | 0 apps/www/content/{ => cn}/docs/list.mdx | 0 apps/www/content/{ => cn}/docs/markdown.mdx | 0 apps/www/content/{ => cn}/docs/media.mdx | 0 apps/www/content/{ => cn}/docs/mention.mdx | 0 .../docs/migration/slate-to-plate.mdx | 0 .../content/{ => cn}/docs/multi-select.mdx | 0 apps/www/content/{ => cn}/docs/node-id.mdx | 0 apps/www/content/{ => cn}/docs/playwright.mdx | 0 .../{ => cn}/docs/plugin-components.mdx | 0 .../content/{ => cn}/docs/plugin-context.mdx | 0 .../content/{ => cn}/docs/plugin-methods.mdx | 0 .../{ => cn}/docs/plugin-shortcuts.mdx | 0 apps/www/content/{ => cn}/docs/plugin.mdx | 0 apps/www/content/{ => cn}/docs/reset-node.mdx | 0 apps/www/content/{ => cn}/docs/select.mdx | 0 .../www/content/{ => cn}/docs/single-line.mdx | 0 .../content/{ => cn}/docs/slash-command.mdx | 0 apps/www/content/{ => cn}/docs/soft-break.mdx | 0 apps/www/content/{ => cn}/docs/tabbable.mdx | 0 apps/www/content/{ => cn}/docs/table.mdx | 0 apps/www/content/{ => cn}/docs/tag.mdx | 0 apps/www/content/{ => cn}/docs/toc.mdx | 0 apps/www/content/{ => cn}/docs/toggle.mdx | 0 .../content/{ => cn}/docs/trailing-block.mdx | 0 .../content/{ => cn}/docs/unit-testing.mdx | 0 apps/www/content/en/docs/ai.mdx | 416 +++++ apps/www/content/en/docs/alignment.mdx | 113 ++ apps/www/content/{ => en}/docs/api/cn.mdx | 0 apps/www/content/{ => en}/docs/api/common.mdx | 0 apps/www/content/{ => en}/docs/api/core.mdx | 0 .../docs/api/core/plate-controller.mdx | 0 .../{ => en}/docs/api/core/plate-editor.mdx | 0 .../{ => en}/docs/api/core/plate-plugin.mdx | 0 .../content/{ => en}/docs/api/core/plate.mdx | 0 .../content/{ => en}/docs/api/core/store.mdx | 0 apps/www/content/en/docs/api/floating.mdx | 164 ++ apps/www/content/en/docs/api/react-utils.mdx | 82 + apps/www/content/en/docs/api/resizable.mdx | 206 +++ apps/www/content/en/docs/api/slate-react.mdx | 101 ++ apps/www/content/en/docs/api/slate-utils.mdx | 1038 +++++++++++ apps/www/content/en/docs/api/slate.mdx | 314 ++++ apps/www/content/en/docs/api/utils.mdx | 374 ++++ apps/www/content/en/docs/autoformat.mdx | 320 ++++ apps/www/content/en/docs/basic-elements.mdx | 295 ++++ apps/www/content/en/docs/basic-marks.mdx | 136 ++ apps/www/content/en/docs/block-menu.mdx | 114 ++ apps/www/content/en/docs/block-selection.mdx | 379 +++++ apps/www/content/en/docs/callout.mdx | 143 ++ apps/www/content/en/docs/caption.mdx | 159 ++ apps/www/content/en/docs/collaboration.mdx | 158 ++ apps/www/content/en/docs/column.mdx | 181 ++ apps/www/content/en/docs/combobox.mdx | 219 +++ apps/www/content/en/docs/comments.mdx | 643 +++++++ .../content/en/docs/components/changelog.mdx | 582 +++++++ apps/www/content/en/docs/components/cli.mdx | 146 ++ .../en/docs/components/components-json.mdx | 217 +++ .../en/docs/components/dark-mode/index.mdx | 33 + .../en/docs/components/dark-mode/next.mdx | 68 + .../en/docs/components/dark-mode/vite.mdx | 150 ++ .../en/docs/components/installation.mdx | 102 ++ .../en/docs/components/installation/astro.mdx | 48 + .../docs/components/installation/gatsby.mdx | 48 + .../docs/components/installation/laravel.mdx | 48 + .../docs/components/installation/manual.mdx | 107 ++ .../en/docs/components/installation/next.mdx | 81 + .../en/docs/components/installation/remix.mdx | 48 + .../en/docs/components/installation/vite.mdx | 48 + .../en/docs/components/introduction.mdx | 92 + .../content/en/docs/components/theming.mdx | 190 +++ apps/www/content/en/docs/controlled.mdx | 71 + apps/www/content/en/docs/copilot.mdx | 223 +++ apps/www/content/en/docs/csv.mdx | 102 ++ apps/www/content/en/docs/cursor-overlay.mdx | 138 ++ apps/www/content/en/docs/date.mdx | 90 + apps/www/content/en/docs/debugging.mdx | 210 +++ apps/www/content/en/docs/dnd.mdx | 364 ++++ apps/www/content/en/docs/docx.mdx | 44 + apps/www/content/en/docs/editor-methods.mdx | 240 +++ apps/www/content/en/docs/editor.mdx | 267 +++ apps/www/content/en/docs/emoji.mdx | 54 + apps/www/content/en/docs/equation.mdx | 113 ++ .../en/docs/examples/editable-voids.mdx | 5 + apps/www/content/en/docs/examples/export.mdx | 47 + .../en/docs/examples/hundreds-blocks.mdx | 5 + .../en/docs/examples/hundreds-editors.mdx | 5 + .../en/docs/examples/preview-markdown.mdx | 5 + .../en/docs/examples/version-history.mdx | 26 + apps/www/content/en/docs/excalidraw.mdx | 98 ++ apps/www/content/en/docs/exit-break.mdx | 196 +++ apps/www/content/en/docs/find-replace.mdx | 24 + apps/www/content/en/docs/font.mdx | 154 ++ apps/www/content/en/docs/forced-layout.mdx | 84 + apps/www/content/en/docs/getting-started.mdx | 300 ++++ apps/www/content/en/docs/highlight.mdx | 47 + apps/www/content/en/docs/horizontal-rule.mdx | 63 + apps/www/content/en/docs/html.mdx | 388 +++++ apps/www/content/en/docs/img.png | Bin 0 -> 67204 bytes apps/www/content/en/docs/indent-list.mdx | 329 ++++ apps/www/content/en/docs/indent.mdx | 204 +++ apps/www/content/en/docs/index.mdx | 63 + apps/www/content/en/docs/kbd.mdx | 49 + apps/www/content/en/docs/line-height.mdx | 94 + apps/www/content/en/docs/link.mdx | 666 ++++++++ apps/www/content/en/docs/list.mdx | 852 ++++++++++ apps/www/content/en/docs/markdown.mdx | 143 ++ apps/www/content/en/docs/media.mdx | 936 ++++++++++ apps/www/content/en/docs/mention.mdx | 83 + .../en/docs/migration/slate-to-plate.mdx | 217 +++ apps/www/content/en/docs/multi-select.mdx | 225 +++ apps/www/content/en/docs/node-id.mdx | 171 ++ apps/www/content/en/docs/playwright.mdx | 295 ++++ .../www/content/en/docs/plugin-components.mdx | 100 ++ apps/www/content/en/docs/plugin-context.mdx | 183 ++ apps/www/content/en/docs/plugin-methods.mdx | 309 ++++ apps/www/content/en/docs/plugin-shortcuts.mdx | 207 +++ apps/www/content/en/docs/plugin.mdx | 389 +++++ apps/www/content/en/docs/reset-node.mdx | 106 ++ apps/www/content/en/docs/select.mdx | 152 ++ apps/www/content/en/docs/single-line.mdx | 34 + apps/www/content/en/docs/slash-command.mdx | 114 ++ apps/www/content/en/docs/soft-break.mdx | 72 + apps/www/content/en/docs/tabbable.mdx | 143 ++ apps/www/content/en/docs/table.mdx | 1512 +++++++++++++++++ apps/www/content/en/docs/tag.mdx | 7 + apps/www/content/en/docs/toc.mdx | 269 +++ apps/www/content/en/docs/toggle.mdx | 192 +++ apps/www/content/en/docs/trailing-block.mdx | 62 + apps/www/content/en/docs/unit-testing.mdx | 262 +++ apps/www/contentlayer.config.js | 2 +- 208 files changed, 20900 insertions(+), 1 deletion(-) create mode 100644 .ai/translate.md rename apps/www/content/{ => cn}/docs/ai.mdx (100%) rename apps/www/content/{ => cn}/docs/alignment.mdx (100%) create mode 100644 apps/www/content/cn/docs/api/cn.mdx create mode 100644 apps/www/content/cn/docs/api/common.mdx create mode 100644 apps/www/content/cn/docs/api/core.mdx create mode 100644 apps/www/content/cn/docs/api/core/plate-controller.mdx create mode 100644 apps/www/content/cn/docs/api/core/plate-editor.mdx create mode 100644 apps/www/content/cn/docs/api/core/plate-plugin.mdx create mode 100644 apps/www/content/cn/docs/api/core/plate.mdx create mode 100644 apps/www/content/cn/docs/api/core/store.mdx rename apps/www/content/{ => cn}/docs/api/floating.mdx (100%) rename apps/www/content/{ => cn}/docs/api/react-utils.mdx (100%) rename apps/www/content/{ => cn}/docs/api/resizable.mdx (100%) rename apps/www/content/{ => cn}/docs/api/slate-react.mdx (100%) rename apps/www/content/{ => cn}/docs/api/slate-utils.mdx (100%) rename apps/www/content/{ => cn}/docs/api/slate.mdx (100%) rename apps/www/content/{ => cn}/docs/api/utils.mdx (100%) rename apps/www/content/{ => cn}/docs/autoformat.mdx (100%) rename apps/www/content/{ => cn}/docs/basic-elements.mdx (100%) rename apps/www/content/{ => cn}/docs/basic-marks.mdx (100%) rename apps/www/content/{ => cn}/docs/block-menu.mdx (100%) rename apps/www/content/{ => cn}/docs/block-selection.mdx (100%) rename apps/www/content/{ => cn}/docs/callout.mdx (100%) rename apps/www/content/{ => cn}/docs/caption.mdx (100%) rename apps/www/content/{ => cn}/docs/collaboration.mdx (100%) rename apps/www/content/{ => cn}/docs/column.mdx (100%) rename apps/www/content/{ => cn}/docs/combobox.mdx (100%) rename apps/www/content/{ => cn}/docs/comments.mdx (100%) rename apps/www/content/{ => cn}/docs/components/changelog.mdx (100%) rename apps/www/content/{ => cn}/docs/components/cli.mdx (100%) rename apps/www/content/{ => cn}/docs/components/components-json.mdx (100%) rename apps/www/content/{ => cn}/docs/components/dark-mode/index.mdx (100%) rename apps/www/content/{ => cn}/docs/components/dark-mode/next.mdx (100%) rename apps/www/content/{ => cn}/docs/components/dark-mode/vite.mdx (100%) rename apps/www/content/{ => cn}/docs/components/installation.mdx (100%) rename apps/www/content/{ => cn}/docs/components/installation/astro.mdx (100%) rename apps/www/content/{ => cn}/docs/components/installation/gatsby.mdx (100%) rename apps/www/content/{ => cn}/docs/components/installation/laravel.mdx (100%) rename apps/www/content/{ => cn}/docs/components/installation/manual.mdx (100%) rename apps/www/content/{ => cn}/docs/components/installation/next.mdx (100%) rename apps/www/content/{ => cn}/docs/components/installation/remix.mdx (100%) rename apps/www/content/{ => cn}/docs/components/installation/vite.mdx (100%) rename apps/www/content/{ => cn}/docs/components/introduction.mdx (100%) rename apps/www/content/{ => cn}/docs/components/theming.mdx (100%) rename apps/www/content/{ => cn}/docs/controlled.mdx (100%) rename apps/www/content/{ => cn}/docs/copilot.mdx (100%) rename apps/www/content/{ => cn}/docs/csv.mdx (100%) rename apps/www/content/{ => cn}/docs/cursor-overlay.mdx (100%) rename apps/www/content/{ => cn}/docs/date.mdx (100%) rename apps/www/content/{ => cn}/docs/debugging.mdx (100%) rename apps/www/content/{ => cn}/docs/dnd.mdx (100%) rename apps/www/content/{ => cn}/docs/docx.mdx (100%) rename apps/www/content/{ => cn}/docs/editor-methods.mdx (100%) rename apps/www/content/{ => cn}/docs/editor.mdx (100%) rename apps/www/content/{ => cn}/docs/emoji.mdx (100%) rename apps/www/content/{ => cn}/docs/equation.mdx (100%) rename apps/www/content/{ => cn}/docs/examples/editable-voids.mdx (100%) rename apps/www/content/{ => cn}/docs/examples/export.mdx (100%) rename apps/www/content/{ => cn}/docs/examples/hundreds-blocks.mdx (100%) rename apps/www/content/{ => cn}/docs/examples/hundreds-editors.mdx (100%) rename apps/www/content/{ => cn}/docs/examples/preview-markdown.mdx (100%) rename apps/www/content/{ => cn}/docs/examples/version-history.mdx (100%) rename apps/www/content/{ => cn}/docs/excalidraw.mdx (100%) rename apps/www/content/{ => cn}/docs/exit-break.mdx (100%) rename apps/www/content/{ => cn}/docs/find-replace.mdx (100%) rename apps/www/content/{ => cn}/docs/font.mdx (100%) rename apps/www/content/{ => cn}/docs/forced-layout.mdx (100%) rename apps/www/content/{ => cn}/docs/getting-started.mdx (100%) rename apps/www/content/{ => cn}/docs/highlight.mdx (100%) rename apps/www/content/{ => cn}/docs/horizontal-rule.mdx (100%) rename apps/www/content/{ => cn}/docs/html.mdx (100%) rename apps/www/content/{ => cn}/docs/img.png (100%) rename apps/www/content/{ => cn}/docs/indent-list.mdx (100%) rename apps/www/content/{ => cn}/docs/indent.mdx (100%) rename apps/www/content/{ => cn}/docs/index.mdx (100%) rename apps/www/content/{ => cn}/docs/kbd.mdx (100%) rename apps/www/content/{ => cn}/docs/line-height.mdx (100%) rename apps/www/content/{ => cn}/docs/link.mdx (100%) rename apps/www/content/{ => cn}/docs/list.mdx (100%) rename apps/www/content/{ => cn}/docs/markdown.mdx (100%) rename apps/www/content/{ => cn}/docs/media.mdx (100%) rename apps/www/content/{ => cn}/docs/mention.mdx (100%) rename apps/www/content/{ => cn}/docs/migration/slate-to-plate.mdx (100%) rename apps/www/content/{ => cn}/docs/multi-select.mdx (100%) rename apps/www/content/{ => cn}/docs/node-id.mdx (100%) rename apps/www/content/{ => cn}/docs/playwright.mdx (100%) rename apps/www/content/{ => cn}/docs/plugin-components.mdx (100%) rename apps/www/content/{ => cn}/docs/plugin-context.mdx (100%) rename apps/www/content/{ => cn}/docs/plugin-methods.mdx (100%) rename apps/www/content/{ => cn}/docs/plugin-shortcuts.mdx (100%) rename apps/www/content/{ => cn}/docs/plugin.mdx (100%) rename apps/www/content/{ => cn}/docs/reset-node.mdx (100%) rename apps/www/content/{ => cn}/docs/select.mdx (100%) rename apps/www/content/{ => cn}/docs/single-line.mdx (100%) rename apps/www/content/{ => cn}/docs/slash-command.mdx (100%) rename apps/www/content/{ => cn}/docs/soft-break.mdx (100%) rename apps/www/content/{ => cn}/docs/tabbable.mdx (100%) rename apps/www/content/{ => cn}/docs/table.mdx (100%) rename apps/www/content/{ => cn}/docs/tag.mdx (100%) rename apps/www/content/{ => cn}/docs/toc.mdx (100%) rename apps/www/content/{ => cn}/docs/toggle.mdx (100%) rename apps/www/content/{ => cn}/docs/trailing-block.mdx (100%) rename apps/www/content/{ => cn}/docs/unit-testing.mdx (100%) create mode 100644 apps/www/content/en/docs/ai.mdx create mode 100644 apps/www/content/en/docs/alignment.mdx rename apps/www/content/{ => en}/docs/api/cn.mdx (100%) rename apps/www/content/{ => en}/docs/api/common.mdx (100%) rename apps/www/content/{ => en}/docs/api/core.mdx (100%) rename apps/www/content/{ => en}/docs/api/core/plate-controller.mdx (100%) rename apps/www/content/{ => en}/docs/api/core/plate-editor.mdx (100%) rename apps/www/content/{ => en}/docs/api/core/plate-plugin.mdx (100%) rename apps/www/content/{ => en}/docs/api/core/plate.mdx (100%) rename apps/www/content/{ => en}/docs/api/core/store.mdx (100%) create mode 100644 apps/www/content/en/docs/api/floating.mdx create mode 100644 apps/www/content/en/docs/api/react-utils.mdx create mode 100644 apps/www/content/en/docs/api/resizable.mdx create mode 100644 apps/www/content/en/docs/api/slate-react.mdx create mode 100644 apps/www/content/en/docs/api/slate-utils.mdx create mode 100644 apps/www/content/en/docs/api/slate.mdx create mode 100644 apps/www/content/en/docs/api/utils.mdx create mode 100644 apps/www/content/en/docs/autoformat.mdx create mode 100644 apps/www/content/en/docs/basic-elements.mdx create mode 100644 apps/www/content/en/docs/basic-marks.mdx create mode 100644 apps/www/content/en/docs/block-menu.mdx create mode 100644 apps/www/content/en/docs/block-selection.mdx create mode 100644 apps/www/content/en/docs/callout.mdx create mode 100644 apps/www/content/en/docs/caption.mdx create mode 100644 apps/www/content/en/docs/collaboration.mdx create mode 100644 apps/www/content/en/docs/column.mdx create mode 100644 apps/www/content/en/docs/combobox.mdx create mode 100644 apps/www/content/en/docs/comments.mdx create mode 100644 apps/www/content/en/docs/components/changelog.mdx create mode 100644 apps/www/content/en/docs/components/cli.mdx create mode 100644 apps/www/content/en/docs/components/components-json.mdx create mode 100644 apps/www/content/en/docs/components/dark-mode/index.mdx create mode 100644 apps/www/content/en/docs/components/dark-mode/next.mdx create mode 100644 apps/www/content/en/docs/components/dark-mode/vite.mdx create mode 100644 apps/www/content/en/docs/components/installation.mdx create mode 100644 apps/www/content/en/docs/components/installation/astro.mdx create mode 100644 apps/www/content/en/docs/components/installation/gatsby.mdx create mode 100644 apps/www/content/en/docs/components/installation/laravel.mdx create mode 100644 apps/www/content/en/docs/components/installation/manual.mdx create mode 100644 apps/www/content/en/docs/components/installation/next.mdx create mode 100644 apps/www/content/en/docs/components/installation/remix.mdx create mode 100644 apps/www/content/en/docs/components/installation/vite.mdx create mode 100644 apps/www/content/en/docs/components/introduction.mdx create mode 100644 apps/www/content/en/docs/components/theming.mdx create mode 100644 apps/www/content/en/docs/controlled.mdx create mode 100644 apps/www/content/en/docs/copilot.mdx create mode 100644 apps/www/content/en/docs/csv.mdx create mode 100644 apps/www/content/en/docs/cursor-overlay.mdx create mode 100644 apps/www/content/en/docs/date.mdx create mode 100644 apps/www/content/en/docs/debugging.mdx create mode 100644 apps/www/content/en/docs/dnd.mdx create mode 100644 apps/www/content/en/docs/docx.mdx create mode 100644 apps/www/content/en/docs/editor-methods.mdx create mode 100644 apps/www/content/en/docs/editor.mdx create mode 100644 apps/www/content/en/docs/emoji.mdx create mode 100644 apps/www/content/en/docs/equation.mdx create mode 100644 apps/www/content/en/docs/examples/editable-voids.mdx create mode 100644 apps/www/content/en/docs/examples/export.mdx create mode 100644 apps/www/content/en/docs/examples/hundreds-blocks.mdx create mode 100644 apps/www/content/en/docs/examples/hundreds-editors.mdx create mode 100644 apps/www/content/en/docs/examples/preview-markdown.mdx create mode 100644 apps/www/content/en/docs/examples/version-history.mdx create mode 100644 apps/www/content/en/docs/excalidraw.mdx create mode 100644 apps/www/content/en/docs/exit-break.mdx create mode 100644 apps/www/content/en/docs/find-replace.mdx create mode 100644 apps/www/content/en/docs/font.mdx create mode 100644 apps/www/content/en/docs/forced-layout.mdx create mode 100644 apps/www/content/en/docs/getting-started.mdx create mode 100644 apps/www/content/en/docs/highlight.mdx create mode 100644 apps/www/content/en/docs/horizontal-rule.mdx create mode 100644 apps/www/content/en/docs/html.mdx create mode 100644 apps/www/content/en/docs/img.png create mode 100644 apps/www/content/en/docs/indent-list.mdx create mode 100644 apps/www/content/en/docs/indent.mdx create mode 100644 apps/www/content/en/docs/index.mdx create mode 100644 apps/www/content/en/docs/kbd.mdx create mode 100644 apps/www/content/en/docs/line-height.mdx create mode 100644 apps/www/content/en/docs/link.mdx create mode 100644 apps/www/content/en/docs/list.mdx create mode 100644 apps/www/content/en/docs/markdown.mdx create mode 100644 apps/www/content/en/docs/media.mdx create mode 100644 apps/www/content/en/docs/mention.mdx create mode 100644 apps/www/content/en/docs/migration/slate-to-plate.mdx create mode 100644 apps/www/content/en/docs/multi-select.mdx create mode 100644 apps/www/content/en/docs/node-id.mdx create mode 100644 apps/www/content/en/docs/playwright.mdx create mode 100644 apps/www/content/en/docs/plugin-components.mdx create mode 100644 apps/www/content/en/docs/plugin-context.mdx create mode 100644 apps/www/content/en/docs/plugin-methods.mdx create mode 100644 apps/www/content/en/docs/plugin-shortcuts.mdx create mode 100644 apps/www/content/en/docs/plugin.mdx create mode 100644 apps/www/content/en/docs/reset-node.mdx create mode 100644 apps/www/content/en/docs/select.mdx create mode 100644 apps/www/content/en/docs/single-line.mdx create mode 100644 apps/www/content/en/docs/slash-command.mdx create mode 100644 apps/www/content/en/docs/soft-break.mdx create mode 100644 apps/www/content/en/docs/tabbable.mdx create mode 100644 apps/www/content/en/docs/table.mdx create mode 100644 apps/www/content/en/docs/tag.mdx create mode 100644 apps/www/content/en/docs/toc.mdx create mode 100644 apps/www/content/en/docs/toggle.mdx create mode 100644 apps/www/content/en/docs/trailing-block.mdx create mode 100644 apps/www/content/en/docs/unit-testing.mdx diff --git a/.ai/translate.md b/.ai/translate.md new file mode 100644 index 0000000000..d8cf7a0a60 --- /dev/null +++ b/.ai/translate.md @@ -0,0 +1,26 @@ +Convert all the content into Chinese, excluding any variables And key names, such as Plate. +The following JSX and markdown codeblock like ```tsx must not be translated. + +# Important Notice +1.DONOT remove any content. +2.You can translate the title markdown ## Plugin Context. +3.Please ensure that the number of lines in the translated file MATCHES the original. + +For Example: + +xxxx content + +```ts +(api: (ctx: PlatePluginContext) => any) => PlatePlugin +``` + + +After translate: + +xxxx 内容 + +```ts +(api: (ctx: PlatePluginContext) => any) => PlatePlugin +``` + + diff --git a/apps/www/content/docs/ai.mdx b/apps/www/content/cn/docs/ai.mdx similarity index 100% rename from apps/www/content/docs/ai.mdx rename to apps/www/content/cn/docs/ai.mdx diff --git a/apps/www/content/docs/alignment.mdx b/apps/www/content/cn/docs/alignment.mdx similarity index 100% rename from apps/www/content/docs/alignment.mdx rename to apps/www/content/cn/docs/alignment.mdx diff --git a/apps/www/content/cn/docs/api/cn.mdx b/apps/www/content/cn/docs/api/cn.mdx new file mode 100644 index 0000000000..0946de7910 --- /dev/null +++ b/apps/www/content/cn/docs/api/cn.mdx @@ -0,0 +1,78 @@ +--- +title: cn +description: @udecode/cn 的 API 参考。 +--- + +`@udecode/cn` 包含用于 React 和 Tailwind 的实用函数。 + +### cn + +在不产生冲突的情况下有条件地添加 Tailwind CSS 类。 + + + + 使用 `clsx` 和 `tailwind-merge` 设置的类值。 + + + + +`className` 字符串。 + + + +### withCn + +为组件设置默认的 `className`。 + + + + 将要添加 props 的组件。 + + + 使用 `cn` 设置的默认 `className`。 + + + + +包含默认 `className` 的新组件。 + + + +### withProps + +为组件设置默认 props。 + + + + 将要添加 props 的组件。 + + + 要添加到组件的 props。 + + + + +包含默认 props 的新组件。 + + + +### withVariants + +使用 `class-variance-authority` 的变体为组件设置默认 `className`。 + + + + 将要添加 props 的组件。 + + + 作为默认 `className` 的变体。 + + + 从 `Component` 中排除的 props。设置仅用于变体的 props。 + + + + +包含默认 `className` 的新组件。 + + diff --git a/apps/www/content/cn/docs/api/common.mdx b/apps/www/content/cn/docs/api/common.mdx new file mode 100644 index 0000000000..b4eb9b2cc1 --- /dev/null +++ b/apps/www/content/cn/docs/api/common.mdx @@ -0,0 +1,11 @@ +--- +title: Plate Common +description: @udecode/plate-common 的 API 参考。 +--- + +`@udecode/plate-common` 包含 Plate 的常用类型和函数： + +- [Core](/docs/api/core) +- [Plate Utils](/docs/api/utils) +- [Slate](/docs/api/slate) +- [Slate React](/docs/api/slate-react) diff --git a/apps/www/content/cn/docs/api/core.mdx b/apps/www/content/cn/docs/api/core.mdx new file mode 100644 index 0000000000..c95cdc26f5 --- /dev/null +++ b/apps/www/content/cn/docs/api/core.mdx @@ -0,0 +1,489 @@ +--- +title: Plate Core +description: @udecode/plate-core 的 API 参考。 +--- + +## API + +### createPlateEditor + +生成一个新的 `PlateEditor` 实例，使用一组插件及其配置进行初始化。 + + + + 创建 Plate 编辑器的选项。 + + + 编辑器的唯一标识符。 + + + 不带 `withPlate` 的初始编辑器。 + + + 编辑器插件数组。 + + + 编辑器的初始值。 + + + 初始化后选择编辑器。 + - **默认值：** `false` + - `true` | 'end'：选择编辑器末尾 + - `false`：不选择任何内容 + - `'start'`：选择编辑器开头 + + + 指定编辑器允许的最大字符数。 + + + 编辑器的初始选择。 + + + 当为 `true` 时，将规范化传递给 `editor` 的初始 `value`。 + - **默认值：** `false` + + + 配置根插件的函数。 + + + 编辑器的 API 方法。 + + + 编辑器的装饰函数。 + + + 扩展编辑器的函数。 + + + 编辑器的事件处理程序。 + + + 编辑器的注入配置。 + + + 规范化初始值的函数。 + + + 编辑器的其他选项。 + + + 编辑器的覆盖配置。 + + + 编辑器插件的优先级。 + + + 编辑器的渲染函数。 + + + 编辑器的键盘快捷键。 + + + 编辑器的转换函数。 + + + 与编辑器一起使用的钩子。 + + + + + + + 应用了指定插件和设置的 `PlateEditor` 实例。 + + +有关编辑器配置的更多详细信息，请参阅[编辑器配置](/docs/editor)指南。 + +### createPlatePlugin + +使用给定的配置创建一个新的 Plate 插件，支持扩展、嵌套插件操作和运行时配置。 + + + + 插件的配置对象，或返回配置的函数。如果提供函数，它将在插件与编辑器一起解析时执行。 + + 有关 `PlatePluginConfig` 类型的详细信息，请参阅 [PlatePlugin API](/docs/api/core/plate-plugin#plugin-properties)。 + + + + + 一个新的 `PlatePlugin>` 实例。 + + +### createTPlatePlugin + +`createPlatePlugin` 的显式类型版本。 + + + + 插件的配置对象，或返回配置的函数。此版本需要一个显式类型参数 `C` 扩展 `AnyPluginConfig`。 + + 有关 `TPlatePluginConfig` 类型的详细信息，请参阅 [PlatePlugin API](/docs/api/core/plate-plugin#plugin-properties)。 + + + + + 一个新的 `PlatePlugin` 实例。 + + +### toPlatePlugin + +扩展 SlatePlugin 以创建 React PlatePlugin。 + + + + 要扩展的基础 SlatePlugin。 + + + 提供扩展配置的函数或对象。如果是函数，它接收插件上下文并应返回部分 PlatePlugin。如果是对象，它应该是部分 PlatePlugin 配置。 + + + + + 一个新的 `PlatePlugin`，它结合了基础 SlatePlugin 功能和扩展配置中定义的 React 特定功能。 + + +### toTPlatePlugin + +`toPlatePlugin` 的显式类型版本。 + + + + 要扩展的基础 SlatePlugin。 + + + 提供扩展配置的函数或对象。此版本需要基础插件配置（`TContext`）和扩展配置（`C`）的显式类型参数。 + + + + + 具有精确类型控制的新 `PlatePlugin`。 + + +### useEditorContainerRef + +获取编辑器容器的 DOM 引用。 + +### useEditorScrollRef + +获取编辑器滚动容器的引用。 + +### useScrollRef + +获取编辑器滚动容器的引用。如果存在滚动引用则返回滚动引用，否则返回容器引用。 + +### useEditorPlugin + +获取编辑器和插件上下文。 + + + + 具有必需键的插件或插件配置。 + + + + + 包含以下内容的 `PlatePluginContext` 对象： + + + 当前编辑器实例。 + + + 插件实例。 + + + 获取特定选项值的函数。 + + + 获取插件所有选项的函数。 + + + 设置特定选项值的函数。 + + + 设置多个选项的函数。 + + + 在 React 组件中订阅特定选项值的钩子。 + + + + +### useEditorRef + +获取 Slate 编辑器引用而不重新渲染。 + + + + plate 编辑器的 ID。仅在嵌套编辑器时有用。默认使用最近的编辑器 id。 + + + + 一个 `PlateEditor` 对象，即 Slate 编辑器。 + + +### useEditorSelector + +订阅编辑器的特定属性。 + + + + 选择器函数。 + + + 选择器函数的依赖列表。 + + + + + plate 编辑器的 ID。仅在嵌套编辑器时有用。默认使用最近的编辑器 id。 + + + 用于确定选择器函数的结果是否已更改的相等函数。默认为 `(a, b) => a === b`。 + + + + + + 选择器函数的返回值。 + + +### useEditorState + +获取带重新渲染的 Slate 编辑器引用。 + + + + plate 编辑器的 ID。默认使用最近的编辑器 id。 + + + + 一个 `PlateEditor` 对象，即 Slate 编辑器。 + + +### useEditorReadOnly + +获取编辑器的 `readOnly` 状态。 + + + + plate 编辑器的 ID。 + + + + 编辑器的 `readOnly` 状态。 + + +### useEditorMounted + +获取编辑器的 `isMounted` 状态。 + + + + plate 编辑器的 ID。 + + + + 编辑器的 `isMounted` 状态。 + + +### useEditorSelection + +获取编辑器的选择。已记忆化，因此如果范围相同则不会重新渲染。 + + + + plate 编辑器的 ID。 + + +编辑器中的当前选择。 + +### useEditorVersion + +获取编辑器值的版本。该版本在每次编辑器更改时递增。 + + + + plate 编辑器的 ID。 + + +编辑器值的当前版本。 + +### useSelectionVersion + +获取编辑器选择的版本。该版本在每次选择更改时递增（范围不同）。 + + + + plate 编辑器的 ID。 + + +编辑器选择的当前版本。 + +### useSelectionCollapsed + +返回当前选择是否已折叠（即选择是单个点）。 + + + 一个布尔值，指示选择是否已折叠。 + + +### useSelectionExpanded + +返回当前选择是否已展开（即选择有非零范围）。 + + + 一个布尔值，指示选择是否已展开。 + + +### useSelectionWithinBlock + +返回当前选择是否在单个块内。 + + + 一个布尔值，指示选择是否在单个块内。 + + +### useSelectionAcrossBlocks + +返回当前选择是否跨越多个块。 + + + 一个布尔值，指示选择是否跨越多个块。 + + +### useSelectionFragment + +返回当前选择的片段，可选择解包结构节点。 + + + + 获取选择片段的选项。 + + + 要从片段中解包的结构类型数组。 + + + + + + + 表示当前选择片段的 `TElement` 数组。如果选择未展开或未找到片段，则返回空数组。 + + +### useSelectionFragmentProp + +返回从当前选择片段派生的属性值。 + + + + + + 要从片段中解包的结构类型数组。 + + + 要从每个节点提取的属性键。 + + + 如果未找到有效属性时返回的默认值。 + + + 从节点提取属性值的自定义函数。 + + + 确定如何遍历片段： + - 'all'：检查块节点和文本节点 + - 'block'：仅检查块节点 + - 'text'：仅检查文本节点 + 默认为 'block'。 + + + + + + + 从片段节点派生的值，如果在指定节点中未找到一致的值，则为 undefined。 + + +### useNodePath + +返回编辑器中节点的路径。 + + + + 要查找路径的节点。 + + + + + 表示节点在编辑器树结构中位置的记忆化 Path 数组。 + + +### usePath + +获取最近元素的记忆化路径。 + + + + 要获取路径的插件的键。 + + + + + 元素的路径，如果在节点组件上下文之外使用则为 `undefined`。 + + +### useElement + +通过插件键获取元素。 + + + + 要获取元素的插件的键。 + - **默认值：** `'element'` + + + + + 类型为 `T extends TElement` 的元素，如果在节点组件上下文之外使用则为空对象。 + + +## 核心插件 + +### DebugPlugin +提供具有可配置日志级别和错误处理的调试功能。 + +有关更多详细信息，请参阅[调试](/docs/debugging)。 + +### SlateNextPlugin +扩展核心 API 并改进默认功能。 + +### DOMPlugin & ReactPlugin +将 React 特定功能集成到编辑器中。 + +### HistoryPlugin +为编辑器启用撤销和重做功能。 + +### InlineVoidPlugin +管理编辑器中的内联和空元素。 + +### ParserPlugin +处理编辑器的内容解析。 + +### LengthPlugin +强制执行编辑器内容的最大长度。 + +### HtmlPlugin +启用 HTML 序列化和反序列化。 + +### AstPlugin +处理编辑器的抽象语法树（AST）操作。 + +### ParagraphPlugin +提供段落格式化功能。 + +### EventEditorPlugin +管理编辑器事件，如焦点和模糊。 + +### PlateApiPlugin +提供 Plate 编辑器功能的核心 API。 diff --git a/apps/www/content/cn/docs/api/core/plate-controller.mdx b/apps/www/content/cn/docs/api/core/plate-controller.mdx new file mode 100644 index 0000000000..f4f7bca908 --- /dev/null +++ b/apps/www/content/cn/docs/api/core/plate-controller.mdx @@ -0,0 +1,172 @@ +--- +title: PlateController +description: PlateController 组件的 API 参考。 +--- + +**`PlateController`** 是一个可选的 provider 组件，它可以让你从各自的 **`Plate`** 组件外部访问特定的 [Plate Stores](/docs/api/core/store)。 + +## PlateController Store + +### State + +PlateController Store 包含了根据 **`id`** 获取 Plate Store 所需的信息，以及确定当前哪个 **`id`** 处于活动状态。 + + + + +最近获得焦点的 Plate 编辑器的 **`id`**。 + +- **默认值:** `null` + + + + +所有主要 Plate 编辑器的 **`id`**。默认情况下，除非在 **`Plate`** 组件中传入 **`primary={false}`**，否则编辑器被视为主要编辑器。 + +- **默认值:** `[]` + + + + +从每个已挂载的 Plate 编辑器的 **`id`** 到对应该编辑器的 Plate Store 的 **`JotaiStore`** 的映射。 + +- **默认值:** `{}` + + + + +## 使用模式 + +### 通过 ID 访问特定编辑器 + +**`PlateController`** 可以用来通过 **`id`** 访问特定编辑器的 store。注意，如果找不到匹配的编辑器，将返回一个不可变的后备编辑器。 + +```tsx +const App = withHoc(PlateController, () => { + const mainEditor = useEditorRef('main'); + + useEffect(() => { + if (!mainEditor.isFallback) { + console.info('Editor mounted', mainEditor); + } + }, [mainEditor]); + + return ( + <> + + + + + + + + + ); +}); +``` + +### 当前活跃的编辑器 + +如果像 **`useEditorRef`** 这样的钩子在 **`PlateController`** 内部使用，但没有显式传入 **`id`**，它们将解析为当前活动的编辑器。 + +当前活动的编辑器确定如下： + +1. 如果某个编辑器已获得焦点，则返回最后一个这样的编辑器。 +2. 如果某个编辑器是主要编辑器，则返回第一个挂载的这样的编辑器。 +3. 否则，返回一个不可变的后备编辑器。 + +```tsx +const App = withHoc(PlateController, () => { + const activeEditorId = useEditorId(); + const isFallback = !useEditorMounted(); + + const message = isFallback + ? 'Please focus an editor' + : `Active editor: ${activeEditorId}`; + + return ( +
+

{message}

+ + + + + + + + +
+ ); +}); +``` + +## 处理后备编辑器 + +当一个钩子在 **`PlateController`** 内部调用时，如果无法找到匹配的 Plate Store，它将使用 Plate Store 的默认值。**`editor`** 的默认值是 **`createPlateFallbackEditor()`**。后备编辑器就像一个没有插件的空 Plate 编辑器，除了它会在收到 Slate 操作时抛出运行时错误（即它是不可变的，不能在变换中使用）。 + +这样做的原因是确保查询编辑器（例如确定工具栏按钮是否处于活动状态）的代码在失败时使用一个合理的默认值，而变换编辑器（例如按下工具栏按钮）的代码在失败时抛出错误。 + +有两种方法可以确定你正在处理后备编辑器还是真实编辑器： + +- **`useEditorMounted`** 返回 **`false`** 如果无法解析任何挂载的编辑器 +- **`editor.isFallback`** 对于后备编辑器返回 **`true`** + +当在 **`PlateController`** 内部使用像 **`useEditorRef`** 这样的钩子时，你应该采取防御性措施，以确保在出现后备编辑器时适当处理它们。例如，如果 **`useEditorMounted`** 返回 **`false`**，你可以禁用工具栏按钮，或者如果 **`editor.isFallback`** 是 **`true`**，你可以忽略事件。 + +```tsx +const App = withHoc(PlateController, () => { + const activeEditor = useEditorRef(); + + const toggleBold = () => { + if (activeEditor.isFallback) return; + toggleMark(activeEditor, { key: BoldPlugin.key }); + }; + + return ( +
+ + + + + + + + + +
+ ); +}); +``` + +```tsx +const App = withHoc(PlateController, () => { + const activeEditor = useEditorRef(); + const isFallback = !useEditorMounted(); + + const toggleBold = () => { + toggleMark(activeEditor, { key: BoldPlugin.key }); + }; + + return ( +
+ + + + + + + + + +
+ ); +}); +``` \ No newline at end of file diff --git a/apps/www/content/cn/docs/api/core/plate-editor.mdx b/apps/www/content/cn/docs/api/core/plate-editor.mdx new file mode 100644 index 0000000000..8da411f401 --- /dev/null +++ b/apps/www/content/cn/docs/api/core/plate-editor.mdx @@ -0,0 +1,150 @@ +--- +title: Plate Editor +description: Plate 编辑器的 API 参考。 +--- + +一个自定义的编辑器接口，扩展了基础的 **`TEditor`** 接口，并包含 Plate 库特有的属性和方法。 + +## Core Properties + + + + 编辑器的唯一标识符。 + + + 可以用来唯一标识编辑器的键。 + + + 当前正在处理的键盘事件，如果没有事件正在处理，则为 null。 + + + 是否是后备编辑器。 + + - **Default:** `false` + + + 编辑器中的上一个选择范围。 + + + 当前正在使用的插件列表。 + + + 一个插件键值对的记录。 + + + +## API Methods + + + + 获取插件的类型化 API。 + + + 获取插件的类型化变换。 + + + 通过键或基础插件获取编辑器插件实例。 + + + 获取插件的节点类型。 + + + +## Option Methods + + + + 获取插件的特定选项值。 + + + 获取插件的所有选项。 + + + 设置插件的特定选项值。 + + + 设置插件的多个选项。 + + + 获取插件的 zustand-x 选项存储。 + + + +## React Hooks + + + + 在 React 组件中订阅特定选项值。 + + + 在 React 组件中订阅插件选项或派生自选项的值。 + + + +## Plate Store Methods + + + + 更新全局 Plate 状态。 + + + +## Core Plugin APIs + +### DebugPlugin + + + + 在 'log' 级别打印一条消息。 + + + 在 'info' 级别打印一条消息。 + + + 在 'warn' 级别打印一条消息。 + + + 在 'error' 级别打印一条消息。 + + + +### SlateNextPlugin + + + + 切换一个块元素。 + + + 切换选中文本上的标记。 + + + +### HtmlPlugin + + + + 将 HTML 内容反序列化为 Slate 节点。 + + + +### ReactPlugin + + + + 重置编辑器状态，同时保持焦点（如果编辑器已聚焦）。 + + + +### PlateApiPlugin + + + + 重新装饰编辑器。此方法应被覆盖以确保正常功能。 + + + + + + 替换编辑器值。更多信息请参阅 [Controlled Value](/docs/controlled)。 + + diff --git a/apps/www/content/cn/docs/api/core/plate-plugin.mdx b/apps/www/content/cn/docs/api/core/plate-plugin.mdx new file mode 100644 index 0000000000..7aa97ac609 --- /dev/null +++ b/apps/www/content/cn/docs/api/core/plate-plugin.mdx @@ -0,0 +1,333 @@ +--- +title: PlatePlugin +description: Plate 插件的 API 参考。 +--- + +Plate 插件是传递给 `Plate` [plugins](/docs/api/core/plate#plugins) 属性的对象。 + +## 泛型类型 + +`PlatePlugin` 接口使用一个泛型类型： + + + +表示插件配置。此类型扩展了 `PluginConfig`，包括 `key`, `options`, `api`, 和 `transforms`。 + + + +示例： + +```typescript +type MyPluginConfig = PluginConfig< + 'myPlugin', + { customOption: boolean }, + { getData: () => string }, + { customTransform: () => void } +>; + +const MyPlugin = createPlatePlugin({ + key: 'myPlugin', + // plugin implementation +}); +``` + +## Plugin Properties + + + + +Plate 用于存储插件的唯一标识符，通过 `editor.plugins` 键。 + + + +插件提供的 API 函数对象。这些函数通过 `editor.api[key]` 访问。 + + + +插件提供的变换函数，用于修改编辑器状态。这些函数通过 `editor.tf[key]` 访问。 + + + +插件作为选项使用的扩展属性。 + + + +各种编辑器事件的事件处理程序，包括 `onChange`。 + + + +定义插件如何将功能注入其他插件或编辑器。 + + + +Plate 用于将属性注入任何节点组件的属性。 + + + + +要排除的插件键数组。 + + + +要排除的插件键数组。节点属性注入将排除任何这些插件类型的元素的后代节点。 + + +如果为 true，则仅匹配块元素。用于将属性注入块级节点。 + + + +如果为 true，则仅匹配元素节点。用于将属性注入元素节点。 + + +如果为 true，则仅匹配叶子节点。用于将属性注入叶子节点。 + + +节点属性注入的最大嵌套级别。深度大于此级别的节点将不会接收注入的属性。 + + +插件可以使用的属性，用于允许其他插件注入代码。 + + +返回一个插件配置，以注入到其他插件 `inject.plugins` 中指定的目标插件。 + + +`InjectNodeProps` 和 `targetPluginToInject` 函数使用的插件键。 + +- **Default:** `[ParagraphPlugin.key]` + + + + + +定义插件的节点特定配置。 + + + +指示此插件的节点是否应该被渲染为元素。 + + +指示此插件的元素是否应该被视为内联元素。 + + +指示此插件的节点是否应该被渲染为叶子节点。 + + +指示此插件的元素是否应该被视为空元素。 + + +指示此插件的空元素是否可以被标记。 + + +指定此插件节点的类型标识符。 + +- **默认值:** `plugin.key` + + +用于渲染此插件节点的 React 组件。 + + +要传递给节点组件的额外属性。 + + + + + +允许通过键覆盖组件和插件。 + + + +通过键替换插件的 `NodeComponent`。 + + +通过键扩展 `PlatePlugin`。 + + +启用或禁用插件。 + + + + + +定义插件如何解析内容。 + + + +定义各种格式的序列化器和反序列化器。 + + + +HTML 解析器配置。 + + +HTML React 序列化器配置。 + + + + + +定义编辑器各个部分的渲染函数。 + + + +在 `Editable` 组件上方但在 `Slate` 包装器内渲染组件。 + + +在所有其他插件的 `node` 组件上方渲染组件。 + + +在 `Slate` 包装器上方渲染组件。 + + +在 `Editable` 组件后渲染组件。 + + +在 `Editable` 组件前渲染组件。 + + +在所有其他插件的 `node` 组件下方但在其 `children` 上方渲染组件。 + + +渲染节点组件。 + + + + + +定义插件的键盘快捷键。 + + + +用于管理插件选项的存储。 + + + +此插件依赖的插件键数组。 + + + +启用或禁用插件。由 Plate 用来确定是否应该使用该插件。 + + + +递归插件支持，允许在单个插件中包含多个插件。 + + + +定义插件注册和执行的顺序。 + +- **默认值:** `100` + + + +Plate 用来装饰编辑器范围的属性。 + + + +Hook called when the editor is initialized. + + + +## Plugin Methods + + + +创建一个具有更新选项的新插件实例。 + +```ts +(config: PlatePluginConfig, InferApi, InferTransforms> | ((ctx: PlatePluginContext) => PlatePluginConfig, InferApi, InferTransforms>)) => PlatePlugin +``` + + + +创建一个具有附加配置的新插件实例。可以接受一个对象或一个函数。 + +```ts +(extendConfig: Partial | ((ctx: PlatePluginContext) => Partial)) => PlatePlugin +``` + + +扩展一个现有的嵌套插件或添加一个新的插件，如果未找到。支持深度嵌套。 + +```ts +(key: string, extendConfig: Partial | ((ctx: PlatePluginContext) => Partial)) => PlatePlugin +``` + + + +设置或替换与插件关联的组件。 + +```ts +(component: NodeComponent) => PlatePlugin +``` + + + +扩展插件的 API。 + +```ts +(api: (ctx: PlatePluginContext) => any) => PlatePlugin +``` + + + +使用插件特定的方法扩展编辑器的 API。 + +```ts +(api: (ctx: PlatePluginContext) => any) => PlatePlugin +``` + + + +使用插件特定的方法扩展插件的变换。 + +```ts +(transforms: (ctx: PlatePluginContext) => any) => PlatePlugin +``` + + + +使用插件特定的方法扩展编辑器的变换。 + +```ts +(transforms: (ctx: PlatePluginContext) => any) => PlatePlugin +``` + + + +使用选择器扩展插件选项。 + +```ts +(options: (ctx: PlatePluginContext) => any) => PlatePlugin +``` + + + +## Plugin Context + +大多数插件函数将 `PlatePluginContext` 对象作为其第一个参数。这个对象包括： + + + +当前编辑器实例。 + + +当前插件实例。 + + +获取特定选项值的函数。 + + +获取插件所有选项的函数。 + + +设置特定选项值的函数。 + + +设置多个选项的函数。 + + +订阅特定选项值的 React 组件的钩子。 + + + +有关 Plate 插件的更多详细信息，请参阅各个指南：[Plugin Configuration](/docs/plugin), [Plugin Methods](/docs/plugin-methods), [Plugin Context](/docs/plugin-context), [Plugin Components](/docs/plugin-components), 以及 [Plugin Shortcuts](/docs/plugin-shortcuts). \ No newline at end of file diff --git a/apps/www/content/cn/docs/api/core/plate.mdx b/apps/www/content/cn/docs/api/core/plate.mdx new file mode 100644 index 0000000000..28516f8809 --- /dev/null +++ b/apps/www/content/cn/docs/api/core/plate.mdx @@ -0,0 +1,86 @@ +--- +title: Plate +description: Plate 组件的 API 参考。 +--- + +`Plate` 是将编辑器状态加载到 store provider 中的根组件。 + +`PlateContent` 是渲染编辑器的组件。 + +## Plate Props + + + +子组件可以访问 plate store。 + + +一个受控的 `editor` 实例。这个属性是必需的。 + + +参见 [Slate 文档](https://docs.slatejs.org/concepts/09-rendering#decorations)。 + + +当编辑器状态改变时调用的受控回调。 + + +当编辑器选择改变时调用的回调。 + + +当编辑器值改变时调用的回调。 + + +控制在与 PlateController 一起使用时编辑器是否默认被视为活动状态。 + +- **Default:** `true` + + +如果为 true，编辑器处于只读模式。 + + +元素的自定义渲染函数。 + + +叶子节点的自定义渲染函数。 + + + +## PlateContent Props + +[Editable](https://docs.slatejs.org/libraries/slate-react/editable) 组件的属性。扩展自 `TextareaHTMLAttributes`。 + + + +当编辑器从只读模式转换为可编辑模式时（当 `readOnly` 从 `true` 变为 `false` 时）自动聚焦编辑器。 + + +自定义 `Editable` 节点。 + +- **Default:** `` + + + + + + + + + + + + + + + + + +## Plate 的工作原理 + +`Plate` 需要一个 `editor` 属性，它应该是 `PlateEditor` 的实例。如果 `editor` 为 `null`，`Plate` 将不会渲染任何内容。 + +`Plate` 组件不处理编辑器的创建或插件的管理。这些责任由 `createPlateEditor` 处理。 + +`Plate` 为编辑器状态提供一个 store 并渲染其子组件。它使用 `PlateStoreProvider` 使编辑器状态和相关函数对其子组件可用。 + +元素和叶子的渲染逻辑主要由插件系统处理，如果没有找到特定节点类型的插件，则使用 `renderElement` 和 `renderLeaf` 属性作为后备。 + +有关创建和配置编辑器的更多详细信息，请参阅[编辑器配置](/docs/editor)指南。 \ No newline at end of file diff --git a/apps/www/content/cn/docs/api/core/store.mdx b/apps/www/content/cn/docs/api/core/store.mdx new file mode 100644 index 0000000000..4391dd495f --- /dev/null +++ b/apps/www/content/cn/docs/api/core/store.mdx @@ -0,0 +1,188 @@ +--- +title: Store +description: Plate store 的 API 参考。 +--- + +`Plate` 使用 [jotai](https://github.com/pmndrs/jotai) 来存储编辑器的状态。 + + + **注意**：要在组件中使用 store hooks，需要在 `Plate` 内部渲染该组件。 + + +## Plate Store + +### Store + +PlateStoreState 对象存储 Plate 编辑器的状态。它包含有关编辑器 ID、当前值、插件和其他设置的信息。 + + + +Slate 编辑器引用。 + +- **Default:** `createPlateFallbackEditor()` + + + +一个用作提供者作用域的唯一 ID。如果在同一个 React 树中有多个 `Plate`，则需要使用它。 + +- **Default:** random id + + + +编辑器容器元素的引用。 + + + +用于装饰编辑器中范围的函数。 + +```ts +(options: { editor: PlateEditor; entry: TNodeEntry }) => Range[] +``` + + + +`Editable` 是否已渲染，以便 slate DOM 可解析。 + + + +用于控制回调，当编辑器状态发生变化时调用。 + +```ts +(options: { editor: PlateEditor; value: ValueOf }) => void +``` + + + +用于控制回调，当 editor.selection 发生变化时调用。 + +```ts +(options: { editor: PlateEditor; selection: TSelection }) => void +``` + + + +用于控制回调，当 editor.children 发生变化时调用。 + +```ts +(options: { editor: PlateEditor; value: ValueOf }) => void +``` + + + +Whether the editor is primary. If no editor is active, then PlateController will use the first-mounted primary editor. + +- **Default:** `true` + + + +编辑器是否为只读。 + + + +在编辑器中渲染元素的函数。 + + + +在编辑器中渲染叶节点的函数。 + + + +调用 `redecorate` 时递增的版本号。这是 `decorate` 函数的一个依赖项。 + + + +每次编辑器更改时递增的版本号。 + + + +每次编辑器.selection 更改时递增的版本号。 + + + +每次编辑器.children 更改时递增的版本号。 + + + +## Exposed Store Keys + +以下存储键在 `editor.setPlateState` 中被暴露： + +- `readOnly` +- `onChange` +- `decorate` +- `renderElement` +- `renderLeaf` + +## Selectors + +当你需要订阅一个值时，使用 `usePlateSelectors(id).()`。 + +- **示例：** `const value = usePlateSelectors(id).value()` 将订阅 `value` 的变化。 +- 它在底层使用 [useAtomValue](https://jotai.org/docs/utils/use-atom-value)。 + +## Actions + +当你需要一个存储属性的值和设置器时，使用 `usePlateStates(id).()`。 + +- **示例：** `const [value, setValue] = usePlateStates(id).value()` +- 它在底层使用 [useAtom](https://jotai.org/docs/basics/primitives#use-atom)。 + +### `useRedecorate` + +重新装饰编辑器。 + + + + 编辑器 ID。 + + + +## Event Editor Store + +此存储是一个对象，其属性键是事件名称（例如 `'focus'`），属性值是 [editor IDs](Plate#id)。 + +- 当有[多个编辑器](multiple-editors)时，这很有用，可以基于 DOM 事件获取一个（例如最后一个聚焦的编辑器）。 +- [Plate](Plate) 的一个核心插件将存储以下事件。 + +### State + + + + +最后一个失去焦点的编辑器 ID。 + + + + + +当前聚焦的编辑器 ID。 + + + + + +最后一个编辑器 ID。 + + + +### `useEventEditorSelectors` + +钩子选择器。 + +- **Example:** `useEventEditorSelectors().focus()` 将获取最后一个聚焦的编辑器 ID。 + +### `useEventPlateId` + +获取最后一个事件编辑器 ID。 + + + + +如果定义，返回的 ID。 + + + + + + 如果可用，从上下文中获取 plate id，否则获取最后一个事件编辑器 ID 或 `PLATE_SCOPE`。 + diff --git a/apps/www/content/docs/api/floating.mdx b/apps/www/content/cn/docs/api/floating.mdx similarity index 100% rename from apps/www/content/docs/api/floating.mdx rename to apps/www/content/cn/docs/api/floating.mdx diff --git a/apps/www/content/docs/api/react-utils.mdx b/apps/www/content/cn/docs/api/react-utils.mdx similarity index 100% rename from apps/www/content/docs/api/react-utils.mdx rename to apps/www/content/cn/docs/api/react-utils.mdx diff --git a/apps/www/content/docs/api/resizable.mdx b/apps/www/content/cn/docs/api/resizable.mdx similarity index 100% rename from apps/www/content/docs/api/resizable.mdx rename to apps/www/content/cn/docs/api/resizable.mdx diff --git a/apps/www/content/docs/api/slate-react.mdx b/apps/www/content/cn/docs/api/slate-react.mdx similarity index 100% rename from apps/www/content/docs/api/slate-react.mdx rename to apps/www/content/cn/docs/api/slate-react.mdx diff --git a/apps/www/content/docs/api/slate-utils.mdx b/apps/www/content/cn/docs/api/slate-utils.mdx similarity index 100% rename from apps/www/content/docs/api/slate-utils.mdx rename to apps/www/content/cn/docs/api/slate-utils.mdx diff --git a/apps/www/content/docs/api/slate.mdx b/apps/www/content/cn/docs/api/slate.mdx similarity index 100% rename from apps/www/content/docs/api/slate.mdx rename to apps/www/content/cn/docs/api/slate.mdx diff --git a/apps/www/content/docs/api/utils.mdx b/apps/www/content/cn/docs/api/utils.mdx similarity index 100% rename from apps/www/content/docs/api/utils.mdx rename to apps/www/content/cn/docs/api/utils.mdx diff --git a/apps/www/content/docs/autoformat.mdx b/apps/www/content/cn/docs/autoformat.mdx similarity index 100% rename from apps/www/content/docs/autoformat.mdx rename to apps/www/content/cn/docs/autoformat.mdx diff --git a/apps/www/content/docs/basic-elements.mdx b/apps/www/content/cn/docs/basic-elements.mdx similarity index 100% rename from apps/www/content/docs/basic-elements.mdx rename to apps/www/content/cn/docs/basic-elements.mdx diff --git a/apps/www/content/docs/basic-marks.mdx b/apps/www/content/cn/docs/basic-marks.mdx similarity index 100% rename from apps/www/content/docs/basic-marks.mdx rename to apps/www/content/cn/docs/basic-marks.mdx diff --git a/apps/www/content/docs/block-menu.mdx b/apps/www/content/cn/docs/block-menu.mdx similarity index 100% rename from apps/www/content/docs/block-menu.mdx rename to apps/www/content/cn/docs/block-menu.mdx diff --git a/apps/www/content/docs/block-selection.mdx b/apps/www/content/cn/docs/block-selection.mdx similarity index 100% rename from apps/www/content/docs/block-selection.mdx rename to apps/www/content/cn/docs/block-selection.mdx diff --git a/apps/www/content/docs/callout.mdx b/apps/www/content/cn/docs/callout.mdx similarity index 100% rename from apps/www/content/docs/callout.mdx rename to apps/www/content/cn/docs/callout.mdx diff --git a/apps/www/content/docs/caption.mdx b/apps/www/content/cn/docs/caption.mdx similarity index 100% rename from apps/www/content/docs/caption.mdx rename to apps/www/content/cn/docs/caption.mdx diff --git a/apps/www/content/docs/collaboration.mdx b/apps/www/content/cn/docs/collaboration.mdx similarity index 100% rename from apps/www/content/docs/collaboration.mdx rename to apps/www/content/cn/docs/collaboration.mdx diff --git a/apps/www/content/docs/column.mdx b/apps/www/content/cn/docs/column.mdx similarity index 100% rename from apps/www/content/docs/column.mdx rename to apps/www/content/cn/docs/column.mdx diff --git a/apps/www/content/docs/combobox.mdx b/apps/www/content/cn/docs/combobox.mdx similarity index 100% rename from apps/www/content/docs/combobox.mdx rename to apps/www/content/cn/docs/combobox.mdx diff --git a/apps/www/content/docs/comments.mdx b/apps/www/content/cn/docs/comments.mdx similarity index 100% rename from apps/www/content/docs/comments.mdx rename to apps/www/content/cn/docs/comments.mdx diff --git a/apps/www/content/docs/components/changelog.mdx b/apps/www/content/cn/docs/components/changelog.mdx similarity index 100% rename from apps/www/content/docs/components/changelog.mdx rename to apps/www/content/cn/docs/components/changelog.mdx diff --git a/apps/www/content/docs/components/cli.mdx b/apps/www/content/cn/docs/components/cli.mdx similarity index 100% rename from apps/www/content/docs/components/cli.mdx rename to apps/www/content/cn/docs/components/cli.mdx diff --git a/apps/www/content/docs/components/components-json.mdx b/apps/www/content/cn/docs/components/components-json.mdx similarity index 100% rename from apps/www/content/docs/components/components-json.mdx rename to apps/www/content/cn/docs/components/components-json.mdx diff --git a/apps/www/content/docs/components/dark-mode/index.mdx b/apps/www/content/cn/docs/components/dark-mode/index.mdx similarity index 100% rename from apps/www/content/docs/components/dark-mode/index.mdx rename to apps/www/content/cn/docs/components/dark-mode/index.mdx diff --git a/apps/www/content/docs/components/dark-mode/next.mdx b/apps/www/content/cn/docs/components/dark-mode/next.mdx similarity index 100% rename from apps/www/content/docs/components/dark-mode/next.mdx rename to apps/www/content/cn/docs/components/dark-mode/next.mdx diff --git a/apps/www/content/docs/components/dark-mode/vite.mdx b/apps/www/content/cn/docs/components/dark-mode/vite.mdx similarity index 100% rename from apps/www/content/docs/components/dark-mode/vite.mdx rename to apps/www/content/cn/docs/components/dark-mode/vite.mdx diff --git a/apps/www/content/docs/components/installation.mdx b/apps/www/content/cn/docs/components/installation.mdx similarity index 100% rename from apps/www/content/docs/components/installation.mdx rename to apps/www/content/cn/docs/components/installation.mdx diff --git a/apps/www/content/docs/components/installation/astro.mdx b/apps/www/content/cn/docs/components/installation/astro.mdx similarity index 100% rename from apps/www/content/docs/components/installation/astro.mdx rename to apps/www/content/cn/docs/components/installation/astro.mdx diff --git a/apps/www/content/docs/components/installation/gatsby.mdx b/apps/www/content/cn/docs/components/installation/gatsby.mdx similarity index 100% rename from apps/www/content/docs/components/installation/gatsby.mdx rename to apps/www/content/cn/docs/components/installation/gatsby.mdx diff --git a/apps/www/content/docs/components/installation/laravel.mdx b/apps/www/content/cn/docs/components/installation/laravel.mdx similarity index 100% rename from apps/www/content/docs/components/installation/laravel.mdx rename to apps/www/content/cn/docs/components/installation/laravel.mdx diff --git a/apps/www/content/docs/components/installation/manual.mdx b/apps/www/content/cn/docs/components/installation/manual.mdx similarity index 100% rename from apps/www/content/docs/components/installation/manual.mdx rename to apps/www/content/cn/docs/components/installation/manual.mdx diff --git a/apps/www/content/docs/components/installation/next.mdx b/apps/www/content/cn/docs/components/installation/next.mdx similarity index 100% rename from apps/www/content/docs/components/installation/next.mdx rename to apps/www/content/cn/docs/components/installation/next.mdx diff --git a/apps/www/content/docs/components/installation/remix.mdx b/apps/www/content/cn/docs/components/installation/remix.mdx similarity index 100% rename from apps/www/content/docs/components/installation/remix.mdx rename to apps/www/content/cn/docs/components/installation/remix.mdx diff --git a/apps/www/content/docs/components/installation/vite.mdx b/apps/www/content/cn/docs/components/installation/vite.mdx similarity index 100% rename from apps/www/content/docs/components/installation/vite.mdx rename to apps/www/content/cn/docs/components/installation/vite.mdx diff --git a/apps/www/content/docs/components/introduction.mdx b/apps/www/content/cn/docs/components/introduction.mdx similarity index 100% rename from apps/www/content/docs/components/introduction.mdx rename to apps/www/content/cn/docs/components/introduction.mdx diff --git a/apps/www/content/docs/components/theming.mdx b/apps/www/content/cn/docs/components/theming.mdx similarity index 100% rename from apps/www/content/docs/components/theming.mdx rename to apps/www/content/cn/docs/components/theming.mdx diff --git a/apps/www/content/docs/controlled.mdx b/apps/www/content/cn/docs/controlled.mdx similarity index 100% rename from apps/www/content/docs/controlled.mdx rename to apps/www/content/cn/docs/controlled.mdx diff --git a/apps/www/content/docs/copilot.mdx b/apps/www/content/cn/docs/copilot.mdx similarity index 100% rename from apps/www/content/docs/copilot.mdx rename to apps/www/content/cn/docs/copilot.mdx diff --git a/apps/www/content/docs/csv.mdx b/apps/www/content/cn/docs/csv.mdx similarity index 100% rename from apps/www/content/docs/csv.mdx rename to apps/www/content/cn/docs/csv.mdx diff --git a/apps/www/content/docs/cursor-overlay.mdx b/apps/www/content/cn/docs/cursor-overlay.mdx similarity index 100% rename from apps/www/content/docs/cursor-overlay.mdx rename to apps/www/content/cn/docs/cursor-overlay.mdx diff --git a/apps/www/content/docs/date.mdx b/apps/www/content/cn/docs/date.mdx similarity index 100% rename from apps/www/content/docs/date.mdx rename to apps/www/content/cn/docs/date.mdx diff --git a/apps/www/content/docs/debugging.mdx b/apps/www/content/cn/docs/debugging.mdx similarity index 100% rename from apps/www/content/docs/debugging.mdx rename to apps/www/content/cn/docs/debugging.mdx diff --git a/apps/www/content/docs/dnd.mdx b/apps/www/content/cn/docs/dnd.mdx similarity index 100% rename from apps/www/content/docs/dnd.mdx rename to apps/www/content/cn/docs/dnd.mdx diff --git a/apps/www/content/docs/docx.mdx b/apps/www/content/cn/docs/docx.mdx similarity index 100% rename from apps/www/content/docs/docx.mdx rename to apps/www/content/cn/docs/docx.mdx diff --git a/apps/www/content/docs/editor-methods.mdx b/apps/www/content/cn/docs/editor-methods.mdx similarity index 100% rename from apps/www/content/docs/editor-methods.mdx rename to apps/www/content/cn/docs/editor-methods.mdx diff --git a/apps/www/content/docs/editor.mdx b/apps/www/content/cn/docs/editor.mdx similarity index 100% rename from apps/www/content/docs/editor.mdx rename to apps/www/content/cn/docs/editor.mdx diff --git a/apps/www/content/docs/emoji.mdx b/apps/www/content/cn/docs/emoji.mdx similarity index 100% rename from apps/www/content/docs/emoji.mdx rename to apps/www/content/cn/docs/emoji.mdx diff --git a/apps/www/content/docs/equation.mdx b/apps/www/content/cn/docs/equation.mdx similarity index 100% rename from apps/www/content/docs/equation.mdx rename to apps/www/content/cn/docs/equation.mdx diff --git a/apps/www/content/docs/examples/editable-voids.mdx b/apps/www/content/cn/docs/examples/editable-voids.mdx similarity index 100% rename from apps/www/content/docs/examples/editable-voids.mdx rename to apps/www/content/cn/docs/examples/editable-voids.mdx diff --git a/apps/www/content/docs/examples/export.mdx b/apps/www/content/cn/docs/examples/export.mdx similarity index 100% rename from apps/www/content/docs/examples/export.mdx rename to apps/www/content/cn/docs/examples/export.mdx diff --git a/apps/www/content/docs/examples/hundreds-blocks.mdx b/apps/www/content/cn/docs/examples/hundreds-blocks.mdx similarity index 100% rename from apps/www/content/docs/examples/hundreds-blocks.mdx rename to apps/www/content/cn/docs/examples/hundreds-blocks.mdx diff --git a/apps/www/content/docs/examples/hundreds-editors.mdx b/apps/www/content/cn/docs/examples/hundreds-editors.mdx similarity index 100% rename from apps/www/content/docs/examples/hundreds-editors.mdx rename to apps/www/content/cn/docs/examples/hundreds-editors.mdx diff --git a/apps/www/content/docs/examples/preview-markdown.mdx b/apps/www/content/cn/docs/examples/preview-markdown.mdx similarity index 100% rename from apps/www/content/docs/examples/preview-markdown.mdx rename to apps/www/content/cn/docs/examples/preview-markdown.mdx diff --git a/apps/www/content/docs/examples/version-history.mdx b/apps/www/content/cn/docs/examples/version-history.mdx similarity index 100% rename from apps/www/content/docs/examples/version-history.mdx rename to apps/www/content/cn/docs/examples/version-history.mdx diff --git a/apps/www/content/docs/excalidraw.mdx b/apps/www/content/cn/docs/excalidraw.mdx similarity index 100% rename from apps/www/content/docs/excalidraw.mdx rename to apps/www/content/cn/docs/excalidraw.mdx diff --git a/apps/www/content/docs/exit-break.mdx b/apps/www/content/cn/docs/exit-break.mdx similarity index 100% rename from apps/www/content/docs/exit-break.mdx rename to apps/www/content/cn/docs/exit-break.mdx diff --git a/apps/www/content/docs/find-replace.mdx b/apps/www/content/cn/docs/find-replace.mdx similarity index 100% rename from apps/www/content/docs/find-replace.mdx rename to apps/www/content/cn/docs/find-replace.mdx diff --git a/apps/www/content/docs/font.mdx b/apps/www/content/cn/docs/font.mdx similarity index 100% rename from apps/www/content/docs/font.mdx rename to apps/www/content/cn/docs/font.mdx diff --git a/apps/www/content/docs/forced-layout.mdx b/apps/www/content/cn/docs/forced-layout.mdx similarity index 100% rename from apps/www/content/docs/forced-layout.mdx rename to apps/www/content/cn/docs/forced-layout.mdx diff --git a/apps/www/content/docs/getting-started.mdx b/apps/www/content/cn/docs/getting-started.mdx similarity index 100% rename from apps/www/content/docs/getting-started.mdx rename to apps/www/content/cn/docs/getting-started.mdx diff --git a/apps/www/content/docs/highlight.mdx b/apps/www/content/cn/docs/highlight.mdx similarity index 100% rename from apps/www/content/docs/highlight.mdx rename to apps/www/content/cn/docs/highlight.mdx diff --git a/apps/www/content/docs/horizontal-rule.mdx b/apps/www/content/cn/docs/horizontal-rule.mdx similarity index 100% rename from apps/www/content/docs/horizontal-rule.mdx rename to apps/www/content/cn/docs/horizontal-rule.mdx diff --git a/apps/www/content/docs/html.mdx b/apps/www/content/cn/docs/html.mdx similarity index 100% rename from apps/www/content/docs/html.mdx rename to apps/www/content/cn/docs/html.mdx diff --git a/apps/www/content/docs/img.png b/apps/www/content/cn/docs/img.png similarity index 100% rename from apps/www/content/docs/img.png rename to apps/www/content/cn/docs/img.png diff --git a/apps/www/content/docs/indent-list.mdx b/apps/www/content/cn/docs/indent-list.mdx similarity index 100% rename from apps/www/content/docs/indent-list.mdx rename to apps/www/content/cn/docs/indent-list.mdx diff --git a/apps/www/content/docs/indent.mdx b/apps/www/content/cn/docs/indent.mdx similarity index 100% rename from apps/www/content/docs/indent.mdx rename to apps/www/content/cn/docs/indent.mdx diff --git a/apps/www/content/docs/index.mdx b/apps/www/content/cn/docs/index.mdx similarity index 100% rename from apps/www/content/docs/index.mdx rename to apps/www/content/cn/docs/index.mdx diff --git a/apps/www/content/docs/kbd.mdx b/apps/www/content/cn/docs/kbd.mdx similarity index 100% rename from apps/www/content/docs/kbd.mdx rename to apps/www/content/cn/docs/kbd.mdx diff --git a/apps/www/content/docs/line-height.mdx b/apps/www/content/cn/docs/line-height.mdx similarity index 100% rename from apps/www/content/docs/line-height.mdx rename to apps/www/content/cn/docs/line-height.mdx diff --git a/apps/www/content/docs/link.mdx b/apps/www/content/cn/docs/link.mdx similarity index 100% rename from apps/www/content/docs/link.mdx rename to apps/www/content/cn/docs/link.mdx diff --git a/apps/www/content/docs/list.mdx b/apps/www/content/cn/docs/list.mdx similarity index 100% rename from apps/www/content/docs/list.mdx rename to apps/www/content/cn/docs/list.mdx diff --git a/apps/www/content/docs/markdown.mdx b/apps/www/content/cn/docs/markdown.mdx similarity index 100% rename from apps/www/content/docs/markdown.mdx rename to apps/www/content/cn/docs/markdown.mdx diff --git a/apps/www/content/docs/media.mdx b/apps/www/content/cn/docs/media.mdx similarity index 100% rename from apps/www/content/docs/media.mdx rename to apps/www/content/cn/docs/media.mdx diff --git a/apps/www/content/docs/mention.mdx b/apps/www/content/cn/docs/mention.mdx similarity index 100% rename from apps/www/content/docs/mention.mdx rename to apps/www/content/cn/docs/mention.mdx diff --git a/apps/www/content/docs/migration/slate-to-plate.mdx b/apps/www/content/cn/docs/migration/slate-to-plate.mdx similarity index 100% rename from apps/www/content/docs/migration/slate-to-plate.mdx rename to apps/www/content/cn/docs/migration/slate-to-plate.mdx diff --git a/apps/www/content/docs/multi-select.mdx b/apps/www/content/cn/docs/multi-select.mdx similarity index 100% rename from apps/www/content/docs/multi-select.mdx rename to apps/www/content/cn/docs/multi-select.mdx diff --git a/apps/www/content/docs/node-id.mdx b/apps/www/content/cn/docs/node-id.mdx similarity index 100% rename from apps/www/content/docs/node-id.mdx rename to apps/www/content/cn/docs/node-id.mdx diff --git a/apps/www/content/docs/playwright.mdx b/apps/www/content/cn/docs/playwright.mdx similarity index 100% rename from apps/www/content/docs/playwright.mdx rename to apps/www/content/cn/docs/playwright.mdx diff --git a/apps/www/content/docs/plugin-components.mdx b/apps/www/content/cn/docs/plugin-components.mdx similarity index 100% rename from apps/www/content/docs/plugin-components.mdx rename to apps/www/content/cn/docs/plugin-components.mdx diff --git a/apps/www/content/docs/plugin-context.mdx b/apps/www/content/cn/docs/plugin-context.mdx similarity index 100% rename from apps/www/content/docs/plugin-context.mdx rename to apps/www/content/cn/docs/plugin-context.mdx diff --git a/apps/www/content/docs/plugin-methods.mdx b/apps/www/content/cn/docs/plugin-methods.mdx similarity index 100% rename from apps/www/content/docs/plugin-methods.mdx rename to apps/www/content/cn/docs/plugin-methods.mdx diff --git a/apps/www/content/docs/plugin-shortcuts.mdx b/apps/www/content/cn/docs/plugin-shortcuts.mdx similarity index 100% rename from apps/www/content/docs/plugin-shortcuts.mdx rename to apps/www/content/cn/docs/plugin-shortcuts.mdx diff --git a/apps/www/content/docs/plugin.mdx b/apps/www/content/cn/docs/plugin.mdx similarity index 100% rename from apps/www/content/docs/plugin.mdx rename to apps/www/content/cn/docs/plugin.mdx diff --git a/apps/www/content/docs/reset-node.mdx b/apps/www/content/cn/docs/reset-node.mdx similarity index 100% rename from apps/www/content/docs/reset-node.mdx rename to apps/www/content/cn/docs/reset-node.mdx diff --git a/apps/www/content/docs/select.mdx b/apps/www/content/cn/docs/select.mdx similarity index 100% rename from apps/www/content/docs/select.mdx rename to apps/www/content/cn/docs/select.mdx diff --git a/apps/www/content/docs/single-line.mdx b/apps/www/content/cn/docs/single-line.mdx similarity index 100% rename from apps/www/content/docs/single-line.mdx rename to apps/www/content/cn/docs/single-line.mdx diff --git a/apps/www/content/docs/slash-command.mdx b/apps/www/content/cn/docs/slash-command.mdx similarity index 100% rename from apps/www/content/docs/slash-command.mdx rename to apps/www/content/cn/docs/slash-command.mdx diff --git a/apps/www/content/docs/soft-break.mdx b/apps/www/content/cn/docs/soft-break.mdx similarity index 100% rename from apps/www/content/docs/soft-break.mdx rename to apps/www/content/cn/docs/soft-break.mdx diff --git a/apps/www/content/docs/tabbable.mdx b/apps/www/content/cn/docs/tabbable.mdx similarity index 100% rename from apps/www/content/docs/tabbable.mdx rename to apps/www/content/cn/docs/tabbable.mdx diff --git a/apps/www/content/docs/table.mdx b/apps/www/content/cn/docs/table.mdx similarity index 100% rename from apps/www/content/docs/table.mdx rename to apps/www/content/cn/docs/table.mdx diff --git a/apps/www/content/docs/tag.mdx b/apps/www/content/cn/docs/tag.mdx similarity index 100% rename from apps/www/content/docs/tag.mdx rename to apps/www/content/cn/docs/tag.mdx diff --git a/apps/www/content/docs/toc.mdx b/apps/www/content/cn/docs/toc.mdx similarity index 100% rename from apps/www/content/docs/toc.mdx rename to apps/www/content/cn/docs/toc.mdx diff --git a/apps/www/content/docs/toggle.mdx b/apps/www/content/cn/docs/toggle.mdx similarity index 100% rename from apps/www/content/docs/toggle.mdx rename to apps/www/content/cn/docs/toggle.mdx diff --git a/apps/www/content/docs/trailing-block.mdx b/apps/www/content/cn/docs/trailing-block.mdx similarity index 100% rename from apps/www/content/docs/trailing-block.mdx rename to apps/www/content/cn/docs/trailing-block.mdx diff --git a/apps/www/content/docs/unit-testing.mdx b/apps/www/content/cn/docs/unit-testing.mdx similarity index 100% rename from apps/www/content/docs/unit-testing.mdx rename to apps/www/content/cn/docs/unit-testing.mdx diff --git a/apps/www/content/en/docs/ai.mdx b/apps/www/content/en/docs/ai.mdx new file mode 100644 index 0000000000..1ac7861857 --- /dev/null +++ b/apps/www/content/en/docs/ai.mdx @@ -0,0 +1,416 @@ +--- +title: AI +docs: + - route: https://pro.platejs.org/docs/examples/ai + title: AI +--- + + + + + +## Features + +- Combobox menu with predefined commands: + - Generate: continue writing, add summary, explain + - Edit: improve writing, make it longer or shorter, fix spelling & grammar, simplify language +- Three trigger modes: + - Cursor mode: trigger at block end + - Selection mode: trigger with selected text + - Block selection mode: trigger with selected blocks +- Streaming responses in preview or direct editor insertion +- Markdown support +- Built-in support for Vercel AI SDK chat API + + + +## Installation + +```bash +npm install @udecode/plate-ai @udecode/plate-selection @udecode/plate-markdown @udecode/plate-basic-marks +``` + +## Usage + +### Plugins + +```tsx +import { withProps } from '@udecode/cn'; +import { AIChatPlugin, AIPlugin } from '@udecode/plate-ai/react'; +import { + BoldPlugin, + CodePlugin, + ItalicPlugin, + StrikethroughPlugin, + UnderlinePlugin, +} from '@udecode/plate-basic-marks/react'; +import { PlateLeaf, createPlateEditor } from '@udecode/plate-common/react'; +import { LinkPlugin } from '@udecode/plate-link/react'; +import { MarkdownPlugin } from '@udecode/plate-markdown'; +``` + +```tsx +export const createAIEditor = () => { + const editor = createPlateEditor({ + id: 'ai', + override: { + components: { + [BoldPlugin.key]: withProps(PlateLeaf, { as: 'strong' }), + [CodePlugin.key]: CodeLeaf, + [ItalicPlugin.key]: withProps(PlateLeaf, { as: 'em' }), + [LinkPlugin.key]: LinkElement, + [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: 's' }), + [UnderlinePlugin.key]: withProps(PlateLeaf, { as: 'u' }), + }, + }, + plugins: [ + BoldPlugin, + ItalicPlugin, + UnderlinePlugin, + StrikethroughPlugin, + CodePlugin, + ], + value: [{ children: [{ text: '' }], type: 'p' }], + }); + + return editor; +}; + +const systemCommon = `\ +You are an advanced AI-powered note-taking assistant, designed to enhance productivity and creativity in note management. +Respond directly to user prompts with clear, concise, and relevant content. Maintain a neutral, helpful tone. + +Rules: +- is the entire note the user is working on. +- is a reminder of how you should reply to INSTRUCTIONS. It does not apply to questions. +- Anything else is the user prompt. +- Your response should be tailored to the user's prompt, providing precise assistance to optimize note management. +- For INSTRUCTIONS: Follow the exactly. Provide ONLY the content to be inserted or replaced. No explanations or comments. +- For QUESTIONS: Provide a helpful and concise answer. You may include brief explanations if necessary. +- CRITICAL: Distinguish between INSTRUCTIONS and QUESTIONS. Instructions typically ask you to modify or add content. Questions ask for information or clarification. +`; + +const systemDefault = `\ +${systemCommon} +- is the current block of text the user is working on. +- Ensure your output can seamlessly fit into the existing structure. +- CRITICAL: Provide only a single block of text. DO NOT create multiple paragraphs or separate blocks. + +{block} + +`; + +const systemSelecting = `\ +${systemCommon} +- is the block of text containing the user's selection, providing context. +- Ensure your output can seamlessly fit into the existing structure. +- is the specific text the user has selected in the block and wants to modify or ask about. +- Consider the context provided by , but only modify . Your response should be a direct replacement for . + +{block} + + +{selection} + +`; + +const systemBlockSelecting = `\ +${systemCommon} +- represents the full blocks of text the user has selected and wants to modify or ask about. +- Your response should be a direct replacement for the entire . +- Maintain the overall structure and formatting of the selected blocks, unless explicitly instructed otherwise. +- CRITICAL: Provide only the content to replace . Do not add additional blocks or change the block structure unless specifically requested. + +{block} + +`; + +const userDefault = ` +CRITICAL: DO NOT use block formatting. You can only use inline formatting. +CRITICAL: DO NOT start new lines or paragraphs. +NEVER write . + +{prompt}`; + +const userSelecting = ` +If this is a question, provide a helpful and concise answer about . +If this is an instruction, provide ONLY the text to replace . No explanations. +Ensure it fits seamlessly within . If is empty, write ONE random sentence. +NEVER write or . + +{prompt} about `; + +const userBlockSelecting = ` +If this is a question, provide a helpful and concise answer about . +If this is an instruction, provide ONLY the content to replace the entire . No explanations. +Maintain the overall structure unless instructed otherwise. +NEVER write or . + +{prompt} about `; + +export const PROMPT_TEMPLATES = { + systemBlockSelecting, + systemDefault, + systemSelecting, + userBlockSelecting, + userDefault, + userSelecting, +}; + +const plugins = [ + // ...otherPlugins, + MarkdownPlugin.configure({ options: { indentList: true } }), + AIPlugin, + AIChatPlugin.configure({ + options: { + createAIEditor, + promptTemplate: ({ isBlockSelecting, isSelecting }) => { + return isBlockSelecting + ? PROMPT_TEMPLATES.userBlockSelecting + : isSelecting + ? PROMPT_TEMPLATES.userSelecting + : PROMPT_TEMPLATES.userDefault; + }, + systemTemplate: ({ isBlockSelecting, isSelecting }) => { + return isBlockSelecting + ? PROMPT_TEMPLATES.systemBlockSelecting + : isSelecting + ? PROMPT_TEMPLATES.systemSelecting + : PROMPT_TEMPLATES.systemDefault; + }, + }, + render: { afterEditable: () => }, + }), +]; +``` + +- [AIMenu](/docs/components/ai-menu) + +### AI SDK + +This plugin is depending on the [ai](https://npmjs.com/package/ai) package: + +- Setup a [route handler](https://sdk.vercel.ai/docs/getting-started/nextjs-app-router#create-a-route-handler) using [streamText](https://sdk.vercel.ai/docs/ai-sdk-core/generating-text#streamtext). +- Wire up [useChat](https://sdk.vercel.ai/docs/reference/ai-sdk-ui/use-chat) in your [AI menu](/docs/components/ai-menu) component. + + +## Keyboard Shortcuts + + + + Open AI menu in empty block (cursor mode) + + + Open AI menu (cursor or selection mode) + + Close AI menu + + +## Examples + +### Plate UI + +Refer to the preview above. + +### Plate Plus + + + +## Plugins + +### AIPlugin + +Extends the editor with AI transforms. + +### AIChatPlugin + +Enables chat operations and streaming text generation in the editor. + + + + Chat helpers returned by [useChat](https://sdk.vercel.ai/docs/reference/ai-sdk-ui/use-chat). + + + + +Function to create editor instance for preview mode. + +- **Default:** Creates a basic editor with id 'ai' + + + + + +Specifies how assistant messages are handled: + +- `'chat'`: Shows preview with accept/reject options (default) +- `'insert'`: Directly inserts content into editor +- **Default:** `'chat'` + + + + + +Whether the AI chat is open. + +- **Default:** `false` + + + + + +Template for generating prompts. Supports placeholders: + +- `{block}`: Markdown of blocks in selection +- `{editor}`: Markdown of entire editor content +- `{selection}`: Markdown of current selection +- `{prompt}`: Actual user prompt +- **Default:** `'{prompt}'` + + + + + +Template for system messages. Supports same placeholders as `promptTemplate`. + +- **Default:** `undefined` + + + + +## API + +### api.aiChat.accept() + +Accepts the current AI suggestion: + +- Removes AI marks from the content +- Hides the AI chat interface +- Focuses the editor + +### api.aiChat.insertBelow() + +Inserts AI content below the current block. + + + + Editor containing the content to insert. + + + +Handles both block selection and normal selection modes: + +- In block selection: Inserts after the last selected block +- In normal selection: Inserts after the current block + +### api.aiChat.replaceSelection() + +Replaces the current selection with AI content. + + + + Editor containing the content to replace with. + + + + + When true, applies the first block's formatting to all inserted blocks. Defaults to false. + + + + + +Handles different selection modes: + +- Single block selection: Replaces the selected block, applying its formatting to all inserted content +- Multiple block selection: Replaces all selected blocks, preserving the original formatting unless `forceUniformFormatting` is enabled +- Normal selection: Replaces the current selection while maintaining surrounding context + +### api.aiChat.reset() + +Resets the chat state: + +- Stops any ongoing generation +- Clears chat messages +- Removes all AI nodes from the editor + +### api.aiChat.submit() + +Submits a prompt to generate AI content. + + + + + + Mode to use. Defaults to 'chat' for selection, 'insert' otherwise. + + + Custom prompt. Uses chat input if not provided. + + + Custom system message. + + + + + +In insert mode, undoes previous AI changes before submitting. + +## Transforms + +### tf.ai.insertNodes() + +Inserts AI-generated nodes with the AI mark. + + + + Nodes to insert with AI mark. + + + + + Target path. Defaults to current selection. + + + + + +### tf.ai.removeMarks() + +Removes AI marks from nodes in the specified location. + + + + + + Location to remove marks from. Defaults to entire document. + + + + + +### tf.ai.removeNodes() + +Removes nodes that have the AI mark. + + + + + + Path to remove nodes from. Defaults to entire document. + + + + + +### tf.ai.undo() + +Special undo operation for AI changes: + +- Undoes the last operation if it was AI-generated +- Removes the redo stack entry to prevent redoing AI operations diff --git a/apps/www/content/en/docs/alignment.mdx b/apps/www/content/en/docs/alignment.mdx new file mode 100644 index 0000000000..ec03790708 --- /dev/null +++ b/apps/www/content/en/docs/alignment.mdx @@ -0,0 +1,113 @@ +--- +title: Alignment +docs: + - route: /docs/components/align-dropdown-menu + title: Align Dropdown Menu +--- + + + + + +## Features + +- Provides text alignment options: left, right, center, or justify. + + + +## Installation + +```bash +npm install @udecode/plate-alignment +``` + +## Usage + +```tsx +// ... +import { createPlateEditor } from '@udecode/plate-common/react'; +import { AlignPlugin } from '@udecode/plate-alignment/react'; +import { ParagraphPlugin } from '@udecode/plate-common/react'; +import { HeadingPlugin } from '@udecode/plate-heading/react'; + +const editor = createPlateEditor({ + plugins: [ + HeadingPlugin, + AlignPlugin.configure({ + inject: { + targetPlugins: [ + ParagraphPlugin.key, + HeadingPlugin.key, + ], + }, + }), + ], +}); +``` + +## Plugins + +### AlignPlugin + +## API + +### setAlign + +Sets the alignment for the specified block elements in the editor. + + + +The editor instance. + + + + +The alignment value. + + +Options for the `setNodes` function. + + + + + + +## API Components + +### useAlignDropdownMenuState + + + + The alignment value. + + + +### useAlignDropdownMenu + + + + The alignment value. + + + + + + Props for the radio group. + + + The alignment value. + + + Callback to set the alignment value. + + + + diff --git a/apps/www/content/docs/api/cn.mdx b/apps/www/content/en/docs/api/cn.mdx similarity index 100% rename from apps/www/content/docs/api/cn.mdx rename to apps/www/content/en/docs/api/cn.mdx diff --git a/apps/www/content/docs/api/common.mdx b/apps/www/content/en/docs/api/common.mdx similarity index 100% rename from apps/www/content/docs/api/common.mdx rename to apps/www/content/en/docs/api/common.mdx diff --git a/apps/www/content/docs/api/core.mdx b/apps/www/content/en/docs/api/core.mdx similarity index 100% rename from apps/www/content/docs/api/core.mdx rename to apps/www/content/en/docs/api/core.mdx diff --git a/apps/www/content/docs/api/core/plate-controller.mdx b/apps/www/content/en/docs/api/core/plate-controller.mdx similarity index 100% rename from apps/www/content/docs/api/core/plate-controller.mdx rename to apps/www/content/en/docs/api/core/plate-controller.mdx diff --git a/apps/www/content/docs/api/core/plate-editor.mdx b/apps/www/content/en/docs/api/core/plate-editor.mdx similarity index 100% rename from apps/www/content/docs/api/core/plate-editor.mdx rename to apps/www/content/en/docs/api/core/plate-editor.mdx diff --git a/apps/www/content/docs/api/core/plate-plugin.mdx b/apps/www/content/en/docs/api/core/plate-plugin.mdx similarity index 100% rename from apps/www/content/docs/api/core/plate-plugin.mdx rename to apps/www/content/en/docs/api/core/plate-plugin.mdx diff --git a/apps/www/content/docs/api/core/plate.mdx b/apps/www/content/en/docs/api/core/plate.mdx similarity index 100% rename from apps/www/content/docs/api/core/plate.mdx rename to apps/www/content/en/docs/api/core/plate.mdx diff --git a/apps/www/content/docs/api/core/store.mdx b/apps/www/content/en/docs/api/core/store.mdx similarity index 100% rename from apps/www/content/docs/api/core/store.mdx rename to apps/www/content/en/docs/api/core/store.mdx diff --git a/apps/www/content/en/docs/api/floating.mdx b/apps/www/content/en/docs/api/floating.mdx new file mode 100644 index 0000000000..c0c1c63706 --- /dev/null +++ b/apps/www/content/en/docs/api/floating.mdx @@ -0,0 +1,164 @@ +--- +title: Floating +description: API reference for floating UI components and hooks. +--- + + + +## Features + +- Virtual floating elements that follow cursor position +- Floating toolbar that appears on text selection +- Built on top of Floating UI +- Customizable positioning and behavior +- Automatic updates on scroll and resize + + + +## Installation + +```bash +npm install @udecode/plate-floating +``` + +## API Hooks + +### useVirtualFloating + +Creates a floating element with a controlled virtual element, typically used to follow cursor position. + + + + Options for the virtual floating element. + + + Function to get the bounding client rect. + - **Default:** Returns a zero-sized rect at (0,0) + + + Controls visibility of the floating element. + + + Callback when elements are mounted. + - **Default:** `autoUpdate` (updates on scroll and resize) + + + + + + + + Style object to apply to the floating element. + + + Reference to the virtual element. + + + References for floating UI positioning. + + + Function to manually update positioning. + + + +### useFloatingToolbar + +Creates a floating toolbar that appears when text is selected in the editor. + + + + State options for the floating toolbar. + + + Options passed to useVirtualFloating. + + + Force hide the toolbar. + + + Show toolbar in read-only mode. + + + + + + + + Ref to detect clicks outside the toolbar. + + + Whether the toolbar should be hidden. + + + Props to spread on the toolbar element. + + + Ref to attach to the toolbar element. + + + +## API + +### getBoundingClientRect + +Gets the bounding client rectangle for a location or array of locations in the editor. + + + + The editor instance. + + + The location(s) to get the bounding rectangle for. If not provided, uses the current editor selection. + + + + + + The merged bounding client rectangle of all specified locations, or undefined if no valid rectangles found. + + + +### getDOMSelectionBoundingClientRect + +Gets the bounding client rectangle of the current DOM selection. + + + + The bounding client rectangle of the DOM selection. Returns a zero-sized rect at (0,0) if no selection exists. + + + +### getRangeBoundingClientRect + +Gets the bounding client rectangle for a specific Slate range. + + + + The editor instance. + + + The Slate range to get the bounding rectangle for. + + + + + + The bounding client rectangle of the range. Returns a zero-sized rect at (0,0) if the range is null or invalid. + + + +### getSelectionBoundingClientRect + +Gets the bounding client rectangle of the current editor selection. + + + + The editor instance. + + + + + + The bounding client rectangle of the selection. Returns a zero-sized rect at (0,0) if the selection is not expanded. + + \ No newline at end of file diff --git a/apps/www/content/en/docs/api/react-utils.mdx b/apps/www/content/en/docs/api/react-utils.mdx new file mode 100644 index 0000000000..41f8e77e2b --- /dev/null +++ b/apps/www/content/en/docs/api/react-utils.mdx @@ -0,0 +1,82 @@ +--- +title: React Utils +description: API reference for @udecode/react-utils. +--- + +`@udecode/react-utils` contains utility functions for React. + +### PortalBody + +Renders a React component in the `document.body` using a portal. + +### Text + +Generic component for rendering a span. + +### Box + +Generic component for rendering a div. + +### createPrimitiveComponent + +Creates a primitive component factory which utilizes hooks for managing state, props, and forwards references to child components. + + + + The base component or native HTML element. + + + + A function returning a primitive component with hooks for state and props + management. + + +### createPrimitiveElement + +Creates a component from an element type. + + + + The native HTML element. + + + + A function component that renders the specified element. + + +### createSlotComponent + +Creates a Slot component, which is useful when you want a component to behave as its child. + + + + The base component or native HTML element. + + + + +A function returning a Slot component. + + + +### withProviders + +A function that wraps a component into multiple providers. + + + +Providers with which to wrap the component. + +If there are any props that you want a provider to receive, you can simply pass an array. + + + +The component to be wrapped. + + +The props to be passed to the wrapped component. + + + +A new component that is wrapped by the specified providers. + diff --git a/apps/www/content/en/docs/api/resizable.mdx b/apps/www/content/en/docs/api/resizable.mdx new file mode 100644 index 0000000000..49454388d4 --- /dev/null +++ b/apps/www/content/en/docs/api/resizable.mdx @@ -0,0 +1,206 @@ +--- +title: Resizable +--- + + + +## Features + +- Resizable elements with handles +- Configurable min/max width constraints +- Center/left/right alignment support +- Width persistence in editor state + + + +## Installation + +```bash +npm install @udecode/plate-resizable +``` + +## API + +### useResizableState + +Manages state for resizable elements. + + + + + + Node alignment. + - **Default:** `'center'` + + + Maximum width constraint. + - **Default:** `'100%'` + + + Minimum width constraint. + - **Default:** `92` + + + Whether the element is resizable in read-only mode. + + + + + + + + Current alignment setting. + + + Maximum width constraint. + + + Minimum width constraint. + + + Updates node width in editor state. + + + Updates width in local state. + + + Current width value. + + + +### useResizable + +Provides resize behavior props and handlers for resizable elements. + + + + State from useResizableState. + + + + + + + + Handler for resize events. + + + + + Style props for the resizable element: + - maxWidth: Maximum width constraint + - minWidth: Minimum width constraint + - position: 'relative' + - width: Current width + + + Style props for the wrapper element: + - position: 'relative' + + + Reference to the wrapper element. + + + +### useResizeHandleState + +Manages state for resize handle elements. + + + + + + Direction of resize. + - **Default:** `'left'` + + + Initial size of the resizable element. + + + Callback when handle is hovered. + + + Callback when handle hover ends. + + + Custom mouse down handler. + + + Custom resize handler. Falls back to store handler if not provided. + + + Custom touch start handler. + + + + + + + + Current resize direction. + + + Initial cursor/touch position. + + + Initial element size. + + + Whether resize direction is horizontal. + + + Whether resize is in progress. + + + Editor read-only state. + + + Update initial position. + + + Update initial size. + + + Update resize state. + + + Hover callback. + + + Hover end callback. + + + Mouse down handler. + + + Resize handler. + + + Touch start handler. + + + +### useResizeHandle + +Provides handlers and props for resize handle elements. + + + + State from useResizeHandleState. + + + + + + Whether the handle should be hidden (in read-only mode). + + + Props to spread on the handle element: + - onMouseDown: Mouse down event handler + - onMouseOut: Mouse out event handler + - onMouseOver: Mouse over event handler + - onTouchEnd: Touch end event handler + - onTouchMove: Touch move event handler + - onTouchStart: Touch start event handler + + \ No newline at end of file diff --git a/apps/www/content/en/docs/api/slate-react.mdx b/apps/www/content/en/docs/api/slate-react.mdx new file mode 100644 index 0000000000..e194f9b0f3 --- /dev/null +++ b/apps/www/content/en/docs/api/slate-react.mdx @@ -0,0 +1,101 @@ +--- +title: Slate React +description: API reference for @udecode/slate-react. +--- + +`@udecode/slate-react` extends Slate React API with generic types. + +## React Editor + +Find the corresponding documentation in the [Slate React docs](https://docs.slatejs.org/libraries/slate-react/react-editor). + +### `SlateProps` + +### `blurEditor` + +### `deselectEditor` + +### `findEditorDocumentOrShadowRoot` + +### `findEventRange` + +### `findNodeKey` + +### `findPath` + +### `focusEditor` + +### `getEditorWindow` + +### `hasEditorDOMNode` + +### `hasEditorEditableTarget` + +### `hasEditorSelectableTarget` + +### `hasEditorTarget` + +### `insertData` + +### `isComposing` + +### `isEditorFocused` + +### `isEditorReadOnly` + +### `isTargetInsideNonReadonlyVoidEditor` + +### `setFragmentData` + +### `toDOMNode` + +### `toDOMPoint` + +### `toDOMRange` + +### `toSlateNode` + +### `toSlatePoint` + +### `toSlateRange` + +## Transforms + +### focusEditorEdge + +Focuses the editor at a specified edge (start or end). + + + + The editor instance. + + + + + The edge to focus on. + - 'start': Focus at the beginning of the editor. + - 'end': Focus at the end of the editor. + Default is 'start'. + + + + + +### setNode + +Sets properties on a specific node in the editor. + + + + The editor instance. + + + The node to update. + + + The properties to set on the node. + + + Options for setting nodes, excluding the 'at' property. + + \ No newline at end of file diff --git a/apps/www/content/en/docs/api/slate-utils.mdx b/apps/www/content/en/docs/api/slate-utils.mdx new file mode 100644 index 0000000000..608175c536 --- /dev/null +++ b/apps/www/content/en/docs/api/slate-utils.mdx @@ -0,0 +1,1038 @@ +--- +title: Slate Utils +description: API reference for @udecode/slate-utils. +--- + +`@udecode/slate-utils` contains utility functions for Slate. + +## Queries + +### findDescendant + +Iterates through all nodes in the editor and returns the first match. If no match is found, returns undefined. + + + + The editor to search for the descendant node. + + + The options to find the node. It can contain match condition, starting + location, whether to traverse in reverse, and whether to include voids. + + + + Returns the first node entry matching the condition or `undefined` if no match + is found. + + +### getBlockAbove + +Returns the block above a specified location + +- **Default:** Selection. + + + + The editor to search for the block. + + + The options to find the block above a location. + + + + +Returns the block above the specified location. + + + +### getBlocks + +Retrieves block-level node entries from the editor. + + + + The editor to search for block-level nodes. + + + Options for getting node entries. + + + + + An array of block-level node entries. + + +### getChildren + +Returns the children node entries of a node entry. + + + + The node entry to get its children. + + + + +Returns an array of the children node entries. + + + +### getEdgeBlocksAbove + +Returns the edge blocks above a specified location. + +- **Default:** Selection. + + + + The editor to search for the edge blocks. + + + The options to find the edge blocks above a location. + + + + Returns an array containing the start block and end block above the specified + location, or `null` if not found. + + +### getFragmentProp + +Retrieves a consistent property value from a fragment of nodes. + + + + The fragment of nodes to search for the property. + + + + + The key of the property to extract from each node. + + + The default value to return if no valid prop is found. + + + Custom function to extract the prop value from a node. + + + Determines how to traverse the fragment: + - 'all': Check both block and text nodes + - 'block': Only check block nodes + - 'text': Only check text nodes + Default is 'block'. + + + + + + + The consistent property value found in the fragment, or undefined if no consistent value is found. + + +### getFirstNodeText + +Gets the first text node from a node. + + + + The root node to search for text nodes. + + + Options for getting node texts. + + + + Returns the first text node entry or `undefined` if no text nodes are found. + + +### getLastChild + +Returns the last child of a node or `null` if no children. + + + + The node entry to get its last child. + + + + Returns the last child of a node or `null` if no children. + + +### getLastNodeByLevel + +Retrieves the last node at a specified level in the editor. + + + + The editor to search for the last node. + + + The level at which to find the last node. + + + + Returns the last node entry at the specified level or `undefined` if no node + is found. + + +### getMark + +Retrieves the value of the selection mark by key in the editor. + + + + The editor where the selection mark is located. + + + The key of the selection mark to retrieve. + + + + Returns the value of the selection mark or `undefined` if the editor or the + mark is not found. + + +### getNextNodeStartPoint + +Retrieves the start point of the next node at a specified path in the editor. + + + + The editor to search for the next node. + + + The path at which to find the next node. + + + + Returns the start point of the next node or `undefined` if the next node is + not found. + + +### getNextSiblingNodes + +Retrieves the sibling nodes following a specified path in the ancestor node. + + + + The ancestor node of the sibling nodes. + + + The path of the reference node. + + + + Returns an array of sibling nodes after the path or an empty array if no + sibling nodes are found. + + +### getOperations + +Retrieves the operations of the editor. + + + + The editor to get its operations. + + + + Returns the operations of the editor as `TOperation` array. + + +### getPointBeforeLocation + +Returns the point before a location, with additional options to customize the behavior. If no options are provided or neither **`match`** nor **`matchString`** are defined, it will default to using **`getPointBefore`**. + + + + The editor where to find the point before a location. + + + The location where to start. + + + The options to define how the search is performed. + + + + Returns the point before a location. If not found, returns `undefined`. + + +### getPointFromLocation + +Returns the point from a location (**Default:** selection). If the location is a range, it gets the anchor point. If the location is a path, it gets the point at this path with offset 0. + + + +The editor where to find the point. + + + + + + +The location where to get the point. + +- **Default:** Selection. + + + +If true, returns the focus point. Otherwise, returns the anchor point. + + + + + + + + + +Returns the point from the location. + + + +### getPointNextToVoid + +If the start point is inside an inline void, returns the point before or after it. + + + +The editor where to find the point next to the void. + + + + + + +The point from where to start. + + + +If true, gets the point after the void node. Otherwise, gets the point before. + + + + + + + +Returns the point next to the void. + + + +### getPreviousBlockById + +Finds the block before a block by ID. If not found, it finds the first block by ID and returns **`[null, its previous path]`**. + + + + The editor where to find the previous block. + + + The ID of the block. + + + The options for the node query. + + + + Returns the node entry of the previous block if found, otherwise undefined. + + +### getPreviousNodeEndPoint + +Gets the end point of the previous node. + + + + The editor where to find the previous node's end point. + + + The path where to start the search. + + + + Returns the end point of the previous node if found, otherwise `undefined`. + + +### getPreviousPath + +Generates the previous path based on the given path. + + + + The current path. + + + + The previous path or `undefined` if there is no previous path. + + +### getPreviousSiblingNode + +Gets the previous sibling node from the given path. + + + + The editor instance. + + + The current path. + + + + An array containing the previous sibling node and its path, or `undefined` if + there is no previous sibling. + + +### getRangeBefore + +Gets the range from the point before a given location to the end point of the location. + + + + The editor instance. + + + The location to consider. + + + Options for getting the point before the location. + + + + The range from the point before the location to the end point of the location, + or `undefined` if no such point exists. + + +### getRangeFromBlockStart + +Gets the range from the start of the block above a location to the location. + + + + The editor instance. + + + Options for getting the block above the location. + + + + The range from the start of the block above the location to the location, or + `undefined` if no such block exists. + + +### getSelectionFragment + +Retrieves the fragment of the current selection, optionally unwrapping structural nodes. + + + + The editor to get the selection fragment from. + + + + + Array of structural types to unwrap from the fragment. + + + + + + + An array of `TElement` representing the fragment of the current selection. Returns an empty array if the selection is not expanded or if no fragment is found. + + +### getSelectionText + +Gets the selected text from the editor. + + + + The editor instance. + + + + The selected text, or an empty string if no text is selected. + + +### isAncestorEmpty + +Checks whether an ancestor node is empty (has empty text and no inline children). + + + + The editor instance. + + + The ancestor node to check. + + + + +True if the ancestor node is empty, false otherwise. + + + +### isBlockAboveEmpty + +Checks whether the block above the selection is empty. + + + + The editor instance. + + + + +True if the block above the selection is empty, false otherwise. + + + +### isBlockTextEmptyAfterSelection + +Checks whether the text in the block after the selection is empty. + + + + The editor instance. + + + + +True if the text in the block after the selection is empty, false otherwise. + + + +### isDocumentEnd + +Checks whether the selection is at the end of the document. + + + + The editor instance. + + + + +True if the selection is at the end of the document, false otherwise. + + + +### isFirstChild + +Checks whether a node is the first child of its parent. + + + + The path of the node to check. + + + + +True if the node is the first child of its parent, false otherwise. + + + +### isMarkActive + +Checks whether a mark is active in the selection. + + + + The editor instance. + + + The mark key. + + + + +True if the mark is active in the selection. + + + +### isPointAtWordEnd + +Checks whether a point is at the end of a word. + + + + The editor instance. + + + The point to check. + + + + True if the point is at the end of a word, false otherwise. + + +### isRangeAcrossBlocks + +Determines whether the range (**Default:** selection) is across blocks. + + + + The editor instance. + + + The range to check. If not provided, the selection range is used. + + + + True if the range is across blocks, false if it's within a single block, or + undefined if the block was not found. + + +### isRangeInSameBlock + +Determines whether the range is within the same block. + + + + The editor instance. + + + The range to check. If not provided, the selection range is used. + + + + True if the range is within the same block, false otherwise. + + +### isRangeInSingleText + +Checks whether a range is within a single text path. + + + + The range to check. + + + + True if the range is within a single text path, false otherwise. + + +### isSelectionAtBlockEnd + +Checks whether the selection focus is at the end of its parent block. + + + + The editor instance. + + + The options object. + + + + True if the selection focus is at the end of its parent block, false + otherwise. + + +### isSelectionAtBlockStart + +Checks whether the selection anchor or focus is at the start of its parent block. + + + + The editor instance. + + + The options object. + + + + True if the selection anchor or focus is at the start of its parent block, + false otherwise. + + +### isSelectionExpanded + +Checks whether the selection is expanded. + + + + The editor instance. + + + + +True if the selection is expanded, false otherwise. + + + +### isTextByPath + +Checks whether the node at a given path is a text node. + + + + The editor instance. + + + The path to the node to check. + + + + +True if the node is a text node, false otherwise. + + + +### isWordAfterTrigger + +Checks whether the word at a given point is after a trigger (punctuation character). + + + + The editor instance. + + + The point to check. + + + The trigger character to check for. + + + + An object containing the range from the point before the start of the previous + word to the given point, and a match if the text at the range starts with the + trigger and ends with word characters. + + +### queryEditor + +Queries the editor state. + + + + The editor instance. + + + The options object, which can include a filter function, + selectionAtBlockStart, selectionAtBlockEnd, allow, exclude, and at + properties. + + + + True if the editor state matches the query, false otherwise. + + +## Transforms + +### duplicateBlocks + +Duplicates the given blocks and inserts them after the last block in the selection. + + + + The editor instance. + + + An array of node entries representing the blocks to duplicate. + + + +### insertElements + +Inserts nodes at a location in the document. + + + + The editor instance. + + + The nodes to insert. + + + The options object. + + + +### insertEmptyElement + +Inserts an empty element at a location in the document. + + + + The editor instance. + + + The type of the element to insert. + + + The options object. + + + +### moveChildren + +Moves the children of a node to a path. + + + + The editor instance. + + + The options object, which includes `at`, `to`, `match`, and `fromStartIndex` + properties. + + + + +The number of children moved. + + + +### removeEditorText + +Removes all non-empty text nodes from the editor. + + + + The editor instance. + + + Options for removing nodes. The `match` function in options will be combined with the text length check. + + + +### removeMark + +Removes a mark and triggers `onChange` if the selection is collapsed. + + + + The editor instance. + + + The options object, which includes `key`, `at`, and `shouldChange` + properties. + + + +### removeNodeChildren + +Removes all children of a node. + + + + The editor instance. + + + The path to the node to remove children from. + + + The options object. + + + +### removeSelectionMark + +Removes all marks from the selection. + + + + The editor instance. + + + +### replaceNodeChildren + +Replaces the children of a node: removes then inserts them. + + + + The editor instance. + + + The options object, which includes `at`, `nodes`, `insertOptions`, and + `removeOptions` properties. + + + +### selectEndOfBlockAboveSelection + +Selects the end point of the block above the selection. + + + + The editor instance. + + + +### selectNodes + +Selects the range encompassing the given nodes. + + + + The editor instance. + + + An array of node entries to select. + + + +### setBlockAboveNode + +Sets properties on the block above the current selection. + + + + The editor instance. + + + The properties to set on the block. + + + Options for setting nodes, excluding the 'at' property. + + + +### setBlockAboveTexts + +Sets properties on the lowest-level nodes within the block above the current selection. + + + + The editor instance. + + + The properties to set on the text nodes. + + + Options for setting nodes, excluding the 'at' property. + + + +### setBlockNodes + +Sets properties on all block nodes that match the given options. + + + + The editor instance. + + + The properties to set on the matching block nodes. + + + Options for getting node entries to update. + + + +### setMarks + +Sets marks to selected text. + + + + The editor instance. + + + The marks to set. + + + Marks to clear. + + + +### toggleMark + +Adds or removes marks in the selection. + + + + The editor instance. + + + The options object, which includes `key` and `clear` properties. + + + +### toggleWrapNodes + +Unwraps a node if the node type is in selection, otherwise wraps it. + + + + The editor instance. + + + The type of the node. + + + +### wrapNodeChildren + +Wraps the children of a node into a single element. + + + + The editor instance. + + + The new parent element. + + + The options object, which includes `at` property. + + + +## Utils + +### createDocumentNode + +Creates a new document node. + + + +The type of the node. + +- **Default:** `'p'` + + + +The text for the node. + +- **Default:** an empty string. + + + +The remaining nodes. + +- **Default:** an empty array. + + + + +An array of `TDescendant` nodes, starting with the newly created node. + + +### createNode + +Creates a new node. + + + +The type of the node. + +- **Default:** `'p'` + + + +The text for the node. + +- **Default:** an empty string. + + + + + +A new `TElement` node. + + diff --git a/apps/www/content/en/docs/api/slate.mdx b/apps/www/content/en/docs/api/slate.mdx new file mode 100644 index 0000000000..2b40cdf487 --- /dev/null +++ b/apps/www/content/en/docs/api/slate.mdx @@ -0,0 +1,314 @@ +--- +title: Slate +description: API reference for @udecode/slate. +--- + +`@udecode/slate` extends Slate API with generic types. + +## Editor + +Find the corresponding documentation in the [Slate docs](https://docs.slatejs.org/api/transforms). + +### `addMark` + +### `createPathRef` + +### `createPointRef` + +### `createRangeRef` + +### `deleteBackward` + +### `deleteForward` + +### `deleteFragment` + +### `deleteMerge` + +### `getAboveNode` + +### `getEdgePoints` + +### `getEditorString` + +### `getEndPoint` + +### `getFirstNode` + +### `getFragment` + +### `getLastNode` + +### `getLeafNode` + +### `getLevels` + +### `getMarks` + +### `getNextNode` + +### `getNodeEntries` + +### `getNodeEntry` + +### `getParentNode` + +### `getPath` + +### `getPathRefs` + +### `getPoint` + +### `getPointAfter` + +### `getPointBefore` + +### `getPointRefs` + +### `getPositions` + +### `getPreviousNode` + +### `getRange` + +### `getRangeRefs` + +### `getStartPoint` + +### `getVoidNode` + +### `hasBlocks` + +### `hasInlines` + +### `hasTexts` + +### `index` + +### `insertBreak` + +### `insertNode` + +### `isBlock` + +### `isEdgePoint` + +### `isEditor` + +### `isEditorNormalizing` + +### `isElementEmpty` + +### `isEndPoint` + +### `isInline` + +### `isStartPoint` + +### `isVoid` + +### `normalizeEditor` + +### `removeEditorMark` + +### `TEditor` + +### `unhangRange` + +### `withoutNormalizing` + +## Element + +Find the corresponding documentation in the [Slate docs](https://docs.slatejs.org/api/nodes/element). + +### `elementMatches` + +### `index` + +### `isElement` + +### `isElementList` + +### `TElement` + +## History + +Find the corresponding documentation in the [Slate docs](https://docs.slatejs.org/libraries/slate-history). + +### `isHistoryEditor` + +### `isHistoryMerging` + +### `isHistorySaving` + +### `withoutMergingHistory` + +### `withoutSavingHistory` + +## Node + +Find the corresponding documentation in the [Slate docs](https://docs.slatejs.org/api/nodes/node). + +### `TDescendant` + +### `getNodeDescendants` + +### `getNodeLastNode` + +### `getNodeString` + +### `getNodeFirstNode` + +### `hasNode` + +### `isNode` + +### `getNodeFragment` + +### `getNodeLeaf` + +### `getNodeLevels` + +### `isNodeList` + +### `getNodeProps` + +### `TAncestor` + +### `getNode` + +### `getNodeTexts` + +### `getNodes` + +### `getNodeChildren` + +### `getNodeAncestor` + +### `TNodeEntry` + +### `TNode` + +### `nodeMatches` + +### `getNodeChild` + +### `getNodeElements` + +### `getNodeAncestors` + +### `getNodeDescendant` + +### `getCommonNode` + +### `isAncestor` + +### `hasSingleChild` + +### `getNodeParent` + +## Range + +Find the corresponding documentation in the [Slate docs](https://docs.slatejs.org/api/locations/range). + +### `isCollapsed` + +### `isExpanded` + +## Text + +Find the corresponding documentation in the [Slate docs](https://docs.slatejs.org/api/nodes/text). + +### `isText` + +### `isTextList` + +### `textEquals` + +### `textMatches` + +### `TText` + +## Transforms + +Find the corresponding documentation in the [Slate docs](https://docs.slatejs.org/api/transforms). + +### `moveNodes` + +### `moveSelection` + +### `removeNodes` + +### `select` + +### `insertText` + +### `insertNodes` + +### `deleteText` + +### `setPoint` + +### `setNodes` + +### `unwrapNodes` + +### `deselect` + +### `mergeNodes` + +### `collapseSelection` + +### `unsetNodes` + +### `setSelection` + +### `splitNodes` + +### `insertFragment` + +### `wrapNodes` + +### `liftNodes` + +## Types + +### QueryNodeOptions + +An interface used to query node entries. + + + + +A function to filter node entries. + +- The function should take a node entry as a parameter and return a boolean. + + + + +List of types that are valid. + +- If empty or undefined, all types are allowed. + + + + +List of types that are invalid. + + + + +Valid path levels. + + + + +Paths above this level are invalid. + + + diff --git a/apps/www/content/en/docs/api/utils.mdx b/apps/www/content/en/docs/api/utils.mdx new file mode 100644 index 0000000000..76df95c484 --- /dev/null +++ b/apps/www/content/en/docs/api/utils.mdx @@ -0,0 +1,374 @@ +--- +title: Plate Utils +description: API reference for @udecode/plate-utils. +--- + +`@udecode/plate-utils` contains utility functions for Plate. + +## Components + +### PlateElement + +Generic component for rendering an element. + + + +PlateElementProps. + + +The CSS class to apply to the component. + + +Additional props to pass to the component. + + +The editor instance. Also available using `useEditorRef` hook. + + +The element node. Also available using `useElement` hook. + + +The path of the element in the editor tree. Also available using `usePath` hook. + + +Attributes of the element to be spread on the top-level element. + + +This is always set to `'element'`. + + + + + +The reference to the element. If using your own reference, you must +merge it with this one. + + + + +Necessary for rendering the node children. + + +Get HTML attributes from Slate element. This is an alternative to +`PlatePlugin.props`. + + +The component type to render as. + +- **Default:** `'div'` + + + +If true, merges its props onto its immediate child. + + + +### PlateLeaf + +Generic component for rendering a leaf. + + + +PlateLeafProps. + + +The CSS class to apply to the component. + + +The editor context. + + +Additional props to pass to the component. + + +Necessary for rendering the node children. + + +The leaf node. + + +The text node. + + +Attributes of the leaf to be spread on the top-level element. + + + +This is always set to `true`. + + + + +Get HTML attributes from Slate leaf. This is an alternative to `PlatePlugin.props`. + + +The component type to render as. + +- **Default:** `'span'` + + + +If true, merges its props onto its immediate child. + + + +## Hooks + +### useEditorString + +A hook that returns the entire text content of the editor as a string. + + + + The concatenated text content of all text nodes in the editor. + + + +### useMarkToolbarButtonState + +Generates the state for a mark toolbar button. + + + + The type of the node to check for active marks. + + + Type or types of the node to clear when the mark is applied. + + + + + A boolean indicating whether the nodeType mark is active in the current + selection. + + + The type of the node. + + + Type or types of the node to clear. + + + +### useMarkToolbarButton + +Generates the props for a mark toolbar button using the state created by **`useMarkToolbarButtonState`**. + + + + The state for the mark toolbar button generated by + `useMarkToolbarButtonState`. + + + + + Properties of the toolbar button including `pressed` status and `onClick` + function. + + + A boolean indicating whether the mark toolbar button is active. + + + A function that handles the onClick event of the button, toggling the + mark and focusing the editor. + + + + + +### usePlaceholderState + +Generates the state for a placeholder in an editor. + + + + If true, the placeholder is hidden when the editor is not focused. + + - **Default:** `true` + + + + Options to query the node. If defined, the placeholder is only shown if the + node matches the query. + + + The element in which the placeholder is to be displayed. + + + + + A boolean indicating whether the placeholder should be displayed or not. + + + +### useRemoveNodeButton + +Generates the props for a button that, when clicked, removes a node from the editor. + + + + The node element to be removed when the button is clicked. + + + + + Properties of the remove node button including the `onClick` function. + + + A function that handles the onClick event of the button, removing the + node and focusing the editor. + + + + + +## Queries + +### isType + +Checks whether a node matches the provided type. + + + + The editor in which the node is present. + + + The node to be checked. + + + The type or types to match the node against. Can be a string or an array of + strings. + + + + A boolean indicating whether the node's type matches the provided type or + types. + + +## Transforms + +### resetEditorChildren + +Replaces the children of an editor with default blocks. + + + + The editor whose children are to be replaced. + + + Options for replacing the children of the node. Excludes `at` and `nodes` + options. + + + +### selectEditor + +Selects an editor at a target location or an edge (start, end). + + + + The editor to be selected. + + + Specific location to select. + - If `edge` is not defined, this option is considered. + + + Select the start or end of the editor. + - Overrides `at` option if defined. + + + If true, focuses the React editor before selecting markdown Copy code. + + - **Default:** `false` + + + + + No explicit return, but selects and potentially focuses the editor. + + +### moveSelectionByOffset + +Moves the selection by offset based on the keyboard arrow keys. + + + + The editor instance. + + + Options for moving the selection by offset. This is an optional parameter. + + + A query function to enable the behavior. + + + The keyboard event that triggered the move. + + + + + +### selectSiblingNodePoint + +Selects a point from the previous or next sibling node of the specified node. + + + + The editor instance. + + + Options for selecting a sibling node's point. + + + The path of the reference node. If not provided, `node` must be specified. + + + Whether to select the previous sibling instead of the next. + - `false`: Select the start point of the next sibling node. + - `true`: Select the end point of the previous sibling node. + - **Default:** `false` + + + Whether to focus the editor after selection. + - **Default:** `true` + + + The reference node. Used to find the path if `at` is not provided. + + + + + +## Utils + +### defaultsDeepToNodes + +Recursively merges a source object into children nodes using a query. + + + + Options for the function, excluding the 'apply' option. + + + + No explicit return, but it modifies the children nodes based on the provided + options. + diff --git a/apps/www/content/en/docs/autoformat.mdx b/apps/www/content/en/docs/autoformat.mdx new file mode 100644 index 0000000000..296d5568a5 --- /dev/null +++ b/apps/www/content/en/docs/autoformat.mdx @@ -0,0 +1,320 @@ +--- +title: Autoformat +docs: + - route: /docs/basic-elements + title: Basic Elements + - route: /docs/basic-marks + title: Basic Marks + - route: /docs/horizontal-rule + title: Horizontal Rule + - route: /docs/list + title: List +--- + + + + + +## Features + +- Enables quick content formatting via shortcodes. +- Offers markdown-like inline codes for real-time typing. +- Enhances and simplifies editing by avoiding toolbar buttons and shortcuts for common formatting. +- Auto conversion feature (e.g., `#` to H1). +- Provides predefined formatting rules. + +**Formatting shortcodes:** + +- `text*` for bold text. +- `_text_` for italicized text. +- `~~text~~` for strikethrough text. +- ... and more. + + + +## Installation +```bash +npm install @udecode/plate-autoformat +``` + +## Usage + +```tsx +import { AutoformatPlugin } from '@udecode/plate-autoformat/react'; + +const plugins = [ + // ...otherPlugins, + AutoformatPlugin.configure({ + options: { + rules: autoformatRules, + enableUndoOnDelete: true, + }, + }), +]; +``` + +## Examples + +### `autoformatRules` + + + +### `autoformatBlocks` + +### `autoformatIndentLists` + +If using the [Indent List plugin](/docs/indent-list), you can use the following rules: + +### `autoformatLists` + +If using the [List plugin](/docs/list), you can use the following rules: + +### `autoformatMarks` + +### `autoformatUtils` + +## API + +### AutoformatPlugin + + + + + +A list of triggering rules. + +- Can be one of the following: `AutoformatBlockRule`, `AutoformatMarkRule`, `AutoformatTextRule`. +- Extends `AutoformatCommonRule`. + + + + +Enable undo on delete. + + + + +### Rules + +You can import the following rules: + +| Name | Description | +| :----------------------------- | :----------------------------------- | +| `autoformatSmartQuotes` | Converts `"text"` to `"text"`. | +| | Converts `'text'` to `'text'`. | +| `autoformatPunctuation` | Converts `--` to `—`. | +| | Converts `...` to `…`. | +| | Converts `>>` to `»`. | +| | Converts `<<` to `«`. | +| `autoformatArrow` | Converts `->` to `→`. | +| | Converts `<-` to `←`. | +| | Converts `=>` to `⇒`. | +| | Converts `<=` and `≤=` to `⇐`. | +| `autoformatLegal` | Converts `(tm)` and `(TM)` to `™`. | +| | Converts `(r)` and `(R)` to `®`. | +| | Converts `(c)` and `(C)` to `©`. | +| `autoformatLegalHtml` | Converts `™` to `™`. | +| | Converts `®` to `®`. | +| | Converts `©` to `©`. | +| | Converts `§` to `§`. | +| `autoformatComparison` | Converts `!>` to `!>`. | +| | Converts `!<` to `≮`. | +| | Converts `>=` to `≥`. | +| | Converts `<=` to `≤`. | +| | Converts `!>=` to `≱`. | +| | Converts `!<=` to `≰`. | +| `autoformatEquality` | Converts `!=` to `≠`. | +| | Converts `==` to `≡`. | +| | Converts `!==` and `≠=` to `≢`. | +| | Converts `~=` to `≈`. | +| | Converts `!~=` to `≉`. | +| `autoformatFraction` | Converts `1/2` to `½`. | +| | Converts `1/3` to `⅓`. | +| | ... | +| | Converts `7/8` to `⅞`. | +| `autoformatDivision` | Converts `//` to `÷`. | +| `autoformatOperation` | Converts `+-` to `±`. | +| | Converts `%%` to `‰`. | +| | Converts `%%%` and `‰%` to `‱. | +| | `autoformatDivision` rules. | +| `autoformatSubscriptNumbers` | Converts `~0` to `₀`. | +| | Converts `~1` to `₁`. | +| | ... | +| | Converts `~9` to `₉`. | +| `autoformatSubscriptSymbols` | Converts `~+` to `₊`. | +| | Converts `~-` to `₋`. | +| `autoformatSuperscriptNumbers` | Converts `^0` to `⁰`. | +| | Converts `^1` to `¹`. | +| | ... | +| | Converts `^9` to `⁹`. | +| `autoformatSuperscriptSymbols` | Converts `^+` to `°`. | +| | Converts `^-` to `⁺`. | +| `autoformatMath` | `autoformatComparison` rules | +| | `autoformatEquality` rules | +| | `autoformatOperation` rules | +| | `autoformatFraction` rules | +| | `autoformatSubscriptNumbers` rules | +| | `autoformatSubscriptSymbols` rules | +| | `autoformatSuperscriptNumbers` rules | +| | `autoformatSuperscriptSymbols` rules | + +### AutoformatCommonRule + +An interface for the common structure of autoformat rules, regardless of their mode. + + + + +The rule applies when the trigger and the text just before the cursor matches. + +- For `mode: 'block'`: lookup for the end match(es) before the cursor. +- For `mode: 'text'`: lookup for the end match(es) before the cursor. If `format` is an array, also lookup for the start match(es). +- For `mode: 'mark'`: lookup for the start and end matches. +- Note: `'_*'`, `['_*']` and `{ start: '_*', end: '*_' }` are equivalent. +- `MatchRange`: + + + + + +The starting point of the range. + + + + +The ending point of the range. + + + + + + + +Triggering character to autoformat. + + + + +If true, insert the triggering character after autoformatting. + +- **Default:** `false` + + + + +A query function to allow autoformat. + +- `AutoformatQueryOptions` extends `Omit`: + + + + +`insertText` text. + + + + + + + +### AutoformatBlockRule + +An interface for autoformat rules for block mode. + + + + +- Text: insert text. +- Block: set block type or custom format. +- Mark: insert mark(s) between matches. + + + + +A pattern to match for the autoformat rule to apply. + + + + +- For `mode: 'block'`: set block type. If `format` is defined, this field is ignored. +- For `mode: 'mark'`: Mark(s) to add. + + + + +If true, the trigger should be at block start to allow autoformatting. + +- **Default:** `true` + + + + +If true, allow to autoformat even if there is a block of the same type above +the selected block. + +- **Default:** `false` + + + + +Function called just before `format`. Generally used to reset the selected +block. + + + + +Custom formatting function. + + + + +### AutoformatMarkRule + +An interface for autoformat rules for mark mode. + + + + +The mode is 'mark'. + + + + +Mark(s) to add. + + + + +If false, do not format when the string can be trimmed. + + + + +### AutoformatTextRule + +An interface for autoformat rules for text mode. + + + + +The mode is 'text'. + + + + +A pattern to match for the autoformat rule to apply. + + + + +The matched text is replaced by that string, the matched texts are replaced by these strings, or a function called when there is a match. + + + diff --git a/apps/www/content/en/docs/basic-elements.mdx b/apps/www/content/en/docs/basic-elements.mdx new file mode 100644 index 0000000000..512f46359b --- /dev/null +++ b/apps/www/content/en/docs/basic-elements.mdx @@ -0,0 +1,295 @@ +--- +title: Basic Elements +docs: + - route: /docs/components/blockquote-element + title: Block Quote Element + - route: /docs/components/code-block-element + title: Code Block Element + - route: /docs/components/code-line-element + title: Code Line Element + - route: /docs/components/code-syntax-leaf + title: Code Syntax Leaf + - route: /docs/components/heading-element + title: Heading Element +--- + + + + + +## Features + +- Includes commonly used block elements: blockquote, code block, and headings. + + + +**Plugins:** + +- `BlockquotePlugin` for `blockquote` element +- `CodeBlockPlugin` for `code_block` element +- `HeadingPlugin` for `h1`, `h2`,... elements + +## Installation + +```bash +npm install @udecode/plate-basic-elements +# or +npm install @udecode/plate-block-quote @udecode/plate-code-block @udecode/plate-heading +``` + +## Usage + +```tsx +import { BasicElementsPlugin, CodeBlockPlugin } from '@udecode/plate-basic-elements/react'; +import Prism from 'prismjs'; + +const plugins = [ + // ...otherPlugins, + BasicElementsPlugin.configurePlugin(CodeBlockPlugin, { + options: { + prism: Prism, + }, + }), +]; +``` + +## Keyboard Shortcuts + + + Toggle heading 1 block. + Toggle heading 2 block. + Toggle heading 3 block. + + Toggle the blockquote formatting for selected text. + + + +## Plugins + +### BasicElementsPlugin + +### BlockquotePlugin + +### HeadingPlugin + + + +Specifies the heading levels supported, ranging from 1 to the specified levels. + + + + +### CodeBlockPlugin + + + + +Determines if syntax highlighting is enabled. + + + +Determines if popular syntax should be displayed first. + + + +Defines deserializers for the code block plugin. + + + + +## API Code Block + +### isCodeBlockEmpty + +Checks if the selection is inside an empty code block. + + + + The editor instance. + + + + + + Returns true if the selection is in an empty code block. + + + +### isSelectionAtCodeBlockStart + +Checks if the selection is at the start of the first code line in a code block. + + + + The editor instance. + + + + + + Returns true if the selection is at the start of the first code line in a + code block. + + + +### indentCodeLine + +Indents the code line if the selection is expanded or there are no non-whitespace characters at left of the cursor. The indentation is 2 spaces by default. + + + +The editor instance. + + + + + The code line to be indented. + + +The size of indentation for the code line. + +- **Default:** `2` + + + + + + + +### insertCodeBlock + +Inserts a code block by setting the node to code line and wrapping it with a code block. If the cursor is not at the block start, it inserts a break before the code block. + + + + The editor instance. + + + + +### insertCodeLine + +Inserts a code line starting with the specified indentation depth. + + + + The editor instance. + + + The depth of indentation for the code line. + + - **Default:** `0` + + + + +### outdentCodeLine + +Outdents a code line, removing two whitespace characters if present. + + + + The editor instance. + + + + + The code line to be outdented. + + + The code block containing the code line to be outdented. + + + + + +### toggleCodeBlock + +Toggles the code block in the editor. + + + + The editor instance. + + + +### unwrapCodeBlock + +Unwraps the code block in the editor. + + + + The editor instance. + + + +### useCodeBlockCombobox + + + + The code block element. + + + Set element value callback. + + + + + + The props for the command item. + + + The function to call when the command item is selected. + + + + + +### useCodeBlockElementState + + + + The code block element. + + + + + + The CSS class name for the code block element, representing the selected + language. + + + The syntax plugin option. + + + +### useCodeSyntaxLeaf + + + + + + The leaf node representing a code syntax token. + + + + + + + + The props for the token. + + + The CSS class name for the token. + + + + \ No newline at end of file diff --git a/apps/www/content/en/docs/basic-marks.mdx b/apps/www/content/en/docs/basic-marks.mdx new file mode 100644 index 0000000000..4b74d8b24a --- /dev/null +++ b/apps/www/content/en/docs/basic-marks.mdx @@ -0,0 +1,136 @@ +--- +title: Basic Marks +docs: + - route: /docs/components/mark-toolbar-button + title: Mark Toolbar Button +--- + + + + + +## Features + +- Includes commonly used text styling features: bold, italic, underline, strikethrough, subscript, superscript, and code. + + + +**Plugins:** + +- `BoldPlugin` for `bold` mark +- `ItalicPlugin` for `italic` mark +- `UnderlinePlugin` for `underline` mark +- `StrikethroughPlugin` for `strikethrough` mark +- `SubscriptPlugin` for `subscript` mark +- `SuperscriptPlugin` for `superscript` mark +- `CodePlugin` for `code` mark + +## Installation + +```bash +npm install @udecode/plate-basic-marks +``` + +## Usage + +```tsx +import { BasicMarksPlugin } from '@udecode/plate-basic-marks/react'; + +const plugins = [ + // ...otherPlugins, + BasicMarksPlugin, +]; +``` + +## Keyboard Shortcuts + + + + Toggle the bold formatting for the selected text. + + + Toggle the italic formatting for the selected text. + + + Toggle the underline formatting for the selected text. + + + Toggle the code formatting for the selected text. + + + Toggle the strikethrough formatting for the selected text. + + + Toggle the subscript formatting for the selected text. + + + Toggle the superscript formatting for the selected text. + + + +## Plugins + +### BasicMarksPlugin + +### BoldPlugin + + + +Node properties to delete. + + + + +### CodePlugin + + + +Node properties to delete. + + + + +### ItalicPlugin + + + +Node properties to delete. + + + + +### UnderlinePlugin + + + +Node properties to delete. + + + + +### StrikethroughPlugin + + + +Node properties to delete. + + + + +### SubscriptPlugin + + + +Node properties to delete. + + + + +### SuperscriptPlugin + + + +Node properties to delete. + + + \ No newline at end of file diff --git a/apps/www/content/en/docs/block-menu.mdx b/apps/www/content/en/docs/block-menu.mdx new file mode 100644 index 0000000000..cce8309711 --- /dev/null +++ b/apps/www/content/en/docs/block-menu.mdx @@ -0,0 +1,114 @@ +--- +title: Block Menu +docs: + - route: /docs/components/block-context-menu + title: Block Context Menu + + - route: https://pro.platejs.org/docs/components/block-menu + title: Block Menu + + - route: https://pro.platejs.org/docs/components/block-context-menu + title: Block Context Menu + +--- + + + + + +## Features + +- Right-click on a block to open the menu. +- Allows you to perform actions on blocks such as turn into, duplicating or deleting. +- Customizable menu items and actions. +- Keyboard navigation + + + +## Installation + +```bash +npm install @udecode/plate-selection @udecode/plate-node-id +``` + +## Usage + +```tsx +import { BlockMenuPlugin } from '@udecode/plate-selection/react'; +import { NodeIdPlugin } from '@udecode/plate-node-id'; +``` + +```tsx +const plugins = [ + // ...otherPlugins, + NodeIdPlugin, + BlockSelectionPlugin.configure({ + options: { + enableContextMenu: true, + }, + }), + BlockMenuPlugin.configure({ + render: { aboveEditable: BlockContextMenu }, + }), +] +``` + +- [BlockContextMenu](/docs/components/block-context-menu) + +To control the opening of the context menu for specific elements, you can use the `data-plate-open-context-menu` attribute: + +```tsx + + {children} + +``` + +Generally, we only need to prevent right-clicking on the padding of the ``. + +## Examples + +### Plate UI + +Refer to the preview above. + +### Plate Plus + + + +## Plugins + +### BlockMenuPlugin + +Block menu state management. + +## API + +### editor.api.blockMenu.hide + +Hides the block menu. + +### editor.api.blockMenu.show + +Shows the block menu for a specific block. + + + + The ID of the block to show the menu for. + + + The position to show the menu at. + + + +### editor.api.blockMenu.showContextMenu + +Shows the context menu for a specific block. + + + + The ID of the block to show the context menu for. + + + The position to show the context menu at. + + diff --git a/apps/www/content/en/docs/block-selection.mdx b/apps/www/content/en/docs/block-selection.mdx new file mode 100644 index 0000000000..d737855c04 --- /dev/null +++ b/apps/www/content/en/docs/block-selection.mdx @@ -0,0 +1,379 @@ +--- +title: Block Selection +docs: + - route: /docs/components/block-selection + title: Block Selection +--- + + + + + +The Block Selection feature allows users to select and manipulate entire text blocks, as opposed to individual words or characters. This powerful functionality enhances the editing experience by providing efficient ways to manage large sections of content. + +## Features + +- Select entire blocks with a single action +- Multi-block selection +- Copy, cut, and delete operations on selected blocks +- Keyboard shortcuts for quick selection: + - `Cmd+A`: + - First press: select the current block + - Double press: select all blocks + - Arrow keys: select the block above or below +- Customizable styling for selected blocks + + + +## Installation + +```bash +npm install @udecode/plate-selection @udecode/plate-node-id +``` + +## Usage + +```tsx +import { NodeIdPlugin } from '@udecode/plate-node-id'; +import { BlockSelectionPlugin } from '@udecode/plate-selection/react'; + +const plugins = [ + // ...otherPlugins, + NodeIdPlugin, + BlockSelectionPlugin, +]; +``` + +### Exclude blocks from selection + +You can exclude certain plugins from block selection using: + +```ts +BlockSelectionPlugin.configure({ + inject: { + // Exclude blocks below table rows + excludeBelowPlugins: ['tr'], + // Exclude block types + excludePlugins: ['table', 'code_line', 'column_group', 'column'], + } +}) +``` + +- `excludeBelowPlugins`: Plugin keys of non-selectable block descendants. Use this to prevent selection below specific blocks. For example, excluding 'tr' prevents selecting individual cells while still allowing table row selection. + +- `excludePlugins`: Plugin keys of non-selectable blocks. + +### Set scrollable container + +If you're using `EditorContainer` from [Editor](/docs/components/editor), you can skip this section. + +To control the scrollable container, configure the `boundaries` and `container` options within `areaOptions`. These options accept CSS selectors, such as `#selection-demo #${editor.uid}`, which are used with `document.querySelector()`. + +For this to work effectively: + +1. Add an `id` or `className` to your scroll container. If you're not sure about the container, you can add it to the `` component. We recommend using `id={editor.uid}`. +2. Use the appropriate selector in your configuration. +3. Don't forget to set `position: relative` to the container. + +Default configuration: + +```js +BlockSelectionPlugin.configure({ + options: { + areaOptions: { + boundaries: `#${editor.uid}`, + container: `#${editor.uid}`, + selectables: `#${editor.uid} .slate-selectable`, + }, + }, +}); +``` + +### Set scroll speed + +Use `options.areaOptions.behaviour.scrolling.speedDivider` to set the scroll speed. + +The value `0.8` is our recommended speed since it's near the browser-native speed. + + +```ts +BlockSelectionPlugin.configure({ + options: { + areaOptions: { + behaviour: { + scrolling: { + // You can slow down the scroll speed by setting a bigger value. + speedDivider: 1.5, + }, + // The distance needed to move for the selection area to appear. + // If it’s too small, it may cause the mouse click event to be blocked. 10 is a good default. + startThreshold: 4, + }, + }, +} +``` + +### Add selectable element + +Add `data-plate-selectable="true"` to any element you want to start block selection. + +### Prevent unselect + +To prevent unselecting blocks when clicking on certain elements, add the `data-plate-prevent-unselect` attribute to those components + +For example: +```tsx + +``` + +### Full Page Selection + +#### Making Elements Selectable + +You can enable block selection for elements outside the `` component, similar to the [Potion](https://potion.platejs.org/) template. Add the `data-plate-selectable` attribute to any component you want to make selectable: + +```tsx + + +``` + +This works for any element, even those outside the editor's DOM tree. + +#### Resetting Selection + +There are two ways to handle resetting selection across the full page: + +1. Direct API call: +```tsx +editor.api.blockSelection.unselect(); +``` + +2. Click outside handler: +```tsx +const handleClickOutside = (event: MouseEvent) => { + if (!(event.target as HTMLElement).closest('[data-plate-selectable]')) { + editor.api.blockSelection.unselect(); + } +}; +``` + +## Styling + +### Selection area + +Style the selection area by adding the `.slate-selection-area` class to your editor container component. For example: + +```js +'[&_.slate-selection-area]:border [&_.slate-selection-area]:border-primary [&_.slate-selection-area]:bg-primary/10' +``` + +### Selected element + +To determine if an element is selected, use `useBlockSelected` hook. You can render a visual indicator around selected blocks using our [BlockSelection](/docs/components/block-selection) component or create your own. + +This component should be rendered inside each block element for consistent selection feedback. Plate UI is doing it in [PlateElement](/docs/components/plate-element). + +## Plugins + +### BlockSelectionPlugin + + + +Options for the selection area. Example: + +```ts +{ + boundaries: [`#${editor.uid}`], + container: [`#${editor.uid}`], + selectables: [`#${editor.uid} .slate-selectable`], + selectionAreaClass: 'slate-selection-area', +} +``` + + + +The padding-right of the editor. + + + +Enables or disables the context menu for block selection. + +- **Default:** `false` + + + +Indicates whether block selection is currently active. + +- **Default:** `false` + + + +A function to handle the **`keydown`** event when selecting. + + + +Options for querying nodes during block selection. + +- **Default:** `{ maxLevel: 1 }` + + + +A set of IDs for the currently selected blocks. + +- **Default:** `new Set()` + + + +### BlockMenuPlugin + +## API + +### editor.api.blockSelection.focus +Focuses the block selection shadow input. This input handles copy, delete, and paste events for selected blocks. + +### editor.api.blockSelection.addSelectedRow + +Adds a selected row to the block selection. + + + + The ID of the row to be selected. + + + + + Whether to clear existing selections before adding the new one. + - **Default:** `true` + + + + + +### editor.api.blockSelection.getNodes + +Gets the selected blocks in the editor. + + + + An array of selected block entries. + + + +### editor.api.blockSelection.resetSelectedIds + +Resets the set of selected IDs to an empty set. + +### editor.api.blockSelection.selectedAll + +Selects all selectable blocks in the editor. + +### editor.api.blockSelection.setSelectedIds + +Sets the selected IDs based on added and removed elements. + + + + + + Array of HTML elements to be added to the selection. + + + Array of HTML elements to be removed from the selection. + + + + + +### editor.api.blockSelection.unselect + +Unselects all blocks and sets the `isSelecting` flag to false. + +## Transforms + +### editor.tf.blockSelection.duplicate + +Duplicates the selected blocks. + + + + An array of node entries to duplicate. + + + +### editor.tf.blockSelection.removeNodes + +Removes the selected nodes from the editor. + +### editor.tf.blockSelection.select + +Selects the nodes returned by `getNodes()` and resets the selected IDs. + +### editor.tf.blockSelection.setNodes + +Sets properties on the selected nodes. + + + + The properties to set on the selected nodes. + + + Options for setting nodes. + + + +### editor.tf.blockSelection.setTexts + +Sets text properties on the selected nodes. + + + + The text properties to set on the selected nodes. + + + Options for setting text nodes, excluding the 'at' property. + + + +## Hooks + +### useBlockSelectable + +A hook that provides props for making a block element selectable, including context menu behavior. + + + + Props to be spread on the block element: + + + `'slate-selectable'` - Required class for selection functionality + + + Handles right-click context menu behavior: + - Opens context menu for selected blocks + - Opens for void elements + - Opens for elements with `data-plate-open-context-menu="true"` + - Adds block to selection with Shift key for multi-select + + + + + +### useBlockSelected + +Returns true if context block is selected. + +### useBlockSelectionNodes + +Returns an array of node entries for the currently selected blocks. + +### useBlockSelectionFragment + +Returns an array of nodes for the currently selected blocks. + +### useBlockSelectionFragmentProp + +Returns fragment prop for the currently selected blocks. + +### useSelectionArea + +A hook that initializes and manages the selection area functionality. diff --git a/apps/www/content/en/docs/callout.mdx b/apps/www/content/en/docs/callout.mdx new file mode 100644 index 0000000000..6320c23ef8 --- /dev/null +++ b/apps/www/content/en/docs/callout.mdx @@ -0,0 +1,143 @@ +--- +title: Callout +docs: + - route: https://pro.platejs.org/docs/components/callout-element + title: Callout Element +--- + + + +## Features + +- Customizable callout blocks for highlighting important information +- Support for different callout variants (e.g., info, warning, error) +- Ability to set custom icons or emojis for callouts + + + +## Installation + + +```bash +npm install @udecode/plate-callout +``` + +## Usage + +```tsx +import { CalloutPlugin } from '@udecode/plate-callout/react'; +``` + +```tsx +const plugins = [ + // ...otherPlugins, + CalloutPlugin, +] +``` + +```tsx +const components = { + // ...otherComponents, + [CalloutPlugin.key]: CalloutElement, +} +``` + +- [CalloutElement](https://pro.platejs.org/docs/components/callout-element) (Plus) + +## Examples + +### Plate UI + +Work in progress. + +### Plate Plus + + + +## Plugins + +### CalloutPlugin + +Callout element plugin. + +## Transforms + +### editor.tf.insert.callout + +Inserts a callout element into the editor. + + + + The editor instance. + + + Options for inserting the callout. + + + The variant of the callout to insert. + + + Other options from `InsertNodesOptions`. + + + + + +## Hooks + +### useCalloutEmojiPicker + +This hook manages the emoji picker functionality for callouts. + + + + Options for the callout emoji picker. + + + Whether the emoji picker is open. + + + Function to set the open state of the emoji picker. + + + + + + + + Props for the emoji toolbar dropdown. + + + Whether the emoji picker is open. + + + Function to set the open state of the emoji picker, respecting read-only mode. + + + + + Props for the emoji picker component. + + + Whether the emoji picker is open. + + + Function to set the open state of the emoji picker. + + + Function called when an emoji is selected. It updates the callout's icon and closes the picker. + + + + + +## Types + +### TCalloutElement + +```typescript +interface TCalloutElement extends TElement { + variant?: string; + icon?: string; +} +``` diff --git a/apps/www/content/en/docs/caption.mdx b/apps/www/content/en/docs/caption.mdx new file mode 100644 index 0000000000..382585b112 --- /dev/null +++ b/apps/www/content/en/docs/caption.mdx @@ -0,0 +1,159 @@ +--- +title: Caption +docs: + - route: /docs/components/caption + title: Caption +--- + + + + + +## Features + +- Arrow navigation should select caption within a block. + + + +## Installation + +```bash +npm install @udecode/plate-caption +``` + +## Usage + +```tsx +import { CaptionPlugin } from '@udecode/plate-caption/react'; +import { + AudioPlugin, + FilePlugin, + ImagePlugin, + MediaEmbedPlugin, + VideoPlugin, +} from '@udecode/plate-media/react'; +``` + +```tsx +const plugins = [ + // ...otherPlugins, + ImagePlugin, + VideoPlugin, + AudioPlugin, + FilePlugin, + MediaEmbedPlugin, + CaptionPlugin.configure({ + options: { + plugins: [ + ImagePlugin, + VideoPlugin, + AudioPlugin, + FilePlugin, + MediaEmbedPlugin, + ], + }, + }), +]; +``` + +## Plugins + +### CaptionPlugin + + + + The plugin keys of the blocks that have caption. + + + Path to focus at the end of the caption. + + + Path to focus at the start of the caption. + + + ID of the visible caption. + + + Whether the caption is visible. + + + +## API + +### TCaptionElement + + +Extends `TElement`. + + +Caption value. + + + +## API Components + +### Caption + + + + + + A boolean value indicating whether the caption component is in read-only + mode. + + + + + + + The string representing the caption. + + + A boolean value indicating whether the caption component is selected. + + + A boolean value indicating whether the caption component is in read-only + mode. + + + + + +### CaptionTextarea + + + + + + A reference to the `textarea` element associated with the caption + component. + + + The value of the caption displayed in the `textarea`. + + + `captionValue` setter. + + + A boolean value indicating whether the caption component is in read-only + mode. + + + The caption element. + + + + \ No newline at end of file diff --git a/apps/www/content/en/docs/collaboration.mdx b/apps/www/content/en/docs/collaboration.mdx new file mode 100644 index 0000000000..51e1a2cf0c --- /dev/null +++ b/apps/www/content/en/docs/collaboration.mdx @@ -0,0 +1,158 @@ +--- +title: Collaboration +--- + + + +**Backend Development in Progress** - Demo Unavailable. + + + + + +## Features + +- The yjs plugin enables support for collaboration using [slate-yjs](https://docs.slate-yjs.dev/) and [Hocuspocus](https://docs.slate-yjs.dev/walkthroughs/collaboration-hocuspocus). +- By default remote cursors are not rendered unless you install the remote cursor overlay and include it in the config. +- Cursors are rendered slightly faded and become solid on hover. Use the `data` field in `cursorOptions` to customise the display name and color. + + + +## Frontend + +### Installation + +```bash +npm install @udecode/plate-yjs +``` + +### Usage + +```tsx +import { YjsPlugin } from '@udecode/plate-yjs/react'; +import { RemoteCursorOverlay } from '@/components/plate-ui/remote-cursor-overlay'; + +const editor = createPlateEditor({ + plugins: [ + // ...otherPlugins, + YjsPlugin.configure({ + render: { + afterEditable: RemoteCursorOverlay, + }, + options: { + cursorOptions: { + autoSend: true, + data: { name: 'A plate user', color: '#5AC990' }, + }, + disableCursors: false, + hocuspocusProviderOptions: { + url: 'https://hocuspocus.test/hocuspocus', + name: 'test', + }, + }, + }), + ], +}); +``` + +### Editor Container + +The editor requires a container component above `PlateContent` to ensure correct cursor overlay positioning: + +```tsx +export const EditorContainer = ( + props: React.HTMLAttributes +) => { + const editor = useEditorRef(); + const containerRef = useEditorContainerRef(); + + return
; +}; +``` + +This component is available in [Editor](/docs/components/editor). + +## Backend + +Follow the backend instructions in [Hocuspocus docs](https://tiptap.dev/hocuspocus/getting-started). + +## Plugins + +### YjsPlugin + + + +Configuration for handling cursors in the editor. These options are passed +to the `withCursors` function. + +- [WithCursorsOptions API](https://docs.slate-yjs.dev/api/slate-yjs-core/cursor-plugin#withcursors). + + + +Configuration for the Hocuspocus provider. + +- [HocuspocusProviderConfiguration API](https://tiptap.dev/hocuspocus/provider/configuration). + + + +Optional configuration for the Yjs integration. These options are passed to +the `withYjs` function. + +- [WithYjsOptions API](https://docs.slate-yjs.dev/api/slate-yjs-core/yjs-plugin#withyjs). + + + +A flag indicating whether to disable the cursor feature in the editor. + + + +## API + +### useYjsStore + + + + A flag indicating whether the editor is connected to the Hocuspocus server. + + + A flag indicating whether the editor is synced with the Hocuspocus server. + + + +### withTYjs + +Higher-order function that wraps a Plate editor with Yjs support, allowing for real-time collaborative editing. + +### PlateYjsEditorProps + + + +Extends `YjsEditorProps` and [CursorEditor](https://docs.slate-yjs.dev/api/slate-yjs-core/cursor-plugin#cursoreditor). + + + + + + + +The Hocuspocus provider instance. + + + + + + + + + +### YHistoryEditorProps + +Extends `YjsEditorProps`, [YHistoryEditor](https://docs.slate-yjs.dev/api/slate-yjs-core/history-plugin#yhistoryeditor). + +### YjsEditorProps + +[YjsEditor API](https://docs.slate-yjs.dev/api/slate-yjs-core/yjs-plugin#yjseditor). diff --git a/apps/www/content/en/docs/column.mdx b/apps/www/content/en/docs/column.mdx new file mode 100644 index 0000000000..86bf82a789 --- /dev/null +++ b/apps/www/content/en/docs/column.mdx @@ -0,0 +1,181 @@ +--- +title: Column +docs: + - route: /docs/components/column-element + title: Column Element + - route: /docs/components/column-group-element + title: Column Group Element +--- + + + + + +## Features + +- Add columns to your document. +- Choose from a variety of column layouts using `column-group-element` toolbar. +- [ ] Resizable columns + + + +## Installation + +```bash +npm install @udecode/plate-layout +``` + +## Usage + +```tsx +import { ColumnPlugin, ColumnItemPlugin } from '@udecode/plate-layout/react'; + +const plugins = [ + // ...otherPlugins, + ColumnPlugin, +]; +``` + +## Plugins + +### ColumnPlugin + +Add Column Plugin to your document. + +### ColumnItemPlugin + +Add Column Item Plugin to your document. + +## API + +### TColumnGroupElement + + +Extends `TElement`. + + + +### TColumnElement + + +Extends `TElement`. + + + The `Column`'s width end with `%` + + + +### insertColumnGroup + +Insert a columnGroup with two empty columns. + + + + The editor instance. + + + - `columns`: Array of column widths or number of equal-width columns (default: 2) + - Other `InsertNodesOptions` to control insert behavior + + + +### insertColumn + +Insert an empty column. You can set the width by options.width default is "33%" + + + + The editor instance. + + + InsertNodesOptions and width to set the insert behavior. + + + +### moveMiddleColumn + +Move the middle column to the left or right by options.direction. If the middle node is empty, return false and remove it. + + + + The editor instance. + + + The node entry of `column` element + + + Control the direction the middle column moves to + + + +### toggleColumnGroup + +Converts a block into a column group layout or updates an existing column group's layout. + + + + The editor instance. + + + + + The location to toggle the column group at. + + + Number of equal-width columns to create (default: 2) + + + Array of column widths (e.g., ['50%', '50%']). Takes precedence over `columns`. + + + + + +Behavior: +- If the target block is not a column group, wraps it in a new column group with the specified number of columns +- If the target block is already a column group, updates its column layout using `setColumns` +- The original content becomes the content of the first column +- Additional columns are created with empty paragraphs + +### setColumns + +Updates the column layout of an existing column group by modifying the number and widths of columns. + + + + The editor instance. + + + + + The path to the column group element. + + + Number of equal-width columns to create. + + + Array of column widths (e.g., ['33%', '67%']). Takes precedence over `columns`. + + + + + +Behavior: +- When increasing columns: + - Keeps existing column content + - Adds new empty columns with specified widths +- When decreasing columns: + - Merges content from removed columns into the last remaining column + - Updates widths of remaining columns +- When keeping same number of columns: + - Only updates column widths + +## API Components + +### useDebouncePopoverOpen + + + +Control whether the `popover` is open or not + + \ No newline at end of file diff --git a/apps/www/content/en/docs/combobox.mdx b/apps/www/content/en/docs/combobox.mdx new file mode 100644 index 0000000000..9d8001d03f --- /dev/null +++ b/apps/www/content/en/docs/combobox.mdx @@ -0,0 +1,219 @@ +--- +title: Combobox +docs: + - route: /docs/mention + title: Mention Plugin + - route: /docs/slash-command + title: Slash Command Plugin + - route: /docs/emoji + title: Emoji Plugin +--- + +The `TriggerComboboxPluginOptions` configures your plugin to insert a combobox input element when the user types a specified trigger character. + +For example: +- [Mention](/docs/mention) plugin inserts a combobox when typing `@` +- [Slash Command](/docs/slash-command) plugin activates with `/` +- [Emoji](/docs/emoji) plugin shows suggestions with `:` + +## Usage + + + + +Create an input plugin for the combobox: + +```ts +const ComboboxInputPlugin = createPlatePlugin({ + key: 'combobox_input', + node: { + isElement: true, + isInline: true, + isVoid: true, + }, +}); +``` + + + +Create your main plugin with `withTriggerCombobox`: + +```ts +const MyPlugin = createPlatePlugin({ + key: 'my_plugin', + extendEditor: withTriggerCombobox, + // Plugin node options + node: { + isElement: true, + isInline: true, + isVoid: true, + }, + // Combobox options + options: { + createComboboxInput: (trigger) => ({ + children: [{ text: '' }], + trigger, + type: ComboboxInputPlugin.key, + }), + trigger: '@', + triggerPreviousCharPattern: /^\s?$/, + }, + // Include the input plugin + plugins: [ComboboxInputPlugin], +}); +``` + + + +The input element component can be built using [Inline Combobox](/docs/components/inline-combobox). + + + +## Examples + + + + + +## Types + +### TriggerComboboxPluginOptions + + + + Function to create the input node when trigger is activated. + + + Character(s) that trigger the combobox. Can be: + - A single character (e.g. '@') + - An array of characters + - A regular expression + + + Pattern to match the character before trigger. + - **Example:** `/^\s?$/` matches start of line or space + + + Custom query function to control when trigger is active. + + + +## Hooks + +### useComboboxInput + +Hook for managing combobox input behavior and keyboard interactions. + + + + + + Reference to the input element. + + + Auto focus the input when mounted. + - **Default:** `true` + + + Cancel on arrow keys. + - **Default:** `true` + + + Cancel on backspace at start. + - **Default:** `true` + + + Cancel on blur. + - **Default:** `true` + + + Cancel when deselected. + - **Default:** `true` + + + Cancel on escape key. + - **Default:** `true` + + + Current cursor position state. + + + Forward undo/redo to editor. + - **Default:** `true` + + + Callback when input is cancelled. + + + + + + + + Function to cancel the input. + + + + + Blur event handler. + + + Keydown event handler. + + + + + Function to remove the input node. + + + +Example: + +```tsx +const MyCombobox = () => { + const inputRef = useRef(null); + const cursorState = useHTMLInputCursorState(inputRef); + + const { props: inputProps, removeInput } = useComboboxInput({ + ref: inputRef, + cursorState, + cancelInputOnBlur: false, + onCancelInput: (cause) => { + if (cause !== 'backspace') { + insertText(editor, trigger + value); + } + if (cause === 'arrowLeft' || cause === 'arrowRight') { + moveSelection(editor, { + distance: 1, + reverse: cause === 'arrowLeft', + }); + } + }, + }); + + return ; +}; +``` + +### useHTMLInputCursorState + +Hook for tracking cursor position in an HTML input element. + + + + Reference to the input element to track. + + + + + + + + Whether cursor is at the start of input. + + + Whether cursor is at the end of input. + + + + \ No newline at end of file diff --git a/apps/www/content/en/docs/comments.mdx b/apps/www/content/en/docs/comments.mdx new file mode 100644 index 0000000000..652b59fda2 --- /dev/null +++ b/apps/www/content/en/docs/comments.mdx @@ -0,0 +1,643 @@ +--- +title: Comments +docs: + - route: /docs/components/comment-leaf + title: Comment Leaf + - route: /docs/components/comment-toolbar-button + title: Comment Toolbar Button + - route: /docs/components/comments-popover + title: Comments Popover +--- + + + + + +## Features + +- Add text comments as marks. +- Comments can include explanations, suggestions, questions, notes, or ideas for content improvement. +- Add a comment by selecting the text and using the comment button or hotkey **`Cmd+Shift+M`**. + + + +## Installation + +```bash +npm install @udecode/plate-comments +``` + +## Usage + +```tsx +import { CommentsPlugin } from '@udecode/plate-comments/react'; + +const editor = createPlateEditor({ + plugins: [ + // ...otherPlugins, + CommentsPlugin, + ], +}); +``` + +## Keyboard Shortcuts + + + + Add a comment on the selected text. + + + +## Plugins + +### CommentsPlugin + + + + +The text for a new comment. + + + +The current user's information. + + + +Function to get a user by their ID. + + + +Function to get a comment by its ID. + + + +The currently active comment. + + + + +## API + +### editor.tf.insert.comment + +Insert a new comment mark. + +### editor.api.comment.updateComment + +Updates an existing comment. + +### editor.api.comment.addRawComment + +Adds a new raw comment. + +### editor.api.comment.addComment + +Adds a new comment. + +### editor.api.comment.removeComment + +Removes a comment. + +### editor.api.comment.resetNewCommentValue + +Resets the value of a new comment. + +### CommentStoreState + + + + The unique ID of the comment. + + + A flag indicating whether the menu associated with this comment is currently + open. + + + The value currently being edited for this comment. If no editing is in + progress, this value is null. + + + +### findCommentNode + +Finds the comment node in the editor. + + + + The editor instance. + + + Additional options for finding the node. + + + +### findCommentNodeById + +Finds the comment node in the editor by its ID. + + + + The editor instance. + + + The ID of the comment node to find. + + + +### getCommentCount + +Gets the count of comments in a comment node. + + + + The comment node. + + + +### getCommentKey + +Generates a comment key based on the provided ID. + + + + The ID of the comment. + + + +### getCommentKeyId + +Extracts the comment ID from a comment key. + + + + The comment key. + + + +### getCommentKeys + +Returns an array of comment keys present in the given node. + + + + The node to check for comment keys. + + + +### getCommentNodeEntries + +Returns an array of node entries for comment nodes in the editor. + + + + The editor instance. + + + +### getCommentNodesById + +Returns an array of node entries for comment nodes with a specific ID in the editor. + + + + The editor instance. + + + The ID of the comment nodes to retrieve. + + + +### getCommentPosition + +Calculates the position of a comment node relative to the editor. + + + + The editor instance. + + + The comment node for which to calculate the position. + + + +### getCommentUrl + +Generates a URL with a query parameter for a specific comment ID. + + + + The ID of the comment. + + + +### getElementAbsolutePosition + +Calculates the absolute position of an HTML element relative to the document. + + + + The HTML element for which to calculate the absolute position. + + + +### isCommentKey + +Checks if a given key is a comment key. + + + + The key to check. + + + +### isCommentNodeById + +Checks if a given node is a comment with the specified ID. + + + + The node to check. + + + The ID of the comment. + + + +### isCommentText + +Checks if a given node is a comment text node. + + + + The node to check. + + + + + `true` if the node is a comment text node. + + +### removeCommentMark + +Removes the comment mark from the editor. + + + + The editor instance. + + + +### unsetCommentNodesById + +Unsets comment nodes with the specified ID from the editor. + + + + The editor instance. + + + The ID of the comment nodes to unset. + + + +### CommentUser + +An interface representing a user who can make comments. + + + + The unique ID of the user. + + + The name of the user. + + + The URL of the user's avatar. + + + +### TComment + + + +A unique ID for the comment. + + +The Slate value of the comment. + + +Timestamp when the comment was created. + +- **Default:** `Date.now()` + + + +Id of the author of the comment. + + +Id of the parent comment it replies to. + + +Whether the comment is resolved. + + + +### TCommentText + + + + Indicates whether this is a comment. Multiple comments can be present in a + single text node. + + + +## API Components + +### CommentProvider + +A jotai provider for comment data. + + + Extends `CommentStoreState`. + + + The scope of the provider. + + + +### CommentDeleteButton + +A button component for deleting a comment. + + + + The ID of the active comment. + + + The editor instance. + + + The ID of the comment. + + + A function to call when the comment is deleted. + + + A function to remove the comment. + + + A function to set the active comment ID. + + + +### CommentEditButton + +A button component for editing a comment. + + + + A function to set the menu open state. + + + The comment object. + + + A function to set the editing value. + + + +### CommentEditCancelButton + +A button component for canceling the editing of a comment. + +### CommentEditSaveButton + +A button component for saving the editing of a comment. + + + + The value of the editing value. + + + A function to set the editing value. + + + The ID of the comment. + + + A function to call when the comment is updated. + + + A function to update the comment. + + + The value of the comment. + + + +### CommentEditTextarea + +A textarea component for editing a comment. + + + + A function to set the editing value. + + + The textarea ref. + + + The value of the textarea. + + + +### CommentNewSubmitButton + +A button component for submitting a new comment. + + + + The text of the comment being edited. + + + A function to reset the new comment value. + + + A function to add a comment. + + + Whether the comment is a reply. + + + The text of the submit button. + + + A function to call when the comment is added. + + + The ID of the active comment. + + + The comment object. + + + The value of the edited comment. + + + +### CommentNewTextarea + +A textarea component for adding a new comment. + + + + The textarea ref. + + + The placeholder of the textarea. + + + The value of the textarea. + + + A function to set the new value. + + + +### CommentResolveButton + +A button component for resolving/unresolving a comment. + +### CommentUserName + +A div component for displaying the name of a comment user. + +### CommentsPositioner + +A div component for positioning comments in the editor. + + + + The ID for the active comment. + + + An object representing the current position of the comment (top and left + coordinates). + + + +### useActiveCommentNode + +A custom hook that retrieves the active comment node based on the active comment ID. + + + +- If there is an active comment ID, it returns the corresponding comment node. + +- If there is no active comment ID or the comment node is not found, it returns `null`. + + + +### useCommentAddButton + +A custom hook that provides functionality for adding a comment mark to the selected text and setting focus to the comment textarea. + + + + + + A function to call when the button is clicked. + + + + + +### useCommentItemContentState + +A state hook for the comment item content component. + + + + The comment object. + + + A boolean indicating whether the comment is a reply comment. + + + The text content of the comment. + + + The user associated with the comment. + + + The ID of the current user. + + + The value of the comment being edited. + + + A boolean indicating whether the comment is authored by the current user. + + + +### useCommentLeaf + +A behavior hook for the comment leaf component. + + + + The function to set the active comment ID. + + + The ID of the last comment in the leaf. + + + + + + + + A function to call when the button is clicked. + + + + + +### useCommentValue + +A custom hook that focuses and selects the text inside a textarea. + + + + A ref to the textarea element. + + + +### useCommentsResolved + +A custom hook that returns an array of resolved comments. + + + + +An array of resolved comments. + + + + +### useCommentsShowResolvedButton + +A custom hook that returns the props for a button component used to show resolved comments. + + + + + + A boolean indicating whether the button is pressed. + + + A function to call when the button is clicked. + + + + \ No newline at end of file diff --git a/apps/www/content/en/docs/components/changelog.mdx b/apps/www/content/en/docs/components/changelog.mdx new file mode 100644 index 0000000000..ee862f88eb --- /dev/null +++ b/apps/www/content/en/docs/components/changelog.mdx @@ -0,0 +1,582 @@ +--- +title: Changelog +description: Latest component updates and announcements. +toc: true +--- + +Since Plate UI is not a component library, a changelog is maintained here. + +Use the [CLI](https://platejs.org/docs/components/cli) to install the latest version of the components. + +## December 2024 #17 + +### December 20 #17.3 + +- `insertColumnGroup`, `toggleColumnGroup`: use `columns` option instead of `layout` +- Remove `with-draggables`. Add [`DraggableAboveNodes`](https://github.com/udecode/plate/pull/3878/files#diff-493c12ebed9c3ef9fd8c3a723909b18ad439a448c0132d2d93e5341ee0888ad2) to `draggable`. Add to `DndPlugin` config: +```tsx +DndPlugin.configure({ render: { aboveNodes: DraggableAboveNodes } }), +``` +- `column-element`, `image-element`, `media-video-element`: Remove `useDraggableState`. Use `const { isDragging, previewRef, handleRef } = useDraggable` +- `column-group-element`: Remove `useColumnState`. Use instead: +```tsx +const columnGroupElement = useElement(ColumnPlugin.key); + +const onColumnChange = (widths: string[]) => { + setColumns(editor, { + at: findNodePath(editor, columnGroupElement), + widths, + }); +}; +``` +- `export-toolbar-button`: add `exportToHtml` + +### December 19 #17.2 + +Plate 41 + +- New RSC components for element and leaf components, filename ending with `-static.tsx`. Those are now added along with the default client components. +- `editor`: add `select-text` to `editorVariants` +- `date-element`: remove popover when read-only +- `indent-todo-marker`: use `SlateRenderElementProps` type instead of `PlateRenderElementProps` +- `hr-element`, `media-audio-element`, `media-embed-element`, `mention-element`: improve cursor styling +- `media-file-element`: use `` instead of `div` + `onClick` +- all element and leaf components: `className` prop is now placed before inline prop. + +### December 16 #17.1 + +- `column-element`: + - Add drag and drop support for columns + - Add drag handle with tooltip + - Fix column spacing and padding + +- `column-group-element`: + - Remove gap between columns + - Remove margin top + +- `draggable`: + - Remove `DraggableProvider` HOC + - Remove `DropLine` children prop + +## November 2024 #16 + +### November 26 #16.9 + +https://github.com/udecode/plate/pull/3809/files +- Add `select-editor`, `tag-element`, `label`, `form` +- Replace `cmdk` dependency with `@udecode/cmdk`. It's a controllable version of `cmdk`. +- `command`: add variants +- `editor`: add `select` variant +- `popover`: add `animate` variant + +https://github.com/udecode/plate/pull/3807/files +- `toc-element`: remove `