dragon-editor 2.0.0-beta.1.4 → 2.0.0-beta.2.1

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

@@ -0,0 +1,175 @@
+<template>
+    <div class="d-image-block" :class="data.classList" ref="$block" @mousemove="resizeMouseEvent" @touchmove="resizeTouchEvent" @mouseup="doneResizeStatus" @touchend="doneResizeStatus">
+        <div class="d-image-area">
+            <button class="d-btn-size-left" @mousedown="startResizeEvent" @touchstart="startResizeEvent"></button>
+            <button class="d-btn-size-right" @mousedown="startResizeEvent" @touchstart="startResizeEvent"></button>
+
+            <template v-if="data.webp">
+                <picture>
+                    <source :srcset="data.src.replace(/\.(jpg|png|jpeg|apng|gif)/g, '.webp')" />
+                    <img class="d-img" :src="data.src" :width="data.width" :height="data.height" :alt="data.caption" loading="lazy" />
+                </picture>
+            </template>
+
+            <template v-else>
+                <img class="d-img" :src="data.src" :width="data.width" :height="data.height" :alt="data.caption" loading="lazy" />
+            </template>
+        </div>
+        <p class="d-caption" v-html="data.caption" @keydown="textKeyboardEvent" ref="$caption" contenteditable></p>
+    </div>
+</template>
+
+<script setup lang="ts">
+// @ts-ignore
+import { ref, unref } from "#imports";
+import { keyboardEvent, pasteText, styleSettings } from "../../utils/index";
+import { imageBlock, cursorSelection, styleFunctionArgument } from "../../../../types/index";
+
+const $block = ref();
+const $caption = ref();
+const data = ref<imageBlock>({
+    type: "",
+    id: "",
+    classList: [],
+    src: "",
+    width: 0,
+    height: 0,
+    webp: false,
+    caption: "",
+});
+const props = defineProps<{ modelValue: imageBlock; cursorData: cursorSelection }>();
+const emit = defineEmits<{
+    (e: "update:modelValue", modelValue: imageBlock): void;
+    (e: "addBlock", name: string): void;
+    (e: "deleteBlockLocal", index?: number): void;
+}>();
+
+data.value = unref(props.modelValue) as imageBlock;
+
+/**
+ * 내부 상수
+ */
+let activeResize = false;
+let startX = 0;
+
+/**
+ * 내부 이벤트
+ */
+// 키보드 이벤트 할당
+function textKeyboardEvent(e: KeyboardEvent) {
+    keyboardEvent("image", e, emit, updateBlockData);
+}
+
+// 리사이즈 시작
+const startResizeStatus = (value) => {
+    activeResize = true;
+    startX = value;
+};
+
+function startResizeEvent() {
+    // startResizeStatus(e.clientX);
+    activeResize = true;
+}
+
+function activeResizeTouchEvent(e: TouchEvent) {
+    // startResizeStatus(Math.floor(e.touches[0].clientX));
+    activeResize = true;
+}
+
+// 리사이즈 이벤트
+const resizeEvent = (value) => {
+    if (activeResize) {
+        const blockRect = $block.value.getBoundingClientRect();
+        const bodyRect = document.body.getBoundingClientRect();
+        const blockLeft = blockRect.left - bodyRect.left;
+        const centerPoint: number = blockRect.width / 2 + blockLeft;
+        const blockRight = window.innerWidth - (centerPoint + blockRect.width / 2);
+        let percent: number = 0;
+
+        // console.log(value);
+
+        if (centerPoint > value) {
+            // 왼쪽
+            const leftPercent = (100 / (centerPoint - blockLeft)) * (value - blockLeft);
+
+            percent = Math.floor(100 - leftPercent) + 2;
+        } else {
+            // 오른쪽
+            const right = window.innerWidth - (centerPoint + blockRight);
+            const valueData = value - centerPoint;
+            const rightPercent = (100 / right) * valueData;
+
+            percent = Math.floor(rightPercent);
+        }
+
+        percent = percent - (percent % 5);
+        percent = percent / 5;
+
+        const classList = data.value.classList.filter((item) => /--\d{1,2}/g.test(item) === false);
+        classList.push(`--${percent}`);
+        data.value.classList = classList;
+    }
+};
+
+function resizeMouseEvent(e: MouseEvent) {
+    resizeEvent(e.clientX);
+}
+
+function resizeTouchEvent(e: TouchEvent) {
+    resizeEvent(Math.floor(e.touches[0].clientX));
+}
+
+// 리사이즈 종료
+function doneResizeStatus() {
+    activeResize = false;
+}
+
+/**
+ * 외부용 함수
+ */
+function focus() {
+    $caption.value.focus();
+}
+
+// 블럭 위치 주기
+function getBoundingClientRect() {
+    return $block.value.parentNode.getBoundingClientRect();
+}
+
+// 타입 전달
+function getType() {
+    return data.value.type;
+}
+
+// 붙여넣기 이벤트
+function pasteEvent(text: string) {
+    pasteText("text", text);
+}
+
+// 데이터 정규화 및 검수
+function updateBlockData() {
+    emit("update:modelValue", data.value);
+}
+
+// 텍스트 스타일 지정
+function setStyles({ type, url }: styleFunctionArgument) {
+    data.value = styleSettings({
+        kind: type,
+        blockData: data.value,
+        $target: $block.value,
+        cursorData: props.cursorData,
+    });
+    setTimeout(() => {
+        updateBlockData();
+    }, 250);
+}
+
+defineExpose({
+    updateBlockData,
+    getType,
+    focus,
+    pasteEvent,
+    setStyles,
+    getBoundingClientRect,
+});
+</script>

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

