@semigarden/synthetic-md 0.0.16 → 0.0.17

package/dist/index.cjs.js

@@ -4811,12 +4811,12 @@ var Focus = class {
     if (!blockElement) return;
     blockElement.classList.add("focused");
     const markerElements = blockElement.querySelectorAll(".marker");
-    for (const markerElement of markerElements) {
+    for (const markerElement of Array.from(markerElements)) {
       markerElement.classList.add("focused");
     }
     if (blockElement.classList.contains("codeBlock")) {
       const inlineElements = blockElement.querySelectorAll(".inline");
-      for (const inlineElement of inlineElements) {
+      for (const inlineElement of Array.from(inlineElements)) {
         inlineElement.classList.add("focused");
       }
     }
@@ -4833,12 +4833,12 @@ var Focus = class {
     if (!blockElement) return;
     blockElement.classList.remove("focused");
     const markerElements = blockElement.querySelectorAll(".marker");
-    for (const markerElement of markerElements) {
+    for (const markerElement of Array.from(markerElements)) {
       markerElement.classList.remove("focused");
     }
     if (blockElement.classList.contains("codeBlock")) {
       const inlineElements = blockElement.querySelectorAll(".inline");
-      for (const inlineElement of inlineElements) {
+      for (const inlineElement of Array.from(inlineElements)) {
         inlineElement.classList.remove("focused");
       }
     }
@@ -4863,6 +4863,30 @@ var Focus = class {
     if (!inlineElement) return;
     inlineElement.classList.remove("focused");
   }
+  autoFocus() {
+    const firstBlock = this.rootElement.querySelector(".block");
+    if (!firstBlock) {
+      this.rootElement.focus();
+      return;
+    }
+    const inlineEl = firstBlock.querySelector("[data-inline-id]");
+    if (!inlineEl) {
+      this.rootElement.focus();
+      return;
+    }
+    const target = inlineEl.querySelector(".symbolic") ?? inlineEl;
+    if (target.childNodes.length === 0) {
+      target.appendChild(document.createTextNode("\u200B"));
+    }
+    this.rootElement.focus();
+    const selection = target.ownerDocument.getSelection();
+    if (!selection) return;
+    const range = target.ownerDocument.createRange();
+    range.selectNodeContents(target);
+    range.collapse(true);
+    selection.removeAllRanges();
+    selection.addRange(range);
+  }
 };
 var focus_default = Focus;
 
@@ -5096,6 +5120,9 @@ var Select = class {
     this.rootElement.removeEventListener("focusin", this.onRootFocusIn);
     this.rootElement.removeEventListener("focusout", this.onRootFocusOut);
   }
+  autoFocus() {
+    this.focus.autoFocus();
+  }
   resolveInlineContext() {
     return resolveInlineContext(this.ast, this.caret, this.rootElement);
   }
@@ -5650,6 +5677,7 @@ function renderInline(inline) {
     inlineElement.href = inline.url.replace(/[\u200B\u200C\u200D\uFEFF]/g, "") || "";
     inlineElement.title = inline.title ? `${inline.title}
 Ctrl + Click to follow link` : "Ctrl + Click to follow link";
+    inlineElement.classList.add("link");
   }
   if (inline.type === "autolink") {
     ;
@@ -6459,9 +6487,13 @@ var cssText = `@charset "UTF-8";
   --color-text: #d4cfee;
   --color-muted: #8b85a3;
   --color-accent: #4a9eff;
+  --color-accent-hover: #74b5ff;
   --color-code-bg: #1a1625;
   --color-blockquote-border: #4a9eff;
   --color-selection-bg: #2a2340;
+  --color-divider: rgba(255,255,255,0.18);
+  --color-caret: #ffffff;
+  --color-focus-bg: rgba(74,158,255,0.12);
   position: relative;
   width: 100%;
   height: 100%;
@@ -6737,14 +6769,19 @@ var cssText = `@charset "UTF-8";
 }
 
 .link, .autolink {
+  color: var(--color-accent);
+  text-decoration: inherit;
   cursor: pointer;
 }
+.link:hover, .autolink:hover {
+  color: var(--color-accent-hover);
+}
 
 .caret {
   position: absolute;
   width: 1px;
   height: 1em;
-  background-color: #fff;
+  background-color: var(--color-caret);
   animation: blink 1s step-end infinite;
   pointer-events: none;
   z-index: 10;
@@ -6756,7 +6793,7 @@ var cssText = `@charset "UTF-8";
   word-break: break-word;
 }
 .inline.focus {
-  background: rgba(0, 120, 255, 0.1);
+  background: var(--color-focus-bg);
   border-radius: 3px;
   padding: 0 2px;
   min-height: 1.2em;
@@ -6834,10 +6871,12 @@ var Element = class extends HTMLElement {
     this.intent = null;
     this.styled = false;
     this.hasAcceptedExternalValue = false;
+    this.autofocus = false;
     this.shadowRootElement = this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
     const attrValue = this.getAttribute("value") ?? "";
+    this.autofocus = this.hasAttribute("autofocus");
     this.ast.setText(attrValue);
     this.addStyles();
     this.addDOM();
@@ -6851,6 +6890,7 @@ var Element = class extends HTMLElement {
     this.interaction = new interaction_default(this.rootElement, this.select, this.editor, this.input, this.intent);
     this.interaction.attach();
     this.renderDOM();
+    this.autoFocus();
   }
   disconnectedCallback() {
     this.interaction?.detach();
@@ -6862,6 +6902,7 @@ var Element = class extends HTMLElement {
     if (!this.hasAcceptedExternalValue && value !== "" || value !== "" && value !== this.ast.text) {
       this.ast.setText(value);
       this.renderDOM();
+      this.autoFocus();
       this.hasAcceptedExternalValue = true;
     }
   }
@@ -6894,6 +6935,9 @@ var Element = class extends HTMLElement {
       composed: true
     }));
   }
+  autoFocus() {
+    if (this.autofocus && this.rootElement && this.select) this.select.autoFocus();
+  }
 };
 var element_default = Element;
 

package/dist/index.css

@@ -11,9 +11,13 @@
   --color-text: #d4cfee;
   --color-muted: #8b85a3;
   --color-accent: #4a9eff;
+  --color-accent-hover: #74b5ff;
   --color-code-bg: #1a1625;
   --color-blockquote-border: #4a9eff;
   --color-selection-bg: #2a2340;
+  --color-divider: rgba(255,255,255,0.18);
+  --color-caret: #ffffff;
+  --color-focus-bg: rgba(74,158,255,0.12);
   position: relative;
   width: 100%;
   height: 100%;
@@ -289,14 +293,19 @@
 }
 
 .link, .autolink {
+  color: var(--color-accent);
+  text-decoration: inherit;
   cursor: pointer;
 }
+.link:hover, .autolink:hover {
+  color: var(--color-accent-hover);
+}
 
 .caret {
   position: absolute;
   width: 1px;
   height: 1em;
-  background-color: #fff;
+  background-color: var(--color-caret);
   animation: blink 1s step-end infinite;
   pointer-events: none;
   z-index: 10;
@@ -308,7 +317,7 @@
   word-break: break-word;
 }
 .inline.focus {
-  background: rgba(0, 120, 255, 0.1);
+  background: var(--color-focus-bg);
   border-radius: 3px;
   padding: 0 2px;
   min-height: 1.2em;

package/dist/index.d.cts

@@ -11,6 +11,7 @@ declare class Element extends HTMLElement {
     private intent;
     private styled;
     private hasAcceptedExternalValue;
+    autofocus: boolean;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -20,6 +21,7 @@ declare class Element extends HTMLElement {
     private addStyles;
     private addDOM;
     private emitChange;
+    private autoFocus;
 }
 
 declare function defineElement(): void;

package/dist/index.d.ts

@@ -11,6 +11,7 @@ declare class Element extends HTMLElement {
     private intent;
     private styled;
     private hasAcceptedExternalValue;
+    autofocus: boolean;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -20,6 +21,7 @@ declare class Element extends HTMLElement {
     private addStyles;
     private addDOM;
     private emitChange;
+    private autoFocus;
 }
 
 declare function defineElement(): void;

package/dist/index.esm.js

@@ -4783,12 +4783,12 @@ var Focus = class {
     if (!blockElement) return;
     blockElement.classList.add("focused");
     const markerElements = blockElement.querySelectorAll(".marker");
-    for (const markerElement of markerElements) {
+    for (const markerElement of Array.from(markerElements)) {
       markerElement.classList.add("focused");
     }
     if (blockElement.classList.contains("codeBlock")) {
       const inlineElements = blockElement.querySelectorAll(".inline");
-      for (const inlineElement of inlineElements) {
+      for (const inlineElement of Array.from(inlineElements)) {
         inlineElement.classList.add("focused");
       }
     }
@@ -4805,12 +4805,12 @@ var Focus = class {
     if (!blockElement) return;
     blockElement.classList.remove("focused");
     const markerElements = blockElement.querySelectorAll(".marker");
-    for (const markerElement of markerElements) {
+    for (const markerElement of Array.from(markerElements)) {
       markerElement.classList.remove("focused");
     }
     if (blockElement.classList.contains("codeBlock")) {
       const inlineElements = blockElement.querySelectorAll(".inline");
-      for (const inlineElement of inlineElements) {
+      for (const inlineElement of Array.from(inlineElements)) {
         inlineElement.classList.remove("focused");
       }
     }
@@ -4835,6 +4835,30 @@ var Focus = class {
     if (!inlineElement) return;
     inlineElement.classList.remove("focused");
   }
+  autoFocus() {
+    const firstBlock = this.rootElement.querySelector(".block");
+    if (!firstBlock) {
+      this.rootElement.focus();
+      return;
+    }
+    const inlineEl = firstBlock.querySelector("[data-inline-id]");
+    if (!inlineEl) {
+      this.rootElement.focus();
+      return;
+    }
+    const target = inlineEl.querySelector(".symbolic") ?? inlineEl;
+    if (target.childNodes.length === 0) {
+      target.appendChild(document.createTextNode("\u200B"));
+    }
+    this.rootElement.focus();
+    const selection = target.ownerDocument.getSelection();
+    if (!selection) return;
+    const range = target.ownerDocument.createRange();
+    range.selectNodeContents(target);
+    range.collapse(true);
+    selection.removeAllRanges();
+    selection.addRange(range);
+  }
 };
 var focus_default = Focus;
 
@@ -5068,6 +5092,9 @@ var Select = class {
     this.rootElement.removeEventListener("focusin", this.onRootFocusIn);
     this.rootElement.removeEventListener("focusout", this.onRootFocusOut);
   }
+  autoFocus() {
+    this.focus.autoFocus();
+  }
   resolveInlineContext() {
     return resolveInlineContext(this.ast, this.caret, this.rootElement);
   }
@@ -5622,6 +5649,7 @@ function renderInline(inline) {
     inlineElement.href = inline.url.replace(/[\u200B\u200C\u200D\uFEFF]/g, "") || "";
     inlineElement.title = inline.title ? `${inline.title}
 Ctrl + Click to follow link` : "Ctrl + Click to follow link";
+    inlineElement.classList.add("link");
   }
   if (inline.type === "autolink") {
     ;
@@ -6431,9 +6459,13 @@ var cssText = `@charset "UTF-8";
   --color-text: #d4cfee;
   --color-muted: #8b85a3;
   --color-accent: #4a9eff;
+  --color-accent-hover: #74b5ff;
   --color-code-bg: #1a1625;
   --color-blockquote-border: #4a9eff;
   --color-selection-bg: #2a2340;
+  --color-divider: rgba(255,255,255,0.18);
+  --color-caret: #ffffff;
+  --color-focus-bg: rgba(74,158,255,0.12);
   position: relative;
   width: 100%;
   height: 100%;
@@ -6709,14 +6741,19 @@ var cssText = `@charset "UTF-8";
 }
 
 .link, .autolink {
+  color: var(--color-accent);
+  text-decoration: inherit;
   cursor: pointer;
 }
+.link:hover, .autolink:hover {
+  color: var(--color-accent-hover);
+}
 
 .caret {
   position: absolute;
   width: 1px;
   height: 1em;
-  background-color: #fff;
+  background-color: var(--color-caret);
   animation: blink 1s step-end infinite;
   pointer-events: none;
   z-index: 10;
@@ -6728,7 +6765,7 @@ var cssText = `@charset "UTF-8";
   word-break: break-word;
 }
 .inline.focus {
-  background: rgba(0, 120, 255, 0.1);
+  background: var(--color-focus-bg);
   border-radius: 3px;
   padding: 0 2px;
   min-height: 1.2em;
@@ -6806,10 +6843,12 @@ var Element = class extends HTMLElement {
     this.intent = null;
     this.styled = false;
     this.hasAcceptedExternalValue = false;
+    this.autofocus = false;
     this.shadowRootElement = this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
     const attrValue = this.getAttribute("value") ?? "";
+    this.autofocus = this.hasAttribute("autofocus");
     this.ast.setText(attrValue);
     this.addStyles();
     this.addDOM();
@@ -6823,6 +6862,7 @@ var Element = class extends HTMLElement {
     this.interaction = new interaction_default(this.rootElement, this.select, this.editor, this.input, this.intent);
     this.interaction.attach();
     this.renderDOM();
+    this.autoFocus();
   }
   disconnectedCallback() {
     this.interaction?.detach();
@@ -6834,6 +6874,7 @@ var Element = class extends HTMLElement {
     if (!this.hasAcceptedExternalValue && value !== "" || value !== "" && value !== this.ast.text) {
       this.ast.setText(value);
       this.renderDOM();
+      this.autoFocus();
       this.hasAcceptedExternalValue = true;
     }
   }
@@ -6866,6 +6907,9 @@ var Element = class extends HTMLElement {
       composed: true
     }));
   }
+  autoFocus() {
+    if (this.autofocus && this.rootElement && this.select) this.select.autoFocus();
+  }
 };
 var element_default = Element;
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@semigarden/synthetic-md",
-    "version": "0.0.16",
+    "version": "0.0.17",
     "description": "A UI primitive for unified Markdown editing and rendering",
     "license": "MIT",
     "author": {
@@ -45,6 +45,7 @@
         "dev": "concurrently -n TSUP,CSS,CSS-TS,COPY \"tsup src/index.ts --watch --clean=false\" \"npm:watch:css\" \"npm:watch:css-ts\" \"npm:watch:distcss\"",
         "lint": "eslint .",
         "test": "vitest",
+        "typecheck": "tsc -p tsconfig.json --noEmit",
         "prepublishOnly": "npm run build"
     },
     "devDependencies": {