cli-jaw 2.0.10 → 2.0.16

package/public/manager/src/notes/wysiwyg/milkdown-slash-menu.ts

@@ -0,0 +1,192 @@
+import type { MilkdownPlugin, Ctx } from '@milkdown/kit/ctx';
+import { editorViewCtx, schemaCtx } from '@milkdown/kit/core';
+import { Plugin, PluginKey } from '@milkdown/kit/prose/state';
+import type { EditorView } from '@milkdown/kit/prose/view';
+import { callCommand, $prose } from '@milkdown/kit/utils';
+import {
+    createCodeBlockCommand,
+    insertHrCommand,
+    wrapInBlockquoteCommand,
+    wrapInBulletListCommand,
+    wrapInHeadingCommand,
+    wrapInOrderedListCommand,
+} from '@milkdown/kit/preset/commonmark';
+import { insertTableCommand } from '@milkdown/kit/preset/gfm';
+
+type SlashMenuItem = {
+    label: string;
+    icon: string;
+    run: (ctx: Ctx) => void;
+};
+
+const SLASH_MENU_ITEMS: SlashMenuItem[] = [
+    { label: 'Heading 1', icon: 'H1', run: ctx => callCommand(wrapInHeadingCommand.key, 1)(ctx) },
+    { label: 'Heading 2', icon: 'H2', run: ctx => callCommand(wrapInHeadingCommand.key, 2)(ctx) },
+    { label: 'Heading 3', icon: 'H3', run: ctx => callCommand(wrapInHeadingCommand.key, 3)(ctx) },
+    { label: 'Bullet List', icon: '•', run: ctx => callCommand(wrapInBulletListCommand.key)(ctx) },
+    { label: 'Ordered List', icon: '1.', run: ctx => callCommand(wrapInOrderedListCommand.key)(ctx) },
+    { label: 'Blockquote', icon: '❝', run: ctx => callCommand(wrapInBlockquoteCommand.key)(ctx) },
+    { label: 'Code Block', icon: '<>', run: ctx => callCommand(createCodeBlockCommand.key)(ctx) },
+    { label: 'Table', icon: '⊞', run: ctx => callCommand(insertTableCommand.key, { row: 3, col: 3 })(ctx) },
+    { label: 'Divider', icon: '—', run: ctx => callCommand(insertHrCommand.key)(ctx) },
+    {
+        label: 'Math Block', icon: '∑', run: ctx => {
+            const view = ctx.get(editorViewCtx);
+            const schema = ctx.get(schemaCtx);
+            const node = schema.nodes['math_block']?.create({ value: '' });
+            if (!node) return;
+            view.dispatch(view.state.tr.replaceSelectionWith(node, false).scrollIntoView());
+        },
+    },
+];
+
+let activeMenu: HTMLElement | null = null;
+let activeIndex = 0;
+
+function hideMenu(): void {
+    if (activeMenu) {
+        activeMenu.remove();
+        activeMenu = null;
+    }
+}
+
+function getSlashRange(view: EditorView): { from: number; to: number; filter: string } | null {
+    const { state } = view;
+    const { $from } = state.selection;
+    if ($from.parent.type.name === 'code_block') return null;
+    if ($from.marks().some(m => m.type.name === 'code_inline')) return null;
+    const textBefore = $from.parent.textBetween(0, $from.parentOffset);
+    const match = textBefore.match(/\/(\S*)$/);
+    if (!match) return null;
+    const slashOffset = $from.parentOffset - match[0].length;
+    const from = $from.start() + slashOffset;
+    const to = $from.pos;
+    return { from, to, filter: match[1] };
+}
+
+function filterItems(filter: string): SlashMenuItem[] {
+    if (!filter) return SLASH_MENU_ITEMS;
+    const lower = filter.toLowerCase();
+    return SLASH_MENU_ITEMS.filter(item => item.label.toLowerCase().includes(lower));
+}
+
+function renderMenuItems(menu: HTMLElement, items: SlashMenuItem[], onSelect: (item: SlashMenuItem) => void): void {
+    menu.innerHTML = '';
+    if (items.length === 0) {
+        const empty = document.createElement('div');
+        empty.className = 'notes-slash-menu-empty';
+        empty.textContent = 'No matches';
+        menu.appendChild(empty);
+        return;
+    }
+    for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = `notes-slash-menu-item${i === activeIndex ? ' notes-slash-menu-item--active' : ''}`;
+        button.setAttribute('role', 'option');
+        const iconSpan = document.createElement('span');
+        iconSpan.className = 'notes-slash-menu-icon';
+        iconSpan.textContent = item.icon;
+        const labelSpan = document.createElement('span');
+        labelSpan.textContent = item.label;
+        button.appendChild(iconSpan);
+        button.appendChild(labelSpan);
+        button.addEventListener('mousedown', e => {
+            e.preventDefault();
+            e.stopPropagation();
+            onSelect(item);
+        });
+        menu.appendChild(button);
+    }
+}
+
+function updateHighlight(): void {
+    if (!activeMenu) return;
+    const items = activeMenu.querySelectorAll('.notes-slash-menu-item');
+    items.forEach((el, i) => el.classList.toggle('notes-slash-menu-item--active', i === activeIndex));
+}
+
+function showMenu(view: EditorView, ctx: Ctx, slashRange: { from: number; to: number; filter: string }): void {
+    hideMenu();
+
+    const items = filterItems(slashRange.filter);
+    const menu = document.createElement('div');
+    menu.className = 'notes-slash-menu';
+    menu.setAttribute('role', 'listbox');
+    activeIndex = 0;
+
+    function executeItem(item: SlashMenuItem): void {
+        const { state } = view;
+        view.dispatch(state.tr.deleteRange(slashRange.from, slashRange.to));
+        item.run(ctx);
+        hideMenu();
+        view.focus();
+    }
+
+    renderMenuItems(menu, items, executeItem);
+
+    const coords = view.coordsAtPos(slashRange.from);
+    menu.style.left = `${coords.left}px`;
+    menu.style.top = `${coords.bottom + 4}px`;
+    document.body.appendChild(menu);
+    activeMenu = menu;
+
+    const rect = menu.getBoundingClientRect();
+    if (rect.right > window.innerWidth) menu.style.left = `${window.innerWidth - rect.width - 8}px`;
+    if (rect.bottom > window.innerHeight) menu.style.top = `${coords.top - rect.height - 4}px`;
+}
+
+const notesSlashMenuPlugin = $prose(ctx => {
+    return new Plugin({
+        key: new PluginKey('notes-slash-menu'),
+        props: {
+            handleKeyDown: (view, event) => {
+                if (!activeMenu) return false;
+                const range = getSlashRange(view);
+                if (!range) { hideMenu(); return false; }
+                const items = filterItems(range.filter);
+                if (items.length === 0) return false;
+
+                if (event.key === 'ArrowDown') {
+                    event.preventDefault();
+                    activeIndex = (activeIndex + 1) % items.length;
+                    updateHighlight();
+                    return true;
+                }
+                if (event.key === 'ArrowUp') {
+                    event.preventDefault();
+                    activeIndex = (activeIndex - 1 + items.length) % items.length;
+                    updateHighlight();
+                    return true;
+                }
+                if (event.key === 'Enter') {
+                    event.preventDefault();
+                    view.dispatch(view.state.tr.deleteRange(range.from, range.to));
+                    items[activeIndex].run(ctx);
+                    hideMenu();
+                    view.focus();
+                    return true;
+                }
+                if (event.key === 'Escape') {
+                    event.preventDefault();
+                    hideMenu();
+                    return true;
+                }
+                return false;
+            },
+        },
+        view: () => ({
+            update: (view: EditorView) => {
+                const range = getSlashRange(view);
+                if (!range) { hideMenu(); return; }
+                showMenu(view, ctx, range);
+            },
+            destroy: () => hideMenu(),
+        }),
+    });
+});
+
+export const notesMilkdownSlashMenu: MilkdownPlugin[] = [
+    notesSlashMenuPlugin,
+].flat();

