dragon-editor 2.1.1 → 3.0.0-beta

package/dist/runtime/core/utils/style.mjs

@@ -1,374 +0,0 @@
-import { getCursor, setCursor } from "./cursor.mjs";
-import { findEditableElement, findChildNumber } from "./element.mjs";
-const alignClassList = ["d-align-left", "d-align-center", "d-align-right"];
-function arrangementAlignClass(originList, className) {
-  const hasClass = originList.indexOf(className) > -1;
-  let array = originList;
-  if (hasClass) {
-    originList.splice(originList.indexOf(className), 1);
-    array = originList;
-  } else {
-    array = originList.filter((item) => alignClassList.indexOf(item) === -1);
-    array.push(className);
-  }
-  return array;
-}
-const headingClassList = ["d-h1", "d-h2", "d-h3", "d-h4", "d-h5", "d-h6"];
-function arrangementHeadingClass(originList, className) {
-  const hasClass = originList.indexOf(className) > -1;
-  let array = originList;
-  if (hasClass) {
-    originList.splice(originList.indexOf(className), 1);
-    array = originList;
-  } else {
-    array = originList.filter((item) => headingClassList.indexOf(item) === -1);
-    array.push(className);
-  }
-  return array;
-}
-function getNextNode($target, node) {
-  const childNode = $target.childNodes;
-  let idx = -1;
-  childNode.forEach((item, index) => {
-    if (item === node) {
-      idx = index;
-    }
-  });
-  return childNode[idx + 1];
-}
-function warpStyleNode({ node, startOffset, endOffset, className, url, tagName }) {
-  const text = node.textContent;
-  const textLength = text.length;
-  let startIdx = startOffset;
-  let endIdx = endOffset;
-  if (endOffset < startOffset) {
-    startIdx = endOffset;
-    endIdx = startOffset;
-  }
-  return `${text.substring(0, startIdx)}<${tagName} ${url ? `href="${url}" rel="nofollow"` : ""} class="${className}">${text.substring(startIdx, endIdx)}</${tagName}>${text.substring(endIdx, textLength)}`;
-}
-function defaultDecorationMake({ originData, $target, className, tagName = "span", url, parentCursorData }) {
-  let cursorData = getCursor();
-  if (cursorData.startNode === null) {
-    cursorData = parentCursorData;
-  }
-  let startNode = cursorData.startNode;
-  let endNode = cursorData.endNode;
-  if (startNode !== null) {
-    let editableElement = findEditableElement(startNode);
-    if (editableElement === null) {
-      cursorData = parentCursorData;
-      startNode = cursorData.startNode;
-      endNode = cursorData.endNode;
-      editableElement = findEditableElement(startNode);
-    }
-    if (cursorData.type === "Range") {
-      if (startNode === endNode) {
-        const parentNode = startNode.parentNode;
-        let startOffset = cursorData.startOffset;
-        let endOffset = cursorData.endOffset;
-        if (startOffset > endOffset) {
-          startOffset = cursorData.endOffset;
-          endOffset = cursorData.startOffset;
-        }
-        if (parentNode === editableElement) {
-          const childNumber = findChildNumber(editableElement, startNode);
-          const wrpStructure = warpStyleNode({
-            node: parentNode.childNodes[childNumber],
-            startOffset,
-            endOffset,
-            className,
-            tagName,
-            url
-          });
-          let htmlStructure = "";
-          parentNode.childNodes.forEach((child, count) => {
-            if (count === childNumber) {
-              htmlStructure += wrpStructure;
-            } else {
-              if (child.constructor.name === "Text") {
-                htmlStructure += child.textContent;
-              } else {
-                htmlStructure += child.outerHTML;
-              }
-            }
-          });
-          parentNode.innerHTML = htmlStructure;
-          setTimeout(() => {
-            let $cursorTarget = editableElement.childNodes[childNumber + 1];
-            if (!$cursorTarget) {
-              $cursorTarget = editableElement.childNodes[childNumber];
-            }
-            const cursorLength = $cursorTarget.textContent.length;
-            setCursor($cursorTarget, cursorLength);
-          }, 100);
-        } else {
-          const originTag = getTagName(parentNode);
-          const childNumber = findChildNumber(editableElement, parentNode);
-          const classList = [...parentNode.classList];
-          const text = parentNode.textContent;
-          const hasClassIdx = classList.indexOf(className);
-          let startOffset2 = cursorData.startOffset;
-          let endOffset2 = cursorData.endOffset;
-          let htmlStructure = "";
-          if (startOffset2 > endOffset2) {
-            startOffset2 = cursorData.endOffset;
-            endOffset2 = cursorData.startOffset;
-          }
-          if (hasClassIdx > -1) {
-            const middleClassList = [...parentNode.classList];
-            middleClassList.splice(hasClassIdx, 1);
-            htmlStructure = `<${originTag.name} ${originTag.href ? `href="${originTag.href}" rel="nofollow"` : ""} class="${classList.join(" ")}">${text.substring(0, startOffset2)}</${originTag.name}><${tagName} ${url ? `href="${url}" rel="nofollow"` : ""} class="${middleClassList.join(" ")}">${text.substring(startOffset2, endOffset2)}</${tagName}><${originTag.name} ${originTag.href ? `href="${originTag.href}" rel="nofollow"` : ""} class="${classList.join(" ")}">${text.substring(endOffset2, text.length)}</${originTag.name}>`;
-          } else {
-            htmlStructure = `<${originTag.name} ${originTag.href ? `href="${originTag.href}" rel="nofollow"` : ""} class="${classList.join(" ")}">${text.substring(0, startOffset2)}</${originTag.name}><${tagName} ${url ? `href="${url}" rel="nofollow"` : ""} class="${classList.join(" ")} ${className}">${text.substring(startOffset2, endOffset2)}</${tagName}><${originTag.name} ${originTag.href ? `href="${originTag.href}" rel="nofollow"` : ""} class="${classList.join(" ")}">${text.substring(endOffset2, text.length)}</${originTag.name}>`;
-          }
-          parentNode.insertAdjacentHTML("afterend", htmlStructure);
-          parentNode.remove();
-          setTimeout(() => {
-            setCursor(editableElement.childNodes[childNumber + 1], text.substring(startOffset2, endOffset2).length);
-          }, 100);
-        }
-      } else {
-        let startChild = startNode;
-        let endChild = endNode;
-        if (startNode.parentNode !== editableElement) {
-          startChild = startNode.parentNode;
-        }
-        if (endNode.parentNode !== editableElement) {
-          endChild = endNode.parentNode;
-        }
-        const startChildIdx = findChildNumber(editableElement, startChild);
-        const endChildIdx = findChildNumber(editableElement, endChild);
-        let startIdx = 0;
-        let endIdx = 0;
-        let startOffset = 0;
-        let endOffset = 0;
-        let hasClassName = true;
-        let htmlStructure = "";
-        if (startChildIdx > endChildIdx) {
-          startIdx = endChildIdx;
-          endIdx = startChildIdx;
-          startOffset = cursorData.endOffset;
-          endOffset = cursorData.startOffset;
-        } else {
-          startIdx = startChildIdx;
-          endIdx = endChildIdx;
-          startOffset = cursorData.startOffset;
-          endOffset = cursorData.endOffset;
-        }
-        editableElement.childNodes.forEach((item, count) => {
-          if (count >= startIdx && count <= endIdx) {
-            if (item.constructor.name === "Text") {
-              hasClassName = false;
-            } else {
-              if ([...item.classList].indexOf(className) === -1) {
-                hasClassName = false;
-              }
-            }
-          }
-        });
-        editableElement.childNodes.forEach((child, count) => {
-          const type = child.constructor.name;
-          const text = child.textContent;
-          if (count > startIdx && count < endIdx) {
-            if (type === "Text") {
-              htmlStructure += `<${tagName} ${url ? `href="${url}" rel="nofollow"` : ""} class="${className}">${child.textContent}</${tagName}>`;
-            } else {
-              if (hasClassName) {
-                if (child.classList.length === 1) {
-                  htmlStructure += child.textContent;
-                } else {
-                  child.classList.remove(className);
-                  htmlStructure += child.outerHTML;
-                }
-              } else {
-                child.classList.add(className);
-                htmlStructure += child.outerHTML;
-              }
-            }
-          } else if (count === startIdx) {
-            if (type === "Text") {
-              htmlStructure += `${text.substring(0, startOffset)}<${tagName} ${url ? `href="${url}" rel="nofollow"` : ""} class="${className}">${text.substring(startOffset, text.length)}</${tagName}>`;
-            } else {
-              const childClassList = [...child.classList];
-              const originTag = getTagName(child);
-              if (hasClassName) {
-                if (childClassList.length === 1) {
-                  htmlStructure += `<${originTag.name} ${originTag.href ? `href="${originTag.href}" rel="nofollow"` : ""} class="${className}">${text.substring(0, startOffset)}</${originTag.name}>${text.substring(startOffset, text.length)}`;
-                } else {
-                  const classIdx = childClassList.indexOf(className);
-                  htmlStructure += `<${originTag.name} ${originTag.href ? `href="${originTag.href}" rel="nofollow"` : ""} class="${childClassList.join(" ")}">${text.substring(0, startOffset)}</${originTag.name}>`;
-                  childClassList.splice(classIdx, 1);
-                  htmlStructure += `<${tagName} ${url ? `href="${url}" rel="nofollow"` : ""} class="${childClassList.join(" ")}">${text.substring(startOffset, text.length)}</${tagName}>`;
-                }
-              } else {
-                htmlStructure += `<${originTag.name} ${originTag.href ? `href="${originTag.href}" rel="nofollow"` : ""} class="${childClassList.join(" ")}">${text.substring(0, startOffset)}</${originTag.name}>`;
-                htmlStructure += `<${tagName} ${url ? `href="${url}" rel="nofollow"` : ""} class="${childClassList.join(" ")} ${className}">${text.substring(startOffset, text.length)}</${tagName}>`;
-              }
-            }
-          } else if (count === endIdx) {
-            if (type === "Text") {
-              htmlStructure += `<${tagName} ${url ? `href="${url}" rel="nofollow"` : ""} class="${className}">${text.substring(0, endOffset)}</${tagName}>${text.substring(endOffset, text.length)}`;
-            } else {
-              const childClassList = [...child.classList];
-              const originTag = getTagName(child);
-              if (hasClassName) {
-                if (childClassList.length === 1) {
-                  htmlStructure += `${text.substring(0, endOffset)}<${originTag.name} ${originTag.href ? `href="${originTag.href}" rel="nofollow"` : ""} class="${className}">${text.substring(endOffset, text.length)}</${originTag.name}>`;
-                } else {
-                  const classIdx = childClassList.indexOf(className);
-                  const newClassList = [...child.classList];
-                  newClassList.splice(classIdx, 1);
-                  htmlStructure += `<${tagName} ${url ? `href="${url}" rel="nofollow"` : ""} class="${newClassList.join(" ")}">${text.substring(0, endOffset)}</${tagName}>`;
-                  htmlStructure += `<${originTag.name} ${originTag.href ? `href="${originTag.href}" rel="nofollow"` : ""} class="${childClassList.join(" ")}">${text.substring(endOffset, text.length)}</${originTag.name}>`;
-                }
-              } else {
-                htmlStructure += `<${tagName} ${url ? `href="${url}" rel="nofollow"` : ""} class="${childClassList.join(" ")} ${className}">${text.substring(0, endOffset)}</${tagName}>`;
-                htmlStructure += `<${originTag.name} ${originTag.href ? `href="${originTag.href}" rel="nofollow"` : ""} class="${childClassList.join(" ")}">${text.substring(endOffset, text.length)}</${originTag.name}>`;
-              }
-            }
-          } else {
-            if (type === "Text") {
-              htmlStructure += child.textContent;
-            } else {
-              htmlStructure += child.outerHTML;
-            }
-          }
-        });
-        editableElement.innerHTML = htmlStructure;
-        setTimeout(() => {
-          const $target2 = editableElement.childNodes[endIdx + 1];
-          const length = $target2.textContent.length;
-          setCursor($target2, length);
-        }, 100);
-      }
-    } else {
-      if (startNode.constructor.name === "Text") {
-        const parentNode = startNode.parentNode;
-        const parentNodeClassList = [...parentNode.classList];
-        if (parentNodeClassList.indexOf(className) > -1) {
-          if (parentNodeClassList.length === 1) {
-            const textContent = parentNode.textContent;
-            parentNode.insertAdjacentText("afterend", textContent);
-            setCursor(getNextNode($target, parentNode), textContent.length);
-            parentNode.remove();
-          } else {
-            parentNode.classList.remove(className);
-          }
-        } else {
-          parentNode.classList.add(className);
-        }
-      } else {
-        startNode.classList.toggle(className);
-      }
-    }
-  }
-  return originData;
-}
-export function styleSettings({ kind, blockData, $target, url, cursorData }) {
-  let rawData = blockData;
-  switch (kind) {
-    case "alignLeft":
-      rawData.classList = arrangementAlignClass(rawData.classList, "d-align-left");
-      break;
-    case "alignCenter":
-      rawData.classList = arrangementAlignClass(rawData.classList, "d-align-center");
-      break;
-    case "alignRight":
-      rawData.classList = arrangementAlignClass(rawData.classList, "d-align-right");
-      break;
-    case "decorationBold":
-      rawData = defaultDecorationMake({
-        originData: rawData,
-        $target,
-        className: "d-deco-bold",
-        parentCursorData: cursorData
-      });
-      break;
-    case "decorationItalic":
-      rawData = defaultDecorationMake({
-        originData: rawData,
-        $target,
-        className: "d-deco-italic",
-        parentCursorData: cursorData
-      });
-      break;
-    case "decorationUnderline":
-      rawData = defaultDecorationMake({
-        originData: rawData,
-        $target,
-        className: "d-deco-underline",
-        parentCursorData: cursorData
-      });
-      break;
-    case "decorationStrikethrough":
-      rawData = defaultDecorationMake({
-        originData: rawData,
-        $target,
-        className: "d-deco-through",
-        parentCursorData: cursorData
-      });
-      break;
-    case "decorationCode":
-      rawData = defaultDecorationMake({
-        originData: rawData,
-        $target,
-        className: "d-deco-code",
-        tagName: "code",
-        parentCursorData: cursorData
-      });
-      break;
-    case "decorationLink":
-      rawData = defaultDecorationMake({
-        originData: rawData,
-        $target,
-        className: "d-deco-link",
-        tagName: "a",
-        url,
-        parentCursorData: cursorData
-      });
-      break;
-    case "heading-1":
-      rawData.classList = arrangementHeadingClass(rawData.classList, "d-h1");
-      break;
-    case "heading-2":
-      rawData.classList = arrangementHeadingClass(rawData.classList, "d-h2");
-      break;
-    case "heading-3":
-      rawData.classList = arrangementHeadingClass(rawData.classList, "d-h3");
-      break;
-    case "heading-4":
-      rawData.classList = arrangementHeadingClass(rawData.classList, "d-h4");
-      break;
-    case "heading-5":
-      rawData.classList = arrangementHeadingClass(rawData.classList, "d-h5");
-      break;
-    case "heading-6":
-      rawData.classList = arrangementHeadingClass(rawData.classList, "d-h6");
-      break;
-    default:
-      rawData = defaultDecorationMake({
-        originData: rawData,
-        $target,
-        className: kind,
-        parentCursorData: cursorData
-      });
-  }
-  return rawData;
-}
-export function getTagName(node) {
-  const value = {
-    name: "span",
-    href: null
-  };
-  switch (node.tagName) {
-    case "CODE":
-      value.name = "code";
-      break;
-    case "A":
-      value.name = "a";
-      value.href = node.getAttribute("href");
-      break;
-  }
-  return value;
-}

