Scrollable tabs using OverlayScrollbars (#60)

2024-12-21 16:38:23 +01:00 · 2024-06-21 11:04:00 +08:00 · 2024-06-21 11:04:00 +08:00 · e83b5c8763
commit e83b5c8763
parent b73148be6b
9 changed files with 253 additions and 110 deletions
--- a/frontend/app/app.less
+++ b/frontend/app/app.less
@ -60,3 +60,10 @@ body {
 .error-boundary {
    color: var(--error-color);
 }
+
+/* OverlayScrollbars styling */
+.os-scrollbar {
+    --os-handle-bg: var(--scrollbar-thumb-color);
+    --os-handle-bg-hover: var(--scrollbar-thumb-hover-color);
+    --os-handle-bg-active: var(--scrollbar-thumb-active-color);
+}
--- a/frontend/app/app.tsx
+++ b/frontend/app/app.tsx
@ -9,9 +9,11 @@ import { Provider } from "jotai";

 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
-import "./app.less";
 import { CenteredDiv } from "./element/quickelems";

+import "overlayscrollbars/overlayscrollbars.css";
+import "./app.less";
+
 const App = () => {
    return (
        <Provider store={globalStore}>
--- a/frontend/app/tab/tab.tsx
+++ b/frontend/app/tab/tab.tsx
@ -4,7 +4,7 @@
 import { Button } from "@/element/button";
 import * as WOS from "@/store/wos";
 import { clsx } from "clsx";
-import React from "react";
+import React, { useEffect, useRef } from "react";

 import "./tab.less";

@ -16,13 +16,23 @@ interface TabProps {
    onSelect: () => void;
    onClose: () => void;
    onDragStart: () => void;
+    onLoaded: () => void;
 }

 const Tab = React.forwardRef<HTMLDivElement, TabProps>(
-    ({ id, active, isBeforeActive, isDragging, onSelect, onClose, onDragStart }, ref) => {
+    ({ id, active, isBeforeActive, isDragging, onLoaded, onSelect, onClose, onDragStart }, ref) => {
        const [tabData, tabLoading] = WOS.useWaveObjectValue<Tab>(WOS.makeORef("tab", id));
        const name = tabData?.name ?? "...";

+        const loadedRef = useRef(false);
+
+        useEffect(() => {
+            if (!loadedRef.current) {
+                onLoaded();
+                loadedRef.current = true;
+            }
+        }, [onLoaded]);
+
        return (
            <div
                ref={ref}
--- a/frontend/app/tab/tabbar.less
+++ b/frontend/app/tab/tabbar.less
@ -10,7 +10,6 @@
        position: relative; // Needed for absolute positioning of child tabs
        min-height: 34px; // Adjust as necessary to fit the height of tabs
        width: calc(100vw - 36px); // 36 is the width of add tab button
-        overflow: hidden;
    }

    .add-tab-btn {
@ -20,13 +19,24 @@
        position: absolute;
        top: 50%;
        transform: translateY(-50%); // overridden in js
-        border-radius: 100%;
        font-size: 14px;
        text-align: center;
-        height: 32px;
        user-select: none;
        display: flex;
        align-items: center;
        justify-content: center;
+        background-color: var(--main-bg-color);
+    }
+
+    // Customize scrollbar styles
+    .os-theme-dark,
+    .os-theme-light {
+        box-sizing: border-box;
+        --os-size: 3px;
+        --os-padding-perpendicular: 0px;
+        --os-padding-axis: 0px;
+        --os-track-border-radius: 3px;
+        --os-handle-interactive-area-offset: 0px;
+        --os-handle-border-radius: 3px;
    }
 }
--- a/frontend/app/tab/tabbar.tsx
+++ b/frontend/app/tab/tabbar.tsx
@ -2,39 +2,54 @@
 // SPDX-License-Identifier: Apache-2.0

 import { deleteLayoutStateAtomForTab } from "@/faraday/lib/layoutAtom";
+import { debounce } from "@/faraday/lib/utils";
 import { atoms } from "@/store/global";
 import * as services from "@/store/services";
-import { PrimitiveAtom, atom, useAtom, useAtomValue } from "jotai";
-import React, { createRef, useCallback, useEffect, useRef } from "react";
+import { useAtomValue } from "jotai";
+import { OverlayScrollbars } from "overlayscrollbars";
+import React, { createRef, useCallback, useEffect, useRef, useState } from "react";

 import { Tab } from "./tab";

 import "./tabbar.less";

-const DEFAULT_TAB_WIDTH = 130;
-
-// Atoms
-const tabIdsAtom = atom<string[]>([]);
-const tabWidthAtom = atom<number>(DEFAULT_TAB_WIDTH);
-const dragStartPositionsAtom = atom<number[]>([]);
-const draggingTabAtom = atom<string | null>(null) as PrimitiveAtom<string | null>;
-const loadingAtom = atom<boolean>(true);
+const TAB_DEFAULT_WIDTH = 130;
+const TAB_MIN_WIDTH = 100;
+const OS_OPTIONS = {
+    overflow: {
+        x: "scroll",
+        y: "hidden",
+    },
+    scrollbars: {
+        theme: "os-theme-dark",
+        visibility: "auto",
+        autoHide: "leave",
+        autoHideDelay: 1300,
+        autoHideSuspend: false,
+        dragScroll: true,
+        clickScroll: false,
+        pointers: ["mouse", "touch", "pen"],
+    },
+};

 interface TabBarProps {
    workspace: Workspace;
 }

 const TabBar = ({ workspace }: TabBarProps) => {
-    const [tabIds, setTabIds] = useAtom(tabIdsAtom);
-    const [tabWidth, setTabWidth] = useAtom(tabWidthAtom);
-    const [dragStartPositions, setDragStartPositions] = useAtom(dragStartPositionsAtom);
-    const [draggingTab, setDraggingTab] = useAtom(draggingTabAtom);
-    const [loading, setLoading] = useAtom(loadingAtom);
+    const [tabIds, setTabIds] = useState<string[]>([]);
+    const [dragStartPositions, setDragStartPositions] = useState<number[]>([]);
+    const [draggingTab, setDraggingTab] = useState<string>();
+    const [tabsLoaded, setTabsLoaded] = useState({});
+    const [scrollable, setScrollable] = useState(false);
+    const [tabWidth, setTabWidth] = useState(TAB_DEFAULT_WIDTH);

    const tabBarRef = useRef<HTMLDivElement>(null);
+    const tabsWrapperRef = useRef<HTMLDivElement>(null);
    const tabRefs = useRef<React.RefObject<HTMLDivElement>[]>([]);
    const addBtnRef = useRef<HTMLDivElement>(null);
-    const draggingTimeoutId = useRef<NodeJS.Timeout>(null);
+    const draggingTimeoutIdRef = useRef<NodeJS.Timeout>(null);
+    const scrollToNewTabTimeoutIdRef = useRef<NodeJS.Timeout>(null);
    const draggingRemovedRef = useRef(false);
    const draggingTabDataRef = useRef({
        tabId: "",
@ -43,13 +58,13 @@ const TabBar = ({ workspace }: TabBarProps) => {
        tabIndex: 0,
        dragged: false,
    });
+    const osInstanceRef = useRef<OverlayScrollbars>(null);

    const windowData = useAtomValue(atoms.waveWindow);
    const { activetabid } = windowData;

    let prevDelta: number;
    let prevDragDirection: string;
-    let shrunk: boolean;

    // Update refs when tabIds change
    useEffect(() => {
@ -68,40 +83,53 @@ const TabBar = ({ workspace }: TabBarProps) => {
            if (!areEqual) {
                setTabIds(workspace.tabids);
            }
-            setLoading(false);
        }
-    }, [workspace, tabIds, setTabIds, setLoading]);
+    }, [workspace, tabIds]);

    const updateTabPositions = useCallback(() => {
-        if (tabBarRef.current) {
-            const newStartPositions: number[] = [];
-            let cumulativeLeft = 0; // Start from the left edge
+        const tabs = tabRefs.current;
+        if (tabs === null) return;

-            tabRefs.current.forEach((ref) => {
-                if (ref.current) {
-                    newStartPositions.push(cumulativeLeft);
-                    cumulativeLeft += ref.current.getBoundingClientRect().width; // Add each tab's actual width to the cumulative position
-                }
-            });
+        const newStartPositions: number[] = [];
+        let cumulativeLeft = 0; // Start from the left edge

-            setDragStartPositions(newStartPositions);
-        }
-    }, [tabRefs.current, setDragStartPositions]);
+        tabRefs.current.forEach((ref) => {
+            if (ref.current) {
+                newStartPositions.push(cumulativeLeft);
+                cumulativeLeft += ref.current.getBoundingClientRect().width; // Add each tab's actual width to the cumulative position
+            }
+        });
+
+        setDragStartPositions(newStartPositions);
+    }, []);
+
+    const debouncedSetTabWidth = debounce((width) => setTabWidth(width), 100);
+    const debouncedSetScrollable = debounce((scrollable) => setScrollable(scrollable), 100);
+    const debouncedUpdateTabPositions = debounce(() => updateTabPositions(), 100);

    const handleResizeTabs = useCallback(() => {
        const tabBar = tabBarRef.current;
-        if (!tabBar) return;
+        if (tabBar === null) return;

-        const containerWidth = tabBar.getBoundingClientRect().width;
+        const tabBarWidth = tabBar.getBoundingClientRect().width;
        const numberOfTabs = tabIds.length;
-        const totalDefaultTabWidth = numberOfTabs * DEFAULT_TAB_WIDTH;
-        let newTabWidth = DEFAULT_TAB_WIDTH;
+        const totalDefaultTabWidth = numberOfTabs * TAB_DEFAULT_WIDTH;
+        const minTotalTabWidth = numberOfTabs * TAB_MIN_WIDTH;
+        let newTabWidth = tabWidth;
+        let newScrollable = scrollable;

-        if (totalDefaultTabWidth > containerWidth) {
-            newTabWidth = containerWidth / numberOfTabs;
-            shrunk = true;
+        if (minTotalTabWidth > tabBarWidth) {
+            // Case where tabs cannot shrink further, make the tab bar scrollable
+            newTabWidth = TAB_MIN_WIDTH;
+            newScrollable = true;
+        } else if (totalDefaultTabWidth > tabBarWidth) {
+            // Case where resizing is needed due to limited container width
+            newTabWidth = tabBarWidth / numberOfTabs;
+            newScrollable = false;
        } else {
-            shrunk = false;
+            // Case where tabs were previously shrunk or there is enough space for default width tabs
+            newTabWidth = TAB_DEFAULT_WIDTH;
+            newScrollable = false;
        }

        // Apply the calculated width and position to all tabs
@ -114,7 +142,19 @@ const TabBar = ({ workspace }: TabBarProps) => {

        // Update the state with the new tab width if it has changed
        if (newTabWidth !== tabWidth) {
-            setTabWidth(newTabWidth);
+            debouncedSetTabWidth(newTabWidth);
+        }
+        // Update the state with the new scrollable state if it has changed
+        if (newScrollable !== scrollable) {
+            debouncedSetScrollable(newScrollable);
+        }
+        // Initialize/destroy overlay scrollbars
+        if (newScrollable) {
+            osInstanceRef.current = OverlayScrollbars(tabBarRef.current, { ...(OS_OPTIONS as any) });
+        } else {
+            if (osInstanceRef.current) {
+                osInstanceRef.current.destroy();
+            }
        }

        // Update the position of the Add Tab button if needed
@ -123,66 +163,45 @@ const TabBar = ({ workspace }: TabBarProps) => {
        if (addButton && lastTabRef && lastTabRef.current) {
            const lastTabRect = lastTabRef.current.getBoundingClientRect();
            addButton.style.position = "absolute";
-            addButton.style.transform = `translateX(${lastTabRect.right}px) translateY(-50%)`;
+            if (newScrollable) {
+                addButton.style.transform = `translateX(${document.documentElement.clientWidth - addButton.offsetWidth}px) translateY(-50%)`;
+            } else {
+                addButton.style.transform = `translateX(${lastTabRect.right + 1}px) translateY(-50%)`;
+            }
        }
-    }, [tabIds, tabWidth, updateTabPositions, setTabWidth]);
+
+        debouncedUpdateTabPositions();
+    }, [tabIds, tabWidth, scrollable]);

    useEffect(() => {
-        window.addEventListener("resize", handleResizeTabs);
+        window.addEventListener("resize", () => handleResizeTabs());
        return () => {
-            window.removeEventListener("resize", handleResizeTabs);
+            window.removeEventListener("resize", () => handleResizeTabs());
        };
    }, [handleResizeTabs]);

    useEffect(() => {
-        if (!loading) {
-            handleResizeTabs();
+        // Check if all tabs are loaded
+        const allLoaded = tabIds.length > 0 && tabIds.every((id) => tabsLoaded[id]);
+        if (allLoaded) {
            updateTabPositions();
+            handleResizeTabs();
        }
-    }, [loading, handleResizeTabs, updateTabPositions]);
+    }, [tabIds, tabsLoaded, handleResizeTabs, updateTabPositions]);

    // Make sure timeouts are cleared when component is unmounted
    useEffect(() => {
        return () => {
-            if (draggingTimeoutId.current) {
-                clearTimeout(draggingTimeoutId.current);
+            if (draggingTimeoutIdRef.current) {
+                clearTimeout(draggingTimeoutIdRef.current);
+            }
+            if (scrollToNewTabTimeoutIdRef.current) {
+                clearTimeout(scrollToNewTabTimeoutIdRef.current);
            }
        };
    }, []);

-    const handleMouseMove = (event: MouseEvent) => {
-        const { tabId, ref, tabStartX } = draggingTabDataRef.current;
-
-        let tabIndex = draggingTabDataRef.current.tabIndex;
-        let currentX = event.clientX - ref.current.getBoundingClientRect().width / 2;
-
-        // Check if the tab has moved 5 pixels
-        if (Math.abs(currentX - tabStartX) >= 5) {
-            setDraggingTab(tabId);
-            draggingTabDataRef.current.dragged = true;
-        }
-
-        // Constrain movement within the container bounds
-        if (tabBarRef.current) {
-            const numberOfTabs = tabIds.length;
-            const totalDefaultTabWidth = numberOfTabs * DEFAULT_TAB_WIDTH;
-            const containerRect = tabBarRef.current.getBoundingClientRect();
-            let containerRectWidth = containerRect.width;
-            // Set to the total default tab width if there's vacant space
-            if (totalDefaultTabWidth < containerRectWidth) {
-                containerRectWidth = totalDefaultTabWidth;
-            }
-
-            const minLeft = 0;
-            const maxRight = containerRectWidth - tabWidth;
-
-            // Adjust currentX to stay within bounds
-            currentX = Math.min(Math.max(currentX, minLeft), maxRight);
-        }
-
-        ref.current!.style.transform = `translateX(${currentX}px)`;
-        ref.current!.style.zIndex = "100";
-
+    const getDragDirection = (currentX: number) => {
        let dragDirection;
        if (currentX - prevDelta > 0) {
            dragDirection = "+";
@ -193,9 +212,11 @@ const TabBar = ({ workspace }: TabBarProps) => {
        }
        prevDelta = currentX;
        prevDragDirection = dragDirection;
+        return dragDirection;
+    };

+    const getNewTabIndex = (currentX: number, tabIndex: number, dragDirection: string) => {
        let newTabIndex = tabIndex;
-
        if (dragDirection === "+") {
            // Dragging to the right
            for (let i = tabIndex + 1; i < tabIds.length; i++) {
@ -213,6 +234,63 @@ const TabBar = ({ workspace }: TabBarProps) => {
                }
            }
        }
+        return newTabIndex;
+    };
+
+    const handleMouseMove = (event: MouseEvent) => {
+        const { tabId, ref, tabStartX } = draggingTabDataRef.current;
+
+        let currentX = event.clientX - ref.current.getBoundingClientRect().width / 2;
+        let tabBarRectWidth = tabBarRef.current.getBoundingClientRect().width;
+        const dragDirection = getDragDirection(currentX);
+
+        // Scroll the tab bar if the dragged tab overflows the container bounds
+        if (scrollable) {
+            const { viewport } = osInstanceRef.current.elements();
+            const { overflowAmount } = osInstanceRef.current.state();
+            const { scrollOffsetElement } = osInstanceRef.current.elements();
+
+            if (event.clientX <= 0) {
+                viewport.scrollLeft = 0;
+            } else if (event.clientX >= tabBarRectWidth) {
+                viewport.scrollLeft = tabBarRectWidth;
+            }
+
+            if (scrollOffsetElement.scrollLeft > 0) {
+                currentX += overflowAmount.x;
+            }
+        }
+
+        // Check if the tab has moved 5 pixels
+        if (Math.abs(currentX - tabStartX) >= 5) {
+            setDraggingTab((prev) => (prev !== tabId ? tabId : prev));
+            draggingTabDataRef.current.dragged = true;
+        }
+
+        // Constrain movement within the container bounds
+        if (tabBarRef.current) {
+            const numberOfTabs = tabIds.length;
+            const totalDefaultTabWidth = numberOfTabs * TAB_DEFAULT_WIDTH;
+            if (totalDefaultTabWidth < tabBarRectWidth) {
+                // Set to the total default tab width if there's vacant space
+                tabBarRectWidth = totalDefaultTabWidth;
+            } else if (scrollable) {
+                // Set to the scrollable width if the tab bar is scrollable
+                tabBarRectWidth = tabsWrapperRef.current.scrollWidth;
+            }
+
+            const minLeft = 0;
+            const maxRight = tabBarRectWidth - tabWidth;
+
+            // Adjust currentX to stay within bounds
+            currentX = Math.min(Math.max(currentX, minLeft), maxRight);
+        }
+
+        ref.current!.style.transform = `translateX(${currentX}px)`;
+        ref.current!.style.zIndex = "100";
+
+        const tabIndex = draggingTabDataRef.current.tabIndex;
+        const newTabIndex = getNewTabIndex(currentX, tabIndex, dragDirection);

        if (newTabIndex !== tabIndex) {
            // Remove the dragged tab if not already done
@ -239,7 +317,6 @@ const TabBar = ({ workspace }: TabBarProps) => {
                }
            });

-            tabIndex = newTabIndex;
            draggingTabDataRef.current.tabIndex = newTabIndex;
        }
    };
@ -257,7 +334,7 @@ const TabBar = ({ workspace }: TabBarProps) => {
        }

        if (dragged) {
-            draggingTimeoutId.current = setTimeout(() => {
+            draggingTimeoutIdRef.current = setTimeout(() => {
                // Reset styles
                tabRefs.current.forEach((ref) => {
                    ref.current.style.zIndex = "0";
@ -292,12 +369,12 @@ const TabBar = ({ workspace }: TabBarProps) => {
                document.addEventListener("mousemove", handleMouseMove);
                document.addEventListener("mouseup", handleMouseUp);

-                if (draggingTimeoutId.current) {
-                    clearTimeout(draggingTimeoutId.current);
+                if (draggingTimeoutIdRef.current) {
+                    clearTimeout(draggingTimeoutIdRef.current);
                }
            }
        },
-        [tabIds, dragStartPositions, tabWidth]
+        [tabIds, dragStartPositions]
    );

    const handleSelectTab = (tabId: string) => {
@ -310,6 +387,13 @@ const TabBar = ({ workspace }: TabBarProps) => {
        const newTabName = `T${tabIds.length + 1}`;
        setTabIds([...tabIds, newTabName]);
        services.ObjectService.AddTabToWorkspace(newTabName, true);
+
+        scrollToNewTabTimeoutIdRef.current = setTimeout(() => {
+            if (scrollable) {
+                const { viewport } = osInstanceRef.current.elements();
+                viewport.scrollLeft = tabIds.length * tabWidth;
+            }
+        }, 30);
    };

    const handleCloseTab = (tabId: string) => {
@ -317,26 +401,41 @@ const TabBar = ({ workspace }: TabBarProps) => {
        deleteLayoutStateAtomForTab(tabId);
    };

+    const handleTabLoaded = useCallback((tabId) => {
+        setTabsLoaded((prev) => {
+            if (!prev[tabId]) {
+                // Only update if the tab isn't already marked as loaded
+                return { ...prev, [tabId]: true };
+            }
+            return prev;
+        });
+    }, []);
+
    const isBeforeActive = (tabId: string) => {
        return tabIds.indexOf(tabId) === tabIds.indexOf(activetabid) - 1;
    };

+    const tabsWrapperWidth = tabIds.length * tabWidth;
+
    return (
        <div className="tab-bar-wrapper">
-            <div className="tab-bar" ref={tabBarRef}>
-                {tabIds.map((tabId, index) => (
-                    <Tab
-                        key={tabId}
-                        ref={tabRefs.current[index]}
-                        id={tabId}
-                        onSelect={() => handleSelectTab(tabId)}
-                        active={activetabid === tabId}
-                        onDragStart={() => handleDragStart(tabId, tabRefs.current[index])}
-                        onClose={() => handleCloseTab(tabId)}
-                        isBeforeActive={isBeforeActive(tabId)}
-                        isDragging={draggingTab === tabId}
-                    />
-                ))}
+            <div className="tab-bar" ref={tabBarRef} data-overlayscrollbars-initialize>
+                <div className="tabs-wrapper" ref={tabsWrapperRef} style={{ width: tabsWrapperWidth }}>
+                    {tabIds.map((tabId, index) => (
+                        <Tab
+                            key={tabId}
+                            ref={tabRefs.current[index]}
+                            id={tabId}
+                            onSelect={() => handleSelectTab(tabId)}
+                            active={activetabid === tabId}
+                            onDragStart={() => handleDragStart(tabId, tabRefs.current[index])}
+                            onClose={() => handleCloseTab(tabId)}
+                            onLoaded={() => handleTabLoaded(tabId)}
+                            isBeforeActive={isBeforeActive(tabId)}
+                            isDragging={draggingTab === tabId}
+                        />
+                    ))}
+                </div>
            </div>
            <div ref={addBtnRef} className="add-tab-btn" onClick={handleAddTab}>
                <i className="fa fa-solid fa-plus fa-fw" />
--- a/frontend/app/theme.less
+++ b/frontend/app/theme.less
@ -29,4 +29,10 @@
    /* z-index values */
    --zindex-header-hover: 100;
    --zindex-termstickers: 20;
+
+    /* scrollbar colors */
+    --scrollbar-background-color: var(--app-bg-color);
+    --scrollbar-thumb-color: rgba(255, 255, 255, 0.3);
+    --scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.5);
+    --scrollbar-thumb-active-color: rgba(255, 255, 255, 0.6);
 }
--- a/frontend/types/gotypes.d.ts
+++ b/frontend/types/gotypes.d.ts
@ -31,7 +31,7 @@ declare global {

    type BlockCommand = {
        command: string;
-    } & ( ResolveIdsCommand | BlockSetViewCommand | BlockSetMetaCommand | BlockGetMetaCommand | BlockMessageCommand | BlockInputCommand | BlockAppendFileCommand | BlockAppendIJsonCommand | CreateBlockCommand );
+	} & ( ResolveIdsCommand | BlockSetViewCommand | BlockSetMetaCommand | BlockGetMetaCommand | BlockMessageCommand | BlockInputCommand | BlockAppendFileCommand | BlockAppendIJsonCommand | CreateBlockCommand );

    // wstore.BlockDef
    type BlockDef = {
@ -325,4 +325,4 @@ declare global {

 }

-export {}
+export {}
--- a/package.json
+++ b/package.json
@ -65,6 +65,7 @@
        "immer": "^10.1.1",
        "jotai": "^2.8.0",
        "monaco-editor": "^0.49.0",
+        "overlayscrollbars": "^2.8.3",
        "react": "^18.3.1",
        "react-dnd": "^16.0.1",
        "react-dnd-html5-backend": "^16.0.1",
--- a/yarn.lock
+++ b/yarn.lock
@ -10322,6 +10322,13 @@ __metadata:
  languageName: node
  linkType: hard

+"overlayscrollbars@npm:^2.8.3":
+  version: 2.8.3
+  resolution: "overlayscrollbars@npm:2.8.3"
+  checksum: 10c0/1f0713e981ce27e0cd9261a6a0acfe080bd44c21c9f6cbb9c3df582c155d11a0c949553d7ea4e01a107d784d527c5cf3465ab6979affca9e430d450968b763f6
+  languageName: node
+  linkType: hard
+
 "p-cancelable@npm:^2.0.0":
  version: 2.1.1
  resolution: "p-cancelable@npm:2.1.1"
@ -12303,6 +12310,7 @@ __metadata:
    jotai: "npm:^2.8.0"
    less: "npm:^4.2.0"
    monaco-editor: "npm:^0.49.0"
+    overlayscrollbars: "npm:^2.8.3"
    prettier: "npm:^3.2.5"
    prettier-plugin-jsdoc: "npm:^1.3.0"
    prettier-plugin-organize-imports: "npm:^3.2.4"