vditor 3.8.13 → 3.8.16

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 (33) hide show
  1. package/README.md +11 -11
  2. package/dist/index.css +1807 -2
  3. package/dist/index.d.ts +1 -1
  4. package/dist/index.min.js +1 -1
  5. package/dist/js/lute/lute.min.js +47 -47
  6. package/dist/method.min.js +1 -1
  7. package/dist/types/index.d.ts +4 -2
  8. package/package.json +3 -2
  9. package/src/assets/{scss/_content.scss → less/_content.less} +8 -9
  10. package/src/assets/{scss/_hint.scss → less/_hint.less} +0 -0
  11. package/src/assets/{scss/_ir.scss → less/_ir.less} +4 -4
  12. package/src/assets/{scss/_panel.scss → less/_panel.less} +4 -4
  13. package/src/assets/{scss/_reset.scss → less/_reset.less} +13 -13
  14. package/src/assets/{scss/_sv.scss → less/_sv.less} +1 -2
  15. package/src/assets/{scss/_toolbar.scss → less/_toolbar.less} +3 -3
  16. package/src/assets/{scss/_tooltipped.scss → less/_tooltipped.less} +15 -15
  17. package/src/assets/{scss/_wysiwyg.scss → less/_wysiwyg.less} +3 -3
  18. package/src/assets/{scss/index.scss → less/index.less} +27 -22
  19. package/src/index.ts +6 -3
  20. package/src/ts/constants.ts +1 -1
  21. package/src/ts/ir/input.ts +23 -14
  22. package/src/ts/sv/inputEvent.ts +16 -15
  23. package/src/ts/sv/process.ts +20 -8
  24. package/src/ts/tip/index.ts +13 -5
  25. package/src/ts/toolbar/Info.ts +1 -1
  26. package/src/ts/ui/initUI.ts +159 -155
  27. package/src/ts/ui/setContentTheme.ts +1 -1
  28. package/src/ts/upload/index.ts +3 -0
  29. package/src/ts/util/editorCommonEvent.ts +2 -2
  30. package/src/ts/util/fixBrowserBehavior.ts +1272 -1247
  31. package/src/ts/wysiwyg/highlightToolbarWYSIWYG.ts +4 -0
  32. package/src/ts/wysiwyg/index.ts +4 -0
  33. package/src/ts/wysiwyg/input.ts +16 -14
@@ -6,177 +6,181 @@ import {setContentTheme} from "./setContentTheme";
6
6
  import {setTheme} from "./setTheme";
7
7
 
8
8
  declare global {
9
- interface Window {
10
- visualViewport: HTMLElement;
11
- }
9
+ interface Window {
10
+ visualViewport: HTMLElement;
11
+ }
12
12
  }
13
13
 
