dragon-editor 3.4.4 → 3.5.0

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

@@ -0,0 +1,358 @@
+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));
+  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"],
+          onClick: () => {
+            store.value.activeStatus.addBlockMenu = !store.value.activeStatus.addBlockMenu;
+          }
+        },
+        [_getIconNode("plus")]
+      )
+    ])
+  );
+  menuGroupNode.push(
+    h("div", { class: ["de-col"] }, [
+      h(
+        "button",
+        {
+          class: ["de-menu"],
+          onClick: () => {
+            _setDecoration("de-bold", store);
+          }
+        },
+        [_getIconNode("bold")]
+      ),
+      h(
+        "button",
+        {
+          class: ["de-menu"],
+          onClick: () => {
+            _setDecoration("de-italic", store);
+          }
+        },
+        [_getIconNode("italic")]
+      ),
+      h(
+        "button",
+        {
+          class: ["de-menu"],
+          onClick: () => {
+            _setDecoration("de-underline", store);
+          }
+        },
+        [_getIconNode("underline")]
+      ),
+      h(
+        "button",
+        {
+          class: ["de-menu"],
+          onClick: () => {
+            _setDecoration("de-strikethrough", store);
+          }
+        },
+        [_getIconNode("strikethrough")]
+      ),
+      h(
+        "button",
+        {
+          class: ["de-menu"],
+          onClick: () => {
+            _setDecoration("de-code", store);
+          }
+        },
+        [_getIconNode("codeblock")]
+      )
+    ])
+  );
+  menuGroupNode.push(
+    h("div", { class: ["de-col"] }, [
+      h(
+        "button",
+        {
+          class: ["de-menu", "js-de-link-btn"],
+          onClick: () => {
+            _openAnchorArea(store);
+          }
+        },
+        [_getIconNode("add-link")]
+      ),
+      h(
+        "button",
+        {
+          class: ["de-menu", { "--disabled": store.value.controlStatus.anchorHref === "" }],
+          onClick: () => {
+            _unsetAnchorTag(store);
+          }
+        },
+        [_getIconNode("remove-link")]
+      ),
+      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" }],
+              onClick: () => {
+                store.value.controlStatus.anchorTabType = "url";
+              }
+            },
+            "Text"
+          ),
+          h(
+            "button",
+            {
+              class: ["de-btn", { "--active": store.value.controlStatus.anchorTabType === "heading" }],
+              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,
+            onChange: (event) => {
+              store.value.controlStatus.anchorHref = event.currentTarget.value;
+            }
+          }),
+          h("button", { class: ["de-btn"], onClick: () => {
+          } }, "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}` }],
+                onClick: () => {
+                  store.value.activeStatus.anchorInputArea = false;
+                  _setAnchorTag(item.id, false, store);
+                }
+              },
+              item.name
+            );
+          })
+        )
+      ])
+    ])
+  );
+  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"],
+          onClick: () => {
+            _setTextAlign("left", store);
+          }
+        },
+        [_getIconNode("align-left")]
+      ),
+      h(
+        "button",
+        {
+          class: ["de-menu"],
+          onClick: () => {
+            _setTextAlign("center", store);
+          }
+        },
+        [_getIconNode("align-center")]
+      ),
+      h(
+        "button",
+        {
+          class: ["de-menu"],
+          onClick: () => {
+            _setTextAlign("right", store);
+          }
+        },
+        [_getIconNode("align-right")]
+      ),
+      h(
+        "button",
+        {
+          class: ["de-menu"],
+          onClick: () => {
+            _setTextAlign("justify", store);
+          }
+        },
+        [_getIconNode("align-justify")]
+      )
+    ])
+  );
+  menuGroupNode.push(
+    h("div", { class: ["de-col"] }, [
+      h(
+        "button",
+        {
+          class: ["de-menu"],
+          onClick: () => {
+            _setIndent(store, "minus");
+          }
+        },
+        [_getIconNode("indent-decrease")]
+      ),
+      h(
+        "button",
+        {
+          class: ["de-menu"],
+          onClick: () => {
+            _setIndent(store, "plus");
+          }
+        },
+        [_getIconNode("indent-increase")]
+      )
+    ])
+  );
+  menuGroupNode.push(
+    h("div", { class: ["de-col"] }, [
+      h(
+        "button",
+        {
+          class: ["de-menu"],
+          onClick: () => {
+            _moveBlock("up", store);
+          }
+        },
+        [_getIconNode("move-up")]
+      ),
+      h(
+        "button",
+        {
+          class: ["de-menu"],
+          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"],
+        onClick: () => {
+          _addBlock("text", store);
+        }
+      },
+      "Text"
+    )
+  );
+  menuList.push(
+    h(
+      "button",
+      {
+        class: ["de-add-block"],
+        onClick: () => {
+          _addBlock("heading1", store);
+        }
+      },
+      "Heading-1"
+    )
+  );
+  menuList.push(
+    h(
+      "button",
+      {
+        class: ["de-add-block"],
+        onClick: () => {
+          _addBlock("heading2", store);
+        }
+      },
+      "Heading-2"
+    )
+  );
+  menuList.push(
+    h(
+      "button",
+      {
+        class: ["de-add-block"],
+        onClick: () => {
+          _addBlock("heading3", store);
+        }
+      },
+      "Heading-3"
+    )
+  );
+  menuList.push(
+    h(
+      "button",
+      {
+        class: ["de-add-block"],
+        onClick: () => {
+          _addBlock("ul", store);
+        }
+      },
+      "Unodered List"
+    )
+  );
+  menuList.push(
+    h(
+      "button",
+      {
+        class: ["de-add-block"],
+        onClick: () => {
+          _addBlock("ol", store);
+        }
+      },
+      "Odered List"
+    )
+  );
+  menuList.push(
+    h(
+      "button",
+      {
+        class: ["de-add-block"],
+        onClick: () => {
+          _addBlock("code", store);
+        }
+      },
+      "Code Block"
+    )
+  );
+  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.js

@@ -0,0 +1,235 @@
+import { _getDefaultBlockData, _generateId, _updateModelData, _updateCursorData, _decideWhetherOpenControlBar, _updateControlBarStatus, CODEBLOCKLANG } from "../event/index.js";
+import hljs from "highlight.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;
+  }
+  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");
+  $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;
+  }
+  $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);
+  $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 _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 function _setCodeBlockTheme(theme, store) {
+  if (store.value.controlStatus.$currentBlock !== null) {
+    store.value.controlStatus.codeBlockTheme = theme;
+    store.value.controlStatus.$currentBlock.dataset["theme"] = theme;
+  }
+}
+export function _setCodeBlockLanguage(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 = hljs.highlight($code.textContent ?? "", { language });
+        $target.textContent = targetValue.text;
+        $code.innerHTML = convert.value;
+        store.value.controlStatus.codeBlockLang = targetValue.code;
+      }
+    }
+  }
+}
+export function _setListBlockStyle(style, store) {
+  if (store.value.controlStatus.$currentBlock !== null) {
+    store.value.controlStatus.listBlockStyle = style;
+    store.value.controlStatus.$currentBlock.dataset["style"] = style;
+  }
+}

