@lumeweb/portal-framework-ui 0.0.1 → 0.1.1

package/dist/esm/components/dialog/utils/dialogDetection.js

@@ -0,0 +1,47 @@
+import { DialogTypes } from "../Dialog.types.js";
+import { useDialog } from "../Dialog.context.js";
+
+//#region src/components/dialog/utils/dialogDetection.ts
+/**
+* Config-based detection for dialog type
+* Useful for static type checking and compile-time analysis
+* @param config Dialog configuration object
+*/
+function getDialogTypeFromConfig(config) {
+	return config.type;
+}
+/**
+* Hook-based detection for current dialog type
+* Returns the type of the currently open dialog or null if no dialog is open
+*/
+function useDialogType() {
+	const { currentDialog } = useDialog();
+	return currentDialog?.type ?? null;
+}
+/**
+* Hook-based detection for whether we're in a form dialog
+* Checks the current dialog context for form-related dialogs
+*/
+function useIsFormDialog() {
+	const dialogType = useDialogType();
+	return dialogType === DialogTypes.FORM || dialogType === DialogTypes.WIZARD_FORM;
+}
+/**
+* Hook-based detection for whether we're currently in any dialog
+* More accurate than config-based detection as it reflects runtime state
+*/
+function useIsInDialog() {
+	const { currentDialog } = useDialog();
+	return !!currentDialog;
+}
+/**
+* Hook-based detection for whether we're in a wizard dialog
+* Checks the current dialog context for wizard-specific dialogs
+*/
+function useIsWizardDialog() {
+	return useDialogType() === DialogTypes.WIZARD_FORM;
+}
+
+//#endregion
+export { getDialogTypeFromConfig, useDialogType, useIsFormDialog, useIsInDialog, useIsWizardDialog };
+//# sourceMappingURL=dialogDetection.js.map

package/dist/esm/components/dialog/utils/dialogDetection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogDetection.js","names":[],"sources":["../../../../../src/components/dialog/utils/dialogDetection.ts"],"sourcesContent":["import { useDialog } from \"../Dialog.context\";\nimport { DialogConfig, DialogType, DialogTypes } from \"../Dialog.types\";\n\n/**\n * Config-based detection for dialog type\n * Useful for static type checking and compile-time analysis\n * @param config Dialog configuration object\n */\nexport function getDialogTypeFromConfig(config: DialogConfig): DialogType {\n  return config.type;\n}\n\n/**\n * Hook-based detection for current dialog type\n * Returns the type of the currently open dialog or null if no dialog is open\n */\nexport function useDialogType(): DialogType | null {\n  const { currentDialog } = useDialog();\n  return currentDialog?.type ?? null;\n}\n\n/**\n * Hook-based detection for whether we're in a form dialog\n * Checks the current dialog context for form-related dialogs\n */\nexport function useIsFormDialog(): boolean {\n  const dialogType = useDialogType();\n  return (\n    dialogType === DialogTypes.FORM || dialogType === DialogTypes.WIZARD_FORM\n  );\n}\n\n/**\n * Hook-based detection for whether we're currently in any dialog\n * More accurate than config-based detection as it reflects runtime state\n */\nexport function useIsInDialog(): boolean {\n  const { currentDialog } = useDialog();\n  return !!currentDialog;\n}\n\n/**\n * Hook-based detection for whether we're in a wizard dialog\n * Checks the current dialog context for wizard-specific dialogs\n */\nexport function useIsWizardDialog(): boolean {\n  const dialogType = useDialogType();\n  return dialogType === DialogTypes.WIZARD_FORM;\n}\n"],"mappings":";;;;;;;;;AAQA,SAAgB,wBAAwB,QAAkC;AACxE,QAAO,OAAO;;;;;;AAOhB,SAAgB,gBAAmC;CACjD,MAAM,EAAE,kBAAkB,WAAW;AACrC,QAAO,eAAe,QAAQ;;;;;;AAOhC,SAAgB,kBAA2B;CACzC,MAAM,aAAa,eAAe;AAClC,QACE,eAAe,YAAY,QAAQ,eAAe,YAAY;;;;;;AAQlE,SAAgB,gBAAyB;CACvC,MAAM,EAAE,kBAAkB,WAAW;AACrC,QAAO,CAAC,CAAC;;;;;;AAOX,SAAgB,oBAA6B;AAE3C,QADmB,eACF,KAAK,YAAY"}

package/dist/esm/components/dialog/utils/index.d.ts

