dragon-editor 3.8.6 → 4.0.0

package/dist/runtime/components/Block/Image.vue

@@ -0,0 +1,146 @@
+<template>
+    <div
+        v-memo="memoData"
+        class="de-block de-image-block"
+        :class="props.data.classList"
+        @click="setEdit"
+        @mousemove="resizingEvent"
+        @touchmove="resizingEvent"
+    >
+        <div
+            class="de-image-area"
+            :data-maxwidth="props.data.maxWidth"
+        >
+            <button
+                v-if="props.isEdit === true"
+                class="de-btn de-btn-left"
+                @mousedown="startResizeEvent($event, 'left')"
+                @touchstart="startResizeEvent($event, 'left')"
+            ></button>
+            <button
+                v-if="props.isEdit === true"
+                class="de-btn de-btn-right"
+                @mousedown="startResizeEvent($event, 'right')"
+                @touchstart="startResizeEvent($event, 'right')"
+            ></button>
+            <img
+                class="de-img"
+                :src="editorStore.option.mediaHostURL + props.data.src"
+                :alt="props.data.caption"
+                draggable="false"
+            />
+        </div>
+
+        <p
+            v-html="props.data.caption"
+            class="de-caption"
+            :contenteditable="props.isEdit === true"
+            @focus="setEdit"
+            @keydown="keydownEvent"
+            @input="updateData"
+            @paste="_normalPasteEvent($event, setEdit, abortEdit)"
+        ></p>
+    </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useEditorStore } from "../../store/editor";
+import { _imageEnterEvent, _blockTabEvent, _moveBlockDefaultEvent, _normalPasteEvent, _updateCursorData } from "../../utils/event";
+const editorStore = useEditorStore();
+const props = defineProps({
+  data: { type: null, required: true },
+  isEdit: { type: Boolean, required: true },
+  index: { type: Number, required: true }
+});
+const emit = defineEmits(["update"]);
+const memoData = computed(() => {
+  const isFrozen = props.isEdit === true && editorStore.selectedBlockId === props.data.id;
+  const memoKey = isFrozen ? "frozen" : JSON.stringify(props.data);
+  return [memoKey];
+});
+let mouseXPosition = 0;
+let mouseDuration = "left";
+let startMaxWidth = 0;
+function setEdit() {
+  editorStore.selectedBlockIndex = props.index;
+  editorStore.selectedBlockId = props.data.id;
+  _updateCursorData();
+}
+function abortEdit() {
+  editorStore.selectedBlockIndex = -1;
+  editorStore.selectedBlockId = "";
+}
+function keydownEvent(event) {
+  if (event.isComposing === false) {
+    switch (event.key) {
+      case "Enter":
+        if (event.shiftKey === false) {
+          _imageEnterEvent(event, props.data, props.index);
+        } else {
+          event.preventDefault();
+        }
+        break;
+      case "ArrowUp":
+        _moveBlockDefaultEvent(event, "up");
+        break;
+      case "ArrowDown":
+        _moveBlockDefaultEvent(event, "down");
+        break;
+    }
+  } else {
+    event.preventDefault();
+  }
+}
+function updateData(event) {
+  const newData = JSON.parse(JSON.stringify(props.data));
+  newData.caption = event.target.innerHTML;
+  emit("update", newData);
+}
+function startResizeEvent(event, duration) {
+  if (editorStore.status.isImageResizeActive === false) {
+    editorStore.status.isImageResizeActive = true;
+    if ("touches" in event) {
+      const touch = event.touches[0] || event.changedTouches[0];
+      if (touch !== void 0) {
+        mouseXPosition = touch.screenX;
+      }
+    } else {
+      mouseXPosition = event.screenX;
+    }
+    mouseDuration = duration;
+    startMaxWidth = props.data.maxWidth;
+  }
+}
+function resizingEvent(event) {
+  if (editorStore.status.isImageResizeActive === true && editorStore.element.body !== null) {
+    const newData = JSON.parse(JSON.stringify(props.data));
+    const bodyRect = editorStore.element.body.getBoundingClientRect();
+    const bodyWidthHalf = bodyRect.width / 2 - 50;
+    let currentX = 0;
+    if ("touches" in event) {
+      const touch = event.touches[0] || event.changedTouches[0];
+      if (touch !== void 0) {
+        currentX = touch.screenX;
+      }
+    } else {
+      currentX = event.screenX;
+    }
+    const diffX = mouseXPosition - currentX;
+    let movePercent = 100 / bodyWidthHalf * diffX;
+    if (mouseDuration === "right") {
+      movePercent = -1 * movePercent;
+    }
+    let newMaxWidth = startMaxWidth + Math.floor(movePercent);
+    if (newMaxWidth < 25) {
+      newMaxWidth = 25;
+    }
+    if (newMaxWidth > 100) {
+      newMaxWidth = 100;
+    }
+    newData.maxWidth = newMaxWidth;
+    abortEdit();
+    emit("update", newData);
+  }
+}
+</script>

