reactjs-tiptap-editor/lib/Column.js

A modern WYSIWYG rich text editor based on tiptap and shadcn ui for React

import { l as p, E as v, N as b, m as y } from "./clsx-DaPvp9ji.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 { u as M, d as L, A as O } from "./index-RcSPeQHn.js";
import "react";
import "./theme.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 = M(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 } = L(s), d = () => {
    l || o && (o(), a());
  };
  return e ? /* @__PURE__ */ T(
    O,
    {
      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
};