@stonecrop/code-editor 0.13.2 → 0.13.4

package/dist/src/utils/graphql.d.ts

@@ -0,0 +1,44 @@
+import type { SchemaConfig } from 'monaco-graphql';
+/**
+ * Initializes the GraphQL language mode for Monaco. Safe to call multiple
+ * times — initialization only runs once. Subsequent calls with a schema
+ * update the active schema.
+ *
+ * Consumers must configure `globalThis.MonacoEnvironment.getWorker` before
+ * creating a GraphQL editor so that the language service worker is available.
+ * @internal
+ */
+export declare function configureGraphQL(schemaConfig?: SchemaConfig): Promise<void>;
+/**
+ * Lazily loads and returns the Monaco instance from monaco-graphql/monaco-editor.
+ * @internal
+ */
+export declare function getMonaco(): Promise<{
+    default: typeof import("monaco-graphql/esm/monaco-editor.js");
+    CancellationTokenSource: typeof import("monaco-editor").CancellationTokenSource;
+    Emitter: typeof import("monaco-editor").Emitter;
+    KeyCode: typeof import("monaco-editor").KeyCode;
+    KeyMod: typeof import("monaco-editor").KeyMod;
+    MarkerSeverity: typeof import("monaco-editor").MarkerSeverity;
+    MarkerTag: typeof import("monaco-editor").MarkerTag;
+    Position: typeof import("monaco-editor").Position;
+    Range: typeof import("monaco-editor").Range;
+    Selection: typeof import("monaco-editor").Selection;
+    SelectionDirection: typeof import("monaco-editor").SelectionDirection;
+    Token: typeof import("monaco-editor").Token;
+    languages: typeof import("monaco-editor").languages;
+    Uri: typeof import("monaco-editor").Uri;
+    createWebWorker: typeof import("monaco-editor").createWebWorker;
+    css: typeof import("monaco-editor").css;
+    editor: typeof import("monaco-editor").editor;
+    html: typeof import("monaco-editor").html;
+    json: typeof import("monaco-editor").json;
+    lsp: typeof import("monaco-editor").lsp;
+    typescript: typeof import("monaco-editor").typescript;
+}>;
+/**
+ * Lazily loads and returns the Monaco editor loader.
+ * @internal
+ */
+export declare function getLoader(): Promise<typeof import("@monaco-editor/loader").default>;
+//# sourceMappingURL=graphql.d.ts.map

package/dist/src/utils/graphql.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"graphql.d.ts","sourceRoot":"","sources":["../../../src/utils/graphql.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAIlD;;;;;;;;GAQG;AACH,wBAAsB,gBAAgB,CAAC,YAAY,CAAC,EAAE,YAAY,iBAajE;AAED;;;GAGG;AACH,wBAAsB,SAAS;;;;;;;;;;;;;;;;;;;;;;GAE9B;AAED;;;GAGG;AACH,wBAAsB,SAAS,4DAG9B"}

package/dist/src/utils/graphql.js

@@ -0,0 +1,38 @@
+let graphqlInitialized = false;
+/**
+ * Initializes the GraphQL language mode for Monaco. Safe to call multiple
+ * times — initialization only runs once. Subsequent calls with a schema
+ * update the active schema.
+ *
+ * Consumers must configure `globalThis.MonacoEnvironment.getWorker` before
+ * creating a GraphQL editor so that the language service worker is available.
+ * @internal
+ */
+export async function configureGraphQL(schemaConfig) {
+    if (!graphqlInitialized) {
+        const { initializeMode } = await import('monaco-graphql/initializeMode');
+        initializeMode(schemaConfig ? { schemas: [schemaConfig] } : undefined);
+        graphqlInitialized = true;
+    }
+    else if (schemaConfig) {
+        const monaco = await import('monaco-graphql/monaco-editor');
+        const { languages } = monaco;
+        const api = languages.graphql;
+        api?.api?.setSchemaConfig([schemaConfig]);
+    }
+}
+/**
+ * Lazily loads and returns the Monaco instance from monaco-graphql/monaco-editor.
+ * @internal
+ */
+export async function getMonaco() {
+    return import('monaco-graphql/monaco-editor');
+}
+/**
+ * Lazily loads and returns the Monaco editor loader.
+ * @internal
+ */
+export async function getLoader() {
+    const { default: loader } = await import('@monaco-editor/loader');
+    return loader;
+}

