dragon-editor 3.0.2 → 3.1.0

package/README.md

@@ -68,7 +68,7 @@ Second. Use Component
 </template>
 
 <script setup lang="ts">
-    const $editor = ref<any>();
+    const $editor = ref<DragonEditor>();
 </script>
 ```
 
@@ -84,7 +84,7 @@ Done!
 </template>
 
 <script setup lang="ts">
-    const data = ref([]); // content data
+    const data = ref<DEContentData>([]); // content data
 </script>
 ```
 
@@ -103,7 +103,7 @@ Done!
 </template>
 
 <script setup lang="ts">
-    const $editor = ref<any>();
+    const $editor = ref<DragonEditor>();
 
     function getData() {
         console.log($editor.value.getContentData());
@@ -124,7 +124,7 @@ Done!
 </template>
 
 <script setup lang="ts">
-    const $editor = ref<any>();
+    const $editor = ref<DragonEditor>();
 
     function setData() {
         $editor.value.setContentData([...]);

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "dragon-editor",
   "configKey": "dragon-editor",
-  "version": "3.0.2"
+  "version": "3.1.0"
 }

package/dist/runtime/components/DragonEditor.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="dragon-editor" :class="{ '--hasMenu': props.useMenuBar === true }" ref="$editor">
+    <div class="dragon-editor" :class="{ '--hasMenu': props.useMenuBar === true }" @mousemove="resizeEvent" @touchmove="resizeEvent" @mouseup="resizeEventEnd" @touchend="resizeEventEnd" @mouseleave="resizeEventEnd" ref="$editor">
         <div v-if="props.useMenuBar === true" class="de-control-bar">
             <button class="de-menu de-menu-add" @click="isActiveAddBlockMenu = !isActiveAddBlockMenu">
                 <svg class="de-icon" viewBox="0 0 64 64">
@@ -40,6 +40,36 @@
                 </svg>
             </button>
 
+            <button class="de-menu" @click="setTextAlign('left')">
+                <svg class="de-icon" viewBox="0 0 64 64">
+                    <path class="de-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 9H11Z M11 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 51H11Z M9 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 39Z M11 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>
+                </svg>
+            </button>
+
+            <button class="de-menu" @click="setTextAlign('center')">
+                <svg class="de-icon" viewBox="0 0 64 64">
+                    <path class="de-path" d="M24 11C24 9.89543 24.8954 9 26 9H38C39.1046 9 40 9.89543 40 11C40 12.1046 39.1046 13 38 13H26C24.8954 13 24 12.1046 24 11Z M9 53C9 51.8954 9.89543 51 11 51H53C54.1046 51 55 51.8954 55 53C55 54.1046 54.1046 55 53 55H11C9.89543 55 9 54.1046 9 53Z M17 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 39Z M9 25C9 23.8954 9.89543 23 11 23H53C54.1046 23 55 23.8954 55 25C55 26.1046 54.1046 27 53 27H11C9.89543 27 9 26.1046 9 25Z"></path>
+                </svg>
+            </button>
+
+            <button class="de-menu" @click="setTextAlign('right')">
+                <svg class="de-icon" viewBox="0 0 64 64">
+                    <path class="de-path" d="M39 11C39 9.89543 39.8954 9 41 9H53C54.1046 9 55 9.89543 55 11C55 12.1046 54.1046 13 53 13H41C39.8954 13 39 12.1046 39 11Z M9 53C9 51.8954 9.89543 51 11 51H53C54.1046 51 55 51.8954 55 53C55 54.1046 54.1046 55 53 55H11C9.89543 55 9 54.1046 9 53Z M25 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 39Z M9 25C9 23.8954 9.89543 23 11 23H53C54.1046 23 55 23.8954 55 25C55 26.1046 54.1046 27 53 27H11C9.89543 27 9 26.1046 9 25Z"></path>
+                </svg>
+            </button>
+
+            <button class="de-menu" @click="setTextAlign('justify')">
+                <svg class="de-icon" viewBox="0 0 64 64">
+                    <path class="de-path" d="M9 53C9 51.8954 9.89543 51 11 51H53C54.1046 51 55 51.8954 55 53C55 54.1046 54.1046 55 53 55H11C9.89543 55 9 54.1046 9 53Z M9 39C9 37.8954 9.89543 37 11 37H53C54.1046 37 55 37.8954 55 39C55 40.1046 54.1046 41 53 41H11C9.89543 41 9 40.1046 9 39Z M9 11C9 9.89543 9.89543 9 11 9H53C54.1046 9 55 9.89543 55 11C55 12.1046 54.1046 13 53 13H11C9.89543 13 9 12.1046 9 11Z M9 25C9 23.8954 9.89543 23 11 23H53C54.1046 23 55 23.8954 55 25C55 26.1046 54.1046 27 53 27H11C9.89543 27 9 26.1046 9 25Z"></path>
+                </svg>
+            </button>
+
+            <button class="de-menu" @click="deleteBlock">
+                <svg class="de-icon" viewBox="0 0 64 64">
+                    <path class="de-path --red" 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>
+                </svg>
+            </button>
+
             <div class="de-block-menu-area" :class="{ '--active': isActiveAddBlockMenu }">
                 <div class="de-list">
                     <button class="de-add-block" @click="addBlock('text')">Text</button>
@@ -48,11 +78,13 @@
                     <button class="de-add-block" @click="addBlock('heading3')">Heading-3</button>
                     <button class="de-add-block" @click="addBlock('ul')">Unodered List</button>
                     <button class="de-add-block" @click="addBlock('ol')">Odered List</button>
+                    <!-- <button class="de-add-block" @click="addBlock('codeblock')">Code Block</button> -->
+                    <!-- <button class="de-add-block" @click="addBlock('video')">Video</button> -->
                 </div>
             </div>
         </div>
 
-        <div class="de-body" ref="$content" @keydown="contentKeyboardEvent" @mouseup="updateCursorData">
+        <div class="de-body" ref="$content" @keydown="contentKeyboardEvent" @mouseup="updateCursorData" @mousedown="resizeEventStart" @touchstart="resizeEventStart">
             <p class="de-block de-text-block" contenteditable="true"></p>
         </div>
     </div>
@@ -63,10 +95,11 @@ import { ref, onMounted, onUnmounted } from "vue";
 import { useEditorStore } from "../store";
 import { _findScrollingElement, _findContentEditableElement } from "../utils/element";
 import { _elementKeyEvent, _hotKeyEvent } from "../utils/keyboardEvent";
-import { _createTextBlock, _createHeadingBlock, _createListBlock } from "../utils/block";
-import { _setNodeStyle } from "../utils/style";
+import { _createTextBlock, _createHeadingBlock, _createListBlock, _createImageBlock, _createCustomBlock } from "../utils/block";
+import { _setNodeStyle, _setTextAlign } from "../utils/style";
 import { _setCursorData, _clenupCursor } from "../utils/cursor";
 import { _getContentData, _setContentData } from "../utils/convertor";
+import { _addBlockToContent } from "../utils/content";
 import "../type.d.ts";
 
 const props = defineProps({
@@ -80,6 +113,11 @@ const editorStore = useEditorStore();
 const isActiveAddBlockMenu = ref<boolean>(false);
 const $editor = ref<HTMLDivElement>();
 const $content = ref<HTMLDivElement>();
+let resizeEventActive: boolean = false;
+let resizeStartX: number = 0;
+let resizeType: string = "right";
+let resizeEndX: number = 0;
+let resizeCurruntWidth: number = 0;
 
 /**
  * 이벤트 관련 영역 시작
@@ -99,6 +137,104 @@ function updateCursorData(e: MouseEvent) {
         // 비정상 커서 값일 경우 초기화
         editorStore.cursorData = originalCursorData;
     }
+
+    if (e.target !== null) {
+        const $block = (e.target as HTMLElement).closest(".de-block");
+
+        if ($block !== null) {
+            editorStore.setCurrentBlock($block as HTMLElement);
+        }
+    }
+}
+
+// 사이즈 조정 이벤트 시작
+function resizeEventStart(event: Event) {
+    const $target = event.target as HTMLElement;
+
+    if ($target !== null) {
+        const $block = $target.closest(".de-block");
+
+        if ($block?.classList.contains("de-image-block") === true && $target.classList.contains("de-btn") === true) {
+            editorStore.setCurrentBlock($block as HTMLElement);
+            resizeEventActive = true;
+
+            if (event.type === "touchstart") {
+                resizeStartX = (event as TouchEvent).touches[0].clientX;
+            } else {
+                resizeStartX = (event as MouseEvent).clientX;
+            }
+
+            if ($target.classList.contains("de-btn-left") === true) {
+                resizeType = "left";
+            } else {
+                resizeType = "right";
+            }
+
+            resizeEndX = resizeStartX;
+
+            const $imgArea = (editorStore.$currentBlock as HTMLElement).querySelector(".de-image-area") as HTMLDivElement;
+            resizeCurruntWidth = parseInt($imgArea.dataset["maxwidth"] ?? "25");
+        }
+    }
+}
+
+// 사이즈 조정 이벤트
+function resizeEvent(event: Event) {
+    if (resizeEventActive === true) {
+        const $imgArea = (editorStore.$currentBlock as HTMLElement).querySelector(".de-image-area") as HTMLDivElement;
+        const contentWidth = (editorStore.$content?.offsetWidth ?? 0) / 2;
+        let gap: number = 0;
+
+        if (event.type === "touchmove") {
+            resizeEndX = (event as TouchEvent).touches[0].clientX;
+        } else {
+            resizeEndX = (event as MouseEvent).clientX;
+        }
+
+        if (resizeType === "right") {
+            gap = Math.floor(resizeStartX - resizeEndX);
+        } else {
+            gap = Math.floor(resizeEndX - resizeStartX);
+        }
+
+        const percent = (100 / contentWidth) * gap;
+        let value = Math.floor(resizeCurruntWidth - percent);
+
+        if (value < 25) {
+            value = 25;
+        }
+
+        if (value > 100) {
+            value = 100;
+        }
+
+        $imgArea.dataset["maxwidth"] = String(value);
+    }
+}
+
+// 사이즈 조정 이벤트 종료
+function resizeEventEnd() {
+    if (resizeEventActive === true) {
+        resizeEventActive = false;
+    }
+}
+
+// 메뉴 외부 클릭시 닫기
+function checkOthersideClick(event: MouseEvent) {
+    if (event.target !== null) {
+        const $controlBar = (event.target as HTMLElement).closest(".de-control-bar");
+
+        if ($controlBar === null) {
+            isActiveAddBlockMenu.value = false;
+        }
+    }
+}
+
+// 블럭 삭제
+function deleteBlock() {
+    if (editorStore.$currentBlock !== null) {
+        editorStore.$currentBlock.remove();
+    }
 }
 
 /**
@@ -117,29 +253,49 @@ function addBlock(type: string) {
         case "heading1":
         case "heading2":
         case "heading3":
-            blockStructure = _createHeadingBlock(type);
+            const level: number = parseInt(type.replace("heading", ""));
+
+            blockStructure = _createHeadingBlock({
+                type: "heading",
+                classList: [],
+                id: "",
+                level: level,
+                textContent: "",
+            });
             break;
         case "ul":
+            blockStructure = _createListBlock({
+                type: type,
+                child: [
+                    {
+                        classList: [],
+                        textContent: "",
+                    },
+                ],
+            });
+            break;
         case "ol":
-            blockStructure = _createListBlock(type);
+            blockStructure = _createListBlock({
+                type: type,
+                pattern: "1",
+                child: [
+                    {
+                        classList: [],
+                        textContent: "",
+                    },
+                ],
+            });
+            break;
+        case "table":
+            // TODO : table block
+            break;
+        case "codeblock":
+            // TODO : Code Block
             break;
     }
 
     if (blockStructure !== null) {
-        if (editorStore.cursorData === null) {
-            (editorStore.$content as HTMLDivElement).insertAdjacentElement("beforeend", blockStructure);
-        } else {
-            _clenupCursor(editorStore);
-            let $target = editorStore.cursorData.startNode;
-
-            if ($target.constructor.name === "Text") {
-                $target = $target.parentNode as Node;
-            }
-
-            const $block = ($target as HTMLElement).closest(".de-block") as Element;
-
-            $block.insertAdjacentElement("afterend", blockStructure);
-        }
+        _addBlockToContent(blockStructure, editorStore);
 
         switch (type) {
             case "ul":
@@ -152,10 +308,35 @@ function addBlock(type: string) {
     }
 }
 
-function setDecoration(type: string) {
+function addCustomBlock(HTML: string, classList: string[] = []) {
+    const blockStructure = _createCustomBlock({
+        type: "custom",
+        classList: classList,
+        textContent: HTML,
+    });
+
+    _addBlockToContent(blockStructure, editorStore);
+}
+
+function addImageBlock(data: DEImage) {
+    const blockStructure = _createImageBlock({
+        ...data,
+        type: "image",
+        maxWidth: 100,
+        classList: [],
+    } as DEImageBlock);
+
+    _addBlockToContent(blockStructure, editorStore);
+}
+
+function setDecoration(type: DEDecoration) {
     _setNodeStyle(`de-${type}`, editorStore);
 }
 
+function setTextAlign(type: DETextalign) {
+    _setTextAlign(type, editorStore);
+}
+
 function getContentData(): DEContentData {
     if (editorStore.$content !== null) {
         return _getContentData(editorStore.$content);
@@ -179,17 +360,25 @@ onMounted(() => {
         editorStore.setContentElement($content.value);
     }
 
+    window.addEventListener("click", checkOthersideClick, true);
+
     // TODO : set scroll event
 });
 
 onUnmounted(() => {
+    window.removeEventListener("click", checkOthersideClick, true);
+
     // TODO : remove scroll event
 });
 
 defineExpose({
     addBlock,
+    addImageBlock,
+    setDecoration,
+    setTextAlign,
     getContentData,
     setContentData,
+    addCustomBlock,
 });
 </script>
 
@@ -359,6 +548,9 @@ defineExpose({
 .dragon-editor .de-control-bar .de-menu.--lastchild {
   border-right: 0;
 }
+.dragon-editor .de-control-bar .de-menu .de-path.--red {
+  fill: #dd0000;
+}
 .dragon-editor .de-control-bar .de-block-menu-area {
   display: none;
   position: absolute;
@@ -431,6 +623,291 @@ defineExpose({
 .dragon-editor ol.de-list-block {
   list-style: decimal;
 }
+.dragon-editor .de-image-block {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  row-gap: 8px;
+}
+.dragon-editor .de-image-block.de-align-left {
+  align-items: flex-start;
+}
+.dragon-editor .de-image-block.de-align-left .de-caption {
+  text-align: left;
+}
+.dragon-editor .de-image-block.de-align-right {
+  align-items: flex-end;
+}
+.dragon-editor .de-image-block.de-align-right .de-caption {
+  text-align: right;
+}
+.dragon-editor .de-image-block .de-image-area {
+  position: relative;
+  max-width: 25%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="25"] {
+  max-width: 25%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="26"] {
+  max-width: 26%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="27"] {
+  max-width: 27%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="28"] {
+  max-width: 28%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="29"] {
+  max-width: 29%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="30"] {
+  max-width: 30%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="31"] {
+  max-width: 31%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="32"] {
+  max-width: 32%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="33"] {
+  max-width: 33%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="34"] {
+  max-width: 34%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="35"] {
+  max-width: 35%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="36"] {
+  max-width: 36%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="37"] {
+  max-width: 37%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="38"] {
+  max-width: 38%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="39"] {
+  max-width: 39%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="40"] {
+  max-width: 40%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="41"] {
+  max-width: 41%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="42"] {
+  max-width: 42%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="43"] {
+  max-width: 43%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="44"] {
+  max-width: 44%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="45"] {
+  max-width: 45%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="46"] {
+  max-width: 46%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="47"] {
+  max-width: 47%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="48"] {
+  max-width: 48%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="49"] {
+  max-width: 49%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="50"] {
+  max-width: 50%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="51"] {
+  max-width: 51%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="52"] {
+  max-width: 52%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="53"] {
+  max-width: 53%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="54"] {
+  max-width: 54%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="55"] {
+  max-width: 55%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="56"] {
+  max-width: 56%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="57"] {
+  max-width: 57%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="58"] {
+  max-width: 58%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="59"] {
+  max-width: 59%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="60"] {
+  max-width: 60%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="61"] {
+  max-width: 61%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="62"] {
+  max-width: 62%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="63"] {
+  max-width: 63%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="64"] {
+  max-width: 64%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="65"] {
+  max-width: 65%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="66"] {
+  max-width: 66%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="67"] {
+  max-width: 67%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="68"] {
+  max-width: 68%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="69"] {
+  max-width: 69%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="70"] {
+  max-width: 70%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="71"] {
+  max-width: 71%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="72"] {
+  max-width: 72%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="73"] {
+  max-width: 73%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="74"] {
+  max-width: 74%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="75"] {
+  max-width: 75%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="76"] {
+  max-width: 76%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="77"] {
+  max-width: 77%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="78"] {
+  max-width: 78%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="79"] {
+  max-width: 79%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="80"] {
+  max-width: 80%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="81"] {
+  max-width: 81%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="82"] {
+  max-width: 82%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="83"] {
+  max-width: 83%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="84"] {
+  max-width: 84%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="85"] {
+  max-width: 85%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="86"] {
+  max-width: 86%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="87"] {
+  max-width: 87%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="88"] {
+  max-width: 88%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="89"] {
+  max-width: 89%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="90"] {
+  max-width: 90%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="91"] {
+  max-width: 91%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="92"] {
+  max-width: 92%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="93"] {
+  max-width: 93%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="94"] {
+  max-width: 94%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="95"] {
+  max-width: 95%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="96"] {
+  max-width: 96%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="97"] {
+  max-width: 97%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="98"] {
+  max-width: 98%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="99"] {
+  max-width: 99%;
+}
+.dragon-editor .de-image-block .de-image-area[data-maxwidth="100"] {
+  max-width: 100%;
+}
+.dragon-editor .de-image-block .de-image-area .de-img {
+  width: 100%;
+  height: auto;
+}
+.dragon-editor .de-image-block .de-image-area .de-btn {
+  position: absolute;
+  top: 50%;
+  width: 8px;
+  height: 100px;
+  background: #ccc;
+  border: 1px solid #333;
+  transform: translate(-50%, -50%);
+  cursor: col-resize;
+  user-select: none;
+  z-index: 100;
+}
+.dragon-editor .de-image-block .de-image-area .de-btn.de-btn-left {
+  left: 0;
+}
+.dragon-editor .de-image-block .de-image-area .de-btn.de-btn-right {
+  left: 100%;
+}
+.dragon-editor .de-image-block .de-caption {
+  width: 100%;
+  min-height: 1.6em;
+  color: #909090;
+  text-align: center;
+  outline: 0;
+}
+.dragon-editor .de-image-block .de-caption:empty:hover::before, .dragon-editor .de-image-block .de-caption:empty:focus::before {
+  display: inline;
+  content: "Type a caption";
+  color: #ccc;
+  cursor: text;
+}
 .dragon-editor .de-bold {
   font-weight: 700;
 }
@@ -455,4 +932,16 @@ defineExpose({
   color: #ff0000;
   border-radius: 5px;
 }
+.dragon-editor .de-align-left {
+  text-align: left;
+}
+.dragon-editor .de-align-right {
+  text-align: right;
+}
+.dragon-editor .de-align-center {
+  text-align: center;
+}
+.dragon-editor .de-align-justify {
+  text-align: justify;
+}
 </style>