@@ -0,0 +1,3 @@
+import { getDialogContentClasses } from "./dialogClasses.js";
+import { getDialogTypeFromConfig, useDialogType, useIsFormDialog, useIsInDialog, useIsWizardDialog } from "./dialogDetection.js";
+export { getDialogContentClasses, getDialogTypeFromConfig, useDialogType, useIsFormDialog, useIsInDialog, useIsWizardDialog };

package/dist/esm/components/dialog/utils/index.js

@@ -0,0 +1,4 @@
+import { getDialogContentClasses } from "./dialogClasses.js";
+import { getDialogTypeFromConfig, useDialogType, useIsFormDialog, useIsInDialog, useIsWizardDialog } from "./dialogDetection.js";
+
+export { getDialogContentClasses, getDialogTypeFromConfig, useDialogType, useIsFormDialog, useIsInDialog, useIsWizardDialog };

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

@@ -0,0 +1,12 @@
+import { blockTypeToBlockName } from "./ToolbarContext.js";
+
+//#region src/components/editor/BlockTypeDropdown.d.ts
+interface BlockTypeDropdownProps {
+  blockType: keyof typeof blockTypeToBlockName;
+}
+declare function BlockTypeDropdown({
+  blockType
+}: BlockTypeDropdownProps): any;
+//#endregion
+export { BlockTypeDropdown as default };
+//# sourceMappingURL=BlockTypeDropdown.d.ts.map

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

@@ -0,0 +1,57 @@
+import { formatBulletList, formatCheckList, formatCode, formatHeading, formatOrderedList, formatParagraph, formatQuote } from "./formatting.js";
+import { blockTypeToBlockName, useToolbarState } from "./ToolbarContext.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@lumeweb/portal-framework-ui-core";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+
+//#region src/components/editor/BlockTypeDropdown.tsx
+function BlockTypeDropdown({ blockType }) {
+	const [editor] = useLexicalComposerContext();
+	const { updateToolbarState } = useToolbarState();
+	const handleSelect = (value) => {
+		switch (value) {
+			case "bullet":
+				formatBulletList(editor, blockType, updateToolbarState);
+				break;
+			case "check":
+				formatCheckList(editor, blockType, updateToolbarState);
+				break;
+			case "code":
+				formatCode(editor, blockType, updateToolbarState);
+				break;
+			case "h1":
+			case "h2":
+			case "h3":
+			case "h4":
+			case "h5":
+			case "h6":
+				formatHeading(editor, blockType, value, updateToolbarState);
+				break;
+			case "number":
+				formatOrderedList(editor, blockType, updateToolbarState);
+				break;
+			case "paragraph":
+				formatParagraph(editor, updateToolbarState);
+				break;
+			case "quote":
+				formatQuote(editor, blockType, updateToolbarState);
+				break;
+		}
+	};
+	return /* @__PURE__ */ jsxs(Select, {
+		onValueChange: handleSelect,
+		value: blockType,
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			className: "w-40",
+			children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Block Type" })
+		}), /* @__PURE__ */ jsx(SelectContent, { children: Object.keys(blockTypeToBlockName).map((type) => /* @__PURE__ */ jsx(SelectItem, {
+			value: type,
+			children: blockTypeToBlockName[type]
+		}, type)) })]
+	});
+}
+
+//#endregion
+export { BlockTypeDropdown as default };
+//# sourceMappingURL=BlockTypeDropdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTypeDropdown.js","names":[],"sources":["../../../../src/components/editor/BlockTypeDropdown.tsx"],"sourcesContent":["import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@lumeweb/portal-framework-ui-core\";\nimport React from \"react\";\n\nimport {\n  formatBulletList,\n  formatCheckList,\n  formatCode,\n  formatHeading,\n  formatOrderedList,\n  formatParagraph,\n  formatQuote,\n} from \"./formatting\";\nimport { blockTypeToBlockName, useToolbarState } from \"./ToolbarContext\";\n\ninterface BlockTypeDropdownProps {\n  blockType: keyof typeof blockTypeToBlockName;\n}\n\nexport default function BlockTypeDropdown({\n  blockType,\n}: BlockTypeDropdownProps) {\n  const [editor] = useLexicalComposerContext();\n  const { updateToolbarState } = useToolbarState();\n\n  const handleSelect = (value: string) => {\n    switch (value) {\n      case \"bullet\":\n        formatBulletList(editor, blockType, updateToolbarState);\n        break;\n      case \"check\":\n        formatCheckList(editor, blockType, updateToolbarState);\n        break;\n      case \"code\":\n        formatCode(editor, blockType, updateToolbarState);\n        break;\n      case \"h1\":\n      case \"h2\":\n      case \"h3\":\n      case \"h4\":\n      case \"h5\":\n      case \"h6\":\n        formatHeading(editor, blockType, value, updateToolbarState);\n        break;\n      case \"number\":\n        formatOrderedList(editor, blockType, updateToolbarState);\n        break;\n      case \"paragraph\":\n        formatParagraph(editor, updateToolbarState);\n        break;\n      case \"quote\":\n        formatQuote(editor, blockType, updateToolbarState);\n        break;\n    }\n  };\n\n  return (\n    <Select onValueChange={handleSelect} value={blockType}>\n      <SelectTrigger className=\"w-40\">\n        <SelectValue placeholder=\"Block Type\" />\n      </SelectTrigger>\n      <SelectContent>\n        {Object.keys(blockTypeToBlockName).map((type) => (\n          <SelectItem key={type} value={type}>\n            {blockTypeToBlockName[type as keyof typeof blockTypeToBlockName]}\n          </SelectItem>\n        ))}\n      </SelectContent>\n    </Select>\n  );\n}\n"],"mappings":";;;;;;;;AAyBA,SAAwB,kBAAkB,EACxC,aACyB;CACzB,MAAM,CAAC,UAAU,2BAA2B;CAC5C,MAAM,EAAE,uBAAuB,iBAAiB;CAEhD,MAAM,gBAAgB,UAAkB;AACtC,UAAQ,OAAR;GACE,KAAK;AACH,qBAAiB,QAAQ,WAAW,mBAAmB;AACvD;GACF,KAAK;AACH,oBAAgB,QAAQ,WAAW,mBAAmB;AACtD;GACF,KAAK;AACH,eAAW,QAAQ,WAAW,mBAAmB;AACjD;GACF,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;AACH,kBAAc,QAAQ,WAAW,OAAO,mBAAmB;AAC3D;GACF,KAAK;AACH,sBAAkB,QAAQ,WAAW,mBAAmB;AACxD;GACF,KAAK;AACH,oBAAgB,QAAQ,mBAAmB;AAC3C;GACF,KAAK;AACH,gBAAY,QAAQ,WAAW,mBAAmB;AAClD;;;AAIN,QACE,qBAAC,QAAD;EAAQ,eAAe;EAAc,OAAO;YAA5C,CACE,oBAAC,eAAD;GAAe,WAAU;aACvB,oBAAC,aAAD,EAAa,aAAY,cAAe;GAC1B,GAChB,oBAAC,eAAD,YACG,OAAO,KAAK,qBAAqB,CAAC,KAAK,SACtC,oBAAC,YAAD;GAAuB,OAAO;aAC3B,qBAAqB;GACX,EAFI,KAEJ,CACb,EACY,EACT"}

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

