@scalar/use-codemirror 0.11.57 → 0.11.59

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @scalar/use-codemirror
 
+## 0.11.59
+
+### Patch Changes
+
+- 7f3aa9c: refactor: remove @uiw/codemirror-themes
+
+## 0.11.58
+
+### Patch Changes
+
+- Updated dependencies [2ad0407]
+- Updated dependencies [e866487]
+  - @scalar/components@0.13.14
+
 ## 0.11.57
 
 ### Patch Changes

package/dist/themes/createCodeMirrorTheme.d.ts

@@ -0,0 +1,57 @@
+/**
+ * This file is copied from @uiw/codemirror-themes.
+ * We’ve had issues with the import (something to do with CJS/ESM).
+ *
+ * @see https://github.com/uiwjs/react-codemirror
+ * @see https://github.com/scalar/scalar/issues/4222
+ */
+import { type TagStyle } from '@codemirror/language';
+import type { Extension } from '@codemirror/state';
+import type { StyleSpec } from 'style-mod';
+export type CreateThemeOptions = {
+    /**
+     * Theme inheritance. Determines which styles CodeMirror will apply by default.
+     */
+    theme: Theme;
+    /**
+     * Settings to customize the look of the editor, like background, gutter, selection and others.
+     */
+    settings: Settings;
+    /** Syntax highlighting styles. */
+    styles: TagStyle[];
+};
+type Theme = 'light' | 'dark';
+export type Settings = {
+    /** Editor background color. */
+    background?: string;
+    /** Editor background image. */
+    backgroundImage?: string;
+    /** Default text color. */
+    foreground?: string;
+    /** Caret color. */
+    caret?: string;
+    /** Selection background. */
+    selection?: string;
+    /** Selection match background. */
+    selectionMatch?: string;
+    /** Background of highlighted lines. */
+    lineHighlight?: string;
+    /** Gutter background. */
+    gutterBackground?: string;
+    /** Text color inside gutter. */
+    gutterForeground?: string;
+    /** Text active color inside gutter. */
+    gutterActiveForeground?: string;
+    /** Gutter right border color. */
+    gutterBorder?: string;
+    /** set editor font */
+    fontFamily?: string;
+    /** set editor font size */
+    fontSize?: StyleSpec['fontSize'];
+};
+/**
+ * Creates a CodeMirror theme from a set of options.
+ */
+export declare const createCodeMirrorTheme: ({ theme, settings, styles, }: CreateThemeOptions) => Extension;
+export {};
+//# sourceMappingURL=createCodeMirrorTheme.d.ts.map

package/dist/themes/createCodeMirrorTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createCodeMirrorTheme.d.ts","sourceRoot":"","sources":["../../src/themes/createCodeMirrorTheme.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAEL,KAAK,QAAQ,EAEd,MAAM,sBAAsB,CAAA;AAC7B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAElD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AAE1C,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,KAAK,EAAE,KAAK,CAAA;IACZ;;OAEG;IACH,QAAQ,EAAE,QAAQ,CAAA;IAClB,kCAAkC;IAClC,MAAM,EAAE,QAAQ,EAAE,CAAA;CACnB,CAAA;AAED,KAAK,KAAK,GAAG,OAAO,GAAG,MAAM,CAAA;AAE7B,MAAM,MAAM,QAAQ,GAAG;IACrB,+BAA+B;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,+BAA+B;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,0BAA0B;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kCAAkC;IAClC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,uCAAuC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,gCAAgC;IAChC,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,uCAAuC;IACvC,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAC/B,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,sBAAsB;IACtB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAA;CACjC,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,qBAAqB,iCAI/B,kBAAkB,KAAG,SA4EvB,CAAA"}

package/dist/themes/createCodeMirrorTheme.js

