@scalar/use-codemirror 0.4.0 → 0.5.0

package/dist/style.css

@@ -0,0 +1,37 @@
+
+/** Basics */
+.scalar-api-client__codemirror__wrapper {
+  width: 100%;
+  display: flex;
+  align-items: stretch;
+}
+.scalar-api-client__codemirror {
+  flex-grow: 1;
+  max-width: 100%;
+
+  font-size: var(--theme-small);
+}
+
+/* .scalar-api-client__codemirror.ͼw {
+  background-color: var(--theme-background-1);
+}
+
+.scalar-api-client__codemirror--read-only.ͼw {
+  background-color: var(--theme-background-2);
+} */
+
+/** URL input */
+.scalar-api-client__url-input {
+  font-weight: var(--theme-semibold);
+}
+
+/* .scalar-api-client__url-input .cm-scroller {
+  padding-left: 6px;
+}
+
+.scalar-api-client__url-input .ͼ1 .cm-scroller {
+  align-items: center !important;
+} */
+.scalar-api-client__variable {
+  color: var(--scalar-api-client-color);
+}

package/dist/themes/index.d.ts

@@ -0,0 +1,3 @@
+export declare const lightTheme: import("@codemirror/state").Extension;
+export declare const darkTheme: import("@codemirror/state").Extension;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/themes/index.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,UAAU,uCAqCrB,CAAA;AAEF,eAAO,MAAM,SAAS,uCAkCpB,CAAA"}

package/package.json