package/dist/runtime/components/Block/Image.vue.d.ts

@@ -0,0 +1,13 @@
+import type { DEImageBlock } from "../../type.d.mts.js";
+type __VLS_Props = {
+    data: DEImageBlock;
+    isEdit: boolean;
+    index: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    update: (data: DEImageBlock) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onUpdate?: ((data: DEImageBlock) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Block/List.d.vue.ts

@@ -0,0 +1,13 @@
+import type { DEListBlock } from "../../type.d.mts.js";
+type __VLS_Props = {
+    data: DEListBlock;
+    isEdit: boolean;
+    index: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    update: (data: DEListBlock) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onUpdate?: ((data: DEListBlock) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Block/List.vue

@@ -0,0 +1,170 @@
+<template>
+    <component :is="renderList()" />
+</template>
+
+<script setup>
+import { useEditorStore } from "../../store/editor";
+import { ref, h, withMemo } from "vue";
+import { _listBlockEnterEvent, _listChildTabEvent, _moveListChildEvent, _listBackspaceEvent, _listDeleteEvent, _normalPasteEvent, _updateCursorData } from "../../utils/event";
+const editorStore = useEditorStore();
+const props = defineProps({
+  data: { type: null, required: true },
+  isEdit: { type: Boolean, required: true },
+  index: { type: Number, required: true }
+});
+const emit = defineEmits(["update"]);
+const childIndex = ref(-1);
+const childId = ref("");
+let memoCache = [];
+function setEdit(liIndex, id) {
+  editorStore.selectedBlockId = props.data.id;
+  editorStore.selectedBlockIndex = props.index;
+  childIndex.value = liIndex;
+  childId.value = id;
+  _updateCursorData();
+}
+function abortEdit() {
+  childIndex.value = -1;
+  childId.value = "";
+  memoCache = [];
+}
+function updateData(event, liIndex) {
+  const newData = JSON.parse(JSON.stringify(props.data));
+  if (newData.child[liIndex] !== void 0) {
+    newData.child[liIndex].textContent = event.target.innerHTML;
+  }
+  emit("update", newData);
+}
+function keydownEvent(event) {
+  if (event.isComposing === false) {
+    switch (event.key) {
+      case "Enter":
+        if (event.shiftKey === false) {
+          _listBlockEnterEvent(event, props.data, props.index, childIndex.value, setEdit, abortEdit);
+        } else {
+        }
+        break;
+      case "Tab":
+        _listChildTabEvent(event, props.data, props.index, childIndex.value, setEdit, abortEdit);
+        break;
+      case "ArrowUp":
+        _moveListChildEvent(event, props.data, props.index, childIndex.value, "up");
+        break;
+      case "ArrowDown":
+        _moveListChildEvent(event, props.data, props.index, childIndex.value, "down");
+        break;
+      case "Backspace":
+        _listBackspaceEvent(event, childIndex.value);
+        break;
+      case "Delete":
+        _listDeleteEvent(event, childIndex.value, setEdit, abortEdit);
+        break;
+    }
+  } else {
+    event.preventDefault();
+  }
+}
+function createTreeStructure(listData) {
+  const structure = [];
+  function insertNode(parent, node, currentLevel) {
+    if (currentLevel >= 5) {
+      parent.children.push(node);
+      return;
+    }
+    const lastChild = parent.children[parent.children.length - 1];
+    if (lastChild !== void 0 && node.depth > lastChild.depth) {
+      insertNode(lastChild, node, currentLevel + 1);
+    } else {
+      parent.children.push(node);
+    }
+  }
+  listData.forEach((item, index) => {
+    let depth = item.depth || 0;
+    if (depth > 5) {
+      depth = 5;
+    }
+    const node = {
+      liIndex: index,
+      depth,
+      child: item,
+      children: []
+    };
+    if (structure.length === 0) {
+      structure.push(node);
+      return;
+    }
+    const lastNode = structure[structure.length - 1];
+    if (lastNode !== void 0) {
+      if (node.depth === lastNode.depth) {
+        structure.push(node);
+      } else if (node.depth > lastNode.depth) {
+        insertNode(lastNode, node, 1);
+      } else {
+        if (node.depth === 0) {
+          structure.push(node);
+        } else {
+          let targetParent = lastNode;
+          for (let i = 1; i < node.depth; i += 1) {
+            const lastChild = targetParent.children[targetParent.children.length - 1];
+            if (lastChild !== void 0) {
+              targetParent = lastChild;
+            } else {
+              break;
+            }
+          }
+          targetParent.children.push(node);
+        }
+      }
+    }
+  });
+  return structure;
+}
+function renderTreeNodes(nodes) {
+  return nodes.map((node) => {
+    const isFrozen = props.isEdit === true && childId.value === node.child.id;
+    const memoKey = isFrozen ? "frozen" : JSON.stringify(node);
+    const subListVNode = node.children.length > 0 ? h(props.data.element, { class: "de-list-sub" }, renderTreeNodes(node.children)) : null;
+    return withMemo(
+      [memoKey],
+      () => {
+        const children = [
+          h("p", {
+            class: ["de-item-text", ...node.child.classList],
+            innerHTML: node.child.textContent,
+            contenteditable: props.isEdit === true,
+            onFocus: () => setEdit(node.liIndex, node.child.id),
+            onKeydown: keydownEvent,
+            onInput: (event) => updateData(event, node.liIndex),
+            onPaste: (event) => _normalPasteEvent(event, setEdit, abortEdit),
+            onBlur: abortEdit
+          })
+        ];
+        if (subListVNode !== null) {
+          children.push(subListVNode);
+        }
+        return h(
+          "li",
+          {
+            key: node.child.id,
+            class: ["de-item"]
+          },
+          children
+        );
+      },
+      memoCache,
+      node.liIndex
+    );
+  });
+}
+function renderList() {
+  const treeStructure = createTreeStructure(props.data.child);
+  return h(
+    props.data.element,
+    {
+      class: "de-block de-list-block",
+      "data-type": props.data.element === "ul" ? "unordered" : "ordered"
+    },
+    renderTreeNodes(treeStructure)
+  );
+}
+</script>

package/dist/runtime/components/Block/List.vue.d.ts

@@ -0,0 +1,13 @@
+import type { DEListBlock } from "../../type.d.mts.js";
+type __VLS_Props = {
+    data: DEListBlock;
+    isEdit: boolean;
+    index: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    update: (data: DEListBlock) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onUpdate?: ((data: DEListBlock) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Block/Text.d.vue.ts

@@ -0,0 +1,13 @@
+import type { DETextBlock } from "../../type.d.mts.js";
+type __VLS_Props = {
+    data: DETextBlock;
+    isEdit: boolean;
+    index: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    update: (data: DETextBlock) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onUpdate?: ((data: DETextBlock) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Block/Text.vue

@@ -0,0 +1,84 @@
+<template>
+    <p
+        v-memo="memoData"
+        v-html="props.data.textContent"
+        class="de-block de-text-block"
+        :class="props.data.classList"
+        :contenteditable="props.isEdit === true"
+        :data-depth="props.data.depth"
+        @focus="setEdit"
+        @keydown="keydownEvent"
+        @input="updateData"
+        @paste="_allDataPasteEvent($event, setEdit, abortEdit)"
+    ></p>
+</template>
+
+<script setup>
+import { useEditorStore } from "../../store/editor";
+import { computed } from "vue";
+import { _sliceAndNewTextBlock, _blockTabEvent, _moveBlockDefaultEvent, _defaultBackspaceEvent, _defaultDeleteEvent, _allDataPasteEvent, _convertTextBlockType, _convertTextBlockToCodeBlock, _convertTextBlockToDividerBlock, _updateCursorData } from "../../utils/event";
+const editorStore = useEditorStore();
+const props = defineProps({
+  data: { type: null, required: true },
+  isEdit: { type: Boolean, required: true },
+  index: { type: Number, required: true }
+});
+const emit = defineEmits(["update"]);
+const memoData = computed(() => {
+  const isFrozen = props.isEdit === true && editorStore.selectedBlockId === props.data.id;
+  const memoKey = isFrozen ? "frozen" : JSON.stringify(props.data);
+  return [memoKey];
+});
+function setEdit() {
+  editorStore.selectedBlockIndex = props.index;
+  editorStore.selectedBlockId = props.data.id;
+  _updateCursorData();
+}
+function abortEdit() {
+  editorStore.selectedBlockIndex = -1;
+  editorStore.selectedBlockId = "";
+}
+function keydownEvent(event) {
+  if (event.isComposing === false) {
+    switch (event.key) {
+      case "Enter":
+        if (event.shiftKey === false) {
+          _sliceAndNewTextBlock(event, props.data, props.index);
+        } else {
+        }
+        break;
+      case "Tab":
+        _blockTabEvent(event, props.data, props.index, setEdit, abortEdit);
+        break;
+      case "ArrowUp":
+        _moveBlockDefaultEvent(event, "up");
+        break;
+      case "ArrowDown":
+        _moveBlockDefaultEvent(event, "down");
+        break;
+      case "Backspace":
+        _defaultBackspaceEvent(event);
+        break;
+      case "Delete":
+        _defaultDeleteEvent(event, setEdit, abortEdit);
+        break;
+      case "`":
+        _convertTextBlockToCodeBlock(event, props.data, props.index);
+        break;
+      case "-":
+        _convertTextBlockToDividerBlock(event, props.data, props.index);
+        break;
+      case " ":
+        _convertTextBlockType(event, props.data, props.index);
+        break;
+    }
+  } else {
+    event.preventDefault();
+  }
+}
+function updateData(event) {
+  const newData = JSON.parse(JSON.stringify(props.data));
+  newData.textContent = event.target.innerHTML;
+  emit("update", newData);
+}
+</script>

package/dist/runtime/components/Block/Text.vue.d.ts

@@ -0,0 +1,13 @@
+import type { DETextBlock } from "../../type.d.mts.js";
+type __VLS_Props = {
+    data: DETextBlock;
+    isEdit: boolean;
+    index: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    update: (data: DETextBlock) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onUpdate?: ((data: DETextBlock) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,33 +1,39 @@
-import type { DEBlockData, DEContentData, DEDecoration, DETextalign } from "../type.d.mts.js";
-interface DEOption {
+import "../scss/editor.scss.js";
+import { _addBlock, _addImageBlock, _checkDataIsEmpty } from "../utils/data/index.js";
+import { _editorMountedEvent } from "../utils/event/index.js";
+import { _setAlign } from "../utils/node/index.js";
+import type { DEContentData } from "../type.d.mts.js";
+interface DragonEditorOption {
     modelValue: DEContentData;
     useMenuBar?: boolean;
-    imageHostURL?: string;
-    screenChangePoint?: number;
+    mediaHostURL?: string;
+    isMobile?: boolean;
+    theme?: "dark" | "white";
+    codeBlockSpaces?: number;
+    acceptImageFormat?: string;
+    anchorTagTarget?: string;
 }
-declare function addBlock(data: DEBlockData): void;
-declare function setDecoration(style: DEDecoration): void;
-declare function setAlign(align: DETextalign): void;
-declare function changeEditorData(data: DEContentData): void;
-declare function updateLayout(): void;
-declare function checkDataEmpty(data?: DEContentData): boolean;
-declare const __VLS_export: import("vue").DefineComponent<DEOption, {
-    addBlock: typeof addBlock;
-    setDecoration: typeof setDecoration;
-    setAlign: typeof setAlign;
-    changeEditorData: typeof changeEditorData;
-    updateLayout: typeof updateLayout;
-    checkDataEmpty: typeof checkDataEmpty;
+declare const __VLS_export: import("vue").DefineComponent<DragonEditorOption, {
+    addBlock: typeof _addBlock;
+    addImageBlock: typeof _addImageBlock;
+    updateLayout: typeof _editorMountedEvent;
+    checkDataIsEmpty: typeof _checkDataIsEmpty;
+    setDecoration: (type: "bold" | "italic" | "underline" | "strikethrough" | "code") => void;
+    setAlign: typeof _setAlign;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (data: DEContentData) => any;
-    uploadImageEvent: (file: File) => any;
-}, string, import("vue").PublicProps, Readonly<DEOption> & Readonly<{
+    uploadImageEvent: (files: File[]) => any;
+}, string, import("vue").PublicProps, Readonly<DragonEditorOption> & Readonly<{
     "onUpdate:modelValue"?: ((data: DEContentData) => any) | undefined;
-    onUploadImageEvent?: ((file: File) => any) | undefined;
+    onUploadImageEvent?: ((files: File[]) => any) | undefined;
 }>, {
-    imageHostURL: string;
+    mediaHostURL: string;
+    isMobile: boolean;
+    codeBlockSpaces: number;
+    acceptImageFormat: string;
+    anchorTagTarget: string;
+    theme: "dark" | "white";
     useMenuBar: boolean;
-    screenChangePoint: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;