@@ -0,0 +1,7 @@
+import { EditorProps, ToolbarOption } from "./EditorInner.js";
+
+//#region src/components/editor/Editor.d.ts
+declare const Editor: any;
+//#endregion
+export { Editor, type EditorProps, type ToolbarOption };
+//# sourceMappingURL=Editor.d.ts.map

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

@@ -0,0 +1,17 @@
+import React, { Suspense } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/editor/Editor.tsx
+const EditorInner = React.lazy(() => import("./EditorInner.js"));
+const Editor = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(Suspense, {
+	fallback: /* @__PURE__ */ jsx("div", { className: "min-h-[150px]" }),
+	children: /* @__PURE__ */ jsx(EditorInner, {
+		...props,
+		ref
+	})
+}));
+Editor.displayName = "Markdown";
+
+//#endregion
+export { Editor };
+//# sourceMappingURL=Editor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Editor.js","names":[],"sources":["../../../../src/components/editor/Editor.tsx"],"sourcesContent":["import React, { Suspense } from \"react\";\n\nimport type { EditorProps, ToolbarOption } from \"./EditorInner\";\n\nconst EditorInner = React.lazy(() => import(\"./EditorInner\"));\n\nexport type { EditorProps, ToolbarOption };\n\nexport const Editor = React.forwardRef<HTMLDivElement, EditorProps>(\n  (props, ref) => (\n    <Suspense fallback={<div className=\"min-h-[150px]\" />}>\n      <EditorInner {...props} ref={ref} />\n    </Suspense>\n  ),\n);\nEditor.displayName = \"Markdown\";\n"],"mappings":";;;;AAIA,MAAM,cAAc,MAAM,WAAW,OAAO,oBAAiB;AAI7D,MAAa,SAAS,MAAM,YACzB,OAAO,QACN,oBAAC,UAAD;CAAU,UAAU,oBAAC,OAAD,EAAK,WAAU,iBAAkB;WACnD,oBAAC,aAAD;EAAa,GAAI;EAAY;EAAO;CAC3B,EAEd;AACD,OAAO,cAAc"}

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

