@coze-editor/extension-scrollbar 0.1.0-alpha.09ffeb

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 coze-dev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/esm/index.css

@@ -0,0 +1,38 @@
+/* src/index.css */
+.os-theme-codemirror-dark {
+  --os-handle-interactive-area-offset: 0px;
+  --os-handle-bg: #FFFFFF38;
+  --os-handle-bg-hover: #FFFFFF63;
+  --os-handle-bg-active: #FFFFFFC9;
+  --os-size: 6px;
+  --os-handle-border-radius: 10px;
+  --os-handle-perpendicular-size: 4px;
+  --os-handle-perpendicular-size-hover: 6px;
+  --os-handle-perpendicular-size-active: 6px;
+  --os-padding-perpendicular: 2px;
+  --os-padding-axis: 2px;
+  --os-track-border-radius: 10px;
+  z-index: 300;
+}
+.os-theme-codemirror-dark .os-scrollbar-track {
+  background-color: rgba(0, 0, 0, 0) !important;
+}
+.os-theme-codemirror {
+  --os-handle-interactive-area-offset: 0px;
+  --os-handle-bg: #000D3833;
+  --os-handle-bg-hover: #000D384D;
+  --os-handle-bg-active: #000D3866;
+  --os-size: 6px;
+  --os-handle-border-radius: 10px;
+  --os-handle-perpendicular-size: 4px;
+  --os-handle-perpendicular-size-hover: 6px;
+  --os-handle-perpendicular-size-active: 6px;
+  --os-padding-perpendicular: 2px;
+  --os-padding-axis: 2px;
+  --os-track-border-radius: 10px;
+  z-index: 300;
+}
+.os-theme-codemirror .os-scrollbar-track {
+  background-color: rgba(0, 0, 0, 0) !important;
+}
+/*# sourceMappingURL=index.css.map */