@@ -0,0 +1,135 @@
+<template>
+    <ol class="d-ol-block" :class="data.classList" @keydown="textKeyboardEvent">
+        <li class="d-li-item" contenteditable ref="$olItem"></li>
+    </ol>
+</template>
+
+<script setup lang="ts">
+// @ts-ignore
+import { ref, unref } from "#imports";
+import { cursorSelection, listBlock, styleFunctionArgument } from "../../../../types";
+import { getArrangementCursorData, setCursor, pasteText, styleSettings, keyboardEvent } from "../../utils";
+
+const $olItem = ref();
+const data = ref<listBlock>({
+    type: "",
+    id: "",
+    classList: [],
+    childList: [],
+});
+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("ol", e, emit, updateBlockData);
+}
+
+/**
+ * 외부용 함수
+ */
+
+// 데이터 정규화 및 검수
+function updateBlockData() {
+    // const blockClassList = [...$block.value.classList];
+    // blockClassList.splice(0, 1);
+    // const pushList = blockClassList.filter((item) => data.value.classList.indexOf(item) === -1);
+    // data.value.classList = data.value.classList.concat(pushList);
+    // // 클레스 검수
+    // const checkClassIdx = data.value.classList.indexOf("d-text-block");
+    // if (checkClassIdx > -1) {
+    //     data.value.classList.splice(checkClassIdx, 1);
+    // }
+    // // 커서위치 재지정
+    // if ($block.value.innerHTML.length > 0) {
+    //     const cursorData = getArrangementCursorData(props.cursorData);
+    //     data.value.content = $block.value.innerHTML;
+    //     emit("update:modelValue", data.value);
+    //     setTimeout(() => {
+    //         if ($block.value) {
+    //             setCursor($block.value.childNodes[cursorData.childCount], cursorData.length);
+    //             // 구조 검수
+    //             $block.value.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");
+    //                     }
+    //                 }
+    //             });
+    //         }
+    //     }, 100);
+    // } else {
+    //     emit("update:modelValue", data.value);
+    // }
+}
+
+// 포커스
+function focus(type: string = "first") {
+    // if (type === "first") {
+    //     setCursor($block.value, 0);
+    // } else {
+    //     const childCount = $block.value.childNodes.length;
+    //     const targetChild = $block.value.childNodes[childCount - 1];
+    //     setCursor(targetChild, 0);
+    // }
+}
+
+// 블럭 위치 주기
+function getBoundingClientRect() {
+    // return $block.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: undefined,
+        url: url,
+        cursorData: props.cursorData,
+    });
+    setTimeout(() => {
+        updateBlockData();
+    }, 250);
+}
+
+defineExpose({
+    updateBlockData,
+    focus,
+    getType,
+    pasteEvent,
+    setStyles,
+    getBoundingClientRect,
+});
+</script>

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

@@ -1,13 +1,12 @@
 <template>
-    <p class="d-text-block" :class="data.classList" contenteditable v-html="data.content" @keydown="textKeyboardEvent"
-       ref="$block"
-    ></p>
+    <p class="d-text-block" :class="data.classList" contenteditable v-html="data.content" @keydown="textKeyboardEvent" ref="$block"></p>
 </template>
 
 <script setup lang="ts">
