dragon-editor 2.1.2 → 3.0.0

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

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

@@ -1,162 +0,0 @@
-<template>
-    <ol class="d-ol-block" @keydown="textKeyboardEvent" ref="$ol" :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>
-    </ol>
-</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 $ol = 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 = $ol.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 = $ol.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 = $ol.value.querySelectorAll("li");
-                setCursor(afterChildList[childIdx], cursorData.startOffset as number);
-            }, 100);
-        }
-    }
-}
-
-// 포커스
-function focus() {
-    const childList = $ol.value.querySelectorAll(".d-li-item");
-    setCursor(childList[itemIdx.value], 0);
-}
-
-// 블럭 위치 주기
-function getBoundingClientRect() {
-    return $ol.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/components/editor/TextBlock.vue

@@ -1,172 +0,0 @@
-<template>
-    <p class="d-text-block" :class="data.classList" contenteditable v-html="data.content" @keydown="textKeyboardEvent" ref="$block"></p>
-</template>
-
-<script setup lang="ts">
-// @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>({
-    type: "",
-    id: "",
-    classList: [],
-    content: "",
-});
-const props = defineProps<{ modelValue: TextBlock; cursorData: cursorSelection }>();
-const emit = defineEmits<{
-    (e: "update:modelValue", modelValue: TextBlock): 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, 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) {
-        if (props.cursorData.endOffset !== null) {
-            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 {
-            if ($block.value) {
-                $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");
-                        }
-                    }
-                });
-
-                data.value.content = $block.value.innerHTML;
-                emit("update:modelValue", data.value);
-            }
-        }
-    } else {
-        emit("update:modelValue", data.value);
-    }
-}
-
-// 포커스
-function focus(type: string = "first") {
-    if (type === "first") {
-        if ($block.value.childNodes.length > 0) {
-            setTimeout(() => {
-                setCursor($block.value.childNodes[0], 0);
-            }, 100);
-        } else {
-            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: $block.value,
-        url: url,
-        cursorData: props.cursorData,
-    });
-    setTimeout(() => {
-        updateBlockData();
-    }, 250);
-}
-
-defineExpose({
-    updateBlockData,
-    focus,
-    getType,
-    pasteEvent,
-    setStyles,
-    getBoundingClientRect,
-});
-</script>

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

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