@lindle/linoardo 1.0.49 → 1.0.50

package/dist/textarea.cjs

@@ -1,485 +1,546 @@
 'use strict';
 
 var React = require('react');
-var react = require('@tiptap/react');
+var CodeBlockLowlight = require('@tiptap/extension-code-block-lowlight');
 var StarterKit = require('@tiptap/starter-kit');
-var marked = require('marked');
+var Underline = require('@tiptap/extension-underline');
+var react = require('@tiptap/react');
+var lowlight$1 = require('lowlight');
 var TurndownService = require('turndown');
+var marked = require('marked');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
+var CodeBlockLowlight__default = /*#__PURE__*/_interopDefault(CodeBlockLowlight);
 var StarterKit__default = /*#__PURE__*/_interopDefault(StarterKit);
+var Underline__default = /*#__PURE__*/_interopDefault(Underline);
 var TurndownService__default = /*#__PURE__*/_interopDefault(TurndownService);
 
-// src/utils/helpers/randomStr.ts
-var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-function generateString(length = 5) {
-  let result = "";
-  const charactersLength = characters.length;
-  for (let i = 0; i < length; i++) {
-    result += characters.charAt(Math.floor(Math.random() * charactersLength));
-  }
-  return result;
-}
-var baseClass = "textarea-base px-3 py-2 focus-visible:outline-none transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed w-full text-gray-900 dark:text-gray-100 placeholder:text-gray-500 dark:placeholder:text-gray-400";
+// src/Form/TextArea/index.tsx
 var variantClasses = {
-  outlined: "rounded border-2 border-black bg-white focus-visible:border-black focus-visible:ring-2 focus-visible:ring-black/30 dark:border-black dark:bg-slate-900 dark:focus-visible:border-black dark:focus-visible:ring-black/40",
-  filled: "rounded border border-gray-200 bg-gray-100 focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/25 dark:border-gray-700 dark:bg-slate-800 dark:focus-visible:border-primary/60 dark:focus-visible:ring-primary/30",
-  standard: "rounded-none border-0 border-b border-gray-300 px-0 bg-transparent focus-visible:border-primary focus-visible:ring-0 dark:border-b-gray-700 dark:focus-visible:border-primary/70"
+  solid: "rounded border border-gray-400 bg-white shadow-sm focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-within:border-primary/70 dark:focus-within:ring-primary/40",
+  sharp: "rounded-none border border-gray-400 bg-white shadow-sm focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-within:border-primary/70 dark:focus-within:ring-primary/40",
+  outline: "rounded border-2 border-black bg-white focus-within:border-black focus-within:ring-2 focus-within:ring-black/30 dark:border-black dark:bg-transparent dark:focus-within:border-black dark:focus-within:ring-black/40",
+  text: "rounded-none border-0 border-b border-transparent px-0 bg-transparent focus-within:border-primary focus-within:ring-0 focus-within:ring-transparent dark:border-b-gray-600 dark:focus-within:border-primary/70",
+  ghost: "rounded border border-transparent bg-gray-50 text-gray-900 focus-within:bg-white focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/15 dark:bg-slate-800 dark:text-gray-100 dark:focus-within:bg-slate-700 dark:focus-within:border-primary/60 dark:focus-within:ring-primary/25",
+  filled: "rounded border border-gray-200 bg-gray-100 focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/25 dark:border-gray-700 dark:bg-slate-800 dark:focus-within:border-primary/60 dark:focus-within:ring-primary/30",
+  underlined: "rounded-none border-0 border-b border-gray-300 px-0 bg-transparent focus-within:border-primary focus-within:ring-0 focus-within:ring-transparent dark:border-b-gray-600 dark:focus-within:border-primary/70"
+};
+var roundedClasses = {
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  "2xl": "rounded-2xl",
+  "3xl": "rounded-3xl"
 };