@@ -0,0 +1,14 @@
+//#region src/components/editor/EditorInner.d.ts
+interface EditorProps {
+  enablePreview?: boolean;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  required?: boolean;
+  toolbarOptions?: ToolbarOption[];
+  value?: string;
+}
+type ToolbarOption = "blockTypes" | "bold" | "clear" | "italic" | "redo" | "strikethrough" | "subscript" | "superscript" | "underline" | "undo";
+declare const Editor: any;
+//#endregion
+export { Editor, Editor as default, EditorProps, ToolbarOption };
+//# sourceMappingURL=EditorInner.d.ts.map

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

@@ -0,0 +1,107 @@
+import { ToolbarProvider } from "./ToolbarContext.js";
+import { Preview } from "./Preview.js";
+import { ToolbarPlugin } from "./ToolbarPlugin.js";
+import React, { forwardRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CodeNode } from "@lexical/code";
+import { ListItemNode, ListNode } from "@lexical/list";
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import { $getRoot } from "lexical";
+import { LinkNode } from "@lexical/link";
+import { $convertFromMarkdownString, TRANSFORMERS } from "@lexical/markdown";
+import { CheckListPlugin } from "@lexical/react/LexicalCheckListPlugin";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { HorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode";
+import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
+import { ListPlugin } from "@lexical/react/LexicalListPlugin";
+import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
+import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+
+//#region src/components/editor/EditorInner.tsx
+const Editor = forwardRef(({ enablePreview, onChange, placeholder, toolbarOptions, value }, ref) => {
+	const [isPreview, setIsPreview] = useState(false);
+	const handleChange = React.useCallback((editorState) => {
+		const content = editorState.read(() => $getRoot().getTextContent());
+		onChange?.(content);
+	}, [onChange]);
+	return /* @__PURE__ */ jsx("div", {
+		className: "bg-modal-input text-foreground rounded-md border",
+		children: /* @__PURE__ */ jsx(LexicalComposer, {
+			initialConfig: React.useMemo(() => ({
+				editable: !isPreview,
+				editorState: () => {
+					$convertFromMarkdownString(value ?? "", TRANSFORMERS);
+				},
+				namespace: "MarkdownEditor",
+				nodes: [
+					HorizontalRuleNode,
+					CodeNode,
+					LinkNode,
+					ListNode,
+					ListItemNode,
+					HeadingNode,
+					QuoteNode
+				],
+				onError: (error) => {
+					throw error;
+				},
+				theme: {
+					heading: {
+						h1: "text-2xl font-bold",
+						h2: "text-xl font-bold",
+						h3: "text-lg font-semibold",
+						h4: "text-base font-semibold",
+						h5: "text-sm font-semibold",
+						h6: "text-xs font-semibold"
+					},
+					link: "cursor-pointer",
+					root: "p-3 border rounded-md bg-modal-input text-foreground",
+					text: {
+						bold: "font-semibold",
+						italic: "italic",
+						underline: "underline"
+					}
+				}
+			}), [isPreview, value]),
+			children: /* @__PURE__ */ jsxs(ToolbarProvider, { children: [/* @__PURE__ */ jsx("div", {
+				className: "border-border flex items-center justify-between gap-1 border-b p-1",
+				children: /* @__PURE__ */ jsx(ToolbarPlugin, {
+					isPreview,
+					setIsPreview,
+					toolbarOptions
+				})
+			}), !isPreview ? /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(RichTextPlugin, {
+					contentEditable: /* @__PURE__ */ jsx(ContentEditable, {
+						"aria-placeholder": placeholder ?? "",
+						className: "text-foreground min-h-[150px] w-full resize-none bg-transparent outline-none",
+						placeholder: /* @__PURE__ */ jsx("div", {
+							className: "text-foreground/50",
+							children: placeholder
+						})
+					}),
+					ErrorBoundary: LexicalErrorBoundary
+				}),
+				/* @__PURE__ */ jsx(HistoryPlugin, {}),
+				/* @__PURE__ */ jsx(ListPlugin, {}),
+				/* @__PURE__ */ jsx(CheckListPlugin, {}),
+				/* @__PURE__ */ jsx(LinkPlugin, {}),
+				/* @__PURE__ */ jsx(MarkdownShortcutPlugin, { transformers: TRANSFORMERS }),
+				/* @__PURE__ */ jsx(OnChangePlugin, {
+					ignoreHistoryMergeTagChange: true,
+					ignoreSelectionChange: true,
+					onChange: handleChange
+				})
+			] }) : /* @__PURE__ */ jsx(Preview, {})] })
+		})
+	});
+});
+Editor.displayName = "Markdown";
+
+//#endregion
+export { Editor, Editor as default };
+//# sourceMappingURL=EditorInner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditorInner.js","names":[],"sources":["../../../../src/components/editor/EditorInner.tsx"],"sourcesContent":["import { CodeNode } from \"@lexical/code\";\nimport { LinkNode } from \"@lexical/link\";\nimport { ListItemNode, ListNode } from \"@lexical/list\";\nimport { $convertFromMarkdownString, TRANSFORMERS } from \"@lexical/markdown\";\nimport { CheckListPlugin } from \"@lexical/react/LexicalCheckListPlugin\";\nimport {\n  InitialConfigType,\n  LexicalComposer,\n} from \"@lexical/react/LexicalComposer\";\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport { LexicalErrorBoundary } from \"@lexical/react/LexicalErrorBoundary\";\nimport { HistoryPlugin } from \"@lexical/react/LexicalHistoryPlugin\";\nimport { HorizontalRuleNode } from \"@lexical/react/LexicalHorizontalRuleNode\";\nimport { LinkPlugin } from \"@lexical/react/LexicalLinkPlugin\";\nimport { ListPlugin } from \"@lexical/react/LexicalListPlugin\";\nimport { MarkdownShortcutPlugin } from \"@lexical/react/LexicalMarkdownShortcutPlugin\";\nimport { OnChangePlugin } from \"@lexical/react/LexicalOnChangePlugin\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport { HeadingNode, QuoteNode } from \"@lexical/rich-text\";\nimport { $getRoot } from \"lexical\";\nimport React, { forwardRef, useState } from \"react\";\n\nimport { Preview } from \"./Preview\";\nimport { ToolbarProvider } from \"./ToolbarContext\";\nimport { ToolbarPlugin } from \"./ToolbarPlugin\";\n\nexport interface EditorProps {\n  enablePreview?: boolean;\n  onChange?: (value: string) => void;\n  placeholder?: string;\n  required?: boolean;\n  toolbarOptions?: ToolbarOption[];\n  value?: string;\n}\n\nexport type ToolbarOption =\n  | \"blockTypes\"\n  | \"bold\"\n  | \"clear\"\n  | \"italic\"\n  | \"redo\"\n  | \"strikethrough\"\n  | \"subscript\"\n  | \"superscript\"\n  | \"underline\"\n  | \"undo\";\n\nexport const Editor = forwardRef<HTMLDivElement, EditorProps>(\n  ({ enablePreview, onChange, placeholder, toolbarOptions, value }, ref) => {\n    const [isPreview, setIsPreview] = useState(false);\n\n    const handleChange = React.useCallback(\n      (editorState) => {\n        const content = editorState.read(() => $getRoot().getTextContent());\n        onChange?.(content);\n      },\n      [onChange],\n    );\n\n    const initialConfig = React.useMemo(\n      () =>\n        ({\n          editable: !isPreview,\n          editorState: () => {\n            $convertFromMarkdownString(value ?? \"\", TRANSFORMERS);\n          },\n          namespace: \"MarkdownEditor\",\n          nodes: [\n            HorizontalRuleNode,\n            CodeNode,\n            LinkNode,\n            ListNode,\n            ListItemNode,\n            HeadingNode,\n            QuoteNode,\n          ],\n          onError: (error: Error) => {\n            throw error;\n          },\n          theme: {\n            heading: {\n              h1: \"text-2xl font-bold\",\n              h2: \"text-xl font-bold\",\n              h3: \"text-lg font-semibold\",\n              h4: \"text-base font-semibold\",\n              h5: \"text-sm font-semibold\",\n              h6: \"text-xs font-semibold\",\n            },\n            link: \"cursor-pointer\",\n            root: \"p-3 border rounded-md bg-modal-input text-foreground\",\n            text: {\n              bold: \"font-semibold\",\n              italic: \"italic\",\n              underline: \"underline\",\n            },\n          },\n        }) satisfies InitialConfigType,\n      [isPreview, value],\n    );\n\n    return (\n      <div className=\"bg-modal-input text-foreground rounded-md border\">\n        <LexicalComposer initialConfig={initialConfig}>\n          <ToolbarProvider>\n            <div className=\"border-border flex items-center justify-between gap-1 border-b p-1\">\n              <ToolbarPlugin\n                isPreview={isPreview}\n                setIsPreview={setIsPreview}\n                toolbarOptions={toolbarOptions}\n              />\n            </div>\n            {!isPreview ? (\n              <>\n                <RichTextPlugin\n                  contentEditable={\n                    <ContentEditable\n                      aria-placeholder={placeholder ?? \"\"}\n                      className=\"text-foreground min-h-[150px] w-full resize-none bg-transparent outline-none\"\n                      placeholder={\n                        <div className=\"text-foreground/50\">{placeholder}</div>\n                      }\n                    />\n                  }\n                  ErrorBoundary={LexicalErrorBoundary}\n                />\n                <HistoryPlugin />\n                <ListPlugin />\n                <CheckListPlugin />\n                <LinkPlugin />\n                <MarkdownShortcutPlugin transformers={TRANSFORMERS} />\n                <OnChangePlugin\n                  ignoreHistoryMergeTagChange={true}\n                  ignoreSelectionChange={true}\n                  onChange={handleChange}\n                />\n              </>\n            ) : (\n              <Preview />\n            )}\n          </ToolbarProvider>\n        </LexicalComposer>\n      </div>\n    );\n  },\n);\nEditor.displayName = \"Markdown\";\n\nexport default Editor;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAa,SAAS,YACnB,EAAE,eAAe,UAAU,aAAa,gBAAgB,SAAS,QAAQ;CACxE,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CAEjD,MAAM,eAAe,MAAM,aACxB,gBAAgB;EACf,MAAM,UAAU,YAAY,WAAW,UAAU,CAAC,gBAAgB,CAAC;AACnE,aAAW,QAAQ;IAErB,CAAC,SAAS,CACX;AA2CD,QACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,iBAAD;GAAiB,eA3CC,MAAM,eAEvB;IACC,UAAU,CAAC;IACX,mBAAmB;AACjB,gCAA2B,SAAS,IAAI,aAAa;;IAEvD,WAAW;IACX,OAAO;KACL;KACA;KACA;KACA;KACA;KACA;KACA;KACD;IACD,UAAU,UAAiB;AACzB,WAAM;;IAER,OAAO;KACL,SAAS;MACP,IAAI;MACJ,IAAI;MACJ,IAAI;MACJ,IAAI;MACJ,IAAI;MACJ,IAAI;MACL;KACD,MAAM;KACN,MAAM;KACN,MAAM;MACJ,MAAM;MACN,QAAQ;MACR,WAAW;MACZ;KACF;IACF,GACH,CAAC,WAAW,MAAM,CAK6B;aAC3C,qBAAC,iBAAD,aACE,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,eAAD;KACa;KACG;KACE;KAChB;IACE,GACL,CAAC,YACA;IACE,oBAAC,gBAAD;KACE,iBACE,oBAAC,iBAAD;MACE,oBAAkB,eAAe;MACjC,WAAU;MACV,aACE,oBAAC,OAAD;OAAK,WAAU;iBAAsB;OAAkB;MAEzD;KAEJ,eAAe;KACf;IACF,oBAAC,eAAD,EAAiB;IACjB,oBAAC,YAAD,EAAc;IACd,oBAAC,iBAAD,EAAmB;IACnB,oBAAC,YAAD,EAAc;IACd,oBAAC,wBAAD,EAAwB,cAAc,cAAgB;IACtD,oBAAC,gBAAD;KACE,6BAA6B;KAC7B,uBAAuB;KACvB,UAAU;KACV;IACD,MAEH,oBAAC,SAAD,EAAW,EAEG;GACF;EACd;EAGX;AACD,OAAO,cAAc"}

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

