mrmd-editor 0.7.1 → 0.8.0

package/src/shell/layouts/studio.js

@@ -14,12 +14,14 @@
 import { OrchestratorClient } from '../orchestrator-client.js';
 import { ShellStateManager } from '../state.js';
 import { createStatusBar } from '../components/status-bar.js';
+import { createContextPanel } from '../components/context-panel.js';
 import { injectShellStyles } from '../styles.js';
 import { showFilePicker, showFolderPicker } from '../dialogs/file-picker.js';
 import { prompt, confirm } from '../dialogs/base-dialog.js';
 import { Drive } from '../drive.js';
 import { AiClient } from '../ai-client.js';
 import { showAiMenu, AI_COMMANDS, injectAiMenuStyles } from '../ai-menu.js';
+import { canImportLinkedTableFromHost } from '../../tables/index.js';
 
 // =============================================================================
 // STUDIO
@@ -92,6 +94,16 @@ export async function createStudio(target, options = {}) {
     overflow: hidden;
   `;
 
+  // Create main row container (editor + context rail)
+  const mainContainer = document.createElement('div');
+  mainContainer.className = 'mrmd-studio__main';
+  mainContainer.style.cssText = `
+    display: flex;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  `;
+
   // Create editor container
   const editorContainer = document.createElement('div');
   editorContainer.className = 'mrmd-studio__editor';
@@ -99,8 +111,19 @@ export async function createStudio(target, options = {}) {
     flex: 1;
     overflow: hidden;
     position: relative;
+    min-width: 0;
   `;
 
+  const contextPanelContainer = document.createElement('div');
+  contextPanelContainer.className = 'mrmd-studio__context';
+  contextPanelContainer.style.cssText = `
+    display: flex;
+    min-height: 0;
+  `;
+
+  mainContainer.appendChild(editorContainer);
+  mainContainer.appendChild(contextPanelContainer);
+
   // Create status bar container
   const statusBarContainer = document.createElement('div');
   statusBarContainer.className = 'mrmd-studio__statusbar';
@@ -108,9 +131,9 @@ export async function createStudio(target, options = {}) {
   // Assemble layout
   if (statusBarConfig.position === 'top') {
     studioEl.appendChild(statusBarContainer);
-    studioEl.appendChild(editorContainer);
+    studioEl.appendChild(mainContainer);
   } else {
-    studioEl.appendChild(editorContainer);
+    studioEl.appendChild(mainContainer);
     studioEl.appendChild(statusBarContainer);
   }
 
@@ -142,6 +165,16 @@ export async function createStudio(target, options = {}) {
     return () => eventHandlers.get(event).delete(handler);
   }
 
+  function getCurrentDocumentMarkdownPath(docName = currentDocName) {
+    if (!docName) return null;
+    if (docName.startsWith('/')) return null;
+    return docName.endsWith('.md') ? docName : `${docName}.md`;
+  }
+
+  function supportsLinkedTableImport() {
+    return canImportLinkedTableFromHost();
+  }
+
   /**
    * Detect if cursor is inside a code block and return block info
    * @param {EditorView} view
@@ -266,6 +299,7 @@ export async function createStudio(target, options = {}) {
   // Track current editor instance and preserved state
   let editor = null;
   let currentDocName = null;
+  let contextPanelComponent = null;
   let preservedEditorState = {
     theme: editorOptions.theme || null,
     dark: editorOptions.dark ?? null,
@@ -288,6 +322,9 @@ export async function createStudio(target, options = {}) {
       // Preserve theme across switches
       theme: preservedEditorState.theme,
       dark: preservedEditorState.dark,
+      // Linked-table host context
+      projectRoot: shellState.get('projectRoot') || editorOptions.projectRoot || null,
+      documentPath: getCurrentDocumentMarkdownPath(docName) || editorOptions.documentPath || null,
     };
 
     // Remove any sync options since we're providing ydoc directly
@@ -376,14 +413,17 @@ export async function createStudio(target, options = {}) {
         });
       }
 
-      // Add Comment Syntax extension
-      if (mrmd.default.commentSyntax?.createCommentSyntaxExtension) {
-        const commentExtensions = mrmd.default.commentSyntax.createCommentSyntaxExtension({
-          aiClient,
-          juiceLevel: shellState.get('ai')?.juiceLevel || 0,
-        });
+      // Configure built-in comment syntax with the AI client.
+      // The base editor already installs the extension, so only append
+      // updated facet config here.
+      if (mrmd.default.commentSyntax?.commentConfigFacet) {
         newEditor.view.dispatch({
-          effects: mrmd.codemirror.StateEffect.appendConfig.of(commentExtensions),
+          effects: mrmd.codemirror.StateEffect.appendConfig.of(
+            mrmd.default.commentSyntax.commentConfigFacet.of({
+              aiClient,
+              juiceLevel: shellState.get('ai')?.juiceLevel || 0,
+            })
+          ),
         });
       }
     }
@@ -398,15 +438,47 @@ export async function createStudio(target, options = {}) {
    * @param {Object|null} codeBlock - Code block info if cursor is in a code block
    */
   async function executeAiCommand(cmd, targetEditor, codeBlock = null) {
-    if (!aiClient || !mrmd.default.ai) return;
+    if (!mrmd.default.ai) return;
 
     const view = targetEditor.view;
+
+    if (cmd.action === 'insert-frontmatter-template') {
+      const handled = targetEditor.commands?.insertFrontmatterTemplate?.() || false;
+      if (handled) {
+        emit('aiCommandExecuted', { command: cmd.id, action: cmd.action });
+      } else {
+        emit('aiCommandError', { command: cmd.id, error: 'Could not insert frontmatter template' });
+      }
+      return;
+    }
+
+    if (!aiClient) return;
+
     const context = mrmd.default.ai.getAiContext(view);
     const juiceLevel = shellState.get('ai')?.juiceLevel || 0;
 
     // Detect language from code block, or fall back to python
     const detectedLanguage = codeBlock?.language || 'python';
 
+    // Resolve richer context from _assets/context/*.md when available
+    let resolvedContextText = context.documentContext;
+    try {
+      if (currentDocName) {
+        const resolved = await orchestratorClient.resolveContext({
+          doc: currentDocName,
+          content: context.documentContext,
+          cursorPos: context.cursorPos,
+          selection: { from: context.selectionFrom, to: context.selectionTo },
+          ensureExists: true,
+        });
+        if (resolved?.contextText) {
+          resolvedContextText = resolved.contextText;
+        }
+      }
+    } catch (error) {
+      console.warn('[Studio] Failed to resolve AI context, falling back to document only:', error);
+    }
+
     // Mark AI as active
     shellState._set('ai.active', true);
 
@@ -419,20 +491,20 @@ export async function createStudio(target, options = {}) {
         params = {
           text_before_cursor: context.textBeforeCursor,
           local_context: context.localContext,
-          document_context: context.documentContext,
+          document_context: resolvedContextText,
         };
       } else if (cmd.program.includes('Fix') || cmd.program.includes('Correct')) {
         params = {
           text_to_fix: context.selectedText,
           local_context: context.localContext,
-          document_context: context.documentContext,
+          document_context: resolvedContextText,
         };
       } else if (cmd.program.includes('Code')) {
         params = {
           code: context.selectedText,
           language: detectedLanguage,
           local_context: context.localContext,
-          document_context: context.documentContext,
+          document_context: resolvedContextText,
         };
       } else if (cmd.program.includes('Synonym')) {
         params = {
@@ -440,7 +512,7 @@ export async function createStudio(target, options = {}) {
           local_context: context.localContext,
         };
       } else if (cmd.program.includes('Document')) {
-        params = { document: context.documentContext };
+        params = { document: resolvedContextText };
       }
 
       await mrmd.default.ai.executeAiOperation(view, aiClient, {
@@ -544,12 +616,24 @@ export async function createStudio(target, options = {}) {
         path: normalizedName.endsWith('.md') ? normalizedName : `${normalizedName}.md`,
         root: filesResult.root,
       });
+      editor?.setLinkedTableHostContext?.({
+        projectRoot: shellState.get('projectRoot') || null,
+        documentPath: normalizedName.endsWith('.md') ? normalizedName : `${normalizedName}.md`,
+      });
 
       // Update status bar with new editor
       if (statusBarComponent) {
         statusBarComponent.setEditor(editor);
       }
 
+      if (contextPanelComponent) {
+        contextPanelComponent.setEditor(editor);
+        contextPanelComponent.setDocument(normalizedName);
+        contextPanelComponent.refresh().catch((e) => {
+          console.warn('[Studio] Failed to refresh context panel:', e);
+        });
+      }
+
       emit('fileOpened', { doc: normalizedName });
 
     } catch (e) {
@@ -593,6 +677,8 @@ export async function createStudio(target, options = {}) {
 
   // Shell action handlers
   const handlers = {
+    supportsLinkedTableImport,
+
     async onRename() {
       const file = shellState.get('file');
       if (!file) return;
@@ -670,6 +756,65 @@ export async function createStudio(target, options = {}) {
       });
     },
 
+    async onImportLinkedTable() {
+      const file = shellState.get('file');
+      const projectRoot = shellState.get('projectRoot');
+
+      if (!supportsLinkedTableImport()) {
+        await confirm({
+          title: 'Linked table import unavailable',
+          message: 'This build does not expose the Electron linked-table host API yet.',
+          confirmLabel: 'OK',
+          cancelLabel: '',
+        });
+        return;
+      }
+
+      if (!file || !editor) {
+        return;
+      }
+
+      if (!projectRoot || file.isOutsideProject || !file.path || file.path.startsWith('/')) {
+        await confirm({
+          title: 'Linked table import requires a project file',
+          message: 'Open a markdown document inside a project before importing a linked table.',
+          confirmLabel: 'OK',
+          cancelLabel: '',
+        });
+        return;
+      }
+
+      showFilePicker({
+        mode: 'open',
+        title: 'Import Linked Table',
+        orchestratorClient,
+        initialPath: projectRoot || '~',
+        allowOutsideProject: true,
+        onSelect: async (sourceFilePath) => {
+          try {
+            const result = await editor.importLinkedTableFromHost(sourceFilePath, {
+              projectRoot,
+              documentPath: file.path,
+              cacheFormat: 'csv',
+            });
+            emit('linkedTableImported', {
+              sourceFilePath,
+              tableId: result.tableId,
+              spec: result.spec,
+            });
+          } catch (error) {
+            console.error('[Studio] Linked table import failed:', error);
+            await confirm({
+              title: 'Linked table import failed',
+              message: error.message || String(error),
+              confirmLabel: 'OK',
+              cancelLabel: '',
+            });
+          }
+        },
+      });
+    },
+
     // NOTE: onChangeVenv, onChangeCwd, and onRestartRuntime are no longer used.
     // The new runtime model doesn't support changing venv/cwd on running runtimes.
     // Instead, users start new runtimes via the status bar menu and attach docs to them.
@@ -896,10 +1041,33 @@ export async function createStudio(target, options = {}) {
       path: currentDocName.endsWith('.md') ? currentDocName : `${currentDocName}.md`,
       root: result.root,
     });
+    editor?.setLinkedTableHostContext?.({
+      projectRoot: shellState.get('projectRoot') || null,
+      documentPath: currentDocName.endsWith('.md') ? currentDocName : `${currentDocName}.md`,
+    });
   } catch (e) {
     console.warn('Could not set initial file context:', e);
   }
 
+  // Create context panel
+  contextPanelComponent = createContextPanel({
+    container: contextPanelContainer,
+    orchestratorClient,
+    shellState,
+    getCurrentDocument: () => currentDocName,
+    getEditor: () => editor,
+    getAiContext: mrmd.default.ai?.getAiContext,
+    onOpenRaw: async (contextPath) => {
+      const rawDoc = contextPath.replace(/\.md$/, '');
+      await switchDocument(rawDoc);
+    },
+  });
+  contextPanelComponent.setDocument(currentDocName);
+  contextPanelComponent.setEditor(editor);
+  contextPanelComponent.refresh().catch((e) => {
+    console.warn('[Studio] Failed to initialize context panel:', e);
+  });
+
   // Create studio object
   const studio = {
     /** Current editor instance (may change on file switch) */
@@ -938,6 +1106,29 @@ export async function createStudio(target, options = {}) {
       await switchDocument(docName);
     },
 
+    /**
+     * Import a linked table into the current document.
+     * If no source path is provided, opens the file picker flow.
+     *
+     * @param {string} [sourceFilePath]
+     */
+    async importLinkedTable(sourceFilePath) {
+      if (sourceFilePath) {
+        const file = shellState.get('file');
+        const projectRoot = shellState.get('projectRoot');
+        if (!editor || !file?.path || !projectRoot) {
+          throw new Error('Linked table import requires an open project document');
+        }
+        return editor.importLinkedTableFromHost(sourceFilePath, {
+          projectRoot,
+          documentPath: file.path,
+          cacheFormat: 'csv',
+        });
+      }
+
+      return handlers.onImportLinkedTable();
+    },
+
     /**
      * Save current file to a new location
      * @param {string} targetPath - Target path
@@ -1018,6 +1209,7 @@ export async function createStudio(target, options = {}) {
 
       // Destroy status bar
       statusBarComponent?.destroy();
+      contextPanelComponent?.destroy();
 
       // Destroy current editor
       if (editor) {

package/src/shell/orchestrator-client.js

@@ -416,6 +416,75 @@ export class OrchestratorClient {
     return this.listRuntimeAttachments();
   }
 
+  // ===========================================================================
+  // Context Management
+  // ===========================================================================
+
+  /**
+   * Resolve markdown-managed AI context for a document.
+   * @param {Object} request
+   * @param {string} request.doc
+   * @param {string} [request.content]
+   * @param {number} [request.cursorPos]
+   * @param {{from: number, to: number}} [request.selection]
+   * @param {string[]} [request.codeSymbols]
+   * @param {boolean} [request.ensureExists=false]
+   */
+  async resolveContext(request) {
+    return this._fetch('/api/context/resolve', {
+      method: 'POST',
+      body: JSON.stringify(request),
+    });
+  }
+
+  /**
+   * Get context markdown for a document.
+   * @param {string} doc
+   */
+  async getContext(doc) {
+    return this._fetch(`/api/context/${encodeURIComponent(doc)}`);
+  }
+
+  /**
+   * Save context markdown for a document.
+   * @param {string} doc
+   * @param {string} content
+   */
+  async saveContext(doc, content) {
+    return this._fetch(`/api/context/${encodeURIComponent(doc)}`, {
+      method: 'PUT',
+      body: JSON.stringify({ content }),
+    });
+  }
+
+  /**
+   * Initialize context markdown for a document if missing.
+   * @param {string} doc
+   */
+  async initContext(doc) {
+    return this._fetch(`/api/context/init/${encodeURIComponent(doc)}`, {
+      method: 'POST',
+    });
+  }
+
+  /**
+   * Get project default context markdown.
+   */
+  async getDefaultContext() {
+    return this._fetch('/api/context');
+  }
+
+  /**
+   * Save project default context markdown.
+   * @param {string} content
+   */
+  async saveDefaultContext(content) {
+    return this._fetch('/api/context', {
+      method: 'PUT',
+      body: JSON.stringify({ content }),
+    });
+  }
+
   // ===========================================================================
   // Project & Runtime Management
   // ===========================================================================

package/src/spellcheck.js

@@ -0,0 +1,166 @@
+/**
+ * @fileoverview Spellcheck / autocorrect for prose in CodeMirror 6
+ *
+ * Enables the browser's native spellcheck on the CM6 content element, then
+ * disables it in places that are usually not natural-language prose:
+ *   - fenced code blocks
+ *   - inline code
+ *   - markdown link URLs
+ *   - quoted literals like 'foo/bar'
+ *   - path-like tokens such as ./src/app, /usr/bin, src/utils/file.py
+ *
+ * Important note about "autocorrect":
+ *   On desktop Chromium/Electron, what you mostly get is native spellcheck
+ *   (underlines + suggestions), not aggressive iOS-style auto-replacement.
+ *   The `autocorrect` attribute is mainly useful in Safari/iOS and is mostly
+ *   ignored by Chromium. So in Electron this feature is best thought of as
+ *   fast spellcheck with suggestions, not full mobile-style autocorrect.
+ */
+
+import { EditorView, Decoration, ViewPlugin } from '@codemirror/view';
+import { syntaxTree } from '@codemirror/language';
+
+/**
+ * Enable browser-native spellcheck on the editor's contenteditable element.
+ */
+const proseSpellcheck = EditorView.contentAttributes.of({
+  spellcheck: 'true',
+  autocorrect: 'on',           // Safari / iOS; harmless elsewhere
+  autocapitalize: 'sentences', // mobile keyboards
+});
+
+/**
+ * Reused mark decoration for ranges where spellcheck should be disabled.
+ */
+const noSpellcheckMark = Decoration.mark({
+  attributes: { spellcheck: 'false' },
+});
+
+/**
+ * Markdown syntax nodes where spellcheck should be disabled.
+ *
+ * Confirmed CM6 markdown node names:
+ *   - FencedCode
+ *   - InlineCode
+ *   - URL
+ */
+const SUPPRESSED_NODE_NAMES = new Set([
+  'FencedCode',
+  'InlineCode',
+  'URL',
+]);
+
+/**
+ * Regexes for non-prose tokens that often appear in markdown paragraphs but
+ * should not be spellchecked.
+ *
+ * These are intentionally conservative:
+ *   - quoted literals: 'foo/bar', "snake_case"
+ *   - unix/relative paths: ./src/app, /usr/bin, ~/work/project
+ *   - slash-delimited paths/modules: src/widgets/theme.js
+ */
+const NON_PROSE_PATTERNS = [
+  /'[^'\n]+'/g,
+  /"[^"\n]+"/g,
+  /(?:\.{1,2}\/|~\/|\/)[^\s'"`<>]+/g,
+  /(?:[A-Za-z0-9._-]+\/){1,}[A-Za-z0-9._-]+\/?/g,
+];
+
+function addRegexRanges(docText, baseFrom, ranges) {
+  for (const pattern of NON_PROSE_PATTERNS) {
+    pattern.lastIndex = 0;
+    let match;
+    while ((match = pattern.exec(docText))) {
+      const from = baseFrom + match.index;
+      const to = from + match[0].length;
+      if (to > from) ranges.push({ from, to });
+
+      // Safety against zero-length regex matches
+      if (match[0].length === 0) {
+        pattern.lastIndex += 1;
+      }
+    }
+  }
+}
+
+function mergeRanges(ranges) {
+  if (ranges.length <= 1) return ranges;
+
+  const sorted = ranges
+    .filter((r) => r && r.to > r.from)
+    .sort((a, b) => (a.from - b.from) || (a.to - b.to));
+
+  if (sorted.length === 0) return [];
+
+  const merged = [sorted[0]];
+  for (let i = 1; i < sorted.length; i += 1) {
+    const current = sorted[i];
+    const last = merged[merged.length - 1];
+
+    if (current.from <= last.to) {
+      last.to = Math.max(last.to, current.to);
+    } else {
+      merged.push({ ...current });
+    }
+  }
+
+  return merged;
+}
+
+/**
+ * ViewPlugin that disables spellcheck in non-prose regions.
+ *
+ * Performance:
+ *   We only inspect visible ranges instead of the whole document. That keeps
+ *   the work small even on long notes and reduces the chance that spellcheck
+ *   feels laggy.
+ */
+const noSpellcheckInNonProse = ViewPlugin.fromClass(
+  class {
+    constructor(view) {
+      this.decorations = this.build(view);
+    }
+
+    update(update) {
+      if (update.docChanged || update.viewportChanged) {
+        this.decorations = this.build(update.view);
+      }
+    }
+
+    build(view) {
+      const collected = [];
+      const tree = syntaxTree(view.state);
+
+      for (const { from, to } of view.visibleRanges) {
+        tree.iterate({
+          from,
+          to,
+          enter(node) {
+            if (SUPPRESSED_NODE_NAMES.has(node.name) && node.from < node.to) {
+              collected.push({ from: node.from, to: node.to });
+            }
+          },
+        });
+
+        const text = view.state.doc.sliceString(from, to);
+        addRegexRanges(text, from, collected);
+      }
+
+      const merged = mergeRanges(collected);
+      return Decoration.set(
+        merged.map((r) => noSpellcheckMark.range(r.from, r.to)),
+        true,
+      );
+    }
+  },
+  { decorations: (v) => v.decorations },
+);
+
+/**
+ * Create spellcheck extensions.
+ *
+ * @returns {import('@codemirror/state').Extension[]}
+ */
+export function createSpellcheckExtensions() {
+  return [proseSpellcheck, noSpellcheckInNonProse];
+}