package/public/manager/src/notes/wysiwyg/milkdown-table-menu.ts

@@ -0,0 +1,120 @@
+import type { MilkdownPlugin, Ctx } from '@milkdown/kit/ctx';
+import { Plugin, PluginKey, TextSelection } from '@milkdown/kit/prose/state';
+import { callCommand, $prose } from '@milkdown/kit/utils';
+import {
+    addColAfterCommand,
+    addColBeforeCommand,
+    addRowAfterCommand,
+    addRowBeforeCommand,
+    deleteSelectedCellsCommand,
+    selectTableCommand,
+} from '@milkdown/kit/preset/gfm';
+
+type TableMenuAction = {
+    label: string;
+    separator?: boolean;
+    run: (ctx: Ctx) => void;
+};
+
+const TABLE_MENU_ACTIONS: TableMenuAction[] = [
+    { label: 'Insert Row Above', run: ctx => callCommand(addRowBeforeCommand.key)(ctx) },
+    { label: 'Insert Row Below', run: ctx => callCommand(addRowAfterCommand.key)(ctx) },
+    { label: 'Insert Column Left', run: ctx => callCommand(addColBeforeCommand.key)(ctx) },
+    { label: 'Insert Column Right', run: ctx => callCommand(addColAfterCommand.key)(ctx) },
+    { label: '', separator: true, run: () => {} },
+    { label: 'Delete Selected Cells', run: ctx => callCommand(deleteSelectedCellsCommand.key)(ctx) },
+    { label: 'Select Entire Table', run: ctx => callCommand(selectTableCommand.key)(ctx) },
+];
+
+function isInsideTable(view: import('@milkdown/kit/prose/view').EditorView, pos: number): boolean {
+    const resolved = view.state.doc.resolve(pos);
+    for (let depth = resolved.depth; depth > 0; depth--) {
+        if (resolved.node(depth).type.name === 'table') return true;
+    }
+    return false;
+}
+
+let activeMenu: HTMLElement | null = null;
+
+function hideActiveMenu(): void {
+    if (activeMenu) {
+        activeMenu.remove();
+        activeMenu = null;
+    }
+}
+
+function showTableMenu(event: MouseEvent, ctx: Ctx): void {
+    hideActiveMenu();
+
+    const menu = document.createElement('div');
+    menu.className = 'notes-table-context-menu';
+    menu.setAttribute('role', 'menu');
+
+    for (const item of TABLE_MENU_ACTIONS) {
+        if (item.separator) {
+            const sep = document.createElement('div');
+            sep.className = 'notes-table-context-menu-separator';
+            menu.appendChild(sep);
+            continue;
+        }
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'notes-table-context-menu-item';
+        button.setAttribute('role', 'menuitem');
+        button.textContent = item.label;
+        button.addEventListener('mousedown', e => {
+            e.preventDefault();
+            e.stopPropagation();
+            item.run(ctx);
+            hideActiveMenu();
+        });
+        menu.appendChild(button);
+    }
+
+    menu.style.left = `${event.clientX}px`;
+    menu.style.top = `${event.clientY}px`;
+    document.body.appendChild(menu);
+    activeMenu = menu;
+
+    const rect = menu.getBoundingClientRect();
+    if (rect.right > window.innerWidth) menu.style.left = `${event.clientX - rect.width}px`;
+    if (rect.bottom > window.innerHeight) menu.style.top = `${event.clientY - rect.height}px`;
+
+    function dismiss(e: Event): void {
+        if (e instanceof KeyboardEvent && e.key !== 'Escape') return;
+        hideActiveMenu();
+        document.removeEventListener('mousedown', dismiss);
+        document.removeEventListener('keydown', dismiss);
+    }
+    setTimeout(() => {
+        document.addEventListener('mousedown', dismiss);
+        document.addEventListener('keydown', dismiss);
+    }, 0);
+}
+
+const notesTableContextMenu = $prose(ctx => {
+    return new Plugin({
+        key: new PluginKey('notes-table-context-menu'),
+        props: {
+            handleDOMEvents: {
+                contextmenu: (view, event) => {
+                    const pos = view.posAtCoords({ left: event.clientX, top: event.clientY });
+                    if (!pos) return false;
+                    if (!isInsideTable(view, pos.pos)) return false;
+
+                    event.preventDefault();
+                    const resolved = view.state.doc.resolve(pos.pos);
+                    const selection = TextSelection.near(resolved);
+                    view.dispatch(view.state.tr.setSelection(selection));
+
+                    showTableMenu(event, ctx);
+                    return true;
+                },
+            },
+        },
+    });
+});
+
+export const notesMilkdownTableMenu: MilkdownPlugin[] = [
+    notesTableContextMenu,
+].flat();

