slate-react 0.73.0 → 0.74.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # slate-react
 
+## 0.74.0
+
+### Minor Changes
+
+- [#4841](https://github.com/ianstormtaylor/slate/pull/4841) [`47f2403e`](https://github.com/ianstormtaylor/slate/commit/47f2403e3a46d84b8d8f99c6e2bf41f2699e30df) Thanks [@Fibs7000](https://github.com/Fibs7000)! - Added redux-style useSlateSelector to improve and prevent unneccessary rerendering with the useSlate hook
+
 ## 0.73.0
 
 ### Patch Changes

package/dist/components/slate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slate.d.ts","sourceRoot":"","sources":["../packages/slate-react/src/components/slate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAA;AAChF,OAAO,EAAyB,UAAU,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAOpD;;;GAGG;AAEH,eAAO,MAAM,KAAK;YACR,WAAW;WACZ,UAAU,EAAE;cACT,KAAK,CAAC,SAAS;sBACP,UAAU,EAAE,KAAK,IAAI;iBAoExC,CAAA"}
+{"version":3,"file":"slate.d.ts","sourceRoot":"","sources":["../packages/slate-react/src/components/slate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAA;AAChF,OAAO,EAAyB,UAAU,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAWpD;;;GAGG;AAEH,eAAO,MAAM,KAAK;YACR,WAAW;WACZ,UAAU,EAAE;cACT,KAAK,CAAC,SAAS;sBACP,UAAU,EAAE,KAAK,IAAI;iBA4ExC,CAAA"}

package/dist/hooks/use-slate-selector.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { Editor } from 'slate';
+declare type EditorChangeHandler = (editor: Editor) => void;
+/**
+ * A React context for sharing the editor selector context in a way to control rerenders
+ */
+export declare const SlateSelectorContext: import("react").Context<{
+    getSlate: () => Editor;
+    addEventListener: (callback: EditorChangeHandler) => () => void;
+}>;
+/**
+ * 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));
+ * ```
+ */
+export declare function useSlateSelector<T>(selector: (editor: Editor) => T, equalityFn?: (a: T, b: T) => boolean): T;
+/**
+ * Create selector context with editor updating on every editor change
+ */
+export declare function getSelectorContext(editor: Editor): {
+    selectorContext: {
+        getSlate: () => import("..").ReactEditor;
+        addEventListener: (callback: EditorChangeHandler) => () => void;
+    };
+    onChange: (editor: Editor) => void;
+};
+export {};
+//# sourceMappingURL=use-slate-selector.d.ts.map

package/dist/hooks/use-slate-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-slate-selector.d.ts","sourceRoot":"","sources":["../packages/slate-react/src/hooks/use-slate-selector.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAO9B,aAAK,mBAAmB,GAAG,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;AACnD;;GAEG;AAEH,eAAO,MAAM,oBAAoB;cACrB,MAAM,MAAM;iCACO,mBAAmB,KAAK,MAAM,IAAI;EACpD,CAAA;AAIb;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAChC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,CAAC,EAC/B,UAAU,GAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,OAAqB,KAuElD;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM;;;qCAed,mBAAmB;;uBARd,MAAM;EAiB7C"}

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export { useFocused } from './hooks/use-focused';
 export { useReadOnly } from './hooks/use-read-only';
 export { useSelected } from './hooks/use-selected';
 export { useSlate } from './hooks/use-slate';
+export { useSlateSelector } from './hooks/use-slate-selector';
 export { ReactEditor } from './plugin/react-editor';
 export { withReact } from './plugin/with-react';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["packages/slate-react/src/index.ts"],"names":[],"mappings":";AAMA,eAAO,MAAM,QAAQ,uEAAiD,CAAA;AACtE,OAAO,EACL,QAAQ,IAAI,eAAe,EAC3B,kBAAkB,EAClB,eAAe,EACf,sBAAsB,EACtB,kBAAkB,GACnB,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAA;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAG1C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG5C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["packages/slate-react/src/index.ts"],"names":[],"mappings":";AAMA,eAAO,MAAM,QAAQ,uEAAiD,CAAA;AACtE,OAAO,EACL,QAAQ,IAAI,eAAe,EAC3B,kBAAkB,EAClB,eAAe,EACf,sBAAsB,EACtB,kBAAkB,GACnB,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAA;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAG1C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAG7D,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA"}

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useEffect, useRef, useState, Fragment, useContext, createContext, useMemo, useCallback } from 'react';
+import React, { useLayoutEffect, useEffect, useRef, useState, Fragment, useContext, createContext, useMemo, useCallback, useReducer } from 'react';
 import { Path, Node, Editor, Text as Text$1, Range, Element as Element$1, Transforms } from 'slate';
 import getDirection from 'direction';
 import debounce from 'lodash/debounce';
@@ -3884,6 +3884,123 @@ var useFocused = () => {
   return 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__*/createContext({});
+
+var refEquality = (a, b) => 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 [, forceRender] = useReducer(s => s + 1, 0);
+  var context = useContext(SlateSelectorContext);
+
+  if (!context) {
+    throw new Error("The `useSlateSelector` hook must be used inside the <Slate> component's context.");
+  }
+
+  var {
+    getSlate,
+    addEventListener
+  } = context;
+  var latestSubscriptionCallbackError = useRef();
+  var latestSelector = useRef(() => null);
+  var latestSelectedState = 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(() => {
+    latestSelector.current = selector;
+    latestSelectedState.current = selectedState;
+    latestSubscriptionCallbackError.current = undefined;
+  });
+  useIsomorphicLayoutEffect(() => {
+    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 () => 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 = useRef([]).current;
+  var slateRef = useRef({
+    editor
+  }).current;
+  var onChange = useCallback(editor => {
+    slateRef.editor = editor;
+    eventListeners.forEach(listener => listener(editor));
+  }, []);
+  var selectorContext = useMemo(() => {
+    return {
+      getSlate: () => slateRef.editor,
+      addEventListener: callback => {
+        eventListeners.push(callback);
+        return () => {
+          eventListeners.splice(eventListeners.indexOf(callback), 1);
+        };
+      }
+    };
+  }, [eventListeners, slateRef]);
+  return {
+    selectorContext,
+    onChange
+  };
+}
+
 var _excluded = ["editor", "children", "onChange", "value"];
 /**
  * A wrapper around the provider to handle `onChange` events, because the editor
@@ -3913,9 +4030,14 @@ var Slate = props => {
     Object.assign(editor, rest);
     return [editor];
   });
+  var {
+    selectorContext,
+    onChange: handleSelectorChange
+  } = getSelectorContext(editor);
   var onContextChange = useCallback(() => {
     onChange(editor.children);
     setContext([editor]);
+    handleSelectorChange(editor);
   }, [onChange]);
   EDITOR_TO_ON_CHANGE.set(editor, onContextChange);
   useEffect(() => {
@@ -3946,13 +4068,15 @@ var Slate = props => {
       document.removeEventListener('blur', fn, true);
     };
   }, []);
-  return /*#__PURE__*/React.createElement(SlateContext.Provider, {
+  return /*#__PURE__*/React.createElement(SlateSelectorContext.Provider, {
+    value: selectorContext
+  }, /*#__PURE__*/React.createElement(SlateContext.Provider, {
     value: context
   }, /*#__PURE__*/React.createElement(EditorContext.Provider, {
     value: editor
   }, /*#__PURE__*/React.createElement(FocusedContext.Provider, {
     value: isFocused
-  }, children)));
+  }, children))));
 };
 
 /**
@@ -4279,5 +4403,5 @@ var withReact = editor => {
 // Components
 var Editable = IS_ANDROID ? AndroidEditable : Editable$1;
 
-export { AndroidEditable, Editable$1 as DefaultEditable, DefaultElement, DefaultLeaf, DefaultPlaceholder, Editable, ReactEditor, Slate, useEditor, useFocused, useReadOnly, useSelected, useSlate, useSlateStatic, withReact };
+export { AndroidEditable, Editable$1 as DefaultEditable, DefaultElement, DefaultLeaf, DefaultPlaceholder, Editable, ReactEditor, Slate, useEditor, useFocused, useReadOnly, useSelected, useSlate, useSlateSelector, useSlateStatic, withReact };
 //# sourceMappingURL=index.es.js.map