dragon-editor 3.5.15 → 3.5.17

package/dist/module.json

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

package/dist/runtime/components/DragonEditor.vue

@@ -47,12 +47,10 @@ const editorStore = ref<DragonEditorStore>({
         imageResizeEvent: false,
     },
     eventStatus: {
-        preComposing: false,
         imageResizeEventStartX: 0,
         imageResizeEventType: "left",
         imageResizeEventEndX: 0,
         imageResizeCurrentWidth: 0,
-        keyboardEnterCount: 0,
     },
     controlStatus: {
         isMobile: false,
@@ -379,12 +377,15 @@ defineExpose({
 .dragon-editor.--mobile .de-menu-bar .de-menu-wrap {
   overflow-x: auto;
 }
+.dragon-editor.--mobile .de-menu-bar .de-link-exit-area {
+  left: auto;
+  right: 0;
+}
 .dragon-editor .de-body {
   display: flex;
   flex-direction: column;
-  gap: 4px;
   min-height: 500px;
-  padding: 20px;
+  padding: 16px 20px;
   line-height: 1.6;
 }
 .dragon-editor .de-menu-bar {
@@ -400,6 +401,7 @@ defineExpose({
 }
 .dragon-editor .de-menu-bar .de-menu-wrap {
   display: flex;
+  overflow-x: auto;
 }
 .dragon-editor .de-menu-bar .de-col {
   display: flex;
@@ -462,14 +464,13 @@ defineExpose({
   display: none;
   position: absolute;
   top: calc(100% + 1px);
-  left: 50%;
+  left: 205px;
   width: 200px;
   background: #fff;
   border: 1px solid #ccc;
   border-top: 0;
   border-radius: 0 0 var(--radius-default) var(--radius-default);
   z-index: 1000;
-  transform: translateX(-50%);
 }
 .dragon-editor .de-menu-bar .de-link-exit-area.--active {
   display: block;
@@ -548,10 +549,12 @@ defineExpose({
 }
 .dragon-editor .de-block {
   width: 100%;
+  padding: 2px 0;
   box-sizing: border-box;
 }
 .dragon-editor .de-text-block {
   min-height: 1.6em;
+  word-break: break-all;
   outline: 0;
 }
 .dragon-editor .de-text-block:empty:hover::before, .dragon-editor .de-text-block:empty:focus::before {
@@ -562,6 +565,7 @@ defineExpose({
 }
 .dragon-editor .de-heading-block {
   min-height: 1.6em;
+  word-break: break-all;
   outline: 0;
 }
 .dragon-editor .de-heading-block[data-level="1"] {
@@ -608,6 +612,7 @@ defineExpose({
 }
 .dragon-editor .de-list-block .de-item {
   min-height: 1.6em;
+  word-break: break-all;
   outline: 0;
   list-style: inherit;
 }
@@ -896,6 +901,7 @@ defineExpose({
   min-height: 1.6em;
   color: #909090;
   text-align: center;
+  word-break: break-all;
   outline: 0;
 }
 .dragon-editor .de-image-block .de-caption:empty:hover::before, .dragon-editor .de-image-block .de-caption:empty:focus::before {
@@ -912,6 +918,7 @@ defineExpose({
 }
 .dragon-editor .de-code-block .de-filename {
   flex: 1;
+  max-width: calc(100% - 120px);
   padding: 5px 10px;
   box-sizing: border-box;
   outline: 0;

package/dist/runtime/components/DragonEditorViewer.vue

@@ -201,14 +201,17 @@ function structure(): VNode {
 }
 .dragon-editor-viewer .de-block {
   width: 100%;
+  padding: 2px 0;
   box-sizing: border-box;
 }
 .dragon-editor-viewer .de-text-block {
   min-height: 1.6em;
+  word-break: break-all;
   outline: 0;
 }
 .dragon-editor-viewer .de-heading-block {
   min-height: 1.6em;
+  word-break: break-all;
   outline: 0;
 }
 .dragon-editor-viewer .de-heading-block[data-level="1"] {
@@ -249,6 +252,7 @@ function structure(): VNode {
 }
 .dragon-editor-viewer .de-list-block .de-item {
   min-height: 1.6em;
+  word-break: break-all;
   outline: 0;
   list-style: inherit;
 }
@@ -531,6 +535,7 @@ function structure(): VNode {
   min-height: 1.6em;
   color: #909090;
   text-align: center;
+  word-break: break-all;
   outline: 0;
 }
 .dragon-editor-viewer .de-code-block {
@@ -541,6 +546,7 @@ function structure(): VNode {
 }
 .dragon-editor-viewer .de-code-block .de-filename {
   flex: 1;
+  max-width: calc(100% - 120px);
   padding: 5px 10px;
   box-sizing: border-box;
   outline: 0;

package/dist/runtime/scss/editor.css

@@ -166,12 +166,15 @@
 .dragon-editor.--mobile .de-menu-bar .de-menu-wrap {
   overflow-x: auto;
 }
+.dragon-editor.--mobile .de-menu-bar .de-link-exit-area {
+  left: auto;
+  right: 0;
+}
 .dragon-editor .de-body {
   display: flex;
   flex-direction: column;
-  gap: 4px;
   min-height: 500px;
-  padding: 20px;
+  padding: 16px 20px;
   line-height: 1.6;
 }
 .dragon-editor .de-menu-bar {
@@ -187,6 +190,7 @@
 }
 .dragon-editor .de-menu-bar .de-menu-wrap {
   display: flex;
+  overflow-x: auto;
 }
 .dragon-editor .de-menu-bar .de-col {
   display: flex;
@@ -249,14 +253,13 @@
   display: none;
   position: absolute;
   top: calc(100% + 1px);
-  left: 50%;
+  left: 205px;
   width: 200px;
   background: #fff;
   border: 1px solid #ccc;
   border-top: 0;
   border-radius: 0 0 var(--radius-default) var(--radius-default);
   z-index: 1000;
-  transform: translateX(-50%);
 }
 .dragon-editor .de-menu-bar .de-link-exit-area.--active {
   display: block;
@@ -335,10 +338,12 @@
 }
 .dragon-editor .de-block {
   width: 100%;
+  padding: 2px 0;
   box-sizing: border-box;
 }
 .dragon-editor .de-text-block {
   min-height: 1.6em;
+  word-break: break-all;
   outline: 0;
 }
 .dragon-editor .de-text-block:empty:hover::before, .dragon-editor .de-text-block:empty:focus::before {
@@ -349,6 +354,7 @@
 }
 .dragon-editor .de-heading-block {
   min-height: 1.6em;
+  word-break: break-all;
   outline: 0;
 }
 .dragon-editor .de-heading-block[data-level="1"] {
@@ -395,6 +401,7 @@
 }
 .dragon-editor .de-list-block .de-item {
   min-height: 1.6em;
+  word-break: break-all;
   outline: 0;
   list-style: inherit;
 }
@@ -683,6 +690,7 @@
   min-height: 1.6em;
   color: #909090;
   text-align: center;
+  word-break: break-all;
   outline: 0;
 }
 .dragon-editor .de-image-block .de-caption:empty:hover::before, .dragon-editor .de-image-block .de-caption:empty:focus::before {
@@ -699,6 +707,7 @@
 }
 .dragon-editor .de-code-block .de-filename {
   flex: 1;
+  max-width: calc(100% - 120px);
   padding: 5px 10px;
   box-sizing: border-box;
   outline: 0;

package/dist/runtime/scss/viewer.css

@@ -166,14 +166,17 @@
 }
 .dragon-editor-viewer .de-block {
   width: 100%;
+  padding: 2px 0;
   box-sizing: border-box;
 }
 .dragon-editor-viewer .de-text-block {
   min-height: 1.6em;
+  word-break: break-all;
   outline: 0;
 }
 .dragon-editor-viewer .de-heading-block {
   min-height: 1.6em;
+  word-break: break-all;
   outline: 0;
 }
 .dragon-editor-viewer .de-heading-block[data-level="1"] {
@@ -214,6 +217,7 @@
 }
 .dragon-editor-viewer .de-list-block .de-item {
   min-height: 1.6em;
+  word-break: break-all;
   outline: 0;
   list-style: inherit;
 }
@@ -496,6 +500,7 @@
   min-height: 1.6em;
   color: #909090;
   text-align: center;
+  word-break: break-all;
   outline: 0;
 }
 .dragon-editor-viewer .de-code-block {
@@ -506,6 +511,7 @@
 }
 .dragon-editor-viewer .de-code-block .de-filename {
   flex: 1;
+  max-width: calc(100% - 120px);
   padding: 5px 10px;
   box-sizing: border-box;
   outline: 0;

package/dist/runtime/type.d.ts

@@ -43,12 +43,10 @@ interface DragonEditorStore {
         imageResizeEvent: boolean;
     };
     eventStatus: {
-        preComposing: boolean;
         imageResizeEventStartX: number;
         imageResizeEventType: "right" | "left";
         imageResizeEventEndX: number;
         imageResizeCurrentWidth: number;
-        keyboardEnterCount: number;
     };
     controlStatus: {
         isMobile: boolean;

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

@@ -4,3 +4,4 @@ export declare function _imageResizeEventStart(event: Event, store: Ref<DragonEd
 export declare function _imageResizeEvent(event: Event, store: Ref<DragonEditorStore>): void;
 export declare function _imageResizeEventEnd(event: Event, store: Ref<DragonEditorStore>): void;
 export declare function _moveBlock(type: "up" | "down", store: Ref<DragonEditorStore>): void;
+export declare function _checkNeedNewBlock(event: MouseEvent, store: Ref<DragonEditorStore>): void;

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

@@ -1,5 +1,5 @@
-import { _updateModelData } from "./index.js";
-import { _updateCurrentBlock } from "../node/index.js";
+import { _updateModelData, _getDefaultBlockData } from "./index.js";
+import { _updateCurrentBlock, _createTextBlock } from "../node/index.js";
 export function _imageResizeEventStart(event, store) {
   const $target = event.target;
   if ($target !== null) {
@@ -76,3 +76,26 @@ export function _moveBlock(type, store) {
     _updateModelData(store);
   }
 }
+export function _checkNeedNewBlock(event, store) {
+  const $target = event.target;
+  if ($target !== null) {
+    const $element = $target;
+    if ($element.classList.contains("js-de-body") === true) {
+      const blockList = $element.querySelectorAll(".de-block");
+      const $targetBlock = blockList[blockList.length - 1];
+      if ($targetBlock.classList.contains("de-text-block") === true) {
+        if ($targetBlock.textContent === "") {
+          $targetBlock.focus();
+        } else {
+          const $block = _createTextBlock(_getDefaultBlockData("text"));
+          $targetBlock.insertAdjacentElement("afterend", $block);
+          $block.focus();
+        }
+      } else {
+        const $block = _createTextBlock(_getDefaultBlockData("text"));
+        $targetBlock.insertAdjacentElement("afterend", $block);
+        $block.focus();
+      }
+    }
+  }
+}

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

@@ -7,16 +7,11 @@ export function _contentKeydownEvent(event, store) {
   _updateCursorData(store);
   switch (event.key) {
     case "Enter":
-      if (store.value.eventStatus.preComposing === false && event.isComposing === false) {
+      if (event.isComposing === false) {
         __enterEvent(event, store);
       } else {
-        if (store.value.eventStatus.keyboardEnterCount % 2 === 0) {
-          __enterEvent(event, store);
-        } else {
-          event.preventDefault();
-        }
+        event.preventDefault();
       }
-      store.value.eventStatus.keyboardEnterCount += 1;
       break;
     case "Backspace":
       __backspaceEvent(event, store);
@@ -41,7 +36,6 @@ export function _contentKeydownEvent(event, store) {
       break;
   }
   _hotKeyEvent(event, store);
-  store.value.eventStatus.preComposing = event.isComposing;
 }
 export async function _contentPasteEvent(event, store) {
   event.preventDefault();
@@ -1335,7 +1329,6 @@ export function _contentKeyupEvent(event, store) {
   _updateCurrentBlock(event, store);
   _updateCursorData(store);
   __checkBlock(store);
-  store.value.eventStatus.keyboardEnterCount = 0;
   clearTimeout(contentKeyupEvent);
   contentKeyupEvent = setTimeout(() => {
     _updateModelData(store);

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

@@ -1,9 +1,10 @@
-import { _updateCursorData, _imageResizeEventStart, _imageResizeEvent, _imageResizeEventEnd } from "./index.js";
+import { _updateCursorData, _imageResizeEventStart, _imageResizeEvent, _imageResizeEventEnd, _checkNeedNewBlock } from "./index.js";
 import { _getCurrentBlock, _updateCurrentBlock, _updateHeadingBlockList } from "../node/index.js";
 import { _updateAnchorTagValue } from "../style/index.js";
 export function _contentMouseupEvent(event, store) {
   _updateCurrentBlock(event, store);
   _updateCursorData(store);
+  _checkNeedNewBlock(event, store);
 }
 export function _contentMousedownEvnet(event, store) {
   _imageResizeEventStart(event, store);

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

@@ -7,6 +7,59 @@ export function _getMenuBarVNodeStructure(store) {
   const childNode = [];
   childNode.push(__getMenuListStructure(store));
   childNode.push(__getBlockListStructure(store));
+  childNode.push(
+    h("div", { class: ["de-link-exit-area", "js-de-link-exit-area", { "--active": store.value.activeStatus.anchorInputArea }] }, [
+      h("div", { class: ["de-btn-area"] }, [
+        h(
+          "button",
+          {
+            class: ["de-btn", { "--active": store.value.controlStatus.anchorTabType === "url" }],
+            onClick: () => {
+              store.value.controlStatus.anchorTabType = "url";
+            }
+          },
+          "Text"
+        ),
+        h(
+          "button",
+          {
+            class: ["de-btn", { "--active": store.value.controlStatus.anchorTabType === "heading" }],
+            onClick: () => {
+              store.value.controlStatus.anchorTabType = "heading";
+            }
+          },
+          "Heading"
+        )
+      ]),
+      store.value.controlStatus.anchorTabType === "url" ? h("div", { class: ["de-link-text-area"] }, [
+        h("input", {
+          class: ["de-input", { "--error": store.value.controlStatus.anchorValidation === false }],
+          value: store.value.controlStatus.anchorHref,
+          onChange: (event) => {
+            store.value.controlStatus.anchorHref = event.currentTarget.value;
+          }
+        }),
+        h("button", { class: ["de-btn"], onClick: () => {
+        } }, "Set")
+      ]) : h(
+        "div",
+        { class: ["de-link-heading-area"] },
+        store.value.controlStatus.anchorHeadingList.map((item) => {
+          return h(
+            "button",
+            {
+              class: ["de-btn", { "--active": store.value.controlStatus.anchorHref === `#${item.id}` }],
+              onClick: () => {
+                store.value.activeStatus.anchorInputArea = false;
+                _setAnchorTag(item.id, false, store);
+              }
+            },
+            item.name
+          );
+        })
+      )
+    ])
+  );
   return h("div", { class: ["de-menu-bar"], style: { top: `${store.value.menuBarTop}px` } }, childNode);
 }
 function __getMenuListStructure(store) {
@@ -100,58 +153,7 @@ function __getMenuListStructure(store) {
           }
         },
         [_getIconNode("remove-link")]
-      ),
-      h("div", { class: ["de-link-exit-area", "js-de-link-exit-area", { "--active": store.value.activeStatus.anchorInputArea }] }, [
-        h("div", { class: ["de-btn-area"] }, [
-          h(
-            "button",
-            {
-              class: ["de-btn", { "--active": store.value.controlStatus.anchorTabType === "url" }],
-              onClick: () => {
-                store.value.controlStatus.anchorTabType = "url";
-              }
-            },
-            "Text"
-          ),
-          h(
-            "button",
-            {
-              class: ["de-btn", { "--active": store.value.controlStatus.anchorTabType === "heading" }],
-              onClick: () => {
-                store.value.controlStatus.anchorTabType = "heading";
-              }
-            },
-            "Heading"
-          )
-        ]),
-        store.value.controlStatus.anchorTabType === "url" ? h("div", { class: ["de-link-text-area"] }, [
-          h("input", {
-            class: ["de-input", { "--error": store.value.controlStatus.anchorValidation === false }],
-            value: store.value.controlStatus.anchorHref,
-            onChange: (event) => {
-              store.value.controlStatus.anchorHref = event.currentTarget.value;
-            }
-          }),
-          h("button", { class: ["de-btn"], onClick: () => {
-          } }, "Set")
-        ]) : h(
-          "div",
-          { class: ["de-link-heading-area"] },
-          store.value.controlStatus.anchorHeadingList.map((item) => {
-            return h(
-              "button",
-              {
-                class: ["de-btn", { "--active": store.value.controlStatus.anchorHref === `#${item.id}` }],
-                onClick: () => {
-                  store.value.activeStatus.anchorInputArea = false;
-                  _setAnchorTag(item.id, false, store);
-                }
-              },
-              item.name
-            );
-          })
-        )
-      ])
+      )
     ])
   );
   menuGroupNode.push(

package/package.json

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