dragon-editor 3.8.3 → 3.8.5

package/dist/module.json

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

package/dist/runtime/components/DragonEditor.vue

@@ -46,6 +46,7 @@ const editorStore = ref({
   controlStatus: {
     isMobile: false,
     hasTransformParent: false,
+    hasHiddenStyleParent: false,
     currentBlockType: "text",
     codeBlockTheme: "github-light",
     codeBlockLang: "text",
@@ -132,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),
@@ -384,9 +385,16 @@ 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;
   padding: 16px 20px;
   line-height: 1.6;
 }

package/dist/runtime/scss/editor.css

@@ -173,9 +173,16 @@
   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;
   padding: 16px 20px;
   line-height: 1.6;
 }

package/dist/runtime/type.d.mts

@@ -52,6 +52,7 @@ interface DragonEditorStore {
     controlStatus: {
         isMobile: boolean;
         hasTransformParent: boolean;
+        hasHiddenStyleParent: boolean;
         anchorValidation: boolean;
         currentBlockType: DEBlock;
         codeBlockTheme: DECodeblockTheme;

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

@@ -58,17 +58,17 @@ export function _decideWhetherOpenControlBar(store) {
       const targetRect = $element.getBoundingClientRect();
       let x = Math.floor(targetRect.left + targetRect.width / 2);
       let y = Math.floor(targetRect.top - 8 - 32);
+      if (y < 0) {
+        y = 44;
+        if (store.value.$parentWrap !== null && store.value.$editor !== null) {
+          const editorRect = store.value.$editor.getBoundingClientRect();
+          y += editorRect.top;
+        }
+      }
       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;

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

@@ -1,20 +1,26 @@
-import { _findScrollingElement, _findTransformElement } 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 $transformWrap = _findTransformElement($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 ($transformWrap === null) {
+  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 = $transformWrap;
+    store.value.controlStatus.$transformElement = $transformElement;
   }
   __checkAndSetUpMobile(store);
   window.addEventListener("click", store.value.windowClickEvent);

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

@@ -1,4 +1,5 @@
 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;

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

@@ -2,7 +2,7 @@ export function _findScrollingElement($target) {
   const $wrap = $target.parentElement;
   if ($wrap !== null) {
     const style = window.getComputedStyle($wrap);
-    if (style.overflow !== "visible") {
+    if (style.overflow !== "visible" && style.overflow !== "hidden") {
       return $wrap;
     } else {
       if ($wrap.tagName === "BODY") {
@@ -15,6 +15,23 @@ export function _findScrollingElement($target) {
     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) {

package/package.json

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