@@ -0,0 +1,5 @@
+//#region src/components/editor/Preview.d.ts
+declare const Preview: () => any;
+//#endregion
+export { Preview };
+//# sourceMappingURL=Preview.d.ts.map

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

@@ -0,0 +1,18 @@
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $generateHtmlFromNodes } from "@lexical/html";
+import DOMPurify from "dompurify";
+
+//#region src/components/editor/Preview.tsx
+const Preview = function() {
+	const [editor] = useLexicalComposerContext();
+	return /* @__PURE__ */ jsx("div", {
+		className: "text-foreground min-h-[150px] whitespace-pre-wrap p-4",
+		dangerouslySetInnerHTML: { __html: editor.read(() => DOMPurify.sanitize($generateHtmlFromNodes(editor))) }
+	});
+};
+
+//#endregion
+export { Preview };
+//# sourceMappingURL=Preview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Preview.js","names":[],"sources":["../../../../src/components/editor/Preview.tsx"],"sourcesContent":["import { $generateHtmlFromNodes } from \"@lexical/html\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport DOMPurify from \"dompurify\";\nimport React from \"react\";\n\nexport const Preview = function () {\n  const [editor] = useLexicalComposerContext();\n\n  return (\n    <div\n      className=\"text-foreground min-h-[150px] whitespace-pre-wrap p-4\"\n      dangerouslySetInnerHTML={{\n        __html: editor.read(() =>\n          DOMPurify.sanitize($generateHtmlFromNodes(editor)),\n        ),\n      }}\n    />\n  );\n};\n"],"mappings":";;;;;;;AAKA,MAAa,UAAU,WAAY;CACjC,MAAM,CAAC,UAAU,2BAA2B;AAE5C,QACE,oBAAC,OAAD;EACE,WAAU;EACV,yBAAyB,EACvB,QAAQ,OAAO,WACb,UAAU,SAAS,uBAAuB,OAAO,CAAC,CACnD,EACF;EACD"}

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

