dragon-editor 3.3.0 → 3.4.1

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "dragon-editor",
   "configKey": "dragon-editor",
-  "version": "3.3.0"
+  "version": "3.4.1"
 }

package/dist/runtime/components/DragonEditor.vue

@@ -38,6 +38,26 @@
                     </svg>
                 </button>
 
+                <button
+                    class="de-menu de-link-add"
+                    @click="
+                        () => {
+                            isActiveLinkArea = !isActiveLinkArea;
+                            openLinkArea();
+                        }
+                    "
+                >
+                    <svg class="de-icon" viewBox="0 0 64 64">
+                        <path class="de-path" d="M45.3334 18.6665H34.6667V23.9998H45.3334C49.7334 23.9998 53.3334 27.5998 53.3334 31.9998C53.3334 36.3998 49.7334 39.9998 45.3334 39.9998H34.6667V45.3332H45.3334C52.6934 45.3332 58.6667 39.3598 58.6667 31.9998C58.6667 24.6398 52.6934 18.6665 45.3334 18.6665ZM29.3334 39.9998H18.6667C14.2667 39.9998 10.6667 36.3998 10.6667 31.9998C10.6667 27.5998 14.2667 23.9998 18.6667 23.9998H29.3334V18.6665H18.6667C11.3067 18.6665 5.33337 24.6398 5.33337 31.9998C5.33337 39.3598 11.3067 45.3332 18.6667 45.3332H29.3334V39.9998ZM21.3334 29.3332H42.6667V34.6665H21.3334V29.3332Z"></path>
+                    </svg>
+                </button>
+
+                <button class="de-menu" @click="removeLink">
+                    <svg class="de-icon" viewBox="0 0 64 64">
+                        <path class="de-path" d="M38.3734 29.5065L42.6667 33.7998V29.5065H38.3734ZM45.3334 18.8398H34.6667V23.9065H45.3334C49.8934 23.9065 53.6 27.6131 53.6 32.1731C53.6 35.5598 51.5467 38.4931 48.6134 39.7465L52.3467 43.4798C56.1334 41.1331 58.6667 36.9465 58.6667 32.1731C58.6667 24.8131 52.6934 18.8398 45.3334 18.8398ZM5.33337 11.5598L13.6267 19.8531C8.77337 21.8265 5.33337 26.5998 5.33337 32.1731C5.33337 39.5331 11.3067 45.5065 18.6667 45.5065H29.3334V40.4398H18.6667C14.1067 40.4398 10.4 36.7331 10.4 32.1731C10.4 27.9331 13.6267 24.4398 17.76 23.9865L23.28 29.5065H21.3334V34.8398H28.6134L34.6667 40.8931V45.5065H39.28L49.9734 56.1998L53.7334 52.4398L9.09337 7.7998L5.33337 11.5598Z"></path>
+                    </svg>
+                </button>
+
                 <label class="de-menu">
                     <input type="file" hidden accept=".jpg,.jpeg,.png,.webp,.gif" @change="chooseMediaEvent" />
                     <svg class="de-icon" viewBox="0 0 64 64">
@@ -101,6 +121,22 @@
                     <!-- <button class="de-add-block" @click="addBlock('video')">Video</button> youtube | vimeo -->
                 </div>
             </div>
+
+            <div class="de-link-exit-area" :class="{ '--active': isActiveLinkArea }">
+                <div class="de-btn-area">
+                    <button class="de-btn" :class="{ '--active': activeLinkTabType === 'url' }" @click="openLinkArea"> Text </button>
+                    <button class="de-btn" :class="{ '--active': activeLinkTabType === 'heading' }" @click="listUpHeading">Heading</button>
+                </div>
+
+                <div v-if="activeLinkTabType === 'url'" class="de-link-text-area">
+                    <input v-model="anchorTagValue" class="de-input" :class="{ '--red': anchorValueError }" type="url" ref="$linkInput" />
+                    <button class="de-btn" @click="setLink">Add</button>
+                </div>
+
+                <div v-if="activeLinkTabType === 'heading'" class="de-link-heading-area">
+                    <button v-for="item in anchorHeadingList" class="de-btn" @click="setHeadingLink(item.id)">{{ item.name }}</button>
+                </div>
+            </div>
         </div>
 
         <div v-if="editorStore.$currentBlock !== null" class="de-control-bar" :class="{ '--active': editorStore.controlBar.active === true }" :style="{ top: `${editorStore.controlBar.y}px`, left: `${editorStore.controlBar.x}px` }" ref="$controlBar">
