dragon-editor 2.1.2 → 3.0.0

package/README.md

@@ -8,142 +8,128 @@
 [language-href]: https://github.com/lovefields/dragonEditor/
 [hits-src]: https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Flovefields%2FdragonEditor&count_bg=%2379C83D&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false
 [hits-href]: https://hits.seeyoufarm.com
-[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-version-src]: https://img.shields.io/npm/v/dragon-editor/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
 [npm-version-href]: https://www.npmjs.com/package/dragon-editor
-[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-downloads-src]: https://img.shields.io/npm/dm/dragon-editor.svg?style=flat&colorA=18181B&colorB=28CF8D
 [npm-downloads-href]: https://www.npmjs.com/package/dragon-editor
-[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=18181B&colorB=28CF8D
-[license-href]: https://www.npmjs.com/package/dragon-editor
+[license-src]: https://img.shields.io/npm/l/dragon-editor
 [nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
 [nuxt-href]: https://nuxt.com
-[readme-ko]: https://github.com/lovefields/dragonEditor/blob/main/README.md
-[readme-en]: https://github.com/lovefields/dragonEditor/blob/main/README_en.md
-
-[![Github stars](stars-src)](stars-href)
-[![Github issues](issues-src)](issues-href)
-[![Github forks](forks-src)](forks-href)
-[![Github top language](language-src)](language-href)
-[![Hits](hits-src)](hits-href)
-[![npm version][npm-version-src]][npm-version-href]
-[![npm downloads][npm-downloads-src]][npm-downloads-href]
-[![License][license-src]][license-href]
-[![Nuxt][nuxt-src]][nuxt-href]
 
-[KO](readme-ko) / [EN](readme-en)
+[![stars-src]](stars-href)
+[![forks-src]](forks-href)
+[![language-src]](language-href)
+[![hits-src]](hits-href)
+[![issues-src]](issues-href)
+[![npm-version-src]][npm-version-href]
+[![npm-downloads-src]][npm-downloads-href]
+![NPM][license-src]
+[![Nuxt][nuxt-src]][nuxt-href]
 
 # DragonEditor
 
-드래곤 에디터는 그냥 블로그에 쓸 이지윅 에디터가 필요해서 만들었습니다.<br>
-커스터마이징이 가능하며 Nuxt.js만 지원합니다.
+I just made the DragonEditor because I needed the WYSIWYG Editor to write on my [blog](https://dico.me).
 
-## 사용법
+This module support Nuxt3 only.
 
-### 에디터
+# Dependencies
 
-```vue
-<tempalte>
-  <DragonEditor v-model="contentData" :option="option" ref="editor" />
-</tempalte>
+-   @pinia/nuxt
 
-<script setup lang="ts">
-const editor = ref();
-const contentData = ref([]);
-const option = ref({}); // 선택사항
-</script>
+## Install
+
+```shell
+mpm i dragon-edtior
+# or
+yarn add dragon-editor
+# or
+bun add dragon-editor
 ```
 
-#### 컴포넌트 명령어
+## Using
 
-1. 이미지 삽입
+First. Set module
 
 ```typescript
-editor.value.addImageBlock({
-    src: string;
-    width: number;
-    height: number;
-    webp: boolean;
+export default defineNuxtConfig({
+    modules: ["dragon-editor"],
 });
 ```
 
-2. 저장
+Second. Use Component
 
-```typescript
-editor.value.updateBlockData();
-// do save
-```
-
-### 코멘트
-
-```vue
-<tempalte>
-  <DragonEditorComment v-model="commentData" ref="editor" />
-</tempalte>
+```html
+<template>
+    <div class="editor-area">
+        <ClientOnly>
+            <DragonEditor ref="$editor" />
+        </ClientOnly>
+    </div>
+</template>
 
 <script setup lang="ts">
-const editor = ref();
-const commentData = ref({
-    classList: [],
-    content: "",
-});
+    const $editor = ref<any>();
 </script>
 ```
 
-#### 컴포넌트 명령어
+Done!
 
-1. 스타일 설정
+## View Page
 
-스타일의 경우 컴포넌트에서 다음과 같이 명령어를 사용할 수 있습니다.<br>
-해당되는 스타일이 존재하지 않을 경우 클레스에 값을 부여합니다.
+```html
+<template>
+    <div class="view-area">
+        <DragonEditorViewer :content="data" />
+    </div>
+</template>
 
-```typescript
-editor.value.setStyles("decorationBold");
+<script setup lang="ts">
+    const data = ref([]); // content data
+</script>
 ```
 
-2. 스타일 리스트
+## Method
 
--   `alignLeft` : 왼쪽 정렬
--   `alignCenter` : 가운데 정렬
--   `alignRight` : 오른쪽 정렬
--   `decorationBold` : 볼드
--   `decorationItalic` : 이텔릭
--   `decorationUnderline` : 밑줄
--   `decorationStrikethrough` : 취소선
+### getContentData
 
-2. 저장
+```html
+<template>
+    <div class="editor-area">
+        <ClientOnly>
+            <DragonEditor ref="$editor" />
+        </ClientOnly>
+        <button @click="getData()">Get Data</button>
+    </div>
+</template>
 
-```typescript
-editor.value.updateBlockData();
-// do save
-```
-
-3. 포커스
+<script setup lang="ts">
+    const $editor = ref<any>();
 
-```typescript
-editor.value.focus();
+    function getData() {
+        console.log($editor.value.getContentData());
+    }
+</script>
 ```
 
-### Viewer
+### setContentData
 
-```vue
-<tempalte>
-  <DragonEditorViewer :content="contentData"/>
-</tempalte>
+```html
+<template>
+    <div class="editor-area">
+        <ClientOnly>
+            <DragonEditor ref="$editor" />
+        </ClientOnly>
+        <button @click="setData()">Set Data</button>
+    </div>
+</template>
 
 <script setup lang="ts">
-const contentData = ref([]); // Save Data for Editor
+    const $editor = ref<any>();
+
+    function setData() {
+        $editor.value.getContentData([...]);
+    }
 </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)
-
-## 문서
-
--   [DragonEditor Document](https://lovefields.github.io/dragonEditor-doc/) -->
+<!-- More information is here [Document](123) -->

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "dragon-editor",
   "configKey": "dragon-editor",
-  "version": "2.1.2"
+  "version": "3.0.0"
 }

package/dist/module.mjs

@@ -1,27 +1,25 @@
-import { defineNuxtModule, createResolver, addComponent } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addComponent, addTypeTemplate, installModule } from '@nuxt/kit';
 
 const module = defineNuxtModule({
   meta: {
     name: "dragon-editor"
   },
-  setup(options, nuxt) {
+  async setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
     addComponent({
       name: "DragonEditor",
-      filePath: resolver.resolve("./runtime/shared/components/DragonEditor")
-    });
-    addComponent({
-      name: "DragonEditorNew",
-      filePath: resolver.resolve("./runtime/shared/components/DragonEditorNew")
-    });
-    addComponent({
-      name: "DragonEditorComment",
-      filePath: resolver.resolve("./runtime/shared/components/DragonEditorComment")
+      filePath: resolver.resolve("./runtime/components/DragonEditor")
     });
     addComponent({
       name: "DragonEditorViewer",
-      filePath: resolver.resolve("./runtime/shared/components/DragonEditorViewer")
+      filePath: resolver.resolve("./runtime/components/DragonEditorViewer")
+    });
+    addTypeTemplate({
+      filename: "types/dragonEditor.d.ts",
+      src: resolver.resolve("./runtime/type.d.ts"),
+      write: true
     });
+    await installModule("@pinia/nuxt");
   }
 });