@udecode/plate-selection - npm Package Compare versions

Comparing version 33.0.0 to 34.0.0

dist/index.d.ts

@@ -5,8 +5,10 @@ import * as zustand_x from 'zustand-x';
 import * as _udecode_plate_common_server from '@udecode/plate-common/server';
-import { QueryNodeOptions, Value, PlateEditor, WithPlatePlugin, TElement, TEditor } from '@udecode/plate-common/server';
+import { QueryNodeOptions, Value, PlateEditor, KeyboardHandlerReturnType, WithPlatePlugin, TElement, TEditor } from '@udecode/plate-common/server';
 import * as _udecode_slate from '@udecode/slate';
-import * as react from 'react';
-import react__default from 'react';
+import * as _udecode_plate_common from '@udecode/plate-common';
+import * as React$1 from 'react';
+import React__default from 'react';
+import { Path } from 'slate';
 
-interface SelectionAreaProps extends Omit<Partial<SelectionOptions>, 'boundaries'>, react__default.HTMLAttributes<HTMLDivElement> {
+interface SelectionAreaProps extends Omit<Partial<SelectionOptions>, 'boundaries'>, React__default.HTMLAttributes<HTMLDivElement> {
     className?: string;
@@ -24,3 +26,3 @@ /**
 }
-declare function SelectionArea({ behaviour, children, container, document, features, getBoundaries, onBeforeStart, onMove, onStart, onStop, selectables, selectionAreaClass, selectionContainerClass, startAreas, ...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;
 
@@ -46,2 +48,8 @@ declare const blockSelectionStore: zustand_x.StoreApi<"selection", {
     unselect: () => void;
+} & {
+    addSelectedRow: (id: string, options?: {
+        aboveHtmlNode?: HTMLDivElement;
+        clear?: boolean;
+    }) => void;
+    selectedAll: () => void;
 }, {
@@ -81,2 +89,8 @@ isSelected: (id?: string) => boolean | "" | undefined;
     unselect: () => void;
+} & {
+    addSelectedRow: (id: string, options?: {
+        aboveHtmlNode?: HTMLDivElement;
+        clear?: boolean;
+    }) => void;
+    selectedAll: () => void;
 };
@@ -86,2 +100,3 @@
 interface BlockSelectionPlugin {
+    disableContextMenu?: boolean;
     onKeyDownSelecting?: (e: KeyboardEvent) => void;
@@ -98,6 +113,8 @@ query?: QueryNodeOptions;
 
-declare const onChangeBlockSelection: <V extends Value = Value, E extends PlateEditor<V> = PlateEditor<V>>(editor: E) => () => void;
+declare const onKeyDownSelection: <V extends Value = Value, E extends PlateEditor<V> = PlateEditor<V>>(editor: E) => KeyboardHandlerReturnType;
 
 declare const useHooksBlockSelection: <V extends Value = Value, E extends PlateEditor<V> = PlateEditor<V>>(editor: E, { options }: WithPlatePlugin<BlockSelectionPlugin>) => void;
 
+declare const withSelection: <V extends Value = Value, E extends PlateEditor<V> = PlateEditor<V>>(editor: E) => E;
+
 interface BlockSelectableOptions {
@@ -110,10 +127,16 @@ element: TElement;
     active: boolean;
+    editor?: undefined;
     element?: undefined;
+    path?: undefined;
+    ref?: undefined;
     selectedColor?: undefined;
 } | {
     active: boolean;
+    editor: _udecode_plate_common.PlateEditor<_udecode_slate.Value>;
     element: TElement;
+    path: Path;
+    ref: React__default.MutableRefObject<HTMLDivElement | null>;
     selectedColor: string | undefined;
 };
-declare const useBlockSelectable: ({ element, selectedColor, }: ReturnType<typeof useBlockSelectableState>) => {
+declare const useBlockSelectable: ({ editor, element, path, ref, }: ReturnType<typeof useBlockSelectableState>) => {
     props: {
@@ -123,5 +146,4 @@ 'data-key': string | undefined;
         key: string | undefined;
-        style: {
-            backgroundColor: string | undefined;
-        } | undefined;
+        onContextMenu: (event: React__default.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+        ref: React__default.MutableRefObject<HTMLDivElement | null> | undefined;
     };
@@ -131,8 +153,10 @@ };
     options: BlockSelectableOptions;
-} & react__default.HTMLAttributes<HTMLDivElement>): react__default.JSX.Element;
+} & React__default.HTMLAttributes<HTMLDivElement>): React__default.JSX.Element;
 
+declare const BlockSelection: ({ children }: any) => React__default.JSX.Element;
+
 interface BlockSelectionAreaProps extends Partial<SelectionAreaProps> {
 }
 declare const useBlockSelectionArea: (props: BlockSelectionAreaProps) => SelectionAreaProps;
-declare function BlockSelectionArea(props: BlockSelectionAreaProps): react__default.JSX.Element;
+declare function BlockSelectionArea(props: BlockSelectionAreaProps): React__default.JSX.Element;
 
@@ -146,2 +170,3 @@ interface BlockStartAreaState {
         className: string;
+        onContextMenu: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
         style: {
@@ -161,4 +186,4 @@ bottom: number | undefined;
 };
-declare const BlockStartArea: react.ForwardRefExoticComponent<{
-    as?: react.ElementType<any, keyof react.JSX.IntrinsicElements> | undefined;
+declare const BlockStartArea: React$1.ForwardRefExoticComponent<{
+    as?: React$1.ElementType<any, keyof React$1.JSX.IntrinsicElements> | undefined;
     asChild?: boolean | undefined;
@@ -169,2 +194,3 @@ className?: string | undefined;
         className: string;
+        onContextMenu: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
         style: {
@@ -182,8 +208,180 @@ bottom: number | undefined;
         };
-    }) => Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">) | undefined;
+    }) => Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">) | undefined;
     state?: BlockStartAreaState | undefined;
-    style?: react.CSSProperties | undefined;
-} & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<any>>;
+    style?: React$1.CSSProperties | undefined;
+} & Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<any>>;
 
+/**
+ * The show action has depend on blockSelection store a lot. should I move this
+ * action into blockSelection store?
+ */
+declare const blockContextMenuStore: zustand_x.StoreApi<"contextMenu", {
+    action: {
+        group: null | string;
+        value: null | string;
+    } | null;
+    anchorRect: {
+        x: number;
+        y: number;
+    };
+    openEditorId: string | null;
+    store: any;
+}, zustand_x.SetRecord<{
+    action: {
+        group: null | string;
+        value: null | string;
+    } | null;
+    anchorRect: {
+        x: number;
+        y: number;
+    };
+    openEditorId: string | null;
+    store: any;
+}> & {
+    state: zustand_x.SetImmerState<{
+        action: {
+            group: null | string;
+            value: null | string;
+        } | null;
+        anchorRect: {
+            x: number;
+            y: number;
+        };
+        openEditorId: string | null;
+        store: any;
+    }>;
+    mergeState: zustand_x.MergeState<{
+        action: {
+            group: null | string;
+            value: null | string;
+        } | null;
+        anchorRect: {
+            x: number;
+            y: number;
+        };
+        openEditorId: string | null;
+        store: any;
+    }>;
+} & {
+    reset: () => void;
+} & {
+    hide: () => void;
+    show: (editorId: string, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+}, {
+    isOpen: (editorId: string) => boolean;
+}>;
+declare const blockContextMenuActions: zustand_x.SetRecord<{
+    action: {
+        group: null | string;
+        value: null | string;
+    } | null;
+    anchorRect: {
+        x: number;
+        y: number;
+    };
+    openEditorId: string | null;
+    store: any;
+}> & {
+    state: zustand_x.SetImmerState<{
+        action: {
+            group: null | string;
+            value: null | string;
+        } | null;
+        anchorRect: {
+            x: number;
+            y: number;
+        };
+        openEditorId: string | null;
+        store: any;
+    }>;
+    mergeState: zustand_x.MergeState<{
+        action: {
+            group: null | string;
+            value: null | string;
+        } | null;
+        anchorRect: {
+            x: number;
+            y: number;
+        };
+        openEditorId: string | null;
+        store: any;
+    }>;
+} & {
+    reset: () => void;
+} & {
+    hide: () => void;
+    show: (editorId: string, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+};
+declare const blockContextMenuSelectors: zustand_x.StoreApiGet<{
+    action: {
+        group: null | string;
+        value: null | string;
+    } | null;
+    anchorRect: {
+        x: number;
+        y: number;
+    };
+    openEditorId: string | null;
+    store: any;
+}, {
+    isOpen: (editorId: string) => boolean;
+}>;
+declare const useBlockContextMenuSelectors: () => zustand_x.StoreApiUse<{
+    action: {
+        group: null | string;
+        value: null | string;
+    } | null;
+    anchorRect: {
+        x: number;
+        y: number;
+    };
+    openEditorId: string | null;
+    store: any;
+}, {
+    isOpen: (editorId: string) => boolean;
+}>;
+
+type CommandItem = {
+    shortcut?: string;
+    title: string;
+    value: string;
+};
+interface Menu {
+    heading: string;
+    items: CommandItem[];
+}
+declare const ACTION_DELETE = "context_menu_delete";
+declare const ACTION_COPY = "context_menu_copy";
+
+declare const useBlockContextMenuState: () => {
+    action: {
+        group: string | null;
+        value: string | null;
+    } | null;
+    editor: _udecode_plate_common.PlateEditor<_udecode_slate.Value>;
+    isOpen: boolean;
+    selectedBlocks: _udecode_slate.TNodeEntry<_udecode_slate.ENode<_udecode_slate.Value>>[];
+    selectedIds: Set<unknown>;
+    setAction: (value: {
+        group: string | null;
+        value: string | null;
+    } | null) => void;
+    setMarkSelection: (mark: string, value: string) => void;
+};
+declare const useBlockContextMenu: ({ editor, }: ReturnType<typeof useBlockContextMenuState>) => {
+    props: {};
+};
+
+declare const useBlockMenuItemsState: () => {
+    isOpen: boolean;
+    selectedBlocks: _udecode_slate.TNodeEntry<_udecode_slate.ENode<_udecode_slate.Value>>[];
+    selectedIds: Set<unknown>;
+};
+declare const useBlockMenuItems: () => {};
+
+declare const useBlockSelected: (id?: string) => boolean | "" | undefined;
+declare const useHasBlockSelected: () => boolean;
+
 declare const getSelectedBlocks: <V extends Value>(editor: TEditor<V>) => _udecode_slate.TNodeEntry<_udecode_slate.ENode<V>>[];
+declare const isBlockSelected: (node: TElement) => unknown;
 
@@ -193,3 +391,9 @@ declare const copySelectedBlocks: <V extends Value>(editor: PlateEditor<V>) => void;
 declare const extractSelectableIds: (els: Element[]) => any[];
+declare const extractSelectableId: (el: Element) => string | undefined;
 
+declare const getSelectedDomNode: (id: string) => Element | null;
+declare const getAllSelectableDomNode: () => NodeListOf<Element>;
+
+declare const onCloseBlockSelection: <V extends Value = Value, E extends PlateEditor<V> = PlateEditor<V>>(editor: E) => () => void;
+
 declare const pasteSelectedBlocks: <V extends Value>(editor: PlateEditor<V>, e: ClipboardEvent) => void;
@@ -200,2 +404,2 @@
 
-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 };
+export { ACTION_COPY, ACTION_DELETE, BlockSelectable, type BlockSelectableOptions, BlockSelection, BlockSelectionArea, type BlockSelectionAreaProps, type BlockSelectionPlugin, BlockStartArea, type BlockStartAreaState, type CommandItem, KEY_BLOCK_SELECTION, type Menu, SelectionArea, type SelectionAreaProps, blockContextMenuActions, blockContextMenuSelectors, blockContextMenuStore, blockSelectionActions, blockSelectionSelectors, blockSelectionStore, copySelectedBlocks, createBlockSelectionPlugin, extractSelectableId, extractSelectableIds, getAllSelectableDomNode, getSelectedBlocks, getSelectedDomNode, isBlockSelected, onCloseBlockSelection, onKeyDownSelection, pasteSelectedBlocks, selectInsertedBlocks, useBlockContextMenu, useBlockContextMenuSelectors, useBlockContextMenuState, useBlockMenuItems, useBlockMenuItemsState, useBlockSelectable, useBlockSelectableState, useBlockSelected, useBlockSelectionArea, useBlockSelectionSelectors, useBlockStartArea, useHasBlockSelected, useHooksBlockSelection, withSelection };

dist/index.js

@@ -59,3 +59,6 @@ "use strict";
 __export(src_exports, {
+  ACTION_COPY: () => ACTION_COPY,
+  ACTION_DELETE: () => ACTION_DELETE,
   BlockSelectable: () => BlockSelectable,
+  BlockSelection: () => BlockSelection,
   BlockSelectionArea: () => BlockSelectionArea,
@@ -65,2 +68,5 @@ BlockStartArea: () => BlockStartArea,
   SelectionArea: () => SelectionArea,
+  blockContextMenuActions: () => blockContextMenuActions,
+  blockContextMenuSelectors: () => blockContextMenuSelectors,
+  blockContextMenuStore: () => blockContextMenuStore,
   blockSelectionActions: () => blockSelectionActions,
@@ -71,13 +77,26 @@ blockSelectionSelectors: () => blockSelectionSelectors,
   createBlockSelectionPlugin: () => createBlockSelectionPlugin,
+  extractSelectableId: () => extractSelectableId,
   extractSelectableIds: () => extractSelectableIds,
+  getAllSelectableDomNode: () => getAllSelectableDomNode,
   getSelectedBlocks: () => getSelectedBlocks,
-  onChangeBlockSelection: () => onChangeBlockSelection,
+  getSelectedDomNode: () => getSelectedDomNode,
+  isBlockSelected: () => isBlockSelected,
+  onCloseBlockSelection: () => onCloseBlockSelection,
+  onKeyDownSelection: () => onKeyDownSelection,
   pasteSelectedBlocks: () => pasteSelectedBlocks,
   selectInsertedBlocks: () => selectInsertedBlocks,
+  useBlockContextMenu: () => useBlockContextMenu,
+  useBlockContextMenuSelectors: () => useBlockContextMenuSelectors,
+  useBlockContextMenuState: () => useBlockContextMenuState,
+  useBlockMenuItems: () => useBlockMenuItems,
+  useBlockMenuItemsState: () => useBlockMenuItemsState,
   useBlockSelectable: () => useBlockSelectable,
   useBlockSelectableState: () => useBlockSelectableState,
+  useBlockSelected: () => useBlockSelected,
   useBlockSelectionArea: () => useBlockSelectionArea,
   useBlockSelectionSelectors: () => useBlockSelectionSelectors,
   useBlockStartArea: () => useBlockStartArea,
-  useHooksBlockSelection: () => useHooksBlockSelection
+  useHasBlockSelected: () => useHasBlockSelected,
+  useHooksBlockSelection: () => useHooksBlockSelection,
+  withSelection: () => withSelection
 });
@@ -87,4 +106,63 @@ module.exports = __toCommonJS(src_exports);
 // src/blockSelectionStore.ts
+var import_server6 = require("@udecode/plate-common/server");
+
+// src/utils/copySelectedBlocks.ts
+var import_server2 = require("@udecode/plate-common/server");
+var import_copy_to_clipboard = __toESM(require("copy-to-clipboard"));
+
+// src/queries/getSelectedBlocks.ts
 var import_server = require("@udecode/plate-common/server");
+var getSelectedBlocks = (editor) => {
+  const selectedIds = blockSelectionSelectors.selectedIds();
+  return [
+    ...(0, import_server.getNodeEntries)(editor, {
+      at: [],
+      match: (n) => selectedIds.has(n.id)
+    })
+  ];
+};
+var isBlockSelected = (node) => {
+  const selectedIds = blockSelectionSelectors.selectedIds();
+  return node.id && selectedIds.has(node.id);
+};
 
+// src/utils/copySelectedBlocks.ts
+var copySelectedBlocks = (editor) => {
+  const selectedIds = blockSelectionSelectors.selectedIds();
+  const selectedEntries = getSelectedBlocks(editor);
+  const selectedFragment = selectedEntries.map(([node]) => node);
+  (0, import_copy_to_clipboard.default)(" ", {
+    onCopy: (dataTransfer) => {
+      const data = dataTransfer;
+      if (!data)
+        return;
+      let textPlain = "";
+      const div = document.createElement("div");
+      (0, import_server2.withoutNormalizing)(editor, () => {
+        selectedEntries.forEach(([, path]) => {
+          (0, import_server2.select)(editor, {
+            anchor: (0, import_server2.getStartPoint)(editor, path),
+            focus: (0, import_server2.getEndPoint)(editor, path)
+          });
+          editor.setFragmentData(data);
+          textPlain += `${data.getData("text/plain")}
+`;
+          const divChild = document.createElement("div");
+          divChild.innerHTML = data.getData("text/html");
+          div.append(divChild);
+        });
+        (0, import_server2.deselect)(editor);
+        blockSelectionActions.selectedIds(selectedIds);
+      });
+      data.setData("text/plain", textPlain);
+      data.setData("text/html", div.innerHTML);
+      const selectedFragmentStr = JSON.stringify(selectedFragment);
+      const encodedFragment = window.btoa(
+        encodeURIComponent(selectedFragmentStr)
+      );
+      data.setData("application/x-slate-fragment", encodedFragment);
+    }
+  });
+};
+
 // src/utils/extractSelectableIds.ts
@@ -94,5 +172,166 @@ var extractSelectableIds = (els) => {
 };
+var extractSelectableId = (el) => el.dataset.key;
 
+// src/utils/getAboveDomNode.ts
+var getSelectedDomNode = (id) => {
+  return document.querySelector(`.slate-selectable[data-key="${id}"]`);
+};
+var getAllSelectableDomNode = () => {
+  return document.querySelectorAll(`.slate-selectable`);
+};
+
+// src/context-menu/blockContextMenuStore.ts
+var import_server3 = require("@udecode/plate-common/server");
+var blockContextMenuStore = (0, import_server3.createZustandStore)("contextMenu")({
+  action: { group: null, value: null },
+  anchorRect: { x: 0, y: 0 },
+  openEditorId: null,
+  store: null
+}).extendActions((set) => ({
+  reset: () => {
+    set.anchorRect({ x: 0, y: 0 });
+  }
+})).extendActions((set, get) => ({
+  hide: () => {
+    set.openEditorId(null);
+    set.reset();
+  },
+  show: (editorId, event) => {
+    set.openEditorId(editorId);
+    get.store().show();
+    get.store().setAutoFocusOnShow(true);
+    get.store().setInitialFocus("first");
+    set.anchorRect({ x: event.clientX, y: event.clientY });
+  }
+})).extendSelectors((state) => ({
+  isOpen: (editorId) => state.openEditorId === editorId
+}));
+var blockContextMenuActions = blockContextMenuStore.set;
+var blockContextMenuSelectors = blockContextMenuStore.get;
+var useBlockContextMenuSelectors = () => blockContextMenuStore.use;
+
+// src/context-menu/types.ts
+var ACTION_DELETE = "context_menu_delete";
+var ACTION_COPY = "context_menu_copy";
+
+// src/context-menu/useBlockContextMenu.ts
+var import_react = require("react");
+var import_plate_common = require("@udecode/plate-common");
+var useBlockContextMenuState = () => {
+  const editor = (0, import_plate_common.useEditorRef)();
+  const isOpen = useBlockContextMenuSelectors().isOpen(editor.id);
+  const selectedIds = useBlockSelectionSelectors().selectedIds();
+  const action = (0, import_react.useMemo)(() => blockContextMenuSelectors.action(), [isOpen]);
+  const setAction = blockContextMenuActions.action;
+  const selectedBlocks = getSelectedBlocks(editor);
+  const setMarkSelection = (0, import_react.useCallback)(
+    (mark, value) => {
+      selectedBlocks.forEach(([node, nodePath]) => {
+        const _textEntry = (0, import_plate_common.getNodeTexts)(node);
+        const textEntry = Array.from(_textEntry);
+        textEntry.forEach(([_, textpath]) => {
+          (0, import_plate_common.setNodes)(
+            editor,
+            { [mark]: value },
+            { at: [...nodePath, ...textpath] }
+          );
+        });
+      });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [action]
+  );
+  return {
+    action,
+    editor,
+    isOpen,
+    selectedBlocks,
+    selectedIds,
+    setAction,
+    setMarkSelection
+  };
+};
+var useBlockContextMenu = ({
+  editor
+}) => {
+  return {
+    props: {
+      // onOpenChange: (value: boolean) => {
+      //   if (value) {
+      //     blockContextMenuActions.show(editor.id);
+      //   } else {
+      //     blockContextMenuActions.hide();
+      //   }
+      // },
+    }
+  };
+};
+
+// src/context-menu/useBlockMenuItems.ts
+var import_plate_common2 = require("@udecode/plate-common");
+var useBlockMenuItemsState = () => {
+  const editor = (0, import_plate_common2.useEditorRef)();
+  const isOpen = useBlockContextMenuSelectors().isOpen(editor.id);
+  const selectedIds = useBlockSelectionSelectors().selectedIds();
+  const selectedBlocks = getSelectedBlocks(editor);
+  return {
+    isOpen,
+    selectedBlocks,
+    selectedIds
+  };
+};
+var useBlockMenuItems = () => {
+  return {};
+};
+
+// src/utils/onCloseBlockSelection.ts
+var onCloseBlockSelection = (editor) => () => {
+  if (editor.selection && blockSelectionSelectors.isSelecting() && !blockContextMenuSelectors.isOpen(editor.id)) {
+    blockSelectionActions.unselect();
+    blockContextMenuActions.hide();
+  }
+};
+
+// src/utils/pasteSelectedBlocks.ts
+var import_plate_common3 = require("@udecode/plate-common");
+var import_server5 = require("@udecode/plate-common/server");
+var import_slate = require("slate");
+
+// src/utils/selectInsertedBlocks.ts
+var import_server4 = 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_server4.isBlock)(editor, op.node)) {
+      ids.add(op.node.id);
+    }
+  });
+  setTimeout(() => {
+    blockSelectionActions.isSelecting(true);
+    blockSelectionActions.selectedIds(ids);
+  }, 0);
+};
+
+// src/utils/pasteSelectedBlocks.ts
+var pasteSelectedBlocks = (editor, e) => {
+  const entries = getSelectedBlocks(editor);
+  if (entries.length > 0) {
+    const entry = entries.at(-1);
+    const [node, path] = entry;
+    (0, import_plate_common3.focusEditor)(editor, (0, import_server5.getStartPoint)(editor, path));
+    if (!(0, import_server5.isElementEmpty)(editor, node)) {
+      const at = import_slate.Path.next(path);
+      (0, import_server5.insertNodes)(editor, editor.blockFactory({}, at), {
+        at,
+        select: true
+      });
+    }
+    (0, import_plate_common3.insertData)(editor, e.clipboardData);
+    (0, import_server5.deselect)(editor);
+    selectInsertedBlocks(editor);
+  }
+};
+
 // src/blockSelectionStore.ts
