dragon-editor 3.8.7 → 4.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "dragon-editor",
-    "version": "3.8.7",
+    "version": "4.0.1",
     "description": "Javascript WYSIWYG editor in Nuxt!",
     "repository": {
         "type": "git",
@@ -18,41 +18,55 @@
     "files": [
         "dist"
     ],
+    "typesVersions": {
+        "*": {
+            ".": [
+                "./dist/types.d.mts"
+            ]
+        }
+    },
+    "workspaces": [
+        "playground"
+    ],
     "scripts": {
         "prepack": "nuxt-module-build build",
-        "dev": "nuxi dev playground",
-        "dev:build": "nuxi build playground",
-        "dev:prepare": "nuxt-module-build build --stub && nuxi prepare playground",
+        "dev": "npm run dev:prepare && nuxt dev playground",
+        "dev:build": "nuxt build playground",
+        "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare playground",
         "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
         "lint": "eslint .",
         "test": "vitest run",
-        "test:watch": "vitest watch"
+        "test:watch": "vitest watch",
+        "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
     },
     "dependencies": {
-        "@nuxt/kit": "^4.0.3",
-        "shiki": "^3.12.1"
+        "@nuxt/kit": "^4.4.8",
+        "@pinia/nuxt": "^0.11.3",
+        "@vueuse/nuxt": "^14.3.0",
+        "highlight.js": "^11.11.1",
+        "pinia": "^3.0.4"
     },
     "devDependencies": {
-        "@nuxt/eslint-config": "^1.9.0",
+        "@nuxt/eslint-config": "^1.16.0",
         "@nuxt/module-builder": "^1.0.2",
-        "@nuxt/schema": "^4.0.3",
-        "@nuxt/test-utils": "^3.19.2",
-        "@types/bun": "^1.2.21",
+        "@nuxt/schema": "^4.4.8",
+        "@nuxt/test-utils": "^4.0.3",
+        "@types/bun": "^1.3.14",
         "changelogen": "^0.6.2",
-        "eslint": "^9.34.0",
-        "nuxt": "^4.0.3",
-        "sass": "^1.91.0",
-        "sass-embedded": "^1.91.0",
+        "eslint": "^10.5.0",
+        "nuxt": "^4.4.8",
+        "sass": "^1.101.0",
+        "sass-embedded": "^1.100.0",
         "typescript": "^5.1.6",
-        "vitest": "^3.2.4",
-        "vue-tsc": "^3.0.6"
+        "vitest": "^4.1.9",
+        "vue-tsc": "^3.3.5"
     },
     "keywords": [
         "editor",
         "wysiwyg-editor",
         "korean",
         "language",
-        "nuxt3"
+        "nuxt4"
     ],
     "author": "Lovefields <lovefield@dico.me> (https://dico.me)",
     "bugs": {

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

@@ -1,7 +0,0 @@
-import type { Ref } from "vue";
-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;
-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,110 +0,0 @@
-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) {
-    const $block = $target.closest(".de-block");
-    if ($block !== null && $block.classList.contains("de-image-block") === true && $target.classList.contains("de-btn") === true) {
-      _updateCurrentBlock(event, store);
-      store.value.activeStatus.imageResizeEvent = true;
-      if (event.type === "touchstart") {
-        store.value.eventStatus.imageResizeEventStartX = event.touches[0].clientX;
-      } else {
-        store.value.eventStatus.imageResizeEventStartX = event.clientX;
-      }
-      if ($target.classList.contains("de-btn-left") === true) {
-        store.value.eventStatus.imageResizeEventType = "left";
-      } else {
-        store.value.eventStatus.imageResizeEventType = "right";
-      }
-      const $imgArea = $block.querySelector(".de-image-area");
-      store.value.eventStatus.imageResizeEventEndX = store.value.eventStatus.imageResizeEventStartX;
-      store.value.eventStatus.imageResizeCurrentWidth = parseInt($imgArea.dataset["maxwidth"] ?? "25");
-    }
-  }
-}
-export function _imageResizeEvent(event, store) {
-  if (store.value.activeStatus.imageResizeEvent === true && store.value.controlStatus.$currentBlock !== null && store.value.$body !== null) {
-    const $imgArea = store.value.controlStatus.$currentBlock.querySelector(".de-image-area");
-    const contentWidth = store.value.$body.offsetWidth / 2;
-    let gap = 0;
-    if (event.type === "touchmove") {
-      store.value.eventStatus.imageResizeEventEndX = event.touches[0].clientX;
-    } else {
-      store.value.eventStatus.imageResizeEventEndX = event.clientX;
-    }
-    if (store.value.eventStatus.imageResizeEventType === "right") {
-      gap = Math.floor(store.value.eventStatus.imageResizeEventStartX - store.value.eventStatus.imageResizeEventEndX);
-    } else {
-      gap = Math.floor(store.value.eventStatus.imageResizeEventEndX - store.value.eventStatus.imageResizeEventStartX);
-    }
-    const percent = 100 / contentWidth * gap;
-    let value = Math.floor(store.value.eventStatus.imageResizeCurrentWidth - percent);
-    if (value < 25) {
-      value = 25;
-    }
-    if (value > 100) {
-      value = 100;
-    }
-    $imgArea.dataset["maxwidth"] = String(value);
-  }
-}
-export function _imageResizeEventEnd(event, store) {
-  if (store.value.activeStatus.imageResizeEvent === true) {
-    store.value.activeStatus.imageResizeEvent = false;
-    _updateModelData(store);
-  }
-}
-export function _moveBlock(type, store) {
-  if (store.value.controlStatus.$currentBlock !== null) {
-    const $block = store.value.controlStatus.$currentBlock;
-    let $target;
-    if (type === "up") {
-      $target = $block.previousElementSibling;
-    } else {
-      $target = $block.nextElementSibling;
-    }
-    if ($target !== null) {
-      $target.insertAdjacentHTML(type === "up" ? "beforebegin" : "afterend", $block.outerHTML);
-      $block.remove();
-      if (type === "up") {
-        store.value.controlStatus.$currentBlock = $target.previousElementSibling;
-      } else {
-        store.value.controlStatus.$currentBlock = $target.nextElementSibling;
-      }
-    }
-    _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 bodyRect = $element.getBoundingClientRect();
-      const blockList = $element.querySelectorAll(".de-block");
-      const $targetBlock = blockList[blockList.length - 1];
-      let isAllowed = true;
-      switch (true) {
-        case event.clientX > bodyRect.left + bodyRect.width - 20:
-        case event.clientX < bodyRect.left + 20:
-          isAllowed = false;
-      }
-      if (isAllowed === true) {
-        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/data.d.ts

@@ -1,8 +0,0 @@
-import type { Ref } from "vue";
-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

@@ -1,379 +0,0 @@
-import { _getCurrentBlock } from "../node/index.js";
-export const CODEBLOCKLANG = [
-  {
-    text: "Plain Text",
-    code: "text"
-  },
-  {
-    text: "C#",
-    code: "csharp"
-  },
-  {
-    text: "C",
-    code: "c"
-  },
-  {
-    text: "C++",
-    code: "cpp"
-  },
-  {
-    text: "CSS",
-    code: "css"
-  },
-  {
-    text: "Dockerfile",
-    code: "dockerfile"
-  },
-  {
-    text: "Go",
-    code: "go"
-  },
-  {
-    text: "HTML, XML",
-    code: "html"
-  },
-  {
-    text: "JSON",
-    code: "json"
-  },
-  {
-    text: "Java",
-    code: "java"
-  },
-  {
-    text: "JavaScript",
-    code: "javascript"
-  },
-  {
-    text: "TypeScript",
-    code: "typescript"
-  },
-  {
-    text: "Kotlin",
-    code: "kotlin"
-  },
-  {
-    text: "Lua",
-    code: "lua"
-  },
-  {
-    text: "Markdown",
-    code: "markdown"
-  },
-  {
-    text: "Nginx",
-    code: "nginx"
-  },
-  {
-    text: "PHP",
-    code: "php"
-  },
-  {
-    text: "Python",
-    code: "python"
-  },
-  {
-    text: "Ruby",
-    code: "ruby"
-  },
-  {
-    text: "SCSS",
-    code: "scss"
-  },
-  {
-    text: "SQL",
-    code: "sql"
-  },
-  {
-    text: "Shell",
-    code: "shellscript"
-  },
-  {
-    text: "Swift",
-    code: "swift"
-  },
-  {
-    text: "YAML",
-    code: "yaml"
-  }
-];
-export function _updateModelData(store) {
-  const $body = store.value.$body;
-  if ($body !== null) {
-    const $blockList = $body.querySelectorAll(".de-block");
-    const workList = [];
-    $blockList.forEach(($el) => {
-      let classListText = $el.classList.value.replaceAll("de-block", "");
-      let classList = "";
-      switch (true) {
-        case $el.classList.contains("de-text-block"):
-          workList.push(
-            new Promise((done) => {
-              classList = classListText.replaceAll("de-text-block", "").trim();
-              const textBlockDepth = $el.dataset["depth"];
-              let textBlockData = {
-                type: "text",
-                classList: classList === "" ? [] : classList.split(" "),
-                textContent: $el.innerHTML
-              };
-              if (textBlockDepth !== void 0) {
-                textBlockData.depth = parseInt(textBlockDepth);
-              }
-              done(textBlockData);
-            })
-          );
-          break;
-        case $el.classList.contains("de-heading-block"):
-          workList.push(
-            new Promise((done) => {
-              classList = classListText.replaceAll("de-heading-block", "").trim();
-              const headingBlockDepth = $el.dataset["depth"];
-              let headingBlockData = {
-                type: "heading",
-                id: $el.id,
-                level: parseInt($el.dataset["level"] ?? "3"),
-                classList: classList === "" ? [] : classList.split(" "),
-                textContent: $el.innerHTML
-              };
-              if (headingBlockDepth !== void 0) {
-                headingBlockData.depth = parseInt(headingBlockDepth);
-              }
-              done(headingBlockData);
-            })
-          );
-          break;
-        case $el.classList.contains("de-list-block"):
-          workList.push(
-            new Promise((done) => {
-              const $li = $el.querySelectorAll(".de-item");
-              const liList = [];
-              classList = classListText.replaceAll("de-list-block", "").trim();
-              $li.forEach(($child) => {
-                let childClassName = $child.classList.value.replace("de-item", "");
-                liList.push({
-                  classList: childClassName === "" ? [] : childClassName.split(" "),
-                  textContent: $child.innerHTML
-                });
-              });
-              const listBlockDepth = $el.dataset["depth"];
-              let listBlockData = {
-                type: "list",
-                element: $el.tagName.toLowerCase(),
-                style: $el.dataset["style"],
-                child: liList
-              };
-              if (listBlockDepth !== void 0) {
-                listBlockData.depth = parseInt(listBlockDepth);
-              }
-              done(listBlockData);
-            })
-          );
-          break;
-        case $el.classList.contains("de-image-block"):
-          workList.push(
-            new Promise((done) => {
-              const $imageArea = $el.querySelector(".de-image-area");
-              const $img = $el.querySelector(".de-img");
-              const $caption = $el.querySelector(".de-caption");
-              classList = classListText.replaceAll("de-image-block", "").trim();
-              if ($img.complete === false) {
-                $img.onload = () => {
-                  done({
-                    type: "image",
-                    src: $img.src.replace(store.value.imageHostURL, ""),
-                    maxWidth: parseInt($imageArea.dataset["maxwidth"] ?? "25"),
-                    width: $img.width,
-                    height: $img.height,
-                    caption: $caption?.textContent ?? "",
-                    classList: classList === "" ? [] : classList.split(" ")
-                  });
-                };
-              } else {
-                done({
-                  type: "image",
-                  src: $img.src.replace(store.value.imageHostURL, ""),
-                  maxWidth: parseInt($imageArea.dataset["maxwidth"] ?? "25"),
-                  width: $img.width,
-                  height: $img.height,
-                  caption: $caption?.textContent ?? "",
-                  classList: classList === "" ? [] : classList.split(" ")
-                });
-              }
-            })
-          );
-          break;
-        case $el.classList.contains("de-code-block"):
-          workList.push(
-            new Promise((done) => {
-              const $language = $el.querySelector(".de-language");
-              const $fileName = $el.querySelector(".de-filename");
-              const $codeBlock = $el.querySelector(".de-code-content");
-              let language = "text";
-              classList = classListText.replaceAll("de-code-block", "").trim();
-              if ($language !== null) {
-                const value = $language.textContent ?? "";
-                const targetValue = CODEBLOCKLANG.find((item) => item.text === value);
-                if (targetValue !== void 0) {
-                  language = targetValue.code;
-                }
-              }
-              done({
-                type: "code",
-                theme: $el.dataset["theme"],
-                filename: $fileName?.textContent || "",
-                language,
-                textContent: $codeBlock === null ? "" : $codeBlock.innerHTML
-              });
-            })
-          );
-          break;
-        case $el.classList.contains("de-divider-block"):
-          workList.push(
-            new Promise((done) => {
-              done({
-                type: "divider"
-              });
-            })
-          );
-          break;
-        default:
-          workList.push(
-            new Promise((done) => {
-              classList = classListText.replaceAll("de-custom-block", "").trim();
-              done({
-                type: "custom",
-                classList: classList === "" ? [] : classList.split(" "),
-                textContent: $el.innerHTML
-              });
-            })
-          );
-      }
-    });
-    Promise.all(workList).then((data) => {
-      store.value.emit("update:modelValue", data);
-    });
-  }
-}
-export function _getDefaultBlockData(type) {
-  let data = { type: "text", classList: [], textContent: "" };
-  switch (type) {
-    case "heading1":
-    case "heading2":
-    case "heading3":
-      data = {
-        type: "heading",
-        level: parseInt(type.replace("heading", "")),
-        id: _generateId(),
-        classList: [],
-        textContent: ""
-      };
-      break;
-    case "ol":
-    case "ul":
-      data = {
-        type: "list",
-        element: type,
-        style: type === "ol" ? "decimal" : "disc",
-        child: [
-          {
-            classList: [],
-            textContent: ""
-          }
-        ]
-      };
-      break;
-    case "code":
-      data = {
-        type: "code",
-        language: "text",
-        theme: "github-light",
-        filename: "",
-        textContent: ""
-      };
-      break;
-    case "divider":
-      data = {
-        type: "divider"
-      };
-      break;
-  }
-  return data;
-}
-export function _generateId() {
-  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-  let str = "";
-  for (let i = 0; i < 6; i += 1) {
-    str += chars.charAt(Math.floor(Math.random() * chars.length));
-  }
-  return str;
-}
-export function _updateControlBarStatus(store) {
-  if (store.value.controlStatus.$currentBlock !== null) {
-    const { type } = _getCurrentBlock(store.value.controlStatus.$currentBlock);
-    const allowTypeList = ["code", "ol", "ul"];
-    if (allowTypeList.includes(type) === true) {
-      switch (type) {
-        case "code":
-          __updateCodeBlockStyle(store);
-          break;
-        case "ol":
-        case "ul":
-          __updateListBlockStyle(store);
-          break;
-      }
-    }
-  }
-}
-function __updateCodeBlockStyle(store) {
-  if (store.value.controlStatus.$currentBlock !== null) {
-    const $block = store.value.controlStatus.$currentBlock;
-    const $language = $block.querySelector(".de-language");
-    let language = "text";
-    if ($language !== null) {
-      const value = $language.textContent ?? "";
-      const targetValue = CODEBLOCKLANG.find((item) => item.text === value);
-      if (targetValue !== void 0) {
-        language = targetValue.code;
-      }
-    }
-    store.value.controlStatus.codeBlockTheme = $block.dataset["theme"] ?? "github-light";
-    store.value.controlStatus.codeBlockLang = language;
-  }
-}
-function __updateListBlockStyle(store) {
-  if (store.value.controlStatus.$currentBlock !== null) {
-    const $block = store.value.controlStatus.$currentBlock;
-    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/mouse.d.ts

@@ -1,11 +0,0 @@
-import type { Ref } from "vue";
-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;
-export declare function _editorMouseupEvent(event: MouseEvent, store: Ref<DragonEditorStore>): void;
-export declare function _editorMouseleaveEvent(event: MouseEvent, store: Ref<DragonEditorStore>): void;
-export declare function _checkOthersideClick(event: MouseEvent, store: Ref<DragonEditorStore>): void;
-export declare function _openAnchorArea(event: MouseEvent, store: Ref<DragonEditorStore>): void;
-export declare function _decideWhetherOpenControlBar(store: Ref<DragonEditorStore>): void;
-export declare function _editorContextMenuEvent(event: MouseEvent, store: Ref<DragonEditorStore>): void;

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

@@ -1,85 +0,0 @@
-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);
-}
-export function _editorMousemoveEvent(event, store) {
-  _imageResizeEvent(event, store);
-}
-export function _editorMouseupEvent(event, store) {
-  _imageResizeEventEnd(event, store);
-  _updateAnchorTagValue(event, store);
-}
-export function _editorMouseleaveEvent(event, store) {
-  _imageResizeEventEnd(event, store);
-}
-export function _checkOthersideClick(event, store) {
-  _updateCurrentBlock(event, store);
-  __blockAddOthersideEvent(event, store);
-  _decideWhetherOpenControlBar(store);
-}
-function __blockAddOthersideEvent(event, store) {
-  const $target = event.target;
-  if ($target !== null) {
-    const $menuBtn = $target.closest(".js-de-menu-add");
-    const $menuArea = $target.closest(".js-de-block-menu-area");
-    const $linkAreaBtn = $target.closest(".js-de-link-btn");
-    const $linkInputArea = $target.closest(".js-de-link-exit-area");
-    if ($menuBtn === null && $menuArea === null) {
-      store.value.activeStatus.addBlockMenu = false;
-    }
-    if ($linkAreaBtn === null && $linkInputArea === null) {
-      store.value.activeStatus.anchorInputArea = false;
-    }
-  }
-}
-export function _openAnchorArea(event, store) {
-  store.value.controlStatus.previousCorsorData = store.value.cursorData;
-  _updateAnchorTagValue(event, store, true);
-  _updateHeadingBlockList(store);
-  if (store.value.controlStatus.anchorHref !== "" && store.value.controlStatus.anchorHref.charAt(0) === "#") {
-    store.value.controlStatus.anchorTabType = "heading";
-  } else {
-    store.value.controlStatus.anchorTabType = "url";
-  }
-  store.value.activeStatus.anchorInputArea = !store.value.activeStatus.anchorInputArea;
-}
-export function _decideWhetherOpenControlBar(store) {
-  if (store.value.controlStatus.$currentBlock !== null) {
-    const { type, $element } = _getCurrentBlock(store.value.controlStatus.$currentBlock);
-    const allowTypeList = ["code", "ol", "ul"];
-    if (allowTypeList.includes(type) === true && $element !== null) {
-      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;
-      }
-      store.value.controlBar.x = x;
-      store.value.controlBar.y = y;
-      store.value.controlBar.$element = $element;
-      store.value.controlBar.active = true;
-    } else {
-      store.value.controlBar.active = false;
-    }
-  } else {
-    store.value.controlBar.active = false;
-  }
-}
-export function _editorContextMenuEvent(event, store) {
-}

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

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