@underverse-ui/underverse 1.0.33 → 1.0.34

package/dist/index.d.cts

@@ -2316,8 +2316,10 @@ interface OverlayScrollbarProviderProps {
     autoHideDelay?: number;
     dragScroll?: boolean;
     clickScroll?: boolean;
+    selector?: string;
+    exclude?: string;
 }
-declare function OverlayScrollbarProvider({ enabled, theme, visibility, autoHide, autoHideDelay, dragScroll, clickScroll, }?: OverlayScrollbarProviderProps): null;
+declare function OverlayScrollbarProvider({ enabled, theme, visibility, autoHide, autoHideDelay, dragScroll, clickScroll, selector, exclude, }?: OverlayScrollbarProviderProps): null;
 
 type FilterType = "text" | "select" | "date";
 type DataTableSize = "sm" | "md" | "lg";

package/dist/index.d.ts

@@ -2316,8 +2316,10 @@ interface OverlayScrollbarProviderProps {
     autoHideDelay?: number;
     dragScroll?: boolean;
     clickScroll?: boolean;
+    selector?: string;
+    exclude?: string;
 }
-declare function OverlayScrollbarProvider({ enabled, theme, visibility, autoHide, autoHideDelay, dragScroll, clickScroll, }?: OverlayScrollbarProviderProps): null;
+declare function OverlayScrollbarProvider({ enabled, theme, visibility, autoHide, autoHideDelay, dragScroll, clickScroll, selector, exclude, }?: OverlayScrollbarProviderProps): null;
 
 type FilterType = "text" | "select" | "date";
 type DataTableSize = "sm" | "md" | "lg";

package/dist/index.js

