From 8d6189dfd12a1744fcf4cf20dea8373c4ef1b725 Mon Sep 17 00:00:00 2001 From: zbeyens Date: Fri, 1 Nov 2024 14:43:12 +0100 Subject: [PATCH 1/3] refactor --- .../www/content/docs/components/changelog.mdx | 84 +-- apps/www/content/docs/emoji.mdx | 2 + apps/www/content/docs/mention.mdx | 2 +- apps/www/content/docs/slash-command.mdx | 2 + .../src/registry/default/plate-ui/popover.tsx | 2 +- .../plate-playground-template/.eslintrc.js | 274 +++++++- .../plate-playground-template/package.json | 3 +- .../plate-playground-template/pnpm-lock.yaml | 463 +++++-------- .../prettier.config.js | 48 +- .../src/app/api/ai/command/route.ts | 10 +- .../src/app/api/ai/copilot/route.ts | 10 +- .../src/app/layout.tsx | 25 +- .../src/app/page.tsx | 12 +- .../src/components/openai/openai-context.tsx | 16 +- .../src/components/openai/settings-dialog.tsx | 27 +- .../src/components/plate-editor.tsx | 165 ++--- .../components/plate-ui/ai-chat-editor.tsx | 5 +- .../src/components/plate-ui/ai-leaf.tsx | 1 + .../src/components/plate-ui/ai-menu-items.tsx | 5 +- .../src/components/plate-ui/ai-menu.tsx | 7 +- .../components/plate-ui/ai-toolbar-button.tsx | 1 + .../plate-ui/align-dropdown-menu.tsx | 5 +- .../plate-ui/block-context-menu.tsx | 3 +- .../components/plate-ui/block-selection.tsx | 4 +- .../plate-ui/blockquote-element.tsx | 1 + .../src/components/plate-ui/button.tsx | 5 +- .../src/components/plate-ui/calendar.tsx | 3 +- .../src/components/plate-ui/checkbox.tsx | 1 + .../plate-ui/code-block-combobox.tsx | 1 + .../plate-ui/code-block-element.tsx | 1 + .../src/components/plate-ui/code-leaf.tsx | 1 + .../components/plate-ui/code-line-element.tsx | 1 + .../components/plate-ui/code-syntax-leaf.tsx | 1 + .../plate-ui/color-dropdown-menu-items.tsx | 5 +- .../plate-ui/color-dropdown-menu.tsx | 4 +- .../src/components/plate-ui/color-input.tsx | 1 + .../src/components/plate-ui/color-picker.tsx | 5 +- .../src/components/plate-ui/colors-custom.tsx | 8 +- .../components/plate-ui/column-element.tsx | 5 +- .../plate-ui/column-group-element.tsx | 7 +- .../src/components/plate-ui/command.tsx | 5 +- .../components/plate-ui/comment-avatar.tsx | 1 + .../plate-ui/comment-create-form.tsx | 1 + .../src/components/plate-ui/comment-item.tsx | 1 + .../src/components/plate-ui/comment-leaf.tsx | 7 +- .../plate-ui/comment-more-dropdown.tsx | 1 + .../plate-ui/comment-reply-items.tsx | 1 + .../plate-ui/comment-resolve-button.tsx | 1 + .../plate-ui/comment-toolbar-button.tsx | 1 + .../src/components/plate-ui/comment-value.tsx | 1 + .../components/plate-ui/comments-popover.tsx | 1 + .../src/components/plate-ui/context-menu.tsx | 1 + .../components/plate-ui/cursor-overlay.tsx | 15 +- .../src/components/plate-ui/dialog.tsx | 1 + .../src/components/plate-ui/draggable.tsx | 11 +- .../src/components/plate-ui/dropdown-menu.tsx | 1 + .../src/components/plate-ui/editor.tsx | 119 ++-- .../plate-ui/emoji-dropdown-menu.tsx | 5 +- .../src/components/plate-ui/emoji-icons.tsx | 7 +- .../plate-ui/emoji-input-element.tsx | 1 + .../plate-ui/emoji-picker-content.tsx | 5 +- .../plate-ui/emoji-picker-navigation.tsx | 6 +- .../emoji-picker-search-and-clear.tsx | 4 +- .../plate-ui/emoji-picker-search-bar.tsx | 1 + .../src/components/plate-ui/emoji-picker.tsx | 5 +- .../plate-ui/emoji-toolbar-dropdown.tsx | 4 +- .../plate-ui/excalidraw-element.tsx | 1 + .../plate-ui/fixed-toolbar-buttons.tsx | 1 + .../plate-ui/floating-toolbar-buttons.tsx | 1 + .../components/plate-ui/floating-toolbar.tsx | 5 +- .../src/components/plate-ui/ghost-text.tsx | 3 +- .../components/plate-ui/heading-element.tsx | 1 + .../components/plate-ui/highlight-leaf.tsx | 1 + .../src/components/plate-ui/hr-element.tsx | 1 + .../src/components/plate-ui/image-element.tsx | 3 +- .../plate-ui/indent-list-toolbar-button.tsx | 1 + .../plate-ui/indent-todo-marker.tsx | 4 +- .../plate-ui/indent-toolbar-button.tsx | 1 + .../components/plate-ui/inline-combobox.tsx | 13 +- .../plate-ui/insert-dropdown-menu.tsx | 9 +- .../src/components/plate-ui/kbd-leaf.tsx | 1 + .../plate-ui/line-height-dropdown-menu.tsx | 5 +- .../src/components/plate-ui/link-element.tsx | 5 +- .../plate-ui/link-floating-toolbar.tsx | 7 +- .../plate-ui/link-toolbar-button.tsx | 1 + .../src/components/plate-ui/list-element.tsx | 1 + .../plate-ui/list-toolbar-button.tsx | 1 + .../plate-ui/mark-toolbar-button.tsx | 1 + .../plate-ui/media-embed-element.tsx | 7 +- .../src/components/plate-ui/media-popover.tsx | 7 +- .../plate-ui/media-toolbar-button.tsx | 5 +- .../components/plate-ui/mention-element.tsx | 7 +- .../plate-ui/mention-input-element.tsx | 1 + .../plate-ui/mode-dropdown-menu.tsx | 5 +- .../plate-ui/more-dropdown-menu.tsx | 5 +- .../plate-ui/outdent-toolbar-button.tsx | 1 + .../components/plate-ui/paragraph-element.tsx | 1 + .../src/components/plate-ui/placeholder.tsx | 7 +- .../src/components/plate-ui/plate-element.tsx | 5 +- .../src/components/plate-ui/popover.tsx | 3 +- .../src/components/plate-ui/resizable.tsx | 1 + .../plate-ui/slash-input-element.tsx | 5 +- .../plate-ui/table-cell-element.tsx | 1 + .../plate-ui/table-dropdown-menu.tsx | 7 +- .../src/components/plate-ui/table-element.tsx | 11 +- .../components/plate-ui/table-row-element.tsx | 1 + .../components/plate-ui/todo-list-element.tsx | 1 + .../plate-ui/toggle-toolbar-button.tsx | 1 + .../src/components/plate-ui/toolbar.tsx | 5 +- .../src/components/plate-ui/tooltip.tsx | 1 + .../plate-ui/turn-into-dropdown-menu.tsx | 7 +- .../components/plate-ui/with-draggables.tsx | 12 +- .../src/components/plugins/ai-plugins.tsx | 5 +- .../components/plugins/copilot-plugins.tsx | 20 +- .../src/components/site/main-nav.tsx | 9 +- .../src/components/site/site-header.tsx | 10 +- .../src/components/site/theme-provider.tsx | 1 + .../src/components/site/theme-toggle.tsx | 3 +- .../src/components/tabbable-element.tsx | 3 +- .../src/config/site.ts | 14 +- .../src/lib/plate/autoformat-rules.ts | 16 +- .../src/lib/plate/plate-types.ts | 5 +- .../src/lib/transforms.ts | 8 +- .../src/types/nav.ts | 2 +- templates/plate-template/.eslintrc.js | 268 +++++++- templates/plate-template/package.json | 8 +- templates/plate-template/pnpm-lock.yaml | 618 ++++++++---------- templates/plate-template/prettier.config.js | 48 +- templates/plate-template/src/app/layout.tsx | 24 +- templates/plate-template/src/app/page.tsx | 14 +- .../src/components/plate-editor.tsx | 91 ++- .../src/components/plate-ui/button.tsx | 4 +- .../src/components/plate-ui/editor.tsx | 114 ++-- .../src/components/site/main-nav.tsx | 9 +- .../src/components/site/site-header.tsx | 8 +- .../src/components/site/theme-provider.tsx | 1 + .../src/components/site/theme-toggle.tsx | 3 +- templates/plate-template/src/config/site.ts | 14 +- templates/plate-template/src/lib/utils.ts | 4 +- .../plate-template/src/styles/globals.css | 20 + templates/plate-template/src/types/nav.ts | 2 +- 141 files changed, 1686 insertions(+), 1267 deletions(-) diff --git a/apps/www/content/docs/components/changelog.mdx b/apps/www/content/docs/components/changelog.mdx index 16b4bdf9ac..4ec4f00aec 100644 --- a/apps/www/content/docs/components/changelog.mdx +++ b/apps/www/content/docs/components/changelog.mdx @@ -9,6 +9,12 @@ 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. +## November 2024 #16 + +### November 1 #16.1 + +- `editor`: styles + `` + ## October 2024 #15 ### October 31 #15.6 @@ -22,36 +28,36 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver - `inline-combobox` - Added groups and items to `slash-input-element` - Spacing and sizing update: - - `ai-menu-items.tsx` - - `align-dropdown-menu.tsx` - - `block-context-menu.tsx` - - `button.tsx` - - `code-block-combobox.tsx` - - `color-dropdown-menu-items.tsx` - - `color-picker.tsx` - - `column-group-element.tsx` - - `command.tsx` - - `comment-more-dropdown.tsx` - - `context-menu.tsx` - - `dropdown-menu.tsx` - - `emoji-dropdown-menu.tsx` - - `emoji-input-element.tsx` - - `image-preview.tsx` - - `inline-combobox.tsx` - - `input.tsx` - - `insert-dropdown-menu.tsx` - - `line-height-dropdown-menu.tsx` - - `link-floating-toolbar.tsx` - - `media-popover.tsx` - - `mention-input-element.tsx` - - `mode-dropdown-menu.tsx` - - `more-dropdown-menu.tsx` - - `popover.tsx` - - `slash-input-element.tsx` - - `table-dropdown-menu.tsx` - - `table-element.tsx` - - `toggle-element.tsx` - - `toggle-toolbar-button.tsx` + - `ai-menu-items` + - `align-dropdown-menu` + - `block-context-menu` + - `button` + - `code-block-combobox` + - `color-dropdown-menu-items` + - `color-picker` + - `column-group-element` + - `command` + - `comment-more-dropdown` + - `context-menu` + - `dropdown-menu` + - `emoji-dropdown-menu` + - `emoji-input-element` + - `image-preview` + - `inline-combobox` + - `input` + - `insert-dropdown-menu` + - `line-height-dropdown-menu` + - `link-floating-toolbar` + - `media-popover` + - `mention-input-element` + - `mode-dropdown-menu` + - `more-dropdown-menu` + - `popover` + - `slash-input-element` + - `table-dropdown-menu` + - `table-element` + - `toggle-element` + - `toggle-toolbar-button` ### October 26 #15.5 @@ -87,27 +93,27 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver ### October 1 #15.1 -- New `block-selection.tsx` component for visual selection feedback -- New `plate-element.tsx` component for rendering the plate element with `BlockSelection` -- Updated `paragraph-element.tsx` and all block elements to use `plate-element.tsx` -- `draggable.tsx`: +- New `block-selection` component for visual selection feedback +- New `plate-element` component for rendering the plate element with `BlockSelection` +- Updated `paragraph-element` and all block elements to use `plate-element` +- `draggable`: - Refactored to use new hooks: `useDraggableGutter` and `useDropLine` - Removed `classNames` prop in favor of a single `className` - Added `DraggableProvider` wrapper - Introduced `Gutter` and `DropLine` as separate components -- `with-draggables.tsx`: +- `with-draggables`: - Updated to use new className format for draggable props - fix `mention-element`: prevent IME input interruption on MacOS Use `--highlight` color for the following components: -- `comment-leaf.tsx` -- `highlight-leaf.tsx` +- `comment-leaf` +- `highlight-leaf` Use `--brand` color for the following components: -- `block-selection.tsx` -- `draggable.tsx` +- `block-selection` +- `draggable` ## September 2024 #14 diff --git a/apps/www/content/docs/emoji.mdx b/apps/www/content/docs/emoji.mdx index 9cc0fbbe74..ad72e523cb 100644 --- a/apps/www/content/docs/emoji.mdx +++ b/apps/www/content/docs/emoji.mdx @@ -2,6 +2,8 @@ title: Emoji description: Insert emoji inline. docs: + - route: /docs/combobox + title: Combobox - route: /docs/components/emoji-input-element title: Emoji Input Element - route: /docs/components/emoji-dropdown-menu diff --git a/apps/www/content/docs/mention.mdx b/apps/www/content/docs/mention.mdx index 36de09e4b6..ddc5532b0e 100644 --- a/apps/www/content/docs/mention.mdx +++ b/apps/www/content/docs/mention.mdx @@ -2,7 +2,7 @@ title: Mention description: Enable autocompletion for user mentions. docs: - - route: /docs/components/combobox + - route: /docs/combobox title: Combobox - route: /docs/components/mention-element title: Mention Element diff --git a/apps/www/content/docs/slash-command.mdx b/apps/www/content/docs/slash-command.mdx index 0143162920..fb64355191 100644 --- a/apps/www/content/docs/slash-command.mdx +++ b/apps/www/content/docs/slash-command.mdx @@ -2,6 +2,8 @@ title: Slash Command description: Slash command menu for quick insertion of various content types. docs: + - route: /docs/combobox + title: Combobox - route: components/slash-input-element title: Slash Input Element - route: https://pro.platejs.org/docs/components/slash-input-element diff --git a/apps/www/src/registry/default/plate-ui/popover.tsx b/apps/www/src/registry/default/plate-ui/popover.tsx index 5f02ac5291..b19a6f9da5 100644 --- a/apps/www/src/registry/default/plate-ui/popover.tsx +++ b/apps/www/src/registry/default/plate-ui/popover.tsx @@ -17,7 +17,7 @@ export const popoverVariants = cva( ); export const PopoverContent = withRef( - ({ align = 'center', className, sideOffset = 4, style, ...props }, ref) => ( + ({ align = 'center', className, sideOffset = 4, ...props }, ref) => ( =6.9.0'} - - '@babel/compat-data@7.25.4': - resolution: {integrity: sha512-+LGRog6RAsCJrrrg/IO6LGmpphNe5DiK30dGjCoxxeGv49B10/3XYGxPsAwrDlMFcFEvdAUavDT8r9k/hSyQqQ==} - engines: {node: '>=6.9.0'} - - '@babel/core@7.25.2': - resolution: {integrity: sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==} - engines: {node: '>=6.9.0'} - - '@babel/generator@7.25.6': - resolution: {integrity: sha512-VPC82gr1seXOpkjAAKoLhP50vx4vGNlF4msF64dSFq1P8RfB+QAuJWGHPXXPc8QyfVWwwB/TNNU4+ayZmHNbZw==} - engines: {node: '>=6.9.0'} - - '@babel/helper-compilation-targets@7.25.2': - resolution: {integrity: sha512-U2U5LsSaZ7TAt3cfaymQ8WHh0pxvdHoEk6HVpaexxixjyEquMh0L0YNJNM6CTGKMXV1iksi0iZkGw4AcFkPaaw==} - engines: {node: '>=6.9.0'} - - '@babel/helper-module-imports@7.24.7': - resolution: {integrity: sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==} - engines: {node: '>=6.9.0'} - - '@babel/helper-module-transforms@7.25.2': - resolution: {integrity: sha512-BjyRAbix6j/wv83ftcVJmBt72QtHI56C7JXZoG2xATiLpmoC7dpd8WnkikExHDVPpi/3qCmO6WY1EaXOluiecQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0 - - '@babel/helper-simple-access@7.24.7': - resolution: {integrity: sha512-zBAIvbCMh5Ts+b86r/CjU+4XGYIs+R1j951gxI3KmmxBMhCg4oQMsv6ZXQ64XOm/cvzfU1FmoCyt6+owc5QMYg==} - engines: {node: '>=6.9.0'} - - '@babel/helper-string-parser@7.24.8': - resolution: {integrity: sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==} - engines: {node: '>=6.9.0'} - '@babel/helper-string-parser@7.25.9': resolution: {integrity: sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==} engines: {node: '>=6.9.0'} - '@babel/helper-validator-identifier@7.24.7': - resolution: {integrity: sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==} - engines: {node: '>=6.9.0'} - '@babel/helper-validator-identifier@7.25.9': resolution: {integrity: sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==} engines: {node: '>=6.9.0'} - '@babel/helper-validator-option@7.24.8': - resolution: {integrity: sha512-xb8t9tD1MHLungh/AIoWYN+gVHaB9kwlu8gffXGSt3FFEIT7RjS+xWbc2vUD1UTZdIpKj/ab3rdqJ7ufngyi2Q==} - engines: {node: '>=6.9.0'} - - '@babel/helpers@7.25.6': - resolution: {integrity: sha512-Xg0tn4HcfTijTwfDwYlvVCl43V6h4KyVVX2aEm4qdO/PC6L2YvzLHFdmxhoeSA3eslcE6+ZVXHgWwopXYLNq4Q==} - engines: {node: '>=6.9.0'} - - '@babel/highlight@7.24.7': - resolution: {integrity: sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==} - engines: {node: '>=6.9.0'} - - '@babel/parser@7.25.6': - resolution: {integrity: sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==} - engines: {node: '>=6.0.0'} - hasBin: true - '@babel/parser@7.26.2': resolution: {integrity: sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==} engines: {node: '>=6.0.0'} @@ -516,18 +460,6 @@ packages: resolution: {integrity: sha512-FjoyLe754PMiYsFaN5C94ttGiOmBNYTf6pLr4xXHAT5uctHb092PBszndLDR5XA/jghQvn4n7JMHl7dmTgbm9w==} engines: {node: '>=6.9.0'} - '@babel/template@7.25.0': - resolution: {integrity: sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==} - engines: {node: '>=6.9.0'} - - '@babel/traverse@7.25.6': - resolution: {integrity: sha512-9Vrcx5ZW6UwK5tvqsj0nGpp/XzqthkT0dqIc9g1AdtygFToNtTF67XzYS//dm+SAK9cp3B9R4ZO/46p63SCjlQ==} - engines: {node: '>=6.9.0'} - - '@babel/types@7.25.6': - resolution: {integrity: sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==} - engines: {node: '>=6.9.0'} - '@babel/types@7.26.0': resolution: {integrity: sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==} engines: {node: '>=6.9.0'} @@ -750,15 +682,6 @@ packages: resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==} deprecated: Use @eslint/object-schema instead - '@ianvs/prettier-plugin-sort-imports@4.3.1': - resolution: {integrity: sha512-ZHwbyjkANZOjaBm3ZosADD2OUYGFzQGxfy67HmGZU94mHqe7g1LCMA7YYKB1Cq+UTPCBqlAYapY0KXAjKEw8Sg==} - peerDependencies: - '@vue/compiler-sfc': 2.7.x || 3.x - prettier: 2 || 3 - peerDependenciesMeta: - '@vue/compiler-sfc': - optional: true - '@img/sharp-darwin-arm64@0.33.5': resolution: {integrity: sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} @@ -2209,10 +2132,6 @@ packages: resolution: {integrity: sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==} engines: {node: '>=12'} - ansi-styles@3.2.1: - resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==} - engines: {node: '>=4'} - ansi-styles@4.3.0: resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==} engines: {node: '>=8'} @@ -2346,10 +2265,6 @@ packages: caniuse-lite@1.0.30001676: resolution: {integrity: sha512-Qz6zwGCiPghQXGJvgQAem79esjitvJ+CxSbSQkW9H/UX5hg8XM88d4lp2W+MEQ81j+Hip58Il+jGVdazk1z9cw==} - chalk@2.4.2: - resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==} - engines: {node: '>=4'} - chalk@4.1.2: resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==} engines: {node: '>=10'} @@ -2398,16 +2313,10 @@ packages: react: ^18 || ^19 || ^19.0.0-rc react-dom: ^18 || ^19 || ^19.0.0-rc - color-convert@1.9.3: - resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==} - color-convert@2.0.1: resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==} engines: {node: '>=7.0.0'} - color-name@1.1.3: - resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==} - color-name@1.1.4: resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==} @@ -2436,9 +2345,6 @@ packages: concat-map@0.0.1: resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==} - convert-source-map@2.0.0: - resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==} - copy-to-clipboard@3.3.3: resolution: {integrity: sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==} @@ -2511,10 +2417,18 @@ packages: resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==} engines: {node: '>=6'} + detect-indent@7.0.1: + resolution: {integrity: sha512-Mc7QhQ8s+cLrnUfU/Ji94vG/r8M26m8f++vyres4ZoojaRDpZ1eSIh/EpzLNwlWuvzSZ3UbDFspjFvTDXe6e/g==} + engines: {node: '>=12.20'} + detect-libc@2.0.3: resolution: {integrity: sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==} engines: {node: '>=8'} + detect-newline@4.0.1: + resolution: {integrity: sha512-qE3Veg1YXzGHQhlA6jzebZN2qVf6NX+A7m7qlhCGG30dJixrAQhYOsJjsnBjJkCSmuOPpCk30145fr8FV0bzog==} + engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} + detect-node-es@1.1.0: resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==} @@ -2527,6 +2441,10 @@ packages: diff-match-patch@1.0.5: resolution: {integrity: sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==} + dir-glob@3.0.1: + resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==} + engines: {node: '>=8'} + direction@1.0.4: resolution: {integrity: sha512-GYqKi1aH7PJXxdhTeZBFrg8vUBeKXi+cNprXsC1kpJcbcVnV9wBsrOu1cQEdG0WeQwlfHiy3XvnKfIrJ2R0NzQ==} hasBin: true @@ -2632,10 +2550,6 @@ packages: resolution: {integrity: sha512-w3PwNZJwRxlp47QGzhuEBldEqVHHhh8/tIPcl6ecf2Bou99cdAt0knihBV0Ecc7CGxYduXVBDheH1K2oADRlvw==} engines: {node: '>=10'} - escape-string-regexp@1.0.5: - resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==} - engines: {node: '>=0.8.0'} - escape-string-regexp@4.0.0: resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==} engines: {node: '>=10'} @@ -2708,6 +2622,25 @@ packages: peerDependencies: eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9 + eslint-plugin-perfectionist@3.9.1: + resolution: {integrity: sha512-9WRzf6XaAxF4Oi5t/3TqKP5zUjERhasHmLFHin2Yw6ZAp/EP/EVA2dr3BhQrrHWCm5SzTMZf0FcjDnBkO2xFkA==} + engines: {node: ^18.0.0 || >=20.0.0} + peerDependencies: + astro-eslint-parser: ^1.0.2 + eslint: '>=8.0.0' + svelte: '>=3.0.0' + svelte-eslint-parser: ^0.41.1 + vue-eslint-parser: '>=9.0.0' + peerDependenciesMeta: + astro-eslint-parser: + optional: true + svelte: + optional: true + svelte-eslint-parser: + optional: true + vue-eslint-parser: + optional: true + eslint-plugin-prettier@5.2.1: resolution: {integrity: sha512-gH3iR3g4JfF+yYPaJYkN7jEl9QbweL/YfkoRlNnuIEHEz1vHVlCmWOS+eGGiRuzHQXdJFCOTxRgvju9b8VUmrw==} engines: {node: ^14.18.0 || >=16.0.0} @@ -2868,10 +2801,6 @@ packages: functions-have-names@1.2.3: resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==} - gensync@1.0.0-beta.2: - resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==} - engines: {node: '>=6.9.0'} - get-intrinsic@1.2.4: resolution: {integrity: sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==} engines: {node: '>= 0.4'} @@ -2880,6 +2809,10 @@ packages: resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==} engines: {node: '>=6'} + get-stdin@9.0.0: + resolution: {integrity: sha512-dVKBjfWisLAicarI2Sf+JuBE/DghV4UzNAVe9yhEJuzeREd3JhOTE9cUaJTeSa77fsbQUK3pcOpJfM59+VKZaA==} + engines: {node: '>=12'} + get-symbol-description@1.0.2: resolution: {integrity: sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==} engines: {node: '>= 0.4'} @@ -2887,6 +2820,9 @@ packages: get-tsconfig@4.8.1: resolution: {integrity: sha512-k9PN+cFBmaLWtVz29SkUoqU5O0slLuHJXt/2P+tMVFT+phsSGXGkp9t3rQIqdz0e+06EHNGs3oM6ZX1s2zHxRg==} + git-hooks-list@3.1.0: + resolution: {integrity: sha512-LF8VeHeR7v+wAbXqfgRlTSX/1BJR9Q1vEMR8JAz1cEg6GX07+zyj3sAdDvYjj/xnlIfVuGgj4qBei1K3hKH+PA==} + glob-parent@5.1.2: resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==} engines: {node: '>= 6'} @@ -2903,10 +2839,6 @@ packages: resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==} deprecated: Glob versions prior to v9 are no longer supported - globals@11.12.0: - resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==} - engines: {node: '>=4'} - globals@13.24.0: resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==} engines: {node: '>=8'} @@ -2915,6 +2847,10 @@ packages: resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==} engines: {node: '>= 0.4'} + globby@13.2.2: + resolution: {integrity: sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==} + engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} + gopd@1.0.1: resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==} @@ -2927,10 +2863,6 @@ packages: has-bigints@1.0.2: resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==} - has-flag@3.0.0: - resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==} - engines: {node: '>=4'} - has-flag@4.0.0: resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==} engines: {node: '>=8'} @@ -3197,11 +3129,6 @@ packages: resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==} hasBin: true - jsesc@2.5.2: - resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==} - engines: {node: '>=4'} - hasBin: true - json-buffer@3.0.1: resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==} @@ -3218,11 +3145,6 @@ packages: resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==} hasBin: true - json5@2.2.3: - resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==} - engines: {node: '>=6'} - hasBin: true - jsondiffpatch@0.6.0: resolution: {integrity: sha512-3QItJOXp2AP1uv7waBkao5nCvhEv+QmJAd38Ybq7wNI74Q+BBmnLn4EDKz6yI9xGAIQoUF87qHt+kc1IVxB4zQ==} engines: {node: ^18.0.0 || >=20.0.0} @@ -3289,9 +3211,6 @@ packages: lru-cache@10.4.3: resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==} - lru-cache@5.1.1: - resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==} - lucide-react@0.454.0: resolution: {integrity: sha512-hw7zMDwykCLnEzgncEEjHeA6+45aeEzRYuKHuyRSOPkhko+J3ySGjGIzu+mmMfDFG1vazHepMaYFYHbTFAZAAQ==} peerDependencies: @@ -3355,6 +3274,9 @@ packages: engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} hasBin: true + natural-compare-lite@1.4.0: + resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==} + natural-compare@1.4.0: resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} @@ -3500,6 +3422,10 @@ packages: resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==} engines: {node: '>=16 || 14 >=14.18'} + path-type@4.0.0: + resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==} + engines: {node: '>=8'} + performance-now@2.1.0: resolution: {integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==} @@ -3578,6 +3504,14 @@ packages: resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==} engines: {node: '>=6.0.0'} + prettier-plugin-packagejson@2.5.3: + resolution: {integrity: sha512-ATMEEXr+ywls1kgrZEWl4SBPEm0uDdyDAjyNzUC0/Z8WZTD3RqbJcQDR+Dau+wYkW9KHK6zqQIsFyfn+9aduWg==} + peerDependencies: + prettier: '>= 1.16.0' + peerDependenciesMeta: + prettier: + optional: true + prettier@3.3.3: resolution: {integrity: sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==} engines: {node: '>=14'} @@ -3817,6 +3751,10 @@ packages: simple-swizzle@0.2.2: resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==} + slash@4.0.0: + resolution: {integrity: sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==} + engines: {node: '>=12'} + slate-history@0.110.3: resolution: {integrity: sha512-sgdff4Usdflmw5ZUbhDkxFwCBQ2qlDKMMkF93w66KdV48vHOgN2BmLrf+2H8SdX8PYIpP/cTB0w8qWC2GwhDVA==} peerDependencies: @@ -3846,6 +3784,13 @@ packages: react: ^18.0.0 react-dom: ^18.0.0 + sort-object-keys@1.1.3: + resolution: {integrity: sha512-855pvK+VkU7PaKYPc+Jjnmt4EzejQHyhhF33q31qG8x7maDzkeFhAAThdCYay11CISO+qAMwjOBP+fPZe0IPyg==} + + sort-package-json@2.10.1: + resolution: {integrity: sha512-d76wfhgUuGypKqY72Unm5LFnMpACbdxXsLPcL27pOsSrmVqH3PztFp1uq+Z22suk15h7vXmTesuh2aEjdCqb5w==} + hasBin: true + source-map-js@1.2.1: resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==} engines: {node: '>=0.10.0'} @@ -3923,10 +3868,6 @@ packages: engines: {node: '>=16 || 14 >=14.17'} hasBin: true - supports-color@5.5.0: - resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==} - engines: {node: '>=4'} - supports-color@7.2.0: resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==} engines: {node: '>=8'} @@ -3956,6 +3897,10 @@ packages: resolution: {integrity: sha512-7gr8p9TQP6RAHusBOSLs46F4564ZrjV8xFmw5zCmgmhGUcw2hxsShhJ6CEiHQMgPDwAQ1fWHPM0ypc4RMAig4A==} engines: {node: ^14.18.0 || >=16.0.0} + synckit@0.9.2: + resolution: {integrity: sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==} + engines: {node: ^14.18.0 || >=16.0.0} + tabbable@6.2.0: resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==} @@ -3992,10 +3937,6 @@ packages: tiny-warning@1.0.3: resolution: {integrity: sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==} - to-fast-properties@2.0.0: - resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==} - engines: {node: '>=4'} - to-regex-range@5.0.1: resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==} engines: {node: '>=8.0'} @@ -4221,9 +4162,6 @@ packages: wrappy@1.0.2: resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==} - yallist@3.1.1: - resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==} - yaml@2.6.0: resolution: {integrity: sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ==} engines: {node: '>= 14'} @@ -4367,98 +4305,10 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - '@babel/code-frame@7.24.7': - dependencies: - '@babel/highlight': 7.24.7 - picocolors: 1.1.0 - - '@babel/compat-data@7.25.4': {} - - '@babel/core@7.25.2': - dependencies: - '@ampproject/remapping': 2.3.0 - '@babel/code-frame': 7.24.7 - '@babel/generator': 7.25.6 - '@babel/helper-compilation-targets': 7.25.2 - '@babel/helper-module-transforms': 7.25.2(@babel/core@7.25.2) - '@babel/helpers': 7.25.6 - '@babel/parser': 7.25.6 - '@babel/template': 7.25.0 - '@babel/traverse': 7.25.6 - '@babel/types': 7.25.6 - convert-source-map: 2.0.0 - debug: 4.3.7 - gensync: 1.0.0-beta.2 - json5: 2.2.3 - semver: 6.3.1 - transitivePeerDependencies: - - supports-color - - '@babel/generator@7.25.6': - dependencies: - '@babel/types': 7.25.6 - '@jridgewell/gen-mapping': 0.3.5 - '@jridgewell/trace-mapping': 0.3.25 - jsesc: 2.5.2 - - '@babel/helper-compilation-targets@7.25.2': - dependencies: - '@babel/compat-data': 7.25.4 - '@babel/helper-validator-option': 7.24.8 - browserslist: 4.23.3 - lru-cache: 5.1.1 - semver: 6.3.1 - - '@babel/helper-module-imports@7.24.7': - dependencies: - '@babel/traverse': 7.25.6 - '@babel/types': 7.25.6 - transitivePeerDependencies: - - supports-color - - '@babel/helper-module-transforms@7.25.2(@babel/core@7.25.2)': - dependencies: - '@babel/core': 7.25.2 - '@babel/helper-module-imports': 7.24.7 - '@babel/helper-simple-access': 7.24.7 - '@babel/helper-validator-identifier': 7.24.7 - '@babel/traverse': 7.25.6 - transitivePeerDependencies: - - supports-color - - '@babel/helper-simple-access@7.24.7': - dependencies: - '@babel/traverse': 7.25.6 - '@babel/types': 7.25.6 - transitivePeerDependencies: - - supports-color - - '@babel/helper-string-parser@7.24.8': {} - '@babel/helper-string-parser@7.25.9': {} - '@babel/helper-validator-identifier@7.24.7': {} - '@babel/helper-validator-identifier@7.25.9': {} - '@babel/helper-validator-option@7.24.8': {} - - '@babel/helpers@7.25.6': - dependencies: - '@babel/template': 7.25.0 - '@babel/types': 7.25.6 - - '@babel/highlight@7.24.7': - dependencies: - '@babel/helper-validator-identifier': 7.24.7 - chalk: 2.4.2 - js-tokens: 4.0.0 - picocolors: 1.1.0 - - '@babel/parser@7.25.6': - dependencies: - '@babel/types': 7.25.6 - '@babel/parser@7.26.2': dependencies: '@babel/types': 7.26.0 @@ -4471,30 +4321,6 @@ snapshots: dependencies: regenerator-runtime: 0.14.1 - '@babel/template@7.25.0': - dependencies: - '@babel/code-frame': 7.24.7 - '@babel/parser': 7.25.6 - '@babel/types': 7.25.6 - - '@babel/traverse@7.25.6': - dependencies: - '@babel/code-frame': 7.24.7 - '@babel/generator': 7.25.6 - '@babel/parser': 7.25.6 - '@babel/template': 7.25.0 - '@babel/types': 7.25.6 - debug: 4.3.7 - globals: 11.12.0 - transitivePeerDependencies: - - supports-color - - '@babel/types@7.25.6': - dependencies: - '@babel/helper-string-parser': 7.24.8 - '@babel/helper-validator-identifier': 7.24.7 - to-fast-properties: 2.0.0 - '@babel/types@7.26.0': dependencies: '@babel/helper-string-parser': 7.25.9 @@ -4651,20 +4477,6 @@ snapshots: '@humanwhocodes/object-schema@2.0.3': {} - '@ianvs/prettier-plugin-sort-imports@4.3.1(@vue/compiler-sfc@3.5.12)(prettier@3.3.3)': - dependencies: - '@babel/core': 7.25.2 - '@babel/generator': 7.25.6 - '@babel/parser': 7.25.6 - '@babel/traverse': 7.25.6 - '@babel/types': 7.25.6 - prettier: 3.3.3 - semver: 7.6.3 - optionalDependencies: - '@vue/compiler-sfc': 3.5.12 - transitivePeerDependencies: - - supports-color - '@img/sharp-darwin-arm64@0.33.5': optionalDependencies: '@img/sharp-libvips-darwin-arm64': 1.0.4 @@ -6151,10 +5963,6 @@ snapshots: ansi-regex@6.1.0: {} - ansi-styles@3.2.1: - dependencies: - color-convert: 1.9.3 - ansi-styles@4.3.0: dependencies: color-convert: 2.0.1 @@ -6311,12 +6119,6 @@ snapshots: caniuse-lite@1.0.30001676: {} - chalk@2.4.2: - dependencies: - ansi-styles: 3.2.1 - escape-string-regexp: 1.0.5 - supports-color: 5.5.0 - chalk@4.1.2: dependencies: ansi-styles: 4.3.0 @@ -6382,16 +6184,10 @@ snapshots: - '@types/react' - '@types/react-dom' - color-convert@1.9.3: - dependencies: - color-name: 1.1.3 - color-convert@2.0.1: dependencies: color-name: 1.1.4 - color-name@1.1.3: {} - color-name@1.1.4: {} color-string@1.9.1: @@ -6416,8 +6212,6 @@ snapshots: concat-map@0.0.1: {} - convert-source-map@2.0.0: {} - copy-to-clipboard@3.3.3: dependencies: toggle-selection: 1.0.6 @@ -6488,9 +6282,13 @@ snapshots: dequal@2.0.3: {} + detect-indent@7.0.1: {} + detect-libc@2.0.3: optional: true + detect-newline@4.0.1: {} + detect-node-es@1.1.0: {} devlop@1.1.0: @@ -6501,6 +6299,10 @@ snapshots: diff-match-patch@1.0.5: {} + dir-glob@3.0.1: + dependencies: + path-type: 4.0.0 + direction@1.0.4: {} dlv@1.1.3: {} @@ -6685,8 +6487,6 @@ snapshots: escape-goat@3.0.0: {} - escape-string-regexp@1.0.5: {} - escape-string-regexp@4.0.0: {} eslint-config-next@15.0.2(eslint@8.57.1)(typescript@5.6.3): @@ -6799,6 +6599,19 @@ snapshots: safe-regex-test: 1.0.3 string.prototype.includes: 2.0.1 + eslint-plugin-perfectionist@3.9.1(eslint@8.57.1)(svelte@5.1.9)(typescript@5.6.3): + dependencies: + '@typescript-eslint/types': 8.12.2 + '@typescript-eslint/utils': 8.12.2(eslint@8.57.1)(typescript@5.6.3) + eslint: 8.57.1 + minimatch: 9.0.5 + natural-compare-lite: 1.4.0 + optionalDependencies: + svelte: 5.1.9 + transitivePeerDependencies: + - supports-color + - typescript + eslint-plugin-prettier@5.2.1(eslint-config-prettier@9.1.0(eslint@8.57.1))(eslint@8.57.1)(prettier@3.3.3): dependencies: eslint: 8.57.1 @@ -7003,8 +6816,6 @@ snapshots: functions-have-names@1.2.3: {} - gensync@1.0.0-beta.2: {} - get-intrinsic@1.2.4: dependencies: es-errors: 1.3.0 @@ -7015,6 +6826,8 @@ snapshots: get-nonce@1.0.1: {} + get-stdin@9.0.0: {} + get-symbol-description@1.0.2: dependencies: call-bind: 1.0.7 @@ -7025,6 +6838,8 @@ snapshots: dependencies: resolve-pkg-maps: 1.0.0 + git-hooks-list@3.1.0: {} + glob-parent@5.1.2: dependencies: is-glob: 4.0.3 @@ -7051,8 +6866,6 @@ snapshots: once: 1.4.0 path-is-absolute: 1.0.1 - globals@11.12.0: {} - globals@13.24.0: dependencies: type-fest: 0.20.2 @@ -7062,6 +6875,14 @@ snapshots: define-properties: 1.2.1 gopd: 1.0.1 + globby@13.2.2: + dependencies: + dir-glob: 3.0.1 + fast-glob: 3.3.2 + ignore: 5.3.2 + merge2: 1.4.1 + slash: 4.0.0 + gopd@1.0.1: dependencies: get-intrinsic: 1.2.4 @@ -7072,8 +6893,6 @@ snapshots: has-bigints@1.0.2: {} - has-flag@3.0.0: {} - has-flag@4.0.0: {} has-property-descriptors@1.0.2: @@ -7315,8 +7134,6 @@ snapshots: dependencies: argparse: 2.0.1 - jsesc@2.5.2: {} - json-buffer@3.0.1: {} json-schema-traverse@0.4.1: {} @@ -7329,8 +7146,6 @@ snapshots: dependencies: minimist: 1.2.8 - json5@2.2.3: {} - jsondiffpatch@0.6.0: dependencies: '@types/diff-match-patch': 1.0.36 @@ -7397,10 +7212,6 @@ snapshots: lru-cache@10.4.3: {} - lru-cache@5.1.1: - dependencies: - yallist: 3.1.1 - lucide-react@0.454.0(react@18.3.1): dependencies: react: 18.3.1 @@ -7463,6 +7274,8 @@ snapshots: nanoid@3.3.7: {} + natural-compare-lite@1.4.0: {} + natural-compare@1.4.0: {} next-themes@0.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1): @@ -7470,7 +7283,7 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - next@15.0.2(@babel/core@7.25.2)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + next@15.0.2(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: '@next/env': 15.0.2 '@swc/counter': 0.1.3 @@ -7480,7 +7293,7 @@ snapshots: postcss: 8.4.31 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - styled-jsx: 5.1.6(@babel/core@7.25.2)(react@18.3.1) + styled-jsx: 5.1.6(react@18.3.1) optionalDependencies: '@next/swc-darwin-arm64': 15.0.2 '@next/swc-darwin-x64': 15.0.2 @@ -7611,6 +7424,8 @@ snapshots: lru-cache: 10.4.3 minipass: 7.1.2 + path-type@4.0.0: {} + performance-now@2.1.0: {} picocolors@1.1.0: {} @@ -7674,6 +7489,13 @@ snapshots: dependencies: fast-diff: 1.3.0 + prettier-plugin-packagejson@2.5.3(prettier@3.3.3): + dependencies: + sort-package-json: 2.10.1 + synckit: 0.9.2 + optionalDependencies: + prettier: 3.3.3 + prettier@3.3.3: {} prismjs@1.29.0: {} @@ -7946,6 +7768,8 @@ snapshots: is-arrayish: 0.3.2 optional: true + slash@4.0.0: {} + slate-history@0.110.3(slate@0.110.2): dependencies: is-plain-object: 5.0.0 @@ -7982,6 +7806,19 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) + sort-object-keys@1.1.3: {} + + sort-package-json@2.10.1: + dependencies: + detect-indent: 7.0.1 + detect-newline: 4.0.1 + get-stdin: 9.0.0 + git-hooks-list: 3.1.0 + globby: 13.2.2 + is-plain-obj: 4.1.0 + semver: 7.6.3 + sort-object-keys: 1.1.3 + source-map-js@1.2.1: {} sswr@2.1.0(svelte@5.1.9): @@ -8060,12 +7897,10 @@ snapshots: strip-json-comments@3.1.1: {} - styled-jsx@5.1.6(@babel/core@7.25.2)(react@18.3.1): + styled-jsx@5.1.6(react@18.3.1): dependencies: client-only: 0.0.1 react: 18.3.1 - optionalDependencies: - '@babel/core': 7.25.2 sucrase@3.35.0: dependencies: @@ -8077,10 +7912,6 @@ snapshots: pirates: 4.0.6 ts-interface-checker: 0.1.13 - supports-color@5.5.0: - dependencies: - has-flag: 3.0.0 - supports-color@7.2.0: dependencies: has-flag: 4.0.0 @@ -8120,6 +7951,11 @@ snapshots: '@pkgr/core': 0.1.1 tslib: 2.7.0 + synckit@0.9.2: + dependencies: + '@pkgr/core': 0.1.1 + tslib: 2.8.1 + tabbable@6.2.0: {} tailwind-merge@2.5.4: {} @@ -8171,8 +8007,6 @@ snapshots: tiny-warning@1.0.3: {} - to-fast-properties@2.0.0: {} - to-regex-range@5.0.1: dependencies: is-number: 7.0.0 @@ -8198,8 +8032,7 @@ snapshots: tslib@2.7.0: {} - tslib@2.8.1: - optional: true + tslib@2.8.1: {} tsx@4.19.2: dependencies: @@ -8435,8 +8268,6 @@ snapshots: wrappy@1.0.2: {} - yallist@3.1.1: {} - yaml@2.6.0: {} yocto-queue@0.1.0: {} diff --git a/templates/plate-playground-template/prettier.config.js b/templates/plate-playground-template/prettier.config.js index 15b6a511d7..47ab2266ae 100644 --- a/templates/plate-playground-template/prettier.config.js +++ b/templates/plate-playground-template/prettier.config.js @@ -1,34 +1,30 @@ /** @type {import('prettier').Config} */ module.exports = { + // Set the line ending to `lf`. + // https://prettier.io/docs/en/options.html#end-of-line endOfLine: 'lf', + + // Do not add semicolons at the end of statements. + // Specify the parser plugins to use for import sorting. + importOrderParserPlugins: ['typescript', 'jsx', 'decorators-legacy'], + + // Use single quotes for string literals. + // Combine type-only imports with value imports. + importOrderTypeScriptVersion: '5.1.6', + + // Set the tab width to 2 spaces. + plugins: ['prettier-plugin-packagejson'], + + // Add trailing commas for object and array literals in ES5-compatible mode. + // https://prettier.io/docs/en/options.html#semicolons semi: true, + + // https://prettier.io/docs/en/options.html#quotes singleQuote: true, + + // https://prettier.io/docs/en/options.html#tab-width tabWidth: 2, + + // https://prettier.io/docs/en/options.html#trailing-commas trailingComma: 'es5', - importOrder: [ - '^(react/(.*)$)|^(react$)', - '^(next/(.*)$)|^(next$)', - '', - '', - '^types$', - '^@/types/(.*)$', - '^@/config/(.*)$', - '^@/lib/(.*)$', - '^@/hooks/(.*)$', - '^@/components/ui/(.*)$', - '^@/components/(.*)$', - '^@/styles/(.*)$', - '^@/app/(.*)$', - '', - '^[./]', - '', - '^[./]', - '^react', - '^next', - '^@/', - '', - ], - importOrderParserPlugins: ['typescript', 'jsx', 'decorators-legacy'], - importOrderTypeScriptVersion: '5.1.6', - plugins: ['@ianvs/prettier-plugin-sort-imports'], }; diff --git a/templates/plate-playground-template/src/app/api/ai/command/route.ts b/templates/plate-playground-template/src/app/api/ai/command/route.ts index 9a4c0970b8..76175403d4 100644 --- a/templates/plate-playground-template/src/app/api/ai/command/route.ts +++ b/templates/plate-playground-template/src/app/api/ai/command/route.ts @@ -1,15 +1,15 @@ -import { NextResponse } from 'next/server'; +import type { NextRequest } from 'next/server'; + import { createOpenAI } from '@ai-sdk/openai'; import { convertToCoreMessages, streamText } from 'ai'; - -import type { NextRequest } from 'next/server'; +import { NextResponse } from 'next/server'; export async function POST(req: NextRequest) { const { - messages, - system, apiKey: key, + messages, model = 'gpt-4o-mini', + system, } = await req.json(); const apiKey = key || process.env.OPENAI_API_KEY; diff --git a/templates/plate-playground-template/src/app/api/ai/copilot/route.ts b/templates/plate-playground-template/src/app/api/ai/copilot/route.ts index c1836b4e99..2439860d26 100644 --- a/templates/plate-playground-template/src/app/api/ai/copilot/route.ts +++ b/templates/plate-playground-template/src/app/api/ai/copilot/route.ts @@ -1,15 +1,15 @@ -import { NextResponse } from 'next/server'; +import type { NextRequest } from 'next/server'; + import { createOpenAI } from '@ai-sdk/openai'; import { generateText } from 'ai'; - -import type { NextRequest } from 'next/server'; +import { NextResponse } from 'next/server'; export async function POST(req: NextRequest) { const { - prompt, - system, apiKey: key, model = 'gpt-4o-mini', + prompt, + system, } = await req.json(); const apiKey = key || process.env.OPENAI_API_KEY; diff --git a/templates/plate-playground-template/src/app/layout.tsx b/templates/plate-playground-template/src/app/layout.tsx index e3d43b8085..997c27defd 100644 --- a/templates/plate-playground-template/src/app/layout.tsx +++ b/templates/plate-playground-template/src/app/layout.tsx @@ -1,35 +1,34 @@ +import { Metadata, Viewport } from 'next'; + import { cn } from '@udecode/cn'; import { Toaster } from 'sonner'; -import { siteConfig } from '@/config/site'; -import { fontSans } from '@/lib/fonts'; +import { OpenAIProvider } from '@/components/openai/openai-context'; import { SiteHeader } from '@/components/site/site-header'; import { TailwindIndicator } from '@/components/site/tailwind-indicator'; import { ThemeProvider } from '@/components/site/theme-provider'; +import { siteConfig } from '@/config/site'; +import { fontSans } from '@/lib/fonts'; import '@/styles/globals.css'; -import { Metadata, Viewport } from 'next'; - -import { OpenAIProvider } from '@/components/openai/openai-context'; - export const metadata: Metadata = { - title: { - default: siteConfig.name, - template: `%s - ${siteConfig.name}`, - }, description: siteConfig.description, icons: { + apple: '/apple-touch-icon.png', icon: '/favicon.ico', shortcut: '/favicon-16x16.png', - apple: '/apple-touch-icon.png', + }, + title: { + default: siteConfig.name, + template: `%s - ${siteConfig.name}`, }, }; export const viewport: Viewport = { themeColor: [ - { media: '(prefers-color-scheme: light)', color: 'white' }, - { media: '(prefers-color-scheme: dark)', color: 'black' }, + { color: 'white', media: '(prefers-color-scheme: light)' }, + { color: 'black', media: '(prefers-color-scheme: dark)' }, ], }; diff --git a/templates/plate-playground-template/src/app/page.tsx b/templates/plate-playground-template/src/app/page.tsx index 772eac67da..5b4c581634 100644 --- a/templates/plate-playground-template/src/app/page.tsx +++ b/templates/plate-playground-template/src/app/page.tsx @@ -1,8 +1,8 @@ import Link from 'next/link'; -import { siteConfig } from '@/config/site'; import PlateEditor from '@/components/plate-editor'; import { buttonVariants } from '@/components/plate-ui/button'; +import { siteConfig } from '@/config/site'; export default function IndexPage() { return ( @@ -17,18 +17,18 @@ export default function IndexPage() {
Documentation GitHub diff --git a/templates/plate-playground-template/src/components/openai/openai-context.tsx b/templates/plate-playground-template/src/components/openai/openai-context.tsx index e81b660a11..7b4a09affa 100644 --- a/templates/plate-playground-template/src/components/openai/openai-context.tsx +++ b/templates/plate-playground-template/src/components/openai/openai-context.tsx @@ -1,10 +1,10 @@ 'use client'; -import { createContext, ReactNode, useContext, useState } from 'react'; +import { ReactNode, createContext, useContext, useState } from 'react'; interface Model { - value: string; label: string; + value: string; } interface OpenAIContextType { @@ -15,12 +15,12 @@ interface OpenAIContextType { } export const models: Model[] = [ - { value: 'gpt-4o-mini', label: 'gpt-4o-mini' }, - { value: 'gpt-4o', label: 'gpt-4o' }, - { value: 'gpt-4-turbo', label: 'gpt-4-turbo' }, - { value: 'gpt-4', label: 'gpt-4' }, - { value: 'gpt-3.5-turbo', label: 'gpt-3.5-turbo' }, - { value: 'gpt-3.5-turbo-instruct', label: 'gpt-3.5-turbo-instruct' }, + { label: 'gpt-4o-mini', value: 'gpt-4o-mini' }, + { label: 'gpt-4o', value: 'gpt-4o' }, + { label: 'gpt-4-turbo', value: 'gpt-4-turbo' }, + { label: 'gpt-4', value: 'gpt-4' }, + { label: 'gpt-3.5-turbo', value: 'gpt-3.5-turbo' }, + { label: 'gpt-3.5-turbo-instruct', value: 'gpt-3.5-turbo-instruct' }, ]; const OpenAIContext = createContext(undefined); diff --git a/templates/plate-playground-template/src/components/openai/settings-dialog.tsx b/templates/plate-playground-template/src/components/openai/settings-dialog.tsx index c01ce83fc8..414a5ba996 100644 --- a/templates/plate-playground-template/src/components/openai/settings-dialog.tsx +++ b/templates/plate-playground-template/src/components/openai/settings-dialog.tsx @@ -1,7 +1,7 @@ 'use client'; import { useState } from 'react'; -import Link from 'next/link'; + import { cn } from '@udecode/cn'; import { CopilotPlugin } from '@udecode/plate-ai/react'; import { useEditorPlugin } from '@udecode/plate-common/react'; @@ -13,6 +13,7 @@ import { EyeOff, Settings, } from 'lucide-react'; +import Link from 'next/link'; import { Button } from '@/components/plate-ui/button'; import { @@ -41,7 +42,7 @@ import { import { models, useOpenAI } from './openai-context'; export function SettingsDialog() { - const { apiKey, setApiKey, model, setModel } = useOpenAI(); + const { apiKey, model, setApiKey, setModel } = useOpenAI(); const [tempKey, setTempKey] = useState(apiKey); const [showKey, setShowKey] = useState(false); const [open, setOpen] = useState(false); @@ -70,8 +71,8 @@ export function SettingsDialog() { diff --git a/templates/plate-playground-template/src/components/plate-editor.tsx b/templates/plate-playground-template/src/components/plate-editor.tsx index 5c3a99d6bf..d523f20b88 100644 --- a/templates/plate-playground-template/src/components/plate-editor.tsx +++ b/templates/plate-playground-template/src/components/plate-editor.tsx @@ -1,6 +1,9 @@ 'use client'; import React, { useRef } from 'react'; +import { DndProvider } from 'react-dnd'; +import { HTML5Backend } from 'react-dnd-html5-backend'; + import { withProps } from '@udecode/cn'; import { AIPlugin } from '@udecode/plate-ai/react'; import { AlignPlugin } from '@udecode/plate-alignment/react'; @@ -54,8 +57,8 @@ import { HEADING_KEYS, HEADING_LEVELS } from '@udecode/plate-heading'; import { HeadingPlugin, TocPlugin } from '@udecode/plate-heading/react'; import { HighlightPlugin } from '@udecode/plate-highlight/react'; import { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react'; -import { IndentListPlugin } from '@udecode/plate-indent-list/react'; import { IndentPlugin } from '@udecode/plate-indent/react'; +import { IndentListPlugin } from '@udecode/plate-indent-list/react'; import { JuicePlugin } from '@udecode/plate-juice'; import { KbdPlugin } from '@udecode/plate-kbd/react'; import { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react'; @@ -94,10 +97,7 @@ import { import { TogglePlugin } from '@udecode/plate-toggle/react'; import { TrailingBlockPlugin } from '@udecode/plate-trailing-block'; import Prism from 'prismjs'; -import { DndProvider } from 'react-dnd'; -import { HTML5Backend } from 'react-dnd-html5-backend'; -import { autoformatRules } from '@/lib/plate/autoformat-rules'; import { BlockquoteElement } from '@/components/plate-ui/blockquote-element'; import { CodeBlockElement } from '@/components/plate-ui/code-block-element'; import { CodeLeaf } from '@/components/plate-ui/code-leaf'; @@ -109,7 +109,7 @@ import { CursorOverlay, DragOverCursorPlugin, } from '@/components/plate-ui/cursor-overlay'; -import { Editor } from '@/components/plate-ui/editor'; +import { Editor, EditorContainer } from '@/components/plate-ui/editor'; import { EmojiInputElement } from '@/components/plate-ui/emoji-input-element'; import { ExcalidrawElement } from '@/components/plate-ui/excalidraw-element'; import { FixedToolbar } from '@/components/plate-ui/fixed-toolbar'; @@ -139,6 +139,7 @@ import { TableElement } from '@/components/plate-ui/table-element'; import { TableRowElement } from '@/components/plate-ui/table-row-element'; import { TodoListElement } from '@/components/plate-ui/todo-list-element'; import { withDraggables } from '@/components/plate-ui/with-draggables'; +import { autoformatRules } from '@/lib/plate/autoformat-rules'; import { SettingsDialog } from './openai/settings-dialog'; import { AILeaf } from './plate-ui/ai-leaf'; @@ -160,17 +161,17 @@ export default function PlateEditor() { return ( -
+ + + + - - - - - + @@ -179,7 +180,7 @@ export default function PlateEditor() { -
+ @@ -189,6 +190,56 @@ export default function PlateEditor() { export const useCreateEditor = () => { return usePlateEditor({ + override: { + components: withDraggables( + withPlaceholders({ + [AIPlugin.key]: AILeaf, + [BlockquotePlugin.key]: BlockquoteElement, + [BoldPlugin.key]: withProps(PlateLeaf, { as: 'strong' }), + [BulletedListPlugin.key]: withProps(ListElement, { variant: 'ul' }), + [CodeBlockPlugin.key]: CodeBlockElement, + [CodeLinePlugin.key]: CodeLineElement, + [CodePlugin.key]: CodeLeaf, + [CodeSyntaxPlugin.key]: CodeSyntaxLeaf, + [ColumnItemPlugin.key]: ColumnElement, + [ColumnPlugin.key]: ColumnGroupElement, + [CommentsPlugin.key]: CommentLeaf, + [DatePlugin.key]: DateElement, + [EmojiInputPlugin.key]: EmojiInputElement, + [ExcalidrawPlugin.key]: ExcalidrawElement, + [HEADING_KEYS.h1]: withProps(HeadingElement, { variant: 'h1' }), + [HEADING_KEYS.h2]: withProps(HeadingElement, { variant: 'h2' }), + [HEADING_KEYS.h3]: withProps(HeadingElement, { variant: 'h3' }), + [HEADING_KEYS.h4]: withProps(HeadingElement, { variant: 'h4' }), + [HEADING_KEYS.h5]: withProps(HeadingElement, { variant: 'h5' }), + [HEADING_KEYS.h6]: withProps(HeadingElement, { variant: 'h6' }), + [HighlightPlugin.key]: HighlightLeaf, + [HorizontalRulePlugin.key]: HrElement, + [ImagePlugin.key]: ImageElement, + [ItalicPlugin.key]: withProps(PlateLeaf, { as: 'em' }), + [KbdPlugin.key]: KbdLeaf, + [LinkPlugin.key]: LinkElement, + [ListItemPlugin.key]: withProps(PlateElement, { as: 'li' }), + [MediaEmbedPlugin.key]: MediaEmbedElement, + [MentionInputPlugin.key]: MentionInputElement, + [MentionPlugin.key]: MentionElement, + [NumberedListPlugin.key]: withProps(ListElement, { variant: 'ol' }), + [ParagraphPlugin.key]: ParagraphElement, + [SlashInputPlugin.key]: SlashInputElement, + [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: 's' }), + [SubscriptPlugin.key]: withProps(PlateLeaf, { as: 'sub' }), + [SuperscriptPlugin.key]: withProps(PlateLeaf, { as: 'sup' }), + [TableCellHeaderPlugin.key]: TableCellHeaderElement, + [TableCellPlugin.key]: TableCellElement, + [TablePlugin.key]: TableElement, + [TableRowPlugin.key]: TableRowElement, + [TocPlugin.key]: TocElement, + [TodoListPlugin.key]: TodoListElement, + [TogglePlugin.key]: ToggleElement, + [UnderlinePlugin.key]: withProps(PlateLeaf, { as: 'u' }), + }) + ), + }, plugins: [ // AI ...aiPlugins, @@ -303,8 +354,8 @@ export const useCreateEditor = () => { // Functionality AutoformatPlugin.configure({ options: { - rules: autoformatRules, enableUndoOnDelete: true, + rules: autoformatRules, }, }), BlockSelectionPlugin.configure({ @@ -338,18 +389,18 @@ export const useCreateEditor = () => { hotkey: 'mod+enter', }, { - hotkey: 'mod+shift+enter', before: true, + hotkey: 'mod+shift+enter', }, { hotkey: 'enter', + level: 1, query: { - start: true, - end: true, allow: HEADING_LEVELS, + end: true, + start: true, }, relative: true, - level: 1, }, ], }, @@ -359,30 +410,30 @@ export const useCreateEditor = () => { options: { rules: [ { - types: [BlockquotePlugin.key, TodoListPlugin.key], defaultType: ParagraphPlugin.key, hotkey: 'Enter', predicate: isBlockAboveEmpty, + types: [BlockquotePlugin.key, TodoListPlugin.key], }, { - types: [BlockquotePlugin.key, TodoListPlugin.key], defaultType: ParagraphPlugin.key, hotkey: 'Backspace', predicate: isSelectionAtBlockStart, + types: [BlockquotePlugin.key, TodoListPlugin.key], }, { - types: [CodeBlockPlugin.key], defaultType: ParagraphPlugin.key, - onReset: unwrapCodeBlock, hotkey: 'Enter', predicate: isCodeBlockEmpty, + types: [CodeBlockPlugin.key], + onReset: unwrapCodeBlock, }, { - types: [CodeBlockPlugin.key], defaultType: ParagraphPlugin.key, - onReset: unwrapCodeBlock, hotkey: 'Backspace', predicate: isSelectionAtCodeBlockStart, + types: [CodeBlockPlugin.key], + onReset: unwrapCodeBlock, }, ], }, @@ -422,9 +473,9 @@ export const useCreateEditor = () => { return !!( n.type && ([ + CodeBlockPlugin.key, TablePlugin.key, TodoListPlugin.key, - CodeBlockPlugin.key, ].includes(n.type as string) || n.listStyleType) ); @@ -441,15 +492,15 @@ export const useCreateEditor = () => { DragOverCursorPlugin, CommentsPlugin.configure({ options: { + myUserId: '1', users: { 1: { id: '1', - name: 'zbeyens', avatarUrl: 'https://avatars.githubusercontent.com/u/19695832?s=96&v=4', + name: 'zbeyens', }, }, - myUserId: '1', }, }), @@ -458,72 +509,22 @@ export const useCreateEditor = () => { MarkdownPlugin.configure({ options: { indentList: true } }), JuicePlugin, ], - override: { - components: withDraggables( - withPlaceholders({ - [AIPlugin.key]: AILeaf, - [BlockquotePlugin.key]: BlockquoteElement, - [BoldPlugin.key]: withProps(PlateLeaf, { as: 'strong' }), - [BulletedListPlugin.key]: withProps(ListElement, { variant: 'ul' }), - [CodeBlockPlugin.key]: CodeBlockElement, - [CodeLinePlugin.key]: CodeLineElement, - [CodePlugin.key]: CodeLeaf, - [CodeSyntaxPlugin.key]: CodeSyntaxLeaf, - [ColumnItemPlugin.key]: ColumnElement, - [ColumnPlugin.key]: ColumnGroupElement, - [CommentsPlugin.key]: CommentLeaf, - [DatePlugin.key]: DateElement, - [EmojiInputPlugin.key]: EmojiInputElement, - [ExcalidrawPlugin.key]: ExcalidrawElement, - [HEADING_KEYS.h1]: withProps(HeadingElement, { variant: 'h1' }), - [HEADING_KEYS.h2]: withProps(HeadingElement, { variant: 'h2' }), - [HEADING_KEYS.h3]: withProps(HeadingElement, { variant: 'h3' }), - [HEADING_KEYS.h4]: withProps(HeadingElement, { variant: 'h4' }), - [HEADING_KEYS.h5]: withProps(HeadingElement, { variant: 'h5' }), - [HEADING_KEYS.h6]: withProps(HeadingElement, { variant: 'h6' }), - [HighlightPlugin.key]: HighlightLeaf, - [HorizontalRulePlugin.key]: HrElement, - [ImagePlugin.key]: ImageElement, - [ItalicPlugin.key]: withProps(PlateLeaf, { as: 'em' }), - [KbdPlugin.key]: KbdLeaf, - [LinkPlugin.key]: LinkElement, - [ListItemPlugin.key]: withProps(PlateElement, { as: 'li' }), - [MediaEmbedPlugin.key]: MediaEmbedElement, - [MentionInputPlugin.key]: MentionInputElement, - [MentionPlugin.key]: MentionElement, - [NumberedListPlugin.key]: withProps(ListElement, { variant: 'ol' }), - [ParagraphPlugin.key]: ParagraphElement, - [SlashInputPlugin.key]: SlashInputElement, - [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: 's' }), - [SubscriptPlugin.key]: withProps(PlateLeaf, { as: 'sub' }), - [SuperscriptPlugin.key]: withProps(PlateLeaf, { as: 'sup' }), - [TableCellHeaderPlugin.key]: TableCellHeaderElement, - [TableCellPlugin.key]: TableCellElement, - [TablePlugin.key]: TableElement, - [TableRowPlugin.key]: TableRowElement, - [TocPlugin.key]: TocElement, - [TodoListPlugin.key]: TodoListElement, - [TogglePlugin.key]: ToggleElement, - [UnderlinePlugin.key]: withProps(PlateLeaf, { as: 'u' }), - }) - ), - }, value: [ { id: '1', - type: 'h1', children: [{ text: 'Playground' }], + type: 'h1', }, { id: '2', - type: ParagraphPlugin.key, children: [ { text: 'A rich-text editor with AI capabilities. Try the ' }, - { text: 'AI commands', bold: true }, + { bold: true, text: 'AI commands' }, { text: ' or use ' }, - { text: 'Cmd+J', kbd: true }, + { kbd: true, text: 'Cmd+J' }, { text: ' to open the AI menu.' }, ], + type: ParagraphPlugin.key, }, ], }); diff --git a/templates/plate-playground-template/src/components/plate-ui/ai-chat-editor.tsx b/templates/plate-playground-template/src/components/plate-ui/ai-chat-editor.tsx index 3e4371f57b..37b04f7eee 100644 --- a/templates/plate-playground-template/src/components/plate-ui/ai-chat-editor.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/ai-chat-editor.tsx @@ -1,14 +1,15 @@ 'use client'; import React, { memo } from 'react'; + +import type { PlateEditor } from '@udecode/plate-common/react'; + import { AIChatPlugin, useLastAssistantMessage } from '@udecode/plate-ai/react'; import { Plate, useEditorPlugin } from '@udecode/plate-common/react'; import { deserializeMd } from '@udecode/plate-markdown'; import { Editor } from './editor'; -import type { PlateEditor } from '@udecode/plate-common/react'; - export const AIChatEditor = memo( ({ aiEditorRef, diff --git a/templates/plate-playground-template/src/components/plate-ui/ai-leaf.tsx b/templates/plate-playground-template/src/components/plate-ui/ai-leaf.tsx index 852ea8bc77..0080ac459c 100644 --- a/templates/plate-playground-template/src/components/plate-ui/ai-leaf.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/ai-leaf.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; + import { cn, withRef } from '@udecode/cn'; import { PlateLeaf } from '@udecode/plate-common/react'; diff --git a/templates/plate-playground-template/src/components/plate-ui/ai-menu-items.tsx b/templates/plate-playground-template/src/components/plate-ui/ai-menu-items.tsx index 4fce3c3e5e..5d69cf08da 100644 --- a/templates/plate-playground-template/src/components/plate-ui/ai-menu-items.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/ai-menu-items.tsx @@ -1,6 +1,9 @@ 'use client'; import { useEffect, useMemo } from 'react'; + +import type { PlateEditor } from '@udecode/plate-common/react'; + import { AIChatPlugin, AIPlugin } from '@udecode/plate-ai/react'; import { getAncestorNode, @@ -25,8 +28,6 @@ import { import { CommandGroup, CommandItem } from './command'; -import type { PlateEditor } from '@udecode/plate-common/react'; - export type EditorChatState = | 'cursorCommand' | 'cursorSuggestion' diff --git a/templates/plate-playground-template/src/components/plate-ui/ai-menu.tsx b/templates/plate-playground-template/src/components/plate-ui/ai-menu.tsx index a29cb1ec37..fccaa4cbac 100644 --- a/templates/plate-playground-template/src/components/plate-ui/ai-menu.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/ai-menu.tsx @@ -1,4 +1,8 @@ import * as React from 'react'; + +import type { TElement, TNodeEntry } from '@udecode/plate-common'; +import type { PlateEditor } from '@udecode/plate-common/react'; + import { AIChatPlugin, useEditorChat } from '@udecode/plate-ai/react'; import { getAncestorNode, @@ -26,9 +30,6 @@ import { AIMenuItems } from './ai-menu-items'; import { Command, CommandList, InputCommand } from './command'; import { Popover, PopoverAnchor, PopoverContent } from './popover'; -import type { TElement, TNodeEntry } from '@udecode/plate-common'; -import type { PlateEditor } from '@udecode/plate-common/react'; - export function AIMenu() { const { api, editor, useOption } = useEditorPlugin(AIChatPlugin); const open = useOption('open'); diff --git a/templates/plate-playground-template/src/components/plate-ui/ai-toolbar-button.tsx b/templates/plate-playground-template/src/components/plate-ui/ai-toolbar-button.tsx index a1d5b0725f..4c184ede6d 100644 --- a/templates/plate-playground-template/src/components/plate-ui/ai-toolbar-button.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/ai-toolbar-button.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; + import { withRef } from '@udecode/cn'; import { AIChatPlugin } from '@udecode/plate-ai/react'; import { useEditorPlugin } from '@udecode/plate-common/react'; diff --git a/templates/plate-playground-template/src/components/plate-ui/align-dropdown-menu.tsx b/templates/plate-playground-template/src/components/plate-ui/align-dropdown-menu.tsx index 336e98c68f..e07646909c 100644 --- a/templates/plate-playground-template/src/components/plate-ui/align-dropdown-menu.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/align-dropdown-menu.tsx @@ -1,6 +1,9 @@ 'use client'; import React from 'react'; + +import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu'; + import { useAlignDropdownMenu, useAlignDropdownMenuState, @@ -22,8 +25,6 @@ import { } from './dropdown-menu'; import { ToolbarButton } from './toolbar'; -import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu'; - const items = [ { icon: AlignLeftIcon, diff --git a/templates/plate-playground-template/src/components/plate-ui/block-context-menu.tsx b/templates/plate-playground-template/src/components/plate-ui/block-context-menu.tsx index d9ac11e011..c92412c640 100644 --- a/templates/plate-playground-template/src/components/plate-ui/block-context-menu.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/block-context-menu.tsx @@ -1,12 +1,13 @@ 'use client'; import { useCallback, useState } from 'react'; + import { AIChatPlugin } from '@udecode/plate-ai/react'; import { BlockquotePlugin } from '@udecode/plate-block-quote/react'; import { unsetNodes } from '@udecode/plate-common'; import { - focusEditor, ParagraphPlugin, + focusEditor, useEditorPlugin, } from '@udecode/plate-common/react'; import { HEADING_KEYS } from '@udecode/plate-heading'; diff --git a/templates/plate-playground-template/src/components/plate-ui/block-selection.tsx b/templates/plate-playground-template/src/components/plate-ui/block-selection.tsx index bf503e6a4f..1fef6b3f5e 100644 --- a/templates/plate-playground-template/src/components/plate-ui/block-selection.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/block-selection.tsx @@ -1,10 +1,10 @@ 'use client'; +import type { VariantProps } from 'class-variance-authority'; + import { useBlockSelected } from '@udecode/plate-selection/react'; import { cva } from 'class-variance-authority'; -import type { VariantProps } from 'class-variance-authority'; - const blockSelectionVariants = cva( 'pointer-events-none absolute inset-0 z-[1] bg-brand/[.13] transition-opacity', { diff --git a/templates/plate-playground-template/src/components/plate-ui/blockquote-element.tsx b/templates/plate-playground-template/src/components/plate-ui/blockquote-element.tsx index 4eed84d75f..f6fa8a208e 100644 --- a/templates/plate-playground-template/src/components/plate-ui/blockquote-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/blockquote-element.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; + import { cn, withRef } from '@udecode/cn'; import { PlateElement } from './plate-element'; diff --git a/templates/plate-playground-template/src/components/plate-ui/button.tsx b/templates/plate-playground-template/src/components/plate-ui/button.tsx index d2e7ebb69d..e92ca630ab 100644 --- a/templates/plate-playground-template/src/components/plate-ui/button.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/button.tsx @@ -1,10 +1,11 @@ import * as React from 'react'; + +import type { VariantProps } from 'class-variance-authority'; + import { Slot } from '@radix-ui/react-slot'; import { cn, withRef } from '@udecode/cn'; import { cva } from 'class-variance-authority'; -import type { VariantProps } from 'class-variance-authority'; - export const buttonVariants = cva( 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', { diff --git a/templates/plate-playground-template/src/components/plate-ui/calendar.tsx b/templates/plate-playground-template/src/components/plate-ui/calendar.tsx index 071a927f52..2205ef1a58 100644 --- a/templates/plate-playground-template/src/components/plate-ui/calendar.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/calendar.tsx @@ -1,9 +1,10 @@ 'use client'; import * as React from 'react'; +import { DayPicker } from 'react-day-picker'; + import { cn } from '@udecode/cn'; import { ChevronLeft, ChevronRight } from 'lucide-react'; -import { DayPicker } from 'react-day-picker'; import { buttonVariants } from './button'; diff --git a/templates/plate-playground-template/src/components/plate-ui/checkbox.tsx b/templates/plate-playground-template/src/components/plate-ui/checkbox.tsx index 3e34bfc886..d369c9238d 100644 --- a/templates/plate-playground-template/src/components/plate-ui/checkbox.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/checkbox.tsx @@ -1,6 +1,7 @@ 'use client'; import * as React from 'react'; + import * as CheckboxPrimitive from '@radix-ui/react-checkbox'; import { cn, withRef } from '@udecode/cn'; import { Check } from 'lucide-react'; diff --git a/templates/plate-playground-template/src/components/plate-ui/code-block-combobox.tsx b/templates/plate-playground-template/src/components/plate-ui/code-block-combobox.tsx index 54ae875171..d7567407f3 100644 --- a/templates/plate-playground-template/src/components/plate-ui/code-block-combobox.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/code-block-combobox.tsx @@ -1,6 +1,7 @@ 'use client'; import React, { useState } from 'react'; + import { cn } from '@udecode/cn'; import { useCodeBlockCombobox, diff --git a/templates/plate-playground-template/src/components/plate-ui/code-block-element.tsx b/templates/plate-playground-template/src/components/plate-ui/code-block-element.tsx index 22f1e72992..afc18a529e 100644 --- a/templates/plate-playground-template/src/components/plate-ui/code-block-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/code-block-element.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; + import { cn, withRef } from '@udecode/cn'; import { useCodeBlockElementState } from '@udecode/plate-code-block/react'; diff --git a/templates/plate-playground-template/src/components/plate-ui/code-leaf.tsx b/templates/plate-playground-template/src/components/plate-ui/code-leaf.tsx index dbd19fc671..dd0c48a2fd 100644 --- a/templates/plate-playground-template/src/components/plate-ui/code-leaf.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/code-leaf.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; + import { cn, withRef } from '@udecode/cn'; import { PlateLeaf } from '@udecode/plate-common/react'; diff --git a/templates/plate-playground-template/src/components/plate-ui/code-line-element.tsx b/templates/plate-playground-template/src/components/plate-ui/code-line-element.tsx index d5481921b3..b041b5256f 100644 --- a/templates/plate-playground-template/src/components/plate-ui/code-line-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/code-line-element.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; + import { withRef } from '@udecode/cn'; import { PlateElement } from './plate-element'; diff --git a/templates/plate-playground-template/src/components/plate-ui/code-syntax-leaf.tsx b/templates/plate-playground-template/src/components/plate-ui/code-syntax-leaf.tsx index 6aac9a7656..8cbf8bcbbf 100644 --- a/templates/plate-playground-template/src/components/plate-ui/code-syntax-leaf.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/code-syntax-leaf.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; + import { withRef } from '@udecode/cn'; import { useCodeSyntaxLeaf } from '@udecode/plate-code-block/react'; import { PlateLeaf } from '@udecode/plate-common/react'; diff --git a/templates/plate-playground-template/src/components/plate-ui/color-dropdown-menu-items.tsx b/templates/plate-playground-template/src/components/plate-ui/color-dropdown-menu-items.tsx index db7fec0187..fb8b107bf1 100644 --- a/templates/plate-playground-template/src/components/plate-ui/color-dropdown-menu-items.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/color-dropdown-menu-items.tsx @@ -1,6 +1,9 @@ 'use client'; import React from 'react'; + +import type { DropdownMenuItemProps } from '@radix-ui/react-dropdown-menu'; + import { cn } from '@udecode/cn'; import { Check } from 'lucide-react'; @@ -13,8 +16,6 @@ import { TooltipTrigger, } from './tooltip'; -import type { DropdownMenuItemProps } from '@radix-ui/react-dropdown-menu'; - export type TColor = { isBrightColor: boolean; name: string; diff --git a/templates/plate-playground-template/src/components/plate-ui/color-dropdown-menu.tsx b/templates/plate-playground-template/src/components/plate-ui/color-dropdown-menu.tsx index 6fba27f07d..924f77c2b9 100644 --- a/templates/plate-playground-template/src/components/plate-ui/color-dropdown-menu.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/color-dropdown-menu.tsx @@ -1,5 +1,7 @@ 'use client'; +import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu'; + import { useColorDropdownMenu, useColorDropdownMenuState, @@ -14,8 +16,6 @@ import { } from './dropdown-menu'; import { ToolbarButton } from './toolbar'; -import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu'; - type ColorDropdownMenuProps = { nodeType: string; tooltip?: string; diff --git a/templates/plate-playground-template/src/components/plate-ui/color-input.tsx b/templates/plate-playground-template/src/components/plate-ui/color-input.tsx index 0b630eacdf..749b9ec8b3 100644 --- a/templates/plate-playground-template/src/components/plate-ui/color-input.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/color-input.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; + import { cn, withRef } from '@udecode/cn'; import { useComposedRef } from '@udecode/plate-common/react'; import { useColorInput } from '@udecode/plate-font/react'; diff --git a/templates/plate-playground-template/src/components/plate-ui/color-picker.tsx b/templates/plate-playground-template/src/components/plate-ui/color-picker.tsx index 1702a9cf1f..98cef38b3f 100644 --- a/templates/plate-playground-template/src/components/plate-ui/color-picker.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/color-picker.tsx @@ -1,16 +1,17 @@ 'use client'; import React from 'react'; + import { cn, withRef } from '@udecode/cn'; import { EraserIcon } from 'lucide-react'; +import type { TColor } from './color-dropdown-menu-items'; + import { buttonVariants } from './button'; import { ColorDropdownMenuItems } from './color-dropdown-menu-items'; import { ColorCustom } from './colors-custom'; import { DropdownMenuGroup, DropdownMenuItem } from './dropdown-menu'; -import type { TColor } from './color-dropdown-menu-items'; - export const ColorPickerContent = withRef< 'div', { diff --git a/templates/plate-playground-template/src/components/plate-ui/colors-custom.tsx b/templates/plate-playground-template/src/components/plate-ui/colors-custom.tsx index a6537ce02e..65ee50f0f3 100644 --- a/templates/plate-playground-template/src/components/plate-ui/colors-custom.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/colors-custom.tsx @@ -1,6 +1,8 @@ 'use client'; import React from 'react'; +import type { ComponentPropsWithoutRef } from 'react'; + import { cn } from '@udecode/cn'; import { useColorsCustom, @@ -8,15 +10,15 @@ import { } from '@udecode/plate-font/react'; import { PlusIcon } from 'lucide-react'; +import type { TColor } from './color-dropdown-menu-items'; + import { buttonVariants } from './button'; import { ColorDropdownMenuItems } from './color-dropdown-menu-items'; import { ColorInput } from './color-input'; + // import { ColorInput } from './color-input'; import { DropdownMenuItem } from './dropdown-menu'; -import type { TColor } from './color-dropdown-menu-items'; -import type { ComponentPropsWithoutRef } from 'react'; - type ColorCustomProps = { colors: TColor[]; customColors: TColor[]; diff --git a/templates/plate-playground-template/src/components/plate-ui/column-element.tsx b/templates/plate-playground-template/src/components/plate-ui/column-element.tsx index eefb183640..6c412c9299 100644 --- a/templates/plate-playground-template/src/components/plate-ui/column-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/column-element.tsx @@ -1,6 +1,9 @@ 'use client'; import React from 'react'; + +import type { TColumnElement } from '@udecode/plate-layout'; + import { cn, withRef } from '@udecode/cn'; import { useElement, withHOC } from '@udecode/plate-common/react'; import { ResizableProvider } from '@udecode/plate-resizable'; @@ -8,8 +11,6 @@ import { useReadOnly } from 'slate-react'; import { PlateElement } from './plate-element'; -import type { TColumnElement } from '@udecode/plate-layout'; - export const ColumnElement = withHOC( ResizableProvider, withRef(({ children, className, ...props }, ref) => { diff --git a/templates/plate-playground-template/src/components/plate-ui/column-group-element.tsx b/templates/plate-playground-template/src/components/plate-ui/column-group-element.tsx index c31210a0d7..dd5d77a098 100644 --- a/templates/plate-playground-template/src/components/plate-ui/column-group-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/column-group-element.tsx @@ -1,6 +1,10 @@ 'use client'; import React from 'react'; + +import type { TColumnElement } from '@udecode/plate-layout'; +import type { LucideProps } from 'lucide-react'; + import { cn, withRef } from '@udecode/cn'; import { useElement, useRemoveNodeButton } from '@udecode/plate-common/react'; import { @@ -16,9 +20,6 @@ import { PlateElement } from './plate-element'; import { Popover, PopoverAnchor, PopoverContent } from './popover'; import { Separator } from './separator'; -import type { TColumnElement } from '@udecode/plate-layout'; -import type { LucideProps } from 'lucide-react'; - export const ColumnGroupElement = withRef( ({ children, className, ...props }, ref) => { return ( diff --git a/templates/plate-playground-template/src/components/plate-ui/command.tsx b/templates/plate-playground-template/src/components/plate-ui/command.tsx index 8842571208..0a4b9dc120 100644 --- a/templates/plate-playground-template/src/components/plate-ui/command.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/command.tsx @@ -1,6 +1,9 @@ 'use client'; import * as React from 'react'; + +import type { DialogProps } from '@radix-ui/react-dialog'; + import { cn, createPrimitiveElement, @@ -14,8 +17,6 @@ import { Search } from 'lucide-react'; import { Dialog, DialogContent, DialogTitle } from './dialog'; import { inputVariants } from './input'; -import type { DialogProps } from '@radix-ui/react-dialog'; - export const Command = withCn( CommandPrimitive, 'flex size-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground' diff --git a/templates/plate-playground-template/src/components/plate-ui/comment-avatar.tsx b/templates/plate-playground-template/src/components/plate-ui/comment-avatar.tsx index 47110a369d..f9a963ac26 100644 --- a/templates/plate-playground-template/src/components/plate-ui/comment-avatar.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/comment-avatar.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; + import { CommentsPlugin } from '@udecode/plate-comments/react'; import { useEditorPlugin } from '@udecode/plate-common/react'; diff --git a/templates/plate-playground-template/src/components/plate-ui/comment-create-form.tsx b/templates/plate-playground-template/src/components/plate-ui/comment-create-form.tsx index 71c139f5f2..3ccc6f82b9 100644 --- a/templates/plate-playground-template/src/components/plate-ui/comment-create-form.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/comment-create-form.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; + import { cn } from '@udecode/cn'; import { CommentNewSubmitButton, diff --git a/templates/plate-playground-template/src/components/plate-ui/comment-item.tsx b/templates/plate-playground-template/src/components/plate-ui/comment-item.tsx index 9bf30a037b..07fcc47678 100644 --- a/templates/plate-playground-template/src/components/plate-ui/comment-item.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/comment-item.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; + import { CommentProvider, CommentsPlugin, diff --git a/templates/plate-playground-template/src/components/plate-ui/comment-leaf.tsx b/templates/plate-playground-template/src/components/plate-ui/comment-leaf.tsx index 746297b4dd..f1cf9f5425 100644 --- a/templates/plate-playground-template/src/components/plate-ui/comment-leaf.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/comment-leaf.tsx @@ -1,6 +1,10 @@ 'use client'; import React from 'react'; + +import type { TCommentText } from '@udecode/plate-comments'; +import type { PlateLeafProps } from '@udecode/plate-common/react'; + import { cn } from '@udecode/cn'; import { useCommentLeaf, @@ -8,9 +12,6 @@ import { } from '@udecode/plate-comments/react'; import { PlateLeaf } from '@udecode/plate-common/react'; -import type { TCommentText } from '@udecode/plate-comments'; -import type { PlateLeafProps } from '@udecode/plate-common/react'; - export function CommentLeaf({ className, ...props diff --git a/templates/plate-playground-template/src/components/plate-ui/comment-more-dropdown.tsx b/templates/plate-playground-template/src/components/plate-ui/comment-more-dropdown.tsx index 67678344b5..2a5316e59a 100644 --- a/templates/plate-playground-template/src/components/plate-ui/comment-more-dropdown.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/comment-more-dropdown.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; + import { cn } from '@udecode/cn'; import { useCommentDeleteButton, diff --git a/templates/plate-playground-template/src/components/plate-ui/comment-reply-items.tsx b/templates/plate-playground-template/src/components/plate-ui/comment-reply-items.tsx index dc0e7af6a8..543a13f5a6 100644 --- a/templates/plate-playground-template/src/components/plate-ui/comment-reply-items.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/comment-reply-items.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; + import { SCOPE_ACTIVE_COMMENT, useCommentReplies, diff --git a/templates/plate-playground-template/src/components/plate-ui/comment-resolve-button.tsx b/templates/plate-playground-template/src/components/plate-ui/comment-resolve-button.tsx index a2a9278cc0..239a59ac27 100644 --- a/templates/plate-playground-template/src/components/plate-ui/comment-resolve-button.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/comment-resolve-button.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; + import { cn } from '@udecode/cn'; import { CommentResolveButton as CommentResolveButtonPrimitive, diff --git a/templates/plate-playground-template/src/components/plate-ui/comment-toolbar-button.tsx b/templates/plate-playground-template/src/components/plate-ui/comment-toolbar-button.tsx index a58b789702..16f8ac08be 100644 --- a/templates/plate-playground-template/src/components/plate-ui/comment-toolbar-button.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/comment-toolbar-button.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; + import { useCommentAddButton } from '@udecode/plate-comments/react'; import { MessageSquarePlus } from 'lucide-react'; diff --git a/templates/plate-playground-template/src/components/plate-ui/comment-value.tsx b/templates/plate-playground-template/src/components/plate-ui/comment-value.tsx index 38b67a00db..9c5314848c 100644 --- a/templates/plate-playground-template/src/components/plate-ui/comment-value.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/comment-value.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; + import { cn } from '@udecode/cn'; import { CommentEditActions, diff --git a/templates/plate-playground-template/src/components/plate-ui/comments-popover.tsx b/templates/plate-playground-template/src/components/plate-ui/comments-popover.tsx index f239086066..298e19a9d6 100644 --- a/templates/plate-playground-template/src/components/plate-ui/comments-popover.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/comments-popover.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; + import { cn } from '@udecode/cn'; import { CommentProvider, diff --git a/templates/plate-playground-template/src/components/plate-ui/context-menu.tsx b/templates/plate-playground-template/src/components/plate-ui/context-menu.tsx index 095752cfe7..ed1a4cc136 100644 --- a/templates/plate-playground-template/src/components/plate-ui/context-menu.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/context-menu.tsx @@ -1,6 +1,7 @@ 'use client'; import * as React from 'react'; + import * as ContextMenuPrimitive from '@radix-ui/react-context-menu'; import { cn } from '@udecode/cn'; import { Check, ChevronRight, Circle } from 'lucide-react'; diff --git a/templates/plate-playground-template/src/components/plate-ui/cursor-overlay.tsx b/templates/plate-playground-template/src/components/plate-ui/cursor-overlay.tsx index ae873a919a..1c8114fb02 100644 --- a/templates/plate-playground-template/src/components/plate-ui/cursor-overlay.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/cursor-overlay.tsx @@ -1,6 +1,14 @@ 'use client'; import React, { useEffect } from 'react'; + +import type { + CursorData, + CursorOverlayProps, + CursorProps, + CursorState, +} from '@udecode/plate-cursor'; + import { cn } from '@udecode/cn'; import { createPlatePlugin, @@ -12,13 +20,6 @@ import { CursorOverlay as CursorOverlayPrimitive } from '@udecode/plate-cursor'; import { DndPlugin } from '@udecode/plate-dnd'; import { BlockSelectionPlugin } from '@udecode/plate-selection/react'; -import type { - CursorData, - CursorOverlayProps, - CursorProps, - CursorState, -} from '@udecode/plate-cursor'; - export function Cursor({ caretPosition, classNames, diff --git a/templates/plate-playground-template/src/components/plate-ui/dialog.tsx b/templates/plate-playground-template/src/components/plate-ui/dialog.tsx index c892d92b1c..b89bc9a9ba 100644 --- a/templates/plate-playground-template/src/components/plate-ui/dialog.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/dialog.tsx @@ -1,6 +1,7 @@ 'use client'; import * as React from 'react'; + import * as DialogPrimitive from '@radix-ui/react-dialog'; import { cn, createPrimitiveElement, withCn, withRef } from '@udecode/cn'; import { X } from 'lucide-react'; diff --git a/templates/plate-playground-template/src/components/plate-ui/draggable.tsx b/templates/plate-playground-template/src/components/plate-ui/draggable.tsx index 48dd019e64..94e2e97c4d 100644 --- a/templates/plate-playground-template/src/components/plate-ui/draggable.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/draggable.tsx @@ -1,6 +1,12 @@ 'use client'; import React from 'react'; + +import type { TEditor } from '@udecode/plate-common'; +import type { PlateElementProps } from '@udecode/plate-common/react'; +import type { DragItemNode } from '@udecode/plate-dnd'; +import type { DropTargetMonitor } from 'react-dnd'; + import { cn, withRef } from '@udecode/cn'; import { MemoizedChildren, @@ -28,11 +34,6 @@ import { TooltipTrigger, } from './tooltip'; -import type { DropTargetMonitor } from 'react-dnd'; -import type { TEditor } from '@udecode/plate-common'; -import type { PlateElementProps } from '@udecode/plate-common/react'; -import type { DragItemNode } from '@udecode/plate-dnd'; - export interface DraggableProps extends PlateElementProps { /** * Intercepts the drop handling. If `false` is returned, the default drop diff --git a/templates/plate-playground-template/src/components/plate-ui/dropdown-menu.tsx b/templates/plate-playground-template/src/components/plate-ui/dropdown-menu.tsx index 7dbd08155f..2f4eb47a5f 100644 --- a/templates/plate-playground-template/src/components/plate-ui/dropdown-menu.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/dropdown-menu.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { useCallback, useState } from 'react'; + import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'; import { cn, diff --git a/templates/plate-playground-template/src/components/plate-ui/editor.tsx b/templates/plate-playground-template/src/components/plate-ui/editor.tsx index 880a9566d9..60acb629dd 100644 --- a/templates/plate-playground-template/src/components/plate-ui/editor.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/editor.tsx @@ -1,48 +1,76 @@ 'use client'; import React from 'react'; + +import type { PlateContentProps } from '@udecode/plate-common/react'; +import type { VariantProps } from 'class-variance-authority'; + import { cn } from '@udecode/cn'; import { PlateContent } from '@udecode/plate-common/react'; import { cva } from 'class-variance-authority'; -import type { PlateContentProps } from '@udecode/plate-common/react'; -import type { VariantProps } from 'class-variance-authority'; +const editorContainerVariants = cva('relative flex cursor-text', { + defaultVariants: { + variant: 'default', + }, + variants: { + variant: { + default: 'w-full', + demo: 'h-[500px] overflow-y-auto', + }, + }, +}); + +export const EditorContainer = React.forwardRef< + HTMLDivElement, + React.ComponentPropsWithoutRef<'div'> & + VariantProps +>(({ className, variant, ...props }, ref) => { + return ( +
+ ); +}); + +EditorContainer.displayName = 'EditorContainer'; const editorVariants = cva( cn( - 'relative overflow-x-auto whitespace-pre-wrap break-words text-foreground', - 'min-h-[80px] w-full rounded-md bg-background px-6 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none', - '[&_[data-slate-placeholder]]:text-muted-foreground [&_[data-slate-placeholder]]:!opacity-100', + 'group/editor', + 'relative w-full whitespace-pre-wrap break-words', + 'rounded-md ring-offset-background placeholder:text-muted-foreground/80 focus-visible:outline-none', + '[&_[data-slate-placeholder]]:text-muted-foreground/80 [&_[data-slate-placeholder]]:!opacity-100', '[&_[data-slate-placeholder]]:top-[auto_!important]', '[&_strong]:font-bold' ), { defaultVariants: { - focusRing: true, - size: 'sm', - variant: 'outline', + variant: 'default', }, variants: { disabled: { true: 'cursor-not-allowed opacity-50', }, - focusRing: { - false: '', - true: 'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', - }, focused: { true: 'ring-2 ring-ring ring-offset-2', }, - size: { - md: 'text-base', - sm: 'text-sm', - }, variant: { + ai: 'w-full px-0 text-sm', aiChat: - 'max-h-[min(70vh,320px)] w-full overflow-y-auto rounded-none border-b px-3 py-2 text-sm', - demo: 'min-h-full w-full px-16 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]', - ghost: '', - outline: 'border border-input', + 'max-h-[min(70vh,320px)] w-full max-w-[700px] overflow-y-auto px-3 py-2 text-sm', + default: + 'min-h-full w-full px-16 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]', + demo: 'min-h-full w-full px-16 pb-72 pt-4 text-base sm:px-[max(64px,calc(50%-350px))]', + fullWidth: 'min-h-full w-full px-16 pb-72 text-base sm:px-24', + update: 'w-full px-0 text-sm', }, }, } @@ -51,43 +79,24 @@ const editorVariants = cva( export type EditorProps = PlateContentProps & VariantProps; -const Editor = React.forwardRef( - ( - { - className, - disabled, - focusRing, - focused, - readOnly, - size, - variant, - ...props - }, - ref - ) => { +export const Editor = React.forwardRef( + ({ className, disabled, focused, variant, ...props }, ref) => { return ( -
- -
+ ); } ); -Editor.displayName = 'Editor'; -export { Editor }; +Editor.displayName = 'Editor'; diff --git a/templates/plate-playground-template/src/components/plate-ui/emoji-dropdown-menu.tsx b/templates/plate-playground-template/src/components/plate-ui/emoji-dropdown-menu.tsx index 70d4af2926..6bfd240b0e 100644 --- a/templates/plate-playground-template/src/components/plate-ui/emoji-dropdown-menu.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/emoji-dropdown-menu.tsx @@ -1,6 +1,9 @@ 'use client'; import React from 'react'; + +import type { EmojiDropdownMenuOptions } from '@udecode/plate-emoji/react'; + import { useEmojiDropdownMenuState } from '@udecode/plate-emoji/react'; import { Smile } from 'lucide-react'; @@ -9,8 +12,6 @@ import { EmojiPicker } from './emoji-picker'; import { EmojiToolbarDropdown } from './emoji-toolbar-dropdown'; import { ToolbarButton } from './toolbar'; -import type { EmojiDropdownMenuOptions } from '@udecode/plate-emoji/react'; - type EmojiDropdownMenuProps = { options?: EmojiDropdownMenuOptions; } & React.ComponentPropsWithoutRef; diff --git a/templates/plate-playground-template/src/components/plate-ui/emoji-icons.tsx b/templates/plate-playground-template/src/components/plate-ui/emoji-icons.tsx index 9ab84ef2b8..0380df2f72 100644 --- a/templates/plate-playground-template/src/components/plate-ui/emoji-icons.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/emoji-icons.tsx @@ -1,3 +1,7 @@ +import type React from 'react'; + +import type { EmojiCategoryList } from '@udecode/plate-emoji'; + import { AppleIcon, ClockIcon, @@ -12,9 +16,6 @@ import { XIcon, } from 'lucide-react'; -import type React from 'react'; -import type { EmojiCategoryList } from '@udecode/plate-emoji'; - export const emojiCategoryIcons: Record< EmojiCategoryList, { diff --git a/templates/plate-playground-template/src/components/plate-ui/emoji-input-element.tsx b/templates/plate-playground-template/src/components/plate-ui/emoji-input-element.tsx index 2bbc43e065..7a6da6ef98 100644 --- a/templates/plate-playground-template/src/components/plate-ui/emoji-input-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/emoji-input-element.tsx @@ -1,6 +1,7 @@ 'use client'; import React, { useMemo, useState } from 'react'; + import { withRef } from '@udecode/cn'; import { EmojiInlineIndexSearch, insertEmoji } from '@udecode/plate-emoji'; diff --git a/templates/plate-playground-template/src/components/plate-ui/emoji-picker-content.tsx b/templates/plate-playground-template/src/components/plate-ui/emoji-picker-content.tsx index f9efa2c9a2..e16b5eddc7 100644 --- a/templates/plate-playground-template/src/components/plate-ui/emoji-picker-content.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/emoji-picker-content.tsx @@ -1,12 +1,13 @@ 'use client'; import { memo, useCallback } from 'react'; -import { cn } from '@udecode/cn'; -import { EmojiSettings } from '@udecode/plate-emoji'; import type { Emoji, GridRow } from '@udecode/plate-emoji'; import type { UseEmojiPickerType } from '@udecode/plate-emoji/react'; +import { cn } from '@udecode/cn'; +import { EmojiSettings } from '@udecode/plate-emoji'; + export type EmojiPickerContentProps = Pick< UseEmojiPickerType, | 'emojiLibrary' diff --git a/templates/plate-playground-template/src/components/plate-ui/emoji-picker-navigation.tsx b/templates/plate-playground-template/src/components/plate-ui/emoji-picker-navigation.tsx index a7825361ed..2549c8ca6e 100644 --- a/templates/plate-playground-template/src/components/plate-ui/emoji-picker-navigation.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/emoji-picker-navigation.tsx @@ -1,3 +1,6 @@ +import type { EmojiCategoryList } from '@udecode/plate-emoji'; +import type { UseEmojiPickerType } from '@udecode/plate-emoji/react'; + import { cn } from '@udecode/cn'; import { Button } from './button'; @@ -8,9 +11,6 @@ import { TooltipTrigger, } from './tooltip'; -import type { EmojiCategoryList } from '@udecode/plate-emoji'; -import type { UseEmojiPickerType } from '@udecode/plate-emoji/react'; - export type EmojiPickerNavigationProps = { onClick: (id: EmojiCategoryList) => void; } & Pick< diff --git a/templates/plate-playground-template/src/components/plate-ui/emoji-picker-search-and-clear.tsx b/templates/plate-playground-template/src/components/plate-ui/emoji-picker-search-and-clear.tsx index efba752659..117c745f49 100644 --- a/templates/plate-playground-template/src/components/plate-ui/emoji-picker-search-and-clear.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/emoji-picker-search-and-clear.tsx @@ -1,12 +1,12 @@ 'use client'; +import type { UseEmojiPickerType } from '@udecode/plate-emoji/react'; + import { cn } from '@udecode/cn'; import { Button } from './button'; import { emojiSearchIcons } from './emoji-icons'; -import type { UseEmojiPickerType } from '@udecode/plate-emoji/react'; - export type EmojiPickerSearchAndClearProps = Pick< UseEmojiPickerType, 'clearSearch' | 'i18n' | 'searchValue' diff --git a/templates/plate-playground-template/src/components/plate-ui/emoji-picker-search-bar.tsx b/templates/plate-playground-template/src/components/plate-ui/emoji-picker-search-bar.tsx index cd6ac405cc..bc6ce9d47c 100644 --- a/templates/plate-playground-template/src/components/plate-ui/emoji-picker-search-bar.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/emoji-picker-search-bar.tsx @@ -1,6 +1,7 @@ 'use client'; import type { ReactNode } from 'react'; + import type { UseEmojiPickerType } from '@udecode/plate-emoji/react'; export type EmojiPickerSearchBarProps = { diff --git a/templates/plate-playground-template/src/components/plate-ui/emoji-picker.tsx b/templates/plate-playground-template/src/components/plate-ui/emoji-picker.tsx index 241c95a5ff..41b47668c5 100644 --- a/templates/plate-playground-template/src/components/plate-ui/emoji-picker.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/emoji-picker.tsx @@ -1,6 +1,9 @@ 'use client'; import React from 'react'; + +import type { UseEmojiPickerType } from '@udecode/plate-emoji/react'; + import { cn } from '@udecode/cn'; import { EmojiSettings } from '@udecode/plate-emoji'; @@ -10,8 +13,6 @@ import { EmojiPickerPreview } from './emoji-picker-preview'; import { EmojiPickerSearchAndClear } from './emoji-picker-search-and-clear'; import { EmojiPickerSearchBar } from './emoji-picker-search-bar'; -import type { UseEmojiPickerType } from '@udecode/plate-emoji/react'; - export function EmojiPicker({ clearSearch, emoji, diff --git a/templates/plate-playground-template/src/components/plate-ui/emoji-toolbar-dropdown.tsx b/templates/plate-playground-template/src/components/plate-ui/emoji-toolbar-dropdown.tsx index 4495e0b878..a01128d0ee 100644 --- a/templates/plate-playground-template/src/components/plate-ui/emoji-toolbar-dropdown.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/emoji-toolbar-dropdown.tsx @@ -1,10 +1,10 @@ 'use client'; import React from 'react'; -import * as Popover from '@radix-ui/react-popover'; - import type { ReactNode } from 'react'; +import * as Popover from '@radix-ui/react-popover'; + type EmojiToolbarDropdownProps = { children: ReactNode; control: ReactNode; diff --git a/templates/plate-playground-template/src/components/plate-ui/excalidraw-element.tsx b/templates/plate-playground-template/src/components/plate-ui/excalidraw-element.tsx index fd2080da75..5712c8f507 100644 --- a/templates/plate-playground-template/src/components/plate-ui/excalidraw-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/excalidraw-element.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; + import { withRef } from '@udecode/cn'; import { useExcalidrawElement } from '@udecode/plate-excalidraw/react'; diff --git a/templates/plate-playground-template/src/components/plate-ui/fixed-toolbar-buttons.tsx b/templates/plate-playground-template/src/components/plate-ui/fixed-toolbar-buttons.tsx index dce2bba12f..3c9e6075c4 100644 --- a/templates/plate-playground-template/src/components/plate-ui/fixed-toolbar-buttons.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/fixed-toolbar-buttons.tsx @@ -1,4 +1,5 @@ import React from 'react'; + import { BoldPlugin, CodePlugin, diff --git a/templates/plate-playground-template/src/components/plate-ui/floating-toolbar-buttons.tsx b/templates/plate-playground-template/src/components/plate-ui/floating-toolbar-buttons.tsx index a5d337de5f..76c83ce326 100644 --- a/templates/plate-playground-template/src/components/plate-ui/floating-toolbar-buttons.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/floating-toolbar-buttons.tsx @@ -1,4 +1,5 @@ import React from 'react'; + import { BoldPlugin, CodePlugin, diff --git a/templates/plate-playground-template/src/components/plate-ui/floating-toolbar.tsx b/templates/plate-playground-template/src/components/plate-ui/floating-toolbar.tsx index 9be94d30e7..9cb684faa8 100644 --- a/templates/plate-playground-template/src/components/plate-ui/floating-toolbar.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/floating-toolbar.tsx @@ -1,6 +1,9 @@ 'use client'; import React from 'react'; + +import type { FloatingToolbarState } from '@udecode/plate-floating'; + import { cn, withRef } from '@udecode/cn'; import { useComposedRef, @@ -17,8 +20,6 @@ import { import { Toolbar } from './toolbar'; -import type { FloatingToolbarState } from '@udecode/plate-floating'; - export const FloatingToolbar = withRef< typeof Toolbar, { diff --git a/templates/plate-playground-template/src/components/plate-ui/ghost-text.tsx b/templates/plate-playground-template/src/components/plate-ui/ghost-text.tsx index 9aa092345b..1aa7242c17 100644 --- a/templates/plate-playground-template/src/components/plate-ui/ghost-text.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/ghost-text.tsx @@ -1,10 +1,11 @@ 'use client'; import React from 'react'; -import { useEditorPlugin, useElement } from '@udecode/plate-common/react'; import type { CopilotPluginConfig } from '@udecode/plate-ai/react'; +import { useEditorPlugin, useElement } from '@udecode/plate-common/react'; + export const GhostText = () => { const { useOption } = useEditorPlugin({ key: 'copilot', diff --git a/templates/plate-playground-template/src/components/plate-ui/heading-element.tsx b/templates/plate-playground-template/src/components/plate-ui/heading-element.tsx index e304ddb9d2..9386d1df2d 100644 --- a/templates/plate-playground-template/src/components/plate-ui/heading-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/heading-element.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; + import { withRef, withVariants } from '@udecode/cn'; import { cva } from 'class-variance-authority'; diff --git a/templates/plate-playground-template/src/components/plate-ui/highlight-leaf.tsx b/templates/plate-playground-template/src/components/plate-ui/highlight-leaf.tsx index 5be0c324e5..09f7f2d70e 100644 --- a/templates/plate-playground-template/src/components/plate-ui/highlight-leaf.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/highlight-leaf.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; + import { cn, withRef } from '@udecode/cn'; import { PlateLeaf } from '@udecode/plate-common/react'; diff --git a/templates/plate-playground-template/src/components/plate-ui/hr-element.tsx b/templates/plate-playground-template/src/components/plate-ui/hr-element.tsx index e451b672bd..c80a7ccb70 100644 --- a/templates/plate-playground-template/src/components/plate-ui/hr-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/hr-element.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; + import { cn, withRef } from '@udecode/cn'; import { useFocused, useSelected } from 'slate-react'; diff --git a/templates/plate-playground-template/src/components/plate-ui/image-element.tsx b/templates/plate-playground-template/src/components/plate-ui/image-element.tsx index 758be1dbed..48129dd57b 100644 --- a/templates/plate-playground-template/src/components/plate-ui/image-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/image-element.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; + import { cn, withRef } from '@udecode/cn'; import { withHOC } from '@udecode/plate-common/react'; import { Image, ImagePlugin, useMediaState } from '@udecode/plate-media/react'; @@ -10,9 +11,9 @@ import { Caption, CaptionTextarea } from './caption'; import { MediaPopover } from './media-popover'; import { PlateElement } from './plate-element'; import { - mediaResizeHandleVariants, Resizable, ResizeHandle, + mediaResizeHandleVariants, } from './resizable'; export const ImageElement = withHOC( diff --git a/templates/plate-playground-template/src/components/plate-ui/indent-list-toolbar-button.tsx b/templates/plate-playground-template/src/components/plate-ui/indent-list-toolbar-button.tsx index 429a5c0149..7e863d6ded 100644 --- a/templates/plate-playground-template/src/components/plate-ui/indent-list-toolbar-button.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/indent-list-toolbar-button.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; + import { withRef } from '@udecode/cn'; import { ListStyleType } from '@udecode/plate-indent-list'; import { diff --git a/templates/plate-playground-template/src/components/plate-ui/indent-todo-marker.tsx b/templates/plate-playground-template/src/components/plate-ui/indent-todo-marker.tsx index e69261d620..9d441367b1 100644 --- a/templates/plate-playground-template/src/components/plate-ui/indent-todo-marker.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/indent-todo-marker.tsx @@ -1,5 +1,7 @@ 'use client'; +import type { PlateRenderElementProps } from '@udecode/plate-common/react'; + import { cn } from '@udecode/cn'; import { useIndentTodoListElement, @@ -8,8 +10,6 @@ import { import { Checkbox } from './checkbox'; -import type { PlateRenderElementProps } from '@udecode/plate-common/react'; - export const TodoMarker = ({ element, }: Omit) => { diff --git a/templates/plate-playground-template/src/components/plate-ui/indent-toolbar-button.tsx b/templates/plate-playground-template/src/components/plate-ui/indent-toolbar-button.tsx index 70cf2ab879..73f7e45037 100644 --- a/templates/plate-playground-template/src/components/plate-ui/indent-toolbar-button.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/indent-toolbar-button.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; + import { withRef } from '@udecode/cn'; import { useIndentButton } from '@udecode/plate-indent/react'; import { Indent } from 'lucide-react'; diff --git a/templates/plate-playground-template/src/components/plate-ui/inline-combobox.tsx b/templates/plate-playground-template/src/components/plate-ui/inline-combobox.tsx index 099b8cad64..b31f06e4bb 100644 --- a/templates/plate-playground-template/src/components/plate-ui/inline-combobox.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/inline-combobox.tsx @@ -10,6 +10,13 @@ import React, { useMemo, useState, } from 'react'; +import type { HTMLAttributes, ReactNode, RefObject } from 'react'; + +import type { ComboboxItemProps } from '@ariakit/react'; +import type { UseComboboxInputResult } from '@udecode/plate-combobox/react'; +import type { TElement } from '@udecode/plate-common'; +import type { PointRef } from 'slate'; + import { Combobox, ComboboxGroup, @@ -41,12 +48,6 @@ import { } from '@udecode/plate-common/react'; import { cva } from 'class-variance-authority'; -import type { HTMLAttributes, ReactNode, RefObject } from 'react'; -import type { ComboboxItemProps } from '@ariakit/react'; -import type { UseComboboxInputResult } from '@udecode/plate-combobox/react'; -import type { TElement } from '@udecode/plate-common'; -import type { PointRef } from 'slate'; - type FilterFn = ( item: { value: string; group?: string; keywords?: string[]; label?: string }, search: string diff --git a/templates/plate-playground-template/src/components/plate-ui/insert-dropdown-menu.tsx b/templates/plate-playground-template/src/components/plate-ui/insert-dropdown-menu.tsx index a7e436e300..5577a6d1c5 100644 --- a/templates/plate-playground-template/src/components/plate-ui/insert-dropdown-menu.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/insert-dropdown-menu.tsx @@ -1,11 +1,15 @@ 'use client'; import React from 'react'; + +import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu'; +import type { PlateEditor } from '@udecode/plate-common/react'; + import { BlockquotePlugin } from '@udecode/plate-block-quote/react'; import { CodeBlockPlugin } from '@udecode/plate-code-block/react'; import { - focusEditor, ParagraphPlugin, + focusEditor, useEditorRef, } from '@udecode/plate-common/react'; import { DatePlugin } from '@udecode/plate-date/react'; @@ -53,9 +57,6 @@ import { } from './dropdown-menu'; import { ToolbarButton } from './toolbar'; -import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu'; -import type { PlateEditor } from '@udecode/plate-common/react'; - type Group = { group: string; items: Item[]; diff --git a/templates/plate-playground-template/src/components/plate-ui/kbd-leaf.tsx b/templates/plate-playground-template/src/components/plate-ui/kbd-leaf.tsx index 5a55d8e9a7..e0187c19cf 100644 --- a/templates/plate-playground-template/src/components/plate-ui/kbd-leaf.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/kbd-leaf.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; + import { cn, withRef } from '@udecode/cn'; import { PlateLeaf } from '@udecode/plate-common/react'; diff --git a/templates/plate-playground-template/src/components/plate-ui/line-height-dropdown-menu.tsx b/templates/plate-playground-template/src/components/plate-ui/line-height-dropdown-menu.tsx index f45c901e4a..0472c08857 100644 --- a/templates/plate-playground-template/src/components/plate-ui/line-height-dropdown-menu.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/line-height-dropdown-menu.tsx @@ -1,6 +1,9 @@ 'use client'; import React from 'react'; + +import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu'; + import { useLineHeightDropdownMenu, useLineHeightDropdownMenuState, @@ -17,8 +20,6 @@ import { } from './dropdown-menu'; import { ToolbarButton } from './toolbar'; -import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu'; - export function LineHeightDropdownMenu({ ...props }: DropdownMenuProps) { const openState = useOpenState(); const state = useLineHeightDropdownMenuState(); diff --git a/templates/plate-playground-template/src/components/plate-ui/link-element.tsx b/templates/plate-playground-template/src/components/plate-ui/link-element.tsx index 0777e62484..9ca6503295 100644 --- a/templates/plate-playground-template/src/components/plate-ui/link-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/link-element.tsx @@ -1,14 +1,15 @@ 'use client'; import React from 'react'; + +import type { TLinkElement } from '@udecode/plate-link'; + import { cn, withRef } from '@udecode/cn'; import { useElement } from '@udecode/plate-common/react'; import { useLink } from '@udecode/plate-link/react'; import { PlateElement } from './plate-element'; -import type { TLinkElement } from '@udecode/plate-link'; - export const LinkElement = withRef( ({ children, className, ...props }, ref) => { const element = useElement(); diff --git a/templates/plate-playground-template/src/components/plate-ui/link-floating-toolbar.tsx b/templates/plate-playground-template/src/components/plate-ui/link-floating-toolbar.tsx index 45b3054096..5ce2d79564 100644 --- a/templates/plate-playground-template/src/components/plate-ui/link-floating-toolbar.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/link-floating-toolbar.tsx @@ -1,6 +1,10 @@ 'use client'; import React from 'react'; + +import type { UseVirtualFloatingOptions } from '@udecode/plate-floating'; +import type { LinkFloatingToolbarState } from '@udecode/plate-link/react'; + import { cn } from '@udecode/cn'; import { useFormInputProps } from '@udecode/plate-common/react'; import { flip, offset } from '@udecode/plate-floating'; @@ -19,9 +23,6 @@ import { inputVariants } from './input'; import { popoverVariants } from './popover'; import { Separator } from './separator'; -import type { UseVirtualFloatingOptions } from '@udecode/plate-floating'; -import type { LinkFloatingToolbarState } from '@udecode/plate-link/react'; - const floatingOptions: UseVirtualFloatingOptions = { middleware: [ offset(12), diff --git a/templates/plate-playground-template/src/components/plate-ui/link-toolbar-button.tsx b/templates/plate-playground-template/src/components/plate-ui/link-toolbar-button.tsx index 6e8065a362..46ef67ff4e 100644 --- a/templates/plate-playground-template/src/components/plate-ui/link-toolbar-button.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/link-toolbar-button.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; + import { withRef } from '@udecode/cn'; import { useLinkToolbarButton, diff --git a/templates/plate-playground-template/src/components/plate-ui/list-element.tsx b/templates/plate-playground-template/src/components/plate-ui/list-element.tsx index dc82fbaf43..c923432c2f 100644 --- a/templates/plate-playground-template/src/components/plate-ui/list-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/list-element.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; + import { withRef, withVariants } from '@udecode/cn'; import { cva } from 'class-variance-authority'; diff --git a/templates/plate-playground-template/src/components/plate-ui/list-toolbar-button.tsx b/templates/plate-playground-template/src/components/plate-ui/list-toolbar-button.tsx index fe636ffca1..8b59823bce 100644 --- a/templates/plate-playground-template/src/components/plate-ui/list-toolbar-button.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/list-toolbar-button.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; + import { withRef } from '@udecode/cn'; import { BulletedListPlugin, diff --git a/templates/plate-playground-template/src/components/plate-ui/mark-toolbar-button.tsx b/templates/plate-playground-template/src/components/plate-ui/mark-toolbar-button.tsx index 204fd7a650..bb19a5e3db 100644 --- a/templates/plate-playground-template/src/components/plate-ui/mark-toolbar-button.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/mark-toolbar-button.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; + import { withRef } from '@udecode/cn'; import { useMarkToolbarButton, diff --git a/templates/plate-playground-template/src/components/plate-ui/media-embed-element.tsx b/templates/plate-playground-template/src/components/plate-ui/media-embed-element.tsx index 277f84a8a5..90243af87b 100644 --- a/templates/plate-playground-template/src/components/plate-ui/media-embed-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/media-embed-element.tsx @@ -1,21 +1,22 @@ 'use client'; import React from 'react'; +import LiteYouTubeEmbed from 'react-lite-youtube-embed'; +import { Tweet } from 'react-tweet'; + import { cn, withRef } from '@udecode/cn'; import { withHOC } from '@udecode/plate-common/react'; import { parseTwitterUrl, parseVideoUrl } from '@udecode/plate-media'; import { MediaEmbedPlugin, useMediaState } from '@udecode/plate-media/react'; import { ResizableProvider, useResizableStore } from '@udecode/plate-resizable'; -import LiteYouTubeEmbed from 'react-lite-youtube-embed'; -import { Tweet } from 'react-tweet'; import { Caption, CaptionTextarea } from './caption'; import { MediaPopover } from './media-popover'; import { PlateElement } from './plate-element'; import { - mediaResizeHandleVariants, Resizable, ResizeHandle, + mediaResizeHandleVariants, } from './resizable'; export const MediaEmbedElement = withHOC( diff --git a/templates/plate-playground-template/src/components/plate-ui/media-popover.tsx b/templates/plate-playground-template/src/components/plate-ui/media-popover.tsx index b8c291aa01..3c623e9de8 100644 --- a/templates/plate-playground-template/src/components/plate-ui/media-popover.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/media-popover.tsx @@ -1,6 +1,9 @@ 'use client'; import React, { useEffect } from 'react'; + +import type { WithRequiredKey } from '@udecode/plate-common'; + import { isSelectionExpanded } from '@udecode/plate-common'; import { useEditorSelector, @@ -8,8 +11,8 @@ import { useRemoveNodeButton, } from '@udecode/plate-common/react'; import { - floatingMediaActions, FloatingMedia as FloatingMediaPrimitive, + floatingMediaActions, useFloatingMediaSelectors, } from '@udecode/plate-media/react'; import { Link, Trash2Icon } from 'lucide-react'; @@ -21,8 +24,6 @@ import { inputVariants } from './input'; import { Popover, PopoverAnchor, PopoverContent } from './popover'; import { Separator } from './separator'; -import type { WithRequiredKey } from '@udecode/plate-common'; - export interface MediaPopoverProps { children: React.ReactNode; plugin: WithRequiredKey; diff --git a/templates/plate-playground-template/src/components/plate-ui/media-toolbar-button.tsx b/templates/plate-playground-template/src/components/plate-ui/media-toolbar-button.tsx index 60408cdaa4..a52d4962c8 100644 --- a/templates/plate-playground-template/src/components/plate-ui/media-toolbar-button.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/media-toolbar-button.tsx @@ -1,14 +1,15 @@ 'use client'; import React from 'react'; + +import type { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react'; + import { withRef } from '@udecode/cn'; import { useMediaToolbarButton } from '@udecode/plate-media/react'; import { ImageIcon } from 'lucide-react'; import { ToolbarButton } from './toolbar'; -import type { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react'; - export const MediaToolbarButton = withRef< typeof ToolbarButton, { diff --git a/templates/plate-playground-template/src/components/plate-ui/mention-element.tsx b/templates/plate-playground-template/src/components/plate-ui/mention-element.tsx index 5ad9122109..8a5f479988 100644 --- a/templates/plate-playground-template/src/components/plate-ui/mention-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/mention-element.tsx @@ -1,8 +1,11 @@ 'use client'; import React from 'react'; + +import type { TMentionElement } from '@udecode/plate-mention'; + import { cn, withRef } from '@udecode/cn'; -import { getHandler, IS_APPLE } from '@udecode/plate-common'; +import { IS_APPLE, getHandler } from '@udecode/plate-common'; import { useElement } from '@udecode/plate-common/react'; import { useFocused, useSelected } from 'slate-react'; @@ -10,8 +13,6 @@ import { useMounted } from '@/hooks/use-mounted'; import { PlateElement } from './plate-element'; -import type { TMentionElement } from '@udecode/plate-mention'; - export const MentionElement = withRef< typeof PlateElement, { diff --git a/templates/plate-playground-template/src/components/plate-ui/mention-input-element.tsx b/templates/plate-playground-template/src/components/plate-ui/mention-input-element.tsx index 7ba42e6834..e9bb671d8a 100644 --- a/templates/plate-playground-template/src/components/plate-ui/mention-input-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/mention-input-element.tsx @@ -1,6 +1,7 @@ 'use client'; import React, { useState } from 'react'; + import { cn, withRef } from '@udecode/cn'; import { getMentionOnSelectItem } from '@udecode/plate-mention'; diff --git a/templates/plate-playground-template/src/components/plate-ui/mode-dropdown-menu.tsx b/templates/plate-playground-template/src/components/plate-ui/mode-dropdown-menu.tsx index d755433f6d..dcac579d20 100644 --- a/templates/plate-playground-template/src/components/plate-ui/mode-dropdown-menu.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/mode-dropdown-menu.tsx @@ -1,6 +1,9 @@ 'use client'; import React from 'react'; + +import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu'; + import { focusEditor, useEditorReadOnly, @@ -19,8 +22,6 @@ import { } from './dropdown-menu'; import { ToolbarButton } from './toolbar'; -import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu'; - export function ModeDropdownMenu(props: DropdownMenuProps) { const editor = useEditorRef(); const setReadOnly = usePlateStore().set.readOnly(); diff --git a/templates/plate-playground-template/src/components/plate-ui/more-dropdown-menu.tsx b/templates/plate-playground-template/src/components/plate-ui/more-dropdown-menu.tsx index 3d353f3243..223d13f28d 100644 --- a/templates/plate-playground-template/src/components/plate-ui/more-dropdown-menu.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/more-dropdown-menu.tsx @@ -1,4 +1,7 @@ import React from 'react'; + +import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu'; + import { SubscriptPlugin, SuperscriptPlugin, @@ -25,8 +28,6 @@ import { } from './dropdown-menu'; import { ToolbarButton } from './toolbar'; -import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu'; - export function MoreDropdownMenu(props: DropdownMenuProps) { const editor = useEditorRef(); const openState = useOpenState(); diff --git a/templates/plate-playground-template/src/components/plate-ui/outdent-toolbar-button.tsx b/templates/plate-playground-template/src/components/plate-ui/outdent-toolbar-button.tsx index 09b0a938f3..535b3a4b7c 100644 --- a/templates/plate-playground-template/src/components/plate-ui/outdent-toolbar-button.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/outdent-toolbar-button.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; + import { withRef } from '@udecode/cn'; import { useOutdentButton } from '@udecode/plate-indent/react'; import { Outdent } from 'lucide-react'; diff --git a/templates/plate-playground-template/src/components/plate-ui/paragraph-element.tsx b/templates/plate-playground-template/src/components/plate-ui/paragraph-element.tsx index 095c2746d5..a9388efb0c 100644 --- a/templates/plate-playground-template/src/components/plate-ui/paragraph-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/paragraph-element.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; + import { cn } from '@udecode/cn'; import { withRef } from '@udecode/plate-common/react'; diff --git a/templates/plate-playground-template/src/components/plate-ui/placeholder.tsx b/templates/plate-playground-template/src/components/plate-ui/placeholder.tsx index d2879204b9..53e4b786d4 100644 --- a/templates/plate-playground-template/src/components/plate-ui/placeholder.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/placeholder.tsx @@ -1,17 +1,18 @@ 'use client'; import React from 'react'; + +import type { PlaceholderProps } from '@udecode/plate-common/react'; + import { cn } from '@udecode/cn'; import { + ParagraphPlugin, createNodeHOC, createNodesHOC, - ParagraphPlugin, usePlaceholderState, } from '@udecode/plate-common/react'; import { HEADING_KEYS } from '@udecode/plate-heading'; -import type { PlaceholderProps } from '@udecode/plate-common/react'; - export const Placeholder = (props: PlaceholderProps) => { const { children, nodeProps, placeholder } = props; diff --git a/templates/plate-playground-template/src/components/plate-ui/plate-element.tsx b/templates/plate-playground-template/src/components/plate-ui/plate-element.tsx index f7217bc325..9dcfed42bf 100644 --- a/templates/plate-playground-template/src/components/plate-ui/plate-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/plate-element.tsx @@ -1,14 +1,15 @@ 'use client'; import React from 'react'; + +import type { PlateElementProps } from '@udecode/plate-common/react'; + import { cn } from '@udecode/cn'; import { PlateElement as PlateElementPrimitive } from '@udecode/plate-common/react'; import { useBlockSelectableStore } from '@udecode/plate-selection/react'; import { BlockSelection } from './block-selection'; -import type { PlateElementProps } from '@udecode/plate-common/react'; - export const PlateElement = React.forwardRef( ({ children, className, ...props }: PlateElementProps, ref) => { const selectable = useBlockSelectableStore().get.selectable(); diff --git a/templates/plate-playground-template/src/components/plate-ui/popover.tsx b/templates/plate-playground-template/src/components/plate-ui/popover.tsx index e4e316f89a..b19a6f9da5 100644 --- a/templates/plate-playground-template/src/components/plate-ui/popover.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/popover.tsx @@ -1,6 +1,7 @@ 'use client'; import * as React from 'react'; + import * as PopoverPrimitive from '@radix-ui/react-popover'; import { cn, withRef } from '@udecode/cn'; import { cva } from 'class-variance-authority'; @@ -16,7 +17,7 @@ export const popoverVariants = cva( ); export const PopoverContent = withRef( - ({ align = 'center', className, sideOffset = 4, style, ...props }, ref) => ( + ({ align = 'center', className, sideOffset = 4, ...props }, ref) => ( someNode(editor, { match: { type: TablePlugin.key } }), diff --git a/templates/plate-playground-template/src/components/plate-ui/table-element.tsx b/templates/plate-playground-template/src/components/plate-ui/table-element.tsx index fdd0a855bc..ecbe0d09b4 100644 --- a/templates/plate-playground-template/src/components/plate-ui/table-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/table-element.tsx @@ -1,6 +1,11 @@ 'use client'; import React from 'react'; + +import type * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'; +import type { TTableElement } from '@udecode/plate-table'; +import type { LucideProps } from 'lucide-react'; + import { PopoverAnchor } from '@radix-ui/react-popover'; import { cn, withRef } from '@udecode/cn'; import { isSelectionExpanded } from '@udecode/plate-common'; @@ -12,8 +17,8 @@ import { withHOC, } from '@udecode/plate-common/react'; import { - mergeTableCells, TableProvider, + mergeTableCells, unmergeTableCells, useTableBordersDropdownMenuContentState, useTableElement, @@ -35,10 +40,6 @@ import { import { PlateElement } from './plate-element'; import { Popover, PopoverContent, popoverVariants } from './popover'; -import type * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'; -import type { TTableElement } from '@udecode/plate-table'; -import type { LucideProps } from 'lucide-react'; - export const TableBordersDropdownMenuContent = withRef< typeof DropdownMenuPrimitive.Content >((props, ref) => { diff --git a/templates/plate-playground-template/src/components/plate-ui/table-row-element.tsx b/templates/plate-playground-template/src/components/plate-ui/table-row-element.tsx index d63edb03d8..634a569863 100644 --- a/templates/plate-playground-template/src/components/plate-ui/table-row-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/table-row-element.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; + import { cn, withRef } from '@udecode/cn'; import { PlateElement } from './plate-element'; diff --git a/templates/plate-playground-template/src/components/plate-ui/todo-list-element.tsx b/templates/plate-playground-template/src/components/plate-ui/todo-list-element.tsx index 50bddcbef9..e198f27db0 100644 --- a/templates/plate-playground-template/src/components/plate-ui/todo-list-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/todo-list-element.tsx @@ -1,4 +1,5 @@ import React from 'react'; + import { cn, withRef } from '@udecode/cn'; import { useTodoListElement, diff --git a/templates/plate-playground-template/src/components/plate-ui/toggle-toolbar-button.tsx b/templates/plate-playground-template/src/components/plate-ui/toggle-toolbar-button.tsx index 7e4847b7b0..985a05f637 100644 --- a/templates/plate-playground-template/src/components/plate-ui/toggle-toolbar-button.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/toggle-toolbar-button.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; + import { withRef } from '@udecode/cn'; import { useToggleToolbarButton, diff --git a/templates/plate-playground-template/src/components/plate-ui/toolbar.tsx b/templates/plate-playground-template/src/components/plate-ui/toolbar.tsx index 02c52cb7d2..1c41c527fe 100644 --- a/templates/plate-playground-template/src/components/plate-ui/toolbar.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/toolbar.tsx @@ -1,6 +1,9 @@ 'use client'; import * as React from 'react'; + +import type { VariantProps } from 'class-variance-authority'; + import * as ToolbarPrimitive from '@radix-ui/react-toolbar'; import { cn, withCn, withRef, withVariants } from '@udecode/cn'; import { cva } from 'class-variance-authority'; @@ -9,8 +12,6 @@ import { ChevronDown } from 'lucide-react'; import { Separator } from './separator'; import { withTooltip } from './tooltip'; -import type { VariantProps } from 'class-variance-authority'; - export const Toolbar = withCn( ToolbarPrimitive.Root, 'relative flex select-none items-center' diff --git a/templates/plate-playground-template/src/components/plate-ui/tooltip.tsx b/templates/plate-playground-template/src/components/plate-ui/tooltip.tsx index 971c9a223a..ca6e82ab74 100644 --- a/templates/plate-playground-template/src/components/plate-ui/tooltip.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/tooltip.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; + import * as TooltipPrimitive from '@radix-ui/react-tooltip'; import { withCn, withProps } from '@udecode/cn'; diff --git a/templates/plate-playground-template/src/components/plate-ui/turn-into-dropdown-menu.tsx b/templates/plate-playground-template/src/components/plate-ui/turn-into-dropdown-menu.tsx index 84175b9c4c..85924c8a15 100644 --- a/templates/plate-playground-template/src/components/plate-ui/turn-into-dropdown-menu.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/turn-into-dropdown-menu.tsx @@ -1,11 +1,14 @@ 'use client'; import React from 'react'; + +import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu'; + import { BlockquotePlugin } from '@udecode/plate-block-quote/react'; import { CodeBlockPlugin } from '@udecode/plate-code-block/react'; import { - focusEditor, ParagraphPlugin, + focusEditor, useEditorRef, useSelectionFragmentProp, } from '@udecode/plate-common/react'; @@ -38,8 +41,6 @@ import { } from './dropdown-menu'; import { ToolbarButton } from './toolbar'; -import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu'; - const turnIntoItems = [ { icon: , diff --git a/templates/plate-playground-template/src/components/plate-ui/with-draggables.tsx b/templates/plate-playground-template/src/components/plate-ui/with-draggables.tsx index dd95e5e8fe..823c9b59b4 100644 --- a/templates/plate-playground-template/src/components/plate-ui/with-draggables.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/with-draggables.tsx @@ -1,8 +1,12 @@ +import type { FC } from 'react'; + +import type { WithDraggableOptions } from '@udecode/plate-dnd'; + import { BlockquotePlugin } from '@udecode/plate-block-quote/react'; import { CodeBlockPlugin } from '@udecode/plate-code-block/react'; import { - createNodesWithHOC, ParagraphPlugin, + createNodesWithHOC, } from '@udecode/plate-common/react'; import { withDraggable as withDraggablePrimitive } from '@udecode/plate-dnd'; import { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react'; @@ -20,11 +24,9 @@ import { import { TablePlugin } from '@udecode/plate-table/react'; import { TogglePlugin } from '@udecode/plate-toggle/react'; -import { Draggable } from './draggable'; - import type { DraggableProps } from './draggable'; -import type { FC } from 'react'; -import type { WithDraggableOptions } from '@udecode/plate-dnd'; + +import { Draggable } from './draggable'; export const withDraggable = ( Component: FC, diff --git a/templates/plate-playground-template/src/components/plugins/ai-plugins.tsx b/templates/plate-playground-template/src/components/plugins/ai-plugins.tsx index 197c17ab7e..111de3061e 100644 --- a/templates/plate-playground-template/src/components/plugins/ai-plugins.tsx +++ b/templates/plate-playground-template/src/components/plugins/ai-plugins.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; + import { withProps } from '@udecode/cn'; import { AIChatPlugin, AIPlugin } from '@udecode/plate-ai/react'; import { @@ -17,9 +18,9 @@ import { CodeSyntaxPlugin, } from '@udecode/plate-code-block/react'; import { - createPlateEditor, ParagraphPlugin, PlateLeaf, + createPlateEditor, } from '@udecode/plate-common/react'; import { FontBackgroundColorPlugin, @@ -28,8 +29,8 @@ import { import { HEADING_KEYS } from '@udecode/plate-heading'; import { HeadingPlugin } from '@udecode/plate-heading/react'; import { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react'; -import { IndentListPlugin } from '@udecode/plate-indent-list/react'; import { IndentPlugin } from '@udecode/plate-indent/react'; +import { IndentListPlugin } from '@udecode/plate-indent-list/react'; import { LinkPlugin } from '@udecode/plate-link/react'; import { MarkdownPlugin } from '@udecode/plate-markdown'; import { BlockSelectionPlugin } from '@udecode/plate-selection/react'; diff --git a/templates/plate-playground-template/src/components/plugins/copilot-plugins.tsx b/templates/plate-playground-template/src/components/plugins/copilot-plugins.tsx index 840b538307..0035e79e47 100644 --- a/templates/plate-playground-template/src/components/plugins/copilot-plugins.tsx +++ b/templates/plate-playground-template/src/components/plugins/copilot-plugins.tsx @@ -1,11 +1,11 @@ +import type { TElement } from '@udecode/plate-common'; + import { CopilotPlugin } from '@udecode/plate-ai/react'; import { getAncestorNode } from '@udecode/plate-common'; import { serializeMdNodes, stripMarkdown } from '@udecode/plate-markdown'; import { GhostText } from '../plate-ui/ghost-text'; -import type { TElement } from '@udecode/plate-common'; - export const copilotPlugins = [ CopilotPlugin.configure(({ api }) => ({ options: { @@ -24,14 +24,6 @@ export const copilotPlugins = [ - CRITICAL: Avoid starting a new block. Do not use block formatting like >, #, 1., 2., -, etc. The suggestion should continue in the same block as the context. - If no context is provided or you can't generate a continuation, return "0" without explanation.`, }, - onFinish: (_, completion) => { - if (completion === '0') return; - - api.copilot.setBlockSuggestion({ - //stripMarkdownBlocks in plus GhostText - text: stripMarkdown(completion), - }); - }, onError: (error) => { let text = ''; @@ -45,6 +37,14 @@ export const copilotPlugins = [ text: stripMarkdown(text), }); }, + onFinish: (_, completion) => { + if (completion === '0') return; + + api.copilot.setBlockSuggestion({ + //stripMarkdownBlocks in plus GhostText + text: stripMarkdown(completion), + }); + }, }, debounceDelay: 500, getPrompt: ({ editor }) => { diff --git a/templates/plate-playground-template/src/components/site/main-nav.tsx b/templates/plate-playground-template/src/components/site/main-nav.tsx index da6c4cc559..59bba67902 100644 --- a/templates/plate-playground-template/src/components/site/main-nav.tsx +++ b/templates/plate-playground-template/src/components/site/main-nav.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; -import Link from 'next/link'; + import { cn } from '@udecode/cn'; +import Link from 'next/link'; -import { NavItem } from '@/types/nav'; import { siteConfig } from '@/config/site'; +import { NavItem } from '@/types/nav'; interface MainNavProps { items?: NavItem[]; @@ -12,7 +13,7 @@ interface MainNavProps { export function MainNav({ items }: MainNavProps) { return (
- + {siteConfig.name} {items?.length ? ( @@ -22,11 +23,11 @@ export function MainNav({ items }: MainNavProps) { item.href && ( {item.title} diff --git a/templates/plate-playground-template/src/components/site/site-header.tsx b/templates/plate-playground-template/src/components/site/site-header.tsx index 2f38322626..c3d4e52587 100644 --- a/templates/plate-playground-template/src/components/site/site-header.tsx +++ b/templates/plate-playground-template/src/components/site/site-header.tsx @@ -1,11 +1,11 @@ +import type { LucideProps } from 'lucide-react'; + import Link from 'next/link'; -import { siteConfig } from '@/config/site'; import { buttonVariants } from '@/components/plate-ui/button'; import { MainNav } from '@/components/site/main-nav'; import { ThemeToggle } from '@/components/site/theme-toggle'; - -import type { LucideProps } from 'lucide-react'; +import { siteConfig } from '@/config/site'; export function SiteHeader() { return ( @@ -16,8 +16,8 @@ export function SiteHeader() {