@udecode/plate-selection - npm Package Compare versions

Comparing version 32.0.0 to 33.0.0

dist/index.d.ts

 import * as zustand_x from 'zustand-x';
 import { SelectionOptions, SelectionEvents, ChangedElements } from '@viselect/vanilla';
 export { ChangedElements, SelectionEvent } from '@viselect/vanilla';
-import * as _udecode_plate_core from '@udecode/plate-core';
+import * as _udecode_plate_common_server from '@udecode/plate-common/server';
+import { QueryNodeOptions, Value, PlateEditor, WithPlatePlugin, TElement, TEditor } from '@udecode/plate-common/server';
 import * as _udecode_slate from '@udecode/slate';
-import { QueryNodeOptions, Value, PlateEditor, WithPlatePlugin, TElement, TEditor } from '@udecode/plate-common';
 import * as react from 'react';
@@ -12,66 +12,67 @@ import react__default from 'react';
     className?: string;
-    onBeforeStart?: SelectionEvents['beforestart'];
-    onStart?: SelectionEvents['start'];
-    onMove?: SelectionEvents['move'];
-    onStop?: SelectionEvents['stop'];
     /**
      * The boundaries of the selection area.
+     *
      * @boundaries ref of the selection area element.
      */
     getBoundaries?: (boundaries: SelectionOptions['boundaries']) => SelectionOptions['boundaries'];
+    onBeforeStart?: SelectionEvents['beforestart'];
+    onMove?: SelectionEvents['move'];
+    onStart?: SelectionEvents['start'];
+    onStop?: SelectionEvents['stop'];
 }
-declare function SelectionArea({ onBeforeStart, onStart, onMove, onStop, children, selectionAreaClass, selectionContainerClass, container, document, selectables, startAreas, behaviour, features, getBoundaries, ...props }: SelectionAreaProps): react__default.JSX.Element;
+declare function SelectionArea({ behaviour, children, container, document, features, getBoundaries, onBeforeStart, onMove, onStart, onStop, selectables, selectionAreaClass, selectionContainerClass, startAreas, ...props }: SelectionAreaProps): react__default.JSX.Element;
 
 declare const blockSelectionStore: zustand_x.StoreApi<"selection", {
+    isSelecting: boolean;
     selectedIds: Set<unknown>;
+}, zustand_x.SetRecord<{
     isSelecting: boolean;
-}, zustand_x.SetRecord<{
     selectedIds: Set<unknown>;
-    isSelecting: boolean;
 }> & {
     state: zustand_x.SetImmerState<{
+        isSelecting: boolean;
         selectedIds: Set<unknown>;
-        isSelecting: boolean;
     }>;
     mergeState: zustand_x.MergeState<{
+        isSelecting: boolean;
         selectedIds: Set<unknown>;
-        isSelecting: boolean;
     }>;
 } & {
+    resetSelectedIds: () => void;
     setSelectedIds: ({ added, removed }: ChangedElements) => void;
-    resetSelectedIds: () => void;
     unselect: () => void;
 }, {
+    isSelected: (id?: string) => boolean | "" | undefined;
     isSelectingSome: () => boolean;
-    isSelected: (id?: string) => boolean | "" | undefined;
 }>;
 declare const useBlockSelectionSelectors: () => zustand_x.StoreApiUse<{
+    isSelecting: boolean;
     selectedIds: Set<unknown>;
-    isSelecting: boolean;
 }, {
+    isSelected: (id?: string) => boolean | "" | undefined;
     isSelectingSome: () => boolean;
-    isSelected: (id?: string) => boolean | "" | undefined;
 }>;
 declare const blockSelectionSelectors: zustand_x.StoreApiGet<{
+    isSelecting: boolean;
     selectedIds: Set<unknown>;
-    isSelecting: boolean;
 }, {
+    isSelected: (id?: string) => boolean | "" | undefined;
     isSelectingSome: () => boolean;
-    isSelected: (id?: string) => boolean | "" | undefined;
 }>;
 declare const blockSelectionActions: zustand_x.SetRecord<{
+    isSelecting: boolean;
     selectedIds: Set<unknown>;
-    isSelecting: boolean;
 }> & {
     state: zustand_x.SetImmerState<{
+        isSelecting: boolean;
         selectedIds: Set<unknown>;
-        isSelecting: boolean;
     }>;
     mergeState: zustand_x.MergeState<{
+        isSelecting: boolean;
         selectedIds: Set<unknown>;
-        isSelecting: boolean;
     }>;
 } & {
+    resetSelectedIds: () => void;
     setSelectedIds: ({ added, removed }: ChangedElements) => void;
-    resetSelectedIds: () => void;
     unselect: () => void;
@@ -82,12 +83,12 @@ };
 interface BlockSelectionPlugin {
+    onKeyDownSelecting?: (e: KeyboardEvent) => void;
     query?: QueryNodeOptions;
-    onKeyDownSelecting?: (e: KeyboardEvent) => void;
     sizes?: {
+        bottom?: number;
         left?: number;
+        right?: number;
         top?: number;
-        bottom?: number;
-        right?: number;
     };
 }
