@scalar/use-codemirror 0.11.101 → 0.11.103

package/dist/hooks/useCodeMirror.js.map

@@ -0,0 +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 { 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 { history, historyKeymap } from '@codemirror/commands'\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\u2019s 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"],
+  "mappings": "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",
+  "names": []
+}

package/dist/hooks/useCodeMirror.test.js

@@ -0,0 +1,69 @@
+import { EditorView } from "@codemirror/view";
+import { describe, expect, it } from "vitest";
+import { ref } from "vue";
+import { useCodeMirror } from "../hooks/useCodeMirror.js";
+describe("useCodeMirror", () => {
+  it("should initialize with basic configuration", () => {
+    const codeMirrorRef = ref(document.createElement("div"));
+    const { codeMirror } = useCodeMirror({
+      codeMirrorRef,
+      content: "",
+      language: void 0
+    });
+    expect(codeMirror.value).not.toBeNull();
+  });
+  it("should update content when content prop changes", () => {
+    const codeMirrorRef = ref(document.createElement("div"));
+    const { codeMirror, setCodeMirrorContent } = useCodeMirror({
+      codeMirrorRef,
+      content: "initial",
+      language: void 0
+    });
+    setCodeMirrorContent("updated content");
+    expect(codeMirror.value?.state.doc.toString()).toBe("updated content");
+  });
+  it("should handle read-only mode", () => {
+    const codeMirrorRef = ref(document.createElement("div"));
+    const { codeMirror } = useCodeMirror({
+      codeMirrorRef,
+      content: "test content",
+      language: void 0,
+      readOnly: true
+    });
+    expect(codeMirror.value?.state.facet(EditorView.editable)).toBe(false);
+  });
+  it("should support different languages", () => {
+    const codeMirrorRef = ref(document.createElement("div"));
+    const { codeMirror } = useCodeMirror({
+      codeMirrorRef,
+      content: '{"test": "json"}',
+      language: "json"
+    });
+    expect(codeMirror.value).not.toBeNull();
+  });
+  it("should trigger onChange callback", () => {
+    let changedContent = "";
+    const codeMirrorRef = ref(document.createElement("div"));
+    const { setCodeMirrorContent } = useCodeMirror({
+      codeMirrorRef,
+      content: "initial",
+      language: void 0,
+      onChange: (content) => {
+        changedContent = content;
+      }
+    });
+    setCodeMirrorContent("new content");
+    expect(changedContent).toBe("new content");
+  });
+  it("should handle placeholder text", () => {
+    const codeMirrorRef = ref(document.createElement("div"));
+    const { codeMirror } = useCodeMirror({
+      codeMirrorRef,
+      content: "",
+      language: void 0,
+      placeholder: "Type something..."
+    });
+    expect(codeMirror.value?.dom.querySelector(".cm-placeholder")).not.toBeNull();
+  });
+});
+//# sourceMappingURL=useCodeMirror.test.js.map