package/dist/esm/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/index.css"],"sourcesContent":["/**\n *  Copyright (c) 2025 coze-dev\n *  SPDX-License-Identifier: MIT\n **/\n\n/* Dark theme */\n.os-theme-codemirror-dark {\n  --os-handle-interactive-area-offset: 0px;\n  --os-handle-bg: #FFFFFF38;\n  --os-handle-bg-hover: #FFFFFF63;\n  --os-handle-bg-active: #FFFFFFC9;\n  --os-size: 6px;\n  --os-handle-border-radius: 10px;\n  --os-handle-perpendicular-size: 4px;\n  --os-handle-perpendicular-size-hover: 6px;\n  --os-handle-perpendicular-size-active: 6px;\n\n  --os-padding-perpendicular: 2px;\n  --os-padding-axis: 2px;\n  --os-track-border-radius: 10px;\n\n  z-index: 300;\n}\n.os-theme-codemirror-dark .os-scrollbar-track{\n  background-color: rgba(0, 0, 0, 0) !important; \n}\n\n/* Light theme */\n.os-theme-codemirror {\n  --os-handle-interactive-area-offset: 0px;\n  --os-handle-bg: #000D3833;\n  --os-handle-bg-hover: #000D384D;\n  --os-handle-bg-active: #000D3866;\n  --os-size: 6px;\n  --os-handle-border-radius: 10px;\n  --os-handle-perpendicular-size: 4px;\n  --os-handle-perpendicular-size-hover: 6px;\n  --os-handle-perpendicular-size-active: 6px;\n\n  --os-padding-perpendicular: 2px;\n  --os-padding-axis: 2px;\n  --os-track-border-radius: 10px;\n\n  z-index: 300;\n}\n.os-theme-codemirror .os-scrollbar-track{\n  background-color: rgba(0, 0, 0, 0) !important; \n}"],"mappings":";AAMA,CAAC;AACC,uCAAqC;AACrC,kBAAgB;AAChB,wBAAsB;AACtB,yBAAuB;AACvB,aAAW;AACX,6BAA2B;AAC3B,kCAAgC;AAChC,wCAAsC;AACtC,yCAAuC;AAEvC,8BAA4B;AAC5B,qBAAmB;AACnB,4BAA0B;AAE1B,WAAS;AACX;AACA,CAjBC,yBAiByB,CAAC;AACzB,oBAAkB,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAClC;AAGA,CAAC;AACC,uCAAqC;AACrC,kBAAgB;AAChB,wBAAsB;AACtB,yBAAuB;AACvB,aAAW;AACX,6BAA2B;AAC3B,kCAAgC;AAChC,wCAAsC;AACtC,yCAAuC;AAEvC,8BAA4B;AAC5B,qBAAmB;AACnB,4BAA0B;AAE1B,WAAS;AACX;AACA,CAjBC,oBAiBoB,CAtBM;AAuBzB,oBAAkB,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAClC;","names":[]}

package/dist/esm/index.js

@@ -0,0 +1,91 @@
+// src/index.ts
+import {
+  OverlayScrollbars,
+  ScrollbarsHidingPlugin,
+  SizeObserverPlugin,
+  ClickScrollPlugin
+} from "overlayscrollbars";
+import { EditorView, ViewPlugin } from "@codemirror/view";
+import "overlayscrollbars/overlayscrollbars.css";
+OverlayScrollbars.plugin([
+  ScrollbarsHidingPlugin,
+  SizeObserverPlugin,
+  ClickScrollPlugin
+]);
+function getThemeName(isDark) {
+  return isDark ? "os-theme-codemirror-dark" : "os-theme-codemirror";
+}
+function preventDefault(e) {
+  e.preventDefault();
+}
+var scrollbar = (options) => ViewPlugin.fromClass(
+  class {
+    instance;
+    constructor(view) {
+      const isDark = view.state.facet(EditorView.darkTheme);
+      this.instance = OverlayScrollbars(
+        {
+          target: view.scrollDOM,
+          elements: {
+            viewport: view.scrollDOM,
+            padding: view.dom.querySelector(".cm-gutters")
+          }
+        },
+        {
+          overflow: {
+            y: "scroll",
+            x: "scroll"
+          },
+          scrollbars: {
+            theme: getThemeName(isDark),
+            visibility: "auto",
+            autoHide: "scroll",
+            autoHideDelay: (options == null ? void 0 : options.autoHideDelay) ?? 1500,
+            dragScroll: true,
+            clickScroll: true,
+            pointers: ["mouse", "touch", "pen"]
+          }
+        }
+      );
+      this.instance.elements().scrollbarVertical.handle.addEventListener(
+        "mousedown",
+        preventDefault,
+        false
+      );
+      this.instance.elements().scrollbarHorizontal.handle.addEventListener(
+        "mousedown",
+        preventDefault,
+        false
+      );
+    }
+    update(update) {
+      const isDark = update.view.state.facet(EditorView.darkTheme);
+      const newTheme = getThemeName(isDark);
+      const existingOptions = this.instance.options();
+      if (existingOptions.scrollbars.theme !== newTheme) {
+        this.instance.options({
+          scrollbars: {
+            theme: newTheme
+          }
+        });
+      }
+    }
+    destroy() {
+      this.instance.elements().scrollbarVertical.handle.removeEventListener(
+        "mousedown",
+        preventDefault,
+        false
+      );
+      this.instance.elements().scrollbarHorizontal.handle.removeEventListener(
+        "mousedown",
+        preventDefault,
+        false
+      );
+      this.instance.destroy();
+    }
+  }
+);
+export {
+  scrollbar
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["//  Copyright (c) 2025 coze-dev\n//  SPDX-License-Identifier: MIT\n\nimport {\n  OverlayScrollbars,\n  ScrollbarsHidingPlugin,\n  SizeObserverPlugin,\n  ClickScrollPlugin,\n} from 'overlayscrollbars';\nimport { EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';\nimport { type Extension } from '@codemirror/state';\nimport 'overlayscrollbars/overlayscrollbars.css';\nimport './index.css';\n\nOverlayScrollbars.plugin([\n  ScrollbarsHidingPlugin,\n  SizeObserverPlugin,\n  ClickScrollPlugin,\n]);\n\ninterface ScrollbarOptions {\n  autoHideDelay?: number;\n}\n\nfunction getThemeName(isDark: boolean) {\n  return isDark ? 'os-theme-codemirror-dark' : 'os-theme-codemirror';\n}\n\nfunction preventDefault(e: MouseEvent) {\n  e.preventDefault();\n}\n\nconst scrollbar = (options?: ScrollbarOptions): Extension =>\n  ViewPlugin.fromClass(\n    class {\n      private instance: OverlayScrollbars;\n\n      constructor(view: EditorView) {\n        const isDark = view.state.facet(EditorView.darkTheme);\n\n        this.instance = OverlayScrollbars(\n          {\n            target: view.scrollDOM,\n            elements: {\n              viewport: view.scrollDOM,\n              padding: view.dom.querySelector('.cm-gutters') as HTMLElement,\n            },\n          },\n          {\n            overflow: {\n              y: 'scroll',\n              x: 'scroll',\n            },\n            scrollbars: {\n              theme: getThemeName(isDark),\n              visibility: 'auto',\n              autoHide: 'scroll',\n              autoHideDelay: options?.autoHideDelay ?? 1500,\n              dragScroll: true,\n              clickScroll: true,\n              pointers: ['mouse', 'touch', 'pen'],\n            },\n          },\n        );\n\n        this.instance\n          .elements()\n          .scrollbarVertical.handle.addEventListener(\n            'mousedown',\n            preventDefault,\n            false,\n          );\n        this.instance\n          .elements()\n          .scrollbarHorizontal.handle.addEventListener(\n            'mousedown',\n            preventDefault,\n            false,\n          );\n      }\n\n      update(update: ViewUpdate) {\n        const isDark = update.view.state.facet(EditorView.darkTheme);\n\n        const newTheme = getThemeName(isDark);\n        const existingOptions = this.instance.options();\n\n        if (existingOptions.scrollbars.theme !== newTheme) {\n          this.instance.options({\n            scrollbars: {\n              theme: newTheme,\n            },\n          });\n        }\n      }\n\n      destroy() {\n        this.instance\n          .elements()\n          .scrollbarVertical.handle.removeEventListener(\n            'mousedown',\n            preventDefault,\n            false,\n          );\n        this.instance\n          .elements()\n          .scrollbarHorizontal.handle.removeEventListener(\n            'mousedown',\n            preventDefault,\n            false,\n          );\n        this.instance.destroy();\n      }\n    },\n  );\n\nexport { scrollbar };\n"],"mappings":";AAGA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,YAAY,kBAAmC;AAExD,OAAO;AAGP,kBAAkB,OAAO;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAMD,SAAS,aAAa,QAAiB;AACrC,SAAO,SAAS,6BAA6B;AAC/C;AAEA,SAAS,eAAe,GAAe;AACrC,IAAE,eAAe;AACnB;AAEA,IAAM,YAAY,CAAC,YACjB,WAAW;AAAA,EACT,MAAM;AAAA,IACI;AAAA,IAER,YAAY,MAAkB;AAC5B,YAAM,SAAS,KAAK,MAAM,MAAM,WAAW,SAAS;AAEpD,WAAK,WAAW;AAAA,QACd;AAAA,UACE,QAAQ,KAAK;AAAA,UACb,UAAU;AAAA,YACR,UAAU,KAAK;AAAA,YACf,SAAS,KAAK,IAAI,cAAc,aAAa;AAAA,UAC/C;AAAA,QACF;AAAA,QACA;AAAA,UACE,UAAU;AAAA,YACR,GAAG;AAAA,YACH,GAAG;AAAA,UACL;AAAA,UACA,YAAY;AAAA,YACV,OAAO,aAAa,MAAM;AAAA,YAC1B,YAAY;AAAA,YACZ,UAAU;AAAA,YACV,gBAAe,mCAAS,kBAAiB;AAAA,YACzC,YAAY;AAAA,YACZ,aAAa;AAAA,YACb,UAAU,CAAC,SAAS,SAAS,KAAK;AAAA,UACpC;AAAA,QACF;AAAA,MACF;AAEA,WAAK,SACF,SAAS,EACT,kBAAkB,OAAO;AAAA,QACxB;AAAA,QACA;AAAA,QACA;AAAA,MACF;AACF,WAAK,SACF,SAAS,EACT,oBAAoB,OAAO;AAAA,QAC1B;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACJ;AAAA,IAEA,OAAO,QAAoB;AACzB,YAAM,SAAS,OAAO,KAAK,MAAM,MAAM,WAAW,SAAS;AAE3D,YAAM,WAAW,aAAa,MAAM;AACpC,YAAM,kBAAkB,KAAK,SAAS,QAAQ;AAE9C,UAAI,gBAAgB,WAAW,UAAU,UAAU;AACjD,aAAK,SAAS,QAAQ;AAAA,UACpB,YAAY;AAAA,YACV,OAAO;AAAA,UACT;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF;AAAA,IAEA,UAAU;AACR,WAAK,SACF,SAAS,EACT,kBAAkB,OAAO;AAAA,QACxB;AAAA,QACA;AAAA,QACA;AAAA,MACF;AACF,WAAK,SACF,SAAS,EACT,oBAAoB,OAAO;AAAA,QAC1B;AAAA,QACA;AAAA,QACA;AAAA,MACF;AACF,WAAK,SAAS,QAAQ;AAAA,IACxB;AAAA,EACF;AACF;","names":[]}

package/dist/index.css

@@ -0,0 +1,38 @@
+/* src/index.css */
+.os-theme-codemirror-dark {
+  --os-handle-interactive-area-offset: 0px;
+  --os-handle-bg: #FFFFFF38;
+  --os-handle-bg-hover: #FFFFFF63;
+  --os-handle-bg-active: #FFFFFFC9;
+  --os-size: 6px;
+  --os-handle-border-radius: 10px;
+  --os-handle-perpendicular-size: 4px;
+  --os-handle-perpendicular-size-hover: 6px;
+  --os-handle-perpendicular-size-active: 6px;
+  --os-padding-perpendicular: 2px;
+  --os-padding-axis: 2px;
+  --os-track-border-radius: 10px;
+  z-index: 300;
+}
+.os-theme-codemirror-dark .os-scrollbar-track {
+  background-color: rgba(0, 0, 0, 0) !important;
+}
+.os-theme-codemirror {
+  --os-handle-interactive-area-offset: 0px;
+  --os-handle-bg: #000D3833;
+  --os-handle-bg-hover: #000D384D;
+  --os-handle-bg-active: #000D3866;
+  --os-size: 6px;
+  --os-handle-border-radius: 10px;
+  --os-handle-perpendicular-size: 4px;
+  --os-handle-perpendicular-size-hover: 6px;
+  --os-handle-perpendicular-size-active: 6px;
+  --os-padding-perpendicular: 2px;
+  --os-padding-axis: 2px;
+  --os-track-border-radius: 10px;
+  z-index: 300;
+}
+.os-theme-codemirror .os-scrollbar-track {
+  background-color: rgba(0, 0, 0, 0) !important;
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.css"],"sourcesContent":["/**\n *  Copyright (c) 2025 coze-dev\n *  SPDX-License-Identifier: MIT\n **/\n\n/* Dark theme */\n.os-theme-codemirror-dark {\n  --os-handle-interactive-area-offset: 0px;\n  --os-handle-bg: #FFFFFF38;\n  --os-handle-bg-hover: #FFFFFF63;\n  --os-handle-bg-active: #FFFFFFC9;\n  --os-size: 6px;\n  --os-handle-border-radius: 10px;\n  --os-handle-perpendicular-size: 4px;\n  --os-handle-perpendicular-size-hover: 6px;\n  --os-handle-perpendicular-size-active: 6px;\n\n  --os-padding-perpendicular: 2px;\n  --os-padding-axis: 2px;\n  --os-track-border-radius: 10px;\n\n  z-index: 300;\n}\n.os-theme-codemirror-dark .os-scrollbar-track{\n  background-color: rgba(0, 0, 0, 0) !important; \n}\n\n/* Light theme */\n.os-theme-codemirror {\n  --os-handle-interactive-area-offset: 0px;\n  --os-handle-bg: #000D3833;\n  --os-handle-bg-hover: #000D384D;\n  --os-handle-bg-active: #000D3866;\n  --os-size: 6px;\n  --os-handle-border-radius: 10px;\n  --os-handle-perpendicular-size: 4px;\n  --os-handle-perpendicular-size-hover: 6px;\n  --os-handle-perpendicular-size-active: 6px;\n\n  --os-padding-perpendicular: 2px;\n  --os-padding-axis: 2px;\n  --os-track-border-radius: 10px;\n\n  z-index: 300;\n}\n.os-theme-codemirror .os-scrollbar-track{\n  background-color: rgba(0, 0, 0, 0) !important; \n}"],"mappings":";AAMA,CAAC;AACC,uCAAqC;AACrC,kBAAgB;AAChB,wBAAsB;AACtB,yBAAuB;AACvB,aAAW;AACX,6BAA2B;AAC3B,kCAAgC;AAChC,wCAAsC;AACtC,yCAAuC;AAEvC,8BAA4B;AAC5B,qBAAmB;AACnB,4BAA0B;AAE1B,WAAS;AACX;AACA,CAjBC,yBAiByB,CAAC;AACzB,oBAAkB,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAClC;AAGA,CAAC;AACC,uCAAqC;AACrC,kBAAgB;AAChB,wBAAsB;AACtB,yBAAuB;AACvB,aAAW;AACX,6BAA2B;AAC3B,kCAAgC;AAChC,wCAAsC;AACtC,yCAAuC;AAEvC,8BAA4B;AAC5B,qBAAmB;AACnB,4BAA0B;AAE1B,WAAS;AACX;AACA,CAjBC,oBAiBoB,CAtBM;AAuBzB,oBAAkB,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAClC;","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,8 @@
+import { Extension } from '@codemirror/state';
+
+interface ScrollbarOptions {
+    autoHideDelay?: number;
+}
+declare const scrollbar: (options?: ScrollbarOptions) => Extension;
+
+export { scrollbar };

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import { Extension } from '@codemirror/state';
+
+interface ScrollbarOptions {
+    autoHideDelay?: number;
+}
+declare const scrollbar: (options?: ScrollbarOptions) => Extension;
+
+export { scrollbar };

package/dist/index.js

@@ -0,0 +1,110 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  scrollbar: () => scrollbar
+});
+module.exports = __toCommonJS(index_exports);
+var import_overlayscrollbars = require("overlayscrollbars");
+var import_view = require("@codemirror/view");
+var import_overlayscrollbars2 = require("overlayscrollbars/overlayscrollbars.css");
+import_overlayscrollbars.OverlayScrollbars.plugin([
+  import_overlayscrollbars.ScrollbarsHidingPlugin,
+  import_overlayscrollbars.SizeObserverPlugin,
+  import_overlayscrollbars.ClickScrollPlugin
+]);
+function getThemeName(isDark) {
+  return isDark ? "os-theme-codemirror-dark" : "os-theme-codemirror";
+}
+function preventDefault(e) {
+  e.preventDefault();
+}
+var scrollbar = (options) => import_view.ViewPlugin.fromClass(
+  class {
+    instance;
+    constructor(view) {
+      const isDark = view.state.facet(import_view.EditorView.darkTheme);
+      this.instance = (0, import_overlayscrollbars.OverlayScrollbars)(
+        {
+          target: view.scrollDOM,
+          elements: {
+            viewport: view.scrollDOM,
+            padding: view.dom.querySelector(".cm-gutters")
+          }
+        },
+        {
+          overflow: {
+            y: "scroll",
+            x: "scroll"
+          },
+          scrollbars: {
+            theme: getThemeName(isDark),
+            visibility: "auto",
+            autoHide: "scroll",
+            autoHideDelay: (options == null ? void 0 : options.autoHideDelay) ?? 1500,
+            dragScroll: true,
+            clickScroll: true,
+            pointers: ["mouse", "touch", "pen"]
+          }
+        }
+      );
+      this.instance.elements().scrollbarVertical.handle.addEventListener(
+        "mousedown",
+        preventDefault,
+        false
+      );
+      this.instance.elements().scrollbarHorizontal.handle.addEventListener(
+        "mousedown",
+        preventDefault,
+        false
+      );
+    }
+    update(update) {
+      const isDark = update.view.state.facet(import_view.EditorView.darkTheme);
+      const newTheme = getThemeName(isDark);
+      const existingOptions = this.instance.options();
+      if (existingOptions.scrollbars.theme !== newTheme) {
+        this.instance.options({
+          scrollbars: {
+            theme: newTheme
+          }
+        });
+      }
+    }
+    destroy() {
+      this.instance.elements().scrollbarVertical.handle.removeEventListener(
+        "mousedown",
+        preventDefault,
+        false
+      );
+      this.instance.elements().scrollbarHorizontal.handle.removeEventListener(
+        "mousedown",
+        preventDefault,
+        false
+      );
+      this.instance.destroy();
+    }
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  scrollbar
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["//  Copyright (c) 2025 coze-dev\n//  SPDX-License-Identifier: MIT\n\nimport {\n  OverlayScrollbars,\n  ScrollbarsHidingPlugin,\n  SizeObserverPlugin,\n  ClickScrollPlugin,\n} from 'overlayscrollbars';\nimport { EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';\nimport { type Extension } from '@codemirror/state';\nimport 'overlayscrollbars/overlayscrollbars.css';\nimport './index.css';\n\nOverlayScrollbars.plugin([\n  ScrollbarsHidingPlugin,\n  SizeObserverPlugin,\n  ClickScrollPlugin,\n]);\n\ninterface ScrollbarOptions {\n  autoHideDelay?: number;\n}\n\nfunction getThemeName(isDark: boolean) {\n  return isDark ? 'os-theme-codemirror-dark' : 'os-theme-codemirror';\n}\n\nfunction preventDefault(e: MouseEvent) {\n  e.preventDefault();\n}\n\nconst scrollbar = (options?: ScrollbarOptions): Extension =>\n  ViewPlugin.fromClass(\n    class {\n      private instance: OverlayScrollbars;\n\n      constructor(view: EditorView) {\n        const isDark = view.state.facet(EditorView.darkTheme);\n\n        this.instance = OverlayScrollbars(\n          {\n            target: view.scrollDOM,\n            elements: {\n              viewport: view.scrollDOM,\n              padding: view.dom.querySelector('.cm-gutters') as HTMLElement,\n            },\n          },\n          {\n            overflow: {\n              y: 'scroll',\n              x: 'scroll',\n            },\n            scrollbars: {\n              theme: getThemeName(isDark),\n              visibility: 'auto',\n              autoHide: 'scroll',\n              autoHideDelay: options?.autoHideDelay ?? 1500,\n              dragScroll: true,\n              clickScroll: true,\n              pointers: ['mouse', 'touch', 'pen'],\n            },\n          },\n        );\n\n        this.instance\n          .elements()\n          .scrollbarVertical.handle.addEventListener(\n            'mousedown',\n            preventDefault,\n            false,\n          );\n        this.instance\n          .elements()\n          .scrollbarHorizontal.handle.addEventListener(\n            'mousedown',\n            preventDefault,\n            false,\n          );\n      }\n\n      update(update: ViewUpdate) {\n        const isDark = update.view.state.facet(EditorView.darkTheme);\n\n        const newTheme = getThemeName(isDark);\n        const existingOptions = this.instance.options();\n\n        if (existingOptions.scrollbars.theme !== newTheme) {\n          this.instance.options({\n            scrollbars: {\n              theme: newTheme,\n            },\n          });\n        }\n      }\n\n      destroy() {\n        this.instance\n          .elements()\n          .scrollbarVertical.handle.removeEventListener(\n            'mousedown',\n            preventDefault,\n            false,\n          );\n        this.instance\n          .elements()\n          .scrollbarHorizontal.handle.removeEventListener(\n            'mousedown',\n            preventDefault,\n            false,\n          );\n        this.instance.destroy();\n      }\n    },\n  );\n\nexport { scrollbar };\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,+BAKO;AACP,kBAAwD;AAExD,IAAAA,4BAAO;AAGP,2CAAkB,OAAO;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAMD,SAAS,aAAa,QAAiB;AACrC,SAAO,SAAS,6BAA6B;AAC/C;AAEA,SAAS,eAAe,GAAe;AACrC,IAAE,eAAe;AACnB;AAEA,IAAM,YAAY,CAAC,YACjB,uBAAW;AAAA,EACT,MAAM;AAAA,IACI;AAAA,IAER,YAAY,MAAkB;AAC5B,YAAM,SAAS,KAAK,MAAM,MAAM,uBAAW,SAAS;AAEpD,WAAK,eAAW;AAAA,QACd;AAAA,UACE,QAAQ,KAAK;AAAA,UACb,UAAU;AAAA,YACR,UAAU,KAAK;AAAA,YACf,SAAS,KAAK,IAAI,cAAc,aAAa;AAAA,UAC/C;AAAA,QACF;AAAA,QACA;AAAA,UACE,UAAU;AAAA,YACR,GAAG;AAAA,YACH,GAAG;AAAA,UACL;AAAA,UACA,YAAY;AAAA,YACV,OAAO,aAAa,MAAM;AAAA,YAC1B,YAAY;AAAA,YACZ,UAAU;AAAA,YACV,gBAAe,mCAAS,kBAAiB;AAAA,YACzC,YAAY;AAAA,YACZ,aAAa;AAAA,YACb,UAAU,CAAC,SAAS,SAAS,KAAK;AAAA,UACpC;AAAA,QACF;AAAA,MACF;AAEA,WAAK,SACF,SAAS,EACT,kBAAkB,OAAO;AAAA,QACxB;AAAA,QACA;AAAA,QACA;AAAA,MACF;AACF,WAAK,SACF,SAAS,EACT,oBAAoB,OAAO;AAAA,QAC1B;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACJ;AAAA,IAEA,OAAO,QAAoB;AACzB,YAAM,SAAS,OAAO,KAAK,MAAM,MAAM,uBAAW,SAAS;AAE3D,YAAM,WAAW,aAAa,MAAM;AACpC,YAAM,kBAAkB,KAAK,SAAS,QAAQ;AAE9C,UAAI,gBAAgB,WAAW,UAAU,UAAU;AACjD,aAAK,SAAS,QAAQ;AAAA,UACpB,YAAY;AAAA,YACV,OAAO;AAAA,UACT;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF;AAAA,IAEA,UAAU;AACR,WAAK,SACF,SAAS,EACT,kBAAkB,OAAO;AAAA,QACxB;AAAA,QACA;AAAA,QACA;AAAA,MACF;AACF,WAAK,SACF,SAAS,EACT,oBAAoB,OAAO;AAAA,QAC1B;AAAA,QACA;AAAA,QACA;AAAA,MACF;AACF,WAAK,SAAS,QAAQ;AAAA,IACxB;AAAA,EACF;AACF;","names":["import_overlayscrollbars"]}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@coze-editor/extension-scrollbar",
+  "version": "0.1.0-alpha.09ffeb",
+  "description": "extension-scrollbar",
+  "license": "MIT",
+  "author": "fengzilong",
+  "maintainers": [],
+  "sideEffects": [
+    "**/*.css",
+    "**/*.less",
+    "**/*.sass",
+    "**/*.scss"
+  ],
+  "main": "./dist/esm/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "lint": "eslint && tsc --noEmit"
+  },
+  "dependencies": {
+    "overlayscrollbars": "^2.10.1"
+  },
+  "devDependencies": {
+    "@codemirror/state": "^6.4.1",
+    "@codemirror/view": "^6.26.1",
+    "@coze-arch/ts-config": "workspace:*",
+    "@coze-editor/eslint-config": "workspace:*",
+    "@types/node": "^22",
+    "eslint": "9.14.0",
+    "tsup": "^8.0.1",
+    "typescript": "^5.8.2"
+  },
+  "peerDependencies": {
+    "@codemirror/state": "^6.4.1",
+    "@codemirror/view": "^6.26.1"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "test:main": "./src/index.ts"
+}