@lapismd/mira 0.0.1

package/dist/tables/from-markdown.js

@@ -0,0 +1,378 @@
+// @ts-nocheck
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { fromMarkdown } from "mdast-util-from-markdown";
+import { CONTINUE, visit } from "unist-util-visit";
+import { pick } from "lodash-es";
+
+import {
+  TYPE_ROW_LINE,
+  TYPE_GRID_DIVIDER,
+  TYPE_BODY,
+  TYPE_CELL,
+  TYPE_HEADER,
+  TYPE_FOOTER,
+  TYPE_ROW,
+  TYPE_TABLE,
+} from "./types.js";
+
+function unescapeCode(tree) {
+  visit(tree, (node) => {
+    if (node.type === "inlineCode" || node.type === "code") {
+      // remove escaped pipes and plusses in code
+
+      node.value = node.value.replace(/\\([+|])/gm, "$1");
+    }
+    if (node.type === "code") {
+      // remove non-break-here characters
+
+      node.value = node.value.replace(/\u0083 ?\n/gmu, "");
+    }
+
+    return CONTINUE;
+  });
+}
+
+function multiline(lines) {
+  // remove empty trailing lines
+  while (lines.length > 0 && lines[lines.length - 1].match(/^\s*$/)) {
+    lines.pop();
+  }
+
+  // calculate common indent
+  const prefixLen = lines
+    .filter((line) => !line.match(/^\s*$/))
+    .map((line) => line.match(/^ */)[0].length)
+    .reduce((min, len) => Math.min(len, min), Infinity);
+
+  // remove prefix
+  return lines.map((line) => line.substring(prefixLen).trimEnd());
+}
+
+function getColSpan(info, token) {
+  const i0 = info.cols.indexOf(token._colStart);
+  const i1 = info.cols.indexOf(token._colEnd);
+  return i1 - i0;
+}
+
+function enterTable(token) {
+  this.enter({ type: TYPE_TABLE, children: [] }, token);
+  this.data.tableInfo = {
+    // the column positions of the table
+    cols: token._cols,
+    // the current column
+    colPos: 0,
+    // list of all cells
+    allCells: [],
+    // cells that are still open via rowSpan
+    pendingCells: [],
+    // the current cells of a row
+    cells: [],
+    // grid dividers use for align the cells
+    dividers: [],
+    // the link/image reference definitions
+    definitions: token._definitions,
+    // track row start position
+    rowStart: null,
+  };
+}
+
+function createExitTable(options) {
+  let { processor } = options;
+  // create fake remark processor in case invoked recursively
+  if (!processor) {
+    processor = {
+      data(key) {
+        if (key === "micromarkExtensions") {
+          return options.extensions;
+        }
+        if (key === "fromMarkdownExtensions") {
+          return options.mdastExtensions;
+        }
+        /* c8 ignore next */
+        return undefined;
+      },
+    };
+  }
+
+  return function exitTable(token) {
+    // render cells
+    const { tableInfo } = this.data;
+    for (const cell of tableInfo.allCells) {
+      const { node, lines, colSpan, rowSpan, align, valign } = cell;
+
+      const sanitizedLines = multiline(lines);
+
+      // remove trailing `\` on lines followed by empty line. we assume that proper backslashes are
+      // always escaped inside gridtables. also see https://github.com/micromark/micromark/issues/118
+      for (let i = 0; i < sanitizedLines.length; i += 1) {
+        const line = sanitizedLines[i];
+        if (line.endsWith("\\") && !sanitizedLines[i + 1]) {
+          let idx = line.length - 1;
+          while (idx >= 0 && line[idx] === "\\") {
+            idx -= 1;
+          }
+          // only remove if odd number of backslashes
+          if ((line.length - idx + 2) % 2 === 0) {
+            if (line.length === 1) {
+              sanitizedLines.splice(i, 1);
+              i -= 1;
+            } else {
+              sanitizedLines[i] = line.substring(0, line.length - 1);
+            }
+          }
+        }
+      }
+
+      // add fake definitions from the main document
+      const fakeDefs = new Set();
+      for (const def of tableInfo.definitions) {
+        const key = `[${def.toLowerCase()}]`;
+        if (lines.find((line) => line.indexOf(key) >= 0)) {
+          sanitizedLines.push("");
+          sanitizedLines.push(`[${def}]: dummy`);
+          fakeDefs.add(def);
+        }
+      }
+      const cellContent = sanitizedLines.join("\n");
+
+      const tree = fromMarkdown(cellContent, {
+        extensions: processor.data("micromarkExtensions"),
+        mdastExtensions: processor.data("fromMarkdownExtensions"),
+      });
+
+      // remove previously added definitions
+      for (let i = 0; i < tree.children.length; i += 1) {
+        const child = tree.children[i];
+        if (child.type === "definition" && fakeDefs.has(child.label)) {
+          tree.children.splice(i, 1);
+          i -= 1;
+        }
+      }
+
+      // remove escaped pipes and plusses in code
+      unescapeCode(tree);
+
+      node.content = cellContent;
+      node.children = tree.children;
+      node.position = {
+        start: pick(cell.startPosition, ["line", "column", "offset"]),
+        end: pick(cell.endPosition, ["line", "column", "offset"]),
+      };
+      node.positions = cell.positions;
+      if (colSpan > 1) {
+        node.colSpan = colSpan;
+      }
+      if (rowSpan > 1) {
+        node.rowSpan = rowSpan;
+      }
+      if (align) {
+        node.align = align;
+      }
+      if (valign) {
+        node.valign = valign;
+      }
+    }
+    this.exit(token);
+  };
+}
+
+function enter(token) {
+  this.enter({ type: token.type, children: [] }, token);
+}
+
+function enterCell() {
+  this.buffer();
+}
+
+function exitCell(token) {
+  this.config.enter.data.call(this, token);
+  this.config.exit.data.call(this, token);
+  const data = this.resume();
+  const { tableInfo } = this.data;
+  const colSpan = getColSpan(tableInfo, token);
+
+  let cell = tableInfo.pendingCells[tableInfo.colPos];
+
+  // open rowspan if we are on a divider line
+  if (tableInfo.isDivider) {
+    if (!cell) {
+      cell = tableInfo.cells[tableInfo.colPos];
+      tableInfo.pendingCells[tableInfo.colPos] = cell;
+    }
+    if (cell) {
+      cell.rowSpan += 1;
+      // Update end position for rowspan cells - always extend to current token end
+      if (token.end) {
+        cell.endPosition = token.end;
+      }
+    }
+  }
+
+  // if a rowspan is open, append to its cell
+  if (cell) {
+    cell.lines.push(data);
+    cell.positions.push({ from: token.start.offset, to: token.end.offset });
+    // Always update end position to reflect the latest content
+    if (token.end) {
+      cell.endPosition = token.end;
+    }
+    tableInfo.colPos += colSpan;
+    return;
+  }
+
+  // otherwise append to regular cell
+  cell = tableInfo.cells[tableInfo.colPos];
+  if (!cell) {
+    const div = tableInfo.dividers[tableInfo.colPos];
+    cell = {
+      rowSpan: 1,
+      colSpan,
+      align: div?._align,
+      valign: div?._valign,
+      node: {
+        type: TYPE_CELL,
+      },
+      lines: [],
+      positions: [],
+      // Store the original token positions
+      startPosition: token.start,
+      endPosition: token.end,
+    };
+    tableInfo.cells[tableInfo.colPos] = cell;
+    tableInfo.allCells.push(cell);
+  } else {
+    // Cell already exists (multi-line), update end position
+    if (token.end) {
+      cell.endPosition = token.end;
+    }
+  }
+
+  cell.lines.push(data);
+  cell.positions.push({ from: token.start.offset, to: token.end.offset });
+  tableInfo.colPos += colSpan;
+}
+
+function enterGridDivider(token) {
+  const { tableInfo } = this.data;
+  // clear pending rowspans and set divider info
+  let colSpan = getColSpan(tableInfo, token);
+  while (colSpan > 0) {
+    colSpan -= 1;
+    tableInfo.pendingCells[tableInfo.colPos] = null;
+    tableInfo.dividers[tableInfo.colPos] = token;
+    tableInfo.colPos += 1;
+  }
+}
+
+function enterRowLine(token) {
+  const info = this.data.tableInfo;
+  info.isDivider = token._type;
+  info.colPos = 0;
+  if (info.isDivider) {
+    info.dividers = [];
+  }
+  // Store row start position for later use
+  if (token.start) {
+    info.rowStart = token.start;
+  }
+}
+
+function commitRow(info) {
+  // Calculate row boundaries from cells
+  let rowStart = info.rowStart;
+  let rowEnd = info.rowStart;
+
+  for (const cell of info.cells) {
+    if (cell) {
+      if (
+        cell.startPosition &&
+        (!rowStart || cell.startPosition.offset < rowStart.offset)
+      ) {
+        rowStart = cell.startPosition;
+      }
+      if (
+        cell.endPosition &&
+        (!rowEnd || cell.endPosition.offset > rowEnd.offset)
+      ) {
+        rowEnd = cell.endPosition;
+      }
+    }
+  }
+
+  // Create token for 'gtRow' with proper positioning
+  const rowToken = {
+    type: TYPE_ROW,
+    start: rowStart || { line: 0, column: 0, offset: 0 },
+    end: rowEnd || { line: 0, column: 0, offset: 0 },
+  };
+  this.enter({ type: TYPE_ROW, children: [] }, rowToken);
+
+  // emit cells
+  for (const cell of info.cells) {
+    if (cell) {
+      const cellToken = {
+        type: TYPE_CELL,
+        start: cell.startPosition || { line: 0, column: 0, offset: 0 },
+        end: cell.endPosition || { line: 0, column: 0, offset: 0 },
+      };
+      this.enter(cell.node, cellToken);
+      this.exit(cellToken);
+    }
+  }
+
+  this.exit(rowToken);
+
+  info.cells = [];
+}
+
+function exitHeader(token) {
+  const { tableInfo } = this.data;
+  // commit row  has some cells
+  if (tableInfo.cells.length) {
+    commitRow.call(this, tableInfo);
+    // also close all rowspans.
+    tableInfo.pendingCells = [];
+  }
+  this.exit(token);
+}
+
+function exitRowLine() {
+  const { tableInfo } = this.data;
+  // commit row if on a divider and has some cells
+  if (tableInfo.isDivider && tableInfo.cells.length) {
+    commitRow.call(this, tableInfo);
+  }
+}
+
+export function gridTablesFromMarkdown(options = {}) {
+  return {
+    enter: {
+      [TYPE_TABLE]: enterTable,
+      [TYPE_HEADER]: enter,
+      [TYPE_BODY]: enter,
+      [TYPE_FOOTER]: enter,
+      [TYPE_CELL]: enterCell,
+      [TYPE_GRID_DIVIDER]: enterGridDivider,
+      [TYPE_ROW_LINE]: enterRowLine,
+    },
+    exit: {
+      [TYPE_TABLE]: createExitTable(options),
+      [TYPE_HEADER]: exitHeader,
+      [TYPE_BODY]: exitHeader,
+      [TYPE_FOOTER]: exitHeader,
+      [TYPE_CELL]: exitCell,
+      [TYPE_ROW_LINE]: exitRowLine,
+    },
+  };
+}