@@ -3822,7 +3822,6 @@ var Popover = ({
               "div",
               {
                 ...contentProps,
-                "data-os-scrollbar": contentScrollable ? true : void 0,
                 className: cn(
                   "rounded-2xl md:rounded-3xl border bg-popover text-popover-foreground shadow-md",
                   "backdrop-blur-sm bg-popover/95 border-border/60 p-4",
@@ -4042,7 +4041,6 @@ var Sheet = ({
           /* @__PURE__ */ jsx19(
             "div",
             {
-              "data-os-scrollbar": true,
               className: "flex-1 overflow-auto p-4",
               style: {
                 opacity: open && !isAnimating ? 1 : 0,
@@ -4506,7 +4504,7 @@ var Tabs = ({
   );
   const activeTab = tabs.find((tab) => tab.value === active);
   return /* @__PURE__ */ jsxs20("div", { className: cn("w-full", orientation === "vertical" && "flex gap-6"), children: [
-    /* @__PURE__ */ jsxs20("div", { className: containerClasses, role: "tablist", "aria-orientation": orientation, "data-os-scrollbar": orientation === "horizontal" ? true : void 0, children: [
+    /* @__PURE__ */ jsxs20("div", { className: containerClasses, role: "tablist", "aria-orientation": orientation, children: [
       tabs.map((tab, index) => {
         const isActive = active === tab.value;
         const Icon = tab.icon;
@@ -5056,7 +5054,7 @@ var Combobox = ({
             }
           )
         ] }) }),
-        /* @__PURE__ */ jsx25("div", { "data-os-scrollbar": true, className: "overflow-y-auto overscroll-contain", style: { maxHeight }, children: /* @__PURE__ */ jsx25("div", { className: cn(size === "sm" ? "p-1" : size === "lg" ? "p-2" : "p-1.5"), children: loading2 ? /* @__PURE__ */ jsx25("div", { className: "px-3 py-10 text-center", children: /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-center gap-3 animate-in fade-in-0 zoom-in-95 duration-300", children: [
+        /* @__PURE__ */ jsx25("div", { className: "overflow-y-auto overscroll-contain", style: { maxHeight }, children: /* @__PURE__ */ jsx25("div", { className: cn(size === "sm" ? "p-1" : size === "lg" ? "p-2" : "p-1.5"), children: loading2 ? /* @__PURE__ */ jsx25("div", { className: "px-3 py-10 text-center", children: /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-center gap-3 animate-in fade-in-0 zoom-in-95 duration-300", children: [
           /* @__PURE__ */ jsx25("div", { className: "relative", children: /* @__PURE__ */ jsx25("div", { className: "w-10 h-10 rounded-full border-2 border-primary/20 border-t-primary animate-spin" }) }),
           /* @__PURE__ */ jsx25("span", { className: "text-sm text-muted-foreground", children: loadingText })
         ] }) }) : filteredOptions.length > 0 ? groupedOptions ? (
@@ -5649,7 +5647,7 @@ var ScrollArea = forwardRef7(
           className
         ),
         ...props,
-        children: /* @__PURE__ */ jsx28("div", { className: cn("h-full w-full overflow-y-auto scroll-area-viewport custom-scrollbar", contentClassName), "data-os-scrollbar": true, children })
+        children: /* @__PURE__ */ jsx28("div", { className: cn("h-full w-full overflow-y-auto scroll-area-viewport custom-scrollbar", contentClassName), children })
       }
     );
   }
@@ -6112,7 +6110,6 @@ var DatePicker = ({
           sizeStyles8[size].contentPadding,
           "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-300"
         ),
-        contentScrollable: true,
         trigger: /* @__PURE__ */ jsxs24(
           "button",
           {
@@ -6468,7 +6465,6 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
         size === "sm" ? "p-3" : "p-5",
         "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-300"
       ),
-      contentScrollable: true,
       trigger: /* @__PURE__ */ jsxs24(
         "button",
         {
@@ -6919,7 +6915,6 @@ function WheelColumn({
         "div",
         {
           ref: scrollRef,
-          "data-os-scrollbar": true,
           className: cn(
             "h-full overflow-y-auto overscroll-contain snap-y snap-mandatory",
             "select-none cursor-grab active:cursor-grabbing",
@@ -8343,7 +8338,6 @@ function WheelColumn2({
         "div",
         {
           ref: scrollRef,
-          "data-os-scrollbar": true,
           className: cn(
             "h-full overflow-y-auto overscroll-contain snap-y snap-mandatory",
             "select-none cursor-grab active:cursor-grabbing",
@@ -9291,7 +9285,6 @@ var DateTimePicker = ({
           // Keep the popover usable on small viewports
           "max-w-[calc(100vw-1rem)] max-h-[calc(100vh-6rem)] overflow-auto"
         ),
-        contentScrollable: true,
         placement: "bottom-end",
         children: [
           /* @__PURE__ */ jsxs28("div", { className: "flex flex-col lg:flex-row divide-y lg:divide-y-0 lg:divide-x divide-border", children: [
@@ -9963,7 +9956,7 @@ function CalendarTimelineHeader(props) {
               contentClassName: cn(
                 "w-auto p-0 rounded-2xl md:rounded-3xl overflow-hidden"
               ),
-              children: /* @__PURE__ */ jsxs30("div", { "data-os-scrollbar": true, className: "max-w-[calc(100vw-1rem)] max-h-[calc(100vh-6rem)] overflow-auto", children: [
+              children: /* @__PURE__ */ jsxs30("div", { className: "max-w-[calc(100vw-1rem)] max-h-[calc(100vh-6rem)] overflow-auto", children: [
                 /* @__PURE__ */ jsxs30("div", { className: "flex flex-col lg:flex-row divide-y lg:divide-y-0 lg:divide-x divide-border", children: [
                   /* @__PURE__ */ jsx35("div", { className: "p-2", children: /* @__PURE__ */ jsx35(
                     Calendar3,
@@ -10107,7 +10100,7 @@ function CalendarTimelineHeader(props) {
           ]
         }
       ) : null,
-      /* @__PURE__ */ jsx35("div", { ref: headerRef, "data-os-scrollbar": true, className: "flex-1 min-w-0 overflow-x-auto overflow-y-hidden", children: slotHeaderNodes })
+      /* @__PURE__ */ jsx35("div", { ref: headerRef, className: "flex-1 min-w-0 overflow-x-auto overflow-y-hidden", children: slotHeaderNodes })
     ] })
   ] });
 }
@@ -11698,7 +11691,6 @@ function CalendarTimeline({
             "div",
             {
               ref: leftRef,
-              "data-os-scrollbar": true,
               className: "shrink-0 overflow-y-auto overflow-x-hidden",
               style: { width: effectiveResourceColumnWidth, minWidth: effectiveResourceColumnWidth },
               children: [
@@ -11730,7 +11722,6 @@ function CalendarTimeline({
             {
               ref: bodyRef,
               className: "relative flex-1 overflow-auto custom-scrollbar",
-              "data-os-scrollbar": true,
               onPointerMove,
               onPointerUp,
               onPointerLeave: () => setHoverCell(null),
@@ -12324,7 +12315,6 @@ var MultiCombobox = ({
         id: listboxId,
         role: "listbox",
         "aria-multiselectable": "true",
-        "data-os-scrollbar": true,
         style: { maxHeight },
         className: cn("overflow-y-auto p-1.5", size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"),
         children: loading2 ? /* @__PURE__ */ jsx40("li", { className: "px-3 py-8 text-center", children: /* @__PURE__ */ jsxs35("div", { className: "flex flex-col items-center gap-3 animate-in fade-in-0 zoom-in-95 duration-300", children: [
@@ -13950,7 +13940,6 @@ function CategoryTreeSelect(props) {
             "p-2",
             "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-300"
           ),
-          "data-os-scrollbar": true,
           children: [
             renderSearch(),
             renderTreeContent()
@@ -14977,7 +14966,6 @@ function Carousel({
         showThumbnails && totalSlides > slidesToShow && /* @__PURE__ */ jsx47(
           "div",
           {
-            "data-os-scrollbar": true,
             className: cn(
               "absolute bottom-0 left-0 right-0 flex gap-2 p-4 bg-linear-to-t from-black/50 to-transparent overflow-x-auto",
               isHorizontal ? "flex-row" : "flex-col"
@@ -15869,7 +15857,6 @@ var TimelineRoot = React43.forwardRef(
       "div",
       {
         ref,
-        "data-os-scrollbar": mode === "horizontal" ? true : void 0,
         className: cn("relative", mode === "horizontal" && "flex gap-4 overflow-x-auto", mode === "vertical" && "space-y-0", className),
         ...rest,
         children: mode === "vertical" ? /* @__PURE__ */ jsx51("div", { className: "space-y-0", children: content }) : content
@@ -16865,7 +16852,7 @@ var MusicPlayer = ({
         }
       ) })
     ] }),
-    showPlaylist && /* @__PURE__ */ jsx53("div", { "data-os-scrollbar": true, className: "bg-muted/50 backdrop-blur-sm max-h-96 overflow-y-auto border-t border-border", children: /* @__PURE__ */ jsxs48("div", { className: "p-4", children: [
+    showPlaylist && /* @__PURE__ */ jsx53("div", { className: "bg-muted/50 backdrop-blur-sm max-h-96 overflow-y-auto border-t border-border", children: /* @__PURE__ */ jsxs48("div", { className: "p-4", children: [
       /* @__PURE__ */ jsxs48("h3", { className: "text-lg font-semibold text-foreground mb-3", children: [
         "Playlist (",
         playlist.length,
@@ -18864,21 +18851,127 @@ var LoadingBar = ({
 // ../../components/ui/OverlayScrollbarProvider.tsx
 import { useEffect as useEffect28 } from "react";
 import { OverlayScrollbars } from "overlayscrollbars";
-var SCROLLABLE_SELECTOR = "[data-os-scrollbar]";
-var PORTAL_EXCLUDE_SELECTOR = [
+
+// ../../components/ui/overlay-scrollbar-controller.ts
+var DEFAULT_OVERLAY_SCROLLBAR_SELECTOR = [
+  ".overflow-auto",
+  ".overflow-y-auto",
+  ".overflow-x-auto",
+  ".overflow-scroll",
+  ".overflow-y-scroll",
+  ".overflow-x-scroll",
+  "textarea",
+  "[data-os-scrollbar]"
+].join(", ");
+var DEFAULT_OVERLAY_SCROLLBAR_EXCLUDE = [
+  "html",
+  "body",
+  "[data-os-ignore]",
   "[data-radix-portal]",
   "[role='dialog']",
   "[aria-modal='true']",
   "[data-sonner-toaster]"
 ].join(", ");
-function shouldSkip(element) {
-  if (element === document.body || element === document.documentElement) return true;
+function splitSelectorList(selectorList) {
+  return selectorList.split(",").map((part) => part.trim()).filter(Boolean);
+}
+function safeMatches(element, selector) {
+  try {
+    return element.matches(selector);
+  } catch {
+    return false;
+  }
+}
+function safeClosest(element, selector) {
+  try {
+    return element.closest(selector);
+  } catch {
+    return null;
+  }
+}
+function shouldSkipElement(element, excludeSelectors, ancestorExcludeSelectors) {
+  const tagName = element.tagName?.toLowerCase?.() ?? "";
+  if (tagName === "body" || tagName === "html") return true;
   if (element.classList.contains("scrollbar-none")) return true;
-  if (element.hasAttribute("data-os-ignore")) return true;
   if (element.hasAttribute("data-overlayscrollbars")) return true;
-  if (element.closest(PORTAL_EXCLUDE_SELECTOR)) return true;
+  if (excludeSelectors.some((selector) => safeMatches(element, selector))) return true;
+  if (ancestorExcludeSelectors.some((selector) => safeClosest(element, selector))) return true;
   return false;
 }
+function createOverlayScrollbarController({
+  selector,
+  exclude,
+  options,
+  createInstance,
+  root = document.body,
+  createObserver,
+  requestAnimationFrameImpl = requestAnimationFrame,
+  cancelAnimationFrameImpl = cancelAnimationFrame
+}) {
+  const instances = /* @__PURE__ */ new Map();
+  const excludeSelectors = splitSelectorList(exclude);
+  const ancestorExcludeSelectors = excludeSelectors.filter((item) => item !== "html" && item !== "body");
+  let rafId = 0;
+  const init = (element) => {
+    if (shouldSkipElement(element, excludeSelectors, ancestorExcludeSelectors)) return;
+    if (instances.has(element)) return;
+    instances.set(element, createInstance(element, options));
+  };
+  const scan = (root2) => {
+    if (root2 instanceof HTMLElement && safeMatches(root2, selector)) {
+      init(root2);
+    }
+    if (!("querySelectorAll" in root2)) return;
+    try {
+      root2.querySelectorAll(selector).forEach(init);
+    } catch {
+    }
+  };
+  const cleanup = () => {
+    instances.forEach((instance, element) => {
+      if (!element.isConnected) {
+        instance.destroy();
+        instances.delete(element);
+      }
+    });
+  };
+  scan(root);
+  const onMutations = (mutations) => {
+    if (rafId) return;
+    rafId = requestAnimationFrameImpl(() => {
+      rafId = 0;
+      const roots = /* @__PURE__ */ new Set();
+      mutations.forEach((mutation) => {
+        if (mutation.target && (typeof mutation.target.querySelectorAll === "function" || mutation.target instanceof HTMLElement)) {
+          roots.add(mutation.target);
+        }
+        Array.from(mutation.addedNodes).forEach((node) => {
+          if (node instanceof HTMLElement) {
+            roots.add(node);
+          }
+        });
+      });
+      roots.forEach(scan);
+      cleanup();
+    });
+  };
+  const observer = createObserver ? createObserver(onMutations) : new MutationObserver(onMutations);
+  observer.observe(root, { childList: true, subtree: true, attributes: true });
+  const destroy = () => {
+    if (rafId) cancelAnimationFrameImpl(rafId);
+    observer.disconnect();
+    instances.forEach((instance) => instance.destroy());
+    instances.clear();
+  };
+  return {
+    destroy,
+    scan,
+    cleanup,
+    getInstanceCount: () => instances.size
+  };
+}
+
+// ../../components/ui/OverlayScrollbarProvider.tsx
 function OverlayScrollbarProvider({
   enabled = true,
   theme = "os-theme-underverse",
@@ -18886,7 +18979,9 @@ function OverlayScrollbarProvider({
   autoHide = "leave",
   autoHideDelay = 600,
   dragScroll = true,
-  clickScroll = false
+  clickScroll = false,
+  selector = DEFAULT_OVERLAY_SCROLLBAR_SELECTOR,
+  exclude = DEFAULT_OVERLAY_SCROLLBAR_EXCLUDE
 } = {}) {
   useEffect28(() => {
     if (typeof window === "undefined") return;
@@ -18901,56 +18996,16 @@ function OverlayScrollbarProvider({
         clickScroll
       }
     };
-    const instances = /* @__PURE__ */ new Map();
-    let rafId = 0;
-    const init = (element) => {
-      if (shouldSkip(element)) return;
-      if (instances.has(element)) return;
-      instances.set(element, OverlayScrollbars(element, options));
-    };
-    const scan = (root) => {
-      if (root instanceof HTMLElement && root.matches(SCROLLABLE_SELECTOR)) {
-        init(root);
-      }
-      if (!("querySelectorAll" in root)) return;
-      root.querySelectorAll(SCROLLABLE_SELECTOR).forEach(init);
-    };
-    const cleanup = () => {
-      instances.forEach((instance, element) => {
-        if (!element.isConnected) {
-          instance.destroy();
-          instances.delete(element);
-        }
-      });
-    };
-    scan(document.body);
-    const observer = new MutationObserver((mutations) => {
-      if (rafId) return;
-      rafId = requestAnimationFrame(() => {
-        rafId = 0;
-        const scanRoots = /* @__PURE__ */ new Set();
-        mutations.forEach((mutation) => {
-          if (mutation.target instanceof HTMLElement || mutation.target instanceof Document || mutation.target instanceof DocumentFragment) {
-            scanRoots.add(mutation.target);
-          }
-          mutation.addedNodes.forEach((node) => {
-            if (node instanceof HTMLElement) {
-              scanRoots.add(node);
-            }
-          });
-        });
-        scanRoots.forEach(scan);
-        cleanup();
-      });
+    const controller = createOverlayScrollbarController({
+      selector,
+      exclude,
+      options,
+      createInstance: (element, instanceOptions) => OverlayScrollbars(element, instanceOptions)
     });
-    observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ["class"] });
     return () => {
-      if (rafId) cancelAnimationFrame(rafId);
-      observer.disconnect();
-      instances.forEach((instance) => instance.destroy());
-      instances.clear();
+      controller.destroy();
     };
-  }, [enabled, theme, visibility, autoHide, autoHideDelay, dragScroll, clickScroll]);
+  }, [enabled, theme, visibility, autoHide, autoHideDelay, dragScroll, clickScroll, selector, exclude]);
   return null;
 }
 var OverlayScrollbarProvider_default = OverlayScrollbarProvider;
@@ -18972,7 +19027,6 @@ var Table = React55.forwardRef(({ className, containerClassName, disableContaine
         "backdrop-blur-sm transition-all duration-300",
         containerClassName
       ),
-      "data-os-scrollbar": true,
       children: /* @__PURE__ */ jsx65("table", { ref, className: cn("w-full caption-bottom text-sm", className), ...props })
     }
   );
@@ -19904,13 +19958,8 @@ function DataTable({
         children: /* @__PURE__ */ jsx68(
           "div",
           {
-            className: "custom-scrollbar w-full",
-            "data-os-scrollbar": true,
-            style: stickyHeader ? {
-              maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
-              overflowY: "auto",
-              overflowX: "auto"
-            } : { overflowX: "auto" },
+            className: cn("w-full overflow-x-auto", stickyHeader && "overflow-y-auto"),
+            style: stickyHeader ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
             children: /* @__PURE__ */ jsxs62(
               Table,
               {
@@ -21428,7 +21477,7 @@ import { useTranslations as useTranslations7 } from "next-intl";
 import { useEditor, EditorContent } from "@tiptap/react";
 
 // ../../components/ui/UEditor/extensions.ts
-import Document2 from "@tiptap/extension-document";
+import Document from "@tiptap/extension-document";
 import Paragraph from "@tiptap/extension-paragraph";
 import Text from "@tiptap/extension-text";
 import Bold from "@tiptap/extension-bold";
@@ -21515,7 +21564,7 @@ var CommandList = forwardRef13((props, ref) => {
   if (props.items.length === 0) {
     return /* @__PURE__ */ jsx77("div", { className: "w-72 p-4 text-center text-sm text-muted-foreground", children: "No results" });
   }
-  return /* @__PURE__ */ jsxs69("div", { ref: listRef, "data-os-scrollbar": true, className: "w-72 max-h-80 overflow-y-auto bg-card border border-border rounded-2xl shadow-lg", children: [
+  return /* @__PURE__ */ jsxs69("div", { ref: listRef, className: "w-72 max-h-80 overflow-y-auto bg-card border border-border rounded-2xl shadow-lg", children: [
     /* @__PURE__ */ jsx77("div", { className: "px-3 py-2 border-b", children: /* @__PURE__ */ jsx77("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: "Basic Blocks" }) }),
     /* @__PURE__ */ jsx77("div", { className: "p-1", children: props.items.map((item, index) => /* @__PURE__ */ jsxs69(
       "button",
@@ -22608,7 +22657,7 @@ var EmojiList = forwardRef14((props, ref) => {
   if (props.items.length === 0) {
     return /* @__PURE__ */ jsx78("div", { className: "w-80 p-4 text-center text-sm text-muted-foreground bg-card border border-border rounded-2xl shadow-lg", children: "No emoji found" });
   }
-  return /* @__PURE__ */ jsxs70("div", { "data-os-scrollbar": true, className: "w-80 max-h-80 overflow-y-auto bg-card border border-border rounded-2xl shadow-lg", children: [
+  return /* @__PURE__ */ jsxs70("div", { className: "w-80 max-h-80 overflow-y-auto bg-card border border-border rounded-2xl shadow-lg", children: [
     /* @__PURE__ */ jsx78("div", { className: "px-3 py-2 border-b bg-muted/30", children: /* @__PURE__ */ jsxs70("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsx78(Smile, { className: "w-4 h-4 text-primary" }),
       /* @__PURE__ */ jsx78("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: "Emoji" })
@@ -22933,7 +22982,7 @@ function buildUEditorExtensions({
   editable = true
 }) {
   return [
-    Document2,
+    Document,
     Paragraph,
     Text,
     Bold,
@@ -22977,7 +23026,6 @@ function buildUEditorExtensions({
     CodeBlockLowlight.configure({
       lowlight,
       HTMLAttributes: {
-        "data-os-scrollbar": "true",
         class: "rounded-lg bg-[#1e1e1e] p-4 font-mono text-sm overflow-x-auto"
       }
     }),
@@ -23342,7 +23390,6 @@ var EmojiPicker = ({ onSelect, onClose }) => {
       "div",
       {
         ref: scrollContainerRef,
-        "data-os-scrollbar": true,
         className: "overflow-y-auto px-3 py-2 shrink",
         style: { height: "20rem" },
         children: search ? (
@@ -24064,7 +24111,7 @@ var SlashCommandMenu = ({ editor, onClose, filterText = "" }) => {
   if (commands.length === 0) {
     return /* @__PURE__ */ jsx84("div", { className: "w-72 p-4 text-center text-muted-foreground text-sm", children: t("slashCommand.noResults") });
   }
-  return /* @__PURE__ */ jsxs76("div", { ref: menuRef, "data-os-scrollbar": true, className: "w-72 max-h-80 overflow-y-auto", children: [
+  return /* @__PURE__ */ jsxs76("div", { ref: menuRef, className: "w-72 max-h-80 overflow-y-auto", children: [
     /* @__PURE__ */ jsx84("div", { className: "px-3 py-2 border-b", children: /* @__PURE__ */ jsx84("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: t("slashCommand.basicBlocks") }) }),
     /* @__PURE__ */ jsx84("div", { className: "p-1", children: commands.map((cmd, index) => /* @__PURE__ */ jsxs76(
       "button",
@@ -24826,7 +24873,6 @@ var UEditor = React72.forwardRef(({
           EditorContent,
           {
             editor,
-            "data-os-scrollbar": true,
             className: "flex-1 overflow-y-auto",
             style: {
               minHeight,