Merge pull request #41 from lovefields/dev

2.1.0
lovefields · Oct 22, 2023 · 4de035c · 4de035c
2 parents 0b7c435 + 7529a8b
commit 4de035c
Show file tree

Hide file tree

Showing 44 changed files with 787 additions and 538 deletions.
diff --git 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,18 +122,24 @@ editor.value.updateBlockData();
 editor.value.focus();
 ```
 
-### 뷰어
+### Viewer
 
 ```vue
 <tempalte>
   <DragonEditorViewer :content="contentData"/>
 </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
@@ -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
@@ -6,41 +6,54 @@
             <DragonEditor v-model="contentData" :option="option" ref="editor" />
         </div>
         <button @click="test">업데이트</button>
+        <button @click="change">변경!</button>
+        <button @click="addImage">이미지1!</button>
     </div>
 </template>
 
 <script setup lang="ts">
 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
@@ -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
@@ -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')
         });
     }
 })