@@ -150,7 +186,7 @@ import { _getCodeBlockTheme, _getCodeBlockLanguage, _setCodeBlockTheme, _setCode
 import { _findScrollingElement, _findContentEditableElement } from "../utils/element";
 import { _elementKeyEvent, _hotKeyEvent, _copyEvent, _pasteEvent } from "../utils/keyboardEvent";
 import { _getBlockType, _createTextBlock, _createHeadingBlock, _createListBlock, _createImageBlock, _createCustomBlock, _createCodeBlock } from "../utils/block";
-import { _setNodeStyle, _setTextAlign } from "../utils/style";
+import { _setNodeStyle, _setTextAlign, _setAnchorTag, _unsetAnchorTag, _getAnchorTagValue } from "../utils/style";
 import { _setCursor, _setCursorData, _clenupCursor } from "../utils/cursor";
 import { _getContentData, _setContentData } from "../utils/convertor";
 import { _addBlockToContent } from "../utils/content";
@@ -178,10 +214,15 @@ const curruntType = ref<string>("");
 const codeBlockTheme = ref<string>("github");
 const codeblockLanguage = ref<string>("text");
 const listBlockStyle = ref<DEListStyle>("disc");
+const isActiveLinkArea = ref<boolean>(false);
+const anchorValueError = ref<boolean>(false);
+const activeLinkTabType = ref<"url" | "heading">("url");
+const anchorHeadingList = ref<DEHeadingItem[]>([]);
 const anchorTagValue = ref<string>("");
 const $editor = ref<HTMLDivElement>();
 const $content = ref<HTMLDivElement>();
 const $controlBar = ref<HTMLDivElement>();
+const $linkInput = ref<HTMLInputElement>();
 let resizeEventActive: boolean = false;
 let resizeStartX: number = 0;
 let resizeType: string = "right";
@@ -200,7 +241,7 @@ function contentKeyboardEvent(e: KeyboardEvent) {
 function updateCursorData(e: MouseEvent) {
     const originalCursorData = editorStore.cursorData;
 
-    _setCursorData(editorStore);
+    _clenupCursor(editorStore);
 
     if (editorStore.cursorData !== null && _findContentEditableElement(editorStore.cursorData.startNode) === null) {
         // 비정상 커서 값일 경우 초기화
@@ -217,7 +258,9 @@ function updateCursorData(e: MouseEvent) {
     }
 
     controlBarStatusUpdate();
+    anchorTagValueUpdate();
 }
+
 // 컨트롤 바 상태 업데이트
 function controlBarStatusUpdate() {
     if (editorStore.$currentBlock !== null) {
@@ -319,10 +362,34 @@ function resizeEventEnd() {
 function checkOthersideClick(event: MouseEvent) {
     if (event.target !== null) {
         const $controlBar = (event.target as HTMLElement).closest(".de-menu-bar");
+        const $btnMenu = (event.target as HTMLElement).closest(".de-menu-add");
+        const $menuArea = (event.target as HTMLElement).closest(".de-block-menu-area");
+        const $btnLink = (event.target as HTMLElement).closest(".de-link-add");
+        const $linkArea = (event.target as HTMLElement).closest(".de-link-exit-area");
+        let closeMenu: boolean = false;
+        let closeLink: boolean = false;
 
         if ($controlBar === null) {
+            closeMenu = true;
+            closeLink = true;
+        } else {
+            if ($btnMenu === null && $menuArea === null) {
+                closeMenu = true;
+            }
+
+            if ($btnLink === null && $linkArea === null) {
+                closeLink = true;
+            }
+        }
+
+        if (closeMenu === true) {
             isActiveAddBlockMenu.value = false;
         }
+
+        if (closeLink === true) {
+            isActiveLinkArea.value = false;
+            anchorTagValue.value = "";
+        }
     }
 }
 
@@ -346,8 +413,6 @@ function deleteBlock() {
 
 // 부모 요소 스크롤 이벤트 발생시 컨트롤 바 고정
 function parentWrapScollEvent() {
-    editorStore.setParentWrapElement(_findScrollingElement($editor.value as HTMLElement));
-
     if (props.useMenuBar === true && editorStore.$parentWrap !== null && editorStore.$editor !== null) {
         // 메뉴바를 사용하는 경우만
 
@@ -368,11 +433,19 @@ function parentWrapScollEvent() {
             realElementY -= parentRect.y;
         }
 
+        let value: number = 0;
+
         if (scrollY > realElementY) {
-            menuBarTop.value = scrollY - realElementY - 1;
+            value = scrollY - realElementY - 1;
         } else {
-            menuBarTop.value = 0;
+            value = 0;
         }
+
+        if (value > editorReac.height - 39) {
+            value = editorReac.height - 39;
+        }
+
+        menuBarTop.value = Math.floor(value);
     }
 }
 
@@ -381,6 +454,13 @@ function contentPasteEvent(event: ClipboardEvent) {
     _pasteEvent(event, editorStore, emit);
 }
 
+function anchorTagValueUpdate() {
+    // 다른 이벤트 순서에 의한 딜레이
+    setTimeout(() => {
+        anchorTagValue.value = _getAnchorTagValue(editorStore);
+    }, 500);
+}
+
 /**
  * 이벤트 관련 영역 종료
  */
@@ -550,6 +630,11 @@ function moveBlock(type: "up" | "down") {
     }
 }
 
+function openLinkArea() {
+    activeLinkTabType.value = "url";
+    anchorValueError.value = false;
+}
+
 function chooseMediaEvent(event: Event) {
     const $target = event.target as HTMLInputElement;
     const file = $target.files![0];
@@ -558,6 +643,50 @@ function chooseMediaEvent(event: Event) {
     $target.value = "";
 }
 
+// 링크 삽입
+function setLink() {
+    if ($linkInput.value !== null && $linkInput.value?.checkValidity() === true && anchorTagValue.value !== "") {
+        _setAnchorTag(anchorTagValue.value, true, editorStore);
+        isActiveLinkArea.value = false;
+        anchorValueError.value = false;
+        anchorTagValue.value = "";
+    } else {
+        anchorValueError.value = true;
+    }
+}
+
+function setHeadingLink(id: string) {
+    _setAnchorTag(id, false, editorStore);
+    isActiveLinkArea.value = false;
+    anchorValueError.value = false;
+    anchorTagValue.value = "";
+}
+
+// 헤딩 리스트 업데이트
+function listUpHeading() {
+    activeLinkTabType.value = "heading";
+
+    if (editorStore.$content !== null) {
+        const $blockList = editorStore.$content.querySelectorAll(".de-heading-block");
+        let headingList: DEHeadingItem[] = [];
+
+        $blockList.forEach(($headingTag) => {
+            if ($headingTag.textContent !== null) {
+                headingList.push({
+                    name: $headingTag.textContent,
+                    id: $headingTag.id,
+                });
+            }
+        });
+
+        anchorHeadingList.value = headingList;
+    }
+}
+
+function removeLink() {
+    _unsetAnchorTag(editorStore);
+}
+
 /**
  * 메뉴 이벤트 관련 영역 종료
  */
@@ -801,6 +930,65 @@ defineExpose({
 .dragon-editor .de-menu-bar .de-block-menu-area .de-add-block {
   line-height: 1.6;
 }
+.dragon-editor .de-menu-bar .de-link-exit-area {
+  display: none;
+  position: absolute;
+  top: 39px;
+  left: 228px;
+  width: 200px;
+  background: #fff;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
+  z-index: 1000;
+}
+.dragon-editor .de-menu-bar .de-link-exit-area.--active {
+  display: block;
+}
+.dragon-editor .de-menu-bar .de-link-exit-area .de-btn-area {
+  display: flex;
+  border-bottom: 1px solid #ccc;
+}
+.dragon-editor .de-menu-bar .de-link-exit-area .de-btn-area .de-btn {
+  flex: 1;
+  height: 24px;
+}
+.dragon-editor .de-menu-bar .de-link-exit-area .de-btn-area .de-btn.--active {
+  background: #f1f1f1;
+}
+.dragon-editor .de-menu-bar .de-link-exit-area .de-link-text-area {
+  display: flex;
+  column-gap: 10px;
+  padding: 4px;
+}
+.dragon-editor .de-menu-bar .de-link-exit-area .de-link-text-area .de-input {
+  flex: 1;
+  min-width: 0;
+  height: 20px;
+  padding: 0 8px;
+  border: 1px solid #ccc;
+  box-sizing: border-box;
+}
+.dragon-editor .de-menu-bar .de-link-exit-area .de-link-text-area .de-input.--red {
+  border-color: red;
+}
+.dragon-editor .de-menu-bar .de-link-exit-area .de-link-text-area .de-btn {
+  min-width: 50px;
+  height: 20px;
+}
+.dragon-editor .de-menu-bar .de-link-exit-area .de-link-heading-area {
+  display: flex;
+  flex-direction: column;
+  max-height: 150px;
+  padding: 8px;
+  box-sizing: border-box;
+  overflow-y: auto;
+}
+.dragon-editor .de-menu-bar .de-link-exit-area .de-link-heading-area .de-btn {
+  min-height: 20px;
+  text-align: left;
+}
+.dragon-editor .de-menu-bar .de-link-exit-area .de-link-heading-area .de-btn:hover {
+  background: #f1f1f1;
+}
 .dragon-editor .de-control-bar {
   display: none;
   position: fixed;
@@ -1476,4 +1664,8 @@ defineExpose({
 .dragon-editor .de-align-justify {
   text-align: justify;
 }
+.dragon-editor .de-link {
+  color: #2c95fe;
+  text-decoration: none;
+}
 </style>

package/dist/runtime/components/DragonEditorViewer.vue

@@ -181,12 +181,14 @@ const props = defineProps<{
 * 노드 스타일
 */
 .dragon-editor-viewer {
-  display: grid;
+  display: flex;
+  flex-direction: column;
   gap: 4px;
   width: 100%;
   height: 100%;
   padding: 20px;
   line-height: 1.6;
+  box-sizing: border-box;
 }
 .dragon-editor-viewer .de-block {
   width: 100%;
@@ -783,4 +785,8 @@ const props = defineProps<{
 .dragon-editor-viewer .de-align-justify {
   text-align: justify;
 }
+.dragon-editor-viewer .de-link {
+  color: #2c95fe;
+  text-decoration: none;
+}
 </style>

package/dist/runtime/scss/editor.css

@@ -202,6 +202,65 @@
 .dragon-editor .de-menu-bar .de-block-menu-area .de-add-block {
   line-height: 1.6;
 }
+.dragon-editor .de-menu-bar .de-link-exit-area {
+  display: none;
+  position: absolute;
+  top: 39px;
+  left: 228px;
+  width: 200px;
+  background: #fff;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
+  z-index: 1000;
+}
+.dragon-editor .de-menu-bar .de-link-exit-area.--active {
+  display: block;
+}
+.dragon-editor .de-menu-bar .de-link-exit-area .de-btn-area {
+  display: flex;
+  border-bottom: 1px solid #ccc;
+}
+.dragon-editor .de-menu-bar .de-link-exit-area .de-btn-area .de-btn {
+  flex: 1;
+  height: 24px;
+}
+.dragon-editor .de-menu-bar .de-link-exit-area .de-btn-area .de-btn.--active {
+  background: #f1f1f1;
+}
+.dragon-editor .de-menu-bar .de-link-exit-area .de-link-text-area {
+  display: flex;
+  column-gap: 10px;
+  padding: 4px;
+}
+.dragon-editor .de-menu-bar .de-link-exit-area .de-link-text-area .de-input {
+  flex: 1;
+  min-width: 0;
+  height: 20px;
+  padding: 0 8px;
+  border: 1px solid #ccc;
+  box-sizing: border-box;
+}
+.dragon-editor .de-menu-bar .de-link-exit-area .de-link-text-area .de-input.--red {
+  border-color: red;
+}
+.dragon-editor .de-menu-bar .de-link-exit-area .de-link-text-area .de-btn {
+  min-width: 50px;
+  height: 20px;
+}
+.dragon-editor .de-menu-bar .de-link-exit-area .de-link-heading-area {
+  display: flex;
+  flex-direction: column;
+  max-height: 150px;
+  padding: 8px;
+  box-sizing: border-box;
+  overflow-y: auto;
+}
+.dragon-editor .de-menu-bar .de-link-exit-area .de-link-heading-area .de-btn {
+  min-height: 20px;
+  text-align: left;
+}
+.dragon-editor .de-menu-bar .de-link-exit-area .de-link-heading-area .de-btn:hover {
+  background: #f1f1f1;
+}
 .dragon-editor .de-control-bar {
   display: none;
   position: fixed;
@@ -876,4 +935,8 @@
 }
 .dragon-editor .de-align-justify {
   text-align: justify;
+}
+.dragon-editor .de-link {
+  color: #2c95fe;
+  text-decoration: none;
 }

package/dist/runtime/scss/viewer.css

@@ -133,12 +133,14 @@
 * 노드 스타일
 */
 .dragon-editor-viewer {
-  display: grid;
+  display: flex;
+  flex-direction: column;
   gap: 4px;
   width: 100%;
   height: 100%;
   padding: 20px;
   line-height: 1.6;
+  box-sizing: border-box;
 }
 .dragon-editor-viewer .de-block {
   width: 100%;
@@ -734,4 +736,8 @@
 }
 .dragon-editor-viewer .de-align-justify {
   text-align: justify;
+}
+.dragon-editor-viewer .de-link {
+  color: #2c95fe;
+  text-decoration: none;
 }

package/dist/runtime/type.d.ts

@@ -43,6 +43,11 @@ interface DECodeItem {
     code: string;
 }
 
+interface DEHeadingItem {
+    name: string;
+    id: string;
+}
+
 type DEDecoration = "bold" | "italic" | "underline" | "strikethrough" | "code";
 
 type DETextalign = "left" | "right" | "center" | "justify";

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

@@ -1,2 +1,5 @@
 export declare function _setNodeStyle(className: string, store: any): void;
 export declare function _setTextAlign(type: DETextalign, store: any): void;
+export declare function _setAnchorTag(url: string, isOutsideLink: boolean, store: any): void;
+export declare function _unsetAnchorTag(store: any): false | undefined;
+export declare function _getAnchorTagValue(store: any): string;

package/dist/runtime/utils/style.mjs

@@ -14,20 +14,21 @@ export function _setNodeStyle(className, store) {
             if ($target.constructor.name === "Text") {
               const $parentElement = $target.parentElement;
               if ($parentElement === $element) {
-                const childList = $element.childNodes;
+                let childList = $element.childNodes;
                 let targetIdx = -1;
                 let structure = "";
-                let cursorOffset = 0;
                 for (let i = 0; childList.length > i; i += 1) {
                   if ($target === childList[i]) {
                     targetIdx = i;
                     break;
                   }
                 }
+                targetIdx = findPoverTextNode(childList[targetIdx], targetIdx);
+                $element.innerHTML = $element.innerHTML;
+                childList = $element.childNodes;
                 childList.forEach((node, i) => {
                   if (i === targetIdx) {
                     structure += `<span class="${className}">${node.textContent}</span>`;
-                    cursorOffset = node.textContent.length;
                   } else {
                     if (node.constructor.name === "Text") {
                       structure += node.textContent;
@@ -37,22 +38,26 @@ export function _setNodeStyle(className, store) {
                   }
                 });
                 $element.innerHTML = structure;
-                _setCursor($element.childNodes[targetIdx], cursorOffset);
+                const targetElement = $element.childNodes[targetIdx];
+                _setRangeCursor(targetElement, targetElement, 0, targetElement.textContent?.length ?? 0);
               } else {
                 if ($parentElement.tagName === "SPAN") {
                   const classList = $parentElement.classList.value.split(" ");
                   const classIdx = classList.indexOf(className);
                   if (classIdx === -1) {
                     $parentElement.classList.add(className);
-                    _setCursor($parentElement.childNodes[0], store.cursorData.startOffset);
+                    const targetNode = $parentElement.childNodes[0];
+                    _setRangeCursor(targetNode, targetNode, 0, targetNode.textContent?.length ?? 0);
                   } else {
                     if (classList.length === 1) {
                       $parentElement.insertAdjacentText("afterend", $parentElement.textContent);
-                      _setCursor($parentElement.nextSibling, store.cursorData.startOffset);
+                      const targetNode = $parentElement.nextSibling;
                       $parentElement.remove();
+                      _setRangeCursor(targetNode, targetNode, 0, targetNode.textContent?.length ?? 0);
                     } else {
                       $parentElement.classList.remove(className);
-                      _setCursor($parentElement.childNodes[0], store.cursorData.startOffset);
+                      const targetNode = $parentElement.childNodes[0];
+                      _setRangeCursor(targetNode, targetNode, 0, targetNode.textContent?.length ?? 0);
                     }
                   }
                 }
@@ -88,7 +93,8 @@ export function _setNodeStyle(className, store) {
                 childNumber += 1;
               }
               $element.innerHTML = structure;
-              _setCursor($element.childNodes[childNumber], cursorData.endOffset - cursorData.startOffset);
+              const targetNode = $element.childNodes[childNumber];
+              _setRangeCursor(targetNode, targetNode, 0, targetNode.textContent?.length ?? 0);
             } else {
               const $target = cursorData.startNode;
               if ($target.tagName !== "A") {
@@ -125,7 +131,8 @@ export function _setNodeStyle(className, store) {
                   $nextElement = $nextElement.nextSibling;
                 }
                 $target.remove();
-                _setCursor($nextElement, cursorData.endOffset - cursorData.startOffset);
+                const targetNode = $nextElement;
+                _setRangeCursor(targetNode, targetNode, 0, targetNode.textContent?.length ?? 0);
               }
             }
           } else {
@@ -363,3 +370,248 @@ export function _setTextAlign(type, store) {
     }
   }
 }
+export function _setAnchorTag(url, isOutsideLink, store) {
+  if (store.cursorData !== null) {
+    const { type } = _getBlockType(store.$currentBlock);
+    const typeIgnoreList = ["image", "code", "other"];
+    const hrefValue = isOutsideLink === true ? url : `#${url}`;
+    if (typeIgnoreList.includes(type) === false) {
+      const $element = _findContentEditableElement(store.cursorData.startNode);
+      if ($element !== null) {
+        if (store.cursorData.type === "Caret") {
+          if ($element.hasChildNodes() === true) {
+            let $target = store.cursorData.startNode;
+            if ($target.constructor.name === "Text") {
+              const $parentElement = $target.parentElement;
+              if ($parentElement === $element) {
+                let childList = $element.childNodes;
+                let targetIdx = -1;
+                let structure = "";
+                for (let i = 0; childList.length > i; i += 1) {
+                  if ($target === childList[i]) {
+                    targetIdx = i;
+                    break;
+                  }
+                }
+                targetIdx = findPoverTextNode(childList[targetIdx], targetIdx);
+                $element.innerHTML = $element.innerHTML;
+                childList = $element.childNodes;
+                childList.forEach((node, i) => {
+                  if (i === targetIdx) {
+                    structure += `<a class="de-link"`;
+                    structure += `href="${hrefValue}"`;
+                    if (isOutsideLink === true) {
+                      structure += `target="_blank"`;
+                    }
+                    structure += `>`;
+                    structure += `${node.textContent}</a>`;
+                  } else {
+                    if (node.constructor.name === "Text") {
+                      structure += node.textContent;
+                    } else {
+                      structure += node.outerHTML;
+                    }
+                  }
+                });
+                $element.innerHTML = structure;
+                const targetElement = $element.childNodes[targetIdx];
+                _setRangeCursor(targetElement, targetElement, 0, targetElement.textContent?.length ?? 0);
+              } else {
+                if ($parentElement.tagName === "A") {
+                  $parentElement.href = hrefValue;
+                  if (isOutsideLink === true) {
+                    $parentElement.target = "_blank";
+                  } else {
+                    $parentElement.removeAttribute("target");
+                  }
+                  _setRangeCursor($parentElement, $parentElement, 0, $parentElement.textContent?.length ?? 0);
+                }
+              }
+            }
+          }
+        } else {
+          const cursorData = _soltingCursorDataOnElement(store.cursorData, $element);
+          let structure = "";
+          let isDuble = false;
+          if (cursorData.startNodeIdx === cursorData.endNodeIdx) {
+            if (cursorData.startNode.constructor.name === "Text") {
+              $element.childNodes.forEach((childNode, i) => {
+                if (cursorData.startNodeIdx === i) {
+                  if (cursorData.startOffset !== 0) {
+                    structure += childNode.textContent.slice(0, cursorData.startOffset);
+                    isDuble = true;
+                  }
+                  structure += `<a class="de-link"`;
+                  structure += `href="${hrefValue}"`;
+                  if (isOutsideLink === true) {
+                    structure += `target="_blank"`;
+                  }
+                  structure += `>`;
+                  structure += `${childNode.textContent.slice(cursorData.startOffset, cursorData.endOffset)}</a>`;
+                  if (cursorData.endOffset !== childNode.textContent.length) {
+                    structure += childNode.textContent.slice(cursorData.endOffset);
+                  }
+                } else {
+                  if (childNode.constructor.name === "Text") {
+                    structure += childNode.textContent;
+                  } else {
+                    structure += childNode.outerHTML;
+                  }
+                }
+              });
+              let childNumber = cursorData.startNodeIdx;
+              if (isDuble === true) {
+                childNumber += 1;
+              }
+              $element.innerHTML = structure;
+              const targetNode = $element.childNodes[childNumber];
+              _setRangeCursor(targetNode, targetNode, 0, targetNode.textContent?.length ?? 0);
+            } else {
+              const $target = cursorData.startNode;
+              if ($target.tagName !== "A") {
+                const classList = $target.classList.value.split(" ");
+                if (cursorData.startOffset !== 0) {
+                  structure += `<span class="${classList.join(" ")}">${$target.textContent.slice(0, cursorData.startOffset)}</span>`;
+                  isDuble = true;
+                }
+                structure += `<a class="de-link"`;
+                structure += `href="${hrefValue}"`;
+                if (isOutsideLink === true) {
+                  structure += `target="_blank"`;
+                }
+                structure += `>`;
+                structure += `${$target.textContent.slice(cursorData.startOffset, cursorData.endOffset)}</a>`;
+                if (cursorData.endOffset !== $target.textContent.length) {
+                  structure += `<span class="${classList.join(" ")}">${$target.textContent.slice(cursorData.endOffset)}</span>`;
+                }
+                $target.insertAdjacentHTML("afterend", structure);
+                let $nextElement = $target.nextSibling;
+                if (isDuble === true) {
+                  $nextElement = $nextElement.nextSibling;
+                }
+                $target.remove();
+                const targetNode = $nextElement;
+                _setRangeCursor(targetNode, targetNode, 0, targetNode.textContent?.length ?? 0);
+              } else {
+                $target.href = hrefValue;
+                if (isOutsideLink === true) {
+                  $target.target = "_blank";
+                } else {
+                  $target.removeAttribute("target");
+                }
+                _setRangeCursor($target, $target, 0, $target.textContent?.length ?? 0);
+              }
+            }
+          } else {
+            let preStructure = "";
+            let anchorTextContent = "";
+            let nextStructure = "";
+            $element.childNodes.forEach((childNode, i) => {
+              const $elementNode = childNode;
+              let isText = childNode.constructor.name === "Text";
+              if (cursorData.startNodeIdx > i) {
+                if (isText === true) {
+                  preStructure += childNode.textContent;
+                } else {
+                  preStructure += $elementNode.outerHTML;
+                }
+              }
+              if (cursorData.startNodeIdx === i) {
+                if (isText === true) {
+                  preStructure += childNode.textContent.slice(0, cursorData.startOffset);
+                } else {
+                  preStructure += `<span class="${childNode.classList.value}">${childNode.textContent.slice(0, cursorData.startOffset)}</span>`;
+                }
+                anchorTextContent += childNode.textContent.slice(cursorData.startOffset);
+              }
+              if (cursorData.startNodeIdx < i && cursorData.endNodeIdx > i) {
+                anchorTextContent += childNode.textContent;
+              }
+              if (cursorData.endNodeIdx === i) {
+                anchorTextContent += childNode.textContent.slice(0, cursorData.endOffset);
+                if (isText === true) {
+                  nextStructure += childNode.textContent.slice(cursorData.startOffset);
+                } else {
+                  nextStructure += `<span class="${childNode.classList.value}">${childNode.textContent.slice(cursorData.startOffset)}</span>`;
+                }
+              }
+              if (cursorData.endNodeIdx < i) {
+                if (isText === true) {
+                  nextStructure += childNode.textContent;
+                } else {
+                  nextStructure += $elementNode.outerHTML;
+                }
+              }
+            });
+            let anchorTag = "";
+            anchorTag += `<a class="de-link"`;
+            anchorTag += `href="${hrefValue}"`;
+            if (isOutsideLink === true) {
+              anchorTag += `target="_blank"`;
+            }
+            anchorTag += `>`;
+            anchorTag += anchorTextContent;
+            anchorTag += `</a>`;
+            $element.innerHTML = preStructure + anchorTag + nextStructure;
+            let targetNode = $element.childNodes[cursorData.startNodeIdx];
+            if (cursorData.startOffset !== 0) {
+              targetNode = $element.childNodes[cursorData.startNodeIdx + 1];
+            }
+            _setRangeCursor(targetNode, targetNode, 0, targetNode.textContent?.length ?? 0);
+          }
+        }
+      }
+      _clenupCursor(store);
+    }
+  }
+}
+export function _unsetAnchorTag(store) {
+  if (store.cursorData !== null) {
+    const $element = _findContentEditableElement(store.cursorData.startNode);
+    if ($element !== null) {
+      const cursorData = _soltingCursorDataOnElement(store.cursorData, $element);
+      if (cursorData.startNode.constructor.name === "HTMLAnchorElement") {
+        if (store.cursorData.type === "Range") {
+          if (cursorData.startNodeIdx !== cursorData.endNodeIdx) {
+            return false;
+          }
+        }
+        const $anchorTag = cursorData.startNode;
+        $anchorTag.insertAdjacentText("afterend", cursorData.startNode.textContent ?? "");
+        const $targetNode = $anchorTag.nextSibling;
+        $anchorTag.remove();
+        _setRangeCursor($targetNode, $targetNode, 0, $targetNode.textContent?.length ?? 0);
+      }
+    }
+  }
+}
+export function _getAnchorTagValue(store) {
+  let href = "";
+  if (store.cursorData !== null) {
+    const $element = _findContentEditableElement(store.cursorData.startNode);
+    if ($element !== null) {
+      const cursorData = _soltingCursorDataOnElement(store.cursorData, $element);
+      if (cursorData.startNode.constructor.name === "HTMLAnchorElement") {
+        if (store.cursorData.type === "Range") {
+          if (cursorData.startNodeIdx !== cursorData.endNodeIdx) {
+            return href;
+          }
+        }
+        const $anchorTag = cursorData.startNode;
+        href = $anchorTag.href;
+      }
+    }
+  }
+  return href;
+}
+function findPoverTextNode(node, idx) {
+  if (node.previousSibling !== null) {
+    if (node.previousSibling.constructor.name === "Text") {
+      return findPoverTextNode(node.previousSibling, idx -= 1);
+    } else {
+      return idx;
+    }
+  } else {
+    return idx;
+  }
+}

package/package.json

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