@lax-wp/design-system 0.14.39 → 0.14.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/data-display/infinite-table/body/cell/DataCell.cjs.js +1 -1
- package/dist/components/data-display/infinite-table/body/cell/DataCell.cjs.js.map +1 -1
- package/dist/components/data-display/infinite-table/body/cell/DataCell.es.js +149 -166
- package/dist/components/data-display/infinite-table/body/cell/DataCell.es.js.map +1 -1
- package/dist/components/data-display/infinite-table/constants.cjs.js +1 -1
- package/dist/components/data-display/infinite-table/constants.cjs.js.map +1 -1
- package/dist/components/data-display/infinite-table/constants.d.ts +0 -8
- package/dist/components/data-display/infinite-table/constants.es.js +20 -24
- package/dist/components/data-display/infinite-table/constants.es.js.map +1 -1
- package/dist/components/data-display/infinite-table/context.cjs.js +1 -1
- package/dist/components/data-display/infinite-table/context.cjs.js.map +1 -1
- package/dist/components/data-display/infinite-table/context.d.ts +1 -5
- package/dist/components/data-display/infinite-table/context.es.js +2 -5
- package/dist/components/data-display/infinite-table/context.es.js.map +1 -1
- package/dist/components/data-display/infinite-table/head/cell/index.cjs.js +1 -1
- package/dist/components/data-display/infinite-table/head/cell/index.cjs.js.map +1 -1
- package/dist/components/data-display/infinite-table/head/cell/index.es.js +39 -39
- package/dist/components/data-display/infinite-table/head/cell/index.es.js.map +1 -1
- package/dist/components/data-display/infinite-table/index.cjs.js +1 -1
- package/dist/components/data-display/infinite-table/index.cjs.js.map +1 -1
- package/dist/components/data-display/infinite-table/index.d.ts +1 -1
- package/dist/components/data-display/infinite-table/index.es.js +526 -547
- package/dist/components/data-display/infinite-table/index.es.js.map +1 -1
- package/dist/components/data-display/infinite-table/types.d.ts +4 -75
- package/dist/components/data-display/label-value/LabelValue.cjs.js +1 -1
- package/dist/components/data-display/label-value/LabelValue.cjs.js.map +1 -1
- package/dist/components/data-display/label-value/LabelValue.es.js +1 -1
- package/dist/components/data-display/label-value/LabelValue.es.js.map +1 -1
- package/dist/components/floating-bar/FloatingBar.cjs.js +1 -1
- package/dist/components/floating-bar/FloatingBar.cjs.js.map +1 -1
- package/dist/components/floating-bar/FloatingBar.es.js +29 -32
- package/dist/components/floating-bar/FloatingBar.es.js.map +1 -1
- package/dist/components/forms/currency-input/CurrencyInputField.cjs.js +1 -1
- package/dist/components/forms/currency-input/CurrencyInputField.cjs.js.map +1 -1
- package/dist/components/forms/currency-input/CurrencyInputField.es.js +24 -24
- package/dist/components/forms/currency-input/CurrencyInputField.es.js.map +1 -1
- package/dist/components/forms/icon-picker/IconPicker.cjs.js +1 -1
- package/dist/components/forms/icon-picker/IconPicker.cjs.js.map +1 -1
- package/dist/components/forms/icon-picker/IconPicker.es.js +65 -79
- package/dist/components/forms/icon-picker/IconPicker.es.js.map +1 -1
- package/dist/components/forms/master-data-input/MasterDataInputField.cjs.js +1 -1
- package/dist/components/forms/master-data-input/MasterDataInputField.cjs.js.map +1 -1
- package/dist/components/forms/master-data-input/MasterDataInputField.es.js +2 -2
- package/dist/components/forms/master-data-input/MasterDataInputField.es.js.map +1 -1
- package/dist/components/forms/md-input/RichMarkdownInput.cjs.js +1 -1
- package/dist/components/forms/md-input/RichMarkdownInput.cjs.js.map +1 -1
- package/dist/components/forms/md-input/RichMarkdownInput.es.js +38 -39
- package/dist/components/forms/md-input/RichMarkdownInput.es.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/providers/design-system-provider/types.d.ts +0 -1
- package/package.json +1 -1
- package/dist/components/data-display/infinite-table/CellContextMenuPortal.cjs.js +0 -2
- package/dist/components/data-display/infinite-table/CellContextMenuPortal.cjs.js.map +0 -1
- package/dist/components/data-display/infinite-table/CellContextMenuPortal.d.ts +0 -30
- package/dist/components/data-display/infinite-table/CellContextMenuPortal.es.js +0 -248
- package/dist/components/data-display/infinite-table/CellContextMenuPortal.es.js.map +0 -1
- package/dist/components/data-display/infinite-table/copy-text.cjs.js +0 -2
- package/dist/components/data-display/infinite-table/copy-text.cjs.js.map +0 -1
- package/dist/components/data-display/infinite-table/copy-text.d.ts +0 -13
- package/dist/components/data-display/infinite-table/copy-text.es.js +0 -56
- package/dist/components/data-display/infinite-table/copy-text.es.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichMarkdownInput.cjs.js","sources":["../../../../src/components/forms/md-input/RichMarkdownInput.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { forwardRef, useRef, useState } from \"react\";\nimport {\n\tFormatBold,\n\tFormatItalic,\n\tFormatUnderlined,\n\tFormatListBulleted,\n\tFormatListNumbered,\n\tOpenInFull,\n\tEdit,\n\tVisibilityOutlined,\n} from \"@mui/icons-material\";\nimport { Modal } from \"../../data-display/modal/Modal\";\nimport Button from \"../../button/Button\";\nimport { Tabs } from \"../../navigation/tabs/Tabs\";\nimport { MarkdownPreview } from \"./MarkdownPreview\";\nimport { continueList, toggleList, type ListType } from \"./listEditing\";\nimport Tooltip from \"../../tooltip/Tooltip\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { InputLabel } from \"../shared/InputLabel\";\nimport { EditIcon, VisibilityIcon } from \"../../icon\";\n\n/**\n * Props for the RichMarkdownInput component\n */\nexport interface RichMarkdownInputProps {\n\t/** Unique identifier for the markdown input */\n\tid?: string;\n\t/** Current markdown value */\n\tvalue?: string;\n\t/** Default value for the input */\n\tdefaultValue?: string;\n\t/** Placeholder text for the textarea */\n\tplaceholder?: string;\n\t/** Minimum number of visible text lines */\n\tminRows?: number;\n\t/** Maximum number of visible text lines */\n\tmaxRows?: number;\n\t/** Whether the input is disabled */\n\tisDisabled?: boolean;\n\t/** Additional CSS classes for the wrapper container */\n\tclassName?: string;\n\t/** Additional CSS classes for the textarea */\n\ttextareaClassName?: string;\n\t/** Additional CSS classes for the preview container */\n\tpreviewClassName?: string;\n\t/** Label text to display above the input */\n\tlabel?: string;\n\t/** Additional CSS classes for the label */\n\tlabelClassName?: string;\n\t/** Whether the field is required and the required indicator shows as conditional */\n\tisRequiredConditional?: boolean;\n\t/** Whether the field is required */\n\trequired?: boolean;\n\t/** Whether to show the preview button */\n\tshowPreviewOnModal?: boolean;\n\t/** Maximum character count */\n\tmaxLength?: number;\n\t/** Link target behavior: '_blank' for new tab, '_self' for current tab */\n\tlinkTarget?: '_blank' | '_self';\n\t/** Error message to display */\n\terrorMessage?: string;\n\t/** Tooltip text */\n\ttooltip?: string;\n\t/** Whether to preserve original case (no auto-lowercase) */\n\toriginalCase?: boolean;\n\t/** Icon to display at the end of the input */\n\tsuffixIcon?: React.ReactNode;\n\t/** Whether the input is clearable */\n\tisClearable?: boolean;\n\t/** Ref for the input element */\n\tinputref?: React.RefObject<HTMLTextAreaElement>;\n\t/** Whether to show the formatting help tooltip */\n\tshowFormattingHelp?: boolean;\n\t/** Keyboard event handler */\n\tonKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;\n\t/** Whether to remove indentation from lists and align all content to the left in preview */\n\tnoIndent?: boolean;\n\t/** Whether to display all content with uniform font size/weight (paragraph-like) while keeping formatting */\n\tshowMinimalPreview?: boolean;\n\t/** Whether to accept and render advanced content (code blocks, blockquotes, tables, images) in preview */\n\tacceptAdvanceContent?: boolean;\n\t/** Callback function called when the markdown value changes */\n\tonChange: (value: string) => void;\n}\n\n/**\n * The type of view for the rich markdown input\n */\ntype RichMarkdownInputViewType = \"edit\" | \"preview\";\n\n/**\n * The tabs for the rich markdown input\n */\nconst RichMarkdownInputTabs: RichMarkdownInputViewType[] = [\"edit\", \"preview\"];\n\n/**\n * Close icon for clearable input\n */\nconst CloseIcon = ({ className, size = 16 }: { className?: string; size?: number }) => (\n\t<svg\n\t\twidth={size}\n\t\theight={size}\n\t\tviewBox=\"0 0 24 24\"\n\t\tfill=\"none\"\n\t\tstroke=\"currentColor\"\n\t\tstrokeWidth=\"2\"\n\t\tstrokeLinecap=\"round\"\n\t\tstrokeLinejoin=\"round\"\n\t\tclassName={className}\n\t>\n\t\t<line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n\t\t<line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n\t</svg>\n);\n\n/**\n * A rich markdown input component with comprehensive formatting toolbar.\n * \n * **Text Formatting:**\n * - Bold (Ctrl+B) - Always visible\n * - Italic (Ctrl+I) - Always visible\n * - Underline (Ctrl+U) - Always visible\n * \n * **Lists:**\n * - Bullet lists - Always visible\n * - Numbered lists - Always visible\n * - Enter continues the list with the next marker; Enter on an empty item exits it\n * \n * **Features:**\n * - Edit/Preview toggle with icons\n * - Character counter (optional)\n * - Preview modal with scrolling\n * - Keyboard shortcuts\n * - Syntax highlighting for code blocks\n * - Responsive toolbar\n * - Dark mode support\n * - Configurable link target behavior\n * - Error message display\n * - Tooltip support\n * - Clear button (optional)\n * - Suffix icon support\n * - Custom keyboard handlers\n * - Minimal preview mode (uniform typography)\n * - Toggle advanced content in preview\n *\n * @example\n * ```tsx\n * <RichMarkdownInput\n * value={markdown}\n * onChange={setMarkdown}\n * placeholder=\"Enter description...\"\n * label=\"Description\"\n * maxLength={300}\n * linkTarget=\"_blank\"\n * isClearable\n * errorMessage=\"Invalid input\"\n * tooltip=\"Use markdown formatting\"\n * showMinimalPreview={false}\n * acceptAdvanceContent={true}\n * />\n * ```\n */\nexport const RichMarkdownInput = forwardRef<\n\tHTMLTextAreaElement,\n\tRichMarkdownInputProps\n>(\n\t(\n\t\t{\n\t\t\tid,\n\t\t\tvalue = \"\",\n\t\t\tdefaultValue,\n\t\t\tonChange,\n\t\t\tplaceholder = \"Enter markdown content...\",\n\t\t\tminRows = 4,\n\t\t\tmaxRows = 20,\n\t\t\tisDisabled = false,\n\t\t\tclassName,\n\t\t\ttextareaClassName,\n\t\t\tpreviewClassName,\n\t\t\tlabel,\n\t\t\tlabelClassName,\n\t\t\tisRequiredConditional,\n\t\t\trequired = false,\n\t\t\tshowPreviewOnModal = false,\n\t\t\tmaxLength,\n\t\t\tlinkTarget = '_blank',\n\t\t\terrorMessage,\n\t\t\ttooltip,\n\t\t\toriginalCase,\n\t\t\tsuffixIcon,\n\t\t\tisClearable,\n\t\t\tinputref,\n\t\t\tshowFormattingHelp = true,\n\t\t\tonKeyDown,\n\t\t\tnoIndent = false,\n\t\t\tshowMinimalPreview = false,\n\t\t\tacceptAdvanceContent = true,\n\t\t},\n\t\tref\n\t) => {\n\t\tconst [mode, setMode] = useState<RichMarkdownInputViewType>(\"edit\");\n\t\tconst [isPreviewOpen, setIsPreviewOpen] = useState(false);\n\t\tconst textareaRef = useRef<HTMLTextAreaElement>(null);\n\t\tconst inputId = id || `rich-md-input-${Math.random().toString(36).slice(2, 11)}`;\n\n\t\tconst charCount = value.length;\n\n\t\t/**\n\t\t * Insert markdown syntax at cursor position\n\t\t */\n\t\tconst insertMarkdown = (before: string, after: string = \"\", placeholder: string = \"\") => {\n\t\t\tconst textarea = (ref as React.RefObject<HTMLTextAreaElement>)?.current || textareaRef.current;\n\t\t\tif (!textarea) return;\n\n\t\t\tconst start = textarea.selectionStart;\n\t\t\tconst end = textarea.selectionEnd;\n\t\t\tconst selectedText = value.substring(start, end);\n\t\t\tconst textToInsert = selectedText || placeholder;\n\n\t\t\tconst newValue = value.substring(0, start) + before + textToInsert + after + value.substring(end);\n\t\t\tonChange(newValue);\n\n\t\t\t// Set cursor position after insertion\n\t\t\tsetTimeout(() => {\n\t\t\t\tconst newCursorPos = start + before.length + (selectedText ? selectedText.length : 0);\n\t\t\t\ttextarea.focus();\n\t\t\t\ttextarea.setSelectionRange(newCursorPos, newCursorPos + (selectedText ? 0 : placeholder.length));\n\t\t\t}, 0);\n\t\t};\n\n\t\t/**\n\t\t * Toggle list markers on the selected line(s).\n\t\t * Ordered lists are numbered sequentially (1., 2., 3., ...) so the raw\n\t\t * markdown matches what the preview renders.\n\t\t */\n\t\tconst insertList = (type: ListType) => {\n\t\t\tconst textarea = (ref as React.RefObject<HTMLTextAreaElement>)?.current || textareaRef.current;\n\t\t\tif (!textarea) return;\n\n\t\t\tconst result = toggleList(value, textarea.selectionStart, textarea.selectionEnd, type);\n\t\t\tif (maxLength && result.value.length > maxLength) return;\n\n\t\t\tonChange(result.value);\n\n\t\t\tsetTimeout(() => {\n\t\t\t\ttextarea.focus();\n\t\t\t\ttextarea.setSelectionRange(result.caret, result.caret);\n\t\t\t}, 0);\n\t\t};\n\n\t\t/**\n\t\t * Continue the list the caret sits in when Enter is pressed.\n\t\t * Returns true when the key was handled and the default should be prevented.\n\t\t */\n\t\tconst continueListOnEnter = () => {\n\t\t\tconst textarea = (ref as React.RefObject<HTMLTextAreaElement>)?.current || textareaRef.current;\n\t\t\tif (!textarea) return false;\n\n\t\t\tconst result = continueList(value, textarea.selectionStart, textarea.selectionEnd);\n\t\t\tif (!result) return false;\n\t\t\tif (maxLength && result.value.length > maxLength) return false;\n\n\t\t\tonChange(result.value);\n\n\t\t\tsetTimeout(() => {\n\t\t\t\ttextarea.focus();\n\t\t\t\ttextarea.setSelectionRange(result.caret, result.caret);\n\t\t\t}, 0);\n\n\t\t\treturn true;\n\t\t};\n\n\t\t/**\n\t\t * Handle keyboard shortcuts\n\t\t */\n\t\tconst handleKeyDownInternal = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n\t\t\t// Call external handler first\n\t\t\tonKeyDown?.(e);\n\n\t\t\tif (\n\t\t\t\te.key === 'Enter' &&\n\t\t\t\t!e.shiftKey &&\n\t\t\t\t!e.altKey &&\n\t\t\t\t!e.metaKey &&\n\t\t\t\t!e.ctrlKey &&\n\t\t\t\t!e.defaultPrevented\n\t\t\t) {\n\t\t\t\tif (continueListOnEnter()) {\n\t\t\t\t\te.preventDefault();\n\t\t\t\t}\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (e.metaKey || e.ctrlKey) {\n\t\t\t\tswitch (e.key.toLowerCase()) {\n\t\t\t\t\tcase 'b':\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\tinsertMarkdown('**', '**', 'bold text');\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'i':\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\tinsertMarkdown('*', '*', 'italic text');\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'u':\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\tinsertMarkdown('<u>', '</u>', 'underlined text');\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'k':\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\tinsertMarkdown('[', '](url)', 'link text');\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'e':\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\tinsertMarkdown('```', '```', 'code');\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\t/**\n\t\t * Handle clear button click\n\t\t */\n\t\tconst handleClear = () => {\n\t\t\tonChange('');\n\t\t\tconst textarea = (ref as React.RefObject<HTMLTextAreaElement>)?.current || textareaRef.current;\n\t\t\ttextarea?.focus();\n\t\t};\n\n\t\t/**\n\t\t * Calculate dynamic rows based on content\n\t\t */\n\t\tconst calculateRows = () => {\n\t\t\tconst lineCount = (value.match(/\\n/g) || []).length + 1;\n\t\t\treturn Math.min(maxRows, Math.max(minRows, lineCount));\n\t\t};\n\n\t\tconst rows = calculateRows();\n\n\t\tconst content = (\n\t\t\t<div className={cn(\"flex flex-col\", className)}>\n\t\t\t\t<div className={`flex flex-row items-center ${label ? \"justify-between\" : \"justify-end\"} w-full`}>\n\t\t\t\t\t{/* Label */}\n\t\t\t\t\t{label && (\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\tid={inputId}\n\t\t\t\t\t\t\thtmlFor={inputId}\n\t\t\t\t\t\t\tclassName={`mb-1 text-xs font-medium text-gray-600 inline-flex items-center gap-1 ${!originalCase ? \"capitalize\" : \"\"\n\t\t\t\t\t\t\t\t} ${labelClassName || \"!uppercse\"}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"flex flex-wrap items-center justify-between w-full\">\n\t\t\t\t\t\t\t\t<div className=\"inline-flex flex-wrap items-center gap-1\">\n\t\t\t\t\t\t\t\t\t<InputLabel label={label || \"\"} required={required || false} isRequiredConditional={isRequiredConditional || false} />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</label>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{/* Markdown Formatting Info */}\n\t\t\t\t\t{showFormattingHelp && (\n\t\t\t\t\t\t<Tooltip\n\t\t\t\t\t\t\tplacement=\"bottom-end\"\n\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\t<div className=\"flex flex-col items-start justify-center py-2 px-3 min-w-[220px] gap-2 bg-neutral-900 rounded-lg\">\n\t\t\t\t\t\t\t\t\t<div className=\"flex flex-col items-start justify-start gap-1 w-full\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row items-start gap-1 ml-1\">\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-[18px] leading-4\">•</span>\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-neutral-300 text-xs font-medium leading-4 font-inter\">**bold**</span>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-xs font-medium leading-4 font-inter\">\n\t\t\t\t\t\t\t\t\t\t\t\t→ <strong>bold</strong> text\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row items-start gap-1 ml-1\">\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-[18px] leading-4\">•</span>\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-neutral-300 text-xs font-medium leading-4 font-inter\">*italic*</span>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-xs font-medium leading-4 font-inter\">\n\t\t\t\t\t\t\t\t\t\t\t\t→ <em>italic</em> text\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row items-start gap-1 ml-1\">\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-[18px] leading-4\">•</span>\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-neutral-300 text-xs font-medium leading-4 font-inter\">`code`</span>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-xs font-medium leading-4 font-inter\">\n\t\t\t\t\t\t\t\t\t\t\t\t→ <code>inline code</code>\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row items-start gap-1 ml-1\">\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-[18px] leading-4\">•</span>\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-neutral-300 text-xs font-medium leading-4 font-inter\"><u>text</u></span>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-xs font-medium leading-4 font-inter\">\n\t\t\t\t\t\t\t\t\t\t\t\t→ <u>underline</u>\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row items-start gap-1 ml-1\">\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-[18px] leading-4\">•</span>\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-neutral-300 text-xs font-medium leading-4 font-inter\">~~strike~~</span>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-xs font-medium leading-4 font-inter\">\n\t\t\t\t\t\t\t\t\t\t\t\t→ <del>strike</del>\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row items-start gap-1 ml-1\">\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-[18px] leading-4\">•</span>\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-neutral-300 text-xs font-medium leading-4 font-inter\">- item</span>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-xs font-medium leading-4 font-inter\">\n\t\t\t\t\t\t\t\t\t\t\t\t→ bullet list\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row items-start gap-1 ml-1\">\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-[18px] leading-4\">•</span>\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-neutral-300 text-xs font-medium leading-4 font-inter\">1. item</span>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-xs font-medium leading-4 font-inter\">\n\t\t\t\t\t\t\t\t\t\t\t\t→ numbered list\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t{acceptAdvanceContent && (\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row items-start gap-1 ml-1\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-[18px] leading-4\">•</span>\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-neutral-300 text-xs font-medium leading-4 font-inter\">## heading</span>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-xs font-medium leading-4 font-inter\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t→ heading 2\n\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row items-start gap-1 ml-1\">\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-[18px] leading-4\">•</span>\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-neutral-300 text-xs font-medium leading-4 font-inter\">[link](url)</span>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-xs font-medium leading-4 font-inter\">\n\t\t\t\t\t\t\t\t\t\t\t\t→ hyperlink\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t\t{acceptAdvanceContent && (\n\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-col items-start justify-start gap-1 w-full\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row items-start gap-1 ml-1\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-[18px] leading-4\">•</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-neutral-300 text-xs font-medium leading-4 font-inter\">> quote</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-xs font-medium leading-4 font-inter\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t→ blockquote\n\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-col items-start justify-start gap-0.5 w-full mt-0.5\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row items-center gap-1 ml-1\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-[18px] leading-4\">•</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-xs font-medium leading-4 font-inter\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tTable:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-col px-1 py-0.5 bg-neutral-700 ml-2 rounded-sm gap-0\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-neutral-300 text-xs font-medium leading-4 font-inter whitespace-nowrap\">| Header 1 | Header 2 | Header 3 |</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-neutral-300 text-xs font-medium leading-4 font-inter whitespace-nowrap\">| :--- | :---: | ---: |</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-neutral-300 text-xs font-medium leading-4 font-inter whitespace-nowrap\">| Left | Center | Right |</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Typography className=\"mb-2 text-xs font-medium text-primary-700 inline-flex items-center gap-1 cursor-pointer\">\n\t\t\t\t\t\t\t\tFormatting help ?\n\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t{/* Main Container */}\n\t\t\t\t<div className={cn(\n\t\t\t\t\t\"flex flex-col border shadow-[0px_1px_2px_rgba(0,0,0,0.05)] rounded-lg bg-white dark:bg-black-700 w-full\",\n\t\t\t\t\terrorMessage\n\t\t\t\t\t\t? \"border-red-300 focus-within:border-red-500 focus-within:shadow-[0_0_0_1.5px_var(--color-red-200)]\"\n\t\t\t\t\t\t: \"border-[#EAECF0] dark:border-black-600 focus-within:border-primary-600 dark:focus-within:border-primary-400 focus-within:shadow-[0_0_0_1.5px_var(--color-primary-100)] dark:focus-within:shadow-[0_0_0_1.5px_var(--color-primary-950)]\"\n\t\t\t\t)}>\n\t\t\t\t\t{/* Toolbar */}\n\t\t\t\t\t<div className={cn(\n\t\t\t\t\t\t\"flex flex-row justify-between items-center px-3 py-2 gap-2 h-11 rounded-t-lg bg-[#F9FAFB] dark:bg-black-600 border-b border-[#EAECF0] dark:border-black-600\"\n\t\t\t\t\t)}>\n\t\t\t\t\t\t{/* Left: Formatting Buttons */}\n\t\t\t\t\t\t<div className=\"flex items-center gap-2\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tid={`${inputId}-bold`}\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tonClick={() => insertMarkdown('**', '**', 'bold text')}\n\t\t\t\t\t\t\t\tdisabled={isDisabled || mode === \"preview\"}\n\t\t\t\t\t\t\t\tclassName=\"!p-0.5 !min-w-0 !h-auto !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200\"\n\t\t\t\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\t\t\t\tstatus=\"no-background\"\n\t\t\t\t\t\t\t\ttitle=\"Bold (Ctrl+B)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<FormatBold sx={{ fontSize: 20, color: '#667085' }} className=\"dark:text-neutral-400\" />\n\t\t\t\t\t\t\t</Button>\n\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tid={`${inputId}-italic`}\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tonClick={() => insertMarkdown('*', '*', 'italic text')}\n\t\t\t\t\t\t\t\tdisabled={isDisabled || mode === \"preview\"}\n\t\t\t\t\t\t\t\tclassName=\"!p-0.5 !min-w-0 !h-auto !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200\"\n\t\t\t\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\t\t\t\tstatus=\"no-background\"\n\t\t\t\t\t\t\t\ttitle=\"Italic (Ctrl+I)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<FormatItalic sx={{ fontSize: 20, color: '#667085' }} className=\"dark:text-neutral-400\" />\n\t\t\t\t\t\t\t</Button>\n\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tid={`${inputId}-underline`}\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tonClick={() => insertMarkdown('<u>', '</u>', 'underlined text')}\n\t\t\t\t\t\t\t\tdisabled={isDisabled || mode === \"preview\"}\n\t\t\t\t\t\t\t\tclassName=\"!p-0.5 !min-w-0 !h-auto !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200\"\n\t\t\t\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\t\t\t\tstatus=\"no-background\"\n\t\t\t\t\t\t\t\ttitle=\"Underline (Ctrl+U)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<FormatUnderlined sx={{ fontSize: 20, color: '#667085' }} className=\"dark:text-neutral-400\" />\n\t\t\t\t\t\t\t</Button>\n\n\t\t\t\t\t\t\t<div className=\"w-px h-5 bg-[#EAECF0] dark:bg-black-500 rounded-full\" />\n\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tid={`${inputId}-numbered-list`}\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tonClick={() => insertList('ordered')}\n\t\t\t\t\t\t\t\tdisabled={isDisabled || mode === \"preview\"}\n\t\t\t\t\t\t\t\tclassName=\"!p-0.5 !min-w-0 !h-auto !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200\"\n\t\t\t\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\t\t\t\tstatus=\"no-background\"\n\t\t\t\t\t\t\t\ttitle=\"Numbered List\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<FormatListNumbered sx={{ fontSize: 20, color: '#667085' }} className=\"dark:text-neutral-400\" />\n\t\t\t\t\t\t\t</Button>\n\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tid={`${inputId}-bullet-list`}\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tonClick={() => insertList('bullet')}\n\t\t\t\t\t\t\t\tdisabled={isDisabled || mode === \"preview\"}\n\t\t\t\t\t\t\t\tclassName=\"!p-0.5 !min-w-0 !h-auto !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200\"\n\t\t\t\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\t\t\t\tstatus=\"no-background\"\n\t\t\t\t\t\t\t\ttitle=\"Bullet List\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<FormatListBulleted sx={{ fontSize: 20, color: '#667085' }} className=\"dark:text-neutral-400\" />\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<div className=\"flex items-center gap-2\">\n\t\t\t\t\t\t\t{/* Center: Character Count */}\n\t\t\t\t\t\t\t{maxLength && (\n\t\t\t\t\t\t\t\t<div className=\"flex items-center gap-3\">\n\t\t\t\t\t\t\t\t\t<span className=\"text-sm font-medium text-[#475467] dark:text-neutral-400\">\n\t\t\t\t\t\t\t\t\t\t{charCount}/{maxLength}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t<div className=\"w-px h-6 bg-[#EAECF0] dark:bg-black-500 rounded-full\" />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t{/* Right: Edit/Preview Toggle */}\n\t\t\t\t\t\t\t{showPreviewOnModal ? (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tid={`${inputId}-expand`}\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tonClick={() => setIsPreviewOpen(true)}\n\t\t\t\t\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\t\t\t\t\tclassName=\"!p-0.5 !min-w-0 !h-auto ml-1 !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200\"\n\t\t\t\t\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\t\t\t\t\tstatus=\"no-background\"\n\t\t\t\t\t\t\t\t\ttitle=\"Expand Preview\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<OpenInFull sx={{ fontSize: 16, color: '#667085' }} className=\"dark:text-neutral-400\" />\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<Tabs<RichMarkdownInputViewType>\n\t\t\t\t\t\t\t\t\tvariant=\"switch\"\n\t\t\t\t\t\t\t\t\ttabs={RichMarkdownInputTabs}\n\t\t\t\t\t\t\t\t\tactiveTab={mode}\n\t\t\t\t\t\t\t\t\tonTabClick={(tab) => setMode(tab)}\n\t\t\t\t\t\t\t\t\theight=\"h-5\"\n\t\t\t\t\t\t\t\t\ticonsOnly\n\t\t\t\t\t\t\t\t\ttabIcons={{\n\t\t\t\t\t\t\t\t\t\tedit: (<EditIcon className=\"h-md w-md dark:text-neutral-400\" />),\n\t\t\t\t\t\t\t\t\t\tpreview: (\n\t\t\t\t\t\t\t\t\t\t\t<VisibilityIcon className=\"h-md w-md dark:text-neutral-400\" />\n\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tclassName=\"rounded-lg\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{/* Content Area */}\n\t\t\t\t\t<div className=\"px-3 py-2 relative\">\n\t\t\t\t\t\t{mode === \"edit\" ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<textarea\n\t\t\t\t\t\t\t\t\tref={(node) => {\n\t\t\t\t\t\t\t\t\t\t// Handle all refs: forwarded ref, internal ref, and inputref\n\t\t\t\t\t\t\t\t\t\tif (typeof ref === 'function') {\n\t\t\t\t\t\t\t\t\t\t\tref(node);\n\t\t\t\t\t\t\t\t\t\t} else if (ref) {\n\t\t\t\t\t\t\t\t\t\t\t(ref as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t(textareaRef as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;\n\t\t\t\t\t\t\t\t\t\tif (inputref) {\n\t\t\t\t\t\t\t\t\t\t\t(inputref as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tid={inputId}\n\t\t\t\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\t\t\t\tdefaultValue={defaultValue}\n\t\t\t\t\t\t\t\t\tonChange={(e) => {\n\t\t\t\t\t\t\t\t\t\tconst newValue = originalCase ? e.target.value : e.target.value;\n\t\t\t\t\t\t\t\t\t\tif (!maxLength || newValue.length <= maxLength) {\n\t\t\t\t\t\t\t\t\t\t\tonChange(newValue);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonKeyDown={handleKeyDownInternal}\n\t\t\t\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\t\t\t\trows={rows}\n\t\t\t\t\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\t\t\t\t\trequired={required}\n\t\t\t\t\t\t\t\t\tmaxLength={maxLength}\n\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t// Base styles\n\t\t\t\t\t\t\t\t\t\t\"w-full bg-transparent !focus:ring-0 !focus:border-none\",\n\t\t\t\t\t\t\t\t\t\t\"font-inter font-medium text-sm leading-5\",\n\t\t\t\t\t\t\t\t\t\t\"text-[#101828] dark:text-neutral-100\",\n\t\t\t\t\t\t\t\t\t\t\"placeholder:text-neutral-400 dark:placeholder:text-neutral-500\",\n\t\t\t\t\t\t\t\t\t\t\"focus:outline-none resize-none\",\n\t\t\t\t\t\t\t\t\t\t// Hide scrollbar\n\t\t\t\t\t\t\t\t\t\t\"scrollbar-none\",\n\t\t\t\t\t\t\t\t\t\t\"[&::-webkit-scrollbar]:hidden\",\n\t\t\t\t\t\t\t\t\t\t\"[-ms-overflow-style:none]\",\n\t\t\t\t\t\t\t\t\t\t\"[scrollbar-width:none]\",\n\t\t\t\t\t\t\t\t\t\t// Disabled state\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\"text-neutral-400 dark:text-neutral-500 cursor-not-allowed\": isDisabled,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t// Add padding if suffix icons exist\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\"pr-20\": isClearable || suffixIcon,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\ttextareaClassName\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t\t{/* Suffix Icons */}\n\t\t\t\t\t\t\t\t{(isClearable || suffixIcon) && mode === \"edit\" && (\n\t\t\t\t\t\t\t\t\t<div className=\"absolute right-1 top-2 flex items-center gap-1\">\n\t\t\t\t\t\t\t\t\t\t{isClearable && value && (\n\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\tid={`btn-input-field-clear-${id}`}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"absolute inset-y-0 flex items-center cursor-pointer top-2 right-1 focus:outline-none\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={handleClear}\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<CloseIcon\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"text-neutral-300 dark:text-black-500 hover:text-neutral-400 dark:hover:text-black-400 transition-colors\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tsize={16}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t{suffixIcon && <div className=\"flex items-center\">{suffixIcon}</div>}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<div className=\"w-full min-h-[92px] max-h-[400px] overflow-y-auto\">\n\t\t\t\t\t\t\t\t<MarkdownPreview\n\t\t\t\t\t\t\t\t\tcontent={value}\n\t\t\t\t\t\t\t\t\tlinkTarget={linkTarget}\n\t\t\t\t\t\t\t\t\tclassName={previewClassName}\n\t\t\t\t\t\t\t\t\tnoIndent={noIndent}\n\t\t\t\t\t\t\t\t\tshowMinimalPreview={showMinimalPreview}\n\t\t\t\t\t\t\t\t\tacceptAdvanceContent={acceptAdvanceContent}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t{/* Expanded Preview Modal */}\n\t\t\t\t<Modal\n\t\t\t\t\topen={isPreviewOpen}\n\t\t\t\t\tonCancel={() => setIsPreviewOpen(false)}\n\t\t\t\t\ttitle=\"Markdown Preview\"\n\t\t\t\t\twidth={900}\n\t\t\t\t\tfooter={null}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"max-h-[calc(100vh-200px)] overflow-y-auto p-4\">\n\t\t\t\t\t\t<MarkdownPreview\n\t\t\t\t\t\t\tcontent={value}\n\t\t\t\t\t\t\tlinkTarget={linkTarget}\n\t\t\t\t\t\t\tclassName={previewClassName}\n\t\t\t\t\t\t\tnoIndent={noIndent}\n\t\t\t\t\t\t\tshowMinimalPreview={showMinimalPreview}\n\t\t\t\t\t\t\tacceptAdvanceContent={acceptAdvanceContent}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</Modal>\n\n\t\t\t\t<AnimatePresence>\n\t\t\t\t\t{errorMessage && (\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tinitial={{ opacity: 0, y: -10 }}\n\t\t\t\t\t\t\tanimate={{ opacity: 1, y: 0 }}\n\t\t\t\t\t\t\texit={{ opacity: 0, y: -10 }}\n\t\t\t\t\t\t\ttransition={{ duration: 0.2 }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Typography\n\t\t\t\t\t\t\t\tclassName=\"mt-1 text-error-500\"\n\t\t\t\t\t\t\t\tappearance=\"custom\"\n\t\t\t\t\t\t\t\tsize=\"extra-small\"\n\t\t\t\t\t\t\t\tvariant=\"medium\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{errorMessage}\n\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t)}\n\t\t\t\t</AnimatePresence>\n\t\t\t</div>\n\t\t);\n\n\t\treturn tooltip ? (\n\t\t\t<Tooltip title={tooltip}>\n\t\t\t\t{content}\n\t\t\t</Tooltip>\n\t\t) : (\n\t\t\tcontent\n\t\t);\n\t}\n);\n\nRichMarkdownInput.displayName = \"RichMarkdownInput\";\n"],"names":["RichMarkdownInputTabs","CloseIcon","className","size","jsxs","jsx","RichMarkdownInput","forwardRef","id","value","defaultValue","onChange","placeholder","minRows","maxRows","isDisabled","textareaClassName","previewClassName","label","labelClassName","isRequiredConditional","required","showPreviewOnModal","maxLength","linkTarget","errorMessage","tooltip","originalCase","suffixIcon","isClearable","inputref","showFormattingHelp","onKeyDown","noIndent","showMinimalPreview","acceptAdvanceContent","ref","mode","setMode","useState","isPreviewOpen","setIsPreviewOpen","textareaRef","useRef","inputId","charCount","insertMarkdown","before","after","textarea","start","end","selectedText","textToInsert","newValue","newCursorPos","insertList","type","result","toggleList","continueListOnEnter","continueList","handleKeyDownInternal","e","handleClear","rows","lineCount","content","cn","InputLabel","Tooltip","Fragment","Typography","Button","FormatBold","FormatItalic","FormatUnderlined","FormatListNumbered","FormatListBulleted","OpenInFull","Tabs","tab","EditIcon","VisibilityIcon","node","MarkdownPreview","Modal","AnimatePresence","motion"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"RichMarkdownInput.cjs.js","sources":["../../../../src/components/forms/md-input/RichMarkdownInput.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { forwardRef, useRef, useState } from \"react\";\nimport {\n\tFormatBold,\n\tFormatItalic,\n\tFormatUnderlined,\n\tFormatListBulleted,\n\tFormatListNumbered,\n\tOpenInFull,\n\tEdit,\n\tVisibilityOutlined,\n} from \"@mui/icons-material\";\nimport { Modal } from \"../../data-display/modal/Modal\";\nimport Button from \"../../button/Button\";\nimport { Tabs } from \"../../navigation/tabs/Tabs\";\nimport { MarkdownPreview } from \"./MarkdownPreview\";\nimport { continueList, toggleList, type ListType } from \"./listEditing\";\nimport Tooltip from \"../../tooltip/Tooltip\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { InputLabel } from \"../shared/InputLabel\";\n\n/**\n * Props for the RichMarkdownInput component\n */\nexport interface RichMarkdownInputProps {\n\t/** Unique identifier for the markdown input */\n\tid?: string;\n\t/** Current markdown value */\n\tvalue?: string;\n\t/** Default value for the input */\n\tdefaultValue?: string;\n\t/** Placeholder text for the textarea */\n\tplaceholder?: string;\n\t/** Minimum number of visible text lines */\n\tminRows?: number;\n\t/** Maximum number of visible text lines */\n\tmaxRows?: number;\n\t/** Whether the input is disabled */\n\tisDisabled?: boolean;\n\t/** Additional CSS classes for the wrapper container */\n\tclassName?: string;\n\t/** Additional CSS classes for the textarea */\n\ttextareaClassName?: string;\n\t/** Additional CSS classes for the preview container */\n\tpreviewClassName?: string;\n\t/** Label text to display above the input */\n\tlabel?: string;\n\t/** Additional CSS classes for the label */\n\tlabelClassName?: string;\n\t/** Whether the field is required and the required indicator shows as conditional */\n\tisRequiredConditional?: boolean;\n\t/** Whether the field is required */\n\trequired?: boolean;\n\t/** Whether to show the preview button */\n\tshowPreviewOnModal?: boolean;\n\t/** Maximum character count */\n\tmaxLength?: number;\n\t/** Link target behavior: '_blank' for new tab, '_self' for current tab */\n\tlinkTarget?: '_blank' | '_self';\n\t/** Error message to display */\n\terrorMessage?: string;\n\t/** Tooltip text */\n\ttooltip?: string;\n\t/** Whether to preserve original case (no auto-lowercase) */\n\toriginalCase?: boolean;\n\t/** Icon to display at the end of the input */\n\tsuffixIcon?: React.ReactNode;\n\t/** Whether the input is clearable */\n\tisClearable?: boolean;\n\t/** Ref for the input element */\n\tinputref?: React.RefObject<HTMLTextAreaElement>;\n\t/** Whether to show the formatting help tooltip */\n\tshowFormattingHelp?: boolean;\n\t/** Keyboard event handler */\n\tonKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;\n\t/** Whether to remove indentation from lists and align all content to the left in preview */\n\tnoIndent?: boolean;\n\t/** Whether to display all content with uniform font size/weight (paragraph-like) while keeping formatting */\n\tshowMinimalPreview?: boolean;\n\t/** Whether to accept and render advanced content (code blocks, blockquotes, tables, images) in preview */\n\tacceptAdvanceContent?: boolean;\n\t/** Callback function called when the markdown value changes */\n\tonChange: (value: string) => void;\n}\n\n/**\n * The type of view for the rich markdown input\n */\ntype RichMarkdownInputViewType = \"edit\" | \"preview\";\n\n/**\n * The tabs for the rich markdown input\n */\nconst RichMarkdownInputTabs: RichMarkdownInputViewType[] = [\"edit\", \"preview\"];\n\n/**\n * Close icon for clearable input\n */\nconst CloseIcon = ({ className, size = 16 }: { className?: string; size?: number }) => (\n\t<svg\n\t\twidth={size}\n\t\theight={size}\n\t\tviewBox=\"0 0 24 24\"\n\t\tfill=\"none\"\n\t\tstroke=\"currentColor\"\n\t\tstrokeWidth=\"2\"\n\t\tstrokeLinecap=\"round\"\n\t\tstrokeLinejoin=\"round\"\n\t\tclassName={className}\n\t>\n\t\t<line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n\t\t<line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n\t</svg>\n);\n\n/**\n * A rich markdown input component with comprehensive formatting toolbar.\n * \n * **Text Formatting:**\n * - Bold (Ctrl+B) - Always visible\n * - Italic (Ctrl+I) - Always visible\n * - Underline (Ctrl+U) - Always visible\n * \n * **Lists:**\n * - Bullet lists - Always visible\n * - Numbered lists - Always visible\n * - Enter continues the list with the next marker; Enter on an empty item exits it\n * \n * **Features:**\n * - Edit/Preview toggle with icons\n * - Character counter (optional)\n * - Preview modal with scrolling\n * - Keyboard shortcuts\n * - Syntax highlighting for code blocks\n * - Responsive toolbar\n * - Dark mode support\n * - Configurable link target behavior\n * - Error message display\n * - Tooltip support\n * - Clear button (optional)\n * - Suffix icon support\n * - Custom keyboard handlers\n * - Minimal preview mode (uniform typography)\n * - Toggle advanced content in preview\n *\n * @example\n * ```tsx\n * <RichMarkdownInput\n * value={markdown}\n * onChange={setMarkdown}\n * placeholder=\"Enter description...\"\n * label=\"Description\"\n * maxLength={300}\n * linkTarget=\"_blank\"\n * isClearable\n * errorMessage=\"Invalid input\"\n * tooltip=\"Use markdown formatting\"\n * showMinimalPreview={false}\n * acceptAdvanceContent={true}\n * />\n * ```\n */\nexport const RichMarkdownInput = forwardRef<\n\tHTMLTextAreaElement,\n\tRichMarkdownInputProps\n>(\n\t(\n\t\t{\n\t\t\tid,\n\t\t\tvalue = \"\",\n\t\t\tdefaultValue,\n\t\t\tonChange,\n\t\t\tplaceholder = \"Enter markdown content...\",\n\t\t\tminRows = 4,\n\t\t\tmaxRows = 20,\n\t\t\tisDisabled = false,\n\t\t\tclassName,\n\t\t\ttextareaClassName,\n\t\t\tpreviewClassName,\n\t\t\tlabel,\n\t\t\tlabelClassName,\n\t\t\tisRequiredConditional,\n\t\t\trequired = false,\n\t\t\tshowPreviewOnModal = false,\n\t\t\tmaxLength,\n\t\t\tlinkTarget = '_blank',\n\t\t\terrorMessage,\n\t\t\ttooltip,\n\t\t\toriginalCase,\n\t\t\tsuffixIcon,\n\t\t\tisClearable,\n\t\t\tinputref,\n\t\t\tshowFormattingHelp = true,\n\t\t\tonKeyDown,\n\t\t\tnoIndent = false,\n\t\t\tshowMinimalPreview = false,\n\t\t\tacceptAdvanceContent = true,\n\t\t},\n\t\tref\n\t) => {\n\t\tconst [mode, setMode] = useState<RichMarkdownInputViewType>(\"edit\");\n\t\tconst [isPreviewOpen, setIsPreviewOpen] = useState(false);\n\t\tconst textareaRef = useRef<HTMLTextAreaElement>(null);\n\t\tconst inputId = id || `rich-md-input-${Math.random().toString(36).slice(2, 11)}`;\n\n\t\tconst charCount = value.length;\n\n\t\t/**\n\t\t * Insert markdown syntax at cursor position\n\t\t */\n\t\tconst insertMarkdown = (before: string, after: string = \"\", placeholder: string = \"\") => {\n\t\t\tconst textarea = (ref as React.RefObject<HTMLTextAreaElement>)?.current || textareaRef.current;\n\t\t\tif (!textarea) return;\n\n\t\t\tconst start = textarea.selectionStart;\n\t\t\tconst end = textarea.selectionEnd;\n\t\t\tconst selectedText = value.substring(start, end);\n\t\t\tconst textToInsert = selectedText || placeholder;\n\n\t\t\tconst newValue = value.substring(0, start) + before + textToInsert + after + value.substring(end);\n\t\t\tonChange(newValue);\n\n\t\t\t// Set cursor position after insertion\n\t\t\tsetTimeout(() => {\n\t\t\t\tconst newCursorPos = start + before.length + (selectedText ? selectedText.length : 0);\n\t\t\t\ttextarea.focus();\n\t\t\t\ttextarea.setSelectionRange(newCursorPos, newCursorPos + (selectedText ? 0 : placeholder.length));\n\t\t\t}, 0);\n\t\t};\n\n\t\t/**\n\t\t * Toggle list markers on the selected line(s).\n\t\t * Ordered lists are numbered sequentially (1., 2., 3., ...) so the raw\n\t\t * markdown matches what the preview renders.\n\t\t */\n\t\tconst insertList = (type: ListType) => {\n\t\t\tconst textarea = (ref as React.RefObject<HTMLTextAreaElement>)?.current || textareaRef.current;\n\t\t\tif (!textarea) return;\n\n\t\t\tconst result = toggleList(value, textarea.selectionStart, textarea.selectionEnd, type);\n\t\t\tif (maxLength && result.value.length > maxLength) return;\n\n\t\t\tonChange(result.value);\n\n\t\t\tsetTimeout(() => {\n\t\t\t\ttextarea.focus();\n\t\t\t\ttextarea.setSelectionRange(result.caret, result.caret);\n\t\t\t}, 0);\n\t\t};\n\n\t\t/**\n\t\t * Continue the list the caret sits in when Enter is pressed.\n\t\t * Returns true when the key was handled and the default should be prevented.\n\t\t */\n\t\tconst continueListOnEnter = () => {\n\t\t\tconst textarea = (ref as React.RefObject<HTMLTextAreaElement>)?.current || textareaRef.current;\n\t\t\tif (!textarea) return false;\n\n\t\t\tconst result = continueList(value, textarea.selectionStart, textarea.selectionEnd);\n\t\t\tif (!result) return false;\n\t\t\tif (maxLength && result.value.length > maxLength) return false;\n\n\t\t\tonChange(result.value);\n\n\t\t\tsetTimeout(() => {\n\t\t\t\ttextarea.focus();\n\t\t\t\ttextarea.setSelectionRange(result.caret, result.caret);\n\t\t\t}, 0);\n\n\t\t\treturn true;\n\t\t};\n\n\t\t/**\n\t\t * Handle keyboard shortcuts\n\t\t */\n\t\tconst handleKeyDownInternal = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n\t\t\t// Call external handler first\n\t\t\tonKeyDown?.(e);\n\n\t\t\tif (\n\t\t\t\te.key === 'Enter' &&\n\t\t\t\t!e.shiftKey &&\n\t\t\t\t!e.altKey &&\n\t\t\t\t!e.metaKey &&\n\t\t\t\t!e.ctrlKey &&\n\t\t\t\t!e.defaultPrevented\n\t\t\t) {\n\t\t\t\tif (continueListOnEnter()) {\n\t\t\t\t\te.preventDefault();\n\t\t\t\t}\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (e.metaKey || e.ctrlKey) {\n\t\t\t\tswitch (e.key.toLowerCase()) {\n\t\t\t\t\tcase 'b':\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\tinsertMarkdown('**', '**', 'bold text');\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'i':\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\tinsertMarkdown('*', '*', 'italic text');\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'u':\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\tinsertMarkdown('<u>', '</u>', 'underlined text');\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'k':\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\tinsertMarkdown('[', '](url)', 'link text');\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'e':\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\tinsertMarkdown('```', '```', 'code');\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\t/**\n\t\t * Handle clear button click\n\t\t */\n\t\tconst handleClear = () => {\n\t\t\tonChange('');\n\t\t\tconst textarea = (ref as React.RefObject<HTMLTextAreaElement>)?.current || textareaRef.current;\n\t\t\ttextarea?.focus();\n\t\t};\n\n\t\t/**\n\t\t * Calculate dynamic rows based on content\n\t\t */\n\t\tconst calculateRows = () => {\n\t\t\tconst lineCount = (value.match(/\\n/g) || []).length + 1;\n\t\t\treturn Math.min(maxRows, Math.max(minRows, lineCount));\n\t\t};\n\n\t\tconst rows = calculateRows();\n\n\t\tconst content = (\n\t\t\t<div className={cn(\"flex flex-col\", className)}>\n\t\t\t\t<div className={`flex flex-row items-center ${label ? \"justify-between\" : \"justify-end\"} w-full`}>\n\t\t\t\t\t{/* Label */}\n\t\t\t\t\t{label && (\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\tid={inputId}\n\t\t\t\t\t\t\thtmlFor={inputId}\n\t\t\t\t\t\t\tclassName={`mb-1 text-xs font-medium text-gray-600 inline-flex items-center gap-1 ${!originalCase ? \"capitalize\" : \"\"\n\t\t\t\t\t\t\t\t} ${labelClassName || \"!uppercse\"}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"flex flex-wrap items-center justify-between w-full\">\n\t\t\t\t\t\t\t\t<div className=\"inline-flex flex-wrap items-center gap-1\">\n\t\t\t\t\t\t\t\t\t<InputLabel label={label || \"\"} required={required || false} isRequiredConditional={isRequiredConditional || false} />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</label>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{/* Markdown Formatting Info */}\n\t\t\t\t\t{showFormattingHelp && (\n\t\t\t\t\t\t<Tooltip\n\t\t\t\t\t\t\tplacement=\"bottom-end\"\n\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\t<div className=\"flex flex-col items-start justify-center py-2 px-3 min-w-[220px] gap-2 bg-neutral-900 rounded-lg\">\n\t\t\t\t\t\t\t\t\t<div className=\"flex flex-col items-start justify-start gap-1 w-full\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row items-start gap-1 ml-1\">\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-[18px] leading-4\">•</span>\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-neutral-300 text-xs font-medium leading-4 font-inter\">**bold**</span>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-xs font-medium leading-4 font-inter\">\n\t\t\t\t\t\t\t\t\t\t\t\t→ <strong>bold</strong> text\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row items-start gap-1 ml-1\">\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-[18px] leading-4\">•</span>\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-neutral-300 text-xs font-medium leading-4 font-inter\">*italic*</span>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-xs font-medium leading-4 font-inter\">\n\t\t\t\t\t\t\t\t\t\t\t\t→ <em>italic</em> text\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row items-start gap-1 ml-1\">\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-[18px] leading-4\">•</span>\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-neutral-300 text-xs font-medium leading-4 font-inter\">`code`</span>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-xs font-medium leading-4 font-inter\">\n\t\t\t\t\t\t\t\t\t\t\t\t→ <code>inline code</code>\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row items-start gap-1 ml-1\">\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-[18px] leading-4\">•</span>\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-neutral-300 text-xs font-medium leading-4 font-inter\"><u>text</u></span>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-xs font-medium leading-4 font-inter\">\n\t\t\t\t\t\t\t\t\t\t\t\t→ <u>underline</u>\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row items-start gap-1 ml-1\">\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-[18px] leading-4\">•</span>\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-neutral-300 text-xs font-medium leading-4 font-inter\">~~strike~~</span>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-xs font-medium leading-4 font-inter\">\n\t\t\t\t\t\t\t\t\t\t\t\t→ <del>strike</del>\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row items-start gap-1 ml-1\">\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-[18px] leading-4\">•</span>\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-neutral-300 text-xs font-medium leading-4 font-inter\">- item</span>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-xs font-medium leading-4 font-inter\">\n\t\t\t\t\t\t\t\t\t\t\t\t→ bullet list\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row items-start gap-1 ml-1\">\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-[18px] leading-4\">•</span>\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-neutral-300 text-xs font-medium leading-4 font-inter\">1. item</span>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-xs font-medium leading-4 font-inter\">\n\t\t\t\t\t\t\t\t\t\t\t\t→ numbered list\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t{acceptAdvanceContent && (\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row items-start gap-1 ml-1\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-[18px] leading-4\">•</span>\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-neutral-300 text-xs font-medium leading-4 font-inter\">## heading</span>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-xs font-medium leading-4 font-inter\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t→ heading 2\n\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row items-start gap-1 ml-1\">\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-[18px] leading-4\">•</span>\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-neutral-300 text-xs font-medium leading-4 font-inter\">[link](url)</span>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-xs font-medium leading-4 font-inter\">\n\t\t\t\t\t\t\t\t\t\t\t\t→ hyperlink\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t\t{acceptAdvanceContent && (\n\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-col items-start justify-start gap-1 w-full\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row items-start gap-1 ml-1\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-[18px] leading-4\">•</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-neutral-300 text-xs font-medium leading-4 font-inter\">> quote</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-xs font-medium leading-4 font-inter\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t→ blockquote\n\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-col items-start justify-start gap-0.5 w-full mt-0.5\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row items-center gap-1 ml-1\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-[18px] leading-4\">•</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-white text-xs font-medium leading-4 font-inter\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tTable:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-col px-1 py-0.5 bg-neutral-700 ml-2 rounded-sm gap-0\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-neutral-300 text-xs font-medium leading-4 font-inter whitespace-nowrap\">| Header 1 | Header 2 | Header 3 |</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-neutral-300 text-xs font-medium leading-4 font-inter whitespace-nowrap\">| :--- | :---: | ---: |</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-neutral-300 text-xs font-medium leading-4 font-inter whitespace-nowrap\">| Left | Center | Right |</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Typography className=\"mb-2 text-xs font-medium text-primary-700 inline-flex items-center gap-1 cursor-pointer\">\n\t\t\t\t\t\t\t\tFormatting help ?\n\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t{/* Main Container */}\n\t\t\t\t<div className={cn(\n\t\t\t\t\t\"flex flex-col border shadow-[0px_1px_2px_rgba(0,0,0,0.05)] rounded-lg bg-white dark:bg-black-700 w-full\",\n\t\t\t\t\terrorMessage\n\t\t\t\t\t\t? \"border-red-300 focus-within:border-red-500 focus-within:shadow-[0_0_0_1.5px_var(--color-red-200)]\"\n\t\t\t\t\t\t: \"border-[#EAECF0] dark:border-black-600 focus-within:border-primary-600 dark:focus-within:border-primary-400 focus-within:shadow-[0_0_0_1.5px_var(--color-primary-100)] dark:focus-within:shadow-[0_0_0_1.5px_var(--color-primary-950)]\"\n\t\t\t\t)}>\n\t\t\t\t\t{/* Toolbar */}\n\t\t\t\t\t<div className={cn(\n\t\t\t\t\t\t\"flex flex-row justify-between items-center px-3 py-2 gap-2 h-11 rounded-t-lg bg-[#F9FAFB] dark:bg-black-600 border-b border-[#EAECF0] dark:border-black-600\"\n\t\t\t\t\t)}>\n\t\t\t\t\t\t{/* Left: Formatting Buttons */}\n\t\t\t\t\t\t<div className=\"flex items-center gap-2\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tid={`${inputId}-bold`}\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tonClick={() => insertMarkdown('**', '**', 'bold text')}\n\t\t\t\t\t\t\t\tdisabled={isDisabled || mode === \"preview\"}\n\t\t\t\t\t\t\t\tclassName=\"!p-0.5 !min-w-0 !h-auto !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200\"\n\t\t\t\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\t\t\t\tstatus=\"no-background\"\n\t\t\t\t\t\t\t\ttitle=\"Bold (Ctrl+B)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<FormatBold sx={{ fontSize: 20, color: '#667085' }} className=\"dark:text-neutral-400\" />\n\t\t\t\t\t\t\t</Button>\n\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tid={`${inputId}-italic`}\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tonClick={() => insertMarkdown('*', '*', 'italic text')}\n\t\t\t\t\t\t\t\tdisabled={isDisabled || mode === \"preview\"}\n\t\t\t\t\t\t\t\tclassName=\"!p-0.5 !min-w-0 !h-auto !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200\"\n\t\t\t\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\t\t\t\tstatus=\"no-background\"\n\t\t\t\t\t\t\t\ttitle=\"Italic (Ctrl+I)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<FormatItalic sx={{ fontSize: 20, color: '#667085' }} className=\"dark:text-neutral-400\" />\n\t\t\t\t\t\t\t</Button>\n\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tid={`${inputId}-underline`}\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tonClick={() => insertMarkdown('<u>', '</u>', 'underlined text')}\n\t\t\t\t\t\t\t\tdisabled={isDisabled || mode === \"preview\"}\n\t\t\t\t\t\t\t\tclassName=\"!p-0.5 !min-w-0 !h-auto !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200\"\n\t\t\t\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\t\t\t\tstatus=\"no-background\"\n\t\t\t\t\t\t\t\ttitle=\"Underline (Ctrl+U)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<FormatUnderlined sx={{ fontSize: 20, color: '#667085' }} className=\"dark:text-neutral-400\" />\n\t\t\t\t\t\t\t</Button>\n\n\t\t\t\t\t\t\t<div className=\"w-px h-5 bg-[#EAECF0] dark:bg-black-500 rounded-full\" />\n\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tid={`${inputId}-numbered-list`}\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tonClick={() => insertList('ordered')}\n\t\t\t\t\t\t\t\tdisabled={isDisabled || mode === \"preview\"}\n\t\t\t\t\t\t\t\tclassName=\"!p-0.5 !min-w-0 !h-auto !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200\"\n\t\t\t\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\t\t\t\tstatus=\"no-background\"\n\t\t\t\t\t\t\t\ttitle=\"Numbered List\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<FormatListNumbered sx={{ fontSize: 20, color: '#667085' }} className=\"dark:text-neutral-400\" />\n\t\t\t\t\t\t\t</Button>\n\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tid={`${inputId}-bullet-list`}\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tonClick={() => insertList('bullet')}\n\t\t\t\t\t\t\t\tdisabled={isDisabled || mode === \"preview\"}\n\t\t\t\t\t\t\t\tclassName=\"!p-0.5 !min-w-0 !h-auto !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200\"\n\t\t\t\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\t\t\t\tstatus=\"no-background\"\n\t\t\t\t\t\t\t\ttitle=\"Bullet List\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<FormatListBulleted sx={{ fontSize: 20, color: '#667085' }} className=\"dark:text-neutral-400\" />\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<div className=\"flex items-center gap-2\">\n\t\t\t\t\t\t\t{/* Center: Character Count */}\n\t\t\t\t\t\t\t{maxLength && (\n\t\t\t\t\t\t\t\t<div className=\"flex items-center gap-3\">\n\t\t\t\t\t\t\t\t\t<span className=\"text-sm font-medium text-[#475467] dark:text-neutral-400\">\n\t\t\t\t\t\t\t\t\t\t{charCount}/{maxLength}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t<div className=\"w-px h-6 bg-[#EAECF0] dark:bg-black-500 rounded-full\" />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t{/* Right: Edit/Preview Toggle */}\n\t\t\t\t\t\t\t{showPreviewOnModal ? (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tid={`${inputId}-expand`}\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tonClick={() => setIsPreviewOpen(true)}\n\t\t\t\t\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\t\t\t\t\tclassName=\"!p-0.5 !min-w-0 !h-auto ml-1 !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200\"\n\t\t\t\t\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\t\t\t\t\tstatus=\"no-background\"\n\t\t\t\t\t\t\t\t\ttitle=\"Expand Preview\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<OpenInFull sx={{ fontSize: 16, color: '#667085' }} className=\"dark:text-neutral-400\" />\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<Tabs<RichMarkdownInputViewType>\n\t\t\t\t\t\t\t\t\tvariant=\"switch\"\n\t\t\t\t\t\t\t\t\ttabs={RichMarkdownInputTabs}\n\t\t\t\t\t\t\t\t\tactiveTab={mode}\n\t\t\t\t\t\t\t\t\tonTabClick={(tab) => setMode(tab)}\n\t\t\t\t\t\t\t\t\theight=\"h-5\"\n\t\t\t\t\t\t\t\t\ticonsOnly\n\t\t\t\t\t\t\t\t\ttabIcons={{\n\t\t\t\t\t\t\t\t\t\tedit: (<Edit sx={{ fontSize: 16, color: '#667085' }} className=\"dark:text-neutral-400\" />),\n\t\t\t\t\t\t\t\t\t\tpreview: (\n\t\t\t\t\t\t\t\t\t\t\t<VisibilityOutlined sx={{ fontSize: 16, color: '#667085' }} className=\"dark:text-neutral-400\" />\n\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tclassName=\"rounded-lg\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{/* Content Area */}\n\t\t\t\t\t<div className=\"px-3 py-2 relative\">\n\t\t\t\t\t\t{mode === \"edit\" ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<textarea\n\t\t\t\t\t\t\t\t\tref={(node) => {\n\t\t\t\t\t\t\t\t\t\t// Handle all refs: forwarded ref, internal ref, and inputref\n\t\t\t\t\t\t\t\t\t\tif (typeof ref === 'function') {\n\t\t\t\t\t\t\t\t\t\t\tref(node);\n\t\t\t\t\t\t\t\t\t\t} else if (ref) {\n\t\t\t\t\t\t\t\t\t\t\t(ref as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t(textareaRef as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;\n\t\t\t\t\t\t\t\t\t\tif (inputref) {\n\t\t\t\t\t\t\t\t\t\t\t(inputref as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tid={inputId}\n\t\t\t\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\t\t\t\tdefaultValue={defaultValue}\n\t\t\t\t\t\t\t\t\tonChange={(e) => {\n\t\t\t\t\t\t\t\t\t\tconst newValue = originalCase ? e.target.value : e.target.value;\n\t\t\t\t\t\t\t\t\t\tif (!maxLength || newValue.length <= maxLength) {\n\t\t\t\t\t\t\t\t\t\t\tonChange(newValue);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonKeyDown={handleKeyDownInternal}\n\t\t\t\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\t\t\t\trows={rows}\n\t\t\t\t\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\t\t\t\t\trequired={required}\n\t\t\t\t\t\t\t\t\tmaxLength={maxLength}\n\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t// Base styles\n\t\t\t\t\t\t\t\t\t\t\"w-full bg-transparent !focus:ring-0 !focus:border-none\",\n\t\t\t\t\t\t\t\t\t\t\"font-inter font-medium text-sm leading-5\",\n\t\t\t\t\t\t\t\t\t\t\"text-[#101828] dark:text-neutral-100\",\n\t\t\t\t\t\t\t\t\t\t\"placeholder:text-neutral-400 dark:placeholder:text-neutral-500\",\n\t\t\t\t\t\t\t\t\t\t\"focus:outline-none resize-none\",\n\t\t\t\t\t\t\t\t\t\t// Hide scrollbar\n\t\t\t\t\t\t\t\t\t\t\"scrollbar-none\",\n\t\t\t\t\t\t\t\t\t\t\"[&::-webkit-scrollbar]:hidden\",\n\t\t\t\t\t\t\t\t\t\t\"[-ms-overflow-style:none]\",\n\t\t\t\t\t\t\t\t\t\t\"[scrollbar-width:none]\",\n\t\t\t\t\t\t\t\t\t\t// Disabled state\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\"text-neutral-400 dark:text-neutral-500 cursor-not-allowed\": isDisabled,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t// Add padding if suffix icons exist\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\"pr-20\": isClearable || suffixIcon,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\ttextareaClassName\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t\t{/* Suffix Icons */}\n\t\t\t\t\t\t\t\t{(isClearable || suffixIcon) && mode === \"edit\" && (\n\t\t\t\t\t\t\t\t\t<div className=\"absolute right-1 top-2 flex items-center gap-1\">\n\t\t\t\t\t\t\t\t\t\t{isClearable && value && (\n\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\tid={`btn-input-field-clear-${id}`}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"absolute inset-y-0 flex items-center cursor-pointer top-2 right-1 focus:outline-none\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={handleClear}\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<CloseIcon\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"text-neutral-300 dark:text-black-500 hover:text-neutral-400 dark:hover:text-black-400 transition-colors\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tsize={16}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t{suffixIcon && <div className=\"flex items-center\">{suffixIcon}</div>}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<div className=\"w-full min-h-[92px] max-h-[400px] overflow-y-auto\">\n\t\t\t\t\t\t\t\t<MarkdownPreview\n\t\t\t\t\t\t\t\t\tcontent={value}\n\t\t\t\t\t\t\t\t\tlinkTarget={linkTarget}\n\t\t\t\t\t\t\t\t\tclassName={previewClassName}\n\t\t\t\t\t\t\t\t\tnoIndent={noIndent}\n\t\t\t\t\t\t\t\t\tshowMinimalPreview={showMinimalPreview}\n\t\t\t\t\t\t\t\t\tacceptAdvanceContent={acceptAdvanceContent}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t{/* Expanded Preview Modal */}\n\t\t\t\t<Modal\n\t\t\t\t\topen={isPreviewOpen}\n\t\t\t\t\tonCancel={() => setIsPreviewOpen(false)}\n\t\t\t\t\ttitle=\"Markdown Preview\"\n\t\t\t\t\twidth={900}\n\t\t\t\t\tfooter={null}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"max-h-[calc(100vh-200px)] overflow-y-auto p-4\">\n\t\t\t\t\t\t<MarkdownPreview\n\t\t\t\t\t\t\tcontent={value}\n\t\t\t\t\t\t\tlinkTarget={linkTarget}\n\t\t\t\t\t\t\tclassName={previewClassName}\n\t\t\t\t\t\t\tnoIndent={noIndent}\n\t\t\t\t\t\t\tshowMinimalPreview={showMinimalPreview}\n\t\t\t\t\t\t\tacceptAdvanceContent={acceptAdvanceContent}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</Modal>\n\n\t\t\t\t<AnimatePresence>\n\t\t\t\t\t{errorMessage && (\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tinitial={{ opacity: 0, y: -10 }}\n\t\t\t\t\t\t\tanimate={{ opacity: 1, y: 0 }}\n\t\t\t\t\t\t\texit={{ opacity: 0, y: -10 }}\n\t\t\t\t\t\t\ttransition={{ duration: 0.2 }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Typography\n\t\t\t\t\t\t\t\tclassName=\"mt-1 text-error-500\"\n\t\t\t\t\t\t\t\tappearance=\"custom\"\n\t\t\t\t\t\t\t\tsize=\"extra-small\"\n\t\t\t\t\t\t\t\tvariant=\"medium\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{errorMessage}\n\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t)}\n\t\t\t\t</AnimatePresence>\n\t\t\t</div>\n\t\t);\n\n\t\treturn tooltip ? (\n\t\t\t<Tooltip title={tooltip}>\n\t\t\t\t{content}\n\t\t\t</Tooltip>\n\t\t) : (\n\t\t\tcontent\n\t\t);\n\t}\n);\n\nRichMarkdownInput.displayName = \"RichMarkdownInput\";\n"],"names":["RichMarkdownInputTabs","CloseIcon","className","size","jsxs","jsx","RichMarkdownInput","forwardRef","id","value","defaultValue","onChange","placeholder","minRows","maxRows","isDisabled","textareaClassName","previewClassName","label","labelClassName","isRequiredConditional","required","showPreviewOnModal","maxLength","linkTarget","errorMessage","tooltip","originalCase","suffixIcon","isClearable","inputref","showFormattingHelp","onKeyDown","noIndent","showMinimalPreview","acceptAdvanceContent","ref","mode","setMode","useState","isPreviewOpen","setIsPreviewOpen","textareaRef","useRef","inputId","charCount","insertMarkdown","before","after","textarea","start","end","selectedText","textToInsert","newValue","newCursorPos","insertList","type","result","toggleList","continueListOnEnter","continueList","handleKeyDownInternal","e","handleClear","rows","lineCount","content","cn","InputLabel","Tooltip","Fragment","Typography","Button","FormatBold","FormatItalic","FormatUnderlined","FormatListNumbered","FormatListBulleted","OpenInFull","Tabs","tab","Edit","VisibilityOutlined","node","MarkdownPreview","Modal","AnimatePresence","motion"],"mappings":"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"}
|
|
@@ -1,18 +1,17 @@
|
|
|
1
1
|
import { jsxs as n, jsx as e, Fragment as P } from "react/jsx-runtime";
|
|
2
2
|
import N from "../../../_virtual/index.es.js";
|
|
3
|
-
import { forwardRef as oe, useState as
|
|
4
|
-
import { FormatBold as me, FormatItalic as xe, FormatUnderlined as ue, FormatListNumbered as fe, FormatListBulleted as pe, OpenInFull as he } from "@mui/icons-material";
|
|
5
|
-
import { Modal as
|
|
3
|
+
import { forwardRef as oe, useState as O, useRef as de } from "react";
|
|
4
|
+
import { FormatBold as me, FormatItalic as xe, FormatUnderlined as ue, FormatListNumbered as fe, FormatListBulleted as pe, OpenInFull as he, VisibilityOutlined as ge, Edit as we } from "@mui/icons-material";
|
|
5
|
+
import { Modal as be } from "../../data-display/modal/Modal.es.js";
|
|
6
6
|
import x from "../../button/Button.es.js";
|
|
7
|
-
import { Tabs as
|
|
8
|
-
import { MarkdownPreview as
|
|
9
|
-
import { toggleList as
|
|
7
|
+
import { Tabs as Ne } from "../../navigation/tabs/Tabs.es.js";
|
|
8
|
+
import { MarkdownPreview as L } from "./MarkdownPreview.es.js";
|
|
9
|
+
import { toggleList as ve, continueList as ke } from "./listEditing.es.js";
|
|
10
10
|
import q from "../../tooltip/Tooltip.es.js";
|
|
11
|
-
import { AnimatePresence as
|
|
11
|
+
import { AnimatePresence as ye, motion as je } from "framer-motion";
|
|
12
12
|
import { Typography as A } from "../../data-display/typography/Typography.es.js";
|
|
13
|
-
import { InputLabel as
|
|
14
|
-
|
|
15
|
-
const Fe = ["edit", "preview"], _e = ({ className: h, size: r = 16 }) => /* @__PURE__ */ n(
|
|
13
|
+
import { InputLabel as Ee } from "../shared/InputLabel.es.js";
|
|
14
|
+
const Fe = ["edit", "preview"], Se = ({ className: h, size: r = 16 }) => /* @__PURE__ */ n(
|
|
16
15
|
"svg",
|
|
17
16
|
{
|
|
18
17
|
width: r,
|
|
@@ -29,7 +28,7 @@ const Fe = ["edit", "preview"], _e = ({ className: h, size: r = 16 }) => /* @__P
|
|
|
29
28
|
/* @__PURE__ */ e("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
|
|
30
29
|
]
|
|
31
30
|
}
|
|
32
|
-
),
|
|
31
|
+
), _e = oe(
|
|
33
32
|
({
|
|
34
33
|
id: h,
|
|
35
34
|
value: r = "",
|
|
@@ -48,20 +47,20 @@ const Fe = ["edit", "preview"], _e = ({ className: h, size: r = 16 }) => /* @__P
|
|
|
48
47
|
required: F = !1,
|
|
49
48
|
showPreviewOnModal: X = !1,
|
|
50
49
|
maxLength: l,
|
|
51
|
-
linkTarget:
|
|
50
|
+
linkTarget: S = "_blank",
|
|
52
51
|
errorMessage: k,
|
|
53
|
-
tooltip:
|
|
54
|
-
originalCase:
|
|
52
|
+
tooltip: _,
|
|
53
|
+
originalCase: C,
|
|
55
54
|
suffixIcon: g,
|
|
56
55
|
isClearable: y,
|
|
57
56
|
inputref: R,
|
|
58
57
|
showFormattingHelp: Y = !0,
|
|
59
58
|
onKeyDown: Z,
|
|
60
|
-
noIndent:
|
|
59
|
+
noIndent: z = !1,
|
|
61
60
|
showMinimalPreview: T = !1,
|
|
62
61
|
acceptAdvanceContent: w = !0
|
|
63
62
|
}, c) => {
|
|
64
|
-
const [o, ee] =
|
|
63
|
+
const [o, ee] = O("edit"), [te, $] = O(!1), f = de(null), i = h || `rich-md-input-${Math.random().toString(36).slice(2, 11)}`, ne = r.length, d = (t, a = "", m = "") => {
|
|
65
64
|
const p = c?.current || f.current;
|
|
66
65
|
if (!p) return;
|
|
67
66
|
const j = p.selectionStart, K = p.selectionEnd, b = r.substring(j, K), se = b || m, ce = r.substring(0, j) + t + se + a + r.substring(K);
|
|
@@ -69,17 +68,17 @@ const Fe = ["edit", "preview"], _e = ({ className: h, size: r = 16 }) => /* @__P
|
|
|
69
68
|
const M = j + t.length + (b ? b.length : 0);
|
|
70
69
|
p.focus(), p.setSelectionRange(M, M + (b ? 0 : m.length));
|
|
71
70
|
}, 0);
|
|
72
|
-
},
|
|
71
|
+
}, I = (t) => {
|
|
73
72
|
const a = c?.current || f.current;
|
|
74
73
|
if (!a) return;
|
|
75
|
-
const m =
|
|
74
|
+
const m = ve(r, a.selectionStart, a.selectionEnd, t);
|
|
76
75
|
l && m.value.length > l || (u(m.value), setTimeout(() => {
|
|
77
76
|
a.focus(), a.setSelectionRange(m.caret, m.caret);
|
|
78
77
|
}, 0));
|
|
79
78
|
}, ae = () => {
|
|
80
79
|
const t = c?.current || f.current;
|
|
81
80
|
if (!t) return !1;
|
|
82
|
-
const a =
|
|
81
|
+
const a = ke(r, t.selectionStart, t.selectionEnd);
|
|
83
82
|
return !a || l && a.value.length > l ? !1 : (u(a.value), setTimeout(() => {
|
|
84
83
|
t.focus(), t.setSelectionRange(a.caret, a.caret);
|
|
85
84
|
}, 0), !0);
|
|
@@ -118,8 +117,8 @@ const Fe = ["edit", "preview"], _e = ({ className: h, size: r = 16 }) => /* @__P
|
|
|
118
117
|
{
|
|
119
118
|
id: i,
|
|
120
119
|
htmlFor: i,
|
|
121
|
-
className: `mb-1 text-xs font-medium text-gray-600 inline-flex items-center gap-1 ${
|
|
122
|
-
children: /* @__PURE__ */ e("div", { className: "flex flex-wrap items-center justify-between w-full", children: /* @__PURE__ */ e("div", { className: "inline-flex flex-wrap items-center gap-1", children: /* @__PURE__ */ e(
|
|
120
|
+
className: `mb-1 text-xs font-medium text-gray-600 inline-flex items-center gap-1 ${C ? "" : "capitalize"} ${J || "!uppercse"}`,
|
|
121
|
+
children: /* @__PURE__ */ e("div", { className: "flex flex-wrap items-center justify-between w-full", children: /* @__PURE__ */ e("div", { className: "inline-flex flex-wrap items-center gap-1", children: /* @__PURE__ */ e(Ee, { label: v || "", required: F || !1, isRequiredConditional: Q || !1 }) }) })
|
|
123
122
|
}
|
|
124
123
|
),
|
|
125
124
|
Y && /* @__PURE__ */ e(
|
|
@@ -270,7 +269,7 @@ const Fe = ["edit", "preview"], _e = ({ className: h, size: r = 16 }) => /* @__P
|
|
|
270
269
|
{
|
|
271
270
|
id: `${i}-numbered-list`,
|
|
272
271
|
type: "button",
|
|
273
|
-
onClick: () =>
|
|
272
|
+
onClick: () => I("ordered"),
|
|
274
273
|
disabled: s || o === "preview",
|
|
275
274
|
className: "!p-0.5 !min-w-0 !h-auto !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200",
|
|
276
275
|
appearance: "ghost",
|
|
@@ -284,7 +283,7 @@ const Fe = ["edit", "preview"], _e = ({ className: h, size: r = 16 }) => /* @__P
|
|
|
284
283
|
{
|
|
285
284
|
id: `${i}-bullet-list`,
|
|
286
285
|
type: "button",
|
|
287
|
-
onClick: () =>
|
|
286
|
+
onClick: () => I("bullet"),
|
|
288
287
|
disabled: s || o === "preview",
|
|
289
288
|
className: "!p-0.5 !min-w-0 !h-auto !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200",
|
|
290
289
|
appearance: "ghost",
|
|
@@ -317,7 +316,7 @@ const Fe = ["edit", "preview"], _e = ({ className: h, size: r = 16 }) => /* @__P
|
|
|
317
316
|
children: /* @__PURE__ */ e(he, { sx: { fontSize: 16, color: "#667085" }, className: "dark:text-neutral-400" })
|
|
318
317
|
}
|
|
319
318
|
) : /* @__PURE__ */ e(
|
|
320
|
-
|
|
319
|
+
Ne,
|
|
321
320
|
{
|
|
322
321
|
variant: "switch",
|
|
323
322
|
tabs: Fe,
|
|
@@ -326,8 +325,8 @@ const Fe = ["edit", "preview"], _e = ({ className: h, size: r = 16 }) => /* @__P
|
|
|
326
325
|
height: "h-5",
|
|
327
326
|
iconsOnly: !0,
|
|
328
327
|
tabIcons: {
|
|
329
|
-
edit: /* @__PURE__ */ e(
|
|
330
|
-
preview: /* @__PURE__ */ e(
|
|
328
|
+
edit: /* @__PURE__ */ e(we, { sx: { fontSize: 16, color: "#667085" }, className: "dark:text-neutral-400" }),
|
|
329
|
+
preview: /* @__PURE__ */ e(ge, { sx: { fontSize: 16, color: "#667085" }, className: "dark:text-neutral-400" })
|
|
331
330
|
},
|
|
332
331
|
className: "rounded-lg"
|
|
333
332
|
}
|
|
@@ -387,7 +386,7 @@ const Fe = ["edit", "preview"], _e = ({ className: h, size: r = 16 }) => /* @__P
|
|
|
387
386
|
onClick: le,
|
|
388
387
|
type: "button",
|
|
389
388
|
children: /* @__PURE__ */ e(
|
|
390
|
-
|
|
389
|
+
Se,
|
|
391
390
|
{
|
|
392
391
|
className: "text-neutral-300 dark:text-black-500 hover:text-neutral-400 dark:hover:text-black-400 transition-colors",
|
|
393
392
|
size: 16
|
|
@@ -398,19 +397,19 @@ const Fe = ["edit", "preview"], _e = ({ className: h, size: r = 16 }) => /* @__P
|
|
|
398
397
|
g && /* @__PURE__ */ e("div", { className: "flex items-center", children: g })
|
|
399
398
|
] })
|
|
400
399
|
] }) : /* @__PURE__ */ e("div", { className: "w-full min-h-[92px] max-h-[400px] overflow-y-auto", children: /* @__PURE__ */ e(
|
|
401
|
-
|
|
400
|
+
L,
|
|
402
401
|
{
|
|
403
402
|
content: r,
|
|
404
|
-
linkTarget:
|
|
403
|
+
linkTarget: S,
|
|
405
404
|
className: E,
|
|
406
|
-
noIndent:
|
|
405
|
+
noIndent: z,
|
|
407
406
|
showMinimalPreview: T,
|
|
408
407
|
acceptAdvanceContent: w
|
|
409
408
|
}
|
|
410
409
|
) }) })
|
|
411
410
|
] }),
|
|
412
411
|
/* @__PURE__ */ e(
|
|
413
|
-
|
|
412
|
+
be,
|
|
414
413
|
{
|
|
415
414
|
open: te,
|
|
416
415
|
onCancel: () => $(!1),
|
|
@@ -418,20 +417,20 @@ const Fe = ["edit", "preview"], _e = ({ className: h, size: r = 16 }) => /* @__P
|
|
|
418
417
|
width: 900,
|
|
419
418
|
footer: null,
|
|
420
419
|
children: /* @__PURE__ */ e("div", { className: "max-h-[calc(100vh-200px)] overflow-y-auto p-4", children: /* @__PURE__ */ e(
|
|
421
|
-
|
|
420
|
+
L,
|
|
422
421
|
{
|
|
423
422
|
content: r,
|
|
424
|
-
linkTarget:
|
|
423
|
+
linkTarget: S,
|
|
425
424
|
className: E,
|
|
426
|
-
noIndent:
|
|
425
|
+
noIndent: z,
|
|
427
426
|
showMinimalPreview: T,
|
|
428
427
|
acceptAdvanceContent: w
|
|
429
428
|
}
|
|
430
429
|
) })
|
|
431
430
|
}
|
|
432
431
|
),
|
|
433
|
-
/* @__PURE__ */ e(
|
|
434
|
-
|
|
432
|
+
/* @__PURE__ */ e(ye, { children: k && /* @__PURE__ */ e(
|
|
433
|
+
je.div,
|
|
435
434
|
{
|
|
436
435
|
initial: { opacity: 0, y: -10 },
|
|
437
436
|
animate: { opacity: 1, y: 0 },
|
|
@@ -450,11 +449,11 @@ const Fe = ["edit", "preview"], _e = ({ className: h, size: r = 16 }) => /* @__P
|
|
|
450
449
|
}
|
|
451
450
|
) })
|
|
452
451
|
] });
|
|
453
|
-
return
|
|
452
|
+
return _ ? /* @__PURE__ */ e(q, { title: _, children: B }) : B;
|
|
454
453
|
}
|
|
455
454
|
);
|
|
456
|
-
|
|
455
|
+
_e.displayName = "RichMarkdownInput";
|
|
457
456
|
export {
|
|
458
|
-
|
|
457
|
+
_e as RichMarkdownInput
|
|
459
458
|
};
|
|
460
459
|
//# sourceMappingURL=RichMarkdownInput.es.js.map
|