dragon-editor 3.8.2 → 3.8.4

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.2",
+  "version": "3.8.4",
   "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.vue

@@ -45,6 +45,8 @@ const editorStore = ref({
   },
   controlStatus: {
     isMobile: false,
+    hasTransformParent: false,
+    hasHiddenStyleParent: false,
     currentBlockType: "text",
     codeBlockTheme: "github-light",
     codeBlockLang: "text",
@@ -55,7 +57,8 @@ const editorStore = ref({
     anchorValidation: false,
     previousCorsorData: null,
     $anchorInput: null,
-    $currentBlock: null
+    $currentBlock: null,
+    $transformElement: null
   },
   codeBlockTheme: [
     {
@@ -130,7 +133,7 @@ function mainStrucutre() {
   return h(
     "div",
     {
-      class: ["dragon-editor", "js-dragon-editor", { "--has-menu": editorStore.value.useMenuBar === true }, { "--mobile": editorStore.value.controlStatus.isMobile === true }],
+      class: ["dragon-editor", "js-dragon-editor", { "--has-menu": editorStore.value.useMenuBar === true }, { "--mobile": editorStore.value.controlStatus.isMobile === true }, { "--hidden-parent": editorStore.value.controlStatus.hasHiddenStyleParent === true }],
       onMousemove: (event) => _editorMousemoveEvent(event, editorStore),
       onMouseup: (event) => _editorMouseupEvent(event, editorStore),
       onMouseleave: (event) => _editorMouseleaveEvent(event, editorStore),
@@ -382,6 +385,15 @@ defineExpose({
   left: auto;
   right: 0;
 }
+.dragon-editor.--hidden-parent {
+  height: 100%;
+  box-sizing: border-box;
+}
+.dragon-editor.--hidden-parent .de-body {
+  height: 100%;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
 .dragon-editor .de-body {
   display: flex;
   flex-direction: column;
@@ -548,6 +560,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/scss/editor.css

@@ -173,6 +173,15 @@
   left: auto;
   right: 0;
 }
+.dragon-editor.--hidden-parent {
+  height: 100%;
+  box-sizing: border-box;
+}
+.dragon-editor.--hidden-parent .de-body {
+  height: 100%;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
 .dragon-editor .de-body {
   display: flex;
   flex-direction: column;
@@ -339,6 +348,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,8 @@ interface DragonEditorStore {
     };
     controlStatus: {
         isMobile: boolean;
+        hasTransformParent: boolean;
+        hasHiddenStyleParent: boolean;
         anchorValidation: boolean;
         currentBlockType: DEBlock;
         codeBlockTheme: DECodeblockTheme;
@@ -62,6 +64,7 @@ interface DragonEditorStore {
         previousCorsorData: DEditorCursor | null;
         $anchorInput: HTMLInputElement | null;
         $currentBlock: HTMLDivElement | null;
+        $transformElement: HTMLElement | null;
     };
     codeToHtml: codeToHtml;
     codeBlockTheme: DECodeItem<DECodeblockTheme>[];

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,27 @@
-import { _findScrollingElement } from "../node/index.js";
+import { _findScrollingElement, _findTransformElement, _findHiddenStyleElement } 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 $hiddenStyleElement = _findHiddenStyleElement($editor);
+  const $transformElement = _findTransformElement($editor);
   store.value.$editor = $editor;
   store.value.$body = $body;
   store.value.$controlBar = $controlBar;
   store.value.$parentWrap = $parentWrap;
+  if ($hiddenStyleElement === $editor.parentElement) {
+    store.value.controlStatus.hasHiddenStyleParent = true;
+  } else {
+    store.value.controlStatus.hasHiddenStyleParent = false;
+  }
+  if ($transformElement === null) {
+    store.value.controlStatus.hasTransformParent = false;
+    store.value.controlStatus.$transformElement = null;
+  } else {
+    store.value.controlStatus.hasTransformParent = true;
+    store.value.controlStatus.$transformElement = $transformElement;
+  }
   __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,6 @@
 export declare function _findScrollingElement($target: HTMLElement): HTMLElement | Window;
+export declare function _findHiddenStyleElement($target: HTMLElement): HTMLElement | null;
+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,54 @@
 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" && style.overflow !== "hidden") {
+      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 _findHiddenStyleElement($target) {
+  const $wrap = $target.parentElement;
+  if ($wrap !== null) {
+    const style = window.getComputedStyle($wrap);
+    if (style.overflow === "hidden") {
+      return $wrap;
+    } else {
+      if ($wrap.tagName === "HTML") {
+        return null;
+      } else {
+        return _findHiddenStyleElement($wrap);
+      }
+    }
+  } else {
+    return null;
+  }
+}
+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.2",
+    "version": "3.8.4",
     "description": "Javascript WYSIWYG editor in Nuxt!",
     "repository": {
         "type": "git",