@optiaxiom/react 3.1.0 → 3.1.2

package/dist/cjs/editor.js

@@ -0,0 +1,156 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_Tooltip = require("./Tooltip-Ck6Jzpyy.js");
+const require_ToggleButton = require("./ToggleButton-Cl4WrcA6.js");
+let _optiaxiom_icons = require("@optiaxiom/icons");
+let _tiptap_extension_link = require("@tiptap/extension-link");
+_tiptap_extension_link = require_Tooltip.__toESM(_tiptap_extension_link);
+let _tiptap_extension_placeholder = require("@tiptap/extension-placeholder");
+_tiptap_extension_placeholder = require_Tooltip.__toESM(_tiptap_extension_placeholder);
+let _tiptap_extension_table = require("@tiptap/extension-table");
+let _tiptap_extension_table_cell = require("@tiptap/extension-table-cell");
+let _tiptap_extension_table_header = require("@tiptap/extension-table-header");
+let _tiptap_extension_table_row = require("@tiptap/extension-table-row");
+let _tiptap_react = require("@tiptap/react");
+let _tiptap_starter_kit = require("@tiptap/starter-kit");
+_tiptap_starter_kit = require_Tooltip.__toESM(_tiptap_starter_kit);
+let react = require("react");
+require("./assets/src/layers/layers.css.ts.vanilla-CEJpfE2T.css");
+let react_jsx_runtime = require("react/jsx-runtime");
+require("./assets/src/rich-text-editor/RichTextEditor.css.ts.vanilla-BiOFM2sb.css");
+//#region src/rich-text-editor/RichTextEditor.css.ts
+var editor = require_Tooltip.recipeRuntime({ base: [
+	{
+		bg: "bg.default",
+		border: "1",
+		display: "flex",
+		flexDirection: "column",
+		rounded: "md"
+	},
+	"_54bbvw",
+	"ak3bdm"
+] });
+var toolbar = require_Tooltip.recipeRuntime({ base: [{
+	alignItems: "center",
+	borderB: "1",
+	borderColor: "border.tertiary",
+	gap: "2",
+	px: "8",
+	py: "6"
+}, "i0ng98"] });
+//#endregion
+//#region src/rich-text-editor/RichTextEditor.tsx
+/**
+* Rich text editor with a toolbar for basic formatting (bold, italic, lists, links).
+*
+* @category form
+* @experimental
+* @since 1.10.0
+*/
+const RichTextEditor = (0, react.forwardRef)(({ "aria-label": ariaLabel = "Rich text editor", "aria-labelledby": ariaLabelledBy, className, defaultValue, onValueChange, placeholder, readOnly, value, ...props }, ref) => {
+	const editor$1 = (0, _tiptap_react.useEditor)({
+		content: value ?? defaultValue ?? "",
+		editable: !readOnly,
+		editorProps: { attributes: {
+			role: "textbox",
+			...ariaLabelledBy ? { "aria-labelledby": ariaLabelledBy } : { "aria-label": ariaLabel }
+		} },
+		extensions: [
+			_tiptap_starter_kit.default,
+			_tiptap_extension_link.default.configure({ openOnClick: false }),
+			_tiptap_extension_placeholder.default.configure({ placeholder: placeholder ?? "" }),
+			_tiptap_extension_table.Table.configure({ resizable: false }),
+			_tiptap_extension_table_row.TableRow,
+			_tiptap_extension_table_header.TableHeader,
+			_tiptap_extension_table_cell.TableCell
+		],
+		onUpdate: ({ editor }) => {
+			onValueChange?.(editor.getHTML());
+		}
+	});
+	(0, react.useEffect)(() => {
+		if (editor$1 && editor$1.isEditable === readOnly) editor$1.setEditable(!readOnly);
+	}, [editor$1, readOnly]);
+	(0, react.useEffect)(() => {
+		if (editor$1 && value !== void 0 && value !== editor$1.getHTML()) editor$1.commands.setContent(value, false);
+	}, [editor$1, value]);
+	if (!editor$1) return null;
+	const setLink = () => {
+		const previous = editor$1.getAttributes("link").href;
+		const url = window.prompt("Enter URL", previous ?? "");
+		if (url === null) return;
+		if (url === "") {
+			editor$1.chain().focus().extendMarkRange("link").unsetLink().run();
+			return;
+		}
+		editor$1.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Tooltip.Box, {
+		ref,
+		...editor({}, className),
+		...props,
+		children: [!readOnly && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Tooltip.Group, {
+			...toolbar(),
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
+					content: "Bold",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToggleButton.ToggleButton, {
+						appearance: "subtle",
+						"aria-label": "Bold",
+						icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_optiaxiom_icons.IconBold, {}),
+						onPressedChange: () => editor$1.chain().focus().toggleBold().run(),
+						pressed: editor$1.isActive("bold"),
+						size: "sm"
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
+					content: "Italic",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToggleButton.ToggleButton, {
+						appearance: "subtle",
+						"aria-label": "Italic",
+						icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_optiaxiom_icons.IconItalic, {}),
+						onPressedChange: () => editor$1.chain().focus().toggleItalic().run(),
+						pressed: editor$1.isActive("italic"),
+						size: "sm"
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
+					content: "Bullet list",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToggleButton.ToggleButton, {
+						appearance: "subtle",
+						"aria-label": "Bullet list",
+						icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_optiaxiom_icons.IconList, {}),
+						onPressedChange: () => editor$1.chain().focus().toggleBulletList().run(),
+						pressed: editor$1.isActive("bulletList"),
+						size: "sm"
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
+					content: "Numbered list",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToggleButton.ToggleButton, {
+						appearance: "subtle",
+						"aria-label": "Numbered list",
+						icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_optiaxiom_icons.IconListOl, {}),
+						onPressedChange: () => editor$1.chain().focus().toggleOrderedList().run(),
+						pressed: editor$1.isActive("orderedList"),
+						size: "sm"
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
+					content: "Link",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToggleButton.ToggleButton, {
+						appearance: "subtle",
+						"aria-label": "Link",
+						icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_optiaxiom_icons.IconLink, {}),
+						onClick: setLink,
+						pressed: editor$1.isActive("link"),
+						size: "sm"
+					})
+				})
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tiptap_react.EditorContent, { editor: editor$1 })]
+	});
+});
+RichTextEditor.displayName = "@optiaxiom/react/RichTextEditor";
+//#endregion
+exports.RichTextEditor = RichTextEditor;