-var labelBackground = {
-  outlined: "bg-white/90 dark:bg-slate-900",
-  filled: "bg-gray-100 dark:bg-slate-800",
-  standard: "bg-transparent"
+var sizeClasses = {
+  "x-small": {
+    paddingY: "py-2",
+    paddingX: "px-2",
+    text: "text-xs"
+  },
+  small: {
+    paddingY: "py-2.5",
+    paddingX: "px-2.5",
+    text: "text-sm"
+  },
+  medium: {
+    paddingY: "py-3",
+    paddingX: "px-3",
+    text: "text-base"
+  },
+  large: {
+    paddingY: "py-3.5",
+    paddingX: "px-3.5",
+    text: "text-lg"
+  },
+  "x-large": {
+    paddingY: "py-4",
+    paddingX: "px-4",
+    text: "text-xl"
+  }
 };
-var advancedContainerVariant = {
-  outlined: "rounded border-2 border-black bg-white dark:border-black dark:bg-slate-900",
-  filled: "rounded border border-gray-200 bg-gray-100 dark:border-gray-700 dark:bg-slate-800",
-  standard: "border-b border-gray-300 bg-transparent dark:border-gray-700"
+var statusClasses = {
+  error: "border-red-500 focus:border-red-500 focus:ring-red-400",
+  warn: "border-amber-500 focus:border-amber-500 focus:ring-amber-400",
+  success: "border-emerald-500 focus:border-emerald-500 focus:ring-emerald-400"
 };
-var renderMarkdown = (value) => marked.marked.parse(value || "", { async: false });
-var dispatchInputEvent = (element) => {
-  const event = new Event("input", { bubbles: true });
-  element.dispatchEvent(event);
+var statusMessageClasses = {
+  error: "text-red-600 dark:text-red-300",
+  warn: "text-amber-600 dark:text-amber-300",
+  success: "text-emerald-600 dark:text-emerald-300"
 };
-var toolbarButtonBase = "px-3 py-1 text-gray-700 transition-colors hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-slate-700 disabled:cursor-not-allowed disabled:opacity-50";
-var toolbarButtonActive = "bg-white text-gray-900 dark:bg-slate-900 dark:text-gray-100";
-var handleModeToggle = (wrapperId, mode, textareaName, simpleId, advancedInputId) => {
-  if (typeof document === "undefined") return;
-  const wrapper = document.getElementById(wrapperId);
-  const simple = document.getElementById(simpleId);
-  const advancedInput = document.getElementById(advancedInputId);
-  if (wrapper) {
-    wrapper.dataset.mode = mode;
+var DEFAULT_TOOLBAR = ["bold", "italic", "underline", "strike", "heading", "bulletList", "orderedList", "blockquote", "codeBlock"];
+var CODE_BLOCK_LANGUAGES = ["ts", "json", "python", "bash"];
+var DEFAULT_CODE_BLOCK_LANGUAGE = CODE_BLOCK_LANGUAGES[0];
+var TEXTAREA_TAB_CHARACTER = "	";
+var lowlight = lowlight$1.createLowlight(lowlight$1.common);
+lowlight.registerAlias({ ts: "typescript" });
+var turndown = new TurndownService__default.default({
+  codeBlockStyle: "fenced",
+  headingStyle: "atx",
+  bulletListMarker: "-"
+});
+var markdownToHtml = (markdown) => {
+  if (!markdown) {
+    return "<p></p>";
   }
-  if (simple) {
-    simple.classList.toggle("hidden", mode !== "simple");
-    simple.name = mode === "simple" ? textareaName : "";
+  return marked.marked.parse(markdown);
+};
+var htmlToMarkdown = (html) => turndown.turndown(html).trim();
+var createChangeEvent = (element) => ({
+  target: element,
+  currentTarget: element
+});
+var assignRef = (ref, value) => {
+  if (typeof ref === "function") {
+    ref(value);
+    return;
   }
-  if (advancedInput) {
-    advancedInput.classList.toggle("hidden", mode !== "advanced");
-    advancedInput.name = mode === "advanced" ? textareaName : "";
+  if (ref) {
+    ref.current = value;
   }
 };
-var TextArea = ({
-  variant = "outlined",
-  label,
-  className,
-  wrapperClassName,
-  id,
-  name,
-  placeholder,
-  rows = 4,
-  allowModeSwitch = true,
-  mode,
-  view = "editor",
-  value,
-  defaultValue,
-  disabled,
-  readOnly,
-  onChange,
-  onInput,
-  ...props
-}) => {
-  const textareaId = id || name || generateString();
-  const textareaName = name || textareaId;
-  const wrapperId = `${textareaId}-wrapper`;
-  const simpleTextareaId = `${textareaId}-simple`;
-  const advancedInputId = `${textareaId}-advanced-input`;
-  const advancedEditorId = `${textareaId}-advanced-editor`;
-  const advancedLabelId = `${textareaId}-advanced-label`;
-  const previewId = `${textareaId}-preview`;
-  const variantClass = variantClasses[variant] ?? variantClasses.outlined;
-  const labelPadding = label ? "pt-6" : void 0;
-  const placeholderValue = placeholder ?? (label ? " " : void 0);
-  const placeholderClass = label ? "placeholder-transparent" : void 0;
-  const labelBg = labelBackground[variant] ?? labelBackground.outlined;
-  const focusLabelBg = variant === "filled" ? "peer-focus:bg-gray-100 dark:peer-focus:bg-slate-800" : variant === "standard" ? "peer-focus:bg-transparent" : "peer-focus:bg-white/90 dark:peer-focus:bg-slate-900";
-  const resolvedMode = allowModeSwitch ? mode ?? "simple" : "simple";
-  const resolvedView = view ?? "editor";
-  const showEditor = resolvedView === "editor";
-  const showPreview = resolvedView === "view";
-  const contentValue = typeof value === "string" ? value : typeof defaultValue === "string" ? defaultValue : "";
-  const isControlled = typeof value === "string";
-  const editorEditable = !(disabled || readOnly);
-  const modeToggleName = `${textareaId}-mode-toggle`;
-  const simpleToggleId = `${modeToggleName}-simple`;
-  const advancedToggleId = `${modeToggleName}-advanced`;
-  const turndownService = React__default.default.useMemo(() => {
-    const service = new TurndownService__default.default({
-      codeBlockStyle: "fenced",
-      emDelimiter: "*",
-      strongDelimiter: "**",
-      bulletListMarker: "-"
-    });
-    service.addRule("strikethrough", {
-      filter: (node) => ["DEL", "S", "STRIKE"].includes(node.nodeName),
-      replacement: (content) => `~~${content}~~`
-    });
-    return service;
-  }, []);
-  const hiddenTextareaRef = React__default.default.useRef(null);
-  const lastMarkdownRef = React__default.default.useRef(contentValue);
-  const editorContentClass = tailwindMerge.twMerge(
-    baseClass,
-    "min-h-45 rounded border-0 bg-transparent outline-none whitespace-pre-wrap wrap-break-words",
-    "[&_p]:m-0 [&_p]:leading-6",
-    "[&_ul]:my-0 [&_ul]:list-disc [&_ul]:pl-5",
-    "[&_ol]:my-0 [&_ol]:list-decimal [&_ol]:pl-5",
-    "[&_li]:my-0",
-    "[&_blockquote]:border-l-2 [&_blockquote]:border-gray-300 [&_blockquote]:pl-3 [&_blockquote]:text-gray-600",
-    "dark:[&_blockquote]:border-gray-600 dark:[&_blockquote]:text-gray-300",
-    "[&_pre]:bg-gray-100 [&_pre]:rounded [&_pre]:p-3 [&_pre]:text-sm [&_pre]:overflow-x-auto",
-    "dark:[&_pre]:bg-slate-800",
-    "[&_code]:font-mono",
-    className,
-    !editorEditable ? "cursor-not-allowed opacity-50" : void 0
-  );
-  const editor = react.useEditor({
-    extensions: [StarterKit__default.default],
-    content: renderMarkdown(contentValue),
-    immediatelyRender: false,
-    editable: editorEditable,
-    editorProps: {
-      attributes: {
-        class: editorContentClass,
-        role: "textbox",
-        "aria-multiline": "true",
-        ...label ? { "aria-labelledby": advancedLabelId } : {}
-      }
-    },
-    onUpdate: ({ editor: currentEditor }) => {
-      const markdown = turndownService.turndown(currentEditor.getHTML());
-      if (markdown === lastMarkdownRef.current) return;
-      lastMarkdownRef.current = markdown;
-      if (!hiddenTextareaRef.current) return;
-      hiddenTextareaRef.current.value = markdown;
-      dispatchInputEvent(hiddenTextareaRef.current);
-    }
-  });
-  React__default.default.useEffect(() => {
-    if (!editor) return;
-    editor.setEditable(editorEditable);
-  }, [editor, editorEditable]);
-  React__default.default.useEffect(() => {
-    if (!editor) return;
-    editor.setOptions({
+var updateTextareaValue = (element, nextValue, selectionStart, selectionEnd) => {
+  element.value = nextValue;
+  element.setSelectionRange(selectionStart, selectionEnd);
+};
+var indentSelectedLines = (value, selectionStart, selectionEnd) => {
+  const lineStart = value.lastIndexOf("\n", Math.max(0, selectionStart - 1)) + 1;
+  const lineEndIndex = value.indexOf("\n", selectionEnd);
+  const lineEnd = lineEndIndex === -1 ? value.length : lineEndIndex;
+  const selectedBlock = value.slice(lineStart, lineEnd);
+  const lines = selectedBlock.split("\n");
+  const indentedBlock = lines.map((line) => `${TEXTAREA_TAB_CHARACTER}${line}`).join("\n");
+  return {
+    nextValue: `${value.slice(0, lineStart)}${indentedBlock}${value.slice(lineEnd)}`,
+    selectionStart: selectionStart + TEXTAREA_TAB_CHARACTER.length,
+    selectionEnd: selectionEnd + lines.length * TEXTAREA_TAB_CHARACTER.length
+  };
+};
+var outdentSelectedLines = (value, selectionStart, selectionEnd) => {
+  const lineStart = value.lastIndexOf("\n", Math.max(0, selectionStart - 1)) + 1;
+  const lineEndIndex = value.indexOf("\n", selectionEnd);
+  const lineEnd = lineEndIndex === -1 ? value.length : lineEndIndex;
+  const selectedBlock = value.slice(lineStart, lineEnd);
+  const lines = selectedBlock.split("\n");
+  const updatedLines = lines.map((line) => line.startsWith(TEXTAREA_TAB_CHARACTER) ? line.slice(TEXTAREA_TAB_CHARACTER.length) : line);
+  const removedBeforeSelectionStart = selectionStart === lineStart && !lines[0].startsWith(TEXTAREA_TAB_CHARACTER) ? 0 : lines[0].startsWith(TEXTAREA_TAB_CHARACTER) ? TEXTAREA_TAB_CHARACTER.length : 0;
+  const removedTotal = lines.reduce((count, line) => count + (line.startsWith(TEXTAREA_TAB_CHARACTER) ? TEXTAREA_TAB_CHARACTER.length : 0), 0);
+  return {
+    nextValue: `${value.slice(0, lineStart)}${updatedLines.join("\n")}${value.slice(lineEnd)}`,
+    selectionStart: Math.max(lineStart, selectionStart - removedBeforeSelectionStart),
+    selectionEnd: Math.max(lineStart, selectionEnd - removedTotal)
+  };
+};
+var isCodeBlockLanguage = (value) => CODE_BLOCK_LANGUAGES.includes(value);
+var ToolbarButton = ({ label, active, disabled, onMouseDown }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "button",
+  {
+    type: "button",
+    disabled,
+    onMouseDown,
+    className: tailwindMerge.twMerge(
+      "inline-flex min-w-8 items-center justify-center rounded border px-2 py-1 text-xs font-medium transition-colors",
+      active ? "border-primary bg-primary text-white" : "border-gray-300 bg-white text-gray-700 hover:border-gray-400 hover:bg-gray-50 dark:border-slate-600 dark:bg-slate-900 dark:text-gray-200 dark:hover:bg-slate-800",
+      disabled && "cursor-not-allowed opacity-50"
+    ),
+    children: label
+  }
+);
+var TextArea = React__default.default.forwardRef(
+  ({ variant = "outline", size = "medium", rounded = "md", success, error, warn, className, wrapperClassName, label, prepend, append, rows = 4, richText = false, toolbar = DEFAULT_TOOLBAR, ...props }, ref) => {
+    const { placeholder, onFocus, onBlur, onChange, onKeyDown, value, defaultValue, disabled, readOnly, ...textareaProps } = props;
+    const reactId = React__default.default.useId();
+    const hasLabel = Boolean(label);
+    const hasProvidedPlaceholder = typeof placeholder === "string" && placeholder.trim().length > 0;
+    const hidePlaceholderUntilFocus = hasLabel && hasProvidedPlaceholder;
+    const [isFocused, setIsFocused] = React__default.default.useState(false);
+    const classBase = "textarea-base transition-colors duration-200 w-full has-[textarea:disabled]:opacity-50 has-[textarea:disabled]:cursor-not-allowed";
+    const textareaBase = "peer block w-full min-w-0 resize-y border-0 bg-transparent p-0 text-gray-900 dark:text-gray-100 placeholder:text-gray-500 dark:placeholder:text-gray-400 focus:outline-none focus:ring-0";
+    const proseBase = "ProseMirror min-h-[7rem] w-full border-0 bg-transparent p-0 text-gray-900 dark:text-gray-100 focus:outline-none [&_blockquote]:border-l-4 [&_blockquote]:border-gray-300 [&_blockquote]:pl-3 [&_blockquote]:italic dark:[&_blockquote]:border-slate-600 [&_:not(pre)>code]:rounded [&_:not(pre)>code]:bg-black [&_:not(pre)>code]:px-1 [&_:not(pre)>code]:py-0.5 [&_:not(pre)>code]:text-white dark:[&_:not(pre)>code]:bg-black dark:[&_:not(pre)>code]:text-white [&_pre]:overflow-x-auto [&_pre]:rounded [&_pre]:bg-black [&_pre]:p-3 [&_pre]:text-white [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:text-white [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5 [&_h1]:text-2xl [&_h1]:font-semibold [&_h2]:text-xl [&_h2]:font-semibold";
+    const hiddenTextareaRef = React__default.default.useRef(null);
+    const forwardedRef = React__default.default.useRef(null);
+    const isControlled = value !== void 0;
+    const markdownValue = typeof value === "string" ? value : typeof defaultValue === "string" ? defaultValue : "";
+    const [internalMarkdown, setInternalMarkdown] = React__default.default.useState(markdownValue);
+    const resolvedMarkdownValue = isControlled ? typeof value === "string" ? value : "" : internalMarkdown;
+    const status = error ? { tone: "error", message: error } : warn ? { tone: "warn", message: warn } : success ? { tone: "success", message: success } : void 0;
+    const variantClass = variantClasses[variant] ?? variantClasses.outline;
+    const toneClass = status ? statusClasses[status.tone] : void 0;
+    const hasPrepend = typeof prepend === "string" ? prepend.trim().length > 0 : Boolean(prepend);
+    const hasAppend = typeof append === "string" ? append.trim().length > 0 : Boolean(append);
+    const sizeConfig = sizeClasses[size] ?? sizeClasses.medium;
+    const sizeClass = [sizeConfig.paddingY, sizeConfig.paddingX, sizeConfig.text].join(" ");
+    const roundedClass = variant === "sharp" || variant === "text" || variant === "underlined" ? "rounded-none" : roundedClasses[rounded];
+    const inputName = textareaProps.name || reactId;
+    const basePlaceholder = placeholder ?? (hasLabel ? " " : void 0);
+    const placeholderValue = hidePlaceholderUntilFocus ? isFocused ? placeholder : " " : basePlaceholder;
+    const placeholderClass = hidePlaceholderUntilFocus ? "placeholder-transparent focus:placeholder-gray-500 focus:dark:placeholder-gray-400" : void 0;
+    const editor = react.useEditor({
+      extensions: [
+        StarterKit__default.default.configure({ heading: { levels: [1, 2] }, codeBlock: false }),
+        CodeBlockLowlight__default.default.configure({
+          defaultLanguage: DEFAULT_CODE_BLOCK_LANGUAGE,
+          enableTabIndentation: true,
+          lowlight,
+          HTMLAttributes: {
+            class: "hljs"
+          }
+        }),
+        Underline__default.default
+      ],
+      content: markdownToHtml(resolvedMarkdownValue),
+      editable: richText && !disabled && !readOnly,
+      immediatelyRender: false,
       editorProps: {
-        ...editor.options.editorProps,
         attributes: {
-          ...editor.options.editorProps?.attributes,
-          class: editorContentClass,
-          role: "textbox",
-          "aria-multiline": "true",
-          ...label ? { "aria-labelledby": advancedLabelId } : {}
+          class: tailwindMerge.twMerge(proseBase, placeholderClass),
+          "data-placeholder": placeholderValue ?? ""
+        }
+      },
+      onFocus: () => {
+        if (!richText) {
+          return;
+        }
+        if (hidePlaceholderUntilFocus) {
+          setIsFocused(true);
         }
+        const target = hiddenTextareaRef.current;
+        if (target) {
+          onFocus?.(createChangeEvent(target));
+        }
+      },
+      onBlur: () => {
+        if (!richText) {
+          return;
+        }
+        if (hidePlaceholderUntilFocus) {
+          setIsFocused(false);
+        }
+        const target = hiddenTextareaRef.current;
+        if (target) {
+          onBlur?.(createChangeEvent(target));
+        }
+      },
+      onUpdate: ({ editor: currentEditor }) => {
+        if (!richText) {
+          return;
+        }
+        const nextMarkdown = htmlToMarkdown(currentEditor.getHTML());
+        const target = hiddenTextareaRef.current;
+        setInternalMarkdown(nextMarkdown);
+        if (!target) {
+          return;
+        }
+        target.value = nextMarkdown;
+        onChange?.(createChangeEvent(target));
       }
     });
-  }, [editor, editorContentClass, label, advancedLabelId]);
-  React__default.default.useEffect(() => {
-    if (!editor || typeof value !== "string") return;
-    if (value === lastMarkdownRef.current) return;
-    editor.commands.setContent(renderMarkdown(value), { emitUpdate: false });
-    lastMarkdownRef.current = value;
-    if (hiddenTextareaRef.current) {
-      hiddenTextareaRef.current.value = value;
-    }
-  }, [editor, value]);
-  React__default.default.useEffect(() => {
-    if (!hiddenTextareaRef.current) return;
-    if (hiddenTextareaRef.current.value === contentValue) return;
-    hiddenTextareaRef.current.value = contentValue;
-  }, [contentValue]);
-  const textareaProps = {
-    ...props,
-    onChange,
-    onInput,
-    disabled,
-    readOnly
-  };
-  const minHeightStyle = rows ? { minHeight: `${rows * 20}px` } : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      id: wrapperId,
-      "data-mode": resolvedMode,
-      className: tailwindMerge.twMerge("flex flex-col gap-1", wrapperClassName),
-      children: [
-        allowModeSwitch && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              type: "radio",
-              name: modeToggleName,
-              id: simpleToggleId,
-              value: "simple",
-              defaultChecked: resolvedMode === "simple",
-              className: "peer/simple sr-only",
-              onChange: () => handleModeToggle(wrapperId, "simple", textareaName, simpleTextareaId, advancedInputId)
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              type: "radio",
-              name: modeToggleName,
-              id: advancedToggleId,
-              value: "advanced",
-              defaultChecked: resolvedMode === "advanced",
-              className: "peer/advanced sr-only",
-              onChange: () => handleModeToggle(
-                wrapperId,
-                "advanced",
-                textareaName,
-                simpleTextareaId,
-                advancedInputId
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex overflow-hidden rounded-md border border-gray-200 bg-gray-50 text-xs font-medium dark:border-gray-700 dark:bg-slate-800", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "label",
-              {
-                htmlFor: simpleToggleId,
-                className: tailwindMerge.twMerge(
-                  "cursor-pointer px-3 py-1 transition-colors",
-                  "text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-slate-700",
-                  "peer-checked/simple:bg-white peer-checked/simple:text-gray-900 peer-checked/simple:dark:bg-slate-900 peer-checked/simple:dark:text-gray-100"
-                ),
-                children: "Jednoduch\xFD"
-              }
-            ),
+    const activeCodeBlockLanguage = (() => {
+      const language = editor?.getAttributes("codeBlock").language;
+      if (typeof language === "string" && isCodeBlockLanguage(language)) {
+        return language;
+      }
+      return DEFAULT_CODE_BLOCK_LANGUAGE;
+    })();
+    React__default.default.useEffect(() => {
+      if (!richText) {
+        return;
+      }
+      const target = hiddenTextareaRef.current;
+      if (!target) {
+        return;
+      }
+      target.value = resolvedMarkdownValue;
+      forwardedRef.current = target;
+      assignRef(ref, target);
+    }, [ref, resolvedMarkdownValue, richText]);
+    React__default.default.useEffect(() => {
+      if (!editor || !richText || !isControlled) {
+        return;
+      }
+      const nextMarkdown = typeof value === "string" ? value : "";
+      const currentMarkdown = htmlToMarkdown(editor.getHTML());
+      if (currentMarkdown === nextMarkdown) {
+        return;
+      }
+      editor.commands.setContent(markdownToHtml(nextMarkdown), { emitUpdate: false });
+    }, [editor, isControlled, richText, value]);
+    React__default.default.useEffect(() => {
+      if (!isControlled) {
+        setInternalMarkdown(typeof defaultValue === "string" ? defaultValue : "");
+      }
+    }, [defaultValue, isControlled]);
+    React__default.default.useEffect(() => {
+      if (!editor || !richText) {
+        return;
+      }
+      editor.setEditable(!disabled && !readOnly);
+    }, [disabled, editor, readOnly, richText]);
+    const renderPrepend = hasPrepend ? typeof prepend === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("text-gray-500 dark:text-gray-400", sizeConfig.text), children: prepend }) : prepend : null;
+    const renderAppend = hasAppend ? typeof append === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("text-gray-500 dark:text-gray-400", sizeConfig.text), children: append }) : append : null;
+    const handleFocus = (event) => {
+      if (hidePlaceholderUntilFocus) setIsFocused(true);
+      onFocus?.(event);
+    };
+    const handleBlur = (event) => {
+      if (hidePlaceholderUntilFocus) setIsFocused(false);
+      onBlur?.(event);
+    };
+    const handleKeyDown = (event) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented || event.key !== "Tab" || disabled || readOnly) {
+        return;
+      }
+      const target = event.currentTarget;
+      const { selectionStart, selectionEnd, value: currentValue } = target;
+      event.preventDefault();
+      if (selectionStart !== selectionEnd && currentValue.slice(selectionStart, selectionEnd).includes("\n")) {
+        const nextState = event.shiftKey ? outdentSelectedLines(currentValue, selectionStart, selectionEnd) : indentSelectedLines(currentValue, selectionStart, selectionEnd);
+        updateTextareaValue(target, nextState.nextValue, nextState.selectionStart, nextState.selectionEnd);
+        onChange?.(createChangeEvent(target));
+        return;
+      }
+      if (event.shiftKey) {
+        const lineStart = currentValue.lastIndexOf("\n", Math.max(0, selectionStart - 1)) + 1;
+        if (currentValue.slice(lineStart, selectionStart).endsWith(TEXTAREA_TAB_CHARACTER)) {
+          const nextValue2 = `${currentValue.slice(0, selectionStart - TEXTAREA_TAB_CHARACTER.length)}${currentValue.slice(selectionEnd)}`;
+          const nextPosition2 = selectionStart - TEXTAREA_TAB_CHARACTER.length;
+          updateTextareaValue(target, nextValue2, nextPosition2, nextPosition2);
+          onChange?.(createChangeEvent(target));
+        }
+        return;
+      }
+      const nextValue = `${currentValue.slice(0, selectionStart)}${TEXTAREA_TAB_CHARACTER}${currentValue.slice(selectionEnd)}`;
+      const nextPosition = selectionStart + TEXTAREA_TAB_CHARACTER.length;
+      updateTextareaValue(target, nextValue, nextPosition, nextPosition);
+      onChange?.(createChangeEvent(target));
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex flex-col gap-1", wrapperClassName), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex w-full items-start gap-2", classBase, variantClass, roundedClass, toneClass, sizeClass, className), children: [
+        hasPrepend && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-start pt-0.5", children: renderPrepend }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative min-w-0 flex-1", children: [
+          richText ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              "label",
+              "textarea",
               {
-                htmlFor: advancedToggleId,
-                className: tailwindMerge.twMerge(
-                  "cursor-pointer px-3 py-1 transition-colors",
-                  "text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-slate-700",
-                  "peer-checked/advanced:bg-white peer-checked/advanced:text-gray-900 peer-checked/advanced:dark:bg-slate-900 peer-checked/advanced:dark:text-gray-100"
-                ),
-                children: "Pokro\u010Dil\xFD"
+                ...textareaProps,
+                ref: (node) => {
+                  hiddenTextareaRef.current = node;
+                  forwardedRef.current = node;
+                  if (node) {
+                    assignRef(ref, node);
+                  }
+                },
+                id: inputName,
+                name: inputName,
+                rows,
+                value: isControlled ? value : void 0,
+                defaultValue: !isControlled ? defaultValue : void 0,
+                disabled,
+                readOnly: true,
+                tabIndex: -1,
+                "aria-hidden": true,
+                className: "sr-only"
               }
-            )
-          ] }) })
-        ] }),
-        (resolvedMode === "simple" || allowModeSwitch) && /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: tailwindMerge.twMerge(
-              "relative flex items-start",
-              allowModeSwitch ? "hidden peer-checked/simple:flex peer-checked/advanced:hidden" : void 0
             ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "textarea",
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-1 border-b border-gray-200 pb-2 dark:border-slate-700", children: [
+              toolbar.includes("bold") && /* @__PURE__ */ jsxRuntime.jsx(
+                ToolbarButton,
                 {
-                  ...textareaProps,
-                  id: simpleTextareaId,
-                  name: !allowModeSwitch || resolvedMode === "simple" ? textareaName : "",
-                  rows,
-                  placeholder: placeholderValue,
-                  value,
-                  defaultValue,
-                  className: tailwindMerge.twMerge(
-                    "peer",
-                    baseClass,
-                    variantClass,
-                    labelPadding,
-                    placeholderClass,
-                    className
-                  )
+                  label: "B",
+                  disabled: !editor?.isEditable,
+                  active: editor?.isActive("bold"),
+                  onMouseDown: (event) => {
+                    event.preventDefault();
+                    editor?.chain().focus().toggleBold().run();
+                  }
                 }
               ),
-              label && /* @__PURE__ */ jsxRuntime.jsx(
-                "label",
+              toolbar.includes("italic") && /* @__PURE__ */ jsxRuntime.jsx(
+                ToolbarButton,
                 {
-                  htmlFor: simpleTextareaId,
-                  className: tailwindMerge.twMerge(
-                    "absolute transition-all duration-150 pointer-events-none left-3 text-gray-700 dark:text-gray-200",
-                    "top-0 -translate-y-2/3 text-xs px-1",
-                    labelBg,
-                    focusLabelBg,
-                    "peer-focus:top-0 peer-focus:-translate-y-1/2 peer-focus:text-xs peer-focus:px-1 peer-focus:text-gray-600 dark:peer-focus:text-gray-300",
-                    "peer-placeholder-shown:top-3 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:text-sm peer-placeholder-shown:bg-transparent peer-placeholder-shown:text-gray-500 dark:peer-placeholder-shown:text-gray-400"
-                  ),
-                  children: label
+                  label: "I",
+                  disabled: !editor?.isEditable,
+                  active: editor?.isActive("italic"),
+                  onMouseDown: (event) => {
+                    event.preventDefault();
+                    editor?.chain().focus().toggleItalic().run();
+                  }
                 }
-              )
-            ]
-          }
-        ),
-        (resolvedMode === "advanced" || allowModeSwitch) && /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: tailwindMerge.twMerge(
-              "flex flex-col gap-2",
-              allowModeSwitch ? "hidden peer-checked/advanced:flex peer-checked/simple:hidden" : void 0
-            ),
-            children: [
-              label && /* @__PURE__ */ jsxRuntime.jsx(
-                "label",
+              ),
+              toolbar.includes("underline") && /* @__PURE__ */ jsxRuntime.jsx(
+                ToolbarButton,
                 {
-                  id: advancedLabelId,
-                  className: "text-sm font-medium text-gray-700 dark:text-gray-200",
-                  children: label
+                  label: "U",
+                  disabled: !editor?.isEditable,
+                  active: editor?.isActive("underline"),
+                  onMouseDown: (event) => {
+                    event.preventDefault();
+                    editor?.chain().focus().toggleUnderline().run();
+                  }
                 }
               ),
-              showEditor && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center justify-between gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex overflow-hidden rounded-md border border-gray-200 bg-gray-50 text-xs font-medium dark:border-gray-700 dark:bg-slate-800", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    className: tailwindMerge.twMerge(
-                      toolbarButtonBase,
-                      editor?.isActive("bold") ? toolbarButtonActive : void 0
-                    ),
-                    onClick: () => editor?.chain().focus().toggleBold().run(),
-                    disabled: !editor || !editorEditable,
-                    children: "B"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    className: tailwindMerge.twMerge(
-                      toolbarButtonBase,
-                      editor?.isActive("italic") ? toolbarButtonActive : void 0
-                    ),
-                    onClick: () => editor?.chain().focus().toggleItalic().run(),
-                    disabled: !editor || !editorEditable,
-                    children: "I"
+              toolbar.includes("strike") && /* @__PURE__ */ jsxRuntime.jsx(
+                ToolbarButton,
+                {
+                  label: "S",
+                  disabled: !editor?.isEditable,
+                  active: editor?.isActive("strike"),
+                  onMouseDown: (event) => {
+                    event.preventDefault();
+                    editor?.chain().focus().toggleStrike().run();
                   }
-                ),
+                }
+              ),
+              toolbar.includes("heading") && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
+                  ToolbarButton,
                   {
-                    type: "button",
-                    className: tailwindMerge.twMerge(
-                      toolbarButtonBase,
-                      editor?.isActive("strike") ? toolbarButtonActive : void 0
-                    ),
-                    onClick: () => editor?.chain().focus().toggleStrike().run(),
-                    disabled: !editor || !editorEditable,
-                    children: "S"
+                    label: "H1",
+                    disabled: !editor?.isEditable,
+                    active: editor?.isActive("heading", { level: 1 }),
+                    onMouseDown: (event) => {
+                      event.preventDefault();
+                      editor?.chain().focus().toggleHeading({ level: 1 }).run();
+                    }
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
+                  ToolbarButton,
                   {
-                    type: "button",
-                    className: tailwindMerge.twMerge(
-                      toolbarButtonBase,
-                      editor?.isActive("bulletList") ? toolbarButtonActive : void 0
-                    ),
-                    onClick: () => editor?.chain().focus().toggleBulletList().run(),
-                    disabled: !editor || !editorEditable,
-                    children: "\u2022 List"
+                    label: "H2",
+                    disabled: !editor?.isEditable,
+                    active: editor?.isActive("heading", { level: 2 }),
+                    onMouseDown: (event) => {
+                      event.preventDefault();
+                      editor?.chain().focus().toggleHeading({ level: 2 }).run();
+                    }
                   }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    className: tailwindMerge.twMerge(
-                      toolbarButtonBase,
-                      editor?.isActive("orderedList") ? toolbarButtonActive : void 0
-                    ),
-                    onClick: () => editor?.chain().focus().toggleOrderedList().run(),
-                    disabled: !editor || !editorEditable,
-                    children: "1. List"
+                )
+              ] }),
+              toolbar.includes("bulletList") && /* @__PURE__ */ jsxRuntime.jsx(
+                ToolbarButton,
+                {
+                  label: "List",
+                  disabled: !editor?.isEditable,
+                  active: editor?.isActive("bulletList"),
+                  onMouseDown: (event) => {
+                    event.preventDefault();
+                    editor?.chain().focus().toggleBulletList().run();
                   }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    className: tailwindMerge.twMerge(
-                      toolbarButtonBase,
-                      editor?.isActive("blockquote") ? toolbarButtonActive : void 0
-                    ),
-                    onClick: () => editor?.chain().focus().toggleBlockquote().run(),
-                    disabled: !editor || !editorEditable,
-                    children: "Quote"
+                }
+              ),
+              toolbar.includes("orderedList") && /* @__PURE__ */ jsxRuntime.jsx(
+                ToolbarButton,
+                {
+                  label: "1.",
+                  disabled: !editor?.isEditable,
+                  active: editor?.isActive("orderedList"),
+                  onMouseDown: (event) => {
+                    event.preventDefault();
+                    editor?.chain().focus().toggleOrderedList().run();
                   }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    className: tailwindMerge.twMerge(
-                      toolbarButtonBase,
-                      editor?.isActive("code") ? toolbarButtonActive : void 0
-                    ),
-                    onClick: () => editor?.chain().focus().toggleCode().run(),
-                    disabled: !editor || !editorEditable,
-                    children: "Code"
+                }
+              ),
+              toolbar.includes("blockquote") && /* @__PURE__ */ jsxRuntime.jsx(
+                ToolbarButton,
+                {
+                  label: "Quote",
+                  disabled: !editor?.isEditable,
+                  active: editor?.isActive("blockquote"),
+                  onMouseDown: (event) => {
+                    event.preventDefault();
+                    editor?.chain().focus().toggleBlockquote().run();
                   }
-                ),
+                }
+              ),
+              toolbar.includes("codeBlock") && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
+                  ToolbarButton,
                   {
-                    type: "button",
-                    className: tailwindMerge.twMerge(
-                      toolbarButtonBase,
-                      editor?.isActive("codeBlock") ? toolbarButtonActive : void 0
-                    ),
-                    onClick: () => editor?.chain().focus().toggleCodeBlock().run(),
-                    disabled: !editor || !editorEditable,
-                    children: "Code block"
-                  }
-                )
-              ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("overflow-hidden", advancedContainerVariant[variant]), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-3 space-y-3", children: [
-                showEditor && /* @__PURE__ */ jsxRuntime.jsx(
-                  react.EditorContent,
-                  {
-                    editor,
-                    id: advancedEditorId,
-                    className: "w-full",
-                    style: minHeightStyle
+                    label: "Code",
+                    disabled: !editor?.isEditable,
+                    active: editor?.isActive("codeBlock"),
+                    onMouseDown: (event) => {
+                      event.preventDefault();
+                      editor?.chain().focus().toggleCodeBlock({ language: activeCodeBlockLanguage }).run();
+                    }
                   }
                 ),
