@scalar/use-codemirror 0.12.1 → 0.12.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @scalar/use-codemirror
 
+## 0.12.3
+
+### Patch Changes
+
+- @scalar/components@0.14.2
+
+## 0.12.2
+
+### Patch Changes
+
+- ca8d9bc: chore: remove unused dependencies
+
 ## 0.12.1
 
 ### Patch Changes

package/dist/themes/createCodeMirrorTheme.d.ts

@@ -7,7 +7,9 @@
  */
 import { type TagStyle } from '@codemirror/language';
 import type { Extension } from '@codemirror/state';
-import type { StyleSpec } from 'style-mod';
+type StyleSpec = {
+    [propOrSelector: string]: string | number | StyleSpec | null;
+};
 export type CreateThemeOptions = {
     /**
      * Theme inheritance. Determines which styles CodeMirror will apply by default.

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

@@ -1 +1 @@
-{"version":3,"file":"createCodeMirrorTheme.d.ts","sourceRoot":"","sources":["../../src/themes/createCodeMirrorTheme.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAkB,KAAK,QAAQ,EAAsB,MAAM,sBAAsB,CAAA;AACxF,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,gCAA2C,kBAAkB,KAAG,SA4EjG,CAAA"}
+{"version":3,"file":"createCodeMirrorTheme.d.ts","sourceRoot":"","sources":["../../src/themes/createCodeMirrorTheme.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAkB,KAAK,QAAQ,EAAsB,MAAM,sBAAsB,CAAA;AACxF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAGlD,KAAK,SAAS,GAAG;IACf,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,CAAA;CAC7D,CAAA;AAED,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,gCAA2C,kBAAkB,KAAG,SA4EjG,CAAA"}

package/dist/themes/createCodeMirrorTheme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/themes/createCodeMirrorTheme.ts"],
-  "sourcesContent": ["/**\n * This file is copied from @uiw/codemirror-themes.\n * We\u2019ve had issues with the import (something to do with CJS/ESM).\n *\n * @see https://github.com/uiwjs/react-codemirror\n * @see https://github.com/scalar/scalar/issues/4222\n */\nimport { HighlightStyle, type TagStyle, syntaxHighlighting } from '@codemirror/language'\nimport type { Extension } from '@codemirror/state'\nimport { EditorView } from '@codemirror/view'\nimport type { StyleSpec } from 'style-mod'\n\nexport type CreateThemeOptions = {\n  /**\n   * Theme inheritance. Determines which styles CodeMirror will apply by default.\n   */\n  theme: Theme\n  /**\n   * Settings to customize the look of the editor, like background, gutter, selection and others.\n   */\n  settings: Settings\n  /** Syntax highlighting styles. */\n  styles: TagStyle[]\n}\n\ntype Theme = 'light' | 'dark'\n\nexport type Settings = {\n  /** Editor background color. */\n  background?: string\n  /** Editor background image. */\n  backgroundImage?: string\n  /** Default text color. */\n  foreground?: string\n  /** Caret color. */\n  caret?: string\n  /** Selection background. */\n  selection?: string\n  /** Selection match background. */\n  selectionMatch?: string\n  /** Background of highlighted lines. */\n  lineHighlight?: string\n  /** Gutter background. */\n  gutterBackground?: string\n  /** Text color inside gutter. */\n  gutterForeground?: string\n  /** Text active color inside gutter. */\n  gutterActiveForeground?: string\n  /** Gutter right border color. */\n  gutterBorder?: string\n  /** set editor font */\n  fontFamily?: string\n  /** set editor font size */\n  fontSize?: StyleSpec['fontSize']\n}\n\n/**\n * Creates a CodeMirror theme from a set of options.\n */\nexport const createCodeMirrorTheme = ({ theme, settings = {}, styles = [] }: CreateThemeOptions): Extension => {\n  const themeOptions: Record<string, StyleSpec> = {\n    '.cm-gutters': {},\n  }\n  const baseStyle: StyleSpec = {}\n  if (settings.background) {\n    baseStyle.backgroundColor = settings.background\n  }\n  if (settings.backgroundImage) {\n    baseStyle.backgroundImage = settings.backgroundImage\n  }\n  if (settings.foreground) {\n    baseStyle.color = settings.foreground\n  }\n  if (settings.fontSize) {\n    baseStyle.fontSize = settings.fontSize\n  }\n  if (settings.background || settings.foreground) {\n    themeOptions['&'] = baseStyle\n  }\n\n  if (settings.fontFamily) {\n    themeOptions['&.cm-editor .cm-scroller'] = {\n      fontFamily: settings.fontFamily,\n    }\n  }\n  if (settings.gutterBackground) {\n    themeOptions['.cm-gutters'].backgroundColor = settings.gutterBackground\n  }\n  if (settings.gutterForeground) {\n    themeOptions['.cm-gutters'].color = settings.gutterForeground\n  }\n  if (settings.gutterBorder) {\n    themeOptions['.cm-gutters'].borderRightColor = settings.gutterBorder\n  }\n\n  if (settings.caret) {\n    themeOptions['.cm-content'] = {\n      caretColor: settings.caret,\n    }\n    themeOptions['.cm-cursor, .cm-dropCursor'] = {\n      borderLeftColor: settings.caret,\n    }\n  }\n  const activeLineGutterStyle: StyleSpec = {}\n  if (settings.gutterActiveForeground) {\n    activeLineGutterStyle.color = settings.gutterActiveForeground\n  }\n  if (settings.lineHighlight) {\n    themeOptions['.cm-activeLine'] = {\n      backgroundColor: settings.lineHighlight,\n    }\n    activeLineGutterStyle.backgroundColor = settings.lineHighlight\n  }\n  themeOptions['.cm-activeLineGutter'] = activeLineGutterStyle\n\n  if (settings.selection) {\n    themeOptions[\n      '&.cm-focused .cm-selectionBackground, & .cm-line::selection, & .cm-selectionLayer .cm-selectionBackground, .cm-content ::selection'\n    ] = {\n      background: settings.selection + ' !important',\n    }\n  }\n  if (settings.selectionMatch) {\n    themeOptions['& .cm-selectionMatch'] = {\n      backgroundColor: settings.selectionMatch,\n    }\n  }\n  const themeExtension = EditorView.theme(themeOptions, {\n    dark: theme === 'dark',\n  })\n\n  const highlightStyle = HighlightStyle.define(styles)\n  const extension = [themeExtension, syntaxHighlighting(highlightStyle)]\n\n  return extension\n}\n"],
-  "mappings": "AAOA,SAAS,gBAA+B,0BAA0B;AAElE,SAAS,kBAAkB;AAkDpB,MAAM,wBAAwB,CAAC,EAAE,OAAO,WAAW,CAAC,GAAG,SAAS,CAAC,EAAE,MAAqC;AAC7G,QAAM,eAA0C;AAAA,IAC9C,eAAe,CAAC;AAAA,EAClB;AACA,QAAM,YAAuB,CAAC;AAC9B,MAAI,SAAS,YAAY;AACvB,cAAU,kBAAkB,SAAS;AAAA,EACvC;AACA,MAAI,SAAS,iBAAiB;AAC5B,cAAU,kBAAkB,SAAS;AAAA,EACvC;AACA,MAAI,SAAS,YAAY;AACvB,cAAU,QAAQ,SAAS;AAAA,EAC7B;AACA,MAAI,SAAS,UAAU;AACrB,cAAU,WAAW,SAAS;AAAA,EAChC;AACA,MAAI,SAAS,cAAc,SAAS,YAAY;AAC9C,iBAAa,GAAG,IAAI;AAAA,EACtB;AAEA,MAAI,SAAS,YAAY;AACvB,iBAAa,0BAA0B,IAAI;AAAA,MACzC,YAAY,SAAS;AAAA,IACvB;AAAA,EACF;AACA,MAAI,SAAS,kBAAkB;AAC7B,iBAAa,aAAa,EAAE,kBAAkB,SAAS;AAAA,EACzD;AACA,MAAI,SAAS,kBAAkB;AAC7B,iBAAa,aAAa,EAAE,QAAQ,SAAS;AAAA,EAC/C;AACA,MAAI,SAAS,cAAc;AACzB,iBAAa,aAAa,EAAE,mBAAmB,SAAS;AAAA,EAC1D;AAEA,MAAI,SAAS,OAAO;AAClB,iBAAa,aAAa,IAAI;AAAA,MAC5B,YAAY,SAAS;AAAA,IACvB;AACA,iBAAa,4BAA4B,IAAI;AAAA,MAC3C,iBAAiB,SAAS;AAAA,IAC5B;AAAA,EACF;AACA,QAAM,wBAAmC,CAAC;AAC1C,MAAI,SAAS,wBAAwB;AACnC,0BAAsB,QAAQ,SAAS;AAAA,EACzC;AACA,MAAI,SAAS,eAAe;AAC1B,iBAAa,gBAAgB,IAAI;AAAA,MAC/B,iBAAiB,SAAS;AAAA,IAC5B;AACA,0BAAsB,kBAAkB,SAAS;AAAA,EACnD;AACA,eAAa,sBAAsB,IAAI;AAEvC,MAAI,SAAS,WAAW;AACtB,iBACE,oIACF,IAAI;AAAA,MACF,YAAY,SAAS,YAAY;AAAA,IACnC;AAAA,EACF;AACA,MAAI,SAAS,gBAAgB;AAC3B,iBAAa,sBAAsB,IAAI;AAAA,MACrC,iBAAiB,SAAS;AAAA,IAC5B;AAAA,EACF;AACA,QAAM,iBAAiB,WAAW,MAAM,cAAc;AAAA,IACpD,MAAM,UAAU;AAAA,EAClB,CAAC;AAED,QAAM,iBAAiB,eAAe,OAAO,MAAM;AACnD,QAAM,YAAY,CAAC,gBAAgB,mBAAmB,cAAc,CAAC;AAErE,SAAO;AACT;",
+  "sourcesContent": ["/**\n * This file is copied from @uiw/codemirror-themes.\n * We\u2019ve had issues with the import (something to do with CJS/ESM).\n *\n * @see https://github.com/uiwjs/react-codemirror\n * @see https://github.com/scalar/scalar/issues/4222\n */\nimport { HighlightStyle, type TagStyle, syntaxHighlighting } from '@codemirror/language'\nimport type { Extension } from '@codemirror/state'\nimport { EditorView } from '@codemirror/view'\n\ntype StyleSpec = {\n  [propOrSelector: string]: string | number | StyleSpec | null\n}\n\nexport type CreateThemeOptions = {\n  /**\n   * Theme inheritance. Determines which styles CodeMirror will apply by default.\n   */\n  theme: Theme\n  /**\n   * Settings to customize the look of the editor, like background, gutter, selection and others.\n   */\n  settings: Settings\n  /** Syntax highlighting styles. */\n  styles: TagStyle[]\n}\n\ntype Theme = 'light' | 'dark'\n\nexport type Settings = {\n  /** Editor background color. */\n  background?: string\n  /** Editor background image. */\n  backgroundImage?: string\n  /** Default text color. */\n  foreground?: string\n  /** Caret color. */\n  caret?: string\n  /** Selection background. */\n  selection?: string\n  /** Selection match background. */\n  selectionMatch?: string\n  /** Background of highlighted lines. */\n  lineHighlight?: string\n  /** Gutter background. */\n  gutterBackground?: string\n  /** Text color inside gutter. */\n  gutterForeground?: string\n  /** Text active color inside gutter. */\n  gutterActiveForeground?: string\n  /** Gutter right border color. */\n  gutterBorder?: string\n  /** set editor font */\n  fontFamily?: string\n  /** set editor font size */\n  fontSize?: StyleSpec['fontSize']\n}\n\n/**\n * Creates a CodeMirror theme from a set of options.\n */\nexport const createCodeMirrorTheme = ({ theme, settings = {}, styles = [] }: CreateThemeOptions): Extension => {\n  const themeOptions: Record<string, StyleSpec> = {\n    '.cm-gutters': {},\n  }\n  const baseStyle: StyleSpec = {}\n  if (settings.background) {\n    baseStyle.backgroundColor = settings.background\n  }\n  if (settings.backgroundImage) {\n    baseStyle.backgroundImage = settings.backgroundImage\n  }\n  if (settings.foreground) {\n    baseStyle.color = settings.foreground\n  }\n  if (settings.fontSize) {\n    baseStyle.fontSize = settings.fontSize\n  }\n  if (settings.background || settings.foreground) {\n    themeOptions['&'] = baseStyle\n  }\n\n  if (settings.fontFamily) {\n    themeOptions['&.cm-editor .cm-scroller'] = {\n      fontFamily: settings.fontFamily,\n    }\n  }\n  if (settings.gutterBackground) {\n    themeOptions['.cm-gutters'].backgroundColor = settings.gutterBackground\n  }\n  if (settings.gutterForeground) {\n    themeOptions['.cm-gutters'].color = settings.gutterForeground\n  }\n  if (settings.gutterBorder) {\n    themeOptions['.cm-gutters'].borderRightColor = settings.gutterBorder\n  }\n\n  if (settings.caret) {\n    themeOptions['.cm-content'] = {\n      caretColor: settings.caret,\n    }\n    themeOptions['.cm-cursor, .cm-dropCursor'] = {\n      borderLeftColor: settings.caret,\n    }\n  }\n  const activeLineGutterStyle: StyleSpec = {}\n  if (settings.gutterActiveForeground) {\n    activeLineGutterStyle.color = settings.gutterActiveForeground\n  }\n  if (settings.lineHighlight) {\n    themeOptions['.cm-activeLine'] = {\n      backgroundColor: settings.lineHighlight,\n    }\n    activeLineGutterStyle.backgroundColor = settings.lineHighlight\n  }\n  themeOptions['.cm-activeLineGutter'] = activeLineGutterStyle\n\n  if (settings.selection) {\n    themeOptions[\n      '&.cm-focused .cm-selectionBackground, & .cm-line::selection, & .cm-selectionLayer .cm-selectionBackground, .cm-content ::selection'\n    ] = {\n      background: settings.selection + ' !important',\n    }\n  }\n  if (settings.selectionMatch) {\n    themeOptions['& .cm-selectionMatch'] = {\n      backgroundColor: settings.selectionMatch,\n    }\n  }\n  const themeExtension = EditorView.theme(themeOptions, {\n    dark: theme === 'dark',\n  })\n\n  const highlightStyle = HighlightStyle.define(styles)\n  const extension = [themeExtension, syntaxHighlighting(highlightStyle)]\n\n  return extension\n}\n"],
+  "mappings": "AAOA,SAAS,gBAA+B,0BAA0B;AAElE,SAAS,kBAAkB;AAqDpB,MAAM,wBAAwB,CAAC,EAAE,OAAO,WAAW,CAAC,GAAG,SAAS,CAAC,EAAE,MAAqC;AAC7G,QAAM,eAA0C;AAAA,IAC9C,eAAe,CAAC;AAAA,EAClB;AACA,QAAM,YAAuB,CAAC;AAC9B,MAAI,SAAS,YAAY;AACvB,cAAU,kBAAkB,SAAS;AAAA,EACvC;AACA,MAAI,SAAS,iBAAiB;AAC5B,cAAU,kBAAkB,SAAS;AAAA,EACvC;AACA,MAAI,SAAS,YAAY;AACvB,cAAU,QAAQ,SAAS;AAAA,EAC7B;AACA,MAAI,SAAS,UAAU;AACrB,cAAU,WAAW,SAAS;AAAA,EAChC;AACA,MAAI,SAAS,cAAc,SAAS,YAAY;AAC9C,iBAAa,GAAG,IAAI;AAAA,EACtB;AAEA,MAAI,SAAS,YAAY;AACvB,iBAAa,0BAA0B,IAAI;AAAA,MACzC,YAAY,SAAS;AAAA,IACvB;AAAA,EACF;AACA,MAAI,SAAS,kBAAkB;AAC7B,iBAAa,aAAa,EAAE,kBAAkB,SAAS;AAAA,EACzD;AACA,MAAI,SAAS,kBAAkB;AAC7B,iBAAa,aAAa,EAAE,QAAQ,SAAS;AAAA,EAC/C;AACA,MAAI,SAAS,cAAc;AACzB,iBAAa,aAAa,EAAE,mBAAmB,SAAS;AAAA,EAC1D;AAEA,MAAI,SAAS,OAAO;AAClB,iBAAa,aAAa,IAAI;AAAA,MAC5B,YAAY,SAAS;AAAA,IACvB;AACA,iBAAa,4BAA4B,IAAI;AAAA,MAC3C,iBAAiB,SAAS;AAAA,IAC5B;AAAA,EACF;AACA,QAAM,wBAAmC,CAAC;AAC1C,MAAI,SAAS,wBAAwB;AACnC,0BAAsB,QAAQ,SAAS;AAAA,EACzC;AACA,MAAI,SAAS,eAAe;AAC1B,iBAAa,gBAAgB,IAAI;AAAA,MAC/B,iBAAiB,SAAS;AAAA,IAC5B;AACA,0BAAsB,kBAAkB,SAAS;AAAA,EACnD;AACA,eAAa,sBAAsB,IAAI;AAEvC,MAAI,SAAS,WAAW;AACtB,iBACE,oIACF,IAAI;AAAA,MACF,YAAY,SAAS,YAAY;AAAA,IACnC;AAAA,EACF;AACA,MAAI,SAAS,gBAAgB;AAC3B,iBAAa,sBAAsB,IAAI;AAAA,MACrC,iBAAiB,SAAS;AAAA,IAC5B;AAAA,EACF;AACA,QAAM,iBAAiB,WAAW,MAAM,cAAc;AAAA,IACpD,MAAM,UAAU;AAAA,EAClB,CAAC;AAED,QAAM,iBAAiB,eAAe,OAAO,MAAM;AACnD,QAAM,YAAY,CAAC,gBAAgB,mBAAmB,cAAc,CAAC;AAErE,SAAO;AACT;",
   "names": []
 }

package/package.json

@@ -16,7 +16,7 @@
     "vue",
     "vue3"
   ],
-  "version": "0.12.1",
+  "version": "0.12.3",
   "engines": {
     "node": ">=20"
   },
@@ -58,12 +58,10 @@
     "@codemirror/view": "^6.35.3",
     "@lezer/common": "^1.2.3",
     "@lezer/highlight": "^1.2.1",
-    "@lezer/lr": "^1.4.2",
     "@replit/codemirror-css-color-picker": "^6.3.0",
     "codemirror": "^6.0.0",
-    "style-mod": "^4.1.2",
     "vue": "^3.5.12",
-    "@scalar/components": "0.14.1"
+    "@scalar/components": "0.14.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",