dragon-editor 3.4.4 → 3.5.0

package/dist/runtime/components/DragonEditorViewer.vue

@@ -1,54 +1,42 @@
 <template>
-    <div class="dragon-editor-viewer">
-        <template v-for="item in props.content">
-            <p v-if="item.type === 'text'" class="de-block de-text-block" :class="item.classList" v-html="item.textContent"></p>
-
-            <template v-if="item.type === 'heading'">
-                <h1 v-if="item.level === 1" class="de-block de-heading-block" :class="item.classList" :data-level="item.level" v-html="item.textContent"></h1>
-                <h2 v-if="item.level === 2" class="de-block de-heading-block" :class="item.classList" :data-level="item.level" v-html="item.textContent"></h2>
-                <h3 v-if="item.level === 3" class="de-block de-heading-block" :class="item.classList" :data-level="item.level" v-html="item.textContent"></h3>
-            </template>
-
-            <template v-if="item.type === 'list'">
-                <ul v-if="item.element === 'ul'" class="de-block de-list-block" :data-style="item.style">
-                    <li v-for="li in item.child" class="de-item" :class="li.classList" v-html="li.textContent"></li>
-                </ul>
-
-                <ol v-if="item.element === 'ol'" class="de-block de-list-block" :data-style="item.style">
-                    <li v-for="li in item.child" class="de-item" :class="li.classList" v-html="li.textContent"></li>
-                </ol>
-            </template>
-
-            <div v-if="item.type === 'image'" class="de-block de-image-block" :class="item.classList">
-                <div class="de-image-area" :data-maxwidth="item.maxWidth">
-                    <img :src="props.imageHostURL === undefined ? item.src : props.imageHostURL + item.src" alt="" class="de-img" :width="item.width" :height="item.height" loading="lazy" />
-                </div>
-
-                <p v-if="item.caption" class="de-caption">{{ item.caption }}</p>
-            </div>
-
-            <div v-if="item.type === 'code'" class="de-block de-code-block" :data-theme="item.theme">
-                <p class="de-filename">{{ item.filename }}</p>
-                <p class="de-language">{{ item.language }}</p>
-                <pre class="de-pre"><code class="de-code-content" v-html="item.textContent"></code></pre>
-            </div>
-
-            <div v-if="item.type === 'custom'" class="de-block de-custom-block" :class="item.classList" v-html="item.textContent"></div>
-        </template>
-    </div>
+    <component :is="structure()"></component>
 </template>
 
 <script setup lang="ts">
