5a73d7d3e5
Rebuild the memo editor as a single CodeMirror 6 "decorated source" editor. The document is the raw markdown, stored verbatim and styled in place (markers stay visible), so the editor never serializes a tree back to markdown — removing the round-trip fidelity bug class (inline images, setext headings, ordered-list indentation, HTML entities) that the old editor needed per-case patches for. - MemoEditor/Editor: CodeMirror 6 + lang-markdown (GFM). Tokens, heading lines, #tag/@mention, and the autocomplete popover are styled in plain CSS (Editor/editor.css) with theme tokens, not a CSS-in-JS theme. - Tab/Shift-Tab nest/outdent list items (marker-aware, ordered items renumbered so nesting is CommonMark-valid); Escape blurs; #tag autocomplete sourced from useTagCounts. - Focus-mode toolbar reimplemented as markdown-text ops; active state read from the Lezer tree via the backend-agnostic formatting/commands catalog. - Remove the old serialize-back-to-markdown editor (its Editor dir, PlainEditor, the editor-mode system) and its now-unused dependencies (marked, textarea-caret, and the rich-text editor packages). - Consolidate toolbar components under Toolbar/. Read-only MemoContent rendering is unchanged.
56 lines
2 KiB
TypeScript
56 lines
2 KiB
TypeScript
import { markdown } from "@codemirror/lang-markdown";
|
|
import { EditorSelection, EditorState } from "@codemirror/state";
|
|
import { EditorView } from "@codemirror/view";
|
|
import { describe, expect, it } from "vitest";
|
|
import { createFormattingController } from "@/components/MemoEditor/Editor/formatting";
|
|
|
|
function setup(doc: string, from: number, to: number) {
|
|
const view = new EditorView({
|
|
state: EditorState.create({ doc, extensions: [markdown()], selection: EditorSelection.range(from, to) }),
|
|
});
|
|
return { view, f: createFormattingController(view, new Set()) };
|
|
}
|
|
|
|
describe("formatting controller", () => {
|
|
it("wraps selection in bold and reports active", () => {
|
|
const { view, f } = setup("hello world", 0, 5);
|
|
f.run("bold");
|
|
expect(view.state.doc.toString()).toBe("**hello** world");
|
|
view.dispatch({ selection: { anchor: 3 } });
|
|
expect(f.getActiveFormats().bold).toBe(true);
|
|
});
|
|
|
|
it("prefixes a heading and reports its level", () => {
|
|
const { view, f } = setup("Title", 0, 0);
|
|
f.run("heading1");
|
|
expect(view.state.doc.toString()).toBe("# Title");
|
|
view.dispatch({ selection: { anchor: 3 } });
|
|
expect(f.getActiveFormats().headingLevel).toBe(1);
|
|
});
|
|
|
|
it("toggles a bullet list line", () => {
|
|
const { view, f } = setup("item", 0, 0);
|
|
f.run("bulletList");
|
|
expect(view.state.doc.toString()).toBe("- item");
|
|
f.run("bulletList");
|
|
expect(view.state.doc.toString()).toBe("item");
|
|
});
|
|
|
|
it("unbolds when already bold", () => {
|
|
const { view, f } = setup("**hello** world", 4, 4); // cursor inside bold
|
|
f.run("bold");
|
|
expect(view.state.doc.toString()).toBe("hello world");
|
|
});
|
|
|
|
it("unwraps italic when already italic", () => {
|
|
const { view, f } = setup("*hi* there", 2, 2);
|
|
f.run("italic");
|
|
expect(view.state.doc.toString()).toBe("hi there");
|
|
});
|
|
|
|
it("unwraps inline code when already code", () => {
|
|
const { view, f } = setup("`code` here", 3, 3);
|
|
f.run("code");
|
|
expect(view.state.doc.toString()).toBe("code here");
|
|
});
|
|
});
|