@scalar/use-codemirror 0.11.53 → 0.11.54

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @scalar/use-codemirror
 
+## 0.11.54
+
+### Patch Changes
+
+- ec44fe1: refactor: make useCodeMirror testable
+- ec44fe1: chore: remove CodeMirror component
+- Updated dependencies [46ebb44]
+  - @scalar/components@0.13.10
+
 ## 0.11.53
 
 ### Patch Changes

package/README.md

@@ -1,4 +1,4 @@
-# Scalar useCodeMirror()
+# CodeMirror Hook for Vue
 
 [![Version](https://img.shields.io/npm/v/%40scalar/use-codemirror)](https://www.npmjs.com/package/@scalar/use-codemirror)
 [![Downloads](https://img.shields.io/npm/dm/%40scalar/use-codemirror)](https://www.npmjs.com/package/@scalar/use-codemirror)
@@ -15,12 +15,31 @@ npm install @scalar/use-codemirror
 
 ```vue
 <script setup>
-import { CodeMirror } from '@scalar/use-codemirror'
+import { useCodeMirror } from '@scalar/use-codemirror'
+import { ref } from 'vue'
+
+const editor = ref(null)
+
+const { codeMirror, setCodeMirrorContent } = useCodeMirror({
+  codeMirrorRef: editor,
+  content: '{ "foo": "bar" }',
+  language: 'json',
+  lineNumbers: true,
+  onChange: (value) => {
+    console.log('Content changed:', value)
+  },
+})
 </script>
 
-<CodeMirror
-  class="my-custom-class"
-  content="const foobar = true"
-  readOnly
-  @change="(value) => …" />
+<template>
+  <div ref="editor" />
+</template>
 ```
+
+## Community
+
+We are API nerds. You too? Let’s chat on Discord: <https://discord.gg/scalar>
+
+## License
+
+The source code in this repository is licensed under [MIT](https://github.com/scalar/scalar/blob/main/LICENSE).

package/dist/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export * from './useCodeMirror.js';
+export * from './useDropdown.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA"}

package/dist/hooks/index.js

@@ -0,0 +1,2 @@
+export { useCodeMirror } from './useCodeMirror.js';
+export { useDropdown } from './useDropdown.js';

package/dist/hooks/useCodeMirror.js

@@ -1,272 +1,319 @@
-import { autocompletion as B, completionKeymap as D, closeBrackets as z, closeBracketsKeymap as A } from "@codemirror/autocomplete";
-import { indentWithTab as K, insertNewline as V } from "@codemirror/commands";
-import { css as G } from "@codemirror/lang-css";
-import { html as P } from "@codemirror/lang-html";
-import { json as q } from "@codemirror/lang-json";
-import { xml as F } from "@codemirror/lang-xml";
-import { yaml as J } from "@codemirror/lang-yaml";
-import { syntaxHighlighting as U, defaultHighlightStyle as W, indentOnInput as Q, bracketMatching as x, foldGutter as E } from "@codemirror/language";
-import { linter as X } from "@codemirror/lint";
-import { StateEffect as Y } from "@codemirror/state";
-import { EditorView as h, highlightSpecialChars as Z, keymap as u, placeholder as _, lineNumbers as $ } from "@codemirror/view";
-import { ScalarIcon as C } from "@scalar/components";
-import { ref as ee, watch as p, onBeforeUnmount as te, toValue as t, computed as oe, h as M, render as S } from "vue";
-import { customTheme as re } from "../themes/index.js";
-import { variables as ne } from "./variables.js";
-const a = (e) => "provider" in e && !!t(e.provider), ie = {
-  key: "Mod-a",
-  run: (e) => (e.dispatch({
-    selection: { anchor: 0, head: e.state.doc.length },
-    scrollIntoView: !1
-  }), !0)
-}, xe = (e) => {
-  const n = ee(null);
-  p(
-    e.codeMirrorRef,
-    () => {
-      var o;
-      (o = n.value) == null || o.destroy(), c();
-    },
-    { immediate: !0 }
-  ), te(() => {
-    var o;
-    return (o = n.value) == null ? void 0 : o.destroy();
-  });
-  function c() {
-    if (e.codeMirrorRef.value) {
-      const o = a(e) ? t(e.provider) : null, m = T({
-        ...f.value,
-        provider: o
-      });
-      n.value = new h({
-        parent: e.codeMirrorRef.value,
-        extensions: m
-      }), a(e) || l(t(e.content));
-    }
-  }
-  const f = oe(() => ({
-    onChange: e.onChange,
-    onBlur: e.onBlur,
-    onFocus: e.onFocus,
-    disableTabIndent: t(e.disableTabIndent),
-    language: t(e.language),
-    classes: t(e.classes),
-    readOnly: t(e.readOnly),
-    lineNumbers: t(e.lineNumbers),
-    withVariables: t(e.withVariables),
-    forceFoldGutter: t(e.forceFoldGutter),
-    disableEnter: t(e.disableEnter),
-    disableCloseBrackets: t(e.disableCloseBrackets),
-    withoutTheme: t(e.withoutTheme),
-    lint: t(e.lint),
-    additionalExtensions: t(e.extensions),
-    placeholder: t(e.placeholder)
-  }));
-  p(
-    () => a(e) ? t(e.provider) : null,
-    () => {
-      var o;
-      a(e) && ((o = n.value) == null || o.destroy(), c());
-    }
-  ), p(
-    f,
-    () => {
-      if (n.value) {
-        const o = a(e) ? t(e.provider) : null, m = T({
-          ...f.value,
-          provider: o
-        });
-        requestAnimationFrame(() => {
-          var g;
-          (g = n.value) == null || g.dispatch({
-            effects: Y.reconfigure.of(m)
-          });
+import { autocompletion, completionKeymap, closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
+import { indentWithTab, insertNewline } from '@codemirror/commands';
+import { css } from '@codemirror/lang-css';
+import { html } from '@codemirror/lang-html';
+import { json } from '@codemirror/lang-json';
+import { xml } from '@codemirror/lang-xml';
+import { yaml } from '@codemirror/lang-yaml';
+import { syntaxHighlighting, defaultHighlightStyle, indentOnInput, bracketMatching, foldGutter } from '@codemirror/language';
+import { linter } from '@codemirror/lint';
+import { StateEffect } from '@codemirror/state';
+import { EditorView, highlightSpecialChars, keymap, placeholder, lineNumbers } from '@codemirror/view';
+import { ScalarIcon } from '@scalar/components';
+import { ref, computed, toValue, watch, onBeforeUnmount, h, render } from 'vue';
+import { customTheme } from '../themes/index.js';
+import { variables } from './variables.js';
+
+/** Check if the hook has a provider. In provider mode we ignore the content variable */
+const hasProvider = (params) => 'provider' in params && !!toValue(params.provider);
+const selectAllKeyBinding = {
+    key: 'Mod-a',
+    run: (view) => {
+        // Select the entire content
+        view.dispatch({
+            selection: { anchor: 0, head: view.state.doc.length },
+            scrollIntoView: false,
         });
-      } else
-        return;
+        return true;
     },
-    { immediate: !0 }
-  );
-  const l = (o = "") => {
-    n.value && n.value.state.doc.toString() !== o && n.value.dispatch({
-      changes: {
-        from: 0,
-        to: n.value.state.doc.length,
-        insert: o
-      },
-      selection: {
-        anchor: Math.min(
-          n.value.state.selection.main.anchor,
-          o.length
-        )
-      }
-    });
-  };
-  return p(
-    () => t(e.content),
-    () => {
-      a(e) || l(t(e.content));
-    },
-    { immediate: !0 }
-  ), {
-    /** Replaces the current content with the given value. */
-    setCodeMirrorContent: l,
-    /** Codemirror instance */
-    codeMirror: n
-  };
-}, w = {
-  html: P,
-  json: q,
-  yaml: J,
-  css: G,
-  xml: F
 };
-function T({
-  onChange: e,
-  onBlur: n,
-  onFocus: c,
-  provider: f,
-  language: l,
-  classes: o = [],
-  readOnly: m = !1,
-  lineNumbers: g = !1,
-  withVariables: N = !1,
-  forceFoldGutter: v = !1,
-  disableEnter: O = !1,
-  disableCloseBrackets: H = !1,
-  disableTabIndent: I = !1,
-  withoutTheme: L = !1,
-  lint: R = !1,
-  additionalExtensions: j = [],
-  placeholder: b
-}) {
-  const r = [
-    Z(),
-    U(W, { fallback: !0 }),
-    h.theme({
-      ".cm-line": {
-        lineHeight: "20px",
-        padding: "0 2px 0 4px"
-      },
-      ".cm-gutterElement": {
-        lineHeight: "20px"
-      },
-      ".cm-tooltip": {
-        border: "1px solid #f5c6cb",
-        fontSize: "12px"
-      },
-      ".cm-tooltip-lint": {
-        backgroundColor: "#ffffff"
-      },
-      ".cm-diagnostic-error": {
-        borderLeft: "0",
-        color: "#dc1b19"
-      },
-      ".cm-foldPlaceholder": {
-        background: "var(--scalar-background-1)",
-        border: "none",
-        fontFamily: "var(--scalar-font)"
-      }
-    }),
-    // Listen to updates
-    h.updateListener.of((s) => {
-      s.docChanged && (e == null || e(s.state.doc.toString()));
-    }),
-    h.domEventHandlers({
-      blur: (s, i) => {
-        n == null || n(i.state.doc.toString());
-      },
-      focus: (s, i) => {
-        c == null || c(i.state.doc.toString());
-      }
-    }),
-    // Add Classes
-    h.editorAttributes.of({ class: o.join(" ") }),
-    ...j
-  ];
-  if (f && r.push(f), L || r.push(re), m ? r.push(h.editable.of(!1)) : (r.push(
-    Q(),
-    x(),
-    B(),
-    u.of([...D, ie]),
-    x()
-  ), H || r.push(z(), u.of([...A])), I ? r.push(
-    u.of([
-      {
-        key: "Tab",
-        run: () => !1,
-        // Prevent default Tab behavior
-        shift: () => !1
-        // Prevent default Shift+Tab behavior
-      }
-    ])
-  ) : r.push(u.of([K]))), b && r.push(_(b)), g && r.push($()), v && r.push(
-    E({
-      markerDOM: (s) => {
-        const i = document.createElement("div");
-        i.classList.add("cm-foldMarker");
-        const d = M(C, {
-          icon: s ? "ChevronDown" : "ChevronRight",
-          size: "xs"
-        });
-        return S(d, i), i;
-      }
-    })
-  ), l && w[l] && (r.push(w[l]()), v || r.push(
-    E({
-      markerDOM: (s) => {
-        const i = document.createElement("div");
-        i.classList.add("cm-foldMarker");
-        const d = M(C, {
-          icon: s ? "ChevronDown" : "ChevronRight",
-          size: "xs"
+/** Reactive CodeMirror Integration */
+const useCodeMirror = (params) => {
+    const codeMirror = ref(null);
+    /** Set the codemirror content value */
+    const setCodeMirrorContent = (newValue = '') => {
+        if (!codeMirror.value)
+            return;
+        // No need to set the CodeMirror content if nothing has changed
+        if (codeMirror.value.state.doc.toString() === newValue)
+            return;
+        codeMirror.value.dispatch({
+            changes: {
+                from: 0,
+                to: codeMirror.value.state.doc.length,
+                insert: newValue,
+            },
+            selection: {
+                anchor: Math.min(codeMirror.value.state.selection.main.anchor, newValue.length),
+            },
         });
-        return S(d, i), i;
-      }
-    })
-  )), R && l === "json") {
-    const s = X((i) => {
-      const d = [], y = i.state.doc.toString();
-      if (y.trim())
-        try {
-          JSON.parse(y);
-        } catch (k) {
-          k instanceof Error && d.push({
-            from: 0,
-            to: i.state.doc.length,
-            severity: "error",
-            message: k.message
-          });
+    };
+    // All options except provider
+    const extensionConfig = computed(() => ({
+        onChange: params.onChange,
+        onBlur: params.onBlur,
+        onFocus: params.onFocus,
+        disableTabIndent: toValue(params.disableTabIndent),
+        language: toValue(params.language),
+        classes: toValue(params.classes),
+        readOnly: toValue(params.readOnly),
+        lineNumbers: toValue(params.lineNumbers),
+        withVariables: toValue(params.withVariables),
+        forceFoldGutter: toValue(params.forceFoldGutter),
+        disableEnter: toValue(params.disableEnter),
+        disableCloseBrackets: toValue(params.disableCloseBrackets),
+        withoutTheme: toValue(params.withoutTheme),
+        lint: toValue(params.lint),
+        additionalExtensions: toValue(params.extensions),
+        placeholder: toValue(params.placeholder),
+    }));
+    // Unmounts CodeMirror if it’s mounted already, and mounts CodeMirror, if the given ref exists.
+    watch(params.codeMirrorRef, () => {
+        codeMirror.value?.destroy();
+        mountCodeMirror();
+    }, { immediate: true });
+    // Cleanup codemirror
+    onBeforeUnmount(() => codeMirror.value?.destroy());
+    // Initializes CodeMirror.
+    function mountCodeMirror() {
+        if (params.codeMirrorRef.value) {
+            const provider = hasProvider(params) ? toValue(params.provider) : null;
+            const extensions = getCodeMirrorExtensions({
+                ...extensionConfig.value,
+                provider,
+            });
+            codeMirror.value = new EditorView({
+                parent: params.codeMirrorRef.value,
+                extensions,
+            });
+            // Set the initial content if a provider is not in use
+            if (!hasProvider(params))
+                setCodeMirrorContent(toValue(params.content));
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // Provider must be watched separately because we need to restart codemirror if the provider changes
+    watch(() => (hasProvider(params) ? toValue(params.provider) : null), () => {
+        if (hasProvider(params)) {
+            codeMirror.value?.destroy();
+            mountCodeMirror();
         }
-      return d;
     });
-    r.push(s);
-  }
-  return N && r.push(ne()), O ? r.push(
-    u.of([
-      {
-        key: "Enter",
-        run: () => !0
-      },
-      {
-        key: "Ctrl-Enter",
-        mac: "Cmd-Enter",
-        run: () => !0
-      },
-      {
-        key: "Shift-Enter",
-        run: () => !0
-      }
-    ])
-  ) : r.push(
-    u.of([
-      {
-        key: "Enter",
-        run: V
-      }
-    ])
-  ), r;
-}
-export {
-  xe as useCodeMirror
+    // Update the extensions whenever parameters changes
+    watch(extensionConfig, () => {
+        if (!codeMirror.value)
+            return;
+        // If a provider is
+        else {
+            const provider = hasProvider(params) ? toValue(params.provider) : null;
+            const extensions = getCodeMirrorExtensions({
+                ...extensionConfig.value,
+                provider,
+            });
+            requestAnimationFrame(() => {
+                codeMirror.value?.dispatch({
+                    effects: StateEffect.reconfigure.of(extensions),
+                });
+            });
+        }
+    }, { immediate: true });
+    // ---------------------------------------------------------------------------
+    // Keep the content in sync when the content is managed externally
+    watch(() => toValue(params.content), () => {
+        // When a provider is in use we do not map the content value back to the codemirror instance
+        if (hasProvider(params))
+            return;
+        setCodeMirrorContent(toValue(params.content));
+    }, { immediate: true });
+    return {
+        /** Replaces the current content with the given value. */
+        setCodeMirrorContent,
+        /** Codemirror instance */
+        codeMirror,
+    };
+};
+// ---------------------------------------------------------------------------
+const languageExtensions = {
+    html: html,
+    json: json,
+    yaml: yaml,
+    css: css,
+    xml: xml,
 };
+/** Generate  the list of extension from parameters */
+function getCodeMirrorExtensions({ onChange, onBlur, onFocus, provider, language, classes = [], readOnly = false, lineNumbers: lineNumbers$1 = false, withVariables = false, forceFoldGutter = false, disableEnter = false, disableCloseBrackets = false, disableTabIndent = false, withoutTheme = false, lint = false, additionalExtensions = [], placeholder: placeholder$1, }) {
+    const extensions = [
+        highlightSpecialChars(),
+        syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+        EditorView.theme({
+            '.cm-line': {
+                lineHeight: '20px',
+                padding: '0 2px 0 4px',
+            },
+            '.cm-gutterElement': {
+                lineHeight: '20px',
+            },
+            '.cm-tooltip': {
+                border: '1px solid #f5c6cb',
+                fontSize: '12px',
+            },
+            '.cm-tooltip-lint': {
+                backgroundColor: '#ffffff',
+            },
+            '.cm-diagnostic-error': {
+                borderLeft: '0',
+                color: '#dc1b19',
+            },
+            '.cm-foldPlaceholder': {
+                background: 'var(--scalar-background-1)',
+                border: 'none',
+                fontFamily: 'var(--scalar-font)',
+            },
+        }),
+        // Listen to updates
+        EditorView.updateListener.of((v) => {
+            if (!v.docChanged)
+                return;
+            onChange?.(v.state.doc.toString());
+        }),
+        EditorView.domEventHandlers({
+            blur: (event, view) => {
+                onBlur?.(view.state.doc.toString());
+            },
+            focus: (event, view) => {
+                onFocus?.(view.state.doc.toString());
+            },
+        }),
+        // Add Classes
+        EditorView.editorAttributes.of({ class: classes.join(' ') }),
+        ...additionalExtensions,
+    ];
+    // Enable the provider
+    if (provider)
+        extensions.push(provider);
+    // Add the theme as needed
+    if (!withoutTheme)
+        extensions.push(customTheme);
+    // Read only
+    if (readOnly) {
+        extensions.push(EditorView.editable.of(false));
+    }
+    else {
+        extensions.push(indentOnInput(), bracketMatching(), autocompletion(), keymap.of([...completionKeymap, selectAllKeyBinding]), bracketMatching());
+        if (!disableCloseBrackets)
+            extensions.push(closeBrackets(), keymap.of([...closeBracketsKeymap]));
+        if (disableTabIndent) {
+            extensions.push(keymap.of([
+                {
+                    key: 'Tab',
+                    run: () => false, // Prevent default Tab behavior
+                    shift: () => false, // Prevent default Shift+Tab behavior
+                },
+            ]));
+        }
+        else {
+            extensions.push(keymap.of([indentWithTab]));
+        }
+    }
+    // Add placeholder extension if placeholder is provided
+    if (placeholder$1) {
+        extensions.push(placeholder(placeholder$1));
+    }
+    // Line numbers
+    if (lineNumbers$1) {
+        extensions.push(lineNumbers());
+    }
+    if (forceFoldGutter) {
+        extensions.push(foldGutter({
+            markerDOM: (open) => {
+                const icon = document.createElement('div');
+                icon.classList.add('cm-foldMarker');
+                const vnode = h(ScalarIcon, {
+                    icon: open ? 'ChevronDown' : 'ChevronRight',
+                    size: 'xs',
+                });
+                render(vnode, icon);
+                return icon;
+            },
+        }));
+    }
+    // Syntax highlighting
+    if (language && languageExtensions[language]) {
+        extensions.push(languageExtensions[language]());
+        if (!forceFoldGutter) {
+            extensions.push(foldGutter({
+                markerDOM: (open) => {
+                    const icon = document.createElement('div');
+                    icon.classList.add('cm-foldMarker');
+                    const vnode = h(ScalarIcon, {
+                        icon: open ? 'ChevronDown' : 'ChevronRight',
+                        size: 'xs',
+                    });
+                    render(vnode, icon);
+                    return icon;
+                },
+            }));
+        }
+    }
+    // JSON Linter
+    if (lint && language === 'json') {
+        const jsonLinter = linter((view) => {
+            const diagnostics = [];
+            const content = view.state.doc.toString();
+            if (content.trim()) {
+                try {
+                    JSON.parse(content);
+                }
+                catch (e) {
+                    if (e instanceof Error) {
+                        diagnostics.push({
+                            from: 0,
+                            to: view.state.doc.length,
+                            severity: 'error',
+                            message: e.message,
+                        });
+                    }
+                }
+            }
+            return diagnostics;
+        });
+        extensions.push(jsonLinter);
+    }
+    // Highlight variables
+    if (withVariables)
+        extensions.push(variables());
+    if (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;
+                },
+            },
+        ]));
+    }
+    else {
+        extensions.push(keymap.of([
+            {
+                key: 'Enter',
+                run: insertNewline,
+            },
+        ]));
+    }
+    return extensions;
+}
+
+export { useCodeMirror };

package/dist/hooks/useDropdown.js

@@ -1,45 +1,65 @@
-import { watch as v } from "vue";
-function x(m) {
-  const { codeMirror: e, query: n, showDropdown: r, dropdownPosition: u } = m;
-  function c() {
-    var t;
-    return ((t = e.value) == null ? void 0 : t.state.selection.main.head) || 0;
-  }
-  function i(t) {
-    var o;
-    return (o = e.value) == null ? void 0 : o.coordsAtPos(t);
-  }
-  function d() {
-    const t = c();
-    requestAnimationFrame(() => {
-      const o = i(t - n.value.length - 2);
-      o && (u.value = {
-        left: o.left,
-        top: Math.max(o.bottom)
-      });
-    });
-  }
-  v(n, d);
-  function h(t) {
-    var p;
-    const o = `{{${t}}}`, s = c(), l = Math.max(0, s - n.value.length - 2), a = s;
-    (p = e.value) == null || p.dispatch({
-      changes: { from: l, to: a, insert: o }
-    }), r.value = !1;
-  }
-  function f() {
-    var a;
-    const t = c(), o = ((a = e.value) == null ? void 0 : a.state.doc.sliceString(0, t)) || "", s = o.lastIndexOf("{{"), l = o.lastIndexOf("}}");
-    s > l ? (n.value = o.slice(s + 2), r.value = !0, u.value = i(t) || { left: 0, top: 0 }, n.value === "" && d()) : r.value = !1;
-  }
-  return v(() => {
-    var t;
-    return (t = e.value) == null ? void 0 : t.state.doc.toString();
-  }, f), {
-    handleDropdownSelect: h,
-    updateDropdownVisibility: f
-  };
+import { watch } from 'vue';
+
+/** Custom hook to manage a dropdown in a CodeMirror editor */
+function useDropdown(params) {
+    const { codeMirror, query, showDropdown, dropdownPosition } = params;
+    function getCursorPos() {
+        return codeMirror.value?.state.selection.main.head || 0;
+    }
+    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,
+    };
 }
-export {
-  x as useDropdown
-};
+
+export { useDropdown };

package/dist/hooks/variables.js

@@ -1,37 +1,24 @@
-var s = Object.defineProperty;
-var c = (a, e, i) => e in a ? s(a, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : a[e] = i;
-var r = (a, e, i) => c(a, typeof e != "symbol" ? e + "" : e, i);
-import { MatchDecorator as l, Decoration as t, ViewPlugin as n, EditorView as b } from "@codemirror/view";
-const o = new l({
-  regexp: /(\{[^}]+\})/g,
-  decoration: () => t.mark({
-    attributes: {
-      class: "api-client-url-variable"
+import { MatchDecorator, Decoration, ViewPlugin, EditorView } from '@codemirror/view';
+
+const variableHighlighterDecoration = new MatchDecorator({
+    regexp: /(\{[^}]+\})/g,
+    decoration: () => Decoration.mark({
+        attributes: {
+            class: 'api-client-url-variable',
+        },
+    }),
+});
+const variables = () => ViewPlugin.fromClass(class {
+    variables;
+    constructor(view) {
+        this.variables = variableHighlighterDecoration.createDeco(view);
     }
-  })
-}), g = () => n.fromClass(
-  class {
-    constructor(a) {
-      r(this, "variables");
-      this.variables = o.createDeco(a);
+    update(update) {
+        this.variables = variableHighlighterDecoration.updateDeco(update, this.variables);
     }
-    update(a) {
-      this.variables = o.updateDeco(
-        a,
-        this.variables
-      );
-    }
-  },
-  {
-    decorations: (a) => a.variables,
-    provide: (a) => b.atomicRanges.of(
-      (e) => {
-        var i;
-        return ((i = e.plugin(a)) == null ? void 0 : i.variables) || t.none;
-      }
-    )
-  }
-);
-export {
-  g as variables
-};
+}, {
+    decorations: (instance) => instance.variables,
+    provide: (plugin) => EditorView.atomicRanges.of((view) => view.plugin(plugin)?.variables || Decoration.none),
+});
+
+export { variables };

package/dist/index.d.ts

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

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAChF,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAA;AAEjE,OAAO,EACL,UAAU,EACV,KAAK,aAAa,EAClB,UAAU,EACV,UAAU,EACV,KAAK,UAAU,EACf,UAAU,GACX,MAAM,kBAAkB,CAAA;AAEzB,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjD,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAChF,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAA;AAEjE,OAAO,EACL,UAAU,EACV,KAAK,aAAa,EAClB,UAAU,EACV,UAAU,EACV,KAAK,UAAU,EACf,UAAU,GACX,MAAM,kBAAkB,CAAA;AAEzB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA"}

package/dist/index.js

@@ -1,20 +1,6 @@
-import { RangeSetBuilder as e, StateEffect as t } from "@codemirror/state";
-import { yCollab as i } from "y-codemirror.next";
-import { colorPicker as d } from "@replit/codemirror-css-color-picker";
-import { Decoration as x, EditorView as a, ViewPlugin as l, WidgetType as u } from "@codemirror/view";
-import { useDropdown as n } from "./hooks/useDropdown.js";
-import { default as s } from "./components/CodeMirror/CodeMirror.vue.js";
-import { useCodeMirror as C } from "./hooks/useCodeMirror.js";
-export {
-  s as CodeMirror,
-  x as Decoration,
-  a as EditorView,
-  e as RangeSetBuilder,
-  t as StateEffect,
-  l as ViewPlugin,
-  u as WidgetType,
-  d as colorPicker,
-  C as useCodeMirror,
-  n as useDropdown,
-  i as yCollab
-};
+export { RangeSetBuilder, StateEffect } from '@codemirror/state';
+export { yCollab } from 'y-codemirror.next';
+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';

package/dist/themes/index.js

@@ -1,91 +1,91 @@
-import { tags as a } from "@lezer/highlight";
-import { createTheme as r } from "@uiw/codemirror-themes";
-const c = r({
-  theme: "light",
-  settings: {
-    background: "var(--scalar-background-2)",
-    foreground: "var(--scalar-color-1)",
-    caret: "var(--scalar-color-1)",
-    // Selection likely needs a hardcoded color due to it not accepting variables
-    selectionMatch: "#e3dcce",
-    gutterBackground: "var(--scalar-background-2)",
-    gutterForeground: "var(--scalar-color-3)",
-    gutterBorder: "transparent",
-    lineHighlight: "var(--scalar-background-3)",
-    fontFamily: "var(--scalar-font-code)"
-  },
-  styles: [
-    {
-      tag: [a.standard(a.tagName), a.tagName],
-      color: "var(--scalar-color-purple)"
+import { tags } from '@lezer/highlight';
+import { createTheme } from '@uiw/codemirror-themes';
+
+const customTheme = createTheme({
+    theme: 'light',
+    settings: {
+        background: 'var(--scalar-background-2)',
+        foreground: 'var(--scalar-color-1)',
+        caret: 'var(--scalar-color-1)',
+        // Selection likely needs a hardcoded color due to it not accepting variables
+        selectionMatch: '#e3dcce',
+        gutterBackground: 'var(--scalar-background-2)',
+        gutterForeground: 'var(--scalar-color-3)',
+        gutterBorder: 'transparent',
+        lineHighlight: 'var(--scalar-background-3)',
+        fontFamily: 'var(--scalar-font-code)',
     },
-    {
-      tag: [a.comment],
-      color: "var(--scalar-color-3)"
-    },
-    {
-      tag: [a.className],
-      color: "var(--scalar-color-orange)"
-    },
-    {
-      tag: [a.variableName, a.propertyName, a.attributeName],
-      color: "var(--scalar-color-1)"
-    },
-    {
-      tag: [a.operator],
-      color: "var(--scalar-color-2)"
-    },
-    {
-      tag: [a.keyword, a.typeName, a.typeOperator],
-      color: "var(--scalar-color-green)"
-    },
-    {
-      tag: [a.string],
-      color: "var(--scalar-color-blue)"
-    },
-    {
-      tag: [a.bracket, a.regexp, a.meta],
-      color: "var(--scalar-color-3)"
-    },
-    {
-      tag: [a.number],
-      color: "var(--scalar-color-orange)"
-    },
-    {
-      tag: [a.name, a.quote],
-      color: "var(--scalar-color-3)"
-    },
-    {
-      tag: [a.heading],
-      color: "var(--scalar-color-3)",
-      fontWeight: "bold"
-    },
-    {
-      tag: [a.emphasis],
-      color: "var(--scalar-color-3)",
-      fontStyle: "italic"
-    },
-    {
-      tag: [a.deleted],
-      color: "var(--scalar-color-3)",
-      backgroundColor: "transparent"
-    },
-    {
-      tag: [a.atom, a.bool, a.special(a.variableName)],
-      color: "var(--scalar-color-3)"
-    },
-    {
-      tag: [a.url, a.escape, a.regexp, a.link],
-      color: "var(--scalar-color-1)"
-    },
-    { tag: a.link, textDecoration: "underline" },
-    { tag: a.strikethrough, textDecoration: "line-through" },
-    {
-      tag: a.invalid,
-      color: "var(--scalar-color-3)"
-    }
-  ]
+    styles: [
+        {
+            tag: [tags.standard(tags.tagName), tags.tagName],
+            color: 'var(--scalar-color-purple)',
+        },
+        {
+            tag: [tags.comment],
+            color: 'var(--scalar-color-3)',
+        },
+        {
+            tag: [tags.className],
+            color: 'var(--scalar-color-orange)',
+        },
+        {
+            tag: [tags.variableName, tags.propertyName, tags.attributeName],
+            color: 'var(--scalar-color-1)',
+        },
+        {
+            tag: [tags.operator],
+            color: 'var(--scalar-color-2)',
+        },
+        {
+            tag: [tags.keyword, tags.typeName, tags.typeOperator],
+            color: 'var(--scalar-color-green)',
+        },
+        {
+            tag: [tags.string],
+            color: 'var(--scalar-color-blue)',
+        },
+        {
+            tag: [tags.bracket, tags.regexp, tags.meta],
+            color: 'var(--scalar-color-3)',
+        },
+        {
+            tag: [tags.number],
+            color: 'var(--scalar-color-orange)',
+        },
+        {
+            tag: [tags.name, tags.quote],
+            color: 'var(--scalar-color-3)',
+        },
+        {
+            tag: [tags.heading],
+            color: 'var(--scalar-color-3)',
+            fontWeight: 'bold',
+        },
+        {
+            tag: [tags.emphasis],
+            color: 'var(--scalar-color-3)',
+            fontStyle: 'italic',
+        },
+        {
+            tag: [tags.deleted],
+            color: 'var(--scalar-color-3)',
+            backgroundColor: 'transparent',
+        },
+        {
+            tag: [tags.atom, tags.bool, tags.special(tags.variableName)],
+            color: 'var(--scalar-color-3)',
+        },
+        {
+            tag: [tags.url, tags.escape, tags.regexp, tags.link],
+            color: 'var(--scalar-color-1)',
+        },
+        { tag: tags.link, textDecoration: 'underline' },
+        { tag: tags.strikethrough, textDecoration: 'line-through' },
+        {
+            tag: tags.invalid,
+            color: 'var(--scalar-color-3)',
+        },
+    ],
 });
-export {
-  c as customTheme
-};
+
+export { customTheme };

package/package.json

@@ -16,14 +16,28 @@
     "vue",
     "vue3"
   ],
-  "version": "0.11.53",
+  "version": "0.11.54",
   "engines": {
     "node": ">=18"
   },
   "type": "module",
   "main": "dist/index.js",
   "exports": {
-    "import": "./dist/index.js"
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./themes": {
+      "import": "./dist/themes/index.js",
+      "types": "./dist/themes/index.d.ts",
+      "default": "./dist/themes/index.js"
+    },
+    "./hooks": {
+      "import": "./dist/hooks/index.js",
+      "types": "./dist/hooks/index.d.ts",
+      "default": "./dist/hooks/index.js"
+    }
   },
   "files": [
     "dist",
@@ -35,25 +49,25 @@
     "yjs": "^13.6.0"
   },
   "dependencies": {
-    "@codemirror/autocomplete": "^6.12.0",
-    "@codemirror/commands": "^6.3.3",
-    "@codemirror/lang-css": "^6.2.1",
+    "@codemirror/autocomplete": "^6.18.3",
+    "@codemirror/commands": "^6.7.1",
+    "@codemirror/lang-css": "^6.3.1",
     "@codemirror/lang-html": "^6.4.8",
     "@codemirror/lang-json": "^6.0.0",
     "@codemirror/lang-xml": "^6.0.0",
-    "@codemirror/lang-yaml": "^6.0.0",
-    "@codemirror/language": "^6.10.1",
-    "@codemirror/lint": "^6.8.1",
-    "@codemirror/state": "^6.4.0",
-    "@codemirror/view": "^6.23.1",
-    "@lezer/common": "^1.2.1",
-    "@lezer/highlight": "^1.2.0",
-    "@lezer/lr": "^1.4.0",
-    "@replit/codemirror-css-color-picker": "^6.1.0",
-    "@uiw/codemirror-themes": "^4.21.21",
+    "@codemirror/lang-yaml": "^6.1.2",
+    "@codemirror/language": "^6.10.7",
+    "@codemirror/lint": "^6.8.4",
+    "@codemirror/state": "^6.5.0",
+    "@codemirror/view": "^6.35.3",
+    "@lezer/common": "^1.2.3",
+    "@lezer/highlight": "^1.2.1",
+    "@lezer/lr": "^1.4.2",
+    "@replit/codemirror-css-color-picker": "^6.3.0",
+    "@uiw/codemirror-themes": "^4.23.7",
     "codemirror": "^6.0.0",
     "vue": "^3.5.12",
-    "@scalar/components": "0.13.9"
+    "@scalar/components": "0.13.10"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
@@ -66,13 +80,13 @@
     "@scalar/build-tooling": "0.1.12"
   },
   "scripts": {
-    "build": "vite build && pnpm types:build && tsc-alias -p tsconfig.build.json",
-    "dev": "vite",
+    "build": "scalar-build-rollup",
+    "dev": "vite .",
     "lint:check": "eslint .",
     "lint:fix": "eslint .  --fix",
     "preview": "vite preview",
     "test": "vitest",
-    "types:build": "vue-tsc -p tsconfig.build.json",
-    "types:check": "vue-tsc --noEmit --skipLibCheck --composite false"
+    "types:build": "scalar-types-build",
+    "types:check": "scalar-types-check-vue"
   }
 }

package/dist/_virtual/_plugin-vue_export-helper.js

@@ -1,9 +0,0 @@
-const s = (t, e) => {
-  const o = t.__vccOpts || t;
-  for (const [r, c] of e)
-    o[r] = c;
-  return o;
-};
-export {
-  s as default
-};

package/dist/components/CodeMirror/CodeMirror.vue.d.ts

@@ -1,19 +0,0 @@
-import type { CodeMirrorLanguage } from '../../types';
-type __VLS_Props = {
-    content: string | undefined;
-    readOnly?: boolean;
-    language?: CodeMirrorLanguage;
-    withVariables?: boolean;
-    lineNumbers?: boolean;
-    withoutTheme?: boolean;
-    disableEnter?: boolean;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    change: (value: string) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onChange?: ((value: string) => any) | undefined;
-}>, {
-    disableEnter: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
-export default _default;
-//# sourceMappingURL=CodeMirror.vue.d.ts.map

package/dist/components/CodeMirror/CodeMirror.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CodeMirror.vue.d.ts","sourceRoot":"","sources":["../../../src/components/CodeMirror/CodeMirror.vue"],"names":[],"mappings":"AAkFA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAIrD,KAAK,WAAW,GAAG;IACf,OAAO,EAAE,MAAM,GAAG,SAAS,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,kBAAkB,CAAA;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB,CAAC;;;;;;kBADe,OAAO;;AA+F1B,wBASG"}

package/dist/components/CodeMirror/CodeMirror.vue.js

@@ -1,8 +0,0 @@
-import o from "./CodeMirror.vue2.js";
-/* empty css                */
-/* empty css                */
-import r from "../../_virtual/_plugin-vue_export-helper.js";
-const i = /* @__PURE__ */ r(o, [["__scopeId", "data-v-f74951d5"]]);
-export {
-  i as default
-};

package/dist/components/CodeMirror/CodeMirror.vue2.js

@@ -1,37 +0,0 @@
-import { defineComponent as i, ref as s, toRef as o, openBlock as c, createElementBlock as m } from "vue";
-import { useCodeMirror as u } from "../../hooks/useCodeMirror.js";
-const h = /* @__PURE__ */ i({
-  __name: "CodeMirror",
-  props: {
-    content: {},
-    readOnly: { type: Boolean },
-    language: {},
-    withVariables: { type: Boolean },
-    lineNumbers: { type: Boolean },
-    withoutTheme: { type: Boolean },
-    disableEnter: { type: Boolean, default: !1 }
-  },
-  emits: ["change"],
-  setup(t, { emit: a }) {
-    const e = t, l = a, r = s(null);
-    return u({
-      content: o(() => e.content),
-      readOnly: o(() => e.readOnly),
-      language: o(() => e.language),
-      withVariables: o(() => e.withVariables),
-      lineNumbers: o(() => e.lineNumbers),
-      withoutTheme: o(() => e.withoutTheme),
-      disableEnter: o(() => e.disableEnter),
-      onChange: (n) => l("change", n || ""),
-      codeMirrorRef: r,
-      classes: ["codemirror"]
-    }), (n, d) => (c(), m("div", {
-      ref_key: "codeMirrorRef",
-      ref: r,
-      class: "codemirror-container"
-    }, null, 512));
-  }
-});
-export {
-  h as default
-};

package/dist/components/CodeMirror/index.d.ts

@@ -1,2 +0,0 @@
-export { default as CodeMirror } from './CodeMirror.vue.js';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/CodeMirror/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CodeMirror/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAA"}

package/dist/style.css

@@ -1 +0,0 @@
-.codemirror-container[data-v-f74951d5]{width:100%;height:100%;min-height:76px;color:var(--scalar-color-1);display:flex;align-items:stretch}.copy-to-clipboard-button[data-v-f74951d5]{background:red}.codemirror{flex-grow:1;max-width:100%;cursor:text;font-size:var(--scalar-small);-webkit-text-size-adjust:100%;background:transparent}.cm-focused{outline:none!important}