@uiw/codemirror-themes 4.14.3 → 4.15.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +2 -0
  2. package/cjs/index.d.ts +2 -0
  3. package/cjs/index.js +5 -0
  4. package/cjs/index.js.map +3 -2
  5. package/esm/index.d.ts +2 -0
  6. package/esm/index.js +5 -0
  7. package/esm/index.js.map +3 -2
  8. package/package.json +1 -1
  9. package/src/index.tsx +7 -0
package/README.md CHANGED
@@ -251,6 +251,8 @@ export interface Settings {
251
251
  gutterActiveForeground?: string;
252
252
  /** Gutter right border color. */
253
253
  gutterBorder?: string;
254
+ /** set editor font */
255
+ fontFamily?: string;
254
256
  }
255
257
  declare const createTheme: ({ dark, settings, styles }: CreateThemeOptions) => Extension;
256
258
  export default createTheme;
package/cjs/index.d.ts CHANGED
@@ -34,6 +34,8 @@ export interface Settings {
34
34
  gutterActiveForeground?: string;
35
35
  /** Gutter right border color. */
36
36
  gutterBorder?: string;
37
+ /** set editor font */
38
+ fontFamily?: string;
37
39
  }
38
40
  export declare const createTheme: ({ theme, settings, styles }: CreateThemeOptions) => Extension;
39
41
  export default createTheme;
package/cjs/index.js CHANGED
@@ -17,6 +17,11 @@ var createTheme = function createTheme(_ref) {
17
17
  },
18
18
  '.cm-gutters': {}
19
19
  };
20
+ if (settings.fontFamily) {
21
+ themeOptions['&.cm-editor .cm-scroller'] = {
22
+ fontFamily: settings.fontFamily
23
+ };
24
+ }
20
25
  if (settings.gutterBackground) {
21
26
  themeOptions['.cm-gutters'].backgroundColor = settings.gutterBackground;
22
27
  }
package/cjs/index.js.map CHANGED
@@ -10,6 +10,7 @@
10
10
  "background",
11
11
  "color",
12
12
  "foreground",
13
+ "fontFamily",
13
14
  "gutterBackground",
14
15
  "gutterForeground",
15
16
  "gutterBorder",
@@ -35,7 +36,7 @@
35
36
  "../src/index.tsx"
36
37
  ],
37
38
  "sourcesContent": [
38
- "import { EditorView } from '@codemirror/view';\nimport { Extension } from '@codemirror/state';\nimport { HighlightStyle, TagStyle, syntaxHighlighting } from '@codemirror/language';\nimport { StyleSpec } from 'style-mod';\n\nexport interface 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 interface Settings {\n /** Editor background. */\n background: 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}\n\nexport const createTheme = ({ theme, settings, styles }: CreateThemeOptions): Extension => {\n const themeOptions: Record<string, StyleSpec> = {\n '&': {\n backgroundColor: settings.background,\n color: settings.foreground,\n },\n '.cm-gutters': {},\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 let 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-selectionLayer .cm-selectionBackground, .cm-content ::selection'\n ] = {\n backgroundColor: settings.selection,\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\nexport default createTheme;\n"
39
+ "import { EditorView } from '@codemirror/view';\nimport { Extension } from '@codemirror/state';\nimport { HighlightStyle, TagStyle, syntaxHighlighting } from '@codemirror/language';\nimport { StyleSpec } from 'style-mod';\n\nexport interface 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 interface Settings {\n /** Editor background. */\n background: 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}\n\nexport const createTheme = ({ theme, settings, styles }: CreateThemeOptions): Extension => {\n const themeOptions: Record<string, StyleSpec> = {\n '&': {\n backgroundColor: settings.background,\n color: settings.foreground,\n },\n '.cm-gutters': {},\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 let 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-selectionLayer .cm-selectionBackground, .cm-content ::selection'\n ] = {\n backgroundColor: settings.selection,\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\nexport default createTheme;\n"
39
40
  ],
