dragon-editor 3.8.7 → 4.0.0

package/dist/runtime/components/DragonEditorViewer.vue.d.ts

@@ -1,9 +1,17 @@
-type __VLS_Props = {
+import "../scss/viewer.scss.js";
+import type { DEContentData } from "../type.d.mts.js";
+interface DragonEditorViewerOption {
     content: DEContentData;
-    imageHostURL?: string;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    imageHostURL: string;
+    mediaHostURL?: string;
+    isMobile?: boolean;
+    theme?: "dark" | "white";
+    codeBlockSpaces?: number;
+}
+declare const __VLS_export: import("vue").DefineComponent<DragonEditorViewerOption, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DragonEditorViewerOption> & Readonly<{}>, {
+    mediaHostURL: string;
+    isMobile: boolean;
+    codeBlockSpaces: number;
+    theme: "dark" | "white";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/MenuBar.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MenuBar.vue

@@ -0,0 +1,385 @@
+<template>
+    <div class="de-menu-bar" :style="{ top: `${editorStore.status.menuTop}px` }">
+        <div class="de-menu-wrap">
+            <div class="de-col">
+                <button
+                    class="de-menu"
+                    type="button"
+                    @click="isActiveMenuArea = !isActiveMenuArea"
+                    ref="$addMenuButton"
+                >
+                    <component :is="_getIconNode('plus')" />
+                </button>
+            </div>
+
+            <div class="de-col">
+                <button
+                    class="de-menu"
+                    type="button"
+                    :disabled="_checkCanUseDecoration() === false"
+                    @click="_setDecoration('de-bold')"
+                >
+                    <component :is="_getIconNode('bold')" />
+                </button>
+
+                <button
+                    class="de-menu"
+                    type="button"
+                    :disabled="_checkCanUseDecoration() === false"
+                    @click="_setDecoration('de-italic')"
+                >
+                    <component :is="_getIconNode('italic')" />
+                </button>
+
+                <button
+                    class="de-menu"
+                    type="button"
+                    :disabled="_checkCanUseDecoration() === false"
+                    @click="_setDecoration('de-underline')"
+                >
+                    <component :is="_getIconNode('underline')" />
+                </button>
+
+                <button
+                    class="de-menu"
+                    type="button"
+                    :disabled="_checkCanUseDecoration() === false"
+                    @click="_setDecoration('de-strikethrough')"
+                >
+                    <component :is="_getIconNode('strikethrough')" />
+                </button>
+
+                <button
+                    class="de-menu"
+                    type="button"
+                    :disabled="_checkCanUseDecoration() === false"
+                    @click="_setDecoration('de-code')"
+                >
+                    <component :is="_getIconNode('codeblock')" />
+                </button>
+            </div>
+
+            <div class="de-col">
+                <button
+                    class="de-menu"
+                    type="button"
+                    :disabled="_checkCanUseDecoration() === false || editorStore.cursorSelection?.isCollapsed === true"
+                    @click="isActiveLinkArea = !isActiveLinkArea"
+                    ref="$exitLinkMenuButton"
+                >
+                    <component :is="_getIconNode('add-link')" />
+                </button>
+
+                <button
+                    class="de-menu"
+                    type="button"
+                    :disabled="_checkCanUseDecoration() === false"
+                    @click="_removeLink"
+                >
+                    <component :is="_getIconNode('remove-link')" />
+                </button>
+            </div>
+
+            <div class="de-col">
+                <label
+                    class="de-menu"
+                    type="button"
+                >
+                    <component :is="_getIconNode('image')" />
+                    <input
+                        type="file"
+                        hidden
+                        :accept="editorStore.option.acceptImageFormat"
+                        multiple
+                        @change="imageUploadEvent"
+                    />
+                </label>
+            </div>
+
+            <div class="de-col">
+                <button
+                    class="de-menu"
+                    type="button"
+                    :disabled="_checkCanUseAlign() === false"
+                    @click="_setAlign('left')"
+                >
+                    <component :is="_getIconNode('align-left')" />
+                </button>
+
+                <button
+                    class="de-menu"
+                    type="button"
+                    :disabled="_checkCanUseAlign() === false"
+                    @click="_setAlign('center')"
+                >
+                    <component :is="_getIconNode('align-center')" />
+                </button>
+
+                <button
+                    class="de-menu"
+                    type="button"
+                    :disabled="_checkCanUseAlign() === false"
+                    @click="_setAlign('right')"
+                >
+                    <component :is="_getIconNode('align-right')" />
+                </button>
+
+                <button
+                    class="de-menu"
+                    type="button"
+                    :disabled="_checkCanUseAlign() === false"
+                    @click="_setAlign('justify')"
+                >
+                    <component :is="_getIconNode('align-justify')" />
+                </button>
+            </div>
+
+            <div class="de-col">
+                <button
+                    class="de-menu"
+                    type="button"
+                    :disabled="_checkCanUseIndent() === false"
+                    @click="_setIndentData('decrease')"
+                >
+                    <component :is="_getIconNode('indent-decrease')" />
+                </button>
+
+                <button
+                    class="de-menu"
+                    type="button"
+                    :disabled="_checkCanUseIndent() === false"
+                    @click="_setIndentData('increase')"
+                >
+                    <component :is="_getIconNode('indent-increase')" />
+                </button>
+            </div>
+
+            <div class="de-col">
+                <button
+                    class="de-menu"
+                    type="button"
+                    :disabled="editorStore.selectedBlockIndex < 1"
+                    @click="_moveBlockIndex('first')"
+                >
+                    <component :is="_getIconNode('move-first')" />
+                </button>
+
+                <button
+                    class="de-menu"
+                    type="button"
+                    :disabled="editorStore.selectedBlockIndex < 1"
+                    @click="_moveBlockIndex('up')"
+                >
+                    <component :is="_getIconNode('move-up')" />
+                </button>
+
+                <button
+                    class="de-menu"
+                    type="button"
+                    :disabled="editorStore.selectedBlockIndex === editorStore.data.length - 1 || editorStore.selectedBlockIndex === -1"
+                    @click="_moveBlockIndex('down')"
+                >
+                    <component :is="_getIconNode('move-down')" />
+                </button>
+
+                <button
+                    class="de-menu"
+                    type="button"
+                    :disabled="editorStore.selectedBlockIndex === editorStore.data.length - 1 || editorStore.selectedBlockIndex === -1"
+                    @click="_moveBlockIndex('last')"
+                >
+                    <component :is="_getIconNode('move-last')" />
+                </button>
+            </div>
+        </div>
+
+        <div
+            class="de-block-menu-area"
+            :class="{ '--active': isActiveMenuArea === true }"
+            ref="$addBlockMenu"
+        >
+            <div class="de-list">
+                <button
+                    class="de-add-block"
+                    type="button"
+                    @click="addBlockEvent('text')"
+                >
+                    Text
+                </button>
+                <button
+                    class="de-add-block"
+                    type="button"
+                    @click="addBlockEvent('heading1')"
+                >
+                    Heading-1
+                </button>
+                <button
+                    class="de-add-block"
+                    type="button"
+                    @click="addBlockEvent('heading2')"
+                >
+                    Heading-2
+                </button>
+                <button
+                    class="de-add-block"
+                    type="button"
+                    @click="addBlockEvent('heading3')"
+                >
+                    Heading-3
+                </button>
+                <button
+                    class="de-add-block"
+                    type="button"
+                    @click="addBlockEvent('unordered-list')"
+                >
+                    Unodered List
+                </button>
+                <button
+                    class="de-add-block"
+                    type="button"
+                    @click="addBlockEvent('ordered-list')"
+                >
+                    Odered List
+                </button>
+                <button
+                    class="de-add-block"
+                    type="button"
+                    @click="addBlockEvent('code')"
+                >
+                    Code Block
+                </button>
+                <button
+                    class="de-add-block"
+                    type="button"
+                    @click="addBlockEvent('divider')"
+                >
+                    Divider
+                </button>
+            </div>
+        </div>
+
+        <div
+            class="de-link-exit-area"
+            :class="{ '--active': isActiveLinkArea === true }"
+            ref="$exitLinkMenu"
+        >
+            <div class="de-btn-area">
+                <button
+                    class="de-btn"
+                    :class="{ '--active': anchorInputType === 'url' }"
+                    type="button"
+                    @click="anchorInputType = 'url'"
+                >
+                    Text
+                </button>
+                <button
+                    class="de-btn"
+                    :class="{ '--active': anchorInputType === 'hash' }"
+                    type="button"
+                    @click="anchorInputType = 'hash'"
+                >
+                    Heading
+                </button>
+            </div>
+
+            <div
+                v-if="anchorInputType === 'url'"
+                class="de-link-text-area"
+            >
+                <input
+                    v-model="editorStore.status.anchorHerf"
+                    class="de-input"
+                    :class="{ '--error': urlValidation === false }"
+                    name="url"
+                    type="url"
+                />
+                <button
+                    class="de-btn"
+                    type="button"
+                    @click="setLinkEvent()"
+                >
+                    Set
+                </button>
+            </div>
+
+            <div
+                v-else
+                class="de-link-heading-area"
+            >
+                <button
+                    v-for="item in editorStore.data.filter((i) => i.type === 'heading')"
+                    v-html="item.textContent"
+                    class="de-btn"
+                    :class="{ '--active': `#${item.id}` === editorStore.status.anchorHerf }"
+                    :key="item.id"
+                    @click="setLinkEvent(`#${item.id}`)"
+                >
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { onClickOutside } from "@vueuse/core";
+import { useEditorStore } from "../store/editor";
+import { _addBlock, _moveBlockIndex, _checkCanUseIndent, _setIndentData, _checkCanUseAlign, _checkCanUseDecoration } from "../utils/data";
+import { _getIconNode } from "../utils/layout";
+import { _setAlign, _setDecoration, _setLink, _removeLink } from "../utils/node";
+const editorStore = useEditorStore();
+const isActiveMenuArea = ref(false);
+const isActiveLinkArea = ref(false);
+const anchorInputType = ref("url");
+const urlValidation = ref(true);
+const $addBlockMenu = ref();
+const $addMenuButton = ref();
+const $exitLinkMenu = ref();
+const $exitLinkMenuButton = ref();
+function addBlockEvent(name) {
+  _addBlock(name);
+  isActiveMenuArea.value = false;
+}
+function imageUploadEvent(event) {
+  const $target = event.currentTarget;
+  if ($target !== null) {
+    const files = $target.files;
+    if (files !== null && files.length > 0 && editorStore.fn.uploadImage !== null) {
+      editorStore.fn.uploadImage(Array.from(files));
+      $target.value = "";
+    }
+  }
+}
+function setLinkEvent(url) {
+  const urlReg = /^(https?:\/\/|#).+/;
+  if (url === void 0) {
+    url = editorStore.status.anchorHerf;
+  }
+  if (urlReg.test(url) === true) {
+    isActiveLinkArea.value = false;
+    urlValidation.value = true;
+    _setLink(url);
+  } else {
+    urlValidation.value = false;
+  }
+}
+onClickOutside(
+  $addBlockMenu,
+  () => {
+    isActiveMenuArea.value = false;
+  },
+  {
+    ignore: [$addMenuButton]
+  }
+);
+onClickOutside(
+  $exitLinkMenu,
+  () => {
+    isActiveLinkArea.value = false;
+    urlValidation.value = true;
+  },
+  {
+    ignore: [$exitLinkMenuButton]
+  }
+);
+</script>

package/dist/runtime/components/MenuBar.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;