reactjs-tiptap-editor 0.4.2 → 1.0.1

package/lib/Column.js

@@ -0,0 +1,217 @@
+import { j as p, E as v, N as b, m as y } from "./index-DnWWK9F_.js";
+import { TextSelection as h } from "@tiptap/pm/state";
+import { Node as N } from "@tiptap/pm/model";
+import { jsx as T, Fragment as H } from "react/jsx-runtime";
+import { A as M } from "./toggle-Cdp4IT2U.js";
+import "react";
+import "./index-BPfVXs5_.js";
+import { u as L, a as O } from "./useButtonProps-BsEd4zYM.js";
+function E(e, t, r = null) {
+  return r ? e.createChecked({ index: t }, r) : e.createAndFill({ index: t });
+}
+function I(e) {
+  if (e.cached.columnsNodeTypes)
+    return e.cached.columnsNodeTypes;
+  const t = {
+    columns: e.nodes.columns,
+    column: e.nodes.column
+  };
+  return e.cached.columnsNodeTypes = t, t;
+}
+function w(e, t, r = null) {
+  const n = I(e), c = [];
+  for (let o = 0; o < t; o += 1) {
+    const s = E(n.column, o, r);
+    s && c.push(s);
+  }
+  return n.columns.createChecked({ cols: t }, c);
+}
+function f({
+  state: e,
+  dispatch: t,
+  type: r
+}) {
+  const n = p((o) => o.type.name === S.name)(e.selection), c = p((o) => o.type.name === A.name)(e.selection);
+  if (t && n && c) {
+    const o = n.node, s = c.node.attrs.index, i = o.toJSON();
+    let l = s;
+    r === "delete" ? (l = s - 1, i.content.splice(s, 1)) : (l = r === "addBefore" ? s : s + 1, i.content.splice(l, 0, {
+      type: "column",
+      attrs: {
+        index: s
+      },
+      content: [
+        {
+          type: "paragraph"
+        }
+      ]
+    })), i.attrs.cols = i.content.length, i.content.forEach((u, C) => {
+      u.attrs.index = C;
+    });
+    const a = N.fromJSON(e.schema, i);
+    let d = n.pos;
+    a.content.forEach((u, C, g) => {
+      g < l && (d += u.nodeSize);
+    });
+    const m = e.tr.setTime(Date.now());
+    m.replaceWith(n.pos, n.pos + n.node.nodeSize, a).setSelection(
+      h.near(m.doc.resolve(d))
+    ), t(m);
+  }
+  return !0;
+}
+function x({ state: e, dispatch: t, type: r }) {
+  const n = p((o) => o.type.name === S.name)(e.selection), c = p((o) => o.type.name === A.name)(e.selection);
+  if (t && n && c) {
+    const o = n.node, s = c.node.attrs.index;
+    let i = 0;
+    r === "before" ? i = (s - 1 + o.attrs.cols) % o.attrs.cols : i = (s + 1) % o.attrs.cols;
+    let l = n.pos;
+    o.content.forEach((d, m, u) => {
+      u < i && (l += d.nodeSize);
+    });
+    const a = e.tr.setTime(Date.now());
+    return a.setSelection(h.near(a.doc.resolve(l))), t(a), !0;
+  }
+  return !1;
+}
+function K() {
+  const e = L(B.name), {
+    icon: t = void 0,
+    tooltip: r = void 0,
+    shortcutKeys: n = void 0,
+    tooltipOptions: c = {},
+    action: o = void 0,
+    isActive: s = void 0
+  } = (e == null ? void 0 : e.componentProps) ?? {}, { dataState: i, disabled: l, update: a } = O(s), d = () => {
+    l || o && (o(), a());
+  };
+  return e ? /* @__PURE__ */ T(
+    M,
+    {
+      action: d,
+      dataState: i,
+      disabled: l,
+      icon: t,
+      shortcutKeys: n,
+      tooltip: r,
+      tooltipOptions: c
+    }
+  ) : /* @__PURE__ */ T(H, {});
+}
+const P = 200, B = v.create({
+  name: "richtextColumnExtension",
+  addOptions() {
+    var e;
+    return {
+      ...(e = this.parent) == null ? void 0 : e.call(this),
+      button: ({ editor: t, t: r }) => ({
+        componentProps: {
+          action: () => {
+            t.chain().focus().insertColumns({ cols: 2 }).run();
+          },
+          icon: "Columns",
+          tooltip: r("editor.columns.tooltip")
+        }
+      })
+    };
+  }
+}), A = /* @__PURE__ */ b.create({
+  name: "column",
+  content: "block+",
+  isolating: !0,
+  addOptions() {
+    return {
+      HTMLAttributes: {
+        class: "column"
+      }
+    };
+  },
+  addAttributes() {
+    return {
+      index: {
+        default: 0,
+        parseHTML: (e) => e.getAttribute("index")
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "div[class=column]"
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes: e }) {
+    return ["div", y(this.options.HTMLAttributes, e), 0];
+  }
+}), S = /* @__PURE__ */ b.create({
+  name: "columns",
+  group: "block",
+  defining: !0,
+  isolating: !0,
+  allowGapCursor: !1,
+  content: "column{1,}",
+  priority: P,
+  addOptions() {
+    return {
+      HTMLAttributes: {
+        class: "columns"
+      }
+    };
+  },
+  addAttributes() {
+    return {
+      cols: {
+        default: 2,
+        parseHTML: (e) => e.getAttribute("cols")
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "div[class=grid]"
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes: e }) {
+    return ["div", y(this.options.HTMLAttributes, e), 0];
+  },
+  addCommands() {
+    return {
+      insertColumns: (e) => ({ tr: t, dispatch: r, editor: n }) => {
+        const c = w(n.schema, e && e.cols || 3);
+        if (r) {
+          const o = t.selection.anchor + 1;
+          t.replaceSelectionWith(c).scrollIntoView().setSelection(h.near(t.doc.resolve(o)));
+        }
+        return !0;
+      },
+      addColBefore: () => ({ dispatch: e, state: t }) => f({ dispatch: e, state: t, type: "addBefore" }),
+      addColAfter: () => ({ dispatch: e, state: t }) => f({ dispatch: e, state: t, type: "addAfter" }),
+      deleteCol: () => ({ dispatch: e, state: t }) => f({ dispatch: e, state: t, type: "delete" })
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      "Mod-Alt-G": () => this.editor.commands.insertColumns(),
+      Tab: () => x({
+        state: this.editor.state,
+        dispatch: this.editor.view.dispatch,
+        type: "after"
+      }),
+      "Shift-Tab": () => x({
+        state: this.editor.state,
+        dispatch: this.editor.view.dispatch,
+        type: "before"
+      })
+    };
+  }
+});
+export {
+  B as Column,
+  A as ColumnNode,
+  S as MultipleColumnNode,
+  K as RichTextColumn
+};