@lumeweb/portal-framework-ui 0.0.1 → 0.1.1

package/dist/esm/components/editor/ToolbarPlugin.js

@@ -0,0 +1,194 @@
+import { blockTypeToBlockName, useToolbarState } from "./ToolbarContext.js";
+import BlockTypeDropdown from "./BlockTypeDropdown.js";
+import { Button, Separator, Toggle } from "@lumeweb/portal-framework-ui-core";
+import React, { useEffect, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $isListNode } from "@lexical/list";
+import { $isHeadingNode } from "@lexical/rich-text";
+import { $findMatchingParent, mergeRegister } from "@lexical/utils";
+import { $getSelection, $isRangeSelection, $isRootOrShadowRoot, CAN_REDO_COMMAND, CAN_UNDO_COMMAND, COMMAND_PRIORITY_CRITICAL, FORMAT_TEXT_COMMAND, REDO_COMMAND, SELECTION_CHANGE_COMMAND, UNDO_COMMAND } from "lexical";
+import { FontBoldIcon, FontItalicIcon, ReloadIcon, UnderlineIcon } from "@radix-ui/react-icons";
+
+//#region src/components/editor/ToolbarPlugin.tsx
+const defaultToolbarOptions = [
+	"bold",
+	"italic",
+	"underline",
+	"undo",
+	"redo",
+	"blockTypes"
+];
+const formatToStateKey = {
+	bold: "isBold",
+	clear: "isClear",
+	italic: "isItalic",
+	strikethrough: "isStrikethrough",
+	subscript: "isSubscript",
+	superscript: "isSuperscript",
+	underline: "isUnderline"
+};
+const ToolbarButton = ({ children, command, disabled, payload, title }) => {
+	const [editor] = useLexicalComposerContext();
+	const { toolbarState, updateToolbarState } = useToolbarState();
+	const isActive = command === FORMAT_TEXT_COMMAND ? toolbarState[formatToStateKey[payload]] : false;
+	const handleClick = () => {
+		editor.dispatchCommand(command, payload);
+	};
+	if (command === FORMAT_TEXT_COMMAND) {
+		const stateKey = formatToStateKey[payload];
+		return /* @__PURE__ */ jsx(Toggle, {
+			"aria-label": title,
+			disabled,
+			onPressedChange: (pressed) => {
+				handleClick();
+				updateToolbarState(stateKey, pressed);
+				if (payload === "clear") setTimeout(() => {
+					updateToolbarState(stateKey, false);
+				}, 300);
+			},
+			pressed: toolbarState[stateKey],
+			size: "sm",
+			title,
+			children
+		});
+	}
+	return /* @__PURE__ */ jsx(Button, {
+		className: isActive ? "bg-gray-200" : "",
+		disabled,
+		onClick: handleClick,
+		size: "icon",
+		title,
+		variant: "ghost",
+		children
+	});
+};
+function ToolbarPlugin({ enablePreview = true, isPreview, setIsPreview, toolbarOptions = defaultToolbarOptions }) {
+	const [editor] = useLexicalComposerContext();
+	const { toolbarState, updateToolbarState } = useToolbarState();
+	const [canUndo, setCanUndo] = useState(false);
+	const [canRedo, setCanRedo] = useState(false);
+	const $updateToolbar = React.useCallback(() => {
+		const selection = $getSelection();
+		if ($isRangeSelection(selection)) {
+			updateToolbarState("isBold", selection.hasFormat("bold"));
+			updateToolbarState("isItalic", selection.hasFormat("italic"));
+			updateToolbarState("isStrikethrough", selection.hasFormat("strikethrough"));
+			updateToolbarState("isSubscript", selection.hasFormat("subscript"));
+			updateToolbarState("isSuperscript", selection.hasFormat("superscript"));
+			updateToolbarState("isUnderline", selection.hasFormat("underline"));
+			const anchorNode = selection.anchor.getNode();
+			let element = anchorNode.getKey() === "root" ? anchorNode : $findMatchingParent(anchorNode, (e) => {
+				const parent = e.getParent();
+				return parent !== null && $isRootOrShadowRoot(parent);
+			});
+			if (element === null) element = anchorNode.getTopLevelElementOrThrow();
+			const type = $isHeadingNode(element) ? element.getTag() : $isListNode(element) ? element.getListType() : element.getType();
+			if (type in blockTypeToBlockName) updateToolbarState("blockType", type);
+		}
+	}, [updateToolbarState]);
+	React.useEffect(() => {
+		return mergeRegister(editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+			$updateToolbar();
+			return false;
+		}, COMMAND_PRIORITY_CRITICAL), editor.registerUpdateListener(({ editorState }) => {
+			editorState.read(() => {
+				$updateToolbar();
+			});
+		}));
+	}, [editor, $updateToolbar]);
+	useEffect(() => {
+		if (!enablePreview) setIsPreview(false);
+		if (enablePreview) editor.setEditable(!isPreview);
+	}, [
+		editor,
+		enablePreview,
+		isPreview,
+		setIsPreview
+	]);
+	useEffect(() => {
+		return mergeRegister(editor.registerCommand(CAN_UNDO_COMMAND, (payload) => {
+			setCanUndo(payload);
+			return false;
+		}, COMMAND_PRIORITY_CRITICAL), editor.registerCommand(CAN_REDO_COMMAND, (payload) => {
+			setCanRedo(payload);
+			return false;
+		}, COMMAND_PRIORITY_CRITICAL));
+	}, [editor]);
+	return /* @__PURE__ */ jsx("div", {
+		className: "relative z-10 w-full border-b",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex justify-center space-x-2 p-1",
+			children: [
+				toolbarOptions.includes("clear") && /* @__PURE__ */ jsx(ToolbarButton, {
+					command: FORMAT_TEXT_COMMAND,
+					disabled: isPreview,
+					payload: "clear",
+					title: "Clear Formatting",
+					children: /* @__PURE__ */ jsx(ReloadIcon, { className: "text-muted-foreground" })
+				}),
+				toolbarOptions.includes("undo") && /* @__PURE__ */ jsx(Button, {
+					className: "h-8 px-2",
+					disabled: !canUndo || isPreview,
+					onClick: () => editor.dispatchCommand(UNDO_COMMAND, void 0),
+					title: "Undo (Ctrl+Z)",
+					variant: "ghost",
+					children: /* @__PURE__ */ jsx(ReloadIcon, { className: "-scale-x-100 transform" })
+				}),
+				toolbarOptions.includes("redo") && /* @__PURE__ */ jsx(Button, {
+					className: "h-8 px-2",
+					disabled: !canRedo || isPreview,
+					onClick: () => editor.dispatchCommand(REDO_COMMAND, void 0),
+					title: "Redo (Ctrl+Y)",
+					variant: "ghost",
+					children: /* @__PURE__ */ jsx(ReloadIcon, { className: "rotate-180" })
+				}),
+				enablePreview && /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1 pr-2",
+					children: [/* @__PURE__ */ jsx(Button, {
+						onClick: () => setIsPreview(false),
+						size: "sm",
+						type: "button",
+						variant: !isPreview ? "secondary" : "ghost",
+						children: "Write"
+					}), /* @__PURE__ */ jsx(Button, {
+						onClick: () => setIsPreview(true),
+						size: "sm",
+						type: "button",
+						variant: isPreview ? "secondary" : "ghost",
+						children: "Preview"
+					})]
+				}),
+				toolbarOptions.includes("blockTypes") && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Separator, {
+					className: "my-1 h-auto",
+					orientation: "vertical"
+				}), /* @__PURE__ */ jsx(BlockTypeDropdown, { blockType: toolbarState.blockType })] }),
+				toolbarOptions.includes("bold") && /* @__PURE__ */ jsx(ToolbarButton, {
+					command: FORMAT_TEXT_COMMAND,
+					disabled: isPreview,
+					payload: "bold",
+					title: "Bold (Ctrl+B)",
+					children: /* @__PURE__ */ jsx(FontBoldIcon, {})
+				}),
+				toolbarOptions.includes("italic") && /* @__PURE__ */ jsx(ToolbarButton, {
+					command: FORMAT_TEXT_COMMAND,
+					disabled: isPreview,
+					payload: "italic",
+					title: "Italic (Ctrl+I)",
+					children: /* @__PURE__ */ jsx(FontItalicIcon, {})
+				}),
+				toolbarOptions.includes("underline") && /* @__PURE__ */ jsx(ToolbarButton, {
+					command: FORMAT_TEXT_COMMAND,
+					disabled: isPreview,
+					payload: "underline",
+					title: "Underline (Ctrl+U)",
+					children: /* @__PURE__ */ jsx(UnderlineIcon, {})
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+export { ToolbarPlugin, defaultToolbarOptions };
+//# sourceMappingURL=ToolbarPlugin.js.map

package/dist/esm/components/editor/ToolbarPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarPlugin.js","names":[],"sources":["../../../../src/components/editor/ToolbarPlugin.tsx"],"sourcesContent":["import { $isListNode } from \"@lexical/list\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { $isHeadingNode } from \"@lexical/rich-text\";\nimport { $findMatchingParent, mergeRegister } from \"@lexical/utils\";\nimport { Button, Separator, Toggle } from \"@lumeweb/portal-framework-ui-core\";\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  ReloadIcon,\n  UnderlineIcon,\n} from \"@radix-ui/react-icons\";\nimport {\n  $getSelection,\n  $isRangeSelection,\n  $isRootOrShadowRoot,\n  CAN_REDO_COMMAND,\n  CAN_UNDO_COMMAND,\n  COMMAND_PRIORITY_CRITICAL,\n  FORMAT_TEXT_COMMAND,\n  LexicalCommand,\n  REDO_COMMAND,\n  SELECTION_CHANGE_COMMAND,\n  UNDO_COMMAND,\n} from \"lexical\";\nimport React, { useEffect, useState } from \"react\";\n\nimport BlockTypeDropdown from \"./BlockTypeDropdown\";\nimport { ToolbarOption } from \"./Editor\";\nimport {\n  blockTypeToBlockName,\n  ToolbarState,\n  ToolbarStateKey,\n  ToolbarStateValue,\n  useToolbarState,\n} from \"./ToolbarContext\";\n\nexport const defaultToolbarOptions: ToolbarOption[] = [\n  \"bold\",\n  \"italic\",\n  \"underline\",\n  \"undo\",\n  \"redo\",\n  \"blockTypes\",\n];\n\nconst formatToStateKey = {\n  bold: \"isBold\",\n  clear: \"isClear\",\n  italic: \"isItalic\",\n  strikethrough: \"isStrikethrough\",\n  subscript: \"isSubscript\",\n  superscript: \"isSuperscript\",\n  underline: \"isUnderline\",\n} as const;\n\ntype FormatPayload = keyof typeof formatToStateKey;\n\ninterface ToolbarButtonProps {\n  children: React.ReactNode;\n  command: LexicalCommand<any>;\n  disabled?: boolean;\n  payload?: any;\n  title?: string;\n}\n\ninterface ToolbarPluginProps {\n  enablePreview?: boolean;\n  isPreview: boolean;\n  setIsPreview: React.Dispatch<React.SetStateAction<boolean>>;\n  toolbarOptions?: (\n    | \"blockTypes\"\n    | \"bold\"\n    | \"clear\"\n    | \"italic\"\n    | \"redo\"\n    | \"strikethrough\"\n    | \"subscript\"\n    | \"superscript\"\n    | \"underline\"\n    | \"undo\"\n  )[];\n}\n\nconst ToolbarButton = ({\n  children,\n  command,\n  disabled,\n  payload,\n  title,\n}: ToolbarButtonProps) => {\n  const [editor] = useLexicalComposerContext();\n  const {\n    toolbarState,\n    updateToolbarState,\n  }: {\n    toolbarState: ToolbarState;\n    updateToolbarState: <Key extends ToolbarStateKey>(\n      key: Key,\n      value: ToolbarStateValue<Key>,\n    ) => void;\n  } = useToolbarState();\n\n  const isActive =\n    command === FORMAT_TEXT_COMMAND\n      ? toolbarState[formatToStateKey[payload as FormatPayload]]\n      : false;\n\n  const handleClick = () => {\n    editor.dispatchCommand(command, payload);\n  };\n\n  if (command === FORMAT_TEXT_COMMAND) {\n    const stateKey = formatToStateKey[payload as FormatPayload];\n\n    return (\n      <Toggle\n        aria-label={title}\n        disabled={disabled}\n        onPressedChange={(pressed) => {\n          handleClick();\n          updateToolbarState(stateKey, pressed);\n          if (payload === \"clear\") {\n            setTimeout(() => {\n              updateToolbarState(stateKey, false);\n            }, 300);\n          }\n        }}\n        pressed={toolbarState[stateKey]}\n        size=\"sm\"\n        title={title}>\n        {children}\n      </Toggle>\n    );\n  }\n\n  return (\n    <Button\n      className={isActive ? \"bg-gray-200\" : \"\"}\n      disabled={disabled}\n      onClick={handleClick}\n      size=\"icon\"\n      title={title}\n      variant=\"ghost\">\n      {children}\n    </Button>\n  );\n};\n\nexport function ToolbarPlugin({\n  enablePreview = true,\n  isPreview,\n  setIsPreview,\n  toolbarOptions = defaultToolbarOptions,\n}: ToolbarPluginProps) {\n  const [editor] = useLexicalComposerContext();\n  const { toolbarState, updateToolbarState } = useToolbarState();\n\n  const [canUndo, setCanUndo] = useState(false);\n  const [canRedo, setCanRedo] = useState(false);\n\n  const $updateToolbar = React.useCallback(() => {\n    const selection = $getSelection();\n    if ($isRangeSelection(selection)) {\n      updateToolbarState(\"isBold\", selection.hasFormat(\"bold\"));\n      updateToolbarState(\"isItalic\", selection.hasFormat(\"italic\"));\n      updateToolbarState(\n        \"isStrikethrough\",\n        selection.hasFormat(\"strikethrough\"),\n      );\n      updateToolbarState(\"isSubscript\", selection.hasFormat(\"subscript\"));\n      updateToolbarState(\"isSuperscript\", selection.hasFormat(\"superscript\"));\n      updateToolbarState(\"isUnderline\", selection.hasFormat(\"underline\"));\n\n      const anchorNode = selection.anchor.getNode();\n\n      let element =\n        anchorNode.getKey() === \"root\"\n          ? anchorNode\n          : $findMatchingParent(anchorNode, (e) => {\n              const parent = e.getParent();\n              return parent !== null && $isRootOrShadowRoot(parent);\n            });\n\n      if (element === null) {\n        element = anchorNode.getTopLevelElementOrThrow();\n      }\n\n      const type = $isHeadingNode(element)\n        ? element.getTag()\n        : $isListNode(element)\n          ? element.getListType()\n          : element.getType();\n\n      if (type in blockTypeToBlockName) {\n        updateToolbarState(\n          \"blockType\",\n          type as keyof typeof blockTypeToBlockName,\n        );\n      }\n    }\n  }, [updateToolbarState]);\n\n  React.useEffect(() => {\n    return mergeRegister(\n      editor.registerCommand(\n        SELECTION_CHANGE_COMMAND,\n        () => {\n          $updateToolbar();\n          return false;\n        },\n        COMMAND_PRIORITY_CRITICAL,\n      ),\n      editor.registerUpdateListener(({ editorState }) => {\n        editorState.read(() => {\n          $updateToolbar();\n        });\n      }),\n    );\n  }, [editor, $updateToolbar]);\n\n  useEffect(() => {\n    if (!enablePreview) {\n      setIsPreview(false);\n    }\n\n    if (enablePreview) {\n      editor.setEditable(!isPreview);\n    }\n  }, [editor, enablePreview, isPreview, setIsPreview]);\n\n  useEffect(() => {\n    return mergeRegister(\n      editor.registerCommand(\n        CAN_UNDO_COMMAND,\n        (payload) => {\n          setCanUndo(payload);\n          return false;\n        },\n        COMMAND_PRIORITY_CRITICAL,\n      ),\n      editor.registerCommand(\n        CAN_REDO_COMMAND,\n        (payload) => {\n          setCanRedo(payload);\n          return false;\n        },\n        COMMAND_PRIORITY_CRITICAL,\n      ),\n    );\n  }, [editor]);\n\n  return (\n    <div className=\"relative z-10 w-full border-b\">\n      <div className=\"flex justify-center space-x-2 p-1\">\n        {toolbarOptions.includes(\"clear\") && (\n          <ToolbarButton\n            command={FORMAT_TEXT_COMMAND}\n            disabled={isPreview}\n            payload=\"clear\"\n            title=\"Clear Formatting\">\n            <ReloadIcon className=\"text-muted-foreground\" />\n          </ToolbarButton>\n        )}\n\n        {toolbarOptions.includes(\"undo\") && (\n          <Button\n            className=\"h-8 px-2\"\n            disabled={!canUndo || isPreview}\n            onClick={() => editor.dispatchCommand(UNDO_COMMAND, undefined)}\n            title=\"Undo (Ctrl+Z)\"\n            variant=\"ghost\">\n            <ReloadIcon className=\"-scale-x-100 transform\" />\n          </Button>\n        )}\n\n        {toolbarOptions.includes(\"redo\") && (\n          <Button\n            className=\"h-8 px-2\"\n            disabled={!canRedo || isPreview}\n            onClick={() => editor.dispatchCommand(REDO_COMMAND, undefined)}\n            title=\"Redo (Ctrl+Y)\"\n            variant=\"ghost\">\n            <ReloadIcon className=\"rotate-180\" />\n          </Button>\n        )}\n\n        {enablePreview && (\n          <div className=\"flex items-center gap-1 pr-2\">\n            <Button\n              onClick={() => setIsPreview(false)}\n              size=\"sm\"\n              type=\"button\"\n              variant={!isPreview ? \"secondary\" : \"ghost\"}>\n              Write\n            </Button>\n            <Button\n              onClick={() => setIsPreview(true)}\n              size=\"sm\"\n              type=\"button\"\n              variant={isPreview ? \"secondary\" : \"ghost\"}>\n              Preview\n            </Button>\n          </div>\n        )}\n\n        {toolbarOptions.includes(\"blockTypes\") && (\n          <>\n            <Separator className=\"my-1 h-auto\" orientation=\"vertical\" />\n            <BlockTypeDropdown blockType={toolbarState.blockType} />\n          </>\n        )}\n\n        {toolbarOptions.includes(\"bold\") && (\n          <ToolbarButton\n            command={FORMAT_TEXT_COMMAND}\n            disabled={isPreview}\n            payload=\"bold\"\n            title=\"Bold (Ctrl+B)\">\n            <FontBoldIcon />\n          </ToolbarButton>\n        )}\n\n        {toolbarOptions.includes(\"italic\") && (\n          <ToolbarButton\n            command={FORMAT_TEXT_COMMAND}\n            disabled={isPreview}\n            payload=\"italic\"\n            title=\"Italic (Ctrl+I)\">\n            <FontItalicIcon />\n          </ToolbarButton>\n        )}\n\n        {toolbarOptions.includes(\"underline\") && (\n          <ToolbarButton\n            command={FORMAT_TEXT_COMMAND}\n            disabled={isPreview}\n            payload=\"underline\"\n            title=\"Underline (Ctrl+U)\">\n            <UnderlineIcon />\n          </ToolbarButton>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/esm/components/editor/formatting.d.ts

@@ -0,0 +1,15 @@
+import { HeadingTagType } from "@lexical/rich-text";
+import { LexicalEditor } from "lexical";
+
+//#region src/components/editor/formatting.d.ts
+declare function clearFormatting(editor: any, updateToolbarState: (key: string, value: any) => void): void;
+declare function formatCheckList(editor: any, currentBlockType: string, updateToolbarState: (key: string, value: any) => void): void;
+declare const formatCode: (editor: LexicalEditor, blockType: string, updateToolbarState: (key: string, value: any) => void) => void;
+declare function formatParagraph(editor: LexicalEditor, updateToolbarState: (key: string, value: any) => void): void;
+declare const formatHeading: (editor: LexicalEditor, blockType: string, headingSize: HeadingTagType, updateToolbarState: (key: string, value: any) => void) => void;
+declare const formatQuote: (editor: LexicalEditor, blockType: string, updateToolbarState: (key: string, value: any) => void) => void;
+declare const formatBulletList: (editor: LexicalEditor, blockType: string, updateToolbarState: (key: string, value: any) => void) => void;
+declare const formatOrderedList: (editor: LexicalEditor, blockType: string, updateToolbarState: (key: string, value: any) => void) => void;
+//#endregion
+export { clearFormatting, formatBulletList, formatCheckList, formatCode, formatHeading, formatOrderedList, formatParagraph, formatQuote };
+//# sourceMappingURL=formatting.d.ts.map

package/dist/esm/components/editor/formatting.js

@@ -0,0 +1,117 @@
+import { $createCodeNode } from "@lexical/code";
+import { $isListNode, INSERT_CHECK_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND } from "@lexical/list";
+import { $createHeadingNode, $createQuoteNode, $isHeadingNode } from "@lexical/rich-text";
+import { $setBlocksType } from "@lexical/selection";
+import { $findMatchingParent } from "@lexical/utils";
+import { $createParagraphNode, $getSelection, $isRangeSelection, $isRootOrShadowRoot } from "lexical";
+
+//#region src/components/editor/formatting.ts
+function clearFormatting(editor, updateToolbarState) {
+	editor.update(() => {
+		const selection = $getSelection();
+		if ($isRangeSelection(selection)) {
+			const anchorNode = selection.anchor.getNode();
+			const element = anchorNode.getKey() === "root" ? anchorNode : $findMatchingParent(anchorNode, (e) => {
+				const parent = e.getParent();
+				return parent !== null && $isRootOrShadowRoot(parent);
+			});
+			if (element === null) return;
+			if (($isHeadingNode(element) ? element.getTag() : $isListNode(element) ? element.getListType() : element.getType()) === "paragraph") {
+				const textContent = selection.getTextContent();
+				const paragraphNode = $createParagraphNode();
+				selection.insertNodes([paragraphNode]);
+				const newSelection = $getSelection();
+				if ($isRangeSelection(newSelection)) newSelection.insertRawText(textContent);
+			} else $setBlocksType(selection, () => $createParagraphNode());
+			updateToolbarState("isBold", false);
+			updateToolbarState("isItalic", false);
+			updateToolbarState("isUnderline", false);
+			updateToolbarState("isStrikethrough", false);
+			updateToolbarState("isSubscript", false);
+			updateToolbarState("isSuperscript", false);
+			updateToolbarState("isClear", true);
+			updateToolbarState("blockType", "paragraph");
+			updateToolbarState("isBold", false);
+			updateToolbarState("isItalic", false);
+			updateToolbarState("isUnderline", false);
+			updateToolbarState("isStrikethrough", false);
+			updateToolbarState("isSubscript", false);
+			updateToolbarState("isSuperscript", false);
+			updateToolbarState("isClear", true);
+		}
+	});
+}
+function formatCheckList(editor, currentBlockType, updateToolbarState) {
+	if (currentBlockType !== "check") {
+		editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, void 0);
+		updateToolbarState("blockType", "check");
+	} else formatParagraph(editor, updateToolbarState);
+}
+const formatCode = (editor, blockType, updateToolbarState) => {
+	if (blockType !== "code") {
+		editor.update(() => {
+			let selection = $getSelection();
+			if (!selection) return;
+			if (!$isRangeSelection(selection) || selection.isCollapsed()) $setBlocksType(selection, () => $createCodeNode());
+			else {
+				const textContent = selection.getTextContent();
+				const codeNode = $createCodeNode();
+				selection.insertNodes([codeNode]);
+				selection = $getSelection();
+				if ($isRangeSelection(selection)) selection.insertRawText(textContent);
+			}
+		});
+		updateToolbarState("blockType", "code");
+	}
+};
+function formatParagraph(editor, updateToolbarState) {
+	editor.update(() => {
+		$setBlocksType($getSelection(), () => $createParagraphNode());
+		updateToolbarState("blockType", "paragraph");
+	});
+}
+const formatHeading = (editor, blockType, headingSize, updateToolbarState) => {
+	if (blockType !== headingSize) editor.update(() => {
+		const selection = $getSelection();
+		if ($isRangeSelection(selection)) {
+			const anchorNode = selection.anchor.getNode();
+			let element = anchorNode.getKey() === "root" ? anchorNode : $findMatchingParent(anchorNode, (e) => {
+				const parent = e.getParent();
+				return parent !== null && $isRootOrShadowRoot(parent);
+			});
+			if (element === null) element = anchorNode.getTopLevelElementOrThrow();
+			if (($isHeadingNode(element) ? element.getTag() : $isListNode(element) ? element.getListType() : element.getType()) === headingSize) {
+				$setBlocksType(selection, () => $createParagraphNode());
+				updateToolbarState("blockType", "paragraph");
+			} else {
+				$setBlocksType(selection, () => $createHeadingNode(headingSize));
+				updateToolbarState("blockType", headingSize);
+			}
+		}
+	});
+};
+const formatQuote = (editor, blockType, updateToolbarState) => {
+	if (blockType !== "quote") editor.update(() => {
+		$setBlocksType($getSelection(), () => $createQuoteNode());
+		updateToolbarState("blockType", "paragraph");
+	});
+};
+const formatBulletList = (editor, blockType, updateToolbarState) => {
+	if (blockType !== "bullet") {
+		editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, void 0);
+		updateToolbarState("blockType", "bullet");
+	} else formatParagraph(editor, updateToolbarState);
+};
+const formatOrderedList = (editor, blockType, updateToolbarState) => {
+	if (blockType !== "number") {
+		editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, void 0);
+		updateToolbarState("blockType", "number");
+	} else {
+		editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0);
+		updateToolbarState("blockType", "paragraph");
+	}
+};
+
+//#endregion
+export { clearFormatting, formatBulletList, formatCheckList, formatCode, formatHeading, formatOrderedList, formatParagraph, formatQuote };
+//# sourceMappingURL=formatting.js.map