package/public/manager/src/panels/BottomPanel.tsx

@@ -0,0 +1,61 @@
+import { useCallback, type ReactNode } from 'react';
+import { PanelResizer } from './PanelResizer';
+import { BottomPanelTabBar } from './BottomPanelTabBar';
+import { usePanelLayout } from './PanelLayoutProvider';
+import type { BottomPanelTab } from './types';
+
+export type BottomPanelRenderControls = {
+    onCollapse: () => void;
+    onCloseTab: () => void;
+    ownsChrome: boolean;
+};
+
+type BottomPanelProps = {
+    renderTab: (tab: BottomPanelTab, controls: BottomPanelRenderControls) => ReactNode;
+};
+
+const CONTENT_OWNED_CHROME_TABS: BottomPanelTab[] = ['terminal', 'browser'];
+
+export function BottomPanel(props: BottomPanelProps) {
+    const { state, dispatch } = usePanelLayout();
+    const bp = state.bottomPanel;
+
+    const handleHeightDelta = useCallback((delta: number) => {
+        dispatch({ type: 'SET_BOTTOM_HEIGHT', height: bp.height - delta });
+    }, [dispatch, bp.height]);
+
+    const handleCollapse = useCallback(() => {
+        dispatch({ type: 'SET_BOTTOM_OPEN', open: false });
+    }, [dispatch]);
+
+    const activeTab = bp.activeTab ?? bp.tabs[0] ?? null;
+    const ownsChrome = activeTab !== null && CONTENT_OWNED_CHROME_TABS.includes(activeTab);
+
+    if (bp.tabs.length === 0) return null;
+
+    return (
+        <div
+            className={`bottom-panel ${ownsChrome ? 'has-content-owned-chrome' : ''}`}
+            aria-label="Bottom panel"
+            aria-hidden={!bp.open}
+        >
+            <PanelResizer direction="vertical" onDelta={handleHeightDelta} />
+            {!ownsChrome && (
+                <BottomPanelTabBar
+                    tabs={bp.tabs}
+                    activeTab={bp.activeTab}
+                    onActivate={tab => dispatch({ type: 'SET_BOTTOM_ACTIVE_TAB', tab })}
+                    onClose={tab => dispatch({ type: 'CLOSE_BOTTOM_TAB', tab })}
+                    onCollapse={handleCollapse}
+                />
+            )}
+            <div className="bottom-panel-content">
+                {activeTab && props.renderTab(activeTab, {
+                    onCollapse: handleCollapse,
+                    onCloseTab: () => dispatch({ type: 'CLOSE_BOTTOM_TAB', tab: activeTab }),
+                    ownsChrome,
+                })}
+            </div>
+        </div>
+    );
+}