package/dist/runtime/utils/{element.d.ts → node/element.d.ts}

@@ -1,3 +1,4 @@
 export declare function _findScrollingElement($target: HTMLElement): HTMLElement | Window;
 export declare function _getParentElementIfNodeIsText($target: Node, $block: HTMLElement): Node;
 export declare function _findContentEditableElement($target: Node): HTMLElement | null;
+export declare function _findPoverTextNode(node: Element, idx: number): number;

package/dist/runtime/utils/{element.mjs → node/element.js}

@@ -27,13 +27,28 @@ export function _findContentEditableElement($target) {
     $target = $target.parentNode;
   }
   const $baseElement = $target;
-  if ($baseElement.parentElement.tagName === "BODY") {
+  if ($baseElement.parentElement === null) {
     return null;
   } else {
-    if ($baseElement.getAttribute("contentEditable") === null) {
-      return _findContentEditableElement($baseElement.parentNode);
+    if ($baseElement.parentElement.tagName === "BODY") {
+      return null;
     } else {
-      return $baseElement;
+      if ($baseElement.getAttribute("contentEditable") === null) {
+        return _findContentEditableElement($baseElement.parentNode);
+      } else {
+        return $baseElement;
+      }
     }
   }
 }
+export function _findPoverTextNode(node, idx) {
+  if (node.previousSibling !== null) {
+    if (node.previousSibling.constructor.name === "Text") {
+      return _findPoverTextNode(node.previousSibling, idx -= 1);
+    } else {
+      return idx;
+    }
+  } else {
+    return idx;
+  }
+}

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

@@ -0,0 +1,2 @@
+export * from "./element.js";
+export * from "./block.js";

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

@@ -0,0 +1,2 @@
+export * from "./element.js";
+export * from "./block.js";