mrmd-editor 0.5.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mrmd-editor",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Markdown editor with realtime collaboration - the core editor package",
   "type": "module",
   "main": "dist/mrmd.cjs",

package/src/config/schema.js

@@ -389,11 +389,12 @@ export function normalizeOptions(options = {}) {
   if (options.javascript === true) {
     config.runtimes.javascript = { type: 'builtin' };
   } else if (options.javascript === false) {
-    // Explicitly disabled
+    // Explicitly disabled (even if provided via options.runtimes)
+    delete config.runtimes.javascript;
   } else if (options.javascript && typeof options.javascript === 'object') {
     config.runtimes.javascript = { type: 'custom', instance: options.javascript };
-  } else if (options.javascript === undefined) {
-    // Default: enable builtin
+  } else if (options.javascript === undefined && !config.runtimes.javascript) {
+    // Default: enable builtin only when no JS runtime was already provided
     config.runtimes.javascript = { type: 'builtin' };
   }
 

package/src/execution.js

@@ -17,6 +17,37 @@ import { pendingStdinRequests } from './output-widget.js';
 import { MonitorCoordination, EXECUTION_STATUS } from './monitor-coordination.js';
 import * as Y from 'yjs';
 
+const STATIC_IMPORT_ERROR_RE = /import declarations may only appear at top level of a module/i;
+const UNDEFINED_VAR_RE = /\bis not defined\b/i;
+
+function buildJavaScriptImportHint(errorText, runtimeLanguage) {
+  const language = String(runtimeLanguage || '').toLowerCase();
+  const isJavaScriptLike = language === 'javascript' || language === 'js' || language === 'node' || language === 'typescript' || language === 'ts';
+  const text = String(errorText || '');
+  if (!isJavaScriptLike) {
+    return '';
+  }
+
+  if (STATIC_IMPORT_ERROR_RE.test(text)) {
+    return [
+      '',
+      '[Hint: JavaScript cells run as scripts (eval), not ES modules.]',
+      "[Use dynamic import: const pkg = await import('https://cdn.skypack.dev/lodash')]",
+      '[For a cached helper, open Help > JavaScript Imports and copy loadPkg().]',
+    ].join('\n');
+  }
+
+  if (UNDEFINED_VAR_RE.test(text)) {
+    return [
+      '',
+      '[Hint: For cross-cell JS variables, bind imports to globals.]',
+      "[Example: d3 = await globalThis.loadPkg('d3', 'https://cdn.skypack.dev/d3@7')]",
+    ].join('\n');
+  }
+
+  return '';
+}
+
 /**
  * Execution Manager
  *
@@ -735,7 +766,17 @@ export class ExecutionManager {
         if (m === 'mermaid') return 'html'; // Mermaid renders to HTML/SVG
         return m;
       }) : null;
-      const outputTag = outputType ? `output:${execId}:${outputType}` : `output:${execId}`;
+      let outputTag;
+      if (!outputType) {
+        outputTag = `output:${execId}`;
+      } else {
+        const outputTagParts = [`output:${execId}`, outputType];
+        if (outputType === 'css') {
+          // Let CSS widgets scope selector matching to where this CSS actually targets.
+          outputTagParts.push(artifact && artifactName ? 'artifact' : 'main');
+        }
+        outputTag = outputTagParts.join(':');
+      }
 
       if (existingOutput) {
         // Replace existing output block with new one that has our execId
@@ -983,8 +1024,10 @@ export class ExecutionManager {
         // Handle errors
         let outputWithError = finalOutput;
         if (result.error) {
-          const errorText = `\n[Error: ${result.error.message || result.stderr}]`;
-          outputWithError = finalOutput + errorText;
+          const rawError = result.error.message || result.stderr || String(result.error);
+          const errorText = `\n[Error: ${rawError}]`;
+          const runtimeHint = buildJavaScriptImportHint(rawError, runtimeLanguage);
+          outputWithError = finalOutput + errorText + runtimeHint;
           this._emit('cellError', index, result.error, execId);
         }
 

package/src/index.js

@@ -407,6 +407,9 @@ function createJavaScriptRuntime(options = {}) {
           // Prefer HTML representation
           if (display.data['text/html']) {
             output = display.data['text/html'];
+          } else if (display.data['text/css']) {
+            // Preserve CSS source so the output widget can show selector impact
+            output = display.data['text/css'];
           } else if (display.data['text/plain']) {
             output = display.data['text/plain'];
           }
@@ -507,12 +510,14 @@ function createJavaScriptRuntime(options = {}) {
     },
 
     /**
-     * List all variables in the session namespace.
+     * List all variables in a session namespace.
      *
+     * @param {Object} [filter]
+     * @param {string} [sessionName='default']
      * @returns {Array<{name: string, type: string, value: string, expandable?: boolean}>}
      */
-    listVariables() {
-      return defaultSession.listVariables();
+    listVariables(filter = {}, sessionName = 'default') {
+      return getOrCreateSession(sessionName).listVariables(filter);
     },
 
     /**
@@ -823,8 +828,6 @@ function create(target, options = {}) {
     // MRP and builtin types are handled separately below
   }
 
-  // JavaScript runtime option (backward compat)
-  const javascript = options.javascript !== undefined ? options.javascript : true;
   // JavaScript isolation mode: 'iframe' (default, sandboxed) or 'none' (main window context)
   const javascriptIsolation = options.javascriptIsolation || 'iframe';
 
@@ -1021,6 +1024,7 @@ function create(target, options = {}) {
   // Event handlers
   const changeHandlers = [];
   const saveHandlers = [];
+  const frontmatterTitleCommitHandlers = [];
   const viewSourceHandlers = [];
   const cellRunHandlers = [];
   const cellOutputHandlers = [];
@@ -1036,6 +1040,19 @@ function create(target, options = {}) {
     }
   });
 
+  const handleFrontmatterTitleCommit = (event) => {
+    const title = event?.detail?.title;
+    if (!title) return;
+    for (const handler of frontmatterTitleCommitHandlers) {
+      try {
+        handler(title, event.detail || {});
+      } catch (err) {
+        console.warn('[mrmd] frontmatter title commit handler failed:', err);
+      }
+    }
+  };
+  element.addEventListener('mrmd:frontmatter-title-commit', handleFrontmatterTitleCommit);
+
   // Create runtime registry
   const registry = createRuntimeRegistry();
 
@@ -1044,19 +1061,17 @@ function create(target, options = {}) {
     registry.register(name, runtime);
   }
 
-  // Built-in JavaScript runtime (mrmd-js)
-  // - true: use built-in mrmd-js runtime (default)
-  // - false: disable JavaScript execution
-  // - object: use custom runtime (must implement supports/execute/executeStreaming)
+  // JavaScript runtime for editor + LSP features.
+  // Use normalized config so options.runtimes.javascript is not shadowed by a second runtime.
   let jsRuntime = null;
-  if (javascript === true) {
+  const jsRuntimeConfig = config.runtimes.javascript;
+  if (jsRuntimeConfig?.type === 'builtin') {
     jsRuntime = createJavaScriptRuntime({ defaultIsolation: javascriptIsolation });
     registry.register('javascript', jsRuntime);
-  } else if (javascript && typeof javascript === 'object') {
-    // Custom runtime provided
-    registry.register('javascript', javascript);
+  } else if (jsRuntimeConfig?.type === 'custom' && jsRuntimeConfig.instance) {
+    jsRuntime = jsRuntimeConfig.instance;
   }
-  // javascript === false means no JS runtime
+  // If javascript is disabled, jsRuntime remains null.
 
   // =========================================================================
   // RUNTIME LSP PROVIDERS
@@ -1066,7 +1081,7 @@ function create(target, options = {}) {
   const runtimeLspProviders = new Map();
 
   // Add JS runtime LSP provider if available
-  if (jsRuntime) {
+  if (jsRuntime?.getLSPProvider) {
     const jsProvider = jsRuntime.getLSPProvider();
     runtimeLspProviders.set('javascript', jsProvider);
   }
@@ -2106,6 +2121,14 @@ function create(target, options = {}) {
       };
     },
 
+    onFrontmatterTitleCommit(callback) {
+      frontmatterTitleCommitHandlers.push(callback);
+      return () => {
+        const idx = frontmatterTitleCommitHandlers.indexOf(callback);
+        if (idx >= 0) frontmatterTitleCommitHandlers.splice(idx, 1);
+      };
+    },
+
     onCellRun(callback) {
       return this.execution.on('cellRun', callback);
     },
@@ -2179,6 +2202,7 @@ function create(target, options = {}) {
       }
       // Clean up theme watcher
       unwatchTheme();
+      element.removeEventListener('mrmd:frontmatter-title-commit', handleFrontmatterTitleCommit);
       // Clean up undo manager
       undoManager.destroy();
       view.destroy();

package/src/markdown/block-decorations.js

@@ -64,6 +64,9 @@ import {
   extractDisplayMath,
   generateMathId,
 } from './widgets/math.js';
+import {
+  FrontmatterWidget,
+} from './widgets/frontmatter.js';
 
 // =============================================================================
 // Height Cache for Stable Layout
@@ -370,6 +373,64 @@ function findDisplayMathRanges(state) {
   return ranges;
 }
 
+/**
+ * FrontmatterWidget wrapper that caches its rendered height for stable layout.
+ */
+class FrontmatterWidgetWithHeightCache extends FrontmatterWidget {
+  constructor(yamlContent, contentHash, sourceFrom, sourceTo) {
+    super(yamlContent, contentHash, sourceFrom, sourceTo);
+  }
+
+  toDOM(view) {
+    const dom = super.toDOM(view);
+    const contentHash = this.contentHash;
+
+    requestAnimationFrame(() => {
+      const line = dom.closest('.cm-line');
+      const height = line ? line.offsetHeight : dom.offsetHeight;
+      if (height > 0) {
+        cacheWidgetHeight(contentHash, height);
+      }
+    });
+
+    return dom;
+  }
+}
+
+/**
+ * Find frontmatter range at the start of the document (--- ... ---)
+ */
+function findFrontmatterRange(state) {
+  const doc = state.doc;
+  if (doc.lines < 2) return null;
+
+  const firstLine = doc.line(1);
+  if (firstLine.text.trim() !== '---') return null;
+
+  // Find closing ---
+  for (let i = 2; i <= doc.lines; i++) {
+    const line = doc.line(i);
+    if (line.text.trim() === '---') {
+      // YAML content is between line 2 and line i-1
+      const yamlLines = [];
+      for (let j = 2; j < i; j++) {
+        yamlLines.push(doc.line(j).text);
+      }
+      return {
+        type: 'frontmatter',
+        from: firstLine.from,
+        to: line.to,
+        startLine: 1,
+        endLine: i,
+        content: yamlLines.join('\n'),
+      };
+    }
+    // If we hit a line that looks like content (not YAML), stop
+    // Frontmatter can't contain blank lines followed by markdown
+  }
+  return null;
+}
+
 /**
  * Build decorations for all block elements
  */
@@ -471,6 +532,48 @@ function buildBlockDecorations(state) {
     }
   }
 
+  // Find and process frontmatter
+  const fmRange = findFrontmatterRange(state);
+
+  if (fmRange) {
+    const cursorInFrontmatter = cursorLine >= fmRange.startLine && cursorLine <= fmRange.endLine;
+    const contentHash = 'fm-' + hashContent(fmRange.content);
+
+    if (!cursorInFrontmatter) {
+      decorations.push(
+        Decoration.replace({
+          widget: new FrontmatterWidgetWithHeightCache(
+            fmRange.content,
+            contentHash,
+            fmRange.from,
+            fmRange.to
+          ),
+        }).range(fmRange.from, fmRange.to)
+      );
+    } else {
+      // Cursor inside: show raw YAML with spacer for stable height
+      const cachedHeight = getCachedHeight(contentHash);
+      if (cachedHeight) {
+        const lineCount = fmRange.endLine - fmRange.startLine + 1;
+        const lineHeight = getLineHeight();
+        const rawHeight = lineCount * lineHeight;
+        const padding = cachedHeight - rawHeight;
+
+        if (padding > 0) {
+          const lastLine = doc.line(fmRange.endLine);
+          decorations.push(
+            Decoration.line({
+              attributes: {
+                class: 'cm-block-spacer-line',
+                style: `padding-bottom: ${padding}px`
+              }
+            }).range(lastLine.from)
+          );
+        }
+      }
+    }
+  }
+
   return Decoration.set(decorations, true);
 }