@@ -0,0 +1,39 @@
+import { ReactNode } from "react";
+
+//#region src/components/editor/ToolbarContext.d.ts
+declare const blockTypeToBlockName: {
+  bullet: string;
+  check: string;
+  code: string;
+  h1: string;
+  h2: string;
+  h3: string;
+  h4: string;
+  h5: string;
+  h6: string;
+  number: string;
+  paragraph: string;
+  quote: string;
+};
+type BlockType = "check" | "code" | keyof typeof blockTypeToBlockName;
+interface ToolbarState {
+  blockType: BlockType;
+  isBold: boolean;
+  isClear: boolean;
+  isItalic: boolean;
+  isStrikethrough: boolean;
+  isSubscript: boolean;
+  isSuperscript: boolean;
+  isUnderline: boolean;
+}
+type ToolbarStateKey = keyof ToolbarState;
+type ToolbarStateValue<Key extends ToolbarStateKey> = ToolbarState[Key];
+declare const ToolbarProvider: ({
+  children
+}: {
+  children: ReactNode;
+}) => any;
+declare const useToolbarState: () => any;
+//#endregion
+export { BlockType, ToolbarProvider, ToolbarState, ToolbarStateKey, ToolbarStateValue, blockTypeToBlockName, useToolbarState };
+//# sourceMappingURL=ToolbarContext.d.ts.map

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

