diff --git a/README.md b/README.md
index 50103f3..4eda4d7 100644
--- a/README.md
+++ b/README.md
@@ -34,8 +34,7 @@
 # DragonEditor
 
 드래곤 에디터는 그냥 블로그에 쓸 이지윅 에디터가 필요해서 만들었습니다.<br>
-커스터마이징이 가능하며 AMP 페이지를 지원합니다.<br>
-2.0 기점으로 Nuxt.js만 지원합니다.
+커스터마이징이 가능하며 Nuxt.js만 지원합니다.
 
 ## 사용법
 
@@ -70,7 +69,7 @@ editor.value.addImageBlock({
 
 ```typescript
 editor.value.updateBlockData();
-// do somthing
+// do save
 ```
 
 ### 코멘트
@@ -83,7 +82,6 @@ editor.value.updateBlockData();
 <script setup lang="ts">
 const editor = ref();
 const commentData = ref({
-    type: "comment",
     classList: [],
     content: "",
 });
@@ -115,7 +113,7 @@ editor.value.setStyles("decorationBold");
 
 ```typescript
 editor.value.updateBlockData();
-// do somthing
+// do save
 ```
 
 3. 포커스
@@ -124,7 +122,7 @@ editor.value.updateBlockData();
 editor.value.focus();
 ```
 
-### 뷰어
+### Viewer
 
 ```vue
 <tempalte>
@@ -132,10 +130,16 @@ editor.value.focus();
 </tempalte>
 
 <script setup lang="ts">
-const contentData = ref([]); // 에디터로 저장한 데이터
+const contentData = ref([]); // Save Data for Editor
 </script>
 ```
 
+#### Props
+
+- content : This props is must be Array in Editor data.
+- mediaURL (Option) : This props is pre URL in Media.
+
+
 <!-- ## 데모 페이지
 
 [Demo page](https://lovefields.github.io/dragonEditor/examples)
diff --git a/package.json b/package.json
index 7ae3fdb..b1349a5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "dragon-editor",
-    "version": "2.0.0",
+    "version": "2.1.0",
     "description": "WYSIWYG editor on Nuxt.js",
     "repository": {
         "type": "git",
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
index 1f3a521..ed4e50f 100644
--- a/playground/pages/index.vue
+++ b/playground/pages/index.vue
@@ -6,6 +6,8 @@
             <DragonEditor v-model="contentData" :option="option" ref="editor" />
         </div>
         <button @click="test">업데이트</button>
+        <button @click="change">변경!</button>
+        <button @click="addImage">이미지1!</button>
     </div>
 </template>
 
@@ -13,34 +15,45 @@
 import { ref, onMounted } from "#imports";
 
 const editor = ref();
-const contentData = ref([
-    {
-        type: "ol",
-        id: "ksadgjkl3",
-        childList: [
-            {
-                classList: [],
-                content: "123<span>3333</span>",
-            },
-        ],
-    },
+const contentData = ref<any>([
+    // {
+    //     type: "ol",
+    //     id: "ksadgjkl3",
+    //     classList: [],
+    //     childList: [
+    //         {
+    //             classList: [],
+    //             content: "123<span>3333</span>",
+    //         },
+    //     ],
+    // },
 ]);
 const option = {
     // blockMenu: ["text", "ol", "ul"],
     customBlockMenu: [
         {
             name: "Image",
-            icon: "imageBlock",
+            icon: "ImageBlock",
             action: addImage,
         },
         {
             name: "Image",
-            icon: "imageBlock",
+            icon: "ImageBlock",
             action: addImage2,
         },
     ],
 };
 
+function change() {
+    contentData.value = [
+        {
+            type: "text",
+            classList: [],
+            content: "31312312313",
+        },
+    ];
+}
+
 function addImage() {
     editor.value.addImageBlock({
         src: "https://worldanimalfoundation.org/wp-content/uploads/2022/12/Choose-the-Proper-Location-at-First-review.jpg",
@@ -64,7 +77,7 @@ function test() {
 }
 
 onMounted(() => {
-    console.log(editor);
+    // console.log(editor);
     // console.log(editor.value.setContent(test));
 });
 </script>
diff --git a/playground/pages/viewer.vue b/playground/pages/viewer.vue
index 0504255..c7a0120 100644
--- a/playground/pages/viewer.vue
+++ b/playground/pages/viewer.vue
@@ -1,6 +1,7 @@
 <template>
     <div>
         <div class="editor">
+            <button @click="changeData">test</button>
             <DragonEditorViewer :content="contentData" />
         </div>
     </div>
@@ -9,19 +10,19 @@
 <script setup lang="ts">
 import { ref, onMounted } from "#imports";
 
+const number = ref<number>(1);
 const contentData = ref([
-    { type: "text", id: "qhwAteZgDrnXEtHlVWoX", classList: [], content: 'ㅇㄴㅁㄹ<span class="d-deco-bold">ㄴㅇㄹㄴㅇㅁㄹㄴㅁㅇ</span>ㄹㄹㄴㅁ' },
-    { type: "text", id: "V2etWRGSgYFE7ZxbLdtX", classList: [], content: 'ㅇㄹㅁ<span class="d-deco-underline">ㄴㅇㄹㅁㄴ</span>ㄹㄴㄹ' },
-    { type: "text", id: "Nibhm2YQSNCSkXLEShmB", classList: [], content: "ㄴㅁㅇㄹㄴㅇㄹㄴㅁㄹㅇㄴㄹㅁ" },
-    { type: "text", id: "11htrwpCeBW3rW4iZYCX", classList: [], content: 'ㄴㄹ<span class="d-deco-through">ㄴㅁㅇㄹㄴㅇㅁ</span>ㄹㄴ<code class="d-deco-code">ㅁㄹㄴㅁ</code>ㅇ' },
-    { type: "text", id: "P2uhezqPyZgojNq4aggR", classList: [], content: 'ㄹ<span class="d-deco-bold">ㄴㅁㄹㄴㅁㅇ</span><span class="d-deco-italic d-deco-bold">ㄹㄴㅁㄹ</span><span class="d-deco-italic">ㄴㄹ</span>ㄴㅁㄹ' },
-    { type: "text", id: "D3ubnFyQIjYfI9YWs4x6", classList: [], content: "" },
-    { type: "image", id: "FgCpjlXNZVx7KgHKjEzO", classList: ["d-align-center", "--10"], src: "https://c.pxhere.com/images/37/e4/22c0adf08932049eb1b8af36cbd7-1622414.jpg!d", width: 1200, height: 1739, webp: false, caption: undefined },
-    { type: "text", id: "0ygjWGTB4V6O2dAOgkPJ", classList: [], content: 'sadfasdfsa<a href="sdafsadfsadf" rel="nofollow" class="d-deco-link">dfsdfsadfsafsafsa</a>fsafsafsafasd' },
-    { type: "ol", id: "ksadgjkl3", classList: [], childList: [{ classList: [], content: "1233333" }] },
+    { type: "text", classList: [], content: 'ㅇㄴㅁㄹ<span class="d-deco-bold">ㄴㅇㄹㄴㅇㅁㄹㄴㅁㅇ</span>ㄹㄹㄴㅁ' },
+    { type: "text", classList: [], content: 'ㅇㄹㅁ<span class="d-deco-underline">ㄴㅇㄹㅁㄴ</span>ㄹㄴㄹ' },
+    { type: "text", classList: [], content: "ㄴㅁㅇㄹㄴㅇㄹㄴㅁㄹㅇㄴㄹㅁ" },
+    { type: "text", classList: [], content: 'ㄴㄹ<span class="d-deco-through">ㄴㅁㅇㄹㄴㅇㅁ</span>ㄹㄴ<code class="d-deco-code">ㅁㄹㄴㅁ</code>ㅇ' },
+    { type: "text", classList: [], content: 'ㄹ<span class="d-deco-bold">ㄴㅁㄹㄴㅁㅇ</span><span class="d-deco-italic d-deco-bold">ㄹㄴㅁㄹ</span><span class="d-deco-italic">ㄴㄹ</span>ㄴㅁㄹ' },
+    { type: "text", classList: [], content: "" },
+    { type: "image", classList: ["d-align-center", "--10"], src: "https://c.pxhere.com/images/37/e4/22c0adf08932049eb1b8af36cbd7-1622414.jpg!d", width: 1200, height: 1739, webp: false, caption: undefined },
+    { type: "text", classList: [], content: 'sadfasdfsa<a href="sdafsadfsadf" rel="nofollow" class="d-deco-link">dfsdfsadfsafsafsa</a>fsafsafsafasd' },
+    { type: "ol", classList: [], childList: [{ classList: [], content: "1233333" }] },
     {
         type: "ul",
-        id: "YyocAhurpA4eQ5fAxlTe",
         classList: [],
         childList: [
             { classList: [], content: "sdafsfksdfjkaslfj" },
@@ -31,8 +32,34 @@ const contentData = ref([
             { classList: [], content: "jsadklfjsakldf" },
         ],
     },
-    { type: "text", id: "B1akIdmWYW7vshudsRMN", classList: [], content: "" },
+    { type: "text", classList: [], content: "" },
 ]);
+
+function changeData() {
+    contentData.value = [
+        { type: "text", classList: [], content: `${number.value}` },
+        { type: "text", classList: [], content: "2" },
+        { type: "text", classList: [], content: "3" },
+        { type: "text", classList: [], content: "4" },
+        { type: "text", classList: [], content: "5" },
+        { type: "text", classList: [], content: "6" },
+        { type: "image", classList: ["d-align-center", "--10"], src: "https://c.pxhere.com/images/37/e4/22c0adf08932049eb1b8af36cbd7-1622414.jpg!d", width: 1200, height: 1739, webp: false, caption: undefined },
+        { type: "text", classList: [], content: "1" },
+        { type: "ol", classList: [], childList: [{ classList: [], content: "3322" }] },
+        {
+            type: "ul",
+            classList: [],
+            childList: [
+                { classList: [], content: "11" },
+                { classList: [], content: "22" },
+                { classList: [], content: "44" },
+                { classList: [], content: "55" },
+            ],
+        },
+    ];
+
+    number.value += 1;
+}
 </script>
 
 <style>
diff --git a/src/module.ts b/src/module.ts
index c695522..17c3584 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -7,9 +7,14 @@ export default defineNuxtModule({
     setup(options, nuxt) {
         const resolver = createResolver(import.meta.url)
 
+        // addComponent({
+        //     name: 'DragonEditor',
+        //     filePath: resolver.resolve('./runtime/shared/components/DragonEditor')
+        // });
+
         addComponent({
             name: 'DragonEditor',
-            filePath: resolver.resolve('./runtime/shared/components/DragonEditor')
+            filePath: resolver.resolve('./runtime/shared/components/DragonEditor.ts')
         });
 
         addComponent({
@@ -19,7 +24,7 @@ export default defineNuxtModule({
 
         addComponent({
             name: 'DragonEditorViewer',
-            filePath: resolver.resolve('./runtime/shared/components/DragonEditorViewer')
+            filePath: resolver.resolve('./runtime/shared/components/DragonEditorViewer.ts')
         });
     }
 })
diff --git a/src/runtime/core/components/SvgIcon.ts b/src/runtime/core/components/SvgIcon.ts
new file mode 100644
index 0000000..5583663
--- /dev/null
+++ b/src/runtime/core/components/SvgIcon.ts
@@ -0,0 +1,100 @@
+import { h, defineComponent, ref } from "vue";
+
+export default defineComponent({
+    name: "SvgIcon",
+    props: ["kind"],
+    setup(props: { kind: string }, ctx) {
+        const iconList = ref<{ [key: string]: any }>({
+            TextBlock: h("path", {
+                class: ["path"],
+                "fill-rule": "evenodd",
+                "clip-rule": "evenodd",
+                d: "M19 13H45C48.3137 13 51 15.6863 51 19V45C51 48.3137 48.3137 51 45 51H19C15.6863 51 13 48.3137 13 45V19C13 15.6863 15.6863 13 19 13ZM9 19C9 13.4772 13.4772 9 19 9H45C50.5228 9 55 13.4772 55 19V45C55 50.5228 50.5228 55 45 55H19C13.4772 55 9 50.5228 9 45V19ZM20.8571 19C19.8315 19 19 19.8315 19 20.8571C19 20.8806 19.0004 20.904 19.0013 20.9272C19.0004 20.9514 19 20.9756 19 21V22.5714C19 23.676 19.8954 24.5714 21 24.5714C22.0565 24.5714 22.9217 23.7522 22.995 22.7143H30V41.2857H28.8571C27.8315 41.2857 27 42.1172 27 43.1429C27 44.1685 27.8315 45 28.8571 45H32H35.1429C36.1685 45 37 44.1685 37 43.1429C37 42.1172 36.1685 41.2857 35.1429 41.2857H34V22.7143H41.005C41.0783 23.7522 41.9435 24.5714 43 24.5714C44.1046 24.5714 45 23.676 45 22.5714V21C45 20.9756 44.9996 20.9514 44.9987 20.9272C44.9996 20.904 45 20.8806 45 20.8571C45 19.8315 44.1685 19 43.1429 19H43H32H21H20.8571Z",
+            }),
+            ImageBlock: h("path", {
+                class: ["path"],
+                "fill-rule": "evenodd",
+                "clip-rule": "evenodd",
+                d: "M45 13H19C15.6863 13 13 15.6863 13 19V45C13 45.2946 13.0212 45.5843 13.0623 45.8676L22.5157 36.4142C24.7774 34.1525 28.3955 34.0739 30.7515 36.1784L36.5157 30.4142C38.8588 28.0711 42.6578 28.0711 45.0009 30.4142L51 36.4133V19C51 15.6863 48.3137 13 45 13ZM19 51C17.4694 51 16.0727 50.4269 15.0127 49.4835C15.156 49.3993 15.2912 49.2956 15.4142 49.1725L25.3441 39.2426C26.1251 38.4616 27.3915 38.4616 28.1725 39.2426L33.1967 44.2669C33.9778 45.0479 35.2441 45.0479 36.0252 44.2669C36.8062 43.4858 36.8062 42.2195 36.0252 41.4385L33.5867 39L39.3441 33.2426C40.1251 32.4616 41.3915 32.4616 42.1725 33.2426L51 42.0701V45C51 48.3137 48.3137 51 45 51H19ZM19 9C13.4772 9 9 13.4772 9 19V45C9 50.5228 13.4772 55 19 55H45C50.5228 55 55 50.5228 55 45V19C55 13.4772 50.5228 9 45 9H19ZM27 24C27 25.6569 25.6569 27 24 27C22.3431 27 21 25.6569 21 24C21 22.3431 22.3431 21 24 21C25.6569 21 27 22.3431 27 24ZM31 24C31 27.866 27.866 31 24 31C20.134 31 17 27.866 17 24C17 20.134 20.134 17 24 17C27.866 17 31 20.134 31 24Z",
+            }),
+            UlBlock: h("path", {
+                class: ["path"],
+                d: "M11 19C12.1046 19 13 18.1046 13 17C13 15.8954 12.1046 15 11 15C9.89543 15 9 15.8954 9 17C9 18.1046 9.89543 19 11 19ZM23 15C21.8954 15 21 15.8954 21 17C21 18.1046 21.8954 19 23 19H53C54.1046 19 55 18.1046 55 17C55 15.8954 54.1046 15 53 15H23ZM23 30C21.8954 30 21 30.8954 21 32C21 33.1046 21.8954 34 23 34H53C54.1046 34 55 33.1046 55 32C55 30.8954 54.1046 30 53 30H23ZM21 47C21 45.8954 21.8954 45 23 45H53C54.1046 45 55 45.8954 55 47C55 48.1046 54.1046 49 53 49H23C21.8954 49 21 48.1046 21 47ZM13 32C13 33.1046 12.1046 34 11 34C9.89543 34 9 33.1046 9 32C9 30.8954 9.89543 30 11 30C12.1046 30 13 30.8954 13 32ZM11 49C12.1046 49 13 48.1046 13 47C13 45.8954 12.1046 45 11 45C9.89543 45 9 45.8954 9 47C9 48.1046 9.89543 49 11 49Z",
+            }),
+            OlBlock: h("path", {
+                class: ["path"],
+                d: "M9 11.75C9 10.7835 9.76747 10 10.7143 10H13.2857C14.2325 10 15 10.7835 15 11.75V21.25C15 22.2165 14.2325 23 13.2857 23C12.3389 23 11.5714 22.2165 11.5714 21.25V13.5H10.7143C9.76747 13.5 9 12.7165 9 11.75ZM27 15C25.8954 15 25 15.8954 25 17C25 18.1046 25.8954 19 27 19H53C54.1046 19 55 18.1046 55 17C55 15.8954 54.1046 15 53 15H27ZM25 32C25 30.8954 25.8954 30 27 30H53C54.1046 30 55 30.8954 55 32C55 33.1046 54.1046 34 53 34H27C25.8954 34 25 33.1046 25 32ZM27 45C25.8954 45 25 45.8954 25 47C25 48.1046 25.8954 49 27 49H53C54.1046 49 55 48.1046 55 47C55 45.8954 54.1046 45 53 45H27ZM12.3846 44.2308C12.3846 43.7635 12.7635 43.3846 13.2308 43.3846C13.6981 43.3846 14.0769 43.7635 14.0769 44.2308C14.0769 44.6981 13.6981 45.0769 13.2308 45.0769C12.2961 45.0769 11.5385 45.8346 11.5385 46.7692C11.5385 47.7039 12.2961 48.4615 13.2308 48.4615C13.6981 48.4615 14.0769 48.8404 14.0769 49.3077C14.0769 49.775 13.6981 50.1538 13.2308 50.1538C12.7635 50.1538 12.3846 49.775 12.3846 49.3077C12.3846 48.3731 11.6269 47.6154 10.6923 47.6154C9.75767 47.6154 9 48.3731 9 49.3077C9 51.6443 10.8942 53.5385 13.2308 53.5385C15.5674 53.5385 17.4615 51.6443 17.4615 49.3077C17.4615 48.3553 17.1468 47.4763 16.6157 46.7692C17.1468 46.0621 17.4615 45.1832 17.4615 44.2308C17.4615 41.8942 15.5674 40 13.2308 40C10.8942 40 9 41.8942 9 44.2308C9 45.1654 9.75767 45.9231 10.6923 45.9231C11.6269 45.9231 12.3846 45.1654 12.3846 44.2308ZM13.5 28.5C13.0029 28.5 12.6 28.8918 12.6 29.375C12.6 30.3415 11.7941 31.125 10.8 31.125C9.80589 31.125 9 30.3415 9 29.375C9 26.9588 11.0147 25 13.5 25C15.9853 25 18 26.9588 18 29.375C18 29.9731 17.7566 30.5282 17.595 30.8603C17.4017 31.2573 17.1464 31.681 16.8741 32.0963C16.8175 32.1825 16.7653 32.2623 16.7163 32.3373C16.2911 32.9875 16.1104 33.2638 15.5 34.0473C15.3789 34.2028 15.0308 34.639 14.74 35.0033C14.5689 35.2177 14.4177 35.4072 14.3443 35.5H17.2C18.1941 35.5 19 36.2835 19 37.25C19 38.2165 18.1941 39 17.2 39H10.8C9.80585 39 9 38.2165 9 37.25C9 36.8843 9.11809 36.6048 9.14918 36.5312L9.15027 36.5286C9.19963 36.4117 9.25386 36.3129 9.29246 36.2463C9.37132 36.1102 9.46475 35.9726 9.54962 35.8528C9.72388 35.6068 9.95766 35.3025 10.2124 34.9778C10.4469 34.6787 10.6916 34.3714 10.949 34.0482L10.9497 34.0473C11.2967 33.6116 11.6665 33.1471 12.0651 32.6355C12.7344 31.7764 13.373 30.9246 13.8384 30.2148C14.0724 29.8581 14.2389 29.5727 14.341 29.3631C14.363 29.3178 14.3794 29.2814 14.3914 29.2532C14.3304 28.8276 13.9545 28.5 13.5 28.5Z",
+            }),
+            QuotationBlock: h("path", {
+                class: ["path"],
+                d: "M11 13C9.89543 13 9 13.7397 9 14.6522V49.3478C9 50.2603 9.89543 51 11 51C12.1046 51 13 50.2603 13 49.3478V14.6522C13 13.7397 12.1046 13 11 13ZM23.2667 15C22.0148 15 21 15.8954 21 17C21 18.1046 22.0148 19 23.2667 19H52.7333C53.9852 19 55 18.1046 55 17C55 15.8954 53.9852 15 52.7333 15H23.2667ZM21 47C21 45.8954 22.0148 45 23.2667 45H52.7333C53.9852 45 55 45.8954 55 47C55 48.1046 53.9852 49 52.7333 49H23.2667C22.0148 49 21 48.1046 21 47ZM23.2667 30C22.0148 30 21 30.8954 21 32C21 33.1046 22.0148 34 23.2667 34H52.7333C53.9852 34 55 33.1046 55 32C55 30.8954 53.9852 30 52.7333 30H23.2667Z",
+            }),
+            TableBlock: h("path", {
+                class: ["path"],
+                "fill-rule": "evenodd",
+                "clip-rule": "evenodd",
+                d: "M45 13H19C15.6863 13 13 15.6863 13 19V21H51V19C51 15.6863 48.3137 13 45 13ZM13 36V25H22V36H13ZM26 36V25H38V36H26ZM38 40H26V51H38V40ZM42 51H45C48.3137 51 51 48.3137 51 45V40H42V51ZM42 36V25H51V36H42ZM13 40H22V51H19C15.6863 51 13 48.3137 13 45V40ZM19 9C13.4772 9 9 13.4771 9 19V45C9 50.5229 13.4772 55 19 55H45C50.5228 55 55 50.5229 55 45V19C55 13.4771 50.5228 9 45 9H19Z",
+            }),
+            AlignLeft: h("path", {
+                class: ["path"],
+                d: "M11 9C9.89543 9 9 9.89543 9 11C9 12.1046 9.89543 13 11 13H23C24.1046 13 25 12.1046 25 11C25 9.89543 24.1046 9 23 9H11ZM11 51C9.89543 51 9 51.8954 9 53C9 54.1046 9.89543 55 11 55H53C54.1046 55 55 54.1046 55 53C55 51.8954 54.1046 51 53 51H11ZM9 39C9 37.8954 9.89543 37 11 37H37C38.1046 37 39 37.8954 39 39C39 40.1046 38.1046 41 37 41H11C9.89543 41 9 40.1046 9 39ZM11 23C9.89543 23 9 23.8954 9 25C9 26.1046 9.89543 27 11 27H53C54.1046 27 55 26.1046 55 25C55 23.8954 54.1046 23 53 23H11Z",
+            }),
+            AlignCenter: h("path", {
+                class: ["path"],
+                d: "M26 9C24.8954 9 24 9.89543 24 11C24 12.1046 24.8954 13 26 13H38C39.1046 13 40 12.1046 40 11C40 9.89543 39.1046 9 38 9H26ZM11 51C9.89543 51 9 51.8954 9 53C9 54.1046 9.89543 55 11 55H53C54.1046 55 55 54.1046 55 53C55 51.8954 54.1046 51 53 51H11ZM17 39C17 37.8954 17.8954 37 19 37H45C46.1046 37 47 37.8954 47 39C47 40.1046 46.1046 41 45 41H19C17.8954 41 17 40.1046 17 39ZM11 23C9.89543 23 9 23.8954 9 25C9 26.1046 9.89543 27 11 27H53C54.1046 27 55 26.1046 55 25C55 23.8954 54.1046 23 53 23H11Z",
+            }),
+            AlignRight: h("path", {
+                class: ["path"],
+                d: "M41 9C39.8954 9 39 9.89543 39 11C39 12.1046 39.8954 13 41 13H53C54.1046 13 55 12.1046 55 11C55 9.89543 54.1046 9 53 9H41ZM11 51C9.89543 51 9 51.8954 9 53C9 54.1046 9.89543 55 11 55H53C54.1046 55 55 54.1046 55 53C55 51.8954 54.1046 51 53 51H11ZM25 39C25 37.8954 25.8954 37 27 37H53C54.1046 37 55 37.8954 55 39C55 40.1046 54.1046 41 53 41H27C25.8954 41 25 40.1046 25 39ZM11 23C9.89543 23 9 23.8954 9 25C9 26.1046 9.89543 27 11 27H53C54.1046 27 55 26.1046 55 25C55 23.8954 54.1046 23 53 23H11Z",
+            }),
+            DecorationBold: h("path", {
+                class: ["path"],
+                d: "M15 50C15 52.7614 17.2386 55 20 55H32.9922C44.0389 55 49 49.3673 49 41.8571C49 35.1933 45.4069 31.9731 39.714 30.9461C39.6526 30.935 39.607 30.8816 39.607 30.8192C39.607 30.7636 39.6438 30.714 39.6966 30.6965C44.9893 28.9442 47.1479 25.5349 47.1479 20.6006C47.1479 13.1574 42.3191 9 32 9H20C17.2386 9 15 11.2386 15 14V50ZM29.3268 48.2274C26.5654 48.2274 24.3268 45.9888 24.3268 43.2274V39.3469C24.3268 36.5855 26.5654 34.3469 29.3268 34.3469H31.0078C36.3658 34.3469 39.3424 36.3586 39.3424 41.1195C39.3424 45.9475 36.4981 48.2274 31.3385 48.2274H29.3268ZM29.3268 28.4461C26.5654 28.4461 24.3268 26.2075 24.3268 23.4461V20.7055C24.3268 17.9441 26.5654 15.7055 29.3268 15.7055H30.4125C35.3074 15.7055 37.821 17.3149 37.821 22.0087C37.821 26.8367 34.5798 28.4461 30.1479 28.4461H29.3268Z",
+            }),
+            DecorationItalic: h("path", {
+                class: ["path"],
+                d: "M25 11C25 9.89543 25.8954 9 27 9H34H40H46C47.1046 9 48 9.89543 48 11C48 12.1046 47.1046 13 46 13H39.0435L29.9565 51H36C37.1046 51 38 51.8954 38 53C38 54.1046 37.1046 55 36 55H29H23H17C15.8954 55 15 54.1046 15 53C15 51.8954 15.8954 51 17 51H23.9565L33.0435 13H27C25.8954 13 25 12.1046 25 11Z",
+            }),
+            DecorationUnderline: h("path", {
+                class: ["path"],
+                d: "M21 13C21 11.8954 20.1046 11 19 11C17.8954 11 17 11.8954 17 13V28C17 36.2843 23.7157 43 32 43C40.2843 43 47 36.2843 47 28V13C47 11.8954 46.1046 11 45 11C43.8954 11 43 11.8954 43 13V28C43 34.0751 38.0751 39 32 39C25.9249 39 21 34.0751 21 28V13ZM13 49C11.8954 49 11 49.8954 11 51C11 52.1046 11.8954 53 13 53H51C52.1046 53 53 52.1046 53 51C53 49.8954 52.1046 49 51 49H13Z",
+            }),
+            DecorationStrikethrough: h("path", {
+                class: ["path"],
+                d: "M49 42.0827C49 46.213 47.3861 49.3985 44.1583 51.6391C40.9305 53.8797 36.4003 55 30.5676 55C25.2609 55 20.9589 54.3116 17.6613 52.9349C16.6952 52.5315 16.1274 51.5533 16.1274 50.5064C16.1274 48.407 18.3376 47.0078 20.3303 47.6687C21.2971 47.9893 22.2887 48.2735 23.305 48.5211C25.8816 49.142 28.3591 49.4525 30.7375 49.4525C34.4183 49.4525 37.2497 48.8991 39.2317 47.7923C41.2136 46.6585 42.2046 44.9442 42.2046 42.6496C42.2046 40.9219 41.4118 39.4507 39.8263 38.2359C38.9729 37.5555 37.669 36.8102 35.9145 36H47.1393C48.3798 37.7105 49 39.7381 49 42.0827ZM32.2534 28H19.0141C18.3351 27.3458 17.7693 26.6544 17.3166 25.9261C16.4389 24.4683 16 22.7271 16 20.7025C16 17.0851 17.5431 14.2371 20.6293 12.1585C23.7156 10.0528 27.9485 9 33.3282 9C37.3092 9 41.2187 9.61323 45.0567 10.8397C46.6953 11.3633 47.4248 13.2208 46.708 14.7845C46.04 16.2418 44.353 16.9113 42.8299 16.4114C39.2086 15.2228 35.8715 14.6285 32.8185 14.6285C29.4775 14.6285 26.9575 15.1279 25.2587 16.1268C23.5598 17.1256 22.7104 18.5023 22.7104 20.257C22.7104 21.4448 23.0219 22.4572 23.6448 23.294C24.296 24.1309 25.3295 24.9272 26.7452 25.6831C27.8244 26.2593 29.6605 27.0316 32.2534 28ZM11 30C9.89543 30 9 30.8954 9 32C9 33.1046 9.89543 34 11 34H53C54.1046 34 55 33.1046 55 32C55 30.8954 54.1046 30 53 30H11Z",
+            }),
+            LinkPath: h("path", {
+                class: ["path"],
+                d: "M21 20H28C29.1046 20 30 20.8954 30 22C30 23.1046 29.1046 24 28 24H21C16.5817 24 13 27.5817 13 32C13 36.4183 16.5817 40 21 40H28C29.1046 40 30 40.8955 30 42C30 43.1045 29.1046 44 28 44H21C14.3726 44 9 38.6274 9 32C9 25.3726 14.3726 20 21 20ZM51 32C51 36.4183 47.4183 40 43 40H36C34.8964 40 34.0015 40.8939 34 41.9972V42L34 42.0028C34.0015 43.1061 34.8964 44 36 44H43C49.6274 44 55 38.6274 55 32C55 25.3726 49.6274 20 43 20H36C34.8954 20 34 20.8955 34 22C34 23.1045 34.8954 24 36 24H43C47.4183 24 51 27.5817 51 32ZM24.5 30C23.3954 30 22.5 30.8954 22.5 32C22.5 33.1046 23.3954 34 24.5 34H39.5C40.6046 34 41.5 33.1046 41.5 32C41.5 30.8954 40.6046 30 39.5 30H24.5Z",
+            }),
+            CodeBlock: h("path", {
+                class: ["path"],
+                d: "M35.2981 20C34.5175 20 33.8188 20.4842 33.5447 21.2151L25.9492 41.4698C25.4901 42.6941 26.3951 44 27.7026 44C28.4832 44 29.182 43.5158 29.4561 42.7849L37.0516 22.5302C37.5107 21.3059 36.6056 20 35.2981 20ZM11.013 35.0376C8.34071 33.499 8.34073 29.643 11.013 28.1045L18.8813 23.5745C19.8385 23.0234 21.0613 23.3526 21.6124 24.3098C22.1635 25.2671 21.8343 26.4899 20.8771 27.041L13.0088 31.571L20.8771 36.1011C21.8343 36.6522 22.1635 37.875 21.6124 38.8322C21.0613 39.7895 19.8385 40.1187 18.8813 39.5676L11.013 35.0376ZM53.1299 35.0376C55.8022 33.499 55.8022 29.643 53.1299 28.1045L45.2616 23.5745C44.3044 23.0234 43.0816 23.3526 42.5305 24.3098C41.9794 25.2671 42.3086 26.4899 43.2658 27.041L51.1341 31.571L43.2658 36.1011C42.3086 36.6522 41.9794 37.875 42.5305 38.8322C43.0816 39.7895 44.3044 40.1187 45.2616 39.5676L53.1299 35.0376Z",
+            }),
+            Cancel: h("path", {
+                class: ["path"],
+                d: "M13.2497 13.0226C11.032 15.2442 11.032 18.8461 13.2497 21.0677L24.0457 31.8826L13.0153 42.9323C10.7976 45.1539 10.7976 48.7558 13.0153 50.9774C15.2331 53.199 18.8287 53.199 21.0464 50.9774L32.0768 39.9278L42.9532 50.8233C45.1709 53.0449 48.7666 53.0449 50.9843 50.8233C53.202 48.6017 53.202 44.9997 50.9843 42.7781L40.1078 31.8826L50.7499 21.2219C52.9677 19.0003 52.9677 15.3983 50.7499 13.1767C48.5322 10.9551 44.9366 10.9551 42.7189 13.1767L32.0768 23.8375L21.2808 13.0226C19.063 10.801 15.4674 10.801 13.2497 13.0226Z",
+            }),
+            Accept: h("path", {
+                class: ["path"],
+                d: "M51.3456 17.6735C49.1181 15.4422 45.5066 15.4422 43.2792 17.6735L26.0616 34.9213L20.741 29.5914C18.5126 27.3591 14.8997 27.3591 12.6713 29.5914C10.4429 31.8236 10.4429 35.4429 12.6713 37.6752L21.9937 47.0139C24.222 49.2462 27.835 49.2462 30.0633 47.0139C30.1078 46.9693 30.1514 46.9243 30.194 46.8787C30.3822 46.7324 30.5633 46.5728 30.736 46.3997L51.3456 25.7541C53.573 23.5227 53.573 19.9049 51.3456 17.6735Z",
+            }),
+            ArrowDown: h("path", {
+                class: ["path"],
+                d: "M32 9C30.8954 9 30 9.89543 30 11V48.0208L18.4142 36.435C17.6332 35.654 16.3668 35.654 15.5858 36.435C14.8047 37.2161 14.8047 38.4824 15.5858 39.2635L30.6611 54.3388C31.4422 55.1199 32.7086 55.1199 33.4896 54.3388L48.5649 39.2635C49.346 38.4824 49.346 37.2161 48.5649 36.435C47.7839 35.654 46.5176 35.654 45.7365 36.435L34 48.1716V11C34 9.89543 33.1046 9 32 9Z",
+            }),
+            ArrowUp: h("path", {
+                class: ["path"],
+                d: "M45.7366 27.4896C46.5176 28.2706 47.7839 28.2706 48.565 27.4896C49.346 26.7085 49.346 25.4422 48.565 24.6612L33.4896 9.58579C32.7085 8.80473 31.4422 8.80474 30.6612 9.58579L15.5858 24.6612C14.8047 25.4422 14.8047 26.7085 15.5858 27.4896C16.3668 28.2706 17.6332 28.2706 18.4142 27.4896L30 15.9038V53C30 54.1046 30.8954 55 32 55C33.1045 55 34 54.1046 34 53V15.753L45.7366 27.4896Z",
+            }),
+            Delete: h("path", {
+                class: ["path"],
+                "fill-rule": "evenodd",
+                "clip-rule": "evenodd",
+                d: "M32 51C42.4934 51 51 42.4934 51 32C51 21.5066 42.4934 13 32 13C21.5066 13 13 21.5066 13 32C13 42.4934 21.5066 51 32 51ZM32 55C44.7026 55 55 44.7026 55 32C55 19.2974 44.7026 9 32 9C19.2974 9 9 19.2974 9 32C9 44.7026 19.2974 55 32 55ZM21.4142 42.6274C20.6332 41.8462 20.6332 40.5801 21.4142 39.7988L29.1715 32.0415L21.5858 24.4558C20.8047 23.6748 20.8047 22.4084 21.5858 21.6274C22.3668 20.8462 23.6332 20.8462 24.4142 21.6274L31.9999 29.2131L39.799 21.4141C40.58 20.6331 41.8464 20.6331 42.6274 21.4141C43.4084 22.1953 43.4084 23.4614 42.6274 24.2427L34.8284 32.0417L42.799 40.0122C43.58 40.7932 43.58 42.0596 42.799 42.8406C42.0179 43.6216 40.7516 43.6216 39.9706 42.8406L32.0001 34.8701L24.2426 42.6274C23.4616 43.4084 22.1953 43.4084 21.4142 42.6274Z",
+            }),
+        });
+
+        return () => h("svg", { class: ["d-icon"], viewBox: "0 0 64 64" }, iconList.value[props.kind]);
+    },
+});
diff --git a/src/runtime/core/components/SvgIcon.vue b/src/runtime/core/components/SvgIcon.vue
deleted file mode 100644
index 5304958..0000000
--- a/src/runtime/core/components/SvgIcon.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<template>
-    <svg class="d-icon" viewBox="0 0 64 64">
-        <component :is="iconComponent" />
-    </svg>
-</template>
-
-<script setup lang="ts">
-import TextBlock from "./icon/TextBlock.vue";
-import ImageBlock from "./icon/ImageBlock.vue";
-import UlBlock from "./icon/UlBlock.vue";
-import OlBlock from "./icon/OlBlock.vue";
-import QuotationBlock from "./icon/QuotationBlock.vue";
-import TableBlock from "./icon/TableBlock.vue";
-import AlignLeft from "./icon/AlignLeft.vue";
-import AlignCenter from "./icon/AlignCenter.vue";
-import AlignRight from "./icon/AlignRight.vue";
-import DecorationBold from "./icon/DecorationBold.vue";
-import DecorationItalic from "./icon/DecorationItalic.vue";
-import DecorationUnderline from "./icon/DecorationUnderline.vue";
-import DecorationStrikethrough from "./icon/DecorationStrikethrough.vue";
-import LinkPath from "./icon/LinkPath.vue";
-import CodeBlock from "./icon/CodeBlock.vue";
-import Cancel from "./icon/Cancel.vue";
-import Accept from "./icon/Accept.vue";
-import ArrowDown from "./icon/ArrowDown.vue";
-import ArrowUp from "./icon/ArrowUp.vue";
-import Delete from "./icon/Delete.vue";
-
-const props = defineProps<{ kind: String }>();
-let iconComponent: any;
-
-switch (props.kind) {
-    case "textBlock":
-        iconComponent = TextBlock;
-        break;
-    case "imageBlock":
-        iconComponent = ImageBlock;
-        break;
-    case "ulBlock":
-        iconComponent = UlBlock;
-        break;
-    case "olBlock":
-        iconComponent = OlBlock;
-        break;
-    case "quotationBlock":
-        iconComponent = QuotationBlock;
-        break;
-    case "tableBlock":
-        iconComponent = TableBlock;
-        break;
-    case "alignLeft":
-        iconComponent = AlignLeft;
-        break;
-    case "alignCenter":
-        iconComponent = AlignCenter;
-        break;
-    case "alignRight":
-        iconComponent = AlignRight;
-        break;
-    case "decorationBold":
-        iconComponent = DecorationBold;
-        break;
-    case "decorationItalic":
-        iconComponent = DecorationItalic;
-        break;
-    case "decorationUnderline":
-        iconComponent = DecorationUnderline;
-        break;
-    case "decorationStrikethrough":
-        iconComponent = DecorationStrikethrough;
-        break;
-    case "link":
-        iconComponent = LinkPath;
-        break;
-    case "codeBlock":
-        iconComponent = CodeBlock;
-        break;
-    case "cancel":
-        iconComponent = Cancel;
-        break;
-    case "accept":
-        iconComponent = Accept;
-        break;
-    case "arrowDown":
-        iconComponent = ArrowDown;
-        break;
-    case "arrowUp":
-        iconComponent = ArrowUp;
-        break;
-    case "delete":
-        iconComponent = Delete;
-        break;
-}
-
-//     <g id="icon-delete-block"> trash
-// 
-//     </g>
-//
-
-//     <g id="icon-linkbox-block">
-// <path fill-rule="evenodd" clip-rule="evenodd" d="M19 13H45C48.3137 13 51 15.6863 51 19V45C51 48.3137 48.3137 51 45 51H19C15.6863 51 13 48.3137 13 45V19C13 15.6863 15.6863 13 19 13ZM9 19C9 13.4772 13.4772 9 19 9H45C50.5228 9 55 13.4772 55 19V45C55 50.5228 50.5228 55 45 55H19C13.4772 55 9 50.5228 9 45V19ZM18 20C19.1046 20 20 19.1046 20 18C20 16.8954 19.1046 16 18 16C16.8954 16 16 16.8954 16 18C16 19.1046 16.8954 20 18 20ZM26 18C26 19.1046 25.1046 20 24 20C22.8954 20 22 19.1046 22 18C22 16.8954 22.8954 16 24 16C25.1046 16 26 16.8954 26 18ZM30 20C31.1046 20 32 19.1046 32 18C32 16.8954 31.1046 16 30 16C28.8954 16 28 16.8954 28 18C28 19.1046 28.8954 20 30 20ZM23.161 38.7988C21.9894 39.9704 21.9894 41.8699 23.161 43.0415C24.3326 44.2131 26.2321 44.2131 27.4036 43.0415L32.3534 38.0917C32.7439 37.7012 32.7439 37.068 32.3534 36.6775C31.5723 35.8965 31.5723 34.6301 32.3534 33.8491C33.1344 33.068 34.4008 33.0681 35.1818 33.8491C37.1344 35.8017 37.1344 38.9675 35.1818 40.9202L30.2321 45.8699C27.4984 48.6036 23.0662 48.6036 20.3326 45.8699C17.5989 43.1362 17.5989 38.7041 20.3326 35.9704L24.2699 32.0331C25.0509 31.2521 26.3172 31.2521 27.0983 32.0331C27.8793 32.8142 27.8793 34.0805 27.0983 34.8615L23.161 38.7988ZM36.5964 23.9497C37.7679 22.7782 39.6674 22.7782 40.839 23.9497C42.0106 25.1213 42.0106 27.0208 40.839 28.1924L36.9017 32.1297C36.1207 32.9107 36.1207 34.177 36.9017 34.9581C37.6828 35.7391 38.9491 35.7391 39.7301 34.9581L43.6674 31.0208C46.4011 28.2871 46.4011 23.855 43.6674 21.1213C40.9338 18.3876 36.5016 18.3876 33.7679 21.1213L28.8182 26.071C26.8656 28.0237 26.8656 31.1895 28.8182 33.1421C29.5992 33.9232 30.8656 33.9232 31.6466 33.1421C32.4277 32.3611 32.4277 31.0947 31.6466 30.3137C31.2561 29.9232 31.2561 29.29 31.6466 28.8995L36.5964 23.9497Z"></path>
-//     </g>
-//     <g id="icon-emoticon-block">
-// <path fill-rule="evenodd" clip-rule="evenodd" d="M51 32C51 42.4934 42.4934 51 32 51C21.5066 51 13 42.4934 13 32C13 21.5066 21.5066 13 32 13C42.4934 13 51 21.5066 51 32ZM55 32C55 44.7025 44.7025 55 32 55C19.2975 55 9 44.7025 9 32C9 19.2975 19.2975 9 32 9C44.7025 9 55 19.2975 55 32ZM26 36C26 34.8954 25.1046 34 24 34C22.8954 34 22 34.8954 22 36C22 41.2131 26.7364 45 32 45C37.2636 45 42 41.2131 42 36C42 34.8954 41.1046 34 40 34C38.8954 34 38 34.8954 38 36C38 38.5189 35.5729 41 32 41C28.4271 41 26 38.5189 26 36ZM26 26C26 27.1046 25.1046 28 24 28C22.8954 28 22 27.1046 22 26C22 24.8954 22.8954 24 24 24C25.1046 24 26 24.8954 26 26ZM40 28C41.1046 28 42 27.1046 42 26C42 24.8954 41.1046 24 40 24C38.8954 24 38 24.8954 38 26C38 27.1046 38.8954 28 40 28Z"></path>
-//     </g>
-//
-//     <g id="icon-youtube-block">
-// <path fill-rule="evenodd" clip-rule="evenodd" d="M19 19H45C48.3137 19 51 22.6863 51 26V38C51 41.3137 48.3137 45 45 45H19C15.6863 45 13 41.3137 13 38V26C13 22.6863 15.6863 19 19 19ZM9 26C9 20.4772 13.4772 15 19 15H45C50.5228 15 55 20.4772 55 26V38C55 43.5228 50.5228 49 45 49H19C13.4772 49 9 43.5228 9 38V26ZM37 33.7321C38.3333 32.9623 38.3333 31.0378 37 30.268L31 26.8039C29.6667 26.0341 28 26.9963 28 28.5359V35.4641C28 37.0037 29.6667 37.966 31 37.1962L37 33.7321Z"></path>
-//     </g>
-//
-//     <g id="icon-codepen-block">
-// <path d="M31.9998 54.9993C31.547 54.9993 31.123 54.8555 30.7708 54.6184L10.0133 40.8399C9.78329 40.6962 9.58204 40.5021 9.40954 40.2721C9.38797 40.2362 9.35922 40.2002 9.33766 40.1643C9.10047 39.7977 8.99266 39.3737 8.99985 38.964V25.013C8.99266 24.6034 9.10766 24.1865 9.34485 23.8127C9.35922 23.784 9.38079 23.7624 9.39516 23.7337C9.56766 23.4893 9.7761 23.2952 10.0133 23.1443L30.7708 9.35867C31.468 8.87711 32.5317 8.87711 33.2289 9.35867L53.9864 23.1371C54.2236 23.288 54.432 23.4893 54.6045 23.7265C54.6189 23.7552 54.6405 23.7768 54.6549 23.8055C54.892 24.1793 54.9998 24.5962 54.9998 25.0059V38.964C55.007 39.3737 54.892 39.7905 54.662 40.1643C54.6405 40.2002 54.6117 40.2362 54.5902 40.2721C54.4249 40.5021 54.2164 40.689 53.9936 40.8399L33.2289 54.6184C32.8767 54.8555 32.4527 54.9993 31.9998 54.9993ZM34.1777 39.9774V48.7677L48.9049 38.9927L42.3355 34.5724L34.1777 39.9774ZM15.0948 38.9855L29.822 48.7605V39.9774L21.6642 34.5652L15.0948 38.9855ZM25.5742 31.9274L31.9998 36.1896L38.4255 31.9274L31.9998 27.6077L25.5742 31.9274ZM46.2598 31.9562L50.6442 34.9102V29.0452L46.2598 31.9562ZM13.3555 29.038V34.903L17.7398 31.949L13.3555 29.038ZM34.1777 23.8199L42.3498 29.3184L48.8905 24.9771L34.1777 15.2165V23.8199ZM15.1164 24.9843L21.657 29.3255L29.8292 23.8271V15.2165L15.1164 24.9843Z"></path>
-//     </g>
-//     <g id="icon-arrow-bottom">
-// <path d="M10.7472 18.9708C8.41355 21.415 8.41818 25.2485 10.7577 27.6871L27.093 44.7144C27.1826 44.8216 27.2764 44.9266 27.3743 45.0292C28.6361 46.3507 30.3291 47.0078 32.0197 46.9999C33.6972 46.9975 35.3737 46.3404 36.6257 45.0291C36.7233 44.9269 36.8167 44.8222 36.9062 44.7154L53.2423 27.6872C55.5818 25.2486 55.5864 21.4151 53.2528 18.9709C50.7481 16.3475 46.5437 16.3425 44.0326 18.9599L32 31.5022L19.9674 18.9598C17.4563 16.3424 13.2519 16.3474 10.7472 18.9708Z"></path>
-//     </g>
-//
-
-//
-
-//     <g id="icon-table-header">
-// <path fill-rule="evenodd" clip-rule="evenodd" d="M13 13H51V23H13V13ZM9 13C9 10.791 10.7909 9 13 9H51C53.2091 9 55 10.791 55 13V23V27H51H13H9V23V13ZM9 30C9 28.8964 9.89392 28.0015 10.9972 28H11.0028C12.1061 28.0015 13 28.8964 13 30V32C13 33.1046 12.1046 34 11 34C9.89543 34 9 33.1046 9 32V30ZM51 30C51 28.8954 51.8954 28 53 28C54.1046 28 55 28.8954 55 30V32C55 33.1046 54.1046 34 53 34C51.8954 34 51 33.1046 51 32V30ZM11 37C12.1046 37 13 37.8954 13 39V41C13 42.1046 12.1046 43 11 43C9.89543 43 9 42.1046 9 41V39C9 37.8954 9.89543 37 11 37ZM53 37C54.1046 37 55 37.8954 55 39V41C55 42.1046 54.1046 43 53 43C51.8954 43 51 42.1046 51 41V39C51 37.8954 51.8954 37 53 37ZM11 46C12.1046 46 13 46.8954 13 48V49C13 49.1208 13.0105 49.2376 13.0302 49.3498C13.2208 50.4379 12.4933 51.4744 11.4053 51.665C10.3173 51.8556 9.28075 51.1281 9.09016 50.0401C9.03074 49.7009 9 49.3532 9 49V48C9 46.8954 9.89543 46 11 46ZM53 46C54.1046 46 55 46.8954 55 48V49C55 49.3532 54.9693 49.7009 54.9098 50.0401C54.7192 51.1281 53.6827 51.8556 52.5947 51.665C51.5067 51.4744 50.7792 50.4379 50.9698 49.3499C50.9895 49.2376 51 49.1208 51 49V48C51 46.8954 51.8954 46 53 46ZM12.335 52.5947C12.5256 51.5067 13.5621 50.7792 14.6501 50.9698C14.7624 50.9895 14.8792 51 15 51H15.9444C17.049 51 17.9444 51.8954 17.9444 53C17.9444 54.1046 17.049 55 15.9444 55H15C14.6468 55 14.2991 54.9693 13.9599 54.9098C12.8719 54.7192 12.1444 53.6827 12.335 52.5947ZM51.665 52.5947C51.8555 53.6827 51.1281 54.7192 50.0401 54.9098C49.7009 54.9693 49.3532 55 49 55H48.0556C46.951 55 46.0556 54.1046 46.0556 53C46.0556 51.8954 46.951 51 48.0556 51H49C49.1208 51 49.2376 50.9895 49.3498 50.9698C50.4379 50.7792 51.4744 51.5067 51.665 52.5947ZM20.5556 53C20.5556 51.8954 21.451 51 22.5556 51H24.4444C25.549 51 26.4444 51.8954 26.4444 53C26.4444 54.1046 25.549 55 24.4444 55H22.5556C21.451 55 20.5556 54.1046 20.5556 53ZM29.0556 53C29.0556 51.8954 29.951 51 31.0556 51H32.9444C34.049 51 34.9444 51.8954 34.9444 53C34.9444 54.1046 34.049 55 32.9444 55H31.0556C29.951 55 29.0556 54.1046 29.0556 53ZM37.5556 53C37.5556 51.8954 38.451 51 39.5556 51H41.4444C42.549 51 43.4444 51.8954 43.4444 53C43.4444 54.1046 42.549 55 41.4444 55H39.5556C38.451 55 37.5556 54.1046 37.5556 53Z"></path>
-//     </g>
-//
-//     <g id="icon-table-body">
-// <path fill-rule="evenodd" clip-rule="evenodd" d="M15 13C14.8914 13 14.7862 13.0085 14.6846 13.0244C13.5934 13.1959 12.5698 12.4504 12.3983 11.3592C12.2268 10.268 12.9724 9.24442 14.0636 9.07294C14.3698 9.02481 14.6827 9 15 9H16.1333C17.2379 9 18.1333 9.89543 18.1333 11C18.1333 12.1046 17.2379 13 16.1333 13H15ZM23.2 11C23.2 9.89543 24.0954 9 25.2 9H27.4667C28.5712 9 29.4667 9.89543 29.4667 11C29.4667 12.1046 28.5712 13 27.4667 13H25.2C24.0954 13 23.2 12.1046 23.2 11ZM34.5333 11C34.5333 9.89543 35.4288 9 36.5333 9H38.8C39.9046 9 40.8 9.89543 40.8 11C40.8 12.1046 39.9046 13 38.8 13H36.5333C35.4288 13 34.5333 12.1046 34.5333 11ZM45.8667 11C45.8667 9.89543 46.7621 9 47.8667 9H49C49.3173 9 49.6302 9.02481 49.9364 9.07294C51.0276 9.24442 51.7732 10.268 51.6017 11.3592C51.4302 12.4504 50.4066 13.1959 49.3154 13.0244C49.2138 13.0085 49.1086 13 49 13H47.8667C46.7621 13 45.8667 12.1046 45.8667 11ZM11.3592 12.3983C12.4504 12.5698 13.1959 13.5934 13.0244 14.6846C13.0085 14.7862 13 14.8914 13 15V16.1333C13 17.2379 12.1046 18.1333 11 18.1333C9.89543 18.1333 9 17.2379 9 16.1333V15C9 14.6827 9.02481 14.3698 9.07294 14.0636C9.24442 12.9724 10.268 12.2268 11.3592 12.3983ZM52.6408 12.3983C53.732 12.2268 54.7556 12.9724 54.9271 14.0636C54.9752 14.3698 55 14.6827 55 15V16.1333C55 17.2379 54.1046 18.1333 53 18.1333C51.8954 18.1333 51 17.2379 51 16.1333V15C51 14.8914 50.9915 14.7862 50.9756 14.6846C50.8041 13.5934 51.5496 12.5698 52.6408 12.3983ZM9 27V23H13H51H55V27L55 51C55 53.2091 53.2091 55 51 55H13C10.7909 55 9 53.2091 9 51V27ZM51 27V51H13L13 27H51Z"></path>
-//     </g>
-//
-//     <g id="icon-link">
-// <path d="M21 20H28C29.1046 20 30 20.8954 30 22C30 23.1046 29.1046 24 28 24H21C16.5817 24 13 27.5817 13 32C13 36.4183 16.5817 40 21 40H28C29.1046 40 30 40.8955 30 42C30 43.1045 29.1046 44 28 44H21C14.3726 44 9 38.6274 9 32C9 25.3726 14.3726 20 21 20ZM51 32C51 36.4183 47.4183 40 43 40H36C34.8964 40 34.0015 40.8939 34 41.9972V42L34 42.0028C34.0015 43.1061 34.8964 44 36 44H43C49.6274 44 55 38.6274 55 32C55 25.3726 49.6274 20 43 20H36C34.8954 20 34 20.8955 34 22C34 23.1045 34.8954 24 36 24H43C47.4183 24 51 27.5817 51 32ZM24.5 30C23.3954 30 22.5 30.8954 22.5 32C22.5 33.1046 23.3954 34 24.5 34H39.5C40.6046 34 41.5 33.1046 41.5 32C41.5 30.8954 40.6046 30 39.5 30H24.5Z"></path>
-//     </g>
-//
-//     <g id="icon-theme">
-// <path fill-rule="evenodd" clip-rule="evenodd" d="M23 13H13V23H23V13ZM23 27H13V36H23V27ZM13 51L13 40H23V51H18.5H13ZM13 55H18.5H23H51C53.2091 55 55 53.2091 55 51V41C55 38.7909 53.2091 37 51 37H39.9827L50.4263 26.5563C51.9884 24.9943 51.9884 22.4616 50.4263 20.8995L43.3553 13.8284C41.7932 12.2663 39.2605 12.2663 37.6984 13.8284L27 24.5269V13C27 10.7909 25.2091 9 23 9H13C10.7909 9 9 10.7909 9 13V51C9 53.2091 10.7909 55 13 55ZM27 30.1837V44.3258L47.5979 23.7279L40.5269 16.6569L27 30.1837ZM27 49.9827V51H51V41H35.9827L27 49.9827Z"></path>
-//     </g>
-//
-//     <g id="icon-word-block">
-// <path fill-rule="evenodd" clip-rule="evenodd" d="M19 13H45C48.3137 13 51 15.6863 51 19V45C51 48.3137 48.3137 51 45 51H19C15.6863 51 13 48.3137 13 45V19C13 15.6863 15.6863 13 19 13ZM9 19C9 13.4772 13.4772 9 19 9H45C50.5228 9 55 13.4772 55 19V45C55 50.5228 50.5228 55 45 55H19C13.4772 55 9 50.5228 9 45V19ZM43.8342 28.665C43.0642 27.6159 42.0196 27.0914 40.7005 27.0914C40.0232 27.0914 39.4171 27.2234 38.8824 27.4873C38.3547 27.7513 37.8877 28.181 37.4813 28.7766H37.3316C37.4314 27.7343 37.4813 27 37.4813 26.5736V23H33.2995V38.797H36.5615L37.2246 37.6701H37.4813C37.8449 38.0491 38.1622 38.3198 38.4332 38.4822C38.7112 38.6447 39.025 38.7699 39.3743 38.8579C39.7237 38.9526 40.123 39 40.5722 39C41.9626 39 43.0463 38.4721 43.8235 37.4162C44.6078 36.3536 45 34.8883 45 33.0203C45 31.1658 44.6114 29.714 43.8342 28.665ZM37.8877 30.7868C38.1586 30.401 38.5865 30.2081 39.1711 30.2081C40.2193 30.2081 40.7433 31.132 40.7433 32.9797C40.7433 33.9069 40.6114 34.6108 40.3476 35.0914C40.0838 35.5651 39.7059 35.802 39.2139 35.802C38.6007 35.802 38.1586 35.599 37.8877 35.1929C37.6168 34.78 37.4813 34.1032 37.4813 33.1624V32.6041C37.4813 31.7783 37.6168 31.1726 37.8877 30.7868ZM26.754 37.2741L27.5561 38.797H30.4545V31.2538C30.4545 29.9408 30.0267 28.9188 29.1711 28.1878C28.3226 27.4569 27.1212 27.0914 25.5668 27.0914C23.4135 27.0914 21.631 27.4365 20.2193 28.1269L21.4278 30.7462C22.7897 30.1777 23.9127 29.8934 24.7968 29.8934C25.7807 29.8934 26.2727 30.3672 26.2727 31.3147V31.4772L24.2513 31.5381C22.5472 31.6125 21.246 31.9509 20.3476 32.5533C19.4492 33.1489 19 34.0592 19 35.2843C19 36.4619 19.328 37.3756 19.984 38.0254C20.6399 38.6751 21.5383 39 22.6791 39C23.6061 39 24.3619 38.8782 24.9465 38.6345C25.5312 38.3909 26.1052 37.9374 26.6684 37.2741H26.754ZM25.7487 35.7411C25.3922 36.0457 24.9608 36.198 24.4545 36.198C23.6631 36.198 23.2674 35.846 23.2674 35.1421C23.2674 34.2284 23.9554 33.7479 25.3316 33.7005L26.2941 33.6599V34.5533C26.2941 35.0406 26.1123 35.4365 25.7487 35.7411Z"></path>
-//     </g>
-//
-
-
-//     <g id="icon-pc">
-// <path d="M50 16H14C13.4477 16 13 16.4477 13 17V37C13 37.5523 13.4477 38 14 38H32H50C50.5523 38 51 37.5523 51 37V17C51 16.4477 50.5523 16 50 16ZM50 42H34V51H40C41.1046 51 42 51.8954 42 53C42 54.1046 41.1046 55 40 55H32H24C22.8954 55 22 54.1046 22 53C22 51.8954 22.8954 51 24 51H30V42H14C11.2386 42 9 39.7614 9 37V17C9 14.2386 11.2386 12 14 12H50C52.7614 12 55 14.2386 55 17V37C55 39.7614 52.7614 42 50 42Z"></path>
-//     </g>
-//
-//     <g id="icon-mobile">
-// <path fill-rule="evenodd" clip-rule="evenodd" d="M22 13H42C42.5523 13 43 13.4477 43 14V50C43 50.5523 42.5523 51 42 51H22C21.4477 51 21 50.5523 21 50V14C21 13.4477 21.4477 13 22 13ZM17 14C17 11.2386 19.2386 9 22 9H42C44.7614 9 47 11.2386 47 14V50C47 52.7614 44.7614 55 42 55H22C19.2386 55 17 52.7614 17 50V14ZM32 49C33.1046 49 34 48.1046 34 47C34 45.8954 33.1046 45 32 45C30.8954 45 30 45.8954 30 47C30 48.1046 30.8954 49 32 49Z"></path>
-//     </g>
-//
-//     <g id="icon-folder">
-// <path d="M32.8 25C30.8976 25 29.2584 23.6601 28.8799 21.7957C28.3243 19.0587 25.8981 17 23 17H19C15.6863 17 13 19.6863 13 23V30C13 30.102 13.0025 30.2031 13.0074 30.3033C13.0139 30.4343 13.0139 30.5657 13.0074 30.6967C13.0025 30.7969 13 30.898 13 31V41C13 44.3137 15.6863 47 19 47H45C48.3137 47 51 44.3137 51 41V31C51 27.6863 48.3137 25 45 25H32.8ZM9 23C9 17.4772 13.4772 13 19 13H23C27.8379 13 31.8734 16.4355 32.8 21H45C50.5228 21 55 25.4772 55 31V41C55 46.5228 50.5228 51 45 51H19C13.4772 51 9 46.5228 9 41V31C9 30.8323 9.00413 30.6656 9.01228 30.5C9.00413 30.3344 9 30.1677 9 30V23Z"></path>
-//     </g>
-//
-//     <g id="icon-lang">
-// <path fill-rule="evenodd" clip-rule="evenodd" d="M36.1761 54.6218C34.8219 54.8702 33.4261 55 32 55C30.5739 55 29.1781 54.8702 27.8239 54.6218C26.1459 54.314 24.5316 53.8241 23.0023 53.1734C16.9854 50.6133 12.2829 45.5634 10.1884 39.3172C9.70152 37.8653 9.35556 36.3487 9.16675 34.7838C9.05666 33.8712 9 32.9422 9 32C9 31.0578 9.05666 30.1288 9.16675 29.2162C9.35556 27.6513 9.70152 26.1347 10.1884 24.6828C12.2829 18.4366 16.9854 13.3867 23.0023 10.8266C24.5316 10.1759 26.1459 9.68598 27.8239 9.3782C29.1781 9.12979 30.5739 9 32 9C33.4261 9 34.8219 9.12979 36.1761 9.3782C37.8541 9.68598 39.4684 10.1759 40.9977 10.8266C47.0146 13.3867 51.7171 18.4366 53.8116 24.6828C54.2985 26.1347 54.6444 27.6513 54.8332 29.2162C54.9433 30.1288 55 31.0578 55 32C55 32.9422 54.9433 33.8712 54.8332 34.7838C54.6444 36.3487 54.2985 37.8653 53.8116 39.3172C51.7171 45.5634 47.0146 50.6133 40.9977 53.1734C39.4684 53.8241 37.8541 54.314 36.1761 54.6218ZM26.2489 50.114C28.0631 50.6895 29.9953 51 32 51C34.0047 51 35.9369 50.6895 37.7511 50.114C38.4497 47.6337 39.0156 44.8095 39.405 41.7309C37.0282 41.9069 34.5489 42 32 42C29.4511 42 26.9718 41.9069 24.595 41.7309C24.9844 44.8095 25.5503 47.6337 26.2489 50.114ZM32 38C34.7118 38 37.3262 37.8905 39.8015 37.6879C39.9313 35.8544 40 33.9532 40 32C40 30.0468 39.9313 28.1456 39.8015 26.3121C37.3262 26.1095 34.7118 26 32 26C29.2882 26 26.6738 26.1095 24.1985 26.3121C24.0687 28.1456 24 30.0468 24 32C24 33.9532 24.0687 35.8544 24.1985 37.6879C26.6738 37.8905 29.2882 38 32 38ZM42.418 47.8917C42.8593 45.8389 43.2177 43.6432 43.4811 41.3371C45.4229 41.1038 47.2735 40.813 49.0116 40.4714C47.5055 43.4899 45.2197 46.0513 42.418 47.8917ZM43.8386 37.2609C46.2811 36.941 48.5413 36.5273 50.5698 36.0392C50.8516 34.7375 51 33.3861 51 32C51 30.6139 50.8516 29.2625 50.5698 27.9608C48.5413 27.4727 46.2811 27.059 43.8386 26.7391C43.9448 28.4507 44 30.2082 44 32C44 33.7918 43.9448 35.5493 43.8386 37.2609ZM42.418 16.1083C45.2197 17.9487 47.5055 20.5101 49.0116 23.5286C47.2735 23.187 45.4229 22.8962 43.4811 22.6629C43.2177 20.3568 42.8593 18.1611 42.418 16.1083ZM37.7511 13.886C38.4497 16.3663 39.0156 19.1905 39.405 22.2691C37.0282 22.0931 34.5489 22 32 22C29.4511 22 26.9718 22.0931 24.595 22.2691C24.9844 19.1905 25.5503 16.3663 26.2489 13.886C28.0631 13.3105 29.9953 13 32 13C34.0047 13 35.9369 13.3105 37.7511 13.886ZM21.582 16.1083C21.1407 18.1611 20.7823 20.3568 20.5189 22.6629C18.5771 22.8962 16.7265 23.187 14.9884 23.5286C16.4945 20.5101 18.7803 17.9487 21.582 16.1083ZM13 32C13 33.3861 13.1484 34.7375 13.4302 36.0392C15.4587 36.5273 17.7189 36.941 20.1614 37.2609C20.0552 35.5493 20 33.7918 20 32C20 30.2082 20.0552 28.4507 20.1614 26.7391C17.7189 27.059 15.4587 27.4727 13.4302 27.9608C13.1484 29.2625 13 30.6139 13 32ZM21.582 47.8917C18.7803 46.0513 16.4945 43.4899 14.9884 40.4714C16.7265 40.813 18.5771 41.1038 20.5189 41.3371C20.7823 43.6432 21.1407 45.8389 21.582 47.8917Z"></path>
-//     </g>
-//
-//     <g id="icon-add-col">
-// <path fill-rule="evenodd" clip-rule="evenodd" d="M13 23L13 13L22 13V23H13ZM13 27V37H22L22 27H13ZM22 41H13L13 51H22V41ZM13 55C10.7909 55 9 53.2091 9 51L9 13C9 10.7909 10.7909 9 13 9L22 9C24.2091 9 26 10.7909 26 13L26 51C26 53.2091 24.2091 55 22 55H13ZM45 42C43.8954 42 43 41.1046 43 40V34H37C35.8954 34 35 33.1046 35 32C35 30.8954 35.8954 30 37 30H43V24C43 22.8954 43.8954 22 45 22C46.1046 22 47 22.8954 47 24V30H53C54.1046 30 55 30.8954 55 32C55 33.1046 54.1046 34 53 34H47V40C47 41.1046 46.1046 42 45 42Z"></path>
-//     </g>
-//
-//     <g id="icon-del-col">
-// <path fill-rule="evenodd" clip-rule="evenodd" d="M13 13L13 23H22V13L13 13ZM13 37V27H22L22 37H13ZM13 41H22V51H13L13 41ZM9 51C9 53.2091 10.7909 55 13 55H22C24.2091 55 26 53.2091 26 51L26 13C26 10.7909 24.2091 9 22 9L13 9C10.7909 9 9 10.7909 9 13L9 51ZM37 30C35.8954 30 35 30.8954 35 32C35 33.1046 35.8954 34 37 34H53C54.1046 34 55 33.1046 55 32C55 30.8954 54.1046 30 53 30H37Z"></path>
-//     </g>
-//
-//     <g id="icon-add-row">
-// <path fill-rule="evenodd" clip-rule="evenodd" d="M41 13H51V22H41V13ZM37 13H27V22H37V13ZM23 22V13H13L13 22H23ZM9 13C9 10.7909 10.7909 9 13 9H51C53.2091 9 55 10.7909 55 13V22C55 24.2091 53.2091 26 51 26H13C10.7909 26 9 24.2091 9 22V13ZM22 45C22 43.8954 22.8954 43 24 43H30V37C30 35.8954 30.8954 35 32 35C33.1046 35 34 35.8954 34 37V43H40C41.1046 43 42 43.8954 42 45C42 46.1046 41.1046 47 40 47H34V53C34 54.1046 33.1046 55 32 55C30.8954 55 30 54.1046 30 53V47H24C22.8954 47 22 46.1046 22 45Z"></path>
-//     </g>
-//
-//     <g id="icon-del-row">
-// <path fill-rule="evenodd" clip-rule="evenodd" d="M51 13H41V22H51V13ZM27 13H37V22H27V13ZM23 13V22H13L13 13H23ZM13 9C10.7909 9 9 10.7909 9 13V22C9 24.2091 10.7909 26 13 26H51C53.2091 26 55 24.2091 55 22V13C55 10.7909 53.2091 9 51 9H13ZM24 43C22.8954 43 22 43.8954 22 45C22 46.1046 22.8954 47 24 47H40C41.1046 47 42 46.1046 42 45C42 43.8954 41.1046 43 40 43H24Z"></path>
-//     </g>
-//     </defs>
-</script>
diff --git a/src/runtime/core/components/editor/ImageBlock.vue b/src/runtime/core/components/editor/ImageBlock.vue
index aea5e49..124a782 100644
--- a/src/runtime/core/components/editor/ImageBlock.vue
+++ b/src/runtime/core/components/editor/ImageBlock.vue
@@ -23,11 +23,11 @@
 // @ts-ignore
 import { ref, unref } from "#imports";
 import { keyboardEvent, pasteText, styleSettings } from "../../utils/index";
-import { imageBlock, cursorSelection, styleFunctionArgument } from "../../../../types/index";
+import { ImageBlock, cursorSelection, styleFunctionArgument } from "../../../../types/index";
 
 const $block = ref();
 const $caption = ref();
-const data = ref<imageBlock>({
+const data = ref<ImageBlock>({
     type: "",
     id: "",
     classList: [],
@@ -37,14 +37,14 @@ const data = ref<imageBlock>({
     webp: false,
     caption: "",
 });
-const props = defineProps<{ modelValue: imageBlock; cursorData: cursorSelection }>();
+const props = defineProps<{ modelValue: ImageBlock; cursorData: cursorSelection }>();
 const emit = defineEmits<{
-    (e: "update:modelValue", modelValue: imageBlock): void;
+    (e: "update:modelValue", modelValue: ImageBlock): void;
     (e: "addBlock", name: string): void;
     (e: "deleteBlockLocal", index?: number): void;
 }>();
 
-data.value = unref(props.modelValue) as imageBlock;
+data.value = unref(props.modelValue) as ImageBlock;
 
 /**
  * 내부 상수
diff --git a/src/runtime/core/components/editor/OlBlock.vue b/src/runtime/core/components/editor/OlBlock.vue
index b78ea6e..8c52440 100644
--- a/src/runtime/core/components/editor/OlBlock.vue
+++ b/src/runtime/core/components/editor/OlBlock.vue
@@ -7,14 +7,14 @@
 <script setup lang="ts">
 // @ts-ignore
 import { ref, unref } from "#imports";
-import { cursorSelection, liItem, listBlock, styleFunctionArgument } from "../../../../types";
+import { cursorSelection, liItem, ListBlock, styleFunctionArgument } from "../../../../types";
 import { getArrangementCursorData, setCursor, pasteText, styleSettings, keyboardEvent, getCursor, findEditableElement } from "../../utils";
 
 const updateCount = ref<number>(0);
 const $ol = ref();
 const $item = ref();
 const itemIdx = ref<number>(0);
-const data = ref<listBlock>({
+const data = ref<ListBlock>({
     type: "",
     id: "",
     childList: [
@@ -24,13 +24,13 @@ const data = ref<listBlock>({
         },
     ],
 });
-const props = defineProps<{ modelValue: listBlock; cursorData: cursorSelection }>();
+const props = defineProps<{ modelValue: ListBlock; cursorData: cursorSelection }>();
 const emit = defineEmits<{
-    (e: "update:modelValue", modelValue: listBlock): void;
+    (e: "update:modelValue", modelValue: ListBlock): void;
     (e: "addBlock", {}: { name: string; value: object }): void;
     (e: "deleteBlockLocal", index?: number): void;
 }>();
-data.value = unref(props.modelValue) as listBlock;
+data.value = unref(props.modelValue) as ListBlock;
 
 if (data.value.childList.length === 0) {
 }
diff --git a/src/runtime/core/components/editor/TextBlock.vue b/src/runtime/core/components/editor/TextBlock.vue
index d907b4a..f3961ee 100644
--- a/src/runtime/core/components/editor/TextBlock.vue
+++ b/src/runtime/core/components/editor/TextBlock.vue
@@ -6,23 +6,23 @@
 // @ts-ignore
 import { ref, unref } from "#imports";
 import { keyboardEvent, setCursor, pasteText, styleSettings, getArrangementCursorData } from "../../utils/index";
-import { textBlock, styleFunctionArgument, cursorSelection } from "../../../../types/index";
+import { TextBlock, styleFunctionArgument, cursorSelection } from "../../../../types/index";
 
 const $block = ref();
-const data = ref<textBlock>({
+const data = ref<TextBlock>({
     type: "",
     id: "",
     classList: [],
     content: "",
 });
-const props = defineProps<{ modelValue: textBlock; cursorData: cursorSelection }>();
+const props = defineProps<{ modelValue: TextBlock; cursorData: cursorSelection }>();
 const emit = defineEmits<{
-    (e: "update:modelValue", modelValue: textBlock): void;
+    (e: "update:modelValue", modelValue: TextBlock): void;
     (e: "addBlock", {}: { name: string; value: object }): void;
     (e: "deleteBlockLocal", index?: number): void;
 }>();
 
-data.value = unref(props.modelValue) as textBlock;
+data.value = unref(props.modelValue) as TextBlock;
 
 // 키보드 이벤트 할당
 function textKeyboardEvent(e: KeyboardEvent) {
diff --git a/src/runtime/core/components/editor/UlBlock.vue b/src/runtime/core/components/editor/UlBlock.vue
index 7131415..ab8466d 100644
--- a/src/runtime/core/components/editor/UlBlock.vue
+++ b/src/runtime/core/components/editor/UlBlock.vue
@@ -7,14 +7,14 @@
 <script setup lang="ts">
 // @ts-ignore
 import { ref, unref } from "#imports";
-import { cursorSelection, liItem, listBlock, styleFunctionArgument } from "../../../../types";
+import { cursorSelection, liItem, ListBlock, styleFunctionArgument } from "../../../../types";
 import { getArrangementCursorData, setCursor, pasteText, styleSettings, keyboardEvent, getCursor, findEditableElement } from "../../utils";
 
 const updateCount = ref<number>(0);
 const $ul = ref();
 const $item = ref();
 const itemIdx = ref<number>(0);
-const data = ref<listBlock>({
+const data = ref<ListBlock>({
     type: "",
     id: "",
     childList: [
@@ -24,13 +24,13 @@ const data = ref<listBlock>({
         },
     ],
 });
-const props = defineProps<{ modelValue: listBlock; cursorData: cursorSelection }>();
+const props = defineProps<{ modelValue: ListBlock; cursorData: cursorSelection }>();
 const emit = defineEmits<{
-    (e: "update:modelValue", modelValue: listBlock): void;
+    (e: "update:modelValue", modelValue: ListBlock): void;
     (e: "addBlock", {}: { name: string; value: object }): void;
     (e: "deleteBlockLocal", index?: number): void;
 }>();
-data.value = unref(props.modelValue) as listBlock;
+data.value = unref(props.modelValue) as ListBlock;
 
 if (data.value.childList.length === 0) {
 }
diff --git a/src/runtime/core/components/icon/Accept.vue b/src/runtime/core/components/icon/Accept.vue
deleted file mode 100644
index 7cc6373..0000000
--- a/src/runtime/core/components/icon/Accept.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-    <path class="path"
-        d="M51.3456 17.6735C49.1181 15.4422 45.5066 15.4422 43.2792 17.6735L26.0616 34.9213L20.741 29.5914C18.5126 27.3591 14.8997 27.3591 12.6713 29.5914C10.4429 31.8236 10.4429 35.4429 12.6713 37.6752L21.9937 47.0139C24.222 49.2462 27.835 49.2462 30.0633 47.0139C30.1078 46.9693 30.1514 46.9243 30.194 46.8787C30.3822 46.7324 30.5633 46.5728 30.736 46.3997L51.3456 25.7541C53.573 23.5227 53.573 19.9049 51.3456 17.6735Z">
-    </path>
-</template>
diff --git a/src/runtime/core/components/icon/AlignCenter.vue b/src/runtime/core/components/icon/AlignCenter.vue
deleted file mode 100644
index 26044f9..0000000
--- a/src/runtime/core/components/icon/AlignCenter.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-    <path
-        class="path"
-        d="M26 9C24.8954 9 24 9.89543 24 11C24 12.1046 24.8954 13 26 13H38C39.1046 13 40 12.1046 40 11C40 9.89543 39.1046 9 38 9H26ZM11 51C9.89543 51 9 51.8954 9 53C9 54.1046 9.89543 55 11 55H53C54.1046 55 55 54.1046 55 53C55 51.8954 54.1046 51 53 51H11ZM17 39C17 37.8954 17.8954 37 19 37H45C46.1046 37 47 37.8954 47 39C47 40.1046 46.1046 41 45 41H19C17.8954 41 17 40.1046 17 39ZM11 23C9.89543 23 9 23.8954 9 25C9 26.1046 9.89543 27 11 27H53C54.1046 27 55 26.1046 55 25C55 23.8954 54.1046 23 53 23H11Z"
-    ></path>
-</template>
\ No newline at end of file
diff --git a/src/runtime/core/components/icon/AlignLeft.vue b/src/runtime/core/components/icon/AlignLeft.vue
deleted file mode 100644
index 6300932..0000000
--- a/src/runtime/core/components/icon/AlignLeft.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-    <path
-        class="path"
-        d="M11 9C9.89543 9 9 9.89543 9 11C9 12.1046 9.89543 13 11 13H23C24.1046 13 25 12.1046 25 11C25 9.89543 24.1046 9 23 9H11ZM11 51C9.89543 51 9 51.8954 9 53C9 54.1046 9.89543 55 11 55H53C54.1046 55 55 54.1046 55 53C55 51.8954 54.1046 51 53 51H11ZM9 39C9 37.8954 9.89543 37 11 37H37C38.1046 37 39 37.8954 39 39C39 40.1046 38.1046 41 37 41H11C9.89543 41 9 40.1046 9 39ZM11 23C9.89543 23 9 23.8954 9 25C9 26.1046 9.89543 27 11 27H53C54.1046 27 55 26.1046 55 25C55 23.8954 54.1046 23 53 23H11Z"
-    ></path>
-</template>
diff --git a/src/runtime/core/components/icon/AlignRight.vue b/src/runtime/core/components/icon/AlignRight.vue
deleted file mode 100644
index 118d749..0000000
--- a/src/runtime/core/components/icon/AlignRight.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-    <path
-        class="path"
-        d="M41 9C39.8954 9 39 9.89543 39 11C39 12.1046 39.8954 13 41 13H53C54.1046 13 55 12.1046 55 11C55 9.89543 54.1046 9 53 9H41ZM11 51C9.89543 51 9 51.8954 9 53C9 54.1046 9.89543 55 11 55H53C54.1046 55 55 54.1046 55 53C55 51.8954 54.1046 51 53 51H11ZM25 39C25 37.8954 25.8954 37 27 37H53C54.1046 37 55 37.8954 55 39C55 40.1046 54.1046 41 53 41H27C25.8954 41 25 40.1046 25 39ZM11 23C9.89543 23 9 23.8954 9 25C9 26.1046 9.89543 27 11 27H53C54.1046 27 55 26.1046 55 25C55 23.8954 54.1046 23 53 23H11Z"
-    ></path>
-</template>
\ No newline at end of file
diff --git a/src/runtime/core/components/icon/ArrowDown.vue b/src/runtime/core/components/icon/ArrowDown.vue
deleted file mode 100644
index 06bd70d..0000000
--- a/src/runtime/core/components/icon/ArrowDown.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-    <path class="path" d="M32 9C30.8954 9 30 9.89543 30 11V48.0208L18.4142 36.435C17.6332 35.654 16.3668 35.654 15.5858 36.435C14.8047 37.2161 14.8047 38.4824 15.5858 39.2635L30.6611 54.3388C31.4422 55.1199 32.7086 55.1199 33.4896 54.3388L48.5649 39.2635C49.346 38.4824 49.346 37.2161 48.5649 36.435C47.7839 35.654 46.5176 35.654 45.7365 36.435L34 48.1716V11C34 9.89543 33.1046 9 32 9Z"></path>
-</template>
diff --git a/src/runtime/core/components/icon/ArrowUp.vue b/src/runtime/core/components/icon/ArrowUp.vue
deleted file mode 100644
index 14ac390..0000000
--- a/src/runtime/core/components/icon/ArrowUp.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-    <path class="path" d="M45.7366 27.4896C46.5176 28.2706 47.7839 28.2706 48.565 27.4896C49.346 26.7085 49.346 25.4422 48.565 24.6612L33.4896 9.58579C32.7085 8.80473 31.4422 8.80474 30.6612 9.58579L15.5858 24.6612C14.8047 25.4422 14.8047 26.7085 15.5858 27.4896C16.3668 28.2706 17.6332 28.2706 18.4142 27.4896L30 15.9038V53C30 54.1046 30.8954 55 32 55C33.1045 55 34 54.1046 34 53V15.753L45.7366 27.4896Z"></path>
-</template>
diff --git a/src/runtime/core/components/icon/Cancel.vue b/src/runtime/core/components/icon/Cancel.vue
deleted file mode 100644
index 2c56431..0000000
--- a/src/runtime/core/components/icon/Cancel.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-    <path class="path"
-        d="M13.2497 13.0226C11.032 15.2442 11.032 18.8461 13.2497 21.0677L24.0457 31.8826L13.0153 42.9323C10.7976 45.1539 10.7976 48.7558 13.0153 50.9774C15.2331 53.199 18.8287 53.199 21.0464 50.9774L32.0768 39.9278L42.9532 50.8233C45.1709 53.0449 48.7666 53.0449 50.9843 50.8233C53.202 48.6017 53.202 44.9997 50.9843 42.7781L40.1078 31.8826L50.7499 21.2219C52.9677 19.0003 52.9677 15.3983 50.7499 13.1767C48.5322 10.9551 44.9366 10.9551 42.7189 13.1767L32.0768 23.8375L21.2808 13.0226C19.063 10.801 15.4674 10.801 13.2497 13.0226Z">
-    </path>
-</template>
diff --git a/src/runtime/core/components/icon/CodeBlock.vue b/src/runtime/core/components/icon/CodeBlock.vue
deleted file mode 100644
index d849e23..0000000
--- a/src/runtime/core/components/icon/CodeBlock.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-    <path
-        class="path"
-        d="M35.2981 20C34.5175 20 33.8188 20.4842 33.5447 21.2151L25.9492 41.4698C25.4901 42.6941 26.3951 44 27.7026 44C28.4832 44 29.182 43.5158 29.4561 42.7849L37.0516 22.5302C37.5107 21.3059 36.6056 20 35.2981 20ZM11.013 35.0376C8.34071 33.499 8.34073 29.643 11.013 28.1045L18.8813 23.5745C19.8385 23.0234 21.0613 23.3526 21.6124 24.3098C22.1635 25.2671 21.8343 26.4899 20.8771 27.041L13.0088 31.571L20.8771 36.1011C21.8343 36.6522 22.1635 37.875 21.6124 38.8322C21.0613 39.7895 19.8385 40.1187 18.8813 39.5676L11.013 35.0376ZM53.1299 35.0376C55.8022 33.499 55.8022 29.643 53.1299 28.1045L45.2616 23.5745C44.3044 23.0234 43.0816 23.3526 42.5305 24.3098C41.9794 25.2671 42.3086 26.4899 43.2658 27.041L51.1341 31.571L43.2658 36.1011C42.3086 36.6522 41.9794 37.875 42.5305 38.8322C43.0816 39.7895 44.3044 40.1187 45.2616 39.5676L53.1299 35.0376Z"
-    ></path>
-</template>
diff --git a/src/runtime/core/components/icon/DecorationBold.vue b/src/runtime/core/components/icon/DecorationBold.vue
deleted file mode 100644
index 022093a..0000000
--- a/src/runtime/core/components/icon/DecorationBold.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-    <path
-        class="path"
-        d="M15 50C15 52.7614 17.2386 55 20 55H32.9922C44.0389 55 49 49.3673 49 41.8571C49 35.1933 45.4069 31.9731 39.714 30.9461C39.6526 30.935 39.607 30.8816 39.607 30.8192C39.607 30.7636 39.6438 30.714 39.6966 30.6965C44.9893 28.9442 47.1479 25.5349 47.1479 20.6006C47.1479 13.1574 42.3191 9 32 9H20C17.2386 9 15 11.2386 15 14V50ZM29.3268 48.2274C26.5654 48.2274 24.3268 45.9888 24.3268 43.2274V39.3469C24.3268 36.5855 26.5654 34.3469 29.3268 34.3469H31.0078C36.3658 34.3469 39.3424 36.3586 39.3424 41.1195C39.3424 45.9475 36.4981 48.2274 31.3385 48.2274H29.3268ZM29.3268 28.4461C26.5654 28.4461 24.3268 26.2075 24.3268 23.4461V20.7055C24.3268 17.9441 26.5654 15.7055 29.3268 15.7055H30.4125C35.3074 15.7055 37.821 17.3149 37.821 22.0087C37.821 26.8367 34.5798 28.4461 30.1479 28.4461H29.3268Z"
-    ></path>
-</template>
diff --git a/src/runtime/core/components/icon/DecorationItalic.vue b/src/runtime/core/components/icon/DecorationItalic.vue
deleted file mode 100644
index 1290949..0000000
--- a/src/runtime/core/components/icon/DecorationItalic.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-    <path
-        class="path"
-        d="M25 11C25 9.89543 25.8954 9 27 9H34H40H46C47.1046 9 48 9.89543 48 11C48 12.1046 47.1046 13 46 13H39.0435L29.9565 51H36C37.1046 51 38 51.8954 38 53C38 54.1046 37.1046 55 36 55H29H23H17C15.8954 55 15 54.1046 15 53C15 51.8954 15.8954 51 17 51H23.9565L33.0435 13H27C25.8954 13 25 12.1046 25 11Z"
-    ></path>
-</template>
diff --git a/src/runtime/core/components/icon/DecorationStrikethrough.vue b/src/runtime/core/components/icon/DecorationStrikethrough.vue
deleted file mode 100644
index 97d1a7b..0000000
--- a/src/runtime/core/components/icon/DecorationStrikethrough.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-    <path
-        class="path"
-        d="M49 42.0827C49 46.213 47.3861 49.3985 44.1583 51.6391C40.9305 53.8797 36.4003 55 30.5676 55C25.2609 55 20.9589 54.3116 17.6613 52.9349C16.6952 52.5315 16.1274 51.5533 16.1274 50.5064C16.1274 48.407 18.3376 47.0078 20.3303 47.6687C21.2971 47.9893 22.2887 48.2735 23.305 48.5211C25.8816 49.142 28.3591 49.4525 30.7375 49.4525C34.4183 49.4525 37.2497 48.8991 39.2317 47.7923C41.2136 46.6585 42.2046 44.9442 42.2046 42.6496C42.2046 40.9219 41.4118 39.4507 39.8263 38.2359C38.9729 37.5555 37.669 36.8102 35.9145 36H47.1393C48.3798 37.7105 49 39.7381 49 42.0827ZM32.2534 28H19.0141C18.3351 27.3458 17.7693 26.6544 17.3166 25.9261C16.4389 24.4683 16 22.7271 16 20.7025C16 17.0851 17.5431 14.2371 20.6293 12.1585C23.7156 10.0528 27.9485 9 33.3282 9C37.3092 9 41.2187 9.61323 45.0567 10.8397C46.6953 11.3633 47.4248 13.2208 46.708 14.7845C46.04 16.2418 44.353 16.9113 42.8299 16.4114C39.2086 15.2228 35.8715 14.6285 32.8185 14.6285C29.4775 14.6285 26.9575 15.1279 25.2587 16.1268C23.5598 17.1256 22.7104 18.5023 22.7104 20.257C22.7104 21.4448 23.0219 22.4572 23.6448 23.294C24.296 24.1309 25.3295 24.9272 26.7452 25.6831C27.8244 26.2593 29.6605 27.0316 32.2534 28ZM11 30C9.89543 30 9 30.8954 9 32C9 33.1046 9.89543 34 11 34H53C54.1046 34 55 33.1046 55 32C55 30.8954 54.1046 30 53 30H11Z"
-    ></path>
-</template>
\ No newline at end of file
diff --git a/src/runtime/core/components/icon/DecorationUnderline.vue b/src/runtime/core/components/icon/DecorationUnderline.vue
deleted file mode 100644
index 9b5a7e9..0000000
--- a/src/runtime/core/components/icon/DecorationUnderline.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-    <path
-        class="path"
-        d="M21 13C21 11.8954 20.1046 11 19 11C17.8954 11 17 11.8954 17 13V28C17 36.2843 23.7157 43 32 43C40.2843 43 47 36.2843 47 28V13C47 11.8954 46.1046 11 45 11C43.8954 11 43 11.8954 43 13V28C43 34.0751 38.0751 39 32 39C25.9249 39 21 34.0751 21 28V13ZM13 49C11.8954 49 11 49.8954 11 51C11 52.1046 11.8954 53 13 53H51C52.1046 53 53 52.1046 53 51C53 49.8954 52.1046 49 51 49H13Z"
-    ></path>
-</template>
diff --git a/src/runtime/core/components/icon/Delete.vue b/src/runtime/core/components/icon/Delete.vue
deleted file mode 100644
index 438d0ac..0000000
--- a/src/runtime/core/components/icon/Delete.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-    <path class="path" fill-rule="evenodd" clip-rule="evenodd" d="M32 51C42.4934 51 51 42.4934 51 32C51 21.5066 42.4934 13 32 13C21.5066 13 13 21.5066 13 32C13 42.4934 21.5066 51 32 51ZM32 55C44.7026 55 55 44.7026 55 32C55 19.2974 44.7026 9 32 9C19.2974 9 9 19.2974 9 32C9 44.7026 19.2974 55 32 55ZM21.4142 42.6274C20.6332 41.8462 20.6332 40.5801 21.4142 39.7988L29.1715 32.0415L21.5858 24.4558C20.8047 23.6748 20.8047 22.4084 21.5858 21.6274C22.3668 20.8462 23.6332 20.8462 24.4142 21.6274L31.9999 29.2131L39.799 21.4141C40.58 20.6331 41.8464 20.6331 42.6274 21.4141C43.4084 22.1953 43.4084 23.4614 42.6274 24.2427L34.8284 32.0417L42.799 40.0122C43.58 40.7932 43.58 42.0596 42.799 42.8406C42.0179 43.6216 40.7516 43.6216 39.9706 42.8406L32.0001 34.8701L24.2426 42.6274C23.4616 43.4084 22.1953 43.4084 21.4142 42.6274Z"></path>
-</template>
diff --git a/src/runtime/core/components/icon/ImageBlock.vue b/src/runtime/core/components/icon/ImageBlock.vue
deleted file mode 100644
index ed18535..0000000
--- a/src/runtime/core/components/icon/ImageBlock.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-    <path class="path" fill-rule="evenodd" clip-rule="evenodd"
-          d="M45 13H19C15.6863 13 13 15.6863 13 19V45C13 45.2946 13.0212 45.5843 13.0623 45.8676L22.5157 36.4142C24.7774 34.1525 28.3955 34.0739 30.7515 36.1784L36.5157 30.4142C38.8588 28.0711 42.6578 28.0711 45.0009 30.4142L51 36.4133V19C51 15.6863 48.3137 13 45 13ZM19 51C17.4694 51 16.0727 50.4269 15.0127 49.4835C15.156 49.3993 15.2912 49.2956 15.4142 49.1725L25.3441 39.2426C26.1251 38.4616 27.3915 38.4616 28.1725 39.2426L33.1967 44.2669C33.9778 45.0479 35.2441 45.0479 36.0252 44.2669C36.8062 43.4858 36.8062 42.2195 36.0252 41.4385L33.5867 39L39.3441 33.2426C40.1251 32.4616 41.3915 32.4616 42.1725 33.2426L51 42.0701V45C51 48.3137 48.3137 51 45 51H19ZM19 9C13.4772 9 9 13.4772 9 19V45C9 50.5228 13.4772 55 19 55H45C50.5228 55 55 50.5228 55 45V19C55 13.4772 50.5228 9 45 9H19ZM27 24C27 25.6569 25.6569 27 24 27C22.3431 27 21 25.6569 21 24C21 22.3431 22.3431 21 24 21C25.6569 21 27 22.3431 27 24ZM31 24C31 27.866 27.866 31 24 31C20.134 31 17 27.866 17 24C17 20.134 20.134 17 24 17C27.866 17 31 20.134 31 24Z"
-    ></path>
-</template>
diff --git a/src/runtime/core/components/icon/LinkPath.vue b/src/runtime/core/components/icon/LinkPath.vue
deleted file mode 100644
index 1b574b6..0000000
--- a/src/runtime/core/components/icon/LinkPath.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-    <path
-        class="path"
-        d="M21 20H28C29.1046 20 30 20.8954 30 22C30 23.1046 29.1046 24 28 24H21C16.5817 24 13 27.5817 13 32C13 36.4183 16.5817 40 21 40H28C29.1046 40 30 40.8955 30 42C30 43.1045 29.1046 44 28 44H21C14.3726 44 9 38.6274 9 32C9 25.3726 14.3726 20 21 20ZM51 32C51 36.4183 47.4183 40 43 40H36C34.8964 40 34.0015 40.8939 34 41.9972V42L34 42.0028C34.0015 43.1061 34.8964 44 36 44H43C49.6274 44 55 38.6274 55 32C55 25.3726 49.6274 20 43 20H36C34.8954 20 34 20.8955 34 22C34 23.1045 34.8954 24 36 24H43C47.4183 24 51 27.5817 51 32ZM24.5 30C23.3954 30 22.5 30.8954 22.5 32C22.5 33.1046 23.3954 34 24.5 34H39.5C40.6046 34 41.5 33.1046 41.5 32C41.5 30.8954 40.6046 30 39.5 30H24.5Z"
-    ></path>
-</template>
diff --git a/src/runtime/core/components/icon/OlBlock.vue b/src/runtime/core/components/icon/OlBlock.vue
deleted file mode 100644
index 7b4c31d..0000000
--- a/src/runtime/core/components/icon/OlBlock.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-    <path
-        class="path"
-        d="M9 11.75C9 10.7835 9.76747 10 10.7143 10H13.2857C14.2325 10 15 10.7835 15 11.75V21.25C15 22.2165 14.2325 23 13.2857 23C12.3389 23 11.5714 22.2165 11.5714 21.25V13.5H10.7143C9.76747 13.5 9 12.7165 9 11.75ZM27 15C25.8954 15 25 15.8954 25 17C25 18.1046 25.8954 19 27 19H53C54.1046 19 55 18.1046 55 17C55 15.8954 54.1046 15 53 15H27ZM25 32C25 30.8954 25.8954 30 27 30H53C54.1046 30 55 30.8954 55 32C55 33.1046 54.1046 34 53 34H27C25.8954 34 25 33.1046 25 32ZM27 45C25.8954 45 25 45.8954 25 47C25 48.1046 25.8954 49 27 49H53C54.1046 49 55 48.1046 55 47C55 45.8954 54.1046 45 53 45H27ZM12.3846 44.2308C12.3846 43.7635 12.7635 43.3846 13.2308 43.3846C13.6981 43.3846 14.0769 43.7635 14.0769 44.2308C14.0769 44.6981 13.6981 45.0769 13.2308 45.0769C12.2961 45.0769 11.5385 45.8346 11.5385 46.7692C11.5385 47.7039 12.2961 48.4615 13.2308 48.4615C13.6981 48.4615 14.0769 48.8404 14.0769 49.3077C14.0769 49.775 13.6981 50.1538 13.2308 50.1538C12.7635 50.1538 12.3846 49.775 12.3846 49.3077C12.3846 48.3731 11.6269 47.6154 10.6923 47.6154C9.75767 47.6154 9 48.3731 9 49.3077C9 51.6443 10.8942 53.5385 13.2308 53.5385C15.5674 53.5385 17.4615 51.6443 17.4615 49.3077C17.4615 48.3553 17.1468 47.4763 16.6157 46.7692C17.1468 46.0621 17.4615 45.1832 17.4615 44.2308C17.4615 41.8942 15.5674 40 13.2308 40C10.8942 40 9 41.8942 9 44.2308C9 45.1654 9.75767 45.9231 10.6923 45.9231C11.6269 45.9231 12.3846 45.1654 12.3846 44.2308ZM13.5 28.5C13.0029 28.5 12.6 28.8918 12.6 29.375C12.6 30.3415 11.7941 31.125 10.8 31.125C9.80589 31.125 9 30.3415 9 29.375C9 26.9588 11.0147 25 13.5 25C15.9853 25 18 26.9588 18 29.375C18 29.9731 17.7566 30.5282 17.595 30.8603C17.4017 31.2573 17.1464 31.681 16.8741 32.0963C16.8175 32.1825 16.7653 32.2623 16.7163 32.3373C16.2911 32.9875 16.1104 33.2638 15.5 34.0473C15.3789 34.2028 15.0308 34.639 14.74 35.0033C14.5689 35.2177 14.4177 35.4072 14.3443 35.5H17.2C18.1941 35.5 19 36.2835 19 37.25C19 38.2165 18.1941 39 17.2 39H10.8C9.80585 39 9 38.2165 9 37.25C9 36.8843 9.11809 36.6048 9.14918 36.5312L9.15027 36.5286C9.19963 36.4117 9.25386 36.3129 9.29246 36.2463C9.37132 36.1102 9.46475 35.9726 9.54962 35.8528C9.72388 35.6068 9.95766 35.3025 10.2124 34.9778C10.4469 34.6787 10.6916 34.3714 10.949 34.0482L10.9497 34.0473C11.2967 33.6116 11.6665 33.1471 12.0651 32.6355C12.7344 31.7764 13.373 30.9246 13.8384 30.2148C14.0724 29.8581 14.2389 29.5727 14.341 29.3631C14.363 29.3178 14.3794 29.2814 14.3914 29.2532C14.3304 28.8276 13.9545 28.5 13.5 28.5Z"
-    ></path>
-</template>
diff --git a/src/runtime/core/components/icon/QuotationBlock.vue b/src/runtime/core/components/icon/QuotationBlock.vue
deleted file mode 100644
index fb837f5..0000000
--- a/src/runtime/core/components/icon/QuotationBlock.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-    <path
-        class="path"
-        d="M11 13C9.89543 13 9 13.7397 9 14.6522V49.3478C9 50.2603 9.89543 51 11 51C12.1046 51 13 50.2603 13 49.3478V14.6522C13 13.7397 12.1046 13 11 13ZM23.2667 15C22.0148 15 21 15.8954 21 17C21 18.1046 22.0148 19 23.2667 19H52.7333C53.9852 19 55 18.1046 55 17C55 15.8954 53.9852 15 52.7333 15H23.2667ZM21 47C21 45.8954 22.0148 45 23.2667 45H52.7333C53.9852 45 55 45.8954 55 47C55 48.1046 53.9852 49 52.7333 49H23.2667C22.0148 49 21 48.1046 21 47ZM23.2667 30C22.0148 30 21 30.8954 21 32C21 33.1046 22.0148 34 23.2667 34H52.7333C53.9852 34 55 33.1046 55 32C55 30.8954 53.9852 30 52.7333 30H23.2667Z"
-    ></path>
-</template>
diff --git a/src/runtime/core/components/icon/TableBlock.vue b/src/runtime/core/components/icon/TableBlock.vue
deleted file mode 100644
index 6a0311d..0000000
--- a/src/runtime/core/components/icon/TableBlock.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <path
-        class="path"
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M45 13H19C15.6863 13 13 15.6863 13 19V21H51V19C51 15.6863 48.3137 13 45 13ZM13 36V25H22V36H13ZM26 36V25H38V36H26ZM38 40H26V51H38V40ZM42 51H45C48.3137 51 51 48.3137 51 45V40H42V51ZM42 36V25H51V36H42ZM13 40H22V51H19C15.6863 51 13 48.3137 13 45V40ZM19 9C13.4772 9 9 13.4771 9 19V45C9 50.5229 13.4772 55 19 55H45C50.5228 55 55 50.5229 55 45V19C55 13.4771 50.5228 9 45 9H19Z"
-    ></path>
-</template>
diff --git a/src/runtime/core/components/icon/TextBlock.vue b/src/runtime/core/components/icon/TextBlock.vue
deleted file mode 100644
index 0dbdcb5..0000000
--- a/src/runtime/core/components/icon/TextBlock.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-    <path class="path" fill-rule="evenodd" clip-rule="evenodd"
-          d="M19 13H45C48.3137 13 51 15.6863 51 19V45C51 48.3137 48.3137 51 45 51H19C15.6863 51 13 48.3137 13 45V19C13 15.6863 15.6863 13 19 13ZM9 19C9 13.4772 13.4772 9 19 9H45C50.5228 9 55 13.4772 55 19V45C55 50.5228 50.5228 55 45 55H19C13.4772 55 9 50.5228 9 45V19ZM20.8571 19C19.8315 19 19 19.8315 19 20.8571C19 20.8806 19.0004 20.904 19.0013 20.9272C19.0004 20.9514 19 20.9756 19 21V22.5714C19 23.676 19.8954 24.5714 21 24.5714C22.0565 24.5714 22.9217 23.7522 22.995 22.7143H30V41.2857H28.8571C27.8315 41.2857 27 42.1172 27 43.1429C27 44.1685 27.8315 45 28.8571 45H32H35.1429C36.1685 45 37 44.1685 37 43.1429C37 42.1172 36.1685 41.2857 35.1429 41.2857H34V22.7143H41.005C41.0783 23.7522 41.9435 24.5714 43 24.5714C44.1046 24.5714 45 23.676 45 22.5714V21C45 20.9756 44.9996 20.9514 44.9987 20.9272C44.9996 20.904 45 20.8806 45 20.8571C45 19.8315 44.1685 19 43.1429 19H43H32H21H20.8571Z"
-    ></path>
-</template>
diff --git a/src/runtime/core/components/icon/UlBlock.vue b/src/runtime/core/components/icon/UlBlock.vue
deleted file mode 100644
index c1b8239..0000000
--- a/src/runtime/core/components/icon/UlBlock.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-    <path
-        class="path"
-        d="M11 19C12.1046 19 13 18.1046 13 17C13 15.8954 12.1046 15 11 15C9.89543 15 9 15.8954 9 17C9 18.1046 9.89543 19 11 19ZM23 15C21.8954 15 21 15.8954 21 17C21 18.1046 21.8954 19 23 19H53C54.1046 19 55 18.1046 55 17C55 15.8954 54.1046 15 53 15H23ZM23 30C21.8954 30 21 30.8954 21 32C21 33.1046 21.8954 34 23 34H53C54.1046 34 55 33.1046 55 32C55 30.8954 54.1046 30 53 30H23ZM21 47C21 45.8954 21.8954 45 23 45H53C54.1046 45 55 45.8954 55 47C55 48.1046 54.1046 49 53 49H23C21.8954 49 21 48.1046 21 47ZM13 32C13 33.1046 12.1046 34 11 34C9.89543 34 9 33.1046 9 32C9 30.8954 9.89543 30 11 30C12.1046 30 13 30.8954 13 32ZM11 49C12.1046 49 13 48.1046 13 47C13 45.8954 12.1046 45 11 45C9.89543 45 9 45.8954 9 47C9 48.1046 9.89543 49 11 49Z"
-    ></path>
-</template>
diff --git a/src/runtime/core/style/common.css b/src/runtime/core/style/common.css
index e9fd2a5..5bf0b92 100644
--- a/src/runtime/core/style/common.css
+++ b/src/runtime/core/style/common.css
@@ -136,7 +136,7 @@
   background: transparent;
   transition: background 0.25s ease;
 }
-.dragon-editor .d-row-block:hover {
+.dragon-editor .d-row-block:hover, .dragon-editor .d-row-block.--active {
   background: #fafafa;
 }
 .dragon-editor .d-text-block {
diff --git a/src/runtime/core/utils/converter.ts b/src/runtime/core/utils/converter.ts
new file mode 100644
index 0000000..2e54e60
--- /dev/null
+++ b/src/runtime/core/utils/converter.ts
@@ -0,0 +1,105 @@
+import { h } from "vue";
+import type { EditorContentType, TextBlock, ImageBlock, ListBlock, OtherBlock } from "../../../types/index";
+
+export function convertViewBlock(data: EditorContentType, mediaUrl?: string) {
+    const childList: any[] = [];
+
+    data.forEach((row) => {
+        let hObject: any;
+
+        switch (row.type) {
+            case "text":
+                const textBlockData = row as TextBlock;
+
+                hObject = h("p", {
+                    class: ["d-text-block", ...textBlockData.classList],
+                    innerHTML: textBlockData.content,
+                });
+                break;
+            case "image":
+                const imageBlockData = row as ImageBlock;
+                const imageChildList: any[] = [];
+                const imageUrl = mediaUrl ? mediaUrl + imageBlockData.src : imageBlockData.src;
+
+                imageChildList.push(
+                    h(
+                        "div",
+                        { class: ["d-image-area"] },
+                        h("img", {
+                            class: ["d-img"],
+                            src: imageUrl,
+                            width: imageBlockData.width,
+                            height: imageBlockData.height,
+                            alt: imageBlockData.caption,
+                            loading: "lazy",
+                        })
+                    )
+                );
+
+                if (imageBlockData.caption !== "") {
+                    imageChildList.push(
+                        h("p", {
+                            class: ["d-caption"],
+                            innerHTML: imageBlockData.caption,
+                        })
+                    );
+                }
+
+                hObject = h("div", { class: ["d-image-block", ...imageBlockData.classList] }, imageChildList);
+                break;
+            case "ol":
+                const olBlockData = row as ListBlock;
+                const olChildList: any[] = [];
+
+                olBlockData.childList.forEach((child) => {
+                    olChildList.push(
+                        h("li", {
+                            class: ["d-li-item", ...child.classList],
+                            innerHTML: child.content,
+                        })
+                    );
+                });
+
+                hObject = h(
+                    "ol",
+                    {
+                        class: ["d-ol-block", ...olBlockData.classList],
+                    },
+                    olChildList
+                );
+                break;
+            case "ul":
+                const ulBlockData = row as ListBlock;
+                const ulChildList: any[] = [];
+
+                ulBlockData.childList.forEach((child) => {
+                    ulChildList.push(
+                        h("li", {
+                            class: ["d-li-item", ...child.classList],
+                            innerHTML: child.content,
+                        })
+                    );
+                });
+
+                hObject = h(
+                    "ul",
+                    {
+                        class: ["d-ul-block", ...ulBlockData.classList],
+                    },
+                    ulChildList
+                );
+                break;
+            default:
+                const defaultData = row as OtherBlock;
+
+                hObject = h("div", {
+                    class: ["d-other-block"],
+                    innerHTML: defaultData.innerHTML,
+                });
+        }
+
+        childList.push(hObject);
+    });
+
+    return childList;
+}
diff --git a/src/runtime/core/utils/convertor.ts b/src/runtime/core/utils/convertor.ts
deleted file mode 100644
index ad19f3e..0000000
--- a/src/runtime/core/utils/convertor.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-// @ts-nocheck
-import { editorContentType } from "../../../types";
-
-export function convertToHTML(data: editorContentType) {
-    let htmlStructure = "";
-
-    data.forEach((row) => {
-        // TODO : amp 서포트...?
-        switch (row.type) {
-            case "text":
-                htmlStructure += `<p class="d-text-block ${row.classList.join(" ")}">${row.content}</p>`;
-                break;
-            case "image":
-                htmlStructure += `
-                <div class="d-image-block ${row.classList.join(" ")}">
-                    <div class="d-image-area">
-                        <img class="d-img" src="${row.src}" width="${row.width}" height="${row.height}" alt="${row.caption}" loading="lazy">
-                    </div>
-                `;
-
-                if (row.caption) {
-                    htmlStructure += `<p class="d-caption">${row.caption}</p>`;
-                }
-
-                htmlStructure += `</div>`;
-                break;
-            case "ol":
-                htmlStructure += `<ol class="d-ol-block ${row.classList.join(" ")}">`;
-
-                row.childList.forEach((child) => {
-                    htmlStructure += `<li class="d-li-item ${child.classList.join(" ")}">${child.content}</li>`;
-                });
-
-                htmlStructure += `</ol>`;
-                break;
-            case "ul":
-                htmlStructure += `<ul class="d-ul-block ${row.classList.join(" ")}">`;
-
-                row.childList.forEach((child) => {
-                    htmlStructure += `<li class="d-li-item ${child.classList.join(" ")}">${child.content}</li>`;
-                });
-
-                htmlStructure += `</ul>`;
-                break;
-            default:
-                htmlStructure += row.innerHTML;
-        }
-    });
-
-    //         <ol class="d-ol-block" v-if="row.type === 'ol'" :class="row.classList">
-    //             <li class="d-li-item"></li>
-    //         </ol>
-    //     </template>
-
-    return htmlStructure;
-}
diff --git a/src/runtime/core/utils/global.ts b/src/runtime/core/utils/global.ts
new file mode 100644
index 0000000..9904d4c
--- /dev/null
+++ b/src/runtime/core/utils/global.ts
@@ -0,0 +1,101 @@
+import type { TextBlock, allBlock, ImageBlock, ListBlock } from "../../../types/index";
+
+// 난수 아이디 생성
+export function generateId() {
+    const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+    let str = "";
+
+    for (let i = 0; i < 20; i++) {
+        str += chars.charAt(Math.floor(Math.random() * chars.length));
+    }
+
+    return str;
+}
+
+// 텍스트 블럭 생성
+function createTextBlock(data?: { classList: []; content: string }): TextBlock {
+    if (data) {
+        return {
+            type: "text",
+            id: generateId(),
+            classList: data.classList,
+            content: data.content,
+        };
+    } else {
+        return {
+            type: "text",
+            id: generateId(),
+            classList: [],
+            content: "",
+        };
+    }
+}
+
+// 이미지 블럭 생성
+function createImageBlock(data): ImageBlock {
+    const totalSize = data.width + data.height;
+    const w = Math.round((100 / totalSize) * data.width);
+    const h = Math.round((100 / totalSize) * data.height);
+    const contrast = w - h;
+    let classList: string[] = ["d-align-center"];
+
+    switch (
+        true // 이미지 비율에 따른 초기 사이즈 조정
+    ) {
+        case contrast < -40:
+            classList.push("--5");
+            break;
+        case contrast < -15:
+            classList.push("--10");
+            break;
+        default:
+            classList.push("--20");
+    }
+
+    return {
+        type: "image",
+        id: generateId(),
+        classList: classList,
+        src: data.src,
+        width: data.width,
+        height: data.height,
+        caption: data.caption,
+    };
+}
+
+// 리스트 블럭 생성
+function createListBlock(type: string = "ul"): ListBlock {
+    return {
+        type: type,
+        id: generateId(),
+        classList: [],
+        childList: [
+            {
+                classList: [],
+                content: "",
+            },
+        ],
+    };
+}
+
+// 블럭 생성 함수
+export function createBlock(name: string, value?: object): allBlock {
+    let blockData: allBlock;
+
+    switch (name) {
+        case "ul":
+            blockData = createListBlock();
+            break;
+        case "ol":
+            blockData = createListBlock("ol");
+            break;
+        case "image":
+            blockData = createImageBlock(value);
+            break;
+        default:
+            // @ts-ignore | 값의 유동성에 의해 너무 많은 타입을 가지고 있음.
+            blockData = createTextBlock(value);
+    }
+
+    return blockData;
+}
diff --git a/src/runtime/core/utils/index.ts b/src/runtime/core/utils/index.ts
index 8bde3f5..498c3ef 100644
--- a/src/runtime/core/utils/index.ts
+++ b/src/runtime/core/utils/index.ts
@@ -1,107 +1,7 @@
-import { textBlock, allBlock, imageBlock, listBlock } from "../../../types/index";
-
-// 난수 아이디 생성
-function generateId() {
-    const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-    let str = "";
-
-    for (let i = 0; i < 20; i++) {
-        str += chars.charAt(Math.floor(Math.random() * chars.length));
-    }
-
-    return str;
-}
-
-// 텍스트 블럭 생성
-function createTextBlock(data?: { classList: []; content: string }): textBlock {
-    if (data) {
-        return {
-            type: "text",
-            id: generateId(),
-            classList: data.classList,
-            content: data.content,
-        };
-    } else {
-        return {
-            type: "text",
-            id: generateId(),
-            classList: [],
-            content: "",
-        };
-    }
-}
-
-// 이미지 블럭 생성
-function createImageBlock(data): imageBlock {
-    const totalSize = data.width + data.height;
-    const w = Math.round((100 / totalSize) * data.width);
-    const h = Math.round((100 / totalSize) * data.height);
-    const contrast = w - h;
-    let classList: string[] = ["d-align-center"];
-
-    switch (
-        true // 이미지 비율에 따른 초기 사이즈 조정
-    ) {
-        case contrast < -40:
-            classList.push("--5");
-            break;
-        case contrast < -15:
-            classList.push("--10");
-            break;
-        default:
-            classList.push("--20");
-    }
-
-    return {
-        type: "image",
-        id: generateId(),
-        classList: classList,
-        src: data.src,
-        width: data.width,
-        height: data.height,
-        caption: data.caption,
-    };
-}
-
-// 리스트 블럭 생성
-function createlistBlock(type: string = "ul"): listBlock {
-    return {
-        type: type,
-        id: generateId(),
-        classList: [],
-        childList: [
-            {
-                classList: [],
-                content: "",
-            },
-        ],
-    };
-}
-
-// 블럭 생성 함수
-export function createBlock(name: string, value?: object): allBlock {
-    let blockData: allBlock;
-
-    switch (name) {
-        case "ul":
-            blockData = createlistBlock();
-            break;
-        case "ol":
-            blockData = createlistBlock("ol");
-            break;
-        case "image":
-            blockData = createImageBlock(value);
-            break;
-        default:
-            // @ts-ignore | 값의 유동성에 의해 너무 많은 타입을 가지고 있음.
-            blockData = createTextBlock(value);
-    }
-
-    return blockData;
-}
-
+export * from "./global";
 export * from "./keyboard";
 export * from "./cursor";
 export * from "./style";
 export * from "./element";
-export * from "./convertor";
+export * from "./converter";
+export * from "./ui";
diff --git a/src/runtime/core/utils/ui.ts b/src/runtime/core/utils/ui.ts
new file mode 100644
index 0000000..538260e
--- /dev/null
+++ b/src/runtime/core/utils/ui.ts
@@ -0,0 +1,40 @@
+import { h } from "vue";
+import type { EditorContentType, TextBlock, ImageBlock, ListBlock, OtherBlock } from "../../../types/index";
+
+export function createLeftMenu(modelValue: EditorContentType, top: number, isActive: boolean) {
+    console.log(modelValue);
+    // <div class="d-left-menu" :class="{ '--active': activeMenu }" :style="{ top: `${leftMenuPosition}px` }">
+    //         <div class="d-add-block">
+    //             <button class="d-btn-menu-pop" @click="toggleBlockAddMenu"></button>
+
+    //             <div class="d-block-list" :class="{ '--active': activeBlockAddMenu }">
+    //                 <button v-for="(row, count) in blockMenu" :key="count" class="d-btn-block" @click="row.action">
+    //                     <SvgIcon v-if="row.hasIcon" :kind="row.icon" />
+    //                     <div v-else class="d-icon" v-html="row.icon"></div>
+    //                     <p class="d-name">{{ row.name }}</p>
+    //                 </button>
+    //             </div>
+    //         </div>
+
+    //         <div class="d-control-block">
+    //             <button class="d-btn-block-pop" @click="toggleBlockControlMenu"></button>
+
+    //             <div class="d-block-list" :class="{ '--active': activeBlockColtrolMenu }">
+    //                 <button class="d-btn-block" @click="moveBlock('up')"> <SvgIcon kind="arrowUp" />Up </button>
+    //                 <button class="d-btn-block" @click="moveBlock('down')"> <SvgIcon kind="arrowDown" />Down </button>
+    //                 <button class="d-btn-block"> <SvgIcon kind="delete" />Delete </button>
+    //             </div>
+    //         </div>
+    //     </div>
+
+    return h("div", {
+        class: ["d-left-menu", { "--active": isActive }],
+        onClick: () => {
+            test();
+        },
+    });
+
+    function test() {
+        modelValue = [{ type: "text", classList: [], content: "123" }];
+    }
+}
diff --git a/src/runtime/shared/components/DragonEditor.ts b/src/runtime/shared/components/DragonEditor.ts
new file mode 100644
index 0000000..19bd3a4
--- /dev/null
+++ b/src/runtime/shared/components/DragonEditor.ts
@@ -0,0 +1,290 @@
+// default
+import { h, defineComponent, ref, unref, watch } from "vue";
+import { createLeftMenu, createBlock, getClipboardData, convertViewBlock, getCursor } from "../../core/utils";
+import type { editorOptions, editorMenu, EditorContentType, userCustomMenu, userStyleMenu, cursorSelection } from "../../../types/index";
+
+// style
+import "../../core/style/common.css";
+
+// components
+import SvgIcon from "../../core/components/SvgIcon";
+
+import TextBlock from "../../core/components/editor/TextBlock.vue";
+import ImageBlock from "../../core/components/editor/ImageBlock.vue";
+import olBlock from "../../core/components/editor/OlBlock.vue";
+import ulBlock from "../../core/components/editor/UlBlock.vue";
+
+export default defineComponent({
+    name: "DragonEditor",
+    props: ["modelValue", "option"],
+    emits: ["update:modelValue"],
+    setup: (
+        props: {
+            readonly modelValue: EditorContentType;
+            readonly option?: editorOptions;
+        },
+        ctx
+    ) => {
+        const modelValue = ref<EditorContentType>([]);
+        const option = ref<editorOptions>({
+            blockMenu: ["text", "ol", "ul"], // TODO : 다른 블럭 만들기 "table", "quotation"
+        });
+
+        if (props.modelValue) {
+            modelValue.value = props.modelValue;
+        }
+
+        if (props.option !== undefined) {
+            option.value = Object.assign(option.value, props.option);
+        }
+
+        // Local data
+        const activeLeftMenu = ref<boolean>(false);
+        const leftMenuPosition = ref<number>(0);
+        const leftMenuStructure = createLeftMenu(modelValue.value, leftMenuPosition.value, activeLeftMenu.value);
+        // const activeLinkBox = ref<boolean>(false);
+        // const activeBlockAddMenu = ref<boolean>(false);
+        // const activeBlockColtrolMenu = ref<boolean>(false);
+        // const styleMenuPosition = ref<number>(0);
+        // const linkBoxPosition = ref({
+        //     top: 0,
+        //     left: 0,
+        // });
+        // const iconList = ["TextBlock", "ImageBlock", "ulBlock", "olBlock", "quotationBlock", "tableBlock"];
+        // const blockMenu = ref<editorMenu[]>([]);
+        const customStyleMenu = ref<userStyleMenu[]>([]);
+        // const activeIdx = ref<number>(0);
+        // const focusIdx = ref<number>(0);
+        // const linkValue = ref<string>("");
+        // const cursorData = ref<cursorSelection>({
+        //     type: "",
+        //     startNode: null,
+        //     startOffset: null,
+        //     endNode: null,
+        //     endOffset: null,
+        // });
+        // const styleButtonList = ref([
+        //     [
+        //         {
+        //             type: "single",
+        //             name: "Align Left",
+        //             icon: "alignLeft",
+        //             active: false,
+        //             target: ["text", "image", "table", "ul", "ol"],
+        //             action: () => {
+        //                 setBlockDecoEvent("alignLeft");
+        //             },
+        //         },
+        //         {
+        //             type: "single",
+        //             name: "Align Center",
+        //             icon: "alignCenter",
+        //             target: ["text", "image", "table", "ul", "ol"],
+        //             active: false,
+        //             action: () => {
+        //                 setBlockDecoEvent("alignCenter");
+        //             },
+        //         },
+        //         {
+        //             type: "single",
+        //             name: "Align right",
+        //             icon: "alignRight",
+        //             target: ["text", "image", "table", "ul", "ol"],
+        //             active: false,
+        //             action: () => {
+        //                 setBlockDecoEvent("alignRight");
+        //             },
+        //         },
+        //     ],
+        //     [
+        //         {
+        //             type: "single",
+        //             name: "Decoration Bold",
+        //             icon: "decorationBold",
+        //             target: ["text", "table", "ul", "ol"],
+        //             active: false,
+        //             action: () => {
+        //                 setBlockDecoEvent("decorationBold");
+        //             },
+        //         },
+        //         {
+        //             type: "single",
+        //             name: "Decoration Italic",
+        //             icon: "decorationItalic",
+        //             target: ["text", "table", "ul", "ol"],
+        //             active: false,
+        //             action: () => {
+        //                 setBlockDecoEvent("decorationItalic");
+        //             },
+        //         },
+        //         {
+        //             type: "single",
+        //             name: "Decoration Underline",
+        //             icon: "decorationUnderline",
+        //             target: ["text", "table", "ul", "ol"],
+        //             active: false,
+        //             action: () => {
+        //                 setBlockDecoEvent("decorationUnderline");
+        //             },
+        //         },
+        //         {
+        //             type: "single",
+        //             name: "Decoration Strikethrough",
+        //             icon: "decorationStrikethrough",
+        //             target: ["text", "table", "ul", "ol"],
+        //             active: false,
+        //             action: () => {
+        //                 setBlockDecoEvent("decorationStrikethrough");
+        //             },
+        //         },
+        //     ],
+        //     [
+        //         {
+        //             type: "single",
+        //             name: "Link",
+        //             icon: "link",
+        //             active: false,
+        //             target: ["text", "table", "ul", "ol"],
+        //             action: () => {
+        //                 activeLinkBox.value = !activeLinkBox.value;
+        //             },
+        //         },
+        //     ],
+        //     [
+        //         {
+        //             type: "single",
+        //             name: "Decoration Code",
+        //             icon: "codeBlock",
+        //             target: ["text", "table", "ul", "ol"],
+        //             active: false,
+        //             action: () => {
+        //                 setBlockDecoEvent("decorationCode");
+        //             },
+        //         },
+        //     ],
+        //     [
+        //         {
+        //             type: "list",
+        //             name: "Font Size",
+        //             value: "default",
+        //             target: ["text"],
+        //             active: false,
+        //             action: (count, j) => {
+        //                 styleButtonList.value[count][j].active = !styleButtonList.value[count][j].active;
+        //             },
+        //             childList: [
+        //                 {
+        //                     name: "default",
+        //                     action: (count, j) => {
+        //                         setBlockDecoEvent("heading-4");
+        //                         styleButtonList.value[count][j].value = "default";
+        //                         styleButtonList.value[count][j].active = false;
+        //                     },
+        //                 },
+        //                 {
+        //                     name: "h1",
+        //                     action: (count, j) => {
+        //                         setBlockDecoEvent("heading-1");
+        //                         styleButtonList.value[count][j].value = "h1";
+        //                         styleButtonList.value[count][j].active = false;
+        //                     },
+        //                 },
+        //                 {
+        //                     name: "h2",
+        //                     action: (count, j) => {
+        //                         setBlockDecoEvent("heading-2");
+        //                         styleButtonList.value[count][j].value = "h2";
+        //                         styleButtonList.value[count][j].active = false;
+        //                     },
+        //                 },
+        //                 {
+        //                     name: "h3",
+        //                     action: (count, j) => {
+        //                         setBlockDecoEvent("heading-3");
+        //                         styleButtonList.value[count][j].value = "h3";
+        //                         styleButtonList.value[count][j].active = false;
+        //                     },
+        //                 },
+        //                 {
+        //                     name: "h5",
+        //                     action: (count, j) => {
+        //                         setBlockDecoEvent("heading-5");
+        //                         styleButtonList.value[count][j].value = "h5";
+        //                         styleButtonList.value[count][j].active = false;
+        //                     },
+        //                 },
+        //                 {
+        //                     name: "h6",
+        //                     action: (count, j) => {
+        //                         setBlockDecoEvent("heading-6");
+        //                         styleButtonList.value[count][j].value = "h6";
+        //                         styleButtonList.value[count][j].active = false;
+        //                     },
+        //                 },
+        //             ],
+        //         },
+        //     ],
+        // ]);
+
+        // 블럭 추가 메뉴 설정
+        // blockMenu.value = setEditorMenu(option.value.blockMenu as string[], unref(option.value.customBlockMenu) as userCustomMenu[]);
+
+        // 유저 커스텀 스타일 메뉴
+        if (option.value.customStyleMenu) {
+            customStyleMenu.value = unref(option.value.customStyleMenu);
+        }
+
+        // 컨텐츠 데이터 설정
+        init(modelValue.value);
+
+        function init(targetData: EditorContentType) {
+            if (targetData && Array.isArray(targetData)) {
+                if (targetData.length == 0) {
+                    // addBlockLocal({ name: "text", time: true });
+                }
+            } else {
+                throw new Error("[DragonEditor] : You must set 'v-model' attribute and 'v-mode' type is must be Array(EditorContentType).");
+            }
+        }
+
+        function addImageBlock({ src, width, height, caption = "" }: { src: string; width: number; height: number; caption?: string }) {
+            console.log("addImage");
+            // addBlockLocal({
+            //     name: "image",
+            //     value: {
+            //         src: src,
+            //         width: width,
+            //         height: height,
+            //         caption: caption,
+            //     },
+            // });
+        }
+
+        watch(
+            () => props.modelValue,
+            (newData, oldData) => {
+                init(newData);
+            }
+        );
+
+        ctx.expose({ addImageBlock });
+
+        return () => {
+            // const blockList: any[] = convertViewBlock(modelValue.value, option.value.medaiURL, "edit");
+
+            return h(
+                "div",
+                {
+                    class: ["dragon-editor"],
+                    onPaste: () => {
+                        console.log("paste");
+                    },
+                    onCopy: () => {
+                        console.log("copy");
+                    },
+                },
+                [leftMenuStructure]
+            );
+        };
+    },
+});
diff --git a/src/runtime/shared/components/DragonEditor.vue b/src/runtime/shared/components/DragonEditor.vue
index 7a8aa49..4c3cb35 100644
--- a/src/runtime/shared/components/DragonEditor.vue
+++ b/src/runtime/shared/components/DragonEditor.vue
@@ -77,21 +77,21 @@
 // @ts-ignore
 import { ref, unref, onMounted } from "#imports";
 import { createBlock, getClipboardData, getCursor } from "../../core/utils";
-import type { editorOptions, editorMenu, editorContentType, userCustomMenu, userStyleMenu, cursorSelection } from "../../../types/index";
+import type { editorOptions, editorMenu, EditorContentType, userCustomMenu, userStyleMenu, cursorSelection } from "../../../types/index";
 
 // components
 import SvgIcon from "../../core/components/SvgIcon.vue";
-import textBlock from "../../core/components/editor/TextBlock.vue";
-import imageBlock from "../../core/components/editor/ImageBlock.vue";
+import TextBlock from "../../core/components/editor/TextBlock.vue";
+import ImageBlock from "../../core/components/editor/ImageBlock.vue";
 import olBlock from "../../core/components/editor/OlBlock.vue";
 import ulBlock from "../../core/components/editor/UlBlock.vue";
 
 // 기본 정보
 const props = defineProps<{
-    modelValue: editorContentType;
+    modelValue: EditorContentType;
     option?: editorOptions;
 }>();
-const modelValue = ref<editorContentType>([]);
+const modelValue = ref<EditorContentType>([]);
 const option = ref<editorOptions>({
     blockMenu: ["text", "ol", "ul"],
     // blockMenu: ["text", "ol", "ul", "table", "quotation"], // TODO : 다른 블럭 만들기
@@ -106,7 +106,7 @@ if (props.option) {
 }
 
 const emit = defineEmits<{
-    (e: "update:modelValue", modelValue: editorContentType): void;
+    (e: "update:modelValue", modelValue: EditorContentType): void;
 }>();
 
 // 내부 데이터
@@ -122,10 +122,10 @@ const linkBoxPosition = ref({
     top: 0,
     left: 0,
 });
-const iconList = ["textBlock", "imageBlock", "ulBlock", "olBlock", "quotationBlock", "tableBlock"];
+const iconList = ["TextBlock", "ImageBlock", "ulBlock", "olBlock", "quotationBlock", "tableBlock"];
 const blockMenu = ref<editorMenu[]>([]);
 const customStyleMenu = ref<userStyleMenu[]>([]);
-const content = ref<editorContentType>([]);
+const content = ref<EditorContentType>([]);
 const activeIdx = ref<number>(0);
 const focusIdx = ref<number>(0);
 const linkValue = ref<string>("");
@@ -565,10 +565,10 @@ function setComponentKind(kind: string) {
             componentData = olBlock;
             break;
         case "image":
-            componentData = imageBlock;
+            componentData = ImageBlock;
             break;
         case "text":
-            componentData = textBlock;
+            componentData = TextBlock;
     }
 
     return componentData;
diff --git a/src/runtime/shared/components/DragonEditorViewer.ts b/src/runtime/shared/components/DragonEditorViewer.ts
new file mode 100644
index 0000000..8fda825
--- /dev/null
+++ b/src/runtime/shared/components/DragonEditorViewer.ts
@@ -0,0 +1,21 @@
+// default
+import { h, defineComponent } from "vue";
+import { convertViewBlock } from "../../core/utils";
+import type { EditorContentType } from "../../../types";
+
+// style
+import "../../core/style/viewer.css";
+
+export default defineComponent({
+    name: "DragonEditorViewer",
+    props: ["content", "mediaUrl"],
+    setup: (props: { readonly content: EditorContentType; readonly mediaUrl?: string }, ctx) => {
+        if (props.content === undefined || Array.isArray(props.content) === false) {
+            throw new Error("[DragonEditor] Type error : 'content' props is must be Array.");
+        }
+
+        return () => {
+            return h("div", { class: ["dragon-editor-viewer"] }, convertViewBlock(props.content, props.mediaUrl));
+        };
+    },
+});
diff --git a/src/runtime/shared/components/DragonEditorViewer.vue b/src/runtime/shared/components/DragonEditorViewer.vue
deleted file mode 100644
index 83fcf7b..0000000
--- a/src/runtime/shared/components/DragonEditorViewer.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-    <div class="dragon-editor-viewer" v-html="convertToHTML(props.content)"></div>
-</template>
-
-<script setup lang="ts">
-import { editorContentType } from "../../../types";
-import { convertToHTML } from "../../core/utils";
-
-const props = defineProps<{
-    content: editorContentType;
-}>();
-</script>
-
-<style>
-@import "../../core/style/viewer.css";
-</style>
diff --git a/src/types/index.ts b/src/types/index.ts
index 0a34b5d..c34caca 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -22,16 +22,16 @@ export interface editorOptions {
     blockMenu?: string[];
     customBlockMenu?: userCustomMenu[];
     customStyleMenu?: userStyleMenu[];
+    medaiURL?: string;
 }
 
-export type allBlock = textBlock | imageBlock | listBlock | otherBlock;
+export type allBlock = TextBlock | ImageBlock | ListBlock | OtherBlock;
 
-export type editorContentType = allBlock[];
+export type EditorContentType = allBlock[];
 
 // Block types
-export interface textBlock {
+export interface TextBlock {
     type: string;
-    id: string;
     classList: string[];
     content: string;
 }
@@ -41,9 +41,8 @@ export interface commentBlock {
     content: string;
 }
 
-export interface imageBlock {
+export interface ImageBlock {
     type: string;
-    id: string;
     classList: string[];
     src: string;
     width: number;
@@ -56,14 +55,13 @@ export interface liItem {
     content: string;
 }
 
-export interface listBlock {
+export interface ListBlock {
     type: string;
-    id: string;
     classList: string[];
     childList: liItem[];
 }
 
-export interface otherBlock {
+export interface OtherBlock {
     type: string;
     innerHTML: string;
 }
diff --git a/style/index.scss b/style/index.scss
index ef04792..0483113 100644
--- a/style/index.scss
+++ b/style/index.scss
@@ -166,7 +166,8 @@
         background: transparent;
         transition: background 0.25s ease;
 
-        &:hover {
+        &:hover,
+        &.--active {
             background: #fafafa;
         }
     }
diff --git a/yarn.lock b/yarn.lock
index d12cd49..86a2b59 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2567,9 +2567,9 @@ get-caller-file@^2.0.5:
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
 get-func-name@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.0.tgz"
-  integrity sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.2.tgz#0d7cf20cd13fda808669ffa88f4ffc7a3943fc41"
+  integrity sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==
 
 get-port-please@^3.0.1:
   version "3.0.1"