slate-react 0.72.6 → 0.72.7-202202811645

package/dist/index.js

@@ -293,7 +293,11 @@ var TextString = function TextString(props) {
   var text = props.text,
       _props$isTrailing = props.isTrailing,
       isTrailing = _props$isTrailing === void 0 ? false : _props$isTrailing;
-  var ref = React.useRef(null); // This is the actual text rendering boundary where we interface with the DOM
+  var ref = React.useRef(null);
+
+  var getTextContent = function getTextContent() {
+    return "".concat(text !== null && text !== void 0 ? text : '').concat(isTrailing ? '\n' : '');
+  }; // This is the actual text rendering boundary where we interface with the DOM
   // The text is not rendered as part of the virtual DOM, as since we handle basic character insertions natively,
   // updating the DOM is not a one way dataflow anymore. What we need here is not reconciliation and diffing
   // with previous version of the virtual DOM, but rather diffing with the actual DOM element, and replace the DOM <span> content
@@ -302,16 +306,26 @@ var TextString = function TextString(props) {
   // eg makes native spellcheck opt out from checking the text node.
   // useLayoutEffect: updating our span before browser paint
 
+
   useIsomorphicLayoutEffect(function () {
     // null coalescing text to make sure we're not outputing "null" as a string in the extreme case it is nullish at runtime
-    var textWithTrailing = "".concat(text !== null && text !== void 0 ? text : '').concat(isTrailing ? '\n' : '');
+    var textWithTrailing = getTextContent();
 
     if (ref.current && ref.current.textContent !== textWithTrailing) {
       ref.current.textContent = textWithTrailing;
     } // intentionally not specifying dependencies, so that this effect runs on every render
     // as this effectively replaces "specifying the text in the virtual DOM under the <span> below" on each render
 
-  }); // the span is intentionally same on every render in virtual DOM, actual rendering happens in the layout effect above
+  }); // Render text content immediately if it's the first-time render
+  // Ensure that text content is rendered on server-side rendering
+
+  if (!ref.current) {
+    return /*#__PURE__*/React__default['default'].createElement("span", {
+      "data-slate-string": true,
+      ref: ref
+    }, getTextContent());
+  } // the span is intentionally same on every render in virtual DOM, actual rendering happens in the layout effect above
+
 
   return /*#__PURE__*/React__default['default'].createElement("span", {
     "data-slate-string": true,
@@ -1392,6 +1406,7 @@ var Editable$1 = function Editable(props) {
       // triggering a `beforeinput` expecting the change to be applied to the immediately before
       // set selection.
       scheduleOnDOMSelectionChange.flush();
+      onDOMSelectionChange.flush();
       var selection = editor.selection;
       var type = event.inputType;
       var data = event.dataTransfer || event.data || undefined; // These two types occur while a user is composing text and can't be
@@ -3074,22 +3089,25 @@ var ReactEditor = {
 
       if (leafNode) {
         textNode = leafNode.closest('[data-slate-node="text"]');
-        var window = ReactEditor.getWindow(editor);
-        var range = window.document.createRange();
-        range.setStart(textNode, 0);
-        range.setEnd(nearestNode, nearestOffset);
-        var contents = range.cloneContents();
-        var removals = [].concat(_toConsumableArray(Array.prototype.slice.call(contents.querySelectorAll('[data-slate-zero-width]'))), _toConsumableArray(Array.prototype.slice.call(contents.querySelectorAll('[contenteditable=false]'))));
-        removals.forEach(function (el) {
-          el.parentNode.removeChild(el);
-        }); // COMPAT: Edge has a bug where Range.prototype.toString() will
-        // convert \n into \r\n. The bug causes a loop when slate-react
-        // attempts to reposition its cursor to match the native position. Use
-        // textContent.length instead.
-        // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/10291116/
-
-        offset = contents.textContent.length;
-        domNode = textNode;
+
+        if (textNode) {
+          var window = ReactEditor.getWindow(editor);
+          var range = window.document.createRange();
+          range.setStart(textNode, 0);
+          range.setEnd(nearestNode, nearestOffset);
+          var contents = range.cloneContents();
+          var removals = [].concat(_toConsumableArray(Array.prototype.slice.call(contents.querySelectorAll('[data-slate-zero-width]'))), _toConsumableArray(Array.prototype.slice.call(contents.querySelectorAll('[contenteditable=false]'))));
+          removals.forEach(function (el) {
+            el.parentNode.removeChild(el);
+          }); // COMPAT: Edge has a bug where Range.prototype.toString() will
+          // convert \n into \r\n. The bug causes a loop when slate-react
+          // attempts to reposition its cursor to match the native position. Use
+          // textContent.length instead.
+          // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/10291116/
+
+          offset = contents.textContent.length;
+          domNode = textNode;
+        }
       } else if (voidNode) {
         // For void nodes, the element with the offset key will be a cousin, not an
         // ancestor, so find it by going down from the nearest void parent.