40
- "mappings": ";;;;;;AAAA;AAEA;AAyCO,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAAmE;EAAA,IAA7DC,KAAK,QAALA,KAAK;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,MAAM,QAANA,MAAM;EACnD,IAAMC,YAAuC,GAAG;IAC9C,GAAG,EAAE;MACHC,eAAe,EAAEH,QAAQ,CAACI,UAAU;MACpCC,KAAK,EAAEL,QAAQ,CAACM;IAClB,CAAC;IACD,aAAa,EAAE,CAAC;EAClB,CAAC;EAED,IAAIN,QAAQ,CAACO,gBAAgB,EAAE;IAC7BL,YAAY,CAAC,aAAa,CAAC,CAACC,eAAe,GAAGH,QAAQ,CAACO,gBAAgB;EACzE;EACA,IAAIP,QAAQ,CAACQ,gBAAgB,EAAE;IAC7BN,YAAY,CAAC,aAAa,CAAC,CAACG,KAAK,GAAGL,QAAQ,CAACQ,gBAAgB;EAC/D;EACA,IAAIR,QAAQ,CAACS,YAAY,EAAE;IACzBP,YAAY,CAAC,aAAa,CAAC,CAACQ,gBAAgB,GAAGV,QAAQ,CAACS,YAAY;EACtE;EAEA,IAAIT,QAAQ,CAACW,KAAK,EAAE;IAClBT,YAAY,CAAC,aAAa,CAAC,GAAG;MAC5BU,UAAU,EAAEZ,QAAQ,CAACW;IACvB,CAAC;IACDT,YAAY,CAAC,4BAA4B,CAAC,GAAG;MAC3CW,eAAe,EAAEb,QAAQ,CAACW;IAC5B,CAAC;EACH;EACA,IAAIG,qBAAgC,GAAG,CAAC,CAAC;EACzC,IAAId,QAAQ,CAACe,sBAAsB,EAAE;IACnCD,qBAAqB,CAACT,KAAK,GAAGL,QAAQ,CAACe,sBAAsB;EAC/D;EACA,IAAIf,QAAQ,CAACgB,aAAa,EAAE;IAC1Bd,YAAY,CAAC,gBAAgB,CAAC,GAAG;MAC/BC,eAAe,EAAEH,QAAQ,CAACgB;IAC5B,CAAC;IACDF,qBAAqB,CAACX,eAAe,GAAGH,QAAQ,CAACgB,aAAa;EAChE;EACAd,YAAY,CAAC,sBAAsB,CAAC,GAAGY,qBAAqB;EAE5D,IAAId,QAAQ,CAACiB,SAAS,EAAE;IACtBf,YAAY,CACV,6GAA6G,CAC9G,GAAG;MACFC,eAAe,EAAEH,QAAQ,CAACiB;IAC5B,CAAC;EACH;EACA,IAAIjB,QAAQ,CAACkB,cAAc,EAAE;IAC3BhB,YAAY,CAAC,sBAAsB,CAAC,GAAG;MACrCC,eAAe,EAAEH,QAAQ,CAACkB;IAC5B,CAAC;EACH;EACA,IAAMC,cAAc,GAAGC,gBAAU,CAACrB,KAAK,CAACG,YAAY,EAAE;IACpDmB,IAAI,EAAEtB,KAAK,KAAK;EAClB,CAAC,CAAC;EAEF,IAAMuB,cAAc,GAAGC,wBAAc,CAACC,MAAM,CAACvB,MAAM,CAAC;EACpD,IAAMwB,SAAS,GAAG,CAACN,cAAc,EAAE,IAAAO,4BAAkB,EAACJ,cAAc,CAAC,CAAC;EAEtE,OAAOG,SAAS;AAClB,CAAC;AAAC;AAAA,eAEa3B,WAAW;AAAA"
41
+ "mappings": ";;;;;;AAAA;AAEA;AA2CO,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAAmE;EAAA,IAA7DC,KAAK,QAALA,KAAK;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,MAAM,QAANA,MAAM;EACnD,IAAMC,YAAuC,GAAG;IAC9C,GAAG,EAAE;MACHC,eAAe,EAAEH,QAAQ,CAACI,UAAU;MACpCC,KAAK,EAAEL,QAAQ,CAACM;IAClB,CAAC;IACD,aAAa,EAAE,CAAC;EAClB,CAAC;EAED,IAAIN,QAAQ,CAACO,UAAU,EAAE;IACvBL,YAAY,CAAC,0BAA0B,CAAC,GAAG;MACzCK,UAAU,EAAEP,QAAQ,CAACO;IACvB,CAAC;EACH;EACA,IAAIP,QAAQ,CAACQ,gBAAgB,EAAE;IAC7BN,YAAY,CAAC,aAAa,CAAC,CAACC,eAAe,GAAGH,QAAQ,CAACQ,gBAAgB;EACzE;EACA,IAAIR,QAAQ,CAACS,gBAAgB,EAAE;IAC7BP,YAAY,CAAC,aAAa,CAAC,CAACG,KAAK,GAAGL,QAAQ,CAACS,gBAAgB;EAC/D;EACA,IAAIT,QAAQ,CAACU,YAAY,EAAE;IACzBR,YAAY,CAAC,aAAa,CAAC,CAACS,gBAAgB,GAAGX,QAAQ,CAACU,YAAY;EACtE;EAEA,IAAIV,QAAQ,CAACY,KAAK,EAAE;IAClBV,YAAY,CAAC,aAAa,CAAC,GAAG;MAC5BW,UAAU,EAAEb,QAAQ,CAACY;IACvB,CAAC;IACDV,YAAY,CAAC,4BAA4B,CAAC,GAAG;MAC3CY,eAAe,EAAEd,QAAQ,CAACY;IAC5B,CAAC;EACH;EACA,IAAIG,qBAAgC,GAAG,CAAC,CAAC;EACzC,IAAIf,QAAQ,CAACgB,sBAAsB,EAAE;IACnCD,qBAAqB,CAACV,KAAK,GAAGL,QAAQ,CAACgB,sBAAsB;EAC/D;EACA,IAAIhB,QAAQ,CAACiB,aAAa,EAAE;IAC1Bf,YAAY,CAAC,gBAAgB,CAAC,GAAG;MAC/BC,eAAe,EAAEH,QAAQ,CAACiB;IAC5B,CAAC;IACDF,qBAAqB,CAACZ,eAAe,GAAGH,QAAQ,CAACiB,aAAa;EAChE;EACAf,YAAY,CAAC,sBAAsB,CAAC,GAAGa,qBAAqB;EAE5D,IAAIf,QAAQ,CAACkB,SAAS,EAAE;IACtBhB,YAAY,CACV,6GAA6G,CAC9G,GAAG;MACFC,eAAe,EAAEH,QAAQ,CAACkB;IAC5B,CAAC;EACH;EACA,IAAIlB,QAAQ,CAACmB,cAAc,EAAE;IAC3BjB,YAAY,CAAC,sBAAsB,CAAC,GAAG;MACrCC,eAAe,EAAEH,QAAQ,CAACmB;IAC5B,CAAC;EACH;EACA,IAAMC,cAAc,GAAGC,gBAAU,CAACtB,KAAK,CAACG,YAAY,EAAE;IACpDoB,IAAI,EAAEvB,KAAK,KAAK;EAClB,CAAC,CAAC;EAEF,IAAMwB,cAAc,GAAGC,wBAAc,CAACC,MAAM,CAACxB,MAAM,CAAC;EACpD,IAAMyB,SAAS,GAAG,CAACN,cAAc,EAAE,IAAAO,4BAAkB,EAACJ,cAAc,CAAC,CAAC;EAEtE,OAAOG,SAAS;AAClB,CAAC;AAAC;AAAA,eAEa5B,WAAW;AAAA"
41
42
  }
