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

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

@@ -1,182 +1,239 @@
 <template>
-    <div class="dragon-editor" @paste="pasteEvent" ref="$wrap" @mouseleave="deactiveMenuEvent"
-         @keydown="deactiveMenuEvent"
-    >
-        <div class="d-left-menu" :class="{'--active' : activeMenu}" :style="{top:`${leftMenuPosition}px`}">
+    <div class="dragon-editor" @paste="pasteEvent" ref="$wrap" @mouseleave="deactiveMenuEvent" @keydown="deactiveMenuEvent" :key="totalKey">
+        <div class="d-left-menu" :class="{ '--active': activeMenu }" :style="{ top: `${leftMenuPosition}px` }">
             <div class="d-add-block">
-                <button class="d-btn-menu-pop"></button>
+                <button class="d-btn-menu-pop" @click="toggleBlockAddMenu"></button>
 
-                <div class="d-block-list">
-                    <button v-for="(row,count) in blockMenu" :key="count" class="d-btn-block" @click="row.action">
-                        <SvgIcon v-if="row.hasIcon" :kind="row.icon"/>
-                        <div v-else class="icon" v-html="row.icon"></div>
+                <div class="d-block-list" :class="{ '--active': activeBlockAddMenu }">
+                    <button v-for="(row, count) in blockMenu" :key="count" class="d-btn-block" @click="row.action">
+                        <SvgIcon v-if="row.hasIcon" :kind="row.icon" />
+                        <div v-else class="d-icon" v-html="row.icon"></div>
                         <p class="d-name">{{ row.name }}</p>
                     </button>
                 </div>
             </div>
 
             <div class="d-control-block">
-                <button class="d-btn-block-pop"></button>
+                <button class="d-btn-block-pop" @click="toggleBlockControlMenu"></button>
 
-                <div class="d-block-list">
-                    <button class="d-btn-block"></button>
-                    <button class="d-btn-block"></button>
-                    <button class="d-btn-block"></button>
+                <div class="d-block-list" :class="{ '--active': activeBlockColtrolMenu }">
+                    <button class="d-btn-block" @click="moveBlock('up')">
+                        <SvgIcon kind="arrowUp" />Up
+                    </button>
+                    <button class="d-btn-block" @click="moveBlock('down')">
+                        <SvgIcon kind="arrowDown" />Down
+                    </button>
+                    <button class="d-btn-block">
+                        <SvgIcon kind="delete" />Delete
+                    </button>
                 </div>
             </div>
         </div>
 
-        <div class="d-style-menu" :class="{'--active' : activeMenu}" :style="{top:`${styleMenuPosition}px`}">
-            <div class="d-column">
-                <button class="d-btn" :class="{'--active' : checkAlignActive('d-align-left')}"
-                        @click="setBlockEvent('alignLeft')"
-                >
-                    <SvgIcon kind="alignLeft"/>
-                </button>
-                <button class="d-btn" :class="{'--active' : checkAlignActive('d-align-center')}"
-                        @click="setBlockEvent('alignCenter')"
-                >
-                    <SvgIcon kind="alignCenter"/>
-                </button>
-                <button class="d-btn" :class="{'--active' : checkAlignActive('d-align-right')}"
-                        @click="setBlockEvent('alignRight')"
-                >
-                    <SvgIcon kind="alignRight"/>
-                </button>
-            </div>
-
-            <div class="d-column">
-                <button class="d-btn" :class="{'--active' : activeStyle.bold}"
-                        @click="setBlockEvent('decorationBold')"
-                >
-                    <SvgIcon kind="decorationBold"/>
-                </button>
-
-                <button class="d-btn" :class="{'--active' : activeStyle.italic}"
-                        @click="setBlockEvent('decorationItalic')"
-                >
-                    <SvgIcon kind="decorationItalic"/>
-                </button>
-
-                <button class="d-btn" :class="{'--active' : activeStyle.underline}"
-                        @click="setBlockEvent('decorationUnderline')"
-                >
-                    <SvgIcon kind="decorationUnderline"/>
+        <div class="d-link-box" :class="{ '--active': activeLinkBox }" :style="{
+            top: `${linkBoxPosition.top}px`,
+            left: `${linkBoxPosition.left}px`,
+        }">
+            <template v-if="styleButtonList[2][0].active">
+                <p class="d-input">{{ linkValue }}</p>
+                <button class="d-btn-link" @click="decoLinkControl">
+                    <SvgIcon kind="cancel" />
                 </button>
