Added deleteBlocks method and fixed deleting several blocks (#181)

* added deleteBlocks method and fixed deleting several blocks after selection

packages/core/editor/README.md

@@ -103,10 +103,16 @@ type YooEditor<TNodes> = {
   updateBlock: (id: string, data: Partial<YooptaBlockData>) => void;
 
   /**
-   * Deletes a block from the editor.
+   * Deletes block from the editor children.
    */
   deleteBlock: (options?: DeleteBlockOptions) => void;
 
+  /**
+   * Deletes blocks from paths or blockIds
+   *
+   */
+  deleteBlocks: (options?: DeleteBlocksOptions) => void;
+
   /**
    * Duplicates a block within the editor.
    */

packages/core/editor/src/components/Editor/Editor.tsx

@@ -198,15 +198,15 @@ const Editor = ({
 
       if (isAllBlocksSelected) {
         event.preventDefault();
-        editor.deleteBlock({ deleteAll: true });
+        editor.deleteBlocks({ deleteAll: true });
         editor.setBlockSelected(null);
         resetSelectionState();
         return;
       }
 
       if (Array.isArray(editor.selectedBlocks) && editor.selectedBlocks?.length > 0) {
         event.preventDefault();
-        editor.deleteBlock({ fromPaths: editor.selectedBlocks });
+        editor.deleteBlocks({ paths: editor.selectedBlocks, focus: false });
         editor.setBlockSelected(null);
         resetSelectionState();
         return;

packages/core/editor/src/contexts/YooptaContext/YooptaContext.tsx

@@ -18,6 +18,7 @@ const DEFAULT_HANDLERS: YooptaEditorContext = {
     moveBlock: () => undefined,
     splitBlock: () => undefined,
     deleteBlock: () => undefined,
+    deleteBlocks: () => undefined,
     toggleBlock: () => undefined,
     focusBlock: () => undefined,
     decreaseBlockDepth: () => undefined,

packages/core/editor/src/editor/blocks/deleteBlocks.ts

@@ -0,0 +1,96 @@
+import { createDraft, finishDraft } from 'immer';
+import { createEditor, Editor } from 'slate';
+import { withHistory } from 'slate-history';
+import { withReact } from 'slate-react';
+import { buildBlockData } from '../../components/Editor/utils';
+import { withShortcuts } from '../../extensions/shortcuts';
+import { findPluginBlockBySelectionPath } from '../../utils/findPluginBlockBySelectionPath';
+import { generateId } from '../../utils/generateId';
+import { YooEditor, YooptaEditorTransformOptions } from '../types';
+// // [TODO] Circular deps
+// import { buildSlateEditor } from '../../utils/editorBuilders';
+
+function buildSlateEditor(editor: YooEditor): Editor {
+  const slate = withShortcuts(editor, withHistory(withReact(createEditor())));
+  return slate;
+}
+
+export type DeleteBlocksOptions = Pick<YooptaEditorTransformOptions, 'focus' | 'focusAt' | 'slate'> & {
+  blockIds?: string[];
+  paths?: number[];
+  deleteAll?: boolean;
+};
+
+export function deleteBlocks(editor: YooEditor, options: DeleteBlocksOptions = {}) {
+  const { deleteAll = false, paths, blockIds, focus = true } = options;
+
+  if (deleteAll || Object.keys(editor.children).length === 1) {
+    editor.children = {};
+    editor.blockEditorsMap = {};
+    const block = buildBlockData({ id: generateId() });
+    const slate = buildSlateEditor(editor);
+
+    editor.children[block.id] = block;
+    editor.blockEditorsMap[block.id] = slate;
+
+    editor.setSelection([0]);
+    editor.applyChanges();
+    editor.emit('change', editor.children);
+
+    if (focus) editor.focusBlock(block.id, { waitExecution: true });
+
+    return;
+  }
+
+  if (Array.isArray(blockIds) && blockIds.length > 0) {
+    editor.children = createDraft(editor.children);
+
+    blockIds.forEach((id) => {
+      delete editor.children[id];
+      delete editor.blockEditorsMap[id];
+    });
+
+    const blockDataIds = Object.keys(editor.children).sort((a, b) =>
+      editor.children[a].meta.order > editor.children[b].meta.order ? 1 : -1,
+    );
+
+    blockDataIds.forEach((id, index) => {
+      editor.children[id].meta.order = index;
+    });
+
+    editor.children = finishDraft(editor.children);
+    editor.applyChanges();
+    editor.emit('change', editor.children);
+
+    if (focus) editor.focusBlock(blockDataIds[0], { waitExecution: true });
+    return;
+  }
+
+  if (Array.isArray(paths) && paths.length > 0) {
+    editor.children = createDraft(editor.children);
+
+    paths.forEach((path) => {
+      const block = findPluginBlockBySelectionPath(editor, { at: [path] });
+      if (block) {
+        delete editor.children[block.id];
+        delete editor.blockEditorsMap[block.id];
+      }
+    });
+
+    const blockDataIds = Object.keys(editor.children).sort((a, b) =>
+      editor.children[a].meta.order > editor.children[b].meta.order ? 1 : -1,
+    );
+
+    blockDataIds.forEach((id, index) => {
+      editor.children[id].meta.order = index;
+    });
+
+    editor.children = finishDraft(editor.children);
+    editor.applyChanges();
+    editor.emit('change', editor.children);
+
+    if (focus) editor.focusBlock(blockDataIds[0], { waitExecution: true });
+
+    return;
+  }
+}

packages/core/editor/src/editor/blocks/index.ts

@@ -1,5 +1,6 @@
 import { insertBlock } from './insertBlock';
 import { deleteBlock } from './deleteBlock';
+import { deleteBlocks } from './deleteBlocks';
 import { moveBlock } from './moveBlock';
 import { focusBlock } from './focusBlock';
 import { splitBlock } from './splitBlock';
@@ -22,6 +23,7 @@ export const Blocks = {
   updateBlock,
   toggleBlock,
   insertBlocks,
+  deleteBlocks,
   // [TODO]
   // updateBlocks
 };

packages/core/editor/src/editor/index.tsx

@@ -17,6 +17,7 @@ import { toggleBlock } from './blocks/toggleBlock';
 import { blur } from './core/blur';
 import { focus } from './core/focus';
 import { isFocused } from './core/isFocused';
+import { deleteBlocks } from './blocks/deleteBlocks';
 
 // export const YooEditor = {}
 // export const BlockTransforms = {}
@@ -46,6 +47,7 @@ export const createYooptaEditor = (): YooEditor => {
     applyChanges: () => {},
     insertBlock: (...args) => insertBlock(editor, ...args),
     insertBlocks: (...args) => insertBlocks(editor, ...args),
+    deleteBlocks: (...args) => deleteBlocks(editor, ...args),
     deleteBlock: (...args) => deleteBlock(editor, ...args),
     duplicateBlock: (...args) => duplicateBlock(editor, ...args),
     toggleBlock: (...args) => toggleBlock(editor, ...args),

packages/core/editor/src/editor/types.ts

@@ -8,6 +8,7 @@ import { DeleteBlockOptions } from './blocks/deleteBlock';
 import { DuplicateBlockOptions } from './blocks/duplicateBlock';
 import { FocusBlockOptions } from './blocks/focusBlock';
 import { ToggleBlockOptions } from './blocks/toggleBlock';
+import { DeleteBlocksOptions } from './blocks/deleteBlocks';
 
 export type YooptaBlockPath = [number];
 
@@ -75,6 +76,7 @@ export type YooEditor<TNodes = any> = {
   splitBlock: (options?: YooptaEditorTransformOptions) => void;
   updateBlock: (id: string, data: Partial<YooptaBlockData>) => void;
   deleteBlock: (options?: DeleteBlockOptions) => void;
+  deleteBlocks: (options?: DeleteBlocksOptions) => void;
   duplicateBlock: (options?: DuplicateBlockOptions) => void;
   getBlock: (options?: YooptaEditorTransformOptions) => void;
   toggleBlock: (toBlockType: string, options?: ToggleBlockOptions) => void;