slate-react 0.57.2 → 0.57.3

package/dist/plugin/react-editor.d.ts

@@ -6,6 +6,7 @@ import { DOMNode, DOMPoint, DOMRange, DOMSelection, DOMStaticRange } from '../ut
  */
 export interface ReactEditor extends Editor {
     insertData: (data: DataTransfer) => void;
+    setFragmentData: (data: DataTransfer) => void;
 }
 export declare const ReactEditor: {
     /**
@@ -46,6 +47,10 @@ export declare const ReactEditor: {
      * Insert data from a `DataTransfer` into the editor.
      */
     insertData(editor: ReactEditor, data: DataTransfer): void;
+    /**
+     * Sets data from the currently selected fragment on a `DataTransfer`.
+     */
+    setFragmentData(editor: ReactEditor, data: DataTransfer): void;
     /**
      * Find the native DOM element from a Slate node.
      */

package/dist/plugin/react-editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react-editor.d.ts","sourceRoot":"","sources":["../packages/slate-react/src/plugin/react-editor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAc,MAAM,OAAO,CAAA;AAEpE,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAA;AAWlC,OAAO,EAEL,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,cAAc,EAGf,MAAM,cAAc,CAAA;AAErB;;GAEG;AAEH,MAAM,WAAW,WAAY,SAAQ,MAAM;IACzC,UAAU,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAA;CACzC;AAED,eAAO,MAAM,WAAW;IACtB;;OAEG;;IAaH;;OAEG;;IAgCH;;OAEG;;IAMH;;OAEG;;IAMH;;OAEG;;IAWH;;OAEG;;IAWH;;OAEG;;IAeH;;OAEG;;;;IAuCH;;OAEG;;IAMH;;OAEG;;IAgBH;;OAEG;;IAkDH;;OAEG;;IAiBH;;OAEG;;IAkBH;;OAEG;;IAgEH;;OAEG;;IA2EH;;OAEG;;CAkDJ,CAAA"}
+{"version":3,"file":"react-editor.d.ts","sourceRoot":"","sources":["../packages/slate-react/src/plugin/react-editor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAA0B,MAAM,OAAO,CAAA;AAEhF,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAA;AAWlC,OAAO,EAEL,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,cAAc,EAGf,MAAM,cAAc,CAAA;AAErB;;GAEG;AAEH,MAAM,WAAW,WAAY,SAAQ,MAAM;IACzC,UAAU,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAA;IACxC,eAAe,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAA;CAC9C;AAED,eAAO,MAAM,WAAW;IACtB;;OAEG;;IAaH;;OAEG;;IAgCH;;OAEG;;IAMH;;OAEG;;IAMH;;OAEG;;IAWH;;OAEG;;IAWH;;OAEG;;IAeH;;OAEG;;;;IAuCH;;OAEG;;IAMH;;OAEG;;IAMH;;OAEG;;IAgBH;;OAEG;;IAkDH;;OAEG;;IA+BH;;OAEG;;IAkBH;;OAEG;;IAgEH;;OAEG;;IA2EH;;OAEG;;CAkDJ,CAAA"}

package/dist/plugin/with-react.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"with-react.d.ts","sourceRoot":"","sources":["../packages/slate-react/src/plugin/with-react.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAqC,MAAM,OAAO,CAAA;AAEjE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAI5C;;GAEG;AAEH,eAAO,MAAM,SAAS,kDA2FrB,CAAA"}
+{"version":3,"file":"with-react.d.ts","sourceRoot":"","sources":["../packages/slate-react/src/plugin/with-react.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAA4C,MAAM,OAAO,CAAA;AAExE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAK5C;;GAEG;AAEH,eAAO,MAAM,SAAS,kDAgLrB,CAAA"}

package/dist/slate-react.js

@@ -1113,6 +1113,35 @@
 
     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 = function getPlainText(domNode) {
+    var text = '';
+
+    if (isDOMText(domNode) && domNode.nodeValue) {
+      return domNode.nodeValue;
+    }
+
+    if (isDOMElement(domNode)) {
+      for (var _i = 0, _Array$from = Array.from(domNode.childNodes); _i < _Array$from.length; _i++) {
+        var childNode = _Array$from[_i];
+        text += getPlainText(childNode);
+      }
+
+      var display = getComputedStyle(domNode).getPropertyValue('display');
+
+      if (display === 'block' || display === 'list' || domNode.tagName === 'BR') {
+        text += '\n';
+      }
+    }
+
+    return text;
+  };
 
   var ReactEditor = {
     /**
@@ -1251,6 +1280,13 @@
       editor.insertData(data);
     },
 
+    /**
+     * Sets data from the currently selected fragment on a `DataTransfer`.
+     */
+    setFragmentData: function setFragmentData(editor, data) {
+      editor.setFragmentData(data);
+    },
+
     /**
      * Find the native DOM element from a Slate node.
      */
@@ -1327,13 +1363,30 @@
     toDOMRange: function toDOMRange(editor, range) {
       var anchor = range.anchor,
           focus = range.focus;
+      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 _ref = isBackward ? domFocus : domAnchor,
+          _ref2 = slicedToArray(_ref, 2),
+          startNode = _ref2[0],
+          startOffset = _ref2[1];
+
+      var _ref3 = isBackward ? domAnchor : domFocus,
+          _ref4 = slicedToArray(_ref3, 2),
+          endNode = _ref4[0],
+          endOffset = _ref4[1]; // 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;
     },
 
@@ -1611,6 +1664,11 @@
       setKey(key + 1);
     }, [key, onChange]);
     EDITOR_TO_ON_CHANGE.set(editor, onContextChange);
+    React.useEffect(function () {
+      return function () {
+        EDITOR_TO_ON_CHANGE.set(editor, function () {});
+      };
+    }, []);
     return React__default.createElement(SlateContext.Provider, {
       value: context
     }, React__default.createElement(EditorContext.Provider, {
@@ -28344,6 +28402,95 @@
       }
     };
 
+    e.setFragmentData = function (data) {
+      var selection = e.selection;
+
+      if (!selection) {
+        return;
+      }
+
+      var _Range$edges = slate.Range.edges(selection),
+          _Range$edges2 = slicedToArray(_Range$edges, 2),
+          start = _Range$edges2[0],
+          end = _Range$edges2[1];
+
+      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(function (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 _endVoid = slicedToArray(endVoid, 1),
+            voidNode = _endVoid[0];
+
+        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(function (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 = function (data) {
       var fragment = data.getData('application/x-slate-fragment');
 
@@ -29244,11 +29391,10 @@
 
       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.
 
@@ -29256,6 +29402,7 @@
       var el = ReactEditor.toDOMNode(editor, editor);
       state.isUpdatingSelection = true;
       domSelection.removeAllRanges();
+      var newDomRange = selection && ReactEditor.toDOMRange(editor, selection);
 
       if (newDomRange) {
         domSelection.addRange(newDomRange);
@@ -29455,7 +29602,6 @@
         var activeElement = window.document.activeElement;
         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;
@@ -29464,8 +29610,8 @@
           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);
@@ -29605,13 +29751,13 @@
       onCopy: React.useCallback(function (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(function (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.selection;
 
           if (selection && slate.Range.isExpanded(selection)) {
@@ -29645,7 +29791,7 @@
             slate.Transforms.select(editor, range);
           }
 
-          setFragmentData(event.dataTransfer, editor);
+          ReactEditor.setFragmentData(editor, event.dataTransfer);
         }
       }, [attributes.onDragStart]),
       onDrop: React.useCallback(function (event) {
@@ -29924,14 +30070,6 @@
   var defaultDecorate = function defaultDecorate() {
     return [];
   };
-  /**
-   * Check if two DOM range objects are equal.
-   */
-
-
-  var isRangeEqual = function 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.
    */
@@ -29976,129 +30114,6 @@
     handler(event);
     return event.defaultPrevented;
   };
-  /**
-   * Set the currently selected fragment to the clipboard.
-   */
-
-
-  var setFragmentData = function setFragmentData(dataTransfer, editor) {
-    var selection = editor.selection;
-
-    if (!selection) {
-      return;
-    }
-
-    var _Range$edges = slate.Range.edges(selection),
-        _Range$edges2 = slicedToArray(_Range$edges, 2),
-        start = _Range$edges2[0],
-        end = _Range$edges2[1];
-
-    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(function (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 _endVoid = slicedToArray(endVoid, 1),
-          voidNode = _endVoid[0];
-
-      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(function (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 = function getPlainText(domNode) {
-    var text = '';
-
-    if (isDOMText(domNode) && domNode.nodeValue) {
-      return domNode.nodeValue;
-    }
-
-    if (isDOMElement(domNode)) {
-      for (var _i = 0, _Array$from = Array.from(domNode.childNodes); _i < _Array$from.length; _i++) {
-        var childNode = _Array$from[_i];
-        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;