slate-react 0.89.0 → 0.90.0

package/dist/slate-react.js

@@ -945,7 +945,6 @@
 	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.
 	 */
@@ -2690,22 +2689,6 @@
 	  return editor;
 	};
 
-	/**
-	 * Returns a set of rules that use the `:where` selector if it is supported,
-	 * otherwise it falls back to the provided selector on its own.
-	 *
-	 * The `:where` selector is used to give a selector a lower specificity,
-	 * allowing the rule to be overridden by a user-defined stylesheet.
-	 *
-	 * Older browsers do not support the `:where` selector.
-	 * If it is not supported, the selector will be used without `:where`,
-	 * which means that the rule will have a higher specificity and a user-defined
-	 * stylesheet will not be able to override it easily.
-	 */
-	function whereIfSupported(selector, styles) {
-	  return "@supports (selector(:where(".concat(selector, "))) {") + ":where(".concat(selector, ") { ").concat(styles, " }") + "}" + "@supports not (selector(:where(".concat(selector, "))) {") + "".concat(selector, " { ").concat(styles, " }") + "}";
-	}
-
 	/**
 	 * Individual leaves in a text node with unique formatting.
 	 */
@@ -2720,6 +2703,7 @@
 	      renderLeaf = _props$renderLeaf === void 0 ? function (props) {
 	    return /*#__PURE__*/React__default['default'].createElement(DefaultLeaf, Object.assign({}, props));
 	  } : _props$renderLeaf;
+	  var lastPlaceholderRef = React.useRef(null);
 	  var placeholderRef = React.useRef(null);
 	  var editor = useSlateStatic();
 	  var placeholderResizeObserver = React.useRef(null);
@@ -2746,32 +2730,23 @@
 	    } else if (placeholderEl) {
 	      // Create a new observer and observe the placeholder element.
 	      var ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
-	      placeholderResizeObserver.current = new ResizeObserver$1(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 selector = "[data-slate-editor-id=\"".concat(editor.id, "\"]");
-	          var styles = "min-height: ".concat(target.clientHeight, "px;");
-	          styleElement.innerHTML = whereIfSupported(selector, styles);
-	        }
+	      placeholderResizeObserver.current = new ResizeObserver$1(function () {
+	        // Force a re-render of the editor so its min-height can be updated
+	        // to the new height of the placeholder.
+	        var forceRender = EDITOR_TO_FORCE_RENDER.get(editor);
+	        forceRender === null || forceRender === void 0 ? void 0 : forceRender();
 	      });
 	      placeholderResizeObserver.current.observe(placeholderEl);
 	    }
 
-	    if (!placeholderEl) {
+	    if (!placeholderEl && lastPlaceholderRef.current) {
 	      // 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 = '';
-	      }
+	      // Force a re-render of the editor so its min-height can be reset.
+	      var forceRender = EDITOR_TO_FORCE_RENDER.get(editor);
+	      forceRender === null || forceRender === void 0 ? void 0 : forceRender();
 	    }
 
+	    lastPlaceholderRef.current = placeholderRef.current;
 	    return function () {
 	      EDITOR_TO_PLACEHOLDER_ELEMENT["delete"](editor);
 	    };
@@ -5023,7 +4998,7 @@
 	  };
 	}
 
-	var _excluded$1 = ["autoFocus", "decorate", "onDOMBeforeInput", "placeholder", "readOnly", "renderElement", "renderLeaf", "renderPlaceholder", "scrollSelectionIntoView", "style", "as"],
+	var _excluded$1 = ["autoFocus", "decorate", "onDOMBeforeInput", "placeholder", "readOnly", "renderElement", "renderLeaf", "renderPlaceholder", "scrollSelectionIntoView", "style", "as", "disableDefaultStyles"],
 	    _excluded2 = ["text"];
 
 	function _createForOfIteratorHelper$1(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$1(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
@@ -5038,15 +5013,15 @@
 
 	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 _EDITOR_TO_PLACEHOLDE, _EDITOR_TO_PLACEHOLDE2;
+
 	  var autoFocus = props.autoFocus,
 	      _props$decorate = props.decorate,
 	      decorate = _props$decorate === void 0 ? defaultDecorate : _props$decorate,
@@ -5063,9 +5038,11 @@
 	      _props$scrollSelectio = props.scrollSelectionIntoView,
 	      scrollSelectionIntoView = _props$scrollSelectio === void 0 ? defaultScrollSelectionIntoView : _props$scrollSelectio,
 	      _props$style = props.style,
-	      style = _props$style === void 0 ? {} : _props$style,
+	      userStyle = _props$style === void 0 ? {} : _props$style,
 	      _props$as = props.as,
 	      Component = _props$as === void 0 ? 'div' : _props$as,
+	      _props$disableDefault = props.disableDefaultStyles,
+	      disableDefaultStyles = _props$disableDefault === void 0 ? false : _props$disableDefault,
 	      attributes = _objectWithoutProperties(props, _excluded$1);
 
 	  var editor = useSlate(); // Rerender editor when composition status changed
@@ -5669,39 +5646,7 @@
 	      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');
-	      var selector = '[data-slate-editor]';
-	      var defaultStyles = // 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;";
-	      defaultStylesElement.innerHTML = whereIfSupported(selector, defaultStyles);
-	      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);
-	    };
-	  }, []);
+	  var placeholderHeight = (_EDITOR_TO_PLACEHOLDE = EDITOR_TO_PLACEHOLDER_ELEMENT.get(editor)) === null || _EDITOR_TO_PLACEHOLDE === void 0 ? void 0 : (_EDITOR_TO_PLACEHOLDE2 = _EDITOR_TO_PLACEHOLDE.getBoundingClientRect()) === null || _EDITOR_TO_PLACEHOLDE2 === void 0 ? void 0 : _EDITOR_TO_PLACEHOLDE2.height;
 	  return /*#__PURE__*/React__default['default'].createElement(ReadOnlyContext.Provider, {
 	    value: readOnly
 	  }, /*#__PURE__*/React__default['default'].createElement(DecorateContext.Provider, {
@@ -5722,7 +5667,6 @@
 	    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,
@@ -5732,7 +5676,18 @@
 	    zindex: -1,
 	    suppressContentEditableWarning: true,
 	    ref: ref,
-	    style: style,
+	    style: _objectSpread$1(_objectSpread$1({}, disableDefaultStyles ? {} : _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'
+	    }, placeholderHeight ? {
+	      minHeight: placeholderHeight
+	    } : {})), userStyle),
 	    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