slate-react 0.73.0 → 0.74.0

package/dist/index.js

@@ -4150,6 +4150,137 @@ var useFocused = function useFocused() {
   return React.useContext(FocusedContext);
 };
 
+function isError(error) {
+  return error instanceof Error;
+}
+/**
+ * A React context for sharing the editor selector context in a way to control rerenders
+ */
+
+
+var SlateSelectorContext = /*#__PURE__*/React.createContext({});
+
+var refEquality = function refEquality(a, b) {
+  return a === b;
+};
+/**
+ * use redux style selectors to prevent rerendering on every keystroke.
+ * Bear in mind rerendering can only prevented if the returned value is a value type or for reference types (e.g. objects and arrays) add a custom equality function.
+ *
+ * Example:
+ * ```
+ *  const isSelectionActive = useSlateSelector(editor => Boolean(editor.selection));
+ * ```
+ */
+
+
+function useSlateSelector(selector) {
+  var equalityFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : refEquality;
+
+  var _useReducer = React.useReducer(function (s) {
+    return s + 1;
+  }, 0),
+      _useReducer2 = _slicedToArray(_useReducer, 2),
+      forceRender = _useReducer2[1];
+
+  var context = React.useContext(SlateSelectorContext);
+
+  if (!context) {
+    throw new Error("The `useSlateSelector` hook must be used inside the <Slate> component's context.");
+  }
+
+  var getSlate = context.getSlate,
+      addEventListener = context.addEventListener;
+  var latestSubscriptionCallbackError = React.useRef();
+  var latestSelector = React.useRef(function () {
+    return null;
+  });
+  var latestSelectedState = React.useRef(null);
+  var selectedState;
+
+  try {
+    if (selector !== latestSelector.current || latestSubscriptionCallbackError.current) {
+      selectedState = selector(getSlate());
+    } else {
+      selectedState = latestSelectedState.current;
+    }
+  } catch (err) {
+    if (latestSubscriptionCallbackError.current && isError(err)) {
+      err.message += "\nThe error may be correlated with this previous error:\n".concat(latestSubscriptionCallbackError.current.stack, "\n\n");
+    }
+
+    throw err;
+  }
+
+  useIsomorphicLayoutEffect(function () {
+    latestSelector.current = selector;
+    latestSelectedState.current = selectedState;
+    latestSubscriptionCallbackError.current = undefined;
+  });
+  useIsomorphicLayoutEffect(function () {
+    function checkForUpdates() {
+      try {
+        var newSelectedState = latestSelector.current(getSlate());
+
+        if (equalityFn(newSelectedState, latestSelectedState.current)) {
+          return;
+        }
+
+        latestSelectedState.current = newSelectedState;
+      } catch (err) {
+        // we ignore all errors here, since when the component
+        // is re-rendered, the selectors are called again, and
+        // will throw again, if neither props nor store state
+        // changed
+        latestSubscriptionCallbackError.current = err;
+      }
+
+      forceRender();
+    }
+
+    var unsubscribe = addEventListener(checkForUpdates);
+    checkForUpdates();
+    return function () {
+      return unsubscribe();
+    };
+  }, // don't rerender on equalityFn change since we want to be able to define it inline
+  [addEventListener, getSlate]);
+  return selectedState;
+}
+/**
+ * Create selector context with editor updating on every editor change
+ */
+
+function getSelectorContext(editor) {
+  var eventListeners = React.useRef([]).current;
+  var slateRef = React.useRef({
+    editor: editor
+  }).current;
+  var onChange = React.useCallback(function (editor) {
+    slateRef.editor = editor;
+    eventListeners.forEach(function (listener) {
+      return listener(editor);
+    });
+  }, []);
+  var selectorContext = React.useMemo(function () {
+    return {
+      getSlate: function getSlate() {
+        return slateRef.editor;
+      },
+      addEventListener: function addEventListener(callback) {
+        eventListeners.push(callback);
+        return function () {
+          eventListeners.splice(eventListeners.indexOf(callback), 1);
+        };
+      }
+    };
+  }, [eventListeners, slateRef]);
+  return {
+    selectorContext: selectorContext,
+    onChange: onChange
+  };
+}
+
 var _excluded = ["editor", "children", "onChange", "value"];
 /**
  * A wrapper around the provider to handle `onChange` events, because the editor
@@ -4182,9 +4313,14 @@ var Slate = function Slate(props) {
       context = _React$useState2[0],
       setContext = _React$useState2[1];
 
+  var _getSelectorContext = getSelectorContext(editor),
+      selectorContext = _getSelectorContext.selectorContext,
+      handleSelectorChange = _getSelectorContext.onChange;
+
   var onContextChange = React.useCallback(function () {
     onChange(editor.children);
     setContext([editor]);
+    handleSelectorChange(editor);
   }, [onChange]);
   EDITOR_TO_ON_CHANGE.set(editor, onContextChange);
   React.useEffect(function () {
@@ -4220,13 +4356,15 @@ var Slate = function Slate(props) {
       document.removeEventListener('blur', fn, true);
     };
   }, []);
-  return /*#__PURE__*/React__default['default'].createElement(SlateContext.Provider, {
+  return /*#__PURE__*/React__default['default'].createElement(SlateSelectorContext.Provider, {
+    value: selectorContext
+  }, /*#__PURE__*/React__default['default'].createElement(SlateContext.Provider, {
     value: context
   }, /*#__PURE__*/React__default['default'].createElement(EditorContext.Provider, {
     value: editor
   }, /*#__PURE__*/React__default['default'].createElement(FocusedContext.Provider, {
     value: isFocused
-  }, children)));
+  }, children))));
 };
 
 /**
@@ -4634,6 +4772,7 @@ exports.useFocused = useFocused;
 exports.useReadOnly = useReadOnly;
 exports.useSelected = useSelected;
 exports.useSlate = useSlate;
+exports.useSlateSelector = useSlateSelector;
 exports.useSlateStatic = useSlateStatic;
 exports.withReact = withReact;
 //# sourceMappingURL=index.js.map