@lapismd/mira 0.0.1

package/dist/preview/test-utils.js

@@ -0,0 +1,15 @@
+export function findElement(node, tagName) {
+    if (node.type === "element" && node.tagName === tagName) {
+        return node;
+    }
+    for (const child of node.children ?? []) {
+        if (child.type !== "element") {
+            continue;
+        }
+        const result = findElement(child, tagName);
+        if (result) {
+            return result;
+        }
+    }
+    return undefined;
+}

package/dist/styles.css

@@ -0,0 +1,139 @@
+@import "./themes.css";
+@import "./ui/styles.css";
+@import "./preview/styles.css";
+
+.mira {
+  background: var(--mira-background);
+  border: 1px solid var(--mira-border);
+  border-radius: var(--mira-radius);
+  box-sizing: border-box;
+  color: var(--mira-foreground);
+  display: flex;
+  flex-direction: column;
+  font-family: var(--mira-font-sans);
+  height: 100%;
+  min-height: 360px;
+  overflow: hidden;
+}
+
+.mira__toolbar {
+  align-items: center;
+  background: var(--mira-background);
+  border-bottom: 1px solid var(--mira-border);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  min-height: 46px;
+  padding: 0.45rem;
+}
+
+.mira__toolbar-separator {
+  align-self: stretch;
+  min-height: 28px;
+}
+
+.mira__actions {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+.mira__body {
+  display: grid;
+  flex: 1;
+  grid-template-columns: 1fr;
+  min-height: 0;
+}
+
+.mira[data-mode="split"] .mira__body {
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+}
+
+.mira__pane {
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.mira__pane--editor {
+  background: var(--mira-editor-background);
+}
+
+.mira__pane--editor[data-visible="false"] {
+  display: none;
+}
+
+.mira__pane--preview {
+  border-inline-start: 1px solid var(--mira-border);
+}
+
+.mira:not([data-mode="split"]) .mira__pane--preview {
+  border-inline-start: 0;
+}
+
+.mira__pane--outline-floating {
+  position: relative;
+}
+
+.mira__pane--outline-sidebar {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(12rem, 16rem);
+}
+
+.mira__pane--outline-sidebar > .mira-markdown-preview {
+  min-width: 0;
+}
+
+.mira__pane--outline-sidebar > .mira-markdown-outline {
+  background: var(--mira-background);
+  border-inline-start: 1px solid var(--mira-border);
+  box-sizing: border-box;
+  min-width: 0;
+  overflow: auto;
+  padding: 1rem;
+}
+
+/*
+ * Keep the CM scroller as the only vertical scroll owner (split sync +
+ * existing e2e helpers target `.cm-scroller`). The host stays full-pane
+ * width so the scrollbar sits on the pane edge; readable column width is
+ * applied via scroller padding in the CodeMirror theme.
+ */
+.mira__editor-scroll {
+  box-sizing: border-box;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  width: 100%;
+}
+
+.mira__editor-host {
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  width: 100%;
+}
+
+@media (max-width: 760px) {
+  .mira[data-mode="split"] .mira__body {
+    grid-template-columns: 1fr;
+    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
+  }
+
+  .mira__pane--preview {
+    border-inline-start: 0;
+    border-top: 1px solid var(--mira-border);
+  }
+
+  .mira__pane--outline-sidebar {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: minmax(0, 1fr) auto;
+  }
+
+  .mira__pane--outline-sidebar > .mira-markdown-outline {
+    border-inline-start: 0;
+    border-top: 1px solid var(--mira-border);
+    max-height: 8rem;
+  }
+}

package/dist/tables/adobe-gridtables.d.ts

@@ -0,0 +1,6 @@
+declare module "@adobe/mdast-util-gridtables" {
+  export const TYPE_TABLE: string;
+  export function mdast2hastGridTablesHandler(): any;
+  export function gridTablesFromMarkdown(): any;
+  export function gridTablesToMarkdown(): any;
+}

package/dist/tables/editor-column.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+  // @ts-nocheck
+  import type * as Mdast from "mdast";
+  import { TableNode } from "./table-node";
+  import { EditorView } from "@codemirror/view";
+  import { EditorState } from "@codemirror/state";
+  import { cn } from "./utils";
+  import { tick } from "svelte";
+  import { toHtml } from "./utils";
+  import { createInlineTableMarkdownExtensions } from "./inline-editor-extensions";
+
+  let {
+    node,
+    onContentChange,
+    onEdit = () => {},
+    readonly = false,
+    class: className,
+  }: {
+    node: Mdast.Nodes;
+    class?: string;
+    onContentChange: (value: string) => void;
+    onEdit?: (evt: MouseEvent) => void;
+    readonly?: boolean;
+  } = $props();
+  let content = $derived(TableNode.toMarkdown(node).trim());
+  let view: EditorView = new EditorView({
+    doc: "",
+    state: EditorState.create({
+      extensions: [
+        createInlineTableMarkdownExtensions(),
+        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) {
+    if (readonly) {
+      return;
+    }
+    editing = true;
+    if (evt instanceof MouseEvent) {
+      onEdit(evt);
+    }
+    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 readonly}
+    <div class={cn("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}
+              {#await toHtml(content) then markup}
+                {@html markup}
+              {/await}
+            {:else}
+              &NonBreakingSpace;
+            {/if}
+          </div>
+        </div>
+      </div>
+    </div>
+  {:else if editing}
+    <div use:codeMirror={content} class={cn("p-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}
+              {#await toHtml(content) then markup}
+                {@html markup}
+              {/await}
+            {: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/editor-column.svelte.d.ts

@@ -0,0 +1,12 @@
+import type * as Mdast from "mdast";
+type $$ComponentProps = {
+    node: Mdast.Nodes;
+    class?: string;
+    onContentChange: (value: string) => void;
+    onEdit?: (evt: MouseEvent) => void;
+    readonly?: boolean;
+};
+declare const EditorColumn: import("svelte").Component<$$ComponentProps, {}, "">;
+type EditorColumn = ReturnType<typeof EditorColumn>;
+export default EditorColumn;
+//# sourceMappingURL=editor-column.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"editor-column.svelte.d.ts","sourceRoot":"","sources":["../../src/tables/editor-column.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AASnC,KAAK,gBAAgB,GAAI;IACtB,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA4HJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}