-const props = defineProps<{
-    content: DEContentData;
-    imageHostURL?: string;
-}>();
+import { h } from "vue";
+import type { VNode } from "vue";
+import { _createBlockList } from "../utils/layout";
+
+const props = withDefaults(
+    defineProps<{
+        content: DEContentData;
+        imageHostURL?: string;
+    }>(),
+    {
+        imageHostURL: "",
+    }
+);
+
+function structure(): VNode {
+    return h(
+        "div",
+        {
+            class: ["dragon-editor-viewer"],
+        },
+        _createBlockList({
+            blockList: props.content,
+            isEditable: false,
+            imageHostURL: props.imageHostURL,
+        })
+    );
+}
 </script>
 
 <style>
 @charset "UTF-8";
 .dragon-editor,
 .dragon-editor-viewer {
+  --radius-default: 4px;
   /**
   * Reset style start
   */
@@ -135,6 +123,7 @@ const props = defineProps<{
   padding: 0;
   border-radius: 0;
   outline: 0;
+  font-size: inherit;
   vertical-align: middle;
 }
 .dragon-editor a,
@@ -149,6 +138,7 @@ const props = defineProps<{
 .dragon-editor-viewer input[type=reset] {
   border: 0;
   background: transparent;
+  font-size: inherit;
   cursor: pointer;
 }
 .dragon-editor img,
@@ -176,6 +166,26 @@ const props = defineProps<{
 .dragon-editor-viewer .de-block[data-depth="5"] {
   padding-left: 150px;
 }
+.dragon-editor .de-block.de-list-block[data-depth="1"],
+.dragon-editor-viewer .de-block.de-list-block[data-depth="1"] {
+  padding-left: 54px;
+}
+.dragon-editor .de-block.de-list-block[data-depth="2"],
+.dragon-editor-viewer .de-block.de-list-block[data-depth="2"] {
+  padding-left: 84px;
+}
+.dragon-editor .de-block.de-list-block[data-depth="3"],
+.dragon-editor-viewer .de-block.de-list-block[data-depth="3"] {
+  padding-left: 114px;
+}
+.dragon-editor .de-block.de-list-block[data-depth="4"],
+.dragon-editor-viewer .de-block.de-list-block[data-depth="4"] {
+  padding-left: 144px;
+}
+.dragon-editor .de-block.de-list-block[data-depth="5"],
+.dragon-editor-viewer .de-block.de-list-block[data-depth="5"] {
+  padding-left: 174px;
+}
 
 /**
 * 노드 스타일
@@ -186,12 +196,12 @@ const props = defineProps<{
   gap: 4px;
   width: 100%;
   height: 100%;
-  padding: 20px;
   line-height: 1.6;
   box-sizing: border-box;
 }
 .dragon-editor-viewer .de-block {
   width: 100%;
+  box-sizing: border-box;
 }
 .dragon-editor-viewer .de-text-block {
   min-height: 1.6em;
@@ -495,14 +505,16 @@ const props = defineProps<{
 .dragon-editor-viewer .de-image-block .de-image-area .de-img {
   width: 100%;
   height: auto;
+  border-radius: var(--radius-default);
 }
 .dragon-editor-viewer .de-image-block .de-image-area .de-btn {
   position: absolute;
   top: 50%;
   width: 8px;
-  height: 100px;
-  background: #ccc;
-  border: 1px solid #333;
+  height: 15%;
+  background: #f1f1f1;
+  border: 1px solid #ccc;
+  border-radius: var(--radius-default);
   transform: translate(-50%, -50%);
   cursor: col-resize;
   user-select: none;
@@ -524,6 +536,8 @@ const props = defineProps<{
 .dragon-editor-viewer .de-code-block {
   display: flex;
   flex-wrap: wrap;
+  border-radius: var(--radius-default);
+  overflow: hidden;
 }
 .dragon-editor-viewer .de-code-block .de-filename {
   flex: 1;

package/dist/runtime/scss/editor.css

@@ -1,6 +1,7 @@
 @charset "UTF-8";
 .dragon-editor,
 .dragon-editor-viewer {
+  --radius-default: 4px;
   /**
   * Reset style start
   */
@@ -87,6 +88,7 @@
   padding: 0;
   border-radius: 0;
   outline: 0;
+  font-size: inherit;
   vertical-align: middle;
 }
 .dragon-editor a,
@@ -101,6 +103,7 @@
 .dragon-editor-viewer input[type=reset] {
   border: 0;
   background: transparent;
+  font-size: inherit;
   cursor: pointer;
 }
 .dragon-editor img,
@@ -128,6 +131,26 @@
 .dragon-editor-viewer .de-block[data-depth="5"] {
   padding-left: 150px;
 }
+.dragon-editor .de-block.de-list-block[data-depth="1"],
+.dragon-editor-viewer .de-block.de-list-block[data-depth="1"] {
+  padding-left: 54px;
+}
+.dragon-editor .de-block.de-list-block[data-depth="2"],
+.dragon-editor-viewer .de-block.de-list-block[data-depth="2"] {
+  padding-left: 84px;
+}
+.dragon-editor .de-block.de-list-block[data-depth="3"],
+.dragon-editor-viewer .de-block.de-list-block[data-depth="3"] {
+  padding-left: 114px;
+}
+.dragon-editor .de-block.de-list-block[data-depth="4"],
+.dragon-editor-viewer .de-block.de-list-block[data-depth="4"] {
+  padding-left: 144px;
+}
+.dragon-editor .de-block.de-list-block[data-depth="5"],
+.dragon-editor-viewer .de-block.de-list-block[data-depth="5"] {
+  padding-left: 174px;
+}
 
 /**
 * 노드 스타일
@@ -135,14 +158,19 @@
 .dragon-editor {
   position: relative;
   border: 1px solid #ccc;
+  border-radius: var(--radius-default);
 }
-.dragon-editor.--hasMenu {
-  padding-top: 38px;
+.dragon-editor.--has-menu {
+  padding-top: 35px;
+}
+.dragon-editor.--mobile .de-menu-bar .de-menu-wrap {
+  overflow-x: auto;
 }
 .dragon-editor .de-body {
   display: flex;
   flex-direction: column;
   gap: 4px;
+  min-height: 500px;
   padding: 20px;
   line-height: 1.6;
 }
@@ -151,43 +179,58 @@
   top: 0;
   left: 0;
   right: 0;
-  height: 38px;
+  height: 34px;
   background: #fff;
   border-bottom: 1px solid #ccc;
+  border-radius: var(--radius-default) var(--radius-default) 0 0;
   z-index: 10;
 }
 .dragon-editor .de-menu-bar .de-menu-wrap {
   display: flex;
-  overflow-x: auto;
+}
+.dragon-editor .de-menu-bar .de-col {
+  display: flex;
+  position: relative;
+  border-right: 1px solid #ccc;
+}
+.dragon-editor .de-menu-bar .de-col:last-child {
+  border-right: 0;
 }
 .dragon-editor .de-menu-bar .de-menu {
   display: flex;
   justify-content: center;
   align-items: center;
-  min-width: 38px;
-  height: 38px;
-  border-right: 1px solid #ccc;
-  box-sizing: border-box;
+  min-width: 34px;
+  height: 34px;
   cursor: pointer;
 }
+.dragon-editor .de-menu-bar .de-menu.--disabled .de-path {
+  fill: #ccc;
+}
 .dragon-editor .de-menu-bar .de-menu .de-icon {
-  width: 24px;
-  height: 24px;
+  width: 16px;
+  height: 16px;
 }
 .dragon-editor .de-menu-bar .de-menu.--lastchild {
   border-right: 0;
 }
+.dragon-editor .de-menu-bar .de-menu .de-path {
+  fill: #333;
+}
 .dragon-editor .de-menu-bar .de-menu .de-path.--red {
   fill: #dd0000;
 }
 .dragon-editor .de-menu-bar .de-block-menu-area {
   display: none;
   position: absolute;
-  top: 39px;
+  top: 35px;
   left: 0;
   width: 120px;
   background: #fff;
-  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
+  border-width: 0 1px 1px 0;
+  border-style: solid;
+  border-color: #ccc;
+  border-bottom-right-radius: var(--radius-default);
   z-index: 1000;
 }
 .dragon-editor .de-menu-bar .de-block-menu-area.--active {
@@ -205,12 +248,15 @@
 .dragon-editor .de-menu-bar .de-link-exit-area {
   display: none;
   position: absolute;
-  top: 39px;
-  left: 228px;
+  top: calc(100% + 1px);
+  left: 50%;
   width: 200px;
   background: #fff;
-  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
+  border: 1px solid #ccc;
+  border-top: 0;
+  border-radius: 0 0 var(--radius-default) var(--radius-default);
   z-index: 1000;
+  transform: translateX(-50%);
 }
 .dragon-editor .de-menu-bar .de-link-exit-area.--active {
   display: block;
@@ -222,9 +268,10 @@
 .dragon-editor .de-menu-bar .de-link-exit-area .de-btn-area .de-btn {
   flex: 1;
   height: 24px;
+  color: #999;
 }
 .dragon-editor .de-menu-bar .de-link-exit-area .de-btn-area .de-btn.--active {
-  background: #f1f1f1;
+  color: #333;
 }
 .dragon-editor .de-menu-bar .de-link-exit-area .de-link-text-area {
   display: flex;
@@ -255,42 +302,40 @@
   overflow-y: auto;
 }
 .dragon-editor .de-menu-bar .de-link-exit-area .de-link-heading-area .de-btn {
-  min-height: 20px;
+  padding: 2px 4px;
   text-align: left;
+  border-radius: var(--radius-default);
 }
 .dragon-editor .de-menu-bar .de-link-exit-area .de-link-heading-area .de-btn:hover {
   background: #f1f1f1;
 }
-.dragon-editor .de-control-bar {
-  display: none;
+.dragon-editor .de-controlbar {
+  display: flex;
   position: fixed;
-  height: 38px;
+  height: 34px;
   background: #fff;
   border: 1px solid #ccc;
-  border-width: 1px 0 0 1px;
+  border-radius: var(--radius-default);
   transform: translateX(-50%);
   z-index: 20;
 }
-.dragon-editor .de-control-bar.--active {
-  display: flex;
-}
-.dragon-editor .de-control-bar:empty {
-  display: none;
-}
-.dragon-editor .de-control-bar .de-col {
+.dragon-editor .de-controlbar .de-col {
   display: flex;
   align-items: center;
   column-gap: 6px;
   padding: 0 10px;
-  border: 1px solid #ccc;
-  border-width: 0 1px 1px 0;
+  border-right: 1px solid #ccc;
+}
+.dragon-editor .de-controlbar .de-col:last-child {
+  border-right: 0;
 }
-.dragon-editor .de-control-bar .de-col .de-selector {
+.dragon-editor .de-controlbar .de-col .de-selector {
   height: 100%;
   border: 0;
 }
 .dragon-editor .de-block {
   width: 100%;
+  box-sizing: border-box;
 }
 .dragon-editor .de-text-block {
   min-height: 1.6em;
@@ -612,14 +657,16 @@
 .dragon-editor .de-image-block .de-image-area .de-img {
   width: 100%;
   height: auto;
+  border-radius: var(--radius-default);
 }
 .dragon-editor .de-image-block .de-image-area .de-btn {
   position: absolute;
   top: 50%;
   width: 8px;
-  height: 100px;
-  background: #ccc;
-  border: 1px solid #333;
+  height: 15%;
+  background: #f1f1f1;
+  border: 1px solid #ccc;
+  border-radius: var(--radius-default);
   transform: translate(-50%, -50%);
   cursor: col-resize;
   user-select: none;
@@ -647,6 +694,8 @@
 .dragon-editor .de-code-block {
   display: flex;
   flex-wrap: wrap;
+  border-radius: var(--radius-default);
+  overflow: hidden;
 }
 .dragon-editor .de-code-block .de-filename {
   flex: 1;

package/dist/runtime/scss/viewer.css

@@ -1,6 +1,7 @@
 @charset "UTF-8";
 .dragon-editor,
 .dragon-editor-viewer {
+  --radius-default: 4px;
   /**
   * Reset style start
   */
@@ -87,6 +88,7 @@
   padding: 0;
   border-radius: 0;
   outline: 0;
+  font-size: inherit;
   vertical-align: middle;
 }
 .dragon-editor a,
@@ -101,6 +103,7 @@
 .dragon-editor-viewer input[type=reset] {
   border: 0;
   background: transparent;
+  font-size: inherit;
   cursor: pointer;
 }
 .dragon-editor img,
@@ -128,6 +131,26 @@
 .dragon-editor-viewer .de-block[data-depth="5"] {
   padding-left: 150px;
 }
+.dragon-editor .de-block.de-list-block[data-depth="1"],
+.dragon-editor-viewer .de-block.de-list-block[data-depth="1"] {
+  padding-left: 54px;
+}
+.dragon-editor .de-block.de-list-block[data-depth="2"],
+.dragon-editor-viewer .de-block.de-list-block[data-depth="2"] {
+  padding-left: 84px;
+}
+.dragon-editor .de-block.de-list-block[data-depth="3"],
+.dragon-editor-viewer .de-block.de-list-block[data-depth="3"] {
+  padding-left: 114px;
+}
+.dragon-editor .de-block.de-list-block[data-depth="4"],
+.dragon-editor-viewer .de-block.de-list-block[data-depth="4"] {
+  padding-left: 144px;
+}
+.dragon-editor .de-block.de-list-block[data-depth="5"],
+.dragon-editor-viewer .de-block.de-list-block[data-depth="5"] {
+  padding-left: 174px;
+}
 
 /**
 * 노드 스타일
@@ -138,12 +161,12 @@
   gap: 4px;
   width: 100%;
   height: 100%;
-  padding: 20px;
   line-height: 1.6;
   box-sizing: border-box;
 }
 .dragon-editor-viewer .de-block {
   width: 100%;
+  box-sizing: border-box;
 }
 .dragon-editor-viewer .de-text-block {
   min-height: 1.6em;
@@ -447,14 +470,16 @@
 .dragon-editor-viewer .de-image-block .de-image-area .de-img {
   width: 100%;
   height: auto;
+  border-radius: var(--radius-default);
 }
 .dragon-editor-viewer .de-image-block .de-image-area .de-btn {
   position: absolute;
   top: 50%;
   width: 8px;
-  height: 100px;
-  background: #ccc;
-  border: 1px solid #333;
+  height: 15%;
+  background: #f1f1f1;
+  border: 1px solid #ccc;
+  border-radius: var(--radius-default);
   transform: translate(-50%, -50%);
   cursor: col-resize;
   user-select: none;
@@ -476,6 +501,8 @@
 .dragon-editor-viewer .de-code-block {
   display: flex;
   flex-wrap: wrap;
+  border-radius: var(--radius-default);
+  overflow: hidden;
 }
 .dragon-editor-viewer .de-code-block .de-filename {
   flex: 1;

package/dist/runtime/type.d.ts

@@ -1,4 +1,28 @@
-interface EditorStore {
+type DEContentData = DEBlockData[];
+
+type DEBlockData = DETextBlock | DEHeadingBlock | DEListBlock | DEImageBlock | DECodeBlock | DECustomBlock;
+
+type DEIconKind = "plus" | "bold" | "italic" | "underline" | "strikethrough" | "codeblock" | "add-link" | "remove-link" | "image" | "align-center" | "align-left" | "align-right" | "align-justify" | "move-up" | "move-down" | "indent-decrease" | "indent-increase";
+
+type DEDecoration = "bold" | "italic" | "underline" | "strikethrough" | "code";
+
+type DETextalign = "left" | "right" | "center" | "justify";
+
+type DEBlock = "text" | "heading" | "ul" | "ol" | "image" | "code" | "custom";
+
+type DEBlockMenutype = "text" | "heading1" | "heading2" | "heading3" | "ul" | "ol" | "image" | "code" | "custom";
+
+type DEListStyle = "disc" | "square" | "decimal" | "lower-alpha" | "upper-alpha" | "lower-roman" | "upper-roman";
+
+type DECodeblockTheme = "github" | "github-dark-dimmed";
+
+type DECodeblockLang = "text" | "bash" | "csharp" | "c" | "cpp" | "css" | "django" | "dockerfile" | "go" | "html" | "json" | "java" | "js" | "ts" | "kotlin" | "lua" | "md" | "nginx" | "php" | "python" | "ruby" | "scss" | "sql" | "shell" | "swift" | "yml";
+
+type DEBlockElement = HTMLParagraphElement | HTMLHeadingElement | HTMLElement | HTMLDivElement;
+
+type DEListElementName = "ul" | "ol";
+
+interface DragonEditorStore {
     cursorData: DEditorCursor | null;
     message: { [key: string]: string };
     controlBar: {
@@ -7,10 +31,52 @@ interface EditorStore {
         y: number;
         $element: HTMLDivElement | null;
     };
+    useMenuBar: boolean;
+    imageHostURL: string;
+    firstData: DEContentData;
+    menuBarTop: number;
+    activeStatus: {
+        addBlockMenu: boolean;
+        anchorInputArea: boolean;
+        imageResizeEvent: boolean;
+    };
+    eventStatus: {
+        preComposing: boolean;
+        imageResizeEventStartX: number;
+        imageResizeEventType: "right" | "left";
+        imageResizeEventEndX: number;
+        imageResizeCurrentWidth: number;
+        keyboardEnterCount: number;
+    };
+    controlStatus: {
+        isMobile: boolean;
+        anchorValidation: boolean;
+        currentBlockType: DEBlock;
+        codeBlockTheme: DECodeblockTheme;
+        codeBlockLang: DECodeblockLang;
+        listBlockStyle: DEListStyle;
+        anchorTabType: "url" | "heading";
+        anchorHeadingList: DEHeadingItem[];
+        anchorHref: string;
+        previousCorsorData: DEditorCursor | null;
+        $anchorInput: HTMLInputElement | null;
+        $currentBlock: HTMLDivElement | null;
+    };
+    codeBlockTheme: DECodeItem<DECodeblockTheme>[];
+    listUlType: DECodeItem<DEListStyle>[];
+    listOlType: DECodeItem<DEListStyle>[];
     $editor: HTMLDivElement | null;
-    $content: HTMLDivElement | null;
-    $currentBlock: HTMLElement | null;
+    $body: HTMLDivElement | null;
+    $controlBar: HTMLDivElement | null;
     $parentWrap: HTMLElement | Window | null;
+    windowClickEvent(event: MouseEvent): void;
+    windowResizeEvent(event: Event): void;
+    windowMouseUpEvent(event: MouseEvent): void;
+    parentWrapScollEvent(event: Event): void;
+    emit: {
+        (e: "update:modelValue", data: DEContentData): void;
+        (e: "uploadImageEvent", file: File): void;
+    };
 }
 
 interface DEditorCursor {
@@ -38,9 +104,9 @@ interface DEImage {
     caption?: string;
 }
 
-interface DECodeItem {
+interface DECodeItem<T = string> {
     text: string;
-    code: string;
+    code: T;
 }
 
 interface DEHeadingItem {
@@ -48,26 +114,17 @@ interface DEHeadingItem {
     id: string;
 }
 
-type DEDecoration = "bold" | "italic" | "underline" | "strikethrough" | "code";
-
-type DETextalign = "left" | "right" | "center" | "justify";
-
-type DEBlock = "text" | "heading" | "ul" | "ol" | "image" | "code";
-
 // 컴포넌트 메서드용 타입
 interface DragonEditor {
-    addBlock: (type: DEBlock) => void;
-    addImageBlock: (data: DEImage) => void;
+    addBlock: (type: DEBlockData) => void;
     setDecoration: (data: DEDecoration) => void;
     setTextAlign: (type: DETextalign) => void;
-    getContentData: () => DEContentData;
-    setContentData: (data: DEContentData) => void;
-    addCustomBlock: (HTML: string, classList: string[]) => void;
 }
 
 interface DETextBlock {
     type: "text";
     classList: string[];
+    depth?: number;
     textContent: string;
 }
 
@@ -75,6 +132,7 @@ interface DEHeadingBlock {
     type: "heading";
     level: number;
     id: string;
+    depth?: number;
     classList: string[];
     textContent: string;
 }
@@ -84,11 +142,10 @@ interface DEListItem {
     textContent: string;
 }
 
-type DEListStyle = "disc" | "square" | "decimal" | "lower-alpha" | "upper-alpha" | "lower-roman" | "upper-roman";
-
 interface DEListBlock {
     type: "list";
-    element: "ul" | "ol";
+    element: DEListElementName;
+    depth?: number;
     style: DEListStyle;
     child: DEListItem[];
 }
@@ -105,8 +162,8 @@ interface DEImageBlock {
 
 interface DECodeBlock {
     type: "code";
-    language: string;
-    theme: string;
+    language: DECodeblockLang;
+    theme: DECodeblockTheme;
     filename: string;
     textContent: string;
 }
@@ -116,5 +173,3 @@ interface DECustomBlock {
     classList: string[];
     textContent: string;
 }
-
-type DEContentData = (DETextBlock | DEHeadingBlock | DEListBlock | DEImageBlock | DECustomBlock | DECodeBlock)[];