Merge pull request #4090 from udecode/feat/below-root-nodes

PlatePlugin: belowRootNodes

Author: zbeyens

.changeset/gorgeous-dolls-divide.md

@@ -0,0 +1,6 @@
+---
+'@udecode/plate-utils': patch
+'@udecode/plate-core': patch
+---
+
+Add `belowRootNodes` render option to render content below root element but above children. Similar to `belowNodes` but renders directly in the element rather than wrapping. This is used in `PlateElement` to render the `BlockSelection` component below the root element.

apps/www/content/docs/en/api/core/plate-plugin.mdx

@@ -165,6 +165,9 @@ Renders a component before the Editable component.
 <APISubListItem parent="render" name="belowNodes" type="RenderNodeWrapper<WithAnyKey<C>>" optional>
 Create a function that generates a React node below all other plugins' node React node, but above their children.
 </APISubListItem>
+<APISubListItem parent="render" name="belowRootNodes" type="(props: PlateRenderElementProps<TElement, C>) => React.ReactNode" optional>
+Renders a component after the direct children of the root element. This differs from `belowNodes` in that it's the direct child of `PlateElement` rather than wrapping the children that could be nested. This is useful when you need components relative to the root element. Note: this is not used in Plate Core but in `PlateElement`. If you're not using `PlateElement`, you'll need to use this plugin field on your own.
+</APISubListItem>
 <APISubListItem parent="render" name="node" type="NodeComponent" optional>
 Renders the node component.
 </APISubListItem>

apps/www/content/docs/en/block-selection.mdx

@@ -170,7 +170,17 @@ Style the selection area by adding the `.slate-selection-area` class to your edi
 
 To determine if an element is selected, use `useBlockSelected` hook. You can render a visual indicator around selected blocks using our [BlockSelection](/docs/components/block-selection) component or create your own.
 
-This component should be rendered inside each block element for consistent selection feedback. Plate UI is doing it in [PlateElement](/docs/components/plate-element).
+This component should be rendered inside each block element for consistent selection feedback. Plate UI is doing it by configuring the plugin this way:
+
+```tsx
+render: {
+  belowRootNodes: (props) => {
+    if (!props.className?.includes('slate-selectable')) return null;
+
+    return <BlockSelection />;
+  },
+},
+```
 
 ## Plugins
 

apps/www/content/docs/en/components/changelog.mdx

@@ -26,6 +26,16 @@ Plate 45 - new comments & suggestions UI
 - NEW `block-suggestion`
 - NEW `suggestion-leaf`
 - NEW `suggestion-line-break`
+- Remove `plate-element`, import `PlateElement` from `@udecode/plate/react` instead. Add in `block-selection-plugins`:
+```tsx
+render: {
+  belowRootNodes: (props) => {
+    if (!props.className?.includes('slate-selectable')) return null;
+
+    return <BlockSelection />;
+  },
+},
+```
 
 ### February 3 #19.1
 

apps/www/public/r/index.json

@@ -58,9 +58,7 @@
       }
     ],
     "name": "blockquote-element",
-    "registryDependencies": [
-      "plate-element"
-    ],
+    "registryDependencies": [],
     "type": "registry:ui"
   },
   {
@@ -102,8 +100,7 @@
     ],
     "name": "code-block-element",
     "registryDependencies": [
-      "command",
-      "plate-element"
+      "command"
     ],
     "type": "registry:ui"
   },
@@ -165,9 +162,7 @@
       }
     ],
     "name": "code-line-element",
-    "registryDependencies": [
-      "plate-element"
-    ],
+    "registryDependencies": [],
     "type": "registry:ui"
   },
   {
@@ -234,8 +229,7 @@
     ],
     "name": "column-element",
     "registryDependencies": [
-      "resizable",
-      "plate-element"
+      "resizable"
     ],
     "type": "registry:ui"
   },
@@ -270,8 +264,7 @@
     "name": "column-group-element",
     "registryDependencies": [
       "command",
-      "resizable",
-      "plate-element"
+      "resizable"
     ],
     "type": "registry:ui"
   },
@@ -363,8 +356,7 @@
     ],
     "name": "date-element",
     "registryDependencies": [
-      "calendar",
-      "plate-element"
+      "calendar"
     ],
     "type": "registry:ui"
   },
