Squashed commit message

frontend/admin/src/components/FormBuilder/CodeEditor.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="tw:flex-1 tw:flex tw:flex-col tw:gap-2 tw:h-full">
+    <Message v-if="isCustom" severity="info" class="tw:mb-2">
+      Вы находитесь в режиме ручного редактирования схемы.
+      <a
+        href="https://formkit.com/essentials/schema"
+        target="_blank"
+        title="Документация FormKit Schema"
+        class="tw:ml-1 tw:text-blue-600 hover:tw:underline"
+      >
+        Документация по схеме <i class="fa fa-external-link"></i>
+      </a>
+    </Message>
+    <Panel class="tw:flex-1 tw:flex tw:flex-col tw:overflow-hidden">
+      <template #header>
+        <div class="tw:flex tw:justify-between tw:items-center tw:w-full">
+          <div class="tw:flex tw:items-center tw:gap-2">
+            <span class="tw:font-medium">Редактор FormKit Schema</span>
+          </div>
+          <div v-if="error" class="tw:text-red-500 tw:text-sm">
+            <i class="fa fa-exclamation-circle"></i> {{ error }}
+          </div>
+        </div>
+      </template>
+      <div class="tw:flex-1 tw:h-full tw:overflow-hidden">
+        <Codemirror
+          :modelValue="modelValue"
+          @update:modelValue="onCodeChange"
+          placeholder="Code goes here..."
+          :style="{ height: '600px' }"
+          :autofocus="true"
+          :indent-with-tab="true"
+          :tab-size="2"
+          :extensions="extensions"
+        />
+      </div>
+    </Panel>
+  </div>
+</template>
+
+<script setup>
+import { Message, Panel } from 'primevue';
+import { Codemirror } from 'vue-codemirror';
+import { json } from '@codemirror/lang-json';
+import { oneDark } from '@codemirror/theme-one-dark';
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  error: {
+    type: String,
+    default: null
+  },
+  isCustom: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const extensions = [json(), oneDark];
+
+function onCodeChange(newVal) {
+  emit('update:modelValue', newVal);
+  emit('change', newVal);
+}
+</script>