dragon-editor 3.8.7 → 4.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (91) hide show
  1. package/README.md +10 -9
  2. package/dist/module.json +1 -1
  3. package/dist/module.mjs +9 -7
  4. package/dist/runtime/components/Block/Code.d.vue.ts +13 -0
  5. package/dist/runtime/components/Block/Code.vue +193 -0
  6. package/dist/runtime/components/Block/Code.vue.d.ts +13 -0
  7. package/dist/runtime/components/Block/Custom.d.vue.ts +9 -0
  8. package/dist/runtime/components/Block/Custom.vue +28 -0
  9. package/dist/runtime/components/Block/Custom.vue.d.ts +9 -0
  10. package/dist/runtime/components/Block/Divider.d.vue.ts +9 -0
  11. package/dist/runtime/components/Block/Divider.vue +27 -0
  12. package/dist/runtime/components/Block/Divider.vue.d.ts +9 -0
  13. package/dist/runtime/components/Block/Heading.d.vue.ts +13 -0
  14. package/dist/runtime/components/Block/Heading.vue +84 -0
  15. package/dist/runtime/components/Block/Heading.vue.d.ts +13 -0
  16. package/dist/runtime/components/Block/Image.d.vue.ts +13 -0
  17. package/dist/runtime/components/Block/Image.vue +146 -0
  18. package/dist/runtime/components/Block/Image.vue.d.ts +13 -0
  19. package/dist/runtime/components/Block/List.d.vue.ts +13 -0
  20. package/dist/runtime/components/Block/List.vue +170 -0
  21. package/dist/runtime/components/Block/List.vue.d.ts +13 -0
  22. package/dist/runtime/components/Block/Text.d.vue.ts +13 -0
  23. package/dist/runtime/components/Block/Text.vue +84 -0
  24. package/dist/runtime/components/Block/Text.vue.d.ts +13 -0
  25. package/dist/runtime/components/DragonEditor.d.vue.ts +27 -22
  26. package/dist/runtime/components/DragonEditor.vue +311 -474
  27. package/dist/runtime/components/DragonEditor.vue.d.ts +27 -22
  28. package/dist/runtime/components/DragonEditorViewer.d.vue.ts +12 -5
  29. package/dist/runtime/components/DragonEditorViewer.vue +200 -227
  30. package/dist/runtime/components/DragonEditorViewer.vue.d.ts +12 -5
  31. package/dist/runtime/components/MenuBar.d.vue.ts +3 -0
  32. package/dist/runtime/components/MenuBar.vue +385 -0
  33. package/dist/runtime/components/MenuBar.vue.d.ts +3 -0
  34. package/dist/runtime/scss/editor.css +237 -283
  35. package/dist/runtime/scss/viewer.css +184 -210
  36. package/dist/runtime/store/editor.d.ts +2 -0
  37. package/dist/runtime/store/editor.js +59 -0
  38. package/dist/runtime/type.d.mts +101 -124
  39. package/dist/runtime/utils/data/block.d.ts +20 -0
  40. package/dist/runtime/utils/data/block.js +663 -0
  41. package/dist/runtime/utils/data/cursor.d.ts +9 -0
  42. package/dist/runtime/utils/data/cursor.js +137 -0
  43. package/dist/runtime/utils/data/index.d.ts +5 -0
  44. package/dist/runtime/utils/data/index.js +17 -0
  45. package/dist/runtime/utils/data/node.d.ts +9 -0
  46. package/dist/runtime/utils/data/node.js +101 -0
  47. package/dist/runtime/utils/event/cursor.d.ts +3 -6
  48. package/dist/runtime/utils/event/cursor.js +52 -105
  49. package/dist/runtime/utils/event/index.d.ts +2 -6
  50. package/dist/runtime/utils/event/index.js +48 -6
  51. package/dist/runtime/utils/event/keyboard.d.ts +22 -7
  52. package/dist/runtime/utils/event/keyboard.js +910 -1406
  53. package/dist/runtime/utils/layout/body.d.ts +3 -4
  54. package/dist/runtime/utils/layout/body.js +83 -51
  55. package/dist/runtime/utils/layout/icon.d.ts +1 -2
  56. package/dist/runtime/utils/layout/icon.js +64 -67
  57. package/dist/runtime/utils/layout/index.d.ts +0 -3
  58. package/dist/runtime/utils/layout/index.js +0 -3
  59. package/dist/runtime/utils/node/element.d.ts +4 -6
  60. package/dist/runtime/utils/node/element.js +58 -71
  61. package/dist/runtime/utils/node/index.d.ts +1 -1
  62. package/dist/runtime/utils/node/index.js +1 -1
  63. package/dist/runtime/utils/node/style.d.ts +5 -0
  64. package/dist/runtime/utils/node/style.js +702 -0
  65. package/package.json +32 -18
  66. package/dist/runtime/utils/event/block.d.ts +0 -7
  67. package/dist/runtime/utils/event/block.js +0 -110
  68. package/dist/runtime/utils/event/data.d.ts +0 -8
  69. package/dist/runtime/utils/event/data.js +0 -379
  70. package/dist/runtime/utils/event/mouse.d.ts +0 -11
  71. package/dist/runtime/utils/event/mouse.js +0 -85
  72. package/dist/runtime/utils/event/scroll.d.ts +0 -3
  73. package/dist/runtime/utils/event/scroll.js +0 -29
  74. package/dist/runtime/utils/event/touch.d.ts +0 -5
  75. package/dist/runtime/utils/event/touch.js +0 -10
  76. package/dist/runtime/utils/event/window.d.ts +0 -5
  77. package/dist/runtime/utils/event/window.js +0 -47
  78. package/dist/runtime/utils/layout/block.d.ts +0 -7
  79. package/dist/runtime/utils/layout/block.js +0 -123
  80. package/dist/runtime/utils/layout/controlbar.d.ts +0 -3
  81. package/dist/runtime/utils/layout/controlbar.js +0 -99
  82. package/dist/runtime/utils/layout/menuBar.d.ts +0 -3
  83. package/dist/runtime/utils/layout/menuBar.js +0 -408
  84. package/dist/runtime/utils/node/block.d.ts +0 -19
  85. package/dist/runtime/utils/node/block.js +0 -256
  86. package/dist/runtime/utils/style/anchor.d.ts +0 -5
  87. package/dist/runtime/utils/style/anchor.js +0 -245
  88. package/dist/runtime/utils/style/decoration.d.ts +0 -4
  89. package/dist/runtime/utils/style/decoration.js +0 -378
  90. package/dist/runtime/utils/style/index.d.ts +0 -2
  91. package/dist/runtime/utils/style/index.js +0 -2