@@ -1,7 +1,23 @@
 {
   "name": "@scalar/use-codemirror",
-  "version": "0.4.0",
-  "author": "Scalar",
+  "description": "CodeMirror for Vue",
+  "keywords": [
+    "vue",
+    "vue3",
+    "composable",
+    "codemirror"
+  ],
+  "version": "0.5.0",
+  "author": "Scalar (https://github.com/scalar)",
+  "homepage": "https://github.com/scalar/scalar",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/scalar/scalar.git",
+    "directory": "packages/use-codemirror"
+  },
+  "bugs": {
+    "url": "https://github.com/scalar/scalar/issues/new"
+  },
   "license": "MIT",
   "engines": {
     "node": ">=18"
@@ -18,14 +34,20 @@
     "import": "./dist/index.js"
   },
   "dependencies": {
-    "@codemirror/lang-javascript": "6.1.9",
+    "@codemirror/lang-java": "^6.0.1",
+    "@codemirror/lang-javascript": "6.2.1",
     "@codemirror/lang-json": "6.0.1",
+    "@codemirror/lang-python": "6.1.3",
+    "@codemirror/language": "6.9.0",
+    "@codemirror/legacy-modes": "6.3.3",
     "@codemirror/state": "6.2.1",
-    "@codemirror/view": "6.16.0",
+    "@codemirror/view": "6.18.0",
     "@headlessui/vue": "1.7.14",
+    "@lezer/common": "1.0.3",
+    "@lezer/lr": "1.3.10",
     "@lezer/highlight": "1.1.6",
-    "@uiw/codemirror-theme-duotone": "4.21.3",
-    "@uiw/codemirror-themes": "4.21.3",
+    "@uiw/codemirror-theme-duotone": "4.21.13",
+    "@uiw/codemirror-themes": "4.21.13",
     "@vueuse/core": "10.1.2",
     "axios": "1.4.0",
     "codemirror": "6.0.1",

package/src/components/CodeMirror/CodeMirror.vue

@@ -0,0 +1,249 @@
+<script lang="ts" setup>
+import { java } from '@codemirror/lang-java'
+import { javascript } from '@codemirror/lang-javascript'
+import { json } from '@codemirror/lang-json'
+import { python } from '@codemirror/lang-python'
+import { type LanguageSupport, StreamLanguage } from '@codemirror/language'
+import {
+  c,
+  csharp,
+  kotlin,
+  objectiveC,
+} from '@codemirror/legacy-modes/mode/clike'
+import { clojure } from '@codemirror/legacy-modes/mode/clojure'
+import { go } from '@codemirror/legacy-modes/mode/go'
+import { http } from '@codemirror/legacy-modes/mode/http'
+import { oCaml } from '@codemirror/legacy-modes/mode/mllike'
+import { powerShell } from '@codemirror/legacy-modes/mode/powershell'
+import { r } from '@codemirror/legacy-modes/mode/r'
+import { ruby } from '@codemirror/legacy-modes/mode/ruby'
+import { shell } from '@codemirror/legacy-modes/mode/shell'
+import { swift } from '@codemirror/legacy-modes/mode/swift'
+import { type Extension } from '@codemirror/state'
+import {
+  EditorView,
+  type ViewUpdate,
+  keymap,
+  lineNumbers as lineNumbersExtension,
+} from '@codemirror/view'
+import { watch } from 'vue'
+
+import { useCodeMirror } from '../../hooks'
+import { variables } from './extensions/variables'
+
+const props = withDefaults(
+  defineProps<{
+    extensions?: Extension[]
+    content?: string
+    readOnly?: boolean
+    languages?: Language[]
+    withVariables?: boolean
+    lineNumbers?: boolean
+    withoutTheme?: boolean
+    disableEnter?: boolean
+    forceDarkMode?: boolean
+  }>(),
+  {
+    disableEnter: false,
+    forceDarkMode: false,
+  },
+)
+
+const emit = defineEmits<{
+  (e: 'change', value: string): void
+}>()
+
+// TODO: Add 'php' and 'laravel'
+const syntaxHighlighting: Partial<
+  Record<Language, LanguageSupport | StreamLanguage<any>>
+> = {
+  axios: javascript(),
+  c: StreamLanguage.define(c),
+  clojure: StreamLanguage.define(clojure),
+  csharp: StreamLanguage.define(csharp),
+  go: StreamLanguage.define(go),
+  http: StreamLanguage.define(http),
+  java: java(),
+  javascript: javascript(),
+  json: json(),
+  kotlin: StreamLanguage.define(kotlin),
+  node: javascript(),
+  objc: StreamLanguage.define(objectiveC),
+  ocaml: StreamLanguage.define(oCaml),
+  powershell: StreamLanguage.define(powerShell),
+  python: python(),
+  r: StreamLanguage.define(r),
+  ruby: StreamLanguage.define(ruby),
+  shell: StreamLanguage.define(shell),
+  swift: StreamLanguage.define(swift),
+}
+
+type Language =
+  | 'axios'
+  | 'c'
+  | 'clojure'
+  | 'csharp'
+  | 'go'
+  | 'http'
+  | 'java'
+  | 'javascript'
+  | 'json'
+  | 'kotlin'
+  | 'node'
+  | 'objc'
+  | 'ocaml'
+  | 'powershell'
+  | 'python'
+  | 'r'
+  | 'ruby'
+  | 'shell'
+  | 'swift'
+  | 'php'
+
+// CSS Class
+const classes = ['scalar-api-client__codemirror']
+
+if (props.readOnly) {
+  classes.push('scalar-api-client__codemirror--read-only')
+}
+
+const getCodeMirrorExtensions = () => {
+  const extensions: Extension[] = []
+
+  extensions.push(EditorView.editorAttributes.of({ class: classes.join(' ') }))
+
+  // Custom extensions
+  if (props.extensions) {
+    props.extensions.forEach((extension) => {
+      extensions.push(extension)
+    })
+  }
+
+  // Read only
+  if (props.readOnly) {
+    extensions.push(EditorView.editable.of(false))
+  }
+
+  // Syntax highlighting
+  if (props.languages) {
+    props.languages
+      .filter((language) => typeof syntaxHighlighting[language] !== 'undefined')
+      .forEach((language) => {
+        extensions.push(syntaxHighlighting[language] as Extension)
+      })
+  }
+
+  // Line numbers
+  if (props.lineNumbers) {
+    extensions.push(lineNumbersExtension())
+  }
+
+  // Highlight variables
+  if (props.withVariables) {
+    extensions.push(variables())
+  }
+
+  if (props.disableEnter) {
+    extensions.push(
+      keymap.of([
+        {
+          key: 'Enter',
+          run: () => {
+            return true
+          },
+        },
+        {
+          key: 'Ctrl-Enter',
+          mac: 'Cmd-Enter',
+          run: () => {
+            return true
+          },
+        },
+        {
+          key: 'Shift-Enter',
+          run: () => {
+            return true
+          },
+        },
+      ]),
+    )
+  }
+
+  // Listen to updates
+  extensions.push(
+    EditorView.updateListener.of((v: ViewUpdate) => {
+      if (!v.docChanged) {
+        return
+      }
+
+      emit('change', v.state.doc.toString())
+    }),
+  )
+
+  return extensions
+}
+
+const { codeMirrorRef, setCodeMirrorContent, reconfigureCodeMirror } =
+  useCodeMirror({
+    content: props.content ?? '',
+    extensions: getCodeMirrorExtensions(),
+    withoutTheme: props.withoutTheme,
+    forceDarkMode: props.forceDarkMode,
+  })
+
+watch(props, () => {
+  setCodeMirrorContent(props.content ?? '')
+  reconfigureCodeMirror(getCodeMirrorExtensions())
+})
+
+defineExpose({
+  setCodeMirrorContent,
+})
+</script>
+
+<template>
+  <div
+    ref="codeMirrorRef"
+    class="scalar-api-client__codemirror__wrapper" />
+</template>
+
+<style>
+/** Basics */
+.scalar-api-client__codemirror__wrapper {
+  width: 100%;
+  display: flex;
+  align-items: stretch;
+}
+
+.scalar-api-client__codemirror {
+  flex-grow: 1;
+  max-width: 100%;
+
+  font-size: var(--theme-small);
+}
+
+/* .scalar-api-client__codemirror.ͼw {
+  background-color: var(--theme-background-1);
+}
+
+.scalar-api-client__codemirror--read-only.ͼw {
+  background-color: var(--theme-background-2);
+} */
+
+/** URL input */
+.scalar-api-client__url-input {
+  font-weight: var(--theme-semibold);
+}
+
+/* .scalar-api-client__url-input .cm-scroller {
+  padding-left: 6px;
+}
+
+.scalar-api-client__url-input .ͼ1 .cm-scroller {
+  align-items: center !important;
+} */
+
+.scalar-api-client__variable {
+  color: var(--scalar-api-client-color);
+}
+</style>

package/src/components/CodeMirror/extensions/variables.ts

@@ -0,0 +1,41 @@
+import {
+  Decoration,
+  type DecorationSet,
+  EditorView,
+  MatchDecorator,
+  ViewPlugin,
+  type ViewUpdate,
+} from '@codemirror/view'
+
+const variableHighlighterDecoration = new MatchDecorator({
+  regexp: /(\{[^}]+\})/g,
+  decoration: () =>
+    Decoration.mark({
+      attributes: {
+        class: 'scalar-api-client__variable',
+      },
+    }),
+})
+
+export const variables = () =>
+  ViewPlugin.fromClass(
+    class {
+      variables: DecorationSet
+      constructor(view: EditorView) {
+        this.variables = variableHighlighterDecoration.createDeco(view)
+      }
+      update(update: ViewUpdate) {
+        this.variables = variableHighlighterDecoration.updateDeco(
+          update,
+          this.variables,
+        )
+      }
+    },
+    {
+      decorations: (instance) => instance.variables,
+      provide: (plugin) =>
+        EditorView.atomicRanges.of(
+          (view) => view.plugin(plugin)?.variables || Decoration.none,
+        ),
+    },
+  )

