mrmd-editor 0.5.0 → 0.7.0

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);
 }
 

package/src/markdown/renderer.js

@@ -121,6 +121,33 @@ function extractWikiLinks(text) {
   return results;
 }
 
+/**
+ * Find YAML frontmatter at the top of the document (--- ... ---).
+ *
+ * We use this to suppress markdown rendering inside frontmatter since the
+ * opening/closing `---` lines are parsed as HorizontalRule nodes by markdown.
+ */
+function findFrontmatterRange(doc) {
+  if (doc.lines < 2) return null;
+
+  const firstLine = doc.line(1);
+  if (firstLine.text.trim() !== '---') return null;
+
+  for (let i = 2; i <= doc.lines; i++) {
+    const line = doc.line(i);
+    if (line.text.trim() === '---') {
+      return {
+        from: firstLine.from,
+        to: line.to,
+        startLine: 1,
+        endLine: i,
+      };
+    }
+  }
+
+  return null;
+}
+
 /**
  * BlockImageWidget wrapper that caches its rendered height for stable layout.
  */
@@ -223,6 +250,7 @@ function buildDecorations(view) {
   const doc = view.state.doc;
   const cursorPos = view.state.selection.main.head;
   const cursorLine = doc.lineAt(cursorPos).number;
+  const frontmatterRange = findFrontmatterRange(doc);
 
   // Get asset resolver from facet (may be null)
   const assetResolver = view.state.facet(assetResolverFacet);
@@ -249,6 +277,21 @@ function buildDecorations(view) {
     to: view.viewport.to,
     enter: (node) => {
       const lineNum = doc.lineAt(node.from).number;
+
+      // Never apply markdown rendering/styling inside YAML frontmatter.
+      // Frontmatter is rendered separately by block-decorations.
+      // Use line-based start detection so we still skip nodes that may extend
+      // past the line boundary (e.g., HorizontalRule tokens including newline).
+      if (frontmatterRange && node.name !== 'Document') {
+        const nodeStartLine = doc.lineAt(node.from).number;
+        if (
+          nodeStartLine >= frontmatterRange.startLine &&
+          nodeStartLine <= frontmatterRange.endLine
+        ) {
+          return false;
+        }
+      }
+
       const isActiveLine = lineNum === cursorLine;
 
       // Marker class: hidden on blur, muted on focus
@@ -735,6 +778,9 @@ function buildDecorations(view) {
     const line = doc.line(i);
     const isActiveLine = i === cursorLine;
 
+    // Skip frontmatter lines
+    if (frontmatterRange && i >= frontmatterRange.startLine && i <= frontmatterRange.endLine) continue;
+
     // Skip lines inside code blocks
     if (codeBlockLines.has(i)) continue;
 
@@ -770,6 +816,9 @@ function buildDecorations(view) {
     const line = doc.line(i);
     const isActiveLine = i === cursorLine;
 
+    // Skip frontmatter lines
+    if (frontmatterRange && i >= frontmatterRange.startLine && i <= frontmatterRange.endLine) continue;
+
     // Skip lines inside code blocks (using syntax tree detection)
     if (codeBlockLines.has(i)) continue;
 
@@ -810,12 +859,12 @@ function buildDecorations(view) {
     const line = doc.line(i);
     const isActiveLine = i === cursorLine;
 
+    // Skip frontmatter lines
+    if (frontmatterRange && i >= frontmatterRange.startLine && i <= frontmatterRange.endLine) continue;
+
     // Skip lines inside code blocks (using syntax tree detection)
     if (codeBlockLines.has(i)) continue;
 
-    // Skip frontmatter (YAML between ---)
-    // This is a simple check - a full solution would track state
-
     const htmlElements = extractHtmlElements(line.text);
 
     for (const el of htmlElements) {

package/src/markdown/styles.js

@@ -1015,6 +1015,132 @@ export const markdownStyles = `
 .cm-inline-html bdo {
   unicode-bidi: bidi-override;
 }
+
+/* ==========================================================================
+   MOBILE RESPONSIVE
+   
+   Quarto/Astro-inspired: content reads beautifully on narrow screens.
+   Tables scroll horizontally, images scale, code wraps or scrolls.
+   ========================================================================== */
+
+@media (max-width: 768px) {
+
+  /* Tables: horizontal scroll when they're wider than the viewport.
+     This is the exact pattern Quarto and MkDocs Material use. */
+  .cm-table-widget {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    margin-left: -4px;
+    margin-right: -4px;
+    padding-left: 4px;
+    padding-right: 4px;
+  }
+
+  /* Subtle fade on the right edge when table overflows */
+  .cm-table-widget::after {
+    content: '';
+    position: sticky;
+    right: 0;
+    display: block;
+    width: 16px;
+    margin-top: -100%;
+    height: 100%;
+    background: linear-gradient(to right, transparent, var(--editor-background, #fff) 80%);
+    pointer-events: none;
+    float: right;
+    opacity: 0.5;
+  }
+
+  .cm-table {
+    font-size: 0.88em;
+  }
+
+  .cm-table th,
+  .cm-table td {
+    padding: 0.4em 0.65em;
+    white-space: nowrap;
+  }
+
+  /* Images: full-width, never overflow the screen */
+  .cm-image-block-img {
+    max-width: 100%;
+    max-height: 50vh;
+  }
+
+  .cm-image-inline-img {
+    max-width: 100%;
+  }
+
+  /* Wide images: don't break out of viewport */
+  .cm-image-pos-wide {
+    width: 100%;
+    max-width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .cm-image-pos-wide .cm-image-block-img {
+    max-width: 100%;
+  }
+
+  /* Right/left aligned images: go full width on mobile */
+  .cm-image-pos-right,
+  .cm-image-pos-left {
+    text-align: center;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .cm-image-pos-right .cm-image-block-img,
+  .cm-image-pos-left .cm-image-block-img {
+    max-width: 100%;
+  }
+
+  /* Display math: horizontal scroll for wide equations */
+  .cm-math-display {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* Blockquotes: slightly tighter */
+  .cm-md-blockquote-line {
+    padding-left: 0.75em;
+  }
+
+  /* Headings: slightly smaller on mobile for better fit */
+  .cm-md-h1 {
+    font-size: clamp(1.4em, 5vw, var(--md-heading-1-size, 1.75em));
+  }
+
+  .cm-md-h2 {
+    font-size: clamp(1.2em, 4vw, var(--md-heading-2-size, 1.4em));
+  }
+
+  /* Horizontal rule: full width */
+  .cm-md-hr-line::after {
+    left: 0;
+    right: 0;
+  }
+}
+
+/* Touch-specific: make interactive elements more tappable */
+@media (pointer: coarse) {
+
+  /* Checkboxes: bigger for finger tapping */
+  .cm-task-checkbox {
+    width: 1.2em;
+    height: 1.2em;
+    margin-right: 0.5em;
+  }
+
+  /* Links: slightly more padding to enlarge tap area */
+  .cm-md-link-text,
+  .cm-external-link,
+  .cm-file-link,
+  .cm-wiki-link {
+    padding: 2px 0;
+  }
+}
 `;
 
 /**