dragon-editor 3.4.4 → 3.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "dragon-editor",
-    "version": "3.4.4",
+    "version": "3.5.0",
     "description": "Javascript WYSIWYG editor in Nuxt3!",
     "repository": {
         "type": "git",
@@ -24,29 +24,28 @@
         "prepack": "nuxt-module-build",
         "dev": "nuxi dev playground",
         "dev:build": "nuxi build playground",
-        "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
+        "dev:prepare": "nuxt-module-build build --stub && nuxi 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"
     },
     "dependencies": {
-        "@nuxt/kit": "^3.5.0",
-        "@pinia/nuxt": "^0.5.3",
-        "highlight.js": "^11.10.0",
-        "sass": "^1.77.8"
+        "@nuxt/kit": "^3.16.1",
+        "highlight.js": "^11.11.1"
     },
     "devDependencies": {
-        "@nuxt/eslint-config": "^0.1.1",
-        "@nuxt/module-builder": "^0.3.1",
-        "@nuxt/schema": "^3.5.0",
-        "@nuxt/test-utils": "^3.5.0",
-        "@types/node": "^18",
-        "changelogen": "^0.5.3",
-        "eslint": "^8.40.0",
-        "nuxt": "^3.5.0",
-        "sass-embedded": "^1.77.8",
-        "vitest": "^0.31.0"
+        "@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"
     },
     "keywords": [
         "editor",

package/dist/runtime/store.d.ts

@@ -1,11 +0,0 @@
-import "./type.d.ts";
-export declare const useEditorStore: import("pinia").StoreDefinition<"editorStore", EditorStore, {}, {
-    setWrapElement(value: HTMLDivElement): void;
-    setContentElement(value: HTMLDivElement): void;
-    setParentWrapElement(value: HTMLElement | Window): void;
-    setCursorData(data: DEditorCursor): void;
-    setCurrentBlock(block: HTMLElement | null): void;
-    setContrulBar(value: HTMLDivElement): void;
-    controlBarActive(): void;
-    controlBarDeactive(): void;
-}>;

package/dist/runtime/store.mjs

@@ -1,51 +0,0 @@
-import { defineStore } from "pinia";
-import "./type.d.ts";
-export const useEditorStore = defineStore("editorStore", {
-  state: () => ({
-    cursorData: null,
-    message: {
-      linkTextNoStyle: "Link text can't set any style."
-    },
-    controlBar: {
-      active: false,
-      x: 0,
-      y: 0,
-      $element: null
-    },
-    $currentBlock: null,
-    $editor: null,
-    $content: null,
-    $parentWrap: null
-  }),
-  actions: {
-    setWrapElement(value) {
-      this.$editor = value;
-    },
-    setContentElement(value) {
-      this.$content = value;
-    },
-    setParentWrapElement(value) {
-      this.$parentWrap = value;
-    },
-    setCursorData(data) {
-      this.cursorData = data;
-    },
-    setCurrentBlock(block) {
-      this.$currentBlock = block;
-    },
-    setContrulBar(value) {
-      this.controlBar.$element = value;
-    },
-    controlBarActive() {
-      if (this.$currentBlock !== null) {
-        const currentRect = this.$currentBlock.getBoundingClientRect();
-        this.controlBar.active = true;
-        this.controlBar.x = Math.floor(currentRect.x + currentRect.width / 2);
-        this.controlBar.y = Math.floor(currentRect.y - 50);
-      }
-    },
-    controlBarDeactive() {
-      this.controlBar.active = false;
-    }
-  }
-});

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

@@ -1,13 +0,0 @@
-import "../type.d.ts";
-export declare function _getBlockType(element: HTMLElement): {
-    $element: Element;
-    type: string;
-};
-export declare function _createTextBlock(data?: DETextBlock): HTMLParagraphElement;
-export declare function _createHeadingBlock(data: DEHeadingBlock): HTMLHeadingElement;
-export declare function _createListBlock(data: DEListBlock): HTMLElement;
-export declare function _createListItemBlock(child?: DEListItem): HTMLLIElement;
-export declare function _createImageBlock(data: DEImageBlock, imageHostURL?: string): HTMLDivElement;
-export declare function _createCodeBlock(data: DECodeBlock): HTMLDivElement;
-export declare function _generateId(): string;
-export declare function _createCustomBlock(data: DECustomBlock): HTMLDivElement;

package/dist/runtime/utils/block.mjs

@@ -1,144 +0,0 @@
-import "../type.d.ts";
-export function _getBlockType(element) {
-  const $block = element.closest(".de-block");
-  let typeName;
-  switch (true) {
-    case $block.classList.contains("de-text-block"):
-      typeName = "text";
-      break;
-    case $block.classList.contains("de-heading-block"):
-      typeName = "heading";
-      break;
-    case $block.classList.contains("de-list-block"):
-      typeName = "list";
-      break;
-    case $block.classList.contains("de-image-block"):
-      typeName = "image";
-      break;
-    case $block.classList.contains("de-code-block"):
-      typeName = "code";
-      break;
-    default:
-      typeName = "other";
-  }
-  return {
-    $element: $block,
-    type: typeName
-  };
-}
-export function _createTextBlock(data = { type: "text", classList: [], textContent: "" }) {
-  const $paragraph = document.createElement("p");
-  $paragraph.classList.add("de-block", "de-text-block", ...data.classList);
-  $paragraph.setAttribute("contenteditable", "true");
-  if (data.textContent !== "") {
-    $paragraph.innerHTML = data.textContent;
-  }
-  return $paragraph;
-}
-export function _createHeadingBlock(data) {
-  const $headingBlock = document.createElement(`h${data.level}`);
-  if (data.id === "") {
-    $headingBlock.id = _generateId();
-  } else {
-    $headingBlock.id = data.id;
-  }
-  $headingBlock.classList.add("de-block", "de-heading-block", ...data.classList);
-  $headingBlock.dataset["level"] = String(data.level);
-  $headingBlock.setAttribute("contenteditable", "true");
-  if (data.textContent !== "") {
-    $headingBlock.innerHTML = data.textContent;
-  }
-  return $headingBlock;
-}
-export function _createListBlock(data) {
-  const $block = document.createElement(data.element);
-  $block.classList.add("de-block", "de-list-block");
-  $block.dataset["style"] = data.style;
-  data.child.forEach((child) => {
-    $block.appendChild(_createListItemBlock(child));
-  });
-  return $block;
-}
-export function _createListItemBlock(child = { textContent: "", classList: [] }) {
-  const $li = document.createElement("li");
-  $li.classList.add("de-item", ...child.classList);
-  $li.setAttribute("contenteditable", "true");
-  if (child.textContent !== "") {
-    $li.innerHTML = child.textContent;
-  }
-  return $li;
-}
-export function _createImageBlock(data, imageHostURL = "") {
-  const $wrap = document.createElement("div");
-  const $div = document.createElement("div");
-  const $leftBtn = document.createElement("button");
-  const $rightBtn = document.createElement("button");
-  const $image = document.createElement("img");
-  const $p = document.createElement("p");
-  $wrap.classList.add("de-block", "de-image-block", ...data.classList);
-  $div.classList.add("de-image-area");
-  $leftBtn.classList.add("de-btn", "de-btn-left");
-  $rightBtn.classList.add("de-btn", "de-btn-right");
-  $image.classList.add("de-img");
-  $p.contentEditable = "true";
-  $p.classList.add("de-caption");
-  if (data.width / data.height < 1) {
-    $div.dataset["maxwidth"] = "40";
-  } else {
-    $div.dataset["maxwidth"] = String(data.maxWidth);
-  }
-  $image.src = imageHostURL + data.src;
-  $image.width = data.width;
-  $image.height = data.height;
-  $image.draggable = false;
-  if (data.caption !== void 0) {
-    $p.textContent = data.caption;
-  }
-  $div.appendChild($image);
-  $div.appendChild($leftBtn);
-  $div.appendChild($rightBtn);
-  $wrap.appendChild($div);
-  $wrap.appendChild($p);
-  return $wrap;
-}
-export function _createCodeBlock(data) {
-  const $wrap = document.createElement("div");
-  const $file = document.createElement("p");
-  const $lang = document.createElement("p");
-  const $pre = document.createElement("pre");
-  const $code = document.createElement("code");
-  $wrap.classList.add("de-block", "de-code-block");
-  $wrap.dataset["theme"] = data.theme;
-  $file.contentEditable = "true";
-  $file.classList.add("de-filename");
-  $lang.textContent = data.language;
-  $lang.classList.add("de-language");
-  $pre.classList.add("de-pre");
-  $code.contentEditable = "true";
-  $code.classList.add("de-code-content");
-  if (data.filename !== "") {
-    $file.textContent = data.filename;
-  }
-  if (data.textContent !== "") {
-    $code.innerHTML = data.textContent;
-  }
-  $pre.appendChild($code);
-  $wrap.appendChild($file);
-  $wrap.appendChild($lang);
-  $wrap.appendChild($pre);
-  return $wrap;
-}
-export function _generateId() {
-  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-  let str = "";
-  for (let i = 0; i < 6; i++) {
-    str += chars.charAt(Math.floor(Math.random() * chars.length));
-  }
-  return str;
-}
-export function _createCustomBlock(data) {
-  const $block = document.createElement("div");
-  $block.classList.add("de-block", "de-custom-block", ...data.classList);
-  $block.innerHTML = data.textContent;
-  return $block;
-}

package/dist/runtime/utils/content.d.ts

@@ -1,2 +0,0 @@
-import "../type.d.ts";
-export declare function _addBlockToContent($block: HTMLElement, store: any): void;

package/dist/runtime/utils/content.mjs

@@ -1,19 +0,0 @@
-import { _clenupCursor } from "./cursor.mjs";
-import "../type.d.ts";
-export function _addBlockToContent($block, store) {
-  if (store.cursorData === null && store.$currentBlock === null) {
-    store.$content.insertAdjacentElement("beforeend", $block);
-  } else {
-    _clenupCursor(store);
-    if (store.$currentBlock === null) {
-      let $target = store.cursorData.startNode;
-      if ($target.constructor.name === "Text") {
-        $target = $target.parentNode;
-      }
-      const $targetBlock = $target.closest(".de-block");
-      $targetBlock.insertAdjacentElement("afterend", $block);
-    } else {
-      store.$currentBlock.insertAdjacentElement("afterend", $block);
-    }
-  }
-}

package/dist/runtime/utils/controlBar.d.ts

@@ -1,9 +0,0 @@
-import type { Ref } from "vue";
-import "../type.d.ts";
-export declare function _getCodeBlockTheme(): DECodeItem[];
-export declare function _getCodeBlockLanguage(): DECodeItem[];
-export declare function _setCodeBlockTheme(store: any, theme: string): void;
-export declare function _setCodeBlockLanguage(store: any, lang: string): void;
-export declare function _updateCodeBlockStyle(store: any, themeRef: Ref<string>, langRef: Ref<string>): void;
-export declare function _setListBlockStyle(store: any, style: DEListStyle): void;
-export declare function _updateListBlockStyle(store: any, styleRef: Ref<DEListStyle>): void;

package/dist/runtime/utils/controlBar.mjs

@@ -1,172 +0,0 @@
-import { _getBlockType } from "./block.mjs";
-import hljs from "highlight.js";
-import "../type.d.ts";
-export function _getCodeBlockTheme() {
-  return [
-    {
-      text: "GitHub",
-      code: "github"
-    },
-    {
-      text: "GitHub Dark Dimmed",
-      code: "github-dark-dimmed"
-    }
-  ];
-}
-export function _getCodeBlockLanguage() {
-  return [
-    {
-      text: "Plain Text",
-      code: "text"
-    },
-    {
-      text: "Bash",
-      code: "bash"
-    },
-    {
-      text: "C#",
-      code: "csharp"
-    },
-    {
-      text: "C",
-      code: "c"
-    },
-    {
-      text: "C++",
-      code: "cpp"
-    },
-    {
-      text: "CSS",
-      code: "css"
-    },
-    {
-      text: "Django",
-      code: "django"
-    },
-    {
-      text: "Dockerfile",
-      code: "dockerfile"
-    },
-    {
-      text: "Go",
-      code: "go"
-    },
-    {
-      text: "HTML, XML",
-      code: "html"
-    },
-    {
-      text: "JSON",
-      code: "json"
-    },
-    {
-      text: "Java",
-      code: "java"
-    },
-    {
-      text: "JavaScript",
-      code: "js"
-    },
-    {
-      text: "TypeScript",
-      code: "ts"
-    },
-    {
-      text: "Kotlin",
-      code: "kotlin"
-    },
-    {
-      text: "Lua",
-      code: "lua"
-    },
-    {
-      text: "Markdown",
-      code: "md"
-    },
-    {
-      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: "shell"
-    },
-    {
-      text: "Swift",
-      code: "swift"
-    },
-    {
-      text: "YAML",
-      code: "yml"
-    }
-  ];
-}
-export function _setCodeBlockTheme(store, theme) {
-  if (store.$currentBlock !== null) {
-    const { $element, type } = _getBlockType(store.$currentBlock);
-    if (type === "code") {
-      $element.dataset["theme"] = theme;
-    }
-  }
-}
-export function _setCodeBlockLanguage(store, lang) {
-  if (store.$currentBlock !== null) {
-    const { $element, type } = _getBlockType(store.$currentBlock);
-    if (type === "code") {
-      const $langText = $element.querySelector(".de-language");
-      const $code = $element.querySelector(".de-code-content");
-      const convert = hljs.highlight($code.textContent ?? "", { language: lang });
-      $langText.textContent = convert._top.name ?? "";
-      $code.innerHTML = convert.value;
-    }
-  }
-}
-export function _updateCodeBlockStyle(store, themeRef, langRef) {
-  if (store.$currentBlock !== null) {
-    const { $element, type } = _getBlockType(store.$currentBlock);
-    if (type === "code") {
-      const theme = $element.dataset["theme"] ?? "github";
-      const $langText = $element.querySelector(".de-language").textContent;
-      const langItem = _getCodeBlockLanguage().find((item) => item.text === $langText);
-      themeRef.value = theme;
-      langRef.value = langItem?.code ?? "Plain Text";
-    }
-  }
-}
-export function _setListBlockStyle(store, style) {
-  if (store.$currentBlock !== null) {
-    const { $element, type } = _getBlockType(store.$currentBlock);
-    if (type === "list") {
-      $element.dataset["style"] = style;
-    }
-  }
-}
-export function _updateListBlockStyle(store, styleRef) {
-  if (store.$currentBlock !== null) {
-    const { $element, type } = _getBlockType(store.$currentBlock);
-    if (type === "list") {
-      const style = $element.dataset["style"];
-      styleRef.value = style;
-    }
-  }
-}

package/dist/runtime/utils/convertor.d.ts

@@ -1,3 +0,0 @@
-import "../type.d.ts";
-export declare function _getContentData($content: HTMLDivElement, imageHostURL: string): DEContentData;
-export declare function _setContentData(data: DEContentData, store: any, imageHostURL: string): void;

package/dist/runtime/utils/convertor.mjs

@@ -1,138 +0,0 @@
-import { _createTextBlock, _createHeadingBlock, _createListBlock, _createImageBlock, _createCodeBlock, _createCustomBlock } from "./block.mjs";
-import "../type.d.ts";
-export function _getContentData($content, imageHostURL) {
-  const childList = $content.children;
-  const data = [];
-  [...childList].forEach(($child) => {
-    const tagName = $child.tagName;
-    switch (tagName) {
-      case "P":
-        data.push(converteParagraphToData($child));
-        break;
-      case "H1":
-        data.push(converteHeadingToData($child, 1));
-        break;
-      case "H2":
-        data.push(converteHeadingToData($child, 2));
-        break;
-      case "H3":
-        data.push(converteHeadingToData($child, 3));
-        break;
-      case "UL":
-      case "OL":
-        data.push(converteListToData($child));
-        break;
-      case "DIV":
-        data.push(converteDivToData($child, imageHostURL));
-        break;
-    }
-  });
-  return data;
-}
-export function _setContentData(data, store, imageHostURL) {
-  const childList = [];
-  data.forEach((item) => {
-    switch (item.type) {
-      case "text":
-        childList.push(_createTextBlock(item));
-        break;
-      case "heading":
-        childList.push(_createHeadingBlock(item));
-        break;
-      case "list":
-        childList.push(_createListBlock(item));
-        break;
-      case "image":
-        childList.push(_createImageBlock(item, imageHostURL));
-        break;
-      case "code":
-        childList.push(_createCodeBlock(item));
-        break;
-      case "custom":
-        childList.push(_createCustomBlock(item));
-        break;
-    }
-  });
-  store.$content.replaceChildren(...childList);
-}
-function converteParagraphToData($child) {
-  return {
-    type: "text",
-    classList: getClassListWithoutDefaultClass($child),
-    textContent: $child.innerHTML
-  };
-}
-function converteHeadingToData($child, level) {
-  return {
-    type: "heading",
-    level,
-    id: $child.id,
-    classList: getClassListWithoutDefaultClass($child),
-    textContent: $child.innerHTML
-  };
-}
-function converteListToData($child) {
-  return {
-    type: "list",
-    element: $child.tagName.toLowerCase(),
-    style: $child.dataset["style"],
-    child: [...$child.children].map(($li) => {
-      return {
-        classList: getClassListWithoutDefaultClass($li),
-        textContent: $li.innerHTML
-      };
-    })
-  };
-}
-function converteDivToData($child, imageHostURL) {
-  let data;
-  switch (true) {
-    case $child.classList.contains("de-image-block"):
-      data = convertImageBlock($child, imageHostURL);
-      break;
-    case $child.classList.contains("de-code-block"):
-      data = convertCodeBlock($child);
-      break;
-    case $child.classList.contains("de-custom-block"):
-      data = convertCustomBlock($child);
-      break;
-  }
-  return data;
-}
-function convertImageBlock($imageBlock, imageHostURL) {
-  const $imgArea = $imageBlock.querySelector(".de-image-area");
-  const $img = $imageBlock.querySelector(".de-img");
-  const $caption = $imageBlock.querySelector(".de-caption");
-  return {
-    type: "image",
-    src: imageHostURL === "" ? $img.src : $img.src.replace(imageHostURL, ""),
-    maxWidth: parseInt($imgArea.dataset["maxwidth"]),
-    width: $img.width,
-    height: $img.height,
-    caption: $caption.textContent ?? "",
-    classList: getClassListWithoutDefaultClass($imageBlock)
-  };
-}
-function convertCodeBlock($codeBlock) {
-  const $code = $codeBlock.querySelector(".de-code-content");
-  const $file = $codeBlock.querySelector(".de-filename");
-  const $lang = $codeBlock.querySelector(".de-language");
-  return {
-    type: "code",
-    theme: $codeBlock.dataset["theme"],
-    filename: $file?.textContent ?? "",
-    language: $lang?.textContent ?? "text",
-    textContent: $code?.innerHTML ?? ""
-  };
-}
-function convertCustomBlock($block) {
-  return {
-    type: "custom",
-    classList: getClassListWithoutDefaultClass($block),
-    textContent: $block.innerHTML
-  };
-}
-function getClassListWithoutDefaultClass($element) {
-  const defaultClassList = ["de-block", "de-text-block", "de-heading-block", "de-list-block", "de-image-block"];
-  return [...$element.classList].filter((className) => defaultClassList.includes(className) === false);
-}

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

@@ -1,6 +0,0 @@
-import "../type.d.ts";
-export declare function _setCursorData(store: any): void;
-export declare function _setCursor($target: Node, startIdx: number): void;
-export declare function _setRangeCursor($startTarget: Element, $endTarget: Element, startIdx: number, endIdx: number): void;
-export declare function _clenupCursor(store: any): void;
-export declare function _soltingCursorDataOnElement(cursorData: DEditorCursor, $element: HTMLElement): DEArrangeCursorData;

package/dist/runtime/utils/keyboardEvent.d.ts

@@ -1,10 +0,0 @@
-export declare function _elementKeyEvent(event: KeyboardEvent, store: any): void;
-/**
- * 핫 키 이벤트
- */
-export declare function _hotKeyEvent(event: KeyboardEvent, store: any): void;
-/**
- * 복사 & 붙여넣기 이벤트
- */
-export declare function _copyEvent(event: ClipboardEvent, store: any): void;
-export declare function _pasteEvent(event: ClipboardEvent, store: any, emit: any): Promise<void>;