dragon-editor 2.0.0-beta.1 → 2.0.0-beta.1.3

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "dragon-editor",
   "configKey": "dragon-editor",
-  "version": "2.0.0-beta.1"
+  "version": "2.0.0-beta.1.3"
 }

package/dist/runtime/components/DragonEditor.vue

@@ -0,0 +1,361 @@
+<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="d-add-block">
+                <button class="d-btn-menu-pop"></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>
+                        <p class="d-name">{{ row.name }}</p>
+                    </button>
+                </div>
+            </div>
+
+            <div class="d-control-block">
+                <button class="d-btn-block-pop"></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>
+            </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"/>
+                </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"/>
+                </button>
+            </div>
+
+            <div class="d-column">
+                <button class="d-btn">
+                    <SvgIcon kind="codeBlock"/>
+                </button>
+            </div>
+
+            <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>
+    </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";
+
+// components
+import SvgIcon from "../../core/components/SvgIcon.vue";
+import textBlock from "../../core/components/editor/TextBlock.vue";
+
+// props
+const props = withDefaults(defineProps<{ modelValue: editorContentType, option?: editorOptions }>(), {
+    modelValue: () => [],
+    option: () => {
+        return {
+            blockMenu: ["text", "ol", "ul", "table", "quotation"]
+        }
+    },
+});
+const emit = defineEmits<{
+    (e: "update:modelValue", modelValue: editorContentType): void;
+}>();
+
+// Editor data
+const $wrap = ref();
+const $child = ref();
+const activeMenu = ref<boolean>(false);
+const leftMenuPosition = ref<number>(0);
+const styleMenuPosition = ref<number>(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();
+});
+
+// block menu setting
+blockMenu.value = setEditorMenu(props.option.blockMenu as string[], unref(props.option.customBlockMenu) as userCustomMenu[]);
+
+// 유저 커스텀 스타일 메뉴
+if (props.option.customStyleMenu) {
+    customStyleMenu.value = unref(props.option.customStyleMenu);
+}
+
+// content data setting
+if (props.modelValue && Array.isArray(props.modelValue)) {
+    if (props.modelValue.length == 0) {
+        addBlockLocal("text", true);
+    } else {
+        content.value = unref(props.modelValue) as editorContentType;
+    }
+} else {
+    throw new Error("[DragonEditor]ERROR : You must set 'v-model' attribute and 'v-mode' type is must be Array.");
+}
+
+// local logic
+function checkAlignActive(className: string) {
+    const data = content.value[activeIdx.value];
+    let value = false;
+
+    switch (data.type) {
+        case "text":
+            value = data.classList.indexOf(className) > -1;
+            break;
+    }
+
+    return value;
+}
+
+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");
+}
+
+function hasClassNameCheckLogic(className: string) {
+    const cursorData = getCursor();
+    let value = false;
+
+    if (cursorData.type === "Caret") {
+        const type = (cursorData.startNode as Node).constructor.name;
+        let $target = cursorData.startNode as HTMLElement;
+
+        if (type === "Text") {
+            $target = (cursorData.startNode as HTMLElement).parentNode as HTMLElement;
+        }
+
+        if ($target) {
+            const classList = [...$target.classList];
+
+            if (classList.indexOf(className) > -1) {
+                value = true;
+            }
+        }
+    }
+
+    return value;
+}
+
+
+function setEditorMenu(vanillaData: string[], customData?: userCustomMenu[]) {
+    const dataList: editorMenu[] = [];
+
+    vanillaData.forEach((name) => {
+        dataList.push({
+            name: name,
+            hasIcon: true,
+            icon: `${name}Block`,
+            action: () => {
+                addBlockLocal(name);
+            }
+        });
+    });
+
+    if (customData) {
+        customData.forEach((row) => {
+            dataList.push({
+                name: row.name,
+                hasIcon: iconList.indexOf(row.icon) > -1,
+                icon: row.icon,
+                action: row.action
+            });
+        });
+    }
+
+    return dataList;
+}
+
+
+// event function
+function activeMenuEvent(e: MouseEvent) {
+    setMenuPosition(e.currentTarget as HTMLElement);
+    checkDecoActive();
+    activeMenu.value = true;
+}
+
+function deactiveMenuEvent() {
+    activeMenu.value = false;
+}
+
+function dataUpdateAction() {
+    $child.value.forEach((row: any) => {
+        row.updateBlockData();
+    });
+
+    emit("update:modelValue", content.value);
+}
+
+function addBlockLocal(name: string, time: boolean = false) {
+    const block = createBlock(name);
+
+    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();
+            }
+
+            dataUpdateAction();
+        }, 100);
+    }
+}
+
+function pasteEvent(e: ClipboardEvent) {
+    e.preventDefault();
+    const data = getClipboardData(e.clipboardData as DataTransfer);
+
+    if (data.type === "text") {
+        const targetComponent = $child.value[activeIdx.value];
+        const componentType = targetComponent.getType();
+
+        if (componentType !== "image" && componentType !== "other") {
+            targetComponent.pasteEvent(data.value);
+        }
+    }
+}
+
+function setComponentKind(kind: string) {
+    switch (kind) {
+        case "text":
+            return textBlock;
+            break;
+    }
+}
+
+function setMenuPosition($target: HTMLElement) {
+    const parentNode = $wrap.value.parentNode;
+    const bodyRect = document.body.getBoundingClientRect();
+    const wrapRect = $wrap.value.getBoundingClientRect();
+    const targetRect = $target.getBoundingClientRect();
+    const parentNodeScrollY = parentNode.scrollTop;
+    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;
+
+    styleMenuPosition.value = bottom;
+    leftMenuPosition.value = top;
+}
+
+function setBlockEvent(type: string) {
+    $child.value[activeIdx.value].setStyles(type);
+    setTimeout(() => {
+        checkDecoActive();
+    }, 100);
+}
+
+
+// export function
+// function checkStyleActive(className: string) {
+//     return hasClassNameCheckLogic(className);
+// }
+
+function addImageBlock() {
+    console.log("local image added event!");
+    console.log($child);
+    // contentData.value = value;
+}
+
+defineExpose({
+    addImageBlock
+});
+</script>
+
+<style>
+@import "../../core/style/common.css";
+</style>

