slate-react 0.89.0 → 0.90.0

package/dist/index.js

@@ -292,7 +292,6 @@ 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.
  */
@@ -1538,22 +1537,6 @@ var useSlateStatic = function useSlateStatic() {
   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.
  */
@@ -1568,6 +1551,7 @@ var Leaf = function Leaf(props) {
       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);
@@ -1594,32 +1578,23 @@ var Leaf = function Leaf(props) {
     } else if (placeholderEl) {
       // Create a new observer and observe the placeholder element.
       var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
-      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 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(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);
     };
@@ -3615,7 +3590,7 @@ function useTrackUserInput() {
   };
 }
 
-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; } } }; }
@@ -3630,15 +3605,15 @@ 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 _EDITOR_TO_PLACEHOLDE, _EDITOR_TO_PLACEHOLDE2;
+
   var autoFocus = props.autoFocus,
       _props$decorate = props.decorate,
       decorate = _props$decorate === void 0 ? defaultDecorate : _props$decorate,
@@ -3655,9 +3630,11 @@ var Editable = function Editable(props) {
       _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
@@ -4261,39 +4238,7 @@ 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');
-      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, {
@@ -4314,7 +4259,6 @@ 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,
@@ -4324,7 +4268,18 @@ var Editable = function Editable(props) {
     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