@@ -433,7 +425,6 @@
     ],
     "name": "inline-equation-element",
     "registryDependencies": [
-      "plate-element",
       "popover"
     ],
     "type": "registry:ui"
@@ -495,7 +486,6 @@
     "name": "emoji-input-element",
     "registryDependencies": [
       "inline-combobox",
-      "plate-element",
       "use-debounce"
     ],
     "type": "registry:ui"
@@ -519,9 +509,7 @@
       }
     ],
     "name": "excalidraw-element",
-    "registryDependencies": [
-      "plate-element"
-    ],
+    "registryDependencies": [],
     "type": "registry:ui"
   },
   {
@@ -579,9 +567,7 @@
       }
     ],
     "name": "heading-element",
-    "registryDependencies": [
-      "plate-element"
-    ],
+    "registryDependencies": [],
     "type": "registry:ui"
   },
   {
@@ -639,9 +625,7 @@
       }
     ],
     "name": "hr-element",
-    "registryDependencies": [
-      "plate-element"
-    ],
+    "registryDependencies": [],
     "type": "registry:ui"
   },
   {
@@ -681,8 +665,7 @@
     "registryDependencies": [
       "media-popover",
       "caption",
-      "resizable",
-      "plate-element"
+      "resizable"
     ],
     "type": "registry:ui"
   },
@@ -774,9 +757,7 @@
       }
     ],
     "name": "link-element",
-    "registryDependencies": [
-      "plate-element"
-    ],
+    "registryDependencies": [],
     "type": "registry:ui"
   },
   {
@@ -801,9 +782,7 @@
       }
     ],
     "name": "list-element",
-    "registryDependencies": [
-      "plate-element"
-    ],
+    "registryDependencies": [],
     "type": "registry:ui"
   },
   {
@@ -838,8 +817,7 @@
     ],
     "name": "media-audio-element",
     "registryDependencies": [
-      "caption",
-      "plate-element"
+      "caption"
     ],
     "type": "registry:ui"
   },
@@ -878,8 +856,7 @@
     "registryDependencies": [
       "media-popover",
       "caption",
-      "resizable",
-      "plate-element"
+      "resizable"
     ],
     "type": "registry:ui"
   },
@@ -915,8 +892,7 @@
     ],
     "name": "media-file-element",
     "registryDependencies": [
-      "caption",
-      "plate-element"
+      "caption"
     ],
     "type": "registry:ui"
   },
@@ -948,7 +924,6 @@
     ],
     "name": "media-placeholder-element",
     "registryDependencies": [
-      "plate-element",
       "spinner",
       "uploadthing"
     ],
@@ -993,8 +968,7 @@
     "registryDependencies": [
       "media-popover",
       "caption",
-      "resizable",
-      "plate-element"
+      "resizable"
     ],
     "type": "registry:ui"
   },
@@ -1028,7 +1002,6 @@
     ],
     "name": "mention-element",
     "registryDependencies": [
-      "plate-element",
       "use-mounted"
     ],
     "type": "registry:ui"
@@ -1059,8 +1032,7 @@
     ],
     "name": "mention-input-element",
     "registryDependencies": [
-      "inline-combobox",
-      "plate-element"
+      "inline-combobox"
     ],
     "type": "registry:ui"
   },
@@ -1092,9 +1064,7 @@
       }
     ],
     "name": "paragraph-element",
-    "registryDependencies": [
-      "plate-element"
-    ],
+    "registryDependencies": [],
     "type": "registry:ui"
   },
   {
@@ -1154,7 +1124,6 @@
     "name": "slash-input-element",
     "registryDependencies": [
       "inline-combobox",
-      "plate-element",
       "transforms"
     ],
     "type": "registry:ui"
@@ -1189,8 +1158,7 @@
     ],
     "name": "table-cell-element",
     "registryDependencies": [
-      "resizable",
-      "plate-element"
+      "resizable"
     ],
     "type": "registry:ui"
   },
@@ -1230,8 +1198,7 @@
     ],
     "name": "table-element",
     "registryDependencies": [
-      "dropdown-menu",
-      "plate-element"
+      "dropdown-menu"
     ],
     "type": "registry:ui"
   },
@@ -1262,9 +1229,7 @@
       }
     ],
     "name": "table-row-element",