package/dist/hooks/useCodeMirror.test.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/hooks/useCodeMirror.test.ts"],
+  "sourcesContent": ["// @vitest-environment jsdom\nimport { EditorView } from '@codemirror/view'\nimport { describe, expect, it } from 'vitest'\nimport { ref } from 'vue'\n\nimport { useCodeMirror } from '../hooks/useCodeMirror'\n\ndescribe('useCodeMirror', () => {\n  it('should initialize with basic configuration', () => {\n    const codeMirrorRef = ref(document.createElement('div'))\n    const { codeMirror } = useCodeMirror({\n      codeMirrorRef,\n      content: '',\n      language: undefined,\n    })\n    expect(codeMirror.value).not.toBeNull()\n  })\n\n  it('should update content when content prop changes', () => {\n    const codeMirrorRef = ref(document.createElement('div'))\n    const { codeMirror, setCodeMirrorContent } = useCodeMirror({\n      codeMirrorRef,\n      content: 'initial',\n      language: undefined,\n    })\n\n    setCodeMirrorContent('updated content')\n    expect(codeMirror.value?.state.doc.toString()).toBe('updated content')\n  })\n\n  it('should handle read-only mode', () => {\n    const codeMirrorRef = ref(document.createElement('div'))\n    const { codeMirror } = useCodeMirror({\n      codeMirrorRef,\n      content: 'test content',\n      language: undefined,\n      readOnly: true,\n    })\n\n    expect(codeMirror.value?.state.facet(EditorView.editable)).toBe(false)\n  })\n\n  it('should support different languages', () => {\n    const codeMirrorRef = ref(document.createElement('div'))\n    const { codeMirror } = useCodeMirror({\n      codeMirrorRef,\n      content: '{\"test\": \"json\"}',\n      language: 'json',\n    })\n\n    expect(codeMirror.value).not.toBeNull()\n  })\n\n  it('should trigger onChange callback', () => {\n    let changedContent = ''\n    const codeMirrorRef = ref(document.createElement('div'))\n    const { setCodeMirrorContent } = useCodeMirror({\n      codeMirrorRef,\n      content: 'initial',\n      language: undefined,\n      onChange: (content) => {\n        changedContent = content\n      },\n    })\n\n    setCodeMirrorContent('new content')\n    expect(changedContent).toBe('new content')\n  })\n\n  it('should handle placeholder text', () => {\n    const codeMirrorRef = ref(document.createElement('div'))\n    const { codeMirror } = useCodeMirror({\n      codeMirrorRef,\n      content: '',\n      language: undefined,\n      placeholder: 'Type something...',\n    })\n\n    expect(codeMirror.value?.dom.querySelector('.cm-placeholder')).not.toBeNull()\n  })\n})\n"],
+  "mappings": "AACA,SAAS,kBAAkB;AAC3B,SAAS,UAAU,QAAQ,UAAU;AACrC,SAAS,WAAW;AAEpB,SAAS,qBAAqB;AAE9B,SAAS,iBAAiB,MAAM;AAC9B,KAAG,8CAA8C,MAAM;AACrD,UAAM,gBAAgB,IAAI,SAAS,cAAc,KAAK,CAAC;AACvD,UAAM,EAAE,WAAW,IAAI,cAAc;AAAA,MACnC;AAAA,MACA,SAAS;AAAA,MACT,UAAU;AAAA,IACZ,CAAC;AACD,WAAO,WAAW,KAAK,EAAE,IAAI,SAAS;AAAA,EACxC,CAAC;AAED,KAAG,mDAAmD,MAAM;AAC1D,UAAM,gBAAgB,IAAI,SAAS,cAAc,KAAK,CAAC;AACvD,UAAM,EAAE,YAAY,qBAAqB,IAAI,cAAc;AAAA,MACzD;AAAA,MACA,SAAS;AAAA,MACT,UAAU;AAAA,IACZ,CAAC;AAED,yBAAqB,iBAAiB;AACtC,WAAO,WAAW,OAAO,MAAM,IAAI,SAAS,CAAC,EAAE,KAAK,iBAAiB;AAAA,EACvE,CAAC;AAED,KAAG,gCAAgC,MAAM;AACvC,UAAM,gBAAgB,IAAI,SAAS,cAAc,KAAK,CAAC;AACvD,UAAM,EAAE,WAAW,IAAI,cAAc;AAAA,MACnC;AAAA,MACA,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,IACZ,CAAC;AAED,WAAO,WAAW,OAAO,MAAM,MAAM,WAAW,QAAQ,CAAC,EAAE,KAAK,KAAK;AAAA,EACvE,CAAC;AAED,KAAG,sCAAsC,MAAM;AAC7C,UAAM,gBAAgB,IAAI,SAAS,cAAc,KAAK,CAAC;AACvD,UAAM,EAAE,WAAW,IAAI,cAAc;AAAA,MACnC;AAAA,MACA,SAAS;AAAA,MACT,UAAU;AAAA,IACZ,CAAC;AAED,WAAO,WAAW,KAAK,EAAE,IAAI,SAAS;AAAA,EACxC,CAAC;AAED,KAAG,oCAAoC,MAAM;AAC3C,QAAI,iBAAiB;AACrB,UAAM,gBAAgB,IAAI,SAAS,cAAc,KAAK,CAAC;AACvD,UAAM,EAAE,qBAAqB,IAAI,cAAc;AAAA,MAC7C;AAAA,MACA,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU,CAAC,YAAY;AACrB,yBAAiB;AAAA,MACnB;AAAA,IACF,CAAC;AAED,yBAAqB,aAAa;AAClC,WAAO,cAAc,EAAE,KAAK,aAAa;AAAA,EAC3C,CAAC;AAED,KAAG,kCAAkC,MAAM;AACzC,UAAM,gBAAgB,IAAI,SAAS,cAAc,KAAK,CAAC;AACvD,UAAM,EAAE,WAAW,IAAI,cAAc;AAAA,MACnC;AAAA,MACA,SAAS;AAAA,MACT,UAAU;AAAA,MACV,aAAa;AAAA,IACf,CAAC;AAED,WAAO,WAAW,OAAO,IAAI,cAAc,iBAAiB,CAAC,EAAE,IAAI,SAAS;AAAA,EAC9E,CAAC;AACH,CAAC;",
+  "names": []
+}

