@freedom-code-compliance/fcc-redesign 0.1.26 → 0.1.27

package/dist/rich-text-editor.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require(`react`),l=require(`lucide-react`),u=require(`react/jsx-runtime`),d=require(`@tiptap/react`),f=require(`@tiptap/extension-placeholder`);f=s(f,1);let p=require(`@tiptap/extension-underline`);p=s(p,1);let m=require(`@tiptap/starter-kit`);m=s(m,1);function h(e){let t=String(e??``).trim();return!t||t===`<p></p>`||t===`<p><br></p>`?``:t}function g({active:e,disabled:t,label:n,onClick:r,children:i}){return(0,u.jsx)(`button`,{type:`button`,className:[`fcc-rich-text-toolbar-button`,e?`is-active`:``].filter(Boolean).join(` `),"aria-label":n,title:n,onMouseDown:e=>e.preventDefault(),onClick:r,disabled:t,children:i})}function _({id:e,label:t,description:n,error:r,placeholder:i=`Write a note...`,value:a,defaultValue:o=``,onChange:s,disabled:_=!1,minHeight:v=160,showToolbar:y=!0,className:b=``,editorClassName:x=``,toolbarClassName:S=``,"aria-describedby":C,"aria-invalid":w}){let T=(0,c.useId)(),E=e||T,D=r&&r!==!0?r:n,O=D?`${E}-helper`:void 0,k=[C,O].filter(Boolean).join(` `)||void 0,A=!!(r||w),j=a!==void 0,[M,N]=(0,c.useState)(()=>h(o)),P=j?h(a):M,F=(0,d.useEditor)({immediatelyRender:!1,editable:!_,extensions:[m.default.configure({heading:!1,codeBlock:!1,horizontalRule:!1}),p.default,f.default.configure({placeholder:i})],content:P||`<p></p>`,editorProps:{attributes:{class:[`fcc-rich-text-content`,x].filter(Boolean).join(` `)}},onUpdate:({editor:e})=>{let t=h(e.getHTML());j||N(t),s?.(t,{editor:e,text:e.getText(),isEmpty:e.isEmpty})}});(0,c.useEffect)(()=>{F&&F.setEditable(!_)},[_,F]),(0,c.useEffect)(()=>{F&&F.setOptions({editorProps:{attributes:{id:E,role:`textbox`,"aria-multiline":`true`,"aria-describedby":k,"aria-invalid":A?`true`:`false`,class:[`fcc-rich-text-content`,x].filter(Boolean).join(` `)}}})},[k,F,x,E,A]),(0,c.useEffect)(()=>{F&&P!==h(F.getHTML())&&F.commands.setContent(P||`<p></p>`,!1)},[P,F]);let I=[{key:`bold`,label:`Bold`,active:F?.isActive(`bold`),onClick:()=>F?.chain().focus().toggleBold().run(),icon:(0,u.jsx)(l.Bold,{size:14})},{key:`italic`,label:`Italic`,active:F?.isActive(`italic`),onClick:()=>F?.chain().focus().toggleItalic().run(),icon:(0,u.jsx)(l.Italic,{size:14})},{key:`underline`,label:`Underline`,active:F?.isActive(`underline`),onClick:()=>F?.chain().focus().toggleUnderline().run(),icon:(0,u.jsx)(l.Underline,{size:14})},{key:`bulletList`,label:`Bullet list`,active:F?.isActive(`bulletList`),onClick:()=>F?.chain().focus().toggleBulletList().run(),icon:(0,u.jsx)(l.List,{size:14})},{key:`orderedList`,label:`Numbered list`,active:F?.isActive(`orderedList`),onClick:()=>F?.chain().focus().toggleOrderedList().run(),icon:(0,u.jsx)(l.ListOrdered,{size:14})},{key:`blockquote`,label:`Block quote`,active:F?.isActive(`blockquote`),onClick:()=>F?.chain().focus().toggleBlockquote().run(),icon:(0,u.jsx)(l.Quote,{size:14})}];return(0,u.jsxs)(`div`,{className:[`fcc-rich-text-field`,b].filter(Boolean).join(` `),children:[t?(0,u.jsx)(`label`,{className:`fcc-rich-text-label`,htmlFor:E,children:t}):null,(0,u.jsxs)(`div`,{className:[`fcc-rich-text-shell`,A?`is-invalid`:``,_?`is-disabled`:``].filter(Boolean).join(` `),style:{"--fcc-rich-text-min-height":`${v}px`},children:[y?(0,u.jsxs)(`div`,{className:[`fcc-rich-text-toolbar`,S].filter(Boolean).join(` `),children:[(0,u.jsx)(`div`,{className:`fcc-rich-text-toolbar-group`,children:I.map(e=>(0,u.jsx)(g,{label:e.label,active:!!e.active,onClick:e.onClick,disabled:_||!F,children:e.icon},e.key))}),(0,u.jsx)(`div`,{className:`fcc-rich-text-toolbar-divider`}),(0,u.jsxs)(`div`,{className:`fcc-rich-text-toolbar-group`,children:[(0,u.jsx)(g,{label:`Undo`,active:!1,onClick:()=>F?.chain().focus().undo().run(),disabled:_||!F?.can().chain().focus().undo().run(),children:(0,u.jsx)(l.Undo2,{size:14})}),(0,u.jsx)(g,{label:`Redo`,active:!1,onClick:()=>F?.chain().focus().redo().run(),disabled:_||!F?.can().chain().focus().redo().run(),children:(0,u.jsx)(l.Redo2,{size:14})})]})]}):null,(0,u.jsx)(d.EditorContent,{editor:F,className:`fcc-rich-text-editor`})]}),D?(0,u.jsx)(`div`,{id:O,className:[`fcc-rich-text-helper`,A?`is-error`:``].filter(Boolean).join(` `),children:D}):null]})}exports.RichTextEditor=_,exports.t=s;

