@scalar/use-codemirror 0.14.8 → 0.14.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/hooks/useDropdown.ts"],
4
- "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"],
5
- "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;",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/hooks/variables.ts"],
4
- "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"],
5
- "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;",
6
- "names": []
7
- }
package/dist/index.js.map DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../src/index.ts"],
4
- "sourcesContent": ["export {\n EditorState,\n type Extension,\n RangeSetBuilder,\n StateEffect,\n} from '@codemirror/state'\nexport {\n Decoration,\n type DecorationSet,\n EditorView,\n ViewPlugin,\n type ViewUpdate,\n WidgetType,\n} from '@codemirror/view'\nexport { colorPicker } from '@replit/codemirror-css-color-picker'\n\nexport {\n type UseCodeMirrorParameters,\n useCodeMirror,\n} from './hooks/useCodeMirror'\nexport { useDropdown } from './hooks/useDropdown'\nexport type { CodeMirrorLanguage } from './types'\n"],
5
- "mappings": "AAAA;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,EAEA;AAAA,OACK;AACP,SAAS,mBAAmB;AAE5B;AAAA,EAEE;AAAA,OACK;AACP,SAAS,mBAAmB;",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/themes/createCodeMirrorTheme.ts"],
4
- "sourcesContent": ["/**\n * This file is copied from @uiw/codemirror-themes.\n * We've 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'\n\ntype StyleSpec = {\n [propOrSelector: string]: string | number | StyleSpec | null\n}\n\ntype 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\ntype 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 && themeOptions['.cm-gutters']) {\n themeOptions['.cm-gutters'].backgroundColor = settings.gutterBackground\n }\n if (settings.gutterForeground && themeOptions['.cm-gutters']) {\n themeOptions['.cm-gutters'].color = settings.gutterForeground\n }\n if (settings.gutterBorder && themeOptions['.cm-gutters']) {\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"],
5
- "mappings": "AAOA,SAAS,gBAA+B,0BAA0B;AAElE,SAAS,kBAAkB;AAqDpB,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,oBAAoB,aAAa,aAAa,GAAG;AAC5D,iBAAa,aAAa,EAAE,kBAAkB,SAAS;AAAA,EACzD;AACA,MAAI,SAAS,oBAAoB,aAAa,aAAa,GAAG;AAC5D,iBAAa,aAAa,EAAE,QAAQ,SAAS;AAAA,EAC/C;AACA,MAAI,SAAS,gBAAgB,aAAa,aAAa,GAAG;AACxD,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;",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/themes/index.ts"],
4
- "sourcesContent": ["import { tags as t } from '@lezer/highlight'\n\nimport { createCodeMirrorTheme } from './createCodeMirrorTheme'\n\nexport const customTheme = createCodeMirrorTheme({\n theme: 'light',\n settings: {\n background: 'var(--scalar-background-2)',\n foreground: 'var(--scalar-color-1)',\n caret: 'var(--scalar-color-1)',\n // Selection likely needs a hardcoded color due to it not accepting variables\n selectionMatch: '#e3dcce',\n gutterBackground: 'var(--scalar-background-2)',\n gutterForeground: 'var(--scalar-color-3)',\n gutterBorder: 'transparent',\n lineHighlight: 'var(--scalar-background-3)',\n fontFamily: 'var(--scalar-font-code)',\n },\n styles: [\n {\n tag: [t.standard(t.tagName), t.tagName],\n color: 'var(--scalar-color-purple)',\n },\n {\n tag: [t.comment],\n color: 'var(--scalar-color-3)',\n },\n {\n tag: [t.className],\n color: 'var(--scalar-color-orange)',\n },\n {\n tag: [t.variableName, t.propertyName, t.attributeName],\n color: 'var(--scalar-color-1)',\n },\n {\n tag: [t.operator],\n color: 'var(--scalar-color-2)',\n },\n {\n tag: [t.keyword, t.typeName, t.typeOperator],\n color: 'var(--scalar-color-green)',\n },\n {\n tag: [t.string],\n color: 'var(--scalar-color-blue)',\n },\n {\n tag: [t.bracket, t.regexp, t.meta],\n color: 'var(--scalar-color-3)',\n },\n {\n tag: [t.number],\n color: 'var(--scalar-color-orange)',\n },\n {\n tag: [t.name, t.quote],\n color: 'var(--scalar-color-3)',\n },\n {\n tag: [t.heading],\n color: 'var(--scalar-color-3)',\n fontWeight: 'bold',\n },\n {\n tag: [t.emphasis],\n color: 'var(--scalar-color-3)',\n fontStyle: 'italic',\n },\n {\n tag: [t.deleted],\n color: 'var(--scalar-color-3)',\n backgroundColor: 'transparent',\n },\n {\n tag: [t.atom, t.bool, t.special(t.variableName)],\n color: 'var(--scalar-color-3)',\n },\n {\n tag: [t.url, t.escape, t.regexp, t.link],\n color: 'var(--scalar-color-1)',\n },\n { tag: t.link, textDecoration: 'underline' },\n { tag: t.strikethrough, textDecoration: 'line-through' },\n {\n tag: t.invalid,\n color: 'var(--scalar-color-3)',\n },\n ],\n})\n"],
5
- "mappings": "AAAA,SAAS,QAAQ,SAAS;AAE1B,SAAS,6BAA6B;AAE/B,MAAM,cAAc,sBAAsB;AAAA,EAC/C,OAAO;AAAA,EACP,UAAU;AAAA,IACR,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,OAAO;AAAA;AAAA,IAEP,gBAAgB;AAAA,IAChB,kBAAkB;AAAA,IAClB,kBAAkB;AAAA,IAClB,cAAc;AAAA,IACd,eAAe;AAAA,IACf,YAAY;AAAA,EACd;AAAA,EACA,QAAQ;AAAA,IACN;AAAA,MACE,KAAK,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,EAAE,OAAO;AAAA,MACtC,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,KAAK,CAAC,EAAE,OAAO;AAAA,MACf,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,KAAK,CAAC,EAAE,SAAS;AAAA,MACjB,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,KAAK,CAAC,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa;AAAA,MACrD,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,KAAK,CAAC,EAAE,QAAQ;AAAA,MAChB,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,KAAK,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,YAAY;AAAA,MAC3C,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,KAAK,CAAC,EAAE,MAAM;AAAA,MACd,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,KAAK,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI;AAAA,MACjC,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,KAAK,CAAC,EAAE,MAAM;AAAA,MACd,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,KAAK,CAAC,EAAE,MAAM,EAAE,KAAK;AAAA,MACrB,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,KAAK,CAAC,EAAE,OAAO;AAAA,MACf,OAAO;AAAA,MACP,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACE,KAAK,CAAC,EAAE,QAAQ;AAAA,MAChB,OAAO;AAAA,MACP,WAAW;AAAA,IACb;AAAA,IACA;AAAA,MACE,KAAK,CAAC,EAAE,OAAO;AAAA,MACf,OAAO;AAAA,MACP,iBAAiB;AAAA,IACnB;AAAA,IACA;AAAA,MACE,KAAK,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,YAAY,CAAC;AAAA,MAC/C,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,KAAK,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI;AAAA,MACvC,OAAO;AAAA,IACT;AAAA,IACA,EAAE,KAAK,EAAE,MAAM,gBAAgB,YAAY;AAAA,IAC3C,EAAE,KAAK,EAAE,eAAe,gBAAgB,eAAe;AAAA,IACvD;AAAA,MACE,KAAK,EAAE;AAAA,MACP,OAAO;AAAA,IACT;AAAA,EACF;AACF,CAAC;",
6
- "names": []
7
- }
package/dist/types.js.map DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": [],
4
- "sourcesContent": [],
5
- "mappings": "",
6
- "names": []
7
- }