@scalar/use-codemirror 0.12.24 → 0.12.27

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @scalar/use-codemirror
 
+## 0.12.27
+
+### Patch Changes
+
+- @scalar/components@0.14.26
+
+## 0.12.26
+
+### Patch Changes
+
+- Updated dependencies [172e397]
+- Updated dependencies [d8b8a5b]
+- Updated dependencies [6c24be9]
+- Updated dependencies [638120c]
+- Updated dependencies [0804cfc]
+  - @scalar/components@0.14.25
+
+## 0.12.25
+
+### Patch Changes
+
+- Updated dependencies [58b9321]
+- Updated dependencies [fbafeab]
+  - @scalar/components@0.14.24
+
 ## 0.12.24
 
 ### Patch Changes

package/dist/hooks/useCodeMirror.js

@@ -178,11 +178,11 @@ function getCodeMirrorExtensions({
     syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
     EditorView.theme({
       ".cm-line": {
-        lineHeight: "20px",
+        lineHeight: "22px",
         padding: "0 2px 0 4px"
       },
       ".cm-gutterElement": {
-        lineHeight: "20px"
+        lineHeight: "22px"
       },
       ".cm-tooltip": {
         border: "1px solid #f5c6cb",

package/dist/hooks/useCodeMirror.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/hooks/useCodeMirror.ts"],
-  "sourcesContent": ["import { autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap } from '@codemirror/autocomplete'\nimport { indentWithTab, insertNewline } from '@codemirror/commands'\nimport { history, historyKeymap } from '@codemirror/commands'\nimport { css } from '@codemirror/lang-css'\nimport { html } from '@codemirror/lang-html'\nimport { json } from '@codemirror/lang-json'\nimport { xml } from '@codemirror/lang-xml'\nimport { yaml } from '@codemirror/lang-yaml'\nimport {\n  type LanguageSupport,\n  type StreamLanguage,\n  bracketMatching,\n  defaultHighlightStyle,\n  foldGutter,\n  indentOnInput,\n  syntaxHighlighting,\n} from '@codemirror/language'\nimport { type Diagnostic, linter } from '@codemirror/lint'\nimport { type Extension, StateEffect } from '@codemirror/state'\nimport {\n  EditorView,\n  type KeyBinding,\n  highlightSpecialChars,\n  keymap,\n  lineNumbers as lineNumbersExtension,\n  placeholder as placeholderExtension,\n} from '@codemirror/view'\nimport { ScalarIcon } from '@scalar/components'\nimport { type MaybeRefOrGetter, type Ref, computed, h, onBeforeUnmount, ref, render, toValue, watch } from 'vue'\n\nimport { customTheme } from '../themes'\nimport type { CodeMirrorLanguage } from '../types'\nimport { variables } from './variables'\n\ntype BaseParameters = {\n  /** Element Ref to mount codemirror to */\n  codeMirrorRef: Ref<HTMLDivElement | null>\n  /** List of optional extensions for the instance */\n  extensions?: MaybeRefOrGetter<Extension[]>\n  /** Whether to load a theme.*/\n  withoutTheme?: MaybeRefOrGetter<boolean | undefined>\n  /** Languages to support for syntax highlighting */\n  language: MaybeRefOrGetter<CodeMirrorLanguage | undefined>\n  /** Class names to apply to the instance */\n  classes?: MaybeRefOrGetter<string[] | undefined>\n  /** Put the editor into read-only mode */\n  readOnly?: MaybeRefOrGetter<boolean | undefined>\n  /** Disable indent with tab */\n  disableTabIndent?: MaybeRefOrGetter<boolean | undefined>\n  /** Option to show line numbers in the editor */\n  lineNumbers?: MaybeRefOrGetter<boolean | undefined>\n  withVariables?: MaybeRefOrGetter<boolean | undefined>\n  forceFoldGutter?: MaybeRefOrGetter<boolean | undefined>\n  disableEnter?: MaybeRefOrGetter<boolean | undefined>\n  disableCloseBrackets?: MaybeRefOrGetter<boolean | undefined>\n  /** Option to lint and show error in the editor */\n  lint?: MaybeRefOrGetter<boolean | undefined>\n  onBlur?: (v: string) => void\n  onFocus?: (v: string) => void\n  placeholder?: MaybeRefOrGetter<string | undefined>\n}\n\nexport type UseCodeMirrorParameters =\n  | (BaseParameters & {\n      /** Prefill the content. Will be ignored when a provider is given. */\n      content: MaybeRefOrGetter<string | undefined>\n      onChange?: (v: string) => void\n    })\n  | (BaseParameters & {\n      provider: MaybeRefOrGetter<Extension | null>\n      content?: MaybeRefOrGetter<string | undefined>\n      onChange?: (v: string) => void\n    })\n\n/** Check if the hook has a provider. In provider mode we ignore the content variable */\nconst hasProvider = (\n  params: UseCodeMirrorParameters,\n): params is BaseParameters & {\n  content?: MaybeRefOrGetter<string | undefined>\n  provider: MaybeRefOrGetter<Extension>\n} => 'provider' in params && !!toValue(params.provider)\n\nconst selectAllKeyBinding: KeyBinding = {\n  key: 'Mod-a',\n  run: (view) => {\n    // Select the entire content\n    view.dispatch({\n      selection: { anchor: 0, head: view.state.doc.length },\n      scrollIntoView: false,\n    })\n    return true\n  },\n}\n\n/** Reactive CodeMirror Integration */\nexport const useCodeMirror = (\n  params: UseCodeMirrorParameters,\n): {\n  setCodeMirrorContent: (content?: string) => void\n  codeMirror: Ref<EditorView | null>\n} => {\n  const codeMirror: Ref<EditorView | null> = ref(null)\n\n  /** Set the codemirror content value */\n  const setCodeMirrorContent = (newValue = '') => {\n    if (!codeMirror.value) {\n      return\n    }\n\n    // No need to set the CodeMirror content if nothing has changed\n    if (codeMirror.value.state.doc.toString() === newValue) {\n      return\n    }\n\n    codeMirror.value.dispatch({\n      changes: {\n        from: 0,\n        to: codeMirror.value.state.doc.length,\n        insert: newValue,\n      },\n      selection: {\n        anchor: Math.min(codeMirror.value.state.selection.main.anchor, newValue.length),\n      },\n    })\n  }\n\n  // All options except provider\n  const extensionConfig = computed(() => ({\n    onChange: params.onChange,\n    onBlur: params.onBlur,\n    onFocus: params.onFocus,\n    disableTabIndent: toValue(params.disableTabIndent),\n    language: toValue(params.language),\n    classes: toValue(params.classes),\n    readOnly: toValue(params.readOnly),\n    lineNumbers: toValue(params.lineNumbers),\n    withVariables: toValue(params.withVariables),\n    forceFoldGutter: toValue(params.forceFoldGutter),\n    disableEnter: toValue(params.disableEnter),\n    disableCloseBrackets: toValue(params.disableCloseBrackets),\n    withoutTheme: toValue(params.withoutTheme),\n    lint: toValue(params.lint),\n    additionalExtensions: toValue(params.extensions),\n    placeholder: toValue(params.placeholder),\n  }))\n\n  // Unmounts CodeMirror if it's mounted already, and mounts CodeMirror, if the given ref exists.\n  watch(\n    params.codeMirrorRef,\n    () => {\n      codeMirror.value?.destroy()\n      mountCodeMirror()\n    },\n    { immediate: true },\n  )\n\n  // Cleanup codemirror\n  onBeforeUnmount(() => codeMirror.value?.destroy())\n\n  // Initializes CodeMirror.\n  function mountCodeMirror() {\n    if (params.codeMirrorRef.value) {\n      const provider = hasProvider(params) ? toValue(params.provider) : null\n      const extensions = getCodeMirrorExtensions({\n        ...extensionConfig.value,\n        provider,\n      })\n\n      codeMirror.value = new EditorView({\n        parent: params.codeMirrorRef.value,\n        extensions,\n      })\n\n      // Set the initial content if a provider is not in use\n      if (!hasProvider(params)) {\n        setCodeMirrorContent(toValue(params.content))\n      }\n    }\n  }\n\n  // ---------------------------------------------------------------------------\n\n  // Provider must be watched separately because we need to restart codemirror if the provider changes\n  watch(\n    () => (hasProvider(params) ? toValue(params.provider) : null),\n    () => {\n      if (hasProvider(params)) {\n        codeMirror.value?.destroy()\n        mountCodeMirror()\n      }\n    },\n  )\n\n  // Update the extensions whenever parameters changes\n  watch(\n    extensionConfig,\n    () => {\n      if (!codeMirror.value) {\n        return\n      }\n      // If a provider is\n\n      const provider = hasProvider(params) ? toValue(params.provider) : null\n      const extensions = getCodeMirrorExtensions({\n        ...extensionConfig.value,\n        provider,\n      })\n\n      requestAnimationFrame(() => {\n        codeMirror.value?.dispatch({\n          effects: StateEffect.reconfigure.of(extensions),\n        })\n      })\n    },\n    { immediate: true },\n  )\n\n  // ---------------------------------------------------------------------------\n\n  // Keep the content in sync when the content is managed externally\n  watch(\n    () => toValue(params.content),\n    () => {\n      // When a provider is in use we do not map the content value back to the codemirror instance\n      if (hasProvider(params)) {\n        return\n      }\n\n      setCodeMirrorContent(toValue(params.content))\n    },\n    { immediate: true },\n  )\n\n  return {\n    /** Replaces the current content with the given value. */\n    setCodeMirrorContent,\n    /** Codemirror instance */\n    codeMirror,\n  }\n}\n\n// ---------------------------------------------------------------------------\n\nconst languageExtensions: {\n  [lang in CodeMirrorLanguage]: () => LanguageSupport | StreamLanguage<any>\n} = {\n  html: html,\n  json: json,\n  yaml: yaml,\n  css: css,\n  xml: xml,\n}\n\n/** Generate  the list of extension from parameters */\nfunction getCodeMirrorExtensions({\n  onChange,\n  onBlur,\n  onFocus,\n  provider,\n  language,\n  classes = [],\n  readOnly = false,\n  lineNumbers = false,\n  withVariables = false,\n  forceFoldGutter = false,\n  disableEnter = false,\n  disableCloseBrackets = false,\n  disableTabIndent = false,\n  withoutTheme = false,\n  lint = false,\n  additionalExtensions = [],\n  placeholder,\n}: {\n  classes?: string[]\n  language?: CodeMirrorLanguage\n  readOnly?: boolean\n  lineNumbers?: boolean\n  disableCloseBrackets?: boolean\n  disableTabIndent?: boolean\n  withVariables?: boolean\n  disableEnter?: boolean\n  forceFoldGutter?: boolean\n  onChange?: (val: string) => void\n  onFocus?: (val: string) => void\n  onBlur?: (val: string) => void\n  withoutTheme?: boolean\n  provider: Extension | null\n  lint?: boolean\n  additionalExtensions?: Extension[]\n  placeholder?: string\n}) {\n  const extensions: Extension[] = [\n    highlightSpecialChars(),\n    history(),\n    keymap.of(historyKeymap),\n    syntaxHighlighting(defaultHighlightStyle, { fallback: true }),\n    EditorView.theme({\n      '.cm-line': {\n        lineHeight: '20px',\n        padding: '0 2px 0 4px',\n      },\n      '.cm-gutterElement': {\n        lineHeight: '20px',\n      },\n      '.cm-tooltip': {\n        border: '1px solid #f5c6cb',\n        fontSize: '12px',\n      },\n      '.cm-tooltip-lint': {\n        backgroundColor: '#ffffff',\n      },\n      '.cm-diagnostic-error': {\n        borderLeft: '0',\n        color: '#dc1b19',\n      },\n      '.cm-foldPlaceholder': {\n        background: 'var(--scalar-background-1)',\n        border: 'none',\n        fontFamily: 'var(--scalar-font)',\n      },\n    }),\n    // Listen to updates\n    EditorView.updateListener.of((v) => {\n      if (!v.docChanged) {\n        return\n      }\n      onChange?.(v.state.doc.toString())\n    }),\n    EditorView.domEventHandlers({\n      blur: (_event, view) => {\n        onBlur?.(view.state.doc.toString())\n      },\n      focus: (_event, view) => {\n        onFocus?.(view.state.doc.toString())\n      },\n    }),\n    // Add Classes\n    EditorView.editorAttributes.of({ class: classes.join(' ') }),\n    ...additionalExtensions,\n  ]\n\n  // Enable the provider\n  if (provider) {\n    extensions.push(provider)\n  }\n\n  // Add the theme as needed\n  if (!withoutTheme) {\n    extensions.push(customTheme)\n  }\n\n  // Read only\n  if (readOnly) {\n    extensions.push(EditorView.editable.of(false))\n  } else {\n    extensions.push(\n      indentOnInput(),\n      bracketMatching(),\n      autocompletion(),\n      keymap.of([...completionKeymap, selectAllKeyBinding]),\n      bracketMatching(),\n    )\n\n    if (!disableCloseBrackets) {\n      extensions.push(closeBrackets(), keymap.of([...closeBracketsKeymap]))\n    }\n\n    if (disableTabIndent) {\n      extensions.push(\n        keymap.of([\n          {\n            key: 'Tab',\n            run: () => false, // Prevent default Tab behavior\n            shift: () => false, // Prevent default Shift+Tab behavior\n          },\n        ]),\n      )\n    } else {\n      extensions.push(keymap.of([indentWithTab]))\n    }\n  }\n\n  // Add placeholder extension if placeholder is provided\n  if (placeholder) {\n    extensions.push(placeholderExtension(placeholder))\n  }\n\n  // Line numbers\n  if (lineNumbers) {\n    extensions.push(lineNumbersExtension())\n  }\n\n  if (forceFoldGutter) {\n    extensions.push(\n      foldGutter({\n        markerDOM: (open) => {\n          const icon = document.createElement('div')\n          icon.classList.add('cm-foldMarker')\n          const vnode = h(ScalarIcon, {\n            icon: open ? 'ChevronDown' : 'ChevronRight',\n            size: 'md',\n          })\n          render(vnode, icon)\n          return icon\n        },\n      }),\n    )\n  }\n\n  // Syntax highlighting\n  if (language && languageExtensions[language]) {\n    extensions.push(languageExtensions[language]())\n    if (!forceFoldGutter) {\n      extensions.push(\n        foldGutter({\n          markerDOM: (open) => {\n            const icon = document.createElement('div')\n            icon.classList.add('cm-foldMarker')\n            const vnode = h(ScalarIcon, {\n              icon: open ? 'ChevronDown' : 'ChevronRight',\n              size: 'md',\n            })\n            render(vnode, icon)\n            return icon\n          },\n        }),\n      )\n    }\n  }\n\n  // JSON Linter\n  if (lint && language === 'json') {\n    const jsonLinter = linter((view) => {\n      const diagnostics: Diagnostic[] = []\n      const content = view.state.doc.toString()\n      if (content.trim()) {\n        try {\n          JSON.parse(content)\n        } catch (e) {\n          if (e instanceof Error) {\n            diagnostics.push({\n              from: 0,\n              to: view.state.doc.length,\n              severity: 'error',\n              message: e.message,\n            })\n          }\n        }\n      }\n      return diagnostics\n    })\n    extensions.push(jsonLinter)\n  }\n\n  // Highlight variables\n  if (withVariables) {\n    extensions.push(variables())\n  }\n\n  if (disableEnter) {\n    extensions.push(\n      keymap.of([\n        {\n          key: 'Enter',\n          run: () => {\n            return true\n          },\n        },\n        {\n          key: 'Ctrl-Enter',\n          mac: 'Cmd-Enter',\n          run: () => {\n            return true\n          },\n        },\n        {\n          key: 'Shift-Enter',\n          run: () => {\n            return true\n          },\n        },\n      ]),\n    )\n  } else {\n    extensions.push(\n      keymap.of([\n        {\n          key: 'Enter',\n          run: insertNewline,\n        },\n      ]),\n    )\n  }\n\n  return extensions\n}\n"],
+  "sourcesContent": ["import { autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap } from '@codemirror/autocomplete'\nimport { indentWithTab, insertNewline } from '@codemirror/commands'\nimport { history, historyKeymap } from '@codemirror/commands'\nimport { css } from '@codemirror/lang-css'\nimport { html } from '@codemirror/lang-html'\nimport { json } from '@codemirror/lang-json'\nimport { xml } from '@codemirror/lang-xml'\nimport { yaml } from '@codemirror/lang-yaml'\nimport {\n  type LanguageSupport,\n  type StreamLanguage,\n  bracketMatching,\n  defaultHighlightStyle,\n  foldGutter,\n  indentOnInput,\n  syntaxHighlighting,\n} from '@codemirror/language'\nimport { type Diagnostic, linter } from '@codemirror/lint'\nimport { type Extension, StateEffect } from '@codemirror/state'\nimport {\n  EditorView,\n  type KeyBinding,\n  highlightSpecialChars,\n  keymap,\n  lineNumbers as lineNumbersExtension,\n  placeholder as placeholderExtension,\n} from '@codemirror/view'\nimport { ScalarIcon } from '@scalar/components'\nimport { type MaybeRefOrGetter, type Ref, computed, h, onBeforeUnmount, ref, render, toValue, watch } from 'vue'\n\nimport { customTheme } from '../themes'\nimport type { CodeMirrorLanguage } from '../types'\nimport { variables } from './variables'\n\ntype BaseParameters = {\n  /** Element Ref to mount codemirror to */\n  codeMirrorRef: Ref<HTMLDivElement | null>\n  /** List of optional extensions for the instance */\n  extensions?: MaybeRefOrGetter<Extension[]>\n  /** Whether to load a theme.*/\n  withoutTheme?: MaybeRefOrGetter<boolean | undefined>\n  /** Languages to support for syntax highlighting */\n  language: MaybeRefOrGetter<CodeMirrorLanguage | undefined>\n  /** Class names to apply to the instance */\n  classes?: MaybeRefOrGetter<string[] | undefined>\n  /** Put the editor into read-only mode */\n  readOnly?: MaybeRefOrGetter<boolean | undefined>\n  /** Disable indent with tab */\n  disableTabIndent?: MaybeRefOrGetter<boolean | undefined>\n  /** Option to show line numbers in the editor */\n  lineNumbers?: MaybeRefOrGetter<boolean | undefined>\n  withVariables?: MaybeRefOrGetter<boolean | undefined>\n  forceFoldGutter?: MaybeRefOrGetter<boolean | undefined>\n  disableEnter?: MaybeRefOrGetter<boolean | undefined>\n  disableCloseBrackets?: MaybeRefOrGetter<boolean | undefined>\n  /** Option to lint and show error in the editor */\n  lint?: MaybeRefOrGetter<boolean | undefined>\n  onBlur?: (v: string) => void\n  onFocus?: (v: string) => void\n  placeholder?: MaybeRefOrGetter<string | undefined>\n}\n\nexport type UseCodeMirrorParameters =\n  | (BaseParameters & {\n      /** Prefill the content. Will be ignored when a provider is given. */\n      content: MaybeRefOrGetter<string | undefined>\n      onChange?: (v: string) => void\n    })\n  | (BaseParameters & {\n      provider: MaybeRefOrGetter<Extension | null>\n      content?: MaybeRefOrGetter<string | undefined>\n      onChange?: (v: string) => void\n    })\n\n/** Check if the hook has a provider. In provider mode we ignore the content variable */\nconst hasProvider = (\n  params: UseCodeMirrorParameters,\n): params is BaseParameters & {\n  content?: MaybeRefOrGetter<string | undefined>\n  provider: MaybeRefOrGetter<Extension>\n} => 'provider' in params && !!toValue(params.provider)\n\nconst selectAllKeyBinding: KeyBinding = {\n  key: 'Mod-a',\n  run: (view) => {\n    // Select the entire content\n    view.dispatch({\n      selection: { anchor: 0, head: view.state.doc.length },\n      scrollIntoView: false,\n    })\n    return true\n  },\n}\n\n/** Reactive CodeMirror Integration */\nexport const useCodeMirror = (\n  params: UseCodeMirrorParameters,\n): {\n  setCodeMirrorContent: (content?: string) => void\n  codeMirror: Ref<EditorView | null>\n} => {\n  const codeMirror: Ref<EditorView | null> = ref(null)\n\n  /** Set the codemirror content value */\n  const setCodeMirrorContent = (newValue = '') => {\n    if (!codeMirror.value) {\n      return\n    }\n\n    // No need to set the CodeMirror content if nothing has changed\n    if (codeMirror.value.state.doc.toString() === newValue) {\n      return\n    }\n\n    codeMirror.value.dispatch({\n      changes: {\n        from: 0,\n        to: codeMirror.value.state.doc.length,\n        insert: newValue,\n      },\n      selection: {\n        anchor: Math.min(codeMirror.value.state.selection.main.anchor, newValue.length),\n      },\n    })\n  }\n\n  // All options except provider\n  const extensionConfig = computed(() => ({\n    onChange: params.onChange,\n    onBlur: params.onBlur,\n    onFocus: params.onFocus,\n    disableTabIndent: toValue(params.disableTabIndent),\n    language: toValue(params.language),\n    classes: toValue(params.classes),\n    readOnly: toValue(params.readOnly),\n    lineNumbers: toValue(params.lineNumbers),\n    withVariables: toValue(params.withVariables),\n    forceFoldGutter: toValue(params.forceFoldGutter),\n    disableEnter: toValue(params.disableEnter),\n    disableCloseBrackets: toValue(params.disableCloseBrackets),\n    withoutTheme: toValue(params.withoutTheme),\n    lint: toValue(params.lint),\n    additionalExtensions: toValue(params.extensions),\n    placeholder: toValue(params.placeholder),\n  }))\n\n  // Unmounts CodeMirror if it's mounted already, and mounts CodeMirror, if the given ref exists.\n  watch(\n    params.codeMirrorRef,\n    () => {\n      codeMirror.value?.destroy()\n      mountCodeMirror()\n    },\n    { immediate: true },\n  )\n\n  // Cleanup codemirror\n  onBeforeUnmount(() => codeMirror.value?.destroy())\n\n  // Initializes CodeMirror.\n  function mountCodeMirror() {\n    if (params.codeMirrorRef.value) {\n      const provider = hasProvider(params) ? toValue(params.provider) : null\n      const extensions = getCodeMirrorExtensions({\n        ...extensionConfig.value,\n        provider,\n      })\n\n      codeMirror.value = new EditorView({\n        parent: params.codeMirrorRef.value,\n        extensions,\n      })\n\n      // Set the initial content if a provider is not in use\n      if (!hasProvider(params)) {\n        setCodeMirrorContent(toValue(params.content))\n      }\n    }\n  }\n\n  // ---------------------------------------------------------------------------\n\n  // Provider must be watched separately because we need to restart codemirror if the provider changes\n  watch(\n    () => (hasProvider(params) ? toValue(params.provider) : null),\n    () => {\n      if (hasProvider(params)) {\n        codeMirror.value?.destroy()\n        mountCodeMirror()\n      }\n    },\n  )\n\n  // Update the extensions whenever parameters changes\n  watch(\n    extensionConfig,\n    () => {\n      if (!codeMirror.value) {\n        return\n      }\n      // If a provider is\n\n      const provider = hasProvider(params) ? toValue(params.provider) : null\n      const extensions = getCodeMirrorExtensions({\n        ...extensionConfig.value,\n        provider,\n      })\n\n      requestAnimationFrame(() => {\n        codeMirror.value?.dispatch({\n          effects: StateEffect.reconfigure.of(extensions),\n        })\n      })\n    },\n    { immediate: true },\n  )\n\n  // ---------------------------------------------------------------------------\n\n  // Keep the content in sync when the content is managed externally\n  watch(\n    () => toValue(params.content),\n    () => {\n      // When a provider is in use we do not map the content value back to the codemirror instance\n      if (hasProvider(params)) {\n        return\n      }\n\n      setCodeMirrorContent(toValue(params.content))\n    },\n    { immediate: true },\n  )\n\n  return {\n    /** Replaces the current content with the given value. */\n    setCodeMirrorContent,\n    /** Codemirror instance */\n    codeMirror,\n  }\n}\n\n// ---------------------------------------------------------------------------\n\nconst languageExtensions: {\n  [lang in CodeMirrorLanguage]: () => LanguageSupport | StreamLanguage<any>\n} = {\n  html: html,\n  json: json,\n  yaml: yaml,\n  css: css,\n  xml: xml,\n}\n\n/** Generate  the list of extension from parameters */\nfunction getCodeMirrorExtensions({\n  onChange,\n  onBlur,\n  onFocus,\n  provider,\n  language,\n  classes = [],\n  readOnly = false,\n  lineNumbers = false,\n  withVariables = false,\n  forceFoldGutter = false,\n  disableEnter = false,\n  disableCloseBrackets = false,\n  disableTabIndent = false,\n  withoutTheme = false,\n  lint = false,\n  additionalExtensions = [],\n  placeholder,\n}: {\n  classes?: string[]\n  language?: CodeMirrorLanguage\n  readOnly?: boolean\n  lineNumbers?: boolean\n  disableCloseBrackets?: boolean\n  disableTabIndent?: boolean\n  withVariables?: boolean\n  disableEnter?: boolean\n  forceFoldGutter?: boolean\n  onChange?: (val: string) => void\n  onFocus?: (val: string) => void\n  onBlur?: (val: string) => void\n  withoutTheme?: boolean\n  provider: Extension | null\n  lint?: boolean\n  additionalExtensions?: Extension[]\n  placeholder?: string\n}) {\n  const extensions: Extension[] = [\n    highlightSpecialChars(),\n    history(),\n    keymap.of(historyKeymap),\n    syntaxHighlighting(defaultHighlightStyle, { fallback: true }),\n    EditorView.theme({\n      '.cm-line': {\n        lineHeight: '22px',\n        padding: '0 2px 0 4px',\n      },\n      '.cm-gutterElement': {\n        lineHeight: '22px',\n      },\n      '.cm-tooltip': {\n        border: '1px solid #f5c6cb',\n        fontSize: '12px',\n      },\n      '.cm-tooltip-lint': {\n        backgroundColor: '#ffffff',\n      },\n      '.cm-diagnostic-error': {\n        borderLeft: '0',\n        color: '#dc1b19',\n      },\n      '.cm-foldPlaceholder': {\n        background: 'var(--scalar-background-1)',\n        border: 'none',\n        fontFamily: 'var(--scalar-font)',\n      },\n    }),\n    // Listen to updates\n    EditorView.updateListener.of((v) => {\n      if (!v.docChanged) {\n        return\n      }\n      onChange?.(v.state.doc.toString())\n    }),\n    EditorView.domEventHandlers({\n      blur: (_event, view) => {\n        onBlur?.(view.state.doc.toString())\n      },\n      focus: (_event, view) => {\n        onFocus?.(view.state.doc.toString())\n      },\n    }),\n    // Add Classes\n    EditorView.editorAttributes.of({ class: classes.join(' ') }),\n    ...additionalExtensions,\n  ]\n\n  // Enable the provider\n  if (provider) {\n    extensions.push(provider)\n  }\n\n  // Add the theme as needed\n  if (!withoutTheme) {\n    extensions.push(customTheme)\n  }\n\n  // Read only\n  if (readOnly) {\n    extensions.push(EditorView.editable.of(false))\n  } else {\n    extensions.push(\n      indentOnInput(),\n      bracketMatching(),\n      autocompletion(),\n      keymap.of([...completionKeymap, selectAllKeyBinding]),\n      bracketMatching(),\n    )\n\n    if (!disableCloseBrackets) {\n      extensions.push(closeBrackets(), keymap.of([...closeBracketsKeymap]))\n    }\n\n    if (disableTabIndent) {\n      extensions.push(\n        keymap.of([\n          {\n            key: 'Tab',\n            run: () => false, // Prevent default Tab behavior\n            shift: () => false, // Prevent default Shift+Tab behavior\n          },\n        ]),\n      )\n    } else {\n      extensions.push(keymap.of([indentWithTab]))\n    }\n  }\n\n  // Add placeholder extension if placeholder is provided\n  if (placeholder) {\n    extensions.push(placeholderExtension(placeholder))\n  }\n\n  // Line numbers\n  if (lineNumbers) {\n    extensions.push(lineNumbersExtension())\n  }\n\n  if (forceFoldGutter) {\n    extensions.push(\n      foldGutter({\n        markerDOM: (open) => {\n          const icon = document.createElement('div')\n          icon.classList.add('cm-foldMarker')\n          const vnode = h(ScalarIcon, {\n            icon: open ? 'ChevronDown' : 'ChevronRight',\n            size: 'md',\n          })\n          render(vnode, icon)\n          return icon\n        },\n      }),\n    )\n  }\n\n  // Syntax highlighting\n  if (language && languageExtensions[language]) {\n    extensions.push(languageExtensions[language]())\n    if (!forceFoldGutter) {\n      extensions.push(\n        foldGutter({\n          markerDOM: (open) => {\n            const icon = document.createElement('div')\n            icon.classList.add('cm-foldMarker')\n            const vnode = h(ScalarIcon, {\n              icon: open ? 'ChevronDown' : 'ChevronRight',\n              size: 'md',\n            })\n            render(vnode, icon)\n            return icon\n          },\n        }),\n      )\n    }\n  }\n\n  // JSON Linter\n  if (lint && language === 'json') {\n    const jsonLinter = linter((view) => {\n      const diagnostics: Diagnostic[] = []\n      const content = view.state.doc.toString()\n      if (content.trim()) {\n        try {\n          JSON.parse(content)\n        } catch (e) {\n          if (e instanceof Error) {\n            diagnostics.push({\n              from: 0,\n              to: view.state.doc.length,\n              severity: 'error',\n              message: e.message,\n            })\n          }\n        }\n      }\n      return diagnostics\n    })\n    extensions.push(jsonLinter)\n  }\n\n  // Highlight variables\n  if (withVariables) {\n    extensions.push(variables())\n  }\n\n  if (disableEnter) {\n    extensions.push(\n      keymap.of([\n        {\n          key: 'Enter',\n          run: () => {\n            return true\n          },\n        },\n        {\n          key: 'Ctrl-Enter',\n          mac: 'Cmd-Enter',\n          run: () => {\n            return true\n          },\n        },\n        {\n          key: 'Shift-Enter',\n          run: () => {\n            return true\n          },\n        },\n      ]),\n    )\n  } else {\n    extensions.push(\n      keymap.of([\n        {\n          key: 'Enter',\n          run: insertNewline,\n        },\n      ]),\n    )\n  }\n\n  return extensions\n}\n"],
   "mappings": "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",
   "names": []
 }

package/package.json

@@ -16,7 +16,7 @@
     "vue",
     "vue3"
   ],
-  "version": "0.12.24",
+  "version": "0.12.27",
   "engines": {
     "node": ">=20"
   },
@@ -61,15 +61,15 @@
     "@replit/codemirror-css-color-picker": "^6.3.0",
     "codemirror": "^6.0.0",
     "vue": "^3.5.17",
-    "@scalar/components": "0.14.23"
+    "@scalar/components": "0.14.26"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.4",
     "vite": "6.1.6",
     "vitest": "^3.2.4",
     "vue": "^3.5.17",
-    "@scalar/themes": "0.13.12",
-    "@scalar/build-tooling": "0.2.4"
+    "@scalar/build-tooling": "0.2.6",
+    "@scalar/themes": "0.13.13"
   },
   "scripts": {
     "build": "scalar-build-esbuild",