fix: restore div spacer for block void objects

Author: christianhg

packages/editor/src/slate/react/components/object-node.tsx

@@ -55,8 +55,10 @@ const ObjectNodeComponent = (props: {
     }
   }
 
+  const Tag = isInline ? 'span' : 'div'
+
   const children = (
-    <span
+    <Tag
       data-slate-spacer
       style={{
         height: '0',
@@ -72,7 +74,7 @@ const ObjectNodeComponent = (props: {
           </span>
         </span>
       </span>
-    </span>
+    </Tag>
   )
 
   return renderElement({

packages/editor/tests/container-rendering.test.tsx

@@ -1098,15 +1098,15 @@ describe('gallery with void block objects', () => {
           ' data-block-type="object"',
           '>',
           // void spacer
-          '<span data-slate-spacer="true"',
+          '<div data-slate-spacer="true"',
           ' style="height: 0px; color: transparent; outline: none; position: absolute;"',
           '>',
           '<span data-slate-node="text">',
           '<span data-slate-leaf="true">',
           '<span data-slate-zero-width="z" data-slate-length="0">\uFEFF</span>',
           '</span>',
-          '</span>',
-          '</span>',
+          '</div>',
+          '</div>',
           // void content
           '<div contenteditable="false" draggable="true">',
           '<div>[image: img-0]</div>',
@@ -1122,15 +1122,15 @@ describe('gallery with void block objects', () => {
           ' data-block-type="object"',
           '>',
           // void spacer
-          '<span data-slate-spacer="true"',
+          '<div data-slate-spacer="true"',
           ' style="height: 0px; color: transparent; outline: none; position: absolute;"',
           '>',
           '<span data-slate-node="text">',
           '<span data-slate-leaf="true">',
           '<span data-slate-zero-width="z" data-slate-length="0">\uFEFF</span>',
           '</span>',
-          '</span>',
-          '</span>',
+          '</div>',
+          '</div>',
           // void content
           '<div contenteditable="false" draggable="true">',
           '<div>[image: img-1]</div>',
@@ -1340,15 +1340,15 @@ describe('cell with mixed content', () => {
           ' data-block-type="object"',
           '>',
           // void spacer
-          '<span data-slate-spacer="true"',
+          '<div data-slate-spacer="true"',
           ' style="height: 0px; color: transparent; outline: none; position: absolute;"',
           '>',
           '<span data-slate-node="text">',
           '<span data-slate-leaf="true">',
           '<span data-slate-zero-width="z" data-slate-length="0">\uFEFF</span>',
           '</span>',
-          '</span>',
-          '</span>',
+          '</div>',
+          '</div>',
           // void content
           '<div contenteditable="false" draggable="true">',
           '<div>[image: img-0]</div>',

packages/editor/tests/dom-structure.test.tsx

@@ -196,14 +196,14 @@ describe('DOM structure', () => {
           ' data-block-name="image"',
           ' data-block-type="object">',
           // spacer
-          '<span data-slate-spacer="true"',
+          '<div data-slate-spacer="true"',
           ' style="height: 0px; color: transparent; outline: none; position: absolute;">',
           '<span data-slate-node="text">',
           '<span data-slate-leaf="true">',
           '<span data-slate-zero-width="z" data-slate-length="0">\uFEFF</span>',
           '</span>',
           '</span>',
-          '</span>',
+          '</div>',
           // block object render
           '<div contenteditable="false" draggable="true">',
           '<div>[image: img0]</div>',
@@ -266,14 +266,14 @@ describe('DOM structure', () => {
           ' data-block-name="image"',
           ' data-block-type="object">',
           // spacer
-          '<span data-slate-spacer="true"',
+          '<div data-slate-spacer="true"',
           ' style="height: 0px; color: transparent; outline: none; position: absolute;">',
           '<span data-slate-node="text">',
           '<span data-slate-leaf="true">',
           '<span data-slate-zero-width="z" data-slate-length="0">\uFEFF</span>',
           '</span>',
           '</span>',
-          '</span>',
+          '</div>',
           // image render
           '<div contenteditable="false" draggable="true">',
           '<div>[image: img0]</div>',
@@ -288,14 +288,14 @@ describe('DOM structure', () => {
           ' data-block-name="image"',
           ' data-block-type="object">',
           // spacer
-          '<span data-slate-spacer="true"',
+          '<div data-slate-spacer="true"',
           ' style="height: 0px; color: transparent; outline: none; position: absolute;">',
           '<span data-slate-node="text">',
           '<span data-slate-leaf="true">',
           '<span data-slate-zero-width="z" data-slate-length="0">\uFEFF</span>',
           '</span>',
           '</span>',
-          '</span>',
+          '</div>',
           // image render
           '<div contenteditable="false" draggable="true">',
           '<div>[image: img1]</div>',