dragon-editor 3.8.7 → 4.0.1

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

@@ -1,408 +0,0 @@
-import { h } from "vue";
-import { _getIconNode } from "./index.js";
-import { _addBlock } from "../node/index.js";
-import { _setDecoration, _setTextAlign, _setAnchorTag, _unsetAnchorTag } from "../style/index.js";
-import { _setIndent, _moveBlock, _openAnchorArea } from "../event/index.js";
-export function _getMenuBarVNodeStructure(store) {
-  const childNode = [];
-  childNode.push(__getMenuListStructure(store));
-  childNode.push(__getBlockListStructure(store));
-  childNode.push(
-    h("div", { class: ["de-link-exit-area", "js-de-link-exit-area", { "--active": store.value.activeStatus.anchorInputArea }] }, [
-      h("div", { class: ["de-btn-area"] }, [
-        h(
-          "button",
-          {
-            class: ["de-btn", { "--active": store.value.controlStatus.anchorTabType === "url" }],
-            type: "button",
-            onClick: () => {
-              store.value.controlStatus.anchorTabType = "url";
-            }
-          },
-          "Text"
-        ),
-        h(
-          "button",
-          {
-            class: ["de-btn", { "--active": store.value.controlStatus.anchorTabType === "heading" }],
-            type: "button",
-            onClick: () => {
-              store.value.controlStatus.anchorTabType = "heading";
-            }
-          },
-          "Heading"
-        )
-      ]),
-      store.value.controlStatus.anchorTabType === "url" ? h("div", { class: ["de-link-text-area"] }, [
-        h("input", {
-          class: ["de-input", { "--error": store.value.controlStatus.anchorValidation === false }],
-          value: store.value.controlStatus.anchorHref,
-          onInput: (event) => {
-            store.value.controlStatus.anchorHref = event.currentTarget.value;
-          }
-        }),
-        h(
-          "button",
-          {
-            class: ["de-btn"],
-            type: "button",
-            onClick: () => {
-              _setAnchorTag(store.value.controlStatus.anchorHref, true, store);
-            }
-          },
-          "Set"
-        )
-      ]) : h(
-        "div",
-        { class: ["de-link-heading-area"] },
-        store.value.controlStatus.anchorHeadingList.map((item) => {
-          return h(
-            "button",
-            {
-              class: ["de-btn", { "--active": store.value.controlStatus.anchorHref === `#${item.id}` }],
-              type: "button",
-              onClick: () => {
-                store.value.activeStatus.anchorInputArea = false;
-                _setAnchorTag(item.id, false, store);
-              }
-            },
-            item.name
-          );
-        })
-      )
-    ])
-  );
-  return h("div", { class: ["de-menu-bar"], style: { top: `${store.value.menuBarTop}px` } }, childNode);
-}
-function __getMenuListStructure(store) {
-  const menuGroupNode = [];
-  menuGroupNode.push(
-    h("div", { class: ["de-col"] }, [
-      h(
-        "button",
-        {
-          class: ["de-menu", "de-menu-add", "js-de-menu-add"],
-          type: "button",
-          onClick: () => {
-            store.value.activeStatus.addBlockMenu = !store.value.activeStatus.addBlockMenu;
-          }
-        },
-        [_getIconNode("plus")]
-      )
-    ])
-  );
-  menuGroupNode.push(
-    h("div", { class: ["de-col"] }, [
-      h(
-        "button",
-        {
-          class: ["de-menu"],
-          type: "button",
-          onClick: () => {
-            _setDecoration("de-bold", store);
-          }
-        },
-        [_getIconNode("bold")]
-      ),
-      h(
-        "button",
-        {
-          class: ["de-menu"],
-          type: "button",
-          onClick: () => {
-            _setDecoration("de-italic", store);
-          }
-        },
-        [_getIconNode("italic")]
-      ),
-      h(
-        "button",
-        {
-          class: ["de-menu"],
-          type: "button",
-          onClick: () => {
-            _setDecoration("de-underline", store);
-          }
-        },
-        [_getIconNode("underline")]
-      ),
-      h(
-        "button",
-        {
-          class: ["de-menu"],
-          type: "button",
-          onClick: () => {
-            _setDecoration("de-strikethrough", store);
-          }
-        },
-        [_getIconNode("strikethrough")]
-      ),
-      h(
-        "button",
-        {
-          class: ["de-menu"],
-          type: "button",
-          onClick: () => {
-            _setDecoration("de-code", store);
-          }
-        },
-        [_getIconNode("codeblock")]
-      )
-    ])
-  );
-  menuGroupNode.push(
-    h("div", { class: ["de-col"] }, [
-      h(
-        "button",
-        {
-          class: ["de-menu", "js-de-link-btn"],
-          type: "button",
-          onClick: (event) => {
-            _openAnchorArea(event, store);
-          }
-        },
-        [_getIconNode("add-link")]
-      ),
-      h(
-        "button",
-        {
-          class: ["de-menu", { "--disabled": store.value.controlStatus.anchorHref === "" }],
-          type: "button",
-          onClick: () => {
-            _unsetAnchorTag(store);
-          }
-        },
-        [_getIconNode("remove-link")]
-      )
-    ])
-  );
-  menuGroupNode.push(
-    h("div", { class: ["de-col"] }, [
-      h("label", { class: ["de-menu"] }, [
-        h("input", {
-          type: "file",
-          hidden: true,
-          accept: ".jpg,.jpeg,.png,.webp,.gif",
-          onChange: (event) => {
-            const $target = event.target;
-            if ($target.files !== null) {
-              const file = $target.files[0];
-              store.value.emit("uploadImageEvent", file);
-              $target.value = "";
-            }
-          }
-        }),
-        _getIconNode("image")
-      ])
-    ])
-  );
-  menuGroupNode.push(
-    h("div", { class: ["de-col"] }, [
-      h(
-        "button",
-        {
-          class: ["de-menu"],
-          type: "button",
-          onClick: () => {
-            _setTextAlign("left", store);
-          }
-        },
-        [_getIconNode("align-left")]
-      ),
-      h(
-        "button",
-        {
-          class: ["de-menu"],
-          type: "button",
-          onClick: () => {
-            _setTextAlign("center", store);
-          }
-        },
-        [_getIconNode("align-center")]
-      ),
-      h(
-        "button",
-        {
-          class: ["de-menu"],
-          type: "button",
-          onClick: () => {
-            _setTextAlign("right", store);
-          }
-        },
-        [_getIconNode("align-right")]
-      ),
-      h(
-        "button",
-        {
-          class: ["de-menu"],
-          type: "button",
-          onClick: () => {
-            _setTextAlign("justify", store);
-          }
-        },
-        [_getIconNode("align-justify")]
-      )
-    ])
-  );
-  menuGroupNode.push(
-    h("div", { class: ["de-col"] }, [
-      h(
-        "button",
-        {
-          class: ["de-menu"],
-          type: "button",
-          onClick: () => {
-            _setIndent(store, "minus");
-          }
-        },
-        [_getIconNode("indent-decrease")]
-      ),
-      h(
-        "button",
-        {
-          class: ["de-menu"],
-          type: "button",
-          onClick: () => {
-            _setIndent(store, "plus");
-          }
-        },
-        [_getIconNode("indent-increase")]
-      )
-    ])
-  );
-  menuGroupNode.push(
-    h("div", { class: ["de-col"] }, [
-      h(
-        "button",
-        {
-          class: ["de-menu"],
-          type: "button",
-          onClick: () => {
-            _moveBlock("up", store);
-          }
-        },
-        [_getIconNode("move-up")]
-      ),
-      h(
-        "button",
-        {
-          class: ["de-menu"],
-          type: "button",
-          onClick: () => {
-            _moveBlock("down", store);
-          }
-        },
-        [_getIconNode("move-down")]
-      )
-    ])
-  );
-  return h("div", { class: ["de-menu-wrap"] }, menuGroupNode);
-}
-function __getBlockListStructure(store) {
-  const menuList = [];
-  menuList.push(
-    h(
-      "button",
-      {
-        class: ["de-add-block"],
-        type: "button",
-        onClick: () => {
-          _addBlock("text", store);
-        }
-      },
-      "Text"
-    )
-  );
-  menuList.push(
-    h(
-      "button",
-      {
-        class: ["de-add-block"],
-        type: "button",
-        onClick: () => {
-          _addBlock("heading1", store);
-        }
-      },
-      "Heading-1"
-    )
-  );
-  menuList.push(
-    h(
-      "button",
-      {
-        class: ["de-add-block"],
-        type: "button",
-        onClick: () => {
-          _addBlock("heading2", store);
-        }
-      },
-      "Heading-2"
-    )
-  );
-  menuList.push(
-    h(
-      "button",
-      {
-        class: ["de-add-block"],
-        type: "button",
-        onClick: () => {
-          _addBlock("heading3", store);
-        }
-      },
-      "Heading-3"
-    )
-  );
-  menuList.push(
-    h(
-      "button",
-      {
-        class: ["de-add-block"],
-        type: "button",
-        onClick: () => {
-          _addBlock("ul", store);
-        }
-      },
-      "Unodered List"
-    )
-  );
-  menuList.push(
-    h(
-      "button",
-      {
-        class: ["de-add-block"],
-        type: "button",
-        onClick: () => {
-          _addBlock("ol", store);
-        }
-      },
-      "Odered List"
-    )
-  );
-  menuList.push(
-    h(
-      "button",
-      {
-        class: ["de-add-block"],
-        type: "button",
-        onClick: () => {
-          _addBlock("code", store);
-        }
-      },
-      "Code Block"
-    )
-  );
-  menuList.push(
-    h(
-      "button",
-      {
-        class: ["de-add-block"],
-        type: "button",
-        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

@@ -1,19 +0,0 @@
-import type { Ref } from "vue";
-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;
-    $element: HTMLDivElement | null;
-};
-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, 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 _setCodeBlockStatus(theme: DECodeblockTheme, language: DECodeblockLang, store: Ref<DragonEditorStore>): Promise<void>;
-export declare function _setListBlockStyle(style: DEListStyle, store: Ref<DragonEditorStore>): void;

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

@@ -1,256 +0,0 @@
-import { _getDefaultBlockData, _generateId, _updateModelData, _updateCursorData, _decideWhetherOpenControlBar, _updateControlBarStatus, CODEBLOCKLANG } from "../event/index.js";
-export function _addBlock(type, store, data) {
-  const blockData = data === void 0 ? _getDefaultBlockData(type) : data;
-  let $block = _createTextBlock(_getDefaultBlockData("text"));
-  switch (blockData.type) {
-    case "text":
-      $block = _createTextBlock(blockData);
-      break;
-    case "heading":
-      $block = _createHeadingBlock(blockData);
-      break;
-    case "image":
-      $block = _createImageBlock(blockData, store.value.imageHostURL);
-      break;
-    case "list":
-      $block = _createListBlock(blockData);
-      break;
-    case "code":
-      $block = _createCodeBlock(blockData, store);
-      break;
-    case "custom":
-      $block = _createCustomBlock(blockData);
-      break;
-    case "divider":
-      $block = _createDividerBlock();
-      break;
-  }
-  if (store.value.controlStatus.$currentBlock === null) {
-    if (store.value.$body !== null) {
-      store.value.$body.insertAdjacentElement("beforeend", $block);
-    } else {
-    }
-  } else {
-    store.value.controlStatus.$currentBlock.insertAdjacentElement("afterend", $block);
-  }
-  if (blockData.type === "list") {
-    $block.children[0].focus();
-  } else if (blockData.type === "code") {
-    $block.querySelector(".de-code-content").focus();
-  } else if (blockData.type === "text" || blockData.type === "heading") {
-    $block.focus();
-  } else if (blockData.type === "image") {
-    $block.querySelector(".de-caption").focus();
-  }
-  const { type: blockType, $element } = _getCurrentBlock($block);
-  store.value.activeStatus.addBlockMenu = false;
-  store.value.controlStatus.currentBlockType = blockType;
-  store.value.controlStatus.$currentBlock = $element;
-  _updateModelData(store);
-  _updateCursorData(store);
-  _decideWhetherOpenControlBar(store);
-}
-export function _getCurrentBlock($target) {
-  const $block = $target.closest(".de-block");
-  let typeName = "text";
-  if ($block !== null) {
-    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"):
-        if ($block.tagName === "OL") {
-          typeName = "ol";
-        } else {
-          typeName = "ul";
-        }
-        break;
-      case $block.classList.contains("de-image-block"):
-        typeName = "image";
-        break;
-      case $block.classList.contains("de-code-block"):
-        typeName = "code";
-        break;
-      default:
-        typeName = "custom";
-    }
-  }
-  return {
-    type: typeName,
-    $element: $block
-  };
-}
-export function _createTextBlock(data) {
-  const $paragraph = document.createElement("p");
-  if (data.depth !== void 0 && data.depth !== 0) {
-    $paragraph.dataset["depth"] = String(data.depth);
-  }
-  $paragraph.classList.add("de-block", "de-text-block", ...data.classList);
-  $paragraph.setAttribute("contenteditable", "true");
-  $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;
-  }
-  if (data.depth !== void 0 && data.depth !== 0) {
-    $headingBlock.dataset["depth"] = String(data.depth);
-  }
-  $headingBlock.classList.add("de-block", "de-heading-block", ...data.classList);
-  $headingBlock.dataset["level"] = String(data.level);
-  $headingBlock.setAttribute("contenteditable", "true");
-  $headingBlock.innerHTML = data.textContent;
-  return $headingBlock;
-}
-export function _createListBlock(data) {
-  const $block = document.createElement(data.element);
-  if (data.depth !== void 0 && data.depth !== 0) {
-    $block.dataset["depth"] = String(data.depth);
-  }
-  $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");
-  $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, store) {
-  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");
-  const targetValue = CODEBLOCKLANG.find((item) => item.code === data.language);
-  $wrap.classList.add("de-block", "de-code-block");
-  $wrap.dataset["theme"] = data.theme;
-  $file.contentEditable = "true";
-  $file.classList.add("de-filename");
-  $file.textContent = data.filename;
-  $lang.textContent = targetValue?.text ?? "Plan Text";
-  $lang.classList.add("de-language");
-  $pre.classList.add("de-pre");
-  $code.contentEditable = "true";
-  $code.classList.add("de-code-content");
-  $code.innerHTML = data.textContent;
-  $pre.appendChild($code);
-  $wrap.appendChild($file);
-  $wrap.appendChild($lang);
-  $wrap.appendChild($pre);
-  return $wrap;
-}
-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;
-}
-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) {
-    $target = $target.constructor.name === "Text" ? $target.parentElement : $target;
-    const $menuBar = $target.closest(".de-menu-bar");
-    const $controlBar = $target.closest(".js-de-controlbar");
-    if ($menuBar === null && $controlBar === null) {
-      const { type, $element } = _getCurrentBlock($target);
-      store.value.controlStatus.currentBlockType = type;
-      store.value.controlStatus.$currentBlock = $element;
-      _decideWhetherOpenControlBar(store);
-      _updateControlBarStatus(store);
-    }
-  }
-}
-export function _updateHeadingBlockList(store) {
-  if (store.value.$body !== null) {
-    const $headingList = store.value.$body.querySelectorAll(".de-heading-block");
-    store.value.controlStatus.anchorHeadingList = Array.from($headingList).map(($element) => {
-      return {
-        name: $element.textContent ?? "",
-        id: $element.id ?? ""
-      };
-    });
-  }
-}
-export async function _setCodeBlockStatus(theme, language, store) {
-  if (store.value.controlStatus.$currentBlock !== null) {
-    const $target = store.value.controlStatus.$currentBlock.querySelector(".de-language");
-    const $code = store.value.controlStatus.$currentBlock.querySelector(".de-code-content");
-    if ($target !== null && $code !== null) {
-      const targetValue = CODEBLOCKLANG.find((item) => item.code === language);
-      if (targetValue !== void 0) {
-        const convert = await store.value.codeToHtml($code.textContent ?? "", { lang: language, theme });
-        const $div = document.createElement("div");
-        $div.innerHTML = convert;
-        const $childCode = $div.querySelector("code");
-        if ($childCode !== null) {
-          $target.textContent = targetValue.text;
-          $code.innerHTML = $childCode.innerHTML;
-          store.value.controlStatus.codeBlockLang = targetValue.code;
-          store.value.controlStatus.codeBlockTheme = theme;
-          store.value.controlStatus.$currentBlock.dataset["theme"] = theme;
-          _updateCursorData(store);
-          _updateModelData(store);
-        }
-      }
-    }
-  }
-}
-export function _setListBlockStyle(style, store) {
-  if (store.value.controlStatus.$currentBlock !== null) {
-    store.value.controlStatus.listBlockStyle = style;
-    store.value.controlStatus.$currentBlock.dataset["style"] = style;
-    _updateCursorData(store);
-    _updateModelData(store);
-  }
-}

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

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