+                /* @__PURE__ */ jsxRuntime.jsx("label", { className: "sr-only", htmlFor: `${inputName}-code-language`, children: "Code language" }),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  "textarea",
+                  "select",
                   {
-                    ...textareaProps,
-                    ref: hiddenTextareaRef,
-                    id: advancedInputId,
-                    name: !allowModeSwitch || resolvedMode === "advanced" ? textareaName : "",
-                    rows,
-                    placeholder: placeholderValue,
-                    className: "sr-only",
-                    ...isControlled ? { value } : { defaultValue: contentValue }
-                  }
-                ),
-                showPreview && /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    id: previewId,
-                    className: tailwindMerge.twMerge(
-                      baseClass,
-                      "min-h-45 rounded border-0 px-0 focus:outline-none whitespace-pre-wrap wrap-break-words",
-                      className
-                    ),
-                    style: minHeightStyle,
-                    dangerouslySetInnerHTML: {
-                      __html: renderMarkdown(contentValue)
-                    }
+                    id: `${inputName}-code-language`,
+                    value: activeCodeBlockLanguage,
+                    disabled: !editor?.isEditable,
+                    className: "min-w-24 rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/30 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-600 dark:bg-slate-900 dark:text-gray-200",
+                    onChange: (event) => {
+                      const language = event.target.value;
+                      if (!isCodeBlockLanguage(language)) {
+                        return;
+                      }
+                      editor?.chain().focus().setCodeBlock({ language }).run();
+                    },
+                    children: CODE_BLOCK_LANGUAGES.map((language) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: language, children: language }, language))
                   }
                 )