package/dist/hooks/useDropdown.js

@@ -1,65 +1,58 @@
-import { watch } from 'vue';
-
-/** Custom hook to manage a dropdown in a CodeMirror editor */
+import { watch } from "vue";
 function useDropdown(params) {
-    const { codeMirror, query, showDropdown, dropdownPosition } = params;
-    function getCursorPos() {
-        return codeMirror.value?.state.selection.main.head || 0;
+  const { codeMirror, query, showDropdown, dropdownPosition } = params;
+  function getCursorPos() {
+    return codeMirror.value?.state.selection.main.head || 0;
+  }
+  function getCoordsAtPos(pos) {
+    return codeMirror.value?.coordsAtPos(pos);
+  }
+  function updateDropdownPosition() {
+    const cursorPos = getCursorPos();
+    requestAnimationFrame(() => {
+      const coords = getCoordsAtPos(cursorPos - query.value.length - 2);
+      if (coords) {
+        dropdownPosition.value = {
+          left: coords.left,
+          top: Math.max(coords.bottom)
+        };
+      }
+    });
+  }
+  watch(query, updateDropdownPosition);
+  function handleDropdownSelect(item) {
+    const formattedItem = `{{${item}}}`;
+    const cursor = getCursorPos();
+    const from = Math.max(0, cursor - query.value.length - 2);
+    const to = cursor;
+    codeMirror.value?.dispatch({
+      changes: { from, to, insert: formattedItem }
+    });
+    showDropdown.value = false;
+  }
+  function updateDropdownVisibility() {
+    const cursor = getCursorPos();
+    const text = codeMirror.value?.state.doc.sliceString(0, cursor) || "";
+    const lastOpenBraceIndex = text.lastIndexOf("{{");
+    const lastCloseBraceIndex = text.lastIndexOf("}}");
+    if (lastOpenBraceIndex > lastCloseBraceIndex) {
+      query.value = text.slice(lastOpenBraceIndex + 2);
+      showDropdown.value = true;
+      dropdownPosition.value = getCoordsAtPos(cursor) || { left: 0, top: 0 };
+      if (query.value === "") {
+        updateDropdownPosition();
+      }
+    } else {
+      showDropdown.value = false;
     }
-    function getCoordsAtPos(pos) {
-        return codeMirror.value?.coordsAtPos(pos);
-    }
-    /** Updates position of the dropdown based on the current cursor position */
-    function updateDropdownPosition() {
-        const cursorPos = getCursorPos();
-        requestAnimationFrame(() => {
-            const coords = getCoordsAtPos(cursorPos - query.value.length - 2);
-            if (coords) {
-                dropdownPosition.value = {
-                    left: coords.left,
-                    top: Math.max(coords.bottom),
-                };
-            }
-        });
-    }
-    // Watch for changes in the query and update the dropdown position
-    watch(query, updateDropdownPosition);
-    /** Inserts selected item at the current cursor position */
-    function handleDropdownSelect(item) {
-        const formattedItem = `{{${item}}}`;
-        const cursor = getCursorPos();
-        const from = Math.max(0, cursor - query.value.length - 2);
-        const to = cursor;
-        codeMirror.value?.dispatch({
-            changes: { from, to, insert: formattedItem },
-        });
-        showDropdown.value = false;
-    }
-    /** Updates dropdown visibility based on current cursor position */
-    function updateDropdownVisibility() {
-        const cursor = getCursorPos();
-        const text = codeMirror.value?.state.doc.sliceString(0, cursor) || '';
-        const lastOpenBraceIndex = text.lastIndexOf('{{');
-        const lastCloseBraceIndex = text.lastIndexOf('}}');
-        if (lastOpenBraceIndex > lastCloseBraceIndex) {
-            query.value = text.slice(lastOpenBraceIndex + 2);
-            showDropdown.value = true;
-            dropdownPosition.value = getCoordsAtPos(cursor) || { left: 0, top: 0 };
-            // Ensures dropdown position even if the query is empty
-            if (query.value === '') {
-                updateDropdownPosition();
-            }
-        }
-        else {
-            showDropdown.value = false;
-        }
-    }
-    // Watch for changes in the content and update the dropdown visibility
-    watch(() => codeMirror.value?.state.doc.toString(), updateDropdownVisibility);
-    return {
-        handleDropdownSelect,
-        updateDropdownVisibility,
-    };
+  }
+  watch(() => codeMirror.value?.state.doc.toString(), updateDropdownVisibility);
+  return {
+    handleDropdownSelect,
+    updateDropdownVisibility
+  };
 }
-
-export { useDropdown };
+export {
+  useDropdown
+};
+//# sourceMappingURL=useDropdown.js.map

package/dist/hooks/useDropdown.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/hooks/useDropdown.ts"],
+  "sourcesContent": ["import type { EditorView } from '@codemirror/view'\nimport { type Ref, watch } from 'vue'\n\n/** Custom hook to manage a dropdown in a CodeMirror editor */\nexport function useDropdown(params: {\n  codeMirror: Ref<EditorView | null>\n  onSelect?: (item: string) => void\n  query: Ref<string>\n  showDropdown: Ref<boolean>\n  dropdownPosition: Ref<{ left: number; top: number }>\n}) {\n  const { codeMirror, query, showDropdown, dropdownPosition } = params\n\n  function getCursorPos() {\n    return codeMirror.value?.state.selection.main.head || 0\n  }\n\n  function getCoordsAtPos(pos: number) {\n    return codeMirror.value?.coordsAtPos(pos)\n  }\n\n  /** Updates position of the dropdown based on the current cursor position */\n  function updateDropdownPosition() {\n    const cursorPos = getCursorPos()\n    requestAnimationFrame(() => {\n      const coords = getCoordsAtPos(cursorPos - query.value.length - 2)\n      if (coords) {\n        dropdownPosition.value = {\n          left: coords.left,\n          top: Math.max(coords.bottom),\n        }\n      }\n    })\n  }\n\n  // Watch for changes in the query and update the dropdown position\n  watch(query, updateDropdownPosition)\n\n  /** Inserts selected item at the current cursor position */\n  function handleDropdownSelect(item: string) {\n    const formattedItem = `{{${item}}}`\n    const cursor = getCursorPos()\n    const from = Math.max(0, cursor - query.value.length - 2)\n    const to = cursor\n    codeMirror.value?.dispatch({\n      changes: { from, to, insert: formattedItem },\n    })\n    showDropdown.value = false\n  }\n\n  /** Updates dropdown visibility based on current cursor position */\n  function updateDropdownVisibility() {\n    const cursor = getCursorPos()\n    const text = codeMirror.value?.state.doc.sliceString(0, cursor) || ''\n    const lastOpenBraceIndex = text.lastIndexOf('{{')\n    const lastCloseBraceIndex = text.lastIndexOf('}}')\n    if (lastOpenBraceIndex > lastCloseBraceIndex) {\n      query.value = text.slice(lastOpenBraceIndex + 2)\n      showDropdown.value = true\n      dropdownPosition.value = getCoordsAtPos(cursor) || { left: 0, top: 0 }\n      // Ensures dropdown position even if the query is empty\n      if (query.value === '') {\n        updateDropdownPosition()\n      }\n    } else {\n      showDropdown.value = false\n    }\n  }\n\n  // Watch for changes in the content and update the dropdown visibility\n  watch(() => codeMirror.value?.state.doc.toString(), updateDropdownVisibility)\n\n  return {\n    handleDropdownSelect,\n    updateDropdownVisibility,\n  }\n}\n"],
+  "mappings": "AACA,SAAmB,aAAa;AAGzB,SAAS,YAAY,QAMzB;AACD,QAAM,EAAE,YAAY,OAAO,cAAc,iBAAiB,IAAI;AAE9D,WAAS,eAAe;AACtB,WAAO,WAAW,OAAO,MAAM,UAAU,KAAK,QAAQ;AAAA,EACxD;AAEA,WAAS,eAAe,KAAa;AACnC,WAAO,WAAW,OAAO,YAAY,GAAG;AAAA,EAC1C;AAGA,WAAS,yBAAyB;AAChC,UAAM,YAAY,aAAa;AAC/B,0BAAsB,MAAM;AAC1B,YAAM,SAAS,eAAe,YAAY,MAAM,MAAM,SAAS,CAAC;AAChE,UAAI,QAAQ;AACV,yBAAiB,QAAQ;AAAA,UACvB,MAAM,OAAO;AAAA,UACb,KAAK,KAAK,IAAI,OAAO,MAAM;AAAA,QAC7B;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AAGA,QAAM,OAAO,sBAAsB;AAGnC,WAAS,qBAAqB,MAAc;AAC1C,UAAM,gBAAgB,KAAK,IAAI;AAC/B,UAAM,SAAS,aAAa;AAC5B,UAAM,OAAO,KAAK,IAAI,GAAG,SAAS,MAAM,MAAM,SAAS,CAAC;AACxD,UAAM,KAAK;AACX,eAAW,OAAO,SAAS;AAAA,MACzB,SAAS,EAAE,MAAM,IAAI,QAAQ,cAAc;AAAA,IAC7C,CAAC;AACD,iBAAa,QAAQ;AAAA,EACvB;AAGA,WAAS,2BAA2B;AAClC,UAAM,SAAS,aAAa;AAC5B,UAAM,OAAO,WAAW,OAAO,MAAM,IAAI,YAAY,GAAG,MAAM,KAAK;AACnE,UAAM,qBAAqB,KAAK,YAAY,IAAI;AAChD,UAAM,sBAAsB,KAAK,YAAY,IAAI;AACjD,QAAI,qBAAqB,qBAAqB;AAC5C,YAAM,QAAQ,KAAK,MAAM,qBAAqB,CAAC;AAC/C,mBAAa,QAAQ;AACrB,uBAAiB,QAAQ,eAAe,MAAM,KAAK,EAAE,MAAM,GAAG,KAAK,EAAE;AAErE,UAAI,MAAM,UAAU,IAAI;AACtB,+BAAuB;AAAA,MACzB;AAAA,IACF,OAAO;AACL,mBAAa,QAAQ;AAAA,IACvB;AAAA,EACF;AAGA,QAAM,MAAM,WAAW,OAAO,MAAM,IAAI,SAAS,GAAG,wBAAwB;AAE5E,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/hooks/variables.js

@@ -1,24 +1,33 @@
-import { MatchDecorator, Decoration, ViewPlugin, EditorView } from '@codemirror/view';
-
+import {
+  Decoration,
+  EditorView,
+  MatchDecorator,
+  ViewPlugin
+} from "@codemirror/view";
 const variableHighlighterDecoration = new MatchDecorator({
-    regexp: /(\{[^}]+\})/g,
-    decoration: () => Decoration.mark({
-        attributes: {
-            class: 'api-client-url-variable',
-        },
-    }),
+  regexp: /(\{[^}]+\})/g,
+  decoration: () => Decoration.mark({
+    attributes: {
+      class: "api-client-url-variable"
+    }
+  })
 });