package/dist/src/utils/language.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Resolves the Monaco language identifier from a Stonecrop fieldtype and an
+ * optional explicit language override.
+ *
+ * - JSON fieldtype always maps to 'json' regardless of the explicit language.
+ * - Code fieldtype defaults to 'typescript'; the explicit language overrides it.
+ * - All other fieldtypes use the explicit language, falling back to 'plaintext'.
+ * @public
+ */
+export declare function detectLanguage(fieldtype?: string, explicitLanguage?: string): string;
+//# sourceMappingURL=language.d.ts.map

package/dist/src/utils/language.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"language.d.ts","sourceRoot":"","sources":["../../../src/utils/language.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAIpF"}

package/dist/src/utils/language.js

@@ -0,0 +1,16 @@
+/**
+ * Resolves the Monaco language identifier from a Stonecrop fieldtype and an
+ * optional explicit language override.
+ *
+ * - JSON fieldtype always maps to 'json' regardless of the explicit language.
+ * - Code fieldtype defaults to 'typescript'; the explicit language overrides it.
+ * - All other fieldtypes use the explicit language, falling back to 'plaintext'.
+ * @public
+ */
+export function detectLanguage(fieldtype, explicitLanguage) {
+    if (fieldtype === 'JSON')
+        return 'json';
+    if (fieldtype === 'Code')
+        return explicitLanguage ?? 'typescript';
+    return explicitLanguage ?? 'plaintext';
+}

package/dist/src/utils/serialization.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Coerces an unknown value to a string suitable for Monaco's initial content.
+ * Objects are JSON-stringified with 2-space indentation.
+ * Null and undefined become empty string.
+ * Strings pass through unchanged.
+ * @public
+ */
+export declare function toEditorString(value: unknown, _fieldtype?: string): string;
+//# sourceMappingURL=serialization.d.ts.map

package/dist/src/utils/serialization.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"serialization.d.ts","sourceRoot":"","sources":["../../../src/utils/serialization.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,EAAE,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAI1E"}

package/dist/src/utils/serialization.js

@@ -0,0 +1,14 @@
+/**
+ * Coerces an unknown value to a string suitable for Monaco's initial content.
+ * Objects are JSON-stringified with 2-space indentation.
+ * Null and undefined become empty string.
+ * Strings pass through unchanged.
+ * @public
+ */
+export function toEditorString(value, _fieldtype) {
+    if (value === null || value === undefined)
+        return '';
+    if (typeof value === 'string')
+        return value;
+    return JSON.stringify(value, null, 2);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/code-editor",
-  "version": "0.13.2",
+  "version": "0.13.4",
   "license": "MIT",
   "type": "module",
   "author": {
@@ -33,9 +33,7 @@
   ],
   "dependencies": {
     "@monaco-editor/loader": "^1.7.0",
-    "monaco-editor": "^0.55.1",
-    "@stonecrop/themes": "0.13.2",
-    "@stonecrop/utilities": "0.13.2"
+    "monaco-editor": "^0.55.1"
   },
   "peerDependencies": {
     "vue": "^3.5.33"
@@ -45,16 +43,18 @@
     "@microsoft/api-documenter": "^7.30.5",
     "@rushstack/heft": "^1.2.17",
     "@vitejs/plugin-vue": "^6.0.6",
+    "@vue/test-utils": "^2.4.10",
+    "jsdom": "^29.1.1",
     "eslint": "^10.3.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-vue": "^10.9.0",
     "globals": "^17.6.0",
     "typescript": "^6.0.3",
     "typescript-eslint": "^8.59.1",
+    "vitest": "^4.1.5",
     "vue": "^3.5.33",
     "vite": "^7.3.2",
     "vue-router": "^5.0.6",
-    "@stonecrop/atable": "0.13.2",
     "stonecrop-rig": "0.7.0"
   },
   "publishConfig": {
@@ -69,6 +69,9 @@
     "dev": "vite",
     "docs": "bash ../common/scripts/run-docs.sh code_editor",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
   }
 }

package/src/components/ACodeEditor.vue

@@ -1,42 +1,88 @@
 <template>
-	<div id="editor-container" ref="aCodeEditor" />
+	<div ref="aCodeEditor" class="a-code-editor" :style="{ height }" />
 </template>
 
 <script setup lang="ts">
 import loader from '@monaco-editor/loader'
 import type * as Monaco from 'monaco-editor'
