@templatical/editor 0.0.1

package/dist/index-DeUeHy6g.js

@@ -0,0 +1,422 @@
+import { defineComponent as N, computed as T, ref as m, openBlock as d, createBlock as V, unref as R, normalizeStyle as z, normalizeClass as H, withCtx as E, withDirectives as C, createElementBlock as y, vModelText as L, withModifiers as x, toDisplayString as M, createElementVNode as g, createCommentVNode as I, nextTick as B } from "vue";
+import { w as S } from "./index-D-iD-7lO.js";
+import { isLogicMergeTagValue as w, getLogicMergeTagKeyword as h, SYNTAX_PRESETS as A, getMergeTagLabel as k } from "@templatical/types";
+import { NodeViewWrapper as K, VueNodeViewRenderer as $ } from "./index-D-ygXbc8.js";
+import { N as D, v as F, I as P, m as W } from "./index-ZQzHBwkr.js";
+const j = ["data-tooltip"], q = /* @__PURE__ */ N({
+  __name: "LogicMergeTagNodeView",
+  props: {
+    node: {},
+    editor: {},
+    getPos: { type: Function },
+    deleteNode: { type: Function },
+    updateAttributes: { type: Function }
+  },
+  setup(t) {
+    const n = t, { syntax: e } = S(), s = T(
+      () => w(n.node.attrs.value, e)
+    ), r = T(
+      () => h(n.node.attrs.value, e)
+    ), o = m(!1), l = m(""), v = m(null);
+    let f = !1;
+    function b() {
+      l.value = n.node.attrs.value, f = !1, o.value = !0, B(() => {
+        var a, u;
+        (a = v.value) == null || a.focus(), (u = v.value) == null || u.select();
+      });
+    }
+    function i() {
+      if (f)
+        return;
+      f = !0;
+      const a = l.value.trim();
+      if (!a) {
+        o.value = !1;
+        return;
+      }
+      a !== n.node.attrs.value && n.updateAttributes({
+        value: a,
+        keyword: w(a, e) ? h(a, e) : ""
+      }), o.value = !1;
+    }
+    function p(a) {
+      a.key === "Enter" ? (a.preventDefault(), i()) : a.key === "Escape" && (o.value = !1);
+    }
+    return (a, u) => (d(), V(R(K), {
+      as: "span",
+      class: H(
+        s.value ? "tpl-logic-merge-tag-node tpl:group tpl:mx-0.5 tpl:inline-flex tpl:items-center tpl:gap-1 tpl:rounded tpl:px-1.5 tpl:py-0.5 tpl:text-[0.8em] tpl:font-bold tpl:tracking-wide tpl:uppercase tpl:select-none" : ""
+      ),
+      style: z(
+        s.value ? "background-color: transparent; border: 1.5px solid color-mix(in srgb, var(--tpl-primary) 50%, transparent); color: var(--tpl-primary);" : ""
+      ),
+      contenteditable: "false"
+    }, {
+      default: E(() => [
+        o.value ? C((d(), y("input", {
+          key: 0,
+          ref_key: "inputRef",
+          ref: v,
+          "onUpdate:modelValue": u[0] || (u[0] = (c) => l.value = c),
+          type: "text",
+          class: "tpl:w-40 tpl:rounded tpl:border-none tpl:bg-transparent tpl:px-0.5 tpl:py-0 tpl:text-[1em] tpl:font-medium tpl:normal-case tpl:outline-none",
+          style: { color: "var(--tpl-primary)" },
+          onBlur: i,
+          onKeydown: p
+        }, null, 544)), [
+          [L, l.value]
+        ]) : s.value ? (d(), y("span", {
+          key: 1,
+          class: "tpl-tooltip tpl:cursor-pointer",
+          "data-tooltip": t.node.attrs.value,
+          onClick: x(b, ["stop"])
+        }, M(r.value), 9, j)) : (d(), y("span", {
+          key: 2,
+          onClick: x(b, ["stop"])
+        }, M(t.node.attrs.value), 1)),
+        s.value ? (d(), y("button", {
+          key: 3,
+          type: "button",
+          class: "tpl:flex tpl:size-4 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-full tpl:border-none tpl:bg-transparent tpl:p-0 tpl:opacity-60 tpl:transition-all hover:tpl:opacity-100",
+          style: { color: "var(--tpl-primary)" },
+          contenteditable: "false",
+          onClick: u[1] || (u[1] = x(
+            //@ts-ignore
+            (...c) => t.deleteNode && t.deleteNode(...c),
+            ["stop", "prevent"]
+          )),
+          onMouseenter: u[2] || (u[2] = (c) => c.target.style.color = "var(--tpl-danger)"),
+          onMouseleave: u[3] || (u[3] = (c) => c.target.style.color = "var(--tpl-primary)")
+        }, [...u[4] || (u[4] = [
+          g("svg", {
+            width: "10",
+            height: "10",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "3"
+          }, [
+            g("line", {
+              x1: "18",
+              y1: "6",
+              x2: "6",
+              y2: "18"
+            }),
+            g("line", {
+              x1: "6",
+              y1: "6",
+              x2: "18",
+              y2: "18"
+            })
+          ], -1)
+        ])], 32)) : I("", !0)
+      ]),
+      _: 1
+    }, 8, ["class", "style"]));
+  }
+}), Z = D.create({
+  name: "logicMergeTagNode",
+  group: "inline",
+  inline: !0,
+  atom: !0,
+  addOptions() {
+    return {
+      syntax: A.liquid
+    };
+  },
+  addAttributes() {
+    return {
+      value: {
+        default: ""
+      },
+      keyword: {
+        default: ""
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "span[data-logic-merge-tag]"
+      }
+    ];
+  },
+  renderHTML({ node: t, HTMLAttributes: n }) {
+    if (!w(t.attrs.value, this.options.syntax))
+      return ["span", {}, t.attrs.value];
+    const e = h(
+      t.attrs.value,
+      this.options.syntax
+    );
+    return [
+      "span",
+      W(n, {
+        "data-logic-merge-tag": t.attrs.value,
+        "data-keyword": e
+      }),
+      e
+    ];
+  },
+  addNodeView() {
+    return $(q);
+  },
+  addKeyboardShortcuts() {
+    const t = () => {
+      const { selection: n } = this.editor.state, { $from: e, $to: s } = n;
+      let r = !1;
+      if (this.editor.state.doc.nodesBetween(e.pos, s.pos, (l) => {
+        if (l.type.name === this.name)
+          return r = !0, !1;
+      }), r)
+        return !0;
+      if (e.pos > 0) {
+        const l = e.nodeBefore;
+        if ((l == null ? void 0 : l.type.name) === this.name)
+          return !0;
+      }
+      const o = e.nodeAfter;
+      return (o == null ? void 0 : o.type.name) === this.name;
+    };
+    return {
+      Backspace: () => t(),
+      Delete: () => t()
+    };
+  },
+  addInputRules() {
+    const t = new RegExp(this.options.syntax.logic.source + "$", "");
+    return [
+      new P({
+        find: t,
+        handler: ({ state: n, range: e, match: s }) => {
+          const r = s[0];
+          if (!w(r, this.options.syntax))
+            return;
+          const o = h(
+            r,
+            this.options.syntax
+          ), l = this.type.create({
+            value: r,
+            keyword: o
+          });
+          n.tr.replaceWith(e.from, e.to, l);
+        }
+      })
+    ];
+  },
+  addPasteRules() {
+    const t = new RegExp(this.options.syntax.logic.source, "g");
+    return [
+      new F({
+        find: t,
+        handler: ({ state: n, range: e, match: s }) => {
+          const r = s[0];
+          if (!w(r, this.options.syntax))
+            return;
+          const o = h(
+            r,
+            this.options.syntax
+          ), l = this.type.create({
+            value: r,
+            keyword: o
+          });
+          n.tr.replaceWith(e.from, e.to, l);
+        }
+      })
+    ];
+  }
+}), O = ["data-tooltip"], U = /* @__PURE__ */ N({
+  __name: "MergeTagNodeView",
+  props: {
+    node: {},
+    deleteNode: { type: Function },
+    updateAttributes: { type: Function }
+  },
+  setup(t) {
+    const n = t, { getMergeTagLabel: e } = S(), s = T(() => e(n.node.attrs.value)), r = m(!1), o = m(""), l = m(null);
+    function v() {
+      o.value = n.node.attrs.value, r.value = !0, B(() => {
+        var i, p;
+        (i = l.value) == null || i.focus(), (p = l.value) == null || p.select();
+      });
+    }
+    function f() {
+      const i = o.value.trim();
+      i && i !== n.node.attrs.value && n.updateAttributes({
+        value: i,
+        label: e(i)
+      }), r.value = !1;
+    }
+    function b(i) {
+      i.key === "Enter" ? (i.preventDefault(), f()) : i.key === "Escape" && (r.value = !1);
+    }
+    return (i, p) => (d(), V(R(K), {
+      as: "span",
+      class: "tpl-merge-tag-node tpl:group tpl:mx-0.5 tpl:inline-flex tpl:items-center tpl:gap-1 tpl:rounded tpl:px-1.5 tpl:py-0.5 tpl:text-[0.9em] tpl:font-medium tpl:select-none",
+      style: { "background-color": "color-mix(in srgb, var(--tpl-primary) 20%, transparent)", color: "var(--tpl-primary)" },
+      contenteditable: "false"
+    }, {
+      default: E(() => [
+        r.value ? C((d(), y("input", {
+          key: 0,
+          ref_key: "inputRef",
+          ref: l,
+          "onUpdate:modelValue": p[0] || (p[0] = (a) => o.value = a),
+          type: "text",
+          class: "tpl:w-32 tpl:rounded tpl:border-none tpl:bg-transparent tpl:px-0.5 tpl:py-0 tpl:text-[1em] tpl:font-medium tpl:outline-none",
+          style: { color: "var(--tpl-primary)" },
+          onBlur: f,
+          onKeydown: b
+        }, null, 544)), [
+          [L, o.value]
+        ]) : (d(), y("span", {
+          key: 1,
+          class: "tpl-tooltip tpl:cursor-pointer",
+          "data-tooltip": t.node.attrs.value,
+          onClick: x(v, ["stop"])
+        }, M(s.value), 9, O)),
+        g("button", {
+          type: "button",
+          class: "tpl:flex tpl:size-4 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-full tpl:border-none tpl:bg-transparent tpl:p-0 tpl:opacity-60 tpl:transition-all hover:tpl:opacity-100",
+          style: { color: "var(--tpl-primary)" },
+          contenteditable: "false",
+          onClick: p[1] || (p[1] = x(
+            //@ts-ignore
+            (...a) => t.deleteNode && t.deleteNode(...a),
+            ["stop", "prevent"]
+          )),
+          onMouseenter: p[2] || (p[2] = (a) => a.target.style.color = "var(--tpl-danger)"),
+          onMouseleave: p[3] || (p[3] = (a) => a.target.style.color = "var(--tpl-primary)")
+        }, [...p[4] || (p[4] = [
+          g("svg", {
+            width: "10",
+            height: "10",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "3"
+          }, [
+            g("line", {
+              x1: "18",
+              y1: "6",
+              x2: "6",
+              y2: "18"
+            }),
+            g("line", {
+              x1: "6",
+              y1: "6",
+              x2: "18",
+              y2: "18"
+            })
+          ], -1)
+        ])], 32)
+      ]),
+      _: 1
+    }));
+  }
+}), _ = D.create({
+  name: "mergeTagNode",
+  group: "inline",
+  inline: !0,
+  atom: !0,
+  addOptions() {
+    return {
+      mergeTags: [],
+      syntax: A.liquid
+    };
+  },
+  addAttributes() {
+    return {
+      label: {
+        default: ""
+      },
+      value: {
+        default: ""
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "span[data-merge-tag]"
+      }
+    ];
+  },
+  renderHTML({ node: t, HTMLAttributes: n }) {
+    const e = k(t.attrs.value, this.options.mergeTags);
+    return [
+      "span",
+      W(n, {
+        "data-merge-tag": t.attrs.value,
+        "data-label": e
+      }),
+      e
+    ];
+  },
+  addNodeView() {
+    return $(U);
+  },
+  addCommands() {
+    return {
+      insertMergeTag: (t) => ({ commands: n }) => n.insertContent({
+        type: this.name,
+        attrs: t
+      })
+    };
+  },
+  addKeyboardShortcuts() {
+    const t = () => {
+      const { selection: n } = this.editor.state, { $from: e, $to: s } = n;
+      let r = !1;
+      if (this.editor.state.doc.nodesBetween(e.pos, s.pos, (l) => {
+        if (l.type.name === this.name)
+          return r = !0, !1;
+      }), r)
+        return !0;
+      if (e.pos > 0) {
+        const l = e.nodeBefore;
+        if ((l == null ? void 0 : l.type.name) === this.name)
+          return !0;
+      }
+      const o = e.nodeAfter;
+      return (o == null ? void 0 : o.type.name) === this.name;
+    };
+    return {
+      Backspace: () => t(),
+      Delete: () => t()
+    };
+  },
+  addInputRules() {
+    const t = new RegExp(this.options.syntax.value.source + "$", "");
+    return [
+      new P({
+        find: t,
+        handler: ({ state: n, range: e, match: s }) => {
+          const r = s[0], o = k(r, this.options.mergeTags), l = this.type.create({
+            label: o,
+            value: r
+          });
+          n.tr.replaceWith(e.from, e.to, l);
+        }
+      })
+    ];
+  },
+  addPasteRules() {
+    const t = new RegExp(this.options.syntax.value.source, "g");
+    return [
+      new F({
+        find: t,
+        handler: ({ state: n, range: e, match: s }) => {
+          const r = s[0], o = k(r, this.options.mergeTags), l = this.type.create({
+            label: o,
+            value: r
+          });
+          n.tr.replaceWith(e.from, e.to, l);
+        }
+      })
+    ];
+  }
+});
+export {
+  Z as LogicMergeTagNode,
+  _ as MergeTagNode
+};

package/dist/index-Ude6e9RU.js

@@ -0,0 +1,41 @@
+import { M as t, m as e } from "./index-ZQzHBwkr.js";
+const u = t.create({
+  name: "superscript",
+  addOptions() {
+    return {
+      HTMLAttributes: {}
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "sup"
+      },
+      {
+        style: "vertical-align",
+        getAttrs(r) {
+          return r !== "super" ? !1 : null;
+        }
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes: r }) {
+    return ["sup", e(this.options.HTMLAttributes, r), 0];
+  },
+  addCommands() {
+    return {
+      setSuperscript: () => ({ commands: r }) => r.setMark(this.name),
+      toggleSuperscript: () => ({ commands: r }) => r.toggleMark(this.name),
+      unsetSuperscript: () => ({ commands: r }) => r.unsetMark(this.name)
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      "Mod-.": () => this.editor.commands.toggleSuperscript()
+    };
+  }
+});
+export {
+  u as Superscript,
+  u as default
+};