From 1f38877bf968d3af6cda40f5b843be12aacfc6e0 Mon Sep 17 00:00:00 2001 From: zbeyens Date: Wed, 13 Nov 2024 19:14:26 +0100 Subject: [PATCH 01/10] feat --- packages/core/src/react/components/Plate.tsx | 9 ++++++++- packages/core/src/react/stores/plate/PlateStore.ts | 7 +++++++ .../stores/plate/selectors/useEditorContainerRef.ts | 11 +++++++++++ packages/heading/src/react/hooks/useTocElement.ts | 4 ++-- packages/heading/src/react/hooks/useTocSideBar.ts | 4 ++-- 5 files changed, 30 insertions(+), 5 deletions(-) diff --git a/packages/core/src/react/components/Plate.tsx b/packages/core/src/react/components/Plate.tsx index 92382fbc39..8ef273189d 100644 --- a/packages/core/src/react/components/Plate.tsx +++ b/packages/core/src/react/components/Plate.tsx @@ -39,10 +39,14 @@ function PlateInner({ readOnly, renderElement, renderLeaf, + scrollRef, onChange, onSelectionChange, onValueChange, -}: PlateProps & { containerRef: React.RefObject }) { +}: PlateProps & { + containerRef: React.RefObject; + scrollRef: React.RefObject; +}) { return ( {children} @@ -68,6 +73,7 @@ export function Plate( const id = useId(); const containerRef = React.useRef(null); + const scrollRef = React.useRef(null); usePlateInstancesWarn(props.suppressInstanceWarning); @@ -79,6 +85,7 @@ export function Plate( ); diff --git a/packages/core/src/react/stores/plate/PlateStore.ts b/packages/core/src/react/stores/plate/PlateStore.ts index da0c5a3c7e..6ee445dadc 100644 --- a/packages/core/src/react/stores/plate/PlateStore.ts +++ b/packages/core/src/react/stores/plate/PlateStore.ts @@ -69,6 +69,13 @@ export type PlateStoreState = Nullable<{ * @default createPlateFallbackEditor() */ editor: E; + + /** + * A reference to the editor scroll container element. + * + * @default containerRef + */ + scrollRef: React.RefObject; }; // A list of store keys to be exposed in `editor.api.plate.set`. diff --git a/packages/core/src/react/stores/plate/selectors/useEditorContainerRef.ts b/packages/core/src/react/stores/plate/selectors/useEditorContainerRef.ts index 870052020d..7e1a92d77e 100644 --- a/packages/core/src/react/stores/plate/selectors/useEditorContainerRef.ts +++ b/packages/core/src/react/stores/plate/selectors/useEditorContainerRef.ts @@ -5,3 +5,14 @@ export const useEditorContainerRef = (id?: string) => { debugHookName: 'useEditorContainerRef', }).containerRef(); }; + +/** Returns the scrollRef if it exists, otherwise returns the containerRef. */ +export const useEditorScrollRef = (id?: string) => { + const scrollRef = usePlateSelectors(id, { + debugHookName: 'useEditorScrollRef', + }).scrollRef(); + + const containerRef = useEditorContainerRef(id); + + return scrollRef.current ? scrollRef : containerRef; +}; diff --git a/packages/heading/src/react/hooks/useTocElement.ts b/packages/heading/src/react/hooks/useTocElement.ts index 4ef0e3bed2..9a7c6436a7 100644 --- a/packages/heading/src/react/hooks/useTocElement.ts +++ b/packages/heading/src/react/hooks/useTocElement.ts @@ -3,8 +3,8 @@ import React from 'react'; import { getNode } from '@udecode/plate-common'; import { toDOMNode, - useEditorContainerRef, useEditorPlugin, + useEditorScrollRef, useEditorSelector, } from '@udecode/plate-common/react'; @@ -20,7 +20,7 @@ export const useTocElementState = () => { const headingList = useEditorSelector(getHeadingList, []); - const containerRef = useEditorContainerRef(); + const containerRef = useEditorScrollRef(); const onContentScroll = React.useCallback( (el: HTMLElement, id: string, behavior: ScrollBehavior = 'instant') => { diff --git a/packages/heading/src/react/hooks/useTocSideBar.ts b/packages/heading/src/react/hooks/useTocSideBar.ts index df275ca483..f2712bf87c 100644 --- a/packages/heading/src/react/hooks/useTocSideBar.ts +++ b/packages/heading/src/react/hooks/useTocSideBar.ts @@ -3,8 +3,8 @@ import React from 'react'; import { getNode } from '@udecode/plate-common'; import { toDOMNode, - useEditorContainerRef, useEditorPlugin, + useEditorScrollRef, useEditorSelector, } from '@udecode/plate-common/react'; @@ -23,7 +23,7 @@ export const useTocSideBarState = ({ }: TocSideBarProps) => { const { editor } = useEditorPlugin(TocPlugin); const headingList = useEditorSelector(getHeadingList, []); - const containerRef = useEditorContainerRef(); + const containerRef = useEditorScrollRef(); const tocRef = React.useRef(null); From c475a36649b377d98727f99f028bd9fcbcdaed7f Mon Sep 17 00:00:00 2001 From: zbeyens Date: Wed, 13 Nov 2024 19:16:00 +0100 Subject: [PATCH 02/10] docs --- apps/www/content/docs/api/core.mdx | 26 ++++++++++++++++ apps/www/content/docs/block-selection.mdx | 2 +- .../www/content/docs/components/changelog.mdx | 4 +++ .../components/editor/use-create-editor.tsx | 1 - .../components/editor/plugins/ai-plugins.tsx | 18 +++-------- .../editor/plugins/block-selection-plugins.ts | 9 ++++++ .../editor/plugins/cursor-overlay-plugin.tsx | 9 ++++++ .../registry/default/plate-ui/resizable.tsx | 31 +++++++++++++------ apps/www/src/registry/registry-components.ts | 10 +++++- 9 files changed, 84 insertions(+), 26 deletions(-) create mode 100644 apps/www/src/registry/default/components/editor/plugins/cursor-overlay-plugin.tsx diff --git a/apps/www/content/docs/api/core.mdx b/apps/www/content/docs/api/core.mdx index f033d49df0..c8f572e8a6 100644 --- a/apps/www/content/docs/api/core.mdx +++ b/apps/www/content/docs/api/core.mdx @@ -160,6 +160,32 @@ a A new `PlatePlugin` with precise type control. +### useEditorContainerRef + +Get the editor container DOM reference. + + + + The ID of the plate editor. Default is using the closest editor id. + + + + A React ref object containing the editor container DOM element. + + +### useEditorScrollRef + +Get the editor scroll container reference. Returns the scroll ref if it exists, otherwise returns the container ref. + + + + The ID of the plate editor. Default is using the closest editor id. + + + + A React ref object containing either the scroll container or the editor container DOM element. + + ### useEditorPlugin Get editor and plugin context. diff --git a/apps/www/content/docs/block-selection.mdx b/apps/www/content/docs/block-selection.mdx index 478b2e6570..b862570054 100644 --- a/apps/www/content/docs/block-selection.mdx +++ b/apps/www/content/docs/block-selection.mdx @@ -92,7 +92,7 @@ BlockSelectionPlugin.configure({ useing `options.areaOptions.behaviour.scrolling.speedDivider` to set the scroll speed. -The value of `1.5` is our recommended speed.Since it's same with the default speed of the browser. +The value of `1.5` is our recommended speed since it's near the browser-native speed. ```ts diff --git a/apps/www/content/docs/components/changelog.mdx b/apps/www/content/docs/components/changelog.mdx index 3059826548..99d0aa7aa2 100644 --- a/apps/www/content/docs/components/changelog.mdx +++ b/apps/www/content/docs/components/changelog.mdx @@ -11,6 +11,10 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver ## November 2024 #16 +### November 13 #16.6 + +- `resizable`: hide `ResizeHandle` when read-only + ### November 8 #16.5 - Add this to your tailwind config: diff --git a/apps/www/src/registry/default/block/editor-basic/components/editor/use-create-editor.tsx b/apps/www/src/registry/default/block/editor-basic/components/editor/use-create-editor.tsx index ef89c6c2dd..b84b16c066 100644 --- a/apps/www/src/registry/default/block/editor-basic/components/editor/use-create-editor.tsx +++ b/apps/www/src/registry/default/block/editor-basic/components/editor/use-create-editor.tsx @@ -19,7 +19,6 @@ import { export const useCreateEditor = () => { return usePlateEditor({ override: { - // Default styles in globals.css components: { [BoldPlugin.key]: withProps(PlateLeaf, { as: 'strong' }), [ItalicPlugin.key]: withProps(PlateLeaf, { as: 'em' }), diff --git a/apps/www/src/registry/default/components/editor/plugins/ai-plugins.tsx b/apps/www/src/registry/default/components/editor/plugins/ai-plugins.tsx index 09762f7dfa..cde23f15a1 100644 --- a/apps/www/src/registry/default/components/editor/plugins/ai-plugins.tsx +++ b/apps/www/src/registry/default/components/editor/plugins/ai-plugins.tsx @@ -26,8 +26,8 @@ import { HEADING_KEYS } from '@udecode/plate-heading'; import { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react'; import { LinkPlugin } from '@udecode/plate-link/react'; import { MarkdownPlugin } from '@udecode/plate-markdown'; -import { BlockSelectionPlugin } from '@udecode/plate-selection/react'; +import { cursorOverlayPlugin } from '@/registry/default/components/editor/plugins/cursor-overlay-plugin'; import { AIMenu } from '@/registry/default/plate-ui/ai-menu'; import { BlockquoteElement } from '@/registry/default/plate-ui/blockquote-element'; import { CodeBlockElement } from '@/registry/default/plate-ui/code-block-element'; @@ -40,6 +40,7 @@ import { LinkElement } from '@/registry/default/plate-ui/link-element'; import { ParagraphElement } from '@/registry/default/plate-ui/paragraph-element'; import { basicNodesPlugins } from './basic-nodes-plugins'; +import { blockSelectionReadOnlyPlugin } from './block-selection-plugins'; import { indentListPlugins } from './indent-list-plugins'; import { linkPlugin } from './link-plugin'; @@ -66,23 +67,13 @@ const createAIEditor = () => { }, }, plugins: [ - ParagraphPlugin, ...basicNodesPlugins, + ...indentListPlugins, HorizontalRulePlugin, linkPlugin, - ...indentListPlugins, MarkdownPlugin.configure({ options: { indentList: true } }), - // FIXME - BlockSelectionPlugin.configure({ - api: {}, - extendEditor: null, - options: {}, - render: {}, - useHooks: null, - handlers: {}, - }), + blockSelectionReadOnlyPlugin, ], - value: [{ children: [{ text: '' }], type: 'p' }], }); return editor; @@ -170,6 +161,7 @@ export const PROMPT_TEMPLATES = { }; export const aiPlugins = [ + cursorOverlayPlugin, MarkdownPlugin.configure({ options: { indentList: true } }), AIPlugin, AIChatPlugin.configure({ diff --git a/apps/www/src/registry/default/components/editor/plugins/block-selection-plugins.ts b/apps/www/src/registry/default/components/editor/plugins/block-selection-plugins.ts index ab35e38f68..eb855ab3c7 100644 --- a/apps/www/src/registry/default/components/editor/plugins/block-selection-plugins.ts +++ b/apps/www/src/registry/default/components/editor/plugins/block-selection-plugins.ts @@ -21,3 +21,12 @@ export const blockSelectionPlugins = [ }, }), ] as const; + +export const blockSelectionReadOnlyPlugin = BlockSelectionPlugin.configure({ + api: {}, + extendEditor: null, + options: {}, + render: {}, + useHooks: null, + handlers: {}, +}); diff --git a/apps/www/src/registry/default/components/editor/plugins/cursor-overlay-plugin.tsx b/apps/www/src/registry/default/components/editor/plugins/cursor-overlay-plugin.tsx new file mode 100644 index 0000000000..3324194293 --- /dev/null +++ b/apps/www/src/registry/default/components/editor/plugins/cursor-overlay-plugin.tsx @@ -0,0 +1,9 @@ +import { CursorOverlayPlugin } from '@udecode/plate-selection/react'; + +import { CursorOverlay } from '@/registry/default/plate-ui/cursor-overlay'; + +export const cursorOverlayPlugin = CursorOverlayPlugin.configure({ + render: { + afterEditable: () => , + }, +}); diff --git a/apps/www/src/registry/default/plate-ui/resizable.tsx b/apps/www/src/registry/default/plate-ui/resizable.tsx index f78842a2a8..71b0dba4d7 100644 --- a/apps/www/src/registry/default/plate-ui/resizable.tsx +++ b/apps/www/src/registry/default/plate-ui/resizable.tsx @@ -2,10 +2,12 @@ import React from 'react'; -import { cn, withRef, withVariants } from '@udecode/cn'; +import { cn, createPrimitiveElement, withRef, withVariants } from '@udecode/cn'; import { + type ResizeHandle as ResizeHandlePrimitive, Resizable as ResizablePrimitive, - ResizeHandle as ResizeHandlePrimitive, + useResizeHandle, + useResizeHandleState, } from '@udecode/plate-resizable'; import { cva } from 'class-variance-authority'; @@ -36,19 +38,28 @@ const resizeHandleVariants = cva(cn('absolute z-40'), { }); const ResizeHandleVariants = withVariants( - ResizeHandlePrimitive, + createPrimitiveElement('div'), resizeHandleVariants, ['direction'] ); export const ResizeHandle = withRef( - (props, ref) => ( - - ) + ({ options, ...props }, ref) => { + const state = useResizeHandleState(options ?? {}); + const resizeHandle = useResizeHandle(state); + + if (state.readOnly) return null; + + return ( + + ); + } ); const resizableVariants = cva('', { diff --git a/apps/www/src/registry/registry-components.ts b/apps/www/src/registry/registry-components.ts index c40f71038a..90f0baeea4 100644 --- a/apps/www/src/registry/registry-components.ts +++ b/apps/www/src/registry/registry-components.ts @@ -53,12 +53,13 @@ const plugins: Registry = [ '@udecode/plate-horizontal-rule', '@udecode/plate-link', '@udecode/plate-markdown', - '@udecode/plate-selection', ], files: ['components/editor/plugins/ai-plugins.tsx'], name: 'ai-plugins', registryDependencies: [ 'basic-nodes-plugins', + 'block-selection-plugins', + 'cursor-overlay-plugin', 'indent-list-plugins', 'link-plugin', 'ai-menu', @@ -149,6 +150,13 @@ const plugins: Registry = [ registryDependencies: ['comments-popover'], type: 'registry:component', }, + { + dependencies: ['@udecode/plate-selection'], + files: ['components/editor/plugins/cursor-overlay-plugin.tsx'], + name: 'cursor-overlay-plugin', + registryDependencies: ['cursor-overlay'], + type: 'registry:component', + }, { dependencies: [ '@udecode/plate-ai', From d3a2ee25173cd40c43bef3294540df682e8bd072 Mon Sep 17 00:00:00 2001 From: zbeyens Date: Wed, 13 Nov 2024 19:27:54 +0100 Subject: [PATCH 03/10] docs --- .changeset/dirty-mangos-cover.md | 5 +++++ .changeset/sour-files-drum.md | 6 ++++++ 2 files changed, 11 insertions(+) create mode 100644 .changeset/dirty-mangos-cover.md create mode 100644 .changeset/sour-files-drum.md diff --git a/.changeset/dirty-mangos-cover.md b/.changeset/dirty-mangos-cover.md new file mode 100644 index 0000000000..dd9ec576f2 --- /dev/null +++ b/.changeset/dirty-mangos-cover.md @@ -0,0 +1,5 @@ +--- +'@udecode/plate-heading': patch +--- + +- Use `useEditorScrollRef` instead of `useEditorContainerRef` diff --git a/.changeset/sour-files-drum.md b/.changeset/sour-files-drum.md new file mode 100644 index 0000000000..af3dbcb0cd --- /dev/null +++ b/.changeset/sour-files-drum.md @@ -0,0 +1,6 @@ +--- +'@udecode/plate-core': patch +--- + +- Add `scrollRef` in Plate store +- Add `useEditorScrollRef` to get the scroll container ref, that can be used in plugins to control the scroll position From 6aebe38843fcec4d1a7523ab52c93dcc4cc84545 Mon Sep 17 00:00:00 2001 From: zbeyens Date: Wed, 13 Nov 2024 19:28:03 +0100 Subject: [PATCH 04/10] vendor --- .../src/components/editor/plate-editor.tsx | 2 +- templates/plate-template/src/app/globals.css | 61 ++-- .../editor/plugins/editor-plugins.tsx | 98 +++++ .../components/editor/use-create-editor.tsx | 199 ++++++---- templates/plate-template/tailwind.config.ts | 139 ++++++- yarn.lock | 342 +++++++++--------- 6 files changed, 580 insertions(+), 261 deletions(-) create mode 100644 templates/plate-template/src/components/editor/plugins/editor-plugins.tsx diff --git a/templates/plate-playground-template/src/components/editor/plate-editor.tsx b/templates/plate-playground-template/src/components/editor/plate-editor.tsx index d0cd3d129a..85c96457ba 100644 --- a/templates/plate-playground-template/src/components/editor/plate-editor.tsx +++ b/templates/plate-playground-template/src/components/editor/plate-editor.tsx @@ -6,8 +6,8 @@ import { HTML5Backend } from 'react-dnd-html5-backend'; import { Plate } from '@udecode/plate-common/react'; -import { useCreateEditor } from '@/components/editor/use-create-editor'; import { SettingsDialog } from '@/components/editor/use-chat'; +import { useCreateEditor } from '@/components/editor/use-create-editor'; import { Editor, EditorContainer } from '@/components/plate-ui/editor'; export function PlateEditor() { diff --git a/templates/plate-template/src/app/globals.css b/templates/plate-template/src/app/globals.css index 09c15d81a3..db79ae062f 100644 --- a/templates/plate-template/src/app/globals.css +++ b/templates/plate-template/src/app/globals.css @@ -68,32 +68,37 @@ body { } [data-registry="plate"] { --background: 0 0% 100%; - --foreground: 222.2 84% 4.9%; + --foreground: 240 10% 3.9%; --card: 0 0% 100%; - --card-foreground: 222.2 84% 4.9%; + --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; - --popover-foreground: 222.2 84% 4.9%; - --primary: 222.2 47.4% 11.2%; - --primary-foreground: 210 40% 98%; - --secondary: 210 40% 96.1%; - --secondary-foreground: 222.2 47.4% 11.2%; - --muted: 210 40% 96.1%; - --muted-foreground: 215.4 16.3% 46.9%; - --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 210 40% 98%; - --border: 214.3 31.8% 91.4%; - --input: 214.3 31.8% 91.4%; - --ring: 222.2 84% 4.9%; - --chart-1: 12 76% 61%; - --chart-2: 173 58% 39%; - --chart-3: 197 37% 24%; - --chart-4: 43 74% 66%; - --chart-5: 27 87% 67%; + --popover-foreground: 240 10% 3.9%; + --primary: 240 5.9% 10%; + --primary-foreground: 0 0% 98%; + --secondary: 240 4.8% 95.9%; + --secondary-foreground: 240 5.9% 10%; + --muted: 240 4.8% 95.9%; + --muted-foreground: 240 3.8% 46.1%; + --accent: 240 4.8% 95.9%; + --accent-foreground: 240 5.9% 10%; + --destructive: 0 72.22% 50.59%; + --destructive-foreground: 0 0% 98%; + --border: 240 5.9% 90%; + --input: 240 5.9% 90%; + --ring: 240 5% 64.9%; --radius: 0.5rem; - --brand: 217.2 91.2% 59.8%; - --highlight: 47.9 95.8% 53.1%; + + --brand: 211 77% 51%; + --brand-foreground: 0 0% 100%; + --brand-hover: 211 77% 46%; + --brand-active: 211 77% 41%; + --highlight: 48 100% 50%; + --highlight-foreground: 10 105 218; + --subtle-foreground: 240 5% 34%; + + :focus-visible { + @apply outline-none; + } } [data-registry="plate"].dark { --background: 222.2 84% 4.9%; @@ -133,3 +138,13 @@ body { @apply bg-background text-foreground; } } + +@layer utilities { + .focus-ring:focus-visible { + @apply ring-2 ring-ring ring-offset-2; + } + + .no-focus-ring:focus-visible { + @apply !ring-0 !ring-offset-0; + } +} \ No newline at end of file diff --git a/templates/plate-template/src/components/editor/plugins/editor-plugins.tsx b/templates/plate-template/src/components/editor/plugins/editor-plugins.tsx new file mode 100644 index 0000000000..1934f54437 --- /dev/null +++ b/templates/plate-template/src/components/editor/plugins/editor-plugins.tsx @@ -0,0 +1,98 @@ +'use client'; + +import { CalloutPlugin } from '@udecode/plate-callout/react'; +import { ParagraphPlugin } from '@udecode/plate-common/react'; +import { DatePlugin } from '@udecode/plate-date/react'; +import { DocxPlugin } from '@udecode/plate-docx'; +import { EmojiPlugin } from '@udecode/plate-emoji/react'; +import { + FontBackgroundColorPlugin, + FontColorPlugin, +} from '@udecode/plate-font/react'; +import { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react'; +import { JuicePlugin } from '@udecode/plate-juice'; +import { ColumnPlugin } from '@udecode/plate-layout/react'; +import { MarkdownPlugin } from '@udecode/plate-markdown'; +import { + EquationPlugin, + InlineEquationPlugin, +} from '@udecode/plate-math/react'; +import { CursorOverlayPlugin } from '@udecode/plate-selection/react'; +import { SlashPlugin } from '@udecode/plate-slash-command/react'; +import { TogglePlugin } from '@udecode/plate-toggle/react'; +import { TrailingBlockPlugin } from '@udecode/plate-trailing-block'; + +import { basicNodesPlugins } from '@/components/editor/plugins/basic-nodes-plugins'; +import { deletePlugins } from '@/components/editor/plugins/delete-plugins'; +import { exitBreakPlugin } from '@/components/editor/plugins/exit-break-plugin'; +import { indentListPlugins } from '@/components/editor/plugins/indent-list-plugins'; +import { linkPlugin } from '@/components/editor/plugins/link-plugin'; +import { mediaPlugins } from '@/components/editor/plugins/media-plugins'; +import { mentionPlugin } from '@/components/editor/plugins/mention-plugin'; +import { softBreakPlugin } from '@/components/editor/plugins/soft-break-plugin'; +import { tablePlugin } from '@/components/editor/plugins/table-plugin'; +import { tocPlugin } from '@/components/editor/plugins/toc-plugin'; +import { CursorOverlay } from '@/components/potion-ui/cursor-overlay'; + +import { aiPlugins } from './ai-plugins'; +import { autoformatPlugin } from './autoformat-plugin'; +import { blockMenuPlugins } from './block-menu-plugins'; +import { commentsPlugin } from './comments-plugin'; +import { dndPlugins } from './dnd-plugins'; +import { FloatingToolbarPlugin } from './floating-toolbar-plugin'; +import { resetBlockTypePlugin } from './reset-node-plugin'; + +export const editorPlugins = [ + // AI + ...aiPlugins, + + // Nodes + ...basicNodesPlugins, + HorizontalRulePlugin, + linkPlugin, + DatePlugin, + mentionPlugin, + SlashPlugin, + tablePlugin, + TogglePlugin, + tocPlugin, + ...mediaPlugins, + InlineEquationPlugin, + EquationPlugin, + CalloutPlugin, + ColumnPlugin, + + // Marks + FontColorPlugin, + FontBackgroundColorPlugin, + + // Block Style + ...indentListPlugins, + + // Functionality + autoformatPlugin, + CursorOverlayPlugin.configure({ + render: { afterEditable: () => }, + }), + ...blockMenuPlugins, + ...dndPlugins, + EmojiPlugin, + exitBreakPlugin, + resetBlockTypePlugin, + ...deletePlugins, + softBreakPlugin, + TrailingBlockPlugin.configure({ + options: { type: ParagraphPlugin.key }, + }), + + // Collaboration + commentsPlugin, + + // Deserialization + DocxPlugin, + MarkdownPlugin.configure({ options: { indentList: true } }), + JuicePlugin, + + // UI + FloatingToolbarPlugin, +]; diff --git a/templates/plate-template/src/components/editor/use-create-editor.tsx b/templates/plate-template/src/components/editor/use-create-editor.tsx index ef89c6c2dd..59757a4735 100644 --- a/templates/plate-template/src/components/editor/use-create-editor.tsx +++ b/templates/plate-template/src/components/editor/use-create-editor.tsx @@ -1,85 +1,154 @@ 'use client'; import { withProps } from '@udecode/cn'; -import { BasicElementsPlugin } from '@udecode/plate-basic-elements/react'; +import { AIPlugin } from '@udecode/plate-ai/react'; import { - BasicMarksPlugin, BoldPlugin, + CodePlugin, ItalicPlugin, StrikethroughPlugin, UnderlinePlugin, } from '@udecode/plate-basic-marks/react'; +import { BlockquotePlugin } from '@udecode/plate-block-quote/react'; +import { CalloutPlugin } from '@udecode/plate-callout/react'; +import { + CodeBlockPlugin, + CodeLinePlugin, + CodeSyntaxPlugin, +} from '@udecode/plate-code-block/react'; +import { CommentsPlugin } from '@udecode/plate-comments/react'; import { ParagraphPlugin, - PlateElement, PlateLeaf, usePlateEditor, } from '@udecode/plate-common/react'; +import { DatePlugin } from '@udecode/plate-date/react'; +import { EmojiInputPlugin } from '@udecode/plate-emoji/react'; +import { HEADING_KEYS } from '@udecode/plate-heading'; +import { TocPlugin } from '@udecode/plate-heading/react'; +import { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react'; +import { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react'; +import { LinkPlugin } from '@udecode/plate-link/react'; +import { + EquationPlugin, + InlineEquationPlugin, +} from '@udecode/plate-math/react'; +import { + AudioPlugin, + FilePlugin, + ImagePlugin, + MediaEmbedPlugin, + PlaceholderPlugin, + VideoPlugin, +} from '@udecode/plate-media/react'; +import { + MentionInputPlugin, + MentionPlugin, +} from '@udecode/plate-mention/react'; +import { SlashInputPlugin } from '@udecode/plate-slash-command/react'; +import { + TableCellHeaderPlugin, + TableCellPlugin, + TablePlugin, + TableRowPlugin, +} from '@udecode/plate-table/react'; +import { TogglePlugin } from '@udecode/plate-toggle/react'; + +import { AILeaf } from '@/components/potion-ui/ai-leaf'; +import { BlockquoteElement } from '@/components/potion-ui/blockquote-element'; +import { CalloutElement } from '@/components/potion-ui/callout-element'; +import { CodeBlockElement } from '@/components/potion-ui/code-block-element'; +import { CodeLeaf } from '@/components/potion-ui/code-leaf'; +import { CodeLineElement } from '@/components/potion-ui/code-line-element'; +import { CodeSyntaxLeaf } from '@/components/potion-ui/code-syntax-leaf'; +import { ColumnElement } from '@/components/potion-ui/column-element'; +import { ColumnGroupElement } from '@/components/potion-ui/column-group-element'; +import { CommentLeaf } from '@/components/potion-ui/comment-leaf'; +import { DateElement } from '@/components/potion-ui/date-element'; +import { EmojiInputElement } from '@/components/potion-ui/emoji-input-element'; +import { EquationElement } from '@/components/potion-ui/equation-element'; +import { HeadingElement } from '@/components/potion-ui/heading-element'; +import { HrElement } from '@/components/potion-ui/hr-element'; +import { ImageElement } from '@/components/potion-ui/image-element'; +import { InlineEquationElement } from '@/components/potion-ui/inline-equation-element'; +import { LinkElement } from '@/components/potion-ui/link-element'; +import { MediaAudioElement } from '@/components/potion-ui/media-audio-element'; +import { MediaEmbedElement } from '@/components/potion-ui/media-embed-element'; +import { MediaFileElement } from '@/components/potion-ui/media-file-element'; +import { MediaPlaceholderElement } from '@/components/potion-ui/media-placeholder-element'; +import { MediaVideoElement } from '@/components/potion-ui/media-video-element'; +import { MentionElement } from '@/components/potion-ui/mention-element'; +import { MentionInputElement } from '@/components/potion-ui/mention-input-element'; +import { ParagraphElement } from '@/components/potion-ui/paragraph-element'; +import { withPlaceholders } from '@/components/potion-ui/placeholder'; +import { SlashInputElement } from '@/components/potion-ui/slash-input-element'; +import { + TableCellElement, + TableCellHeaderElement, +} from '@/components/potion-ui/table-cell-element'; +import { TableElement } from '@/components/potion-ui/table-element'; +import { TableRowElement } from '@/components/potion-ui/table-row-element'; +import { TocElement } from '@/components/potion-ui/toc-element'; +import { ToggleElement } from '@/components/potion-ui/toggle-element'; +import { withDraggables } from '@/components/potion-ui/with-draggables'; + +import { editorPlugins } from './plugins/editor-plugins'; -export const useCreateEditor = () => { +export const useCreateEditor = ({ + components, + plugins = editorPlugins, + value, +}: { + components?: Record; +} & Parameters[0] = {}) => { return usePlateEditor({ override: { - // Default styles in globals.css - components: { - [BoldPlugin.key]: withProps(PlateLeaf, { as: 'strong' }), - [ItalicPlugin.key]: withProps(PlateLeaf, { as: 'em' }), - [ParagraphPlugin.key]: withProps(PlateElement, { - as: 'p', - className: 'mb-4', - }), - [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: 's' }), - [UnderlinePlugin.key]: withProps(PlateLeaf, { as: 'u' }), - blockquote: withProps(PlateElement, { - as: 'blockquote', - className: 'mb-4 border-l-4 border-[#d0d7de] pl-4 text-[#636c76]', - }), - h1: withProps(PlateElement, { - as: 'h1', - className: - 'mb-4 mt-6 text-3xl font-semibold tracking-tight lg:text-4xl', - }), - h2: withProps(PlateElement, { - as: 'h2', - className: 'mb-4 mt-6 text-2xl font-semibold tracking-tight', - }), - h3: withProps(PlateElement, { - as: 'h3', - className: 'mb-4 mt-6 text-xl font-semibold tracking-tight', - }), - }, + components: withPlaceholders( + withDraggables({ + [AIPlugin.key]: AILeaf, + [AudioPlugin.key]: MediaAudioElement, + [BlockquotePlugin.key]: BlockquoteElement, + [BoldPlugin.key]: withProps(PlateLeaf, { as: 'strong' }), + [CalloutPlugin.key]: CalloutElement, + [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, + [EquationPlugin.key]: EquationElement, + [FilePlugin.key]: MediaFileElement, + [HEADING_KEYS.h1]: withProps(HeadingElement, { variant: 'h1' }), + [HEADING_KEYS.h2]: withProps(HeadingElement, { variant: 'h2' }), + [HEADING_KEYS.h3]: withProps(HeadingElement, { variant: 'h3' }), + [HorizontalRulePlugin.key]: HrElement, + [ImagePlugin.key]: ImageElement, + [InlineEquationPlugin.key]: InlineEquationElement, + [ItalicPlugin.key]: withProps(PlateLeaf, { as: 'em' }), + [LinkPlugin.key]: LinkElement, + [MediaEmbedPlugin.key]: MediaEmbedElement, + [MentionInputPlugin.key]: MentionInputElement, + [MentionPlugin.key]: MentionElement, + [ParagraphPlugin.key]: ParagraphElement, + [PlaceholderPlugin.key]: MediaPlaceholderElement, + [SlashInputPlugin.key]: SlashInputElement, + [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: 's' }), + [TableCellHeaderPlugin.key]: TableCellHeaderElement, + [TableCellPlugin.key]: TableCellElement, + [TablePlugin.key]: TableElement, + [TableRowPlugin.key]: TableRowElement, + [TocPlugin.key]: TocElement, + [TogglePlugin.key]: ToggleElement, + [UnderlinePlugin.key]: withProps(PlateLeaf, { as: 'u' }), + [VideoPlugin.key]: MediaVideoElement, + ...components, + }) + ), }, - plugins: [BasicElementsPlugin, BasicMarksPlugin], - value: [ - { - children: [{ text: 'Basic Editor' }], - type: 'h1', - }, - { - children: [{ text: 'Heading 2' }], - type: 'h2', - }, - { - children: [{ text: 'Heading 3' }], - type: 'h3', - }, - { - children: [{ text: 'This is a blockquote element' }], - type: 'blockquote', - }, - { - children: [ - { text: 'Basic marks: ' }, - { bold: true, text: 'bold' }, - { text: ', ' }, - { italic: true, text: 'italic' }, - { text: ', ' }, - { text: 'underline', underline: true }, - { text: ', ' }, - { strikethrough: true, text: 'strikethrough' }, - { text: '.' }, - ], - type: ParagraphPlugin.key, - }, - ], + plugins, + value, }); }; diff --git a/templates/plate-template/tailwind.config.ts b/templates/plate-template/tailwind.config.ts index f2624f1bbd..2d11244d8a 100644 --- a/templates/plate-template/tailwind.config.ts +++ b/templates/plate-template/tailwind.config.ts @@ -1,5 +1,7 @@ import type { Config } from 'tailwindcss'; +import plugin from 'tailwindcss/plugin'; + const config: Config = { content: [ './src/pages/**/*.{js,ts,jsx,tsx,mdx}', @@ -7,13 +9,48 @@ const config: Config = { './src/app/**/*.{js,ts,jsx,tsx,mdx}', ], darkMode: ['class'], - plugins: [require('tailwindcss-animate'), require('tailwind-scrollbar-hide')], + plugins: [ + require('tailwindcss-animate'), + require('tailwind-scrollbar-hide'), + plugin(function ({ addUtilities }) { + addUtilities({ + '.transition-bg-ease': { + 'transition-duration': '20ms', + 'transition-property': 'background-color', + 'transition-timing-function': 'ease-in', + }, + }); + }), + ], theme: { extend: { + animation: { + 'accordion-down': 'accordion-down 0.2s ease-out', + 'accordion-up': 'accordion-up 0.2s ease-out', + 'ai-bounce': 'ai-bounce 0.4s infinite', + 'fade-down': 'fade-down 0.5s', + 'fade-in': 'fade-in 0.4s', + 'fade-out': 'fade-out 0.4s', + 'fade-up': 'fade-up 0.5s', + popover: 'popover 100ms ease-in', + pulse: 'pulse var(--duration) ease-out infinite', + shimmer: 'shimmer 4s ease-in-out infinite', + shine: 'shine 8s ease-in-out infinite', + sunlight: 'sunlight 4s linear infinite', + zoom: 'zoom 100ms ease-in', + }, borderRadius: { lg: 'var(--radius)', md: 'calc(var(--radius) - 2px)', sm: 'calc(var(--radius) - 4px)', + xl: `calc(var(--radius) + 4px)`, + xs: 'calc(var(--radius) - 6px)', + }, + boxShadow: { + floating: + 'rgba(16,16,16,0.06) 0px 0px 0px 1px, rgba(16,16,16,0.11) 0px 3px 7px, rgba(16,16,16,0.21) 0px 9px 25px', + toolbar: + 'rgba(0, 0, 0, 0.08) 0px 16px 24px 0px, rgba(0, 0, 0, 0.1) 0px 2px 6px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px', }, colors: { accent: { @@ -24,7 +61,9 @@ const config: Config = { border: 'hsl(var(--border))', brand: { DEFAULT: 'hsl(var(--brand))', + active: 'hsl(var(--brand-active))', foreground: 'hsl(var(--brand-foreground))', + hover: 'hsl(var(--brand-hover))', }, card: { DEFAULT: 'hsl(var(--card))', @@ -64,6 +103,104 @@ const config: Config = { DEFAULT: 'hsl(var(--secondary))', foreground: 'hsl(var(--secondary-foreground))', }, + 'subtle-foreground': 'hsl(var(--subtle-foreground))', + }, + container: { + screens: { + '2xl': '1400px', + }, + }, + keyframes: { + 'accordion-down': { + from: { height: '0' }, + to: { height: 'var(--radix-accordion-content-height)' }, + }, + 'accordion-up': { + from: { height: 'var(--radix-accordion-content-height)' }, + to: { height: '0' }, + }, + 'ai-bounce': { + '0%, 100%': { + animationTimingFunction: 'cubic-bezier(0,0,0.2,1)', + transform: 'translateY(20%)', + }, + '50%': { + animationTimingFunction: 'cubic-bezier(0.8,0,1,1)', + transform: 'translateY(-20%)', + }, + }, + 'fade-down': { + '0%': { + opacity: '0', + transform: 'translateY(-10px)', + }, + '80%': { + opacity: '0.6', + }, + '100%': { + opacity: '1', + transform: 'translateY(0px)', + }, + }, + 'fade-in': { + '0%': { + opacity: '0', + }, + '50%': { + opacity: '0.6', + }, + '100%': { + opacity: '1', + }, + }, + 'fade-out': { + '0%': { + opacity: '0', + }, + '50%': { + opacity: '0.6', + }, + '100%': { + opacity: '1', + }, + }, + 'fade-up': { + '0%': { + opacity: '0', + transform: 'translateY(10px)', + }, + '80%': { + opacity: '0.7', + }, + '100%': { + opacity: '1', + transform: 'translateY(0px)', + }, + }, + popover: { + '0%': { opacity: '0' }, + '100%': { opacity: '1' }, + }, + pulse: { + '0%, 100%': { boxShadow: '0 0 0 0 var(--pulse-color)' }, + '50%': { boxShadow: '0 0 0 8px var(--pulse-color)' }, + }, + shimmer: { + '0%': { transform: 'translateX(-150%)' }, + '100%': { transform: 'translateX(150%)' }, + }, + shine: { + from: { backgroundPosition: '200% 0' }, + to: { backgroundPosition: '-200% 0' }, + }, + sunlight: { + '0%': { transform: 'translateX(-50%) rotate(0deg)' }, + '100%': { transform: 'translateX(0%) rotate(0deg)' }, + }, + zoom: { + '0%': { opacity: '0', transform: 'scale(0.95)' }, + '100%': { opacity: '1', transform: 'scale(1)' }, + }, }, screens: { 'main-hover': { diff --git a/yarn.lock b/yarn.lock index 9d992886cb..078b46b442 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6195,13 +6195,13 @@ __metadata: version: 0.0.0-use.local resolution: "@udecode/plate-ai@workspace:packages/ai" dependencies: - "@udecode/plate-combobox": "npm:39.0.0" - "@udecode/plate-markdown": "npm:39.2.0" - "@udecode/plate-selection": "npm:39.3.7" + "@udecode/plate-combobox": "npm:40.0.0" + "@udecode/plate-markdown": "npm:40.0.0" + "@udecode/plate-selection": "npm:40.0.0" ai: "npm:^3.4.10" lodash: "npm:^4.17.21" peerDependencies: - "@udecode/plate-common": ">=39.2.13" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6212,13 +6212,13 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-alignment@npm:39.0.0, @udecode/plate-alignment@workspace:^, @udecode/plate-alignment@workspace:packages/alignment": +"@udecode/plate-alignment@npm:40.0.0, @udecode/plate-alignment@workspace:^, @udecode/plate-alignment@workspace:packages/alignment": version: 0.0.0-use.local resolution: "@udecode/plate-alignment@workspace:packages/alignment" dependencies: "@udecode/plate-common": "workspace:^" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6229,14 +6229,14 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-autoformat@npm:39.0.0, @udecode/plate-autoformat@workspace:^, @udecode/plate-autoformat@workspace:packages/autoformat": +"@udecode/plate-autoformat@npm:40.0.0, @udecode/plate-autoformat@workspace:^, @udecode/plate-autoformat@workspace:packages/autoformat": version: 0.0.0-use.local resolution: "@udecode/plate-autoformat@workspace:packages/autoformat" dependencies: "@udecode/plate-common": "workspace:^" lodash: "npm:^4.17.21" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6247,16 +6247,16 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-basic-elements@npm:39.0.0, @udecode/plate-basic-elements@workspace:^, @udecode/plate-basic-elements@workspace:packages/basic-elements": +"@udecode/plate-basic-elements@npm:40.0.0, @udecode/plate-basic-elements@workspace:^, @udecode/plate-basic-elements@workspace:packages/basic-elements": version: 0.0.0-use.local resolution: "@udecode/plate-basic-elements@workspace:packages/basic-elements" dependencies: - "@udecode/plate-block-quote": "npm:39.0.0" - "@udecode/plate-code-block": "npm:39.0.0" + "@udecode/plate-block-quote": "npm:40.0.0" + "@udecode/plate-code-block": "npm:40.0.0" "@udecode/plate-common": "workspace:^" - "@udecode/plate-heading": "npm:39.0.0" + "@udecode/plate-heading": "npm:40.0.0" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6267,13 +6267,13 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-basic-marks@npm:39.0.0, @udecode/plate-basic-marks@workspace:^, @udecode/plate-basic-marks@workspace:packages/basic-marks": +"@udecode/plate-basic-marks@npm:40.0.0, @udecode/plate-basic-marks@workspace:^, @udecode/plate-basic-marks@workspace:packages/basic-marks": version: 0.0.0-use.local resolution: "@udecode/plate-basic-marks@workspace:packages/basic-marks" dependencies: "@udecode/plate-common": "workspace:^" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6284,13 +6284,13 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-block-quote@npm:39.0.0, @udecode/plate-block-quote@workspace:^, @udecode/plate-block-quote@workspace:packages/block-quote": +"@udecode/plate-block-quote@npm:40.0.0, @udecode/plate-block-quote@workspace:^, @udecode/plate-block-quote@workspace:packages/block-quote": version: 0.0.0-use.local resolution: "@udecode/plate-block-quote@workspace:packages/block-quote" dependencies: "@udecode/plate-common": "workspace:^" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6301,13 +6301,13 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-break@npm:39.0.0, @udecode/plate-break@workspace:^, @udecode/plate-break@workspace:packages/break": +"@udecode/plate-break@npm:40.0.0, @udecode/plate-break@workspace:^, @udecode/plate-break@workspace:packages/break": version: 0.0.0-use.local resolution: "@udecode/plate-break@workspace:packages/break" dependencies: "@udecode/plate-common": "workspace:^" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6324,7 +6324,7 @@ __metadata: dependencies: "@udecode/plate-common": "workspace:^" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6342,7 +6342,7 @@ __metadata: "@udecode/plate-common": "workspace:^" react-textarea-autosize: "npm:^8.5.3" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6362,7 +6362,7 @@ __metadata: delay: "npm:5.0.0" p-defer: "npm:^4.0.1" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6373,14 +6373,14 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-code-block@npm:39.0.0, @udecode/plate-code-block@workspace:^, @udecode/plate-code-block@workspace:packages/code-block": +"@udecode/plate-code-block@npm:40.0.0, @udecode/plate-code-block@workspace:^, @udecode/plate-code-block@workspace:packages/code-block": version: 0.0.0-use.local resolution: "@udecode/plate-code-block@workspace:packages/code-block" dependencies: "@udecode/plate-common": "workspace:^" prismjs: "npm:^1.29.0" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6391,13 +6391,13 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-combobox@npm:39.0.0, @udecode/plate-combobox@workspace:^, @udecode/plate-combobox@workspace:packages/combobox": +"@udecode/plate-combobox@npm:40.0.0, @udecode/plate-combobox@workspace:^, @udecode/plate-combobox@workspace:packages/combobox": version: 0.0.0-use.local resolution: "@udecode/plate-combobox@workspace:packages/combobox" dependencies: "@udecode/plate-common": "workspace:^" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6408,14 +6408,14 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-comments@npm:39.0.0, @udecode/plate-comments@workspace:^, @udecode/plate-comments@workspace:packages/comments": +"@udecode/plate-comments@npm:40.0.0, @udecode/plate-comments@workspace:^, @udecode/plate-comments@workspace:packages/comments": version: 0.0.0-use.local resolution: "@udecode/plate-comments@workspace:packages/comments" dependencies: "@udecode/plate-common": "workspace:^" lodash: "npm:^4.17.21" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6426,16 +6426,16 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-common@npm:39.2.21, @udecode/plate-common@workspace:^, @udecode/plate-common@workspace:packages/common": +"@udecode/plate-common@npm:40.0.0, @udecode/plate-common@workspace:^, @udecode/plate-common@workspace:packages/common": version: 0.0.0-use.local resolution: "@udecode/plate-common@workspace:packages/common" dependencies: - "@udecode/plate-core": "npm:39.2.21" - "@udecode/plate-utils": "npm:39.2.21" + "@udecode/plate-core": "npm:40.0.0" + "@udecode/plate-utils": "npm:40.0.0" "@udecode/react-hotkeys": "npm:37.0.0" "@udecode/react-utils": "npm:39.0.0" "@udecode/slate": "npm:39.2.1" - "@udecode/slate-react": "npm:39.2.1" + "@udecode/slate-react": "npm:40.0.0" "@udecode/slate-utils": "npm:39.2.20" "@udecode/utils": "npm:37.0.0" peerDependencies: @@ -6449,14 +6449,14 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-core@npm:39.2.21, @udecode/plate-core@workspace:^, @udecode/plate-core@workspace:packages/core": +"@udecode/plate-core@npm:40.0.0, @udecode/plate-core@workspace:^, @udecode/plate-core@workspace:packages/core": version: 0.0.0-use.local resolution: "@udecode/plate-core@workspace:packages/core" dependencies: "@udecode/react-hotkeys": "npm:37.0.0" "@udecode/react-utils": "npm:39.0.0" "@udecode/slate": "npm:39.2.1" - "@udecode/slate-react": "npm:39.2.1" + "@udecode/slate-react": "npm:40.0.0" "@udecode/slate-utils": "npm:39.2.20" "@udecode/utils": "npm:37.0.0" clsx: "npm:^2.1.1" @@ -6481,16 +6481,16 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-csv@npm:39.1.6, @udecode/plate-csv@workspace:^, @udecode/plate-csv@workspace:packages/csv": +"@udecode/plate-csv@npm:40.0.0, @udecode/plate-csv@workspace:^, @udecode/plate-csv@workspace:packages/csv": version: 0.0.0-use.local resolution: "@udecode/plate-csv@workspace:packages/csv" dependencies: "@types/papaparse": "npm:^5.3.14" "@udecode/plate-common": "workspace:^" - "@udecode/plate-table": "npm:39.1.6" + "@udecode/plate-table": "npm:40.0.0" papaparse: "npm:^5.4.1" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6507,7 +6507,7 @@ __metadata: dependencies: "@udecode/plate-common": "workspace:^" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6524,7 +6524,7 @@ __metadata: dependencies: "@udecode/plate-common": "workspace:^" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.94.0" @@ -6534,7 +6534,7 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-diff@npm:39.0.0, @udecode/plate-diff@workspace:^, @udecode/plate-diff@workspace:packages/diff": +"@udecode/plate-diff@npm:40.0.0, @udecode/plate-diff@workspace:^, @udecode/plate-diff@workspace:packages/diff": version: 0.0.0-use.local resolution: "@udecode/plate-diff@workspace:packages/diff" dependencies: @@ -6542,7 +6542,7 @@ __metadata: diff-match-patch-ts: "npm:^0.6.0" lodash: "npm:^4.17.21" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6561,7 +6561,7 @@ __metadata: lodash: "npm:^4.17.21" raf: "npm:^3.4.1" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dnd: ">=14.0.0" react-dnd-html5-backend: ">=14.0.0" @@ -6574,19 +6574,19 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-docx@npm:39.3.3, @udecode/plate-docx@workspace:^, @udecode/plate-docx@workspace:packages/docx": +"@udecode/plate-docx@npm:40.0.0, @udecode/plate-docx@workspace:^, @udecode/plate-docx@workspace:packages/docx": version: 0.0.0-use.local resolution: "@udecode/plate-docx@workspace:packages/docx" dependencies: "@udecode/plate-common": "workspace:^" - "@udecode/plate-heading": "npm:39.0.0" - "@udecode/plate-indent": "npm:39.0.0" - "@udecode/plate-indent-list": "npm:39.1.10" - "@udecode/plate-media": "npm:39.3.3" - "@udecode/plate-table": "npm:39.1.6" + "@udecode/plate-heading": "npm:40.0.0" + "@udecode/plate-indent": "npm:40.0.0" + "@udecode/plate-indent-list": "npm:40.0.0" + "@udecode/plate-media": "npm:40.0.0" + "@udecode/plate-table": "npm:40.0.0" validator: "npm:^13.12.0" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6602,10 +6602,10 @@ __metadata: resolution: "@udecode/plate-emoji@workspace:packages/emoji" dependencies: "@emoji-mart/data": "npm:^1.2.1" - "@udecode/plate-combobox": "npm:39.0.0" + "@udecode/plate-combobox": "npm:40.0.0" "@udecode/plate-common": "workspace:^" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6623,7 +6623,7 @@ __metadata: "@excalidraw/excalidraw": "npm:0.16.4" "@udecode/plate-common": "workspace:^" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6634,13 +6634,13 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-find-replace@npm:39.0.0, @udecode/plate-find-replace@workspace:^, @udecode/plate-find-replace@workspace:packages/find-replace": +"@udecode/plate-find-replace@npm:40.0.0, @udecode/plate-find-replace@workspace:^, @udecode/plate-find-replace@workspace:packages/find-replace": version: 0.0.0-use.local resolution: "@udecode/plate-find-replace@workspace:packages/find-replace" dependencies: "@udecode/plate-common": "workspace:^" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6651,7 +6651,7 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-floating@npm:39.1.6, @udecode/plate-floating@workspace:^, @udecode/plate-floating@workspace:packages/floating": +"@udecode/plate-floating@npm:40.0.0, @udecode/plate-floating@workspace:^, @udecode/plate-floating@workspace:packages/floating": version: 0.0.0-use.local resolution: "@udecode/plate-floating@workspace:packages/floating" dependencies: @@ -6659,7 +6659,7 @@ __metadata: "@floating-ui/react": "npm:^0.26.23" "@udecode/plate-common": "workspace:^" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6670,14 +6670,14 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-font@npm:39.0.0, @udecode/plate-font@workspace:^, @udecode/plate-font@workspace:packages/font": +"@udecode/plate-font@npm:40.0.0, @udecode/plate-font@workspace:^, @udecode/plate-font@workspace:packages/font": version: 0.0.0-use.local resolution: "@udecode/plate-font@workspace:packages/font" dependencies: "@udecode/plate-common": "workspace:^" lodash: "npm:^4.17.21" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6688,13 +6688,13 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-heading@npm:39.0.0, @udecode/plate-heading@workspace:^, @udecode/plate-heading@workspace:packages/heading": +"@udecode/plate-heading@npm:40.0.0, @udecode/plate-heading@workspace:^, @udecode/plate-heading@workspace:packages/heading": version: 0.0.0-use.local resolution: "@udecode/plate-heading@workspace:packages/heading" dependencies: "@udecode/plate-common": "workspace:^" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6705,13 +6705,13 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-highlight@npm:39.0.0, @udecode/plate-highlight@workspace:^, @udecode/plate-highlight@workspace:packages/highlight": +"@udecode/plate-highlight@npm:40.0.0, @udecode/plate-highlight@workspace:^, @udecode/plate-highlight@workspace:packages/highlight": version: 0.0.0-use.local resolution: "@udecode/plate-highlight@workspace:packages/highlight" dependencies: "@udecode/plate-common": "workspace:^" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6722,13 +6722,13 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-horizontal-rule@npm:39.0.0, @udecode/plate-horizontal-rule@workspace:^, @udecode/plate-horizontal-rule@workspace:packages/horizontal-rule": +"@udecode/plate-horizontal-rule@npm:40.0.0, @udecode/plate-horizontal-rule@workspace:^, @udecode/plate-horizontal-rule@workspace:packages/horizontal-rule": version: 0.0.0-use.local resolution: "@udecode/plate-horizontal-rule@workspace:packages/horizontal-rule" dependencies: "@udecode/plate-common": "workspace:^" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6739,7 +6739,7 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-html@npm:39.0.0, @udecode/plate-html@workspace:^, @udecode/plate-html@workspace:packages/html": +"@udecode/plate-html@npm:40.0.0, @udecode/plate-html@workspace:^, @udecode/plate-html@workspace:packages/html": version: 0.0.0-use.local resolution: "@udecode/plate-html@workspace:packages/html" dependencies: @@ -6747,7 +6747,7 @@ __metadata: "@udecode/plate-common": "workspace:^" html-entities: "npm:^2.5.2" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6758,16 +6758,16 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-indent-list@npm:39.1.10, @udecode/plate-indent-list@workspace:^, @udecode/plate-indent-list@workspace:packages/indent-list": +"@udecode/plate-indent-list@npm:40.0.0, @udecode/plate-indent-list@workspace:^, @udecode/plate-indent-list@workspace:packages/indent-list": version: 0.0.0-use.local resolution: "@udecode/plate-indent-list@workspace:packages/indent-list" dependencies: "@udecode/plate-common": "workspace:^" - "@udecode/plate-indent": "npm:39.0.0" - "@udecode/plate-list": "npm:39.0.0" + "@udecode/plate-indent": "npm:40.0.0" + "@udecode/plate-list": "npm:40.0.0" clsx: "npm:^2.1.1" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6778,13 +6778,13 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-indent@npm:39.0.0, @udecode/plate-indent@workspace:^, @udecode/plate-indent@workspace:packages/indent": +"@udecode/plate-indent@npm:40.0.0, @udecode/plate-indent@workspace:^, @udecode/plate-indent@workspace:packages/indent": version: 0.0.0-use.local resolution: "@udecode/plate-indent@workspace:packages/indent" dependencies: "@udecode/plate-common": "workspace:^" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6802,7 +6802,7 @@ __metadata: "@udecode/plate-common": "workspace:^" juice: "npm:^8.1.0" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6813,13 +6813,13 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-kbd@npm:39.0.0, @udecode/plate-kbd@workspace:^, @udecode/plate-kbd@workspace:packages/kbd": +"@udecode/plate-kbd@npm:40.0.0, @udecode/plate-kbd@workspace:^, @udecode/plate-kbd@workspace:packages/kbd": version: 0.0.0-use.local resolution: "@udecode/plate-kbd@workspace:packages/kbd" dependencies: "@udecode/plate-common": "workspace:^" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6830,13 +6830,13 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-layout@npm:39.0.0, @udecode/plate-layout@workspace:^, @udecode/plate-layout@workspace:packages/layout": +"@udecode/plate-layout@npm:40.0.0, @udecode/plate-layout@workspace:^, @udecode/plate-layout@workspace:packages/layout": version: 0.0.0-use.local resolution: "@udecode/plate-layout@workspace:packages/layout" dependencies: "@udecode/plate-common": "workspace:^" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6847,13 +6847,13 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-line-height@npm:39.0.0, @udecode/plate-line-height@workspace:^, @udecode/plate-line-height@workspace:packages/line-height": +"@udecode/plate-line-height@npm:40.0.0, @udecode/plate-line-height@workspace:^, @udecode/plate-line-height@workspace:packages/line-height": version: 0.0.0-use.local resolution: "@udecode/plate-line-height@workspace:packages/line-height" dependencies: "@udecode/plate-common": "workspace:^" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6864,15 +6864,15 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-link@npm:39.1.9, @udecode/plate-link@workspace:^, @udecode/plate-link@workspace:packages/link": +"@udecode/plate-link@npm:40.0.0, @udecode/plate-link@workspace:^, @udecode/plate-link@workspace:packages/link": version: 0.0.0-use.local resolution: "@udecode/plate-link@workspace:packages/link" dependencies: "@udecode/plate-common": "workspace:^" - "@udecode/plate-floating": "npm:39.1.6" - "@udecode/plate-normalizers": "npm:39.0.0" + "@udecode/plate-floating": "npm:40.0.0" + "@udecode/plate-normalizers": "npm:40.0.0" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6883,15 +6883,15 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-list@npm:39.0.0, @udecode/plate-list@workspace:^, @udecode/plate-list@workspace:packages/list": +"@udecode/plate-list@npm:40.0.0, @udecode/plate-list@workspace:^, @udecode/plate-list@workspace:packages/list": version: 0.0.0-use.local resolution: "@udecode/plate-list@workspace:packages/list" dependencies: "@udecode/plate-common": "workspace:^" - "@udecode/plate-reset-node": "npm:39.0.0" + "@udecode/plate-reset-node": "npm:40.0.0" lodash: "npm:^4.17.21" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6902,7 +6902,7 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-markdown@npm:39.2.0, @udecode/plate-markdown@workspace:^, @udecode/plate-markdown@workspace:packages/markdown": +"@udecode/plate-markdown@npm:40.0.0, @udecode/plate-markdown@workspace:^, @udecode/plate-markdown@workspace:packages/markdown": version: 0.0.0-use.local resolution: "@udecode/plate-markdown@workspace:packages/markdown" dependencies: @@ -6912,7 +6912,7 @@ __metadata: remark-parse: "npm:^9.0.0" unified: "npm:^11.0.5" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6931,7 +6931,7 @@ __metadata: "@udecode/plate-common": "workspace:^" katex: "npm:0.16.11" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6942,14 +6942,14 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-media@npm:39.3.3, @udecode/plate-media@workspace:^, @udecode/plate-media@workspace:packages/media": +"@udecode/plate-media@npm:40.0.0, @udecode/plate-media@workspace:^, @udecode/plate-media@workspace:packages/media": version: 0.0.0-use.local resolution: "@udecode/plate-media@workspace:packages/media" dependencies: "@udecode/plate-common": "workspace:^" js-video-url-parser: "npm:^0.5.1" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6960,14 +6960,14 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-mention@npm:39.3.4, @udecode/plate-mention@workspace:^, @udecode/plate-mention@workspace:packages/mention": +"@udecode/plate-mention@npm:40.0.0, @udecode/plate-mention@workspace:^, @udecode/plate-mention@workspace:packages/mention": version: 0.0.0-use.local resolution: "@udecode/plate-mention@workspace:packages/mention" dependencies: - "@udecode/plate-combobox": "npm:39.0.0" + "@udecode/plate-combobox": "npm:40.0.0" "@udecode/plate-common": "workspace:^" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6978,14 +6978,14 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-node-id@npm:39.0.0, @udecode/plate-node-id@workspace:^, @udecode/plate-node-id@workspace:packages/node-id": +"@udecode/plate-node-id@npm:40.0.0, @udecode/plate-node-id@workspace:^, @udecode/plate-node-id@workspace:packages/node-id": version: 0.0.0-use.local resolution: "@udecode/plate-node-id@workspace:packages/node-id" dependencies: "@udecode/plate-common": "workspace:^" lodash: "npm:^4.17.21" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -6996,14 +6996,14 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-normalizers@npm:39.0.0, @udecode/plate-normalizers@workspace:^, @udecode/plate-normalizers@workspace:packages/normalizers": +"@udecode/plate-normalizers@npm:40.0.0, @udecode/plate-normalizers@workspace:^, @udecode/plate-normalizers@workspace:packages/normalizers": version: 0.0.0-use.local resolution: "@udecode/plate-normalizers@workspace:packages/normalizers" dependencies: "@udecode/plate-common": "workspace:^" lodash: "npm:^4.17.21" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -7021,7 +7021,7 @@ __metadata: "@udecode/plate-common": "workspace:^" peerDependencies: "@playwright/test": ">=1.42.1" - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -7032,13 +7032,13 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-reset-node@npm:39.0.0, @udecode/plate-reset-node@workspace:^, @udecode/plate-reset-node@workspace:packages/reset-node": +"@udecode/plate-reset-node@npm:40.0.0, @udecode/plate-reset-node@workspace:^, @udecode/plate-reset-node@workspace:packages/reset-node": version: 0.0.0-use.local resolution: "@udecode/plate-reset-node@workspace:packages/reset-node" dependencies: "@udecode/plate-common": "workspace:^" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -7049,13 +7049,13 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-resizable@npm:39.1.6, @udecode/plate-resizable@workspace:^, @udecode/plate-resizable@workspace:packages/resizable": +"@udecode/plate-resizable@npm:40.0.0, @udecode/plate-resizable@workspace:^, @udecode/plate-resizable@workspace:packages/resizable": version: 0.0.0-use.local resolution: "@udecode/plate-resizable@workspace:packages/resizable" dependencies: "@udecode/plate-common": "workspace:^" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -7066,13 +7066,13 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-select@npm:39.0.0, @udecode/plate-select@workspace:^, @udecode/plate-select@workspace:packages/select": +"@udecode/plate-select@npm:40.0.0, @udecode/plate-select@workspace:^, @udecode/plate-select@workspace:packages/select": version: 0.0.0-use.local resolution: "@udecode/plate-select@workspace:packages/select" dependencies: "@udecode/plate-common": "workspace:^" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -7083,14 +7083,14 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-selection@npm:39.3.7, @udecode/plate-selection@workspace:^, @udecode/plate-selection@workspace:packages/selection": +"@udecode/plate-selection@npm:40.0.0, @udecode/plate-selection@workspace:^, @udecode/plate-selection@workspace:packages/selection": version: 0.0.0-use.local resolution: "@udecode/plate-selection@workspace:packages/selection" dependencies: "@udecode/plate-common": "workspace:^" copy-to-clipboard: "npm:^3.3.3" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -7101,14 +7101,14 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-slash-command@npm:39.0.0, @udecode/plate-slash-command@workspace:^, @udecode/plate-slash-command@workspace:packages/slash-command": +"@udecode/plate-slash-command@npm:40.0.0, @udecode/plate-slash-command@workspace:^, @udecode/plate-slash-command@workspace:packages/slash-command": version: 0.0.0-use.local resolution: "@udecode/plate-slash-command@workspace:packages/slash-command" dependencies: - "@udecode/plate-combobox": "npm:39.0.0" + "@udecode/plate-combobox": "npm:40.0.0" "@udecode/plate-common": "workspace:^" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -7119,15 +7119,15 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-suggestion@npm:39.0.0, @udecode/plate-suggestion@workspace:^, @udecode/plate-suggestion@workspace:packages/suggestion": +"@udecode/plate-suggestion@npm:40.0.0, @udecode/plate-suggestion@workspace:^, @udecode/plate-suggestion@workspace:packages/suggestion": version: 0.0.0-use.local resolution: "@udecode/plate-suggestion@workspace:packages/suggestion" dependencies: "@udecode/plate-common": "workspace:^" - "@udecode/plate-diff": "npm:39.0.0" + "@udecode/plate-diff": "npm:40.0.0" lodash: "npm:^4.17.21" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -7138,14 +7138,14 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-tabbable@npm:39.0.0, @udecode/plate-tabbable@workspace:^, @udecode/plate-tabbable@workspace:packages/tabbable": +"@udecode/plate-tabbable@npm:40.0.0, @udecode/plate-tabbable@workspace:^, @udecode/plate-tabbable@workspace:packages/tabbable": version: 0.0.0-use.local resolution: "@udecode/plate-tabbable@workspace:packages/tabbable" dependencies: "@udecode/plate-common": "workspace:^" tabbable: "npm:^6.2.0" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -7156,15 +7156,15 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-table@npm:39.1.6, @udecode/plate-table@workspace:^, @udecode/plate-table@workspace:packages/table": +"@udecode/plate-table@npm:40.0.0, @udecode/plate-table@workspace:^, @udecode/plate-table@workspace:packages/table": version: 0.0.0-use.local resolution: "@udecode/plate-table@workspace:packages/table" dependencies: "@udecode/plate-common": "workspace:^" - "@udecode/plate-resizable": "npm:39.1.6" + "@udecode/plate-resizable": "npm:40.0.0" lodash: "npm:^4.17.21" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -7183,16 +7183,16 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-toggle@npm:39.0.0, @udecode/plate-toggle@workspace:^, @udecode/plate-toggle@workspace:packages/toggle": +"@udecode/plate-toggle@npm:40.0.0, @udecode/plate-toggle@workspace:^, @udecode/plate-toggle@workspace:packages/toggle": version: 0.0.0-use.local resolution: "@udecode/plate-toggle@workspace:packages/toggle" dependencies: "@udecode/plate-common": "workspace:^" - "@udecode/plate-indent": "npm:39.0.0" - "@udecode/plate-node-id": "npm:39.0.0" + "@udecode/plate-indent": "npm:40.0.0" + "@udecode/plate-node-id": "npm:40.0.0" lodash: "npm:^4.17.21" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -7203,13 +7203,13 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-trailing-block@npm:39.0.0, @udecode/plate-trailing-block@workspace:^, @udecode/plate-trailing-block@workspace:packages/trailing-block": +"@udecode/plate-trailing-block@npm:40.0.0, @udecode/plate-trailing-block@workspace:^, @udecode/plate-trailing-block@workspace:packages/trailing-block": version: 0.0.0-use.local resolution: "@udecode/plate-trailing-block@workspace:packages/trailing-block" dependencies: "@udecode/plate-common": "workspace:^" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -7220,14 +7220,14 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-utils@npm:39.2.21, @udecode/plate-utils@workspace:^, @udecode/plate-utils@workspace:packages/plate-utils": +"@udecode/plate-utils@npm:40.0.0, @udecode/plate-utils@workspace:^, @udecode/plate-utils@workspace:packages/plate-utils": version: 0.0.0-use.local resolution: "@udecode/plate-utils@workspace:packages/plate-utils" dependencies: - "@udecode/plate-core": "npm:39.2.21" + "@udecode/plate-core": "npm:40.0.0" "@udecode/react-utils": "npm:39.0.0" "@udecode/slate": "npm:39.2.1" - "@udecode/slate-react": "npm:39.2.1" + "@udecode/slate-react": "npm:40.0.0" "@udecode/slate-utils": "npm:39.2.20" "@udecode/utils": "npm:37.0.0" clsx: "npm:^2.1.1" @@ -7251,7 +7251,7 @@ __metadata: "@udecode/plate-common": "workspace:^" yjs: "npm:^13.6.19" peerDependencies: - "@udecode/plate-common": ">=39.2.21" + "@udecode/plate-common": ">=40.0.0" react: ">=16.8.0" react-dom: ">=16.8.0" slate: ">=0.103.0" @@ -7266,48 +7266,48 @@ __metadata: version: 0.0.0-use.local resolution: "@udecode/plate@workspace:packages/plate" dependencies: - "@udecode/plate-alignment": "npm:39.0.0" - "@udecode/plate-autoformat": "npm:39.0.0" - "@udecode/plate-basic-elements": "npm:39.0.0" - "@udecode/plate-basic-marks": "npm:39.0.0" - "@udecode/plate-block-quote": "npm:39.0.0" - "@udecode/plate-break": "npm:39.0.0" - "@udecode/plate-code-block": "npm:39.0.0" - "@udecode/plate-combobox": "npm:39.0.0" - "@udecode/plate-comments": "npm:39.0.0" - "@udecode/plate-common": "npm:39.2.21" - "@udecode/plate-csv": "npm:39.1.6" - "@udecode/plate-diff": "npm:39.0.0" - "@udecode/plate-docx": "npm:39.3.3" - "@udecode/plate-find-replace": "npm:39.0.0" - "@udecode/plate-floating": "npm:39.1.6" - "@udecode/plate-font": "npm:39.0.0" - "@udecode/plate-heading": "npm:39.0.0" - "@udecode/plate-highlight": "npm:39.0.0" - "@udecode/plate-horizontal-rule": "npm:39.0.0" - "@udecode/plate-html": "npm:39.0.0" - "@udecode/plate-indent": "npm:39.0.0" - "@udecode/plate-indent-list": "npm:39.1.10" - "@udecode/plate-kbd": "npm:39.0.0" - "@udecode/plate-layout": "npm:39.0.0" - "@udecode/plate-line-height": "npm:39.0.0" - "@udecode/plate-link": "npm:39.1.9" - "@udecode/plate-list": "npm:39.0.0" - "@udecode/plate-markdown": "npm:39.2.0" - "@udecode/plate-media": "npm:39.3.3" - "@udecode/plate-mention": "npm:39.3.4" - "@udecode/plate-node-id": "npm:39.0.0" - "@udecode/plate-normalizers": "npm:39.0.0" - "@udecode/plate-reset-node": "npm:39.0.0" - "@udecode/plate-resizable": "npm:39.1.6" - "@udecode/plate-select": "npm:39.0.0" - "@udecode/plate-selection": "npm:39.3.7" - "@udecode/plate-slash-command": "npm:39.0.0" - "@udecode/plate-suggestion": "npm:39.0.0" - "@udecode/plate-tabbable": "npm:39.0.0" - "@udecode/plate-table": "npm:39.1.6" - "@udecode/plate-toggle": "npm:39.0.0" - "@udecode/plate-trailing-block": "npm:39.0.0" + "@udecode/plate-alignment": "npm:40.0.0" + "@udecode/plate-autoformat": "npm:40.0.0" + "@udecode/plate-basic-elements": "npm:40.0.0" + "@udecode/plate-basic-marks": "npm:40.0.0" + "@udecode/plate-block-quote": "npm:40.0.0" + "@udecode/plate-break": "npm:40.0.0" + "@udecode/plate-code-block": "npm:40.0.0" + "@udecode/plate-combobox": "npm:40.0.0" + "@udecode/plate-comments": "npm:40.0.0" + "@udecode/plate-common": "npm:40.0.0" + "@udecode/plate-csv": "npm:40.0.0" + "@udecode/plate-diff": "npm:40.0.0" + "@udecode/plate-docx": "npm:40.0.0" + "@udecode/plate-find-replace": "npm:40.0.0" + "@udecode/plate-floating": "npm:40.0.0" + "@udecode/plate-font": "npm:40.0.0" + "@udecode/plate-heading": "npm:40.0.0" + "@udecode/plate-highlight": "npm:40.0.0" + "@udecode/plate-horizontal-rule": "npm:40.0.0" + "@udecode/plate-html": "npm:40.0.0" + "@udecode/plate-indent": "npm:40.0.0" + "@udecode/plate-indent-list": "npm:40.0.0" + "@udecode/plate-kbd": "npm:40.0.0" + "@udecode/plate-layout": "npm:40.0.0" + "@udecode/plate-line-height": "npm:40.0.0" + "@udecode/plate-link": "npm:40.0.0" + "@udecode/plate-list": "npm:40.0.0" + "@udecode/plate-markdown": "npm:40.0.0" + "@udecode/plate-media": "npm:40.0.0" + "@udecode/plate-mention": "npm:40.0.0" + "@udecode/plate-node-id": "npm:40.0.0" + "@udecode/plate-normalizers": "npm:40.0.0" + "@udecode/plate-reset-node": "npm:40.0.0" + "@udecode/plate-resizable": "npm:40.0.0" + "@udecode/plate-select": "npm:40.0.0" + "@udecode/plate-selection": "npm:40.0.0" + "@udecode/plate-slash-command": "npm:40.0.0" + "@udecode/plate-suggestion": "npm:40.0.0" + "@udecode/plate-tabbable": "npm:40.0.0" + "@udecode/plate-table": "npm:40.0.0" + "@udecode/plate-toggle": "npm:40.0.0" + "@udecode/plate-trailing-block": "npm:40.0.0" peerDependencies: react: ">=16.8.0" react-dom: ">=16.8.0" @@ -7341,7 +7341,7 @@ __metadata: languageName: unknown linkType: soft -"@udecode/slate-react@npm:39.2.1, @udecode/slate-react@workspace:^, @udecode/slate-react@workspace:packages/slate-react": +"@udecode/slate-react@npm:40.0.0, @udecode/slate-react@workspace:^, @udecode/slate-react@workspace:packages/slate-react": version: 0.0.0-use.local resolution: "@udecode/slate-react@workspace:packages/slate-react" dependencies: From a7e0815b4b4ac5514b3a789d25cc52401516b2fd Mon Sep 17 00:00:00 2001 From: zbeyens Date: Wed, 13 Nov 2024 19:28:21 +0100 Subject: [PATCH 05/10] docs --- .../public/r/styles/default/ai-plugins.json | 7 ++++--- .../default/block-selection-plugins.json | 2 +- .../styles/default/cursor-overlay-plugin.json | 18 ++++++++++++++++++ .../public/r/styles/default/editor-basic.json | 2 +- .../www/public/r/styles/default/resizable.json | 2 +- apps/www/src/__registry__/index.tsx | 14 +++++++++++++- 6 files changed, 38 insertions(+), 7 deletions(-) create mode 100644 apps/www/public/r/styles/default/cursor-overlay-plugin.json diff --git a/apps/www/public/r/styles/default/ai-plugins.json b/apps/www/public/r/styles/default/ai-plugins.json index 18f90c7bfe..b9b1aaa0d5 100644 --- a/apps/www/public/r/styles/default/ai-plugins.json +++ b/apps/www/public/r/styles/default/ai-plugins.json @@ -7,12 +7,11 @@ "@udecode/plate-heading", "@udecode/plate-horizontal-rule", "@udecode/plate-link", - "@udecode/plate-markdown", - "@udecode/plate-selection" + "@udecode/plate-markdown" ], "files": [ { - "content": "'use client';\n\nimport React from 'react';\n\nimport { withProps } from '@udecode/cn';\nimport { AIChatPlugin, AIPlugin } from '@udecode/plate-ai/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport {\n ParagraphPlugin,\n PlateLeaf,\n createPlateEditor,\n} from '@udecode/plate-common/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { BlockSelectionPlugin } from '@udecode/plate-selection/react';\n\nimport { AIMenu } from '@/components/plate-ui/ai-menu';\nimport { BlockquoteElement } from '@/components/plate-ui/blockquote-element';\nimport { CodeBlockElement } from '@/components/plate-ui/code-block-element';\nimport { CodeLeaf } from '@/components/plate-ui/code-leaf';\nimport { CodeLineElement } from '@/components/plate-ui/code-line-element';\nimport { CodeSyntaxLeaf } from '@/components/plate-ui/code-syntax-leaf';\nimport { HeadingElement } from '@/components/plate-ui/heading-element';\nimport { HrElement } from '@/components/plate-ui/hr-element';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { ParagraphElement } from '@/components/plate-ui/paragraph-element';\n\nimport { basicNodesPlugins } from './basic-nodes-plugins';\nimport { indentListPlugins } from './indent-list-plugins';\nimport { linkPlugin } from './link-plugin';\n\nconst createAIEditor = () => {\n const editor = createPlateEditor({\n id: 'ai',\n override: {\n components: {\n [BlockquotePlugin.key]: BlockquoteElement,\n [BoldPlugin.key]: withProps(PlateLeaf, { as: 'strong' }),\n [CodeBlockPlugin.key]: CodeBlockElement,\n [CodeLinePlugin.key]: CodeLineElement,\n [CodePlugin.key]: CodeLeaf,\n [CodeSyntaxPlugin.key]: CodeSyntaxLeaf,\n [HEADING_KEYS.h1]: withProps(HeadingElement, { variant: 'h1' }),\n [HEADING_KEYS.h2]: withProps(HeadingElement, { variant: 'h2' }),\n [HEADING_KEYS.h3]: withProps(HeadingElement, { variant: 'h3' }),\n [HorizontalRulePlugin.key]: HrElement,\n [ItalicPlugin.key]: withProps(PlateLeaf, { as: 'em' }),\n [LinkPlugin.key]: LinkElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: 's' }),\n [UnderlinePlugin.key]: withProps(PlateLeaf, { as: 'u' }),\n },\n },\n plugins: [\n ParagraphPlugin,\n ...basicNodesPlugins,\n HorizontalRulePlugin,\n linkPlugin,\n ...indentListPlugins,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n // FIXME\n BlockSelectionPlugin.configure({\n api: {},\n extendEditor: null,\n options: {},\n render: {},\n useHooks: null,\n handlers: {},\n }),\n ],\n value: [{ children: [{ text: '' }], type: 'p' }],\n });\n\n return editor;\n};\n\nconst systemCommon = `\\\nYou are an advanced AI-powered note-taking assistant, designed to enhance productivity and creativity in note management.\nRespond directly to user prompts with clear, concise, and relevant content. Maintain a neutral, helpful tone.\n\nRules:\n- is the entire note the user is working on.\n- is a reminder of how you should reply to INSTRUCTIONS. It does not apply to questions.\n- Anything else is the user prompt.\n- Your response should be tailored to the user's prompt, providing precise assistance to optimize note management.\n- For INSTRUCTIONS: Follow the exactly. Provide ONLY the content to be inserted or replaced. No explanations or comments.\n- For QUESTIONS: Provide a helpful and concise answer. You may include brief explanations if necessary.\n- CRITICAL: Distinguish between INSTRUCTIONS and QUESTIONS. Instructions typically ask you to modify or add content. Questions ask for information or clarification.\n`;\n\nconst systemDefault = `\\\n${systemCommon}\n- is the current block of text the user is working on.\n- Ensure your output can seamlessly fit into the existing structure.\n- CRITICAL: Provide only a single block of text. DO NOT create multiple paragraphs or separate blocks.\n\n{block}\n\n`;\n\nconst systemSelecting = `\\\n${systemCommon}\n- is the block of text containing the user's selection, providing context.\n- Ensure your output can seamlessly fit into the existing structure.\n- is the specific text the user has selected in the block and wants to modify or ask about.\n- Consider the context provided by , but only modify . Your response should be a direct replacement for .\n\n{block}\n\n\n{selection}\n\n`;\n\nconst systemBlockSelecting = `\\\n${systemCommon}\n- represents the full blocks of text the user has selected and wants to modify or ask about.\n- Your response should be a direct replacement for the entire .\n- Maintain the overall structure and formatting of the selected blocks, unless explicitly instructed otherwise.\n- CRITICAL: Provide only the content to replace . Do not add additional blocks or change the block structure unless specifically requested.\n\n{block}\n\n`;\n\nconst userDefault = `\nCRITICAL: DO NOT use block formatting. You can only use inline formatting.\nCRITICAL: DO NOT start new lines or paragraphs.\nNEVER write .\n\n{prompt}`;\n\nconst userSelecting = `\nIf this is a question, provide a helpful and concise answer about .\nIf this is an instruction, provide ONLY the text to replace . No explanations.\nEnsure it fits seamlessly within . If is empty, write ONE random sentence.\nNEVER write or .\n\n{prompt} about `;\n\nconst userBlockSelecting = `\nIf this is a question, provide a helpful and concise answer about .\nIf this is an instruction, provide ONLY the content to replace the entire . No explanations.\nMaintain the overall structure unless instructed otherwise.\nNEVER write or .\n\n{prompt} about `;\n\nexport const PROMPT_TEMPLATES = {\n systemBlockSelecting,\n systemDefault,\n systemSelecting,\n userBlockSelecting,\n userDefault,\n userSelecting,\n};\n\nexport const aiPlugins = [\n MarkdownPlugin.configure({ options: { indentList: true } }),\n AIPlugin,\n AIChatPlugin.configure({\n options: {\n createAIEditor,\n promptTemplate: ({ isBlockSelecting, isSelecting }) => {\n return isBlockSelecting\n ? PROMPT_TEMPLATES.userBlockSelecting\n : isSelecting\n ? PROMPT_TEMPLATES.userSelecting\n : PROMPT_TEMPLATES.userDefault;\n },\n systemTemplate: ({ isBlockSelecting, isSelecting }) => {\n return isBlockSelecting\n ? PROMPT_TEMPLATES.systemBlockSelecting\n : isSelecting\n ? PROMPT_TEMPLATES.systemSelecting\n : PROMPT_TEMPLATES.systemDefault;\n },\n },\n render: { afterEditable: () => },\n }),\n] as const;\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport { withProps } from '@udecode/cn';\nimport { AIChatPlugin, AIPlugin } from '@udecode/plate-ai/react';\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport {\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport {\n ParagraphPlugin,\n PlateLeaf,\n createPlateEditor,\n} from '@udecode/plate-common/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\n\nimport { cursorOverlayPlugin } from '@/components/editor/plugins/cursor-overlay-plugin';\nimport { AIMenu } from '@/components/plate-ui/ai-menu';\nimport { BlockquoteElement } from '@/components/plate-ui/blockquote-element';\nimport { CodeBlockElement } from '@/components/plate-ui/code-block-element';\nimport { CodeLeaf } from '@/components/plate-ui/code-leaf';\nimport { CodeLineElement } from '@/components/plate-ui/code-line-element';\nimport { CodeSyntaxLeaf } from '@/components/plate-ui/code-syntax-leaf';\nimport { HeadingElement } from '@/components/plate-ui/heading-element';\nimport { HrElement } from '@/components/plate-ui/hr-element';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { ParagraphElement } from '@/components/plate-ui/paragraph-element';\n\nimport { basicNodesPlugins } from './basic-nodes-plugins';\nimport { blockSelectionReadOnlyPlugin } from './block-selection-plugins';\nimport { indentListPlugins } from './indent-list-plugins';\nimport { linkPlugin } from './link-plugin';\n\nconst createAIEditor = () => {\n const editor = createPlateEditor({\n id: 'ai',\n override: {\n components: {\n [BlockquotePlugin.key]: BlockquoteElement,\n [BoldPlugin.key]: withProps(PlateLeaf, { as: 'strong' }),\n [CodeBlockPlugin.key]: CodeBlockElement,\n [CodeLinePlugin.key]: CodeLineElement,\n [CodePlugin.key]: CodeLeaf,\n [CodeSyntaxPlugin.key]: CodeSyntaxLeaf,\n [HEADING_KEYS.h1]: withProps(HeadingElement, { variant: 'h1' }),\n [HEADING_KEYS.h2]: withProps(HeadingElement, { variant: 'h2' }),\n [HEADING_KEYS.h3]: withProps(HeadingElement, { variant: 'h3' }),\n [HorizontalRulePlugin.key]: HrElement,\n [ItalicPlugin.key]: withProps(PlateLeaf, { as: 'em' }),\n [LinkPlugin.key]: LinkElement,\n [ParagraphPlugin.key]: ParagraphElement,\n [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: 's' }),\n [UnderlinePlugin.key]: withProps(PlateLeaf, { as: 'u' }),\n },\n },\n plugins: [\n ...basicNodesPlugins,\n ...indentListPlugins,\n HorizontalRulePlugin,\n linkPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n blockSelectionReadOnlyPlugin,\n ],\n });\n\n return editor;\n};\n\nconst systemCommon = `\\\nYou are an advanced AI-powered note-taking assistant, designed to enhance productivity and creativity in note management.\nRespond directly to user prompts with clear, concise, and relevant content. Maintain a neutral, helpful tone.\n\nRules:\n- is the entire note the user is working on.\n- is a reminder of how you should reply to INSTRUCTIONS. It does not apply to questions.\n- Anything else is the user prompt.\n- Your response should be tailored to the user's prompt, providing precise assistance to optimize note management.\n- For INSTRUCTIONS: Follow the exactly. Provide ONLY the content to be inserted or replaced. No explanations or comments.\n- For QUESTIONS: Provide a helpful and concise answer. You may include brief explanations if necessary.\n- CRITICAL: Distinguish between INSTRUCTIONS and QUESTIONS. Instructions typically ask you to modify or add content. Questions ask for information or clarification.\n`;\n\nconst systemDefault = `\\\n${systemCommon}\n- is the current block of text the user is working on.\n- Ensure your output can seamlessly fit into the existing structure.\n- CRITICAL: Provide only a single block of text. DO NOT create multiple paragraphs or separate blocks.\n\n{block}\n\n`;\n\nconst systemSelecting = `\\\n${systemCommon}\n- is the block of text containing the user's selection, providing context.\n- Ensure your output can seamlessly fit into the existing structure.\n- is the specific text the user has selected in the block and wants to modify or ask about.\n- Consider the context provided by , but only modify . Your response should be a direct replacement for .\n\n{block}\n\n\n{selection}\n\n`;\n\nconst systemBlockSelecting = `\\\n${systemCommon}\n- represents the full blocks of text the user has selected and wants to modify or ask about.\n- Your response should be a direct replacement for the entire .\n- Maintain the overall structure and formatting of the selected blocks, unless explicitly instructed otherwise.\n- CRITICAL: Provide only the content to replace . Do not add additional blocks or change the block structure unless specifically requested.\n\n{block}\n\n`;\n\nconst userDefault = `\nCRITICAL: DO NOT use block formatting. You can only use inline formatting.\nCRITICAL: DO NOT start new lines or paragraphs.\nNEVER write .\n\n{prompt}`;\n\nconst userSelecting = `\nIf this is a question, provide a helpful and concise answer about .\nIf this is an instruction, provide ONLY the text to replace . No explanations.\nEnsure it fits seamlessly within . If is empty, write ONE random sentence.\nNEVER write or .\n\n{prompt} about `;\n\nconst userBlockSelecting = `\nIf this is a question, provide a helpful and concise answer about .\nIf this is an instruction, provide ONLY the content to replace the entire . No explanations.\nMaintain the overall structure unless instructed otherwise.\nNEVER write or .\n\n{prompt} about `;\n\nexport const PROMPT_TEMPLATES = {\n systemBlockSelecting,\n systemDefault,\n systemSelecting,\n userBlockSelecting,\n userDefault,\n userSelecting,\n};\n\nexport const aiPlugins = [\n cursorOverlayPlugin,\n MarkdownPlugin.configure({ options: { indentList: true } }),\n AIPlugin,\n AIChatPlugin.configure({\n options: {\n createAIEditor,\n promptTemplate: ({ isBlockSelecting, isSelecting }) => {\n return isBlockSelecting\n ? PROMPT_TEMPLATES.userBlockSelecting\n : isSelecting\n ? PROMPT_TEMPLATES.userSelecting\n : PROMPT_TEMPLATES.userDefault;\n },\n systemTemplate: ({ isBlockSelecting, isSelecting }) => {\n return isBlockSelecting\n ? PROMPT_TEMPLATES.systemBlockSelecting\n : isSelecting\n ? PROMPT_TEMPLATES.systemSelecting\n : PROMPT_TEMPLATES.systemDefault;\n },\n },\n render: { afterEditable: () => },\n }),\n] as const;\n", "path": "components/editor/plugins/ai-plugins.tsx", "target": "components/editor/plugins/ai-plugins.tsx", "type": "registry:component" @@ -21,6 +20,8 @@ "name": "ai-plugins", "registryDependencies": [ "basic-nodes-plugins", + "block-selection-plugins", + "cursor-overlay-plugin", "indent-list-plugins", "link-plugin", "ai-menu", diff --git a/apps/www/public/r/styles/default/block-selection-plugins.json b/apps/www/public/r/styles/default/block-selection-plugins.json index 09be42384b..2b6049ba63 100644 --- a/apps/www/public/r/styles/default/block-selection-plugins.json +++ b/apps/www/public/r/styles/default/block-selection-plugins.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "'use client';\n\nimport { BlockSelectionPlugin } from '@udecode/plate-selection/react';\n\nexport const blockSelectionPlugins = [\n BlockSelectionPlugin.configure({\n inject: {\n excludeBelowPlugins: ['tr'],\n excludePlugins: ['table', 'code_line', 'column_group', 'column'],\n },\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 4,\n },\n },\n enableContextMenu: true,\n },\n }),\n] as const;\n", + "content": "'use client';\n\nimport { BlockSelectionPlugin } from '@udecode/plate-selection/react';\n\nexport const blockSelectionPlugins = [\n BlockSelectionPlugin.configure({\n inject: {\n excludeBelowPlugins: ['tr'],\n excludePlugins: ['table', 'code_line', 'column_group', 'column'],\n },\n options: {\n areaOptions: {\n behaviour: {\n scrolling: {\n speedDivider: 1.5,\n },\n startThreshold: 4,\n },\n },\n enableContextMenu: true,\n },\n }),\n] as const;\n\nexport const blockSelectionReadOnlyPlugin = BlockSelectionPlugin.configure({\n api: {},\n extendEditor: null,\n options: {},\n render: {},\n useHooks: null,\n handlers: {},\n});\n", "path": "components/editor/plugins/block-selection-plugins.ts", "target": "components/editor/plugins/block-selection-plugins.ts", "type": "registry:component" diff --git a/apps/www/public/r/styles/default/cursor-overlay-plugin.json b/apps/www/public/r/styles/default/cursor-overlay-plugin.json new file mode 100644 index 0000000000..e822f2561a --- /dev/null +++ b/apps/www/public/r/styles/default/cursor-overlay-plugin.json @@ -0,0 +1,18 @@ +{ + "dependencies": [ + "@udecode/plate-selection" + ], + "files": [ + { + "content": "import { CursorOverlayPlugin } from '@udecode/plate-selection/react';\n\nimport { CursorOverlay } from '@/components/plate-ui/cursor-overlay';\n\nexport const cursorOverlayPlugin = CursorOverlayPlugin.configure({\n render: {\n afterEditable: () => ,\n },\n});\n", + "path": "components/editor/plugins/cursor-overlay-plugin.tsx", + "target": "components/editor/plugins/cursor-overlay-plugin.tsx", + "type": "registry:component" + } + ], + "name": "cursor-overlay-plugin", + "registryDependencies": [ + "cursor-overlay" + ], + "type": "registry:component" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/editor-basic.json b/apps/www/public/r/styles/default/editor-basic.json index abb17070bf..3177538874 100644 --- a/apps/www/public/r/styles/default/editor-basic.json +++ b/apps/www/public/r/styles/default/editor-basic.json @@ -18,7 +18,7 @@ "type": "registry:component" }, { - "content": "'use client';\n\nimport { withProps } from '@udecode/cn';\nimport { BasicElementsPlugin } from '@udecode/plate-basic-elements/react';\nimport {\n BasicMarksPlugin,\n BoldPlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport {\n ParagraphPlugin,\n PlateElement,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\n\nexport const useCreateEditor = () => {\n return usePlateEditor({\n override: {\n // Default styles in globals.css\n components: {\n [BoldPlugin.key]: withProps(PlateLeaf, { as: 'strong' }),\n [ItalicPlugin.key]: withProps(PlateLeaf, { as: 'em' }),\n [ParagraphPlugin.key]: withProps(PlateElement, {\n as: 'p',\n className: 'mb-4',\n }),\n [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: 's' }),\n [UnderlinePlugin.key]: withProps(PlateLeaf, { as: 'u' }),\n blockquote: withProps(PlateElement, {\n as: 'blockquote',\n className: 'mb-4 border-l-4 border-[#d0d7de] pl-4 text-[#636c76]',\n }),\n h1: withProps(PlateElement, {\n as: 'h1',\n className:\n 'mb-4 mt-6 text-3xl font-semibold tracking-tight lg:text-4xl',\n }),\n h2: withProps(PlateElement, {\n as: 'h2',\n className: 'mb-4 mt-6 text-2xl font-semibold tracking-tight',\n }),\n h3: withProps(PlateElement, {\n as: 'h3',\n className: 'mb-4 mt-6 text-xl font-semibold tracking-tight',\n }),\n },\n },\n plugins: [BasicElementsPlugin, BasicMarksPlugin],\n value: [\n {\n children: [{ text: 'Basic Editor' }],\n type: 'h1',\n },\n {\n children: [{ text: 'Heading 2' }],\n type: 'h2',\n },\n {\n children: [{ text: 'Heading 3' }],\n type: 'h3',\n },\n {\n children: [{ text: 'This is a blockquote element' }],\n type: 'blockquote',\n },\n {\n children: [\n { text: 'Basic marks: ' },\n { bold: true, text: 'bold' },\n { text: ', ' },\n { italic: true, text: 'italic' },\n { text: ', ' },\n { text: 'underline', underline: true },\n { text: ', ' },\n { strikethrough: true, text: 'strikethrough' },\n { text: '.' },\n ],\n type: ParagraphPlugin.key,\n },\n ],\n });\n};\n", + "content": "'use client';\n\nimport { withProps } from '@udecode/cn';\nimport { BasicElementsPlugin } from '@udecode/plate-basic-elements/react';\nimport {\n BasicMarksPlugin,\n BoldPlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport {\n ParagraphPlugin,\n PlateElement,\n PlateLeaf,\n usePlateEditor,\n} from '@udecode/plate-common/react';\n\nexport const useCreateEditor = () => {\n return usePlateEditor({\n override: {\n components: {\n [BoldPlugin.key]: withProps(PlateLeaf, { as: 'strong' }),\n [ItalicPlugin.key]: withProps(PlateLeaf, { as: 'em' }),\n [ParagraphPlugin.key]: withProps(PlateElement, {\n as: 'p',\n className: 'mb-4',\n }),\n [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: 's' }),\n [UnderlinePlugin.key]: withProps(PlateLeaf, { as: 'u' }),\n blockquote: withProps(PlateElement, {\n as: 'blockquote',\n className: 'mb-4 border-l-4 border-[#d0d7de] pl-4 text-[#636c76]',\n }),\n h1: withProps(PlateElement, {\n as: 'h1',\n className:\n 'mb-4 mt-6 text-3xl font-semibold tracking-tight lg:text-4xl',\n }),\n h2: withProps(PlateElement, {\n as: 'h2',\n className: 'mb-4 mt-6 text-2xl font-semibold tracking-tight',\n }),\n h3: withProps(PlateElement, {\n as: 'h3',\n className: 'mb-4 mt-6 text-xl font-semibold tracking-tight',\n }),\n },\n },\n plugins: [BasicElementsPlugin, BasicMarksPlugin],\n value: [\n {\n children: [{ text: 'Basic Editor' }],\n type: 'h1',\n },\n {\n children: [{ text: 'Heading 2' }],\n type: 'h2',\n },\n {\n children: [{ text: 'Heading 3' }],\n type: 'h3',\n },\n {\n children: [{ text: 'This is a blockquote element' }],\n type: 'blockquote',\n },\n {\n children: [\n { text: 'Basic marks: ' },\n { bold: true, text: 'bold' },\n { text: ', ' },\n { italic: true, text: 'italic' },\n { text: ', ' },\n { text: 'underline', underline: true },\n { text: ', ' },\n { strikethrough: true, text: 'strikethrough' },\n { text: '.' },\n ],\n type: ParagraphPlugin.key,\n },\n ],\n });\n};\n", "path": "block/editor-basic/components/editor/use-create-editor.tsx", "target": "components/editor/use-create-editor.tsx", "type": "registry:component" diff --git a/apps/www/public/r/styles/default/resizable.json b/apps/www/public/r/styles/default/resizable.json index 5d90490e6f..8978380ac1 100644 --- a/apps/www/public/r/styles/default/resizable.json +++ b/apps/www/public/r/styles/default/resizable.json @@ -16,7 +16,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef, withVariants } from '@udecode/cn';\nimport {\n Resizable as ResizablePrimitive,\n ResizeHandle as ResizeHandlePrimitive,\n} from '@udecode/plate-resizable';\nimport { cva } from 'class-variance-authority';\n\nexport const mediaResizeHandleVariants = cva(\n cn(\n 'top-0 flex w-6 select-none flex-col justify-center',\n \"after:flex after:h-16 after:w-[3px] after:rounded-[6px] after:bg-ring after:opacity-0 after:content-['_'] group-hover:after:opacity-100\"\n ),\n {\n variants: {\n direction: {\n left: '-left-3 -ml-3 pl-3',\n right: '-right-3 -mr-3 items-end pr-3',\n },\n },\n }\n);\n\nconst resizeHandleVariants = cva(cn('absolute z-40'), {\n variants: {\n direction: {\n bottom: 'w-full cursor-row-resize',\n left: 'h-full cursor-col-resize',\n right: 'h-full cursor-col-resize',\n top: 'w-full cursor-row-resize',\n },\n },\n});\n\nconst ResizeHandleVariants = withVariants(\n ResizeHandlePrimitive,\n resizeHandleVariants,\n ['direction']\n);\n\nexport const ResizeHandle = withRef(\n (props, ref) => (\n \n )\n);\n\nconst resizableVariants = cva('', {\n variants: {\n align: {\n center: 'mx-auto',\n left: 'mr-auto',\n right: 'ml-auto',\n },\n },\n});\n\nexport const Resizable = withVariants(ResizablePrimitive, resizableVariants, [\n 'align',\n]);\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, createPrimitiveElement, withRef, withVariants } from '@udecode/cn';\nimport {\n type ResizeHandle as ResizeHandlePrimitive,\n Resizable as ResizablePrimitive,\n useResizeHandle,\n useResizeHandleState,\n} from '@udecode/plate-resizable';\nimport { cva } from 'class-variance-authority';\n\nexport const mediaResizeHandleVariants = cva(\n cn(\n 'top-0 flex w-6 select-none flex-col justify-center',\n \"after:flex after:h-16 after:w-[3px] after:rounded-[6px] after:bg-ring after:opacity-0 after:content-['_'] group-hover:after:opacity-100\"\n ),\n {\n variants: {\n direction: {\n left: '-left-3 -ml-3 pl-3',\n right: '-right-3 -mr-3 items-end pr-3',\n },\n },\n }\n);\n\nconst resizeHandleVariants = cva(cn('absolute z-40'), {\n variants: {\n direction: {\n bottom: 'w-full cursor-row-resize',\n left: 'h-full cursor-col-resize',\n right: 'h-full cursor-col-resize',\n top: 'w-full cursor-row-resize',\n },\n },\n});\n\nconst ResizeHandleVariants = withVariants(\n createPrimitiveElement('div'),\n resizeHandleVariants,\n ['direction']\n);\n\nexport const ResizeHandle = withRef(\n ({ options, ...props }, ref) => {\n const state = useResizeHandleState(options ?? {});\n const resizeHandle = useResizeHandle(state);\n\n if (state.readOnly) return null;\n\n return (\n \n );\n }\n);\n\nconst resizableVariants = cva('', {\n variants: {\n align: {\n center: 'mx-auto',\n left: 'mr-auto',\n right: 'ml-auto',\n },\n },\n});\n\nexport const Resizable = withVariants(ResizablePrimitive, resizableVariants, [\n 'align',\n]);\n", "path": "plate-ui/resizable.tsx", "target": "components/plate-ui/resizable.tsx", "type": "registry:ui" diff --git a/apps/www/src/__registry__/index.tsx b/apps/www/src/__registry__/index.tsx index 32a3cf6184..bde83db01b 100644 --- a/apps/www/src/__registry__/index.tsx +++ b/apps/www/src/__registry__/index.tsx @@ -1077,7 +1077,7 @@ export const Index: Record = { name: "ai-plugins", description: "", type: "registry:component", - registryDependencies: ["basic-nodes-plugins","indent-list-plugins","link-plugin","ai-menu","blockquote-element","code-block-element","code-leaf","code-line-element","code-syntax-leaf","cursor-overlay","heading-element","hr-element","link-element","paragraph-element"], + registryDependencies: ["basic-nodes-plugins","block-selection-plugins","cursor-overlay-plugin","indent-list-plugins","link-plugin","ai-menu","blockquote-element","code-block-element","code-leaf","code-line-element","code-syntax-leaf","cursor-overlay","heading-element","hr-element","link-element","paragraph-element"], files: ["registry/default/components/editor/plugins/ai-plugins.tsx"], component: React.lazy(() => import("@/registry/default/components/editor/plugins/ai-plugins.tsx")), source: "", @@ -1169,6 +1169,18 @@ export const Index: Record = { subcategory: "", chunks: [] }, + "cursor-overlay-plugin": { + name: "cursor-overlay-plugin", + description: "", + type: "registry:component", + registryDependencies: ["cursor-overlay"], + files: ["registry/default/components/editor/plugins/cursor-overlay-plugin.tsx"], + component: React.lazy(() => import("@/registry/default/components/editor/plugins/cursor-overlay-plugin.tsx")), + source: "", + category: "", + subcategory: "", + chunks: [] + }, "copilot-plugins": { name: "copilot-plugins", description: "", From 1f073469d2ea93477e2c36bd59bd4ee0e53aeb46 Mon Sep 17 00:00:00 2001 From: zbeyens Date: Wed, 13 Nov 2024 19:31:28 +0100 Subject: [PATCH 06/10] fix --- packages/core/src/react/stores/plate/createPlateStore.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/core/src/react/stores/plate/createPlateStore.ts b/packages/core/src/react/stores/plate/createPlateStore.ts index 23869e298b..cbbfd1b164 100644 --- a/packages/core/src/react/stores/plate/createPlateStore.ts +++ b/packages/core/src/react/stores/plate/createPlateStore.ts @@ -27,6 +27,7 @@ export const createPlateStore = ({ readOnly = null, renderElement = null, renderLeaf = null, + scrollRef = { current: null }, versionDecorate = 1, versionEditor = 1, versionSelection = 1, @@ -46,6 +47,7 @@ export const createPlateStore = ({ readOnly, renderElement, renderLeaf, + scrollRef, versionDecorate, versionEditor, versionSelection, From f0bac612ce7c1908c3c7f26707d32e4818ca4222 Mon Sep 17 00:00:00 2001 From: zbeyens Date: Wed, 13 Nov 2024 19:40:19 +0100 Subject: [PATCH 07/10] revert --- templates/plate-template/src/app/globals.css | 61 ++---- .../editor/plugins/editor-plugins.tsx | 98 --------- .../components/editor/use-create-editor.tsx | 199 ++++++------------ templates/plate-template/tailwind.config.ts | 139 +----------- 4 files changed, 89 insertions(+), 408 deletions(-) delete mode 100644 templates/plate-template/src/components/editor/plugins/editor-plugins.tsx diff --git a/templates/plate-template/src/app/globals.css b/templates/plate-template/src/app/globals.css index db79ae062f..09c15d81a3 100644 --- a/templates/plate-template/src/app/globals.css +++ b/templates/plate-template/src/app/globals.css @@ -68,37 +68,32 @@ body { } [data-registry="plate"] { --background: 0 0% 100%; - --foreground: 240 10% 3.9%; + --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; - --card-foreground: 240 10% 3.9%; + --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; - --popover-foreground: 240 10% 3.9%; - --primary: 240 5.9% 10%; - --primary-foreground: 0 0% 98%; - --secondary: 240 4.8% 95.9%; - --secondary-foreground: 240 5.9% 10%; - --muted: 240 4.8% 95.9%; - --muted-foreground: 240 3.8% 46.1%; - --accent: 240 4.8% 95.9%; - --accent-foreground: 240 5.9% 10%; - --destructive: 0 72.22% 50.59%; - --destructive-foreground: 0 0% 98%; - --border: 240 5.9% 90%; - --input: 240 5.9% 90%; - --ring: 240 5% 64.9%; + --popover-foreground: 222.2 84% 4.9%; + --primary: 222.2 47.4% 11.2%; + --primary-foreground: 210 40% 98%; + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 210 40% 98%; + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + --ring: 222.2 84% 4.9%; + --chart-1: 12 76% 61%; + --chart-2: 173 58% 39%; + --chart-3: 197 37% 24%; + --chart-4: 43 74% 66%; + --chart-5: 27 87% 67%; --radius: 0.5rem; - - --brand: 211 77% 51%; - --brand-foreground: 0 0% 100%; - --brand-hover: 211 77% 46%; - --brand-active: 211 77% 41%; - --highlight: 48 100% 50%; - --highlight-foreground: 10 105 218; - --subtle-foreground: 240 5% 34%; - - :focus-visible { - @apply outline-none; - } + --brand: 217.2 91.2% 59.8%; + --highlight: 47.9 95.8% 53.1%; } [data-registry="plate"].dark { --background: 222.2 84% 4.9%; @@ -138,13 +133,3 @@ body { @apply bg-background text-foreground; } } - -@layer utilities { - .focus-ring:focus-visible { - @apply ring-2 ring-ring ring-offset-2; - } - - .no-focus-ring:focus-visible { - @apply !ring-0 !ring-offset-0; - } -} \ No newline at end of file diff --git a/templates/plate-template/src/components/editor/plugins/editor-plugins.tsx b/templates/plate-template/src/components/editor/plugins/editor-plugins.tsx deleted file mode 100644 index 1934f54437..0000000000 --- a/templates/plate-template/src/components/editor/plugins/editor-plugins.tsx +++ /dev/null @@ -1,98 +0,0 @@ -'use client'; - -import { CalloutPlugin } from '@udecode/plate-callout/react'; -import { ParagraphPlugin } from '@udecode/plate-common/react'; -import { DatePlugin } from '@udecode/plate-date/react'; -import { DocxPlugin } from '@udecode/plate-docx'; -import { EmojiPlugin } from '@udecode/plate-emoji/react'; -import { - FontBackgroundColorPlugin, - FontColorPlugin, -} from '@udecode/plate-font/react'; -import { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react'; -import { JuicePlugin } from '@udecode/plate-juice'; -import { ColumnPlugin } from '@udecode/plate-layout/react'; -import { MarkdownPlugin } from '@udecode/plate-markdown'; -import { - EquationPlugin, - InlineEquationPlugin, -} from '@udecode/plate-math/react'; -import { CursorOverlayPlugin } from '@udecode/plate-selection/react'; -import { SlashPlugin } from '@udecode/plate-slash-command/react'; -import { TogglePlugin } from '@udecode/plate-toggle/react'; -import { TrailingBlockPlugin } from '@udecode/plate-trailing-block'; - -import { basicNodesPlugins } from '@/components/editor/plugins/basic-nodes-plugins'; -import { deletePlugins } from '@/components/editor/plugins/delete-plugins'; -import { exitBreakPlugin } from '@/components/editor/plugins/exit-break-plugin'; -import { indentListPlugins } from '@/components/editor/plugins/indent-list-plugins'; -import { linkPlugin } from '@/components/editor/plugins/link-plugin'; -import { mediaPlugins } from '@/components/editor/plugins/media-plugins'; -import { mentionPlugin } from '@/components/editor/plugins/mention-plugin'; -import { softBreakPlugin } from '@/components/editor/plugins/soft-break-plugin'; -import { tablePlugin } from '@/components/editor/plugins/table-plugin'; -import { tocPlugin } from '@/components/editor/plugins/toc-plugin'; -import { CursorOverlay } from '@/components/potion-ui/cursor-overlay'; - -import { aiPlugins } from './ai-plugins'; -import { autoformatPlugin } from './autoformat-plugin'; -import { blockMenuPlugins } from './block-menu-plugins'; -import { commentsPlugin } from './comments-plugin'; -import { dndPlugins } from './dnd-plugins'; -import { FloatingToolbarPlugin } from './floating-toolbar-plugin'; -import { resetBlockTypePlugin } from './reset-node-plugin'; - -export const editorPlugins = [ - // AI - ...aiPlugins, - - // Nodes - ...basicNodesPlugins, - HorizontalRulePlugin, - linkPlugin, - DatePlugin, - mentionPlugin, - SlashPlugin, - tablePlugin, - TogglePlugin, - tocPlugin, - ...mediaPlugins, - InlineEquationPlugin, - EquationPlugin, - CalloutPlugin, - ColumnPlugin, - - // Marks - FontColorPlugin, - FontBackgroundColorPlugin, - - // Block Style - ...indentListPlugins, - - // Functionality - autoformatPlugin, - CursorOverlayPlugin.configure({ - render: { afterEditable: () => }, - }), - ...blockMenuPlugins, - ...dndPlugins, - EmojiPlugin, - exitBreakPlugin, - resetBlockTypePlugin, - ...deletePlugins, - softBreakPlugin, - TrailingBlockPlugin.configure({ - options: { type: ParagraphPlugin.key }, - }), - - // Collaboration - commentsPlugin, - - // Deserialization - DocxPlugin, - MarkdownPlugin.configure({ options: { indentList: true } }), - JuicePlugin, - - // UI - FloatingToolbarPlugin, -]; diff --git a/templates/plate-template/src/components/editor/use-create-editor.tsx b/templates/plate-template/src/components/editor/use-create-editor.tsx index 59757a4735..ef89c6c2dd 100644 --- a/templates/plate-template/src/components/editor/use-create-editor.tsx +++ b/templates/plate-template/src/components/editor/use-create-editor.tsx @@ -1,154 +1,85 @@ 'use client'; import { withProps } from '@udecode/cn'; -import { AIPlugin } from '@udecode/plate-ai/react'; +import { BasicElementsPlugin } from '@udecode/plate-basic-elements/react'; import { + BasicMarksPlugin, BoldPlugin, - CodePlugin, ItalicPlugin, StrikethroughPlugin, UnderlinePlugin, } from '@udecode/plate-basic-marks/react'; -import { BlockquotePlugin } from '@udecode/plate-block-quote/react'; -import { CalloutPlugin } from '@udecode/plate-callout/react'; -import { - CodeBlockPlugin, - CodeLinePlugin, - CodeSyntaxPlugin, -} from '@udecode/plate-code-block/react'; -import { CommentsPlugin } from '@udecode/plate-comments/react'; import { ParagraphPlugin, + PlateElement, PlateLeaf, usePlateEditor, } from '@udecode/plate-common/react'; -import { DatePlugin } from '@udecode/plate-date/react'; -import { EmojiInputPlugin } from '@udecode/plate-emoji/react'; -import { HEADING_KEYS } from '@udecode/plate-heading'; -import { TocPlugin } from '@udecode/plate-heading/react'; -import { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react'; -import { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react'; -import { LinkPlugin } from '@udecode/plate-link/react'; -import { - EquationPlugin, - InlineEquationPlugin, -} from '@udecode/plate-math/react'; -import { - AudioPlugin, - FilePlugin, - ImagePlugin, - MediaEmbedPlugin, - PlaceholderPlugin, - VideoPlugin, -} from '@udecode/plate-media/react'; -import { - MentionInputPlugin, - MentionPlugin, -} from '@udecode/plate-mention/react'; -import { SlashInputPlugin } from '@udecode/plate-slash-command/react'; -import { - TableCellHeaderPlugin, - TableCellPlugin, - TablePlugin, - TableRowPlugin, -} from '@udecode/plate-table/react'; -import { TogglePlugin } from '@udecode/plate-toggle/react'; - -import { AILeaf } from '@/components/potion-ui/ai-leaf'; -import { BlockquoteElement } from '@/components/potion-ui/blockquote-element'; -import { CalloutElement } from '@/components/potion-ui/callout-element'; -import { CodeBlockElement } from '@/components/potion-ui/code-block-element'; -import { CodeLeaf } from '@/components/potion-ui/code-leaf'; -import { CodeLineElement } from '@/components/potion-ui/code-line-element'; -import { CodeSyntaxLeaf } from '@/components/potion-ui/code-syntax-leaf'; -import { ColumnElement } from '@/components/potion-ui/column-element'; -import { ColumnGroupElement } from '@/components/potion-ui/column-group-element'; -import { CommentLeaf } from '@/components/potion-ui/comment-leaf'; -import { DateElement } from '@/components/potion-ui/date-element'; -import { EmojiInputElement } from '@/components/potion-ui/emoji-input-element'; -import { EquationElement } from '@/components/potion-ui/equation-element'; -import { HeadingElement } from '@/components/potion-ui/heading-element'; -import { HrElement } from '@/components/potion-ui/hr-element'; -import { ImageElement } from '@/components/potion-ui/image-element'; -import { InlineEquationElement } from '@/components/potion-ui/inline-equation-element'; -import { LinkElement } from '@/components/potion-ui/link-element'; -import { MediaAudioElement } from '@/components/potion-ui/media-audio-element'; -import { MediaEmbedElement } from '@/components/potion-ui/media-embed-element'; -import { MediaFileElement } from '@/components/potion-ui/media-file-element'; -import { MediaPlaceholderElement } from '@/components/potion-ui/media-placeholder-element'; -import { MediaVideoElement } from '@/components/potion-ui/media-video-element'; -import { MentionElement } from '@/components/potion-ui/mention-element'; -import { MentionInputElement } from '@/components/potion-ui/mention-input-element'; -import { ParagraphElement } from '@/components/potion-ui/paragraph-element'; -import { withPlaceholders } from '@/components/potion-ui/placeholder'; -import { SlashInputElement } from '@/components/potion-ui/slash-input-element'; -import { - TableCellElement, - TableCellHeaderElement, -} from '@/components/potion-ui/table-cell-element'; -import { TableElement } from '@/components/potion-ui/table-element'; -import { TableRowElement } from '@/components/potion-ui/table-row-element'; -import { TocElement } from '@/components/potion-ui/toc-element'; -import { ToggleElement } from '@/components/potion-ui/toggle-element'; -import { withDraggables } from '@/components/potion-ui/with-draggables'; - -import { editorPlugins } from './plugins/editor-plugins'; -export const useCreateEditor = ({ - components, - plugins = editorPlugins, - value, -}: { - components?: Record; -} & Parameters[0] = {}) => { +export const useCreateEditor = () => { return usePlateEditor({ override: { - components: withPlaceholders( - withDraggables({ - [AIPlugin.key]: AILeaf, - [AudioPlugin.key]: MediaAudioElement, - [BlockquotePlugin.key]: BlockquoteElement, - [BoldPlugin.key]: withProps(PlateLeaf, { as: 'strong' }), - [CalloutPlugin.key]: CalloutElement, - [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, - [EquationPlugin.key]: EquationElement, - [FilePlugin.key]: MediaFileElement, - [HEADING_KEYS.h1]: withProps(HeadingElement, { variant: 'h1' }), - [HEADING_KEYS.h2]: withProps(HeadingElement, { variant: 'h2' }), - [HEADING_KEYS.h3]: withProps(HeadingElement, { variant: 'h3' }), - [HorizontalRulePlugin.key]: HrElement, - [ImagePlugin.key]: ImageElement, - [InlineEquationPlugin.key]: InlineEquationElement, - [ItalicPlugin.key]: withProps(PlateLeaf, { as: 'em' }), - [LinkPlugin.key]: LinkElement, - [MediaEmbedPlugin.key]: MediaEmbedElement, - [MentionInputPlugin.key]: MentionInputElement, - [MentionPlugin.key]: MentionElement, - [ParagraphPlugin.key]: ParagraphElement, - [PlaceholderPlugin.key]: MediaPlaceholderElement, - [SlashInputPlugin.key]: SlashInputElement, - [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: 's' }), - [TableCellHeaderPlugin.key]: TableCellHeaderElement, - [TableCellPlugin.key]: TableCellElement, - [TablePlugin.key]: TableElement, - [TableRowPlugin.key]: TableRowElement, - [TocPlugin.key]: TocElement, - [TogglePlugin.key]: ToggleElement, - [UnderlinePlugin.key]: withProps(PlateLeaf, { as: 'u' }), - [VideoPlugin.key]: MediaVideoElement, - ...components, - }) - ), + // Default styles in globals.css + components: { + [BoldPlugin.key]: withProps(PlateLeaf, { as: 'strong' }), + [ItalicPlugin.key]: withProps(PlateLeaf, { as: 'em' }), + [ParagraphPlugin.key]: withProps(PlateElement, { + as: 'p', + className: 'mb-4', + }), + [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: 's' }), + [UnderlinePlugin.key]: withProps(PlateLeaf, { as: 'u' }), + blockquote: withProps(PlateElement, { + as: 'blockquote', + className: 'mb-4 border-l-4 border-[#d0d7de] pl-4 text-[#636c76]', + }), + h1: withProps(PlateElement, { + as: 'h1', + className: + 'mb-4 mt-6 text-3xl font-semibold tracking-tight lg:text-4xl', + }), + h2: withProps(PlateElement, { + as: 'h2', + className: 'mb-4 mt-6 text-2xl font-semibold tracking-tight', + }), + h3: withProps(PlateElement, { + as: 'h3', + className: 'mb-4 mt-6 text-xl font-semibold tracking-tight', + }), + }, }, - plugins, - value, + plugins: [BasicElementsPlugin, BasicMarksPlugin], + value: [ + { + children: [{ text: 'Basic Editor' }], + type: 'h1', + }, + { + children: [{ text: 'Heading 2' }], + type: 'h2', + }, + { + children: [{ text: 'Heading 3' }], + type: 'h3', + }, + { + children: [{ text: 'This is a blockquote element' }], + type: 'blockquote', + }, + { + children: [ + { text: 'Basic marks: ' }, + { bold: true, text: 'bold' }, + { text: ', ' }, + { italic: true, text: 'italic' }, + { text: ', ' }, + { text: 'underline', underline: true }, + { text: ', ' }, + { strikethrough: true, text: 'strikethrough' }, + { text: '.' }, + ], + type: ParagraphPlugin.key, + }, + ], }); }; diff --git a/templates/plate-template/tailwind.config.ts b/templates/plate-template/tailwind.config.ts index 2d11244d8a..f2624f1bbd 100644 --- a/templates/plate-template/tailwind.config.ts +++ b/templates/plate-template/tailwind.config.ts @@ -1,7 +1,5 @@ import type { Config } from 'tailwindcss'; -import plugin from 'tailwindcss/plugin'; - const config: Config = { content: [ './src/pages/**/*.{js,ts,jsx,tsx,mdx}', @@ -9,48 +7,13 @@ const config: Config = { './src/app/**/*.{js,ts,jsx,tsx,mdx}', ], darkMode: ['class'], - plugins: [ - require('tailwindcss-animate'), - require('tailwind-scrollbar-hide'), - plugin(function ({ addUtilities }) { - addUtilities({ - '.transition-bg-ease': { - 'transition-duration': '20ms', - 'transition-property': 'background-color', - 'transition-timing-function': 'ease-in', - }, - }); - }), - ], + plugins: [require('tailwindcss-animate'), require('tailwind-scrollbar-hide')], theme: { extend: { - animation: { - 'accordion-down': 'accordion-down 0.2s ease-out', - 'accordion-up': 'accordion-up 0.2s ease-out', - 'ai-bounce': 'ai-bounce 0.4s infinite', - 'fade-down': 'fade-down 0.5s', - 'fade-in': 'fade-in 0.4s', - 'fade-out': 'fade-out 0.4s', - 'fade-up': 'fade-up 0.5s', - popover: 'popover 100ms ease-in', - pulse: 'pulse var(--duration) ease-out infinite', - shimmer: 'shimmer 4s ease-in-out infinite', - shine: 'shine 8s ease-in-out infinite', - sunlight: 'sunlight 4s linear infinite', - zoom: 'zoom 100ms ease-in', - }, borderRadius: { lg: 'var(--radius)', md: 'calc(var(--radius) - 2px)', sm: 'calc(var(--radius) - 4px)', - xl: `calc(var(--radius) + 4px)`, - xs: 'calc(var(--radius) - 6px)', - }, - boxShadow: { - floating: - 'rgba(16,16,16,0.06) 0px 0px 0px 1px, rgba(16,16,16,0.11) 0px 3px 7px, rgba(16,16,16,0.21) 0px 9px 25px', - toolbar: - 'rgba(0, 0, 0, 0.08) 0px 16px 24px 0px, rgba(0, 0, 0, 0.1) 0px 2px 6px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px', }, colors: { accent: { @@ -61,9 +24,7 @@ const config: Config = { border: 'hsl(var(--border))', brand: { DEFAULT: 'hsl(var(--brand))', - active: 'hsl(var(--brand-active))', foreground: 'hsl(var(--brand-foreground))', - hover: 'hsl(var(--brand-hover))', }, card: { DEFAULT: 'hsl(var(--card))', @@ -103,104 +64,6 @@ const config: Config = { DEFAULT: 'hsl(var(--secondary))', foreground: 'hsl(var(--secondary-foreground))', }, - 'subtle-foreground': 'hsl(var(--subtle-foreground))', - }, - container: { - screens: { - '2xl': '1400px', - }, - }, - keyframes: { - 'accordion-down': { - from: { height: '0' }, - to: { height: 'var(--radix-accordion-content-height)' }, - }, - 'accordion-up': { - from: { height: 'var(--radix-accordion-content-height)' }, - to: { height: '0' }, - }, - 'ai-bounce': { - '0%, 100%': { - animationTimingFunction: 'cubic-bezier(0,0,0.2,1)', - transform: 'translateY(20%)', - }, - '50%': { - animationTimingFunction: 'cubic-bezier(0.8,0,1,1)', - transform: 'translateY(-20%)', - }, - }, - 'fade-down': { - '0%': { - opacity: '0', - transform: 'translateY(-10px)', - }, - '80%': { - opacity: '0.6', - }, - '100%': { - opacity: '1', - transform: 'translateY(0px)', - }, - }, - 'fade-in': { - '0%': { - opacity: '0', - }, - '50%': { - opacity: '0.6', - }, - '100%': { - opacity: '1', - }, - }, - 'fade-out': { - '0%': { - opacity: '0', - }, - '50%': { - opacity: '0.6', - }, - '100%': { - opacity: '1', - }, - }, - 'fade-up': { - '0%': { - opacity: '0', - transform: 'translateY(10px)', - }, - '80%': { - opacity: '0.7', - }, - '100%': { - opacity: '1', - transform: 'translateY(0px)', - }, - }, - popover: { - '0%': { opacity: '0' }, - '100%': { opacity: '1' }, - }, - pulse: { - '0%, 100%': { boxShadow: '0 0 0 0 var(--pulse-color)' }, - '50%': { boxShadow: '0 0 0 8px var(--pulse-color)' }, - }, - shimmer: { - '0%': { transform: 'translateX(-150%)' }, - '100%': { transform: 'translateX(150%)' }, - }, - shine: { - from: { backgroundPosition: '200% 0' }, - to: { backgroundPosition: '-200% 0' }, - }, - sunlight: { - '0%': { transform: 'translateX(-50%) rotate(0deg)' }, - '100%': { transform: 'translateX(0%) rotate(0deg)' }, - }, - zoom: { - '0%': { opacity: '0', transform: 'scale(0.95)' }, - '100%': { opacity: '1', transform: 'scale(1)' }, - }, }, screens: { 'main-hover': { From 3680cb81b089ede36bb8a2bcca40e2c1c607543a Mon Sep 17 00:00:00 2001 From: zbeyens Date: Wed, 13 Nov 2024 19:52:09 +0100 Subject: [PATCH 08/10] fix --- packages/core/src/react/stores/plate/createPlateStore.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/core/src/react/stores/plate/createPlateStore.ts b/packages/core/src/react/stores/plate/createPlateStore.ts index cbbfd1b164..5abfff443b 100644 --- a/packages/core/src/react/stores/plate/createPlateStore.ts +++ b/packages/core/src/react/stores/plate/createPlateStore.ts @@ -93,10 +93,6 @@ export const usePlateEditorStore = ( // Try to fetch the store from a Plate provider const localStore = usePlateStore(id).store({ warnIfNoStore: false }) ?? null; - /** - * To preserve hook order, only use `localStore` if it was present on first - * render. This lets us call `usePlateControllerEditorStore` conditionally. - */ const [localStoreExists] = React.useState(!!localStore); // If no store was found, try to fetch the store from a PlateController From 02a12b7a70623f27010c3b4ad052b7e3b8ea3e65 Mon Sep 17 00:00:00 2001 From: zbeyens Date: Wed, 13 Nov 2024 20:03:00 +0100 Subject: [PATCH 09/10] fix --- .../default/components/editor/plugins/cursor-overlay-plugin.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/apps/www/src/registry/default/components/editor/plugins/cursor-overlay-plugin.tsx b/apps/www/src/registry/default/components/editor/plugins/cursor-overlay-plugin.tsx index 3324194293..0fd2a1009e 100644 --- a/apps/www/src/registry/default/components/editor/plugins/cursor-overlay-plugin.tsx +++ b/apps/www/src/registry/default/components/editor/plugins/cursor-overlay-plugin.tsx @@ -1,3 +1,5 @@ +'use client'; + import { CursorOverlayPlugin } from '@udecode/plate-selection/react'; import { CursorOverlay } from '@/registry/default/plate-ui/cursor-overlay'; From 05460739f41339cddb8050c732c6d25ad3ba003b Mon Sep 17 00:00:00 2001 From: zbeyens Date: Wed, 13 Nov 2024 20:04:19 +0100 Subject: [PATCH 10/10] fix --- apps/www/public/r/styles/default/cursor-overlay-plugin.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/www/public/r/styles/default/cursor-overlay-plugin.json b/apps/www/public/r/styles/default/cursor-overlay-plugin.json index e822f2561a..547de77c40 100644 --- a/apps/www/public/r/styles/default/cursor-overlay-plugin.json +++ b/apps/www/public/r/styles/default/cursor-overlay-plugin.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "import { CursorOverlayPlugin } from '@udecode/plate-selection/react';\n\nimport { CursorOverlay } from '@/components/plate-ui/cursor-overlay';\n\nexport const cursorOverlayPlugin = CursorOverlayPlugin.configure({\n render: {\n afterEditable: () => ,\n },\n});\n", + "content": "'use client';\n\nimport { CursorOverlayPlugin } from '@udecode/plate-selection/react';\n\nimport { CursorOverlay } from '@/components/plate-ui/cursor-overlay';\n\nexport const cursorOverlayPlugin = CursorOverlayPlugin.configure({\n render: {\n afterEditable: () => ,\n },\n});\n", "path": "components/editor/plugins/cursor-overlay-plugin.tsx", "target": "components/editor/plugins/cursor-overlay-plugin.tsx", "type": "registry:component"