-import { editor } from 'monaco-editor'
-import { onMounted, useTemplateRef } from 'vue'
+import type { editor } from 'monaco-editor'
+import { onMounted, onUnmounted, shallowRef, watch } from 'vue'
+import { useTemplateRef } from 'vue'
 
 import { theme } from '../theme/code_editor/agritheory'
+import { detectLanguage } from '../utils/language'
+import { toEditorString } from '../utils/serialization'
 
-const { options = {} } = defineProps<{ options?: editor.IStandaloneEditorConstructionOptions }>()
+type EditorSchema = { fieldtype?: string; [key: string]: unknown }
+
+const modelValue = defineModel<string>()
+const {
+	height = '300px',
+	mode = 'edit',
+	schema = undefined,
+	language = undefined,
+	options = undefined,
+} = defineProps<{
+	height?: string
+	mode?: 'edit' | 'read' | 'display'
+	schema?: EditorSchema
+	language?: string
+	options?: editor.IStandaloneEditorConstructionOptions
+}>()
 
 const editorRef = useTemplateRef<HTMLDivElement>('aCodeEditor')
-const editorOptions = {
-	...options,
-	automaticLayout: true,
-	colorDecorators: true,
-	lineHeight: 24,
-	scrollBeyondLastLine: false,
-}
+const editorInstance = shallowRef<editor.IStandaloneCodeEditor | null>(null)
+
+watch(modelValue, val => {
+	const inst = editorInstance.value
+	if (inst && val !== inst.getValue()) inst.setValue(val ?? '')
+})
+
+watch(
+	() => mode,
+	m => {
+		editorInstance.value?.updateOptions({ readOnly: m !== 'edit' })
+	}
+)
 
 onMounted(async () => {
 	const monacoInstance: typeof Monaco = await loader.init()
-	const editorInstance = monacoInstance.editor
+	const lang = detectLanguage(schema?.fieldtype, language)
 
-	editorInstance.defineTheme('agritheory', theme)
-	editorInstance.setTheme('agritheory')
+	monacoInstance.editor.defineTheme('agritheory', theme)
+	monacoInstance.editor.setTheme('agritheory')
 
-	if (editorRef.value) {
-		editorInstance.create(editorRef.value, editorOptions)
-	}
+	const inst = monacoInstance.editor.create(editorRef.value!, {
+		automaticLayout: true,
+		colorDecorators: true,
+		lineHeight: 24,
+		scrollBeyondLastLine: false,
+		...options,
+		value: toEditorString(modelValue.value, schema?.fieldtype),
+		language: lang,
+		readOnly: mode !== 'edit',
+	})
+
+	inst.onDidChangeModelContent(() => {
+		modelValue.value = inst.getValue()
+	})
+
+	editorInstance.value = inst
+
+	// Sync any modelValue change that arrived during the async CDN load
+	const current = modelValue.value ?? ''
+	if (current !== inst.getValue()) inst.setValue(current)
+})
+
+onUnmounted(() => {
+	editorInstance.value?.dispose()
+	editorInstance.value = null
 })
 </script>
 
-<style>
-#editor-container {
+<style scoped>
+.a-code-editor {
 	width: 100%;
-	height: 100%;
+	overflow: hidden;
 }
 </style>

package/src/utils/language.ts

@@ -0,0 +1,14 @@
+/**
+ * Resolves the Monaco language identifier from a Stonecrop fieldtype and an
+ * optional explicit language override.
+ *
+ * - JSON fieldtype always maps to 'json' regardless of the explicit language.
+ * - Code fieldtype defaults to 'typescript'; the explicit language overrides it.
+ * - All other fieldtypes use the explicit language, falling back to 'plaintext'.
+ * @public
+ */
+export function detectLanguage(fieldtype?: string, explicitLanguage?: string): string {
+	if (fieldtype === 'JSON') return 'json'
+	if (fieldtype === 'Code') return explicitLanguage ?? 'typescript'
+	return explicitLanguage ?? 'plaintext'
+}

package/src/utils/serialization.ts

@@ -0,0 +1,12 @@
+/**
+ * Coerces an unknown value to a string suitable for Monaco's initial content.
+ * Objects are JSON-stringified with 2-space indentation.
+ * Null and undefined become empty string.
+ * Strings pass through unchanged.
+ * @public
+ */
+export function toEditorString(value: unknown, _fieldtype?: string): string {
+	if (value === null || value === undefined) return ''
+	if (typeof value === 'string') return value
+	return JSON.stringify(value, null, 2)
+}