-const variables = () => ViewPlugin.fromClass(class {
+const variables = () => ViewPlugin.fromClass(
+  class {
     variables;
     constructor(view) {
-        this.variables = variableHighlighterDecoration.createDeco(view);
+      this.variables = variableHighlighterDecoration.createDeco(view);
     }
     update(update) {
-        this.variables = variableHighlighterDecoration.updateDeco(update, this.variables);
+      this.variables = variableHighlighterDecoration.updateDeco(update, this.variables);
     }
-}, {
+  },
+  {
     decorations: (instance) => instance.variables,
-    provide: (plugin) => EditorView.atomicRanges.of((view) => view.plugin(plugin)?.variables || Decoration.none),
-});
-
-export { variables };
+    provide: (plugin) => EditorView.atomicRanges.of((view) => view.plugin(plugin)?.variables || Decoration.none)
+  }
+);
+export {
+  variables
+};
+//# sourceMappingURL=variables.js.map

package/dist/hooks/variables.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/hooks/variables.ts"],
+  "sourcesContent": ["import {\n  Decoration,\n  type DecorationSet,\n  EditorView,\n  MatchDecorator,\n  ViewPlugin,\n  type ViewUpdate,\n} from '@codemirror/view'\n\nconst variableHighlighterDecoration = new MatchDecorator({\n  regexp: /(\\{[^}]+\\})/g,\n  decoration: () =>\n    Decoration.mark({\n      attributes: {\n        class: 'api-client-url-variable',\n      },\n    }),\n})\n\nexport const variables = () =>\n  ViewPlugin.fromClass(\n    class {\n      variables: DecorationSet\n      constructor(view: EditorView) {\n        this.variables = variableHighlighterDecoration.createDeco(view)\n      }\n      update(update: ViewUpdate) {\n        this.variables = variableHighlighterDecoration.updateDeco(update, this.variables)\n      }\n    },\n    {\n      decorations: (instance) => instance.variables,\n      provide: (plugin) => EditorView.atomicRanges.of((view) => view.plugin(plugin)?.variables || Decoration.none),\n    },\n  )\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAEP,MAAM,gCAAgC,IAAI,eAAe;AAAA,EACvD,QAAQ;AAAA,EACR,YAAY,MACV,WAAW,KAAK;AAAA,IACd,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,EACF,CAAC;AACL,CAAC;AAEM,MAAM,YAAY,MACvB,WAAW;AAAA,EACT,MAAM;AAAA,IACJ;AAAA,IACA,YAAY,MAAkB;AAC5B,WAAK,YAAY,8BAA8B,WAAW,IAAI;AAAA,IAChE;AAAA,IACA,OAAO,QAAoB;AACzB,WAAK,YAAY,8BAA8B,WAAW,QAAQ,KAAK,SAAS;AAAA,IAClF;AAAA,EACF;AAAA,EACA;AAAA,IACE,aAAa,CAAC,aAAa,SAAS;AAAA,IACpC,SAAS,CAAC,WAAW,WAAW,aAAa,GAAG,CAAC,SAAS,KAAK,OAAO,MAAM,GAAG,aAAa,WAAW,IAAI;AAAA,EAC7G;AACF;",
+  "names": []
+}

