dragon-editor 3.6.1 → 3.7.0

package/README.md

@@ -27,7 +27,7 @@
 
 I just made the DragonEditor because I needed the WYSIWYG Editor to write on my [blog](https://dico.me).
 
-This module support only Nuxt3.
+This module support only Nuxt.
 
 # Font
 
@@ -83,4 +83,4 @@ Done!
 </script>
 ```
 
-More information is here [Document](https://lovefields.github.io/dragonEditor-doc/)
+More information is [here](https://lovefields.github.io/dragonEditor-doc/)

package/dist/module.json

@@ -4,9 +4,9 @@
     "nuxt": ">=3.0.0"
   },
   "configKey": "dragon-editor",
-  "version": "3.6.1",
+  "version": "3.7.0",
   "builder": {
-    "@nuxt/module-builder": "0.8.4",
-    "unbuild": "2.0.0"
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
   }
 }

package/dist/module.mjs

@@ -1,14 +1,5 @@
 import { defineNuxtModule, createResolver, addComponent, addTypeTemplate } from '@nuxt/kit';
 
-
-
-// -- Unbuild CommonJS Shims --
-import __cjs_url__ from 'url';
-import __cjs_path__ from 'path';
-import __cjs_mod__ from 'module';
-const __filename = __cjs_url__.fileURLToPath(import.meta.url);
-const __dirname = __cjs_path__.dirname(__filename);
-const require = __cjs_mod__.createRequire(import.meta.url);
 const module = defineNuxtModule({
   meta: {
     name: "dragon-editor",
@@ -18,7 +9,7 @@ const module = defineNuxtModule({
   },
   async setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
-    const typeContent = await readFile(`${__dirname}/runtime/type.d.ts`);
+    const typeContent = await readFile(`${__dirname}/runtime/type.d.mts`);
     addComponent({
       name: "DragonEditor",
       filePath: resolver.resolve(__dirname, "./runtime/components/DragonEditor")
@@ -45,9 +36,10 @@ async function readFile(path) {
   if (typeof Bun !== "undefined" && Bun.file) {
     const file = Bun.file(path);
     return await file.text();
+  } else {
+    const { promises: fs } = await import('fs');
+    return await fs.readFile(path, "utf-8");
   }
-  const { promises: fs } = await import('fs');
-  return await fs.readFile(path, "utf-8");
 }
 
 export { module as default };

package/dist/runtime/components/DragonEditor.vue

@@ -2,231 +2,198 @@
     <component :is="mainStrucutre"></component>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref, h, onMounted, onBeforeUnmount, watch } from "vue";
 import { _getBodyVNodeStructure, _getMenuBarVNodeStructure, _getControlbarVNodeStructure, _updateBodyStructure } from "../utils/layout";
-import { _eidtorMountEvent, _eidtorUnmountEvent, _editorMousemoveEvent, _editorMouseupEvent, _editorMouseleaveEvent, _editorTouchmoveEvent, _editorTouchendEvent, _checkOthersideClick, _parentWrapScollEvent, _editorContextMenuEvent, _windowResizeEvent } from "../utils/event";
+import { _eidtorMountEvent, _eidtorUnmountEvent, _editorMousemoveEvent, _editorMouseupEvent, _editorMouseleaveEvent, _editorTouchmoveEvent, _editorTouchendEvent, _checkOthersideClick, _parentWrapScollEvent, _editorContextMenuEvent, _windowResizeEvent, _checkDataEmpty } from "../utils/event";
 import { _addBlock } from "../utils/node";
 import { _setDecoration, _setTextAlign } from "../utils/style";
-import type { VNode } from "vue";
 import { codeToHtml } from "shiki";
-import type { DEBlockData, DEBlockMenutype, DEContentData, DEDecoration, DETextalign, DragonEditorStore } from "../type.d.ts";
-
-interface DEOption {
-    modelValue: DEContentData;
-    useMenuBar?: boolean;
-    imageHostURL?: string;
-    screenChangePoint?: number;
-}
-
-const props = withDefaults(defineProps<DEOption>(), {
-    useMenuBar: true,
-    imageHostURL: "",
-    screenChangePoint: 1200,
+const props = defineProps({
+  modelValue: { type: null, required: true },
+  useMenuBar: { type: Boolean, required: false, default: true },
+  imageHostURL: { type: String, required: false, default: "" },
+  screenChangePoint: { type: Number, required: false, default: 1200 }
 });
-const emit = defineEmits<{
-    (e: "update:modelValue", data: DEContentData): void;
-    (e: "uploadImageEvent", file: File): void;
-}>();
-const editorStore = ref<DragonEditorStore>({
-    cursorData: null,
-    message: {
-        linkTextNoStyle: "Link text can't set any style.",
-    },
-    controlBar: {
-        active: false,
-        x: 0,
-        y: 0,
-        $element: null,
-    },
-    useMenuBar: props.useMenuBar,
-    imageHostURL: props.imageHostURL,
-    firstData: props.modelValue,
-    screenChangePoint: props.screenChangePoint,
-    menuBarTop: 0,
-    activeStatus: {
-        addBlockMenu: false,
-        anchorInputArea: false,
-        imageResizeEvent: false,
+const emit = defineEmits(["update:modelValue", "uploadImageEvent"]);
+const editorStore = ref({
+  cursorData: null,
+  message: {
+    linkTextNoStyle: "Link text can't set any style."
+  },
+  controlBar: {
+    active: false,
+    x: 0,
+    y: 0,
+    $element: null
+  },
+  useMenuBar: props.useMenuBar,
+  imageHostURL: props.imageHostURL,
+  firstData: props.modelValue,
+  screenChangePoint: props.screenChangePoint,
+  menuBarTop: 0,
+  activeStatus: {
+    addBlockMenu: false,
+    anchorInputArea: false,
+    imageResizeEvent: false
+  },
+  eventStatus: {
+    imageResizeEventStartX: 0,
+    imageResizeEventType: "left",
+    imageResizeEventEndX: 0,
+    imageResizeCurrentWidth: 0
+  },
+  controlStatus: {
+    isMobile: false,
+    currentBlockType: "text",
+    codeBlockTheme: "github-light",
+    codeBlockLang: "text",
+    listBlockStyle: "disc",
+    anchorTabType: "url",
+    anchorHeadingList: [],
+    anchorHref: "",
+    anchorValidation: false,
+    previousCorsorData: null,
+    $anchorInput: null,
+    $currentBlock: null
+  },
+  codeBlockTheme: [
+    {
+      text: "GitHub Ligth",
+      code: "github-light"
     },
-    eventStatus: {
-        imageResizeEventStartX: 0,
-        imageResizeEventType: "left",
-        imageResizeEventEndX: 0,
-        imageResizeCurrentWidth: 0,
-    },
-    controlStatus: {
-        isMobile: false,
-        currentBlockType: "text",
-        codeBlockTheme: "github-light",
-        codeBlockLang: "text",
-        listBlockStyle: "disc",
-        anchorTabType: "url",
-        anchorHeadingList: [],
-        anchorHref: "",
-        anchorValidation: false,
-        previousCorsorData: null,
-        $anchorInput: null,
-        $currentBlock: null,
+    {
+      text: "GitHub Dark Dimmed",
+      code: "github-dark-dimmed"
+    }
+  ],
+  listUlType: [
+    {
+      text: "Disc",
+      code: "disc"
     },
-    codeBlockTheme: [
-        {
-            text: "GitHub Ligth",
-            code: "github-light",
-        },
-        {
-            text: "GitHub Dark Dimmed",
-            code: "github-dark-dimmed",
-        },
-    ],
-    listUlType: [
-        {
-            text: "Disc",
-            code: "disc",
-        },
-        {
-            text: "Square",
-            code: "square",
-        },
-    ],
-    listOlType: [
-        {
-            text: "Decimal",
-            code: "decimal",
-        },
-        {
-            text: "Lower-Alpha",
-            code: "lower-alpha",
-        },
-        {
-            text: "Upper-Alpha",
-            code: "upper-alpha",
-        },
-        {
-            text: "Lower-Roman",
-            code: "lower-roman",
-        },
-        {
-            text: "Upper-Roman",
-            code: "upper-roman",
-        },
-    ],
-    $editor: null,
-    $body: null,
-    $controlBar: null,
-    $parentWrap: null,
-    codeToHtml: codeToHtml,
-    emit: emit,
-    windowClickEvent: function (event: MouseEvent) {
-        _checkOthersideClick(event, editorStore);
+    {
+      text: "Square",
+      code: "square"
+    }
+  ],
+  listOlType: [
+    {
+      text: "Decimal",
+      code: "decimal"
     },
-    windowResizeEvent: function (event: Event) {
-        _windowResizeEvent(event, editorStore);
+    {
+      text: "Lower-Alpha",
+      code: "lower-alpha"
     },
-    windowMouseUpEvent: function (event: MouseEvent) {
-        _editorMouseupEvent(event, editorStore);
+    {
+      text: "Upper-Alpha",
+      code: "upper-alpha"
     },
-    parentWrapScollEvent: function (event: Event) {
-        _parentWrapScollEvent(event, editorStore);
+    {
+      text: "Lower-Roman",
+      code: "lower-roman"
     },
-});
-
-function mainStrucutre(): VNode {
-    const childList: VNode[] = [];
-
-    if (editorStore.value.useMenuBar === true) {
-        childList.push(_getMenuBarVNodeStructure(editorStore));
-    }
-
-    childList.push(_getBodyVNodeStructure(editorStore));
-
-    if (editorStore.value.controlBar.active === true) {
-        childList.push(_getControlbarVNodeStructure(editorStore));
-    }
-
-    return h(
-        "div",
-        {
-            class: ["dragon-editor", "js-dragon-editor", { "--has-menu": editorStore.value.useMenuBar === true }, { "--mobile": editorStore.value.controlStatus.isMobile === true }],
-            onMousemove: (event: MouseEvent) => _editorMousemoveEvent(event, editorStore),
-            onMouseup: (event: MouseEvent) => _editorMouseupEvent(event, editorStore),
-            onMouseleave: (event: MouseEvent) => _editorMouseleaveEvent(event, editorStore),
-            onTouchmove: (event: TouchEvent) => _editorTouchmoveEvent(event, editorStore),
-            onTouchend: (event: TouchEvent) => _editorTouchendEvent(event, editorStore),
-            onContextmenu: (event: MouseEvent) => _editorContextMenuEvent(event, editorStore),
-        },
-        childList
-    );
-}
-
-// 외부용 블럭 추가 함수
-function addBlock(data: DEBlockData): void {
-    let type: DEBlockMenutype = "text";
-
-    switch (data.type) {
-        case "heading":
-            if (data.level === 1) {
-                type = "heading1";
-            } else if (data.level === 2) {
-                type = "heading2";
-            } else {
-                type = "heading3";
-            }
-            break;
-
-        case "list":
-            if (data.element === "ol") {
-                type = "ol";
-            } else {
-                type = "ul";
-            }
-            break;
-    }
-
-    _addBlock(type, editorStore, data);
-}
-
-// 외부용 스타일 적용 함수
-function setDecoration(style: DEDecoration): void {
-    _setDecoration(`de-${style}`, editorStore);
-}
-
-// 외부용 정렬 함수
-function setAlign(align: DETextalign): void {
-    _setTextAlign(align, editorStore);
-}
-
-// 데이터 변경용 함수
-function changeEditorData(data: DEContentData): void {
-    if (editorStore.value.$body !== null) {
-        editorStore.value.$body.innerHTML = "";
-        _updateBodyStructure(data, editorStore);
+    {
+      text: "Upper-Roman",
+      code: "upper-roman"
     }
+  ],
+  $editor: null,
+  $body: null,
+  $controlBar: null,
+  $parentWrap: null,
+  codeToHtml,
+  emit,
+  windowClickEvent: function(event) {
+    _checkOthersideClick(event, editorStore);
+  },
+  windowResizeEvent: function(event) {
+    _windowResizeEvent(event, editorStore);
+  },
+  windowMouseUpEvent: function(event) {
+    _editorMouseupEvent(event, editorStore);
+  },
+  parentWrapScollEvent: function(event) {
+    _parentWrapScollEvent(event, editorStore);
+  }
+});
+function mainStrucutre() {
+  const childList = [];
+  if (editorStore.value.useMenuBar === true) {
+    childList.push(_getMenuBarVNodeStructure(editorStore));
+  }
+  childList.push(_getBodyVNodeStructure(editorStore));
+  if (editorStore.value.controlBar.active === true) {
+    childList.push(_getControlbarVNodeStructure(editorStore));
+  }
+  return h(
+    "div",
+    {
+      class: ["dragon-editor", "js-dragon-editor", { "--has-menu": editorStore.value.useMenuBar === true }, { "--mobile": editorStore.value.controlStatus.isMobile === true }],
+      onMousemove: (event) => _editorMousemoveEvent(event, editorStore),
+      onMouseup: (event) => _editorMouseupEvent(event, editorStore),
+      onMouseleave: (event) => _editorMouseleaveEvent(event, editorStore),
+      onTouchmove: (event) => _editorTouchmoveEvent(event, editorStore),
+      onTouchend: (event) => _editorTouchendEvent(event, editorStore),
+      onContextmenu: (event) => _editorContextMenuEvent(event, editorStore)
+    },
+    childList
+  );
+}
+function addBlock(data) {
+  let type = "text";
+  switch (data.type) {
+    case "heading":
+      if (data.level === 1) {
+        type = "heading1";
+      } else if (data.level === 2) {
+        type = "heading2";
+      } else {
+        type = "heading3";
+      }
+      break;
+    case "list":
+      if (data.element === "ol") {
+        type = "ol";
+      } else {
+        type = "ul";
+      }
+      break;
+  }
+  _addBlock(type, editorStore, data);
+}
+function setDecoration(style) {
+  _setDecoration(`de-${style}`, editorStore);
+}
+function setAlign(align) {
+  _setTextAlign(align, editorStore);
+}
+function changeEditorData(data) {
+  if (editorStore.value.$body !== null) {
+    editorStore.value.$body.innerHTML = "";
+    _updateBodyStructure(data, editorStore);
+  }
+}
+function updateLayout() {
+  _eidtorUnmountEvent(editorStore);
+  setTimeout(() => {
+    _eidtorMountEvent(editorStore);
+  }, 500);
 }
-
-// 레이아웃 변경시 리마운트
-function updateLayout(): void {
-    _eidtorUnmountEvent(editorStore);
-
-    setTimeout(() => {
-        _eidtorMountEvent(editorStore);
-    }, 250);
-}
-
 onMounted(() => {
-    _eidtorMountEvent(editorStore);
+  _eidtorMountEvent(editorStore);
 });
-
 onBeforeUnmount(() => {
-    _eidtorUnmountEvent(editorStore);
+  _eidtorUnmountEvent(editorStore);
 });
-
 defineExpose({
-    addBlock,
-    setDecoration,
-    setAlign,
-    changeEditorData,
-    updateLayout,
+  addBlock,
+  setDecoration,
+  setAlign,
+  changeEditorData,
+  updateLayout,
+  checkDataEmpty: () => _checkDataEmpty(props.modelValue)
 });
 </script>
 

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

@@ -0,0 +1,31 @@
+import type { DEBlockData, DEContentData, DEDecoration, DETextalign } from "../type.d.ts.js";
+interface DEOption {
+    modelValue: DEContentData;
+    useMenuBar?: boolean;
+    imageHostURL?: string;
+    screenChangePoint?: number;
+}
+declare function addBlock(data: DEBlockData): void;
+declare function setDecoration(style: DEDecoration): void;
+declare function setAlign(align: DETextalign): void;
+declare function changeEditorData(data: DEContentData): void;
+declare function updateLayout(): void;
+declare const _default: import("vue").DefineComponent<DEOption, {
+    addBlock: typeof addBlock;
+    setDecoration: typeof setDecoration;
+    setAlign: typeof setAlign;
+    changeEditorData: typeof changeEditorData;
+    updateLayout: typeof updateLayout;
+    checkDataEmpty: () => boolean;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (data: DEContentData) => any;
+    uploadImageEvent: (file: File) => any;
+}, string, import("vue").PublicProps, Readonly<DEOption> & Readonly<{
+    "onUpdate:modelValue"?: ((data: DEContentData) => any) | undefined;
+    onUploadImageEvent?: ((file: File) => any) | undefined;
+}>, {
+    imageHostURL: string;
+    useMenuBar: boolean;
+    screenChangePoint: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/DragonEditorViewer.vue

@@ -2,33 +2,25 @@
     <component :is="structure()"></component>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { h } from "vue";
-import type { VNode } from "vue";
 import { _createBlockList } from "../utils/layout";
-
-const props = withDefaults(
-    defineProps<{
-        content: DEContentData;
-        imageHostURL?: string;
-    }>(),
+const props = defineProps({
+  content: { type: null, required: true },
+  imageHostURL: { type: String, required: false, default: "" }
+});
+function structure() {
+  return h(
+    "div",
     {
-        imageHostURL: "",
-    }
-);
-
-function structure(): VNode {
-    return h(
-        "div",
-        {
-            class: ["dragon-editor-viewer"],
-        },
-        _createBlockList({
-            blockList: props.content,
-            isEditable: false,
-            imageHostURL: props.imageHostURL,
-        })
-    );
+      class: ["dragon-editor-viewer"]
+    },
+    _createBlockList({
+      blockList: props.content,
+      isEditable: false,
+      imageHostURL: props.imageHostURL
+    })
+  );
 }
 </script>
 

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

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    content: DEContentData;
+    imageHostURL?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    imageHostURL: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/{type.d.ts → type.d.mts}

@@ -115,6 +115,7 @@ interface DragonEditor {
     setTextAlign: (type: DETextalign) => void;
     changeEditorData: (data: DEContentData) => void;
     updateLayout: () => void;
+    checkDataEmpty: () => boolean;
 }
 
 interface DETextBlock {

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

@@ -1,5 +1,5 @@
 import type { Ref } from "vue";
-import type { DragonEditorStore } from "../../type.js";
+import type { DragonEditorStore } from "../../type.d.mts.js";
 export declare function _imageResizeEventStart(event: Event, store: Ref<DragonEditorStore>): void;
 export declare function _imageResizeEvent(event: Event, store: Ref<DragonEditorStore>): void;
 export declare function _imageResizeEventEnd(event: Event, store: Ref<DragonEditorStore>): void;

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

@@ -1,5 +1,5 @@
 import type { Ref } from "vue";
-import type { DEArrangeCursorData, DEditorCursor, DragonEditorStore } from "../../type.js";
+import type { DEArrangeCursorData, DEditorCursor, DragonEditorStore } from "../../type.d.mts.js";
 export declare function _updateCursorData(store: Ref<DragonEditorStore>): void;
 export declare function _setCursor($target: Node, startIdx: number): void;
 export declare function _setRangeCursor($startTarget: Element, $endTarget: Element, startIdx: number, endIdx: number): void;

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

@@ -1,7 +1,8 @@
 import type { Ref } from "vue";
-import type { DECodeItem, DECodeblockLang, DragonEditorStore, DEBlockData, DEBlockMenutype } from "../../type.js";
+import type { DECodeItem, DECodeblockLang, DragonEditorStore, DEBlockData, DEBlockMenutype, DEContentData } from "../../type.d.mts.js";
 export declare const CODEBLOCKLANG: DECodeItem<DECodeblockLang>[];
 export declare function _updateModelData(store: Ref<DragonEditorStore>): void;
 export declare function _getDefaultBlockData(type: DEBlockMenutype): DEBlockData;
 export declare function _generateId(): string;
 export declare function _updateControlBarStatus(store: Ref<DragonEditorStore>): void;
+export declare function _checkDataEmpty(data: DEContentData): boolean;

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

@@ -346,3 +346,34 @@ function __updateListBlockStyle(store) {
     store.value.controlStatus.listBlockStyle = $block.dataset["style"] ?? "disc";
   }
 }
+export function _checkDataEmpty(data) {
+  let suitable = true;
+  data.forEach((item) => {
+    switch (item.type) {
+      case "heading":
+      case "text":
+        if (item.textContent !== "") {
+          suitable = false;
+        }
+        break;
+      case "list":
+        item.child.forEach((listChild) => {
+          if (listChild.textContent !== "") {
+            suitable = false;
+          }
+        });
+        break;
+      case "code":
+        if (item.filename !== "" || item.textContent !== "") {
+          suitable = false;
+        }
+        break;
+      case "image":
+      case "divider":
+      case "custom":
+        suitable = false;
+        break;
+    }
+  });
+  return suitable;
+}

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

@@ -1,5 +1,5 @@
 import type { Ref } from "vue";
-import type { DragonEditorStore } from "../../type.js";
+import type { DragonEditorStore } from "../../type.d.mts.js";
 export declare function _contentKeydownEvent(event: KeyboardEvent, store: Ref<DragonEditorStore>): void;
 export declare function _contentPasteEvent(event: ClipboardEvent, store: Ref<DragonEditorStore>): Promise<void>;
 export declare function _setIndent(store: Ref<DragonEditorStore>, type: "plus" | "minus"): void;

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

@@ -1,5 +1,5 @@
 import type { Ref } from "vue";
-import type { DragonEditorStore } from "../../type.js";
+import type { DragonEditorStore } from "../../type.d.mts.js";
 export declare function _contentMouseupEvent(event: MouseEvent, store: Ref<DragonEditorStore>): void;
 export declare function _contentMousedownEvnet(event: MouseEvent, store: Ref<DragonEditorStore>): void;
 export declare function _editorMousemoveEvent(event: MouseEvent, store: Ref<DragonEditorStore>): void;

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

@@ -1,3 +1,3 @@
-import type { DragonEditorStore } from "../../type.js";
+import type { DragonEditorStore } from "../../type.d.mts.js";
 import type { Ref } from "vue";
 export declare function _parentWrapScollEvent(event: Event, store: Ref<DragonEditorStore>): void;

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

@@ -1,5 +1,5 @@
 import type { Ref } from "vue";
-import type { DragonEditorStore } from "../../type.js";
+import type { DragonEditorStore } from "../../type.d.mts.js";
 export declare function _contentTouchstartEvent(event: TouchEvent, store: Ref<DragonEditorStore>): void;
 export declare function _editorTouchmoveEvent(event: TouchEvent, store: Ref<DragonEditorStore>): void;
 export declare function _editorTouchendEvent(event: TouchEvent, store: Ref<DragonEditorStore>): void;

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

@@ -1,5 +1,5 @@
 import type { Ref } from "vue";
-import type { DragonEditorStore } from "../../type.js";
+import type { DragonEditorStore } from "../../type.d.mts.js";
 export declare function _eidtorMountEvent(store: Ref<DragonEditorStore>): void;
 export declare function _eidtorUnmountEvent(store: Ref<DragonEditorStore>): void;
 export declare function _windowResizeEvent(event: Event, store: Ref<DragonEditorStore>): void;

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

@@ -19,6 +19,7 @@ export function _eidtorUnmountEvent(store) {
   window.removeEventListener("resize", store.value.windowResizeEvent);
   window.removeEventListener("mouseup", store.value.windowMouseUpEvent);
   store.value.$parentWrap?.removeEventListener("scroll", store.value.parentWrapScollEvent);
+  store.value.menuBarTop = 0;
 }
 export function _windowResizeEvent(event, store) {
   __checkAndSetUpMobile(store);

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

@@ -1,5 +1,5 @@
 import type { VNode } from "vue";
-import type { DEContentData } from "../../type.js";
+import type { DEContentData } from "../../type.d.mts.js";
 export declare function _createBlockList({ blockList, isEditable, imageHostURL }?: {
     blockList: DEContentData;
     isEditable: boolean;

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

@@ -34,6 +34,9 @@ export function _createBlockList({ blockList, isEditable, imageHostURL } = { blo
 }
 function __createTextBlock(data, isEditable) {
   const option = { class: ["de-block", "de-text-block", ...data.classList], innerHTML: data.textContent };
+  if (data.depth !== void 0) {
+    option["data-depth"] = data.depth;
+  }
   if (isEditable === true) {
     option.contenteditable = true;
   }
@@ -41,6 +44,9 @@ function __createTextBlock(data, isEditable) {
 }
 function __createHeadingBlock(data, isEditable) {
   const option = { class: ["de-block", "de-heading-block", ...data.classList], "data-level": data.level, innerHTML: data.textContent };
+  if (data.depth !== void 0) {
+    option["data-depth"] = data.depth;
+  }
   if (isEditable === true) {
     option.contenteditable = true;
   }
@@ -60,6 +66,8 @@ function __createImageBlock(data, isEditable, imageHostURL) {
     })
   );
   if (isEditable === true) {
+    areaChild.push(h("button", { class: ["de-btn", "de-btn-left"] }));
+    areaChild.push(h("button", { class: ["de-btn", "de-btn-right"] }));
   }
   imageChild.push(h("div", { class: ["de-image-area"], "data-maxwidth": data.maxWidth }, areaChild));
   if (data.caption !== "") {
@@ -73,14 +81,18 @@ function __createImageBlock(data, isEditable, imageHostURL) {
 }
 function __createListBlock(data, isEditable) {
   const liList = [];
+  const option = { class: ["de-block", "de-list-block"], "data-style": data.style };
+  if (data.depth !== void 0) {
+    option["data-depth"] = data.depth;
+  }
   data.child.forEach((child) => {
-    const option = { class: ["de-item", ...child.classList], innerHTML: child.textContent };
+    const option2 = { class: ["de-item", ...child.classList], innerHTML: child.textContent };
     if (isEditable === true) {
-      option.contenteditable = true;
+      option2.contenteditable = true;
     }
-    liList.push(h("li", option));
+    liList.push(h("li", option2));
   });
-  return h(data.element, { class: ["de-block", "de-list-block"], "data-style": data.style }, liList);
+  return h(data.element, option, liList);
 }
 function __createCodeBlock(data, isEditable) {
   const childList = [];

package/dist/runtime/utils/layout/body.d.ts

@@ -0,0 +1,4 @@
+import type { VNode, Ref } from "vue";
+import type { DragonEditorStore, DEContentData } from "../../type.d.mts.js";
+export declare function _getBodyVNodeStructure(store: Ref<DragonEditorStore>): VNode;
+export declare function _updateBodyStructure(bodyData: DEContentData, store: Ref<DragonEditorStore>): void;

package/dist/runtime/utils/layout/controlbar.d.ts

@@ -1,3 +1,3 @@
 import type { VNode, Ref } from "vue";
-import type { DragonEditorStore } from "../../type.js";
+import type { DragonEditorStore } from "../../type.d.mts.js";
 export declare function _getControlbarVNodeStructure(store: Ref<DragonEditorStore>): VNode;

package/dist/runtime/utils/layout/icon.d.ts

@@ -1,3 +1,3 @@
 import type { VNode } from "vue";
-import type { DEIconKind } from "../../type.js";
+import type { DEIconKind } from "../../type.d.mts.js";
 export declare function _getIconNode(kind: DEIconKind): VNode;

package/dist/runtime/utils/layout/menuBar.d.ts

@@ -1,3 +1,3 @@
 import type { VNode, Ref } from "vue";
-import type { DragonEditorStore } from "../../type.js";
+import type { DragonEditorStore } from "../../type.d.mts.js";
 export declare function _getMenuBarVNodeStructure(store: Ref<DragonEditorStore>): VNode;

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

@@ -1,5 +1,5 @@
 import type { Ref } from "vue";
-import type { DEBlockMenutype, DragonEditorStore, DEBlockData, DETextBlock, DEBlock, DEHeadingBlock, DEListBlock, DEListItem, DEImageBlock, DECodeBlock, DECustomBlock, DECodeblockTheme, DECodeblockLang, DEListStyle } from "../../type.js";
+import type { DEBlockMenutype, DragonEditorStore, DEBlockData, DETextBlock, DEBlock, DEHeadingBlock, DEListBlock, DEListItem, DEImageBlock, DECodeBlock, DECustomBlock, DECodeblockTheme, DECodeblockLang, DEListStyle } from "../../type.d.mts.js";
 export declare function _addBlock(type: DEBlockMenutype, store: Ref<DragonEditorStore>, data?: DEBlockData): void;
 export declare function _getCurrentBlock($target: EventTarget): {
     type: DEBlock;

package/dist/runtime/utils/style/anchor.d.ts

@@ -1,5 +1,5 @@
 import type { Ref } from "vue";
-import type { DragonEditorStore } from "../../type.js";
+import type { DragonEditorStore } from "../../type.d.mts.js";
 export declare function _setAnchorTag(url: string, isOutsideLink: boolean, store: Ref<DragonEditorStore>): void;
 export declare function _unsetAnchorTag(store: Ref<DragonEditorStore>): false | undefined;
 export declare function _updateAnchorTagValue(event: MouseEvent, store: Ref<DragonEditorStore>, previous?: boolean): void;

package/dist/runtime/utils/style/decoration.d.ts

@@ -1,4 +1,4 @@
 import type { Ref } from "vue";
-import type { DragonEditorStore, DETextalign } from "../../type.js";
+import type { DragonEditorStore, DETextalign } from "../../type.d.mts.js";
 export declare function _setDecoration(className: string, store: Ref<DragonEditorStore>): void;
 export declare function _setTextAlign(type: DETextalign, store: Ref<DragonEditorStore>): void;

package/dist/types.d.mts

@@ -1,7 +1,7 @@
 import type { NuxtModule } from '@nuxt/schema'
 
-import type { default as Module } from './module.js'
+import type { default as Module } from './module.mjs'
 
 export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
 
-export { default } from './module.js'
+export { default } from './module.mjs'

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "dragon-editor",
-    "version": "3.6.1",
-    "description": "Javascript WYSIWYG editor in Nuxt3!",
+    "version": "3.7.0",
+    "description": "Javascript WYSIWYG editor in Nuxt!",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/lovefields/dragonEditor.git"
@@ -10,18 +10,16 @@
     "type": "module",
     "exports": {
         ".": {
-            "types": "./dist/module.d.ts",
-            "import": "./dist/module.mjs",
-            "require": "./dist/module.cjs"
+            "types": "./dist/module.d.mts",
+            "import": "./dist/module.mjs"
         }
     },
-    "main": "./dist/module.cjs",
-    "types": "./dist/types.d.ts",
+    "main": "./dist/module.mjs",
     "files": [
         "dist"
     ],
     "scripts": {
-        "prepack": "nuxt-module-build",
+        "prepack": "nuxt-module-build build",
         "dev": "nuxi dev playground",
         "dev:build": "nuxi build playground",
         "dev:prepare": "nuxt-module-build build --stub && nuxi prepare playground",
@@ -31,21 +29,23 @@
         "test:watch": "vitest watch"
     },
     "dependencies": {
-        "@nuxt/kit": "^3.16.1",
-        "shiki": "^3.3.0"
+        "@nuxt/kit": "^4.0.3",
+        "shiki": "^3.12.1"
     },
     "devDependencies": {
-        "@nuxt/eslint-config": "^1.2.0",
-        "@nuxt/module-builder": "^0.8.4",
-        "@nuxt/schema": "^3.16.1",
-        "@nuxt/test-utils": "^3.17.2",
-        "@types/bun": "^1.2.8",
-        "changelogen": "^0.6.1",
-        "eslint": "^9.23.0",
-        "nuxt": "^3.16.1",
-        "sass": "^1.86.0",
-        "sass-embedded": "^1.86.0",
-        "vitest": "^3.0.9"
+        "@nuxt/eslint-config": "^1.9.0",
+        "@nuxt/module-builder": "^1.0.2",
+        "@nuxt/schema": "^4.0.3",
+        "@nuxt/test-utils": "^3.19.2",
+        "@types/bun": "^1.2.21",
+        "changelogen": "^0.6.2",
+        "eslint": "^9.34.0",
+        "nuxt": "^4.0.3",
+        "sass": "^1.91.0",
+        "sass-embedded": "^1.91.0",
+        "typescript": "^5.1.6",
+        "vitest": "^3.2.4",
+        "vue-tsc": "^3.0.6"
     },
     "keywords": [
         "editor",

package/dist/module.cjs

@@ -1,5 +0,0 @@
-module.exports = function(...args) {
-  return import('./module.mjs').then(m => m.default.call(this, ...args))
-}
-const _meta = module.exports.meta = require('./module.json')
-module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.ts

@@ -1,5 +0,0 @@
-import * as _nuxt_schema from '@nuxt/schema';
-
-declare const _default: _nuxt_schema.NuxtModule<_nuxt_schema.ModuleOptions, _nuxt_schema.ModuleOptions, false>;
-
-export { _default as default };

package/dist/types.d.ts

@@ -1,7 +0,0 @@
-import type { NuxtModule } from '@nuxt/schema'
-
-import type { default as Module } from './module'
-
-export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
-
-export { default } from './module'