-
-                <button class="d-btn" :class="{'--active' : activeStyle.through}"
-                        @click="setBlockEvent('decorationStrikethrough')"
-                >
-                    <SvgIcon kind="decorationStrikethrough"/>
-                </button>
-            </div>
-
-            <div class="d-column">
-                <button class="d-btn">
-                    <SvgIcon kind="link"/>
+            </template>
+            <template v-else>
+                <input type="url" class="d-input" v-model="linkValue" />
+                <button class="d-btn-link" @click="decoLinkControl">
+                    <SvgIcon kind="accept" />
                 </button>
-            </div>
+            </template>
+        </div>
 
-            <div class="d-column">
-                <button class="d-btn">
-                    <SvgIcon kind="codeBlock"/>
-                </button>
+        <div class="d-style-menu" :class="{ '--active': activeMenu }" :style="{ top: `${styleMenuPosition}px` }">
+            <div v-for="(column, count) in styleButtonList" :key="count" class="d-column">
+                <template v-for="(item, j) in column">
+                    <button v-if="item.target.indexOf(content[activeIdx].type) > -1" class="d-btn" :class="{ '--active': item.active }" @click="item.action">
+                        <SvgIcon :kind="item.icon" />
+                    </button>
+                </template>
             </div>
-
-            <div v-if="customStyleMenu.length  > 0" class="d-column">
+            <div v-if="customStyleMenu.length > 0" class="d-column">
                 <!--                customStyleMenu-->
             </div>
         </div>
 
-        <div
-            class="d-row-block"
-            v-for="(row,count) in content"
-            :key="count"
-            @click="activeIdx = count"
-            @mouseenter="activeMenuEvent"
-            @mousemove="activeMenuEvent"
-            @mouseup="activeMenuEvent"
-        >
-            <component
-                ref="$child"
-                v-model="content[count]"
-                :is="setComponentKind(row.type)"
-                @addBlock="addBlockLocal"
-            />
+        <div class="d-row-block" v-for="(row, count) in content" :key="count" @click="activeIdx = count" @mouseenter="activeMenuEvent(count, $event)" @mousemove="activeMenuEvent(count, $event)" @mouseup="activeMenuEvent(count, $event)">
+            <component ref="$child" v-model="content[count]" :key="`${row.type}-count`" :is="setComponentKind(row.type)" :cursorData="cursorData" @addBlock="addBlockLocal" @deleteBlockLocal="deleteBlockLocal" />
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import {ref, unref, onMounted} from "#imports";
-import {createBlock, getClipboardData, getCursor} from "../../core/utils";
-import {
-    editorOptions,
-    editorMenu,
-    editorContentType,
-    userCustomMenu,
-    styleActiveType,
-    userStyleMenu
-} from "../../../types/index";
+import { ref, unref, onMounted } from "#imports";
+import { createBlock, getClipboardData, getCursor } from "../../core/utils";
+import type { editorOptions, editorMenu, editorContentType, userCustomMenu, userStyleMenu, cursorSelection } from "../../../types/index";
 
 // components
 import SvgIcon from "../../core/components/SvgIcon.vue";
 import textBlock from "../../core/components/editor/TextBlock.vue";
+import imageBlock from "../../core/components/editor/ImageBlock.vue";
 