package/dist/esm/components/editor/formatting.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatting.js","names":[],"sources":["../../../../src/components/editor/formatting.ts"],"sourcesContent":["import { $createCodeNode } from \"@lexical/code\";\nimport {\n  $isListNode,\n  INSERT_CHECK_LIST_COMMAND,\n  INSERT_ORDERED_LIST_COMMAND,\n  INSERT_UNORDERED_LIST_COMMAND,\n  REMOVE_LIST_COMMAND,\n} from \"@lexical/list\";\nimport {\n  $createHeadingNode,\n  $createQuoteNode,\n  $isHeadingNode,\n  HeadingTagType,\n} from \"@lexical/rich-text\";\nimport { $setBlocksType } from \"@lexical/selection\";\nimport { $findMatchingParent } from \"@lexical/utils\";\nimport {\n  $createParagraphNode,\n  $getSelection,\n  $isRangeSelection,\n  $isRootOrShadowRoot,\n  LexicalEditor,\n} from \"lexical\";\n\nimport { blockTypeToBlockName } from \"./ToolbarContext\";\n\nexport function clearFormatting(\n  editor: any,\n  updateToolbarState: (key: string, value: any) => void,\n) {\n  editor.update(() => {\n    const selection = $getSelection();\n    if ($isRangeSelection(selection)) {\n      const anchorNode = selection.anchor.getNode();\n      const element =\n        anchorNode.getKey() === \"root\"\n          ? anchorNode\n          : $findMatchingParent(anchorNode, (e) => {\n              const parent = e.getParent();\n              return parent !== null && $isRootOrShadowRoot(parent);\n            });\n\n      if (element === null) return;\n\n      const currentBlockType = $isHeadingNode(element)\n        ? element.getTag()\n        : $isListNode(element)\n          ? element.getListType()\n          : element.getType();\n\n      if (currentBlockType === \"paragraph\") {\n        const textContent = selection.getTextContent();\n        const paragraphNode = $createParagraphNode();\n        selection.insertNodes([paragraphNode]);\n        const newSelection = $getSelection();\n        if ($isRangeSelection(newSelection)) {\n          newSelection.insertRawText(textContent);\n        }\n      } else {\n        $setBlocksType(selection, () => $createParagraphNode());\n      }\n\n      updateToolbarState(\"isBold\", false);\n      updateToolbarState(\"isItalic\", false);\n      updateToolbarState(\"isUnderline\", false);\n      updateToolbarState(\"isStrikethrough\", false);\n      updateToolbarState(\"isSubscript\", false);\n      updateToolbarState(\"isSuperscript\", false);\n      updateToolbarState(\"isClear\", true);\n\n      updateToolbarState(\"blockType\", \"paragraph\");\n      updateToolbarState(\"isBold\", false);\n      updateToolbarState(\"isItalic\", false);\n      updateToolbarState(\"isUnderline\", false);\n      updateToolbarState(\"isStrikethrough\", false);\n      updateToolbarState(\"isSubscript\", false);\n      updateToolbarState(\"isSuperscript\", false);\n      updateToolbarState(\"isClear\", true);\n    }\n  });\n}\n\nexport function formatCheckList(\n  editor: any,\n  currentBlockType: string,\n  updateToolbarState: (key: string, value: any) => void,\n) {\n  if (currentBlockType !== \"check\") {\n    editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, undefined);\n    updateToolbarState(\"blockType\", \"check\");\n  } else {\n    formatParagraph(editor, updateToolbarState);\n  }\n}\n\nexport const formatCode = (\n  editor: LexicalEditor,\n  blockType: string,\n  updateToolbarState: (key: string, value: any) => void,\n) => {\n  if (blockType !== \"code\") {\n    editor.update(() => {\n      let selection = $getSelection();\n      if (!selection) {\n        return;\n      }\n      if (!$isRangeSelection(selection) || selection.isCollapsed()) {\n        $setBlocksType(selection, () => $createCodeNode());\n      } else {\n        const textContent = selection.getTextContent();\n        const codeNode = $createCodeNode();\n        selection.insertNodes([codeNode]);\n        selection = $getSelection();\n        if ($isRangeSelection(selection)) {\n          selection.insertRawText(textContent);\n        }\n      }\n    });\n    updateToolbarState(\"blockType\", \"code\");\n  }\n};\n\nexport function formatParagraph(\n  editor: LexicalEditor,\n  updateToolbarState: (key: string, value: any) => void,\n) {\n  editor.update(() => {\n    const selection = $getSelection();\n    $setBlocksType(selection, () => $createParagraphNode());\n    updateToolbarState(\"blockType\", \"paragraph\");\n  });\n}\n\nexport const formatHeading = (\n  editor: LexicalEditor,\n  blockType: string,\n  headingSize: HeadingTagType,\n  updateToolbarState: (key: string, value: any) => void,\n) => {\n  if (blockType !== headingSize) {\n    editor.update(() => {\n      const selection = $getSelection();\n      if ($isRangeSelection(selection)) {\n        const anchorNode = selection.anchor.getNode();\n        let element =\n          anchorNode.getKey() === \"root\"\n            ? anchorNode\n            : $findMatchingParent(anchorNode, (e) => {\n                const parent = e.getParent();\n                return parent !== null && $isRootOrShadowRoot(parent);\n              });\n\n        if (element === null) {\n          element = anchorNode.getTopLevelElementOrThrow();\n        }\n\n        const currentBlockType = $isHeadingNode(element)\n          ? element.getTag()\n          : $isListNode(element)\n            ? element.getListType()\n            : element.getType();\n\n        if (currentBlockType === headingSize) {\n          $setBlocksType(selection, () => $createParagraphNode());\n          updateToolbarState(\"blockType\", \"paragraph\");\n        } else {\n          $setBlocksType(selection, () => $createHeadingNode(headingSize));\n          updateToolbarState(\n            \"blockType\",\n            headingSize as keyof typeof blockTypeToBlockName,\n          );\n        }\n      }\n    });\n  }\n};\n\nexport const formatQuote = (\n  editor: LexicalEditor,\n  blockType: string,\n  updateToolbarState: (key: string, value: any) => void,\n) => {\n  if (blockType !== \"quote\") {\n    editor.update(() => {\n      const selection = $getSelection();\n      $setBlocksType(selection, () => $createQuoteNode());\n      updateToolbarState(\"blockType\", \"paragraph\");\n    });\n  }\n};\n\nexport const formatBulletList = (\n  editor: LexicalEditor,\n  blockType: string,\n  updateToolbarState: (key: string, value: any) => void,\n) => {\n  if (blockType !== \"bullet\") {\n    editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);\n    updateToolbarState(\"blockType\", \"bullet\");\n  } else {\n    formatParagraph(editor, updateToolbarState);\n  }\n};\n\nexport const formatOrderedList = (\n  editor: LexicalEditor,\n  blockType: string,\n  updateToolbarState: (key: string, value: any) => void,\n) => {\n  if (blockType !== \"number\") {\n    editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);\n    updateToolbarState(\"blockType\", \"number\");\n  } else {\n    editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);\n    updateToolbarState(\"blockType\", \"paragraph\");\n  }\n};\n"],"mappings":"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"}

