editor: replace simplebar with simple css styling (#9085)

Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

packages/editor/package.json

@@ -78,7 +78,6 @@
     "react-colorful": "^5.6.1",
     "redent": "^4.0.0",
     "refractor": "^4.8.1",
-    "simplebar-react": "^3.3.2",
     "strip-indent": "^4.0.0",
     "unfurl.js": "^6.4.0"
   },

packages/editor/src/extensions/code-block/code-block.ts

@@ -545,6 +545,7 @@ export const CodeBlock = Node.create<CodeBlockOptions>({
             languageDefinition?.filename ?? languageDefinition?.title ?? "xyz"
           }`.replace(/\s/, "-")
         );
+        content.classList.add("scroll-bar")
         content.style.whiteSpace = "pre";
         // caret is not visible if content element width is 0px
         content.style.minWidth = "20px";

packages/editor/src/extensions/code-block/component.tsx

@@ -30,7 +30,6 @@ import { CodeBlockAttributes } from "./code-block.js";
 import Languages from "./languages.json";
 import { useThemeEngineStore } from "@notesnook/theme";
 import { strings } from "@notesnook/intl";
-import SimpleBar from "simplebar-react";
 
 export function CodeblockComponent(
   props: ReactNodeViewProps<CodeBlockAttributes>
@@ -59,53 +58,45 @@ export function CodeblockComponent(
           overflow: "hidden"
         }}
       >
-        <SimpleBar
-          style={{
-            backgroundColor: "var(--background-secondary)"
+        <Text
+          ref={(ref) => {
+            elementRef.current = ref ?? undefined;
+            forwardRef?.(ref);
           }}
-        >
-          <div>
-            <Text
-              ref={(ref) => {
-                elementRef.current = ref ?? undefined;
-                forwardRef?.(ref);
-              }}
-              autoCorrect="off"
-              autoCapitalize="none"
-              css={theme.codeBlockCSS}
-              sx={{
-                pre: {
-                  fontFamily: "inherit !important",
-                  tabSize: "inherit !important",
-                  // background: "transparent !important",
-                  padding: "10px !important",
-                  margin: "0px !important",
-                  width: "100%",
-                  borderRadius: `0px !important`,
+          autoCorrect="off"
+          autoCapitalize="none"
+          css={theme.codeBlockCSS}
+          sx={{
+            pre: {
+              fontFamily: "inherit !important",
+              tabSize: "inherit !important",
+              // background: "transparent !important",
+              padding: "10px !important",
+              margin: "0px !important",
+              width: "100%",
+              borderRadius: `0px !important`,
 
-                  "::selection,*::selection": {
-                    bg: "background-selected",
-                    color: "inherit"
-                  },
-                  "::-moz-selection,*::-moz-selection": {
-                    bg: "background-selected",
-                    color: "inherit"
-                  }
-                },
-                fontFamily: "monospace",
-                whiteSpace: "pre", // TODO !important
-                tabSize: 1,
-                position: "relative",
-                lineHeight: "20px",
-                // bg: "var(--background-secondary)",
-                // color: "white",
-                // overflowX: "hidden",
-                display: "flex"
-              }}
-              spellCheck={false}
-            />
-          </div>
-        </SimpleBar>
+              "::selection,*::selection": {
+                bg: "background-selected",
+                color: "inherit"
+              },
+              "::-moz-selection,*::-moz-selection": {
+                bg: "background-selected",
+                color: "inherit"
+              }
+            },
+            fontFamily: "monospace",
+            whiteSpace: "pre", // TODO !important
+            tabSize: 1,
+            position: "relative",
+            lineHeight: "20px",
+            // bg: "var(--background-secondary)",
+            // color: "white",
+            overflowX: "hidden",
+            display: "flex"
+          }}
+          spellCheck={false}
+        />
         <Flex
           ref={toolbarRef}
           contentEditable={false}

packages/editor/src/extensions/table/component.tsx

@@ -39,7 +39,6 @@ import {
 import { DesktopOnly, MobileOnly } from "../../components/responsive/index.js";
 import { TextDirections } from "../text-direction/index.js";
 import { strings } from "@notesnook/intl";
-import SimpleBar from "simplebar-react";
 import { useIsMobile } from "../../toolbar/stores/toolbar-store.js";
 import { updateColumnsOnResize } from "./prosemirror-tables/tableview.js";
 
@@ -104,41 +103,27 @@ export function TableComponent(
             />
           </>
         ) : null}
-        <SimpleBar autoHide style={{ overflowY: "hidden" }}>
-          <div dir={textDirection}>
-            <table
-              ref={(ref) => {
-                forwardRef?.(ref);
-                tableRef.current = ref || undefined;
-              }}
-            >
-              <colgroup ref={colgroupRef} />
-              {/* <tbody /> */}
-            </table>
-          </div>
-        </SimpleBar>
       </DesktopOnly>
-      <MobileOnly>
-        <div
-          dir={textDirection}
-          style={{
-            overflowY: "hidden",
-            overflowX: "auto",
-            WebkitOverflowScrolling: "touch",
-            maxWidth: "100%"
+      <div
+        dir={textDirection}
+        className="scroll-bar"
+        style={{
+          overflowY: "hidden",
+          overflowX: "auto",
+          WebkitOverflowScrolling: "touch",
+          maxWidth: "100%"
+        }}
+      >
+        <table
+          ref={(ref) => {
+            forwardRef?.(ref);
+            tableRef.current = ref || undefined;
           }}
         >
-          <table
-            ref={(ref) => {
-              forwardRef?.(ref);
-              tableRef.current = ref || undefined;
-            }}
-          >
-            <colgroup ref={colgroupRef} />
-            {/* <tbody /> */}
-          </table>
-        </div>
-      </MobileOnly>
+          <colgroup ref={colgroupRef} />
+          {/* <tbody /> */}
+        </table>
+      </div>
     </>
   );
 }

packages/editor/src/index.ts

@@ -87,7 +87,6 @@ import { strings } from "@notesnook/intl";
 import { InlineCode } from "./extensions/inline-code/inline-code.js";
 import { FontLigature } from "./extensions/font-ligature/font-ligature.js";
 import { SearchResult } from "./extensions/search-result/search-result.js";
-import "simplebar-react/dist/simplebar.min.css";
 
 interface TiptapStorage {
   dateFormat?: DateTimeOptions["dateFormat"];

packages/editor/styles/styles.css

@@ -991,11 +991,35 @@ del.diffdel {
 .simplebar-content:before {
   content: "" !important;
 }
-.simplebar-content:after {
-  content: "" !important;
+
+.scroll-bar {
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
 }
 
-pre[class*="language-"] {
-  overflow: initial !important;
+.scroll-bar:hover {
+  scrollbar-color: var(--border) transparent;
 }
 
+.scroll-bar::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.scroll-bar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.scroll-bar::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 10px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+  transition: background-color 0.2s ease;
+}
+
+.scroll-bar::-webkit-scrollbar-thumb:hover,
+.scroll-bar::-webkit-scrollbar-thumb:active {
+  background-color: var(--border);
+}