dragon-editor 2.0.0-beta.2.1.2 → 2.1.0

package/dist/runtime/core/components/editor/UlBlock.vue

@@ -0,0 +1,162 @@
+<template>
+    <ul class="d-ul-block" @keydown="textKeyboardEvent" ref="$ul" :key="updateCount">
+        <li class="d-li-item" v-for="(row, i) in data.childList" :key="i" :class="row.classList" contenteditable ref="$item" v-html="row.content"></li>
+    </ul>
+</template>
+
+<script setup lang="ts">
+// @ts-ignore
+import { ref, unref } from "#imports";
+import { cursorSelection, liItem, ListBlock, styleFunctionArgument } from "../../../../types";
+import { getArrangementCursorData, setCursor, pasteText, styleSettings, keyboardEvent, getCursor, findEditableElement } from "../../utils";
+
+const updateCount = ref<number>(0);
+const $ul = ref();
+const $item = ref();
+const itemIdx = ref<number>(0);
+const data = ref<ListBlock>({
+    type: "",
+    id: "",
+    childList: [
+        {
+            classList: [],
+            content: "",
+        },
+    ],
+});
+const props = defineProps<{ modelValue: ListBlock; cursorData: cursorSelection }>();
+const emit = defineEmits<{
+    (e: "update:modelValue", modelValue: ListBlock): void;
+    (e: "addBlock", {}: { name: string; value: object }): void;
+    (e: "deleteBlockLocal", index?: number): void;
+}>();
+data.value = unref(props.modelValue) as ListBlock;
+
+if (data.value.childList.length === 0) {
+}
+
+// 키보드 이벤트 할당
+function textKeyboardEvent(e: KeyboardEvent) {
+    keyboardEvent("list", e, emit, updateBlockData);
+}
+
+/**
+ * 외부용 함수
+ */
+
+// 데이터 정규화 및 검수
+function updateBlockData() {
+    const $block = $ul.value;
+    const $childList = $block.querySelectorAll("li");
+    const childData: liItem[] = [];
+    const cursorData = getCursor();
+
+    $childList.forEach((row) => {
+        row.childNodes.forEach((child: ChildNode) => {
+            const $child = child as HTMLElement;
+
+            if (child.constructor.name !== "Text") {
+                // 텍스트가 아닐경우
+                if (child.constructor.name !== "HTMLBRElement") {
+                    // br 태그 유지
+                    if (child.textContent === "") {
+                        // 빈 태그 삭제
+                        child.remove();
+                    } else if ($child.classList.length === 0) {
+                        // 클레스 없는 엘리먼트 처리
+                        $child.insertAdjacentHTML("afterend", $child.innerHTML);
+                        child.remove();
+                    }
+                } else {
+                    $child.removeAttribute("class");
+                }
+            }
+        });
+
+        childData.push({
+            classList: [...row.classList].splice(1),
+            content: row.innerHTML,
+        });
+    });
+
+    data.value.childList = childData;
+    emit("update:modelValue", data.value);
+    updateCount.value += 1;
+
+    if (cursorData.startNode) {
+        const editableNode = findEditableElement(cursorData.startNode);
+        let childIdx = -1;
+
+        $childList.forEach((row, count) => {
+            if (row === editableNode) {
+                childIdx = count;
+            }
+        });
+
+        if (childIdx > -1) {
+            // 기본 로직
+            itemIdx.value = childIdx;
+            setTimeout(() => {
+                const afterChildList = $ul.value.querySelectorAll("li");
+                setCursor(afterChildList[childIdx], cursorData.startOffset as number);
+            }, 100);
+        } else {
+            // 중간 엔터
+            $childList.forEach((row, count) => {
+                if (row === (cursorData.startNode as Node).parentNode) {
+                    childIdx = count;
+                }
+            });
+
+            setTimeout(() => {
+                const afterChildList = $ul.value.querySelectorAll("li");
+                setCursor(afterChildList[childIdx], cursorData.startOffset as number);
+            }, 100);
+        }
+    }
+}
+
+// 포커스
+function focus() {
+    const childList = $ul.value.querySelectorAll(".d-li-item");
+    setCursor(childList[itemIdx.value], 0);
+}
+
+// 블럭 위치 주기
+function getBoundingClientRect() {
+    return $ul.value.parentNode.getBoundingClientRect();
+}
+
+// 타입 전달
+function getType() {
+    return data.value.type;
+}
+
+// 붙여넣기 이벤트
+function pasteEvent(text: string) {
+    pasteText("text", text);
+}
+
+// 텍스트 스타일 지정
+function setStyles({ type, url }: styleFunctionArgument) {
+    data.value = styleSettings({
+        kind: type,
+        blockData: data.value,
+        $target: $item[itemIdx.value],
+        url: url,
+        cursorData: props.cursorData,
+    });
+    setTimeout(() => {
+        updateBlockData();
+    }, 250);
+}
+
+defineExpose({
+    updateBlockData,
+    focus,
+    getType,
+    pasteEvent,
+    setStyles,
+    getBoundingClientRect,
+});
+</script>

