@scalar/use-codemirror 0.12.48 → 0.13.0
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.
- package/CHANGELOG.md +22 -0
- package/dist/hooks/useCodeMirror.d.ts.map +1 -1
- package/dist/hooks/useCodeMirror.js +1 -2
- package/dist/hooks/useCodeMirror.js.map +2 -2
- package/dist/index.d.ts +3 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +7 -3
- package/dist/index.js.map +2 -2
- package/dist/themes/createCodeMirrorTheme.d.ts +2 -2
- package/dist/themes/createCodeMirrorTheme.d.ts.map +1 -1
- package/dist/themes/createCodeMirrorTheme.js.map +1 -1
- package/package.json +4 -10
- package/dist/hooks/index.d.ts +0 -3
- package/dist/hooks/index.d.ts.map +0 -1
- package/dist/hooks/index.js +0 -3
- package/dist/hooks/index.js.map +0 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,27 @@
|
|
|
1
1
|
# @scalar/use-codemirror
|
|
2
2
|
|
|
3
|
+
## 0.13.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#7486](https://github.com/scalar/scalar/pull/7486) [`18a7bcd`](https://github.com/scalar/scalar/commit/18a7bcd8ad00f9f7ee09a562167593c7ed07e01d) Thanks [@marcalexiei](https://github.com/marcalexiei)! - feat: hooks are now only exported from root
|
|
8
|
+
|
|
9
|
+
replace `@scalar/use-codemirror/hooks` with `@scalar/use-codemirror`
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [#7486](https://github.com/scalar/scalar/pull/7486) [`18a7bcd`](https://github.com/scalar/scalar/commit/18a7bcd8ad00f9f7ee09a562167593c7ed07e01d) Thanks [@marcalexiei](https://github.com/marcalexiei)! - fix: remove unused `codemirror` dependency
|
|
14
|
+
|
|
15
|
+
- Updated dependencies []:
|
|
16
|
+
- @scalar/components@0.16.6
|
|
17
|
+
|
|
18
|
+
## 0.12.49
|
|
19
|
+
|
|
20
|
+
### Patch Changes
|
|
21
|
+
|
|
22
|
+
- Updated dependencies [[`5aa0380`](https://github.com/scalar/scalar/commit/5aa0380adfcd173e58659fb5dd57df363d985583), [`62b5210`](https://github.com/scalar/scalar/commit/62b521092bafeb8e83e79222e13378c4a19defc8)]:
|
|
23
|
+
- @scalar/components@0.16.5
|
|
24
|
+
|
|
3
25
|
## 0.12.48
|
|
4
26
|
|
|
5
27
|
### Patch Changes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCodeMirror.d.ts","sourceRoot":"","sources":["../../src/hooks/useCodeMirror.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useCodeMirror.d.ts","sourceRoot":"","sources":["../../src/hooks/useCodeMirror.ts"],"names":[],"mappings":"AAiBA,OAAO,EAAE,KAAK,SAAS,EAAe,MAAM,mBAAmB,CAAA;AAC/D,OAAO,EACL,UAAU,EAMX,MAAM,kBAAkB,CAAA;AAEzB,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,GAAG,EAA6D,MAAM,KAAK,CAAA;AAGhH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAGlD,KAAK,cAAc,GAAG;IACpB,yCAAyC;IACzC,aAAa,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IACzC,mDAAmD;IACnD,UAAU,CAAC,EAAE,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAA;IAC1C,8BAA8B;IAC9B,YAAY,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;IACpD,mDAAmD;IACnD,QAAQ,EAAE,gBAAgB,CAAC,kBAAkB,GAAG,SAAS,CAAC,CAAA;IAC1D,2CAA2C;IAC3C,OAAO,CAAC,EAAE,gBAAgB,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,CAAA;IAChD,yCAAyC;IACzC,QAAQ,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;IAChD,8BAA8B;IAC9B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;IACxD,gDAAgD;IAChD,WAAW,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;IACnD,aAAa,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;IACrD,eAAe,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;IACvD,YAAY,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;IACpD,oBAAoB,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;IAC5D,kDAAkD;IAClD,IAAI,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;IAC5C,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,WAAW,CAAC,EAAE,gBAAgB,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;CACnD,CAAA;AAED,MAAM,MAAM,uBAAuB,GAC/B,CAAC,cAAc,GAAG;IAChB,qEAAqE;IACrE,OAAO,EAAE,gBAAgB,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IAC7C,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC/B,CAAC,GACF,CAAC,cAAc,GAAG;IAChB,QAAQ,EAAE,gBAAgB,CAAC,SAAS,GAAG,IAAI,CAAC,CAAA;IAC5C,OAAO,CAAC,EAAE,gBAAgB,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IAC9C,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC/B,CAAC,CAAA;AAsBN,sCAAsC;AACtC,eAAO,MAAM,aAAa,GACxB,QAAQ,uBAAuB,KAC9B;IACD,oBAAoB,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAChD,UAAU,EAAE,GAAG,CAAC,UAAU,GAAG,IAAI,CAAC,CAAA;CA4InC,CAAA"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap } from "@codemirror/autocomplete";
|
|
2
|
-
import { indentWithTab, insertNewline } from "@codemirror/commands";
|
|
3
|
-
import { history, historyKeymap } from "@codemirror/commands";
|
|
2
|
+
import { history, historyKeymap, indentWithTab, insertNewline } from "@codemirror/commands";
|
|
4
3
|
import { css } from "@codemirror/lang-css";
|
|
5
4
|
import { html } from "@codemirror/lang-html";
|
|
6
5
|
import { json } from "@codemirror/lang-json";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/hooks/useCodeMirror.ts"],
|
|
4
|
-
"sourcesContent": ["import { autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap } from '@codemirror/autocomplete'\nimport { indentWithTab, insertNewline } from '@codemirror/commands'\nimport { history, historyKeymap } from '@codemirror/commands'\nimport { css } from '@codemirror/lang-css'\nimport { html } from '@codemirror/lang-html'\nimport { json } from '@codemirror/lang-json'\nimport { xml } from '@codemirror/lang-xml'\nimport { yaml } from '@codemirror/lang-yaml'\nimport {\n type LanguageSupport,\n type StreamLanguage,\n bracketMatching,\n defaultHighlightStyle,\n foldGutter,\n indentOnInput,\n syntaxHighlighting,\n} from '@codemirror/language'\nimport { type Diagnostic, linter } from '@codemirror/lint'\nimport { type Extension, StateEffect } from '@codemirror/state'\nimport {\n EditorView,\n type KeyBinding,\n highlightSpecialChars,\n keymap,\n lineNumbers as lineNumbersExtension,\n placeholder as placeholderExtension,\n} from '@codemirror/view'\nimport { ScalarIcon } from '@scalar/components'\nimport { type MaybeRefOrGetter, type Ref, computed, h, onBeforeUnmount, ref, render, toValue, watch } from 'vue'\n\nimport { customTheme } from '../themes'\nimport type { CodeMirrorLanguage } from '../types'\nimport { variables } from './variables'\n\ntype BaseParameters = {\n /** Element Ref to mount codemirror to */\n codeMirrorRef: Ref<HTMLDivElement | null>\n /** List of optional extensions for the instance */\n extensions?: MaybeRefOrGetter<Extension[]>\n /** Whether to load a theme.*/\n withoutTheme?: MaybeRefOrGetter<boolean | undefined>\n /** Languages to support for syntax highlighting */\n language: MaybeRefOrGetter<CodeMirrorLanguage | undefined>\n /** Class names to apply to the instance */\n classes?: MaybeRefOrGetter<string[] | undefined>\n /** Put the editor into read-only mode */\n readOnly?: MaybeRefOrGetter<boolean | undefined>\n /** Disable indent with tab */\n disableTabIndent?: MaybeRefOrGetter<boolean | undefined>\n /** Option to show line numbers in the editor */\n lineNumbers?: MaybeRefOrGetter<boolean | undefined>\n withVariables?: MaybeRefOrGetter<boolean | undefined>\n forceFoldGutter?: MaybeRefOrGetter<boolean | undefined>\n disableEnter?: MaybeRefOrGetter<boolean | undefined>\n disableCloseBrackets?: MaybeRefOrGetter<boolean | undefined>\n /** Option to lint and show error in the editor */\n lint?: MaybeRefOrGetter<boolean | undefined>\n onBlur?: (v: string) => void\n onFocus?: (v: string) => void\n placeholder?: MaybeRefOrGetter<string | undefined>\n}\n\nexport type UseCodeMirrorParameters =\n | (BaseParameters & {\n /** Prefill the content. Will be ignored when a provider is given. */\n content: MaybeRefOrGetter<string | undefined>\n onChange?: (v: string) => void\n })\n | (BaseParameters & {\n provider: MaybeRefOrGetter<Extension | null>\n content?: MaybeRefOrGetter<string | undefined>\n onChange?: (v: string) => void\n })\n\n/** Check if the hook has a provider. In provider mode we ignore the content variable */\nconst hasProvider = (\n params: UseCodeMirrorParameters,\n): params is BaseParameters & {\n content?: MaybeRefOrGetter<string | undefined>\n provider: MaybeRefOrGetter<Extension>\n} => 'provider' in params && !!toValue(params.provider)\n\nconst selectAllKeyBinding: KeyBinding = {\n key: 'Mod-a',\n run: (view) => {\n // Select the entire content\n view.dispatch({\n selection: { anchor: 0, head: view.state.doc.length },\n scrollIntoView: false,\n })\n return true\n },\n}\n\n/** Reactive CodeMirror Integration */\nexport const useCodeMirror = (\n params: UseCodeMirrorParameters,\n): {\n setCodeMirrorContent: (content?: string) => void\n codeMirror: Ref<EditorView | null>\n} => {\n const codeMirror: Ref<EditorView | null> = ref(null)\n\n /** Set the codemirror content value */\n const setCodeMirrorContent = (newValue = '') => {\n if (!codeMirror.value) {\n return\n }\n\n // No need to set the CodeMirror content if nothing has changed\n if (codeMirror.value.state.doc.toString() === newValue) {\n return\n }\n\n codeMirror.value.dispatch({\n changes: {\n from: 0,\n to: codeMirror.value.state.doc.length,\n insert: newValue,\n },\n selection: {\n anchor: Math.min(codeMirror.value.state.selection.main.anchor, newValue.length),\n },\n })\n }\n\n // All options except provider\n const extensionConfig = computed(() => ({\n onChange: params.onChange,\n onBlur: params.onBlur,\n onFocus: params.onFocus,\n disableTabIndent: toValue(params.disableTabIndent),\n language: toValue(params.language),\n classes: toValue(params.classes),\n readOnly: toValue(params.readOnly),\n lineNumbers: toValue(params.lineNumbers),\n withVariables: toValue(params.withVariables),\n forceFoldGutter: toValue(params.forceFoldGutter),\n disableEnter: toValue(params.disableEnter),\n disableCloseBrackets: toValue(params.disableCloseBrackets),\n withoutTheme: toValue(params.withoutTheme),\n lint: toValue(params.lint),\n additionalExtensions: toValue(params.extensions),\n placeholder: toValue(params.placeholder),\n }))\n\n // Unmounts CodeMirror if it's mounted already, and mounts CodeMirror, if the given ref exists.\n watch(\n params.codeMirrorRef,\n () => {\n codeMirror.value?.destroy()\n mountCodeMirror()\n },\n { immediate: true },\n )\n\n // Cleanup codemirror\n onBeforeUnmount(() => codeMirror.value?.destroy())\n\n // Initializes CodeMirror.\n function mountCodeMirror() {\n if (params.codeMirrorRef.value) {\n const provider = hasProvider(params) ? toValue(params.provider) : null\n const extensions = getCodeMirrorExtensions({\n ...extensionConfig.value,\n provider,\n })\n\n codeMirror.value = new EditorView({\n parent: params.codeMirrorRef.value,\n extensions,\n })\n\n // Set the initial content if a provider is not in use\n if (!hasProvider(params)) {\n setCodeMirrorContent(toValue(params.content))\n }\n }\n }\n\n // ---------------------------------------------------------------------------\n\n // Provider must be watched separately because we need to restart codemirror if the provider changes\n watch(\n () => (hasProvider(params) ? toValue(params.provider) : null),\n () => {\n if (hasProvider(params)) {\n codeMirror.value?.destroy()\n mountCodeMirror()\n }\n },\n )\n\n // Update the extensions whenever parameters changes\n watch(\n extensionConfig,\n () => {\n if (!codeMirror.value) {\n return\n }\n // If a provider is\n\n const provider = hasProvider(params) ? toValue(params.provider) : null\n const extensions = getCodeMirrorExtensions({\n ...extensionConfig.value,\n provider,\n })\n\n requestAnimationFrame(() => {\n codeMirror.value?.dispatch({\n effects: StateEffect.reconfigure.of(extensions),\n })\n })\n },\n { immediate: true },\n )\n\n // ---------------------------------------------------------------------------\n\n // Keep the content in sync when the content is managed externally\n watch(\n () => toValue(params.content),\n () => {\n // When a provider is in use we do not map the content value back to the codemirror instance\n if (hasProvider(params)) {\n return\n }\n\n setCodeMirrorContent(toValue(params.content))\n },\n { immediate: true },\n )\n\n return {\n /** Replaces the current content with the given value. */\n setCodeMirrorContent,\n /** Codemirror instance */\n codeMirror,\n }\n}\n\n// ---------------------------------------------------------------------------\n\nconst languageExtensions: {\n [lang in CodeMirrorLanguage]: () => LanguageSupport | StreamLanguage<any>\n} = {\n html: html,\n json: json,\n yaml: yaml,\n css: css,\n xml: xml,\n}\n\n/** Generate the list of extension from parameters */\nfunction getCodeMirrorExtensions({\n onChange,\n onBlur,\n onFocus,\n provider,\n language,\n classes = [],\n readOnly = false,\n lineNumbers = false,\n withVariables = false,\n forceFoldGutter = false,\n disableEnter = false,\n disableCloseBrackets = false,\n disableTabIndent = false,\n withoutTheme = false,\n lint = false,\n additionalExtensions = [],\n placeholder,\n}: {\n classes?: string[]\n language?: CodeMirrorLanguage\n readOnly?: boolean\n lineNumbers?: boolean\n disableCloseBrackets?: boolean\n disableTabIndent?: boolean\n withVariables?: boolean\n disableEnter?: boolean\n forceFoldGutter?: boolean\n onChange?: (val: string) => void\n onFocus?: (val: string) => void\n onBlur?: (val: string) => void\n withoutTheme?: boolean\n provider: Extension | null\n lint?: boolean\n additionalExtensions?: Extension[]\n placeholder?: string\n}) {\n const extensions: Extension[] = [\n highlightSpecialChars(),\n history(),\n keymap.of(historyKeymap),\n syntaxHighlighting(defaultHighlightStyle, { fallback: true }),\n EditorView.theme({\n '.cm-line': {\n lineHeight: '22px',\n padding: '0 2px 0 4px',\n },\n '.cm-gutterElement': {\n lineHeight: '22px',\n },\n '.cm-tooltip': {\n border: '1px solid #f5c6cb',\n fontSize: '12px',\n },\n '.cm-tooltip-lint': {\n backgroundColor: '#ffffff',\n },\n '.cm-diagnostic-error': {\n borderLeft: '0',\n color: '#dc1b19',\n },\n '.cm-foldPlaceholder': {\n background: 'var(--scalar-background-1)',\n border: 'none',\n fontFamily: 'var(--scalar-font)',\n },\n }),\n // Listen to updates\n EditorView.updateListener.of((v) => {\n if (!v.docChanged) {\n return\n }\n onChange?.(v.state.doc.toString())\n }),\n EditorView.domEventHandlers({\n blur: (_event, view) => {\n onBlur?.(view.state.doc.toString())\n },\n focus: (_event, view) => {\n onFocus?.(view.state.doc.toString())\n },\n }),\n // Add Classes\n EditorView.editorAttributes.of({ class: classes.join(' ') }),\n ...additionalExtensions,\n ]\n\n // Enable the provider\n if (provider) {\n extensions.push(provider)\n }\n\n // Add the theme as needed\n if (!withoutTheme) {\n extensions.push(customTheme)\n }\n\n // Read only\n if (readOnly) {\n extensions.push(EditorView.editable.of(false))\n } else {\n extensions.push(\n indentOnInput(),\n bracketMatching(),\n autocompletion(),\n keymap.of([...completionKeymap, selectAllKeyBinding]),\n bracketMatching(),\n )\n\n if (!disableCloseBrackets) {\n extensions.push(closeBrackets(), keymap.of([...closeBracketsKeymap]))\n }\n\n if (disableTabIndent) {\n extensions.push(\n keymap.of([\n {\n key: 'Tab',\n run: () => false, // Prevent default Tab behavior\n shift: () => false, // Prevent default Shift+Tab behavior\n },\n ]),\n )\n } else {\n extensions.push(keymap.of([indentWithTab]))\n }\n }\n\n // Add placeholder extension if placeholder is provided\n if (placeholder) {\n extensions.push(placeholderExtension(placeholder))\n }\n\n // Line numbers\n if (lineNumbers) {\n extensions.push(lineNumbersExtension())\n }\n\n if (forceFoldGutter) {\n extensions.push(\n foldGutter({\n markerDOM: (open) => {\n const icon = document.createElement('div')\n icon.classList.add('cm-foldMarker')\n const vnode = h(ScalarIcon, {\n icon: open ? 'ChevronDown' : 'ChevronRight',\n size: 'md',\n })\n render(vnode, icon)\n return icon\n },\n }),\n )\n }\n\n // Syntax highlighting\n if (language && languageExtensions[language]) {\n extensions.push(languageExtensions[language]())\n if (!forceFoldGutter) {\n extensions.push(\n foldGutter({\n markerDOM: (open) => {\n const icon = document.createElement('div')\n icon.classList.add('cm-foldMarker')\n const vnode = h(ScalarIcon, {\n icon: open ? 'ChevronDown' : 'ChevronRight',\n size: 'md',\n })\n render(vnode, icon)\n return icon\n },\n }),\n )\n }\n }\n\n // JSON Linter\n if (lint && language === 'json') {\n const jsonLinter = linter((view) => {\n const diagnostics: Diagnostic[] = []\n const content = view.state.doc.toString()\n if (content.trim()) {\n try {\n JSON.parse(content)\n } catch (e) {\n if (e instanceof Error) {\n diagnostics.push({\n from: 0,\n to: view.state.doc.length,\n severity: 'error',\n message: e.message,\n })\n }\n }\n }\n return diagnostics\n })\n extensions.push(jsonLinter)\n }\n\n // Highlight variables\n if (withVariables) {\n extensions.push(variables())\n }\n\n if (disableEnter) {\n extensions.push(\n keymap.of([\n {\n key: 'Enter',\n run: () => {\n return true\n },\n },\n {\n key: 'Ctrl-Enter',\n mac: 'Cmd-Enter',\n run: () => {\n return true\n },\n },\n {\n key: 'Shift-Enter',\n run: () => {\n return true\n },\n },\n ]),\n )\n } else {\n extensions.push(\n keymap.of([\n {\n key: 'Enter',\n run: insertNewline,\n },\n ]),\n )\n }\n\n return extensions\n}\n"],
|
|
5
|
-
"mappings": "AAAA,SAAS,gBAAgB,eAAe,qBAAqB,wBAAwB;AACrF,SAAS,eAAe,
|
|
4
|
+
"sourcesContent": ["import { autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap } from '@codemirror/autocomplete'\nimport { history, historyKeymap, 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 { ScalarIcon } from '@scalar/components'\nimport { type MaybeRefOrGetter, type Ref, computed, h, onBeforeUnmount, ref, render, toValue, watch } from 'vue'\n\nimport { customTheme } from '../themes'\nimport type { CodeMirrorLanguage } from '../types'\nimport { variables } from './variables'\n\ntype BaseParameters = {\n /** Element Ref to mount codemirror to */\n codeMirrorRef: Ref<HTMLDivElement | null>\n /** List of optional extensions for the instance */\n extensions?: MaybeRefOrGetter<Extension[]>\n /** Whether to load a theme.*/\n withoutTheme?: MaybeRefOrGetter<boolean | undefined>\n /** Languages to support for syntax highlighting */\n language: MaybeRefOrGetter<CodeMirrorLanguage | undefined>\n /** Class names to apply to the instance */\n classes?: MaybeRefOrGetter<string[] | undefined>\n /** Put the editor into read-only mode */\n readOnly?: MaybeRefOrGetter<boolean | undefined>\n /** Disable indent with tab */\n disableTabIndent?: MaybeRefOrGetter<boolean | undefined>\n /** Option to show line numbers in the editor */\n lineNumbers?: MaybeRefOrGetter<boolean | undefined>\n withVariables?: MaybeRefOrGetter<boolean | undefined>\n forceFoldGutter?: MaybeRefOrGetter<boolean | undefined>\n disableEnter?: MaybeRefOrGetter<boolean | undefined>\n disableCloseBrackets?: MaybeRefOrGetter<boolean | undefined>\n /** Option to lint and show error in the editor */\n lint?: MaybeRefOrGetter<boolean | undefined>\n onBlur?: (v: string) => void\n onFocus?: (v: string) => void\n placeholder?: MaybeRefOrGetter<string | undefined>\n}\n\nexport type UseCodeMirrorParameters =\n | (BaseParameters & {\n /** Prefill the content. Will be ignored when a provider is given. */\n content: MaybeRefOrGetter<string | undefined>\n onChange?: (v: string) => void\n })\n | (BaseParameters & {\n provider: MaybeRefOrGetter<Extension | null>\n content?: MaybeRefOrGetter<string | undefined>\n onChange?: (v: string) => void\n })\n\n/** Check if the hook has a provider. In provider mode we ignore the content variable */\nconst hasProvider = (\n params: UseCodeMirrorParameters,\n): params is BaseParameters & {\n content?: MaybeRefOrGetter<string | undefined>\n provider: MaybeRefOrGetter<Extension>\n} => 'provider' in params && !!toValue(params.provider)\n\nconst selectAllKeyBinding: KeyBinding = {\n key: 'Mod-a',\n run: (view) => {\n // Select the entire content\n view.dispatch({\n selection: { anchor: 0, head: view.state.doc.length },\n scrollIntoView: false,\n })\n return true\n },\n}\n\n/** Reactive CodeMirror Integration */\nexport const useCodeMirror = (\n params: UseCodeMirrorParameters,\n): {\n setCodeMirrorContent: (content?: string) => void\n codeMirror: Ref<EditorView | null>\n} => {\n const codeMirror: Ref<EditorView | null> = ref(null)\n\n /** Set the codemirror content value */\n const setCodeMirrorContent = (newValue = '') => {\n if (!codeMirror.value) {\n return\n }\n\n // No need to set the CodeMirror content if nothing has changed\n if (codeMirror.value.state.doc.toString() === newValue) {\n return\n }\n\n codeMirror.value.dispatch({\n changes: {\n from: 0,\n to: codeMirror.value.state.doc.length,\n insert: newValue,\n },\n selection: {\n anchor: Math.min(codeMirror.value.state.selection.main.anchor, newValue.length),\n },\n })\n }\n\n // All options except provider\n const extensionConfig = computed(() => ({\n onChange: params.onChange,\n onBlur: params.onBlur,\n onFocus: params.onFocus,\n disableTabIndent: toValue(params.disableTabIndent),\n language: toValue(params.language),\n classes: toValue(params.classes),\n readOnly: toValue(params.readOnly),\n lineNumbers: toValue(params.lineNumbers),\n withVariables: toValue(params.withVariables),\n forceFoldGutter: toValue(params.forceFoldGutter),\n disableEnter: toValue(params.disableEnter),\n disableCloseBrackets: toValue(params.disableCloseBrackets),\n withoutTheme: toValue(params.withoutTheme),\n lint: toValue(params.lint),\n additionalExtensions: toValue(params.extensions),\n placeholder: toValue(params.placeholder),\n }))\n\n // Unmounts CodeMirror if it's mounted already, and mounts CodeMirror, if the given ref exists.\n watch(\n params.codeMirrorRef,\n () => {\n codeMirror.value?.destroy()\n mountCodeMirror()\n },\n { immediate: true },\n )\n\n // Cleanup codemirror\n onBeforeUnmount(() => codeMirror.value?.destroy())\n\n // Initializes CodeMirror.\n function mountCodeMirror() {\n if (params.codeMirrorRef.value) {\n const provider = hasProvider(params) ? toValue(params.provider) : null\n const extensions = getCodeMirrorExtensions({\n ...extensionConfig.value,\n provider,\n })\n\n codeMirror.value = new EditorView({\n parent: params.codeMirrorRef.value,\n extensions,\n })\n\n // Set the initial content if a provider is not in use\n if (!hasProvider(params)) {\n setCodeMirrorContent(toValue(params.content))\n }\n }\n }\n\n // ---------------------------------------------------------------------------\n\n // Provider must be watched separately because we need to restart codemirror if the provider changes\n watch(\n () => (hasProvider(params) ? toValue(params.provider) : null),\n () => {\n if (hasProvider(params)) {\n codeMirror.value?.destroy()\n mountCodeMirror()\n }\n },\n )\n\n // Update the extensions whenever parameters changes\n watch(\n extensionConfig,\n () => {\n if (!codeMirror.value) {\n return\n }\n // If a provider is\n\n const provider = hasProvider(params) ? toValue(params.provider) : null\n const extensions = getCodeMirrorExtensions({\n ...extensionConfig.value,\n provider,\n })\n\n requestAnimationFrame(() => {\n codeMirror.value?.dispatch({\n effects: StateEffect.reconfigure.of(extensions),\n })\n })\n },\n { immediate: true },\n )\n\n // ---------------------------------------------------------------------------\n\n // Keep the content in sync when the content is managed externally\n watch(\n () => toValue(params.content),\n () => {\n // When a provider is in use we do not map the content value back to the codemirror instance\n if (hasProvider(params)) {\n return\n }\n\n setCodeMirrorContent(toValue(params.content))\n },\n { immediate: true },\n )\n\n return {\n /** Replaces the current content with the given value. */\n setCodeMirrorContent,\n /** Codemirror instance */\n codeMirror,\n }\n}\n\n// ---------------------------------------------------------------------------\n\nconst languageExtensions: {\n [lang in CodeMirrorLanguage]: () => LanguageSupport | StreamLanguage<any>\n} = {\n html: html,\n json: json,\n yaml: yaml,\n css: css,\n xml: xml,\n}\n\n/** Generate the list of extension from parameters */\nfunction getCodeMirrorExtensions({\n onChange,\n onBlur,\n onFocus,\n provider,\n language,\n classes = [],\n readOnly = false,\n lineNumbers = false,\n withVariables = false,\n forceFoldGutter = false,\n disableEnter = false,\n disableCloseBrackets = false,\n disableTabIndent = false,\n withoutTheme = false,\n lint = false,\n additionalExtensions = [],\n placeholder,\n}: {\n classes?: string[]\n language?: CodeMirrorLanguage\n readOnly?: boolean\n lineNumbers?: boolean\n disableCloseBrackets?: boolean\n disableTabIndent?: boolean\n withVariables?: boolean\n disableEnter?: boolean\n forceFoldGutter?: boolean\n onChange?: (val: string) => void\n onFocus?: (val: string) => void\n onBlur?: (val: string) => void\n withoutTheme?: boolean\n provider: Extension | null\n lint?: boolean\n additionalExtensions?: Extension[]\n placeholder?: string\n}) {\n const extensions: Extension[] = [\n highlightSpecialChars(),\n history(),\n keymap.of(historyKeymap),\n syntaxHighlighting(defaultHighlightStyle, { fallback: true }),\n EditorView.theme({\n '.cm-line': {\n lineHeight: '22px',\n padding: '0 2px 0 4px',\n },\n '.cm-gutterElement': {\n lineHeight: '22px',\n },\n '.cm-tooltip': {\n border: '1px solid #f5c6cb',\n fontSize: '12px',\n },\n '.cm-tooltip-lint': {\n backgroundColor: '#ffffff',\n },\n '.cm-diagnostic-error': {\n borderLeft: '0',\n color: '#dc1b19',\n },\n '.cm-foldPlaceholder': {\n background: 'var(--scalar-background-1)',\n border: 'none',\n fontFamily: 'var(--scalar-font)',\n },\n }),\n // Listen to updates\n EditorView.updateListener.of((v) => {\n if (!v.docChanged) {\n return\n }\n onChange?.(v.state.doc.toString())\n }),\n EditorView.domEventHandlers({\n blur: (_event, view) => {\n onBlur?.(view.state.doc.toString())\n },\n focus: (_event, view) => {\n onFocus?.(view.state.doc.toString())\n },\n }),\n // Add Classes\n EditorView.editorAttributes.of({ class: classes.join(' ') }),\n ...additionalExtensions,\n ]\n\n // Enable the provider\n if (provider) {\n extensions.push(provider)\n }\n\n // Add the theme as needed\n if (!withoutTheme) {\n extensions.push(customTheme)\n }\n\n // Read only\n if (readOnly) {\n extensions.push(EditorView.editable.of(false))\n } else {\n extensions.push(\n indentOnInput(),\n bracketMatching(),\n autocompletion(),\n keymap.of([...completionKeymap, selectAllKeyBinding]),\n bracketMatching(),\n )\n\n if (!disableCloseBrackets) {\n extensions.push(closeBrackets(), keymap.of([...closeBracketsKeymap]))\n }\n\n if (disableTabIndent) {\n extensions.push(\n keymap.of([\n {\n key: 'Tab',\n run: () => false, // Prevent default Tab behavior\n shift: () => false, // Prevent default Shift+Tab behavior\n },\n ]),\n )\n } else {\n extensions.push(keymap.of([indentWithTab]))\n }\n }\n\n // Add placeholder extension if placeholder is provided\n if (placeholder) {\n extensions.push(placeholderExtension(placeholder))\n }\n\n // Line numbers\n if (lineNumbers) {\n extensions.push(lineNumbersExtension())\n }\n\n if (forceFoldGutter) {\n extensions.push(\n foldGutter({\n markerDOM: (open) => {\n const icon = document.createElement('div')\n icon.classList.add('cm-foldMarker')\n const vnode = h(ScalarIcon, {\n icon: open ? 'ChevronDown' : 'ChevronRight',\n size: 'md',\n })\n render(vnode, icon)\n return icon\n },\n }),\n )\n }\n\n // Syntax highlighting\n if (language && languageExtensions[language]) {\n extensions.push(languageExtensions[language]())\n if (!forceFoldGutter) {\n extensions.push(\n foldGutter({\n markerDOM: (open) => {\n const icon = document.createElement('div')\n icon.classList.add('cm-foldMarker')\n const vnode = h(ScalarIcon, {\n icon: open ? 'ChevronDown' : 'ChevronRight',\n size: 'md',\n })\n render(vnode, icon)\n return icon\n },\n }),\n )\n }\n }\n\n // JSON Linter\n if (lint && language === 'json') {\n const jsonLinter = linter((view) => {\n const diagnostics: Diagnostic[] = []\n const content = view.state.doc.toString()\n if (content.trim()) {\n try {\n JSON.parse(content)\n } catch (e) {\n if (e instanceof Error) {\n diagnostics.push({\n from: 0,\n to: view.state.doc.length,\n severity: 'error',\n message: e.message,\n })\n }\n }\n }\n return diagnostics\n })\n extensions.push(jsonLinter)\n }\n\n // Highlight variables\n if (withVariables) {\n extensions.push(variables())\n }\n\n if (disableEnter) {\n extensions.push(\n keymap.of([\n {\n key: 'Enter',\n run: () => {\n return true\n },\n },\n {\n key: 'Ctrl-Enter',\n mac: 'Cmd-Enter',\n run: () => {\n return true\n },\n },\n {\n key: 'Shift-Enter',\n run: () => {\n return true\n },\n },\n ]),\n )\n } else {\n extensions.push(\n keymap.of([\n {\n key: 'Enter',\n run: insertNewline,\n },\n ]),\n )\n }\n\n return extensions\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export { EditorState, type Extension, RangeSetBuilder, StateEffect, } from '@codemirror/state';
|
|
2
2
|
export { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate, WidgetType, } from '@codemirror/view';
|
|
3
3
|
export { colorPicker } from '@replit/codemirror-css-color-picker';
|
|
4
|
-
export
|
|
5
|
-
export
|
|
4
|
+
export { type UseCodeMirrorParameters, useCodeMirror, } from './hooks/useCodeMirror.js';
|
|
5
|
+
export { useDropdown } from './hooks/useDropdown.js';
|
|
6
|
+
export type { CodeMirrorLanguage } from './types.js';
|
|
6
7
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,KAAK,SAAS,EACd,eAAe,EACf,WAAW,GACZ,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EACL,UAAU,EACV,KAAK,aAAa,EAClB,UAAU,EACV,UAAU,EACV,KAAK,UAAU,EACf,UAAU,GACX,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAA;AAEjE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,KAAK,SAAS,EACd,eAAe,EACf,WAAW,GACZ,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EACL,UAAU,EACV,KAAK,aAAa,EAClB,UAAU,EACV,UAAU,EACV,KAAK,UAAU,EACf,UAAU,GACX,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAA;AAEjE,OAAO,EACL,KAAK,uBAAuB,EAC5B,aAAa,GACd,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjD,YAAY,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA"}
|
package/dist/index.js
CHANGED
|
@@ -10,8 +10,10 @@ import {
|
|
|
10
10
|
WidgetType
|
|
11
11
|
} from "@codemirror/view";
|
|
12
12
|
import { colorPicker } from "@replit/codemirror-css-color-picker";
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
import {
|
|
14
|
+
useCodeMirror
|
|
15
|
+
} from "./hooks/useCodeMirror.js";
|
|
16
|
+
import { useDropdown } from "./hooks/useDropdown.js";
|
|
15
17
|
export {
|
|
16
18
|
Decoration,
|
|
17
19
|
EditorState,
|
|
@@ -20,6 +22,8 @@ export {
|
|
|
20
22
|
StateEffect,
|
|
21
23
|
ViewPlugin,
|
|
22
24
|
WidgetType,
|
|
23
|
-
colorPicker
|
|
25
|
+
colorPicker,
|
|
26
|
+
useCodeMirror,
|
|
27
|
+
useDropdown
|
|
24
28
|
};
|
|
25
29
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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
|
|
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,
|
|
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
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -10,7 +10,7 @@ import type { Extension } from '@codemirror/state';
|
|
|
10
10
|
type StyleSpec = {
|
|
11
11
|
[propOrSelector: string]: string | number | StyleSpec | null;
|
|
12
12
|
};
|
|
13
|
-
|
|
13
|
+
type CreateThemeOptions = {
|
|
14
14
|
/**
|
|
15
15
|
* Theme inheritance. Determines which styles CodeMirror will apply by default.
|
|
16
16
|
*/
|
|
@@ -23,7 +23,7 @@ export type CreateThemeOptions = {
|
|
|
23
23
|
styles: TagStyle[];
|
|
24
24
|
};
|
|
25
25
|
type Theme = 'light' | 'dark';
|
|
26
|
-
|
|
26
|
+
type Settings = {
|
|
27
27
|
/** Editor background color. */
|
|
28
28
|
background?: string;
|
|
29
29
|
/** Editor background image. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createCodeMirrorTheme.d.ts","sourceRoot":"","sources":["../../src/themes/createCodeMirrorTheme.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAkB,KAAK,QAAQ,EAAsB,MAAM,sBAAsB,CAAA;AACxF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAGlD,KAAK,SAAS,GAAG;IACf,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,CAAA;CAC7D,CAAA;AAED,
|
|
1
|
+
{"version":3,"file":"createCodeMirrorTheme.d.ts","sourceRoot":"","sources":["../../src/themes/createCodeMirrorTheme.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAkB,KAAK,QAAQ,EAAsB,MAAM,sBAAsB,CAAA;AACxF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAGlD,KAAK,SAAS,GAAG;IACf,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,CAAA;CAC7D,CAAA;AAED,KAAK,kBAAkB,GAAG;IACxB;;OAEG;IACH,KAAK,EAAE,KAAK,CAAA;IACZ;;OAEG;IACH,QAAQ,EAAE,QAAQ,CAAA;IAClB,kCAAkC;IAClC,MAAM,EAAE,QAAQ,EAAE,CAAA;CACnB,CAAA;AAED,KAAK,KAAK,GAAG,OAAO,GAAG,MAAM,CAAA;AAE7B,KAAK,QAAQ,GAAG;IACd,+BAA+B;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,+BAA+B;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,0BAA0B;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kCAAkC;IAClC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,uCAAuC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,gCAAgC;IAChC,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,uCAAuC;IACvC,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAC/B,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,sBAAsB;IACtB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAA;CACjC,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,qBAAqB,GAAI,6BAAuC,kBAAkB,KAAG,SA4EjG,CAAA"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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\
|
|
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
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
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"vue",
|
|
17
17
|
"vue3"
|
|
18
18
|
],
|
|
19
|
-
"version": "0.
|
|
19
|
+
"version": "0.13.0",
|
|
20
20
|
"engines": {
|
|
21
21
|
"node": ">=20"
|
|
22
22
|
},
|
|
@@ -29,11 +29,6 @@
|
|
|
29
29
|
"types": "./dist/index.d.ts",
|
|
30
30
|
"default": "./dist/index.js"
|
|
31
31
|
},
|
|
32
|
-
"./hooks": {
|
|
33
|
-
"import": "./dist/hooks/index.js",
|
|
34
|
-
"types": "./dist/hooks/index.d.ts",
|
|
35
|
-
"default": "./dist/hooks/index.js"
|
|
36
|
-
},
|
|
37
32
|
"./themes": {
|
|
38
33
|
"import": "./dist/themes/index.js",
|
|
39
34
|
"types": "./dist/themes/index.d.ts",
|
|
@@ -59,17 +54,16 @@
|
|
|
59
54
|
"@lezer/common": "^1.2.3",
|
|
60
55
|
"@lezer/highlight": "^1.2.1",
|
|
61
56
|
"@replit/codemirror-css-color-picker": "^6.3.0",
|
|
62
|
-
"codemirror": "^6.0.0",
|
|
63
57
|
"vue": "^3.5.21",
|
|
64
|
-
"@scalar/components": "0.16.
|
|
58
|
+
"@scalar/components": "0.16.6"
|
|
65
59
|
},
|
|
66
60
|
"devDependencies": {
|
|
67
61
|
"@vitejs/plugin-vue": "6.0.1",
|
|
68
62
|
"vite": "7.1.11",
|
|
69
63
|
"vitest": "3.2.4",
|
|
70
64
|
"vue": "^3.5.21",
|
|
71
|
-
"@scalar/build-tooling": "0.3.
|
|
72
|
-
"@scalar/themes": "0.13.
|
|
65
|
+
"@scalar/build-tooling": "0.3.1",
|
|
66
|
+
"@scalar/themes": "0.13.25"
|
|
73
67
|
},
|
|
74
68
|
"scripts": {
|
|
75
69
|
"build": "scalar-build-esbuild",
|
package/dist/hooks/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"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
DELETED