@jxsuite/studio 0.19.0 → 0.20.0

package/src/editor/context-menu.js

@@ -21,7 +21,7 @@ import { startLayerTitleEdit } from "../panels/layers-panel.js";
  *
  * @typedef {import("../state.js").JxPath} JxPath
  *
- * @typedef {import("../state.js").JxNode} JxNode
+ * @typedef {JxMutableNode} JxNode
  */
 
 // ─── Clipboard ────────────────────────────────────────────────────────────────

package/src/editor/convert-to-component.js

@@ -39,15 +39,17 @@ export async function convertToComponent() {
   transact(tab, (doc) => {
     // Navigate to parent's children array and replace the node
     const pp = parentElementPath(selectionPath) ?? [];
-    const idx = childIndex(selectionPath);
+    const idx = /** @type {number} */ (childIndex(selectionPath));
     let parent = doc;
     for (const seg of pp) parent = parent[seg];
+    if (!parent.children) parent.children = [];
     parent.children[idx] = { tagName: name };
 
     // Ensure $elements exists and add the $ref
     if (!doc.$elements) doc.$elements = [];
     const alreadyReferenced = doc.$elements.some(
-      (/** @type {any} */ el) => el && el.$ref === refPath,
+      (/** @type {JxMutableNode | string | { $ref: string }} */ el) =>
+        el && typeof el === "object" && "$ref" in el && el.$ref === refPath,
     );
     if (!alreadyReferenced) {
       doc.$elements.push({ $ref: refPath });
@@ -60,15 +62,15 @@ export async function convertToComponent() {
     await platform.writeFile(componentFile, JSON.stringify(componentDef, null, 2));
     await loadComponentRegistry();
     statusMessage(`Converted to <${name}>`);
-  } catch (/** @type {any} */ err) {
-    statusMessage(`Error saving component: ${err.message}`);
+  } catch (/** @type {unknown} */ err) {
+    statusMessage(`Error saving component: ${/** @type {Error} */ (err).message}`);
   }
 }
 
 /**
  * Derive a default tag name from a node.
  *
- * @param {any} node
+ * @param {JxMutableNode} node
  * @returns {string}
  */
 function deriveDefaultName(node) {
@@ -80,8 +82,8 @@ function deriveDefaultName(node) {
 /**
  * Deep clone a node and strip page-specific keys.
  *
- * @param {any} node
- * @returns {any}
+ * @param {JxMutableNode} node
+ * @returns {JxMutableNode}
  */
 function extractComponentDef(node) {
   const clone = structuredClone(node);
@@ -105,7 +107,7 @@ function validateName(val) {
   if (!VALID_NAME.test(val)) {
     return { valid: false, error: "Lowercase letters, digits, and hyphens only" };
   }
-  const exists = componentRegistry.some((/** @type {any} */ c) => c.tagName === val);
+  const exists = componentRegistry.some((/** @type {JxMutableNode} */ c) => c.tagName === val);
   if (exists) {
     return { valid: false, error: `Component <${val}> already exists` };
   }
@@ -134,7 +136,7 @@ function promptComponentName(defaultName) {
     }
 
     function onInput(/** @type {Event} */ e) {
-      value = /** @type {any} */ (e.target).value || "";
+      value = /** @type {HTMLInputElement} */ (e.target).value || "";
       const result = validateName(value);
       error = result.valid ? "" : result.error;
       rerender();
@@ -179,7 +181,7 @@ function promptComponentName(defaultName) {
 
     requestAnimationFrame(() => {
       const layer = document.getElementById("layer-dialog");
-      const tf = /** @type {any} */ (layer?.querySelector("sp-textfield"));
+      const tf = /** @type {HTMLElement | null} */ (layer?.querySelector("sp-textfield"));
       if (tf) {
         tf.focus();
         const input = tf.shadowRoot?.querySelector("input");

package/src/editor/inline-edit.js

@@ -5,6 +5,16 @@
  * text formatting, Enter for new paragraphs, and slash commands for inserting elements.
  */
 
+/**
+ * @typedef {{ tag: string; label: string; icon?: string; command?: string; shortcut?: string }} InlineAction
+ *
+ * @typedef {{ $inlineChildren?: string[]; $inlineActions?: InlineAction[] | string }} ElementDef
+ *
+ * @typedef {{ label: string; tag: string; description: string }} SlashCommand
+ *
+ * @typedef {{ textContent?: string | null; children?: (JxMutableNode | string)[] }} JxContentResult
+ */
+
 import elementsMeta from "../../data/elements-meta.json";
 import { toggleInlineFormat, normalizeInlineContent } from "./inline-format.js";
 import {
@@ -60,7 +70,7 @@ const EDITABLE_BLOCKS = new Set([
  */
 export function isInlineInContext(childTag, parentTag) {
   if (!parentTag) return INLINE_TAGS.has(childTag);
-  const parentDef = /** @type {Record<string, any>} */ (elementsMeta.$defs)[parentTag];
+  const parentDef = /** @type {Record<string, ElementDef>} */ (elementsMeta.$defs)[parentTag];
   if (!parentDef || !parentDef.$inlineChildren) return false;
   return parentDef.$inlineChildren.includes(childTag);
 }
@@ -70,15 +80,15 @@ export function isInlineInContext(childTag, parentTag) {
  * look up h1's actions).
  *
  * @param {string} tag
- * @returns {any[] | null}
+ * @returns {InlineAction[] | null}
  */
 export function getInlineActions(tag) {
-  const def = /** @type {Record<string, any>} */ (elementsMeta.$defs)[tag];
+  const def = /** @type {Record<string, ElementDef>} */ (elementsMeta.$defs)[tag];
   if (!def) return null;
   let actions = def.$inlineActions;
   if (typeof actions === "string") {
-    const refDef = /** @type {Record<string, any>} */ (elementsMeta.$defs)[actions];
-    actions = refDef?.$inlineActions ?? null;
+    const refDef = /** @type {Record<string, ElementDef>} */ (elementsMeta.$defs)[actions];
+    actions = refDef?.$inlineActions ?? undefined;
   }
   if (!Array.isArray(actions)) return null;
   return actions;
@@ -88,13 +98,26 @@ export function getInlineActions(tag) {
 
 /** @type {HTMLElement | null} */
 let activeEl = null; // currently contenteditable element
-/** @type {any[] | null} */
+/** @type {JxPath | null} */
 let activePath = null; // JSON path to the active element
-/** @type {((path: any[], children: any, textContent: any) => void) | null} */
+/**
+ * @type {((
+ *       path: JxPath,
+ *       children: (JxMutableNode | string)[] | null,
+ *       textContent: string | null,
+ *     ) => void)
+ *   | null}
+ */
 let commitFn = null; // function(path, newChildren, newTextContent) to commit changes
-/** @type {((path: any[], beforeChildren: any, afterChildren: any) => void) | null} */
+/**
+ * @type {((path: JxPath, beforeChildren: JxContentResult, afterChildren: JxContentResult) => void)
+ *   | null}
+ */
 let splitFn = null; // function(path, beforeChildren, afterChildren) to split paragraph
-/** @type {((path: any[], elementDef: any, commitData?: any) => void) | null} */
+/**
+ * @type {((path: JxPath, elementDef: SlashCommand, commitData?: JxContentResult) => void)
+ *   | null}
+ */
 let insertFn = null; // function(path, elementDef, commitData?) to insert after current block
 /** @type {(() => void) | null} */
 let endFn = null; // function() called when editing stops
@@ -113,8 +136,8 @@ export function isEditableBlock(el) {
  * Check if a node is an inline child. When parentNode is provided, uses context-aware scoping from
  * metadata. Without parent, uses the fallback INLINE_TAGS set.
  *
- * @param {any} node
- * @param {any} [parentNode]
+ * @param {JxMutableNode} node
+ * @param {JxMutableNode} [parentNode]
  * @returns {boolean}
  */
 export function isInlineElement(node, parentNode) {
@@ -131,11 +154,21 @@ export function isInlineElement(node, parentNode) {
  * Start inline editing on a canvas element.
  *
  * @param {HTMLElement} el - The canvas DOM element to edit
- * @param {any[]} path - JSON path to the element
- * @param {Record<string, any>} callbacks - { onCommit, onSplit, onInsert, onEnd } onCommit(path,
- *   children|null, textContent|null) — save inline content onSplit(path, beforeChildren,
- *   afterChildren) — Enter key: split block onInsert(path, elementDef) — slash command: insert
- *   after onEnd() — called when editing stops (for overlay restoration)
+ * @param {JxPath} path - JSON path to the element
+ * @param {{
+ *   onCommit: (
+ *     path: JxPath,
+ *     children: (JxMutableNode | string)[] | null,
+ *     textContent: string | null,
+ *   ) => void;
+ *   onSplit: (
+ *     path: JxPath,
+ *     beforeChildren: JxContentResult,
+ *     afterChildren: JxContentResult,
+ *   ) => void;
+ *   onInsert: (path: JxPath, elementDef: SlashCommand, commitData?: JxContentResult) => void;
+ *   onEnd: () => void;
+ * }} callbacks
  */
 export function startEditing(el, path, callbacks) {
   if (activeEl) stopEditing();
@@ -373,8 +406,8 @@ function commitChanges() {
  * Normalize a node's children array: merge adjacent text nodes and fold all-text children into
  * textContent. Returns `{ textContent }` or `{ children }`.
  *
- * @param {{ children?: any[] }} node
- * @returns {{ textContent?: string | null; children?: any[] }}
+ * @param {{ children?: (JxMutableNode | string)[] }} node
+ * @returns {JxContentResult}
  */
 export function normalizeChildren(node) {
   if (!Array.isArray(node.children) || node.children.length === 0) return { textContent: "" };
@@ -394,7 +427,7 @@ export function normalizeChildren(node) {
   }
 
   // Step 2: If all children are text, fold into textContent
-  if (merged.every((/** @type {any} */ c) => typeof c === "string")) {
+  if (merged.every((/** @type {JxMutableNode | string} */ c) => typeof c === "string")) {
     return { textContent: merged.join("") };
   }
 
@@ -406,7 +439,7 @@ export function normalizeChildren(node) {
  * for plain text or { children } for rich content.
  *
  * @param {HTMLElement} el
- * @returns {{ textContent?: string | null; children?: any[] }}
+ * @returns {JxContentResult}
  */
 function elementToJx(el) {
   const nodes = el.childNodes;
@@ -418,7 +451,7 @@ function elementToJx(el) {
   }
 
   // Mixed content → children array
-  /** @type {any[]} */
+  /** @type {(JxMutableNode | string)[]} */
   const children = [];
   for (const child of nodes) {
     const jsx = domNodeToJx(child);
@@ -433,7 +466,7 @@ function elementToJx(el) {
  * Convert a DOM node to a Jx element definition.
  *
  * @param {Node} node
- * @returns {any}
+ * @returns {JxMutableNode | string | null}
  */
 function domNodeToJx(node) {
   if (node.nodeType === Node.TEXT_NODE) {
@@ -446,7 +479,7 @@ function domNodeToJx(node) {
 
   const el = /** @type {HTMLElement} */ (node);
   const tag = el.tagName.toLowerCase();
-  /** @type {Record<string, any>} */
+  /** @type {JxMutableNode} */
   const result = { tagName: tag };
 
   // Map browser execCommand output to our tag conventions
@@ -475,7 +508,7 @@ function domNodeToJx(node) {
     result.children = [];
     for (const child of childNodes) {
       const jsx = domNodeToJx(child);
-      if (jsx) result.children.push(jsx);
+      if (jsx) result.children.push(/** @type {JxMutableNode} */ (jsx));
     }
   }
 
@@ -486,7 +519,7 @@ function domNodeToJx(node) {
  * Convert a DocumentFragment to a Jx-compatible structure. Returns { textContent } or { children }.
  *
  * @param {DocumentFragment} frag
- * @returns {{ textContent?: string | null; children?: any[] }}
+ * @returns {JxContentResult}
  */
 function fragmentToJx(frag) {
   const nodes = frag.childNodes;
@@ -495,14 +528,19 @@ function fragmentToJx(frag) {
     return { textContent: nodes[0].textContent };
   }
 
-  /** @type {any[]} */
+  /** @type {(JxMutableNode | string)[]} */
   const children = [];
   for (const child of nodes) {
     const jsx = domNodeToJx(child);
     if (jsx) children.push(jsx);
   }
 
-  if (children.length === 1 && children[0].tagName === "span" && children[0].textContent != null) {
+  if (
+    children.length === 1 &&
+    typeof children[0] !== "string" &&
+    children[0].tagName === "span" &&
+    children[0].textContent != null
+  ) {
     return { textContent: children[0].textContent };
   }
 
@@ -560,7 +598,7 @@ function updateSlashMenu() {
   sharedShowSlashMenu(activeEl, filter, { onSelect: handleSlashSelect });
 }
 
-/** @param {any} cmd */
+/** @param {SlashCommand} cmd */
 function handleSlashSelect(cmd) {
   if (!activeEl || !insertFn || !activePath) return;
 

package/src/editor/insertion-helper.js

@@ -34,16 +34,18 @@ import { transactDoc, mutateInsertNode } from "../tabs/transact.js";
 /**
  * @typedef {Object} InsertionHelperContext
  * @property {() => string} getCanvasMode - Returns the active canvas mode.
- * @property {(fn: Function) => any} withPanelPointerEvents - Executes fn with pointer-events
+ * @property {(fn: Function) => unknown} withPanelPointerEvents - Executes fn with pointer-events
  *   temporarily enabled on the canvas.
  * @property {() => number} effectiveZoom - Returns the current zoom scale factor.
  * @property {(tag: string) => Object} defaultDef - Creates a default element definition for a tag.
- * @property {(path: any[]) => any[] | null} parentElementPath - Returns the parent element path, or
- *   null for root.
- * @property {(path: any[]) => string | number} childIndex - Returns the child index within the
+ * @property {(path: JxPath) => JxPath | null} parentElementPath - Returns the parent element path,
+ *   or null for root.
+ * @property {(path: JxPath) => string | number} childIndex - Returns the child index within the
  *   parent.
- * @property {(doc: any, path: any[]) => any} getNodeAtPath - Retrieves the node at a document path.
- * @property {WeakMap<any, any[]>} elToPath - Maps rendered DOM elements to their document paths.
+ * @property {(doc: JxMutableNode, path: JxPath) => JxMutableNode | null} getNodeAtPath - Retrieves
+ *   the node at a document path.
+ * @property {WeakMap<Element, JxPath>} elToPath - Maps rendered DOM elements to their document
+ *   paths.
  * @property {CanvasPanel} panel - The active canvas panel.
  */
 
@@ -58,7 +60,7 @@ let _helper = null;
 /** @type {HTMLElement | null} */
 let _currentAnchor = null;
 
-/** @type {{ edge: string; path: any[]; parentPath: any[]; idx: number } | null} */
+/** @type {{ edge: string; path: JxPath; parentPath: JxPath; idx: number } | null} */
 let _insertionPoint = null;
 
 /** @type {AbortController | null} */
@@ -133,7 +135,9 @@ function onMouseMove(e) {
   }
 
   const { panel, withPanelPointerEvents, elToPath } = _ctx;
-  const el = withPanelPointerEvents(() => document.elementFromPoint(e.clientX, e.clientY));
+  const el = /** @type {HTMLElement | null} */ (
+    withPanelPointerEvents(() => document.elementFromPoint(e.clientX, e.clientY))
+  );
 
   if (!el || !panel.canvas.contains(el)) {
     hide();
@@ -208,8 +212,8 @@ function onMouseMove(e) {
 /**
  * @param {HTMLElement} el
  * @param {string} edge
- * @param {any[]} path
- * @param {any[]} parentPath
+ * @param {JxPath} path
+ * @param {JxPath} parentPath
  * @param {number} idx
  */
 function showAt(el, edge, path, parentPath, idx) {
@@ -275,8 +279,8 @@ function onHelperClick(/** @type {MouseEvent} */ e) {
 }
 
 /**
- * @param {any} cmd
- * @param {{ edge: string; path: any[]; parentPath: any[]; idx: number }} point
+ * @param {{ label: string; tag: string; description?: string }} cmd
+ * @param {{ edge: string; path: JxPath; parentPath: JxPath; idx: number }} point
  */
 function onSlashSelect(cmd, point) {
   if (!_ctx) return;

package/src/editor/shortcuts.js

@@ -15,7 +15,7 @@ import {
   undo as tabUndo,
   redo as tabRedo,
 } from "../tabs/transact.js";
-import { isEditing } from "./inline-edit.js";
+import { isEditing, stopEditing } from "./inline-edit.js";
 import { copyNode, cutNode, pasteNode } from "./context-menu.js";
 import { openQuickSearch } from "../panels/quick-search.js";
 
@@ -132,6 +132,7 @@ export function initShortcuts(getContext) {
     if (isEditing()) {
       if (mod && e.key === "s") {
         e.preventDefault();
+        stopEditing();
         saveFile();
       }
       if (mod && e.key === "w") {
@@ -142,6 +143,7 @@ export function initShortcuts(getContext) {
     if (componentInlineEdit) {
       if (mod && e.key === "s") {
         e.preventDefault();
+        stopEditing();
         saveFile();
       }
       if (mod && e.key === "w") {
@@ -266,7 +268,7 @@ export function initShortcuts(getContext) {
         e.preventDefault();
         if (tab?.session.selection) {
           const node = getNodeAtPath(tab.doc.document, tab.session.selection);
-          if (node?.children?.length > 0) {
+          if ((node?.children?.length ?? 0) > 0) {
             activeTab.value.session.selection = [...tab.session.selection, "children", 0];
           }
         }

package/src/editor/slash-menu.js

@@ -30,12 +30,14 @@ const SLASH_COMMANDS = [
   { label: "Section", tag: "section", description: "Section container" },
 ];
 
+/** @typedef {{ label: string; tag: string; description: string }} SlashCommand */
+
 // ─── State ────────────────────────────────────────────────────────────────────
 
-/** @type {{ onSelect: (cmd: any) => void; showFilter?: boolean } | null} */
+/** @type {{ onSelect: (cmd: SlashCommand) => void; showFilter?: boolean } | null} */
 let callbacks = null;
 let activeIdx = 0;
-/** @type {any[]} */
+/** @type {SlashCommand[]} */
 let filteredItems = [];
 let open = false;
 /** @type {HTMLElement | null} */
@@ -60,7 +62,7 @@ export function isSlashMenuOpen() {
  *
  * @param {HTMLElement} anchorEl — the element being edited (for positioning)
  * @param {string} filter — current typed filter text (after the "/")
- * @param {{ onSelect: (cmd: any) => void; showFilter?: boolean }} cbs
+ * @param {{ onSelect: (cmd: SlashCommand) => void; showFilter?: boolean }} cbs
  */
 export function showSlashMenu(anchorEl, filter, cbs) {
   callbacks = cbs;
@@ -174,7 +176,7 @@ function onOutsideClick(e) {
   }
 }
 
-/** @param {any} cmd */
+/** @param {SlashCommand} cmd */
 function select(cmd) {
   const cbs = callbacks;
   dismissSlashMenu();

package/src/files/components.js

@@ -7,7 +7,7 @@ import { projectState } from "../store.js";
  * @typedef {{
  *   tagName: string;
  *   path: string;
- *   props?: { name: string; type?: string; [k: string]: any }[];
+ *   props?: { name: string; type?: string; [k: string]: unknown }[];
  *   source?: string;
  *   package?: string;
  *   modulePath?: string;

package/src/files/file-ops.js

@@ -7,18 +7,22 @@
 import { unified } from "unified";
 import remarkStringify from "remark-stringify";
 import remarkDirective from "remark-directive";
+import remarkGfm from "remark-gfm";
 import { stringify as stringifyYaml } from "yaml";
 import { jxToMd, jxDocToMd } from "../markdown/md-convert.js";
 import { locateDocument } from "../services/code-services.js";
 import { statusMessage } from "../panels/statusbar.js";
 import { getPlatform } from "../platform.js";
 import { activeTab, openTab } from "../workspace/workspace.js";
+import { isEditing, stopEditing } from "../editor/inline-edit.js";
 
 /** Open a file via the File System Access API (or fallback input). */
 export async function openFile() {
   try {
     if ("showOpenFilePicker" in window) {
-      const [handle] = await /** @type {any} */ (window).showOpenFilePicker({
+      const [handle] = await /** @type {{ showOpenFilePicker: Function }} */ (
+        /** @type {unknown} */ (window)
+      ).showOpenFilePicker({
         types: [
           { description: "Jx Component", accept: { "application/json": [".json"] } },
           { description: "Markdown Content", accept: { "text/markdown": [".md"] } },
@@ -66,8 +70,9 @@ export async function openFile() {
       };
       input.click();
     }
-  } catch (/** @type {any} */ e) {
-    if (e.name !== "AbortError") statusMessage(`Error: ${e.message}`);
+  } catch (/** @type {unknown} */ e) {
+    if (/** @type {Error} */ (e).name !== "AbortError")
+      statusMessage(`Error: ${/** @type {Error} */ (e).message}`);
   }
 }
 
@@ -75,11 +80,11 @@ export async function openFile() {
  * Parse a markdown string into document + frontmatter (pure — no side effects).
  *
  * @param {string} source Markdown text
- * @returns {Promise<{ document: any; frontmatter: Record<string, any> }>}
+ * @returns {Promise<{ document: JxMutableNode; frontmatter: Record<string, unknown> }>}
  */
 export async function loadMarkdown(source) {
   const { transpileJxMarkdown } = await import("@jxsuite/parser/transpile");
-  const doc = /** @type {any} */ (transpileJxMarkdown(source));
+  const doc = /** @type {JxMutableNode} */ (transpileJxMarkdown(source));
 
   const isComponent = doc.tagName && String(doc.tagName).includes("-");
 
@@ -88,9 +93,11 @@ export async function loadMarkdown(source) {
   }
 
   // Content markdown — children form the root-level document body
-  const contentDoc = { children: doc.children ?? [] };
+  const children = doc.children ?? [];
+  if (children.length === 0) children.push({ tagName: "p", children: [] });
+  const contentDoc = { children };
 
-  /** @type {Record<string, any>} */
+  /** @type {Record<string, unknown>} */
   const frontmatter = {};
   for (const [key, value] of Object.entries(doc)) {
     if (key !== "children") frontmatter[key] = value;
@@ -101,6 +108,7 @@ export async function loadMarkdown(source) {
 
 /** Save the current document back to its source location. */
 export async function saveFile() {
+  if (isEditing()) stopEditing();
   const tab = activeTab.value;
   if (!tab) return;
   try {
@@ -112,7 +120,15 @@ export async function saveFile() {
       tab.doc.dirty = false;
       statusMessage("Saved");
     } else if (tab.fileHandle && "createWritable" in tab.fileHandle) {
-      const writable = await /** @type {any} */ (tab.fileHandle).createWritable();
+      const writable =
+        await /**
+         * @type {{
+         *   createWritable: () => Promise<{
+         *     write: (s: string) => Promise<void>;
+         *     close: () => Promise<void>;
+         *   }>;
+         * }}
+         */ (tab.fileHandle).createWritable();
       await writable.write(output);
       await writable.close();
       tab.doc.dirty = false;
@@ -120,8 +136,9 @@ export async function saveFile() {
     } else {
       statusMessage("No save target — use Export");
     }
-  } catch (/** @type {any} */ e) {
-    if (e.name !== "AbortError") statusMessage(`Save error: ${e.message}`);
+  } catch (/** @type {unknown} */ e) {
+    if (/** @type {Error} */ (e).name !== "AbortError")
+      statusMessage(`Save error: ${/** @type {Error} */ (e).message}`);
   }
 }
 
@@ -142,7 +159,9 @@ export async function exportFile() {
         : isContent
           ? "content.md"
           : "component.json";
-      const handle = await /** @type {any} */ (window).showSaveFilePicker({
+      const handle = await /** @type {{ showSaveFilePicker: Function }} */ (
+        /** @type {unknown} */ (window)
+      ).showSaveFilePicker({
         suggestedName,
         types: [{ description, accept: { [mimeType]: [ext] } }],
       });
@@ -163,8 +182,9 @@ export async function exportFile() {
       tab.doc.dirty = false;
       statusMessage("Downloaded");
     }
-  } catch (/** @type {any} */ e) {
-    if (e.name !== "AbortError") statusMessage(`Export error: ${e.message}`);
+  } catch (/** @type {unknown} */ e) {
+    if (/** @type {Error} */ (e).name !== "AbortError")
+      statusMessage(`Export error: ${/** @type {Error} */ (e).message}`);
   }
 }
 
@@ -178,14 +198,15 @@ export function serializeDocument(tab) {
   if (tab.doc.sourceFormat === "md") {
     const fm = tab.doc.content?.frontmatter || {};
     const fullDoc = { ...fm, children: tab.doc.document.children ?? [] };
-    return jxDocToMd(fullDoc);
+    return jxDocToMd(/** @type {JxMutableNode} */ (fullDoc));
   }
   if (tab.doc.mode === "content") {
-    const mdast = jxToMd(tab.doc.document);
+    const mdast = jxToMd(/** @type {JxElement} */ (tab.doc.document));
     const md = unified()
+      .use(remarkGfm)
       .use(remarkDirective)
       .use(remarkStringify, { bullet: "-", emphasis: "*", strong: "*" })
-      .stringify(mdast);
+      .stringify(/** @type {import("mdast").Root} */ (/** @type {unknown} */ (mdast)));
     const fm = tab.doc.content?.frontmatter;
     const hasFrontmatter = fm && Object.keys(fm).length > 0;
     return hasFrontmatter ? `---\n${stringifyYaml(fm).trim()}\n---\n\n${md}` : md;