dragon-editor 3.8.1 → 3.8.3

package/README.md

@@ -13,6 +13,8 @@
 [license-src]: https://img.shields.io/npm/l/dragon-editor
 [nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
 [nuxt-href]: https://nuxt.com
+[sponsors-src]: https://img.shields.io/github/sponsors/lovefields
+[sponsors-href]: https://github.com/sponsors/lovefields
 
 [![stars-src]][stars-href]
 [![forks-src]][forks-href]
@@ -21,6 +23,7 @@
 [![npm-version-src]][npm-version-href]
 [![npm-downloads-src]][npm-downloads-href]
 ![NPM][license-src]
+[![sponsors-src]][sponsors-href]
 [![Nuxt][nuxt-src]][nuxt-href]
 
 # DragonEditor
@@ -84,3 +87,13 @@ Done!
 ```
 
 More information is [here](https://lovefields.github.io/dragonEditor-doc/)
+
+# Sponsors
+
+Support this project by becoming a sponsor. [GitHub Sponsors](https://github.com/sponsors/lovefields)
+
+<div align="center">
+    <a href="https://github.com/kyu91">
+        <img src="https://github.com/kyu91.png" width="50" title="kyu91" />
+    </a>
+</div>

package/dist/module.json

@@ -4,7 +4,7 @@
     "nuxt": ">=3.0.0"
   },
   "configKey": "dragon-editor",
-  "version": "3.8.1",
+  "version": "3.8.3",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defineNuxtModule, createResolver, addComponent, addTypeTemplate } from '@nuxt/kit';
 
-const module = defineNuxtModule({
+const module$1 = defineNuxtModule({
   meta: {
     name: "dragon-editor",
     compatibility: {
@@ -40,4 +40,4 @@ async function readFile(path) {
   }
 }
 
-export { module as default };
+export { module$1 as default };

package/dist/runtime/components/DragonEditor.d.vue.ts

@@ -10,13 +10,14 @@ declare function setDecoration(style: DEDecoration): void;
 declare function setAlign(align: DETextalign): void;
 declare function changeEditorData(data: DEContentData): void;
 declare function updateLayout(): void;
+declare function checkDataEmpty(data?: DEContentData): boolean;
 declare const __VLS_export: import("vue").DefineComponent<DEOption, {
     addBlock: typeof addBlock;
     setDecoration: typeof setDecoration;
     setAlign: typeof setAlign;
     changeEditorData: typeof changeEditorData;
     updateLayout: typeof updateLayout;
-    checkDataEmpty: () => boolean;
+    checkDataEmpty: typeof checkDataEmpty;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (data: DEContentData) => any;
     uploadImageEvent: (file: File) => any;

package/dist/runtime/components/DragonEditor.vue

@@ -45,6 +45,7 @@ const editorStore = ref({
   },
   controlStatus: {
     isMobile: false,
+    hasTransformParent: false,
     currentBlockType: "text",
     codeBlockTheme: "github-light",
     codeBlockLang: "text",
@@ -55,7 +56,8 @@ const editorStore = ref({
     anchorValidation: false,
     previousCorsorData: null,
     $anchorInput: null,
-    $currentBlock: null
+    $currentBlock: null,
+    $transformElement: null
   },
   codeBlockTheme: [
     {
@@ -181,6 +183,15 @@ function updateLayout() {
     _eidtorMountEvent(editorStore);
   }, 500);
 }
+function checkDataEmpty(data) {
+  let suitable = false;
+  if (data !== void 0) {
+    suitable = _checkDataEmpty(data);
+  } else {
+    suitable = _checkDataEmpty(props.modelValue);
+  }
+  return suitable;
+}
 onMounted(() => {
   _eidtorMountEvent(editorStore);
 });
@@ -193,7 +204,7 @@ defineExpose({
   setAlign,
   changeEditorData,
   updateLayout,
-  checkDataEmpty: () => _checkDataEmpty(props.modelValue)
+  checkDataEmpty
 });
 </script>
 
@@ -539,6 +550,9 @@ defineExpose({
   height: 100%;
   border: 0;
 }
+.dragon-editor .de-controlbar .de-col .de-name {
+  width: 70px;
+}
 .dragon-editor .de-block {
   width: 100%;
   padding: 2px 0;

package/dist/runtime/components/DragonEditor.vue.d.ts

@@ -10,13 +10,14 @@ declare function setDecoration(style: DEDecoration): void;
 declare function setAlign(align: DETextalign): void;
 declare function changeEditorData(data: DEContentData): void;
 declare function updateLayout(): void;
+declare function checkDataEmpty(data?: DEContentData): boolean;
 declare const __VLS_export: import("vue").DefineComponent<DEOption, {
     addBlock: typeof addBlock;
     setDecoration: typeof setDecoration;
     setAlign: typeof setAlign;
     changeEditorData: typeof changeEditorData;
     updateLayout: typeof updateLayout;
-    checkDataEmpty: () => boolean;
+    checkDataEmpty: typeof checkDataEmpty;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (data: DEContentData) => any;
     uploadImageEvent: (file: File) => any;

package/dist/runtime/scss/editor.css

@@ -339,6 +339,9 @@
   height: 100%;
   border: 0;
 }
+.dragon-editor .de-controlbar .de-col .de-name {
+  width: 70px;
+}
 .dragon-editor .de-block {
   width: 100%;
   padding: 2px 0;

package/dist/runtime/type.d.mts

@@ -51,6 +51,7 @@ interface DragonEditorStore {
     };
     controlStatus: {
         isMobile: boolean;
+        hasTransformParent: boolean;
         anchorValidation: boolean;
         currentBlockType: DEBlock;
         codeBlockTheme: DECodeblockTheme;
@@ -62,6 +63,7 @@ interface DragonEditorStore {
         previousCorsorData: DEditorCursor | null;
         $anchorInput: HTMLInputElement | null;
         $currentBlock: HTMLDivElement | null;
+        $transformElement: HTMLElement | null;
     };
     codeToHtml: codeToHtml;
     codeBlockTheme: DECodeItem<DECodeblockTheme>[];
@@ -115,7 +117,7 @@ interface DragonEditor {
     setTextAlign: (type: DETextalign) => void;
     changeEditorData: (data: DEContentData) => void;
     updateLayout: () => void;
-    checkDataEmpty: () => boolean;
+    checkDataEmpty: (data?: DEContentData) => boolean;
 }
 
 interface DETextBlock {

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

@@ -72,180 +72,201 @@ function __pasteToMarkDownFormat(value, store) {
     const codeBlockReg = new RegExp("^```");
     let tempData = null;
     let isCodeBlock = false;
-    lineList.forEach((text, lineIndex) => {
-      switch (true) {
-        case new RegExp("^(---|___|\\*\\*\\*)").test(text):
-          blockList.push({
-            type: "divider"
-          });
-          break;
-        case (codeBlockReg.test(text) || isCodeBlock === true):
-          if (isCodeBlock === false) {
-            const startLineText = text.split("```");
-            let codeBlockLang = "text";
-            if (["text", "csharp", "c", "cpp", "css", "django", "dockerfile", "go", "html", "json", "java", "javascript", "typescript", "kotlin", "lua", "markdown", "nginx", "php", "python", "ruby", "scss", "sql", "shellscript", "swift", "yaml"].includes(startLineText[1]) === true) {
-              codeBlockLang = startLineText[1];
-            }
-            isCodeBlock = true;
-            tempData = {
-              type: "code",
-              filename: "",
-              theme: "github-light",
-              language: codeBlockLang,
-              textContent: ""
-            };
-          } else {
-            if (tempData !== null) {
-              if (codeBlockReg.test(text) !== true) {
-                if (tempData.type === "code") {
-                  tempData.textContent += `${text}
+    if (lineList.length === 1) {
+      const selection = window.getSelection();
+      const textNode = document.createTextNode(lineList[0]);
+      selection.deleteFromDocument();
+      selection.getRangeAt(0).insertNode(textNode);
+      _setCursor(textNode, textNode.length);
+    } else {
+      let isDelete = false;
+      let $target = null;
+      lineList.forEach((text, lineIndex) => {
+        switch (true) {
+          case new RegExp("^(---|___|\\*\\*\\*)").test(text):
+            blockList.push({
+              type: "divider"
+            });
+            break;
+          case (codeBlockReg.test(text) || isCodeBlock === true):
+            if (isCodeBlock === false) {
+              const startLineText = text.split("```");
+              let codeBlockLang = "text";
+              if (["text", "csharp", "c", "cpp", "css", "django", "dockerfile", "go", "html", "json", "java", "javascript", "typescript", "kotlin", "lua", "markdown", "nginx", "php", "python", "ruby", "scss", "sql", "shellscript", "swift", "yaml"].includes(startLineText[1]) === true) {
+                codeBlockLang = startLineText[1];
+              }
+              isCodeBlock = true;
+              tempData = {
+                type: "code",
+                filename: "",
+                theme: "github-light",
+                language: codeBlockLang,
+                textContent: ""
+              };
+            } else {
+              if (tempData !== null) {
+                if (codeBlockReg.test(text) !== true) {
+                  if (tempData.type === "code") {
+                    tempData.textContent += `${text}
 `;
+                  }
+                } else {
+                  blockList.push(tempData);
+                  isCodeBlock = false;
+                  tempData = null;
                 }
-              } else {
-                blockList.push(tempData);
-                isCodeBlock = false;
-                tempData = null;
               }
             }
-          }
-          break;
-        case orderListReg.test(text):
-          const olSplitText = text.split(new RegExp("\\d+.(?= )"));
-          const olDepth = Math.floor(olSplitText[0].length / 4);
-          if (tempData === null) {
-            tempData = {
-              type: "list",
-              style: ["decimal", "lower-alpha", "upper-alpha", "lower-roman", "upper-roman"][olDepth],
-              depth: olDepth,
-              element: "ol",
-              child: []
-            };
-            tempData.child.push({
-              classList: [],
-              textContent: ___replaceTextData(olSplitText[1].trim())
-            });
-          } else {
-            if (tempData.type === "list") {
-              const nextLine = lineList[lineIndex + 1];
+            break;
+          case orderListReg.test(text):
+            const olSplitText = text.split(new RegExp("\\d+.(?= )"));
+            const olDepth = Math.floor(olSplitText[0].length / 4);
+            if (tempData === null) {
+              tempData = {
+                type: "list",
+                style: ["decimal", "lower-alpha", "upper-alpha", "lower-roman", "upper-roman"][olDepth],
+                depth: olDepth,
+                element: "ol",
+                child: []
+              };
               tempData.child.push({
                 classList: [],
                 textContent: ___replaceTextData(olSplitText[1].trim())
               });
-              if (nextLine !== void 0) {
-                const nextOlSplitText = nextLine.split(new RegExp("\\d+.(?= )"));
-                const nextOlDepth = Math.floor(nextOlSplitText[0].length / 4);
-                if (orderListReg.test(nextLine) === false) {
-                  blockList.push(tempData);
-                  tempData = null;
-                } else {
-                  if (tempData.depth !== nextOlDepth) {
+            } else {
+              if (tempData.type === "list") {
+                const nextLine = lineList[lineIndex + 1];
+                tempData.child.push({
+                  classList: [],
+                  textContent: ___replaceTextData(olSplitText[1].trim())
+                });
+                if (nextLine !== void 0) {
+                  const nextOlSplitText = nextLine.split(new RegExp("\\d+.(?= )"));
+                  const nextOlDepth = Math.floor(nextOlSplitText[0].length / 4);
+                  if (orderListReg.test(nextLine) === false) {
                     blockList.push(tempData);
                     tempData = null;
+                  } else {
+                    if (tempData.depth !== nextOlDepth) {
+                      blockList.push(tempData);
+                      tempData = null;
+                    }
                   }
+                } else {
+                  blockList.push(tempData);
+                  tempData = null;
                 }
-              } else {
-                blockList.push(tempData);
-                tempData = null;
               }
             }
-          }
-          break;
-        case unorderListReg.test(text):
-          const ulSplitText = text.split(new RegExp("\\+|\\*|-"));
-          const ulDepth = Math.floor(ulSplitText[0].length / 4);
-          if (tempData === null) {
-            tempData = {
-              type: "list",
-              style: ulDepth % 2 === 0 ? "disc" : "square",
-              depth: ulDepth,
-              element: "ul",
-              child: []
-            };
-            tempData.child.push({
-              classList: [],
-              textContent: ___replaceTextData(ulSplitText[1].trim())
-            });
-          } else {
-            if (tempData.type === "list") {
-              const nextLine = lineList[lineIndex + 1];
+            break;
+          case unorderListReg.test(text):
+            const ulSplitText = text.split(new RegExp("\\+|\\*|-"));
+            const ulDepth = Math.floor(ulSplitText[0].length / 4);
+            if (tempData === null) {
+              tempData = {
+                type: "list",
+                style: ulDepth % 2 === 0 ? "disc" : "square",
+                depth: ulDepth,
+                element: "ul",
+                child: []
+              };
               tempData.child.push({
                 classList: [],
                 textContent: ___replaceTextData(ulSplitText[1].trim())
               });
-              if (nextLine !== void 0) {
-                const nextUlSplitText = nextLine.split(new RegExp("\\+|\\*|-"));
-                const nextUlDepth = Math.floor(nextUlSplitText[0].length / 4);
-                if (unorderListReg.test(nextLine) === false) {
-                  blockList.push(tempData);
-                  tempData = null;
-                } else {
-                  if (tempData.depth !== nextUlDepth) {
+            } else {
+              if (tempData.type === "list") {
+                const nextLine = lineList[lineIndex + 1];
+                tempData.child.push({
+                  classList: [],
+                  textContent: ___replaceTextData(ulSplitText[1].trim())
+                });
+                if (nextLine !== void 0) {
+                  const nextUlSplitText = nextLine.split(new RegExp("\\+|\\*|-"));
+                  const nextUlDepth = Math.floor(nextUlSplitText[0].length / 4);
+                  if (unorderListReg.test(nextLine) === false) {
                     blockList.push(tempData);
                     tempData = null;
+                  } else {
+                    if (tempData.depth !== nextUlDepth) {
+                      blockList.push(tempData);
+                      tempData = null;
+                    }
                   }
+                } else {
+                  blockList.push(tempData);
+                  tempData = null;
                 }
-              } else {
-                blockList.push(tempData);
-                tempData = null;
               }
             }
+            break;
+          case new RegExp("^###(?= )").test(text):
+            blockList.push({
+              type: "heading",
+              level: 3,
+              id: _generateId(),
+              classList: [],
+              textContent: ___replaceTextData(text.substring(4))
+            });
+            break;
+          case new RegExp("^##(?= )").test(text):
+            blockList.push({
+              type: "heading",
+              level: 2,
+              id: _generateId(),
+              classList: [],
+              textContent: ___replaceTextData(text.substring(3))
+            });
+            break;
+          case new RegExp("^#(?= )").test(text):
+            blockList.push({
+              type: "heading",
+              level: 1,
+              id: _generateId(),
+              classList: [],
+              textContent: ___replaceTextData(text.substring(2))
+            });
+            break;
+          default:
+            blockList.push({
+              type: "text",
+              classList: [],
+              textContent: ___replaceTextData(text)
+            });
+        }
+      });
+      if (store.value.controlStatus.currentBlockType === "heading" || store.value.controlStatus.currentBlockType === "text") {
+        if (store.value.controlStatus.$currentBlock !== null) {
+          if (store.value.controlStatus.$currentBlock.textContent === "") {
+            isDelete = true;
+            $target = store.value.controlStatus.$currentBlock;
           }
-          break;
-        case new RegExp("^###(?= )").test(text):
-          blockList.push({
-            type: "heading",
-            level: 3,
-            id: _generateId(),
-            classList: [],
-            textContent: ___replaceTextData(text.substring(4))
-          });
-          break;
-        case new RegExp("^##(?= )").test(text):
-          blockList.push({
-            type: "heading",
-            level: 2,
-            id: _generateId(),
-            classList: [],
-            textContent: ___replaceTextData(text.substring(3))
-          });
-          break;
-        case new RegExp("^#(?= )").test(text):
-          blockList.push({
-            type: "heading",
-            level: 1,
-            id: _generateId(),
-            classList: [],
-            textContent: ___replaceTextData(text.substring(2))
-          });
-          break;
-        default:
-          blockList.push({
-            type: "text",
-            classList: [],
-            textContent: ___replaceTextData(text)
-          });
+        }
       }
-    });
-    blockList.forEach((data) => {
-      switch (data.type) {
-        case "heading":
-          if (data.level === 1) {
-            _addBlock("heading1", store, data);
-          }
-          if (data.level === 2) {
-            _addBlock("heading2", store, data);
-          }
-          if (data.level === 3) {
-            _addBlock("heading3", store, data);
-          }
-          break;
-        case "list":
-          _addBlock(data.element, store, data);
-          break;
-        default:
-          _addBlock(data.type, store, data);
+      blockList.forEach((data) => {
+        switch (data.type) {
+          case "heading":
+            if (data.level === 1) {
+              _addBlock("heading1", store, data);
+            }
+            if (data.level === 2) {
+              _addBlock("heading2", store, data);
+            }
+            if (data.level === 3) {
+              _addBlock("heading3", store, data);
+            }
+            break;
+          case "list":
+            _addBlock(data.element, store, data);
+            break;
+          default:
+            _addBlock(data.type, store, data);
+        }
+      });
+      if (isDelete === true) {
+        $target?.remove();
       }
-    });
+    }
   }
 }
 function ___replaceTextData(text) {

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

@@ -56,8 +56,22 @@ export function _decideWhetherOpenControlBar(store) {
     const allowTypeList = ["code", "ol", "ul"];
     if (allowTypeList.includes(type) === true && $element !== null) {
       const targetRect = $element.getBoundingClientRect();
-      store.value.controlBar.x = Math.floor(targetRect.left + targetRect.width / 2);
-      store.value.controlBar.y = Math.floor(targetRect.top - 8 - 32);
+      let x = Math.floor(targetRect.left + targetRect.width / 2);
+      let y = Math.floor(targetRect.top - 8 - 32);
+      if (store.value.controlStatus.hasTransformParent === true && store.value.controlStatus.$transformElement !== null) {
+        const transformRect = store.value.controlStatus.$transformElement.getBoundingClientRect();
+        x -= transformRect.left;
+        y -= transformRect.top;
+        if (store.value.$parentWrap !== null) {
+          if (store.value.$parentWrap === window) {
+            y += store.value.$parentWrap.scrollY;
+          } else {
+            y += store.value.$parentWrap.scrollTop;
+          }
+        }
+      }
+      store.value.controlBar.x = x;
+      store.value.controlBar.y = y;
       store.value.controlBar.$element = $element;
       store.value.controlBar.active = true;
     } else {

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

@@ -1,13 +1,21 @@
-import { _findScrollingElement } from "../node/index.js";
+import { _findScrollingElement, _findTransformElement } from "../node/index.js";
 export function _eidtorMountEvent(store) {
   const $editor = document.querySelector(".js-dragon-editor");
   const $body = document.querySelector(".js-de-body");
   const $controlBar = document.querySelector(".js-de-controlbar");
   const $parentWrap = _findScrollingElement($editor);
+  const $transformWrap = _findTransformElement($editor);
   store.value.$editor = $editor;
   store.value.$body = $body;
   store.value.$controlBar = $controlBar;
   store.value.$parentWrap = $parentWrap;
+  if ($transformWrap === null) {
+    store.value.controlStatus.hasTransformParent = false;
+    store.value.controlStatus.$transformElement = null;
+  } else {
+    store.value.controlStatus.hasTransformParent = true;
+    store.value.controlStatus.$transformElement = $transformWrap;
+  }
   __checkAndSetUpMobile(store);
   window.addEventListener("click", store.value.windowClickEvent);
   window.addEventListener("resize", store.value.windowResizeEvent);

package/dist/runtime/utils/node/element.d.ts

@@ -1,4 +1,5 @@
 export declare function _findScrollingElement($target: HTMLElement): HTMLElement | Window;
+export declare function _findTransformElement($target: HTMLElement): HTMLElement | null;
 export declare function _getParentElementIfNodeIsText($target: Node, $block: HTMLElement): Node;
 export declare function _findContentEditableElement($target: Node): HTMLElement | null;
 export declare function _findPoverTextNode(node: Element, idx: number): number;

package/dist/runtime/utils/node/element.js

@@ -1,18 +1,37 @@
 export function _findScrollingElement($target) {
-  if ($target.parentElement !== null) {
-    if ($target.scrollHeight > $target.clientHeight) {
-      return $target;
+  const $wrap = $target.parentElement;
+  if ($wrap !== null) {
+    const style = window.getComputedStyle($wrap);
+    if (style.overflow !== "visible") {
+      return $wrap;
     } else {
-      if ($target.parentElement.tagName === "BODY") {
+      if ($wrap.tagName === "BODY") {
         return window;
       } else {
-        return _findScrollingElement($target.parentElement);
+        return _findScrollingElement($wrap);
       }
     }
   } else {
     return window;
   }
 }
+export function _findTransformElement($target) {
+  const $wrap = $target.parentElement;
+  if ($wrap !== null) {
+    const style = window.getComputedStyle($wrap);
+    if (style.transform !== "none") {
+      return $wrap;
+    } else {
+      if ($wrap.tagName === "BODY") {
+        return null;
+      } else {
+        return _findTransformElement($wrap);
+      }
+    }
+  } else {
+    return null;
+  }
+}
 export function _getParentElementIfNodeIsText($target, $block) {
   if ($target.constructor.name === "Text") {
     const $parent = $target.parentElement;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "dragon-editor",
-    "version": "3.8.1",
+    "version": "3.8.3",
     "description": "Javascript WYSIWYG editor in Nuxt!",
     "repository": {
         "type": "git",