@mixd-id/web-scaffold 0.1.230406107 → 0.1.230406108

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406107",
+  "version": "0.1.230406108",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -43,6 +43,7 @@
     "glob": "^8.0.3",
     "lodash": "^4.17.21",
     "md5": "^2.3.0",
+    "monaco-editor": "^0.41.0",
     "nprogress": "^0.2.0",
     "pinia": "^2.0.14",
     "prismjs": "^1.28.0",

package/src/components/MonacoEditor.vue

@@ -0,0 +1,136 @@
+<template>
+	<div :class="$style.comp">
+		<div class="flex flex-row p-2">
+			<code>{{ language }}</code>
+			<div class="flex-1"></div>
+			<button type="button" class="text-primary" @click="reformat">Beautify</button>
+		</div>
+		<div ref="editorContainer" :class="$style['monaco-editor-container']"></div>
+	</div>
+</template>
+
+<script>
+import * as monaco from 'monaco-editor'
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
+import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
+import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
+
+self.MonacoEnvironment = {
+	getWorker(_, label) {
+		if (label === 'json') {
+			return new jsonWorker()
+		}
+		if (label === 'css' || label === 'scss' || label === 'less') {
+			return new cssWorker()
+		}
+		if (label === 'html' || label === 'handlebars' || label === 'razor') {
+			return new htmlWorker()
+		}
+		if (label === 'typescript' || label === 'javascript') {
+			return new tsWorker()
+		}
+		return new editorWorker()
+	}
+}
+
+export default {
+
+	props: {
+
+		language: {
+			type: String,
+			default: 'json'
+		},
+
+		theme: {
+			type: String,
+			default: 'vs-dark'
+		},
+
+		lineNumbers: {
+			type: String,
+			default: "off"
+		},
+
+		modelValue: String
+
+	},
+
+	methods: {
+
+		createEditor() {
+			this.editor = monaco.editor.create(this.$refs.editorContainer, {
+				value: this.modelValue,
+				language: this.language,
+				lineNumbers: this.lineNumbers,
+				minimap: {
+					enabled: false
+				},
+				theme: this.theme
+			});
+
+			this.editor.onDidChangeModelContent(event => {
+				const updatedCode = this.editor.getValue();
+				this.$emit('update:modelValue', updatedCode)
+			});
+		},
+
+		getErrors(){
+			const markers = monaco.editor.getModelMarkers({ owner: this.editor.getModel() });
+
+			let errors = []
+			if (markers.length >= 0) {
+				markers.forEach(marker => {
+					errors.push({
+						message: marker.message,
+						line: marker.startLineNumber,
+						column: marker.startColumn
+					})
+				});
+			}
+
+			return errors.length > 0 ? errors : null
+		},
+
+		reformat(){
+			const formatAction = this.editor.getAction('editor.action.formatDocument');
+			formatAction.run();
+		}
+
+	},
+
+	beforeDestroy() {
+		this.editor.dispose();
+	},
+
+	mounted() {
+		this.createEditor();
+	}
+
+};
+</script>
+
+<style module>
+
+.comp{
+	@apply flex-1 flex flex-col;
+}
+
+.monaco-editor-container {
+	width: 100%;
+	height: 300px;
+}
+
+.monaco-editor-container *{
+	font-family: Menlo, Monaco, "Courier New", monospace;
+	--vscode-editor-background: rgb(var(--base-300));
+	--vscode-editorGutter-background: rgb(var(--base-400));
+}
+
+.monaco-editor-container .margin-view-overlays .line-numbers {
+	font-family: 'Menlo', monospace;
+}
+
+</style>

package/src/index.js

@@ -321,6 +321,7 @@ export default{
     app.component('Grid', defineAsyncComponent(() => import("./components/Grid.vue")))
     app.component('Modal', defineAsyncComponent(() => import("./components/Modal.vue")))
     app.component('Modal2', defineAsyncComponent(() => import("./components/Modal2.vue")))
+    app.component('MonacoEditor', defineAsyncComponent(() => import("./components/MonacoEditor.vue")))
     app.component('OTPField', defineAsyncComponent(() => import("./components/OTPField.vue")))
     app.component('PageBuilder', defineAsyncComponent(() => import("./components/PageBuilder.vue")))
     app.component('Radio', defineAsyncComponent(() => import("./components/Radio.vue")))

package/src/widgets/WebPageBuilder.vue

@@ -380,7 +380,7 @@
 				</template>
 			</Modal>
 
-			<Modal ref="ldjsonModal" width="480" height="480">
+			<Modal ref="ldjsonModal" width="600" height="480">
 				<template v-slot:head>
 					<div class="relative p-5">
 						<h3>JSON-LD</h3>
@@ -396,18 +396,14 @@
 				<template #foot="{ context }">
 					<div class="p-5">
 						<Button type="button" class="w-[100px]"
-										@click="'index' in context ?
-											page.ldjson[context.index] = context.code :
-											page.ldjson.push(context.code);
-										$refs.ldjsonModal.close()
-										save()">
+										@click="saveLdjson(context)">
 							Save
 						</Button>
 					</div>
 				</template>
 				<template #default="{ context }">
 					<div class="flex-1 p-5">
-						<CodeEditor v-model="context.code" rows="10"/>
+						<MonacoEditor ref="monacoEditor" v-model="context.code"/>
 					</div>
 				</template>
 			</Modal>
@@ -727,6 +723,20 @@ export default{
 				})
 		}, 300),
 
+		saveLdjson(context){
+			const errors = this.$refs.monacoEditor.getErrors()
+			if(errors){
+				this.alert('JSON is not valid', errors.map(_ => _.message).join("\n"))
+				return
+			}
+
+			'index' in context ?
+				this.page.ldjson[context.index] = context.code :
+				this.page.ldjson.push(context.code);
+			this.$refs.ldjsonModal.close()
+			this.save()
+		},
+
 		imageSrc(imageUrl){
 			return typeof imageUrl === 'string' ? import.meta.env.VITE_IMAGE_HOST + '/' + imageUrl : imageUrl
 		},
@@ -1031,7 +1041,7 @@ export default{
 
 	emits: [ 'close' ],
 
-	inject: [ 'confirm', 'socket', 'socketEmit2', 'toast' ],
+	inject: [ 'alert', 'confirm', 'socket', 'socketEmit2', 'toast' ],
 
 	mounted() {
 		this.load()