-    "registryDependencies": [
-      "plate-element"
-    ],
+    "registryDependencies": [],
     "type": "registry:ui"
   },
   {
@@ -1348,8 +1313,7 @@
     ],
     "name": "todo-list-element",
     "registryDependencies": [
-      "checkbox",
-      "plate-element"
+      "checkbox"
     ],
     "type": "registry:ui"
   },
@@ -1380,8 +1344,7 @@
     ],
     "name": "toggle-element",
     "registryDependencies": [
-      "button",
-      "plate-element"
+      "button"
     ],
     "type": "registry:ui"
   },
@@ -1880,7 +1843,6 @@
     "name": "block-context-menu",
     "registryDependencies": [
       "calendar",
-      "plate-element",
       "context-menu",
       "use-is-touch-device"
     ],
@@ -3155,34 +3117,6 @@
     "registryDependencies": [],
     "type": "registry:ui"
   },
-  {
-    "dependencies": [
-      "@udecode/plate-selection"
-    ],
-    "doc": {
-      "description": "A base element with block selection support.",
-      "docs": [
-        {
-          "route": "/docs/block-selection"
-        }
-      ],
-      "examples": [
-        "basic-nodes-demo"
-      ],
-      "label": "New"
-    },
-    "files": [
-      {
-        "path": "plate-ui/plate-element.tsx",
-        "type": "registry:ui"
-      }
-    ],
-    "name": "plate-element",
-    "registryDependencies": [
-      "block-selection"
-    ],
-    "type": "registry:ui"
-  },
   {
     "dependencies": [
       "react-resizable-panels"

apps/www/public/r/styles/default/ai-demo.json

@@ -36,7 +36,7 @@
     },
     {
       "path": "components/editor/plugins/editor-plugins.tsx",
-      "content": "'use client';\n\nimport emojiMartData from '@emoji-mart/data';\nimport { CalloutPlugin } from '@udecode/plate-callout/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\n\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\n\nimport { aiPlugins } from './ai-plugins';\nimport { alignPlugin } from './align-plugin';\nimport { autoformatPlugin } from './autoformat-plugin';\nimport { basicNodesPlugins } from './basic-nodes-plugins';\nimport { blockMenuPlugins } from './block-menu-plugins';\nimport { commentsPlugin } from './comments-plugin';\nimport { cursorOverlayPlugin } from './cursor-overlay-plugin';\nimport { deletePlugins } from './delete-plugins';\nimport { dndPlugins } from './dnd-plugins';\nimport { equationPlugins } from './equation-plugins';\nimport { exitBreakPlugin } from './exit-break-plugin';\nimport { indentListPlugins } from './indent-list-plugins';\nimport { lineHeightPlugin } from './line-height-plugin';\nimport { linkPlugin } from './link-plugin';\nimport { mediaPlugins } from './media-plugins';\nimport { mentionPlugin } from './mention-plugin';\nimport { resetBlockTypePlugin } from './reset-block-type-plugin';\nimport { skipMarkPlugin } from './skip-mark-plugin';\nimport { softBreakPlugin } from './soft-break-plugin';\nimport { suggestionPlugin } from './suggestion-plugin';\nimport { tablePlugin } from './table-plugin';\nimport { tocPlugin } from './toc-plugin';\n\nexport const viewPlugins = [\n  ...basicNodesPlugins,\n  HorizontalRulePlugin,\n  linkPlugin,\n  DatePlugin,\n  mentionPlugin,\n  tablePlugin,\n  TogglePlugin,\n  tocPlugin,\n  ...mediaPlugins,\n  ...equationPlugins,\n  CalloutPlugin,\n  ColumnPlugin,\n\n  // Marks\n  FontColorPlugin,\n  FontBackgroundColorPlugin,\n  FontSizePlugin,\n  HighlightPlugin,\n  KbdPlugin,\n  skipMarkPlugin,\n\n  // Block Style\n  alignPlugin,\n  ...indentListPlugins,\n  lineHeightPlugin,\n\n  // Collaboration\n  commentsPlugin,\n  suggestionPlugin,\n] as const;\n\nexport const editorPlugins = [\n  // AI\n  ...aiPlugins,\n\n  // Nodes\n  ...viewPlugins,\n\n  // Functionality\n  SlashPlugin,\n  autoformatPlugin,\n  cursorOverlayPlugin,\n  ...blockMenuPlugins,\n  ...dndPlugins,\n  EmojiPlugin.configure({ options: { data: emojiMartData as any } }),\n  exitBreakPlugin,\n  resetBlockTypePlugin,\n  ...deletePlugins,\n  softBreakPlugin,\n  TrailingBlockPlugin,\n\n  // Deserialization\n  DocxPlugin,\n  MarkdownPlugin.configure({ options: { indentList: true } }),\n  JuicePlugin,\n\n  // UI\n  FixedToolbarPlugin,\n  FloatingToolbarPlugin,\n];\n",
+      "content": "'use client';\n\nimport emojiMartData from '@emoji-mart/data';\nimport { CalloutPlugin } from '@udecode/plate-callout/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\n\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\nimport { BlockDiscussion } from '@/components/plate-ui/block-discussion';\nimport { SuggestionBelowNodes } from '@/components/plate-ui/suggestion-line-break';\n\nimport { aiPlugins } from './ai-plugins';\nimport { alignPlugin } from './align-plugin';\nimport { autoformatPlugin } from './autoformat-plugin';\nimport { basicNodesPlugins } from './basic-nodes-plugins';\nimport { blockMenuPlugins } from './block-menu-plugins';\nimport { commentsPlugin } from './comments-plugin';\nimport { cursorOverlayPlugin } from './cursor-overlay-plugin';\nimport { deletePlugins } from './delete-plugins';\nimport { dndPlugins } from './dnd-plugins';\nimport { equationPlugins } from './equation-plugins';\nimport { exitBreakPlugin } from './exit-break-plugin';\nimport { indentListPlugins } from './indent-list-plugins';\nimport { lineHeightPlugin } from './line-height-plugin';\nimport { linkPlugin } from './link-plugin';\nimport { mediaPlugins } from './media-plugins';\nimport { mentionPlugin } from './mention-plugin';\nimport { resetBlockTypePlugin } from './reset-block-type-plugin';\nimport { skipMarkPlugin } from './skip-mark-plugin';\nimport { softBreakPlugin } from './soft-break-plugin';\nimport { suggestionPlugin } from './suggestion-plugin';\nimport { tablePlugin } from './table-plugin';\nimport { tocPlugin } from './toc-plugin';\n\nexport const viewPlugins = [\n  ...basicNodesPlugins,\n  HorizontalRulePlugin,\n  linkPlugin,\n  DatePlugin,\n  mentionPlugin,\n  tablePlugin,\n  TogglePlugin,\n  tocPlugin,\n  ...mediaPlugins,\n  ...equationPlugins,\n  CalloutPlugin,\n  ColumnPlugin,\n\n  // Marks\n  FontColorPlugin,\n  FontBackgroundColorPlugin,\n  FontSizePlugin,\n  HighlightPlugin,\n  KbdPlugin,\n  skipMarkPlugin,\n\n  // Block Style\n  alignPlugin,\n  ...indentListPlugins,\n  lineHeightPlugin,\n\n  // Collaboration\n  commentsPlugin.configure({\n    render: { aboveNodes: BlockDiscussion as any },\n  }),\n  suggestionPlugin.configure({\n    render: { belowNodes: SuggestionBelowNodes as any },\n  }),\n] as const;\n\nexport const editorPlugins = [\n  // AI\n  ...aiPlugins,\n\n  // Nodes\n  ...viewPlugins,\n\n  // Functionality\n  SlashPlugin,\n  autoformatPlugin,\n  cursorOverlayPlugin,\n  ...blockMenuPlugins,\n  ...dndPlugins,\n  EmojiPlugin.configure({ options: { data: emojiMartData as any } }),\n  exitBreakPlugin,\n  resetBlockTypePlugin,\n  ...deletePlugins,\n  softBreakPlugin,\n  TrailingBlockPlugin,\n\n  // Deserialization\n  DocxPlugin,\n  MarkdownPlugin.configure({ options: { indentList: true } }),\n  JuicePlugin,\n\n  // UI\n  FixedToolbarPlugin,\n  FloatingToolbarPlugin,\n];\n",
       "type": "registry:example",
       "target": "components/editor-plugins.tsx"
     }