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

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

@@ -1,23 +1,14 @@
 <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 class="dragon-editor --comment">
+        <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">
+// @ts-ignore
 import { ref, unref } from "#imports";
-import {
-    keyboardEvent,
-    setCursor,
-    pasteText,
-    styleSettings,
-    getArrangementCursorData,
-    getClipboardData,
-    getCursor,
-    findEditableElement
-} from "../../core/utils/index";
-import { commentBlock } from "../../../types/index";
+import { keyboardEvent, setCursor, pasteText, styleSettings, getArrangementCursorData, getClipboardData, getCursor, findEditableElement } from "../../core/utils/index";
+import { commentBlock, cursorSelection } from "../../../types/index";
 
 const $block = ref();
 const data = ref<commentBlock>({
@@ -29,11 +20,18 @@ const props = defineProps<{ modelValue: commentBlock }>();
 const emit = defineEmits<{
     (e: "update:modelValue", modelValue: commentBlock): void;
 }>();
+const blockCursorData = ref<cursorSelection>({
+    type: "",
+    startNode: null,
+    startOffset: null,
+    endNode: null,
+    endOffset: null,
+});
 
 data.value = unref(props.modelValue) as commentBlock;
 
 function textKeyboardEvent(e: KeyboardEvent) {
-    keyboardEvent("comment", e, emit);
+    keyboardEvent("comment", e, emit, updateBlockData);
 }
 
 function pasteEvent(e: ClipboardEvent) {
@@ -50,32 +48,37 @@ 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);
 
     // 커서위치 재지정
     if ($block.value.innerHTML.length > 0) {
-        const cursorData = getArrangementCursorData();
+        const cursorData = getArrangementCursorData(blockCursorData.value);
 
         data.value.content = $block.value.innerHTML;
         emit("update:modelValue", data.value);
 
         setTimeout(() => {
-            setCursor(
-                $block.value.childNodes[cursorData.childCount],
-                cursorData.length
-            );
+            setCursor($block.value.childNodes[cursorData.childCount], cursorData.length);
 
-            // 빈 태그 삭제
+            // 구조 검수
             $block.value.childNodes.forEach((child: ChildNode) => {
-                if (
-                    child.constructor.name !== "Text" &&
-                    child.textContent === ""
-                ) {
-                    child.remove();
+                if (child.constructor.name !== "Text") {
+                    // 텍스트가 아닐경우
+                    if (child.constructor.name !== "HTMLBRElement") {
+                        // br 태그 유지
+                        if (child.textContent === "") {
+                            // 빈 태그 삭제
+                            child.remove();
+                        } else if ((child as HTMLElement).classList.length === 0) {
+                            // 클레스 없는 엘리먼트 처리
+                            (child as HTMLElement).insertAdjacentHTML("afterend", child.textContent as string);
+                            child.remove();
+                        }
+                    } else {
+                        (child as HTMLElement).removeAttribute("class");
+                    }
                 }
             });
         }, 100);
@@ -86,10 +89,17 @@ function updateBlockData() {
 
 function focus() {
     setCursor($block.value, 0);
+    blockCursorData.value = getCursor();
 }
 
-function setStyles(kind: string) {
-    data.value = styleSettings(kind, data.value, $block.value);
+function setStyles(kind: string, url?: string) {
+    data.value = styleSettings({
+        kind: kind,
+        blockData: data.value,
+        $target: $block.value,
+        url: url,
+        cursorData: blockCursorData.value,
+    });
     setTimeout(() => {
         updateBlockData();
     }, 250);
@@ -120,7 +130,7 @@ defineExpose({
     updateBlockData,
     focus,
     setStyles,
-    getCursorClassList
+    getCursorClassList,
 });
 </script>
 

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

@@ -1,3 +1,31 @@
 <template>
-    <div class="editor-viewer"></div>
-</template>
+    <div class="dragon-editor-viewer">
+        <template v-for="(row, count) in props.content">
+            <p class="d-text-block" v-if="row.type === 'text'" :class="row.classList" v-html="row.content"></p>
+
+            <template v-if="row.type === 'image'">
+                <template v-if="row.webp"> </template>
+                <template v-else>
+                    <div class="d-image-block" :class="row.classList">
+                        <div class="d-image-area">
+                            <img class="d-img" :src="row.src" :width="row.width" :height="row.height" :alt="row.caption" loading="lazy" />
+                        </div>
+                        <p class="d-caption" v-if="row.caption" v-html="row.caption"></p>
+                    </div>
+                </template>
+            </template>
+        </template>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { editorContentType } from "../../../types";
+
+const props = defineProps<{
+    content: editorContentType;
+}>();
+</script>
+
+<style>
+@import "../../core/style/viewer.css";
+</style>

package/package.json

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

package/dist/runtime/core/style/main.d.ts

@@ -1 +0,0 @@
-export const __esModule: boolean;

package/dist/runtime/core/style/main.mjs

@@ -1,24 +0,0 @@
-/******/ (() => { // webpackBootstrap
-/******/ 	"use strict";
-/******/ 	// The require scope
-/******/ 	var __webpack_require__ = {};
-/******/ 	
-/************************************************************************/
-/******/ 	/* webpack/runtime/make namespace object */
-/******/ 	(() => {
-/******/ 		// define __esModule on exports
-/******/ 		__webpack_require__.r = (exports) => {
-/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 			}
-/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/************************************************************************/
-var __webpack_exports__ = {};
-__webpack_require__.r(__webpack_exports__);
-// extracted by mini-css-extract-plugin
-
-/******/ })()
-;