package/dist/runtime/core/style/common.css

@@ -136,7 +136,7 @@
   background: transparent;
   transition: background 0.25s ease;
 }
-.dragon-editor .d-row-block:hover {
+.dragon-editor .d-row-block:hover, .dragon-editor .d-row-block.--active {
   background: #fafafa;
 }
 .dragon-editor .d-text-block {
@@ -168,6 +168,23 @@
   content: "Write text";
   color: #ccc;
 }
+.dragon-editor .d-ul-block {
+  padding-left: 30px;
+  cursor: text;
+  list-style: disc;
+}
+.dragon-editor .d-ul-block .d-li-item {
+  list-style: inherit;
+  outline: 0;
+}
+.dragon-editor .d-ul-block .d-li-item:empty {
+  min-height: 1.6em;
+}
+.dragon-editor .d-ul-block .d-li-item:empty::after {
+  display: inline;
+  content: "Write text";
+  color: #ccc;
+}
 .dragon-editor .d-image-block {
   display: flex;
   flex-direction: column;

package/dist/runtime/core/style/viewer.css

@@ -189,3 +189,17 @@
   color: #ccc;
   font-size: 1rem;
 }
+.dragon-editor-viewer .d-ol-block {
+  padding-left: 30px;
+  list-style: decimal;
+}
+.dragon-editor-viewer .d-ol-block .d-li-item {
+  list-style: inherit;
+}
+.dragon-editor-viewer .d-ul-block {
+  padding-left: 30px;
+  list-style: disc;
+}
+.dragon-editor-viewer .d-ul-block .d-li-item {
+  list-style: inherit;
+}

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

@@ -0,0 +1,2 @@
+import type { EditorContentType } from "../../../types/index";
+export declare function convertViewBlock(data: EditorContentType, mediaUrl?: string): any[];

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

@@ -0,0 +1,90 @@
+import { h } from "vue";
+export function convertViewBlock(data, mediaUrl) {
+  const childList = [];
+  data.forEach((row) => {
+    let hObject;
+    switch (row.type) {
+      case "text":
+        const textBlockData = row;
+        hObject = h("p", {
+          class: ["d-text-block", ...textBlockData.classList],
+          innerHTML: textBlockData.content
+        });
+        break;
+      case "image":
+        const imageBlockData = row;
+        const imageChildList = [];
+        const imageUrl = mediaUrl ? mediaUrl + imageBlockData.src : imageBlockData.src;
+        imageChildList.push(
+          h(
+            "div",
+            { class: ["d-image-area"] },
+            h("img", {
+              class: ["d-img"],
+              src: imageUrl,
+              width: imageBlockData.width,
+              height: imageBlockData.height,
+              alt: imageBlockData.caption,
+              loading: "lazy"
+            })
+          )
+        );
+        if (imageBlockData.caption !== "") {
+          imageChildList.push(
+            h("p", {
+              class: ["d-caption"],
+              innerHTML: imageBlockData.caption
+            })
+          );
+        }
+        hObject = h("div", { class: ["d-image-block", ...imageBlockData.classList] }, imageChildList);
+        break;
+      case "ol":
+        const olBlockData = row;
+        const olChildList = [];
+        olBlockData.childList.forEach((child) => {
+          olChildList.push(
+            h("li", {
+              class: ["d-li-item", ...child.classList],
+              innerHTML: child.content
+            })
+          );
+        });
+        hObject = h(
+          "ol",
+          {
+            class: ["d-ol-block", ...olBlockData.classList]
+          },
+          olChildList
+        );
+        break;
+      case "ul":
+        const ulBlockData = row;
+        const ulChildList = [];
+        ulBlockData.childList.forEach((child) => {
+          ulChildList.push(
+            h("li", {
+              class: ["d-li-item", ...child.classList],
+              innerHTML: child.content
+            })
+          );
+        });
+        hObject = h(
+          "ul",
+          {
+            class: ["d-ul-block", ...ulBlockData.classList]
+          },
+          ulChildList
+        );
+        break;
+      default:
+        const defaultData = row;
+        hObject = h("div", {
+          class: ["d-other-block"],
+          innerHTML: defaultData.innerHTML
+        });
+    }
+    childList.push(hObject);
+  });
+  return childList;
+}

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

@@ -0,0 +1,3 @@
+import type { allBlock } from "../../../types/index";
+export declare function generateId(): string;
+export declare function createBlock(name: string, value?: object): allBlock;

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

@@ -0,0 +1,81 @@
+export function generateId() {
+  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  let str = "";
+  for (let i = 0; i < 20; i++) {
+    str += chars.charAt(Math.floor(Math.random() * chars.length));
+  }
+  return str;
+}
+function createTextBlock(data) {
+  if (data) {
+    return {
+      type: "text",
+      id: generateId(),
+      classList: data.classList,
+      content: data.content
+    };
+  } else {
+    return {
+      type: "text",
+      id: generateId(),
+      classList: [],
+      content: ""
+    };
+  }
+}
+function createImageBlock(data) {
+  const totalSize = data.width + data.height;
+  const w = Math.round(100 / totalSize * data.width);
+  const h = Math.round(100 / totalSize * data.height);
+  const contrast = w - h;
+  let classList = ["d-align-center"];
+  switch (true) {
+    case contrast < -40:
+      classList.push("--5");
+      break;
+    case contrast < -15:
+      classList.push("--10");
+      break;
+    default:
+      classList.push("--20");
+  }
+  return {
+    type: "image",
+    id: generateId(),
+    classList,
+    src: data.src,
+    width: data.width,
+    height: data.height,
+    caption: data.caption
+  };
+}
+function createListBlock(type = "ul") {
+  return {
+    type,
+    id: generateId(),
+    classList: [],
+    childList: [
+      {
+        classList: [],
+        content: ""
+      }
+    ]
+  };
+}
+export function createBlock(name, value) {
+  let blockData;
+  switch (name) {
+    case "ul":
+      blockData = createListBlock();
+      break;
+    case "ol":
+      blockData = createListBlock("ol");
+      break;
+    case "image":
+      blockData = createImageBlock(value);
+      break;
+    default:
+      blockData = createTextBlock(value);
+  }
+  return blockData;
+}

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

@@ -1,6 +1,7 @@
-import { allBlock } from "../../../types/index";
-export declare function createBlock(name: string, value?: object): allBlock;
+export * from "./global";
 export * from "./keyboard";
 export * from "./cursor";
 export * from "./style";
 export * from "./element";
+export * from "./converter";
+export * from "./ui";

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

@@ -1,83 +1,7 @@
-function generateId() {
-  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-  let str = "";
-  for (let i = 0; i < 20; i++) {
-    str += chars.charAt(Math.floor(Math.random() * chars.length));
-  }
-  return str;
-}
-function createTextBlock(data) {
-  if (data) {
-    return {
-      type: "text",
-      id: generateId(),
-      classList: data.classList,
-      content: data.content
-    };
-  } else {
-    return {
-      type: "text",
-      id: generateId(),
-      classList: [],
-      content: ""
-    };
-  }
-}
-function createImageBlock(data) {
-  const totalSize = data.width + data.height;
-  const w = Math.round(100 / totalSize * data.width);
-  const h = Math.round(100 / totalSize * data.height);
-  const contrast = w - h;
-  let classList = ["d-align-center"];
-  switch (true) {
-    case contrast < -40:
-      classList.push("--5");
-      break;
-    case contrast < -15:
-      classList.push("--10");
-      break;
-    default:
-      classList.push("--20");
-  }
-  return {
-    type: "image",
-    id: generateId(),
-    classList,
-    src: data.src,
-    width: data.width,
-    height: data.height,
-    webp: data.webp,
-    caption: data.caption
-  };
-}
-function createlistBlock(type = "ul") {
-  return {
-    type,
-    id: generateId(),
-    classList: [],
-    childList: [
-      {
-        classList: [],
-        content: ""
-      }
-    ]
-  };
-}
-export function createBlock(name, value) {
-  let blockData;
-  switch (name) {
-    case "ol":
-      blockData = createlistBlock("ol");
-      break;
-    case "image":
-      blockData = createImageBlock(value);
-      break;
-    default:
-      blockData = createTextBlock(value);
-  }
-  return blockData;
-}
+export * from "./global.mjs";
 export * from "./keyboard.mjs";
 export * from "./cursor.mjs";
 export * from "./style.mjs";
 export * from "./element.mjs";
+export * from "./converter.mjs";
+export * from "./ui.mjs";

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

@@ -2,15 +2,15 @@ import { getCursor, setCursor } from "./cursor.mjs";
 import { findEditableElement, findChildNumber, findLiElement } from "./element.mjs";
 import { getTagName } from "./style.mjs";
 let enterCount = 0;
-function enterEvent(type, event, action) {
+function enterEvent(type, event, action, update) {
   if (event.code === "Enter") {
     event.preventDefault();
     const useShift = event.shiftKey;
     switch (type) {
-      case "ol":
+      case "list":
         if (useShift === false) {
           if (enterCount == 0) {
-            listEnterEvent(event, action);
+            listEnterEvent(action, update);
           }
         } else {
           addBrEvent();
@@ -27,7 +27,7 @@ function enterEvent(type, event, action) {
       default:
         if (useShift === false) {
           if (enterCount == 0) {
-            textEnterEvent(event, action);
+            textEnterEvent(action);
           }
         } else {
           addBrEvent();
@@ -39,7 +39,7 @@ function enterEvent(type, event, action) {
     }, 150);
   }
 }
-function listEnterEvent(event, action) {
+function listEnterEvent(action, update) {
   const cursorData = getCursor();
   if (cursorData.startNode) {
     const editableElement = findEditableElement(cursorData.startNode);
@@ -74,9 +74,16 @@ function listEnterEvent(event, action) {
       endOffset = cursorData.endOffset;
     }
     if (editableElement.childNodes.length === 0 || endChildIdx === editableElement.childNodes.length - 1 && editableElement.childNodes[endChildIdx].textContent.length === endOffset) {
-      action("addBlock", {
-        name: "text"
-      });
+      if (editableElement.childNodes.length === 0) {
+        editableElement.remove();
+        action("addBlock", {
+          name: "text"
+        });
+      } else {
+        editableElement.insertAdjacentHTML("afterend", `<li class="d-li-item"  contenteditable></li>`);
+        setCursor(editableElement.nextSibling, 0);
+        update();
+      }
     } else {
       editableElement.childNodes.forEach((child, count) => {
         const text = child.textContent;
@@ -125,14 +132,15 @@ function listEnterEvent(event, action) {
         }
       });
       editableElement.innerHTML = preHTMLStructor;
-      action("addBlock", {
-        name: "text",
-        value: { classList: editableElementClassList, content: nextHTMLStructor }
-      });
+      editableElement.insertAdjacentHTML("afterend", `<li class="d-li-item ${editableElementClassList.join(" ")}">${nextHTMLStructor}</li>`);
+      setTimeout(() => {
+        setCursor(editableElement.nextSibling.childNodes[0], 0);
+        update();
+      }, 100);
     }
   }
 }
-function textEnterEvent(event, action) {
+function textEnterEvent(action) {
   const cursorData = getCursor();
   if (cursorData.startNode) {
     const editableElement = findEditableElement(cursorData.startNode);
@@ -245,7 +253,7 @@ function backspaceEvent(type, event, action, update) {
   }
 }
 export function keyboardEvent(type, event, action, update) {
-  enterEvent(type, event, action);
+  enterEvent(type, event, action, update);
   backspaceEvent(type, event, action, update);
 }
 export function getClipboardData(data) {

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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,62 @@
+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]
+      );
+    };
+  }
+});