@rufous/ui 0.2.59 → 0.2.60

package/dist/main.cjs

@@ -165,6 +165,7 @@ __export(main_exports, {
   ViewIcon: () => viewIcon_default,
   WorkItemIcon: () => workItemIcon_default,
   Zoom: () => Zoom,
+  transformLegacyTodos: () => transformLegacyTodos,
   useRufousTheme: () => useRufousTheme
 });
 module.exports = __toCommonJS(main_exports);
@@ -9615,7 +9616,7 @@ var STATUS_COLORS = {
 };
 var CustomTaskItem = import_extension_task_item.default.extend({
   addStorage() {
-    return { taskTodoEnabled: true };
+    return { taskTodoEnabled: false };
   },
   addAttributes() {
     return {
@@ -9660,27 +9661,6 @@ var CustomTaskItem = import_extension_task_item.default.extend({
           }
           return false;
         }
-        if (this.editor.storage.taskTodoEnabled === false) {
-          const afterContent2 = $from.parent.content.cut($from.parentOffset);
-          const schema2 = state.schema;
-          const tr2 = state.tr;
-          if (afterContent2.size > 0) {
-            tr2.delete($from.pos, $from.end());
-          }
-          let taskListDepth = -1;
-          for (let d = taskDepth - 1; d >= 0; d--) {
-            if ($from.node(d).type.name === "taskList") {
-              taskListDepth = d;
-              break;
-            }
-          }
-          const insertPos2 = taskListDepth !== -1 ? tr2.mapping.map($from.after(taskListDepth)) : tr2.mapping.map($from.after(taskDepth));
-          const newPara2 = afterContent2.size > 0 ? schema2.nodes.paragraph.create(null, afterContent2) : schema2.nodes.paragraph.create();
-          tr2.insert(insertPos2, newPara2);
-          tr2.setSelection(import_prosemirror_state.TextSelection.near(tr2.doc.resolve(insertPos2 + 1)));
-          this.editor.view.dispatch(tr2);
-          return true;
-        }
         const taskNode = $from.node(taskDepth);
         const status = taskNode.attrs.status || "todo";
         const schema = state.schema;
@@ -9783,7 +9763,7 @@ var CustomTaskItem = import_extension_task_item.default.extend({
   addNodeView() {
     return ({ node, HTMLAttributes, getPos, editor }) => {
       const li = document.createElement("li");
-      li.style.cssText = "display: flex; align-items: flex-start; gap: 8px; margin: 4px 0; list-style: none; ";
+      li.style.cssText = "display: flex; align-items: flex-start; gap: 6px; margin: 0; list-style: none; ";
       Object.entries(HTMLAttributes || {}).forEach(([key, val]) => {
         if (val != null && val !== false) {
           li.setAttribute(key, String(val));
@@ -9792,7 +9772,7 @@ var CustomTaskItem = import_extension_task_item.default.extend({
       li.setAttribute("data-status", node.attrs.status || "todo");
       const label = document.createElement("label");
       label.contentEditable = "false";
-      label.style.cssText = "flex-shrink: 0; margin-top: 3px;";
+      label.style.cssText = "flex-shrink: 0;";
       const checkbox = document.createElement("span");
       const updateCheckbox = (status) => {
         const colors = STATUS_COLORS[status] || STATUS_COLORS.todo;
@@ -9807,7 +9787,7 @@ var CustomTaskItem = import_extension_task_item.default.extend({
           "border-radius: 3px",
           "cursor: pointer",
           "user-select: none",
-          "margin-top: 7px",
+          "margin-top: 3px",
           "border: 2px solid " + colors.border,
           `background-image: url("${imageUrl}")`,
           "background-repeat: no-repeat",
@@ -10033,34 +10013,42 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
   const menuRef = (0, import_react55.useRef)(null);
   (0, import_react55.useEffect)(() => {
     const handleClick = (e) => {
-      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+      const target = e.target;
+      if (ref.current && !ref.current.contains(target) && menuRef.current && !menuRef.current.contains(target)) {
+        setOpen(false);
+      }
     };
     document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
   }, []);
   (0, import_react55.useEffect)(() => {
-    if (!open || !menuRef.current) return;
+    if (!open || !menuRef.current || !ref.current) return;
     const menu = menuRef.current;
-    menu.style.left = "0";
-    menu.style.right = "auto";
-    requestAnimationFrame(() => {
-      if (!menu) return;
-      const rect = menu.getBoundingClientRect();
+    const trigger2 = ref.current;
+    const position = () => {
+      const triggerRect = trigger2.getBoundingClientRect();
       const vw = window.innerWidth;
-      const parentLeft = ref.current?.getBoundingClientRect().left || 0;
-      if (rect.right > vw - 8) {
-        menu.style.left = "auto";
-        menu.style.right = "0";
-        const newRect = menu.getBoundingClientRect();
-        if (newRect.left < 8) {
-          menu.style.left = `${8 - parentLeft}px`;
-          menu.style.right = "auto";
+      const vh = window.innerHeight;
+      let left = triggerRect.left;
+      let top = triggerRect.bottom + 4;
+      menu.style.left = `${left}px`;
+      menu.style.top = `${top}px`;
+      requestAnimationFrame(() => {
+        if (!menu) return;
+        const menuRect = menu.getBoundingClientRect();
+        if (menuRect.right > vw - 8) {
+          left = Math.max(8, triggerRect.right - menuRect.width);
         }
-      } else if (rect.left < 8) {
-        menu.style.left = `${8 - parentLeft}px`;
-        menu.style.right = "auto";
-      }
-    });
+        if (left < 8) left = 8;
+        if (menuRect.bottom > vh - 8) {
+          top = triggerRect.top - menuRect.height - 4;
+          if (top < 8) top = 8;
+        }
+        menu.style.left = `${left}px`;
+        menu.style.top = `${top}px`;
+      });
+    };
+    position();
   }, [open]);
   return /* @__PURE__ */ import_react55.default.createElement("div", { className: `dropdown ${className}`, ref }, /* @__PURE__ */ import_react55.default.createElement(
     "button",
@@ -10071,7 +10059,7 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
     },
     trigger.label,
     /* @__PURE__ */ import_react55.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE")
-  ), open && /* @__PURE__ */ import_react55.default.createElement("div", { ref: menuRef, className: "dropdown-menu", onClick: keepOpen ? void 0 : () => setOpen(false) }, typeof children === "function" ? children(() => setOpen(false)) : children));
+  ), open && /* @__PURE__ */ import_react55.default.createElement("div", { ref: menuRef, className: "dropdown-menu dropdown-menu-fixed", onClick: keepOpen ? void 0 : () => setOpen(false) }, typeof children === "function" ? children(() => setOpen(false)) : children));
 };
 var InsertPanel = ({ editor, onClose, mode = "video" }) => {
   const [activeTab, setActiveTab] = (0, import_react55.useState)("link");
@@ -11489,6 +11477,79 @@ var VideoToolbar = ({ editor }) => {
 };
 var VideoToolbar_default = VideoToolbar;
 
+// lib/RufousTextEditor/legacyTodoTransform.ts
+var IMAGE_TO_STATUS = {
+  "todo-blank.svg": "todo",
+  "working.svg": "working",
+  "blocked.svg": "blocked",
+  "closed.svg": "resolved"
+};
+function getStatusFromImgSrc(src) {
+  for (const [key, status] of Object.entries(IMAGE_TO_STATUS)) {
+    if (src.includes(key)) return status;
+  }
+  return "todo";
+}
+function transformLegacyTodos(html) {
+  if (!html || !html.includes("todo-item")) return html;
+  const div = document.createElement("div");
+  div.innerHTML = html;
+  const children = Array.from(div.childNodes);
+  const result = [];
+  let currentTaskList = null;
+  for (const child of children) {
+    if (child instanceof HTMLElement && child.classList.contains("todo-item")) {
+      const img = child.querySelector("button img, .todo-item-button img");
+      const status = img ? getStatusFromImgSrc(img.src) : "todo";
+      let text = "";
+      const classSpan = child.querySelector(".todo-item-text");
+      if (classSpan) {
+        text = classSpan.textContent?.trim() || "";
+      } else {
+        const spans = child.querySelectorAll("span");
+        for (const span of Array.from(spans)) {
+          if (!span.closest("button") && !span.closest(".todo-item-button")) {
+            text = span.textContent?.trim() || "";
+            break;
+          }
+        }
+      }
+      const li = document.createElement("li");
+      li.setAttribute("data-type", "taskItem");
+      li.setAttribute("data-status", status);
+      li.setAttribute("data-checked", "false");
+      const label = document.createElement("label");
+      const checkbox = document.createElement("input");
+      checkbox.type = "checkbox";
+      const labelSpan = document.createElement("span");
+      label.appendChild(checkbox);
+      label.appendChild(labelSpan);
+      const contentDiv = document.createElement("div");
+      const p = document.createElement("p");
+      if (text) {
+        p.textContent = text;
+      }
+      contentDiv.appendChild(p);
+      li.appendChild(label);
+      li.appendChild(contentDiv);
+      if (!currentTaskList) {
+        currentTaskList = document.createElement("ul");
+        currentTaskList.setAttribute("data-type", "taskList");
+        result.push(currentTaskList);
+      }
+      currentTaskList.appendChild(li);
+    } else {
+      currentTaskList = null;
+      result.push(child);
+    }
+  }
+  const output = document.createElement("div");
+  for (const node of result) {
+    output.appendChild(node);
+  }
+  return output.innerHTML;
+}
+
 // lib/RufousTextEditor/RufousTextEditor.tsx
 var VARIANT_BUTTONS = {
   default: [
@@ -11564,6 +11625,9 @@ var RufousTextEditor = ({
   variant = "default",
   buttons,
   hideButtons,
+  disabled = false,
+  error = false,
+  helperText,
   width,
   height,
   resizable = false,
@@ -11589,8 +11653,9 @@ var RufousTextEditor = ({
   (0, import_react58.useEffect)(() => {
     onBlurRef.current = onBlur;
   }, [onBlur]);
+  const isEditable = editable && !disabled;
   const editor = (0, import_react59.useEditor)({
-    editable,
+    editable: isEditable,
     extensions: [
       import_starter_kit.default,
       import_extension_placeholder.default.configure({
@@ -11679,14 +11744,17 @@ var RufousTextEditor = ({
         return false;
       }
     },
-    content: initialContent || "",
+    content: transformLegacyTodos(initialContent || ""),
     onUpdate: ({ editor: e }) => {
       onChangeRef.current?.(e.getHTML(), e.getJSON());
     }
   });
+  const wrapperRef = (0, import_react58.useRef)(null);
   (0, import_react58.useEffect)(() => {
     if (!editor) return;
-    const handler = () => {
+    const handler = ({ event }) => {
+      const relatedTarget = event?.relatedTarget;
+      if (relatedTarget && wrapperRef.current?.contains(relatedTarget)) return;
       onBlurRef.current?.(editor.getHTML(), editor.getJSON());
     };
     editor.on("blur", handler);
@@ -11842,7 +11910,8 @@ var RufousTextEditor = ({
   return /* @__PURE__ */ import_react58.default.createElement(
     "div",
     {
-      className: `rf-rte-wrapper editor-wrapper ${resizable ? "rf-rte-resizable" : ""} ${sxClass} ${className || ""}`,
+      ref: wrapperRef,
+      className: `rf-rte-wrapper editor-wrapper ${resizable ? "rf-rte-resizable" : ""} ${disabled ? "rf-rte-disabled" : ""} ${error ? "rf-rte-error" : ""} ${sxClass} ${className || ""}`,
       style: {
         ...style,
         ...width ? { width: typeof width === "number" ? `${width}px` : width } : {},
@@ -12017,17 +12086,19 @@ var RufousTextEditor = ({
         }
       ), "No follow"))), /* @__PURE__ */ import_react58.default.createElement("div", { className: "link-modal-footer" }, /* @__PURE__ */ import_react58.default.createElement("button", { className: "link-modal-btn-unlink", onClick: handleLinkRemove }, "Unlink"), /* @__PURE__ */ import_react58.default.createElement("button", { className: "link-modal-btn-apply", onClick: handleLinkSubmit }, "Update")))),
       document.body
-    ))
+    )),
+    helperText && /* @__PURE__ */ import_react58.default.createElement("div", { className: `rf-rte-helper-text ${error ? "rf-rte-helper-error" : ""}` }, helperText)
   );
 };
 var RufousTextContent = ({ content, className, style, sx }) => {
   const sxClass = useSx(sx);
+  const transformedContent = (0, import_react58.useMemo)(() => transformLegacyTodos(content || ""), [content]);
   return /* @__PURE__ */ import_react58.default.createElement(
     "div",
     {
       className: `rf-rte-content ${sxClass} ${className || ""}`,
       style,
-      dangerouslySetInnerHTML: { __html: content }
+      dangerouslySetInnerHTML: { __html: transformedContent }
     }
   );
 };
@@ -12169,5 +12240,6 @@ var RufousTextContent = ({ content, className, style, sx }) => {
   ViewIcon,
   WorkItemIcon,
   Zoom,
+  transformLegacyTodos,
   useRufousTheme
 });

package/dist/main.css

@@ -72,7 +72,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 1000;
+  z-index: 99999;
   backdrop-filter: blur(2px);
 }
 .dialog-container {
@@ -6595,11 +6595,37 @@ pre {
 }
 .rf-rte-wrapper.rf-rte-resizable {
   resize: vertical;
-  overflow: visible;
+  overflow: hidden;
   min-height: 200px;
 }
 .rf-rte-wrapper.rf-rte-resizable .editor-content-wrapper {
   overflow: auto;
+  flex: 1;
+  min-height: 0;
+}
+.rf-rte-wrapper.rf-rte-disabled {
+  opacity: 0.6;
+  pointer-events: none;
+  user-select: none;
+}
+.rf-rte-wrapper.rf-rte-disabled .toolbar {
+  opacity: 0.5;
+}
+.rf-rte-wrapper.rf-rte-error {
+  border-color: #dc2626;
+}
+.rf-rte-wrapper.rf-rte-error:focus-within {
+  border-color: #dc2626;
+  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
+}
+.rf-rte-helper-text {
+  font-size: 0.75rem;
+  color: var(--text-secondary, #6b7280);
+  margin-top: 4px;
+  padding: 0 4px;
+}
+.rf-rte-helper-text.rf-rte-helper-error {
+  color: #dc2626;
 }
 .rf-rte-wrapper:focus-within,
 .rf-rte-wrapper:has(.dropdown-menu),
@@ -6615,6 +6641,8 @@ pre {
   left: 0;
   right: 0;
   bottom: 0;
+  width: 100% !important;
+  height: 100% !important;
   z-index: 99999;
   border-radius: 0;
   margin: 0;
@@ -6729,11 +6757,13 @@ pre {
   margin-left: 2px;
   opacity: 0.5;
 }
+.rf-rte-wrapper .dropdown-menu.dropdown-menu-fixed {
+  position: fixed;
+  top: auto;
+  left: auto;
+  z-index: 99999;
+}
 .rf-rte-wrapper .dropdown-menu {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: 1000;
   min-width: 170px;
   padding: 4px;
   background: #fff;
@@ -7236,7 +7266,7 @@ pre {
   letter-spacing: 0.05em;
 }
 .rf-rte-wrapper .tiptap p {
-  margin: 0.5em 0;
+  margin: 1px 0;
 }
 .rf-rte-wrapper .tiptap ul,
 .rf-rte-wrapper .tiptap ol {
@@ -7254,7 +7284,10 @@ pre {
   display: flex;
   align-items: flex-start;
   gap: 8px;
-  margin: 4px 0;
+  margin: 0;
+}
+.rf-rte-wrapper .tiptap ul[data-type=taskList] li.task-item p {
+  margin: 0;
 }
 .rf-rte-wrapper .tiptap ul[data-type=taskList] li.task-item > label {
   flex-shrink: 0;

package/dist/main.d.cts

@@ -1646,6 +1646,9 @@ interface RufousTextEditorProps {
     variant?: EditorVariant;
     buttons?: ToolbarButton[];
     hideButtons?: ToolbarButton[];
+    disabled?: boolean;
+    error?: boolean;
+    helperText?: string;
     width?: number | string;
     height?: number | string;
     resizable?: boolean;
@@ -1662,6 +1665,42 @@ interface RufousTextContentProps {
 }
 declare const RufousTextContent: React__default.FC<RufousTextContentProps>;
 
+/**
+ * Transforms legacy Jodit-style todo HTML into TipTap-compatible taskList HTML.
+ *
+ * Old Jodit format (two variants):
+ *
+ * Variant 1 (class-based):
+ *   <p class="todo-item">
+ *     <button class="todo-item-button" contenteditable="false">
+ *       <img src="...todo-blank.svg" alt="icon">
+ *     </button>
+ *     <span class="todo-item-text"> Todo text</span>
+ *   </p>
+ *
+ * Variant 2 (inline-styled):
+ *   <p class="todo-item" style="display: flex; ...">
+ *     <button class="todo-item-button" contenteditable="false" style="...">
+ *       <img src="...todo-blank.svg" alt="icon" style="...">
+ *     </button>
+ *     <span style="margin-top: -2px; flex-grow: 1;"> Todo text</span>
+ *   </p>
+ *
+ * New TipTap format:
+ *   <ul data-type="taskList">
+ *     <li data-status="todo">
+ *       <label><input type="checkbox"></label>
+ *       <div><p>Todo text</p></div>
+ *     </li>
+ *   </ul>
+ */
+/**
+ * Transforms legacy Jodit todo HTML to TipTap taskList format.
+ * Non-todo content is passed through unchanged.
+ * Consecutive todo items are grouped into a single <ul data-type="taskList">.
+ */
+declare function transformLegacyTodos(html: string): string;
+
 interface MentionItemData {
     id: string;
     name: string;
@@ -1669,4 +1708,4 @@ interface MentionItemData {
     shortName?: string;
 }
 
-export { APP_THEMES, Accordion, AccordionDetails, type AccordionDetailsProps, type AccordionProps, AccordionSummary, type AccordionSummaryProps, type Action, ActivateUserIcon, AddButton, AddressLookup, ArchivedIcon, AssignGroupIcon, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BaseDialog, Box, type BoxProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, CameraIcon, CancelButton, Card, CardActions, type CardActionsProps, CardContent, type CardContentProps, CardHeader, type CardHeaderProps, CardMedia, type CardMediaProps, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipProps, CircularProgress, CircularProgressIcon, type CircularProgressIconProps, CloseIcon, Collapse, type CollapseProps, type Column, CopyIcon, DataGrid, type DataGridProps, DateField, type DateFieldProps, type DateFormatString, DateRangeField, type DateRangeFieldProps, type DateRangeValue, DifficultyAllIcon, DifficultyEasyIcon, DifficultyHardIcon, DifficultyMediumIcon, Divider, type DividerProps, DollarIcon, DownloadIcon, DownloadPdfIcon, Drawer, type DrawerProps, EditChatIcon, EditIcon, EngagementIcon, Fade, type FadeProps, FunctionIcon, Grid, type GridProps, Grow, type GrowProps, HelpOutlinedIcon, HierarchyIcon, IconButton, type IconButtonProps, ImageField, type ImageFieldProps, InactiveGroupIcon, IndustryIcon, InvoiceIcon, Link, type LinkProps, List, ListItem, ListItemButton, type ListItemButtonProps, ListItemIcon, type ListItemIconProps, type ListItemProps, ListItemText, type ListItemTextProps, type ListProps, ListSubheader, type ListSubheaderProps, LocationPinIcon, LogsIcon, Menu, MenuDivider, MenuItem, type MenuItemProps, MenuList, type MenuListProps, type MenuProps, MinExperienceIcon, NineDotMenuIcon, NotificationIcon, Paper, type PaperProps, PhoneField, type PhoneFieldProps, Popover, type PopoverProps, Popper, type PopperProps, ProjectIcon, QualificationsIcon, QuestionStatusAllIcon, QuestionStatusPrivateIcon, QuestionStatusPublicIcon, QuestionTypeAllIcon, QuestionTypeCodingIcon, QuestionTypeDescriptiveIcon, QuestionTypeMultipleIcon, QuestionTypeSingleIcon, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, RefreshIcon, ResendInviteIcon, RolesIcon, RufousAiIcon, RufousBirdIcon, RufousLauncherIcon, RufousLogoLoader, type RufousLogoLoaderProps, RufousTextContent, type RufousTextContentProps, RufousTextEditor, type MentionItemData as RufousTextEditorMentionItem, type RufousTextEditorProps, RufousThemeProvider, Select, type SelectProps, SidebarIcon, Skeleton, type SkeletonProps, Slide, type SlideProps, Slider, type SliderProps, Snackbar, type SnackbarProps, SoftSkillsIcon, type SortDirection, Stack, type StackProps, StandardButton, Step, StepButton, type StepButtonProps, StepContent, type StepContentProps, StepLabel, type StepLabelProps, type StepProps, Stepper, type StepperProps, SubmitButton, SubscribeIcon, SuspendUserIcon, Switch, type SwitchProps, type SxProp, Tab, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, TechnicalSkillsIcon, TextField, type TextFieldProps, TickIcon, TimerIcon, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, Tooltip, type TooltipProps, TrashIcon, Typography, type TypographyProps, UnArchivedIcon, UnsubscribeIcon, UploadIcon, UserAssignIcon, ViewIcon, WorkItemIcon, Zoom, type ZoomProps, useRufousTheme };
+export { APP_THEMES, Accordion, AccordionDetails, type AccordionDetailsProps, type AccordionProps, AccordionSummary, type AccordionSummaryProps, type Action, ActivateUserIcon, AddButton, AddressLookup, ArchivedIcon, AssignGroupIcon, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BaseDialog, Box, type BoxProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, CameraIcon, CancelButton, Card, CardActions, type CardActionsProps, CardContent, type CardContentProps, CardHeader, type CardHeaderProps, CardMedia, type CardMediaProps, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipProps, CircularProgress, CircularProgressIcon, type CircularProgressIconProps, CloseIcon, Collapse, type CollapseProps, type Column, CopyIcon, DataGrid, type DataGridProps, DateField, type DateFieldProps, type DateFormatString, DateRangeField, type DateRangeFieldProps, type DateRangeValue, DifficultyAllIcon, DifficultyEasyIcon, DifficultyHardIcon, DifficultyMediumIcon, Divider, type DividerProps, DollarIcon, DownloadIcon, DownloadPdfIcon, Drawer, type DrawerProps, EditChatIcon, EditIcon, EngagementIcon, Fade, type FadeProps, FunctionIcon, Grid, type GridProps, Grow, type GrowProps, HelpOutlinedIcon, HierarchyIcon, IconButton, type IconButtonProps, ImageField, type ImageFieldProps, InactiveGroupIcon, IndustryIcon, InvoiceIcon, Link, type LinkProps, List, ListItem, ListItemButton, type ListItemButtonProps, ListItemIcon, type ListItemIconProps, type ListItemProps, ListItemText, type ListItemTextProps, type ListProps, ListSubheader, type ListSubheaderProps, LocationPinIcon, LogsIcon, Menu, MenuDivider, MenuItem, type MenuItemProps, MenuList, type MenuListProps, type MenuProps, MinExperienceIcon, NineDotMenuIcon, NotificationIcon, Paper, type PaperProps, PhoneField, type PhoneFieldProps, Popover, type PopoverProps, Popper, type PopperProps, ProjectIcon, QualificationsIcon, QuestionStatusAllIcon, QuestionStatusPrivateIcon, QuestionStatusPublicIcon, QuestionTypeAllIcon, QuestionTypeCodingIcon, QuestionTypeDescriptiveIcon, QuestionTypeMultipleIcon, QuestionTypeSingleIcon, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, RefreshIcon, ResendInviteIcon, RolesIcon, RufousAiIcon, RufousBirdIcon, RufousLauncherIcon, RufousLogoLoader, type RufousLogoLoaderProps, RufousTextContent, type RufousTextContentProps, RufousTextEditor, type MentionItemData as RufousTextEditorMentionItem, type RufousTextEditorProps, RufousThemeProvider, Select, type SelectProps, SidebarIcon, Skeleton, type SkeletonProps, Slide, type SlideProps, Slider, type SliderProps, Snackbar, type SnackbarProps, SoftSkillsIcon, type SortDirection, Stack, type StackProps, StandardButton, Step, StepButton, type StepButtonProps, StepContent, type StepContentProps, StepLabel, type StepLabelProps, type StepProps, Stepper, type StepperProps, SubmitButton, SubscribeIcon, SuspendUserIcon, Switch, type SwitchProps, type SxProp, Tab, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, TechnicalSkillsIcon, TextField, type TextFieldProps, TickIcon, TimerIcon, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, Tooltip, type TooltipProps, TrashIcon, Typography, type TypographyProps, UnArchivedIcon, UnsubscribeIcon, UploadIcon, UserAssignIcon, ViewIcon, WorkItemIcon, Zoom, type ZoomProps, transformLegacyTodos, useRufousTheme };

package/dist/main.d.ts

@@ -1646,6 +1646,9 @@ interface RufousTextEditorProps {
     variant?: EditorVariant;
     buttons?: ToolbarButton[];
     hideButtons?: ToolbarButton[];
+    disabled?: boolean;
+    error?: boolean;
+    helperText?: string;
     width?: number | string;
     height?: number | string;
     resizable?: boolean;
@@ -1662,6 +1665,42 @@ interface RufousTextContentProps {
 }
 declare const RufousTextContent: React__default.FC<RufousTextContentProps>;
 
+/**
+ * Transforms legacy Jodit-style todo HTML into TipTap-compatible taskList HTML.
+ *
+ * Old Jodit format (two variants):
+ *
+ * Variant 1 (class-based):
+ *   <p class="todo-item">
+ *     <button class="todo-item-button" contenteditable="false">
+ *       <img src="...todo-blank.svg" alt="icon">
+ *     </button>
+ *     <span class="todo-item-text"> Todo text</span>
+ *   </p>
+ *
+ * Variant 2 (inline-styled):
+ *   <p class="todo-item" style="display: flex; ...">
+ *     <button class="todo-item-button" contenteditable="false" style="...">
+ *       <img src="...todo-blank.svg" alt="icon" style="...">
+ *     </button>
+ *     <span style="margin-top: -2px; flex-grow: 1;"> Todo text</span>
+ *   </p>
+ *
+ * New TipTap format:
+ *   <ul data-type="taskList">
+ *     <li data-status="todo">
+ *       <label><input type="checkbox"></label>
+ *       <div><p>Todo text</p></div>
+ *     </li>
+ *   </ul>
+ */
+/**
+ * Transforms legacy Jodit todo HTML to TipTap taskList format.
+ * Non-todo content is passed through unchanged.
+ * Consecutive todo items are grouped into a single <ul data-type="taskList">.
+ */
+declare function transformLegacyTodos(html: string): string;
+
 interface MentionItemData {
     id: string;
     name: string;
@@ -1669,4 +1708,4 @@ interface MentionItemData {
     shortName?: string;
 }
 
-export { APP_THEMES, Accordion, AccordionDetails, type AccordionDetailsProps, type AccordionProps, AccordionSummary, type AccordionSummaryProps, type Action, ActivateUserIcon, AddButton, AddressLookup, ArchivedIcon, AssignGroupIcon, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BaseDialog, Box, type BoxProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, CameraIcon, CancelButton, Card, CardActions, type CardActionsProps, CardContent, type CardContentProps, CardHeader, type CardHeaderProps, CardMedia, type CardMediaProps, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipProps, CircularProgress, CircularProgressIcon, type CircularProgressIconProps, CloseIcon, Collapse, type CollapseProps, type Column, CopyIcon, DataGrid, type DataGridProps, DateField, type DateFieldProps, type DateFormatString, DateRangeField, type DateRangeFieldProps, type DateRangeValue, DifficultyAllIcon, DifficultyEasyIcon, DifficultyHardIcon, DifficultyMediumIcon, Divider, type DividerProps, DollarIcon, DownloadIcon, DownloadPdfIcon, Drawer, type DrawerProps, EditChatIcon, EditIcon, EngagementIcon, Fade, type FadeProps, FunctionIcon, Grid, type GridProps, Grow, type GrowProps, HelpOutlinedIcon, HierarchyIcon, IconButton, type IconButtonProps, ImageField, type ImageFieldProps, InactiveGroupIcon, IndustryIcon, InvoiceIcon, Link, type LinkProps, List, ListItem, ListItemButton, type ListItemButtonProps, ListItemIcon, type ListItemIconProps, type ListItemProps, ListItemText, type ListItemTextProps, type ListProps, ListSubheader, type ListSubheaderProps, LocationPinIcon, LogsIcon, Menu, MenuDivider, MenuItem, type MenuItemProps, MenuList, type MenuListProps, type MenuProps, MinExperienceIcon, NineDotMenuIcon, NotificationIcon, Paper, type PaperProps, PhoneField, type PhoneFieldProps, Popover, type PopoverProps, Popper, type PopperProps, ProjectIcon, QualificationsIcon, QuestionStatusAllIcon, QuestionStatusPrivateIcon, QuestionStatusPublicIcon, QuestionTypeAllIcon, QuestionTypeCodingIcon, QuestionTypeDescriptiveIcon, QuestionTypeMultipleIcon, QuestionTypeSingleIcon, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, RefreshIcon, ResendInviteIcon, RolesIcon, RufousAiIcon, RufousBirdIcon, RufousLauncherIcon, RufousLogoLoader, type RufousLogoLoaderProps, RufousTextContent, type RufousTextContentProps, RufousTextEditor, type MentionItemData as RufousTextEditorMentionItem, type RufousTextEditorProps, RufousThemeProvider, Select, type SelectProps, SidebarIcon, Skeleton, type SkeletonProps, Slide, type SlideProps, Slider, type SliderProps, Snackbar, type SnackbarProps, SoftSkillsIcon, type SortDirection, Stack, type StackProps, StandardButton, Step, StepButton, type StepButtonProps, StepContent, type StepContentProps, StepLabel, type StepLabelProps, type StepProps, Stepper, type StepperProps, SubmitButton, SubscribeIcon, SuspendUserIcon, Switch, type SwitchProps, type SxProp, Tab, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, TechnicalSkillsIcon, TextField, type TextFieldProps, TickIcon, TimerIcon, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, Tooltip, type TooltipProps, TrashIcon, Typography, type TypographyProps, UnArchivedIcon, UnsubscribeIcon, UploadIcon, UserAssignIcon, ViewIcon, WorkItemIcon, Zoom, type ZoomProps, useRufousTheme };
+export { APP_THEMES, Accordion, AccordionDetails, type AccordionDetailsProps, type AccordionProps, AccordionSummary, type AccordionSummaryProps, type Action, ActivateUserIcon, AddButton, AddressLookup, ArchivedIcon, AssignGroupIcon, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BaseDialog, Box, type BoxProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, CameraIcon, CancelButton, Card, CardActions, type CardActionsProps, CardContent, type CardContentProps, CardHeader, type CardHeaderProps, CardMedia, type CardMediaProps, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipProps, CircularProgress, CircularProgressIcon, type CircularProgressIconProps, CloseIcon, Collapse, type CollapseProps, type Column, CopyIcon, DataGrid, type DataGridProps, DateField, type DateFieldProps, type DateFormatString, DateRangeField, type DateRangeFieldProps, type DateRangeValue, DifficultyAllIcon, DifficultyEasyIcon, DifficultyHardIcon, DifficultyMediumIcon, Divider, type DividerProps, DollarIcon, DownloadIcon, DownloadPdfIcon, Drawer, type DrawerProps, EditChatIcon, EditIcon, EngagementIcon, Fade, type FadeProps, FunctionIcon, Grid, type GridProps, Grow, type GrowProps, HelpOutlinedIcon, HierarchyIcon, IconButton, type IconButtonProps, ImageField, type ImageFieldProps, InactiveGroupIcon, IndustryIcon, InvoiceIcon, Link, type LinkProps, List, ListItem, ListItemButton, type ListItemButtonProps, ListItemIcon, type ListItemIconProps, type ListItemProps, ListItemText, type ListItemTextProps, type ListProps, ListSubheader, type ListSubheaderProps, LocationPinIcon, LogsIcon, Menu, MenuDivider, MenuItem, type MenuItemProps, MenuList, type MenuListProps, type MenuProps, MinExperienceIcon, NineDotMenuIcon, NotificationIcon, Paper, type PaperProps, PhoneField, type PhoneFieldProps, Popover, type PopoverProps, Popper, type PopperProps, ProjectIcon, QualificationsIcon, QuestionStatusAllIcon, QuestionStatusPrivateIcon, QuestionStatusPublicIcon, QuestionTypeAllIcon, QuestionTypeCodingIcon, QuestionTypeDescriptiveIcon, QuestionTypeMultipleIcon, QuestionTypeSingleIcon, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, RefreshIcon, ResendInviteIcon, RolesIcon, RufousAiIcon, RufousBirdIcon, RufousLauncherIcon, RufousLogoLoader, type RufousLogoLoaderProps, RufousTextContent, type RufousTextContentProps, RufousTextEditor, type MentionItemData as RufousTextEditorMentionItem, type RufousTextEditorProps, RufousThemeProvider, Select, type SelectProps, SidebarIcon, Skeleton, type SkeletonProps, Slide, type SlideProps, Slider, type SliderProps, Snackbar, type SnackbarProps, SoftSkillsIcon, type SortDirection, Stack, type StackProps, StandardButton, Step, StepButton, type StepButtonProps, StepContent, type StepContentProps, StepLabel, type StepLabelProps, type StepProps, Stepper, type StepperProps, SubmitButton, SubscribeIcon, SuspendUserIcon, Switch, type SwitchProps, type SxProp, Tab, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, TechnicalSkillsIcon, TextField, type TextFieldProps, TickIcon, TimerIcon, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, Tooltip, type TooltipProps, TrashIcon, Typography, type TypographyProps, UnArchivedIcon, UnsubscribeIcon, UploadIcon, UserAssignIcon, ViewIcon, WorkItemIcon, Zoom, type ZoomProps, transformLegacyTodos, useRufousTheme };

package/dist/main.js

@@ -9550,7 +9550,7 @@ var STATUS_COLORS = {
 };
 var CustomTaskItem = TaskItem.extend({
   addStorage() {
-    return { taskTodoEnabled: true };
+    return { taskTodoEnabled: false };
   },
   addAttributes() {
     return {
@@ -9595,27 +9595,6 @@ var CustomTaskItem = TaskItem.extend({
           }
           return false;
         }
-        if (this.editor.storage.taskTodoEnabled === false) {
-          const afterContent2 = $from.parent.content.cut($from.parentOffset);
-          const schema2 = state.schema;
-          const tr2 = state.tr;
-          if (afterContent2.size > 0) {
-            tr2.delete($from.pos, $from.end());
-          }
-          let taskListDepth = -1;
-          for (let d = taskDepth - 1; d >= 0; d--) {
-            if ($from.node(d).type.name === "taskList") {
-              taskListDepth = d;
-              break;
-            }
-          }
-          const insertPos2 = taskListDepth !== -1 ? tr2.mapping.map($from.after(taskListDepth)) : tr2.mapping.map($from.after(taskDepth));
-          const newPara2 = afterContent2.size > 0 ? schema2.nodes.paragraph.create(null, afterContent2) : schema2.nodes.paragraph.create();
-          tr2.insert(insertPos2, newPara2);
-          tr2.setSelection(TextSelection.near(tr2.doc.resolve(insertPos2 + 1)));
-          this.editor.view.dispatch(tr2);
-          return true;
-        }
         const taskNode = $from.node(taskDepth);
         const status = taskNode.attrs.status || "todo";
         const schema = state.schema;
@@ -9718,7 +9697,7 @@ var CustomTaskItem = TaskItem.extend({
   addNodeView() {
     return ({ node, HTMLAttributes, getPos, editor }) => {
       const li = document.createElement("li");
-      li.style.cssText = "display: flex; align-items: flex-start; gap: 8px; margin: 4px 0; list-style: none; ";
+      li.style.cssText = "display: flex; align-items: flex-start; gap: 6px; margin: 0; list-style: none; ";
       Object.entries(HTMLAttributes || {}).forEach(([key, val]) => {
         if (val != null && val !== false) {
           li.setAttribute(key, String(val));
@@ -9727,7 +9706,7 @@ var CustomTaskItem = TaskItem.extend({
       li.setAttribute("data-status", node.attrs.status || "todo");
       const label = document.createElement("label");
       label.contentEditable = "false";
-      label.style.cssText = "flex-shrink: 0; margin-top: 3px;";
+      label.style.cssText = "flex-shrink: 0;";
       const checkbox = document.createElement("span");
       const updateCheckbox = (status) => {
         const colors = STATUS_COLORS[status] || STATUS_COLORS.todo;
@@ -9742,7 +9721,7 @@ var CustomTaskItem = TaskItem.extend({
           "border-radius: 3px",
           "cursor: pointer",
           "user-select: none",
-          "margin-top: 7px",
+          "margin-top: 3px",
           "border: 2px solid " + colors.border,
           `background-image: url("${imageUrl}")`,
           "background-repeat: no-repeat",
@@ -9968,34 +9947,42 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
   const menuRef = useRef26(null);
   useEffect23(() => {
     const handleClick = (e) => {
-      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+      const target = e.target;
+      if (ref.current && !ref.current.contains(target) && menuRef.current && !menuRef.current.contains(target)) {
+        setOpen(false);
+      }
     };
     document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
   }, []);
   useEffect23(() => {
-    if (!open || !menuRef.current) return;
+    if (!open || !menuRef.current || !ref.current) return;
     const menu = menuRef.current;
-    menu.style.left = "0";
-    menu.style.right = "auto";
-    requestAnimationFrame(() => {
-      if (!menu) return;
-      const rect = menu.getBoundingClientRect();
+    const trigger2 = ref.current;
+    const position = () => {
+      const triggerRect = trigger2.getBoundingClientRect();
       const vw = window.innerWidth;
-      const parentLeft = ref.current?.getBoundingClientRect().left || 0;
-      if (rect.right > vw - 8) {
-        menu.style.left = "auto";
-        menu.style.right = "0";
-        const newRect = menu.getBoundingClientRect();
-        if (newRect.left < 8) {
-          menu.style.left = `${8 - parentLeft}px`;
-          menu.style.right = "auto";
+      const vh = window.innerHeight;
+      let left = triggerRect.left;
+      let top = triggerRect.bottom + 4;
+      menu.style.left = `${left}px`;
+      menu.style.top = `${top}px`;
+      requestAnimationFrame(() => {
+        if (!menu) return;
+        const menuRect = menu.getBoundingClientRect();
+        if (menuRect.right > vw - 8) {
+          left = Math.max(8, triggerRect.right - menuRect.width);
         }
-      } else if (rect.left < 8) {
-        menu.style.left = `${8 - parentLeft}px`;
-        menu.style.right = "auto";
-      }
-    });
+        if (left < 8) left = 8;
+        if (menuRect.bottom > vh - 8) {
+          top = triggerRect.top - menuRect.height - 4;
+          if (top < 8) top = 8;
+        }
+        menu.style.left = `${left}px`;
+        menu.style.top = `${top}px`;
+      });
+    };
+    position();
   }, [open]);
   return /* @__PURE__ */ React112.createElement("div", { className: `dropdown ${className}`, ref }, /* @__PURE__ */ React112.createElement(
     "button",
@@ -10006,7 +9993,7 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
     },
     trigger.label,
     /* @__PURE__ */ React112.createElement("span", { className: "dropdown-arrow" }, "\u25BE")
-  ), open && /* @__PURE__ */ React112.createElement("div", { ref: menuRef, className: "dropdown-menu", onClick: keepOpen ? void 0 : () => setOpen(false) }, typeof children === "function" ? children(() => setOpen(false)) : children));
+  ), open && /* @__PURE__ */ React112.createElement("div", { ref: menuRef, className: "dropdown-menu dropdown-menu-fixed", onClick: keepOpen ? void 0 : () => setOpen(false) }, typeof children === "function" ? children(() => setOpen(false)) : children));
 };
 var InsertPanel = ({ editor, onClose, mode = "video" }) => {
   const [activeTab, setActiveTab] = useState30("link");
@@ -11424,6 +11411,79 @@ var VideoToolbar = ({ editor }) => {
 };
 var VideoToolbar_default = VideoToolbar;
 
+// lib/RufousTextEditor/legacyTodoTransform.ts
+var IMAGE_TO_STATUS = {
+  "todo-blank.svg": "todo",
+  "working.svg": "working",
+  "blocked.svg": "blocked",
+  "closed.svg": "resolved"
+};
+function getStatusFromImgSrc(src) {
+  for (const [key, status] of Object.entries(IMAGE_TO_STATUS)) {
+    if (src.includes(key)) return status;
+  }
+  return "todo";
+}
+function transformLegacyTodos(html) {
+  if (!html || !html.includes("todo-item")) return html;
+  const div = document.createElement("div");
+  div.innerHTML = html;
+  const children = Array.from(div.childNodes);
+  const result = [];
+  let currentTaskList = null;
+  for (const child of children) {
+    if (child instanceof HTMLElement && child.classList.contains("todo-item")) {
+      const img = child.querySelector("button img, .todo-item-button img");
+      const status = img ? getStatusFromImgSrc(img.src) : "todo";
+      let text = "";
+      const classSpan = child.querySelector(".todo-item-text");
+      if (classSpan) {
+        text = classSpan.textContent?.trim() || "";
+      } else {
+        const spans = child.querySelectorAll("span");
+        for (const span of Array.from(spans)) {
+          if (!span.closest("button") && !span.closest(".todo-item-button")) {
+            text = span.textContent?.trim() || "";
+            break;
+          }
+        }
+      }
+      const li = document.createElement("li");
+      li.setAttribute("data-type", "taskItem");
+      li.setAttribute("data-status", status);
+      li.setAttribute("data-checked", "false");
+      const label = document.createElement("label");
+      const checkbox = document.createElement("input");
+      checkbox.type = "checkbox";
+      const labelSpan = document.createElement("span");
+      label.appendChild(checkbox);
+      label.appendChild(labelSpan);
+      const contentDiv = document.createElement("div");
+      const p = document.createElement("p");
+      if (text) {
+        p.textContent = text;
+      }
+      contentDiv.appendChild(p);
+      li.appendChild(label);
+      li.appendChild(contentDiv);
+      if (!currentTaskList) {
+        currentTaskList = document.createElement("ul");
+        currentTaskList.setAttribute("data-type", "taskList");
+        result.push(currentTaskList);
+      }
+      currentTaskList.appendChild(li);
+    } else {
+      currentTaskList = null;
+      result.push(child);
+    }
+  }
+  const output = document.createElement("div");
+  for (const node of result) {
+    output.appendChild(node);
+  }
+  return output.innerHTML;
+}
+
 // lib/RufousTextEditor/RufousTextEditor.tsx
 var VARIANT_BUTTONS = {
   default: [
@@ -11499,6 +11559,9 @@ var RufousTextEditor = ({
   variant = "default",
   buttons,
   hideButtons,
+  disabled = false,
+  error = false,
+  helperText,
   width,
   height,
   resizable = false,
@@ -11524,8 +11587,9 @@ var RufousTextEditor = ({
   useEffect26(() => {
     onBlurRef.current = onBlur;
   }, [onBlur]);
+  const isEditable = editable && !disabled;
   const editor = useEditor({
-    editable,
+    editable: isEditable,
     extensions: [
       StarterKit,
       Placeholder.configure({
@@ -11614,14 +11678,17 @@ var RufousTextEditor = ({
         return false;
       }
     },
-    content: initialContent || "",
+    content: transformLegacyTodos(initialContent || ""),
     onUpdate: ({ editor: e }) => {
       onChangeRef.current?.(e.getHTML(), e.getJSON());
     }
   });
+  const wrapperRef = useRef29(null);
   useEffect26(() => {
     if (!editor) return;
-    const handler = () => {
+    const handler = ({ event }) => {
+      const relatedTarget = event?.relatedTarget;
+      if (relatedTarget && wrapperRef.current?.contains(relatedTarget)) return;
       onBlurRef.current?.(editor.getHTML(), editor.getJSON());
     };
     editor.on("blur", handler);
@@ -11777,7 +11844,8 @@ var RufousTextEditor = ({
   return /* @__PURE__ */ React115.createElement(
     "div",
     {
-      className: `rf-rte-wrapper editor-wrapper ${resizable ? "rf-rte-resizable" : ""} ${sxClass} ${className || ""}`,
+      ref: wrapperRef,
+      className: `rf-rte-wrapper editor-wrapper ${resizable ? "rf-rte-resizable" : ""} ${disabled ? "rf-rte-disabled" : ""} ${error ? "rf-rte-error" : ""} ${sxClass} ${className || ""}`,
       style: {
         ...style,
         ...width ? { width: typeof width === "number" ? `${width}px` : width } : {},
@@ -11952,17 +12020,19 @@ var RufousTextEditor = ({
         }
       ), "No follow"))), /* @__PURE__ */ React115.createElement("div", { className: "link-modal-footer" }, /* @__PURE__ */ React115.createElement("button", { className: "link-modal-btn-unlink", onClick: handleLinkRemove }, "Unlink"), /* @__PURE__ */ React115.createElement("button", { className: "link-modal-btn-apply", onClick: handleLinkSubmit }, "Update")))),
       document.body
-    ))
+    )),
+    helperText && /* @__PURE__ */ React115.createElement("div", { className: `rf-rte-helper-text ${error ? "rf-rte-helper-error" : ""}` }, helperText)
   );
 };
 var RufousTextContent = ({ content, className, style, sx }) => {
   const sxClass = useSx(sx);
+  const transformedContent = useMemo4(() => transformLegacyTodos(content || ""), [content]);
   return /* @__PURE__ */ React115.createElement(
     "div",
     {
       className: `rf-rte-content ${sxClass} ${className || ""}`,
       style,
-      dangerouslySetInnerHTML: { __html: content }
+      dangerouslySetInnerHTML: { __html: transformedContent }
     }
   );
 };
@@ -12103,5 +12173,6 @@ export {
   viewIcon_default as ViewIcon,
   workItemIcon_default as WorkItemIcon,
   Zoom,
+  transformLegacyTodos,
   useRufousTheme
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rufous/ui",
   "private": false,
-  "version": "0.2.59",
+  "version": "0.2.60",
   "type": "module",
   "description": "Experimental: A lightweight React UI component library (Beta)",
   "style": "./dist/main.css",