dragon-editor 2.0.0-beta.1.3 → 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.3"
+  "version": "2.0.0-beta.2"
 }

package/dist/module.mjs

@@ -6,9 +6,17 @@ 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/components/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

@@ -0,0 +1,175 @@
+<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>