reactjs-tiptap-editor/lib/HorizontalRule.js

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

import { N as T, n as A, o as y, q as H, m as h } from "./clsx-DaPvp9ji.js";
import { TextSelection as u, NodeSelection as R } from "@tiptap/pm/state";
import { u as M, d as v, A as f } from "./index-RcSPeQHn.js";
import { jsx as m, Fragment as z } from "react/jsx-runtime";
import "react";
import "./theme.js";
var S = T.create({
  name: "horizontalRule",
  addOptions() {
    return {
      HTMLAttributes: {},
      nextNodeType: "paragraph"
    };
  },
  group: "block",
  parseHTML() {
    return [{ tag: "hr" }];
  },
  renderHTML({ HTMLAttributes: t }) {
    return ["hr", h(this.options.HTMLAttributes, t)];
  },
  markdownTokenName: "hr",
  parseMarkdown: (t, n) => n.createNode("horizontalRule"),
  renderMarkdown: () => "---",
  addCommands() {
    return {
      setHorizontalRule: () => ({ chain: t, state: n }) => {
        if (!y(n, n.schema.nodes[this.name]))
          return !1;
        const { selection: r } = n, { $to: s } = r, i = t();
        return H(r) ? i.insertContentAt(s.pos, {
          type: this.name
        }) : i.insertContent({ type: this.name }), i.command(({ state: a, tr: e, dispatch: l }) => {
          if (l) {
            const { $to: o } = e.selection, c = o.end();
            if (o.nodeAfter)
              o.nodeAfter.isTextblock ? e.setSelection(u.create(e.doc, o.pos + 1)) : o.nodeAfter.isBlock ? e.setSelection(R.create(e.doc, o.pos)) : e.setSelection(u.create(e.doc, o.pos));
            else {
              const d = a.schema.nodes[this.options.nextNodeType] || o.parent.type.contentMatch.defaultType, p = d == null ? void 0 : d.create();
              p && (e.insert(c, p), e.setSelection(u.create(e.doc, c + 1)));
            }
            e.scrollIntoView();
          }
          return !0;
        }).run();
      }
    };
  },
  addInputRules() {
    return [
      A({
        find: /^(?:---|—-|___\s|\*\*\*\s)$/,
        type: this.type
      })
    ];
  }
});
function w() {
  const t = M(b.name), {
    icon: n = void 0,
    tooltip: r = void 0,
    shortcutKeys: s = void 0,
    tooltipOptions: i = {},
    action: a = void 0,
    isActive: e = void 0
  } = (t == null ? void 0 : t.componentProps) ?? {}, { dataState: l, disabled: o, update: c } = v(e), d = () => {
    o || a && (a(), c());
  };
  return t ? /* @__PURE__ */ m(
    f,
    {
      action: d,
      dataState: l,
      disabled: o,
      icon: n,
      shortcutKeys: s,
      tooltip: r,
      tooltipOptions: i
    }
  ) : /* @__PURE__ */ m(z, {});
}
const b = /* @__PURE__ */ S.extend({
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  //@ts-expect-error
  addOptions() {
    var t;
    return {
      ...(t = this.parent) == null ? void 0 : t.call(this),
      button: ({ editor: n, t: r, extension: s }) => ({
        component: f,
        componentProps: {
          action: () => n.commands.setHorizontalRule(),
          disabled: !n.can().setHorizontalRule(),
          icon: "Minus",
          shortcutKeys: s.options.shortcutKeys ?? ["mod", "alt", "S"],
          tooltip: r("editor.horizontalrule.tooltip")
        }
      })
    };
  },
  addKeyboardShortcuts() {
    return {
      "Mod-Alt-s": () => this.editor.commands.setHorizontalRule()
    };
  },
  renderHTML() {
    return [
      "div",
      h(this.options.HTMLAttributes, {
        "data-type": this.name
      }),
      ["hr"]
    ];
  }
});
export {
  b as HorizontalRule,
  w as RichTextHorizontalRule
};