package/esm/index.d.ts CHANGED
@@ -34,6 +34,8 @@ export interface Settings {
34
34
  gutterActiveForeground?: string;
35
35
  /** Gutter right border color. */
36
36
  gutterBorder?: string;
37
+ /** set editor font */
38
+ fontFamily?: string;
37
39
  }
38
40
  export declare const createTheme: ({ theme, settings, styles }: CreateThemeOptions) => Extension;
39
41
  export default createTheme;
package/esm/index.js CHANGED
@@ -13,6 +13,11 @@ export var createTheme = _ref => {
13
13
  },
14
14
  '.cm-gutters': {}
15
15
  };
16
+ if (settings.fontFamily) {
17
+ themeOptions['&.cm-editor .cm-scroller'] = {
18
+ fontFamily: settings.fontFamily
19
+ };
20
+ }
16
21
  if (settings.gutterBackground) {
17
22
  themeOptions['.cm-gutters'].backgroundColor = settings.gutterBackground;
18
23
  }
package/esm/index.js.map CHANGED
@@ -13,6 +13,7 @@
13
13
  "background",
14
14
  "color",
15
15
  "foreground",
16
+ "fontFamily",
16
17
  "gutterBackground",
17
18
  "gutterForeground",
18
19
  "gutterBorder",
