moondown 0.1.0 → 1.0.0

package/dist/index.js

@@ -39,6 +39,7 @@ function normalizePlugins(plugins) {
 // src/editor/runtime/editor-runtime.ts
 import { EditorState as EditorState12, Transaction as Transaction4 } from "@codemirror/state";
 import { EditorView as EditorView30, placeholder as viewPlaceholder } from "@codemirror/view";
+import { forceParsing } from "@codemirror/language";
 
 // src/extensions/default-extensions.ts
 import { Prec } from "@codemirror/state";
@@ -4421,7 +4422,7 @@ function buildEditorStyles(options) {
       position: "absolute",
       inset: 0,
       backgroundColor: colors.codeBackground,
-      borderRadius: "8px",
+      borderRadius: 0,
       zIndex: -1
     },
     ".cm-fenced-code:has(.cm-mermaid-widget)::before, .cm-fenced-code:has(.cm-latex-widget)::before": {
@@ -6637,6 +6638,7 @@ function buildTableHelperStyles(edgeButtonSize) {
   .table-helper-operate-button {
     z-index: 3;
     opacity: 0;
+    pointer-events: none;
     position: absolute;
     display: flex;
     align-items: center;
@@ -6654,9 +6656,9 @@ function buildTableHelperStyles(edgeButtonSize) {
     transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), color 0.14s ease, border-color 0.14s ease, background-color 0.14s ease;
   }
 
-  table.table-helper:hover .table-helper-operate-button,
-  .table-helper-operate-button:hover {
+  .table-helper-operate-button.is-visible {
     opacity: 1;
+    pointer-events: auto;
   }
 
   .table-helper-operate-button:hover {
@@ -6763,7 +6765,7 @@ function buildTableHelperStyles(edgeButtonSize) {
     backdrop-filter: blur(40px) saturate(180%);
     -webkit-backdrop-filter: blur(40px) saturate(180%);
     font-size: 13px;
-    padding: 4px;
+    padding: 0;
   }
 
   .tippy-box[data-theme~='custom'][data-placement^='bottom'] > .tippy-arrow::before {
@@ -6783,7 +6785,13 @@ function buildTableHelperStyles(edgeButtonSize) {
   }
 
   .tippy-box[data-theme~='custom'] .tippy-content {
-    padding: 4px;
+    padding: 0;
+  }
+
+  .table-action-popover {
+    display: flex;
+    gap: 2px;
+    padding: 5px;
   }
 
   .tippy-button {
@@ -6791,14 +6799,16 @@ function buildTableHelperStyles(edgeButtonSize) {
     display: flex;
     align-items: center;
     justify-content: center;
-    min-width: 34px;
-    min-height: 34px;
+    width: 32px;
+    height: 32px;
+    min-width: 32px;
+    min-height: 32px;
     border: none;
     border-radius: 8px;
     background: transparent;
     color: #6e6e73;
     cursor: pointer;
-    padding: 8px 10px;
+    padding: 6px;
     font-size: 14px;
     transition: background-color 0.14s ease, color 0.14s ease, transform 0.12s ease;
   }
@@ -6819,10 +6829,7 @@ function buildTableHelperStyles(edgeButtonSize) {
   }
 
   .alignment-options {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 4px;
-    padding: 4px;
+    gap: 2px;
   }
 
   .alignment-options .tippy-button {
@@ -6878,19 +6885,38 @@ function genericTextNode(from, to, value, whitespaceBefore = "") {
 }
 
 // src/extensions/table/table-functions.ts
-function parseNode2(tableNode, markdown3) {
-  const ast = parseNode(tableNode, markdown3);
-  if (ast.type === "Table") {
-    const tableEditorAst = ast.rows.map((row) => row.cells.map((cell) => markdown3.substring(cell.from, cell.to).trim()));
-    if (tableEditorAst.length === 0) {
-      throw new Error("Cannot instantiate TableEditor: Table had zero rows.");
+function parseMarkdownTable(markdown3) {
+  const ast = markdownToAST(markdown3);
+  const table = findTableAst(ast);
+  if (!table) {
+    return void 0;
+  }
+  return tableAstToParsedTable(table, markdown3);
+}
+function tableAstToParsedTable(ast, markdown3) {
+  const tableEditorAst = ast.rows.map((row) => row.cells.map((cell) => markdown3.substring(cell.from, cell.to).trim()));
+  if (tableEditorAst.length === 0) {
+    throw new Error("Cannot instantiate TableEditor: Table had zero rows.");
+  }
+  return {
+    ast: tableEditorAst,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    colAlignments: ast.alignment ?? tableEditorAst[0].map((_cell) => "left")
+  };
+}
+function findTableAst(node) {
+  if (node.type === "Table") {
+    return node;
+  }
+  if ("children" in node) {
+    for (const child of node.children) {
+      const table = findTableAst(child);
+      if (table) {
+        return table;
+      }
     }
-    return {
-      ast: tableEditorAst,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      colAlignments: ast.alignment ?? tableEditorAst[0].map((_cell) => "left")
-    };
   }
+  return void 0;
 }
 function getWhitespaceBeforeNode(node, markdown3) {
   if (node.prevSibling !== null) {
@@ -6970,11 +6996,12 @@ function parseTableNode(node, markdown3) {
   const header = node.getChildren("TableHeader");
   const rows = node.getChildren("TableRow");
   for (const line of markdown3.substring(node.from, node.to).split("\n")) {
-    if (!/^[|+:-]+$/.test(line)) {
+    const normalizedLine = line.trim().replace(/\s+/g, "");
+    if (!/^[|+:-]+$/.test(normalizedLine)) {
       continue;
     }
-    const splitter = line.includes("+") ? "+" : "|";
-    astNode.alignment = line.split(splitter).filter((c) => c.length > 0).map((c) => {
+    const splitter = normalizedLine.includes("+") ? "+" : "|";
+    astNode.alignment = normalizedLine.split(splitter).filter((c) => c.length > 0).map((c) => {
       if (c.startsWith("|")) {
         c = c.substring(1);
       }
@@ -7243,9 +7270,7 @@ function createActionButton(action) {
 }
 function createPopoverContainer() {
   const container = document.createElement("div");
-  container.style.display = "flex";
-  container.style.gap = "5px";
-  container.style.padding = "5px";
+  container.className = "table-action-popover";
   return container;
 }
 function mountIcons2(iconSet) {
@@ -7372,7 +7397,7 @@ var TableEditorActionsPopover = class {
   }
   showAlignmentOptions(target) {
     const alignmentContainer = createPopoverContainer();
-    alignmentContainer.className = "alignment-options";
+    alignmentContainer.classList.add("alignment-options");
     const alignments = [
       {
         icon: "align-left",
@@ -7420,6 +7445,7 @@ var OFFSCREEN_POSITION = "-1000px";
 var BUTTON_OFFSET_SCALE = 0.6;
 var CENTER_SCALE = 1.2;
 var EDGE_BUTTON_SPACING = 5;
+var VISIBLE_CLASS = "is-visible";
 function isPointInsideExpandedRect({ event, table, edgeButtonSize }) {
   const rect = table.getBoundingClientRect();
   const minX = rect.left - edgeButtonSize;
@@ -7447,16 +7473,24 @@ var TableEditorEdgeButtons = class {
   }
   show() {
     if (this.visible) {
+      this.addTopButton.classList.add(VISIBLE_CLASS);
+      this.addLeftButton.classList.add(VISIBLE_CLASS);
       return;
     }
     document.body.appendChild(this.addTopButton);
     document.body.appendChild(this.addLeftButton);
+    this.addTopButton.classList.add(VISIBLE_CLASS);
+    this.addLeftButton.classList.add(VISIBLE_CLASS);
   }
   hide() {
+    this.addTopButton.classList.remove(VISIBLE_CLASS);
+    this.addLeftButton.classList.remove(VISIBLE_CLASS);
     this.addTopButton.parentElement?.removeChild(this.addTopButton);
     this.addLeftButton.parentElement?.removeChild(this.addLeftButton);
   }
   hideOffscreen() {
+    this.addTopButton.classList.remove(VISIBLE_CLASS);
+    this.addLeftButton.classList.remove(VISIBLE_CLASS);
     this.addTopButton.style.top = OFFSCREEN_POSITION;
     this.addLeftButton.style.top = OFFSCREEN_POSITION;
   }
@@ -7799,6 +7833,10 @@ var TableEditor = class {
       this._recalculateEdgeButtonPositions();
       return;
     }
+    if (this._hasFocusedCell()) {
+      this._showEdgeButtons();
+      return;
+    }
     this._hideAllButtons();
   }
   _clickHelper(event) {
@@ -7847,6 +7885,9 @@ var TableEditor = class {
       if (!isInCurrentTable && !this._isClean) {
         this._options.onBlur?.(this);
       }
+      if (!isInCurrentTable) {
+        this._hideAllButtons();
+      }
     }, BLUR_DELAY_MS);
   }
   _onCellFocus(cell) {
@@ -7862,7 +7903,7 @@ var TableEditor = class {
     cell.innerHTML = this._model.getCell(row, col);
     this._rowIndex = row;
     this._cellIndex = col;
-    this._recalculateEdgeButtonPositions();
+    this._showEdgeButtons();
   }
   _onCellKeyDown(event, cell) {
     if (this._options.readOnly) {
@@ -7918,6 +7959,10 @@ var TableEditor = class {
     this._actionsPopover.destroy();
     this._edgeButtons.hide();
   }
+  _hasFocusedCell() {
+    const activeElement = document.activeElement;
+    return !!activeElement && this._elem.contains(activeElement);
+  }
   get _edgeButtonsVisible() {
     return this._edgeButtons.visible;
   }
@@ -8128,21 +8173,20 @@ var TableEditor = class {
 };
 
 // src/extensions/table/table-widget-editor-factory.ts
-function createTableEditorFromSyntaxNode(tableNode, markdown3, options = {}) {
-  const parsed = parseNode2(tableNode, markdown3);
+function createTableEditorFromMarkdown(tableMarkdown, options = {}) {
+  const parsed = parseMarkdownTable(tableMarkdown);
   if (!parsed) {
-    throw new Error("Could not parse table node");
+    throw new Error("Could not parse table markdown");
   }
   return new TableEditor(parsed.ast, parsed.colAlignments, options);
 }
 
 // src/extensions/table/render-tables.ts
 var _TableWidget = class _TableWidget extends WidgetType12 {
-  constructor(table, readOnly, node, originalFrom, originalTo) {
+  constructor(table, readOnly, originalFrom, originalTo) {
     super();
     this.table = table;
     this.readOnly = readOnly;
-    this.node = node;
     this.originalFrom = originalFrom;
     this.originalTo = originalTo;
     __publicField(this, "widgetId");
@@ -8155,7 +8199,7 @@ var _TableWidget = class _TableWidget extends WidgetType12 {
   }
   toDOM(view) {
     try {
-      const editor = createTableEditorFromSyntaxNode(this.node, view.state.sliceDoc(), {
+      const editor = createTableEditorFromMarkdown(this.table, {
         readOnly: this.readOnly,
         onBlur: (instance) => {
           this.saveContent(view, instance);
@@ -8215,7 +8259,7 @@ function getErrorMessage(error) {
 function createWidget3(state, node) {
   const table = state.sliceDoc(node.from, node.to);
   try {
-    return new TableWidget(table, state.facet(CodeMirrorState.readOnly), node.node, node.from, node.to);
+    return new TableWidget(table, state.facet(CodeMirrorState.readOnly), node.from, node.to);
   } catch (error) {
     console.error(`Could not instantiate TableEditor widget: ${getErrorMessage(error)}`);
     return void 0;
@@ -8533,6 +8577,7 @@ var EditorRuntime = class {
       },
       annotations: Transaction4.addToHistory.of(false)
     });
+    this.refreshWysiwygWidgets();
   }
   toggleSyntaxHiding(enabled) {
     this.config.syntaxHiding = enabled;
@@ -8579,6 +8624,16 @@ var EditorRuntime = class {
     this.pluginRuntime.destroy();
     this.view.destroy();
   }
+  refreshWysiwygWidgets() {
+    if (!this.config.syntaxHiding) {
+      return;
+    }
+    forceParsing(this.view, this.view.state.doc.length, 500);
+    this.view.dispatch({
+      effects: wysiwygCompartment.reconfigure(resolveWysiwygExtensions(true)),
+      annotations: Transaction4.addToHistory.of(false)
+    });
+  }
 };
 
 // src/editor/moondown-editor.ts