package/src/components/CodeMirror/index.ts

@@ -0,0 +1 @@
+export { default as CodeMirror } from './CodeMirror.vue'

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useCodeMirror'

package/src/{useCodeMirror.ts → hooks/useCodeMirror.ts}

@@ -1,9 +1,10 @@
 import { type Extension, StateEffect } from '@codemirror/state'
 import { type EditorViewConfig } from '@codemirror/view'
-import { duotoneDark, duotoneLight } from '@uiw/codemirror-theme-duotone'
 import { EditorView } from 'codemirror'
 import { type Ref, ref, watch } from 'vue'
 
+import { darkTheme, lightTheme } from '../themes'
+
 /** TODO: This is a static value, make it work with a dynamic parameter. */
 const isDark = ref(false)
 
@@ -17,9 +18,13 @@ type UseCodeMirrorParameters = {
    */
   content?: string
   /**
-   * Inverse the dark mode.
+   * Force the dark mode.
    */
   forceDarkMode?: boolean
+  /**
+   * Force the light mode.
+   */
+  forceLightMode?: boolean
   /**
    * Whether to load a theme.
    */
@@ -36,7 +41,8 @@ export const useCodeMirror = (
   reconfigureCodeMirror: (newExtensions: Extension[]) => void
   restartCodeMirror: (newExtensions: Extension[]) => void
 } => {
-  const { extensions, content, forceDarkMode, withoutTheme } = parameters
+  const { extensions, content, forceDarkMode, forceLightMode, withoutTheme } =
+    parameters
   const value = ref(content ?? '')
   const codeMirrorRef = ref<HTMLDivElement | null>(null)
   const codeMirror = ref<EditorView | null>(null)
@@ -64,19 +70,32 @@ export const useCodeMirror = (
     }
   }
 
+  const getCurrentTheme = () => {
+    if (withoutTheme) {
+      return null
+    }
+
+    if (forceDarkMode) {
+      return darkTheme
+    }
+
+    if (forceLightMode) {
+      return lightTheme
+    }
+
+    if (isDark.value) {
+      return darkTheme
+    }
+
+    return lightTheme
+  }
+
   // Extend the given extension list with a dark/light theme.
   const addDefaultExtensions = (newExtensions: Extension[] = []) => {
-    const theme = withoutTheme
-      ? null
-      : forceDarkMode
-      ? duotoneLight
-      : isDark.value
-      ? duotoneDark
-      : duotoneLight
     // Themes
     const defaultExtensions: Extension[] = [
       EditorView.theme({}, { dark: forceDarkMode ? false : isDark.value }),
-      theme,
+      getCurrentTheme(),
     ].filter((extension) => extension !== null) as Extension[]
 
     return [...defaultExtensions, newExtensions]

package/src/index.ts

@@ -1 +1,2 @@
-export * from './useCodeMirror'
+export { CodeMirror } from './components/CodeMirror'
+export * from './hooks/useCodeMirror'

package/src/themes/index.ts

@@ -0,0 +1,77 @@
+import { tags as t } from '@lezer/highlight'
+import { createTheme } from '@uiw/codemirror-themes'
+
+export const lightTheme = createTheme({
+  theme: 'light',
+  settings: {
+    background: 'var(--theme-background-2)',
+    foreground: 'var(--theme-color-1)',
+    caret: '#93abdc',
+    selection: '#e3dcce',
+    selectionMatch: '#e3dcce',
+    gutterBackground: 'var(--theme-background-2)',
+    gutterForeground: 'var(--theme-color-2)',
+    gutterBorder: 'transparent',
+    lineHighlight: '#EFEFEF',
+    fontFamily: 'var(--theme-font-code)',
+  },
+  styles: [
+    { tag: [t.standard(t.tagName), t.tagName], color: '#116329' },
+    { tag: [t.comment, t.bracket], color: '#6a737d' },
+    { tag: [t.className, t.propertyName], color: '#6f42c1' },
+    {
+      tag: [t.variableName, t.attributeName, t.number, t.operator],
+      color: '#005cc5',
+    },
+    {
+      tag: [t.keyword, t.typeName, t.typeOperator, t.typeName],
+      color: '#d73a49',
+    },
+    { tag: [t.string, t.meta, t.regexp], color: '#032f62' },
+    { tag: [t.name, t.quote], color: '#22863a' },
+    { tag: [t.heading], color: '#24292e', fontWeight: 'bold' },
+    { tag: [t.emphasis], color: '#24292e', fontStyle: 'italic' },
+    { tag: [t.deleted], color: '#b31d28', backgroundColor: 'ffeef0' },
+    { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#e36209' },
+    { tag: [t.url, t.escape, t.regexp, t.link], color: '#032f62' },
+    { tag: t.link, textDecoration: 'underline' },
+    { tag: t.strikethrough, textDecoration: 'line-through' },
+    { tag: t.invalid, color: '#cb2431' },
+  ],
+})
+
+export const darkTheme = createTheme({
+  theme: 'dark',
+  settings: {
+    background: 'var(--theme-background-2)',
+    foreground: 'var(--theme-color-1)',
+    caret: '#ffad5c',
+    selection: 'rgba(255, 255, 255, 0.1)',
+    gutterBackground: 'var(--theme-background-2)',
+    gutterForeground: 'var(--theme-color-2)',
+    lineHighlight: '#36334280',
+    fontFamily: 'var(--theme-font-code)',
+  },
+  styles: [
+    { tag: [t.standard(t.tagName), t.tagName], color: '#7ee787' },
+    { tag: [t.comment, t.bracket], color: '#8b949e' },
+    { tag: [t.className, t.propertyName], color: '#d2a8ff' },
+    {
+      tag: [t.variableName, t.attributeName, t.number, t.operator],
+      color: '#79c0ff',
+    },
+    {
+      tag: [t.keyword, t.typeName, t.typeOperator, t.typeName],
+      color: '#ff7b72',
+    },
+    { tag: [t.string, t.meta, t.regexp], color: '#a5d6ff' },
+    { tag: [t.name, t.quote], color: '#7ee787' },
+    { tag: [t.heading], color: '#d2a8ff', fontWeight: 'bold' },
+    { tag: [t.emphasis], color: '#d2a8ff', fontStyle: 'italic' },
+    { tag: [t.deleted], color: '#ffdcd7', backgroundColor: 'ffeef0' },
+    { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#ffab70' },
+    { tag: t.link, textDecoration: 'underline' },
+    { tag: t.strikethrough, textDecoration: 'line-through' },
+    { tag: t.invalid, color: '#f97583' },
+  ],
+})

package/dist/useCodeMirror.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCodeMirror.d.ts","sourceRoot":"","sources":["../src/useCodeMirror.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAe,MAAM,mBAAmB,CAAA;AAG/D,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,OAAO,EAAE,KAAK,GAAG,EAAc,MAAM,KAAK,CAAA;AAK1C,KAAK,uBAAuB,GAAG;IAC7B;;OAEG;IACH,UAAU,EAAE,SAAS,EAAE,CAAA;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,aAAa,eACZ,uBAAuB;WAE5B,IAAI,MAAM,CAAC;mBACH,IAAI,cAAc,GAAG,IAAI,CAAC;gBAC7B,IAAI,UAAU,GAAG,IAAI,CAAC;oCACF,MAAM,KAAK,IAAI;2CACR,SAAS,EAAE,KAAK,IAAI;uCACxB,SAAS,EAAE,KAAK,IAAI;CA6HxD,CAAA"}