@draftably/editor 0.3.0 → 0.5.0

package/dist/element.js

@@ -1,9 +1,106 @@
-import { mountEditor as s } from "./index.js";
-typeof customElements < "u" && !customElements.get("draft-editor") && customElements.define(
-  "draft-editor",
+import { mountEditor as E } from "./index.js";
+const A = [
+  "link",
+  "contextmenu"
+], k = "0.5.0", h = k;
+function b(t, e) {
+  if (t === e || typeof t == "function" && typeof e == "function") return !0;
+  if (!t || !e || typeof t != "object" || typeof e != "object" || Array.isArray(t) !== Array.isArray(e)) return !1;
+  const s = Object.keys(t).filter((n) => t[n] !== void 0), r = Object.keys(e).filter((n) => e[n] !== void 0);
+  return s.length === r.length && s.every((n) => b(t[n], e[n]));
+}
+function y(t, e) {
+  if (!Object.hasOwn(t, e)) return;
+  const s = t[e];
+  return delete t[e], s;
+}
+function v(t) {
+  const e = customElements.get(t)?.runtimeVersion;
+  e !== h && console.warn(
+    `<${t}> is already defined by @draftably runtime ${e ?? "unknown"}; this copy (${h}) is not used. Install one copy of the runtime.`
+  );
+}
+function c(t, e, s) {
+  return t.dispatchEvent(
+    new CustomEvent(`draft-${e}`, {
+      detail: s,
+      bubbles: !0,
+      cancelable: A.includes(e)
+    })
+  );
+}
+function w(t, e, s) {
+  return {
+    status: "error",
+    revision: t,
+    error: {
+      ok: !1,
+      reason: "environment",
+      diagnostics: [
+        {
+          code: "DRAFT_ELEMENT_MOUNT",
+          severity: "error",
+          message: e instanceof Error ? e.message : s,
+          itemIds: []
+        }
+      ]
+    }
+  };
+}
+function M(t, e, s) {
+  if (!("preventDefault" in s)) return void c(t, e, s);
+  const { preventDefault: r, ...n } = s;
+  c(t, e, n) || r();
+}
+function S(t, e, s) {
+  const r = t.ownerDocument, n = typeof HTMLSlotElement < "u" && "assign" in HTMLSlotElement.prototype, f = /* @__PURE__ */ new WeakMap();
+  let a = /* @__PURE__ */ new Map(), m = [];
+  const g = () => {
+    if (n)
+      for (const i of m) {
+        let o = f.get(i.el);
+        o || (o = r.createElement("slot"), i.el.append(o), f.set(i.el, o)), o.assign(...a.get(i.slot) ?? []);
+      }
+  }, u = () => {
+    const i = [...a.keys()].join(`
+`);
+    a = /* @__PURE__ */ new Map();
+    for (const o of t.childNodes) {
+      const l = o instanceof Element ? o.getAttribute("data-draft-slot") : null;
+      l ? a.set(l, [...a.get(l) ?? [], o]) : o instanceof Element || o instanceof Text && o.data.trim();
+    }
+    [...a.keys()].join(`
+`) !== i && s([...a.keys()]), g();
+  }, p = new MutationObserver(u), _ = new MutationObserver((i) => {
+    i.some((o) => o.target.parentNode === t) && u();
+  });
+  return {
+    start() {
+      p.observe(t, { childList: !0 }), _.observe(t, {
+        subtree: !0,
+        attributes: !0,
+        attributeFilter: ["data-draft-slot"]
+      }), a = /* @__PURE__ */ new Map(), u();
+    },
+    stop() {
+      p.disconnect(), _.disconnect();
+    },
+    /** The handle's targets changed: put each slot's children in its target. */
+    setAnchors(i) {
+      m = i, g();
+    },
+    names: () => [...a.keys()]
+  };
+}
+const d = "draft-editor";
+typeof customElements < "u" && (customElements.get(d) ? v(d) : customElements.define(
+  d,
   class extends HTMLElement {
+    static runtimeVersion = h;
     static observedAttributes = ["source"];
     editor;
+    _options = {};
+    _scheduled = !1;
     /** The text last sent to or received from the editor, so an echo is not redrawn. */
     last = "";
     get source() {
@@ -12,25 +109,93 @@ typeof customElements < "u" && !customElements.get("draft-editor") && customElem
     set source(t) {
       this.setAttribute("source", String(t ?? ""));
     }
+    get options() {
+      return this._options;
+    }
+    set options(t) {
+      const e = this._options;
+      this._options = t ?? {}, this.editor && !b(e.storageKey, this._options.storageKey) && (this._destroy(), this._schedule());
+    }
     constructor() {
-      if (super(), Object.hasOwn(this, "source")) {
-        const t = this.source;
-        delete this.source, t !== void 0 && this.setAttribute("source", String(t));
-      }
+      super();
+      const t = y(this, "source"), e = y(this, "options");
+      e && (this._options = e), t !== void 0 && this.setAttribute("source", String(t));
+      const s = this.attachShadow({ mode: "open", slotAssignment: "manual" });
+      this._root = this.ownerDocument.createElement("div"), this._root.style.cssText = "display:flex;flex-direction:column;height:100%;min-height:0", s.append(this._root), this._slotting = S(
+        this,
+        null,
+        (r) => this.editor?.anchor(r)
+      );
     }
+    _root;
+    _slotting;
     connectedCallback() {
-      this.last = this.getAttribute("source") ?? "", this.editor = s(this, {
-        source: this.last,
-        onChange: (t) => {
-          this.last = t, this.dispatchEvent(new CustomEvent("draft-change", { detail: t, bubbles: !0 }));
-        }
-      });
+      this._slotting.start(), this._schedule();
     }
-    attributeChangedCallback(t, i, e) {
-      !this.editor || e === null || e === this.last || (this.last = e, this.editor.update(e));
+    /** Mount once, in a microtask, so every property a framework sets in this tick lands first. */
+    _schedule() {
+      this._scheduled || (this._scheduled = !0, queueMicrotask(() => {
+        this._scheduled = !1, this.isConnected && !this.editor && this._mount();
+      }));
     }
-    disconnectedCallback() {
+    _setStatus(t) {
+      this.setAttribute("status", t);
+    }
+    _mount() {
+      this.last = this.getAttribute("source") ?? "", this._setStatus("loading");
+      const t = () => this._options;
+      let e;
+      try {
+        e = E(this._root, {
+          source: this.last,
+          onChange: (s) => {
+            this.last = s, c(this, "change", { source: s });
+          },
+          get storageKey() {
+            return t().storageKey;
+          },
+          get openLink() {
+            return t().openLink;
+          },
+          get confirm() {
+            return t().confirm;
+          },
+          get onInteract() {
+            return t().onInteract;
+          },
+          get detail() {
+            return t().detail;
+          }
+        });
+      } catch (s) {
+        const r = w(1, s, "The diagram editor could not start."), n = r.error.diagnostics[0].message;
+        this._setStatus("error"), this.setAttribute("data-error", n), c(this, "update", r);
+        return;
+      }
+      this.editor = e;
+      for (const s of [
+        "update",
+        "anchors",
+        "diagnostics",
+        "camera",
+        "select",
+        "link",
+        "contextmenu"
+      ])
+        e.on(s, (r) => M(this, s, r));
+      e.on("anchors", ({ anchors: s }) => this._slotting.setAnchors(s)), e.anchor(this._slotting.names()), e.ready.then(
+        (s) => this.editor === e && this._setStatus(s.status === "error" ? "error" : "ready"),
+        () => this.editor === e && this._setStatus("error")
+      );
+    }
+    attributeChangedCallback(t, e, s) {
+      !this.editor || s === null || s === this.last || (this.last = s, this.editor.update(s));
+    }
+    _destroy() {
       this.editor?.destroy(), this.editor = void 0;
     }
+    disconnectedCallback() {
+      this._slotting.stop(), this._destroy(), this.removeAttribute("status"), this.removeAttribute("data-error");
+    }
   }
-);
+));