feat: adds json sytanx to template (#4414)

Author: amir20

assets/auto-imports.d.ts

@@ -39,6 +39,7 @@ declare global {
   const createRef: typeof import('@vueuse/core').createRef
   const createReusableTemplate: typeof import('@vueuse/core').createReusableTemplate
   const createSharedComposable: typeof import('@vueuse/core').createSharedComposable
+  const createTemplateEditor: typeof import('./composable/templateEditor').createTemplateEditor
   const createTemplatePromise: typeof import('@vueuse/core').createTemplatePromise
   const createUnrefFn: typeof import('@vueuse/core').createUnrefFn
   const customRef: typeof import('vue').customRef
@@ -403,6 +404,9 @@ declare global {
   export type { ExprEditorOptions } from './composable/exprEditor'
   import('./composable/exprEditor')
   // @ts-ignore
+  export type { TemplateEditorOptions } from './composable/templateEditor'
+  import('./composable/templateEditor')
+  // @ts-ignore
   export type { Config, Profile } from './stores/config'
   import('./stores/config')
   // @ts-ignore
@@ -454,6 +458,7 @@ declare module 'vue' {
     readonly createRef: UnwrapRef<typeof import('@vueuse/core')['createRef']>
     readonly createReusableTemplate: UnwrapRef<typeof import('@vueuse/core')['createReusableTemplate']>
     readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
+    readonly createTemplateEditor: UnwrapRef<typeof import('./composable/templateEditor')['createTemplateEditor']>
     readonly createTemplatePromise: UnwrapRef<typeof import('@vueuse/core')['createTemplatePromise']>
     readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
     readonly customRef: UnwrapRef<typeof import('vue')['customRef']>

assets/components/Notification/DestinationForm.vue

@@ -154,11 +154,10 @@
           $t("notifications.destination-form.template-hint")
         }}</span>
       </legend>
-      <textarea
-        v-model="template"
-        class="textarea focus:textarea-primary min-h-48 w-full font-mono text-sm"
-        :class="{ 'textarea-primary': template.trim().length > 0 }"
-      ></textarea>
+      <div
+        ref="templateEditorRef"
+        class="border-base-content/20 focus-within:border-primary min-h-48 w-full overflow-auto rounded-lg border"
+      ></div>
     </fieldset>
 
     <!-- Error -->
@@ -204,6 +203,7 @@
 
 <script lang="ts" setup>
 import type { Dispatcher, TestWebhookResult } from "@/types/notifications";
+import { createTemplateEditor } from "@/composable/templateEditor";
 
 type PayloadFormat = "slack" | "discord" | "ntfy" | "custom";
 
@@ -277,6 +277,7 @@ const hasExistingCloudDestination = computed(() => {
 const isEditing = !!destination;
 
 const nameInput = ref<HTMLInputElement>();
+const templateEditorRef = ref<HTMLElement>();
 const name = ref(destination?.name ?? "");
 useFocus(nameInput, { initialValue: true });
 const type = ref<"webhook" | "cloud">((destination?.type as "webhook" | "cloud") ?? "webhook");
@@ -292,11 +293,34 @@ const callbackUrl = `${window.location.origin}${withBase("/")}`;
 const cloudLinkUrl = `${__CLOUD_URL__}/link?appUrl=${encodeURIComponent(callbackUrl)}`;
 const cloudSettingsUrl = `${__CLOUD_URL__}/settings`;
 
+let templateEditorView: Awaited<ReturnType<typeof createTemplateEditor>> | undefined;
+
 function selectPayloadFormat(format: PayloadFormat) {
   payloadFormat.value = format;
   template.value = PAYLOAD_TEMPLATES[format];
+  setEditorContent(template.value);
+}
+
+function setEditorContent(value: string) {
+  if (!templateEditorView) return;
+  templateEditorView.dispatch({
+    changes: { from: 0, to: templateEditorView.state.doc.length, insert: value },
+  });
 }
 
+onMounted(async () => {
+  if (!templateEditorRef.value) return;
+  templateEditorView = await createTemplateEditor({
+    parent: templateEditorRef.value,
+    initialValue: template.value,
+    onChange: (v) => (template.value = v),
+  });
+});
+
+onScopeDispose(() => {
+  templateEditorView?.destroy();
+});
+
 const canTest = computed(() => {
   if (type.value === "webhook") {
     return webhookUrl.value.trim().length > 0;

assets/composable/templateEditor.ts

@@ -0,0 +1,71 @@
+export interface TemplateEditorOptions {
+  parent: HTMLElement;
+  initialValue: string;
+  onChange?: (value: string) => void;
+}
+
+export async function createTemplateEditor(options: TemplateEditorOptions) {
+  const [{ EditorView }, { EditorState }, { json }, { HighlightStyle, syntaxHighlighting }, { tags }] =
+    await Promise.all([
+      import("@codemirror/view"),
+      import("@codemirror/state"),
+      import("@codemirror/lang-json"),
+      import("@codemirror/language"),
+      import("@lezer/highlight"),
+    ]);
+
+  const editorTheme = EditorView.theme({
+    "&": {
+      backgroundColor: "var(--color-base-100)",
+      color: "var(--color-base-content)",
+      fontSize: "0.875rem",
+    },
+    ".cm-content": {
+      caretColor: "var(--color-primary)",
+      fontFamily: "ui-monospace, monospace",
+    },
+    ".cm-cursor": {
+      borderLeftColor: "var(--color-primary)",
+    },
+    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground": {
+      backgroundColor: "var(--color-base-300)",
+    },
+    ".cm-activeLine": {
+      backgroundColor: "color-mix(in oklch, var(--color-base-200) 50%, transparent)",
+    },
+    ".cm-gutters": {
+      backgroundColor: "var(--color-base-200)",
+      color: "color-mix(in oklch, var(--color-base-content) 50%, transparent)",
+      border: "none",
+    },
+    ".cm-activeLineGutter": {
+      backgroundColor: "var(--color-base-300)",
+    },
+  });
+
+  const highlightStyle = HighlightStyle.define([
+    { tag: tags.propertyName, color: "var(--color-info)" },
+    { tag: tags.string, color: "var(--color-success)" },
+    { tag: tags.number, color: "var(--color-warning)" },
+    { tag: tags.bool, color: "var(--color-warning)" },
+    { tag: tags.null, color: "var(--color-secondary)" },
+    { tag: tags.punctuation, color: "var(--color-base-content)" },
+  ]);
+
+  const state = EditorState.create({
+    doc: options.initialValue,
+    extensions: [
+      EditorView.lineWrapping,
+      json(),
+      editorTheme,
+      syntaxHighlighting(highlightStyle),
+      EditorView.updateListener.of((update) => {
+        if (update.docChanged && options.onChange) {
+          options.onChange(update.view.state.doc.toString());
+        }
+      }),
+    ],
+  });
+
+  return new EditorView({ state, parent: options.parent });
+}

package.json

@@ -31,6 +31,7 @@
   "dependencies": {
     "@codemirror/autocomplete": "^6.20.0",
     "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/lang-json": "^6.0.2",
     "@codemirror/language": "^6.12.1",
     "@codemirror/state": "^6.5.4",
     "@codemirror/theme-one-dark": "^6.1.3",