@lumeweb/portal-framework-ui 0.1.0 → 0.1.1

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

@@ -1,17 +1,68 @@
-import { __esmMin } from "../../_virtual/rolldown_runtime.js";
-import { blockTypeToBlockName, init_ToolbarContext, useToolbarState } from "./ToolbarContext.js";
-import BlockTypeDropdown, { init_BlockTypeDropdown } from "./BlockTypeDropdown.js";
+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 { $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 { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 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();
@@ -137,65 +188,7 @@ function ToolbarPlugin({ enablePreview = true, isPreview, setIsPreview, toolbarO
 		})
 	});
 }
-var defaultToolbarOptions, formatToStateKey, ToolbarButton;
-var init_ToolbarPlugin = __esmMin(() => {
-	init_BlockTypeDropdown();
-	init_ToolbarContext();
-	defaultToolbarOptions = [
-		"bold",
-		"italic",
-		"underline",
-		"undo",
-		"redo",
-		"blockTypes"
-	];
-	formatToStateKey = {
-		bold: "isBold",
-		clear: "isClear",
-		italic: "isItalic",
-		strikethrough: "isStrikethrough",
-		subscript: "isSubscript",
-		superscript: "isSuperscript",
-		underline: "isUnderline"
-	};
-	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
-		});
-	};
-});
 
 //#endregion
-init_ToolbarPlugin();
-export { ToolbarPlugin, defaultToolbarOptions, init_ToolbarPlugin };
+export { ToolbarPlugin, defaultToolbarOptions };
 //# sourceMappingURL=ToolbarPlugin.js.map

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

@@ -1 +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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"}
+{"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.js

@@ -1,10 +1,9 @@
-import { __esmMin } from "../../_virtual/rolldown_runtime.js";
 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 { $createParagraphNode, $getSelection, $isRangeSelection, $isRootOrShadowRoot } from "lexical";
-import { $findMatchingParent } from "@lexical/utils";
 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) {
@@ -48,75 +47,71 @@ function formatCheckList(editor, currentBlockType, updateToolbarState) {
 		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");
 	});
 }
-var formatCode, formatHeading, formatQuote, formatBulletList, formatOrderedList;
-var init_formatting = __esmMin(() => {
-	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);
-				}
+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);
 			});
-			updateToolbarState("blockType", "code");
-		}
-	};
-	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);
-				}
+			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);
 			}
-		});
-	};
-	formatQuote = (editor, blockType, updateToolbarState) => {
-		if (blockType !== "quote") editor.update(() => {
-			$setBlocksType($getSelection(), () => $createQuoteNode());
-			updateToolbarState("blockType", "paragraph");
-		});
-	};
-	formatBulletList = (editor, blockType, updateToolbarState) => {
-		if (blockType !== "bullet") {
-			editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, void 0);
-			updateToolbarState("blockType", "bullet");
-		} else formatParagraph(editor, updateToolbarState);
-	};
-	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");
 		}
-	};
-});
+	});
+};
+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
-init_formatting();
-export { clearFormatting, formatBulletList, formatCheckList, formatCode, formatHeading, formatOrderedList, formatParagraph, formatQuote, init_formatting };
+export { clearFormatting, formatBulletList, formatCheckList, formatCode, formatHeading, formatOrderedList, formatParagraph, formatQuote };
 //# sourceMappingURL=formatting.js.map

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

@@ -1 +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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"}
+{"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

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

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

@@ -1,12 +1,3 @@
-import { __esmMin } from "../../_virtual/rolldown_runtime.js";
-import { Editor, init_Editor } from "./Editor.js";
+import { Editor } from "./Editor.js";
 
-//#region src/components/editor/index.ts
-var init_editor = __esmMin(() => {
-	init_Editor();
-});
-
-//#endregion
-init_editor();
-export { Editor, init_editor };
-//# sourceMappingURL=index.js.map
+export { Editor };

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

@@ -1,33 +1,28 @@
-import { __esmMin } from "../../_virtual/rolldown_runtime.js";
 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
-var FormGroup;
-var init_FormGroup = __esmMin(() => {
-	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
-		});
-	};
-});
+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
-init_FormGroup();
-export { FormGroup, init_FormGroup };
+export { FormGroup };
 //# sourceMappingURL=FormGroup.js.map

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