-// props
-const props = withDefaults(defineProps<{ modelValue: editorContentType, option?: editorOptions }>(), {
-    modelValue: () => [],
-    option: () => {
-        return {
-            blockMenu: ["text", "ol", "ul", "table", "quotation"]
-        }
-    },
+// 기본 정보
+const props = defineProps<{
+    modelValue: editorContentType;
+    option?: editorOptions;
+}>();
+const modelValue = ref<editorContentType>([]);
+const option = ref<editorOptions>({
+    blockMenu: ["text"],
+    // blockMenu: ["text", "ol", "ul", "table", "quotation"], // TODO : 다른 블럭 만들기
 });
+
+if (props.modelValue) {
+    modelValue.value = props.modelValue;
+}
+
+if (props.option) {
+    option.value = Object.assign(option.value, props.option);
+}
+
 const emit = defineEmits<{
     (e: "update:modelValue", modelValue: editorContentType): void;
 }>();
 
-// Editor data
+// 내부 데이터
 const $wrap = ref();
 const $child = ref();
 const activeMenu = ref<boolean>(false);
+const activeLinkBox = ref<boolean>(false);
+const activeBlockAddMenu = ref<boolean>(false);
+const activeBlockColtrolMenu = ref<boolean>(false);
 const leftMenuPosition = ref<number>(0);
 const styleMenuPosition = ref<number>(0);
+const linkBoxPosition = ref({
+    top: 0,
+    left: 0,
+});
 const iconList = ["textBlock", "imageBlock", "ulBlock", "olBlock", "quotationBlock", "tableBlock"];
 const blockMenu = ref<editorMenu[]>([]);
 const customStyleMenu = ref<userStyleMenu[]>([]);
 const content = ref<editorContentType>([]);
 const activeIdx = ref<number>(0);
-const activeStyle = ref<styleActiveType>({
-    bold: false,
-    italic: false,
-    underline: false,
-    through: false,
-    link: false,
-    code: false,
-});
-// const activeItemId = ref<string>("");
-// const selectItems = ref<string[]>([]);
-
-// initial logic
-onMounted(() => {
-    dataUpdateAction();
+const focusIdx = ref<number>(0);
+const linkValue = ref<string>("");
+const cursorData = ref<cursorSelection>({
+    type: "",
+    startNode: null,
+    startOffset: null,
+    endNode: null,
+    endOffset: null,
 });
+const styleButtonList = ref([
+    [
+        {
+            name: "Align Left",
+            icon: "alignLeft",
+            active: false,
+            target: ["text", "image", "table", "ul", "ol"],
+            action: () => {
+                setBlockDecoEvent("alignLeft");
+            },
+        },
+        {
+            name: "Align Center",
+            icon: "alignCenter",
+            target: ["text", "image", "table", "ul", "ol"],
+            active: false,
+            action: () => {
+                setBlockDecoEvent("alignCenter");
+            },
+        },
+        {
+            name: "Align right",
+            icon: "alignRight",
+            target: ["text", "image", "table", "ul", "ol"],
+            active: false,
+            action: () => {
+                setBlockDecoEvent("alignRight");
+            },
+        },
+    ],
+    [
+        {
+            name: "Decoration Bold",
+            icon: "decorationBold",
+            target: ["text", "table", "ul", "ol"],
+            active: false,
+            action: () => {
+                setBlockDecoEvent("decorationBold");
+            },
+        },
+        {
+            name: "Decoration Italic",
+            icon: "decorationItalic",
+            target: ["text", "table", "ul", "ol"],
+            active: false,
+            action: () => {
+                setBlockDecoEvent("decorationItalic");
+            },
+        },
+        {
+            name: "Decoration Underline",
+            icon: "decorationUnderline",
+            target: ["text", "table", "ul", "ol"],
+            active: false,
+            action: () => {
+                setBlockDecoEvent("decorationUnderline");
+            },
+        },
+        {
+            name: "Decoration Strikethrough",
+            icon: "decorationStrikethrough",
+            target: ["text", "table", "ul", "ol"],
+            active: false,
+            action: () => {
+                setBlockDecoEvent("decorationStrikethrough");
+            },
+        },
+    ],
+    [
+        {
+            name: "Link",
+            icon: "link",
+            active: false,
+            target: ["text", "table", "ul", "ol"],
+            action: () => {
+                activeLinkBox.value = !activeLinkBox.value;
+            },
+        },
+    ],
+    [
+        {
+            name: "Decoration Code",
+            icon: "codeBlock",
+            target: ["text", "table", "ul", "ol"],
+            active: false,
+            action: () => {
+                setBlockDecoEvent("decorationCode");
+            },
+        },
+    ],
+]);
+const totalKey = ref<number>(1);
 
-// block menu setting
-blockMenu.value = setEditorMenu(props.option.blockMenu as string[], unref(props.option.customBlockMenu) as userCustomMenu[]);
+// 블럭 추가 메뉴 설정
+blockMenu.value = setEditorMenu(option.value.blockMenu as string[], unref(option.value.customBlockMenu) as userCustomMenu[]);
 
 // 유저 커스텀 스타일 메뉴
-if (props.option.customStyleMenu) {
-    customStyleMenu.value = unref(props.option.customStyleMenu);
+if (option.value.customStyleMenu) {
+    customStyleMenu.value = unref(option.value.customStyleMenu);
 }
 
-// content data setting
-if (props.modelValue && Array.isArray(props.modelValue)) {
-    if (props.modelValue.length == 0) {
-        addBlockLocal("text", true);
+// 컨텐츠 데이터 설정
+if (modelValue.value && Array.isArray(modelValue.value)) {
+    if (modelValue.value.length == 0) {
+        addBlockLocal({ name: "text", time: true });
     } else {
-        content.value = unref(props.modelValue) as editorContentType;
+        content.value = modelValue.value;
     }
 } else {
     throw new Error("[DragonEditor]ERROR : You must set 'v-model' attribute and 'v-mode' type is must be Array.");
@@ -197,10 +254,15 @@ function checkAlignActive(className: string) {
 }
 
 function checkDecoActive() {
-    activeStyle.value.bold = hasClassNameCheckLogic("d-deco-bold");
-    activeStyle.value.italic = hasClassNameCheckLogic("d-deco-italic");
-    activeStyle.value.underline = hasClassNameCheckLogic("d-deco-underline");
-    activeStyle.value.through = hasClassNameCheckLogic("d-deco-through");
+    styleButtonList.value[0][0].active = checkAlignActive("d-align-left");
+    styleButtonList.value[0][1].active = checkAlignActive("d-align-center");
+    styleButtonList.value[0][2].active = checkAlignActive("d-align-right");
+    styleButtonList.value[1][0].active = hasClassNameCheckLogic("d-deco-bold");
+    styleButtonList.value[1][1].active = hasClassNameCheckLogic("d-deco-italic");
+    styleButtonList.value[1][2].active = hasClassNameCheckLogic("d-deco-underline");
+    styleButtonList.value[1][3].active = hasClassNameCheckLogic("d-deco-through");
+    styleButtonList.value[2][0].active = hasClassNameCheckLogic("d-deco-link");
+    styleButtonList.value[3][0].active = hasClassNameCheckLogic("d-deco-code");
 }
 
 function hasClassNameCheckLogic(className: string) {
@@ -222,12 +284,19 @@ function hasClassNameCheckLogic(className: string) {
                 value = true;
             }
         }
+
+        if (className === "d-deco-link") {
+            if (value) {
+                linkValue.value = $target.getAttribute("href");
+            } else {
+                linkValue.value = "";
+            }
+        }
     }
 
     return value;
 }
 
-
 function setEditorMenu(vanillaData: string[], customData?: userCustomMenu[]) {
     const dataList: editorMenu[] = [];
 
@@ -237,8 +306,8 @@ function setEditorMenu(vanillaData: string[], customData?: userCustomMenu[]) {
             hasIcon: true,
             icon: `${name}Block`,
             action: () => {
-                addBlockLocal(name);
-            }
+                addBlockLocal({ name: name });
+            },
         });
     });
 
@@ -248,7 +317,7 @@ function setEditorMenu(vanillaData: string[], customData?: userCustomMenu[]) {
                 name: row.name,
                 hasIcon: iconList.indexOf(row.icon) > -1,
                 icon: row.icon,
-                action: row.action
+                action: row.action,
             });
         });
     }