package/dist/esm/components/editor/index.d.ts

@@ -0,0 +1,3 @@
+import { EditorProps, ToolbarOption } from "./EditorInner.js";
+import { Editor } from "./Editor.js";
+export { Editor, EditorProps, ToolbarOption };

package/dist/esm/components/editor/index.js

@@ -0,0 +1,3 @@
+import { Editor } from "./Editor.js";
+
+export { Editor };

package/dist/esm/components/form/FormGroup.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+
+//#region src/components/form/FormGroup.d.ts
+interface FormGroupProps {
+  children: React.ReactNode;
+  className?: string;
+  description?: string;
+  title?: string;
+}
+declare const FormGroup: ({
+  children,
+  className,
+  description,
+  title
+}: FormGroupProps) => any;
+//#endregion
+export { FormGroup };
+//# sourceMappingURL=FormGroup.d.ts.map

package/dist/esm/components/form/FormGroup.js

@@ -0,0 +1,28 @@
+import { cn } from "@lumeweb/portal-framework-ui-core";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/form/FormGroup.tsx
+const FormGroup = ({ children, className, description, title }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(className),
+		children: title || description ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			title && /* @__PURE__ */ jsx("h3", {
+				className: "text-lg font-medium",
+				children: title
+			}),
+			description && /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-sm",
+				children: description
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "space-y-4",
+				children
+			})
+		] }) : children
+	});
+};
+
+//#endregion
+export { FormGroup };
+//# sourceMappingURL=FormGroup.js.map