@@ -1 +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":";;;;;;;;CAUa,aAAa,EACxB,UACA,WACA,aACA,YACoB;AACpB,SACE,oBAAC;GAAI,WAAW,GAAG,UAAU;aAC1B,SAAS,cACR;IACG,SAAS,oBAAC;KAAG,WAAU;eAAuB;MAAW;IACzD,eACC,oBAAC;KAAE,WAAU;eAAiC;MAAgB;IAEhE,oBAAC;KAAI,WAAU;KAAa;MAAe;OAC1C,GAEH;IAEE"}
+{"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.js

@@ -1,19 +1,18 @@
-import { __esmMin } from "../../_virtual/rolldown_runtime.js";
-import { adapters, init_adapters } from "./adapters.js";
-import { init_context, useFormContext as useFormContext$1 } from "./context.js";
+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 { init_fields } from "./fields/index.js";
-import { FormGroup, init_FormGroup } from "./FormGroup.js";
+import "./fields/index.js";
+import { FormGroup } from "./FormGroup.js";
 import { getAutocompleteValue } from "./autocomplete/rules.js";
-import { init_autocomplete } from "./autocomplete/index.js";
-import { init_StepControlContext, useOptionalStepControlContext } from "./StepControlContext.js";
-import { GroupOrder, init_types } from "./types.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";
+import { get } from "lodash/get.js";
 
 //#region src/components/form/FormRenderer.tsx
 function FormRenderer({ fields = [], groups = [] }) {
@@ -34,7 +33,7 @@ function FormRenderer({ fields = [], groups = [] }) {
 	}, [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 ?? GroupOrder.UNGROUPED_FIRST;
+	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;
@@ -46,7 +45,7 @@ function FormRenderer({ fields = [], groups = [] }) {
 		}, group.id);
 	}) });
 	const renderUngrouped = () => /* @__PURE__ */ jsx(Fragment, { children: ungroupedFields.map((field) => /* @__PURE__ */ jsx(FieldRenderer, { field }, field.name)) });
