Replace zero width blocks with newline before copy (#1644)

* Replace zero width blocks with newline before copy

* Fix linting issue

* Fixing linting again, sorry Github

packages/slate-react/src/components/leaf.js

@@ -116,14 +116,20 @@ class Leaf extends React.Component {
   renderText() {
     const { block, node, parent, text, index, leaves } = this.props
 
+    // COMPAT: If the text is empty and the only child, we need to render a
+    // line break when copying and pasting to support expected plain text.
+    if (text == '' && parent.kind == 'block' && parent.text == '') {
+      return <span data-slate-zero-width="n">{'\u200B'}</span>
+    }
+
     // COMPAT: Render text inside void nodes with a zero-width space.
     // So the node can contain selection but the text is not visible.
-    if (parent.isVoid) return <span data-slate-zero-width>{'\u200B'}</span>
+    if (parent.isVoid) return <span data-slate-zero-width="z">{'\u200B'}</span>
 
     // COMPAT: If the text is empty, it's because it's on the edge of an inline
     // void node, so we render a zero-width space so that the selection can be
     // inserted next to it still.
-    if (text == '') return <span data-slate-zero-width>{'\u200B'}</span>
+    if (text == '') return <span data-slate-zero-width="z">{'\u200B'}</span>
 
     // COMPAT: Browsers will collapse trailing new lines at the end of blocks,
     // so we need to add an extra trailing new lines to prevent that.

packages/slate-react/src/utils/clone-fragment.js

@@ -1,7 +1,8 @@
 import Base64 from 'slate-base64-serializer'
 
-import findDOMNode from './find-dom-node'
 import getWindow from 'get-window'
+import findDOMNode from './find-dom-node'
+import { ZERO_WIDTH_SELECTOR, ZERO_WIDTH_ATTRIBUTE } from './find-point'
 import { IS_CHROME, IS_SAFARI } from '../constants/environment'
 
 /**
@@ -62,10 +63,10 @@ function cloneFragment(event, value, fragment = value.fragment) {
 
   // Remove any zero-width space spans from the cloned DOM so that they don't
   // show up elsewhere when pasted.
-  const zws = [].slice.call(
+  ;[].slice.call(contents.querySelectorAll(ZERO_WIDTH_SELECTOR)).forEach(zw => {
-    contents.querySelectorAll('[data-slate-zero-width]')
+    const isNewline = zw.getAttribute(ZERO_WIDTH_ATTRIBUTE) === 'n'
-  )
+    zw.textContent = isNewline ? '\n' : ''
-  zws.forEach(zw => zw.parentNode.removeChild(zw))
+  })
 
   // COMPAT: In Chrome and Safari, if the last element in the selection to
   // copy has `contenteditable="false"` the copy will fail, and nothing will

packages/slate-react/src/utils/find-point.js

@@ -8,6 +8,8 @@ import OffsetKey from './offset-key'
  * @type {String}
  */
 
+export const ZERO_WIDTH_ATTRIBUTE = 'data-slate-zero-width'
+export const ZERO_WIDTH_SELECTOR = `[${ZERO_WIDTH_ATTRIBUTE}]`
 const OFFSET_KEY_ATTRIBUTE = 'data-offset-key'
 const RANGE_SELECTOR = `[${OFFSET_KEY_ATTRIBUTE}]`
 const TEXT_SELECTOR = `[data-key]`
@@ -60,7 +62,7 @@ function findPoint(nativeNode, nativeOffset, value) {
   // from the offset to account for the zero-width space character.
   if (
     offset == node.textContent.length &&
-    parentNode.hasAttribute('data-slate-zero-width')
+    parentNode.hasAttribute(ZERO_WIDTH_ATTRIBUTE)
   ) {
     offset--
   }

packages/slate-react/test/rendering/fixtures/custom-block-void.js

@@ -35,7 +35,7 @@ export const output = `
     <div contenteditable="true" data-slate-spacer="true" style="height:0;color:transparent;outline:none">
       <span>
         <span>
-          <span data-slate-zero-width="true">&#x200B;</span>
+          <span data-slate-zero-width="z">&#x200B;</span>
         </span>
       </span>
     </div>

packages/slate-react/test/rendering/fixtures/custom-inline-multiple.js

@@ -39,7 +39,7 @@ export const output = `
   <div style="position:relative">
     <span>
       <span>
-        <span data-slate-zero-width="true">&#x200B;</span>
+        <span data-slate-zero-width="z">&#x200B;</span>
       </span>
     </span>
     <a href="https://google.com">
@@ -49,7 +49,7 @@ export const output = `
     </a>
     <span>
       <span>
-        <span data-slate-zero-width="true">&#x200B;</span>
+        <span data-slate-zero-width="z">&#x200B;</span>
       </span>
     </span>
     <a href="https://google.com">
@@ -59,7 +59,7 @@ export const output = `
     </a>
     <span>
       <span>
-        <span data-slate-zero-width="true">&#x200B;</span>
+        <span data-slate-zero-width="z">&#x200B;</span>
       </span>
     </span>
     <a href="https://google.com">
@@ -69,7 +69,7 @@ export const output = `
     </a>
     <span>
       <span>
-        <span data-slate-zero-width="true">&#x200B;</span>
+        <span data-slate-zero-width="z">&#x200B;</span>
       </span>
     </span>
   </div>

packages/slate-react/test/rendering/fixtures/custom-inline-void.js

@@ -33,14 +33,14 @@ export const output = `
   <div style="position:relative">
     <span>
       <span>
-        <span data-slate-zero-width="true">&#x200B;</span>
+        <span data-slate-zero-width="z">&#x200B;</span>
       </span>
     </span>
     <span data-slate-void="true" contenteditable="false">
       <span contenteditable="true" data-slate-spacer="true" style="height:0;color:transparent;outline:none">
         <span>
           <span>
-            <span data-slate-zero-width="true">&#x200B;</span>
+            <span data-slate-zero-width="z">&#x200B;</span>
           </span>
         </span>
       </span>
@@ -50,7 +50,7 @@ export const output = `
     </span>
     <span>
       <span>
-        <span data-slate-zero-width="true">&#x200B;</span>
+        <span data-slate-zero-width="z">&#x200B;</span>
       </span>
     </span>
   </div>

packages/slate-react/test/rendering/fixtures/custom-inline.js

@@ -37,7 +37,7 @@ export const output = `
   <div style="position:relative">
     <span>
       <span>
-        <span data-slate-zero-width="true">&#x200B;</span>
+        <span data-slate-zero-width="z">&#x200B;</span>
       </span>
     </span>
     <a href="https://google.com">
@@ -47,7 +47,7 @@ export const output = `
     </a>
     <span>
       <span>
-        <span data-slate-zero-width="true">&#x200B;</span>
+        <span data-slate-zero-width="z">&#x200B;</span>
       </span>
     </span>
   </div>

packages/slate-react/test/rendering/fixtures/default-block-with-inline.js

@@ -19,7 +19,7 @@ export const output = `
   <div style="position:relative">
     <span>
       <span>
-        <span data-slate-zero-width="true">&#x200B;</span>
+        <span data-slate-zero-width="z">&#x200B;</span>
       </span>
     </span>
     <span style="position:relative">
@@ -29,7 +29,7 @@ export const output = `
     </span>
     <span>
       <span>
-        <span data-slate-zero-width="true">&#x200B;</span>
+        <span data-slate-zero-width="z">&#x200B;</span>
       </span>
     </span>
   </div>

packages/slate-react/test/rendering/fixtures/empty-block-with-inline.js

@@ -19,7 +19,7 @@ export const output = `
   <div style="position:relative">
     <span>
       <span>
-        <span data-slate-zero-width="true">\u200B</span>
+        <span data-slate-zero-width="n">\u200B</span>
       </span>
     </span>
   </div>

packages/slate-react/test/rendering/fixtures/empty-block.js

@@ -17,7 +17,7 @@ export const output = `
   <div style="position:relative">
     <span>
       <span>
-        <span data-slate-zero-width="true">\u200B</span>
+        <span data-slate-zero-width="n">\u200B</span>
       </span>
     </span>
   </div>

packages/slate-react/test/rendering/fixtures/readonly-custom-inline-void.js

@@ -34,7 +34,7 @@ export const output = `
   <div style="position:relative">
     <span>
       <span>
-        <span data-slate-zero-width="true">&#x200B;</span>
+        <span data-slate-zero-width="z">&#x200B;</span>
       </span>
     </span>
     <span data-slate-void="true">
@@ -44,7 +44,7 @@ export const output = `
     </span>
     <span>
       <span>
-        <span data-slate-zero-width="true">&#x200B;</span>
+        <span data-slate-zero-width="z">&#x200B;</span>
       </span>
     </span>
   </div>