package/dist/esm/components/form/FormGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormGroup.js","names":[],"sources":["../../../../src/components/form/FormGroup.tsx"],"sourcesContent":["import { cn } from \"@lumeweb/portal-framework-ui-core\";\nimport React from \"react\";\n\ninterface FormGroupProps {\n  children: React.ReactNode;\n  className?: string;\n  description?: string;\n  title?: string;\n}\n\nexport const FormGroup = ({\n  children,\n  className,\n  description,\n  title,\n}: FormGroupProps) => {\n  return (\n    <div className={cn(className)}>\n      {title || description ? (\n        <>\n          {title && <h3 className=\"text-lg font-medium\">{title}</h3>}\n          {description && (\n            <p className=\"text-muted-foreground text-sm\">{description}</p>\n          )}\n          <div className=\"space-y-4\">{children}</div>\n        </>\n      ) : (\n        children\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;AAUA,MAAa,aAAa,EACxB,UACA,WACA,aACA,YACoB;AACpB,QACE,oBAAC,OAAD;EAAK,WAAW,GAAG,UAAU;YAC1B,SAAS,cACR;GACG,SAAS,oBAAC,MAAD;IAAI,WAAU;cAAuB;IAAW;GACzD,eACC,oBAAC,KAAD;IAAG,WAAU;cAAiC;IAAgB;GAEhE,oBAAC,OAAD;IAAK,WAAU;IAAa;IAAe;GAC1C,MAEH;EAEE"}

