Merge pull request #403 from penge/tab-lists

Indent and outdent lists using Tab

Author: penge

src/notes/components/content/ContentHtml.tsx

@@ -4,6 +4,7 @@ import runUploadPreconditions from "background/google-drive/preconditions/run-up
 import { KeyboardShortcut } from "notes/keyboard-shortcuts";
 import { useKeyboardShortcut } from "notes/hooks/use-keyboard-shortcut";
 import __range from "notes/range";
+import { insideListItem } from "notes/content/list";
 import { reinitTables } from "notes/content/table";
 import { commands, InsertTabFactory } from "../../commands";
 import { ContentProps, reattachEditNote } from "./common";
@@ -43,13 +44,35 @@ const ContentHtml = ({
 }: ContentProps): h.JSX.Element => {
   const contentRef = useRef<HTMLDivElement | null>(null);
 
-  const [setIndentOnTabHandlerOnTab] = useKeyboardShortcut(KeyboardShortcut.OnTab);
+  const [setOnTabHandler] = useKeyboardShortcut(KeyboardShortcut.OnTab);
+  const [setOnShiftTabHandler] = useKeyboardShortcut(KeyboardShortcut.OnShiftTab);
 
-  useEffect(() => setIndentOnTabHandlerOnTab(
-    indentOnTab
-      ? InsertTabFactory({ tabSize })
-      : undefined,
-  ), [indentOnTab, tabSize]);
+  useEffect(() => {
+    const insertTab = InsertTabFactory({ tabSize });
+
+    setOnTabHandler(() => {
+      if (!indentOnTab) {
+        return;
+      }
+
+      if (insideListItem({ canBeFirstDescendant: true })) {
+        commands.Indent();
+        return;
+      }
+
+      insertTab();
+    });
+
+    setOnShiftTabHandler(() => {
+      if (!indentOnTab) {
+        return;
+      }
+
+      if (insideListItem({ canBeFirstDescendant: false })) {
+        commands.Outdent();
+      }
+    });
+  }, [indentOnTab, tabSize]);
 
   useEffect(() => {
     if (contentRef.current) {

src/notes/content/list.ts

@@ -0,0 +1,17 @@
+// eslint-disable-next-line import/prefer-default-export
+export const insideListItem = ({ canBeFirstDescendant }: { canBeFirstDescendant: boolean }) => {
+  const selection = window.getSelection();
+  if (!selection || !selection.rangeCount) {
+    return false;
+  }
+
+  const LIST_TAGS = ["UL", "OL"];
+  const ancestor = selection.getRangeAt(0).commonAncestorContainer;
+  const closestList = LIST_TAGS.includes((ancestor as HTMLOListElement | HTMLUListElement).tagName)
+    ? ancestor
+    : ancestor.parentElement?.closest(LIST_TAGS.join(","));
+
+  return canBeFirstDescendant
+    ? closestList != null
+    : LIST_TAGS.includes(closestList?.parentElement?.tagName || "");
+};

src/notes/keyboard-shortcuts.ts

@@ -20,6 +20,7 @@ export enum KeyboardShortcut {
   OnEscape,
   OnEnter,
   OnTab,
+  OnShiftTab,
 
   // Commands
   OnRepeatLastExecutedCommand,
@@ -137,11 +138,17 @@ const registerEnter = (event: KeyboardEvent) => {
 };
 
 const registerTab = (event: KeyboardEvent) => {
-  if (event.key === "Tab") {
+  if (event.key === "Tab" && !event.shiftKey) {
     publish(KeyboardShortcut.OnTab, event);
   }
 };
 
+const registerShiftTab = (event: KeyboardEvent) => {
+  if (event.key === "Tab" && event.shiftKey) {
+    publish(KeyboardShortcut.OnShiftTab, event);
+  }
+};
+
 const registerRepeatLastExecutedCommand = (event: KeyboardEvent, os: Os) => {
   if (
     (isMac(os) && event.metaKey && event.shiftKey && event.code === "KeyP")
@@ -247,6 +254,7 @@ const keydown = (os: Os) => document.addEventListener("keydown", (event) => {
   registerEscape(event);
   registerEnter(event);
   registerTab(event);
+  registerShiftTab(event);
 
   // Commands
   registerRepeatLastExecutedCommand(event, os);