package/dist/runtime/core/utils/ui.d.ts

@@ -1,4 +0,0 @@
-import type { EditorContentType } from "../../../types/index";
-export declare function createLeftMenu(modelValue: EditorContentType, top: number, isActive: boolean): import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>;

package/dist/runtime/core/utils/ui.mjs

@@ -1,13 +0,0 @@
-import { h } from "vue";
-export function createLeftMenu(modelValue, top, isActive) {
-  console.log(modelValue);
-  return h("div", {
-    class: ["d-left-menu", { "--active": isActive }],
-    onClick: () => {
-      test();
-    }
-  });
-  function test() {
-    modelValue = [{ type: "text", classList: [], content: "123" }];
-  }
-}

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

@@ -1,16 +0,0 @@
-import "../../core/style/common.css";
-declare const _default: import("vue").DefineComponent<Readonly<{
-    option?: any;
-    modelValue?: any;
-}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<Readonly<{
-    option?: any;
-    modelValue?: any;
-}>>> & {
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}, {
-    readonly option?: any;
-    readonly modelValue?: any;
-}, {}>;
-export default _default;

package/dist/runtime/shared/components/DragonEditor.mjs

@@ -1,62 +0,0 @@
-import { h, defineComponent, ref, unref, watch } from "vue";
-import { createLeftMenu } from "../../core/utils/index.mjs";
-import "../../core/style/common.css";
-export default defineComponent({
-  name: "DragonEditor",
-  props: ["modelValue", "option"],
-  emits: ["update:modelValue"],
-  setup: (props, ctx) => {
-    const modelValue = ref([]);
-    const option = ref({
-      blockMenu: ["text", "ol", "ul"]
-      // TODO : 다른 블럭 만들기 "table", "quotation"
-    });
-    if (props.modelValue) {
-      modelValue.value = props.modelValue;
-    }
-    if (props.option !== void 0) {
-      option.value = Object.assign(option.value, props.option);
-    }
-    const activeLeftMenu = ref(false);
-    const leftMenuPosition = ref(0);
-    const leftMenuStructure = createLeftMenu(modelValue.value, leftMenuPosition.value, activeLeftMenu.value);
-    const customStyleMenu = ref([]);
-    if (option.value.customStyleMenu) {
-      customStyleMenu.value = unref(option.value.customStyleMenu);
-    }
-    init(modelValue.value);
-    function init(targetData) {
-      if (targetData && Array.isArray(targetData)) {
-        if (targetData.length == 0) {
-        }
-      } else {
-        throw new Error("[DragonEditor] : You must set 'v-model' attribute and 'v-mode' type is must be Array(EditorContentType).");
-      }
-    }
-    function addImageBlock({ src, width, height, caption = "" }) {
-      console.log("addImage");
-    }
-    watch(
-      () => props.modelValue,
-      (newData, oldData) => {
-        init(newData);
-      }
-    );
-    ctx.expose({ addImageBlock });
-    return () => {
-      return h(
-        "div",
-        {
-          class: ["dragon-editor"],
-          onPaste: () => {
-            console.log("paste");
-          },
-          onCopy: () => {
-            console.log("copy");
-          }
-        },
-        [leftMenuStructure]
-      );
-    };
-  }
-});