cli-jaw 2.0.4 → 2.0.5

package/public/manager/src/notes/wysiwyg/milkdown-math.ts

@@ -10,6 +10,7 @@ import { $ctx, $inputRule, $nodeSchema, $remark, $view } from '@milkdown/kit/uti
 
 const mathInlineId = 'math_inline';
 const mathBlockId = 'math_block';
+export const MATH_SOURCE_UPDATED_EVENT = 'notes-math-source-updated';
 
 export const notesMilkdownKatexOptionsCtx = $ctx<KatexOptions, 'notesKatexOptions'>(
     {},
@@ -36,6 +37,11 @@ function updateMathNode(view: EditorView, getPos: () => number | undefined, valu
     const node = view.state.doc.nodeAt(pos);
     if (!node) return;
     view.dispatch(view.state.tr.setNodeMarkup(pos, undefined, { ...node.attrs, value }).scrollIntoView());
+    notifyMathSourceUpdated(view);
+}
+
+function notifyMathSourceUpdated(view: EditorView): void {
+    view.dom.dispatchEvent(new CustomEvent(MATH_SOURCE_UPDATED_EVENT, { bubbles: true }));
 }
 
 function inlineMathSource(value: string): string {
@@ -112,6 +118,7 @@ function commitAndExitMathNode(
             if (prevNode.isTextblock) {
                 tr.setSelection(TextSelection.create(tr.doc, pos - 1));
                 view.dispatch(tr.scrollIntoView());
+                notifyMathSourceUpdated(view);
                 return;
             }
         }
@@ -120,6 +127,7 @@ function commitAndExitMathNode(
         tr.insert(pos, paragraph);
         tr.setSelection(TextSelection.create(tr.doc, pos + 1));
         view.dispatch(tr.scrollIntoView());
+        notifyMathSourceUpdated(view);
         return;
     }
 
@@ -147,6 +155,7 @@ function commitAndExitMathNode(
         tr.setSelection(TextSelection.near(tr.doc.resolve(after), 1));
     }
     view.dispatch(tr.scrollIntoView());
+    notifyMathSourceUpdated(view);
 }
 
 function exitDirectionForMathCaret(raw: HTMLInputElement | HTMLTextAreaElement, block: boolean): 'above' | 'below' {

package/public/manager/src/notes/wysiwyg/milkdown-wikilink-completion.ts

@@ -0,0 +1,195 @@
+import type { MilkdownPlugin } from '@milkdown/kit/ctx';
+import { Plugin, PluginKey, type EditorState } from '@milkdown/kit/prose/state';
+import { Decoration, DecorationSet, type EditorView } from '@milkdown/kit/prose/view';
+import { $prose } from '@milkdown/kit/utils';
+import type { NotesNoteMetadata } from '../notes-types';
+import {
+    formatWikiLinkCompletion,
+    getWikiLinkCompletionRangeAtCursor,
+    getWikiLinkSuggestions,
+    type WikiLinkSuggestion,
+} from '../wiki-link-suggestions';
+
+export type MilkdownWikiLinkCompletionRuntime = {
+    notes: readonly NotesNoteMetadata[];
+};
+
+type WikiLinkCompletionState = {
+    active: boolean;
+    from: number;
+    to: number;
+    query: string;
+    selected: number;
+    suggestions: WikiLinkSuggestion[];
+};
+
+type CompletionMeta = {
+    close?: boolean;
+    move?: number;
+    refresh?: boolean;
+};
+
+const inactiveState: WikiLinkCompletionState = {
+    active: false,
+    from: 0,
+    to: 0,
+    query: '',
+    selected: 0,
+    suggestions: [],
+};
+
+export const notesWikiLinkCompletionPluginKey = new PluginKey<WikiLinkCompletionState>('NOTES_WYSIWYG_WIKILINK_COMPLETION');
+
+export function requestWysiwygWikiLinkCompletionRefresh(view: EditorView): void {
+    view.dispatch(view.state.tr.setMeta(notesWikiLinkCompletionPluginKey, { refresh: true }));
+}
+
+function clampSelected(selected: number, suggestions: readonly WikiLinkSuggestion[]): number {
+    if (suggestions.length === 0) return 0;
+    return Math.max(0, Math.min(selected, suggestions.length - 1));
+}
+
+function buildCompletionState(
+    state: EditorState,
+    runtime: MilkdownWikiLinkCompletionRuntime,
+    previous?: WikiLinkCompletionState,
+): WikiLinkCompletionState {
+    if (!state.selection.empty) return inactiveState;
+    const { $from } = state.selection;
+    const blockStart = $from.start();
+    const blockEnd = $from.end();
+    const blockText = state.doc.textBetween(blockStart, blockEnd, '\n', '\n');
+    const range = getWikiLinkCompletionRangeAtCursor(blockText, $from.pos - blockStart);
+    if (!range) return inactiveState;
+    const suggestions = getWikiLinkSuggestions(runtime.notes, range.query);
+    const selected = previous?.active && previous.query === range.query
+        ? clampSelected(previous.selected, suggestions)
+        : 0;
+    return {
+        active: true,
+        from: blockStart + range.from,
+        to: blockStart + range.to,
+        query: range.query,
+        selected,
+        suggestions,
+    };
+}
+
+function applySuggestion(view: EditorView, state: WikiLinkCompletionState, suggestion: WikiLinkSuggestion): void {
+    view.dispatch(
+        view.state.tr
+            .insertText(formatWikiLinkCompletion(suggestion), state.from, state.to)
+            .setMeta(notesWikiLinkCompletionPluginKey, { close: true })
+            .scrollIntoView(),
+    );
+    view.focus();
+}
+
+function createCompletionPopup(state: WikiLinkCompletionState, view: EditorView): HTMLElement {
+    const anchor = document.createElement('span');
+    anchor.className = 'notes-wikilink-completion-anchor';
+    const popup = document.createElement('div');
+    popup.className = 'notes-wikilink-completion';
+    popup.setAttribute('role', 'listbox');
+    popup.setAttribute('aria-label', 'Wiki link suggestions');
+
+    state.suggestions.forEach((suggestion, index) => {
+        const item = document.createElement('button');
+        item.type = 'button';
+        item.className = 'notes-wikilink-completion-item';
+        item.setAttribute('role', 'option');
+        item.setAttribute('aria-selected', index === state.selected ? 'true' : 'false');
+        item.addEventListener('mousedown', event => {
+            event.preventDefault();
+        });
+        item.addEventListener('click', event => {
+            event.preventDefault();
+            applySuggestion(view, state, suggestion);
+        });
+
+        const title = document.createElement('span');
+        title.className = 'notes-wikilink-completion-title';
+        title.textContent = suggestion.title || suggestion.path;
+        const path = document.createElement('span');
+        path.className = 'notes-wikilink-completion-path';
+        path.textContent = suggestion.path;
+        const meta = document.createElement('span');
+        meta.className = 'notes-wikilink-completion-meta';
+        meta.textContent = suggestion.matchKind;
+
+        item.append(title, path, meta);
+        popup.append(item);
+    });
+
+    anchor.append(popup);
+    return anchor;
+}
+
+function moveSelection(view: EditorView, state: WikiLinkCompletionState, delta: number): void {
+    if (state.suggestions.length === 0) return;
+    const next = (state.selected + delta + state.suggestions.length) % state.suggestions.length;
+    view.dispatch(view.state.tr.setMeta(notesWikiLinkCompletionPluginKey, { move: next - state.selected }));
+}
+
+export function notesMilkdownWikiLinkCompletionPlugin(runtime: MilkdownWikiLinkCompletionRuntime): MilkdownPlugin[] {
+    const plugin = $prose(() => new Plugin<WikiLinkCompletionState>({
+        key: notesWikiLinkCompletionPluginKey,
+        state: {
+            init: (_, state) => buildCompletionState(state, runtime),
+            apply: (tr, value, _oldState, newState) => {
+                const meta = tr.getMeta(notesWikiLinkCompletionPluginKey) as CompletionMeta | undefined;
+                if (meta?.close) return inactiveState;
+                if (!tr.docChanged && !tr.selectionSet && !meta?.refresh && meta?.move == null) return value;
+                const next = buildCompletionState(newState, runtime, value);
+                if (!next.active) return next;
+                if (meta?.move != null && next.suggestions.length > 0) {
+                    return {
+                        ...next,
+                        selected: (value.selected + meta.move + next.suggestions.length) % next.suggestions.length,
+                    };
+                }
+                return next;
+            },
+        },
+        props: {
+            decorations(this: Plugin<WikiLinkCompletionState>, state) {
+                const current = this.getState(state);
+                if (!current?.active || current.suggestions.length === 0) return DecorationSet.empty;
+                return DecorationSet.create(state.doc, [
+                    Decoration.widget(current.to, view => createCompletionPopup(current, view), {
+                        key: `notes-wikilink-completion-${current.from}-${current.to}-${current.query}-${current.selected}`,
+                        side: 1,
+                        stopEvent: event => event.type === 'mousedown' || event.type === 'click',
+                    }),
+                ]);
+            },
+            handleKeyDown(view, event) {
+                const current = notesWikiLinkCompletionPluginKey.getState(view.state);
+                if (!current?.active || current.suggestions.length === 0) return false;
+                if (event.key === 'ArrowDown') {
+                    event.preventDefault();
+                    moveSelection(view, current, 1);
+                    return true;
+                }
+                if (event.key === 'ArrowUp') {
+                    event.preventDefault();
+                    moveSelection(view, current, -1);
+                    return true;
+                }
+                if (event.key === 'Escape') {
+                    event.preventDefault();
+                    view.dispatch(view.state.tr.setMeta(notesWikiLinkCompletionPluginKey, { close: true }));
+                    return true;
+                }
+                if (event.key === 'Enter') {
+                    event.preventDefault();
+                    const suggestion = current.suggestions[current.selected];
+                    if (suggestion) applySuggestion(view, current, suggestion);
+                    return true;
+                }
+                return false;
+            },
+        },
+    }));
+    return [plugin];
+}

package/public/manager/src/notes/wysiwyg/milkdown-wikilink-plugin.ts

@@ -0,0 +1,152 @@
+import type { MilkdownPlugin } from '@milkdown/kit/ctx';
+import type { Node as ProseMirrorNode } from '@milkdown/kit/prose/model';
+import type { EditorState } from '@milkdown/kit/prose/state';
+import { Plugin, PluginKey } from '@milkdown/kit/prose/state';
+import { Decoration, DecorationSet, type EditorView } from '@milkdown/kit/prose/view';
+import { $prose } from '@milkdown/kit/utils';
+import type { NotesNoteLinkRef, NotesNoteMetadata } from '../notes-types';
+import { resolveClientWikiLink, WIKI_LINK_RE, wikiLinkDisplayText, wikiLinkReasonLabel } from '../wiki-link-resolver';
+
+export type MilkdownWikiLinkRuntime = {
+    outgoing: readonly NotesNoteLinkRef[];
+    notes: readonly NotesNoteMetadata[];
+    onNavigate: (path: string) => void;
+};
+
+type WikiLinkPluginState = {
+    decorations: DecorationSet;
+    focused: boolean;
+};
+
+type WikiLinkPluginMeta = {
+    focused?: boolean;
+    refresh?: boolean;
+};
+
+export const notesWikiLinkPluginKey = new PluginKey<WikiLinkPluginState>('NOTES_WYSIWYG_WIKILINKS');
+
+export function requestWysiwygWikiLinkRefresh(view: EditorView): void {
+    view.dispatch(view.state.tr.setMeta(notesWikiLinkPluginKey, { refresh: true }));
+}
+
+function shouldSkipTextNode(node: ProseMirrorNode): boolean {
+    return node.marks.some(mark => mark.type.name === 'inlineCode' || mark.type.name === 'link');
+}
+
+function selectionOverlaps(from: number, to: number, selectionFrom: number, selectionTo: number): boolean {
+    if (selectionFrom === selectionTo) return selectionFrom > from && selectionFrom < to;
+    return selectionFrom < to && selectionTo > from;
+}
+
+export function shouldHideWikiLinkSource(
+    from: number,
+    to: number,
+    selectionFrom: number,
+    selectionTo: number,
+    focused: boolean,
+): boolean {
+    if (!focused) return true;
+    return !selectionOverlaps(from, to, selectionFrom, selectionTo);
+}
+
+function createWikiLinkLabel(link: NotesNoteLinkRef, raw: string, runtime: MilkdownWikiLinkRuntime): HTMLElement {
+    const resolved = link.status === 'resolved' && Boolean(link.resolvedPath);
+    const label = document.createElement(resolved ? 'button' : 'span');
+    label.className = resolved
+        ? 'notes-wikilink notes-wikilink-live'
+        : 'notes-wikilink notes-wikilink-live is-broken';
+    label.textContent = wikiLinkDisplayText(link, raw);
+    label.dataset['notesWikiRaw'] = raw;
+    label.title = link.resolvedPath ?? wikiLinkReasonLabel(link);
+    if (resolved && link.resolvedPath) {
+        label.dataset['notesWikiPath'] = link.resolvedPath;
+        if (label instanceof HTMLButtonElement) label.type = 'button';
+        label.addEventListener('click', event => {
+            event.preventDefault();
+            event.stopPropagation();
+            runtime.onNavigate(link.resolvedPath!);
+        });
+    }
+    return label;
+}
+
+function buildWikiLinkDecorations(
+    state: EditorState,
+    runtime: MilkdownWikiLinkRuntime,
+    focused: boolean,
+): DecorationSet {
+    const decorations: Decoration[] = [];
+    const { from: selectionFrom, to: selectionTo } = state.selection;
+
+    state.doc.descendants((node, pos) => {
+        if (node.type.name === 'code_block') return false;
+        if (!node.isText || shouldSkipTextNode(node)) return true;
+        const text = node.text ?? '';
+        WIKI_LINK_RE.lastIndex = 0;
+        let match: RegExpExecArray | null;
+        while ((match = WIKI_LINK_RE.exec(text)) !== null) {
+            const raw = match[0];
+            const from = pos + match.index;
+            const link = resolveClientWikiLink(raw, runtime.outgoing, runtime.notes, from);
+            if (!link) continue;
+            const to = from + raw.length;
+            const hidden = shouldHideWikiLinkSource(from, to, selectionFrom, selectionTo, focused);
+            decorations.push(Decoration.inline(from, to, {
+                class: 'notes-wikilink-source',
+                'data-notes-wiki-raw': raw,
+                'data-notes-wiki-hidden': hidden ? 'true' : 'false',
+            }, { inclusiveStart: false, inclusiveEnd: false }));
+            if (hidden) {
+                decorations.push(Decoration.widget(from, createWikiLinkLabel(link, raw, runtime), {
+                    key: `notes-wikilink-${from}-${to}-${raw}`,
+                    side: -1,
+                    stopEvent: event => event.type === 'click' || event.type === 'mousedown',
+                }));
+            }
+        }
+        return true;
+    });
+    return DecorationSet.create(state.doc, decorations);
+}
+
+export function notesMilkdownWikiLinkPlugin(runtime: MilkdownWikiLinkRuntime): MilkdownPlugin[] {
+    const plugin = $prose(() => new Plugin<WikiLinkPluginState>({
+        key: notesWikiLinkPluginKey,
+        state: {
+            init: (_, state) => ({
+                decorations: buildWikiLinkDecorations(state, runtime, false),
+                focused: false,
+            }),
+            apply: (tr, value, _oldState, newState) => {
+                const meta = tr.getMeta(notesWikiLinkPluginKey) as WikiLinkPluginMeta | undefined;
+                const focused = typeof meta?.focused === 'boolean' ? meta.focused : value.focused;
+                if (!tr.docChanged && !tr.selectionSet && !meta?.refresh && meta?.focused == null) {
+                    return {
+                        focused,
+                        decorations: value.decorations.map(tr.mapping, tr.doc),
+                    };
+                }
+                return {
+                    focused,
+                    decorations: buildWikiLinkDecorations(newState, runtime, focused),
+                };
+            },
+        },
+        props: {
+            decorations(this: Plugin<WikiLinkPluginState>, state) {
+                return this.getState(state)?.decorations ?? DecorationSet.empty;
+            },
+            handleDOMEvents: {
+                focus(view) {
+                    view.dispatch(view.state.tr.setMeta(notesWikiLinkPluginKey, { focused: true, refresh: true }));
+                    return false;
+                },
+                blur(view) {
+                    view.dispatch(view.state.tr.setMeta(notesWikiLinkPluginKey, { focused: false, refresh: true }));
+                    return false;
+                },
+            },
+        },
+    }));
+    return [plugin];
+}

package/public/manager/src/notes/wysiwyg/milkdown-wysiwyg-types.ts

@@ -0,0 +1,13 @@
+import type { NotesNoteLinkRef, NotesNoteMetadata } from '../notes-types';
+
+export type MilkdownWysiwygEditorProps = {
+    active: boolean;
+    content: string;
+    notePath: string;
+    outgoing: readonly NotesNoteLinkRef[];
+    notes: readonly NotesNoteMetadata[];
+    activeTag: string | null;
+    onChange: (value: string) => void;
+    onTagSelect: (tag: string | null) => void;
+    onWikiLinkNavigate: (path: string) => void;
+};

package/public/manager/src/notes/wysiwyg/wysiwyg-fixtures.ts

@@ -13,6 +13,8 @@ export type WysiwygFixtureId =
     | 'reference-links'
     | 'escaped-markdown'
     | 'frontmatter'
+    | 'frontmatter-wysiwyg-panel'
+    | 'wikilinks-live-preview'
     | 'math-inline-block'
     | 'mermaid-valid'
     | 'mermaid-invalid'
@@ -63,6 +65,8 @@ export const REQUIRED_WYSIWYG_FIXTURES: readonly WysiwygFixtureBehavior[] = [
     fixture('reference-links'),
     fixture('escaped-markdown'),
     fixture('frontmatter'),
+    fixture('frontmatter-wysiwyg-panel'),
+    fixture('wikilinks-live-preview'),
     fixture('math-inline-block'),
     fixture('mermaid-valid'),
     fixture('mermaid-invalid'),

package/public/manager/src/notes/wysiwyg/wysiwyg-frontmatter.ts

@@ -0,0 +1,155 @@
+import { isMap, parseDocument } from 'yaml';
+
+export type WysiwygFrontmatterData = {
+    aliases: string[];
+    tags: string[];
+    created: string | null;
+    raw: string;
+    error: string | null;
+    editable: boolean;
+    document: ReturnType<typeof parseDocument> | null;
+};
+
+export type WysiwygFrontmatterDocument = {
+    frontmatter: WysiwygFrontmatterData | null;
+    body: string;
+};
+
+const FRONTMATTER_RE = /^---\r?\n([\s\S]*?)\r?\n---(?:\r?\n|$)/;
+
+export function formatWysiwygCreatedDate(date: Date = new Date()): string {
+    const year = String(date.getFullYear()).padStart(4, '0');
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+}
+
+function dedupeStable(values: string[]): string[] {
+    const seen = new Set<string>();
+    const result: string[] = [];
+    for (const value of values) {
+        if (seen.has(value)) continue;
+        seen.add(value);
+        result.push(value);
+    }
+    return result;
+}
+
+export function normalizeWysiwygMetadataList(
+    value: unknown,
+    options: { splitString?: boolean; stripHash?: boolean } = {},
+): string[] {
+    const normalize = (item: string): string => {
+        const trimmed = item.trim();
+        return options.stripHash && trimmed.startsWith('#') ? trimmed.slice(1).trim() : trimmed;
+    };
+    if (typeof value === 'string') {
+        const parts = options.splitString ? value.split(/\s+/u) : [value];
+        return dedupeStable(parts.map(normalize).filter(Boolean));
+    }
+    if (!Array.isArray(value)) return [];
+    return dedupeStable(value.filter((item): item is string => typeof item === 'string').map(normalize).filter(Boolean));
+}
+
+function mapValue(document: ReturnType<typeof parseDocument>, key: string): unknown {
+    if (!isMap(document.contents)) return undefined;
+    return document.get(key);
+}
+
+function nonEditableFrontmatter(raw: string, body: string, error: string): WysiwygFrontmatterDocument {
+    return {
+        frontmatter: {
+            raw,
+            aliases: [],
+            tags: [],
+            created: null,
+            error,
+            editable: false,
+            document: null,
+        },
+        body,
+    };
+}
+
+export function splitWysiwygFrontmatter(markdown: string): WysiwygFrontmatterDocument {
+    const match = markdown.match(FRONTMATTER_RE);
+    if (!match) return { frontmatter: null, body: markdown };
+    const raw = match[0];
+    const body = markdown.slice(raw.length);
+    const source = match[1] ?? '';
+    try {
+        const document = parseDocument(source);
+        if (document.errors.length > 0) {
+            return nonEditableFrontmatter(raw, body, document.errors[0]?.message ?? 'Invalid frontmatter');
+        }
+        if (!isMap(document.contents)) {
+            return nonEditableFrontmatter(raw, body, 'Frontmatter must be a YAML mapping to edit here');
+        }
+        return {
+            frontmatter: {
+                raw,
+                aliases: dedupeStable([
+                    ...normalizeWysiwygMetadataList(mapValue(document, 'aliases')),
+                    ...normalizeWysiwygMetadataList(mapValue(document, 'alias')),
+                ]),
+                tags: normalizeWysiwygMetadataList(mapValue(document, 'tags'), { splitString: true, stripHash: true }),
+                created: typeof mapValue(document, 'created') === 'string'
+                    ? String(mapValue(document, 'created')).trim() || null
+                    : null,
+                error: null,
+                editable: true,
+                document,
+            },
+            body,
+        };
+    } catch (error) {
+        return nonEditableFrontmatter(raw, body, error instanceof Error ? error.message : 'Invalid frontmatter');
+    }
+}
+
+export function composeWysiwygFrontmatter(frontmatter: WysiwygFrontmatterData | null, body: string): string {
+    if (!frontmatter) return body;
+    return `${frontmatter.raw}${body}`;
+}
+
+export function createEmptyWysiwygFrontmatter(date: Date = new Date()): WysiwygFrontmatterData {
+    const created = formatWysiwygCreatedDate(date);
+    const source = `created: ${created}\naliases: []\ntags: []\n`;
+    const raw = `---\n${source}---\n`;
+    const document = parseDocument(source);
+    return {
+        aliases: [],
+        tags: [],
+        created,
+        raw,
+        error: null,
+        editable: true,
+        document,
+    };
+}
+
+export function updateWysiwygFrontmatter(
+    current: WysiwygFrontmatterData | null,
+    patch: Partial<Pick<WysiwygFrontmatterData, 'aliases' | 'tags' | 'created'>>,
+): WysiwygFrontmatterData | null {
+    if (!current || current.error || !current.editable || !current.document || !isMap(current.document.contents)) return current;
+    const document = current.document.clone();
+    const next = {
+        aliases: patch.aliases ?? current.aliases,
+        tags: patch.tags ?? current.tags,
+        created: patch.created ?? current.created,
+    };
+    if (next.aliases.length > 0) document.set('aliases', next.aliases);
+    else document.delete('aliases');
+    document.delete('alias');
+    if (next.tags.length > 0) document.set('tags', next.tags);
+    else document.delete('tags');
+    if (next.created) document.set('created', next.created);
+    else document.delete('created');
+    return {
+        ...current,
+        ...next,
+        document,
+        raw: `---\n${document.toString().trimEnd()}\n---\n`,
+    };
+}