14
14
  export const initUI = (vditor: IVditor) => {
15
- vditor.element.innerHTML = "";
16
- vditor.element.classList.add("vditor");
17
- // 支持 RTL
18
- if (vditor.options.rtl) {
19
- vditor.element.setAttribute("dir", "rtl")
20
- }
21
- setTheme(vditor);
22
- setContentTheme(vditor.options.preview.theme.current, vditor.options.preview.theme.path);
23
- if (typeof vditor.options.height === "number") {
24
- vditor.element.style.height = vditor.options.height + "px";
25
- }
26
- if (typeof vditor.options.minHeight === "number") {
27
- vditor.element.style.minHeight = vditor.options.minHeight + "px";
28
- }
29
- if (typeof vditor.options.width === "number") {
30
- vditor.element.style.width = vditor.options.width + "px";
31
- } else {
32
- vditor.element.style.width = vditor.options.width;
33
- }
34
-
35
- vditor.element.appendChild(vditor.toolbar.element);
36
-
37
- const contentElement = document.createElement("div");
38
- contentElement.className = "vditor-content";
39
-
40
- if (vditor.options.outline.position === "left") {
41
- contentElement.appendChild(vditor.outline.element);
42
- }
43
-
44
- contentElement.appendChild(vditor.wysiwyg.element.parentElement);
45
-
46
- contentElement.appendChild(vditor.sv.element);
47
-
48
- contentElement.appendChild(vditor.ir.element.parentElement);
49
-
50
- contentElement.appendChild(vditor.preview.element);
51
-
52
- if (vditor.toolbar.elements.devtools) {
53
- contentElement.appendChild(vditor.devtools.element);
54
- }
55
-
56
- if (vditor.options.outline.position === "right") {
57
- vditor.outline.element.classList.add("vditor-outline--right");
58
- contentElement.appendChild(vditor.outline.element);
59
- }
60
-
61
- if (vditor.upload) {
62
- contentElement.appendChild(vditor.upload.element);
63
- }
64
-
65
- if (vditor.options.resize.enable) {
66
- contentElement.appendChild(vditor.resize.element);
67
- }
68
-
69
- contentElement.appendChild(vditor.hint.element);
70
-
71
- contentElement.appendChild(vditor.tip.element);
72
-
73
- vditor.element.appendChild(contentElement);
74
-
75
- contentElement.addEventListener("click", () => {
76
- hidePanel(vditor, ["subToolbar"]);
77
- });
78
-
79
- if (vditor.toolbar.elements.export) {
80
- // for export pdf
81
- vditor.element.insertAdjacentHTML("beforeend",
82
- '<iframe style="width: 100%;height: 0;border: 0"></iframe>');
83
- }
84
-
85
- setEditMode(vditor, vditor.options.mode, afterRender(vditor));
86
-
87
- document.execCommand("DefaultParagraphSeparator", false, "p");
88
-
89
- if (navigator.userAgent.indexOf("iPhone") > -1 && typeof window.visualViewport !== "undefined") {
90
- // https://github.com/Vanessa219/vditor/issues/379
91
- let pendingUpdate = false;
92
- const viewportHandler = (event: Event) => {
93
- if (pendingUpdate) {
94
- return;
95
- }
96
- pendingUpdate = true;
97
-
98
- requestAnimationFrame(() => {
99
- pendingUpdate = false;
100
- const layoutViewport = vditor.toolbar.element;
101
- layoutViewport.style.transform = "none";
102
- if (layoutViewport.getBoundingClientRect().top < 0) {
103
- layoutViewport.style.transform = `translate(0, ${-layoutViewport.getBoundingClientRect().top}px)`;
104
- }
105
- });
106
- };
107
- window.visualViewport.addEventListener("scroll", viewportHandler);
108
- window.visualViewport.addEventListener("resize", viewportHandler);
109
- }
15
+ vditor.element.innerHTML = "";
16
+ vditor.element.classList.add("vditor");
17
+ // 支持 RTL
18
+ if (vditor.options.rtl) {
19
+ vditor.element.setAttribute("dir", "rtl")
20
+ }
21
+ setTheme(vditor);
22
+ setContentTheme(vditor.options.preview.theme.current, vditor.options.preview.theme.path);
23
+ if (typeof vditor.options.height === "number") {
24
+ vditor.element.style.height = vditor.options.height + "px";
25
+ } else {
26
+ vditor.element.style.height = vditor.options.height;
27
+ }
28
+ if (typeof vditor.options.minHeight === "number") {
29
+ vditor.element.style.minHeight = vditor.options.minHeight + "px";
30
+ }
31
+ if (typeof vditor.options.width === "number") {
32
+ vditor.element.style.width = vditor.options.width + "px";
33
+ } else {
34
+ vditor.element.style.width = vditor.options.width;
35
+ }
36
+
37
+ vditor.element.appendChild(vditor.toolbar.element);
38
+
39
+ const contentElement = document.createElement("div");
40
+ contentElement.className = "vditor-content";
41
+
42
+ if (vditor.options.outline.position === "left") {
43
+ contentElement.appendChild(vditor.outline.element);
44
+ }
45
+
46
+ contentElement.appendChild(vditor.wysiwyg.element.parentElement);
47
+
48
+ contentElement.appendChild(vditor.sv.element);
49
+
50
+ contentElement.appendChild(vditor.ir.element.parentElement);
51
+
52
+ contentElement.appendChild(vditor.preview.element);
53
+
54
+ if (vditor.toolbar.elements.devtools) {
55
+ contentElement.appendChild(vditor.devtools.element);
56
+ }
57
+
58
+ if (vditor.options.outline.position === "right") {
59
+ vditor.outline.element.classList.add("vditor-outline--right");
60
+ contentElement.appendChild(vditor.outline.element);
61
+ }
62
+
63
+ if (vditor.upload) {
64
+ contentElement.appendChild(vditor.upload.element);
65
+ }
66
+
67
+ if (vditor.options.resize.enable) {
68
+ contentElement.appendChild(vditor.resize.element);
69
+ }
70
+
71
+ contentElement.appendChild(vditor.hint.element);
72
+
73
+ contentElement.appendChild(vditor.tip.element);
74
+
75
+ vditor.element.appendChild(contentElement);
76
+
77
+ contentElement.addEventListener("click", () => {
78
+ hidePanel(vditor, ["subToolbar"]);
79
+ });
80
+
81
+ if (vditor.toolbar.elements.export) {
82
+ // for export pdf
83
+ vditor.element.insertAdjacentHTML("beforeend",
84
+ '<iframe style="width: 100%;height: 0;border: 0"></iframe>');
85
+ }
86
+
87
+ setEditMode(vditor, vditor.options.mode, afterRender(vditor));
88
+
89
+ document.execCommand("DefaultParagraphSeparator", false, "p");
90
+
91
+ if (navigator.userAgent.indexOf("iPhone") > -1 && typeof window.visualViewport !== "undefined") {
92
+ // https://github.com/Vanessa219/vditor/issues/379
93
+ let pendingUpdate = false;
94
+ const viewportHandler = (event: Event) => {
95
+ if (pendingUpdate) {
96
+ return;
97
+ }
98
+ pendingUpdate = true;
99
+
100
+ requestAnimationFrame(() => {
101
+ pendingUpdate = false;
102
+ const layoutViewport = vditor.toolbar.element;
103
+ layoutViewport.style.transform = "none";
104
+ if (layoutViewport.getBoundingClientRect().top < 0) {
105
+ layoutViewport.style.transform = `translate(0, ${-layoutViewport.getBoundingClientRect().top}px)`;
106
+ }
107
+ });
108
+ };
109
+ window.visualViewport.addEventListener("scroll", viewportHandler);
110
+ window.visualViewport.addEventListener("resize", viewportHandler);
111
+ }
110
112
  };
