dragon-editor 3.5.19 → 3.5.21

package/dist/module.json

@@ -4,7 +4,7 @@
     "nuxt": ">=3.0.0"
   },
   "configKey": "dragon-editor",
-  "version": "3.5.19",
+  "version": "3.5.21",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/components/DragonEditor.vue

@@ -1,10 +1,10 @@
 <template>
-    <component :is="editorStructure"></component>
+    <component :is="mainStrucutre"></component>
 </template>
 
 <script setup lang="ts">
 import { ref, h, onMounted, onBeforeUnmount, watch } from "vue";
-import { _getBodyVNodeStructure, _getMenuBarVNodeStructure, _getControlbarVNodeStructure } from "../utils/layout";
+import { _getBodyVNodeStructure, _getMenuBarVNodeStructure, _getControlbarVNodeStructure, _updateBodyStructure } from "../utils/layout";
 import { _eidtorMountEvent, _eidtorUnmountEvent, _editorMousemoveEvent, _editorMouseupEvent, _editorMouseleaveEvent, _editorTouchmoveEvent, _editorTouchendEvent, _checkOthersideClick, _parentWrapScollEvent, _editorContextMenuEvent, _windowResizeEvent } from "../utils/event";
 import { _addBlock } from "../utils/node";
 import { _setDecoration, _setTextAlign } from "../utils/style";
@@ -127,7 +127,6 @@ const editorStore = ref<DragonEditorStore>({
         _parentWrapScollEvent(event, editorStore);
     },
 });
