1

draggable-panels/src/materials/TextEditor/index.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import config from './index.json'
+
+const props = defineProps<{
+  materialProps?: Record<string, any>
+}>()
+
+const mergedProps = { ...config.props, ...props.materialProps }
+const textContent = ref(mergedProps.defaultValue)
+</script>
+
+<template>
+  <div class="text-editor">
+    <div class="editor-header">
+      <span class="title">{{ config.name }}</span>
+    </div>
+    <div class="editor-body">
+      <textarea 
+        v-model="textContent"
+        :placeholder="mergedProps.placeholder"
+        :rows="mergedProps.rows"
+        class="editor-textarea"
+      ></textarea>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.text-editor {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: #1e1e1e;
+}
+
+.editor-header {
+  padding: 8px 12px;
+  background: #2d2d2d;
+  border-bottom: 1px solid #3c3c3c;
+}
+
+.title {
+  color: #cccccc;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.editor-body {
+  flex: 1;
+  padding: 12px;
+  overflow: hidden;
+}
+
+.editor-textarea {
+  width: 100%;
+  height: 100%;
+  background: #252526;
+  color: #d4d4d4;
+  border: 1px solid #3c3c3c;
+  border-radius: 4px;
+  padding: 12px;
+  font-family: 'Consolas', 'Monaco', monospace;
+  font-size: 14px;
+  line-height: 1.5;
+  resize: none;
+  outline: none;
+}
+
+.editor-textarea:focus {
+  border-color: #007acc;
+}
+
+.editor-textarea::placeholder {
+  color: #666666;
+}
+</style>