package/public/manager/src/panels/BottomPanelTabBar.tsx

@@ -0,0 +1,71 @@
+import type { BottomPanelTab } from './types';
+
+const TAB_LABELS: Record<BottomPanelTab, string> = {
+    activity: 'Activity',
+    terminal: 'Terminal',
+    browser: 'Browser',
+    logs: 'Logs',
+};
+
+type BottomPanelTabBarProps = {
+    tabs: BottomPanelTab[];
+    activeTab: BottomPanelTab | null;
+    onActivate: (tab: BottomPanelTab) => void;
+    onClose: (tab: BottomPanelTab) => void;
+    onCollapse: () => void;
+};
+
+export function BottomPanelTabBar(props: BottomPanelTabBarProps) {
+    function handleKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
+        const tabs = props.tabs;
+        const idx = props.activeTab ? tabs.indexOf(props.activeTab) : -1;
+        if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+            e.preventDefault();
+            const dir = e.key === 'ArrowRight' ? 1 : -1;
+            const next = tabs[(idx + dir + tabs.length) % tabs.length];
+            if (next) props.onActivate(next);
+        } else if (e.key === 'Home') {
+            e.preventDefault();
+            if (tabs[0]) props.onActivate(tabs[0]);
+        } else if (e.key === 'End') {
+            e.preventDefault();
+            const last = tabs[tabs.length - 1];
+            if (last) props.onActivate(last);
+        }
+    }
+
+    return (
+        <div className="bottom-tab-bar" role="tablist" onKeyDown={handleKeyDown}>
+            {props.tabs.map(tab => (
+                <div
+                    key={tab}
+                    className={`bottom-tab-item ${tab === props.activeTab ? 'is-active' : ''}`}
+                    role="presentation"
+                >
+                    <button
+                        type="button"
+                        role="tab"
+                        className={`bottom-tab ${tab === props.activeTab ? 'is-active' : ''}`}
+                        aria-selected={tab === props.activeTab}
+                        tabIndex={tab === props.activeTab ? 0 : -1}
+                        onClick={() => props.onActivate(tab)}
+                    >
+                        <span>{TAB_LABELS[tab]}</span>
+                    </button>
+                    <button
+                        type="button"
+                        className="bottom-tab-close"
+                        aria-label={`Close ${TAB_LABELS[tab]}`}
+                        title={`Close ${TAB_LABELS[tab]}`}
+                        onClick={() => props.onClose(tab)}
+                    >
+                        ×
+                    </button>
+                </div>
+            ))}
+            <button type="button" className="bottom-collapse-button" aria-label="Collapse panel" onClick={props.onCollapse}>
+                ▼
+            </button>
+        </div>
+    );
+}