slate-react 0.57.2 → 0.57.3

package/dist/index.js

@@ -216,6 +216,34 @@ var getEditableChild = (parent, index, direction) => {
 
   return child;
 };
+/**
+ * Get a plaintext representation of the content of a node, accounting for block
+ * elements which get a newline appended.
+ *
+ * The domNode must be attached to the DOM.
+ */
+
+var getPlainText = domNode => {
+  var text = '';
+
+  if (isDOMText(domNode) && domNode.nodeValue) {
+    return domNode.nodeValue;
+  }
+
+  if (isDOMElement(domNode)) {
+    for (var childNode of Array.from(domNode.childNodes)) {
+      text += getPlainText(childNode);
+    }
+
+    var display = getComputedStyle(domNode).getPropertyValue('display');
+
+    if (display === 'block' || display === 'list' || domNode.tagName === 'BR') {
+      text += '\n';
+    }
+  }
+
+  return text;
+};
 
 var ReactEditor = {
   /**
@@ -357,6 +385,13 @@ var ReactEditor = {
     editor.insertData(data);
   },
 
+  /**
+   * Sets data from the currently selected fragment on a `DataTransfer`.
+   */
+  setFragmentData(editor, data) {
+    editor.setFragmentData(data);
+  },
+
   /**
    * Find the native DOM element from a Slate node.
    */
@@ -433,13 +468,21 @@ var ReactEditor = {
       anchor,
       focus
     } = range;
+    var isBackward = slate.Range.isBackward(range);
     var domAnchor = ReactEditor.toDOMPoint(editor, anchor);
     var domFocus = slate.Range.isCollapsed(range) ? domAnchor : ReactEditor.toDOMPoint(editor, focus);
     var domRange = window.document.createRange();
-    var start = slate.Range.isBackward(range) ? domFocus : domAnchor;
-    var end = slate.Range.isBackward(range) ? domAnchor : domFocus;
-    domRange.setStart(start[0], start[1]);
-    domRange.setEnd(end[0], end[1]);
+    var [startNode, startOffset] = isBackward ? domFocus : domAnchor;
+    var [endNode, endOffset] = isBackward ? domAnchor : domFocus; // A slate Point at zero-width Leaf always has an offset of 0 but a native DOM selection at
+    // zero-width node has an offset of 1 so we have to check if we are in a zero-width node and
+    // adjust the offset accordingly.
+
+    var startEl = isDOMElement(startNode) ? startNode : startNode.parentElement;
+    var isStartAtZeroWidth = !!startEl.getAttribute('data-slate-zero-width');
+    var endEl = isDOMElement(endNode) ? endNode : endNode.parentElement;
+    var isEndAtZeroWidth = !!endEl.getAttribute('data-slate-zero-width');
+    domRange.setStart(startNode, isStartAtZeroWidth ? 1 : startOffset);
+    domRange.setEnd(endNode, isEndAtZeroWidth ? 1 : endOffset);
     return domRange;
   },
 
@@ -712,6 +755,11 @@ var Slate = props => {
     setKey(key + 1);
   }, [key, onChange]);
   EDITOR_TO_ON_CHANGE.set(editor, onContextChange);