package/dist/runtime/components/DragonEditorComment.vue

@@ -0,0 +1,129 @@
+<template>
+    <div class="dragon-editor">
+        <p class="d-text-block" :class="data.classList" contenteditable v-html="data.content" @keydown="textKeyboardEvent"
+            @paste="pasteEvent" ref="$block"></p>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, unref } from "#imports";
+import {
+    keyboardEvent,
+    setCursor,
+    pasteText,
+    styleSettings,
+    getArrangementCursorData,
+    getClipboardData,
+    getCursor,
+    findEditableElement
+} from "../../core/utils/index";
+import { commentBlock } from "../../types/index";
+
+const $block = ref();
+const data = ref<commentBlock>({
+    type: "comment",
+    classList: [],
+    content: "",
+});
+const props = defineProps<{ modelValue: commentBlock }>();
+const emit = defineEmits<{
+    (e: "update:modelValue", modelValue: commentBlock): void;
+}>();
+
+data.value = unref(props.modelValue) as commentBlock;
+
+function textKeyboardEvent(e: KeyboardEvent) {
+    keyboardEvent("comment", e, emit);
+}
+
+function pasteEvent(e: ClipboardEvent) {
+    e.preventDefault();
+    const data = getClipboardData(e.clipboardData as DataTransfer);
+
+    if (data.type === "text") {
+        pasteText("text", data.value as string);
+    }
+}
+
+// export event
+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);
+
+    // 커서위치 재지정
+    if ($block.value.innerHTML.length > 0) {
+        const cursorData = getArrangementCursorData();
+
+        data.value.content = $block.value.innerHTML;
+        emit("update:modelValue", data.value);
+
+        setTimeout(() => {
+            setCursor(
+                $block.value.childNodes[cursorData.childCount],
+                cursorData.length
+            );
+
+            // 빈 태그 삭제
+            $block.value.childNodes.forEach((child: ChildNode) => {
+                if (
+                    child.constructor.name !== "Text" &&
+                    child.textContent === ""
+                ) {
+                    child.remove();
+                }
+            });
+        }, 100);
+    } else {
+        emit("update:modelValue", data.value);
+    }
+}
+
+function focus() {
+    setCursor($block.value, 0);
+}
+
+function setStyles(kind: string) {
+    data.value = styleSettings(kind, data.value, $block.value);
+    setTimeout(() => {
+        updateBlockData();
+    }, 250);
+}
+
+function getCursorClassList(className: string) {
+    const cursorData = getCursor();
+    let value: string[] = [];
+
+    if (cursorData.type === "Caret") {
+        const type = (cursorData.startNode as Node).constructor.name;
+        const editableElement = findEditableElement(cursorData.startNode as Node);
+        let $target = cursorData.startNode as HTMLElement;
+
+        if (type === "Text") {
+            $target = (cursorData.startNode as HTMLElement).parentNode as HTMLElement;
+        }
+
+        if ($target !== editableElement) {
+            value = [...$target.classList];
+        }
+    }
+
+    return value;
+}
+
+defineExpose({
+    updateBlockData,
+    focus,
+    setStyles,
+    getCursorClassList
+});
+</script>
+
+<style>
+@import "../../core/style/common.css";
+</style>

package/dist/runtime/components/DragonEditorViewer.vue

@@ -0,0 +1,3 @@
+<template>
+    <div class="editor-viewer"></div>
+</template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dragon-editor",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.1.3",
   "description": "WYSIWYG editor on Nuxt.js",
   "repository": {
     "type": "git",