feat: keep html previews live and fix bare autolinks (#5)

* ci: fix auto release workflow permissions

* fix: bound bare autolinks and keep html preview live

Author: Albert-PZY

.github/workflows/auto-release.yml

@@ -7,7 +7,6 @@ on:
 
 permissions:
   contents: read
-  actions: write
 
 concurrency:
   group: auto-release-main

specs/features/autolink.specs.ts

@@ -59,6 +59,18 @@ export const autolinkSpecs: FeatureSpecs = {
         },
       ],
     },
+    {
+      id: "bare-url-cjk-punctuation-boundary",
+      label: "bare URL stops before CJK punctuation and keeps following text plain",
+      seed: "裸 URL https://spec.commonmark.org/0.31.2/，以及邮箱 <hello@example.com>。",
+      events: [],
+      checkpoints: [
+        {
+          at: 0,
+          expect: "裸 URL <a:https://spec.commonmark.org/0.31.2/>https://spec.commonmark.org/0.31.2/</a>，以及邮箱 <a:mailto:hello@example.com>hello@example.com</a>。|",
+        },
+      ],
+    },
     {
       id: "non-url-not-touched",
       label: "<not a url!> — no scheme/email or HTML shape, stays plain text",

src/features/autolink.ts

@@ -21,7 +21,8 @@ const URI_PART = "[a-zA-Z][a-zA-Z0-9+.-]*:[^\\s<>]+";
 const EMAIL_PART =
   "[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}";
 const AUTOLINK_RE = new RegExp(`<((?:${URI_PART})|(?:${EMAIL_PART}))>`, "g");
-const BARE_URL_RE = /\bhttps?:\/\/[^\s<>\]]+/g;
+const BARE_URL_RE =
+  /\bhttps?:\/\/[^\s<>\]\u3000-\u303F\uFF01-\uFF0F\uFF1A-\uFF20\uFF3B-\uFF40\uFF5B-\uFF65]+/g;
 
 function rangeConsumed(consumed: Uint8Array, from: number, to: number): boolean {
   for (let i = from; i < to; i++) if (consumed[i]) return true;

src/features/html-block.ts

@@ -49,7 +49,7 @@ class HtmlBlockView implements NodeView {
     this.preview.addEventListener("click", this.onPreviewClick);
     this.source.addEventListener("mousedown", this.onSourceMouseDown);
     document.addEventListener("mousedown", this.onDocumentMouseDown);
-    this.dom.append(this.preview, this.source);
+    this.dom.append(this.source, this.preview);
     this.sourceEditor = createEmbeddedCodeMirrorEditor({
       parent: this.source,
       doc: rawHtml(node),

src/styles/widgets.css

@@ -277,7 +277,7 @@
   outline: none;
 }
 .ProseMirror html-block .html-block-source[hidden] { display: none; }
-.ProseMirror html-block.html-source-open .html-block-preview { display: none; }
+.ProseMirror html-block.html-source-open .html-block-source { margin-bottom: 10px; }
 .ProseMirror html-block .html-comment-source {
   color: #999;
   font-style: italic;

tests/html-block.test.ts

@@ -57,6 +57,12 @@ describe("CommonMark HTML blocks", () => {
     expect(widgetsCss).toMatch(
       /\.ProseMirror html-block \.html-block-preview \{\s+display: flow-root;\s+margin: 0;\s+padding: 0;\s+\}/,
     );
+    expect(widgetsCss).toContain(
+      ".ProseMirror html-block.html-source-open .html-block-source { margin-bottom: 10px; }",
+    );
+    expect(widgetsCss).not.toContain(
+      ".ProseMirror html-block.html-source-open .html-block-preview { display: none; }",
+    );
     expect(widgetsCss).not.toContain("min-height: 4.5em;");
     expect(widgetsCss).not.toContain("margin: 8px 0 0;");
     expect(widgetsCss).not.toContain("padding: 10px 12px;");
@@ -144,9 +150,11 @@ describe("CommonMark HTML blocks", () => {
 
       expect(block.classList.contains("html-source-open")).toBe(true);
       expect(source?.hidden).toBe(false);
+      expect(source?.nextElementSibling).toBe(block.querySelector(".html-block-preview"));
       expect(source?.querySelector(".cm-editor.typora-web-html-source")).not.toBeNull();
       expect(source?.textContent).toContain("<details>");
       expect(source?.querySelector("details")).toBeNull();
+      expect(block.querySelector(".html-block-preview strong")?.textContent).toBe("safe");
     } finally {
       cleanup();
     }
@@ -223,4 +231,43 @@ describe("CommonMark HTML blocks", () => {
       cleanup();
     }
   });
+
+  test("HTML image source edits keep a live preview with updated dimensions", () => {
+    const { block, view, cleanup } = mountHtmlBlock(
+      '<img src="favicon.svg" alt="Typora-Web logo" width="180" />',
+    );
+
+    try {
+      const preview = block.querySelector<HTMLElement>(".html-block-preview");
+      preview?.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, cancelable: true }));
+
+      const source = block.querySelector<HTMLElement>("div.html-block-source");
+      expect(source?.hidden).toBe(false);
+      expect(source?.nextElementSibling).toBe(preview);
+      expect(preview?.querySelector("img")?.getAttribute("width")).toBe("180");
+
+      const editorView = htmlSourceEditor(block);
+      const current = editorView.state.doc.toString();
+      editorView.dispatch({
+        changes: {
+          from: 0,
+          to: current.length,
+          insert: '<img src="favicon.svg" alt="Typora-Web logo" width="96" />',
+        },
+      });
+
+      const image = preview?.querySelector("img");
+      expect(image?.getAttribute("src")).toBe("favicon.svg");
+      expect(image?.getAttribute("alt")).toBe("Typora-Web logo");
+      expect(image?.getAttribute("width")).toBe("96");
+      expect(block.dataset.raw).toBe(
+        '<img src="favicon.svg" alt="Typora-Web logo" width="96" />',
+      );
+      expect(serialize(view.state.doc)).toBe(
+        '<img src="favicon.svg" alt="Typora-Web logo" width="96" />',
+      );
+    } finally {
+      cleanup();
+    }
+  });
 });