-declare const createBlockSelectionPlugin: <OP = BlockSelectionPlugin, OV extends _udecode_slate.Value = _udecode_slate.Value, OE extends _udecode_plate_core.PlateEditor<OV> = _udecode_plate_core.PlateEditor<OV>>(override?: Partial<_udecode_plate_core.PlatePlugin<_udecode_plate_core.NoInfer<OP>, OV, OE>> | undefined, overrideByKey?: _udecode_plate_core.OverrideByKey<OV, OE> | undefined) => _udecode_plate_core.PlatePlugin<_udecode_plate_core.NoInfer<OP>, OV, OE>;
+declare const createBlockSelectionPlugin: <OP = BlockSelectionPlugin, OV extends _udecode_slate.Value = _udecode_slate.Value, OE extends _udecode_plate_common_server.PlateEditor<OV> = _udecode_plate_common_server.PlateEditor<OV>>(override?: Partial<_udecode_plate_common_server.PlatePlugin<_udecode_plate_common_server.NoInfer<OP>, OV, OE>> | undefined, overrideByKey?: _udecode_plate_common_server.OverrideByKey<OV, OE> | undefined) => _udecode_plate_common_server.PlatePlugin<_udecode_plate_common_server.NoInfer<OP>, OV, OE>;
 
@@ -100,6 +101,6 @@ declare const onChangeBlockSelection: <V extends Value = Value, E extends PlateEditor<V> = PlateEditor<V>>(editor: E) => () => void;
     element: TElement;
+    active?: boolean;
     selectedColor?: string;
-    active?: boolean;
 }
-declare const useBlockSelectableState: ({ element, selectedColor, active, }: BlockSelectableOptions) => {
+declare const useBlockSelectableState: ({ active, element, selectedColor, }: BlockSelectableOptions) => {
     active: boolean;
@@ -117,9 +118,9 @@ element?: undefined;
         className: string;
+        key: string | undefined;
         style: {
             backgroundColor: string | undefined;
         } | undefined;
-        key: string | undefined;
     };
 };