package/dist/rich-text-editor.js

@@ -0,0 +1,173 @@
+import { useEffect as e, useId as t, useState as n } from "react";
+import { Bold as r, Italic as i, List as a, ListOrdered as o, Quote as s, Redo2 as c, Underline as l, Undo2 as u } from "lucide-react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { EditorContent as p, useEditor as m } from "@tiptap/react";
+import h from "@tiptap/extension-placeholder";
+import g from "@tiptap/extension-underline";
+import _ from "@tiptap/starter-kit";
+//#region src/components/ui/RichTextEditor.jsx
+function v(e) {
+	let t = String(e ?? "").trim();
+	return !t || t === "<p></p>" || t === "<p><br></p>" ? "" : t;
+}
+function y({ active: e, disabled: t, label: n, onClick: r, children: i }) {
+	return /* @__PURE__ */ d("button", {
+		type: "button",
+		className: ["fcc-rich-text-toolbar-button", e ? "is-active" : ""].filter(Boolean).join(" "),
+		"aria-label": n,
+		title: n,
+		onMouseDown: (e) => e.preventDefault(),
+		onClick: r,
+		disabled: t,
+		children: i
+	});
+}
+function b({ id: b, label: x, description: S, error: C, placeholder: w = "Write a note...", value: T, defaultValue: E = "", onChange: D, disabled: O = !1, minHeight: k = 160, showToolbar: A = !0, className: j = "", editorClassName: M = "", toolbarClassName: N = "", "aria-describedby": P, "aria-invalid": F }) {
+	let I = t(), L = b || I, R = C && C !== !0 ? C : S, z = R ? `${L}-helper` : void 0, B = [P, z].filter(Boolean).join(" ") || void 0, V = !!(C || F), H = T !== void 0, [U, W] = n(() => v(E)), G = H ? v(T) : U, K = m({
+		immediatelyRender: !1,
+		editable: !O,
+		extensions: [
+			_.configure({
+				heading: !1,
+				codeBlock: !1,
+				horizontalRule: !1
+			}),
+			g,
+			h.configure({ placeholder: w })
+		],
+		content: G || "<p></p>",
+		editorProps: { attributes: { class: ["fcc-rich-text-content", M].filter(Boolean).join(" ") } },
+		onUpdate: ({ editor: e }) => {
+			let t = v(e.getHTML());
+			H || W(t), D?.(t, {
+				editor: e,
+				text: e.getText(),
+				isEmpty: e.isEmpty
+			});
+		}
+	});
+	e(() => {
+		K && K.setEditable(!O);
+	}, [O, K]), e(() => {
+		K && K.setOptions({ editorProps: { attributes: {
+			id: L,
+			role: "textbox",
+			"aria-multiline": "true",
+			"aria-describedby": B,
+			"aria-invalid": V ? "true" : "false",
+			class: ["fcc-rich-text-content", M].filter(Boolean).join(" ")
+		} } });
+	}, [
+		B,
+		K,
+		M,
+		L,
+		V
+	]), e(() => {
+		K && G !== v(K.getHTML()) && K.commands.setContent(G || "<p></p>", !1);
+	}, [G, K]);
+	let q = [
+		{
+			key: "bold",
+			label: "Bold",
+			active: K?.isActive("bold"),
+			onClick: () => K?.chain().focus().toggleBold().run(),
+			icon: /* @__PURE__ */ d(r, { size: 14 })
+		},
+		{
+			key: "italic",
+			label: "Italic",
+			active: K?.isActive("italic"),
+			onClick: () => K?.chain().focus().toggleItalic().run(),
+			icon: /* @__PURE__ */ d(i, { size: 14 })
+		},
+		{
+			key: "underline",
+			label: "Underline",
+			active: K?.isActive("underline"),
+			onClick: () => K?.chain().focus().toggleUnderline().run(),
+			icon: /* @__PURE__ */ d(l, { size: 14 })
+		},
+		{
+			key: "bulletList",
+			label: "Bullet list",
+			active: K?.isActive("bulletList"),
+			onClick: () => K?.chain().focus().toggleBulletList().run(),
+			icon: /* @__PURE__ */ d(a, { size: 14 })
+		},
+		{
+			key: "orderedList",
+			label: "Numbered list",
+			active: K?.isActive("orderedList"),
+			onClick: () => K?.chain().focus().toggleOrderedList().run(),
+			icon: /* @__PURE__ */ d(o, { size: 14 })
+		},
+		{
+			key: "blockquote",
+			label: "Block quote",
+			active: K?.isActive("blockquote"),
+			onClick: () => K?.chain().focus().toggleBlockquote().run(),
+			icon: /* @__PURE__ */ d(s, { size: 14 })
+		}
+	];
+	return /* @__PURE__ */ f("div", {
+		className: ["fcc-rich-text-field", j].filter(Boolean).join(" "),
+		children: [
+			x ? /* @__PURE__ */ d("label", {
+				className: "fcc-rich-text-label",
+				htmlFor: L,
+				children: x
+			}) : null,
+			/* @__PURE__ */ f("div", {
+				className: [
+					"fcc-rich-text-shell",
+					V ? "is-invalid" : "",
+					O ? "is-disabled" : ""
+				].filter(Boolean).join(" "),
+				style: { "--fcc-rich-text-min-height": `${k}px` },
+				children: [A ? /* @__PURE__ */ f("div", {
+					className: ["fcc-rich-text-toolbar", N].filter(Boolean).join(" "),
+					children: [
+						/* @__PURE__ */ d("div", {
+							className: "fcc-rich-text-toolbar-group",
+							children: q.map((e) => /* @__PURE__ */ d(y, {
+								label: e.label,
+								active: !!e.active,
+								onClick: e.onClick,
+								disabled: O || !K,
+								children: e.icon
+							}, e.key))
+						}),
+						/* @__PURE__ */ d("div", { className: "fcc-rich-text-toolbar-divider" }),
+						/* @__PURE__ */ f("div", {
+							className: "fcc-rich-text-toolbar-group",
+							children: [/* @__PURE__ */ d(y, {
+								label: "Undo",
+								active: !1,
+								onClick: () => K?.chain().focus().undo().run(),
+								disabled: O || !K?.can().chain().focus().undo().run(),
+								children: /* @__PURE__ */ d(u, { size: 14 })
+							}), /* @__PURE__ */ d(y, {
+								label: "Redo",
+								active: !1,
+								onClick: () => K?.chain().focus().redo().run(),
+								disabled: O || !K?.can().chain().focus().redo().run(),
+								children: /* @__PURE__ */ d(c, { size: 14 })
+							})]
+						})
+					]
+				}) : null, /* @__PURE__ */ d(p, {
+					editor: K,
+					className: "fcc-rich-text-editor"
+				})]
+			}),
+			R ? /* @__PURE__ */ d("div", {
+				id: z,
+				className: ["fcc-rich-text-helper", V ? "is-error" : ""].filter(Boolean).join(" "),
+				children: R
+			}) : null
+		]
+	});
+}
+//#endregion
+export { b as RichTextEditor };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@freedom-code-compliance/fcc-redesign",
   "private": false,
-  "version": "0.1.26",
+  "version": "0.1.27",
   "description": "Reusable FCC design system components and theme for fccPRO and fccOPS.",
   "type": "module",
   "repository": {
@@ -19,6 +19,10 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
+    "./rich-text-editor": {
+      "import": "./dist/rich-text-editor.js",
+      "require": "./dist/rich-text-editor.cjs"
+    },
     "./styles.css": "./dist/styles.css"
   },
   "files": [