@dndbuilder.com/react
Version:
Drag and drop builder for React
256 lines (255 loc) • 11.4 kB
JavaScript
"use client";
import { jsxs as o, jsx as t, Fragment as d } from "react/jsx-runtime";
import { Link as k } from "../../../../../node_modules/.pnpm/@tiptap_extension-link@2.23.0_@tiptap_core@2.23.0_@tiptap_pm@2.23.0__@tiptap_pm@2.23.0/node_modules/@tiptap/extension-link/dist/index.js";
import { Placeholder as v } from "../../../../../node_modules/.pnpm/@tiptap_extension-placeholder@2.23.0_@tiptap_core@2.23.0_@tiptap_pm@2.23.0__@tiptap_pm@2.23.0/node_modules/@tiptap/extension-placeholder/dist/index.js";
import { useEditor as N, EditorContent as w } from "../../../../../node_modules/.pnpm/@tiptap_react@2.23.0_@tiptap_core@2.23.0_@tiptap_pm@2.23.0__@tiptap_pm@2.23.0_react-dom@19.0._bpd46mhqzxhfdgzpwehtfd2mhm/node_modules/@tiptap/react/dist/index.js";
import { StarterKit as L } from "../../../../../node_modules/.pnpm/@tiptap_starter-kit@2.23.0/node_modules/@tiptap/starter-kit/dist/index.js";
import { useState as m, useEffect as A } from "react";
import { FaBold as C, FaItalic as j, FaStrikethrough as F, FaHeading as u, FaListUl as B, FaListOl as H, FaQuoteLeft as U, FaUnlink as E, FaLink as S } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/fa/index.js";
import { classNames as r } from "../../../../../utils.js";
const W = ({
value: a,
onChange: l,
placeholder: b,
className: p,
...y
}) => {
const [s, i] = m(""), [f, c] = m(!1), e = N({
extensions: [
L,
k.configure({
openOnClick: !1
}),
v.configure({
placeholder: b || "Write something..."
})
],
content: a,
editorProps: {
attributes: {
class: "prose prose-slate prose-sm min-h-[150px] outline-none p-4"
}
},
onUpdate: ({ editor: n }) => {
const h = n.getHTML();
l == null || l(h);
},
immediatelyRender: !1
});
A(() => {
e && a !== void 0 && e.getHTML() !== a && e.commands.setContent(a);
}, [e, a]);
const g = () => {
if (!s) return;
const n = s.startsWith("http://") || s.startsWith("https://") ? s : `https://${s}`;
e == null || e.chain().focus().extendMarkRange("link").setLink({ href: n }).run(), i(""), c(!1);
}, x = (n) => {
n.key === "Enter" && (n.preventDefault(), g());
};
return /* @__PURE__ */ o(
"div",
{
className: r(
"flex flex-col overflow-hidden rounded-md border border-gray-200",
p
),
children: [
/* @__PURE__ */ o(
"div",
{
className: r(
"flex flex-wrap items-center border-b border-gray-200 bg-gray-50 p-2"
),
children: [
/* @__PURE__ */ t(
"button",
{
onClick: () => e == null ? void 0 : e.chain().focus().toggleBold().run(),
className: r(
"mb-1 mr-1 flex h-8 w-8 cursor-pointer items-center justify-center rounded border-none bg-transparent p-2 text-sm text-gray-600 hover:bg-gray-200",
{
"bg-gray-200 font-medium text-gray-800": e == null ? void 0 : e.isActive("bold")
}
),
type: "button",
title: "Bold",
children: /* @__PURE__ */ t(C, {})
}
),
/* @__PURE__ */ t(
"button",
{
onClick: () => e == null ? void 0 : e.chain().focus().toggleItalic().run(),
className: r(
"mb-1 mr-1 flex h-8 w-8 cursor-pointer items-center justify-center rounded border-none bg-transparent p-2 text-sm text-gray-600 hover:bg-gray-200",
{
"bg-gray-200 font-medium text-gray-800": e == null ? void 0 : e.isActive("italic")
}
),
type: "button",
title: "Italic",
children: /* @__PURE__ */ t(j, {})
}
),
/* @__PURE__ */ t(
"button",
{
onClick: () => e == null ? void 0 : e.chain().focus().toggleStrike().run(),
className: r(
"mb-1 mr-1 flex h-8 w-8 cursor-pointer items-center justify-center rounded border-none bg-transparent p-2 text-sm text-gray-600 hover:bg-gray-200",
{
"bg-gray-200 font-medium text-gray-800": e == null ? void 0 : e.isActive("strike")
}
),
type: "button",
title: "Strike",
children: /* @__PURE__ */ t(F, {})
}
),
/* @__PURE__ */ t("span", { className: r("mx-2 h-6 w-px bg-gray-200") }),
/* @__PURE__ */ t(
"button",
{
onClick: () => e == null ? void 0 : e.chain().focus().toggleHeading({ level: 1 }).run(),
className: r(
"mb-1 mr-1 flex h-8 w-8 cursor-pointer items-center justify-center rounded border-none bg-transparent p-2 text-sm text-gray-600 hover:bg-gray-200",
{
"bg-gray-200 font-medium text-gray-800": e == null ? void 0 : e.isActive("heading", { level: 1 })
}
),
type: "button",
title: "Heading 1",
children: /* @__PURE__ */ t(u, { className: "text-lg" })
}
),
/* @__PURE__ */ t(
"button",
{
onClick: () => e == null ? void 0 : e.chain().focus().toggleHeading({ level: 2 }).run(),
className: r(
"mb-1 mr-1 flex h-8 w-8 cursor-pointer items-center justify-center rounded border-none bg-transparent p-2 text-sm text-gray-600 hover:bg-gray-200",
{
"bg-gray-200 font-medium text-gray-800": e == null ? void 0 : e.isActive("heading", { level: 2 })
}
),
type: "button",
title: "Heading 2",
children: /* @__PURE__ */ t(u, { className: "text-sm" })
}
),
/* @__PURE__ */ t("span", { className: r("mx-2 h-6 w-px bg-gray-200") }),
/* @__PURE__ */ t(
"button",
{
onClick: () => e == null ? void 0 : e.chain().focus().toggleBulletList().run(),
className: r(
"mb-1 mr-1 flex h-8 w-8 cursor-pointer items-center justify-center rounded border-none bg-transparent p-2 text-sm text-gray-600 hover:bg-gray-200",
{
"bg-gray-200 font-medium text-gray-800": e == null ? void 0 : e.isActive("bulletList")
}
),
type: "button",
title: "Bullet List",
children: /* @__PURE__ */ t(B, {})
}
),
/* @__PURE__ */ t(
"button",
{
onClick: () => e == null ? void 0 : e.chain().focus().toggleOrderedList().run(),
className: r(
"mb-1 mr-1 flex h-8 w-8 cursor-pointer items-center justify-center rounded border-none bg-transparent p-2 text-sm text-gray-600 hover:bg-gray-200",
{
"bg-gray-200 font-medium text-gray-800": e == null ? void 0 : e.isActive("orderedList")
}
),
type: "button",
title: "Ordered List",
children: /* @__PURE__ */ t(H, {})
}
),
/* @__PURE__ */ t(
"button",
{
onClick: () => e == null ? void 0 : e.chain().focus().toggleBlockquote().run(),
className: r(
"mb-1 mr-1 flex h-8 w-8 cursor-pointer items-center justify-center rounded border-none bg-transparent p-2 text-sm text-gray-600 hover:bg-gray-200",
{
"bg-gray-200 font-medium text-gray-800": e == null ? void 0 : e.isActive("blockquote")
}
),
type: "button",
title: "Blockquote",
children: /* @__PURE__ */ t(U, {})
}
),
/* @__PURE__ */ t("span", { className: r("mx-2 h-6 w-px bg-gray-200") }),
f ? /* @__PURE__ */ o("div", { className: r("mr-2 flex w-full flex-col gap-2"), children: [
/* @__PURE__ */ t(
"input",
{
type: "text",
value: s,
onChange: (n) => i(n.target.value),
placeholder: "Enter URL",
onKeyDown: x,
className: r(
"placeholder:xs w-full rounded border border-gray-200 p-1 px-2 text-sm outline-none"
),
autoFocus: !0
}
),
/* @__PURE__ */ o("div", { className: r("flex gap-1"), children: [
/* @__PURE__ */ t(
"button",
{
onClick: g,
className: r(
"text-whit mr-1 cursor-pointer rounded bg-gray-800 p-1 px-2 text-xs hover:bg-gray-900 focus:bg-gray-900"
),
children: "Apply"
}
),
/* @__PURE__ */ t(
"button",
{
onClick: () => {
i(""), c(!1);
},
className: r(
"mr-1 cursor-pointer rounded border border-gray-200 bg-gray-100 p-1 px-2 text-xs hover:bg-gray-200"
),
children: "Cancel"
}
)
] })
] }) : /* @__PURE__ */ t(d, { children: /* @__PURE__ */ t(
"button",
{
onClick: () => {
e != null && e.isActive("link") ? e.chain().focus().unsetLink().run() : c(!0);
},
className: r(
"mb-1 mr-1 flex h-8 w-8 cursor-pointer items-center justify-center rounded border-none bg-transparent p-2 text-sm text-gray-600 hover:bg-gray-200",
{
"bg-gray-200 font-medium text-gray-800": e == null ? void 0 : e.isActive("link")
}
),
type: "button",
title: e != null && e.isActive("link") ? "Unlink" : "Link",
children: e != null && e.isActive("link") ? /* @__PURE__ */ t(E, {}) : /* @__PURE__ */ t(S, {})
}
) }),
/* @__PURE__ */ t("span", { className: r("mx-2 h-6 w-px bg-gray-200") })
]
}
),
/* @__PURE__ */ t(w, { editor: e, ...y })
]
}
);
};
export {
W as TextEditor
};
//# sourceMappingURL=text-editor.js.map