-declare function BlockSelectable({ options, children, ...props }: {
+declare function BlockSelectable({ children, options, ...props }: {
     options: BlockSelectableOptions;
@@ -134,4 +135,4 @@ } & react__default.HTMLAttributes<HTMLDivElement>): react__default.JSX.Element;
 interface BlockStartAreaState {
-    placement?: 'top' | 'bottom' | 'left' | 'right';
-    size?: string | number;
+    placement?: 'bottom' | 'left' | 'right' | 'top';
+    size?: number | string;
 }
@@ -142,12 +143,12 @@ declare const useBlockStartArea: ({ placement, size, }: BlockStartAreaState) => {
         style: {
+            bottom: number | undefined;
+            cursor: string;
+            height: string | number;
+            left: number | undefined;
             position: string;
+            right: number | undefined;
             top: number | undefined;
-            left: number | undefined;
-            bottom: number | undefined;
-            right: number | undefined;
+            userSelect: string;
             width: string | number;
-            height: string | number;
             zIndex: number;
-            userSelect: string;
-            cursor: string;
         };
@@ -160,20 +161,20 @@ };
     className?: string | undefined;
-    style?: react.CSSProperties | undefined;
     options?: any;
-    state?: BlockStartAreaState | undefined;
     setProps?: ((hookProps: {
         className: string;
         style: {
+            bottom: number | undefined;
+            cursor: string;
+            height: string | number;
+            left: number | undefined;
             position: string;
+            right: number | undefined;
             top: number | undefined;
-            left: number | undefined;
-            bottom: number | undefined;
-            right: number | undefined;
+            userSelect: string;
             width: string | number;
-            height: string | number;
             zIndex: number;
-            userSelect: string;
-            cursor: string;
         };
     }) => Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">) | undefined;
+    state?: BlockStartAreaState | undefined;
+    style?: react.CSSProperties | undefined;
 } & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<any>>;
@@ -189,7 +190,5 @@
 
-/**
- * Select inserted blocks from the last operations.
- */
+/** Select inserted blocks from the last operations. */
 declare const selectInsertedBlocks: <V extends Value>(editor: TEditor<V>) => void;
 
 export { BlockSelectable, type BlockSelectableOptions, BlockSelectionArea, type BlockSelectionAreaProps, type BlockSelectionPlugin, BlockStartArea, type BlockStartAreaState, KEY_BLOCK_SELECTION, SelectionArea, type SelectionAreaProps, blockSelectionActions, blockSelectionSelectors, blockSelectionStore, copySelectedBlocks, createBlockSelectionPlugin, extractSelectableIds, getSelectedBlocks, onChangeBlockSelection, pasteSelectedBlocks, selectInsertedBlocks, useBlockSelectable, useBlockSelectableState, useBlockSelectionArea, useBlockSelectionSelectors, useBlockStartArea, useHooksBlockSelection };

dist/index.js

@@ -84,3 +84,3 @@ "use strict";
 // src/blockSelectionStore.ts
-var import_plate_common = require("@udecode/plate-common");
+var import_server = require("@udecode/plate-common/server");
 
@@ -93,6 +93,9 @@ // src/utils/extractSelectableIds.ts
 // src/blockSelectionStore.ts
-var blockSelectionStore = (0, import_plate_common.createZustandStore)("selection")({
-  selectedIds: /* @__PURE__ */ new Set(),
-  isSelecting: false
+var blockSelectionStore = (0, import_server.createZustandStore)("selection")({
+  isSelecting: false,
+  selectedIds: /* @__PURE__ */ new Set()
 }).extendActions((set, get) => ({
+  resetSelectedIds: () => {
+    set.selectedIds(/* @__PURE__ */ new Set());
+  },
   setSelectedIds: ({ added, removed }) => {
@@ -106,5 +109,2 @@ const prev = get.selectedIds();
   },
-  resetSelectedIds: () => {
-    set.selectedIds(/* @__PURE__ */ new Set());
-  },
   unselect: () => {
@@ -115,4 +115,4 @@ set.selectedIds(/* @__PURE__ */ new Set());
 })).extendSelectors((set, get) => ({
-  isSelectingSome: () => get.selectedIds().size > 0,
-  isSelected: (id) => id && get.selectedIds().has(id)
+  isSelected: (id) => id && get.selectedIds().has(id),
+  isSelectingSome: () => get.selectedIds().size > 0
 }));
@@ -125,18 +125,19 @@ var useBlockSelectionSelectors = () => blockSelectionStore.use;
 var import_react5 = __toESM(require("react"));
-var import_plate_common10 = require("@udecode/plate-common");
+var import_server8 = require("@udecode/plate-common/server");
 
 // src/components/BlockSelectable.tsx
 var import_react = __toESM(require("react"));
-var import_plate_common2 = require("@udecode/plate-common");
+var import_plate_common = require("@udecode/plate-common");
+var import_server2 = require("@udecode/plate-common/server");
 var useBlockSelectableState = ({
+  active,
   element,
-  selectedColor,
-  active
+  selectedColor
 }) => {
-  const editor = (0, import_plate_common2.useEditorRef)();
+  const editor = (0, import_plate_common.useEditorRef)();
   const path = import_react.default.useMemo(
-    () => (0, import_plate_common2.findNodePath)(editor, element),
+    () => (0, import_plate_common.findNodePath)(editor, element),
     [editor, element]
   );
-  if (!path || (0, import_plate_common2.isInline)(editor, element)) {
+  if (!path || (0, import_server2.isInline)(editor, element)) {
     return {
@@ -146,7 +147,7 @@ active: active != null ? active : false
   }
-  const { query } = (0, import_plate_common2.getPluginOptions)(
+  const { query } = (0, import_server2.getPluginOptions)(
     editor,
     KEY_BLOCK_SELECTION
   );
-  if (query && !(0, import_plate_common2.queryNode)([element, path], query)) {
+  if (query && !(0, import_server2.queryNode)([element, path], query)) {
     return {
@@ -174,6 +175,6 @@ active: active != null ? active : false
       className: isSelected ? "slate-selected slate-selectable" : "slate-selectable",
+      key: id,
       style: isSelected ? {
         backgroundColor: selectedColor
-      } : void 0,
-      key: id
+      } : void 0
     }, data)
@@ -184,7 +185,7 @@ };
   var _b = _a, {
-    options,
-    children
+    children,
+    options
   } = _b, props = __objRest(_b, [
-    "options",
-    "children"
+    "children",
+    "options"
   ]);
@@ -200,3 +201,3 @@ const state = useBlockSelectableState(options);
 var import_react3 = __toESM(require("react"));
-var import_plate_common3 = require("@udecode/plate-common");
+var import_plate_common2 = require("@udecode/plate-common");
 
@@ -208,31 +209,31 @@ // src/components/SelectionArea.tsx
   var _b = _a, {
+    behaviour,
+    children,
+    container,
+    document: document2,
+    features,
+    getBoundaries = (boundaries) => boundaries,
     onBeforeStart,
+    onMove,
     onStart,
-    onMove,
     onStop,
-    children,
+    selectables,
     selectionAreaClass,
     selectionContainerClass,
-    container,
-    document: document2,
-    selectables,
-    startAreas,
-    behaviour,
-    features,
-    getBoundaries = (boundaries) => boundaries
+    startAreas
   } = _b, props = __objRest(_b, [
+    "behaviour",
+    "children",
+    "container",
+    "document",
+    "features",
+    "getBoundaries",
     "onBeforeStart",
+    "onMove",
     "onStart",
-    "onMove",
     "onStop",
-    "children",
+    "selectables",
     "selectionAreaClass",
     "selectionContainerClass",
-    "container",
-    "document",
-    "selectables",
-    "startAreas",
-    "behaviour",
-    "features",
-    "getBoundaries"
+    "startAreas"
   ]);
@@ -242,10 +243,10 @@ const ref = import_react2.default.createRef();
     const opt = {
-      selectionAreaClass,
-      selectionContainerClass,
+      behaviour,
       container,
       document: document2,
+      features,
       selectables,
-      startAreas,
-      behaviour,
-      features
+      selectionAreaClass,
+      selectionContainerClass,
+      startAreas
     };
@@ -267,5 +268,5 @@ const areaBoundaries = ref.current;
 var useBlockSelectionArea = (props) => {
-  const editor = (0, import_plate_common3.useEditorRef)();
+  const editor = (0, import_plate_common2.useEditorRef)();
   const onStart = ({ event, selection }) => {
-    (0, import_plate_common3.deselectEditor)(editor);
+    (0, import_plate_common2.deselectEditor)(editor);
     if (!(event == null ? void 0 : event.shiftKey)) {
@@ -283,8 +284,6 @@ selection.clearSelection();
     className: "slate-SelectionArea",
-    style: {
-      position: "relative",
-      width: "100%"
-    },
+    onMove,
     onStart,
-    onMove,
+    // Query selectors for elements which can be selected.
+    selectables: ".slate-selectable",
     // Class for the selection-area itself (the element).
@@ -298,6 +297,8 @@ selectionAreaClass: "slate-selection-area",
     // document={window.document}
-    // Query selectors for elements which can be selected.
-    selectables: ".slate-selectable",
     // Query selectors for elements from where a selection can be started from.
-    startAreas: ".slate-start-area"
+    startAreas: ".slate-start-area",
+    style: {
+      position: "relative",
+      width: "100%"
+    }
   }, props);
@@ -311,3 +312,3 @@ };
 // src/components/BlockStartArea.tsx
-var import_plate_common4 = require("@udecode/plate-common");
+var import_plate_common3 = require("@udecode/plate-common");
 var useBlockStartArea = ({
@@ -321,12 +322,12 @@ placement = "left",
       style: {
+        bottom: ["bottom"].includes(placement) ? 0 : void 0,
+        cursor: "text",
+        height: ["bottom", "top"].includes(placement) ? size : "100%",
+        left: ["bottom", "left", "top"].includes(placement) ? 0 : void 0,
         position: "absolute",
-        top: ["top", "left", "right"].includes(placement) ? 0 : void 0,
-        left: ["top", "left", "bottom"].includes(placement) ? 0 : void 0,
-        bottom: ["bottom"].includes(placement) ? 0 : void 0,
         right: ["right"].includes(placement) ? 0 : void 0,
+        top: ["left", "right", "top"].includes(placement) ? 0 : void 0,
+        userSelect: "none",
         width: ["left", "right"].includes(placement) ? size : "100%",
-        height: ["top", "bottom"].includes(placement) ? size : "100%",
-        zIndex: 1,
-        userSelect: "none",
-        cursor: "text"
+        zIndex: 1
       }
@@ -336,3 +337,3 @@ }
 };
-var BlockStartArea = (0, import_plate_common4.createPrimitiveComponent)("div")({
+var BlockStartArea = (0, import_plate_common3.createPrimitiveComponent)("div")({
   propsHook: useBlockStartArea
@@ -350,14 +351,15 @@ });
 var import_react4 = __toESM(require("react"));
-var import_plate_common9 = require("@udecode/plate-common");
+var import_plate_common5 = require("@udecode/plate-common");
+var import_server7 = require("@udecode/plate-common/server");
 
 // src/utils/copySelectedBlocks.ts
-var import_plate_common6 = require("@udecode/plate-common");
+var import_server4 = require("@udecode/plate-common/server");
 var import_copy_to_clipboard = __toESM(require("copy-to-clipboard"));
 
 // src/queries/getSelectedBlocks.ts
-var import_plate_common5 = require("@udecode/plate-common");
+var import_server3 = require("@udecode/plate-common/server");
 var getSelectedBlocks = (editor) => {
   const selectedIds = blockSelectionSelectors.selectedIds();
   return [
-    ...(0, import_plate_common5.getNodeEntries)(editor, {
+    ...(0, import_server3.getNodeEntries)(editor, {
       at: [],
@@ -381,7 +383,7 @@ match: (n) => selectedIds.has(n.id)
       const div = document.createElement("div");
-      (0, import_plate_common6.withoutNormalizing)(editor, () => {
+      (0, import_server4.withoutNormalizing)(editor, () => {
         selectedEntries.forEach(([, path]) => {
-          (0, import_plate_common6.select)(editor, {
-            anchor: (0, import_plate_common6.getStartPoint)(editor, path),
-            focus: (0, import_plate_common6.getEndPoint)(editor, path)
+          (0, import_server4.select)(editor, {
+            anchor: (0, import_server4.getStartPoint)(editor, path),
+            focus: (0, import_server4.getEndPoint)(editor, path)
           });
@@ -395,3 +397,3 @@ editor.setFragmentData(data);
         });
-        (0, import_plate_common6.deselect)(editor);
+        (0, import_server4.deselect)(editor);
         blockSelectionActions.selectedIds(selectedIds);
@@ -411,11 +413,12 @@ });
 // src/utils/pasteSelectedBlocks.ts
-var import_plate_common8 = require("@udecode/plate-common");
+var import_plate_common4 = require("@udecode/plate-common");
+var import_server6 = require("@udecode/plate-common/server");
 var import_slate = require("slate");
 
 // src/utils/selectInsertedBlocks.ts
-var import_plate_common7 = require("@udecode/plate-common");
+var import_server5 = require("@udecode/plate-common/server");
 var selectInsertedBlocks = (editor) => {
   const ids = /* @__PURE__ */ new Set();
   editor.operations.forEach((op) => {
-    if (op.type === "insert_node" && op.node.id && (0, import_plate_common7.isBlock)(editor, op.node)) {
+    if (op.type === "insert_node" && op.node.id && (0, import_server5.isBlock)(editor, op.node)) {
       ids.add(op.node.id);
@@ -436,6 +439,6 @@ }
     const [node, path] = entry;
-    (0, import_plate_common8.focusEditor)(editor, (0, import_plate_common8.getStartPoint)(editor, path));
-    if (!(0, import_plate_common8.isElementEmpty)(editor, node)) {
+    (0, import_plate_common4.focusEditor)(editor, (0, import_server6.getStartPoint)(editor, path));
+    if (!(0, import_server6.isElementEmpty)(editor, node)) {
       const at = import_slate.Path.next(path);
-      (0, import_plate_common8.insertNodes)(editor, editor.blockFactory({}, at), {
+      (0, import_server6.insertNodes)(editor, editor.blockFactory({}, at), {
         at,
@@ -445,4 +448,4 @@ select: true
     }
-    (0, import_plate_common8.insertData)(editor, e.clipboardData);
-    (0, import_plate_common8.deselect)(editor);
+    (0, import_plate_common4.insertData)(editor, e.clipboardData);
+    (0, import_server6.deselect)(editor);
     selectInsertedBlocks(editor);
@@ -462,3 +465,3 @@ }
     }
-    const isReadonly = (0, import_plate_common9.isEditorReadOnly)(editor);
+    const isReadonly = (0, import_plate_common5.isEditorReadOnly)(editor);
     if (isSelecting) {
@@ -476,10 +479,10 @@ const input = document.createElement("input");
           return;
-        if ((0, import_plate_common9.isHotkey)("escape")(e)) {
+        if ((0, import_server7.isHotkey)("escape")(e)) {
           blockSelectionActions.unselect();
         }
-        if ((0, import_plate_common9.isHotkey)("mod+z")(e)) {
+        if ((0, import_server7.isHotkey)("mod+z")(e)) {
           editor.undo();
           selectInsertedBlocks(editor);
         }
-        if ((0, import_plate_common9.isHotkey)("mod+shift+z")(e)) {
+        if ((0, import_server7.isHotkey)("mod+shift+z")(e)) {
           editor.redo();
@@ -490,4 +493,4 @@ selectInsertedBlocks(editor);
           return;
-        if ((0, import_plate_common9.isHotkey)("enter")(e)) {
-          const entry = (0, import_plate_common9.findNode)(editor, {
+        if ((0, import_server7.isHotkey)("enter")(e)) {
+          const entry = (0, import_server7.findNode)(editor, {
             match: (n) => blockSelectionSelectors.selectedIds().has(n.id)
@@ -497,8 +500,8 @@ });
             const [, path] = entry;
-            (0, import_plate_common9.focusEditor)(editor, (0, import_plate_common9.getEndPoint)(editor, path));
+            (0, import_plate_common5.focusEditor)(editor, (0, import_server7.getEndPoint)(editor, path));
             e.preventDefault();
           }
         }
-        if ((0, import_plate_common9.isHotkey)(["backspace", "delete"])(e) && !isReadonly) {
-          (0, import_plate_common9.removeNodes)(editor, {
+        if ((0, import_server7.isHotkey)(["backspace", "delete"])(e) && !isReadonly) {
+          (0, import_server7.removeNodes)(editor, {
             at: [],
@@ -520,3 +523,3 @@ match: (n) => blockSelectionSelectors.selectedIds().has(n.id)
           if (!isReadonly) {
-            (0, import_plate_common9.removeNodes)(editor, {
+            (0, import_server7.removeNodes)(editor, {
               at: [],
@@ -542,3 +545,15 @@ match: (n) => blockSelectionSelectors.selectedIds().has(n.id)
 var KEY_BLOCK_SELECTION = "blockSelection";
-var createBlockSelectionPlugin = (0, import_plate_common10.createPluginFactory)({
+var createBlockSelectionPlugin = (0, import_server8.createPluginFactory)({
+  handlers: {
+    onChange: onChangeBlockSelection
+  },
+  inject: {
+    aboveComponent: () => ({ children, element }) => BlockSelectable({
+      children,
+      options: {
+        element,
+        selectedColor: "rgb(219 234 254)"
+      }
+    })
+  },
   key: KEY_BLOCK_SELECTION,
@@ -550,21 +565,8 @@ options: {
     sizes: {
+      bottom: 4,
       left: 4,
-      top: 4,
       right: 4,
-      bottom: 4
+      top: 4
     }
   },
-  inject: {
-    aboveComponent: () => ({ element, children }) => BlockSelectable({
-      options: {
-        element,
-        selectedColor: "rgb(219 234 254)"
-      },
-      children
-    })
-  },
-  handlers: {
-    onChange: onChangeBlockSelection
-  },
-  useHooks: useHooksBlockSelection,
   then: (editor, { options }) => ({
@@ -577,4 +579,4 @@ renderAboveEditable: ({ children }) => {
           state: {
-            size: (_a = options.sizes) == null ? void 0 : _a.left,
-            placement: "left"
+            placement: "left",
+            size: (_a = options.sizes) == null ? void 0 : _a.left
           }
@@ -586,4 +588,4 @@ }
           state: {
-            size: (_b = options.sizes) == null ? void 0 : _b.top,
-            placement: "top"
+            placement: "top",
+            size: (_b = options.sizes) == null ? void 0 : _b.top
           }
@@ -595,4 +597,4 @@ }
           state: {
-            size: (_c = options.sizes) == null ? void 0 : _c.right,
-            placement: "right"
+            placement: "right",
+            size: (_c = options.sizes) == null ? void 0 : _c.right
           }
@@ -604,4 +606,4 @@ }
           state: {
-            size: (_d = options.sizes) == null ? void 0 : _d.bottom,
-            placement: "bottom"
+            placement: "bottom",
+            size: (_d = options.sizes) == null ? void 0 : _d.bottom
           }
@@ -611,3 +613,4 @@ }
     }
-  })
+  }),
+  useHooks: useHooksBlockSelection
 });
@@ -614,0 +617,0 @@ // Annotate the CommonJS export names for ESM import in node:

package.json

 {
   "name": "@udecode/plate-selection",
-  "version": "32.0.0",
+  "version": "33.0.0",
   "description": "Plate plugin to add a visual way of selecting blocks",
@@ -49,3 +49,3 @@ "license": "MIT",
   "peerDependencies": {
-    "@udecode/plate-common": ">=32.0.0",
+    "@udecode/plate-common": ">=33.0.0",
     "react": ">=16.8.0",
@@ -52,0 +52,0 @@ "react-dom": ">=16.8.0",

No alert changes

Improved metrics

Total package byte prevSize

119677

increased by0.9%

Lines of code

1318

increased by0.23%

No dependency changes