@@ -256,16 +325,37 @@ function setEditorMenu(vanillaData: string[], customData?: userCustomMenu[]) {
     return dataList;
 }
 
+/**
+ * 내부용 이벤트 함수
+ */
+// 관련 메뉴 열기
+function activeMenuEvent(count: number, e?: MouseEvent) {
+    let $target: HTMLElement;
 
-// event function
-function activeMenuEvent(e: MouseEvent) {
-    setMenuPosition(e.currentTarget as HTMLElement);
+    focusIdx.value = count;
+
+    cursorData.value = getCursor();
+
+    if (e) {
+        $target = e.currentTarget as HTMLElement;
+    } else {
+        $target = $child.value[activeIdx.value];
+    }
+
+    setMenuPosition($target);
     checkDecoActive();
     activeMenu.value = true;
 }
 
-function deactiveMenuEvent() {
+// 관련 메뉴 닫기
+function deactiveMenuEvent(e?: (MouseEvent | KeyboardEvent)) {
     activeMenu.value = false;
+    activeBlockAddMenu.value = false;
+    activeBlockColtrolMenu.value = false;
+
+    if (e && e.type === "mouseleave") {
+        activeLinkBox.value = false;
+    }
 }
 
 function dataUpdateAction() {
@@ -276,24 +366,50 @@ function dataUpdateAction() {
     emit("update:modelValue", content.value);
 }
 
-function addBlockLocal(name: string, time: boolean = false) {
-    const block = createBlock(name);
+// 블럭 추가 로직
+function addBlockLocal({ name, value, time = false }: { name: string; value?: object; time?: boolean }) {
+    const block = createBlock(name, value);
 
     content.value.splice(activeIdx.value + 1, 0, block);
 
     if (time === false) {
         activeIdx.value += 1;
 
-        setTimeout(() => { // waiting data set
-            if (name !== "image") {
-                $child.value[activeIdx.value].focus();
-            }
-
+        setTimeout(() => {
+            activeBlockAddMenu.value = false;
+            $child.value[activeIdx.value].focus();
             dataUpdateAction();
+            activeMenuEvent(activeIdx.value);
         }, 100);
     }
 }
 
+// 블럭 삭제 이벤트
+function deleteBlockLocal(index?: number) {
+    if (content.value.length > 1) {
+        if (index === undefined) {
+            index = activeIdx.value as number;
+        }
+
+        if (index - 1 !== -1) {
+            const $targetData = content.value[index - 1];
+            const $thisData = content.value[index];
+
+            if ($targetData.type === "text") {
+                activeIdx.value -= 1;
+                content.value[index - 1].content += `<span class="${$thisData.classList.join(" ")}">${$thisData.content}</span>`;
+                content.value.splice(index, 1);
+
+                setTimeout(() => {
+                    dataUpdateAction();
+                    $child.value[activeIdx.value].focus("last");
+                }, 150);
+            }
+        }
+    }
+}
+
+// 붙여넣기 이벤트
 function pasteEvent(e: ClipboardEvent) {
     e.preventDefault();
     const data = getClipboardData(e.clipboardData as DataTransfer);
@@ -302,18 +418,24 @@ function pasteEvent(e: ClipboardEvent) {
         const targetComponent = $child.value[activeIdx.value];
         const componentType = targetComponent.getType();
 
-        if (componentType !== "image" && componentType !== "other") {
+        if (componentType !== "other") {
             targetComponent.pasteEvent(data.value);
         }
     }
 }
 
+// 블럭 종류 정의
 function setComponentKind(kind: string) {
+    let componentData: any;
     switch (kind) {
-        case "text":
-            return textBlock;
+        case "image":
+            componentData = imageBlock;
             break;
+        case "text":
+            componentData = textBlock;
     }
+
+    return componentData;
 }
 
 function setMenuPosition($target: HTMLElement) {
@@ -325,34 +447,111 @@ function setMenuPosition($target: HTMLElement) {
     const wrapTop = wrapRect.top - bodyRect.top;
     const targetTop = targetRect.top - bodyRect.top;
     const targetBottom = targetRect.bottom - bodyRect.top;
-    const top = ((targetTop - (wrapTop + 10)) - parentNodeScrollY) + 13;
-    const bottom = ((targetBottom - (wrapTop + 10)) - parentNodeScrollY) + 10;
+    const top = targetTop - (wrapTop + 10) - parentNodeScrollY + 13;
+    const bottom = targetBottom - (wrapTop + 10) - parentNodeScrollY + 10;
+    let startNode = cursorData.value.startNode;
+
+    if (startNode !== null) {
+        if (startNode.constructor.name === "Text") {
+            startNode = startNode.parentNode;
+        }
+
+        const startNodeRect = startNode.getBoundingClientRect();
+        const wrapleft = startNodeRect.left - bodyRect.left;
+
+        linkBoxPosition.value = {
+            top: top - 32,
+            left: wrapleft,
+        };
+    }
 
     styleMenuPosition.value = bottom;
     leftMenuPosition.value = top;
 }
 
-function setBlockEvent(type: string) {
-    $child.value[activeIdx.value].setStyles(type);
+// 블럭 스타일 이벤트
+function setBlockDecoEvent(type: string, url?: string) {
+    $child.value[activeIdx.value].setStyles({
+        type: type,
+        url: url,
+    });
     setTimeout(() => {
         checkDecoActive();
     }, 100);
 }
 
+// 링크 스타일컨트롤
+function decoLinkControl() {
+    setBlockDecoEvent("decorationLink", linkValue.value);
+    activeLinkBox.value = false;
+}
+
+// 블럭 위치 조정
+async function moveBlock(type: string) {
+    let targetIdx = 0;
+    dataUpdateAction();
+
+    if (type === "up") {
+        targetIdx = activeIdx.value - 1;
+    } else {
+        targetIdx = activeIdx.value + 1;
+    }
+
+    if (targetIdx >= 0 && targetIdx < content.value.length) {
+        const targetData = content.value[targetIdx];
+        const thisData = content.value[activeIdx.value];
+
+        content.value.splice(targetIdx, 1, thisData);
+        content.value.splice(activeIdx.value, 1, targetData);
+        activeIdx.value = targetIdx;
 
-// export function
+        totalKey.value += 1;
+        deactiveMenuEvent();
+    }
+}
+
+// 블럭 추가 메뉴 열기
+function toggleBlockAddMenu() {
+    activeIdx.value = focusIdx.value;
+    activeBlockAddMenu.value = !activeBlockAddMenu.value;
+}
+
+// 블럭 컨트롤 메뉴 열기
+function toggleBlockControlMenu() {
+    activeIdx.value = focusIdx.value;
+    activeBlockColtrolMenu.value = !activeBlockColtrolMenu.value;
+}
+
+/**
+ * 외부용 함수
+ */
 // function checkStyleActive(className: string) {
 //     return hasClassNameCheckLogic(className);
 // }
 
-function addImageBlock() {
-    console.log("local image added event!");
-    console.log($child);
-    // contentData.value = value;
+function addImageBlock({ src, width, height, webp, caption }: { src: string; width: number; height: number; webp: boolean; caption?: string }) {
+    addBlockLocal({
+        name: "image",
+        value: {
+            src: src,
+            width: width,
+            height: height,
+            webp: webp,
+            caption: caption,
+        },
+    });
 }
 
+// 함수 내보내기
 defineExpose({
-    addImageBlock
+    addImageBlock,
+});
+
+/**
+ * 초기 데이터 확인용 로직
+ */
+onMounted(() => {
+    dataUpdateAction();
 });
 </script>