@lapismd/mira 0.0.1

package/dist/mira-code-editor.svelte

@@ -0,0 +1,181 @@
+<script lang="ts">
+  import "./mira-code-editor.css";
+  import { Compartment, type Extension } from "@codemirror/state";
+  import { EditorView, type ViewUpdate } from "@codemirror/view";
+  import { onMount } from "svelte";
+  import { createBaseCodeMirrorExtensions } from "@lapismd/mira/codemirror";
+  import {
+    createMiraEditorController,
+    type MiraEditorController,
+    type MiraEditorSelection,
+  } from "@lapismd/mira/core";
+  import type { MiraTemplateSelection } from "@lapismd/mira/extensions";
+  import type { MiraCodeEditorProps } from "./mira-code-editor";
+
+  let {
+    value = $bindable(""),
+    extensions = [],
+    readonly = false,
+    placeholder = "",
+    lineWrapping = true,
+    spellcheck = false,
+    lineNumbers = true,
+    indentWithTabs = true,
+    indentWidth = 2,
+    ariaLabel = "Code editor",
+    invalid = false,
+    minHeight = "10rem",
+    scrollerTabIndex = null,
+    variant = "code",
+    surface = "framed",
+    height = "content",
+    class: className = "",
+    onChange,
+    onUpdate,
+    onFocus,
+    onBlur,
+  }: MiraCodeEditorProps = $props();
+
+  let host: HTMLDivElement;
+  let controller: MiraEditorController | null = $state(null);
+  const baseCompartment = new Compartment();
+  const extensionsCompartment = new Compartment();
+
+  function normalizedExtensions(): Extension[] {
+    return Array.isArray(extensions) ? [...extensions] : [extensions];
+  }
+
+  function baseExtensions(): Extension[] {
+    return createBaseCodeMirrorExtensions({
+      readonly,
+      placeholder,
+      lineWrapping,
+      spellcheck,
+      lineNumbers,
+      indentWithTabs,
+      indentWidth,
+      ariaLabel,
+      contentAttributes: {
+        "aria-invalid": invalid ? "true" : "false",
+      },
+    });
+  }
+
+  function updateScrollerTabIndex(view: EditorView): void {
+    if (scrollerTabIndex === null) {
+      view.scrollDOM.removeAttribute("tabindex");
+      return;
+    }
+    view.scrollDOM.tabIndex = scrollerTabIndex;
+  }
+
+  export function focus(): void {
+    controller?.focus();
+  }
+
+  export function getValue(): string {
+    return controller?.getValue() ?? value;
+  }
+
+  export function setValue(nextValue: string): void {
+    value = nextValue;
+    controller?.setValue(nextValue);
+  }
+
+  export function getSelection(): MiraEditorSelection | null {
+    return controller?.getSelection() ?? null;
+  }
+
+  export function setSelection(selection: MiraEditorSelection): void {
+    controller?.setSelection(selection);
+  }
+
+  export function replaceSelection(
+    nextValue: string,
+    selection?: MiraTemplateSelection,
+  ): void {
+    controller?.replaceSelection(nextValue, selection);
+  }
+
+  export function getView(): EditorView | null {
+    return controller?.view ?? null;
+  }
+
+  onMount(() => {
+    const activeController = createMiraEditorController({
+      value,
+      codeMirrorExtensions: [
+        baseCompartment.of(baseExtensions()),
+        extensionsCompartment.of(normalizedExtensions()),
+        EditorView.updateListener.of((update: ViewUpdate) =>
+          onUpdate?.(update),
+        ),
+        EditorView.domEventHandlers({
+          focus: (event, view) => {
+            onFocus?.(event, view);
+            return false;
+          },
+          blur: (event, view) => {
+            onBlur?.(event, view);
+            return false;
+          },
+        }),
+      ],
+      onChange(nextValue) {
+        value = nextValue;
+        onChange?.(nextValue);
+      },
+    });
+
+    activeController.mount(host);
+    controller = activeController;
+    updateScrollerTabIndex(activeController.view);
+
+    return () => {
+      activeController.destroy();
+      if (controller === activeController) controller = null;
+    };
+  });
+
+  $effect(() => {
+    if (controller && value !== controller.getValue()) {
+      controller.setValue(value);
+    }
+  });
+
+  $effect(() => {
+    readonly;
+    placeholder;
+    lineWrapping;
+    spellcheck;
+    lineNumbers;
+    indentWithTabs;
+    indentWidth;
+    ariaLabel;
+    invalid;
+    extensions;
+    if (!controller) return;
+    controller.view.dispatch({
+      effects: [
+        baseCompartment.reconfigure(baseExtensions()),
+        extensionsCompartment.reconfigure(normalizedExtensions()),
+      ],
+    });
+  });
+
+  $effect(() => {
+    scrollerTabIndex;
+    if (controller) updateScrollerTabIndex(controller.view);
+  });
+</script>
+
+<div
+  class={`mira-code-editor ${className}`.trim()}
+  data-variant={variant}
+  data-surface={surface}
+  data-height={height}
+  data-invalid={invalid}
+  style={`--mira-code-editor-min-height: ${minHeight};`}
+>
+  <div bind:this={host} class="mira-code-editor__host"></div>
+</div>