package/dist/esm/components/form/FormRenderer.d.ts

@@ -0,0 +1,14 @@
+import { FormFieldConfig, FormGroupType } from "./types.js";
+import { FieldValues } from "react-hook-form";
+
+//#region src/components/form/FormRenderer.d.ts
+declare function FormRenderer<TRequest extends FieldValues = FieldValues>({
+  fields,
+  groups
+}: {
+  fields?: FormFieldConfig<TRequest>[];
+  groups?: FormGroupType[];
+}): any;
+//#endregion
+export { FormRenderer };
+//# sourceMappingURL=FormRenderer.d.ts.map

package/dist/esm/components/form/FormRenderer.js

@@ -0,0 +1,179 @@
+import { adapters } from "./adapters.js";
+import { useFormContext as useFormContext$1 } from "./context.js";
+import { getFormComponent } from "./fields/registry.js";
+import { FormFieldType } from "./fields/types.js";
+import "./fields/index.js";
+import { FormGroup } from "./FormGroup.js";
+import { getAutocompleteValue } from "./autocomplete/rules.js";
+import "./autocomplete/index.js";
+import { useOptionalStepControlContext } from "./StepControlContext.js";
+import { GroupOrder } from "./types.js";
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Spinner, cn } from "@lumeweb/portal-framework-ui-core";
+import React, { useEffect, useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useFormContext } from "react-hook-form";
+import { get } from "lodash/get.js";
+
+//#region src/components/form/FormRenderer.tsx
+function FormRenderer({ fields = [], groups = [] }) {
+	const { groupedFields, ungroupedFields } = React.useMemo(() => {
+		const grouped = {};
+		const ungrouped = [];
+		groups?.forEach((group) => {
+			grouped[group.id] = [];
+		});
+		fields.forEach((field) => {
+			if (field.group && grouped[field.group]) grouped[field.group].push(field);
+			else ungrouped.push(field);
+		});
+		return {
+			groupedFields: grouped,
+			ungroupedFields: ungrouped
+		};
+	}, [fields, groups]);
+	const { adapter: adapterName, config } = useFormContext$1();
+	if (!adapters[adapterName]) throw new Error(`Form adapter "${String(adapterName)}" is not registered`);
+	const groupOrder = config.groupOrder ?? "ungrouped-first";
+	const renderGroups = () => /* @__PURE__ */ jsx(Fragment, { children: groups?.map((group) => {
+		const groupFields = groupedFields[group.id];
+		if (!groupFields?.length) return null;
+		return /* @__PURE__ */ jsx(FormGroup, {
+			className: group.className,
+			description: group.description,
+			title: group.title,
+			children: groupFields.map((field) => /* @__PURE__ */ jsx(FieldRenderer, { field }, field.name))
+		}, group.id);
+	}) });
+	const renderUngrouped = () => /* @__PURE__ */ jsx(Fragment, { children: ungroupedFields.map((field) => /* @__PURE__ */ jsx(FieldRenderer, { field }, field.name)) });
+	return /* @__PURE__ */ jsx(Fragment, { children: groupOrder === "groups-first" ? /* @__PURE__ */ jsxs(Fragment, { children: [renderGroups(), renderUngrouped()] }) : /* @__PURE__ */ jsxs(Fragment, { children: [renderUngrouped(), renderGroups()] }) });
+}
+function FieldRenderer({ field }) {
+	const rhfMethods = useFormContext();
+	const { control, getValues, watch } = rhfMethods;
+	const [isVisible, setIsVisible] = useState(true);
+	const [isLoading, setIsLoading] = useState(false);
+	const { config: formConfig } = useFormContext$1();
+	const dependencies = useMemo(() => field.dependencies || [], [field.dependencies]);
+	const autoCompleteValue = useMemo(() => getFieldAutocompleteValue(field, formConfig?.action), [field, formConfig?.action]);
+	useEffect(() => {
+		const subscription = watch((values, { name }) => {
+			if (!dependencies.length || name && dependencies.includes(name)) checkVisibility();
+		});
+		const checkVisibility = async () => {
+			if (!getValues) return;
+			const currentValues = getValues();
+			let shouldShow = true;
+			if (field.requires) {
+				for (const requiredFieldPath in field.requires) if (Object.prototype.hasOwnProperty.call(field.requires, requiredFieldPath)) {
+					const requirement = field.requires[requiredFieldPath];
+					const actualValue = get(currentValues, requiredFieldPath);
+					let requirementMet = false;
+					if (typeof requirement === "function") requirementMet = requirement(actualValue);
+					else requirementMet = actualValue === requirement;
+					if (!requirementMet) {
+						shouldShow = false;
+						break;
+					}
+				}
+			}
+			if (shouldShow && field.show) try {
+				const showPromiseOrValue = field.show(currentValues);
+				if (showPromiseOrValue instanceof Promise) {
+					setIsLoading(true);
+					shouldShow = await showPromiseOrValue;
+					if (isLoading) setIsLoading(false);
+				} else {
+					shouldShow = showPromiseOrValue;
+					if (isLoading) setIsLoading(false);
+				}
+			} catch (error) {
+				console.error(`Error checking show status for field ${String(field.name)}:`, error);
+				shouldShow = false;
+				if (isLoading) setIsLoading(false);
+			}
+			else if (!field.show) {
+				if (isLoading) setIsLoading(false);
+			} else if (isLoading) setIsLoading(false);
+			setIsVisible((prev) => {
+				if (prev !== shouldShow) return shouldShow;
+				return prev;
+			});
+		};
+		checkVisibility();
+		return () => subscription.unsubscribe();
+	}, [
+		dependencies,
+		field,
+		getValues,
+		isLoading,
+		watch
+	]);
+	if (isLoading) return /* @__PURE__ */ jsxs(FormItem, {
+		className: cn(field.className, field.itemClassName),
+		children: [
+			field.label && /* @__PURE__ */ jsx(FormLabel, { children: field.label }),
+			/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx("div", {
+				className: "flex h-14 items-center justify-center",
+				children: /* @__PURE__ */ jsx(Spinner, { size: "small" })
+			}) }),
+			field.description && /* @__PURE__ */ jsx(FormDescription, { children: field.description })
+		]
+	});
+	if (!isVisible) return null;
+	const componentEntry = getFormComponent(field.type);
+	const RegisteredComponent = componentEntry?.component;
+	if (!componentEntry && field.type !== "custom") {
+		console.warn(`No component registered for form field type: ${field.type}`);
+		return null;
+	}
+	return /* @__PURE__ */ jsx(FormField, {
+		control,
+		name: field.name,
+		render: ({ field: formFieldRenderProps }) => /* @__PURE__ */ jsxs(FormItem, {
+			className: cn(field.className, field.itemClassName),
+			children: [
+				field.label && !componentEntry?.handlesLabel && /* @__PURE__ */ jsxs(FormLabel, {
+					className: field.labelClassName,
+					children: [field.label, field.required && isVisible && /* @__PURE__ */ jsx("span", {
+						className: "text-destructive",
+						children: "*"
+					})]
+				}),
+				/* @__PURE__ */ jsx(FormControl, { children: RegisteredComponent ? /* @__PURE__ */ jsx(RegisteredComponent, {
+					...formFieldRenderProps,
+					...field.inputProps,
+					autocomplete: autoCompleteValue,
+					inputClassName: field.inputClassName,
+					label: componentEntry?.handlesLabel ? field.label : void 0,
+					options: field.options,
+					placeholder: field.placeholder,
+					required: field.required,
+					type: field.type
+				}) : field.component ? /* @__PURE__ */ jsx(field.component, {
+					...formFieldRenderProps,
+					formMethods: rhfMethods,
+					stepEnvironment: useOptionalStepControlContext() ? {
+						current: useOptionalStepControlContext()?.currentStep || 0,
+						isFirst: useOptionalStepControlContext()?.isFirstStep || false,
+						isLast: useOptionalStepControlContext()?.isLastStep || false,
+						jumpTo: useOptionalStepControlContext()?.jumpTo,
+						onNext: useOptionalStepControlContext()?.handleNext,
+						onPrevious: useOptionalStepControlContext()?.handlePrevious,
+						onRetry: useOptionalStepControlContext()?.handleRetry,
+						retryCount: useOptionalStepControlContext()?.retryCount || 0,
+						total: useOptionalStepControlContext()?.totalSteps || 0
+					} : void 0
+				}) : null }),
+				field.description && /* @__PURE__ */ jsx(FormDescription, { children: field.description }),
+				/* @__PURE__ */ jsx(FormMessage, {})
+			]
+		})
+	}, field.name);
+}
+function getFieldAutocompleteValue(field, formPurpose) {
+	return field.autocomplete ?? getAutocompleteValue(field, { formPurpose }) ?? field.inputProps?.autocomplete;
+}
+
+//#endregion
+export { FormRenderer };
+//# sourceMappingURL=FormRenderer.js.map