Merge pull request #4182 from mattiaz9/main

refactor: move out beforeEditable and afterEditable from aboveEditable render

Author: zbeyens

.changeset/large-maps-smile.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-core': patch
+---
+
+Fix: `PlatePlugin.render.beforeEditable` and `afterEditable` should be siblings to `aboveEditable` instead of children. `aboveSlate` should be used for that scenario.

apps/www/src/registry/default/blocks/slate-to-html/page.tsx

@@ -340,9 +340,13 @@ export default async function SlateToHtmlBlock() {
         <EditorStatic components={components} editor={editor} />
       </div>
 
-      <div className="p-2 relative">
+      <div className="relative p-2">
         <H3>HTML Iframe</H3>
-        <ExportHtmlButton className='absolute top-10 right-0' html={html} serverTheme={theme} />
+        <ExportHtmlButton
+          className="absolute top-10 right-0"
+          html={html}
+          serverTheme={theme}
+        />
         <HtmlIframe
           className="h-[7500px] w-full"
           html={html}

apps/www/src/registry/default/components/editor/slate-to-html.tsx

@@ -65,7 +65,7 @@ export function ExportHtmlButton({
       rel="noopener noreferrer"
       role="button"
     >
-      <Button >Export HTML</Button>
+      <Button>Export HTML</Button>
     </a>
   );
 }

packages/core/src/react/components/PlateContent.tsx

@@ -87,17 +87,13 @@ const PlateContent = React.forwardRef(
 
     let aboveEditable: React.ReactNode = (
       <>
-        {beforeEditable}
-
         {renderEditable ? renderEditable(editable) : editable}
 
         <EditorMethodsEffect id={id} />
         <EditorHotkeysEffect id={id} editableRef={editableRef} />
         {/* <EditorStateEffect id={id} /> */}
         <EditorRefEffect id={id} />
         <PlateControllerEffect id={id} />
-
-        {afterEditable}
       </>
     );
 
@@ -121,7 +117,13 @@ const PlateContent = React.forwardRef(
       prevReadOnly.current = readOnly;
     }, [autoFocusOnEditable, editor, readOnly]);
 
-    return <PlateSlate id={id}>{aboveEditable}</PlateSlate>;
+    return (
+      <PlateSlate id={id}>
+        {beforeEditable}
+        {aboveEditable}
+        {afterEditable}
+      </PlateSlate>
+    );
   }
 );
 PlateContent.displayName = 'PlateContent';