slate-react 0.86.0 → 0.87.0

package/dist/index.js

@@ -291,6 +291,7 @@ var ELEMENT_TO_NODE = new WeakMap();
 var NODE_TO_ELEMENT = new WeakMap();
 var NODE_TO_KEY = new WeakMap();
 var EDITOR_TO_KEY_TO_ELEMENT = new WeakMap();
+var EDITOR_TO_STYLE_ELEMENT = new WeakMap();
 /**
  * Weak maps for storing editor-related state.
  */
@@ -1504,18 +1505,55 @@ var Leaf = function Leaf(props) {
   } : _props$renderLeaf;
   var placeholderRef = React.useRef(null);
   var editor = useSlateStatic();
+  var placeholderResizeObserver = React.useRef(null);
+  React.useEffect(function () {
+    return function () {
+      if (placeholderResizeObserver.current) {
+        placeholderResizeObserver.current.disconnect();
+      }
+    };
+  }, []);
   React.useEffect(function () {
     var placeholderEl = placeholderRef === null || placeholderRef === void 0 ? void 0 : placeholderRef.current;
-    var editorEl = ReactEditor.toDOMNode(editor, editor);
 
-    if (!placeholderEl || !editorEl) {
-      return;
+    if (placeholderEl) {
+      EDITOR_TO_PLACEHOLDER_ELEMENT.set(editor, placeholderEl);
+    } else {
+      EDITOR_TO_PLACEHOLDER_ELEMENT["delete"](editor);
+    }
+
+    if (placeholderResizeObserver.current) {
+      // Update existing observer.
+      placeholderResizeObserver.current.disconnect();
+      if (placeholderEl) placeholderResizeObserver.current.observe(placeholderEl);
+    } else if (placeholderEl) {
+      // Create a new observer and observe the placeholder element.
+      placeholderResizeObserver.current = new ResizeObserver(function (_ref) {
+        var _ref2 = _slicedToArray(_ref, 1),
+            target = _ref2[0].target;
+
+        var styleElement = EDITOR_TO_STYLE_ELEMENT.get(editor);
+
+        if (styleElement) {
+          // Make the min-height the height of the placeholder.
+          var minHeight = "".concat(target.clientHeight, "px");
+          styleElement.innerHTML = ":where([data-slate-editor-id=\"".concat(editor.id, "\"]) { min-height: ").concat(minHeight, "; }");
+        }
+      });
+      placeholderResizeObserver.current.observe(placeholderEl);
+    }
+
+    if (!placeholderEl) {
+      // No placeholder element, so no need for a resize observer.
+      var styleElement = EDITOR_TO_STYLE_ELEMENT.get(editor);
+
+      if (styleElement) {
+        // No min-height if there is no placeholder.
+        styleElement.innerHTML = '';
+      }
     }
 
-    editorEl.style.minHeight = "".concat(placeholderEl.clientHeight, "px");
-    EDITOR_TO_PLACEHOLDER_ELEMENT.set(editor, placeholderEl);
     return function () {
-      editorEl.style.minHeight = 'auto';
       EDITOR_TO_PLACEHOLDER_ELEMENT["delete"](editor);
     };
   }, [placeholderRef, leaf]);
@@ -3525,12 +3563,14 @@ function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) {
 
 var Children = function Children(props) {
   return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, useChildren(props));
-};
+}; // The number of Editable components currently mounted.
+
+
+var mountedCount = 0;
 /**
  * Editable.
  */
 
-
 var Editable = function Editable(props) {
   var autoFocus = props.autoFocus,
       _props$decorate = props.decorate,
@@ -4154,6 +4194,38 @@ var Editable = function Editable(props) {
       EDITOR_TO_PENDING_INSERTION_MARKS["delete"](editor);
     });
   });
+  React.useEffect(function () {
+    mountedCount++;
+
+    if (mountedCount === 1) {
+      // Set global default styles for editors.
+      var defaultStylesElement = document.createElement('style');
+      defaultStylesElement.setAttribute('data-slate-default-styles', 'true');
+      defaultStylesElement.innerHTML = // :where is used to give these rules lower specificity so user stylesheets can override them.
+      ":where([data-slate-editor]) {" + // Allow positioning relative to the editable element.
+      "position: relative;" + // Prevent the default outline styles.
+      "outline: none;" + // Preserve adjacent whitespace and new lines.
+      "white-space: pre-wrap;" + // Allow words to break if they are too long.
+      "word-wrap: break-word;" + "}";
+      document.head.appendChild(defaultStylesElement);
+    }
+
+    return function () {
+      var _document$querySelect;
+
+      mountedCount--;
+      if (mountedCount <= 0) (_document$querySelect = document.querySelector('style[data-slate-default-styles]')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.remove();
+    };
+  }, []);
+  React.useEffect(function () {
+    var styleElement = document.createElement('style');
+    document.head.appendChild(styleElement);
+    EDITOR_TO_STYLE_ELEMENT.set(editor, styleElement);
+    return function () {
+      styleElement.remove();
+      EDITOR_TO_STYLE_ELEMENT["delete"](editor);
+    };
+  }, []);
   return /*#__PURE__*/React__default['default'].createElement(ReadOnlyContext.Provider, {
     value: readOnly
   }, /*#__PURE__*/React__default['default'].createElement(DecorateContext.Provider, {
@@ -4174,6 +4246,7 @@ var Editable = function Editable(props) {
     autoCorrect: HAS_BEFORE_INPUT_SUPPORT || !CAN_USE_DOM ? attributes.autoCorrect : 'false',
     autoCapitalize: HAS_BEFORE_INPUT_SUPPORT || !CAN_USE_DOM ? attributes.autoCapitalize : 'false',
     "data-slate-editor": true,
+    "data-slate-editor-id": editor.id,
     "data-slate-node": "value",
     // explicitly set this
     contentEditable: !readOnly,
@@ -4183,16 +4256,7 @@ var Editable = function Editable(props) {
     zindex: -1,
     suppressContentEditableWarning: true,
     ref: ref,
-    style: _objectSpread$1({
-      // Allow positioning relative to the editable element.
-      position: 'relative',
-      // Prevent the default outline styles.
-      outline: 'none',
-      // Preserve adjacent whitespace and new lines.
-      whiteSpace: 'pre-wrap',
-      // Allow words to break if they are too long.
-      wordWrap: 'break-word'
-    }, style),
+    style: style,
     onBeforeInput: React.useCallback(function (event) {
       // COMPAT: Certain browsers don't support the `beforeinput` event, so we
       // fall back to React's leaky polyfill instead just for it. It