@quoreadmin/ui 1.7.20 → 1.8.1

package/dist/index202.js

@@ -1,290 +1,240 @@
-import { Extension as u, isNodeEmpty as w, callOrReturn as v, getExtensionField as S, isNodeSelection as P } from "./index239.js";
-import { Plugin as p, PluginKey as m } from "./index254.js";
-import { dropCursor as z } from "./index298.js";
-import { Decoration as g, DecorationSet as f } from "./index295.js";
-import { gapCursor as N } from "./index299.js";
-import { history as E, redo as M, undo as O } from "./index300.js";
-u.create({
-  name: "characterCount",
+import { Mark as y, Extension as l, mergeAttributes as p } from "./index262.js";
+var d = 20, u = (t, e = 0) => {
+  const r = [];
+  return !t.children.length || e > d || Array.from(t.children).forEach((o) => {
+    o.tagName === "SPAN" ? r.push(o) : o.children.length && r.push(...u(o, e + 1));
+  }), r;
+}, f = (t) => {
+  if (!t.children.length)
+    return;
+  const e = u(t);
+  e && e.forEach((r) => {
+    var o, n;
+    const s = r.getAttribute("style"), i = (n = (o = r.parentElement) == null ? void 0 : o.closest("span")) == null ? void 0 : n.getAttribute("style");
+    r.setAttribute("style", `${i};${s}`);
+  });
+}, c = y.create({
+  name: "textStyle",
+  priority: 101,
   addOptions() {
     return {
-      limit: null,
-      mode: "textSize",
-      textCounter: (e) => e.length,
-      wordCounter: (e) => e.split(" ").filter((t) => t !== "").length
+      HTMLAttributes: {},
+      mergeNestedSpanStyles: !0
     };
   },
-  addStorage() {
-    return {
-      characters: () => 0,
-      words: () => 0
-    };
+  parseHTML() {
+    return [
+      {
+        tag: "span",
+        consuming: !1,
+        getAttrs: (t) => t.hasAttribute("style") ? (this.options.mergeNestedSpanStyles && f(t), {}) : !1
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes: t }) {
+    return ["span", p(this.options.HTMLAttributes, t), 0];
   },
-  onBeforeCreate() {
-    this.storage.characters = (e) => {
-      const t = e?.node || this.editor.state.doc;
-      if ((e?.mode || this.options.mode) === "textSize") {
-        const r = t.textBetween(0, t.content.size, void 0, " ");
-        return this.options.textCounter(r);
+  addCommands() {
+    return {
+      toggleTextStyle: (t) => ({ commands: e }) => e.toggleMark(this.name, t),
+      removeEmptyTextStyle: () => ({ tr: t }) => {
+        const { selection: e } = t;
+        return t.doc.nodesBetween(e.from, e.to, (r, o) => {
+          if (r.isTextblock)
+            return !0;
+          r.marks.filter((n) => n.type === this.type).some((n) => Object.values(n.attrs).some((s) => !!s)) || t.removeMark(o, o + r.nodeSize, this.type);
+        }), !0;
       }
-      return t.nodeSize;
-    }, this.storage.words = (e) => {
-      const t = e?.node || this.editor.state.doc, n = t.textBetween(0, t.content.size, " ", " ");
-      return this.options.wordCounter(n);
+    };
+  }
+}), m = l.create({
+  name: "backgroundColor",
+  addOptions() {
+    return {
+      types: ["textStyle"]
     };
   },
-  addProseMirrorPlugins() {
-    let e = !1;
+  addGlobalAttributes() {
     return [
-      new p({
-        key: new m("characterCount"),
-        appendTransaction: (t, n, r) => {
-          if (e)
-            return;
-          const o = this.options.limit;
-          if (o == null || o === 0) {
-            e = !0;
-            return;
-          }
-          const s = this.storage.characters({ node: r.doc });
-          if (s > o) {
-            const i = s - o, d = 0, a = i;
-            console.warn(
-              `[CharacterCount] Initial content exceeded limit of ${o} characters. Content was automatically trimmed.`
-            );
-            const c = r.tr.deleteRange(d, a);
-            return e = !0, c;
+      {
+        types: this.options.types,
+        attributes: {
+          backgroundColor: {
+            default: null,
+            parseHTML: (t) => {
+              var e;
+              const r = t.getAttribute("style");
+              if (r) {
+                const o = r.split(";").map((n) => n.trim()).filter(Boolean);
+                for (let n = o.length - 1; n >= 0; n -= 1) {
+                  const s = o[n].split(":");
+                  if (s.length >= 2) {
+                    const i = s[0].trim().toLowerCase(), a = s.slice(1).join(":").trim();
+                    if (i === "background-color")
+                      return a.replace(/['"]+/g, "");
+                  }
+                }
+              }
+              return (e = t.style.backgroundColor) == null ? void 0 : e.replace(/['"]+/g, "");
+            },
+            renderHTML: (t) => t.backgroundColor ? {
+              style: `background-color: ${t.backgroundColor}`
+            } : {}
           }
-          e = !0;
-        },
-        filterTransaction: (t, n) => {
-          const r = this.options.limit;
-          if (!t.docChanged || r === 0 || r === null || r === void 0)
-            return !0;
-          const o = this.storage.characters({ node: n.doc }), s = this.storage.characters({ node: t.doc });
-          if (s <= r || o > r && s > r && s <= o)
-            return !0;
-          if (o > r && s > r && s > o || !t.getMeta("paste"))
-            return !1;
-          const d = t.selection.$head.pos, a = s - r, c = d - a, l = d;
-          return t.deleteRange(c, l), !(this.storage.characters({ node: t.doc }) > r);
         }
-      })
+      }
     ];
-  }
-});
-var k = u.create({
-  name: "dropCursor",
-  addOptions() {
+  },
+  addCommands() {
     return {
-      color: "currentColor",
-      width: 1,
-      class: void 0
+      setBackgroundColor: (t) => ({ chain: e }) => e().setMark("textStyle", { backgroundColor: t }).run(),
+      unsetBackgroundColor: () => ({ chain: t }) => t().setMark("textStyle", { backgroundColor: null }).removeEmptyTextStyle().run()
     };
-  },
-  addProseMirrorPlugins() {
-    return [z(this.options)];
   }
-});
-u.create({
-  name: "focus",
+}), g = l.create({
+  name: "color",
   addOptions() {
     return {
-      className: "has-focus",
-      mode: "all"
+      types: ["textStyle"]
     };
   },
-  addProseMirrorPlugins() {
+  addGlobalAttributes() {
     return [
-      new p({
-        key: new m("focus"),
-        props: {
-          decorations: ({ doc: e, selection: t }) => {
-            const { isEditable: n, isFocused: r } = this.editor, { anchor: o } = t, s = [];
-            if (!n || !r)
-              return f.create(e, []);
-            let i = 0;
-            this.options.mode === "deepest" && e.descendants((a, c) => {
-              if (a.isText)
-                return;
-              if (!(o >= c && o <= c + a.nodeSize - 1))
-                return !1;
-              i += 1;
-            });
-            let d = 0;
-            return e.descendants((a, c) => {
-              if (a.isText || !(o >= c && o <= c + a.nodeSize - 1))
-                return !1;
-              if (d += 1, this.options.mode === "deepest" && i - d > 0 || this.options.mode === "shallowest" && d > 1)
-                return this.options.mode === "deepest";
-              s.push(
-                g.node(c, c + a.nodeSize, {
-                  class: this.options.className
-                })
-              );
-            }), f.create(e, s);
+      {
+        types: this.options.types,
+        attributes: {
+          color: {
+            default: null,
+            parseHTML: (t) => {
+              var e;
+              const r = t.getAttribute("style");
+              if (r) {
+                const o = r.split(";").map((n) => n.trim()).filter(Boolean);
+                for (let n = o.length - 1; n >= 0; n -= 1) {
+                  const s = o[n].split(":");
+                  if (s.length >= 2) {
+                    const i = s[0].trim().toLowerCase(), a = s.slice(1).join(":").trim();
+                    if (i === "color")
+                      return a.replace(/['"]+/g, "");
+                  }
+                }
+              }
+              return (e = t.style.color) == null ? void 0 : e.replace(/['"]+/g, "");
+            },
+            renderHTML: (t) => t.color ? {
+              style: `color: ${t.color}`
+            } : {}
           }
         }
-      })
+      }
     ];
-  }
-});
-var F = u.create({
-  name: "gapCursor",
-  addProseMirrorPlugins() {
-    return [N()];
   },
-  extendNodeSchema(e) {
-    var t;
-    const n = {
-      name: e.name,
-      options: e.options,
-      storage: e.storage
-    };
+  addCommands() {
     return {
-      allowGapCursor: (t = v(S(e, "allowGapCursor", n))) != null ? t : null
+      setColor: (t) => ({ chain: e }) => e().setMark("textStyle", { color: t }).run(),
+      unsetColor: () => ({ chain: t }) => t().setMark("textStyle", { color: null }).removeEmptyTextStyle().run()
     };
   }
-}), R = u.create({
-  name: "placeholder",
+}), h = l.create({
+  name: "fontFamily",
   addOptions() {
     return {
-      emptyEditorClass: "is-editor-empty",
-      emptyNodeClass: "is-empty",
-      placeholder: "Write something …",
-      showOnlyWhenEditable: !0,
-      showOnlyCurrent: !0,
-      includeChildren: !1
+      types: ["textStyle"]
     };
   },
-  addProseMirrorPlugins() {
+  addGlobalAttributes() {
     return [
-      new p({
-        key: new m("placeholder"),
-        props: {
-          decorations: ({ doc: e, selection: t }) => {
-            const n = this.editor.isEditable || !this.options.showOnlyWhenEditable, { anchor: r } = t, o = [];
-            if (!n)
-              return null;
-            const s = this.editor.isEmpty;
-            return e.descendants((i, d) => {
-              const a = r >= d && r <= d + i.nodeSize, c = !i.isLeaf && w(i);
-              if ((a || !this.options.showOnlyCurrent) && c) {
-                const l = [this.options.emptyNodeClass];
-                s && l.push(this.options.emptyEditorClass);
-                const h = g.node(d, d + i.nodeSize, {
-                  class: l.join(" "),
-                  "data-placeholder": typeof this.options.placeholder == "function" ? this.options.placeholder({
-                    editor: this.editor,
-                    node: i,
-                    pos: d,
-                    hasAnchor: a
-                  }) : this.options.placeholder
-                });
-                o.push(h);
-              }
-              return this.options.includeChildren;
-            }), f.create(e, o);
+      {
+        types: this.options.types,
+        attributes: {
+          fontFamily: {
+            default: null,
+            parseHTML: (t) => t.style.fontFamily,
+            renderHTML: (t) => t.fontFamily ? {
+              style: `font-family: ${t.fontFamily}`
+            } : {}
           }
         }
-      })
+      }
     ];
+  },
+  addCommands() {
+    return {
+      setFontFamily: (t) => ({ chain: e }) => e().setMark("textStyle", { fontFamily: t }).run(),
+      unsetFontFamily: () => ({ chain: t }) => t().setMark("textStyle", { fontFamily: null }).removeEmptyTextStyle().run()
+    };
   }
-});
-u.create({
-  name: "selection",
+}), S = l.create({
+  name: "fontSize",
   addOptions() {
     return {
-      className: "selection"
+      types: ["textStyle"]
     };
   },
-  addProseMirrorPlugins() {
-    const { editor: e, options: t } = this;
+  addGlobalAttributes() {
     return [
-      new p({
-        key: new m("selection"),
-        props: {
-          decorations(n) {
-            return n.selection.empty || e.isFocused || !e.isEditable || P(n.selection) || e.view.dragging ? null : f.create(n.doc, [
-              g.inline(n.selection.from, n.selection.to, {
-                class: t.className
-              })
-            ]);
+      {
+        types: this.options.types,
+        attributes: {
+          fontSize: {
+            default: null,
+            parseHTML: (t) => t.style.fontSize,
+            renderHTML: (t) => t.fontSize ? {
+              style: `font-size: ${t.fontSize}`
+            } : {}
           }
         }
-      })
+      }
     ];
+  },
+  addCommands() {
+    return {
+      setFontSize: (t) => ({ chain: e }) => e().setMark("textStyle", { fontSize: t }).run(),
+      unsetFontSize: () => ({ chain: t }) => t().setMark("textStyle", { fontSize: null }).removeEmptyTextStyle().run()
+    };
   }
-});
-function y({ types: e, node: t }) {
-  return t && Array.isArray(e) && e.includes(t.type) || t?.type === e;
-}
-var G = u.create({
-  name: "trailingNode",
+}), b = l.create({
+  name: "lineHeight",
   addOptions() {
     return {
-      node: void 0,
-      notAfter: []
+      types: ["textStyle"]
     };
   },
-  addProseMirrorPlugins() {
-    var e;
-    const t = new m(this.name), n = this.options.node || ((e = this.editor.schema.topNodeType.contentMatch.defaultType) == null ? void 0 : e.name) || "paragraph", r = Object.entries(this.editor.schema.nodes).map(([, o]) => o).filter((o) => (this.options.notAfter || []).concat(n).includes(o.name));
+  addGlobalAttributes() {
     return [
-      new p({
-        key: t,
-        appendTransaction: (o, s, i) => {
-          const { doc: d, tr: a, schema: c } = i, l = t.getState(i), h = d.content.size, C = c.nodes[n];
-          if (l)
-            return a.insert(h, C.create());
-        },
-        state: {
-          init: (o, s) => {
-            const i = s.tr.doc.lastChild;
-            return !y({ node: i, types: r });
-          },
-          apply: (o, s) => {
-            if (!o.docChanged || o.getMeta("__uniqueIDTransaction"))
-              return s;
-            const i = o.doc.lastChild;
-            return !y({ node: i, types: r });
+      {
+        types: this.options.types,
+        attributes: {
+          lineHeight: {
+            default: null,
+            parseHTML: (t) => t.style.lineHeight,
+            renderHTML: (t) => t.lineHeight ? {
+              style: `line-height: ${t.lineHeight}`
+            } : {}
           }
         }
-      })
+      }
     ];
-  }
-}), B = u.create({
-  name: "undoRedo",
-  addOptions() {
-    return {
-      depth: 100,
-      newGroupDelay: 500
-    };
   },
   addCommands() {
     return {
-      undo: () => ({ state: e, dispatch: t }) => O(e, t),
-      redo: () => ({ state: e, dispatch: t }) => M(e, t)
-    };
-  },
-  addProseMirrorPlugins() {
-    return [E(this.options)];
-  },
-  addKeyboardShortcuts() {
-    return {
-      "Mod-z": () => this.editor.commands.undo(),
-      "Shift-Mod-z": () => this.editor.commands.redo(),
-      "Mod-y": () => this.editor.commands.redo(),
-      // Russian keyboard layouts
-      "Mod-я": () => this.editor.commands.undo(),
-      "Shift-Mod-я": () => this.editor.commands.redo()
+      setLineHeight: (t) => ({ chain: e }) => e().setMark("textStyle", { lineHeight: t }).run(),
+      unsetLineHeight: () => ({ chain: t }) => t().setMark("textStyle", { lineHeight: null }).removeEmptyTextStyle().run()
     };
   }
 });
+l.create({
+  name: "textStyleKit",
+  addExtensions() {
+    const t = [];
+    return this.options.backgroundColor !== !1 && t.push(m.configure(this.options.backgroundColor)), this.options.color !== !1 && t.push(g.configure(this.options.color)), this.options.fontFamily !== !1 && t.push(h.configure(this.options.fontFamily)), this.options.fontSize !== !1 && t.push(S.configure(this.options.fontSize)), this.options.lineHeight !== !1 && t.push(b.configure(this.options.lineHeight)), this.options.textStyle !== !1 && t.push(c.configure(this.options.textStyle)), t;
+  }
+});
 export {
-  k as Dropcursor,
-  F as Gapcursor,
-  R as Placeholder,
-  G as TrailingNode,
-  B as UndoRedo
+  m as BackgroundColor,
+  g as Color,
+  h as FontFamily,
+  S as FontSize,
+  b as LineHeight,
+  c as TextStyle
 };