+  React.useEffect(() => {
+    return () => {
+      EDITOR_TO_ON_CHANGE.set(editor, () => {});
+    };
+  }, []);
   return React__default.createElement(SlateContext.Provider, {
     value: context
   }, React__default.createElement(EditorContext.Provider, {
@@ -801,6 +849,91 @@ var withReact = editor => {
     }
   };
 
+  e.setFragmentData = data => {
+    var {
+      selection
+    } = e;
+
+    if (!selection) {
+      return;
+    }
+
+    var [start, end] = slate.Range.edges(selection);
+    var startVoid = slate.Editor.void(e, {
+      at: start.path
+    });
+    var endVoid = slate.Editor.void(e, {
+      at: end.path
+    });
+
+    if (slate.Range.isCollapsed(selection) && !startVoid) {
+      return;
+    } // Create a fake selection so that we can add a Base64-encoded copy of the
+    // fragment to the HTML, to decode on future pastes.
+
+
+    var domRange = ReactEditor.toDOMRange(e, selection);
+    var contents = domRange.cloneContents();
+    var attach = contents.childNodes[0]; // Make sure attach is non-empty, since empty nodes will not get copied.
+
+    contents.childNodes.forEach(node => {
+      if (node.textContent && node.textContent.trim() !== '') {
+        attach = node;
+      }
+    }); // COMPAT: If the end node is a void node, we need to move the end of the
+    // range from the void node's spacer span, to the end of the void node's
+    // content, since the spacer is before void's content in the DOM.
+
+    if (endVoid) {
+      var [voidNode] = endVoid;
+      var r = domRange.cloneRange();
+      var domNode = ReactEditor.toDOMNode(e, voidNode);
+      r.setEndAfter(domNode);
+      contents = r.cloneContents();
+    } // COMPAT: If the start node is a void node, we need to attach the encoded
+    // fragment to the void node's content node instead of the spacer, because
+    // attaching it to empty `<div>/<span>` nodes will end up having it erased by
+    // most browsers. (2018/04/27)
+
+
+    if (startVoid) {
+      attach = contents.querySelector('[data-slate-spacer]');
+    } // Remove any zero-width space spans from the cloned DOM so that they don't
+    // show up elsewhere when pasted.
+
+
+    Array.from(contents.querySelectorAll('[data-slate-zero-width]')).forEach(zw => {
+      var isNewline = zw.getAttribute('data-slate-zero-width') === 'n';
+      zw.textContent = isNewline ? '\n' : '';
+    }); // Set a `data-slate-fragment` attribute on a non-empty node, so it shows up
+    // in the HTML, and can be used for intra-Slate pasting. If it's a text
+    // node, wrap it in a `<span>` so we have something to set an attribute on.
+
+    if (isDOMText(attach)) {
+      var span = document.createElement('span'); // COMPAT: In Chrome and Safari, if we don't add the `white-space` style
+      // then leading and trailing spaces will be ignored. (2017/09/21)
+
+      span.style.whiteSpace = 'pre';
+      span.appendChild(attach);
+      contents.appendChild(span);
+      attach = span;
+    }
+
+    var fragment = e.getFragment();
+    var string = JSON.stringify(fragment);
+    var encoded = window.btoa(encodeURIComponent(string));
+    attach.setAttribute('data-slate-fragment', encoded);
+    data.setData('application/x-slate-fragment', encoded); // Add the content to a <div> so that we can get its inner HTML.
+
+    var div = document.createElement('div');
+    div.appendChild(contents);
+    div.setAttribute('hidden', 'true');
+    document.body.appendChild(div);
+    data.setData('text/html', div.innerHTML);
+    data.setData('text/plain', getPlainText(div));
+    document.body.removeChild(div);
+  };
+
   e.insertData = data => {
     var fragment = data.getData('application/x-slate-fragment');
 
@@ -1408,11 +1541,10 @@ var Editable = props => {
 
     if (!selection && !hasDomSelection) {
       return;
-    }
+    } // If the DOM selection is already correct, we're done.
 
-    var newDomRange = selection && ReactEditor.toDOMRange(editor, selection); // If the DOM selection is already correct, we're done.
 
-    if (hasDomSelection && newDomRange && isRangeEqual(domSelection.getRangeAt(0), newDomRange)) {
+    if (hasDomSelection && selection && slate.Range.equals(ReactEditor.toSlateRange(editor, domSelection), selection)) {
       return;
     } // Otherwise the DOM selection is out of sync, so update it.
 
@@ -1420,6 +1552,7 @@ var Editable = props => {
     var el = ReactEditor.toDOMNode(editor, editor);
     state.isUpdatingSelection = true;
     domSelection.removeAllRanges();
+    var newDomRange = selection && ReactEditor.toDOMRange(editor, selection);
 
     if (newDomRange) {
       domSelection.addRange(newDomRange);
@@ -1623,7 +1756,6 @@ var Editable = props => {
       } = window.document;
       var el = ReactEditor.toDOMNode(editor, editor);
       var domSelection = window.getSelection();
-      var domRange = domSelection && domSelection.rangeCount > 0 && domSelection.getRangeAt(0);
 
       if (activeElement === el) {
         state.latestElement = activeElement;
@@ -1632,8 +1764,8 @@ var Editable = props => {
         IS_FOCUSED.delete(editor);
       }
 
-      if (domRange && hasEditableTarget(editor, domRange.startContainer) && hasEditableTarget(editor, domRange.endContainer)) {
-        var range = ReactEditor.toSlateRange(editor, domRange);
+      if (domSelection && hasEditableTarget(editor, domSelection.anchorNode) && hasEditableTarget(editor, domSelection.focusNode)) {
+        var range = ReactEditor.toSlateRange(editor, domSelection);
         slate.Transforms.select(editor, range);
       } else {
         slate.Transforms.deselect(editor);
@@ -1778,13 +1910,13 @@ var Editable = props => {
     onCopy: React.useCallback(event => {
       if (hasEditableTarget(editor, event.target) && !isEventHandled(event, attributes.onCopy)) {
         event.preventDefault();
-        setFragmentData(event.clipboardData, editor);
+        ReactEditor.setFragmentData(editor, event.clipboardData);
       }
     }, [attributes.onCopy]),
     onCut: React.useCallback(event => {
       if (!readOnly && hasEditableTarget(editor, event.target) && !isEventHandled(event, attributes.onCut)) {
         event.preventDefault();
-        setFragmentData(event.clipboardData, editor);
+        ReactEditor.setFragmentData(editor, event.clipboardData);
         var {
           selection
         } = editor;
@@ -1820,7 +1952,7 @@ var Editable = props => {
           slate.Transforms.select(editor, range);
         }
 
-        setFragmentData(event.dataTransfer, editor);
+        ReactEditor.setFragmentData(editor, event.dataTransfer);
       }
     }, [attributes.onDragStart]),
     onDrop: React.useCallback(event => {
@@ -2101,14 +2233,6 @@ var Editable = props => {
  */
 
 var defaultDecorate = () => [];
-/**
- * Check if two DOM range objects are equal.
- */
-
-
-var isRangeEqual = (a, b) => {
-  return a.startContainer === b.startContainer && a.startOffset === b.startOffset && a.endContainer === b.endContainer && a.endOffset === b.endOffset || a.startContainer === b.endContainer && a.startOffset === b.endOffset && a.endContainer === b.startContainer && a.endOffset === b.startOffset;
-};
 /**
  * Check if the target is in the editor.
  */
@@ -2153,124 +2277,6 @@ var isDOMEventHandled = (event, handler) => {
   handler(event);
   return event.defaultPrevented;
 };
-/**
- * Set the currently selected fragment to the clipboard.
- */
-
-
-var setFragmentData = (dataTransfer, editor) => {
-  var {
-    selection
-  } = editor;
-
-  if (!selection) {
-    return;
-  }
-
-  var [start, end] = slate.Range.edges(selection);
-  var startVoid = slate.Editor.void(editor, {
-    at: start.path
-  });
-  var endVoid = slate.Editor.void(editor, {
-    at: end.path
-  });
-
-  if (slate.Range.isCollapsed(selection) && !startVoid) {
-    return;
-  } // Create a fake selection so that we can add a Base64-encoded copy of the
-  // fragment to the HTML, to decode on future pastes.
-
-
-  var domRange = ReactEditor.toDOMRange(editor, selection);
-  var contents = domRange.cloneContents();
-  var attach = contents.childNodes[0]; // Make sure attach is non-empty, since empty nodes will not get copied.
-
-  contents.childNodes.forEach(node => {
-    if (node.textContent && node.textContent.trim() !== '') {
-      attach = node;
-    }
-  }); // COMPAT: If the end node is a void node, we need to move the end of the
-  // range from the void node's spacer span, to the end of the void node's
-  // content, since the spacer is before void's content in the DOM.
-
-  if (endVoid) {
-    var [voidNode] = endVoid;
-    var r = domRange.cloneRange();
-    var domNode = ReactEditor.toDOMNode(editor, voidNode);
-    r.setEndAfter(domNode);
-    contents = r.cloneContents();
-  } // COMPAT: If the start node is a void node, we need to attach the encoded
-  // fragment to the void node's content node instead of the spacer, because
-  // attaching it to empty `<div>/<span>` nodes will end up having it erased by
-  // most browsers. (2018/04/27)
-
-
-  if (startVoid) {
-    attach = contents.querySelector('[data-slate-spacer]');
-  } // Remove any zero-width space spans from the cloned DOM so that they don't
-  // show up elsewhere when pasted.
-
-
-  Array.from(contents.querySelectorAll('[data-slate-zero-width]')).forEach(zw => {
-    var isNewline = zw.getAttribute('data-slate-zero-width') === 'n';
-    zw.textContent = isNewline ? '\n' : '';
-  }); // Set a `data-slate-fragment` attribute on a non-empty node, so it shows up
-  // in the HTML, and can be used for intra-Slate pasting. If it's a text
-  // node, wrap it in a `<span>` so we have something to set an attribute on.
-
-  if (isDOMText(attach)) {
-    var span = document.createElement('span'); // COMPAT: In Chrome and Safari, if we don't add the `white-space` style
-    // then leading and trailing spaces will be ignored. (2017/09/21)
-
-    span.style.whiteSpace = 'pre';
-    span.appendChild(attach);
-    contents.appendChild(span);
-    attach = span;
-  }
-
-  var fragment = slate.Node.fragment(editor, selection);
-  var string = JSON.stringify(fragment);
-  var encoded = window.btoa(encodeURIComponent(string));
-  attach.setAttribute('data-slate-fragment', encoded);
-  dataTransfer.setData('application/x-slate-fragment', encoded); // Add the content to a <div> so that we can get its inner HTML.
-
-  var div = document.createElement('div');
-  div.appendChild(contents);
-  div.setAttribute('hidden', 'true');
-  document.body.appendChild(div);
-  dataTransfer.setData('text/html', div.innerHTML);
-  dataTransfer.setData('text/plain', getPlainText(div));
-  document.body.removeChild(div);
-};
-/**
- * Get a plaintext representation of the content of a node, accounting for block
- * elements which get a newline appended.
- *
- * The domNode must be attached to the DOM.
- */
-
-
-var getPlainText = domNode => {
-  var text = '';
-
-  if (isDOMText(domNode) && domNode.nodeValue) {
-    return domNode.nodeValue;
-  }
-
-  if (isDOMElement(domNode)) {
-    for (var childNode of Array.from(domNode.childNodes)) {
-      text += getPlainText(childNode);
-    }
-
-    var display = getComputedStyle(domNode).getPropertyValue('display');
-
-    if (display === 'block' || display === 'list' || domNode.tagName === 'BR') {
-      text += '\n';
-    }
-  }
-
-  return text;
-};
 
 exports.DefaultElement = DefaultElement;
 exports.DefaultLeaf = DefaultLeaf;