111
113
 
112
114
  export const setPadding = (vditor: IVditor) => {
113
- const minPadding = window.innerWidth <= Constants.MOBILE_WIDTH ? 10 : 35;
114
- if (vditor.wysiwyg.element.parentElement.style.display !== "none") {
115
- const padding = (vditor.wysiwyg.element.parentElement.clientWidth
116
- - vditor.options.preview.maxWidth) / 2;
117
- vditor.wysiwyg.element.style.padding = `10px ${Math.max(minPadding, padding)}px`;
118
- }
119
-
120
- if (vditor.ir.element.parentElement.style.display !== "none") {
121
- const padding = (vditor.ir.element.parentElement.clientWidth
122
- - vditor.options.preview.maxWidth) / 2;
123
- vditor.ir.element.style.padding = `10px ${Math.max(minPadding, padding)}px`;
124
- }
125
-
126
- if (vditor.preview.element.style.display !== "block") {
127
- vditor.toolbar.element.style.paddingLeft = Math.max(5,
128
- parseInt(vditor[vditor.currentMode].element.style.paddingLeft || "0", 10) +
129
- (vditor.options.outline.position === "left" ? vditor.outline.element.offsetWidth : 0)) + "px";
130
- } else {
131
- vditor.toolbar.element.style.paddingLeft = (5 +
132
- (vditor.options.outline.position === "left" ? vditor.outline.element.offsetWidth : 0)) + "px";
133
- }
115
+ const minPadding = window.innerWidth <= Constants.MOBILE_WIDTH ? 10 : 35;
116
+ if (vditor.wysiwyg.element.parentElement.style.display !== "none") {
117
+ const padding = (vditor.wysiwyg.element.parentElement.clientWidth
118
+ - vditor.options.preview.maxWidth) / 2;
119
+ vditor.wysiwyg.element.style.padding = `10px ${Math.max(minPadding, padding)}px`;
120
+ }
121
+
122
+ if (vditor.ir.element.parentElement.style.display !== "none") {
123
+ const padding = (vditor.ir.element.parentElement.clientWidth
124
+ - vditor.options.preview.maxWidth) / 2;
125
+ vditor.ir.element.style.padding = `10px ${Math.max(minPadding, padding)}px`;
126
+ }
127
+
128
+ if (vditor.preview.element.style.display !== "block") {
129
+ vditor.toolbar.element.style.paddingLeft = Math.max(5,
130
+ parseInt(vditor[vditor.currentMode].element.style.paddingLeft || "0", 10) +
131
+ (vditor.options.outline.position === "left" ? vditor.outline.element.offsetWidth : 0)) + "px";
132
+ } else {
133
+ vditor.toolbar.element.style.paddingLeft = (5 +
134
+ (vditor.options.outline.position === "left" ? vditor.outline.element.offsetWidth : 0)) + "px";
135
+ }
134
136
  };
135
137
 
136
138
  export const setTypewriterPosition = (vditor: IVditor) => {
137
- if (!vditor.options.typewriterMode) {
138
- return;
139
- }
140
- let height: number = window.innerHeight;
141
- if (typeof vditor.options.height === "number") {
142
- height = vditor.options.height;
143
- if (typeof vditor.options.minHeight === "number") {
144
- height = Math.max(height, vditor.options.minHeight);
145
- }
146
- height = Math.min(window.innerHeight, height);
147
- }
148
- if (vditor.element.classList.contains("vditor--fullscreen")) {
149
- height = window.innerHeight;
150
- }
151
- // 由于 Firefox padding-bottom bug,只能使用 :after
152
- vditor[vditor.currentMode].element.style.setProperty("--editor-bottom",
153
- ((height - vditor.toolbar.element.offsetHeight) / 2) + "px");
139
+ if (!vditor.options.typewriterMode) {
140
+ return;
141
+ }
142
+ let height: number = window.innerHeight;
143
+ if (typeof vditor.options.height === "number") {
144
+ height = vditor.options.height;
145
+ if (typeof vditor.options.minHeight === "number") {
146
+ height = Math.max(height, vditor.options.minHeight);
147
+ }
148
+ height = Math.min(window.innerHeight, height);
149
+ } else {
150
+ height = vditor.element.clientHeight;
151
+ }
152
+ if (vditor.element.classList.contains("vditor--fullscreen")) {
153
+ height = window.innerHeight;
154
+ }
155
+ // 由于 Firefox padding-bottom bug,只能使用 :after
156
+ vditor[vditor.currentMode].element.style.setProperty("--editor-bottom",
157
+ ((height - vditor.toolbar.element.offsetHeight) / 2) + "px");
154
158
  };