-              ] }) })
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(react.EditorContent, { editor, className: "pt-3" })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+            "textarea",
+            {
+              ...textareaProps,
+              ref: (node) => {
+                forwardedRef.current = node;
+                assignRef(ref, node);
+              },
+              id: inputName,
+              name: inputName,
+              rows,
+              placeholder: placeholderValue,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              onKeyDown: handleKeyDown,
+              onChange,
+              disabled,
+              readOnly,
+              value,
+              defaultValue,
+              className: tailwindMerge.twMerge(textareaBase, placeholderClass)
+            }
+          ),
+          label && /* @__PURE__ */ jsxRuntime.jsx(
+            "label",
+            {
+              htmlFor: inputName,
+              className: tailwindMerge.twMerge(
+                "absolute left-0 z-10 transition-all duration-150 pointer-events-none text-gray-700 dark:text-gray-200",
+                "-top-2 -translate-y-full text-xs bg-white px-1 dark:bg-slate-900",
+                !richText && "peer-focus:left-0 peer-focus:-top-5 peer-focus:-translate-y-full peer-focus:text-xs peer-focus:text-gray-600 dark:peer-focus:text-gray-300",
+                !richText && "peer-placeholder-shown:top-3 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:text-sm peer-placeholder-shown:bg-transparent peer-placeholder-shown:px-0 peer-placeholder-shown:text-gray-500 dark:peer-placeholder-shown:text-gray-400",
+                !richText && "peer-[&:not(:placeholder-shown)]:left-0 peer-[&:not(:placeholder-shown)]:-top-2 peer-[&:not(:placeholder-shown)]:-translate-y-full peer-[&:not(:placeholder-shown)]:text-xs peer-[&:not(:placeholder-shown)]:bg-white peer-[&:not(:placeholder-shown)]:px-1 peer-[&:not(:placeholder-shown)]:text-gray-700 dark:peer-[&:not(:placeholder-shown)]:bg-slate-900 dark:peer-[&:not(:placeholder-shown)]:text-gray-200",
+                richText && (isFocused || resolvedMarkdownValue) && "-top-2 -translate-y-full text-xs",
+                richText && !(isFocused || resolvedMarkdownValue) && "top-3 translate-y-0 text-sm bg-transparent px-0 text-gray-500 dark:text-gray-400"
+              ),
+              children: label
+            }
+          )
+        ] }),
+        hasAppend && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-start pt-0.5", children: renderAppend })
+      ] }),
+      status?.message && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("text-sm", statusMessageClasses[status.tone]), children: status.message })
+    ] });
+  }
+);
+TextArea.displayName = "TextArea";
 var TextArea_default = TextArea;
 
 module.exports = TextArea_default;