dragon-editor 3.8.7 → 4.0.0

package/README.md

@@ -46,7 +46,7 @@ yarn add dragon-editor
 bun add dragon-editor
 ```
 
-## Using
+## How To Use
 
 First. Set module
 
@@ -66,12 +66,10 @@ Second. Use Component
 </template>
 
 <script setup lang="ts">
-    const contentData = ref<DEContentData>([]); // Do not modify the value after binding under any circumstances.
+    const contentData = ref<DEContentData>([]);
 </script>
 ```
 
-Done!
-
 ## View Page
 
 ```html
@@ -86,14 +84,17 @@ Done!
 </script>
 ```
 
-More information in [Document](https://lovefields.github.io/dragonEditor-doc/)
+## Link
+
+- [Document](https://lovefields.github.io/dragonEditor-doc/)
+- [Demo](https://lovefields.github.io/dragonEditor-doc/demo)
 
 # Sponsors
 
 Support this project by becoming a sponsor. [GitHub Sponsors](https://github.com/sponsors/lovefields)
 
-<div align="center">
-    <a href="https://github.com/kyu91">
-        <img src="https://github.com/kyu91.png" width="50" title="kyu91" />
+<!-- <div align="center">
+    <a href="https://github.com/{id}">
+        <img src="https://github.com/{id}.png" width="50" title="{id}" />
     </a>
-</div>
+</div> -->

package/dist/module.json

@@ -4,7 +4,7 @@
     "nuxt": ">=3.0.0"
   },
   "configKey": "dragon-editor",
-  "version": "3.8.7",
+  "version": "4.0.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, addComponent, addTypeTemplate } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, importModule, addComponent, addTypeTemplate } from '@nuxt/kit';
 
 const module$1 = defineNuxtModule({
   meta: {
@@ -7,22 +7,24 @@ const module$1 = defineNuxtModule({
       nuxt: ">=3.0.0"
     }
   },
-  async setup(options, nuxt) {
-    const resolver = createResolver(import.meta.url);
-    const typeContent = await readFile(resolver.resolve("./runtime/type.d.mts"));
+  async setup() {
+    const { resolve } = createResolver(import.meta.url);
+    const typeContent = await readFile(resolve("./runtime/type.d.mts"));
+    await importModule("@pinia/nuxt");
+    await importModule("@vueuse/nuxt");
     addComponent({
       name: "DragonEditor",
-      filePath: resolver.resolve("./runtime/components/DragonEditor")
+      filePath: resolve("./runtime/components/DragonEditor")
     });
     addComponent({
       name: "DragonEditorViewer",
-      filePath: resolver.resolve("./runtime/components/DragonEditorViewer")
+      filePath: resolve("./runtime/components/DragonEditorViewer")
     });
     addTypeTemplate({
       filename: "types/dragon-editor.d.ts",
       getContents: () => `
                 declare global {
-                    ${typeContent}
+                    ${typeContent.replaceAll(new RegExp("^export", "gm"), "")}
                 }
 
                 export {}

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

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

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

@@ -0,0 +1,193 @@
+<template>
+    <div
+        class="de-block de-code-block"
+        @click="setEdit"
+    >
+        <p
+            v-memo="memoData"
+            v-html="props.data.filename"
+            class="de-filename"
+            :contenteditable="props.isEdit === true"
+            ref="$fileName"
+            @focus="setEdit"
+            @keydown="fileNameKeydownEvent"
+            @input="updateFilename"
+            @paste="_normalPasteEvent($event, setEdit, abortEdit)"
+        ></p>
+
+        <p
+            v-if="props.isEdit === false"
+            class="de-language"
+            >{{ editorStore.codeBlockLnaguageList[props.data.language] }}</p
+        >
+
+        <div
+            v-else
+            class="de-language"
+        >
+            <button
+                class="de-btn-language"
+                @click="isLanguageListActive = !isLanguageListActive"
+                ref="$btnLanguageList"
+                >{{ editorStore.codeBlockLnaguageList[props.data.language] }}</button
+            >
+
+            <div
+                class="de-list-language"
+                :class="{ '--active': isLanguageListActive === true }"
+                ref="$languageList"
+            >
+                <button
+                    v-for="[name, value] in Object.entries(editorStore.codeBlockLnaguageList)"
+                    class="de-lang"
+                    @click="setLanguageEvent(name)"
+                >
+                    {{ value }}
+                </button>
+            </div>
+        </div>
+
+        <div class="de-pre-wrap">
+            <div class="de-number">
+                <p
+                    v-for="i in lineNumber"
+                    class="de-number-item"
+                >
+                    {{ i }}
+                </p>
+            </div>
+
+            <pre class="de-pre"><code v-memo="memoData" v-html="props.data.textContent" class="de-code-content" :contenteditable="props.isEdit === true" ref="$content" @focus="setEdit" @keydown="contentKeydownEvent" @input="updateContent" @blur="setStyleEvent" @paste="_normalPasteEvent($event, setEdit, abortEdit)"></code></pre>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import hljs from "highlight.js";
+import { useEditorStore } from "../../store/editor";
+import { ref, computed, nextTick } from "vue";
+import { onClickOutside } from "@vueuse/core";
+import { _moveCodeBlockEvent, _codeBlockShiftEnterEvent, _codeBlockTabEvent, _normalPasteEvent } 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 isLanguageListActive = ref(false);
+const $fileName = ref(null);
+const $content = ref(null);
+const $languageList = ref(null);
+const $btnLanguageList = ref(null);
+const lineNumber = computed(() => {
+  const match = props.data.textContent.match(/\n/g);
+  const matchEmptyLast = props.data.textContent.match(/\n\n$/g);
+  let number = match === null ? 1 : match.length + 1;
+  if (matchEmptyLast !== null) {
+    number -= 1;
+  }
+  return number;
+});
+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.selectedBlockId = props.data.id;
+  editorStore.selectedBlockIndex = props.index;
+}
+function abortEdit() {
+  editorStore.selectedBlockId = "";
+  editorStore.selectedBlockIndex = -1;
+}
+function updateFilename(event) {
+  const newData = JSON.parse(JSON.stringify(props.data));
+  newData.filename = event.target.innerHTML;
+  emit("update", newData);
+}
+function fileNameKeydownEvent(event) {
+  if ($content.value !== null) {
+    if (event.isComposing === false) {
+      switch (event.key) {
+        case "Enter":
+          _moveCodeBlockEvent(event, "down", "filename", $content.value);
+          break;
+        case "Tab":
+          _moveCodeBlockEvent(event, "down", "filename", $content.value);
+          break;
+        case "ArrowUp":
+          _moveCodeBlockEvent(event, "up", "filename", $content.value);
+          break;
+        case "ArrowDown":
+          _moveCodeBlockEvent(event, "down", "filename", $content.value);
+          break;
+      }
+    }
+  } else {
+    event.preventDefault();
+  }
+}
+function updateContent(event) {
+  const newData = JSON.parse(JSON.stringify(props.data));
+  newData.textContent = event.target.innerHTML;
+  emit("update", newData);
+}
+function contentKeydownEvent(event) {
+  if ($fileName.value !== null) {
+    if (event.isComposing === false) {
+      switch (event.key) {
+        case "Enter":
+          if (event.shiftKey === true) {
+            _codeBlockShiftEnterEvent(event, props.index);
+          }
+          break;
+        case "Tab":
+          _codeBlockTabEvent(event);
+          break;
+        case "ArrowUp":
+          _moveCodeBlockEvent(event, "up", "content", $fileName.value);
+          break;
+        case "ArrowDown":
+          _moveCodeBlockEvent(event, "down", "content", $fileName.value);
+          break;
+      }
+    } else {
+      event.preventDefault();
+    }
+  }
+}
+async function setLanguageEvent(lang) {
+  if ($content.value !== null) {
+    const textContent = $content.value.textContent;
+    const highlights = hljs.highlight(textContent, { language: lang });
+    const newData = JSON.parse(JSON.stringify(props.data));
+    isLanguageListActive.value = false;
+    abortEdit();
+    newData.language = lang;
+    newData.textContent = highlights.value;
+    emit("update", newData);
+    await nextTick();
+    setEdit();
+  }
+}
+function setStyleEvent() {
+  if ($content.value !== null) {
+    const textContent = $content.value.textContent;
+    const highlights = hljs.highlight(textContent, { language: props.data.language });
+    const newData = JSON.parse(JSON.stringify(props.data));
+    newData.textContent = highlights.value;
+    emit("update", newData);
+  }
+}
+onClickOutside(
+  $languageList,
+  () => {
+    isLanguageListActive.value = false;
+  },
+  {
+    ignore: [$btnLanguageList]
+  }
+);
+</script>

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

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

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

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

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

@@ -0,0 +1,28 @@
+<template>
+    <div
+        v-memo="memoData"
+        v-html="props.data.textContent"
+        class="de-block de-custom-block"
+        @click="setEdit"
+    ></div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useEditorStore } from "../../store/editor";
+const editorStore = useEditorStore();
+const props = defineProps({
+  data: { type: null, required: true },
+  isEdit: { type: Boolean, required: true },
+  index: { type: Number, required: true }
+});
+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.selectedBlockId = props.data.id;
+  editorStore.selectedBlockIndex = props.index;
+}
+</script>

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

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

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

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

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

@@ -0,0 +1,27 @@
+<template>
+    <div
+        v-memo="memoData"
+        class="de-block de-divider-block"
+        @click="setEdit"
+    ></div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useEditorStore } from "../../store/editor";
+const editorStore = useEditorStore();
+const props = defineProps({
+  data: { type: null, required: true },
+  isEdit: { type: Boolean, required: true },
+  index: { type: Number, required: true }
+});
+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.selectedBlockId = props.data.id;
+  editorStore.selectedBlockIndex = props.index;
+}
+</script>

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

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

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

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

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

@@ -0,0 +1,84 @@
+<template>
+    <component :is="renderHeading()" />
+</template>
+
+<script setup>
+import { useEditorStore } from "../../store/editor";
+import { h, withMemo } from "vue";
+import { _sliceAndNewTextBlock, _blockTabEvent, _moveBlockDefaultEvent, _defaultBackspaceEvent, _defaultDeleteEvent, _allDataPasteEvent, _convertHeadingBlockType, _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 memoCache = [];
+function setEdit() {
+  editorStore.selectedBlockId = props.data.id;
+  editorStore.selectedBlockIndex = props.index;
+  _updateCursorData();
+}
+function abortEdit() {
+  editorStore.selectedBlockId = "";
+  editorStore.selectedBlockIndex = -1;
+}
+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 " ":
+        _convertHeadingBlockType(event, props.data, props.index, setEdit, abortEdit);
+        break;
+    }
+  } else {
+    event.preventDefault();
+  }
+}
+function updateData(event) {
+  const newData = JSON.parse(JSON.stringify(props.data));
+  newData.textContent = event.target.innerHTML;
+  emit("update", newData);
+}
+function renderHeading() {
+  const isFrozen = props.isEdit === true && editorStore.selectedBlockId === props.data.id;
+  const memoKey = isFrozen ? "frozen" : JSON.stringify(props.data);
+  return withMemo(
+    [memoKey],
+    () => h(`h${props.data.level}`, {
+      class: ["de-block", "de-heading-block", ...props.data.classList],
+      id: props.data.id,
+      contenteditable: props.isEdit === true,
+      "data-depth": props.data.depth,
+      "data-level": props.data.level,
+      innerHTML: props.data.textContent,
+      onFocus: setEdit,
+      onInput: updateData,
+      onkeydown: keydownEvent,
+      onPaste: (event) => _allDataPasteEvent(event, setEdit, abortEdit)
+    }),
+    memoCache,
+    0
+  );
+}
+</script>

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

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

package/dist/runtime/components/Block/Image.d.vue.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;