@@ -1,29 +0,0 @@
1
- export function _parentWrapScollEvent(event, store) {
2
- __fixControlBarEvent(event, store);
3
- }
4
- function __fixControlBarEvent(event, store) {
5
- if (store.value.useMenuBar === true && store.value.$parentWrap !== null && store.value.$editor !== null) {
6
- const editorRect = store.value.$editor.getBoundingClientRect();
7
- let scrollY = 0;
8
- if (store.value.$parentWrap.constructor.name === "Window") {
9
- scrollY = store.value.$parentWrap.scrollY;
10
- } else {
11
- scrollY = store.value.$parentWrap.scrollTop;
12
- }
13
- let realElementY = editorRect.y + scrollY;
14
- if (store.value.$parentWrap.constructor.name !== "Window") {
15
- const parentRect = store.value.$parentWrap.getBoundingClientRect();
16
- realElementY -= parentRect.y;
17
- }
18
- let value = 0;
19
- if (scrollY > realElementY) {
20
- value = scrollY - realElementY - 1;
21
- } else {
22
- value = 0;
23
- }
24
- if (value > editorRect.height - 34) {
25
- value = editorRect.height - 34;
26
- }
27
- store.value.menuBarTop = Math.floor(value);
28
- }
29
- }
@@ -1,5 +0,0 @@
1
- import type { Ref } from "vue";
2
- import type { DragonEditorStore } from "../../type.d.mts.js";
3
- export declare function _contentTouchstartEvent(event: TouchEvent, store: Ref<DragonEditorStore>): void;
4
- export declare function _editorTouchmoveEvent(event: TouchEvent, store: Ref<DragonEditorStore>): void;
5
- export declare function _editorTouchendEvent(event: TouchEvent, store: Ref<DragonEditorStore>): void;
@@ -1,10 +0,0 @@
1
- import { _imageResizeEventStart, _imageResizeEvent, _imageResizeEventEnd } from "./index.js";
2
- export function _contentTouchstartEvent(event, store) {
3
- _imageResizeEventStart(event, store);
4
- }
5
- export function _editorTouchmoveEvent(event, store) {
6
- _imageResizeEvent(event, store);
7
- }
8
- export function _editorTouchendEvent(event, store) {
9
- _imageResizeEventEnd(event, store);
10
- }
@@ -1,5 +0,0 @@
1
- import type { Ref } from "vue";
2
- import type { DragonEditorStore } from "../../type.d.mts.js";
3
- export declare function _eidtorMountEvent(store: Ref<DragonEditorStore>): void;
4
- export declare function _eidtorUnmountEvent(store: Ref<DragonEditorStore>): void;
5
- export declare function _windowResizeEvent(event: Event, store: Ref<DragonEditorStore>): void;
@@ -1,47 +0,0 @@
1
- import { _findScrollingElement, _findTransformElement, _findHiddenStyleElement } from "../node/index.js";
2
- export function _eidtorMountEvent(store) {
3
- const $editor = document.querySelector(".js-dragon-editor");
4
- const $body = document.querySelector(".js-de-body");
5
- const $controlBar = document.querySelector(".js-de-controlbar");
6
- const $parentWrap = _findScrollingElement($editor);
7
- const $hiddenStyleElement = _findHiddenStyleElement($editor);
8
- const $transformElement = _findTransformElement($editor);
9
- store.value.$editor = $editor;
10
- store.value.$body = $body;
11
- store.value.$controlBar = $controlBar;
12
- store.value.$parentWrap = $parentWrap;
13
- if ($hiddenStyleElement === $editor.parentElement) {
14
- store.value.controlStatus.hasHiddenStyleParent = true;
15
- } else {
16
- store.value.controlStatus.hasHiddenStyleParent = false;
17
- }
18
- if ($transformElement === null) {
19
- store.value.controlStatus.hasTransformParent = false;
20
- store.value.controlStatus.$transformElement = null;
21
- } else {
22
- store.value.controlStatus.hasTransformParent = true;
23
- store.value.controlStatus.$transformElement = $transformElement;
24
- }
25
- __checkAndSetUpMobile(store);
26
- window.addEventListener("click", store.value.windowClickEvent);
27
- window.addEventListener("resize", store.value.windowResizeEvent);
28
- window.addEventListener("mouseup", store.value.windowMouseUpEvent);
29
- store.value.$parentWrap?.addEventListener("scroll", store.value.parentWrapScollEvent);
30
- }
31
- export function _eidtorUnmountEvent(store) {
32
- window.removeEventListener("click", store.value.windowClickEvent);
33
- window.removeEventListener("resize", store.value.windowResizeEvent);
34
- window.removeEventListener("mouseup", store.value.windowMouseUpEvent);
35
- store.value.$parentWrap?.removeEventListener("scroll", store.value.parentWrapScollEvent);
36
- store.value.menuBarTop = 0;
37
- }
38
- export function _windowResizeEvent(event, store) {
39
- __checkAndSetUpMobile(store);
40
- }
41
- function __checkAndSetUpMobile(store) {
42
- if (window.innerWidth > store.value.screenChangePoint) {
43
- store.value.controlStatus.isMobile = false;
44
- } else {
45
- store.value.controlStatus.isMobile = true;
46
- }
47
- }
@@ -1,7 +0,0 @@
1
- import type { VNode } from "vue";
2
- import type { DEContentData } from "../../type.d.mts.js";
3
- export declare function _createBlockList({ blockList, isEditable, imageHostURL }?: {
4
- blockList: DEContentData;
5
- isEditable: boolean;
6
- imageHostURL: string;
7
- }): VNode[];
@@ -1,123 +0,0 @@
1
- import { h } from "vue";
2
- import { _getDefaultBlockData, CODEBLOCKLANG } from "../event/index.js";
3
- export function _createBlockList({ blockList, isEditable, imageHostURL } = { blockList: [], isEditable: false, imageHostURL: "" }) {
4
- const blockArray = [];
5
- if (blockList.length === 0 && isEditable === true) {
6
- blockArray.push(__createTextBlock(_getDefaultBlockData("text"), isEditable));
7
- } else {
8
- blockList.forEach((block) => {
9
- switch (block.type) {
10
- case "text":
11
- blockArray.push(__createTextBlock(block, isEditable));
12
- break;
13
- case "heading":
14
- blockArray.push(__createHeadingBlock(block, isEditable));
15
- break;
16
- case "image":
17
- blockArray.push(__createImageBlock(block, isEditable, imageHostURL));
18
- break;
19
- case "list":
20
- blockArray.push(__createListBlock(block, isEditable));
21
- break;
22
- case "code":
23
- blockArray.push(__createCodeBlock(block, isEditable));
24
- break;
25
- case "divider":
26
- blockArray.push(__createDividerBlock());
27
- break;
28
- default:
29
- blockArray.push(__createCustomBlock(block));
30
- }
31
- });
32
- }
33
- return blockArray;
34
- }
35
- function __createTextBlock(data, isEditable) {
36
- const option = { class: ["de-block", "de-text-block", ...data.classList], innerHTML: data.textContent };
37
- if (data.depth !== void 0 && data.depth !== 0) {
38
- option["data-depth"] = data.depth;
39
- }
40
- if (isEditable === true) {
41
- option.contenteditable = true;
42
- }
43
- return h("p", option);
44
- }
45
- function __createHeadingBlock(data, isEditable) {
46
- const option = { class: ["de-block", "de-heading-block", ...data.classList], id: data.id, "data-level": data.level, innerHTML: data.textContent };
47
- if (data.depth !== void 0 && data.depth !== 0) {
48
- option["data-depth"] = data.depth;
49
- }
50
- if (isEditable === true) {
51
- option.contenteditable = true;
52
- }
53
- return h(`h${data.level}`, option);
54
- }
55
- function __createImageBlock(data, isEditable, imageHostURL) {
56
- const imageChild = [];
57
- const areaChild = [];
58
- areaChild.push(
59
- h("img", {
60
- class: ["de-img"],
61
- src: imageHostURL + data.src,
62
- alt: "",
63
- width: data.width,
64
- height: data.height,
65
- loading: "lazy"
66
- })
67
- );
68
- if (isEditable === true) {
69
- areaChild.push(h("button", { class: ["de-btn", "de-btn-left"] }));
70
- areaChild.push(h("button", { class: ["de-btn", "de-btn-right"] }));
71
- }
72
- imageChild.push(h("div", { class: ["de-image-area"], "data-maxwidth": data.maxWidth }, areaChild));
73
- if (data.caption !== "") {
74
- const captionOption = { class: ["de-caption"], innerHTML: data.caption };
75
- if (isEditable === true) {
76
- captionOption.contenteditable = true;
77
- }
78
- imageChild.push(h("p", captionOption));
79
- }
80
- return h("div", { class: ["de-block", "de-image-block", ...data.classList] }, imageChild);
81
- }
82
- function __createListBlock(data, isEditable) {
83
- const liList = [];
84
- const option = { class: ["de-block", "de-list-block"], "data-style": data.style };
85
- if (data.depth !== void 0 && data.depth !== 0) {
86
- option["data-depth"] = data.depth;
87
- }
88
- data.child.forEach((child) => {
89
- const option2 = { class: ["de-item", ...child.classList], innerHTML: child.textContent };
90
- if (isEditable === true) {
91
- option2.contenteditable = true;
92
- }
93
- liList.push(h("li", option2));
94
- });
95
- return h(data.element, option, liList);
96
- }
97
- function __createCodeBlock(data, isEditable) {
98
- const childList = [];
99
- const fileNameOption = { class: ["de-filename"] };
100
- const codeOption = { class: ["de-code-content"], innerHTML: data.textContent };
101
- const targetValue = CODEBLOCKLANG.find((item) => item.code === data.language);
102
- if (isEditable === true) {
103
- fileNameOption.contenteditable = true;
104
- codeOption.contenteditable = true;
105
- }
106
- childList.push(h("p", fileNameOption, data.filename));
107
- childList.push(h("p", { class: ["de-language"] }, targetValue?.text ?? "Plain Text"));
108
- childList.push(h("pre", { class: ["de-pre"] }, [h("code", codeOption)]));
109
- return h(
110
- "div",
111
- {
112
- class: ["de-block", "de-code-block"],
113
- "data-theme": data.theme
114
- },
115
- childList
116
- );
117
- }
118
- function __createCustomBlock(data) {
119
- return h("div", { class: ["de-block", "de-custom-block", ...data.classList], innerHTML: data.textContent });
120
- }
121
- function __createDividerBlock() {
122
- return h("div", { class: ["de-block", "de-divider-block"] });
123
- }
@@ -1,3 +0,0 @@
1
- import type { VNode, Ref } from "vue";
2
- import type { DragonEditorStore } from "../../type.d.mts.js";
3
- export declare function _getControlbarVNodeStructure(store: Ref<DragonEditorStore>): VNode;
@@ -1,99 +0,0 @@
1
- import { h } from "vue";
2
- import { _setCodeBlockStatus, _setListBlockStyle } from "../node/index.js";
3
- import { CODEBLOCKLANG } from "../event/index.js";
4
- export function _getControlbarVNodeStructure(store) {
5
- const childList = [];
6
- switch (store.value.controlStatus.currentBlockType) {
7
- case "code":
8
- childList.push(
9
- h("div", { class: ["de-col"] }, [
10
- h("p", { class: ["de-name"] }, "Theme : "),
11
- h(
12
- "select",
13
- {
14
- class: ["de-selector"],
15
- value: store.value.controlStatus.codeBlockTheme,
16
- onChange: (event) => {
17
- const $target = event.currentTarget;
18
- if ($target !== null) {
19
- _setCodeBlockStatus($target.value, store.value.controlStatus.codeBlockLang, store);
20
- }
21
- }
22
- },
23
- store.value.codeBlockTheme.map((item) => {
24
- return h("option", { value: item.code }, item.text);
25
- })
26
- )
27
- ])
28
- );
29
- childList.push(
30
- h("div", { class: ["de-col"] }, [
31
- h("p", { class: ["de-name"] }, "Language : "),
32
- h(
33
- "select",
34
- {
35
- class: ["de-selector"],
36
- value: store.value.controlStatus.codeBlockLang,
37
- onChange: (event) => {
38
- const $target = event.currentTarget;
39
- if ($target !== null) {
40
- _setCodeBlockStatus(store.value.controlStatus.codeBlockTheme, $target.value, store);
41
- }
42
- }
43
- },
44
- CODEBLOCKLANG.map((item) => {
45
- return h("option", { value: item.code }, item.text);
46
- })
47
- )
48
- ])
49
- );
50
- break;
51
- case "ol":
52
- childList.push(
53
- h("div", { class: ["de-col"] }, [
54
- h("p", { class: ["de-name"] }, "List Style : "),
55
- h(
56
- "select",
57
- {
58
- class: ["de-selector"],
59
- value: store.value.controlStatus.listBlockStyle,
60
- onChange: (event) => {
61
- const $target = event.currentTarget;
62
- if ($target !== null) {
63
- _setListBlockStyle($target.value, store);
64
- }
65
- }
66
- },
67
- store.value.listOlType.map((item) => {
68
- return h("option", { value: item.code }, item.text);
69
- })
70
- )
71
- ])
72
- );
73
- break;
74
- case "ul":
75
- childList.push(
76
- h("div", { class: ["de-col"] }, [
77
- h("p", { class: ["de-name"] }, "List Style : "),
78
- h(
79
- "select",
80
- {
81
- class: ["de-selector"],
82
- value: store.value.controlStatus.listBlockStyle,
83
- onChange: (event) => {
84
- const $target = event.currentTarget;
85
- if ($target !== null) {
86
- _setListBlockStyle($target.value, store);
87
- }
88
- }
89
- },
90
- store.value.listUlType.map((item) => {
91
- return h("option", { value: item.code }, item.text);
92
- })
93
- )
94
- ])
95
- );
96
- break;
97
- }
98
- return h("div", { class: ["de-controlbar", "js-de-controlbar"], style: { top: `${store.value.controlBar.y}px`, left: `${store.value.controlBar.x}px` } }, childList);
99
- }
@@ -1,3 +0,0 @@
1
- import type { VNode, Ref } from "vue";
2
- import type { DragonEditorStore } from "../../type.d.mts.js";
3
- export declare function _getMenuBarVNodeStructure(store: Ref<DragonEditorStore>): VNode;