-const editorStructure = ref<VNode>(mainStrucutre());
 
 function mainStrucutre(): VNode {
     const childList: VNode[] = [];
@@ -194,13 +193,13 @@ function setAlign(align: DETextalign): void {
     _setTextAlign(align, editorStore);
 }
 
-watch(
-    () => props.modelValue,
-    (newData) => {
-        editorStore.value.firstData = newData;
-        editorStructure.value = mainStrucutre();
+// 데이터 변경용 함수
+function changeEditorData(data: DEContentData): void {
+    if (editorStore.value.$body !== null) {
+        editorStore.value.$body.innerHTML = "";
+        _updateBodyStructure(data, editorStore);
     }
-);
+}
 
 onMounted(() => {
     _eidtorMountEvent(editorStore);
@@ -214,6 +213,7 @@ defineExpose({
     addBlock,
     setDecoration,
     setAlign,
+    changeEditorData,
 });
 </script>
 

package/dist/runtime/type.d.ts

@@ -112,6 +112,7 @@ interface DragonEditor {
     addBlock: (type: DEBlockData) => void;
     setDecoration: (data: DEDecoration) => void;
     setTextAlign: (type: DETextalign) => void;
+    changeEditorData: (data: DEContentData) => void;
 }
 
 interface DETextBlock {

package/dist/runtime/utils/event/mouse.d.ts

@@ -6,6 +6,6 @@ export declare function _editorMousemoveEvent(event: MouseEvent, store: Ref<Drag
 export declare function _editorMouseupEvent(event: MouseEvent, store: Ref<DragonEditorStore>): void;
 export declare function _editorMouseleaveEvent(event: MouseEvent, store: Ref<DragonEditorStore>): void;
 export declare function _checkOthersideClick(event: MouseEvent, store: Ref<DragonEditorStore>): void;
-export declare function _openAnchorArea(store: Ref<DragonEditorStore>): void;
+export declare function _openAnchorArea(event: MouseEvent, store: Ref<DragonEditorStore>): void;
 export declare function _decideWhetherOpenControlBar(store: Ref<DragonEditorStore>): void;
 export declare function _editorContextMenuEvent(event: MouseEvent, store: Ref<DragonEditorStore>): void;

package/dist/runtime/utils/event/mouse.js

@@ -14,7 +14,7 @@ export function _editorMousemoveEvent(event, store) {
 }
 export function _editorMouseupEvent(event, store) {
   _imageResizeEventEnd(event, store);
-  _updateAnchorTagValue(store);
+  _updateAnchorTagValue(event, store);
 }
 export function _editorMouseleaveEvent(event, store) {
   _imageResizeEventEnd(event, store);
@@ -39,9 +39,9 @@ function __blockAddOthersideEvent(event, store) {
     }
   }
 }
-export function _openAnchorArea(store) {
+export function _openAnchorArea(event, store) {
   store.value.controlStatus.previousCorsorData = store.value.cursorData;
-  _updateAnchorTagValue(store, true);
+  _updateAnchorTagValue(event, store, true);
   _updateHeadingBlockList(store);
   if (store.value.controlStatus.anchorHref !== "" && store.value.controlStatus.anchorHref.charAt(0) === "#") {
     store.value.controlStatus.anchorTabType = "heading";

package/dist/runtime/utils/layout/body.d.ts

@@ -1,3 +0,0 @@
-import type { VNode, Ref } from "vue";
-import type { DragonEditorStore } from "../../type.js";
-export declare function _getBodyVNodeStructure(store: Ref<DragonEditorStore>): VNode;

package/dist/runtime/utils/layout/body.js

@@ -1,6 +1,7 @@
 import { h } from "vue";
 import { _createBlockList } from "./index.js";
-import { _contentKeydownEvent, _contentKeyupEvent, _contentPasteEvent, _contentMouseupEvent, _contentMousedownEvnet, _contentTouchstartEvent } from "../event/index.js";
+import { _contentKeydownEvent, _contentKeyupEvent, _contentPasteEvent, _contentMouseupEvent, _contentMousedownEvnet, _contentTouchstartEvent, _getDefaultBlockData, _updateModelData } from "../event/index.js";
+import { _createTextBlock, _createHeadingBlock, _createListBlock, _createImageBlock, _createCodeBlock, _createCustomBlock } from "../node/index.js";
 export function _getBodyVNodeStructure(store) {
   return h(
     "div",
@@ -20,3 +21,37 @@ export function _getBodyVNodeStructure(store) {
     })
   );
 }
+export function _updateBodyStructure(bodyData, store) {
+  if (store.value.$body !== null) {
+    let htmlSturcutre = "";
+    if (bodyData.length === 0) {
+      htmlSturcutre += _createTextBlock(_getDefaultBlockData("text")).outerHTML;
+    } else {
+      bodyData.forEach((data) => {
+        switch (data.type) {
+          case "text":
+            htmlSturcutre += _createTextBlock(data).outerHTML;
+            break;
+          case "heading":
+            htmlSturcutre += _createHeadingBlock(data).outerHTML;
+            break;
+          case "image":
+            htmlSturcutre += _createImageBlock(data, store.value.imageHostURL).outerHTML;
+            break;
+          case "list":
+            htmlSturcutre += _createListBlock(data).outerHTML;
+            break;
+          case "code":
+            htmlSturcutre += _createCodeBlock(data, store).outerHTML;
+            break;
+          default:
+            htmlSturcutre += _createCustomBlock(data).outerHTML;
+        }
+      });
+    }
+    store.value.$body.innerHTML = htmlSturcutre;
+    setTimeout(() => {
+      _updateModelData(store);
+    }, 250);
+  }
+}

package/dist/runtime/utils/layout/menuBar.js

@@ -35,7 +35,7 @@ export function _getMenuBarVNodeStructure(store) {
         h("input", {
           class: ["de-input", { "--error": store.value.controlStatus.anchorValidation === false }],
           value: store.value.controlStatus.anchorHref,
-          onChange: (event) => {
+          onInput: (event) => {
             store.value.controlStatus.anchorHref = event.currentTarget.value;
           }
         }),
@@ -146,8 +146,8 @@ function __getMenuListStructure(store) {
         "button",
         {
           class: ["de-menu", "js-de-link-btn"],
-          onClick: () => {
-            _openAnchorArea(store);
+          onClick: (event) => {
+            _openAnchorArea(event, store);
           }
         },
         [_getIconNode("add-link")]

package/dist/runtime/utils/style/anchor.d.ts

@@ -2,4 +2,4 @@ import type { Ref } from "vue";
 import type { DragonEditorStore } from "../../type.js";
 export declare function _setAnchorTag(url: string, isOutsideLink: boolean, store: Ref<DragonEditorStore>): void;
 export declare function _unsetAnchorTag(store: Ref<DragonEditorStore>): false | undefined;
-export declare function _updateAnchorTagValue(store: Ref<DragonEditorStore>, previous?: boolean): void;
+export declare function _updateAnchorTagValue(event: MouseEvent, store: Ref<DragonEditorStore>, previous?: boolean): void;

package/dist/runtime/utils/style/anchor.js

@@ -1,6 +1,7 @@
 import { _setRangeCursor, _updateCursorData, _updateModelData, _sortingCursorDataOnElement } from "../event/index.js";
 import { _findContentEditableElement, _findPoverTextNode } from "../node/index.js";
 export function _setAnchorTag(url, isOutsideLink, store) {
+  console.log("url", url);
   if (store.value.controlStatus.previousCorsorData !== null && store.value.controlStatus.$currentBlock !== null) {
     const cursorData = store.value.controlStatus.previousCorsorData;
     const typeIgnoreList = ["image", "code", "custom"];
@@ -215,25 +216,31 @@ export function _unsetAnchorTag(store) {
     }
   }
 }
-export function _updateAnchorTagValue(store, previous = false) {
-  if (store.value.controlStatus.previousCorsorData !== null && store.value.cursorData !== null) {
-    const cursorData = previous === true ? store.value.controlStatus.previousCorsorData : store.value.cursorData;
-    if (cursorData.type === "Caret" || cursorData.type === "Range" && cursorData.startNode === cursorData.endNode) {
-      const $element = _findContentEditableElement(cursorData.startNode);
-      let $targetNode = cursorData.startNode;
-      if ($targetNode.constructor.name === "Text") {
-        if ($targetNode.parentElement !== $element) {
-          $targetNode = $targetNode.parentElement;
+export function _updateAnchorTagValue(event, store, previous = false) {
+  const $target = event.target;
+  if ($target !== null) {
+    const $linkArea = $target.closest(".js-de-link-exit-area");
+    if ($linkArea === null) {
+      if (store.value.controlStatus.previousCorsorData !== null && store.value.cursorData !== null) {
+        const cursorData = previous === true ? store.value.controlStatus.previousCorsorData : store.value.cursorData;
+        if (cursorData.type === "Caret" || cursorData.type === "Range" && cursorData.startNode === cursorData.endNode) {
+          const $element = _findContentEditableElement(cursorData.startNode);
+          let $targetNode = cursorData.startNode;
+          if ($targetNode.constructor.name === "Text") {
+            if ($targetNode.parentElement !== $element) {
+              $targetNode = $targetNode.parentElement;
+            }
+          }
+          if ($targetNode.constructor.name === "HTMLAnchorElement") {
+            const $tag = $targetNode;
+            store.value.controlStatus.anchorHref = $tag.href;
+          } else {
+            store.value.controlStatus.anchorHref = "";
+          }
+        } else {
+          store.value.controlStatus.anchorHref = "";
         }
       }
-      if ($targetNode.constructor.name === "HTMLAnchorElement") {
-        const $tag = $targetNode;
-        store.value.controlStatus.anchorHref = $tag.href;
-      } else {
-        store.value.controlStatus.anchorHref = "";
-      }
-    } else {
-      store.value.controlStatus.anchorHref = "";
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "dragon-editor",
-    "version": "3.5.19",
+    "version": "3.5.21",
     "description": "Javascript WYSIWYG editor in Nuxt3!",
     "repository": {
         "type": "git",