-	return /* @__PURE__ */ jsx(Fragment, { children: groupOrder === GroupOrder.GROUPS_FIRST ? /* @__PURE__ */ jsxs(Fragment, { children: [renderGroups(), renderUngrouped()] }) : /* @__PURE__ */ jsxs(Fragment, { children: [renderUngrouped(), renderGroups()] }) });
+	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();
@@ -123,7 +122,7 @@ function FieldRenderer({ field }) {
 	if (!isVisible) return null;
 	const componentEntry = getFormComponent(field.type);
 	const RegisteredComponent = componentEntry?.component;
-	if (!componentEntry && field.type !== FormFieldType.CUSTOM) {
+	if (!componentEntry && field.type !== "custom") {
 		console.warn(`No component registered for form field type: ${field.type}`);
 		return null;
 	}
@@ -174,17 +173,7 @@ function FieldRenderer({ field }) {
 function getFieldAutocompleteValue(field, formPurpose) {
 	return field.autocomplete ?? getAutocompleteValue(field, { formPurpose }) ?? field.inputProps?.autocomplete;
 }
-var init_FormRenderer = __esmMin(() => {
-	init_adapters();
-	init_autocomplete();
-	init_context();
-	init_fields();
-	init_FormGroup();
-	init_StepControlContext();
-	init_types();
-});
 
 //#endregion
-init_FormRenderer();
-export { FormRenderer, init_FormRenderer };
+export { FormRenderer };
 //# sourceMappingURL=FormRenderer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormRenderer.js","names":["useFormContext","useRHFContext"],"sources":["../../../../src/components/form/FormRenderer.tsx"],"sourcesContent":["import {\n  cn,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n  Spinner,\n} from \"@lumeweb/portal-framework-ui-core\";\nimport { get } from \"lodash/get\";\nimport React, { useEffect, useMemo, useState } from \"react\";\nimport {\n  FieldValues,\n  Path as ReactHookFormPath,\n  useFormContext as useRHFContext,\n} from \"react-hook-form\";\n\nimport { adapters } from \"./adapters\";\nimport { getAutocompleteValue } from \"./autocomplete\";\nimport { useFormContext } from \"./context\";\nimport { FormFieldType, getFormComponent } from \"./fields\";\nimport { FormGroup } from \"./FormGroup\";\nimport { useOptionalStepControlContext } from \"./StepControlContext\";\nimport { type FormFieldConfig, type FormGroupType, GroupOrder } from \"./types\";\n\ninterface FieldRendererProps<TFieldValues extends FieldValues> {\n  field: FormFieldConfig<TFieldValues>;\n}\n\nexport function FormRenderer<TRequest extends FieldValues = FieldValues>({\n  fields = [],\n  groups = [],\n}: {\n  fields?: FormFieldConfig<TRequest>[];\n  groups?: FormGroupType[];\n}) {\n  // Group fields by their group ID\n  const { groupedFields, ungroupedFields } = React.useMemo(() => {\n    const grouped: Record<string, FormFieldConfig<TRequest>[]> = {};\n    const ungrouped: FormFieldConfig<TRequest>[] = [];\n\n    // Initialize groups\n    groups?.forEach((group) => {\n      grouped[group.id] = [];\n    });\n\n    // Distribute fields\n    fields.forEach((field) => {\n      if (field.group && grouped[field.group]) {\n        grouped[field.group].push(field);\n      } else {\n        ungrouped.push(field);\n      }\n    });\n\n    return { groupedFields: grouped, ungroupedFields: ungrouped };\n  }, [fields, groups]);\n  const { adapter: adapterName, config } = useFormContext();\n  const adapter = adapters[adapterName];\n\n  if (!adapter) {\n    throw new Error(`Form adapter \"${String(adapterName)}\" is not registered`);\n  }\n\n  const groupOrder = config.groupOrder ?? GroupOrder.UNGROUPED_FIRST;\n\n  const renderGroups = () => (\n    <>\n      {groups?.map((group) => {\n        const groupFields = groupedFields[group.id];\n        if (!groupFields?.length) return null;\n\n        return (\n          <FormGroup\n            className={group.className}\n            description={group.description}\n            key={group.id}\n            title={group.title}>\n            {groupFields.map((field) => (\n              <FieldRenderer field={field} key={field.name as string} />\n            ))}\n          </FormGroup>\n        );\n      })}\n    </>\n  );\n\n  const renderUngrouped = () => (\n    <>\n      {ungroupedFields.map((field) => (\n        <FieldRenderer field={field} key={field.name as string} />\n      ))}\n    </>\n  );\n\n  return (\n    <>\n      {groupOrder === GroupOrder.GROUPS_FIRST ? (\n        <>\n          {renderGroups()}\n          {renderUngrouped()}\n        </>\n      ) : (\n        <>\n          {renderUngrouped()}\n          {renderGroups()}\n        </>\n      )}\n    </>\n  );\n}\n\nfunction FieldRenderer<TFieldValues extends FieldValues = FieldValues>({\n  field,\n}: FieldRendererProps<TFieldValues>) {\n  const rhfMethods = useRHFContext<TFieldValues>();\n  const { control, getValues, watch } = rhfMethods;\n  const [isVisible, setIsVisible] = useState(true);\n  const [isLoading, setIsLoading] = useState(false);\n  const { config: formConfig } = useFormContext();\n\n  const dependencies = useMemo(\n    () => field.dependencies || [],\n    [field.dependencies],\n  );\n\n  const autoCompleteValue = useMemo(\n    () => getFieldAutocompleteValue(field, formConfig?.action),\n    [field, formConfig?.action],\n  );\n\n  useEffect(() => {\n    // Subscribe to form changes and check visibility when relevant fields change\n    const subscription = watch((values, { name }) => {\n      // Only check visibility if dependencies are empty (watch all) or changed field is in dependencies\n      if (!dependencies.length || (name && dependencies.includes(name))) {\n        checkVisibility();\n      }\n    });\n\n    const checkVisibility = async () => {\n      if (!getValues) return;\n\n      const currentValues = getValues();\n      let shouldShow = true;\n\n      if (field.requires) {\n        for (const requiredFieldPath in field.requires) {\n          if (\n            Object.prototype.hasOwnProperty.call(\n              field.requires,\n              requiredFieldPath,\n            )\n          ) {\n            const requirement = field.requires[requiredFieldPath];\n            const actualValue = get(currentValues as object, requiredFieldPath);\n\n            let requirementMet = false;\n            if (typeof requirement === \"function\") {\n              requirementMet = requirement(actualValue);\n            } else {\n              requirementMet = actualValue === requirement;\n            }\n\n            if (!requirementMet) {\n              shouldShow = false;\n              break;\n            }\n          }\n        }\n      }\n\n      if (shouldShow && field.show) {\n        try {\n          const showPromiseOrValue = field.show(currentValues);\n          if (showPromiseOrValue instanceof Promise) {\n            setIsLoading(true);\n            shouldShow = await showPromiseOrValue;\n            if (isLoading) setIsLoading(false);\n          } else {\n            shouldShow = showPromiseOrValue;\n            if (isLoading) setIsLoading(false);\n          }\n        } catch (error) {\n          console.error(\n            `Error checking show status for field ${String(field.name)}:`,\n            error,\n          );\n          shouldShow = false;\n          if (isLoading) setIsLoading(false);\n        }\n      } else if (!field.show) {\n        if (isLoading) setIsLoading(false);\n      } else {\n        if (isLoading) setIsLoading(false);\n      }\n\n      setIsVisible((prev) => {\n        if (prev !== shouldShow) return shouldShow;\n        return prev;\n      });\n    };\n\n    checkVisibility(); // Initial check\n\n    return () => subscription.unsubscribe();\n  }, [dependencies, field, getValues, isLoading, watch]);\n\n  if (isLoading) {\n    return (\n      <FormItem className={cn(field.className, field.itemClassName)}>\n        {field.label && <FormLabel>{field.label}</FormLabel>}\n        <FormControl>\n          <div className=\"flex h-14 items-center justify-center\">\n            <Spinner size=\"small\" />\n          </div>\n        </FormControl>\n        {field.description && (\n          <FormDescription>{field.description}</FormDescription>\n        )}\n      </FormItem>\n    );\n  }\n\n  if (!isVisible) {\n    return null;\n  }\n\n  const componentEntry = getFormComponent(field.type);\n  const RegisteredComponent = componentEntry?.component;\n  if (!componentEntry && field.type !== FormFieldType.CUSTOM) {\n    console.warn(`No component registered for form field type: ${field.type}`);\n    return null;\n  }\n\n  return (\n    <FormField<TFieldValues>\n      control={control}\n      key={field.name as string}\n      name={field.name as ReactHookFormPath<TFieldValues>}\n      render={({ field: formFieldRenderProps }) => (\n        <FormItem className={cn(field.className, field.itemClassName)}>\n          {field.label && !componentEntry?.handlesLabel && (\n            <FormLabel className={field.labelClassName}>\n              {field.label}\n              {field.required && isVisible && (\n                <span className=\"text-destructive\">*</span>\n              )}\n            </FormLabel>\n          )}\n          <FormControl>\n            {RegisteredComponent ? (\n              <RegisteredComponent\n                {...formFieldRenderProps}\n                {...field.inputProps}\n                // Derive and include autocomplete\n                autocomplete={autoCompleteValue}\n                inputClassName={field.inputClassName}\n                label={componentEntry?.handlesLabel ? field.label : undefined}\n                options={field.options}\n                placeholder={field.placeholder}\n                required={field.required}\n                type={field.type}\n              />\n            ) : field.component ? (\n              <field.component\n                {...formFieldRenderProps}\n                formMethods={rhfMethods}\n                stepEnvironment={\n                  useOptionalStepControlContext()\n                    ? {\n                        current:\n                          useOptionalStepControlContext()?.currentStep || 0,\n                        isFirst:\n                          useOptionalStepControlContext()?.isFirstStep || false,\n                        isLast:\n                          useOptionalStepControlContext()?.isLastStep || false,\n                        jumpTo: useOptionalStepControlContext()?.jumpTo,\n                        onNext: useOptionalStepControlContext()?.handleNext,\n                        onPrevious:\n                          useOptionalStepControlContext()?.handlePrevious,\n                        onRetry: useOptionalStepControlContext()?.handleRetry,\n                        retryCount:\n                          useOptionalStepControlContext()?.retryCount || 0,\n                        total: useOptionalStepControlContext()?.totalSteps || 0,\n                      }\n                    : undefined\n                }\n              />\n            ) : null}\n          </FormControl>\n          {field.description && (\n            <FormDescription>{field.description}</FormDescription>\n          )}\n          <FormMessage />\n        </FormItem>\n      )}\n    />\n  );\n}\n\nfunction getFieldAutocompleteValue(\n  field: FormFieldConfig<any>,\n  formPurpose?: string,\n) {\n  return (\n    field.autocomplete ?? // Explicit field config wins\n    getAutocompleteValue(field, { formPurpose }) ?? // Then try derivation\n    field.inputProps?.autocomplete // Finally, any inputProps value\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"FormRenderer.js","names":["useFormContext","useRHFContext"],"sources":["../../../../src/components/form/FormRenderer.tsx"],"sourcesContent":["import {\n  cn,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n  Spinner,\n} from \"@lumeweb/portal-framework-ui-core\";\nimport { get } from \"lodash/get\";\nimport React, { useEffect, useMemo, useState } from \"react\";\nimport {\n  FieldValues,\n  Path as ReactHookFormPath,\n  useFormContext as useRHFContext,\n} from \"react-hook-form\";\n\nimport { adapters } from \"./adapters\";\nimport { getAutocompleteValue } from \"./autocomplete\";\nimport { useFormContext } from \"./context\";\nimport { FormFieldType, getFormComponent } from \"./fields\";\nimport { FormGroup } from \"./FormGroup\";\nimport { useOptionalStepControlContext } from \"./StepControlContext\";\nimport { type FormFieldConfig, type FormGroupType, GroupOrder } from \"./types\";\n\ninterface FieldRendererProps<TFieldValues extends FieldValues> {\n  field: FormFieldConfig<TFieldValues>;\n}\n\nexport function FormRenderer<TRequest extends FieldValues = FieldValues>({\n  fields = [],\n  groups = [],\n}: {\n  fields?: FormFieldConfig<TRequest>[];\n  groups?: FormGroupType[];\n}) {\n  // Group fields by their group ID\n  const { groupedFields, ungroupedFields } = React.useMemo(() => {\n    const grouped: Record<string, FormFieldConfig<TRequest>[]> = {};\n    const ungrouped: FormFieldConfig<TRequest>[] = [];\n\n    // Initialize groups\n    groups?.forEach((group) => {\n      grouped[group.id] = [];\n    });\n\n    // Distribute fields\n    fields.forEach((field) => {\n      if (field.group && grouped[field.group]) {\n        grouped[field.group].push(field);\n      } else {\n        ungrouped.push(field);\n      }\n    });\n\n    return { groupedFields: grouped, ungroupedFields: ungrouped };\n  }, [fields, groups]);\n  const { adapter: adapterName, config } = useFormContext();\n  const adapter = adapters[adapterName];\n\n  if (!adapter) {\n    throw new Error(`Form adapter \"${String(adapterName)}\" is not registered`);\n  }\n\n  const groupOrder = config.groupOrder ?? GroupOrder.UNGROUPED_FIRST;\n\n  const renderGroups = () => (\n    <>\n      {groups?.map((group) => {\n        const groupFields = groupedFields[group.id];\n        if (!groupFields?.length) return null;\n\n        return (\n          <FormGroup\n            className={group.className}\n            description={group.description}\n            key={group.id}\n            title={group.title}>\n            {groupFields.map((field) => (\n              <FieldRenderer field={field} key={field.name as string} />\n            ))}\n          </FormGroup>\n        );\n      })}\n    </>\n  );\n\n  const renderUngrouped = () => (\n    <>\n      {ungroupedFields.map((field) => (\n        <FieldRenderer field={field} key={field.name as string} />\n      ))}\n    </>\n  );\n\n  return (\n    <>\n      {groupOrder === GroupOrder.GROUPS_FIRST ? (\n        <>\n          {renderGroups()}\n          {renderUngrouped()}\n        </>\n      ) : (\n        <>\n          {renderUngrouped()}\n          {renderGroups()}\n        </>\n      )}\n    </>\n  );\n}\n\nfunction FieldRenderer<TFieldValues extends FieldValues = FieldValues>({\n  field,\n}: FieldRendererProps<TFieldValues>) {\n  const rhfMethods = useRHFContext<TFieldValues>();\n  const { control, getValues, watch } = rhfMethods;\n  const [isVisible, setIsVisible] = useState(true);\n  const [isLoading, setIsLoading] = useState(false);\n  const { config: formConfig } = useFormContext();\n\n  const dependencies = useMemo(\n    () => field.dependencies || [],\n    [field.dependencies],\n  );\n\n  const autoCompleteValue = useMemo(\n    () => getFieldAutocompleteValue(field, formConfig?.action),\n    [field, formConfig?.action],\n  );\n\n  useEffect(() => {\n    // Subscribe to form changes and check visibility when relevant fields change\n    const subscription = watch((values, { name }) => {\n      // Only check visibility if dependencies are empty (watch all) or changed field is in dependencies\n      if (!dependencies.length || (name && dependencies.includes(name))) {\n        checkVisibility();\n      }\n    });\n\n    const checkVisibility = async () => {\n      if (!getValues) return;\n\n      const currentValues = getValues();\n      let shouldShow = true;\n\n      if (field.requires) {\n        for (const requiredFieldPath in field.requires) {\n          if (\n            Object.prototype.hasOwnProperty.call(\n              field.requires,\n              requiredFieldPath,\n            )\n          ) {\n            const requirement = field.requires[requiredFieldPath];\n            const actualValue = get(currentValues as object, requiredFieldPath);\n\n            let requirementMet = false;\n            if (typeof requirement === \"function\") {\n              requirementMet = requirement(actualValue);\n            } else {\n              requirementMet = actualValue === requirement;\n            }\n\n            if (!requirementMet) {\n              shouldShow = false;\n              break;\n            }\n          }\n        }\n      }\n\n      if (shouldShow && field.show) {\n        try {\n          const showPromiseOrValue = field.show(currentValues);\n          if (showPromiseOrValue instanceof Promise) {\n            setIsLoading(true);\n            shouldShow = await showPromiseOrValue;\n            if (isLoading) setIsLoading(false);\n          } else {\n            shouldShow = showPromiseOrValue;\n            if (isLoading) setIsLoading(false);\n          }\n        } catch (error) {\n          console.error(\n            `Error checking show status for field ${String(field.name)}:`,\n            error,\n          );\n          shouldShow = false;\n          if (isLoading) setIsLoading(false);\n        }\n      } else if (!field.show) {\n        if (isLoading) setIsLoading(false);\n      } else {\n        if (isLoading) setIsLoading(false);\n      }\n\n      setIsVisible((prev) => {\n        if (prev !== shouldShow) return shouldShow;\n        return prev;\n      });\n    };\n\n    checkVisibility(); // Initial check\n\n    return () => subscription.unsubscribe();\n  }, [dependencies, field, getValues, isLoading, watch]);\n\n  if (isLoading) {\n    return (\n      <FormItem className={cn(field.className, field.itemClassName)}>\n        {field.label && <FormLabel>{field.label}</FormLabel>}\n        <FormControl>\n          <div className=\"flex h-14 items-center justify-center\">\n            <Spinner size=\"small\" />\n          </div>\n        </FormControl>\n        {field.description && (\n          <FormDescription>{field.description}</FormDescription>\n        )}\n      </FormItem>\n    );\n  }\n\n  if (!isVisible) {\n    return null;\n  }\n\n  const componentEntry = getFormComponent(field.type);\n  const RegisteredComponent = componentEntry?.component;\n  if (!componentEntry && field.type !== FormFieldType.CUSTOM) {\n    console.warn(`No component registered for form field type: ${field.type}`);\n    return null;\n  }\n\n  return (\n    <FormField<TFieldValues>\n      control={control}\n      key={field.name as string}\n      name={field.name as ReactHookFormPath<TFieldValues>}\n      render={({ field: formFieldRenderProps }) => (\n        <FormItem className={cn(field.className, field.itemClassName)}>\n          {field.label && !componentEntry?.handlesLabel && (\n            <FormLabel className={field.labelClassName}>\n              {field.label}\n              {field.required && isVisible && (\n                <span className=\"text-destructive\">*</span>\n              )}\n            </FormLabel>\n          )}\n          <FormControl>\n            {RegisteredComponent ? (\n              <RegisteredComponent\n                {...formFieldRenderProps}\n                {...field.inputProps}\n                // Derive and include autocomplete\n                autocomplete={autoCompleteValue}\n                inputClassName={field.inputClassName}\n                label={componentEntry?.handlesLabel ? field.label : undefined}\n                options={field.options}\n                placeholder={field.placeholder}\n                required={field.required}\n                type={field.type}\n              />\n            ) : field.component ? (\n              <field.component\n                {...formFieldRenderProps}\n                formMethods={rhfMethods}\n                stepEnvironment={\n                  useOptionalStepControlContext()\n                    ? {\n                        current:\n                          useOptionalStepControlContext()?.currentStep || 0,\n                        isFirst:\n                          useOptionalStepControlContext()?.isFirstStep || false,\n                        isLast:\n                          useOptionalStepControlContext()?.isLastStep || false,\n                        jumpTo: useOptionalStepControlContext()?.jumpTo,\n                        onNext: useOptionalStepControlContext()?.handleNext,\n                        onPrevious:\n                          useOptionalStepControlContext()?.handlePrevious,\n                        onRetry: useOptionalStepControlContext()?.handleRetry,\n                        retryCount:\n                          useOptionalStepControlContext()?.retryCount || 0,\n                        total: useOptionalStepControlContext()?.totalSteps || 0,\n                      }\n                    : undefined\n                }\n              />\n            ) : null}\n          </FormControl>\n          {field.description && (\n            <FormDescription>{field.description}</FormDescription>\n          )}\n          <FormMessage />\n        </FormItem>\n      )}\n    />\n  );\n}\n\nfunction getFieldAutocompleteValue(\n  field: FormFieldConfig<any>,\n  formPurpose?: string,\n) {\n  return (\n    field.autocomplete ?? // Explicit field config wins\n    getAutocompleteValue(field, { formPurpose }) ?? // Then try derivation\n    field.inputProps?.autocomplete // Finally, any inputProps value\n  );\n}\n"],"mappings":"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"}