package/dist/index.d.ts

@@ -2,5 +2,5 @@ export { type Extension, RangeSetBuilder, StateEffect } from '@codemirror/state'
 export { colorPicker } from '@replit/codemirror-css-color-picker';
 export { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate, WidgetType, } from '@codemirror/view';
 export * from './hooks/index.js';
-export * from './types';
+export * from './types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,5 +1,20 @@
-export { RangeSetBuilder, StateEffect } from '@codemirror/state';
-export { colorPicker } from '@replit/codemirror-css-color-picker';
-export { Decoration, EditorView, ViewPlugin, WidgetType } from '@codemirror/view';
-export { useCodeMirror } from './hooks/useCodeMirror.js';
-export { useDropdown } from './hooks/useDropdown.js';
+import { RangeSetBuilder, StateEffect } from "@codemirror/state";
+import { colorPicker } from "@replit/codemirror-css-color-picker";
+import {
+  Decoration,
+  EditorView,
+  ViewPlugin,
+  WidgetType
+} from "@codemirror/view";
+export * from "./hooks/index.js";
+export * from "./types.js";
+export {
+  Decoration,
+  EditorView,
+  RangeSetBuilder,
+  StateEffect,
+  ViewPlugin,
+  WidgetType,
+  colorPicker
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "sourcesContent": ["export { type Extension, RangeSetBuilder, StateEffect } from '@codemirror/state'\nexport { colorPicker } from '@replit/codemirror-css-color-picker'\n\nexport {\n  Decoration,\n  type DecorationSet,\n  EditorView,\n  ViewPlugin,\n  type ViewUpdate,\n  WidgetType,\n} from '@codemirror/view'\n\nexport * from './hooks'\nexport * from './types'\n"],
+  "mappings": "AAAA,SAAyB,iBAAiB,mBAAmB;AAC7D,SAAS,mBAAmB;AAE5B;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,EAEA;AAAA,OACK;AAEP,cAAc;AACd,cAAc;",
+  "names": []
+}