-import {ref, unref} from "#imports";
-import {keyboardEvent, setCursor, pasteText, styleSettings, getArrangementCursorData} from "../../utils/index";
-import {textBlock} from "../../../../types/index";
+// @ts-ignore
+import { ref, unref } from "#imports";
+import { keyboardEvent, setCursor, pasteText, styleSettings, getArrangementCursorData } from "../../utils/index";
+import { textBlock, styleFunctionArgument, cursorSelection } from "../../../../types/index";
 
 const $block = ref();
 const data = ref<textBlock>({
@@ -16,67 +15,113 @@ const data = ref<textBlock>({
     classList: [],
     content: "",
 });
-const props = defineProps<{ modelValue: textBlock }>();
+const props = defineProps<{ modelValue: textBlock; cursorData: cursorSelection }>();
 const emit = defineEmits<{
     (e: "update:modelValue", modelValue: textBlock): void;
-    (e: "addBlock", name: string): void;
+    (e: "addBlock", {}: { name: string; value: object }): void;
+    (e: "deleteBlockLocal", index?: number): void;
 }>();
 
 data.value = unref(props.modelValue) as textBlock;
 
+// 키보드 이벤트 할당
 function textKeyboardEvent(e: KeyboardEvent) {
-    keyboardEvent("text", e, emit);
+    keyboardEvent("text", e, emit, updateBlockData);
 }
 
+/**
+ * 외부용 함수
+ */
 
-// export event
-function updateBlockData() { // 데이터 정규화 및 검수
+// 데이터 정규화 및 검수
+function updateBlockData() {
     const blockClassList = [...$block.value.classList];
     blockClassList.splice(0, 1);
-    const pushList = blockClassList.filter(item => data.value.classList.indexOf(item) === -1);
+    const pushList = blockClassList.filter((item) => data.value.classList.indexOf(item) === -1);
 
     data.value.classList = data.value.classList.concat(pushList);
 
+    // 클레스 검수
+    const checkClassIdx = data.value.classList.indexOf("d-text-block");
+    if (checkClassIdx > -1) {
+        data.value.classList.splice(checkClassIdx, 1);
+    }
+
     // 커서위치 재지정
     if ($block.value.innerHTML.length > 0) {
-        const cursorData = getArrangementCursorData();
-        const preChildCount = $block.value.childNodes.length;
+        const cursorData = getArrangementCursorData(props.cursorData);
 
         data.value.content = $block.value.innerHTML;
         emit("update:modelValue", data.value);
 
         setTimeout(() => {
-            const $target = $block.value.childNodes[cursorData.childCount];
-            const childCount = $block.value.childNodes.length;
-
-            setCursor($block.value.childNodes[cursorData.childCount], cursorData.length);
-
-            // 빈 태그 삭제
-            $block.value.childNodes.forEach((child: ChildNode) => {
-                if (child.constructor.name !== "Text" && child.textContent === "") {
-                    child.remove();
-                }
-            });
-        }, 100)
+            if ($block.value) {
+                setCursor($block.value.childNodes[cursorData.childCount], cursorData.length);
+
+                // 구조 검수
+                $block.value.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");
+                        }
+                    }
+                });
+            }
+        }, 100);
     } else {
         emit("update:modelValue", data.value);
     }
 }
 
