slate-react 0.86.0 → 0.87.0

package/dist/slate-react.js

@@ -945,6 +945,7 @@
 	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.
 	 */
@@ -2158,18 +2159,55 @@
 	  } : _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]);
@@ -4435,12 +4473,14 @@
 
 	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,
@@ -5064,6 +5104,38 @@
 	      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, {
@@ -5084,6 +5156,7 @@
 	    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,
@@ -5093,16 +5166,7 @@
 	    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