dragon-editor 3.5.21 → 3.6.0

package/README.md

@@ -63,7 +63,7 @@ Second. Use Component
 </template>
 
 <script setup lang="ts">
-    const contentData = ref<DEContentData>([]);
+    const contentData = ref<DEContentData>([]); // Do not modify the value after binding under any circumstances.
 </script>
 ```
 

package/dist/module.json

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

package/dist/runtime/components/DragonEditor.vue

@@ -16,11 +16,13 @@ interface DEOption {
     modelValue: DEContentData;
     useMenuBar?: boolean;
     imageHostURL?: string;
+    screenChangePoint?: number;
 }
 
 const props = withDefaults(defineProps<DEOption>(), {
     useMenuBar: true,
     imageHostURL: "",
+    screenChangePoint: 1200,
 });
 const emit = defineEmits<{
     (e: "update:modelValue", data: DEContentData): void;
@@ -40,6 +42,7 @@ const editorStore = ref<DragonEditorStore>({
     useMenuBar: props.useMenuBar,
     imageHostURL: props.imageHostURL,
     firstData: props.modelValue,
+    screenChangePoint: props.screenChangePoint,
     menuBarTop: 0,
     activeStatus: {
         addBlockMenu: false,
@@ -201,6 +204,15 @@ function changeEditorData(data: DEContentData): void {
     }
 }
 
+// 레이아웃 변경시 리마운트
+function updateLayout(): void {
+    _eidtorUnmountEvent(editorStore);
+
+    setTimeout(() => {
+        _eidtorMountEvent(editorStore);
+    }, 250);
+}
+
 onMounted(() => {
     _eidtorMountEvent(editorStore);
 });
@@ -214,6 +226,7 @@ defineExpose({
     setDecoration,
     setAlign,
     changeEditorData,
+    updateLayout,
 });
 </script>
 
@@ -243,6 +256,7 @@ defineExpose({
 .dragon-editor legend,
 .dragon-editor figure,
 .dragon-editor menu,
+.dragon-editor hr,
 .dragon-editor-viewer h1,
 .dragon-editor-viewer h2,
 .dragon-editor-viewer h3,
@@ -259,7 +273,8 @@ defineExpose({
 .dragon-editor-viewer fieldset,
 .dragon-editor-viewer legend,
 .dragon-editor-viewer figure,
-.dragon-editor-viewer menu {
+.dragon-editor-viewer menu,
+.dragon-editor-viewer hr {
   margin: 0;
   padding: 0;
   border: 0;
@@ -293,7 +308,7 @@ defineExpose({
 .dragon-editor-viewer h4,
 .dragon-editor-viewer h5,
 .dragon-editor-viewer h6 {
-  font-size: 1em;
+  font-size: inherit;
   font-weight: normal;
 }
 .dragon-editor input,
@@ -323,6 +338,7 @@ defineExpose({
 .dragon-editor-viewer input[type=reset] {
   border: 0;
   background: transparent;
+  color: inherit;
   font-size: inherit;
   cursor: pointer;
 }
@@ -393,7 +409,6 @@ defineExpose({
 .dragon-editor .de-body {
   display: flex;
   flex-direction: column;
-  min-height: 500px;
   padding: 16px 20px;
   line-height: 1.6;
 }
@@ -923,6 +938,8 @@ defineExpose({
 .dragon-editor .de-code-block {
   display: flex;
   flex-wrap: wrap;
+  margin: 2px 0;
+  padding: 0;
   border-radius: var(--radius-default);
   overflow: hidden;
 }
@@ -1179,6 +1196,20 @@ defineExpose({
   color: #ffd8d3;
   background-color: #78191b;
 }
+.dragon-editor .de-divider-block {
+  display: flex;
+  align-items: center;
+  height: 20px;
+}
+.dragon-editor .de-divider-block::before {
+  display: block;
+  content: "";
+  width: 100%;
+  height: 2px;
+  padding: 0;
+  background: #e5e5e5;
+  border-radius: 2px;
+}
 .dragon-editor .de-bold {
   font-weight: 700;
 }

package/dist/runtime/components/DragonEditorViewer.vue

@@ -58,6 +58,7 @@ function structure(): VNode {
 .dragon-editor legend,
 .dragon-editor figure,
 .dragon-editor menu,
+.dragon-editor hr,
 .dragon-editor-viewer h1,
 .dragon-editor-viewer h2,
 .dragon-editor-viewer h3,
@@ -74,7 +75,8 @@ function structure(): VNode {
 .dragon-editor-viewer fieldset,
 .dragon-editor-viewer legend,
 .dragon-editor-viewer figure,
-.dragon-editor-viewer menu {
+.dragon-editor-viewer menu,
+.dragon-editor-viewer hr {
   margin: 0;
   padding: 0;
   border: 0;
@@ -108,7 +110,7 @@ function structure(): VNode {
 .dragon-editor-viewer h4,
 .dragon-editor-viewer h5,
 .dragon-editor-viewer h6 {
-  font-size: 1em;
+  font-size: inherit;
   font-weight: normal;
 }
 .dragon-editor input,
@@ -138,6 +140,7 @@ function structure(): VNode {
 .dragon-editor-viewer input[type=reset] {
   border: 0;
   background: transparent;
+  color: inherit;
   font-size: inherit;
   cursor: pointer;
 }
@@ -193,7 +196,6 @@ function structure(): VNode {
 .dragon-editor-viewer {
   display: flex;
   flex-direction: column;
-  gap: 4px;
   width: 100%;
   height: 100%;
   line-height: 1.6;
@@ -542,6 +544,8 @@ function structure(): VNode {
 .dragon-editor-viewer .de-code-block {
   display: flex;
   flex-wrap: wrap;
+  margin: 2px 0;
+  padding: 0;
   border-radius: var(--radius-default);
   overflow: hidden;
 }
@@ -770,6 +774,20 @@ function structure(): VNode {
   color: #ffd8d3;
   background-color: #78191b;
 }
+.dragon-editor-viewer .de-divider-block {
+  display: flex;
+  align-items: center;
+  height: 20px;
+}
+.dragon-editor-viewer .de-divider-block::before {
+  display: block;
+  content: "";
+  width: 100%;
+  height: 2px;
+  padding: 0;
+  background: #e5e5e5;
+  border-radius: 2px;
+}
 .dragon-editor-viewer .de-bold {
   font-weight: 700;
 }

package/dist/runtime/scss/editor.css

@@ -23,6 +23,7 @@
 .dragon-editor legend,
 .dragon-editor figure,
 .dragon-editor menu,
+.dragon-editor hr,
 .dragon-editor-viewer h1,
 .dragon-editor-viewer h2,
 .dragon-editor-viewer h3,
@@ -39,7 +40,8 @@
 .dragon-editor-viewer fieldset,
 .dragon-editor-viewer legend,
 .dragon-editor-viewer figure,
-.dragon-editor-viewer menu {
+.dragon-editor-viewer menu,
+.dragon-editor-viewer hr {
   margin: 0;
   padding: 0;
   border: 0;
@@ -73,7 +75,7 @@
 .dragon-editor-viewer h4,
 .dragon-editor-viewer h5,
 .dragon-editor-viewer h6 {
-  font-size: 1em;
+  font-size: inherit;
   font-weight: normal;
 }
 .dragon-editor input,
@@ -103,6 +105,7 @@
 .dragon-editor-viewer input[type=reset] {
   border: 0;
   background: transparent;
+  color: inherit;
   font-size: inherit;
   cursor: pointer;
 }
@@ -173,7 +176,6 @@
 .dragon-editor .de-body {
   display: flex;
   flex-direction: column;
-  min-height: 500px;
   padding: 16px 20px;
   line-height: 1.6;
 }
@@ -703,6 +705,8 @@
 .dragon-editor .de-code-block {
   display: flex;
   flex-wrap: wrap;
+  margin: 2px 0;
+  padding: 0;
   border-radius: var(--radius-default);
   overflow: hidden;
 }
@@ -959,6 +963,20 @@
   color: #ffd8d3;
   background-color: #78191b;
 }
+.dragon-editor .de-divider-block {
+  display: flex;
+  align-items: center;
+  height: 20px;
+}
+.dragon-editor .de-divider-block::before {
+  display: block;
+  content: "";
+  width: 100%;
+  height: 2px;
+  padding: 0;
+  background: #e5e5e5;
+  border-radius: 2px;
+}
 .dragon-editor .de-bold {
   font-weight: 700;
 }

package/dist/runtime/scss/viewer.css

@@ -23,6 +23,7 @@
 .dragon-editor legend,
 .dragon-editor figure,
 .dragon-editor menu,
+.dragon-editor hr,
 .dragon-editor-viewer h1,
 .dragon-editor-viewer h2,
 .dragon-editor-viewer h3,
@@ -39,7 +40,8 @@
 .dragon-editor-viewer fieldset,
 .dragon-editor-viewer legend,
 .dragon-editor-viewer figure,
-.dragon-editor-viewer menu {
+.dragon-editor-viewer menu,
+.dragon-editor-viewer hr {
   margin: 0;
   padding: 0;
   border: 0;
@@ -73,7 +75,7 @@
 .dragon-editor-viewer h4,
 .dragon-editor-viewer h5,
 .dragon-editor-viewer h6 {
-  font-size: 1em;
+  font-size: inherit;
   font-weight: normal;
 }
 .dragon-editor input,
@@ -103,6 +105,7 @@
 .dragon-editor-viewer input[type=reset] {
   border: 0;
   background: transparent;
+  color: inherit;
   font-size: inherit;
   cursor: pointer;
 }
@@ -158,7 +161,6 @@
 .dragon-editor-viewer {
   display: flex;
   flex-direction: column;
-  gap: 4px;
   width: 100%;
   height: 100%;
   line-height: 1.6;
@@ -507,6 +509,8 @@
 .dragon-editor-viewer .de-code-block {
   display: flex;
   flex-wrap: wrap;
+  margin: 2px 0;
+  padding: 0;
   border-radius: var(--radius-default);
   overflow: hidden;
 }
@@ -735,6 +739,20 @@
   color: #ffd8d3;
   background-color: #78191b;
 }
+.dragon-editor-viewer .de-divider-block {
+  display: flex;
+  align-items: center;
+  height: 20px;
+}
+.dragon-editor-viewer .de-divider-block::before {
+  display: block;
+  content: "";
+  width: 100%;
+  height: 2px;
+  padding: 0;
+  background: #e5e5e5;
+  border-radius: 2px;
+}
 .dragon-editor-viewer .de-bold {
   font-weight: 700;
 }

package/dist/runtime/type.d.ts

@@ -2,7 +2,7 @@ import type { codeToHtml } from "shiki";
 
 type DEContentData = DEBlockData[];
 
-type DEBlockData = DETextBlock | DEHeadingBlock | DEListBlock | DEImageBlock | DECodeBlock | DECustomBlock;
+type DEBlockData = DETextBlock | DEHeadingBlock | DEListBlock | DEImageBlock | DECodeBlock | DECustomBlock | DEDividerBlock;
 
 type DEIconKind = "plus" | "bold" | "italic" | "underline" | "strikethrough" | "codeblock" | "add-link" | "remove-link" | "image" | "align-center" | "align-left" | "align-right" | "align-justify" | "move-up" | "move-down" | "indent-decrease" | "indent-increase";
 
@@ -12,7 +12,7 @@ type DETextalign = "left" | "right" | "center" | "justify";
 
 type DEBlock = "text" | "heading" | "ul" | "ol" | "image" | "code" | "custom";
 
-type DEBlockMenutype = "text" | "heading1" | "heading2" | "heading3" | "ul" | "ol" | "image" | "code" | "custom";
+type DEBlockMenutype = "text" | "heading1" | "heading2" | "heading3" | "ul" | "ol" | "image" | "code" | "custom" | "divider";
 
 type DEListStyle = "disc" | "square" | "decimal" | "lower-alpha" | "upper-alpha" | "lower-roman" | "upper-roman";
 
@@ -35,6 +35,7 @@ interface DragonEditorStore {
     };
     useMenuBar: boolean;
     imageHostURL: string;
+    screenChangePoint: number;
     firstData: DEContentData;
     menuBarTop: number;
     activeStatus: {
@@ -113,6 +114,7 @@ interface DragonEditor {
     setDecoration: (data: DEDecoration) => void;
     setTextAlign: (type: DETextalign) => void;
     changeEditorData: (data: DEContentData) => void;
+    updateLayout: () => void;
 }
 
 interface DETextBlock {
@@ -167,3 +169,7 @@ interface DECustomBlock {
     classList: string[];
     textContent: string;
 }
+
+interface DEDividerBlock {
+    type: "divider";
+}

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

@@ -227,6 +227,15 @@ export function _updateModelData(store) {
             })
           );
           break;
+        case $el.classList.contains("de-divider-block"):
+          workList.push(
+            new Promise((done) => {
+              done({
+                type: "divider"
+              });
+            })
+          );
+          break;
         default:
           workList.push(
             new Promise((done) => {
@@ -282,6 +291,11 @@ export function _getDefaultBlockData(type) {
         textContent: ""
       };
       break;
+    case "divider":
+      data = {
+        type: "divider"
+      };
+      break;
   }
   return data;
 }

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

@@ -24,7 +24,7 @@ export function _windowResizeEvent(event, store) {
   __checkAndSetUpMobile(store);
 }
 function __checkAndSetUpMobile(store) {
-  if (window.innerWidth > 1200) {
+  if (window.innerWidth > store.value.screenChangePoint) {
     store.value.controlStatus.isMobile = false;
   } else {
     store.value.controlStatus.isMobile = true;

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

@@ -22,6 +22,9 @@ export function _createBlockList({ blockList, isEditable, imageHostURL } = { blo
         case "code":
           blockArray.push(__createCodeBlock(block, isEditable));
           break;
+        case "divider":
+          blockArray.push(__createDividerBlock());
+          break;
         default:
           blockArray.push(__createCustomBlock(block));
       }
@@ -103,3 +106,6 @@ function __createCodeBlock(data, isEditable) {
 function __createCustomBlock(data) {
   return h("div", { class: ["de-block", "de-custom-block", ...data.classList], innerHTML: data.textContent });
 }
+function __createDividerBlock() {
+  return h("div", { class: ["de-block", "de-divider-block"] });
+}

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

@@ -1,7 +1,7 @@
 import { h } from "vue";
 import { _createBlockList } from "./index.js";
 import { _contentKeydownEvent, _contentKeyupEvent, _contentPasteEvent, _contentMouseupEvent, _contentMousedownEvnet, _contentTouchstartEvent, _getDefaultBlockData, _updateModelData } from "../event/index.js";
-import { _createTextBlock, _createHeadingBlock, _createListBlock, _createImageBlock, _createCodeBlock, _createCustomBlock } from "../node/index.js";
+import { _createTextBlock, _createHeadingBlock, _createListBlock, _createImageBlock, _createCodeBlock, _createCustomBlock, _createDividerBlock } from "../node/index.js";
 export function _getBodyVNodeStructure(store) {
   return h(
     "div",
@@ -44,6 +44,9 @@ export function _updateBodyStructure(bodyData, store) {
           case "code":
             htmlSturcutre += _createCodeBlock(data, store).outerHTML;
             break;
+          case "divider":
+            htmlSturcutre += _createDividerBlock().outerHTML;
+            break;
           default:
             htmlSturcutre += _createCustomBlock(data).outerHTML;
         }

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

@@ -364,5 +364,17 @@ function __getBlockListStructure(store) {
       "Code Block"
     )
   );
+  menuList.push(
+    h(
+      "button",
+      {
+        class: ["de-add-block"],
+        onClick: () => {
+          _addBlock("divider", store);
+        }
+      },
+      "Divider"
+    )
+  );
   return h("div", { class: ["de-block-menu-area", "js-de-block-menu-area", { "--active": store.value.activeStatus.addBlockMenu }] }, h("div", { class: ["de-list"] }, menuList));
 }

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

@@ -12,6 +12,7 @@ export declare function _createListItemBlock(child?: DEListItem): HTMLLIElement;
 export declare function _createImageBlock(data: DEImageBlock, imageHostURL?: string): HTMLDivElement;
 export declare function _createCodeBlock(data: DECodeBlock, store: Ref<DragonEditorStore>): HTMLDivElement;
 export declare function _createCustomBlock(data: DECustomBlock): HTMLDivElement;
+export declare function _createDividerBlock(): HTMLDivElement;
 export declare function _updateCurrentBlock(event: Event, store: Ref<DragonEditorStore>): void;
 export declare function _updateHeadingBlockList(store: Ref<DragonEditorStore>): void;
 export declare function _setCodeBlockTheme(theme: DECodeblockTheme, store: Ref<DragonEditorStore>): Promise<void>;

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

@@ -21,6 +21,9 @@ export function _addBlock(type, store, data) {
     case "custom":
       $block = _createCustomBlock(blockData);
       break;
+    case "divider":
+      $block = _createDividerBlock();
+      break;
   }
   if (store.value.controlStatus.$currentBlock === null) {
     if (store.value.$body !== null) {
@@ -179,6 +182,11 @@ export function _createCustomBlock(data) {
   $block.innerHTML = data.textContent;
   return $block;
 }
+export function _createDividerBlock() {
+  const $block = document.createElement("div");
+  $block.classList.add("de-block", "de-divider-block");
+  return $block;
+}
 export function _updateCurrentBlock(event, store) {
   let $target = event.target;
   if ($target !== null) {

package/dist/runtime/utils/style/anchor.js

@@ -1,7 +1,6 @@
 import { _setRangeCursor, _updateCursorData, _updateModelData, _sortingCursorDataOnElement } from "../event/index.js";
 import { _findContentEditableElement, _findPoverTextNode } from "../node/index.js";
 export function _setAnchorTag(url, isOutsideLink, store) {
-  console.log("url", url);
   if (store.value.controlStatus.previousCorsorData !== null && store.value.controlStatus.$currentBlock !== null) {
     const cursorData = store.value.controlStatus.previousCorsorData;
     const typeIgnoreList = ["image", "code", "custom"];

package/package.json

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