-function focus() {
-    setCursor($block.value, 0);
+// 포커스
+function focus(type: string = "first") {
+    if (type === "first") {
+        setCursor($block.value, 0);
+    } else {
+        const childCount = $block.value.childNodes.length;
+        const targetChild = $block.value.childNodes[childCount - 1];
+
+        setCursor(targetChild, 0);
+    }
+}
+
+// 블럭 위치 주기
+function getBoundingClientRect() {
+    return $block.value.parentNode.getBoundingClientRect();
 }
 
+// 타입 전달
 function getType() {
     return data.value.type;
 }
 
+// 붙여넣기 이벤트
 function pasteEvent(text: string) {
     pasteText("text", text);
 }
 
-function setStyles(kind: string) {
-    data.value = styleSettings(kind, data.value, $block.value);
+// 텍스트 스타일 지정
+function setStyles({ type, url }: styleFunctionArgument) {
+    data.value = styleSettings({
+        kind: type,
+        blockData: data.value,
+        $target: $block.value,
+        url: url,
+        cursorData: props.cursorData,
+    });
     setTimeout(() => {
         updateBlockData();
     }, 250);
@@ -87,6 +132,7 @@ defineExpose({
     focus,
     getType,
     pasteEvent,
-    setStyles
+    setStyles,
+    getBoundingClientRect,
 });
 </script>

package/dist/runtime/core/components/icon/Accept.vue

@@ -0,0 +1,5 @@
+<template>
+    <path class="path"
+        d="M51.3456 17.6735C49.1181 15.4422 45.5066 15.4422 43.2792 17.6735L26.0616 34.9213L20.741 29.5914C18.5126 27.3591 14.8997 27.3591 12.6713 29.5914C10.4429 31.8236 10.4429 35.4429 12.6713 37.6752L21.9937 47.0139C24.222 49.2462 27.835 49.2462 30.0633 47.0139C30.1078 46.9693 30.1514 46.9243 30.194 46.8787C30.3822 46.7324 30.5633 46.5728 30.736 46.3997L51.3456 25.7541C53.573 23.5227 53.573 19.9049 51.3456 17.6735Z">
+    </path>
+</template>

package/dist/runtime/core/components/icon/ArrowDown.vue

@@ -0,0 +1,3 @@
+<template>
+    <path class="path" d="M32 9C30.8954 9 30 9.89543 30 11V48.0208L18.4142 36.435C17.6332 35.654 16.3668 35.654 15.5858 36.435C14.8047 37.2161 14.8047 38.4824 15.5858 39.2635L30.6611 54.3388C31.4422 55.1199 32.7086 55.1199 33.4896 54.3388L48.5649 39.2635C49.346 38.4824 49.346 37.2161 48.5649 36.435C47.7839 35.654 46.5176 35.654 45.7365 36.435L34 48.1716V11C34 9.89543 33.1046 9 32 9Z"></path>
+</template>

package/dist/runtime/core/components/icon/ArrowUp.vue

@@ -0,0 +1,3 @@
+<template>
+    <path class="path" d="M45.7366 27.4896C46.5176 28.2706 47.7839 28.2706 48.565 27.4896C49.346 26.7085 49.346 25.4422 48.565 24.6612L33.4896 9.58579C32.7085 8.80473 31.4422 8.80474 30.6612 9.58579L15.5858 24.6612C14.8047 25.4422 14.8047 26.7085 15.5858 27.4896C16.3668 28.2706 17.6332 28.2706 18.4142 27.4896L30 15.9038V53C30 54.1046 30.8954 55 32 55C33.1045 55 34 54.1046 34 53V15.753L45.7366 27.4896Z"></path>
+</template>

package/dist/runtime/core/components/icon/Cancel.vue

@@ -0,0 +1,5 @@
+<template>
+    <path class="path"
+        d="M13.2497 13.0226C11.032 15.2442 11.032 18.8461 13.2497 21.0677L24.0457 31.8826L13.0153 42.9323C10.7976 45.1539 10.7976 48.7558 13.0153 50.9774C15.2331 53.199 18.8287 53.199 21.0464 50.9774L32.0768 39.9278L42.9532 50.8233C45.1709 53.0449 48.7666 53.0449 50.9843 50.8233C53.202 48.6017 53.202 44.9997 50.9843 42.7781L40.1078 31.8826L50.7499 21.2219C52.9677 19.0003 52.9677 15.3983 50.7499 13.1767C48.5322 10.9551 44.9366 10.9551 42.7189 13.1767L32.0768 23.8375L21.2808 13.0226C19.063 10.801 15.4674 10.801 13.2497 13.0226Z">
+    </path>
+</template>

package/dist/runtime/core/components/icon/Delete.vue

@@ -0,0 +1,3 @@
+<template>
+    <path class="path" fill-rule="evenodd" clip-rule="evenodd" d="M32 51C42.4934 51 51 42.4934 51 32C51 21.5066 42.4934 13 32 13C21.5066 13 13 21.5066 13 32C13 42.4934 21.5066 51 32 51ZM32 55C44.7026 55 55 44.7026 55 32C55 19.2974 44.7026 9 32 9C19.2974 9 9 19.2974 9 32C9 44.7026 19.2974 55 32 55ZM21.4142 42.6274C20.6332 41.8462 20.6332 40.5801 21.4142 39.7988L29.1715 32.0415L21.5858 24.4558C20.8047 23.6748 20.8047 22.4084 21.5858 21.6274C22.3668 20.8462 23.6332 20.8462 24.4142 21.6274L31.9999 29.2131L39.799 21.4141C40.58 20.6331 41.8464 20.6331 42.6274 21.4141C43.4084 22.1953 43.4084 23.4614 42.6274 24.2427L34.8284 32.0417L42.799 40.0122C43.58 40.7932 43.58 42.0596 42.799 42.8406C42.0179 43.6216 40.7516 43.6216 39.9706 42.8406L32.0001 34.8701L24.2426 42.6274C23.4616 43.4084 22.1953 43.4084 21.4142 42.6274Z"></path>
+</template>