155
159
 
156
160
  let resizeCb: () => void;
157
161
 
158
162
  export function UIUnbindListener() {
159
- window.removeEventListener("resize", resizeCb);
163
+ window.removeEventListener("resize", resizeCb);
160
164
  }
161
165
 
162
166
  const afterRender = (vditor: IVditor) => {
167
+ setTypewriterPosition(vditor);
168
+ UIUnbindListener();
169
+ window.addEventListener("resize", resizeCb = () => {
170
+ setPadding(vditor);
163
171
  setTypewriterPosition(vditor);
164
- UIUnbindListener();
165
- window.addEventListener("resize", resizeCb = () => {
166
- setPadding(vditor);
167
- setTypewriterPosition(vditor);
168
- });
169
-
170
- // set default value
171
- let initValue = accessLocalStorage() && localStorage.getItem(vditor.options.cache.id);
172
- if (!vditor.options.cache.enable || !initValue) {
173
- if (vditor.options.value) {
174
- initValue = vditor.options.value;
175
- } else if (vditor.originalInnerHTML) {
176
- initValue = vditor.lute.HTML2Md(vditor.originalInnerHTML);
177
- } else if (!vditor.options.cache.enable) {
178
- initValue = "";
179
- }
180
- }
181
- return initValue || "";
172
+ });
173
+
174
+ // set default value
175
+ let initValue = accessLocalStorage() && localStorage.getItem(vditor.options.cache.id);
176
+ if (!vditor.options.cache.enable || !initValue) {
177
+ if (vditor.options.value) {
178
+ initValue = vditor.options.value;
179
+ } else if (vditor.originalInnerHTML) {
180
+ initValue = vditor.lute.HTML2Md(vditor.originalInnerHTML);
181
+ } else if (!vditor.options.cache.enable) {
182
+ initValue = "";
183
+ }
184
+ }
185
+ return initValue || "";
182
186
  };
@@ -8,7 +8,7 @@ export const setContentTheme = (contentTheme: string, path: string) => {
8
8
  const cssPath = `${path}/${contentTheme}.css`;
9
9
  if (!vditorContentTheme) {
10
10
  addStyle(cssPath, "vditorContentTheme");
11
- } else if (vditorContentTheme.href !== cssPath) {
11
+ } else if (vditorContentTheme.getAttribute("href") !== cssPath) {
12
12
  vditorContentTheme.remove();
13
13
  addStyle(cssPath, "vditorContentTheme");
14
14
  }
@@ -155,6 +155,9 @@ const uploadFiles =
155
155
 
156
156
  if (vditor.options.upload.handler) {
157
157
  const isValidate = await vditor.options.upload.handler(fileList);
158
+ if (element) {
159
+ element.value = "";
160
+ }
158
161
  if (typeof isValidate === "string") {
159
162
  vditor.tip.show(isValidate);
160
163
  return;
@@ -99,11 +99,11 @@ export const scrollCenter = (vditor: IVditor) => {
99
99
  }
100
100
  const editorElement = vditor[vditor.currentMode].element;
101
101
  const cursorTop = getCursorPosition(editorElement).top;
102
- if (typeof vditor.options.height === "string" && !vditor.element.classList.contains("vditor--fullscreen")) {
102
+ if (vditor.options.height === "auto" && !vditor.element.classList.contains("vditor--fullscreen")) {
103
103
  window.scrollTo(window.scrollX,
104
104
  cursorTop + vditor.element.offsetTop + vditor.toolbar.element.offsetHeight - window.innerHeight / 2 + 10);
105
105
  }
106
- if (typeof vditor.options.height === "number" || vditor.element.classList.contains("vditor--fullscreen")) {
106
+ if (vditor.options.height !== "auto" || vditor.element.classList.contains("vditor--fullscreen")) {
107
107
  editorElement.scrollTop = cursorTop + editorElement.scrollTop - editorElement.clientHeight / 2 + 10;
108
108
  }
109
109
  };