package/dist/mira-code-editor.svelte.d.ts

@@ -0,0 +1,17 @@
+import "./mira-code-editor.css";
+import { EditorView } from "@codemirror/view";
+import { type MiraEditorSelection } from "@lapismd/mira/core";
+import type { MiraTemplateSelection } from "@lapismd/mira/extensions";
+import type { MiraCodeEditorProps } from "./mira-code-editor";
+declare const MiraCodeEditor: import("svelte").Component<MiraCodeEditorProps, {
+    focus: () => void;
+    getValue: () => string;
+    setValue: (nextValue: string) => void;
+    getSelection: () => MiraEditorSelection | null;
+    setSelection: (selection: MiraEditorSelection) => void;
+    replaceSelection: (nextValue: string, selection?: MiraTemplateSelection) => void;
+    getView: () => EditorView | null;
+}, "value">;
+type MiraCodeEditor = ReturnType<typeof MiraCodeEditor>;
+export default MiraCodeEditor;
+//# sourceMappingURL=mira-code-editor.svelte.d.ts.map

package/dist/mira-code-editor.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mira-code-editor.svelte.d.ts","sourceRoot":"","sources":["../src/mira-code-editor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,wBAAwB,CAAC;AAEhC,OAAO,EAAE,UAAU,EAAmB,MAAM,kBAAkB,CAAC;AAG/D,OAAO,EAGH,KAAK,mBAAmB,EACzB,MAAM,oBAAoB,CAAC;AAC9B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AA+K9D,QAAA,MAAM,cAAc;iBA1GC,IAAI;oBAID,MAAM;0BAIE,MAAM,KAAG,IAAI;wBAKjB,mBAAmB,GAAG,IAAI;8BAIlB,mBAAmB,KAAG,IAAI;kCAK/C,MAAM,cACL,qBAAqB,KAChC,IAAI;mBAIc,UAAU,GAAG,IAAI;WA8EoB,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/mira-code-editor.test.d.ts

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

package/dist/mira-code-editor.test.d.ts.map

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

package/dist/mira-code-editor.test.js

