Add support to indent/outdent for several blocks (#211)

* add support to indent/outdent for several blocks
Darginec05 · Jul 16, 2024 · aa0b2f1 · aa0b2f1
1 parent a99285c
commit aa0b2f1
Show file tree

Hide file tree

Showing 25 changed files with 234 additions and 129 deletions.
diff --git a/packages/core/editor/package.json b/packages/core/editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/editor",
-  "version": "4.6.4-rc.1",
+  "version": "4.6.4-rc.2",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

diff --git a/packages/core/editor/src/components/Editor/Editor.tsx b/packages/core/editor/src/components/Editor/Editor.tsx
@@ -13,6 +13,7 @@ import { YooptaBlockPath } from '../../editor/types';
 import { useRectangeSelectionBox } from '../SelectionBox/hooks';
 import { SelectionBox } from '../SelectionBox/SelectionBox';
 import { serializeHTML } from '../../parsers/serializeHTML';
+import { Blocks } from '../../editor/blocks';
 
 type Props = {
   marks?: YooptaMark<any>[];
@@ -350,6 +351,34 @@ const Editor = ({
         }
       }
     }
+
+    if (HOTKEYS.isTab(event)) {
+      const selectedBlocks = editor.selectedBlocks;
+      if (Array.isArray(selectedBlocks) && selectedBlocks.length > 0) {
+        event.preventDefault();
+
+        // [TODO] - maybe we need to add support for passing blockIds?
+        selectedBlocks.forEach((index) => {
+          const block = Blocks.getBlock(editor, { at: [index] });
+          editor.increaseBlockDepth({ blockId: block?.id });
+        });
+      }
+      return;
+    }
+
+    if (HOTKEYS.isShiftTab(event)) {
+      const selectedBlocks = editor.selectedBlocks;
+      if (Array.isArray(selectedBlocks) && selectedBlocks.length > 0) {
+        event.preventDefault();
+
+        // [TODO] - maybe we need to add support for passing blockIds?
+        selectedBlocks.forEach((index) => {
+          const block = Blocks.getBlock(editor, { at: [index] });
+          editor.decreaseBlockDepth({ blockId: block?.id });
+        });
+      }
+      return;
+    }
   };
 
   const editorStyles: CSSProperties = getEditorStyles({

diff --git a/packages/core/editor/src/editor/blocks/decreaseBlockDepth.ts b/packages/core/editor/src/editor/blocks/decreaseBlockDepth.ts
@@ -3,12 +3,12 @@ import { findPluginBlockBySelectionPath } from '../../utils/findPluginBlockBySel
 import { YooEditor, YooptaEditorTransformOptions } from '../types';
 
 export function decreaseBlockDepth(editor: YooEditor, options: YooptaEditorTransformOptions = {}) {
-  const { at = editor.selection } = options;
+  const { at = editor.selection, blockId = '' } = options;
 
-  if (!at) return;
+  if (!blockId && !at) return;
   editor.children = createDraft(editor.children);
 
-  const block = findPluginBlockBySelectionPath(editor);
+  const block = editor.children[blockId] || findPluginBlockBySelectionPath(editor);
   if (!block) return;
 
   block.meta.depth = block.meta.depth === 0 ? 0 : block.meta.depth - 1;

diff --git a/packages/core/exports/package.json b/packages/core/exports/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/exports",
-  "version": "4.6.4-rc.1",
+  "version": "4.6.4-rc.2",
   "description": "Serialize/deserialize exports in different formats for Yoopta-Editor",
   "author": "Darginec05 <[email protected]>",
   "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme",

diff --git a/packages/marks/package.json b/packages/marks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/marks",
-  "version": "4.6.4-rc.1",
+  "version": "4.6.4-rc.2",
   "description": "Marks for Yoopta Editor",
   "author": "Darginec05 <[email protected]>",
   "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme",

diff --git a/packages/plugins/accordion/package.json b/packages/plugins/accordion/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/accordion",
-  "version": "4.6.4-rc.1",
+  "version": "4.6.4-rc.2",
   "description": "Accordion plugin for Yoopta Editor",
   "author": "Darginec05 <[email protected]>",
   "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme",

diff --git a/packages/plugins/blockquote/package.json b/packages/plugins/blockquote/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/blockquote",
-  "version": "4.6.4-rc.1",
+  "version": "4.6.4-rc.2",
   "description": "Blockquote plugin for Yoopta Editor",
   "author": "Darginec05 <[email protected]>",
   "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme",

diff --git a/packages/plugins/callout/package.json b/packages/plugins/callout/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/callout",
-  "version": "4.6.4-rc.1",
+  "version": "4.6.4-rc.2",
   "description": "Callout plugin for Yoopta Editor",
   "author": "Darginec05 <[email protected]>",
   "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme",

diff --git a/packages/plugins/code/package.json b/packages/plugins/code/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/code",
-  "version": "4.6.4-rc.1",
+  "version": "4.6.4-rc.2",
   "description": "Code plugin with syntax highlighting for Yoopta Editor",
   "author": "Darginec05 <[email protected]>",
   "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme",

diff --git a/packages/plugins/embed/package.json b/packages/plugins/embed/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/embed",
-  "version": "4.6.4-rc.1",
+  "version": "4.6.4-rc.2",
   "description": "Embed plugin for Yoopta Editor",
   "author": "Darginec05 <[email protected]>",
   "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme",

diff --git a/packages/plugins/file/package.json b/packages/plugins/file/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/file",
-  "version": "4.6.4-rc.1",
+  "version": "4.6.4-rc.2",
   "description": "File plugin for Yoopta Editor",
   "author": "Darginec05 <[email protected]>",
   "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme",

diff --git a/packages/plugins/headings/package.json b/packages/plugins/headings/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/headings",
-  "version": "4.6.4-rc.1",
+  "version": "4.6.4-rc.2",
   "description": "Headings plugin for Yoopta Editor",
   "author": "Darginec05 <[email protected]>",
   "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme",

diff --git a/packages/plugins/image/package.json b/packages/plugins/image/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/image",
-  "version": "4.6.4-rc.1",
+  "version": "4.6.4-rc.2",
   "description": "Image plugin for Yoopta Editor",
   "author": "Darginec05 <[email protected]>",
   "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme",

diff --git a/packages/plugins/link/package.json b/packages/plugins/link/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/link",
-  "version": "4.6.4-rc.1",
+  "version": "4.6.4-rc.2",
   "description": "Link plugin for Yoopta Editor",
   "author": "Darginec05 <[email protected]>",
   "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme",

diff --git a/packages/plugins/lists/package.json b/packages/plugins/lists/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/lists",
-  "version": "4.6.4-rc.1",
+  "version": "4.6.4-rc.2",
   "description": "Lists plugin for Yoopta Editor",
   "author": "Darginec05 <[email protected]>",
   "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme",

diff --git a/packages/plugins/paragraph/package.json b/packages/plugins/paragraph/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/paragraph",
-  "version": "4.6.4-rc.1",
+  "version": "4.6.4-rc.2",
   "description": "Paragraph plugin for Yoopta Editor",
   "author": "Darginec05 <[email protected]>",
   "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme",

diff --git a/packages/plugins/video/package.json b/packages/plugins/video/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/video",
-  "version": "4.6.4-rc.1",
+  "version": "4.6.4-rc.2",
   "description": "Video plugin for Yoopta Editor",
   "author": "Darginec05 <[email protected]>",
   "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme",

diff --git a/packages/tools/action-menu/package.json b/packages/tools/action-menu/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/action-menu-list",
-  "version": "4.6.4-rc.1",
+  "version": "4.6.4-rc.2",
   "description": "ActionMenuList tool for Yoopta Editor",
   "author": "Darginec05 <[email protected]>",
   "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme",

diff --git a/packages/tools/link-tool/package.json b/packages/tools/link-tool/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/link-tool",
-  "version": "4.6.4-rc.1",
+  "version": "4.6.4-rc.2",
   "description": "Link tool for Yoopta Editor",
   "author": "Darginec05 <[email protected]>",
   "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme",

diff --git a/packages/tools/toolbar/package.json b/packages/tools/toolbar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/toolbar",
-  "version": "4.6.4-rc.1",
+  "version": "4.6.4-rc.2",
   "description": "Toolbar tool for Yoopta Editor",
   "author": "Darginec05 <[email protected]>",
   "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme",

diff --git a/web/next-example/package.json b/web/next-example/package.json
@@ -23,24 +23,24 @@
     "@types/js-beautify": "^1.14.3",
     "@uiw/codemirror-theme-vscode": "^4.21.24",
     "@uiw/react-codemirror": "^4.21.25",
-    "@yoopta/accordion": "^4.6.4-rc.1",
-    "@yoopta/action-menu-list": "^4.6.4-rc.1",
-    "@yoopta/blockquote": "^4.6.4-rc.1",
-    "@yoopta/callout": "^4.6.4-rc.1",
-    "@yoopta/code": "^4.6.4-rc.1",
-    "@yoopta/editor": "^4.6.4-rc.1",
-    "@yoopta/embed": "^4.6.4-rc.1",
-    "@yoopta/exports": "^4.6.4-rc.1",
-    "@yoopta/file": "^4.6.4-rc.1",
-    "@yoopta/headings": "^4.6.4-rc.1",
-    "@yoopta/image": "^4.6.4-rc.1",
-    "@yoopta/link": "^4.6.4-rc.1",
-    "@yoopta/link-tool": "^4.6.4-rc.1",
-    "@yoopta/lists": "^4.6.4-rc.1",
-    "@yoopta/marks": "^4.6.4-rc.1",
-    "@yoopta/paragraph": "^4.6.4-rc.1",
-    "@yoopta/toolbar": "^4.6.4-rc.1",
-    "@yoopta/video": "^4.6.4-rc.1",
+    "@yoopta/accordion": "^4.6.4-rc.2",
+    "@yoopta/action-menu-list": "^4.6.4-rc.2",
+    "@yoopta/blockquote": "^4.6.4-rc.2",
+    "@yoopta/callout": "^4.6.4-rc.2",
+    "@yoopta/code": "^4.6.4-rc.2",
+    "@yoopta/editor": "^4.6.4-rc.2",
+    "@yoopta/embed": "^4.6.4-rc.2",
+    "@yoopta/exports": "^4.6.4-rc.2",
+    "@yoopta/file": "^4.6.4-rc.2",
+    "@yoopta/headings": "^4.6.4-rc.2",
+    "@yoopta/image": "^4.6.4-rc.2",
+    "@yoopta/link": "^4.6.4-rc.2",
+    "@yoopta/link-tool": "^4.6.4-rc.2",
+    "@yoopta/lists": "^4.6.4-rc.2",
+    "@yoopta/marks": "^4.6.4-rc.2",
+    "@yoopta/paragraph": "^4.6.4-rc.2",
+    "@yoopta/toolbar": "^4.6.4-rc.2",
+    "@yoopta/video": "^4.6.4-rc.2",
     "class-variance-authority": "^0.7.0",
     "classnames": "^2.5.1",
     "clsx": "^2.1.0",

diff --git a/web/next-example/src/components/examples/withBaseFullSetup/index.tsx b/web/next-example/src/components/examples/withBaseFullSetup/index.tsx
@@ -18,7 +18,7 @@ import Toolbar, { DefaultToolbarRender } from '@yoopta/toolbar';
 import LinkTool, { DefaultLinkToolRender } from '@yoopta/link-tool';
 
 import { uploadToCloudinary } from '@/utils/cloudinary';
-import { useEffect, useMemo, useRef } from 'react';
+import { useMemo, useRef } from 'react';
 import { WITH_BASIC_INIT_VALUE } from './initValue';
 
 const plugins = [