mrmd-editor 0.7.1 → 0.8.0

package/src/keymap.js

@@ -18,7 +18,7 @@ import { commandRegistry } from './commands.js';
  */
 export const defaultKeybindings = {
   // Execution
-  'Mod-Enter': 'runCell',
+  'Mod-Enter': 'runCellOrInsertPageBreak',
   'Shift-Enter': 'runCellAndAdvance',
   'Mod-Shift-Enter': 'runAllCells',
 
@@ -42,6 +42,12 @@ export const defaultKeybindings = {
   // Code intelligence
   'F12': 'viewSource',
 
+  // Grammar
+  'Alt-Enter': 'applyFirstGrammarSuggestion',
+
+  // View modes
+  'Mod-Alt-Shift-w': 'toggleWysiwygMode',
+
   // Enter accepts completion if active, otherwise inserts newline
   'Enter': 'acceptCompletionOrNewline',
 };
@@ -84,7 +90,7 @@ function acceptCompletionOrNewline(editor) {
  *
  * // Custom bindings
  * createKeymap(editor, {
- *   'Mod-Enter': 'runCell',
+ *   'Mod-Enter': 'runCellOrInsertPageBreak',
  *   'Shift-Enter': 'runCellAndAdvance',
  *   'F5': 'runAllCells',
  * })
@@ -163,6 +169,7 @@ export function mergeKeybindings(userBindings, defaults = defaultKeybindings) {
 export function listCommands() {
   return [
     { name: 'runCell', description: 'Run current cell and stay in place' },
+    { name: 'runCellOrInsertPageBreak', description: 'Run current cell, or insert a page break when editing prose' },
     { name: 'runCellAndAdvance', description: 'Run current cell and move to next (create if needed)' },
     { name: 'runAllCells', description: 'Run all cells in document' },
     { name: 'runAllAbove', description: 'Run all cells above and including current' },
@@ -177,5 +184,7 @@ export function listCommands() {
     { name: 'indent', description: 'Indent current line or selection' },
     { name: 'dedent', description: 'Dedent current line or selection' },
     { name: 'viewSource', description: 'View source code for symbol under cursor' },
+    { name: 'applyFirstGrammarSuggestion', description: 'Apply the first grammar suggestion near the cursor' },
+    { name: 'insertFrontmatterTemplate', description: 'Insert or augment document frontmatter with a scholarly template' },
   ];
 }

package/src/markdown/block-decorations.js

@@ -18,6 +18,7 @@
 import { StateField } from '@codemirror/state';
 import { EditorView, Decoration, WidgetType, ViewPlugin } from '@codemirror/view';
 import { syntaxTree } from '@codemirror/language';
+import { sourceModeFacet, wysiwygModeFacet } from './facets.js';
 
 // =============================================================================
 // Line Height Tracking for Accurate Spacing
@@ -67,6 +68,20 @@ import {
 import {
   FrontmatterWidget,
 } from './widgets/frontmatter.js';
+import {
+  LinkedTableWidget,
+} from '../tables/widgets/linked-table-widget.js';
+import {
+  LinkedTableSourceBannerWidget,
+} from '../tables/widgets/linked-table-source-banner.js';
+import {
+  findLinkedTableBlocksInState,
+  getLinkedTableBlockRange,
+  isRangeInsideLinkedTable,
+} from '../tables/parsing/linked-table-blocks.js';
+import {
+  linkedTableMarkdownState,
+} from '../tables/state/linked-table-state.js';
 
 // =============================================================================
 // Height Cache for Stable Layout
@@ -195,6 +210,35 @@ class TableWidgetWithHeightCache extends TableWidget {
   }
 }
 
+/**
+ * LinkedTableWidget wrapper that caches its rendered height for stable layout.
+ */
+class LinkedTableWidgetWithHeightCache extends LinkedTableWidget {
+  constructor(block, parsedTable, contentHash, options = {}) {
+    super(block, parsedTable, contentHash, options);
+    this.contentHash = contentHash;
+  }
+
+  eq(other) {
+    return super.eq(other) && other.contentHash === this.contentHash;
+  }
+
+  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;
+  }
+}
+
 /**
  * DisplayMathWidget wrapper that caches its rendered height for stable layout.
  */
@@ -440,11 +484,70 @@ function buildBlockDecorations(state) {
   const cursorLine = doc.lineAt(cursorPos).number;
   const decorations = [];
 
-  // Find and process tables
+  // Mode flags
+  const isSourceMode = state.facet(sourceModeFacet);
+  const isWysiwygMode = state.facet(wysiwygModeFacet);
+  const revealedLinkedTables = state.field(linkedTableMarkdownState, false) || new Set();
+
+  // Find and process linked tables first
+  const linkedTableBlocks = findLinkedTableBlocksInState(state);
+
+  for (const block of linkedTableBlocks) {
+    const blockRange = getLinkedTableBlockRange(block);
+    const contentHash = 'linked-table-' + hashContent(doc.sliceString(blockRange.from, blockRange.to));
+    const showLinkedSource = isSourceMode || revealedLinkedTables.has(block.spec.id);
+
+    if (!showLinkedSource) {
+      const parsed = parseTable(block.tableLines || []);
+      if (parsed && parsed.rows.length > 0) {
+        decorations.push(
+          Decoration.replace({
+            widget: new LinkedTableWidgetWithHeightCache(block, parsed, contentHash),
+          }).range(blockRange.from, blockRange.to)
+        );
+      }
+    } else {
+      if (!isSourceMode && revealedLinkedTables.has(block.spec.id)) {
+        decorations.push(
+          Decoration.widget({
+            widget: new LinkedTableSourceBannerWidget(block),
+            side: -1,
+            block: true,
+          }).range(block.headerFrom)
+        );
+      }
+
+      const cachedHeight = getCachedHeight(contentHash);
+      if (cachedHeight) {
+        const lineCount = block.endLine - block.startLine + 1;
+        const lineHeight = getLineHeight();
+        const rawHeight = lineCount * lineHeight;
+        const padding = cachedHeight - rawHeight;
+
+        if (padding > 0) {
+          const lastLine = doc.line(block.endLine);
+          decorations.push(
+            Decoration.line({
+              attributes: {
+                class: 'cm-block-spacer-line',
+                style: `padding-bottom: ${padding}px`
+              }
+            }).range(lastLine.from)
+          );
+        }
+      }
+    }
+  }
+
+  // Find and process plain tables
   const tableRanges = findTableRanges(state);
 
   for (const range of tableRanges) {
-    const cursorInTable = cursorLine >= range.startLine && cursorLine <= range.endLine;
+    if (isRangeInsideLinkedTable(range, linkedTableBlocks)) {
+      continue;
+    }
+
+    const cursorInTable = isSourceMode || (!isWysiwygMode && cursorLine >= range.startLine && cursorLine <= range.endLine);
 
     // Collect lines for both rendering and height calculation
     const lines = [];
@@ -496,7 +599,7 @@ function buildBlockDecorations(state) {
   const mathRanges = findDisplayMathRanges(state);
 
   for (const range of mathRanges) {
-    const cursorInMath = cursorLine >= range.startLine && cursorLine <= range.endLine;
+    const cursorInMath = isSourceMode || (!isWysiwygMode && cursorLine >= range.startLine && cursorLine <= range.endLine);
     const contentHash = 'math-' + hashContent(range.content);
 
     if (!cursorInMath) {
@@ -536,7 +639,7 @@ function buildBlockDecorations(state) {
   const fmRange = findFrontmatterRange(state);
 
   if (fmRange) {
-    const cursorInFrontmatter = cursorLine >= fmRange.startLine && cursorLine <= fmRange.endLine;
+    const cursorInFrontmatter = isSourceMode || (!isWysiwygMode && cursorLine >= fmRange.startLine && cursorLine <= fmRange.endLine);
     const contentHash = 'fm-' + hashContent(fmRange.content);
 
     if (!cursorInFrontmatter) {
@@ -592,7 +695,7 @@ export const blockDecorations = StateField.define({
     // Rebuild on any change that could affect block elements
     // For efficiency, we could map positions and only rebuild affected ranges,
     // but for now, full rebuild is acceptable
-    if (tr.docChanged || tr.selection) {
+    if (tr.docChanged || tr.selection || tr.reconfigured) {
       return buildBlockDecorations(tr.state);
     }
     return decorations;

package/src/markdown/facets.js

@@ -0,0 +1,37 @@
+/**
+ * Markdown Rendering Facets
+ *
+ * Shared facets used by both the ViewPlugin (renderer.js) and
+ * the StateField (block-decorations.js). Kept in a separate file
+ * to avoid circular dependencies between those modules.
+ *
+ * @module markdown/facets
+ */
+
+import { Facet } from '@codemirror/state';
+
+/**
+ * Facet to toggle "source mode" — when true, all markdown syntax is shown
+ * as if the cursor were on every line. No rendering/hiding of markers,
+ * no widget replacement of syntax.
+ *
+ * Usage:
+ *   sourceModeFacet.of(true)   // enable source mode
+ *   sourceModeFacet.of(false)  // normal rendering mode
+ *
+ * @type {Facet<boolean, boolean>}
+ */
+export const sourceModeFacet = Facet.define({
+  combine: (values) => values.some(v => v),
+});
+
+/**
+ * Facet to toggle WYSIWYG mode — when true, markdown is rendered everywhere,
+ * including the active line/block, and editing is routed through a protected,
+ * syntax-safe interaction layer.
+ *
+ * @type {Facet<boolean, boolean>}
+ */
+export const wysiwygModeFacet = Facet.define({
+  combine: (values) => values.some(v => v),
+});

package/src/markdown/html-inline.js

@@ -16,8 +16,12 @@ import { WidgetType } from '@codemirror/view';
 /**
  * Regex to match HTML tags (opening, closing, self-closing, and comments)
  * Matches: <tag>, </tag>, <tag />, <tag attr="value">, <!-- comment -->
+ *
+ * MRMD special comments use <!--! ... !--> and are intentionally excluded
+ * here so they can be handled by the comment-syntax extension instead of
+ * being rendered away as invisible HTML comments.
  */
-const HTML_TAG_REGEX = /<\/?[a-zA-Z][a-zA-Z0-9]*(?:\s+[^>]*)?\/?>|<!--[\s\S]*?-->/g;
+const HTML_TAG_REGEX = /<\/?[a-zA-Z][a-zA-Z0-9]*(?:\s+[^>]*)?\/?>|<!--(?!\!)[\s\S]*?-->/g;
 
 /**
  * Regex to match complete HTML elements (opening + content + closing)
@@ -26,8 +30,8 @@ const HTML_TAG_REGEX = /<\/?[a-zA-Z][a-zA-Z0-9]*(?:\s+[^>]*)?\/?>|<!--[\s\S]*?--
 const HTML_ELEMENT_PATTERNS = [
   // Self-closing tags
   /<(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)(?:\s+[^>]*)?\/?\s*>/gi,
-  // HTML comments
-  /<!--[\s\S]*?-->/g,
+  // HTML comments (excluding MRMD special comments: <!--! ... !-->)
+  /<!--(?!\!)[\s\S]*?-->/g,
   // Inline elements with content (non-greedy, handles simple nesting)
   /<(span|strong|em|b|i|u|s|mark|small|sub|sup|kbd|code|abbr|cite|dfn|q|time|var|samp|data|ruby|rt|rp|bdi|bdo|ins|del)(?:\s+[^>]*)?>[\s\S]*?<\/\1>/gi,
 ];
@@ -87,8 +91,8 @@ export function extractHtmlElements(text) {
     }
   }
 
-  // Match HTML comments
-  const comments = /<!--[\s\S]*?-->/g;
+  // Match HTML comments, but leave MRMD special comments to comment-syntax
+  const comments = /<!--(?!\!)[\s\S]*?-->/g;
   while ((match = comments.exec(text)) !== null) {
     const key = `${match.index}-${match.index + match[0].length}`;
     if (!seen.has(key)) {

package/src/markdown/index.js

@@ -28,6 +28,8 @@
 
 import { markdownRenderer } from './renderer.js';
 import { blockDecorations, lineHeightTracker } from './block-decorations.js';
+import { createWysiwygExtensions } from './wysiwyg.js';
+import { createInlineEditingExtensions } from './inline-state.js';
 import { markdownStyles, injectMarkdownStyles } from './styles.js';
 
 /**
@@ -49,20 +51,28 @@ export function markdown() {
   console.log('[Markdown] Creating extensions, blockDecorations:', blockDecorations, 'markdownRenderer:', markdownRenderer);
 
   return [
-    lineHeightTracker,   // ViewPlugin: updates line height cache (must come first!)
-    blockDecorations,    // StateField: tables, display math
-    markdownRenderer,    // ViewPlugin: everything else
+    lineHeightTracker,          // ViewPlugin: updates line height cache (must come first!)
+    ...createInlineEditingExtensions(),
+    blockDecorations,           // StateField: tables, display math
+    markdownRenderer,           // ViewPlugin: everything else
+    ...createWysiwygExtensions(),
   ];
 }
 
 // Export individual pieces for advanced use
 export { markdownRenderer, assetResolverFacet } from './renderer.js';
+export { sourceModeFacet, wysiwygModeFacet } from './facets.js';
+export { createWysiwygExtensions, toggleInlineFormat, findDelimitedRange, findFencedCodeAt } from './wysiwyg.js';
+export { createInlineEditingExtensions, getPendingInlineSplit } from './inline-state.js';
+export { toggleInlineMark, toggleInlineMarkFromSyntax, getActiveInlineMarks, getSelectionFormattingState } from './inline-commands.js';
+export { getLineInlineModel, getCaretInlineContext, getSelectionInlineContext, inlineClassForMark, syntaxToMark, markToSyntax } from './inline-model.js';
 export { blockDecorations, lineHeightTracker, cacheWidgetHeight, getCachedHeight, clearHeightCache } from './block-decorations.js';
 export { markdownStyles, injectMarkdownStyles } from './styles.js';
 
 // Widget exports
 export {
   TaskCheckboxWidget,
+  ListMarkerWidget,
   ImageWidget,
   ImagePlaceholder,
   parseImageMarkdown,

package/src/markdown/inline-commands.js

@@ -0,0 +1,256 @@
+/**
+ * Semantic inline formatting commands.
+ */
+
+import { ChangeSet } from '@codemirror/state';
+import {
+  cloneMarkSet,
+  findInnermostSpanContaining,
+  getCaretInlineContext,
+  getSelectionInlineContext,
+  markToSyntax,
+  normalizeWhitespaceSegments,
+  serializeSegments,
+  splitSegmentsAtPositions,
+  syntaxToMark,
+} from './inline-model.js';
+import {
+  clearPendingInlineSplitEffect,
+  getPendingInlineSplit,
+  setPendingInlineSplitEffect,
+} from './inline-state.js';
+
+function clearPendingEffects(state) {
+  return getPendingInlineSplit(state) ? [clearPendingInlineSplitEffect.of(null)] : [];
+}
+
+function addMarkToSet(marks, mark) {
+  const next = cloneMarkSet(marks);
+  next.add(mark);
+  return next;
+}
+
+function removeMarkFromSet(marks, mark) {
+  const next = cloneMarkSet(marks);
+  next.delete(mark);
+  return next;
+}
+
+function toggleMarkAtCaret(view, mark) {
+  const state = view.state;
+  const pos = state.selection.main.head;
+  const pending = getPendingInlineSplit(state);
+
+  if (pending && pending.pos === pos && pending.mark === mark) {
+    view.dispatch({
+      effects: clearPendingInlineSplitEffect.of(null),
+      userEvent: 'input.inline.pending-cancel',
+    });
+    return true;
+  }
+
+  const ctx = getCaretInlineContext(state, pos);
+  const sameSpan = findInnermostSpanContaining(ctx.model.spans, pos, mark);
+  const effects = clearPendingEffects(state);
+
+  if (ctx.insideCode && mark !== 'code') {
+    if (effects.length > 0) {
+      view.dispatch({ effects, userEvent: 'input.inline.noop' });
+    }
+    return true;
+  }
+
+  if (sameSpan) {
+    if (sameSpan.contentFrom === sameSpan.contentTo && pos === sameSpan.contentFrom) {
+      view.dispatch({
+        changes: { from: sameSpan.from, to: sameSpan.to, insert: '' },
+        selection: { anchor: sameSpan.from },
+        effects,
+        userEvent: 'input.inline.remove-empty',
+        scrollIntoView: true,
+      });
+      return true;
+    }
+
+    if (pos === sameSpan.contentFrom) {
+      view.dispatch({
+        selection: { anchor: sameSpan.from },
+        effects,
+        userEvent: 'input.inline.exit-left',
+      });
+      return true;
+    }
+
+    if (pos === sameSpan.contentTo) {
+      view.dispatch({
+        selection: { anchor: sameSpan.to },
+        effects,
+        userEvent: 'input.inline.exit-right',
+      });
+      return true;
+    }
+
+    view.dispatch({
+      selection: { anchor: pos },
+      effects: [
+        ...effects,
+        setPendingInlineSplitEffect.of({
+          pos,
+          mark,
+          marks: Array.from(removeMarkFromSet(ctx.marksAtCaret, mark)),
+        }),
+      ],
+      userEvent: 'input.inline.pending-split',
+    });
+    return true;
+  }
+
+  const syntax = markToSyntax(mark);
+  if (!syntax) return false;
+
+  view.dispatch({
+    changes: { from: pos, insert: syntax.open + syntax.close },
+    selection: { anchor: pos + syntax.open.length },
+    effects,
+    userEvent: 'input.inline.start',
+    scrollIntoView: true,
+  });
+  return true;
+}
+
+function applyMarkToSegment(segment, mark, action) {
+  if (mark !== 'code' && segment.marks.has('code')) return segment;
+
+  const next = {
+    ...segment,
+    marks: cloneMarkSet(segment.marks),
+  };
+
+  if (action === 'add') {
+    next.marks.add(mark);
+  } else {
+    next.marks.delete(mark);
+  }
+
+  return next;
+}
+
+function toggleMarkOnSelection(view, mark) {
+  const state = view.state;
+  const selection = state.selection.main;
+  const ctx = getSelectionInlineContext(state, selection.from, selection.to);
+  if (ctx.empty || ctx.selectedTextLength === 0) {
+    return toggleMarkAtCaret(view, mark);
+  }
+
+  const action = ctx.fullyCoveredBy.has(mark) ? 'remove' : 'add';
+  const changes = [];
+  const trackedOffsets = new Map();
+  const originalAnchor = selection.anchor;
+  const originalHead = selection.head;
+
+  for (const info of ctx.lines) {
+    if (info.from === info.to) continue;
+
+    let segments = splitSegmentsAtPositions(info.model.segments, [info.from, info.to]);
+    let changed = false;
+
+    segments = segments.map((segment) => {
+      if (segment.to <= info.from || segment.from >= info.to) return segment;
+      const next = applyMarkToSegment(segment, mark, action);
+      if (next !== segment) changed = true;
+      return next;
+    });
+
+    const normalized = normalizeWhitespaceSegments(segments);
+    const trackedPositions = [];
+    if (originalAnchor >= info.line.from && originalAnchor <= info.line.to) trackedPositions.push(originalAnchor);
+    if (originalHead >= info.line.from && originalHead <= info.line.to) trackedPositions.push(originalHead);
+    const rendered = serializeSegments(normalized, trackedPositions);
+
+    for (const [oldPos, newPos] of rendered.tracked.entries()) {
+      trackedOffsets.set(oldPos, { lineFrom: info.line.from, offset: newPos });
+    }
+
+    if (changed || rendered.text !== info.line.text) {
+      changes.push({ from: info.line.from, to: info.line.to, insert: rendered.text });
+    }
+  }
+
+  if (changes.length === 0) {
+    const effects = clearPendingEffects(state);
+    if (effects.length > 0) view.dispatch({ effects, userEvent: 'input.inline.noop' });
+    return true;
+  }
+
+  const changeSet = ChangeSet.of(changes, state.doc.length);
+  const mappedAnchor = trackedOffsets.has(originalAnchor)
+    ? changeSet.mapPos(trackedOffsets.get(originalAnchor).lineFrom, 1) + trackedOffsets.get(originalAnchor).offset
+    : changeSet.mapPos(originalAnchor, -1);
+  const mappedHead = trackedOffsets.has(originalHead)
+    ? changeSet.mapPos(trackedOffsets.get(originalHead).lineFrom, 1) + trackedOffsets.get(originalHead).offset
+    : changeSet.mapPos(originalHead, 1);
+
+  view.dispatch({
+    changes,
+    selection: { anchor: mappedAnchor, head: mappedHead },
+    effects: clearPendingEffects(state),
+    userEvent: `input.inline.${action}`,
+    scrollIntoView: true,
+  });
+  return true;
+}
+
+export function toggleInlineMark(view, mark) {
+  if (!view?.state) return false;
+  const selection = view.state.selection.main;
+  if (selection.empty) return toggleMarkAtCaret(view, mark);
+  return toggleMarkOnSelection(view, mark);
+}
+
+export function toggleInlineMarkFromSyntax(view, open, close = open) {
+  const mark = syntaxToMark(open, close);
+  if (!mark) return false;
+  return toggleInlineMark(view, mark);
+}
+
+export function getActiveInlineMarks(view) {
+  const state = view.state;
+  const pending = getPendingInlineSplit(state);
+  const selection = state.selection.main;
+
+  if (selection.empty && pending && pending.pos === selection.head) {
+    return new Set(pending.marks);
+  }
+
+  if (selection.empty) {
+    return cloneMarkSet(getCaretInlineContext(state, selection.head).marksAtCaret);
+  }
+
+  return cloneMarkSet(getSelectionInlineContext(state, selection.from, selection.to).fullyCoveredBy);
+}
+
+export function getSelectionFormattingState(view) {
+  const active = getActiveInlineMarks(view);
+  const selection = view.state.selection.main;
+  const mixed = selection.empty
+    ? new Set()
+    : getSelectionInlineContext(view.state, selection.from, selection.to).mixedMarks;
+
+  return {
+    bold: active.has('bold'),
+    italic: active.has('italic'),
+    underline: active.has('underline'),
+    strike: active.has('strike'),
+    strikethrough: active.has('strike'),
+    code: active.has('code'),
+    mixed: {
+      bold: mixed.has('bold'),
+      italic: mixed.has('italic'),
+      underline: mixed.has('underline'),
+      strike: mixed.has('strike'),
+      strikethrough: mixed.has('strike'),
+      code: mixed.has('code'),
+    },
+  };
+}