@stonecrop/code-editor 0.31.0 → 0.33.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.
@@ -1,350 +0,0 @@
1
- // picked from https://bitwiser.in/monaco-themes/
2
- // currently set to: Github Light
3
- export const theme = {
4
- base: 'vs',
5
- inherit: true,
6
- colors: {
7
- 'editor.foreground': '#24292e',
8
- 'editor.background': '#ffffff',
9
- 'editor.selectionBackground': '#c8c8fa',
10
- 'editor.inactiveSelectionBackground': '#fafbfc',
11
- 'editor.lineHighlightBackground': '#fafbfc',
12
- 'editorCursor.foreground': '#24292e',
13
- 'editorWhitespace.foreground': '#959da5',
14
- 'editorIndentGuide.background': '#959da5',
15
- 'editorIndentGuide.activeBackground': '#24292e',
16
- 'editor.selectionHighlightBorder': '#fafbfc',
17
- },
18
- rules: [
19
- {
20
- background: 'ffffff',
21
- token: '',
22
- },
23
- {
24
- foreground: '6a737d',
25
- token: 'comment',
26
- },
27
- {
28
- foreground: '6a737d',
29
- token: 'punctuation.definition.comment',
30
- },
31
- {
32
- foreground: '6a737d',
33
- token: 'string.comment',
34
- },
35
- {
36
- foreground: '005cc5',
37
- token: 'constant',
38
- },
39
- {
40
- foreground: '005cc5',
41
- token: 'entity.name.constant',
42
- },
43
- {
44
- foreground: '005cc5',
45
- token: 'variable.other.constant',
46
- },
47
- {
48
- foreground: '005cc5',
49
- token: 'variable.language',
50
- },
51
- {
52
- foreground: '6f42c1',
53
- token: 'entity',
54
- },
55
- {
56
- foreground: '6f42c1',
57
- token: 'entity.name',
58
- },
59
- {
60
- foreground: '24292e',
61
- token: 'variable.parameter.function',
62
- },
63
- {
64
- foreground: '22863a',
65
- token: 'entity.name.tag',
66
- },
67
- {
68
- foreground: 'd73a49',
69
- token: 'keyword',
70
- },
71
- {
72
- foreground: 'd73a49',
73
- token: 'storage',
74
- },
75
- {
76
- foreground: 'd73a49',
77
- token: 'storage.type',
78
- },
79
- {
80
- foreground: '24292e',
81
- token: 'storage.modifier.package',
82
- },
83
- {
84
- foreground: '24292e',
85
- token: 'storage.modifier.import',
86
- },
87
- {
88
- foreground: '24292e',
89
- token: 'storage.type.java',
90
- },
91
- {
92
- foreground: '032f62',
93
- token: 'string',
94
- },
95
- {
96
- foreground: '032f62',
97
- token: 'punctuation.definition.string',
98
- },
99
- {
100
- foreground: '032f62',
101
- token: 'string punctuation.section.embedded source',
102
- },
103
- {
104
- foreground: '005cc5',
105
- token: 'support',
106
- },
107
- {
108
- foreground: '005cc5',
109
- token: 'meta.property-name',
110
- },
111
- {
112
- foreground: 'e36209',
113
- token: 'variable',
114
- },
115
- {
116
- foreground: '24292e',
117
- token: 'variable.other',
118
- },
119
- {
120
- foreground: 'b31d28',
121
- fontStyle: 'bold italic underline',
122
- token: 'invalid.broken',
123
- },
124
- {
125
- foreground: 'b31d28',
126
- fontStyle: 'bold italic underline',
127
- token: 'invalid.deprecated',
128
- },
129
- {
130
- foreground: 'fafbfc',
131
- background: 'b31d28',
132
- fontStyle: 'italic underline',
133
- token: 'invalid.illegal',
134
- },
135
- {
136
- foreground: 'fafbfc',
137
- background: 'd73a49',
138
- fontStyle: 'italic underline',
139
- token: 'carriage-return',
140
- },
141
- {
142
- foreground: 'b31d28',
143
- fontStyle: 'bold italic underline',
144
- token: 'invalid.unimplemented',
145
- },
146
- {
147
- foreground: 'b31d28',
148
- token: 'message.error',
149
- },
150
- {
151
- foreground: '24292e',
152
- token: 'string source',
153
- },
154
- {
155
- foreground: '005cc5',
156
- token: 'string variable',
157
- },
158
- {
159
- foreground: '032f62',
160
- token: 'source.regexp',
161
- },
162
- {
163
- foreground: '032f62',
164
- token: 'string.regexp',
165
- },
166
- {
167
- foreground: '032f62',
168
- token: 'string.regexp.character-class',
169
- },
170
- {
171
- foreground: '032f62',
172
- token: 'string.regexp constant.character.escape',
173
- },
174
- {
175
- foreground: '032f62',
176
- token: 'string.regexp source.ruby.embedded',
177
- },
178
- {
179
- foreground: '032f62',
180
- token: 'string.regexp string.regexp.arbitrary-repitition',
181
- },
182
- {
183
- foreground: '22863a',
184
- fontStyle: 'bold',
185
- token: 'string.regexp constant.character.escape',
186
- },
187
- {
188
- foreground: '005cc5',
189
- token: 'support.constant',
190
- },
191
- {
192
- foreground: '005cc5',
193
- token: 'support.variable',
194
- },
195
- {
196
- foreground: '005cc5',
197
- token: 'meta.module-reference',
198
- },
199
- {
200
- foreground: '735c0f',
201
- token: 'markup.list',
202
- },
203
- {
204
- foreground: '005cc5',
205
- fontStyle: 'bold',
206
- token: 'markup.heading',
207
- },
208
- {
209
- foreground: '005cc5',
210
- fontStyle: 'bold',
211
- token: 'markup.heading entity.name',
212
- },
213
- {
214
- foreground: '22863a',
215
- token: 'markup.quote',
216
- },
217
- {
218
- foreground: '24292e',
219
- fontStyle: 'italic',
220
- token: 'markup.italic',
221
- },
222
- {
223
- foreground: '24292e',
224
- fontStyle: 'bold',
225
- token: 'markup.bold',
226
- },
227
- {
228
- foreground: '005cc5',
229
- token: 'markup.raw',
230
- },
231
- {
232
- foreground: 'b31d28',
233
- background: 'ffeef0',
234
- token: 'markup.deleted',
235
- },
236
- {
237
- foreground: 'b31d28',
238
- background: 'ffeef0',
239
- token: 'meta.diff.header.from-file',
240
- },
241
- {
242
- foreground: 'b31d28',
243
- background: 'ffeef0',
244
- token: 'punctuation.definition.deleted',
245
- },
246
- {
247
- foreground: '22863a',
248
- background: 'f0fff4',
249
- token: 'markup.inserted',
250
- },
251
- {
252
- foreground: '22863a',
253
- background: 'f0fff4',
254
- token: 'meta.diff.header.to-file',
255
- },
256
- {
257
- foreground: '22863a',
258
- background: 'f0fff4',
259
- token: 'punctuation.definition.inserted',
260
- },
261
- {
262
- foreground: 'e36209',
263
- background: 'ffebda',
264
- token: 'markup.changed',
265
- },
266
- {
267
- foreground: 'e36209',
268
- background: 'ffebda',
269
- token: 'punctuation.definition.changed',
270
- },
271
- {
272
- foreground: 'f6f8fa',
273
- background: '005cc5',
274
- token: 'markup.ignored',
275
- },
276
- {
277
- foreground: 'f6f8fa',
278
- background: '005cc5',
279
- token: 'markup.untracked',
280
- },
281
- {
282
- foreground: '6f42c1',
283
- fontStyle: 'bold',
284
- token: 'meta.diff.range',
285
- },
286
- {
287
- foreground: '005cc5',
288
- token: 'meta.diff.header',
289
- },
290
- {
291
- foreground: '005cc5',
292
- fontStyle: 'bold',
293
- token: 'meta.separator',
294
- },
295
- {
296
- foreground: '005cc5',
297
- token: 'meta.output',
298
- },
299
- {
300
- foreground: '586069',
301
- token: 'brackethighlighter.tag',
302
- },
303
- {
304
- foreground: '586069',
305
- token: 'brackethighlighter.curly',
306
- },
307
- {
308
- foreground: '586069',
309
- token: 'brackethighlighter.round',
310
- },
311
- {
312
- foreground: '586069',
313
- token: 'brackethighlighter.square',
314
- },
315
- {
316
- foreground: '586069',
317
- token: 'brackethighlighter.angle',
318
- },
319
- {
320
- foreground: '586069',
321
- token: 'brackethighlighter.quote',
322
- },
323
- {
324
- foreground: 'b31d28',
325
- token: 'brackethighlighter.unmatched',
326
- },
327
- {
328
- foreground: 'b31d28',
329
- token: 'sublimelinter.mark.error',
330
- },
331
- {
332
- foreground: 'e36209',
333
- token: 'sublimelinter.mark.warning',
334
- },
335
- {
336
- foreground: '959da5',
337
- token: 'sublimelinter.gutter-mark',
338
- },
339
- {
340
- foreground: '032f62',
341
- fontStyle: 'underline',
342
- token: 'constant.other.reference.link',
343
- },
344
- {
345
- foreground: '032f62',
346
- fontStyle: 'underline',
347
- token: 'string.other.link',
348
- },
349
- ],
350
- };
@@ -1,14 +0,0 @@
1
- /**
2
- * Coerces an unknown value to a string suitable for Monaco's initial content.
3
- * Objects are JSON-stringified with 2-space indentation.
4
- * Null and undefined become empty string.
5
- * Strings pass through unchanged.
6
- * @public
7
- */
8
- export function toEditorString(value) {
9
- if (value === null || value === undefined)
10
- return '';
11
- if (typeof value === 'string')
12
- return value;
13
- return JSON.stringify(value, null, 2);
14
- }
@@ -1,139 +0,0 @@
1
- <template>
2
- <div ref="aCodeEditor" class="a-code-editor" :style="{ height }" />
3
- </template>
4
-
5
- <script lang="ts">
6
- // Module-scoped (shared across all instances) so each Monaco model gets a unique URI. This MUST
7
- // live in a plain <script>, not <script setup>: inside <script setup> it is re-created per instance
8
- // and always increments to 1, so two editors mounted at once both build
9
- // `file:///stonecrop-editor-1.js` and the second throws "ModelService: Cannot add model because it
10
- // already exists!" — its mounted hook aborts and only one editor loads.
11
- let editorModelCounter = 0
12
- </script>
13
-
14
- <script setup lang="ts">
15
- import loader from '@monaco-editor/loader'
16
- import type * as Monaco from 'monaco-editor'
17
- import type { editor } from 'monaco-editor'
18
- import { onMounted, onUnmounted, shallowRef, watch } from 'vue'
19
- import { useTemplateRef } from 'vue'
20
-
21
- import { theme } from '../theme/code_editor/agritheory'
22
- import { toEditorString } from '../utils/serialization'
23
-
24
- type EditorSchema = { language?: string; [key: string]: unknown }
25
-
26
- const modelValue = defineModel<string>()
27
- const {
28
- height = '300px',
29
- mode = 'edit',
30
- schema = undefined,
31
- language = undefined,
32
- options = undefined,
33
- vsPath = undefined,
34
- extraLibs = undefined,
35
- libs = undefined,
36
- } = defineProps<{
37
- height?: string
38
- mode?: 'edit' | 'read' | 'display'
39
- schema?: EditorSchema
40
- language?: string
41
- options?: editor.IStandaloneEditorConstructionOptions
42
- /** Override the Monaco AMD loader path (e.g. for offline/local serving) */
43
- vsPath?: string
44
- /** TypeScript declaration string added as extra libs for JS type checking */
45
- extraLibs?: string
46
- /**
47
- * Restrict the JS/TS language service to these lib files (e.g. `['es2020']` to keep
48
- * the JS built-ins but drop the DOM/browser globals from type-checking and autocomplete).
49
- * When omitted, Monaco's default libs apply — which include `dom`.
50
- */
51
- libs?: string[]
52
- }>()
53
-
54
- const editorRef = useTemplateRef<HTMLDivElement>('aCodeEditor')
55
- const editorInstance = shallowRef<editor.IStandaloneCodeEditor | null>(null)
56
-
57
- watch(modelValue, val => {
58
- const inst = editorInstance.value
59
- if (inst && val !== inst.getValue()) inst.setValue(val ?? '')
60
- })
61
-
62
- watch(
63
- () => mode,
64
- m => {
65
- editorInstance.value?.updateOptions({ readOnly: m !== 'edit' })
66
- }
67
- )
68
-
69
- onMounted(async () => {
70
- if (vsPath) loader.config({ paths: { vs: vsPath } })
71
-
72
- const monacoInstance: typeof Monaco = await loader.init()
73
- // The field declares its own language; without one, highlight nothing rather than guess.
74
- const lang = schema?.language ?? language ?? 'plaintext'
75
-
76
- // `monaco.languages.typescript` is deprecated in favour of this top-level namespace; both name
77
- // the same object at runtime, but only this one is typed (the old path is a `{ deprecated: true }`
78
- // tombstone). Needs monaco >= 0.53, so a `vsPath` override must serve a matching version.
79
- const ts = monacoInstance.typescript
80
- if (extraLibs) {
81
- ts.javascriptDefaults.addExtraLib(extraLibs, 'ts:stonecrop.d.ts')
82
- }
83
- if (extraLibs || libs) {
84
- ts.javascriptDefaults.setCompilerOptions({
85
- checkJs: true,
86
- noImplicitAny: false,
87
- // `lib` is authoritative — it replaces Monaco's default set, so passing e.g.
88
- // ['es2020'] retains the JS built-ins (Promise/Array/JSON/…) while removing the
89
- // DOM/browser globals. `target` is matched so ES2020 syntax isn't flagged.
90
- ...(libs && {
91
- target: ts.ScriptTarget.ES2020,
92
- lib: libs,
93
- }),
94
- })
95
- }
96
-
97
- monacoInstance.editor.defineTheme('agritheory', theme)
98
- monacoInstance.editor.setTheme('agritheory')
99
-
100
- // Give the model a file:// URI so the TS worker recognises it as JS/TS and can
101
- // run getSyntacticDiagnostics without throwing "Could not find source file".
102
- const ext = lang === 'typescript' ? 'ts' : lang === 'json' ? 'json' : lang === 'python' ? 'py' : 'js'
103
- const modelUri = monacoInstance.Uri.parse(`file:///stonecrop-editor-${++editorModelCounter}.${ext}`)
104
- const editorModel = monacoInstance.editor.createModel(toEditorString(modelValue.value), lang, modelUri)
105
-
106
- const inst = monacoInstance.editor.create(editorRef.value!, {
107
- automaticLayout: true,
108
- colorDecorators: true,
109
- lineHeight: 24,
110
- scrollBeyondLastLine: false,
111
- ...options,
112
- model: editorModel,
113
- readOnly: mode !== 'edit',
114
- })
115
-
116
- inst.onDidChangeModelContent(() => {
117
- modelValue.value = inst.getValue()
118
- })
119
-
120
- editorInstance.value = inst
121
-
122
- // Sync any modelValue change that arrived during the async CDN load
123
- const current = modelValue.value ?? ''
124
- if (current !== inst.getValue()) inst.setValue(current)
125
- })
126
-
127
- onUnmounted(() => {
128
- editorInstance.value?.getModel()?.dispose()
129
- editorInstance.value?.dispose()
130
- editorInstance.value = null
131
- })
132
- </script>
133
-
134
- <style scoped>
135
- .a-code-editor {
136
- width: 100%;
137
- overflow: hidden;
138
- }
139
- </style>
package/src/index.ts DELETED
@@ -1,14 +0,0 @@
1
- import { App } from 'vue'
2
-
3
- import ACodeEditor from './components/ACodeEditor.vue'
4
-
5
- /**
6
- * Install all Code Editor components
7
- * @param app - Vue app instance
8
- * @public
9
- */
10
- function install(app: App /* options */) {
11
- app.component('ACodeEditor', ACodeEditor)
12
- }
13
-
14
- export { install, ACodeEditor }
@@ -1,5 +0,0 @@
1
- declare module '*.vue' {
2
- import { ComponentOptions } from 'vue'
3
- const Component: ComponentOptions
4
- export default Component
5
- }