dragon-editor 2.0.0-beta.1.4 → 2.0.0-beta.2

package/README.md

@@ -3,176 +3,113 @@
 [![Github forks](https://img.shields.io/github/forks/lovefields/dragonEditor)](https://github.com/lovefields/dragonEditor/network/members)
 [![Github top language](https://img.shields.io/github/languages/top/lovefields/dragonEditor)](https://github.com/lovefields/dragonEditor/)
 [![Hits](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)](https://hits.seeyoufarm.com)
+[![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](https://github.com/lovefields/dragonEditor/blob/main/README.md) / [EN](https://github.com/lovefields/dragonEditor/blob/main/README_en.md)
 
 # DragonEditor
 
-드래곤 에디터는 그냥 블로그에 쓸 이지윅 에디터가 필요해서 만들었습니다.<br>커스터마이징이 가능하며 AMP 페이지를 지원합니다.
-
-## 브라우저 지원
--   Chrome 55+
--   Safari 13+
--   Firefox 63+
--   Edge 79+
--   IOS 11+
--   Android 7+
-
-IE 따위는 지원하지 않습니다.
+드래곤 에디터는 그냥 블로그에 쓸 이지윅 에디터가 필요해서 만들었습니다.<br>
+커스터마이징이 가능하며 AMP 페이지를 지원합니다.<br>
+2.0 기점으로 Nuxt.js만 지원합니다.
 
-## 플러그인
-
-코드블럭을 사용하는 경우만 사용합니다.<br>
-~~직접 만들려고 했는데 미친 짓인 것 같네요~~
+## 사용법
 
--   `highlight.js` [(Link)](https://highlightjs.org/)
+### 에디터
 
-## 사용법
+```vue
+<tempalte>
+  <DragonEditor v-model="contentData" :option="option" ref="editor" />
+</tempalte>
 
-### 에디터 페이지
-```html
-<!-- 
-* 코드 블럭을 사용한다면 구글 폰트(Inconsolata)를 불러옵니다.
-* 에디터 CSS를 로드합니다.
--->
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&amp;display=swap">
-<link rel="stylesheet" href="[yourdir]/dragonEditor.css">
-
-<!--
-* editor-dragon 클레스를 지정합니다.
--->
-<div class="editor-dragon"></div>
-
-<!-- 
-* 코드 블럭을 사용할 경우 플러그인을 불러오세요.
-* 에디터 JS를 로드합니다.
--->
-<script src="[yourdir]/highlight.pack.js"></script>
-<script src="[yourdir]/dragonEditor.js"></script>
-<script>
-    const editor = new DragonEditor();
-    // 위나 아래처럼 사용 가능합니다
-    const editor = new DragonEditor({
-        key: "value",
-    });
+<script setup lang="ts">
+const editor = ref();
+const contentData = ref([]);
+const option = ref({}); // 선택사항
 </script>
 ```
 
-### 뷰 페이지
-```html
-<!-- 
-* 코드 블럭을 사용한다면 구글 폰트(Inconsolata)를 불러옵니다.
-* 뷰페이지용 CSS를 로드합니다.
-* [code] 값은 convertor를 사용한 결과값입니다.(view-convertor 폴더 참조)
--->
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&amp;display=swap">
-<link rel="stylesheet" href="[yourdir]/dragonEditorViewer.css">
-
-<div class="editor-dragon-viewer">[code]</div>
-```
+#### 컴포넌트 명령어
 
-## 데모 페이지
-[Demo page](https://lovefields.github.io/dragonEditor/examples)
+1. 이미지 삽입
 
-## 문서
-
--   [DragonEditor Document](https://lovefields.github.io/dragonEditor-doc/)
-
-
-
-
-//////////////////
-<!--
-Get your module up and running quickly.
-
-Find and replace all on all files (CMD+SHIFT+F):
-- Name: My Module
-- Package name: my-module
-- Description: My new Nuxt module
--->
-
-# My Module
-
-[![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]
-
-My new Nuxt module for doing amazing things.
-
-- [✨ &nbsp;Release Notes](/CHANGELOG.md)
-<!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/my-module?file=playground%2Fapp.vue) -->
-<!-- - [📖 &nbsp;Documentation](https://example.com) -->
-
-## Features
-
-<!-- Highlight some of the features your module provide here -->
-- ⛰ &nbsp;Foo
-- 🚠 &nbsp;Bar
-- 🌲 &nbsp;Baz
+```typescript
+editor.value.addImageBlock({
+    src: string;
+    width: number;
+    height: number;
+    webp: boolean;
+});
+```
 
-## Quick Setup
+### 코멘트
 
-1. Add `my-module` dependency to your project
+```vue
+<tempalte>
+  <DragonEditorComment v-model="commentData" ref="editor" />
+</tempalte>
 
-```bash
-# Using pnpm
-pnpm add -D my-module
+<script setup lang="ts">
+const editor = ref();
+const commentData = ref({
+    type: "comment",
+    classList: [],
+    content: "",
+});
+</script>
+```
 
-# Using yarn
-yarn add --dev my-module
+#### 컴포넌트 명령어
 
-# Using npm
-npm install --save-dev my-module
-```
+1. 스타일 설정
 
-2. Add `my-module` to the `modules` section of `nuxt.config.ts`
+스타일의 경우 컴포넌트에서 다음과 같이 명령어를 사용할 수 있습니다.<br>
+해당되는 스타일이 존재하지 않을 경우 클레스에 값을 부여합니다.
 
-```js
-export default defineNuxtConfig({
-  modules: [
-    'my-module'
-  ]
-})
+```typescript
+editor.value.setStyles("decorationBold");
 ```
 
-That's it! You can now use My Module in your Nuxt app ✨
+2. 스타일 리스트
 
-## Development
+-   `alignLeft` : 왼쪽 정렬
+-   `alignCenter` : 가운데 정렬
+-   `alignRight` : 오른쪽 정렬
+-   `decorationBold` : 볼드
+-   `decorationItalic` : 이텔릭
+-   `decorationUnderline` : 밑줄
+-   `decorationStrikethrough` : 취소선
 
-```bash
-# Install dependencies
-npm install
+### 뷰어
 
-# Generate type stubs
-npm run dev:prepare
+```vue
+<tempalte>
+  <DragonEditorViewer :content="contentData"/>
+</tempalte>
 
-# Develop with the playground
-npm run dev
+<script setup lang="ts">
+const contentData = ref([]); // 에디터로 저장한 데이터
+</script>
+```
 
-# Build the playground
-npm run dev:build
+<!-- ## 데모 페이지
 
-# Run ESLint
-npm run lint
+[Demo page](https://lovefields.github.io/dragonEditor/examples)
 
-# Run Vitest
-npm run test
-npm run test:watch
+## 문서
 
-# Release new version
-npm run release
-```
+-   [DragonEditor Document](https://lovefields.github.io/dragonEditor-doc/) -->
 
 <!-- Badges -->
-[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
-[npm-version-href]: https://npmjs.com/package/my-module
 
+[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-version-href]: https://www.npmjs.com/package/dragon-edito
 [npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=18181B&colorB=28CF8D
-[npm-downloads-href]: https://npmjs.com/package/my-module
-
+[npm-downloads-href]: https://www.npmjs.com/package/dragon-edito
 [license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=18181B&colorB=28CF8D
-[license-href]: https://npmjs.com/package/my-module
-
+[license-href]: https://www.npmjs.com/package/dragon-edito
 [nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
 [nuxt-href]: https://nuxt.com

package/README_en.md

@@ -3,6 +3,10 @@
 [![Github forks](https://img.shields.io/github/forks/lovefields/dragonEditor)](https://github.com/lovefields/dragonEditor/network/members)
 [![Github top language](https://img.shields.io/github/languages/top/lovefields/dragonEditor)](https://github.com/lovefields/dragonEditor/)
 [![Hits](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)](https://hits.seeyoufarm.com)
+[![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](https://github.com/lovefields/dragonEditor/blob/main/README.md) / [EN](https://github.com/lovefields/dragonEditor/blob/main/README_en.md)
 
@@ -10,69 +14,17 @@
 
 I made WYSIWYG DragonEditor because just i needed an WYSIWYG editor to use in my blog.<br>Well DragonEditor has any customized option and support AMP page.
 
-## Support browser
--   Chrome 55+
--   Safari 13+
--   Firefox 63+
--   Edge 79+
--   IOS 11+
--   Android 7+
+# I will make EN version. wait plz :)
 
-We never ever support IE.
+<!-- Badges -->
+[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-version-href]: https://www.npmjs.com/package/dragon-edito
 
-## Plugin
+[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-downloads-href]: https://www.npmjs.com/package/dragon-edito
 
-If you using `codeblock`, import this plugin.
+[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-edito
 
--   `highlight.js` [(Link)](https://highlightjs.org/)
-
-## Using
-
-# editor
-```html
-<!-- 
-* Load Google font(Inconsolata) if you using code block.
-* Load DragonEditor CSS
--->
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&amp;display=swap">
-<link rel="stylesheet" href="[yourdir]/dragonEditor.css">
-
-<!--
-* Set editor-dragon class element.
--->
-<div class="editor-dragon"></div>
-
-<!-- 
-* Load highlight plugin if you using code block.
-* Load dragonEditor js
--->
-<script src="[yourdir]/highlight.pack.js"></script>
-<script src="[yourdir]/dragonEditor.js"></script>
-<script>
-    const editor = new DragonEditor();
-    // OR
-    const editor = new DragonEditor({
-        key: "value",
-    });
-</script>
-```
-
-# viewer
-```html
-<!-- 
-* Load Google font(Inconsolata) if you using code block.
-* Load DragonEditorViewer CSS
-* The [code] value is the result with converter (see view-convertor folder).
--->
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&amp;display=swap">
-<link rel="stylesheet" href="[yourdir]/dragonEditorViewer.css">
-
-<div class="editor-dragon-viewer">[code]</div>
-```
-
-## Demo
-[Demo page](https://lovefields.github.io/dragonEditor/examples)
-
-## Document
-
--   [DragonEditor Document](https://lovefields.github.io/dragonEditor-doc/)
+[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
+[nuxt-href]: https://nuxt.com

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "dragon-editor",
   "configKey": "dragon-editor",
-  "version": "2.0.0-beta.1.4"
+  "version": "2.0.0-beta.2"
 }

package/dist/module.mjs

@@ -6,10 +6,18 @@ const module = defineNuxtModule({
   },
   setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
+    addComponent({
+      name: "DragonEditor",
+      filePath: resolver.resolve("./runtime/shared/components/DragonEditor")
+    });
     addComponent({
       name: "DragonEditorComment",
       filePath: resolver.resolve("./runtime/shared/components/DragonEditorComment")
     });
+    addComponent({
+      name: "DragonEditorViewer",
+      filePath: resolver.resolve("./runtime/shared/components/DragonEditorViewer")
+    });
   }
 });
 

package/dist/runtime/core/components/SvgIcon.vue

@@ -1,5 +1,5 @@
 <template>
-    <svg class="dragon-icon" viewBox="0 0 64 64">
+    <svg class="d-icon" viewBox="0 0 64 64">
         <component :is="iconComponent" />
     </svg>
 </template>
@@ -20,8 +20,13 @@ 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 }>();
+const props = defineProps<{ kind: String }>();
 let iconComponent: any;
 
 switch (props.kind) {
@@ -70,13 +75,31 @@ switch (props.kind) {
     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>
@@ -92,13 +115,9 @@ switch (props.kind) {
 // <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-delete-link">
-// <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>
-//     </g>
+
 //
-//     <g id="icon-btn-accept">
-// <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>
-//     </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>
@@ -119,18 +138,8 @@ switch (props.kind) {
 // <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-arrow-down">
-// <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>
-//     </g>
-//
-//     <g id="icon-arrow-up">
-// <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>
-//     </g>
-//
-//     <g id="icon-delete-block">
-// <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>
-//     </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>

package/dist/runtime/core/components/editor/ImageBlock.vue

@@ -0,0 +1,174 @@
+<template>
+    <div class="d-image-block" :class="data.classList" ref="$block" @mousemove="resizeMouseEvent" @touchmove="resizeTouchEvent" @mouseup="doneResizeStatus" @touchend="doneResizeStatus">
+        <div class="d-image-area">
+            <button class="d-btn-size-left" @mousedown="startResizeEvent" @touchstart="startResizeEvent"></button>
+            <button class="d-btn-size-right" @mousedown="startResizeEvent" @touchstart="startResizeEvent"></button>
+
+            <template v-if="data.webp">
+                <picture>
+                    <source :srcset="data.src.replace(/\.(jpg|png)/g, '.webp')">
+                    <img class="d-img" :src="data.src" :width="data.width" :height="data.height" :alt="data.caption" loading="lazy">
+                </picture>
+            </template>
+
+            <template v-else>
+                <img class="d-img" :src="data.src" :width="data.width" :height="data.height" :alt="data.caption" loading="lazy">
+            </template>
+        </div>
+        <p class="d-caption" v-html="data.caption" @keydown="textKeyboardEvent" ref="$caption" contenteditable></p>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, unref } from "#imports";
+import { keyboardEvent, pasteText, styleSettings } from "../../utils/index";
+import { imageBlock, cursorSelection, styleFunctionArgument } from "../../../../types/index";
+
+const $block = ref();
+const $caption = ref();
+const data = ref<imageBlock>({
+    type: "",
+    id: "",
+    classList: [],
+    src: "",
+    width: 0,
+    height: 0,
+    webp: false,
+    caption: "",
+});
+const props = defineProps<{ modelValue: imageBlock; cursorData: cursorSelection }>();
+const emit = defineEmits<{
+    (e: "update:modelValue", modelValue: imageBlock): void;
+    (e: "addBlock", name: string): void;
+    (e: "deleteBlockLocal", index?: number): void;
+}>();
+
+data.value = unref(props.modelValue) as imageBlock;
+
+/**
+ * 내부 상수
+ */
+let activeResize = false;
+let startX = 0;
+
+/**
+ * 내부 이벤트
+ */
+// 키보드 이벤트 할당
+function textKeyboardEvent(e: KeyboardEvent) {
+    keyboardEvent("image", e, emit, updateBlockData);
+}
+
+// 리사이즈 시작
+const startResizeStatus = (value) => {
+    activeResize = true;
+    startX = value;
+};
+
+function startResizeEvent() {
+    // startResizeStatus(e.clientX);
+    activeResize = true;
+}
+
+function activeResizeTouchEvent(e: TouchEvent) {
+    // startResizeStatus(Math.floor(e.touches[0].clientX));
+    activeResize = true;
+}
+
+// 리사이즈 이벤트
+const resizeEvent = (value) => {
+    if (activeResize) {
+        const blockRect = $block.value.getBoundingClientRect();
+        const bodyRect = document.body.getBoundingClientRect();
+        const blockLeft = blockRect.left - bodyRect.left;
+        const centerPoint: number = blockRect.width / 2 + blockLeft;
+        const blockRight = window.innerWidth - (centerPoint + blockRect.width / 2);
+        let percent: number = 0;
+
+        // console.log(value);
+
+        if (centerPoint > value) {
+            // 왼쪽
+            const leftPercent = (100 / (centerPoint - blockLeft)) * (value - blockLeft);
+
+            percent = Math.floor(100 - leftPercent) + 2;
+        } else {
+            // 오른쪽
+            const right = window.innerWidth - (centerPoint + blockRight);
+            const valueData = value - centerPoint;
+            const rightPercent = (100 / right) * valueData;
+
+            percent = Math.floor(rightPercent);
+        }
+
+        percent = percent - (percent % 5);
+        percent = percent / 5;
+
+        const classList = data.value.classList.filter((item) => /--\d{1,2}/g.test(item) === false);
+        classList.push(`--${percent}`);
+        data.value.classList = classList;
+    }
+};
+
+function resizeMouseEvent(e: MouseEvent) {
+    resizeEvent(e.clientX);
+}
+
+function resizeTouchEvent(e: TouchEvent) {
+    resizeEvent(Math.floor(e.touches[0].clientX));
+}
+
+// 리사이즈 종료
+function doneResizeStatus() {
+    activeResize = false;
+}
+
+/**
+ * 외부용 함수
+ */
+function focus() {
+    $caption.value.focus();
+}
+
+// 블럭 위치 주기
+function getBoundingClientRect() {
+    return $block.value.parentNode.getBoundingClientRect();
+}
+
+// 타입 전달
+function getType() {
+    return data.value.type;
+}
+
+// 붙여넣기 이벤트
+function pasteEvent(text: string) {
+    pasteText("text", text);
+}
+
+// 데이터 정규화 및 검수
+function updateBlockData() {
+    emit("update:modelValue", data.value);
+}
+
+// 텍스트 스타일 지정
+function setStyles({ type, url }: styleFunctionArgument) {
+    data.value = styleSettings({
+        kind: type,
+        blockData: data.value,
+        $target: $block.value,
+        cursorData: props.cursorData,
+    });
+    setTimeout(() => {
+        updateBlockData();
+    }, 250);
+}
+
+defineExpose({
+    updateBlockData,
+    getType,
+    focus,
+    pasteEvent,
+    setStyles,
+    getBoundingClientRect,
+});
+</script>