Add hanging indent for lists in the note editor

Fixes #347

Implement hanging indent for lists in the note editor to improve readability.

* **Add `indentedLineWrap` plugin:**
  - Import `indentedLineWrap` in `src/components/note-editor.tsx`.
  - Add `indentedLineWrap` to the `extensions` array in `NoteEditor`.

* **Add CSS styles for indented wrapped lines:**
  - Add styles for `.indented-wrapped-line` in `src/styles/codemirror.css`.
  - Include margin-left and text-indent properties.
  - Add styles for active line and indent markers.

* **Create `indentedLineWrap` plugin:**
  - Add new file `src/utils/codemirror/indentedLineWrap.ts`.
  - Implement `indentedLineWrap` plugin to handle list indentation.
  - Define `getStartTabs` and `getDecorations` functions.
  - Use `StateField` to define the plugin.

---

For more details, open the [Copilot Workspace session](https://copilot-workspace-dev.githubnext.com/lumen-notes/lumen/issues/347?shareId=XXXX-XXXX-XXXX-XXXX).

src/components/note-editor.tsx

@@ -27,6 +27,7 @@ import { removeLeadingEmoji } from "../utils/emoji"
 import { parseFrontmatter } from "../utils/parse-frontmatter"
 import { removeParentTags } from "../utils/remove-parent-tags"
 import { useInsertTemplate } from "./insert-template"
+import { indentedLineWrap } from "../utils/codemirror/indentedLineWrap"
 
 type NoteEditorProps = {
   className?: string
@@ -128,6 +129,7 @@ export const NoteEditor = React.forwardRef<ReactCodeMirrorRef, NoteEditorProps>(
       spellcheckExtension(),
       pasteExtension({ attachFile, onPaste }),
       syntaxHighlighting(syntaxHighlighter),
+      indentedLineWrap,
     ]
 
     if (editorSettings.vimMode) {

src/styles/codemirror.css

@@ -93,3 +93,16 @@
 .cm-editor .cm-lineNumbers .cm-gutterElement {
   @apply min-w-[1.5rem] p-0;
 }
+
+.indented-wrapped-line {
+  margin-left: calc(var(--indented));
+  text-indent: calc(-1 * var(--indented));
+}
+
+.indented-wrapped-line.cm-activeLine {
+  box-shadow: calc((-1 * var(--indented)) + 4px) 0 0 rgba(255, 255, 255, 0.025);
+}
+
+.indented-wrapped-line.cm-indent-markers::before {
+  left: calc(var(--indented) * -1);
+}

src/utils/codemirror/indentedLineWrap.ts

@@ -0,0 +1,44 @@
+import { EditorView, Decoration } from "@codemirror/view";
+import { StateField, EditorState } from "@codemirror/state";
+
+export const getStartTabs = (line: string): string => /^\t*/.exec(line)?.[0] ?? "";
+
+const getDecorations = (state: EditorState) => {
+  const decorations: Decoration[] = [];
+
+  for (let i = 0; i < state.doc.lines; i++) {
+    const line = state.doc.line(i + 1);
+    const numberOfTabs = getStartTabs(line.text).length;
+    if (numberOfTabs === 0) continue;
+
+    const offset = numberOfTabs * state.tabSize;
+
+    const linerwapper = Decoration.line({
+      attributes: {
+        style: `--indented: ${offset}ch;`,
+        class: "indented-wrapped-line",
+      },
+    });
+
+    decorations.push(linerwapper.range(line.from, line.from));
+  }
+
+  return Decoration.set(decorations);
+};
+
+/**
+ * Plugin that makes line wrapping in the editor respect the identation of the line.
+ * It does this by adding a line decoration that adds margin-left (as much as there is indentation),
+ * and adds the same amount as negative "text-indent". The nice thing about text-indent is that it
+ * applies to the initial line of a wrapped line.
+ */
+export const indentedLineWrap = StateField.define<Decoration[]>({
+  create(state) {
+    return getDecorations(state);
+  },
+  update(deco, tr) {
+    if (!tr.docChanged) return deco;
+    return getDecorations(tr.state);
+  },
+  provide: (f) => EditorView.decorations.from(f),
+});