@lapismd/mira 0.0.2 → 0.0.3

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @lapismd/mira
 
+## 0.0.3
+
+### Patch Changes
+
+- [#3](https://github.com/lapismd/mira-mde/pull/3) [`31e2502`](https://github.com/lapismd/mira-mde/commit/31e2502e185f883390165851e146a3823c6b9274) Thanks [@stevejuma](https://github.com/stevejuma)! - Relicense the public Mira packages to Apache 2.0.
+
+- [#7](https://github.com/lapismd/mira-mde/pull/7) [`215a690`](https://github.com/lapismd/mira-mde/commit/215a6906130dbcf06f0a649e8a76074c6e24612f) Thanks [@stevejuma](https://github.com/stevejuma)! - Render list bullets, hanging indentation, and indentation guides when a consumer
+  mounts a Markdown editor directly on CodeMirror's root. Wrapped editors retain
+  the same marker geometry and caret behavior.
+
+- [#7](https://github.com/lapismd/mira-mde/pull/7) [`215a690`](https://github.com/lapismd/mira-mde/commit/215a6906130dbcf06f0a649e8a76074c6e24612f) Thanks [@stevejuma](https://github.com/stevejuma)! - Preserve inline checkbox labels in live-preview editors embedded inside rendered
+  Markdown by excluding CodeMirror cursor-buffer images from Markdown image styles.
+
+  Refresh the repository's renderer and release-tool dependencies to patched
+  versions, retaining math rendering and trust restrictions in regression coverage.
+
+- [#7](https://github.com/lapismd/mira-mde/pull/7) [`215a690`](https://github.com/lapismd/mira-mde/commit/215a6906130dbcf06f0a649e8a76074c6e24612f) Thanks [@stevejuma](https://github.com/stevejuma)! - Declare the reviewed KaTeX stylesheet package as a runtime dependency so public
+  Mira, editor, and React CSS resolves in isolated package-manager installations.
+
 ## 0.0.2
 
 ### Patch Changes

package/LICENSE.md

@@ -1,4 +1,4 @@
-AGPL-3.0-or-later
+Apache-2.0
 
-This project is licensed under the GNU Affero General Public License v3.0 or later.
-See <https://www.gnu.org/licenses/agpl-3.0.en.html>.
+This project is licensed under the Apache License 2.0.
+See <https://www.apache.org/licenses/LICENSE-2.0>.

package/dist/preview/preview.test.js

@@ -4,6 +4,8 @@ import rehypeRaw from "rehype-raw";
 import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
 import remarkEmoji from "remark-emoji";
 import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+import rehypeKatex from "rehype-katex";
 import { TYPE_TABLE, mdast2hastGridTablesHandler, } from "@adobe/mdast-util-gridtables";
 import { remarkHeadings, remarkWikiLinks } from "./remark";
 import { createParser } from "./renderer/utils";
@@ -13,6 +15,34 @@ describe("preview exports", () => {
         expect(typeof remarkWikiLinks).toBe("function");
     });
 });
+describe("patched math renderer", () => {
+    it("renders inline and display math through the preview pipeline", () => {
+        const parser = createParser([remarkMath], [rehypeKatex]);
+        const ast = parser("Inline $x^2$.\n\n$$\nx^2 + y^2 = z^2\n$$");
+        const rendered = JSON.stringify(ast);
+        expect(rendered).toContain("katex-mathml");
+        expect(rendered).toContain("katex-display");
+        expect(findElement(ast, "math")).toBeDefined();
+    });
+    it("does not inherit polluted trust options when rendering authored math", () => {
+        const descriptor = Object.getOwnPropertyDescriptor(Object.prototype, "trust");
+        try {
+            Object.defineProperty(Object.prototype, "trust", {
+                value: true,
+                configurable: true,
+            });
+            const parser = createParser([remarkMath], [rehypeKatex]);
+            const ast = parser("$\\href{https://example.com}{untrusted}$");
+            expect(findElement(ast, "a")).toBeUndefined();
+        }
+        finally {
+            if (descriptor)
+                Object.defineProperty(Object.prototype, "trust", descriptor);
+            else
+                Reflect.deleteProperty(Object.prototype, "trust");
+        }
+    });
+});
 describe("Carta markdown parity", () => {
     const dataPng = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
     it("renders reference-style base64 embedded images", () => {

package/dist/preview/styles/images.css

@@ -2,13 +2,15 @@
    reading column, while preserving aspect ratio. Applies to both the
    dedicated image component and any raw <img> rendered through markdown
    (e.g. via rehype-raw HTML). Link-preview card thumbnails opt out since
-   they already have their own, smaller sizing tuned for hover tooltips. */
+   they already have their own, smaller sizing tuned for hover tooltips.
+   CodeMirror cursor-buffer images must retain their zero-width inline layout
+   when an editor is nested inside rendered Markdown. */
 :is(
     .markdown-rendered,
     .markdown-preview-surface .markdown,
     .markdown-widget-shell
   )
-  img:not(.mira-link-preview__asset),
+  img:not(.mira-link-preview__asset, .cm-widgetBuffer),
 .mira-markdown-image {
   border: 1px solid var(--mira-border);
   border-radius: var(--radius-s, 4px);

package/dist/preview/styles/source-mode.css

@@ -1,4 +1,4 @@
-.markdown-editor-surface .cm-editor {
+:is(.markdown-editor-surface .cm-editor, .cm-editor.markdown-editor-surface) {
   cursor: text;
   font-family: var(--font-sans);
   font-size: var(--font-text-size);
@@ -37,25 +37,34 @@
   width: 0;
 }
 
-.markdown-editor-surface .cm-editor .cm-formatting-list-ul,
-.markdown-editor-surface .cm-editor .cm-formatting-list-ol {
+:is(.markdown-editor-surface .cm-editor, .cm-editor.markdown-editor-surface)
+  .cm-formatting-list-ul,
+:is(.markdown-editor-surface .cm-editor, .cm-editor.markdown-editor-surface)
+  .cm-formatting-list-ol {
   font-variant-numeric: tabular-nums;
   padding-inline-start: 0;
 }
 
-.markdown-editor-surface .cm-editor .cm-formatting-task {
+:is(.markdown-editor-surface .cm-editor, .cm-editor.markdown-editor-surface)
+  .cm-formatting-task {
   color: var(--markdown-code-comment);
 }
 
-.markdown-live-preview-mode .cm-editor .cm-formatting-list-ul:not(.cm-line) {
+:is(
+    .markdown-live-preview-mode .cm-editor,
+    .cm-editor.markdown-live-preview-mode
+  )
+  .cm-formatting-list-ul:not(.cm-line) {
   box-sizing: border-box;
   display: inline-block;
   inline-size: var(--hmd-unordered-list-marker-slot-width);
   padding-inline-start: var(--hmd-unordered-list-marker-padding-inline-start);
 }
 
-.markdown-live-preview-mode
-  .cm-editor
+:is(
+    .markdown-live-preview-mode .cm-editor,
+    .cm-editor.markdown-live-preview-mode
+  )
   .cm-formatting-list-bullet
   > span.cm-meta {
   color: transparent;
@@ -63,8 +72,10 @@
   position: relative;
 }
 
-.markdown-live-preview-mode
-  .cm-editor
+:is(
+    .markdown-live-preview-mode .cm-editor,
+    .cm-editor.markdown-live-preview-mode
+  )
   .cm-formatting-list-bullet
   > span.cm-meta::after {
   background-color: var(--list-marker-color);
@@ -82,13 +93,17 @@
   width: var(--list-bullet-size);
 }
 
-.markdown-live-preview-mode
-  .cm-editor
+:is(
+    .markdown-live-preview-mode .cm-editor,
+    .cm-editor.markdown-live-preview-mode
+  )
   .cm-line:hover
   .cm-formatting-list-bullet
   > span.cm-meta::after,
-.markdown-live-preview-mode
-  .cm-editor
+:is(
+    .markdown-live-preview-mode .cm-editor,
+    .cm-editor.markdown-live-preview-mode
+  )
   .cm-activeLine
   .cm-formatting-list-bullet
   > span.cm-meta::after {
@@ -96,11 +111,13 @@
   box-shadow: 0 0 0 4px var(--background-modifier-hover);
 }
 
-.markdown-editor-surface .cm-editor .HyperMD-list-line {
+:is(.markdown-editor-surface .cm-editor, .cm-editor.markdown-editor-surface)
+  .HyperMD-list-line {
   white-space: pre-wrap;
 }
 
-.markdown-editor-surface .cm-editor .indented-wrapped-line {
+:is(.markdown-editor-surface .cm-editor, .cm-editor.markdown-editor-surface)
+  .indented-wrapped-line {
   padding-inline-start: var(
     --hmd-indent-padding-measured,
     var(--hmd-indent-padding-fallback, 0px)
@@ -111,8 +128,7 @@
   );
 }
 
-.markdown-editor-surface
-  .cm-editor
+:is(.markdown-editor-surface .cm-editor, .cm-editor.markdown-editor-surface)
   .indented-wrapped-line:has(.cm-hmd-list-indent) {
   text-indent: calc(
     0px -
@@ -126,40 +142,54 @@
   );
 }
 
-.markdown-editor-surface .cm-editor .cm-line > * {
+:is(.markdown-editor-surface .cm-editor, .cm-editor.markdown-editor-surface)
+  .cm-line
+  > * {
   text-indent: 0;
 }
 
-.markdown-editor-surface .cm-editor .cm-hmd-list-indent {
+:is(.markdown-editor-surface .cm-editor, .cm-editor.markdown-editor-surface)
+  .cm-hmd-list-indent {
   display: inline-block;
   white-space: pre;
 }
 
-.markdown-editor-surface .cm-editor .cm-indent-guide {
+:is(.markdown-editor-surface .cm-editor, .cm-editor.markdown-editor-surface)
+  .cm-indent-guide {
   min-width: var(--list-indent);
 }
 
-.markdown-editor-surface .cm-editor .cm-plain-indent-line,
-.markdown-editor-surface .cm-editor .cm-plain-indent-widget {
+:is(.markdown-editor-surface .cm-editor, .cm-editor.markdown-editor-surface)
+  .cm-plain-indent-line,
+:is(.markdown-editor-surface .cm-editor, .cm-editor.markdown-editor-surface)
+  .cm-plain-indent-widget {
   position: relative;
 }
 
-.markdown-editor-surface .cm-editor .cm-hmd-list-indent .cm-indent,
-.markdown-editor-surface .cm-editor .cm-plain-indent-widget .cm-indent {
+:is(.markdown-editor-surface .cm-editor, .cm-editor.markdown-editor-surface)
+  .cm-hmd-list-indent
+  .cm-indent,
+:is(.markdown-editor-surface .cm-editor, .cm-editor.markdown-editor-surface)
+  .cm-plain-indent-widget
+  .cm-indent {
   color: transparent;
   display: inline-block;
   position: relative;
   white-space: pre;
 }
 
-.markdown-editor-surface
-  .cm-editor.cm-show-indentation-guides
+:is(
+    .markdown-editor-surface .cm-editor.cm-show-indentation-guides,
+    .cm-editor.markdown-editor-surface.cm-show-indentation-guides
+  )
   .indented-wrapped-line {
   position: relative;
 }
 
-.markdown-editor-surface
-  .cm-editor.cm-show-indentation-guides
+:is(
+    .markdown-editor-surface .cm-editor.cm-show-indentation-guides,
+    .cm-editor.markdown-editor-surface.cm-show-indentation-guides
+  )
   .indented-wrapped-line::before {
   background-image: repeating-linear-gradient(
     to right,
@@ -181,8 +211,10 @@
   width: calc(var(--indent-guide-count, 0) * var(--indent-size, 4) * 1ch);
 }
 
-.markdown-editor-surface
-  .cm-editor.cm-show-indentation-guides
+:is(
+    .markdown-editor-surface .cm-editor.cm-show-indentation-guides,
+    .cm-editor.markdown-editor-surface.cm-show-indentation-guides
+  )
   .cm-activeLine.indented-wrapped-line::before {
   background-image: repeating-linear-gradient(
     to right,
@@ -208,12 +240,16 @@
   );
 }
 
-.markdown-editor-surface
-  .cm-editor.cm-show-indentation-guides
+:is(
+    .markdown-editor-surface .cm-editor.cm-show-indentation-guides,
+    .cm-editor.markdown-editor-surface.cm-show-indentation-guides
+  )
   .cm-hmd-list-indent
   .cm-indent-guide::before,
-.markdown-editor-surface
-  .cm-editor.cm-show-indentation-guides
+:is(
+    .markdown-editor-surface .cm-editor.cm-show-indentation-guides,
+    .cm-editor.markdown-editor-surface.cm-show-indentation-guides
+  )
   .cm-plain-indent-widget
   .cm-indent-guide::before {
   display: none;

package/dist/preview/styles/source-mode.test.js

@@ -1,3 +1,4 @@
+// @vitest-environment jsdom
 import { readFileSync } from "node:fs";
 import { resolve } from "node:path";
 import { cwd } from "node:process";
@@ -6,8 +7,22 @@ const sourceModeStyles = () => readFileSync(resolve(cwd(), "src/preview/styles/s
 describe("source mode styles", () => {
     it("reserves full guide slots only for complete indentation guide segments", () => {
         const styles = sourceModeStyles();
-        expect(styles).toContain(".markdown-editor-surface .cm-editor .cm-indent-guide");
-        expect(styles).toContain("min-width: var(--list-indent)");
-        expect(styles).not.toMatch(/\.markdown-editor-surface\s+\.cm-editor\s+\.cm-indent\s*\{[^}]*min-width:\s*var\(--list-indent\)/u);
+        const guideRules = Array.from(styles.matchAll(/([^{}]+)\{([^{}]*)\}/gu))
+            .map((match) => ({ selector: match[1], declarations: match[2] }))
+            .filter(({ declarations }) => /min-width:\s*var\(--list-indent\)/u.test(declarations));
+        expect(guideRules).toHaveLength(1);
+        for (const markup of [
+            '<div class="markdown-editor-surface"><div class="cm-editor"><span class="cm-indent-guide"></span><span class="cm-indent"></span></div></div>',
+            '<div class="cm-editor markdown-editor-surface"><span class="cm-indent-guide"></span><span class="cm-indent"></span></div>',
+        ]) {
+            const host = document.createElement("div");
+            host.innerHTML = markup;
+            const guide = host.querySelector(".cm-indent-guide");
+            const partial = host.querySelector(".cm-indent");
+            for (const { selector } of guideRules) {
+                expect(guide.matches(selector.trim())).toBe(true);
+                expect(partial.matches(selector.trim())).toBe(false);
+            }
+        }
     });
 });

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@lapismd/mira",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Composable Markdown editor, extension SDK, preview renderer, and UI for Mira.",
   "author": "Steve Juma <help@lapis.md>",
-  "license": "AGPL-3.0-or-later",
+  "license": "Apache-2.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/lapismd/mira-mde.git",
@@ -86,6 +86,7 @@
     "bits-ui": "2.18.1",
     "clsx": "^2.1.1",
     "hast-util-to-text": "^4.0.2",
+    "katex": "0.18.10",
     "lodash-es": "^4.17.21",
     "mdast-util-from-markdown": "^2.0.2",
     "mdast-util-gfm-table": "^2.0.0",
@@ -152,8 +153,7 @@
     "@types/lodash-es": "^4.17.12",
     "@types/mdast": "^4.0.4",
     "@types/unist": "^3.0.3",
-    "katex": "^0.16.22",
-    "svelte": "^5.46.1"
+    "svelte": "^5.57.1"
   },
   "publishConfig": {
     "access": "public",