cli-jaw 2.0.1 → 2.0.2

package/public/manager/src/notes/rich-markdown/rich-markdown-extension.ts

@@ -30,14 +30,14 @@ class TaskLineWidget extends WidgetType {
         super();
     }
 
-    eq(other: WidgetType): boolean {
+    override eq(other: WidgetType): boolean {
         return other instanceof TaskLineWidget
             && other.range.markerFrom === this.range.markerFrom
             && other.range.checked === this.range.checked
             && other.range.text === this.range.text;
     }
 
-    toDOM(view: EditorView): HTMLElement {
+    override toDOM(view: EditorView): HTMLElement {
         const label = document.createElement('label');
         label.className = 'cm-rich-task-widget';
         const checkbox = document.createElement('input');
@@ -48,18 +48,18 @@ class TaskLineWidget extends WidgetType {
         return label;
     }
 
-    updateDOM(dom: HTMLElement, view: EditorView): boolean {
+    override updateDOM(dom: HTMLElement, view: EditorView): boolean {
         if (!dom.classList.contains('cm-rich-task-widget')) return false;
         this.syncDOM(dom, view);
         return true;
     }
 
-    destroy(dom: HTMLElement): void {
+    override destroy(dom: HTMLElement): void {
         const checkbox = dom.querySelector<HTMLInputElement>('input[type="checkbox"]');
         if (checkbox) checkbox.onchange = null;
     }
 
-    ignoreEvent(event: Event): boolean {
+    override ignoreEvent(event: Event): boolean {
         return event.type === 'mousedown'
             || event.type === 'click'
             || event.type === 'change'

package/public/manager/src/notes/rich-markdown/rich-widget.ts

@@ -13,20 +13,20 @@ export class RichMarkdownWidget extends WidgetType {
         super();
     }
 
-    eq(other: WidgetType): boolean {
+    override eq(other: WidgetType): boolean {
         if (!(other instanceof RichMarkdownWidget)) return false;
         return this.options.id === other.options.id
             && this.options.kind === other.options.kind
             && this.options.markdown === other.options.markdown;
     }
 
-    toDOM(): HTMLElement {
+    override toDOM(): HTMLElement {
         const shell = document.createElement(this.options.block ? 'div' : 'span');
         shell.className = this.options.block
             ? 'cm-rich-widget cm-rich-block'
             : 'cm-rich-widget cm-rich-inline';
-        shell.dataset.richWidgetId = this.options.id;
-        shell.dataset.richWidgetKind = this.options.kind;
+        shell.dataset['richWidgetId'] = this.options.id;
+        shell.dataset['richWidgetKind'] = this.options.kind;
         this.options.registerWidget({
             id: this.options.id,
             kind: this.options.kind,
@@ -37,7 +37,7 @@ export class RichMarkdownWidget extends WidgetType {
         return shell;
     }
 
-    updateDOM(shell: HTMLElement): boolean {
+    override updateDOM(shell: HTMLElement): boolean {
         this.options.registerWidget({
             id: this.options.id,
             kind: this.options.kind,
@@ -48,15 +48,15 @@ export class RichMarkdownWidget extends WidgetType {
         return true;
     }
 
-    destroy(): void {
+    override destroy(): void {
         this.options.unregisterWidget(this.options.id);
     }
 
-    get estimatedHeight(): number {
+    override get estimatedHeight(): number {
         return this.options.block ? 96 : 20;
     }
 
-    ignoreEvent(): boolean {
+    override ignoreEvent(): boolean {
         return false;
     }
 }

package/public/manager/src/notes/useNotesExternalSync.ts

@@ -0,0 +1,37 @@
+import { useEffect, useRef } from 'react';
+import { fetchNotesVersion } from '../api';
+import { publishInvalidation } from '../sync/invalidation-bus';
+
+const POLL_INTERVAL_MS = 5_000;
+
+export function useNotesExternalSync(active: boolean): void {
+    const versionRef = useRef<number | null>(null);
+
+    useEffect(() => {
+        if (!active) return;
+
+        let cancelled = false;
+
+        async function poll(): Promise<void> {
+            try {
+                const version = await fetchNotesVersion();
+                if (cancelled) return;
+                if (versionRef.current !== null && version !== versionRef.current) {
+                    publishInvalidation({
+                        topics: ['notes'],
+                        reason: 'notes:external-change',
+                        source: 'visibility',
+                        sourceId: 'external-sync',
+                    });
+                }
+                versionRef.current = version;
+            } catch {
+                // server unreachable — skip
+            }
+        }
+
+        void poll();
+        const timer = setInterval(() => void poll(), POLL_INTERVAL_MS);
+        return () => { cancelled = true; clearInterval(timer); };
+    }, [active]);
+}

package/public/manager/src/notes/useNotesModel.ts

@@ -0,0 +1,91 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { fetchNotesIndex, fetchNotesInfo, fetchNotesTree } from './notes-api';
+import { useInvalidationSubscription } from '../sync/useInvalidationSubscription';
+import { useNotesExternalSync } from './useNotesExternalSync';
+import type { NotesTreeEntry, NotesVaultIndexSnapshot } from './notes-types';
+
+export type NotesModelState = {
+    tree: NotesTreeEntry[];
+    index: NotesVaultIndexSnapshot | null;
+    loading: boolean;
+    error: string | null;
+    notesRoot: string | null;
+    refresh: (selectPath?: string | null) => Promise<void>;
+};
+
+type UseNotesModelOptions = {
+    active: boolean;
+    selectedPath: string | null;
+    onSelectedPathChange: (path: string | null) => void;
+};
+
+function firstFile(entries: NotesTreeEntry[]): string | null {
+    for (const entry of entries) {
+        if (entry.kind === 'file') return entry.path;
+        const child = firstFile(entry.children || []);
+        if (child) return child;
+    }
+    return null;
+}
+
+function hasFile(entries: NotesTreeEntry[], path: string): boolean {
+    for (const entry of entries) {
+        if (entry.kind === 'file' && entry.path === path) return true;
+        if (hasFile(entry.children || [], path)) return true;
+    }
+    return false;
+}
+
+export function useNotesModel(options: UseNotesModelOptions): NotesModelState {
+    const [tree, setTree] = useState<NotesTreeEntry[]>([]);
+    const [index, setIndex] = useState<NotesVaultIndexSnapshot | null>(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [notesRoot, setNotesRoot] = useState<string | null>(null);
+    const requestIdRef = useRef(0);
+    const selectedPathRef = useRef(options.selectedPath);
+    const onSelectedPathChangeRef = useRef(options.onSelectedPathChange);
+
+    selectedPathRef.current = options.selectedPath;
+    onSelectedPathChangeRef.current = options.onSelectedPathChange;
+
+    useNotesExternalSync(options.active);
+
+    useEffect(() => {
+        if (!options.active || notesRoot) return;
+        void fetchNotesInfo().then(info => setNotesRoot(info.root)).catch(() => {});
+    }, [options.active, notesRoot]);
+
+    const refresh = useCallback(async (selectPath = selectedPathRef.current): Promise<void> => {
+        const requestId = requestIdRef.current + 1;
+        requestIdRef.current = requestId;
+        setLoading(true);
+        setError(null);
+        try {
+            const [nextTree, nextIndex] = await Promise.all([
+                fetchNotesTree(),
+                fetchNotesIndex(),
+            ]);
+            if (requestId !== requestIdRef.current) return;
+            setTree(nextTree);
+            setIndex(nextIndex);
+            const nextSelected = selectPath && hasFile(nextTree, selectPath) ? selectPath : firstFile(nextTree);
+            if (nextSelected !== selectedPathRef.current) onSelectedPathChangeRef.current(nextSelected);
+        } catch (err) {
+            if (requestId === requestIdRef.current) setError((err as Error).message);
+        } finally {
+            if (requestId === requestIdRef.current) setLoading(false);
+        }
+    }, []);
+
+    useInvalidationSubscription('notes', () => {
+        if (options.active) void refresh();
+    }, 'notes-sidebar');
+
+    useEffect(() => {
+        if (!options.active) return;
+        void refresh();
+    }, [options.active, refresh]);
+
+    return { tree, index, loading, error, notesRoot, refresh };
+}

package/public/manager/src/notes/wysiwyg/MilkdownWysiwygEditor.tsx

@@ -1,4 +1,4 @@
-import { type ClipboardEvent, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Editor, defaultValueCtx, editorViewCtx, rootCtx, schemaCtx } from '@milkdown/kit/core';
 import { commonmark } from '@milkdown/kit/preset/commonmark';
 import {
@@ -14,8 +14,11 @@ import { insertTableCommand, toggleStrikethroughCommand } from '@milkdown/kit/pr
 import { clipboard } from '@milkdown/kit/plugin/clipboard';
 import { history } from '@milkdown/kit/plugin/history';
 import { listener, listenerCtx } from '@milkdown/kit/plugin/listener';
-import { callCommand, getMarkdown, insert, replaceAll } from '@milkdown/kit/utils';
+import { callCommand, getMarkdown, insert, insertPos, replaceAll } from '@milkdown/kit/utils';
 import { safeMarkdownUrl } from '../markdown-security';
+import { hasImportableClipboardImage } from '../image-assets/clipboard-images';
+import { uploadClipboardImageMarkdown } from '../image-assets/insert-image-markdown';
+import { notesImageSrc } from '../rendering/markdown-render-security';
 import { notesMilkdownBlockKeymap } from './milkdown-block-keymap';
 import { notesMilkdownCodeBlockView } from './milkdown-code-block-view';
 import { notesMilkdownGfm } from './milkdown-gfm-safe';
@@ -26,6 +29,7 @@ import { normalizeEscapedTaskMarkers, protectUnsupportedGfmForMilkdown } from '.
 type MilkdownWysiwygEditorProps = {
     active: boolean;
     content: string;
+    notePath: string;
     onChange: (value: string) => void;
 };
 
@@ -41,19 +45,39 @@ function htmlToPlainText(html: string): string {
     return element.textContent ?? '';
 }
 
+function isCodeBlockRawPasteTarget(target: EventTarget | null): boolean {
+    return target instanceof HTMLElement
+        && Boolean(target.closest('textarea.notes-code-raw'));
+}
+
 function normalizeCodeLanguage(language: string): string {
     return language.trim().toLowerCase().replace(/[^a-z0-9_+-]/g, '');
 }
 
+function refreshMilkdownAssetImages(root: HTMLDivElement | null): void {
+    if (!root) return;
+    root.querySelectorAll<HTMLImageElement>('img[src]').forEach(image => {
+        const originalSrc = image.dataset['notesOriginalSrc'] || image.getAttribute('src') || '';
+        if (!originalSrc) return;
+        const resolvedSrc = notesImageSrc(originalSrc);
+        if (!resolvedSrc) return;
+        image.dataset['notesOriginalSrc'] = originalSrc;
+        if (image.getAttribute('src') !== resolvedSrc) image.setAttribute('src', resolvedSrc);
+    });
+}
+
 export function MilkdownWysiwygEditor(props: MilkdownWysiwygEditorProps) {
+    const shellRef = useRef<HTMLDivElement | null>(null);
     const rootRef = useRef<HTMLDivElement | null>(null);
     const editorRef = useRef<Editor | null>(null);
     const latestMarkdownRef = useRef(props.content);
     const latestPropContentRef = useRef(props.content);
     const onChangeRef = useRef(props.onChange);
+    const notePathRef = useRef(props.notePath);
     const syncingFromPropsRef = useRef(true);
     const [ready, setReady] = useState(false);
     const [error, setError] = useState<string | null>(null);
+    const [uploadStatus, setUploadStatus] = useState<'idle' | 'uploading' | 'error'>('idle');
 
     useEffect(() => {
         onChangeRef.current = props.onChange;
@@ -63,6 +87,10 @@ export function MilkdownWysiwygEditor(props: MilkdownWysiwygEditorProps) {
         latestPropContentRef.current = props.content;
     }, [props.content]);
 
+    useEffect(() => {
+        notePathRef.current = props.notePath;
+    }, [props.notePath]);
+
     useEffect(() => {
         let disposed = false;
         let editor: Editor | null = null;
@@ -80,6 +108,7 @@ export function MilkdownWysiwygEditor(props: MilkdownWysiwygEditorProps) {
                 ctx.get(listenerCtx).markdownUpdated((_, markdown) => {
                     const normalizedMarkdown = normalizeEscapedTaskMarkers(markdown);
                     latestMarkdownRef.current = normalizedMarkdown;
+                    queueMicrotask(() => refreshMilkdownAssetImages(rootRef.current));
                     if (syncingFromPropsRef.current) return;
                     onChangeRef.current(normalizedMarkdown);
                 });
@@ -108,6 +137,7 @@ export function MilkdownWysiwygEditor(props: MilkdownWysiwygEditorProps) {
                 setReady(true);
                 queueMicrotask(() => {
                     syncingFromPropsRef.current = false;
+                    refreshMilkdownAssetImages(root);
                 });
                 if (props.active) focusEditable(root);
             })
@@ -134,6 +164,7 @@ export function MilkdownWysiwygEditor(props: MilkdownWysiwygEditorProps) {
         editor.action(replaceAll(protectUnsupportedGfmForMilkdown(props.content), true));
         queueMicrotask(() => {
             syncingFromPropsRef.current = false;
+            refreshMilkdownAssetImages(rootRef.current);
         });
     }, [props.content]);
 
@@ -181,7 +212,7 @@ export function MilkdownWysiwygEditor(props: MilkdownWysiwygEditorProps) {
         run(editor => editor.action(ctx => {
             const view = ctx.get(editorViewCtx);
             const schema = ctx.get(schemaCtx);
-            const node = schema.nodes.math_inline?.create({ value: expression.trim() });
+            const node = schema.nodes['math_inline']?.create({ value: expression.trim() });
             if (!node) return;
             view.dispatch(view.state.tr.replaceSelectionWith(node, true).scrollIntoView());
         }));
@@ -193,7 +224,7 @@ export function MilkdownWysiwygEditor(props: MilkdownWysiwygEditorProps) {
         run(editor => editor.action(ctx => {
             const view = ctx.get(editorViewCtx);
             const schema = ctx.get(schemaCtx);
-            const node = schema.nodes.math_block?.create({ value: expression.trim() });
+            const node = schema.nodes['math_block']?.create({ value: expression.trim() });
             if (!node) return;
             view.dispatch(view.state.tr.replaceSelectionWith(node, false).scrollIntoView());
         }));
@@ -223,7 +254,7 @@ export function MilkdownWysiwygEditor(props: MilkdownWysiwygEditorProps) {
 
         function syncTaskListAccessibility(): void {
             root!.querySelectorAll<HTMLElement>('li[data-item-type="task"][data-checked]').forEach(item => {
-                const checked = item.dataset.checked === 'true';
+                const checked = item.dataset['checked'] === 'true';
                 item.setAttribute('role', 'checkbox');
                 item.setAttribute('aria-checked', checked ? 'true' : 'false');
                 item.setAttribute('tabindex', '0');
@@ -238,11 +269,11 @@ export function MilkdownWysiwygEditor(props: MilkdownWysiwygEditorProps) {
                 const resolved = view.state.doc.resolve(pos);
                 for (let depth = resolved.depth; depth > 0; depth -= 1) {
                     const node = resolved.node(depth);
-                    if (node.type.name !== 'list_item' || node.attrs.checked == null) continue;
+                    if (node.type.name !== 'list_item' || node.attrs['checked'] == null) continue;
                     const listItemPos = resolved.before(depth);
                     view.dispatch(view.state.tr.setNodeMarkup(listItemPos, undefined, {
                         ...node.attrs,
-                        checked: !node.attrs.checked,
+                        checked: !node.attrs['checked'],
                     }).scrollIntoView());
                     const markdown = normalizeEscapedTaskMarkers(getMarkdown()(ctx));
                     latestMarkdownRef.current = markdown;
@@ -290,25 +321,129 @@ export function MilkdownWysiwygEditor(props: MilkdownWysiwygEditorProps) {
         observer.observe(root, { childList: true, subtree: true, attributes: true, attributeFilter: ['data-checked'] });
         root.addEventListener('click', handleTaskListClick);
         root.addEventListener('keydown', handleTaskListKeyDown, true);
+        const imageObserver = new MutationObserver(() => {
+            refreshMilkdownAssetImages(root);
+        });
+        imageObserver.observe(root, { childList: true, subtree: true, attributes: true, attributeFilter: ['src'] });
+        refreshMilkdownAssetImages(root);
         return () => {
             observer.disconnect();
+            imageObserver.disconnect();
             root.removeEventListener('click', handleTaskListClick);
             root.removeEventListener('keydown', handleTaskListKeyDown, true);
         };
     }, [ready]);
 
-    function handlePasteCapture(event: ClipboardEvent<HTMLDivElement>): void {
-        const html = event.clipboardData.getData('text/html');
-        if (!html) return;
-        event.preventDefault();
-        const text = event.clipboardData.getData('text/plain');
-        const plainText = text || htmlToPlainText(html);
-        if (!plainText) return;
-        run(editor => editor.action(insert(plainText)));
-    }
+    useEffect(() => {
+        const shell = shellRef.current;
+        if (!shell) return undefined;
+
+        function handlePaste(event: ClipboardEvent): void {
+            if (isCodeBlockRawPasteTarget(event.target)) return;
+
+            const data = event.clipboardData;
+            if (!data) return;
+
+            if (hasImportableClipboardImage(data)) {
+                event.preventDefault();
+                event.stopPropagation();
+                const imageFallback = data.getData('text/plain');
+                setUploadStatus('uploading');
+                void uploadClipboardImageMarkdown(notePathRef.current, data)
+                    .then(markdown => {
+                        setUploadStatus('idle');
+                        if (markdown) {
+                            run(editor => editor.action(insert(markdown, true)));
+                            return;
+                        }
+                        if (imageFallback) run(editor => editor.action(insert(imageFallback)));
+                    })
+                    .catch(error => {
+                        console.warn('[notes-image-paste]', error);
+                        setUploadStatus('error');
+                        setTimeout(() => setUploadStatus('idle'), 3000);
+                        if (imageFallback) run(editor => editor.action(insert(imageFallback)));
+                    });
+                return;
+            }
+
+            const html = data.getData('text/html');
+            if (!html) return;
+            event.preventDefault();
+            event.stopPropagation();
+            const text = data.getData('text/plain');
+            const plainText = text || htmlToPlainText(html);
+            if (!plainText) return;
+            run(editor => editor.action(insert(plainText)));
+        }
+
+        function handleDragOver(event: DragEvent): void {
+            if (!hasImportableClipboardImage(event.dataTransfer)) return;
+            event.preventDefault();
+            if (event.dataTransfer) event.dataTransfer.dropEffect = 'copy';
+        }
+
+        function handleDrop(event: DragEvent): void {
+            if (!hasImportableClipboardImage(event.dataTransfer)) return;
+            event.preventDefault();
+            event.stopPropagation();
+            let dropPos: number | null = null;
+            let dropDoc: unknown = null;
+            try {
+                editorRef.current?.action(ctx => {
+                    const view = ctx.get(editorViewCtx);
+                    const coords = view.posAtCoords({ left: event.clientX, top: event.clientY });
+                    dropPos = coords?.pos ?? null;
+                    dropDoc = view.state.doc;
+                });
+            } catch { /* editor not ready */ }
+            function safeInsert(content: string, inline?: boolean): void {
+                run(editor => {
+                    let useDropPos = false;
+                    try {
+                        editor.action(ctx => {
+                            const view = ctx.get(editorViewCtx);
+                            useDropPos = dropPos != null && view.state.doc === dropDoc;
+                        });
+                    } catch { useDropPos = false; }
+                    try {
+                        editor.action(useDropPos ? insertPos(content, dropPos!, inline) : insert(content, inline));
+                    } catch {
+                        editor.action(insert(content, inline));
+                    }
+                });
+            }
+            const imageFallback = event.dataTransfer?.getData('text/plain') ?? '';
+            setUploadStatus('uploading');
+            void uploadClipboardImageMarkdown(notePathRef.current, event.dataTransfer)
+                .then(markdown => {
+                    setUploadStatus('idle');
+                    if (markdown) { safeInsert(markdown, true); return; }
+                    if (imageFallback) safeInsert(imageFallback);
+                })
+                .catch(error => {
+                    console.warn('[notes-image-drop]', error);
+                    setUploadStatus('error');
+                    setTimeout(() => setUploadStatus('idle'), 3000);
+                    if (imageFallback) safeInsert(imageFallback);
+                });
+        }
+
+        shell.addEventListener('paste', handlePaste, true);
+        shell.addEventListener('dragover', handleDragOver, true);
+        shell.addEventListener('drop', handleDrop, true);
+        return () => {
+            shell.removeEventListener('paste', handlePaste, true);
+            shell.removeEventListener('dragover', handleDragOver, true);
+            shell.removeEventListener('drop', handleDrop, true);
+        };
+    }, []);
 
     return (
-        <div className="notes-milkdown-shell" onPasteCapture={handlePasteCapture}>
+        <div
+            ref={shellRef}
+            className="notes-milkdown-shell"
+        >
             <div className="notes-wysiwyg-toolbar" aria-label="WYSIWYG formatting tools">
                 <button type="button" title="Bold" aria-label="Bold" disabled={!ready} onClick={() => run(editor => editor.action(callCommand(toggleStrongCommand.key)))}>B</button>
                 <button type="button" title="Italic" aria-label="Italic" disabled={!ready} onClick={() => run(editor => editor.action(callCommand(toggleEmphasisCommand.key)))}>I</button>
@@ -325,6 +460,11 @@ export function MilkdownWysiwygEditor(props: MilkdownWysiwygEditorProps) {
                 <button type="button" title="Code block" aria-label="Code block" disabled={!ready} onClick={createLanguageCodeBlock}>Block</button>
             </div>
             {error && <div className="notes-wysiwyg-error" role="alert">{error}</div>}
+            {uploadStatus !== 'idle' && (
+                <div className="notes-wysiwyg-upload-status" role="status" data-status={uploadStatus}>
+                    {uploadStatus === 'uploading' ? 'Uploading image…' : 'Image upload failed'}
+                </div>
+            )}
             <div
                 ref={rootRef}
                 className="notes-milkdown-root"

package/public/manager/src/notes/wysiwyg/milkdown-block-keymap.ts

@@ -40,12 +40,24 @@ function adjacentBlock(state: import('@milkdown/kit/prose/state').EditorState, s
 }
 
 export const notesBlockBoundaryKeymap = $prose(() => keymap({
-    'Backspace': (state, _dispatch, view) => {
+    'Backspace': (state, dispatch, view) => {
         if (!(state.selection instanceof TextSelection)) return false;
         const { $cursor } = state.selection;
         if (!$cursor) return false;
         if ($cursor.parentOffset !== 0) return false;
 
+        const parent = $cursor.parent;
+        if (parent.type.name === 'heading') {
+            const paragraph = state.schema.nodes['paragraph'];
+            if (!paragraph || !dispatch) return true;
+            const depth = $cursor.depth;
+            const pos = $cursor.before(depth);
+            const tr = state.tr.setNodeMarkup(pos, paragraph);
+            tr.setSelection(TextSelection.near(tr.doc.resolve(pos + 1)));
+            dispatch(tr.scrollIntoView());
+            return true;
+        }
+
         const depth = $cursor.depth;
         if (depth < 1) return false;
         const containerDepth = depth - 1;
@@ -78,7 +90,7 @@ export const notesBlockBoundaryKeymap = $prose(() => keymap({
         if (!dispatch) return true;
 
         const after = state.selection.from + node.nodeSize;
-        const paragraph = state.schema.nodes.paragraph?.create();
+        const paragraph = state.schema.nodes['paragraph']?.create();
         if (!paragraph) return false;
 
         const tr = state.tr.insert(after, paragraph);