package/dist/themes/createCodeMirrorTheme.js

@@ -1,85 +1,76 @@
-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.
- */
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { EditorView } from "@codemirror/view";
 const createCodeMirrorTheme = ({ theme, settings = {}, styles = [] }) => {
-    const themeOptions = {
-        '.cm-gutters': {},
+  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
     };
-    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;
+  }
+  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
 };
-
-export { createCodeMirrorTheme };
+//# sourceMappingURL=createCodeMirrorTheme.js.map

package/dist/themes/createCodeMirrorTheme.js.map

@@ -0,0 +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;",
+  "names": []
+}

package/dist/themes/createCodeMirrorTheme.test.js

@@ -0,0 +1,18 @@
+import { describe, expect, it } from "vitest";
+import { createCodeMirrorTheme } from "./createCodeMirrorTheme.js";
+describe("createCodeMirrorTheme", () => {
+  it("creates a theme", () => {
+    const theme = createCodeMirrorTheme({
+      theme: "light",
+      settings: {
+        background: "#ffffff",
+        foreground: "#000000",
+        caret: "#ff0000"
+      },
+      styles: []
+    });
+    expect(theme).toBeInstanceOf(Array);
+    expect(theme).toHaveLength(2);
+  });
+});
+//# sourceMappingURL=createCodeMirrorTheme.test.js.map