@@ -0,0 +1,54 @@
+import React, { createContext, useCallback, useContext, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/editor/ToolbarContext.tsx
+const blockTypeToBlockName = {
+	bullet: "Bulleted List",
+	check: "Check List",
+	code: "Code Block",
+	h1: "Heading 1",
+	h2: "Heading 2",
+	h3: "Heading 3",
+	h4: "Heading 4",
+	h5: "Heading 5",
+	h6: "Heading 6",
+	number: "Numbered List",
+	paragraph: "Normal",
+	quote: "Quote"
+};
+const Context = createContext(void 0);
+const ToolbarProvider = ({ children }) => {
+	const [toolbarState, setToolbarState] = useState({
+		blockType: "paragraph",
+		isBold: false,
+		isClear: false,
+		isItalic: false,
+		isStrikethrough: false,
+		isSubscript: false,
+		isSuperscript: false,
+		isUnderline: false
+	});
+	const updateToolbarState = useCallback((key, value) => {
+		setToolbarState((prev) => ({
+			...prev,
+			[key]: value
+		}));
+	}, []);
+	const contextValue = useMemo(() => ({
+		toolbarState,
+		updateToolbarState
+	}), [toolbarState, updateToolbarState]);
+	return /* @__PURE__ */ jsx(Context.Provider, {
+		value: contextValue,
+		children
+	});
+};
+const useToolbarState = () => {
+	const context = useContext(Context);
+	if (context === void 0) throw new Error("useToolbarState must be used within a ToolbarProvider");
+	return context;
+};
+
+//#endregion
+export { ToolbarProvider, blockTypeToBlockName, useToolbarState };
+//# sourceMappingURL=ToolbarContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarContext.js","names":[],"sources":["../../../../src/components/editor/ToolbarContext.tsx"],"sourcesContent":["import React, {\n  createContext,\n  ReactNode,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n} from \"react\";\n\nexport const blockTypeToBlockName = {\n  bullet: \"Bulleted List\",\n  check: \"Check List\",\n  code: \"Code Block\",\n  h1: \"Heading 1\",\n  h2: \"Heading 2\",\n  h3: \"Heading 3\",\n  h4: \"Heading 4\",\n  h5: \"Heading 5\",\n  h6: \"Heading 6\",\n  number: \"Numbered List\",\n  paragraph: \"Normal\",\n  quote: \"Quote\",\n};\n\nexport type BlockType = \"check\" | \"code\" | keyof typeof blockTypeToBlockName;\n\nexport interface ToolbarState {\n  blockType: BlockType;\n  isBold: boolean;\n  isClear: boolean;\n  isItalic: boolean;\n  isStrikethrough: boolean;\n  isSubscript: boolean;\n  isSuperscript: boolean;\n  isUnderline: boolean;\n}\n\nexport type ToolbarStateKey = keyof ToolbarState;\n\nexport type ToolbarStateValue<Key extends ToolbarStateKey> = ToolbarState[Key];\n\ninterface ContextShape {\n  toolbarState: ToolbarState;\n  updateToolbarState: <Key extends ToolbarStateKey>(\n    key: Key,\n    value: ToolbarStateValue<Key>,\n  ) => void;\n}\n\nconst Context = createContext<ContextShape | undefined>(undefined);\n\nexport const ToolbarProvider = ({ children }: { children: ReactNode }) => {\n  const [toolbarState, setToolbarState] = useState<ToolbarState>({\n    blockType: \"paragraph\",\n    isBold: false,\n    isClear: false,\n    isItalic: false,\n    isStrikethrough: false,\n    isSubscript: false,\n    isSuperscript: false,\n    isUnderline: false,\n  });\n\n  const updateToolbarState = useCallback(\n    <Key extends ToolbarStateKey>(key: Key, value: ToolbarStateValue<Key>) => {\n      setToolbarState((prev) => ({\n        ...prev,\n        [key]: value,\n      }));\n    },\n    [],\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      toolbarState,\n      updateToolbarState,\n    }),\n    [toolbarState, updateToolbarState],\n  );\n\n  return <Context.Provider value={contextValue}>{children}</Context.Provider>;\n};\n\nexport const useToolbarState = () => {\n  const context = useContext(Context);\n\n  if (context === undefined) {\n    throw new Error(\"useToolbarState must be used within a ToolbarProvider\");\n  }\n\n  return context;\n};\n"],"mappings":";;;;AASA,MAAa,uBAAuB;CAClC,QAAQ;CACR,OAAO;CACP,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,QAAQ;CACR,WAAW;CACX,OAAO;CACR;AA2BD,MAAM,UAAU,cAAwC,OAAU;AAElE,MAAa,mBAAmB,EAAE,eAAwC;CACxE,MAAM,CAAC,cAAc,mBAAmB,SAAuB;EAC7D,WAAW;EACX,QAAQ;EACR,SAAS;EACT,UAAU;EACV,iBAAiB;EACjB,aAAa;EACb,eAAe;EACf,aAAa;EACd,CAAC;CAEF,MAAM,qBAAqB,aACK,KAAU,UAAkC;AACxE,mBAAiB,UAAU;GACzB,GAAG;IACF,MAAM;GACR,EAAE;IAEL,EAAE,CACH;CAED,MAAM,eAAe,eACZ;EACL;EACA;EACD,GACD,CAAC,cAAc,mBAAmB,CACnC;AAED,QAAO,oBAAC,QAAQ,UAAT;EAAkB,OAAO;EAAe;EAA4B;;AAG7E,MAAa,wBAAwB;CACnC,MAAM,UAAU,WAAW,QAAQ;AAEnC,KAAI,YAAY,OACd,OAAM,IAAI,MAAM,wDAAwD;AAG1E,QAAO"}

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

@@ -0,0 +1,20 @@
+import { ToolbarOption } from "./EditorInner.js";
+import React from "react";
+
+//#region src/components/editor/ToolbarPlugin.d.ts
+declare const defaultToolbarOptions: ToolbarOption[];
+interface ToolbarPluginProps {
+  enablePreview?: boolean;
+  isPreview: boolean;
+  setIsPreview: React.Dispatch<React.SetStateAction<boolean>>;
+  toolbarOptions?: ("blockTypes" | "bold" | "clear" | "italic" | "redo" | "strikethrough" | "subscript" | "superscript" | "underline" | "undo")[];
+}
+declare function ToolbarPlugin({
+  enablePreview,
+  isPreview,
+  setIsPreview,
+  toolbarOptions
+}: ToolbarPluginProps): any;
+//#endregion
+export { ToolbarPlugin, defaultToolbarOptions };
+//# sourceMappingURL=ToolbarPlugin.d.ts.map