@@ -35,7 +36,7 @@
35
36
  "../src/index.tsx"
36
37
  ],
37
38
  "sourcesContent": [
38
- "import { EditorView } from '@codemirror/view';\nimport { Extension } from '@codemirror/state';\nimport { HighlightStyle, TagStyle, syntaxHighlighting } from '@codemirror/language';\nimport { StyleSpec } from 'style-mod';\n\nexport interface 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 interface Settings {\n /** Editor background. */\n background: 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}\n\nexport const createTheme = ({ theme, settings, styles }: CreateThemeOptions): Extension => {\n const themeOptions: Record<string, StyleSpec> = {\n '&': {\n backgroundColor: settings.background,\n color: settings.foreground,\n },\n '.cm-gutters': {},\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 let 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-selectionLayer .cm-selectionBackground, .cm-content ::selection'\n ] = {\n backgroundColor: settings.selection,\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\nexport default createTheme;\n"
39
+ "import { EditorView } from '@codemirror/view';\nimport { Extension } from '@codemirror/state';\nimport { HighlightStyle, TagStyle, syntaxHighlighting } from '@codemirror/language';\nimport { StyleSpec } from 'style-mod';\n\nexport interface 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 interface Settings {\n /** Editor background. */\n background: 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}\n\nexport const createTheme = ({ theme, settings, styles }: CreateThemeOptions): Extension => {\n const themeOptions: Record<string, StyleSpec> = {\n '&': {\n backgroundColor: settings.background,\n color: settings.foreground,\n },\n '.cm-gutters': {},\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 let 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-selectionLayer .cm-selectionBackground, .cm-content ::selection'\n ] = {\n backgroundColor: settings.selection,\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\nexport default createTheme;\n"
39
40
  ],