@@ -0,0 +1,93 @@
+import { undo } from "@codemirror/commands";
+import { Transaction } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { mount, tick, unmount } from "svelte";
+import { describe, expect, it, vi } from "vitest";
+import MiraCodeEditor from "./mira-code-editor.svelte";
+import Mira from "./mira.svelte";
+describe("MiraCodeEditor", () => {
+    it("keeps the gutter and search panel on the editor surface", () => {
+        const shellCss = readFileSync(resolve(process.cwd(), "src/mira-code-editor.css"), "utf8");
+        const searchPanel = readFileSync(resolve(process.cwd(), "src/internal/codemirror/base/search-panel.svelte"), "utf8");
+        expect(shellCss).toMatch(/background:\s*var\(\s*--mira-code-editor-gutter-background,\s*var\(--mira-code-editor-background/);
+        expect(shellCss).toMatch(/\[data-surface="framed"\]:focus-within\s*\{[\s\S]*?border-color:\s*transparent/);
+        expect(shellCss).not.toMatch(/^\s*--mira-code-editor-focus-ring:\s*var\(/m);
+        expect(searchPanel).toMatch(/background:\s*var\(\s*--mira-code-editor-background/);
+        expect(searchPanel).toContain("--mira-code-editor-search-input-background");
+        expect(searchPanel).toContain("--mira-code-editor-search-button-hover-background");
+        expect(searchPanel).toContain("--mira-code-editor-search-focus-ring");
+        expect(searchPanel).toMatch(/__search-field:focus-within,[\s\S]*?__button:focus-visible\s*\{[\s\S]*?border-color:\s*transparent/);
+        expect(searchPanel).toMatch(/--mira-code-editor-search-radius,[\s\S]*?999px/);
+        expect(searchPanel).toMatch(/font-size:\s*var\(--mira-code-editor-search-font-size,\s*0\.875rem\)/);
+        expect(searchPanel).toMatch(/\.cm-panels-top:has\(\.mira-search-panel-host\)[\s\S]*?background:\s*transparent;[\s\S]*?border-bottom:\s*0/);
+    });
+    it("owns a controlled accessible CodeMirror lifecycle", async () => {
+        const target = document.createElement("div");
+        document.body.append(target);
+        const onChange = vi.fn();
+        const component = mount(MiraCodeEditor, {
+            target,
+            props: {
+                value: "name: Mira",
+                ariaLabel: "YAML editor",
+                invalid: true,
+                minHeight: "12rem",
+                scrollerTabIndex: 0,
+                onChange,
+            },
+        });
+        await tick();
+        const view = component.getView();
+        expect(view).not.toBeNull();
+        expect(view?.contentDOM.getAttribute("aria-label")).toBe("YAML editor");
+        expect(view?.contentDOM.getAttribute("aria-invalid")).toBe("true");
+        expect(view?.scrollDOM.getAttribute("tabindex")).toBe("0");
+        expect(target.querySelector(".mira-code-editor")?.getAttribute("data-surface")).toBe("framed");
+        view?.dispatch({
+            changes: { from: view.state.doc.length, insert: "\nrole: editor" },
+            annotations: Transaction.userEvent.of("input"),
+        });
+        expect(onChange).toHaveBeenLastCalledWith("name: Mira\nrole: editor");
+        component.setValue("external: value");
+        expect(component.getValue()).toBe("external: value");
+        expect(onChange).toHaveBeenCalledTimes(1);
+        component.setSelection({
+            anchor: { line: 0, ch: 0 },
+            head: { line: 0, ch: 8 },
+        });
+        expect(component.getSelection()).toEqual({
+            anchor: { line: 0, ch: 0 },
+            head: { line: 0, ch: 8 },
+        });
+        await unmount(component);
+        expect(target.querySelector(".cm-editor")).toBeNull();
+        target.remove();
+    });
+    it("preserves edit history when the Markdown consumer reconfigures", async () => {
+        const target = document.createElement("div");
+        document.body.append(target);
+        const component = mount(Mira, {
+            target,
+            props: { value: "alpha", mode: "source" },
+        });
+        await tick();
+        const editorElement = target.querySelector(".cm-editor");
+        const view = editorElement ? EditorView.findFromDOM(editorElement) : null;
+        expect(view).not.toBeNull();
+        view?.dispatch({
+            changes: { from: 5, insert: " beta" },
+            annotations: Transaction.userEvent.of("input"),
+        });
+        expect(component.getMarkdown()).toBe("alpha beta");
+        component.setReadonly(true);
+        await tick();
+        component.setReadonly(false);
+        await tick();
+        expect(view && undo(view)).toBe(true);
+        expect(component.getMarkdown()).toBe("alpha");
+        await unmount(component);
+        target.remove();
+    });
+});