package/dist/themes/createCodeMirrorTheme.test.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/themes/createCodeMirrorTheme.test.ts"],
+  "sourcesContent": ["import { describe, expect, it } from 'vitest'\n\nimport { createCodeMirrorTheme } from './createCodeMirrorTheme'\n\ndescribe('createCodeMirrorTheme', () => {\n  it('creates a theme', () => {\n    const theme = createCodeMirrorTheme({\n      theme: 'light',\n      settings: {\n        background: '#ffffff',\n        foreground: '#000000',\n        caret: '#ff0000',\n      },\n      styles: [],\n    })\n\n    expect(theme).toBeInstanceOf(Array)\n    expect(theme).toHaveLength(2)\n  })\n})\n"],
+  "mappings": "AAAA,SAAS,UAAU,QAAQ,UAAU;AAErC,SAAS,6BAA6B;AAEtC,SAAS,yBAAyB,MAAM;AACtC,KAAG,mBAAmB,MAAM;AAC1B,UAAM,QAAQ,sBAAsB;AAAA,MAClC,OAAO;AAAA,MACP,UAAU;AAAA,QACR,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,OAAO;AAAA,MACT;AAAA,MACA,QAAQ,CAAC;AAAA,IACX,CAAC;AAED,WAAO,KAAK,EAAE,eAAe,KAAK;AAClC,WAAO,KAAK,EAAE,aAAa,CAAC;AAAA,EAC9B,CAAC;AACH,CAAC;",
+  "names": []
+}