-var blockSelectionStore = (0, import_server.createZustandStore)("selection")({
+var blockSelectionStore = (0, import_server6.createZustandStore)("selection")({
   isSelecting: false,
@@ -116,2 +355,25 @@ selectedIds: /* @__PURE__ */ new Set()
   }
+})).extendActions((set) => ({
+  addSelectedRow: (id, options = {}) => {
+    const { aboveHtmlNode, clear = true } = options;
+    const element = aboveHtmlNode != null ? aboveHtmlNode : getSelectedDomNode(id);
+    if (!element)
+      return;
+    const selectedIds = blockSelectionSelectors.selectedIds();
+    if (!selectedIds.has(id) && clear) {
+      set.resetSelectedIds();
+    }
+    set.setSelectedIds({
+      added: [element],
+      removed: []
+    });
+  },
+  selectedAll: () => {
+    const all = getAllSelectableDomNode();
+    set.resetSelectedIds();
+    set.setSelectedIds({
+      added: Array.from(all),
+      removed: []
+    });
+  }
 })).extendSelectors((set, get) => ({
@@ -126,9 +388,10 @@ isSelected: (id) => id && get.selectedIds().has(id),
 // src/createBlockSelectionPlugin.tsx
-var import_react5 = __toESM(require("react"));
-var import_server8 = require("@udecode/plate-common/server");
+var import_react7 = __toESM(require("react"));
+var import_server10 = require("@udecode/plate-common/server");
 
 // src/components/BlockSelectable.tsx
-var import_react = __toESM(require("react"));
-var import_plate_common = require("@udecode/plate-common");
-var import_server2 = require("@udecode/plate-common/server");
+var import_react2 = __toESM(require("react"));
+var import_plate_common4 = require("@udecode/plate-common");
+var import_server7 = require("@udecode/plate-common/server");
+var import_slate2 = require("slate");
 var useBlockSelectableState = ({
@@ -139,8 +402,9 @@ active,
 }) => {
-  const editor = (0, import_plate_common.useEditorRef)();
-  const path = import_react.default.useMemo(
-    () => (0, import_plate_common.findNodePath)(editor, element),
+  const editor = (0, import_plate_common4.useEditorRef)();
+  const ref = (0, import_react2.useRef)(null);
+  const path = import_react2.default.useMemo(
+    () => (0, import_plate_common4.findNodePath)(editor, element),
     [editor, element]
   );
-  if (!path || (0, import_server2.isInline)(editor, element)) {
+  if (!path || (0, import_server7.isInline)(editor, element)) {
     return {
@@ -150,7 +414,7 @@ active: active != null ? active : false
   }
-  const { query } = (0, import_server2.getPluginOptions)(
+  const { query } = (0, import_server7.getPluginOptions)(
     editor,
     KEY_BLOCK_SELECTION
   );
-  if (query && !(0, import_server2.queryNode)([element, path], query)) {
+  if (query && !(0, import_server7.queryNode)([element, path], query)) {
     return {
@@ -162,3 +426,6 @@ active: active != null ? active : false
     active: active != null ? active : true,
+    editor,
     element,
+    path,
+    ref,
     selectedColor
@@ -168,4 +435,6 @@ };
 var useBlockSelectable = ({
+  editor,
   element,
-  selectedColor
+  path,
+  ref
 }) => {
@@ -181,5 +450,27 @@ const id = element == null ? void 0 : element.id;
       key: id,
-      style: isSelected ? {
-        backgroundColor: selectedColor
-      } : void 0
+      onContextMenu: (event) => {
+        var _a, _b;
+        if (!editor)
+          return;
+        const { disableContextMenu = true } = (0, import_server7.getPluginOptions)(editor, KEY_BLOCK_SELECTION);
+        if (disableContextMenu)
+          return;
+        if ((_a = editor.selection) == null ? void 0 : _a.focus) {
+          const nodeEntry = (0, import_server7.getAboveNode)(editor);
+          if (nodeEntry && import_slate2.Path.isCommon(path, nodeEntry[1])) {
+            const isSelected2 = isBlockSelected(nodeEntry[0]);
+            const isOpenAlways = ((_b = event.target.dataset) == null ? void 0 : _b.openContextMenu) === "true";
+            if (!isSelected2 && !(0, import_server7.isVoid)(editor, nodeEntry[0]) && !isOpenAlways)
+              return event.stopPropagation();
+          }
+        }
+        const aboveHtmlNode = ref.current;
+        if (id && aboveHtmlNode) {
+          blockSelectionActions.addSelectedRow(id, {
+            aboveHtmlNode,
+            clear: !(event == null ? void 0 : event.shiftKey)
+          });
+        }
+      },
+      ref
     }, data)
@@ -199,12 +490,15 @@ };
   if (!state.active)
-    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, children);
-  return /* @__PURE__ */ import_react.default.createElement("div", __spreadValues(__spreadValues({}, rootProps), props), children);
+    return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, children);
+  return /* @__PURE__ */ import_react2.default.createElement("div", __spreadValues(__spreadValues({}, rootProps), props), children);
 }
 
+// src/components/BlockSelection.tsx
+var import_react5 = __toESM(require("react"));
+
 // src/components/BlockSelectionArea.tsx
-var import_react3 = __toESM(require("react"));
-var import_plate_common2 = require("@udecode/plate-common");
+var import_react4 = __toESM(require("react"));
+var import_plate_common5 = require("@udecode/plate-common");
 
 // src/components/SelectionArea.tsx
-var import_react2 = __toESM(require("react"));
+var import_react3 = __toESM(require("react"));
 var import_vanilla = __toESM(require("@viselect/vanilla"));
@@ -243,4 +537,4 @@ function SelectionArea(_a) {
   ]);
-  const ref = import_react2.default.createRef();
-  import_react2.default.useEffect(() => {
+  const ref = import_react3.default.createRef();
+  import_react3.default.useEffect(() => {
     const opt = {
@@ -266,3 +560,3 @@ behaviour,
   }, []);
-  return /* @__PURE__ */ import_react2.default.createElement("div", __spreadValues({ ref }, props), children);
+  return /* @__PURE__ */ import_react3.default.createElement("div", __spreadValues({ ref }, props), children);
 }
@@ -272,5 +566,5 @@
 var useBlockSelectionArea = (props) => {
-  const editor = (0, import_plate_common2.useEditorRef)();
+  const editor = (0, import_plate_common5.useEditorRef)();
   const onStart = ({ event, selection }) => {
-    (0, import_plate_common2.deselectEditor)(editor);
+    (0, import_plate_common5.deselectEditor)(editor);
     if (!(event == null ? void 0 : event.shiftKey)) {
@@ -310,7 +604,7 @@ selection.clearSelection();
   const componentProps = useBlockSelectionArea(props);
-  return /* @__PURE__ */ import_react3.default.createElement(SelectionArea, __spreadValues({}, componentProps));
+  return /* @__PURE__ */ import_react4.default.createElement(SelectionArea, __spreadValues({}, componentProps));
 }
 
 // src/components/BlockStartArea.tsx
-var import_plate_common3 = require("@udecode/plate-common");
+var import_plate_common6 = require("@udecode/plate-common");
 var useBlockStartArea = ({
@@ -323,2 +617,6 @@ placement = "left",
       className: `slate-start-area slate-start-area-${placement}`,
+      onContextMenu: (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+      },
       style: {
@@ -339,114 +637,74 @@ bottom: ["bottom"].includes(placement) ? 0 : void 0,
 };
-var BlockStartArea = (0, import_plate_common3.createPrimitiveComponent)("div")({
+var BlockStartArea = (0, import_plate_common6.createPrimitiveComponent)("div")({
   propsHook: useBlockStartArea
 });
 
-// src/onChangeBlockSelection.ts
-var onChangeBlockSelection = (editor) => () => {
-  if (editor.selection && blockSelectionSelectors.isSelecting()) {
-    blockSelectionActions.unselect();
-  }
-};
-
-// src/useHooksBlockSelection.ts
-var import_react4 = __toESM(require("react"));
-var import_plate_common5 = require("@udecode/plate-common");
-var import_server7 = require("@udecode/plate-common/server");
-
-// src/utils/copySelectedBlocks.ts
-var import_server4 = require("@udecode/plate-common/server");
-var import_copy_to_clipboard = __toESM(require("copy-to-clipboard"));
-
-// src/queries/getSelectedBlocks.ts
-var import_server3 = require("@udecode/plate-common/server");
-var getSelectedBlocks = (editor) => {
-  const selectedIds = blockSelectionSelectors.selectedIds();
-  return [
-    ...(0, import_server3.getNodeEntries)(editor, {
-      at: [],
-      match: (n) => selectedIds.has(n.id)
-    })
-  ];
-};
-
-// src/utils/copySelectedBlocks.ts
-var copySelectedBlocks = (editor) => {
-  const selectedIds = blockSelectionSelectors.selectedIds();
-  const selectedEntries = getSelectedBlocks(editor);
-  const selectedFragment = selectedEntries.map(([node]) => node);
-  (0, import_copy_to_clipboard.default)(" ", {
-    onCopy: (dataTransfer) => {
-      const data = dataTransfer;
-      if (!data)
-        return;
-      let textPlain = "";
-      const div = document.createElement("div");
-      (0, import_server4.withoutNormalizing)(editor, () => {
-        selectedEntries.forEach(([, path]) => {
-          (0, import_server4.select)(editor, {
-            anchor: (0, import_server4.getStartPoint)(editor, path),
-            focus: (0, import_server4.getEndPoint)(editor, path)
-          });
-          editor.setFragmentData(data);
-          textPlain += `${data.getData("text/plain")}
-`;
-          const divChild = document.createElement("div");
-          divChild.innerHTML = data.getData("text/html");
-          div.append(divChild);
-        });
-        (0, import_server4.deselect)(editor);
-        blockSelectionActions.selectedIds(selectedIds);
-      });
-      data.setData("text/plain", textPlain);
-      data.setData("text/html", div.innerHTML);
-      const selectedFragmentStr = JSON.stringify(selectedFragment);
-      const encodedFragment = window.btoa(
-        encodeURIComponent(selectedFragmentStr)
-      );
-      data.setData("application/x-slate-fragment", encodedFragment);
+// src/components/BlockSelection.tsx
+var BlockSelection = ({ children }) => {
+  return /* @__PURE__ */ import_react5.default.createElement(BlockSelectionArea, null, /* @__PURE__ */ import_react5.default.createElement(
+    BlockStartArea,
+    {
+      state: {
+        placement: "left"
+        // size: options.sizes?.left,
+      }
     }
-  });
-};
-
-// src/utils/pasteSelectedBlocks.ts
-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_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_server5.isBlock)(editor, op.node)) {
-      ids.add(op.node.id);
+  ), /* @__PURE__ */ import_react5.default.createElement(
+    BlockStartArea,
+    {
+      state: {
+        placement: "top"
+        // size: options.sizes?.top,
+      }
     }
-  });
-  setTimeout(() => {
-    blockSelectionActions.isSelecting(true);
-    blockSelectionActions.selectedIds(ids);
-  }, 0);
+  ), /* @__PURE__ */ import_react5.default.createElement(
+    BlockStartArea,
+    {
+      state: {
+        placement: "right"
+        // size: options.sizes?.right,
+      }
+    }
+  ), /* @__PURE__ */ import_react5.default.createElement(
+    BlockStartArea,
+    {
+      state: {
+        placement: "bottom"
+        // size: options.sizes?.bottom,
+      }
+    }
+  ), children);
 };
 
-// src/utils/pasteSelectedBlocks.ts
-var pasteSelectedBlocks = (editor, e) => {
-  const entries = getSelectedBlocks(editor);
-  if (entries.length > 0) {
-    const entry = entries.at(-1);
-    const [node, path] = entry;
-    (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_server6.insertNodes)(editor, editor.blockFactory({}, at), {
-        at,
-        select: true
-      });
+// src/onKeyDownSelection.ts
+var import_server8 = require("@udecode/plate-common/server");
+var onKeyDownSelection = (editor) => (event) => {
+  if ((0, import_server8.isHotkey)("mod+a", event)) {
+    const ancestorNode = (0, import_server8.getAncestorNode)(editor);
+    if (!ancestorNode)
+      return;
+    const [, path] = ancestorNode;
+    if ((0, import_server8.isSelectionCoverBlock)(editor)) {
+      return blockSelectionActions.selectedAll();
     }
-    (0, import_plate_common4.insertData)(editor, e.clipboardData);
-    (0, import_server6.deselect)(editor);
-    selectInsertedBlocks(editor);
+    if (!(0, import_server8.isRangeInSameBlock)(editor)) {
+      return blockSelectionActions.selectedAll();
+    }
+    (0, import_server8.select)(editor, path);
+    event.preventDefault();
+    event.stopPropagation();
   }
+  if ((0, import_server8.isHotkey)("escape", event)) {
+    const ancestorNode = (0, import_server8.getAncestorNode)(editor);
+    const id = ancestorNode == null ? void 0 : ancestorNode[0].id;
+    blockSelectionActions.addSelectedRow(id);
+    event.preventDefault();
+    event.stopPropagation();
+  }
 };
 
 // src/useHooksBlockSelection.ts
+var import_react6 = __toESM(require("react"));
+var import_plate_common7 = require("@udecode/plate-common");
+var import_server9 = require("@udecode/plate-common/server");
 var useHooksBlockSelection = (editor, { options }) => {
@@ -456,3 +714,4 @@ const { onKeyDownSelecting } = options;
   const selectedIds = useBlockSelectionSelectors().selectedIds();
-  import_react4.default.useEffect(() => {
+  const isOpen = useBlockContextMenuSelectors().isOpen(editor.id);
+  import_react6.default.useEffect(() => {
     const el = document.querySelector("#slate-shadow-input");
@@ -462,3 +721,3 @@ if (el) {
     }
-    const isReadonly = (0, import_plate_common5.isEditorReadOnly)(editor);
+    const isReadonly = (0, import_plate_common7.isEditorReadOnly)(editor);
     if (isSelecting) {
@@ -468,3 +727,3 @@ const input = document.createElement("input");
       input.style.position = "fixed";
-      input.style.zIndex = "10000";
+      input.style.zIndex = "999";
       input.style.top = "-300px";
@@ -477,10 +736,10 @@ input.style.left = "-300px";
           return;
-        if ((0, import_server7.isHotkey)("escape")(e)) {
+        if ((0, import_server9.isHotkey)("escape")(e)) {
           blockSelectionActions.unselect();
         }
-        if ((0, import_server7.isHotkey)("mod+z")(e)) {
+        if ((0, import_server9.isHotkey)("mod+z")(e)) {
           editor.undo();
           selectInsertedBlocks(editor);
         }
-        if ((0, import_server7.isHotkey)("mod+shift+z")(e)) {
+        if ((0, import_server9.isHotkey)("mod+shift+z")(e)) {
           editor.redo();
@@ -491,14 +750,16 @@ selectInsertedBlocks(editor);
           return;
-        if ((0, import_server7.isHotkey)("enter")(e)) {
-          const entry = (0, import_server7.findNode)(editor, {
+        if ((0, import_server9.isHotkey)("enter")(e)) {
+          const entry = (0, import_server9.findNode)(editor, {
+            at: [],
             match: (n) => blockSelectionSelectors.selectedIds().has(n.id)
           });
+          console.log(entry);
           if (entry) {
             const [, path] = entry;
-            (0, import_plate_common5.focusEditor)(editor, (0, import_server7.getEndPoint)(editor, path));
+            (0, import_plate_common7.focusEditor)(editor, (0, import_server9.getEndPoint)(editor, path));
             e.preventDefault();
           }
         }
-        if ((0, import_server7.isHotkey)(["backspace", "delete"])(e) && !isReadonly) {
-          (0, import_server7.removeNodes)(editor, {
+        if ((0, import_server9.isHotkey)(["backspace", "delete"])(e) && !isReadonly) {
+          (0, import_server9.removeNodes)(editor, {
             at: [],
@@ -508,2 +769,26 @@ match: (n) => blockSelectionSelectors.selectedIds().has(n.id)
         }
+        if ((0, import_server9.isHotkey)("up")(e)) {
+          const firstId = [...blockSelectionSelectors.selectedIds()][0];
+          const node = (0, import_server9.findNode)(editor, {
+            at: [],
+            match: (n) => n.id === firstId
+          });
+          const prev = (0, import_server9.getPreviousNode)(editor, {
+            at: node == null ? void 0 : node[1]
+          });
+          const prevId = prev == null ? void 0 : prev[0].id;
+          blockSelectionActions.addSelectedRow(prevId);
+        }
+        if ((0, import_server9.isHotkey)("down")(e)) {
+          const lastId = [...blockSelectionSelectors.selectedIds()].pop();
+          const node = (0, import_server9.findNode)(editor, {
+            at: [],
+            match: (n) => n.id === lastId
+          });
+          const next = (0, import_server9.getNextNode)(editor, {
+            at: node == null ? void 0 : node[1]
+          });
+          const nextId = next == null ? void 0 : next[0].id;
+          blockSelectionActions.addSelectedRow(nextId);
+        }
       });
@@ -521,6 +806,7 @@ input.addEventListener("copy", (e) => {
           if (!isReadonly) {
-            (0, import_server7.removeNodes)(editor, {
+            (0, import_server9.removeNodes)(editor, {
               at: [],
               match: (n) => blockSelectionSelectors.selectedIds().has(n.id)
             });
+            (0, import_plate_common7.focusEditor)(editor);
           }
@@ -538,10 +824,22 @@ }
     }
-  }, [editor, isSelecting, onKeyDownSelecting, selectedIds]);
+  }, [editor, isSelecting, onKeyDownSelecting, selectedIds, isOpen]);
 };
 
+// src/withSelection.ts
+var withSelection = (editor) => {
+  editor.addSelectedRow = blockSelectionActions.addSelectedRow;
+  return editor;
+};
+
 // src/createBlockSelectionPlugin.tsx
 var KEY_BLOCK_SELECTION = "blockSelection";
-var createBlockSelectionPlugin = (0, import_server8.createPluginFactory)({
+var createBlockSelectionPlugin = (0, import_server10.createPluginFactory)({
   handlers: {
-    onChange: onChangeBlockSelection
+    onChange: onCloseBlockSelection,
+    // onFocus: onCloseBlockSelection,
+    onKeyDown: onKeyDownSelection,
+    onMouseDown: () => (e) => {
+      if (e.button === 2)
+        e.preventDefault();
+    }
   },
@@ -572,3 +870,3 @@ inject: {
       var _a, _b, _c, _d;
-      return /* @__PURE__ */ import_react5.default.createElement(BlockSelectionArea, null, /* @__PURE__ */ import_react5.default.createElement(
+      return /* @__PURE__ */ import_react7.default.createElement(BlockSelectionArea, null, /* @__PURE__ */ import_react7.default.createElement(
         BlockStartArea,
@@ -581,3 +879,3 @@ {
         }
-      ), /* @__PURE__ */ import_react5.default.createElement(
+      ), /* @__PURE__ */ import_react7.default.createElement(
         BlockStartArea,
@@ -590,3 +888,3 @@ {
         }
-      ), /* @__PURE__ */ import_react5.default.createElement(
+      ), /* @__PURE__ */ import_react7.default.createElement(
         BlockStartArea,
@@ -599,3 +897,3 @@ {
         }
-      ), /* @__PURE__ */ import_react5.default.createElement(
+      ), /* @__PURE__ */ import_react7.default.createElement(
         BlockStartArea,
@@ -611,7 +909,19 @@ {
   }),
-  useHooks: useHooksBlockSelection
+  useHooks: useHooksBlockSelection,
+  withOverrides: withSelection
 });
+
+// src/hooks/useBlockSelected.ts
+var useBlockSelected = (id) => {
+  return useBlockSelectionSelectors().isSelected(id);
+};
+var useHasBlockSelected = () => {
+  return useBlockSelectionSelectors().selectedIds().size > 0;
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ACTION_COPY,
+  ACTION_DELETE,
   BlockSelectable,
+  BlockSelection,
   BlockSelectionArea,
@@ -621,2 +931,5 @@ BlockStartArea,
   SelectionArea,
+  blockContextMenuActions,
+  blockContextMenuSelectors,
+  blockContextMenuStore,
   blockSelectionActions,
@@ -627,14 +940,27 @@ blockSelectionSelectors,
   createBlockSelectionPlugin,
+  extractSelectableId,
   extractSelectableIds,
+  getAllSelectableDomNode,
   getSelectedBlocks,
-  onChangeBlockSelection,
+  getSelectedDomNode,
+  isBlockSelected,
+  onCloseBlockSelection,
+  onKeyDownSelection,
   pasteSelectedBlocks,
   selectInsertedBlocks,
+  useBlockContextMenu,
+  useBlockContextMenuSelectors,
+  useBlockContextMenuState,
+  useBlockMenuItems,
+  useBlockMenuItemsState,
   useBlockSelectable,
   useBlockSelectableState,
+  useBlockSelected,
   useBlockSelectionArea,
   useBlockSelectionSelectors,
   useBlockStartArea,
-  useHooksBlockSelection
+  useHasBlockSelected,
+  useHooksBlockSelection,
+  withSelection
 });
 //# sourceMappingURL=index.js.map

package.json

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

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

187857

increased by56.97%

Lines of code

2139

increased by62.29%

No dependency changes