@@ -0,0 +1,85 @@
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { EditorView } from '@codemirror/view';
+
+/**
+ * This file is copied from @uiw/codemirror-themes.
+ * We’ve had issues with the import (something to do with CJS/ESM).
+ *
+ * @see https://github.com/uiwjs/react-codemirror
+ * @see https://github.com/scalar/scalar/issues/4222
+ */
+/**
+ * Creates a CodeMirror theme from a set of options.
+ */
+const createCodeMirrorTheme = ({ theme, settings = {}, styles = [], }) => {
+    const themeOptions = {
+        '.cm-gutters': {},
+    };
+    const baseStyle = {};
+    if (settings.background) {
+        baseStyle.backgroundColor = settings.background;
+    }
+    if (settings.backgroundImage) {
+        baseStyle.backgroundImage = settings.backgroundImage;
+    }
+    if (settings.foreground) {
+        baseStyle.color = settings.foreground;
+    }
+    if (settings.fontSize) {
+        baseStyle.fontSize = settings.fontSize;
+    }
+    if (settings.background || settings.foreground) {
+        themeOptions['&'] = baseStyle;
+    }
+    if (settings.fontFamily) {
+        themeOptions['&.cm-editor .cm-scroller'] = {
+            fontFamily: settings.fontFamily,
+        };
+    }
+    if (settings.gutterBackground) {
+        themeOptions['.cm-gutters'].backgroundColor = settings.gutterBackground;
+    }
+    if (settings.gutterForeground) {
+        themeOptions['.cm-gutters'].color = settings.gutterForeground;
+    }
+    if (settings.gutterBorder) {
+        themeOptions['.cm-gutters'].borderRightColor = settings.gutterBorder;
+    }
+    if (settings.caret) {
+        themeOptions['.cm-content'] = {
+            caretColor: settings.caret,
+        };
+        themeOptions['.cm-cursor, .cm-dropCursor'] = {
+            borderLeftColor: settings.caret,
+        };
+    }
+    const activeLineGutterStyle = {};
+    if (settings.gutterActiveForeground) {
+        activeLineGutterStyle.color = settings.gutterActiveForeground;
+    }
+    if (settings.lineHighlight) {
+        themeOptions['.cm-activeLine'] = {
+            backgroundColor: settings.lineHighlight,
+        };
+        activeLineGutterStyle.backgroundColor = settings.lineHighlight;
+    }
+    themeOptions['.cm-activeLineGutter'] = activeLineGutterStyle;
+    if (settings.selection) {
+        themeOptions['&.cm-focused .cm-selectionBackground, & .cm-line::selection, & .cm-selectionLayer .cm-selectionBackground, .cm-content ::selection'] = {
+            background: settings.selection + ' !important',
+        };
+    }
+    if (settings.selectionMatch) {
+        themeOptions['& .cm-selectionMatch'] = {
+            backgroundColor: settings.selectionMatch,
+        };
+    }
+    const themeExtension = EditorView.theme(themeOptions, {
+        dark: theme === 'dark',
+    });
+    const highlightStyle = HighlightStyle.define(styles);
+    const extension = [themeExtension, syntaxHighlighting(highlightStyle)];
+    return extension;
+};
+
+export { createCodeMirrorTheme };

package/dist/themes/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/themes/index.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW,uCAqFtB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/themes/index.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,WAAW,uCAqFtB,CAAA"}

package/dist/themes/index.js

@@ -1,7 +1,7 @@
 import { tags } from '@lezer/highlight';
-import { createTheme } from '@uiw/codemirror-themes';
+import { createCodeMirrorTheme } from './createCodeMirrorTheme.js';
 
-const customTheme = createTheme({
+const customTheme = createCodeMirrorTheme({
     theme: 'light',
     settings: {
         background: 'var(--scalar-background-2)',

package/package.json

@@ -16,7 +16,7 @@
     "vue",
     "vue3"
   ],
-  "version": "0.11.57",
+  "version": "0.11.59",
   "engines": {
     "node": ">=18"
   },
@@ -64,10 +64,10 @@
     "@lezer/highlight": "^1.2.1",
     "@lezer/lr": "^1.4.2",
     "@replit/codemirror-css-color-picker": "^6.3.0",
-    "@uiw/codemirror-themes": "^4.23.7",
     "codemirror": "^6.0.0",
+    "style-mod": "^4.1.2",
     "vue": "^3.5.12",
-    "@scalar/components": "0.13.13"
+    "@scalar/components": "0.13.14"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
@@ -77,7 +77,8 @@
     "vue": "^3.5.12",
     "y-codemirror.next": "^0.3.2",
     "yjs": "^13.6.0",
-    "@scalar/build-tooling": "0.1.12"
+    "@scalar/build-tooling": "0.1.12",
+    "@scalar/themes": "0.9.60"
   },
   "scripts": {
     "build": "scalar-build-rollup",