40
- "mappings": "AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,cAAc,EAAYC,kBAAkB,QAAQ,sBAAsB;AAyCnF,OAAO,IAAMC,WAAW,GAAG,QAAgE;EAAA,IAA/D;IAAEC,KAAK;IAAEC,QAAQ;IAAEC;EAA2B,CAAC;EACzE,IAAMC,YAAuC,GAAG;IAC9C,GAAG,EAAE;MACHC,eAAe,EAAEH,QAAQ,CAACI,UAAU;MACpCC,KAAK,EAAEL,QAAQ,CAACM;IAClB,CAAC;IACD,aAAa,EAAE,CAAC;EAClB,CAAC;EAED,IAAIN,QAAQ,CAACO,gBAAgB,EAAE;IAC7BL,YAAY,CAAC,aAAa,CAAC,CAACC,eAAe,GAAGH,QAAQ,CAACO,gBAAgB;EACzE;EACA,IAAIP,QAAQ,CAACQ,gBAAgB,EAAE;IAC7BN,YAAY,CAAC,aAAa,CAAC,CAACG,KAAK,GAAGL,QAAQ,CAACQ,gBAAgB;EAC/D;EACA,IAAIR,QAAQ,CAACS,YAAY,EAAE;IACzBP,YAAY,CAAC,aAAa,CAAC,CAACQ,gBAAgB,GAAGV,QAAQ,CAACS,YAAY;EACtE;EAEA,IAAIT,QAAQ,CAACW,KAAK,EAAE;IAClBT,YAAY,CAAC,aAAa,CAAC,GAAG;MAC5BU,UAAU,EAAEZ,QAAQ,CAACW;IACvB,CAAC;IACDT,YAAY,CAAC,4BAA4B,CAAC,GAAG;MAC3CW,eAAe,EAAEb,QAAQ,CAACW;IAC5B,CAAC;EACH;EACA,IAAIG,qBAAgC,GAAG,CAAC,CAAC;EACzC,IAAId,QAAQ,CAACe,sBAAsB,EAAE;IACnCD,qBAAqB,CAACT,KAAK,GAAGL,QAAQ,CAACe,sBAAsB;EAC/D;EACA,IAAIf,QAAQ,CAACgB,aAAa,EAAE;IAC1Bd,YAAY,CAAC,gBAAgB,CAAC,GAAG;MAC/BC,eAAe,EAAEH,QAAQ,CAACgB;IAC5B,CAAC;IACDF,qBAAqB,CAACX,eAAe,GAAGH,QAAQ,CAACgB,aAAa;EAChE;EACAd,YAAY,CAAC,sBAAsB,CAAC,GAAGY,qBAAqB;EAE5D,IAAId,QAAQ,CAACiB,SAAS,EAAE;IACtBf,YAAY,CACV,6GAA6G,CAC9G,GAAG;MACFC,eAAe,EAAEH,QAAQ,CAACiB;IAC5B,CAAC;EACH;EACA,IAAIjB,QAAQ,CAACkB,cAAc,EAAE;IAC3BhB,YAAY,CAAC,sBAAsB,CAAC,GAAG;MACrCC,eAAe,EAAEH,QAAQ,CAACkB;IAC5B,CAAC;EACH;EACA,IAAMC,cAAc,GAAGxB,UAAU,CAACI,KAAK,CAACG,YAAY,EAAE;IACpDkB,IAAI,EAAErB,KAAK,KAAK;EAClB,CAAC,CAAC;EAEF,IAAMsB,cAAc,GAAGzB,cAAc,CAAC0B,MAAM,CAACrB,MAAM,CAAC;EACpD,IAAMsB,SAAS,GAAG,CAACJ,cAAc,EAAEtB,kBAAkB,CAACwB,cAAc,CAAC,CAAC;EAEtE,OAAOE,SAAS;AAClB,CAAC;AAED,eAAezB,WAAW"
41
+ "mappings": "AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,cAAc,EAAYC,kBAAkB,QAAQ,sBAAsB;AA2CnF,OAAO,IAAMC,WAAW,GAAG,QAAgE;EAAA,IAA/D;IAAEC,KAAK;IAAEC,QAAQ;IAAEC;EAA2B,CAAC;EACzE,IAAMC,YAAuC,GAAG;IAC9C,GAAG,EAAE;MACHC,eAAe,EAAEH,QAAQ,CAACI,UAAU;MACpCC,KAAK,EAAEL,QAAQ,CAACM;IAClB,CAAC;IACD,aAAa,EAAE,CAAC;EAClB,CAAC;EAED,IAAIN,QAAQ,CAACO,UAAU,EAAE;IACvBL,YAAY,CAAC,0BAA0B,CAAC,GAAG;MACzCK,UAAU,EAAEP,QAAQ,CAACO;IACvB,CAAC;EACH;EACA,IAAIP,QAAQ,CAACQ,gBAAgB,EAAE;IAC7BN,YAAY,CAAC,aAAa,CAAC,CAACC,eAAe,GAAGH,QAAQ,CAACQ,gBAAgB;EACzE;EACA,IAAIR,QAAQ,CAACS,gBAAgB,EAAE;IAC7BP,YAAY,CAAC,aAAa,CAAC,CAACG,KAAK,GAAGL,QAAQ,CAACS,gBAAgB;EAC/D;EACA,IAAIT,QAAQ,CAACU,YAAY,EAAE;IACzBR,YAAY,CAAC,aAAa,CAAC,CAACS,gBAAgB,GAAGX,QAAQ,CAACU,YAAY;EACtE;EAEA,IAAIV,QAAQ,CAACY,KAAK,EAAE;IAClBV,YAAY,CAAC,aAAa,CAAC,GAAG;MAC5BW,UAAU,EAAEb,QAAQ,CAACY;IACvB,CAAC;IACDV,YAAY,CAAC,4BAA4B,CAAC,GAAG;MAC3CY,eAAe,EAAEd,QAAQ,CAACY;IAC5B,CAAC;EACH;EACA,IAAIG,qBAAgC,GAAG,CAAC,CAAC;EACzC,IAAIf,QAAQ,CAACgB,sBAAsB,EAAE;IACnCD,qBAAqB,CAACV,KAAK,GAAGL,QAAQ,CAACgB,sBAAsB;EAC/D;EACA,IAAIhB,QAAQ,CAACiB,aAAa,EAAE;IAC1Bf,YAAY,CAAC,gBAAgB,CAAC,GAAG;MAC/BC,eAAe,EAAEH,QAAQ,CAACiB;IAC5B,CAAC;IACDF,qBAAqB,CAACZ,eAAe,GAAGH,QAAQ,CAACiB,aAAa;EAChE;EACAf,YAAY,CAAC,sBAAsB,CAAC,GAAGa,qBAAqB;EAE5D,IAAIf,QAAQ,CAACkB,SAAS,EAAE;IACtBhB,YAAY,CACV,6GAA6G,CAC9G,GAAG;MACFC,eAAe,EAAEH,QAAQ,CAACkB;IAC5B,CAAC;EACH;EACA,IAAIlB,QAAQ,CAACmB,cAAc,EAAE;IAC3BjB,YAAY,CAAC,sBAAsB,CAAC,GAAG;MACrCC,eAAe,EAAEH,QAAQ,CAACmB;IAC5B,CAAC;EACH;EACA,IAAMC,cAAc,GAAGzB,UAAU,CAACI,KAAK,CAACG,YAAY,EAAE;IACpDmB,IAAI,EAAEtB,KAAK,KAAK;EAClB,CAAC,CAAC;EAEF,IAAMuB,cAAc,GAAG1B,cAAc,CAAC2B,MAAM,CAACtB,MAAM,CAAC;EACpD,IAAMuB,SAAS,GAAG,CAACJ,cAAc,EAAEvB,kBAAkB,CAACyB,cAAc,CAAC,CAAC;EAEtE,OAAOE,SAAS;AAClB,CAAC;AAED,eAAe1B,WAAW"
41
42
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uiw/codemirror-themes",
3
- "version": "4.14.3",
3
+ "version": "4.15.1",
4
4
  "description": "Themes for CodeMirror.",
5
5
  "homepage": "https://uiwjs.github.io/react-codemirror/#/theme/doc",
6
6
  "author": "kenny wong <wowohoo@qq.com>",
package/src/index.tsx CHANGED
@@ -39,6 +39,8 @@ export interface Settings {
39
39
  gutterActiveForeground?: string;
40
40
  /** Gutter right border color. */
41
41
  gutterBorder?: string;
42
+ /** set editor font */
43
+ fontFamily?: string;
42
44
  }
43
45
 
44
46
  export const createTheme = ({ theme, settings, styles }: CreateThemeOptions): Extension => {
@@ -50,6 +52,11 @@ export const createTheme = ({ theme, settings, styles }: CreateThemeOptions): Ex
50
52
  '.cm-gutters': {},
51
53
  };
52
54
 
55
+ if (settings.fontFamily) {
56
+ themeOptions['&.cm-editor .cm-scroller'] = {
57
+ fontFamily: settings.fontFamily,
58
+ };
59
+ }
53
60
  if (settings.gutterBackground) {
54
61
  themeOptions['.cm-gutters'].backgroundColor = settings.gutterBackground;
55
62
  }