package/dist/tables/grid-editor-column.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+  // @ts-nocheck
+  import { EditorView, keymap } from "@codemirror/view";
+  import { EditorState } from "@codemirror/state";
+  import { cn } from "./utils";
+  import { tick } from "svelte";
+  import { MarkdownPreview } from "@lapismd/mira/preview";
+  import { createInlineTableMarkdownExtensions } from "./inline-editor-extensions";
+
+  let {
+    content,
+    onContentChange,
+    onEdit = () => true,
+    class: className,
+  }: {
+    content: string;
+    class?: string;
+    onContentChange: (value: string) => void;
+    onEdit?: (evt: MouseEvent) => boolean;
+  } = $props();
+  let view: EditorView = new EditorView({
+    doc: "",
+    state: EditorState.create({
+      extensions: [
+        createInlineTableMarkdownExtensions(),
+        keymap.of([
+          {
+            key: "Enter",
+            run: (view) => {
+              // Insert newline and prevent event from bubbling to parent
+              view.dispatch({
+                changes: { from: view.state.selection.main.head, insert: "\n" },
+                selection: { anchor: view.state.selection.main.head + 1 },
+              });
+              return true; // This prevents the event from propagating
+            },
+          },
+        ]),
+        EditorView.domEventHandlers({
+          focus: (event, view) => {},
+          blur: (event, view) => {
+            editing = false;
+            const value = view.state.doc.toString();
+            if (value !== content) {
+              onContentChange(value);
+            }
+          },
+        }),
+      ],
+    }),
+  });
+
+  let editing: boolean = $state(false);
+
+  const codeMirror = (node: HTMLDivElement, content: string) => {
+    node.append(view.dom);
+    view.dispatch({
+      changes: {
+        insert: content.trim(),
+        from: 0,
+        to: view.state.doc.length,
+      },
+    });
+    view.focus();
+
+    return {
+      update(value: string) {
+        view.dispatch({
+          changes: {
+            insert: value.trim(),
+            from: 0,
+            to: view.state.doc.length,
+          },
+        });
+      },
+      destroy() {},
+    };
+  };
+
+  function enableEdit(evt: MouseEvent | FocusEvent) {
+    editing = evt instanceof MouseEvent ? (onEdit(evt) ?? true) : true;
+    if (!editing) return;
+    tick().then(() => {
+      setTimeout(() => {
+        view.focus();
+        const pos =
+          evt instanceof MouseEvent
+            ? (view.posAtCoords({ x: evt.clientX, y: evt.clientY }) ?? 0)
+            : view.state.doc.length;
+        view.dispatch({ selection: { anchor: pos, head: pos } });
+      });
+    });
+  }
+</script>
+
+<div class={cn("table-cell-wrapper h-full w-full", className)}>
+  {#if editing}
+    <div
+      use:codeMirror={content}
+      class={cn(
+        "h-full w-full p-2 ring-[var(--background-modifier-border-focus)] focus-within:rounded-sm focus-within:ring-2",
+        className,
+      )}
+    ></div>
+  {:else}
+    <div class={cn("relative h-full w-full p-2", className)}>
+      <div class="cm-editor cm-focused mod-inline">
+        <div class="cm-scroller">
+          <div class="cm-content">
+            {#if content}
+              <MarkdownPreview inline value={content} />
+            {:else}
+              &NonBreakingSpace;
+            {/if}
+          </div>
+        </div>
+      </div>
+      <button
+        type="button"
+        aria-label="Edit table cell"
+        onclick={(evt) => enableEdit(evt)}
+        onfocus={(evt) => enableEdit(evt)}
+        style="position: absolute; inset: 0; opacity: 0;"
+      ></button>
+    </div>
+  {/if}
+</div>

package/dist/tables/grid-editor-column.svelte.d.ts

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    content: string;
+    class?: string;
+    onContentChange: (value: string) => void;
+    onEdit?: (evt: MouseEvent) => boolean;
+};
+declare const GridEditorColumn: import("svelte").Component<$$ComponentProps, {}, "">;
+type GridEditorColumn = ReturnType<typeof GridEditorColumn>;
+export default GridEditorColumn;
+//# sourceMappingURL=grid-editor-column.svelte.d.ts.map

package/dist/tables/grid-editor-column.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-editor-column.svelte.d.ts","sourceRoot":"","sources":["../../src/tables/grid-editor-column.svelte.ts"],"names":[],"mappings":"AAWC,KAAK,gBAAgB,GAAI;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,OAAO,CAAC;CACvC,CAAC;AAmHJ,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/tables/grid-editor-column.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=grid-editor-column.test.d.ts.map

package/dist/tables/grid-editor-column.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-editor-column.test.d.ts","sourceRoot":"","sources":["../../src/tables/grid-editor-column.test.ts"],"names":[],"mappings":""}

package/dist/tables/grid-editor-column.test.js

@@ -0,0 +1,27 @@
+import { mount, tick, unmount } from "svelte";
+import { describe, expect, it, vi } from "vitest";
+import GridEditorColumn from "./grid-editor-column.svelte";
+describe("GridEditorColumn", () => {
+    it("moves keyboard focus into the inline editor", async () => {
+        const target = document.createElement("div");
+        document.body.append(target);
+        const component = mount(GridEditorColumn, {
+            target,
+            props: {
+                content: "Feature",
+                onContentChange: vi.fn(),
+            },
+        });
+        await tick();
+        const trigger = target.querySelector('button[aria-label="Edit table cell"]');
+        expect(trigger).not.toBeNull();
+        trigger?.focus();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        await tick();
+        const editor = target.querySelector(".cm-editor.mod-inline .cm-content[contenteditable='true']");
+        expect(editor).not.toBeNull();
+        expect(document.activeElement).toBe(editor);
+        await unmount(component);
+        target.remove();
+    });
+});