editor: add clear current node keyboard shortcut (#7272)

Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

docs/help/contents/keyboard-shortcuts.md

@@ -83,3 +83,4 @@ The following keyboard shortcuts will help you navigate Notesnook faster.
 | Move line down | Alt ↓ | Alt ↓ | ⌥ ↓ |
 | Move parent node up | Alt ⇧ ↑ | Alt ⇧ ↑ | ⌥ ⇧ ↑ |
 | Move parent node down | Alt ⇧ ↓ | Alt ⇧ ↓ | ⌥ ⇧ ↓ |
+| Clear current line | Ctrl L | Ctrl L | ⌘ L |

packages/common/src/utils/keybindings.ts

@@ -433,6 +433,12 @@ export const tiptapKeys = {
     description: "Move parent node down",
     category: "Editor",
     type: "tiptap"
+  },
+  clearCurrentLine: {
+    keys: "Mod-l",
+    description: "Clear current line",
+    category: "Editor",
+    type: "tiptap"
   }
 } satisfies Record<string, TipTapKey>;
 

packages/editor/src/extensions/heading/heading.ts

@@ -306,7 +306,7 @@ export const Heading = TiptapHeading.extend({
   }
 });
 
-function toggleNodesUnderPos(
+export function toggleNodesUnderPos(
   tr: Transaction,
   pos: number,
   headingLevel: number,

packages/editor/src/extensions/key-map/__tests__/key-map.test.ts

@@ -32,6 +32,7 @@ import { OutlineList } from "../../outline-list/outline-list.js";
 import { OutlineListItem } from "../../outline-list-item/outline-list-item.js";
 import { BulletList } from "../../bullet-list/bullet-list.js";
 import { ListItem } from "../../list-item/list-item.js";
+import { Heading } from "../../heading/heading.js";
 
 describe("key-map", () => {
   test("move paragraph up", async () => {
@@ -169,4 +170,29 @@ describe("key-map", () => {
       `<p>para 1</p><p>para 2</p><ul><li><p>list item 1</p></li><li><p>list item 2</p></li></ul>`
     );
   });
+
+  test("clearing collapsed heading should clear heading and unhide content", async () => {
+    const el = h("div", [
+      h("h1", ["Collapsed heading"], { "data-collapsed": "true" }),
+      p(["Hidden content"], { "data-hidden": "true" })
+    ]);
+    const editorElement = h("div");
+    const { editor } = createEditor({
+      element: editorElement,
+      initialContent: el.innerHTML,
+      extensions: {
+        KeyMap: KeyMap,
+        Heading: Heading.configure({ levels: [1, 2, 3, 4, 5, 6] })
+      }
+    });
+
+    editor.commands.setTextSelection(5);
+    const event = new KeyboardEvent("keydown", {
+      key: "l",
+      ctrlKey: true
+    });
+    editor.view.dom.dispatchEvent(event);
+
+    expect(editor.getHTML()).toBe(`<p>Hidden content</p>`);
+  });
 });

packages/editor/src/extensions/key-map/key-map.ts

@@ -31,6 +31,7 @@ import {
   moveParentUp,
   moveParentDown
 } from "./move-node.js";
+import { toggleNodesUnderPos } from "../heading/heading.js";
 
 export const KeyMap = Extension.create({
   name: "key-map",
@@ -116,6 +117,25 @@ export const KeyMap = Extension.create({
           console.error("Error moving node down:", e);
           return false;
         }
+      },
+      [tiptapKeys.clearCurrentLine.keys]: ({ editor }) => {
+        const { $from } = editor.state.selection;
+        const currentNode = $from.node();
+
+        if (
+          currentNode.type.name === "heading" &&
+          currentNode.attrs.collapsed === true
+        ) {
+          return editor.commands.command(({ tr }) => {
+            const headingPos = $from.before();
+            tr.setNodeAttribute(headingPos, "collapsed", false);
+            toggleNodesUnderPos(tr, headingPos, currentNode.attrs.level, false);
+            tr.deleteRange(headingPos, headingPos + currentNode.nodeSize);
+            return true;
+          });
+        }
+
+        return editor.commands.deleteNode(currentNode.type);
       }
     };
   }