@mdaemon/html-editor 1.0.8 → 1.0.10
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.
- package/README.md +1 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +37 -27
- package/dist/index.mjs +37 -27
- package/dist/styles.css +122 -52
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -524,7 +524,7 @@ const editor = new HTMLEditor(container, {
|
|
|
524
524
|
The confab skins expect the following CSS custom properties to be defined by the host application:
|
|
525
525
|
|
|
526
526
|
| Variable | Purpose |
|
|
527
|
-
|
|
527
|
+
|----------|---------|
|
|
528
528
|
| `--theme-primary` | Primary brand color (buttons, active states) |
|
|
529
529
|
| `--theme-primary-hover` | Hover state for primary color |
|
|
530
530
|
| `--color-confab-gray-50` to `--color-confab-gray-900` | Gray scale for backgrounds, text, borders |
|
package/dist/index.d.ts
CHANGED
|
@@ -480,13 +480,15 @@ export declare class Toolbar {
|
|
|
480
480
|
private updateInterval;
|
|
481
481
|
private boundClickHandler;
|
|
482
482
|
private boundKeydownHandler;
|
|
483
|
-
private
|
|
483
|
+
private buttonsEl;
|
|
484
484
|
private toggleBtn;
|
|
485
|
+
private resizeObserver;
|
|
485
486
|
constructor(container: HTMLElement, options: ToolbarOptions);
|
|
486
487
|
private get tiptap();
|
|
487
488
|
private get trans();
|
|
488
489
|
private icon;
|
|
489
490
|
private render;
|
|
491
|
+
private observeOverflow;
|
|
490
492
|
private renderGroups;
|
|
491
493
|
private createToggleButton;
|
|
492
494
|
private toggleOverflow;
|
package/dist/index.js
CHANGED
|
@@ -42797,8 +42797,9 @@ class Toolbar {
|
|
|
42797
42797
|
updateInterval = null;
|
|
42798
42798
|
boundClickHandler = null;
|
|
42799
42799
|
boundKeydownHandler = null;
|
|
42800
|
-
|
|
42800
|
+
buttonsEl = null;
|
|
42801
42801
|
toggleBtn = null;
|
|
42802
|
+
resizeObserver = null;
|
|
42802
42803
|
constructor(container, options) {
|
|
42803
42804
|
this.container = container;
|
|
42804
42805
|
this.options = options;
|
|
@@ -42822,27 +42823,29 @@ class Toolbar {
|
|
|
42822
42823
|
render() {
|
|
42823
42824
|
this.container.innerHTML = "";
|
|
42824
42825
|
this.container.className = `md-toolbar md-toolbar-${this.options.mode}${this.options.sticky ? " md-toolbar-sticky" : ""}`;
|
|
42825
|
-
|
|
42826
|
-
|
|
42827
|
-
|
|
42828
|
-
|
|
42829
|
-
|
|
42830
|
-
|
|
42831
|
-
|
|
42832
|
-
|
|
42833
|
-
this.
|
|
42834
|
-
this.
|
|
42835
|
-
|
|
42836
|
-
|
|
42837
|
-
|
|
42838
|
-
|
|
42839
|
-
|
|
42840
|
-
|
|
42841
|
-
|
|
42842
|
-
|
|
42843
|
-
|
|
42844
|
-
this.
|
|
42845
|
-
|
|
42826
|
+
this.buttonsEl = document.createElement("div");
|
|
42827
|
+
this.buttonsEl.className = "md-toolbar-buttons";
|
|
42828
|
+
const buttonsStr = this.options.buttons.replace(/\|\|/g, "|");
|
|
42829
|
+
this.renderGroups(buttonsStr, this.buttonsEl);
|
|
42830
|
+
this.container.appendChild(this.buttonsEl);
|
|
42831
|
+
this.toggleBtn = this.createToggleButton();
|
|
42832
|
+
this.container.appendChild(this.toggleBtn);
|
|
42833
|
+
if (this.state.showMoreButtons) {
|
|
42834
|
+
this.buttonsEl.classList.add("md-toolbar-expanded");
|
|
42835
|
+
this.toggleBtn.classList.add("md-toolbar-btn-active");
|
|
42836
|
+
}
|
|
42837
|
+
this.observeOverflow();
|
|
42838
|
+
}
|
|
42839
|
+
observeOverflow() {
|
|
42840
|
+
if (this.resizeObserver) {
|
|
42841
|
+
this.resizeObserver.disconnect();
|
|
42842
|
+
}
|
|
42843
|
+
this.resizeObserver = new ResizeObserver(() => {
|
|
42844
|
+
if (!this.buttonsEl || !this.toggleBtn) return;
|
|
42845
|
+
const hasOverflow = this.buttonsEl.scrollHeight > this.buttonsEl.clientHeight;
|
|
42846
|
+
this.toggleBtn.style.display = hasOverflow || this.state.showMoreButtons ? "" : "none";
|
|
42847
|
+
});
|
|
42848
|
+
this.resizeObserver.observe(this.buttonsEl);
|
|
42846
42849
|
}
|
|
42847
42850
|
renderGroups(buttonsStr, parent) {
|
|
42848
42851
|
const groups = buttonsStr.split("|").map((g) => g.trim()).filter(Boolean);
|
|
@@ -42880,11 +42883,14 @@ class Toolbar {
|
|
|
42880
42883
|
}
|
|
42881
42884
|
toggleOverflow() {
|
|
42882
42885
|
this.state.showMoreButtons = !this.state.showMoreButtons;
|
|
42883
|
-
if (this.
|
|
42884
|
-
this.
|
|
42886
|
+
if (this.buttonsEl) {
|
|
42887
|
+
this.buttonsEl.classList.toggle("md-toolbar-expanded", this.state.showMoreButtons);
|
|
42885
42888
|
}
|
|
42886
42889
|
if (this.toggleBtn) {
|
|
42887
42890
|
this.toggleBtn.classList.toggle("md-toolbar-btn-active", this.state.showMoreButtons);
|
|
42891
|
+
if (this.state.showMoreButtons) {
|
|
42892
|
+
this.toggleBtn.style.display = "";
|
|
42893
|
+
}
|
|
42888
42894
|
}
|
|
42889
42895
|
}
|
|
42890
42896
|
createButton(name) {
|
|
@@ -43486,7 +43492,7 @@ class Toolbar {
|
|
|
43486
43492
|
this.searchReplace = null;
|
|
43487
43493
|
this.buttonElements.clear();
|
|
43488
43494
|
this.dropdowns.clear();
|
|
43489
|
-
this.
|
|
43495
|
+
this.buttonsEl = null;
|
|
43490
43496
|
this.toggleBtn = null;
|
|
43491
43497
|
this.render();
|
|
43492
43498
|
this.bindEvents();
|
|
@@ -43495,6 +43501,10 @@ class Toolbar {
|
|
|
43495
43501
|
if (this.updateInterval) {
|
|
43496
43502
|
clearInterval(this.updateInterval);
|
|
43497
43503
|
}
|
|
43504
|
+
if (this.resizeObserver) {
|
|
43505
|
+
this.resizeObserver.disconnect();
|
|
43506
|
+
this.resizeObserver = null;
|
|
43507
|
+
}
|
|
43498
43508
|
this.unbindEvents();
|
|
43499
43509
|
this.charMap?.destroy();
|
|
43500
43510
|
this.emojiPicker?.destroy();
|
|
@@ -46004,8 +46014,8 @@ const availableLocales = Object.keys(locales);
|
|
|
46004
46014
|
const TRANSLATION_KEYS = Object.keys(en);
|
|
46005
46015
|
const lowlight = createLowlight(grammars);
|
|
46006
46016
|
const fontNames = "Andale Mono=andale mono,times; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Book Antiqua=book antiqua,palatino; Comic Sans MS=comic sans ms,sans-serif; Courier New=courier new,courier; Georgia=georgia,palatino; Helvetica=helvetica; Impact=impact,chicago; Tahoma=tahoma,arial,helvetica,sans-serif; Terminal=terminal,monaco; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva";
|
|
46007
|
-
const FULL_TOOLBAR = "bold italic underline strikethrough | bullist numlist outdent indent blockquote | fontfamily fontsize
|
|
46008
|
-
const BASIC_TOOLBAR = "bold italic underline strikethrough | bullist numlist outdent indent | fontfamily fontsize blockquote
|
|
46017
|
+
const FULL_TOOLBAR = "bold italic underline strikethrough | bullist numlist outdent indent blockquote | fontfamily fontsize | lineheight alignleft aligncenter alignright alignjustify | forecolor backcolor | removeformat copy cut paste | undo redo | image charmap emoticons | fullscreen preview | code link codesample | ltr rtl | searchreplace";
|
|
46018
|
+
const BASIC_TOOLBAR = "bold italic underline strikethrough | bullist numlist outdent indent | fontfamily fontsize blockquote | lineheight alignleft aligncenter alignright alignjustify | forecolor backcolor | removeformat copy cut paste | undo redo | charmap emoticons | link | ltr rtl | searchreplace";
|
|
46009
46019
|
const DEFAULT_FONT_SIZES = "8pt 9pt 10pt 12pt 14pt 18pt 24pt 36pt";
|
|
46010
46020
|
let editorIdCounter = 0;
|
|
46011
46021
|
let globalTranslate = (key) => key;
|
package/dist/index.mjs
CHANGED
|
@@ -42795,8 +42795,9 @@ class Toolbar {
|
|
|
42795
42795
|
updateInterval = null;
|
|
42796
42796
|
boundClickHandler = null;
|
|
42797
42797
|
boundKeydownHandler = null;
|
|
42798
|
-
|
|
42798
|
+
buttonsEl = null;
|
|
42799
42799
|
toggleBtn = null;
|
|
42800
|
+
resizeObserver = null;
|
|
42800
42801
|
constructor(container, options) {
|
|
42801
42802
|
this.container = container;
|
|
42802
42803
|
this.options = options;
|
|
@@ -42820,27 +42821,29 @@ class Toolbar {
|
|
|
42820
42821
|
render() {
|
|
42821
42822
|
this.container.innerHTML = "";
|
|
42822
42823
|
this.container.className = `md-toolbar md-toolbar-${this.options.mode}${this.options.sticky ? " md-toolbar-sticky" : ""}`;
|
|
42823
|
-
|
|
42824
|
-
|
|
42825
|
-
|
|
42826
|
-
|
|
42827
|
-
|
|
42828
|
-
|
|
42829
|
-
|
|
42830
|
-
|
|
42831
|
-
this.
|
|
42832
|
-
this.
|
|
42833
|
-
|
|
42834
|
-
|
|
42835
|
-
|
|
42836
|
-
|
|
42837
|
-
|
|
42838
|
-
|
|
42839
|
-
|
|
42840
|
-
|
|
42841
|
-
|
|
42842
|
-
this.
|
|
42843
|
-
|
|
42824
|
+
this.buttonsEl = document.createElement("div");
|
|
42825
|
+
this.buttonsEl.className = "md-toolbar-buttons";
|
|
42826
|
+
const buttonsStr = this.options.buttons.replace(/\|\|/g, "|");
|
|
42827
|
+
this.renderGroups(buttonsStr, this.buttonsEl);
|
|
42828
|
+
this.container.appendChild(this.buttonsEl);
|
|
42829
|
+
this.toggleBtn = this.createToggleButton();
|
|
42830
|
+
this.container.appendChild(this.toggleBtn);
|
|
42831
|
+
if (this.state.showMoreButtons) {
|
|
42832
|
+
this.buttonsEl.classList.add("md-toolbar-expanded");
|
|
42833
|
+
this.toggleBtn.classList.add("md-toolbar-btn-active");
|
|
42834
|
+
}
|
|
42835
|
+
this.observeOverflow();
|
|
42836
|
+
}
|
|
42837
|
+
observeOverflow() {
|
|
42838
|
+
if (this.resizeObserver) {
|
|
42839
|
+
this.resizeObserver.disconnect();
|
|
42840
|
+
}
|
|
42841
|
+
this.resizeObserver = new ResizeObserver(() => {
|
|
42842
|
+
if (!this.buttonsEl || !this.toggleBtn) return;
|
|
42843
|
+
const hasOverflow = this.buttonsEl.scrollHeight > this.buttonsEl.clientHeight;
|
|
42844
|
+
this.toggleBtn.style.display = hasOverflow || this.state.showMoreButtons ? "" : "none";
|
|
42845
|
+
});
|
|
42846
|
+
this.resizeObserver.observe(this.buttonsEl);
|
|
42844
42847
|
}
|
|
42845
42848
|
renderGroups(buttonsStr, parent) {
|
|
42846
42849
|
const groups = buttonsStr.split("|").map((g) => g.trim()).filter(Boolean);
|
|
@@ -42878,11 +42881,14 @@ class Toolbar {
|
|
|
42878
42881
|
}
|
|
42879
42882
|
toggleOverflow() {
|
|
42880
42883
|
this.state.showMoreButtons = !this.state.showMoreButtons;
|
|
42881
|
-
if (this.
|
|
42882
|
-
this.
|
|
42884
|
+
if (this.buttonsEl) {
|
|
42885
|
+
this.buttonsEl.classList.toggle("md-toolbar-expanded", this.state.showMoreButtons);
|
|
42883
42886
|
}
|
|
42884
42887
|
if (this.toggleBtn) {
|
|
42885
42888
|
this.toggleBtn.classList.toggle("md-toolbar-btn-active", this.state.showMoreButtons);
|
|
42889
|
+
if (this.state.showMoreButtons) {
|
|
42890
|
+
this.toggleBtn.style.display = "";
|
|
42891
|
+
}
|
|
42886
42892
|
}
|
|
42887
42893
|
}
|
|
42888
42894
|
createButton(name) {
|
|
@@ -43484,7 +43490,7 @@ class Toolbar {
|
|
|
43484
43490
|
this.searchReplace = null;
|
|
43485
43491
|
this.buttonElements.clear();
|
|
43486
43492
|
this.dropdowns.clear();
|
|
43487
|
-
this.
|
|
43493
|
+
this.buttonsEl = null;
|
|
43488
43494
|
this.toggleBtn = null;
|
|
43489
43495
|
this.render();
|
|
43490
43496
|
this.bindEvents();
|
|
@@ -43493,6 +43499,10 @@ class Toolbar {
|
|
|
43493
43499
|
if (this.updateInterval) {
|
|
43494
43500
|
clearInterval(this.updateInterval);
|
|
43495
43501
|
}
|
|
43502
|
+
if (this.resizeObserver) {
|
|
43503
|
+
this.resizeObserver.disconnect();
|
|
43504
|
+
this.resizeObserver = null;
|
|
43505
|
+
}
|
|
43496
43506
|
this.unbindEvents();
|
|
43497
43507
|
this.charMap?.destroy();
|
|
43498
43508
|
this.emojiPicker?.destroy();
|
|
@@ -46002,8 +46012,8 @@ const availableLocales = Object.keys(locales);
|
|
|
46002
46012
|
const TRANSLATION_KEYS = Object.keys(en);
|
|
46003
46013
|
const lowlight = createLowlight(grammars);
|
|
46004
46014
|
const fontNames = "Andale Mono=andale mono,times; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Book Antiqua=book antiqua,palatino; Comic Sans MS=comic sans ms,sans-serif; Courier New=courier new,courier; Georgia=georgia,palatino; Helvetica=helvetica; Impact=impact,chicago; Tahoma=tahoma,arial,helvetica,sans-serif; Terminal=terminal,monaco; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva";
|
|
46005
|
-
const FULL_TOOLBAR = "bold italic underline strikethrough | bullist numlist outdent indent blockquote | fontfamily fontsize
|
|
46006
|
-
const BASIC_TOOLBAR = "bold italic underline strikethrough | bullist numlist outdent indent | fontfamily fontsize blockquote
|
|
46015
|
+
const FULL_TOOLBAR = "bold italic underline strikethrough | bullist numlist outdent indent blockquote | fontfamily fontsize | lineheight alignleft aligncenter alignright alignjustify | forecolor backcolor | removeformat copy cut paste | undo redo | image charmap emoticons | fullscreen preview | code link codesample | ltr rtl | searchreplace";
|
|
46016
|
+
const BASIC_TOOLBAR = "bold italic underline strikethrough | bullist numlist outdent indent | fontfamily fontsize blockquote | lineheight alignleft aligncenter alignright alignjustify | forecolor backcolor | removeformat copy cut paste | undo redo | charmap emoticons | link | ltr rtl | searchreplace";
|
|
46007
46017
|
const DEFAULT_FONT_SIZES = "8pt 9pt 10pt 12pt 14pt 18pt 24pt 36pt";
|
|
46008
46018
|
let editorIdCounter = 0;
|
|
46009
46019
|
let globalTranslate = (key) => key;
|
package/dist/styles.css
CHANGED
|
@@ -13,6 +13,25 @@
|
|
|
13
13
|
position: relative;
|
|
14
14
|
overflow: hidden;
|
|
15
15
|
}
|
|
16
|
+
.md-editor *,
|
|
17
|
+
.md-editor *::before,
|
|
18
|
+
.md-editor *::after {
|
|
19
|
+
box-sizing: border-box;
|
|
20
|
+
}
|
|
21
|
+
.md-editor button {
|
|
22
|
+
appearance: none;
|
|
23
|
+
font: inherit;
|
|
24
|
+
color: inherit;
|
|
25
|
+
background: transparent;
|
|
26
|
+
border: none;
|
|
27
|
+
padding: 0;
|
|
28
|
+
margin: 0;
|
|
29
|
+
cursor: pointer;
|
|
30
|
+
}
|
|
31
|
+
.md-editor input, .md-editor select, .md-editor textarea {
|
|
32
|
+
font: inherit;
|
|
33
|
+
color: inherit;
|
|
34
|
+
}
|
|
16
35
|
.md-editor.md-editor-fullscreen {
|
|
17
36
|
position: fixed;
|
|
18
37
|
top: 0;
|
|
@@ -26,8 +45,7 @@
|
|
|
26
45
|
|
|
27
46
|
.md-toolbar {
|
|
28
47
|
display: flex;
|
|
29
|
-
|
|
30
|
-
align-items: center;
|
|
48
|
+
align-items: flex-start;
|
|
31
49
|
padding: 4px;
|
|
32
50
|
background: #f0f0f0;
|
|
33
51
|
border-bottom: 1px solid #ccc;
|
|
@@ -39,9 +57,6 @@
|
|
|
39
57
|
top: 0;
|
|
40
58
|
z-index: 10;
|
|
41
59
|
}
|
|
42
|
-
.md-toolbar.md-toolbar-sliding {
|
|
43
|
-
flex-wrap: wrap;
|
|
44
|
-
}
|
|
45
60
|
|
|
46
61
|
.md-toolbar-group {
|
|
47
62
|
display: flex;
|
|
@@ -56,28 +71,24 @@
|
|
|
56
71
|
margin: 0 4px;
|
|
57
72
|
}
|
|
58
73
|
|
|
59
|
-
.md-toolbar-
|
|
74
|
+
.md-toolbar-buttons {
|
|
60
75
|
display: flex;
|
|
61
76
|
flex-wrap: wrap;
|
|
62
77
|
align-items: center;
|
|
63
78
|
gap: 2px;
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
flex-wrap: wrap;
|
|
70
|
-
align-items: center;
|
|
71
|
-
gap: 2px;
|
|
72
|
-
width: 100%;
|
|
79
|
+
flex: 1;
|
|
80
|
+
min-width: 0;
|
|
81
|
+
max-height: 31px;
|
|
82
|
+
overflow: hidden;
|
|
83
|
+
transition: max-height 0.2s ease;
|
|
73
84
|
}
|
|
74
|
-
.md-toolbar-
|
|
75
|
-
|
|
85
|
+
.md-toolbar-buttons.md-toolbar-expanded {
|
|
86
|
+
max-height: none;
|
|
76
87
|
}
|
|
77
88
|
|
|
78
89
|
.md-toolbar-toggle-btn {
|
|
79
|
-
margin-left: auto;
|
|
80
90
|
flex-shrink: 0;
|
|
91
|
+
align-self: flex-start;
|
|
81
92
|
}
|
|
82
93
|
|
|
83
94
|
.md-toolbar-btn {
|
|
@@ -102,7 +113,7 @@
|
|
|
102
113
|
background: #d0d0d0;
|
|
103
114
|
}
|
|
104
115
|
.md-toolbar-btn.md-toolbar-btn-active {
|
|
105
|
-
background: #
|
|
116
|
+
background: #2271b2;
|
|
106
117
|
color: #fff;
|
|
107
118
|
}
|
|
108
119
|
.md-toolbar-btn:disabled {
|
|
@@ -197,7 +208,7 @@
|
|
|
197
208
|
background: #f0f0f0;
|
|
198
209
|
}
|
|
199
210
|
.md-toolbar-dropdown-item.md-toolbar-dropdown-item-selected {
|
|
200
|
-
background: #
|
|
211
|
+
background: #2271b2;
|
|
201
212
|
color: #fff;
|
|
202
213
|
}
|
|
203
214
|
|
|
@@ -286,13 +297,13 @@
|
|
|
286
297
|
padding: 4px 12px;
|
|
287
298
|
border: none;
|
|
288
299
|
border-radius: 3px;
|
|
289
|
-
background: #
|
|
300
|
+
background: #2271b2;
|
|
290
301
|
color: #fff;
|
|
291
302
|
cursor: pointer;
|
|
292
303
|
font-size: 12px;
|
|
293
304
|
}
|
|
294
305
|
.md-toolbar-colorpicker-apply:hover {
|
|
295
|
-
background: #
|
|
306
|
+
background: #2761c4;
|
|
296
307
|
}
|
|
297
308
|
|
|
298
309
|
.md-editor-content {
|
|
@@ -314,16 +325,74 @@
|
|
|
314
325
|
margin: 0 0 0.5em;
|
|
315
326
|
font-weight: bold;
|
|
316
327
|
}
|
|
328
|
+
.md-editor-body h1 {
|
|
329
|
+
font-size: 2em;
|
|
330
|
+
}
|
|
331
|
+
.md-editor-body h2 {
|
|
332
|
+
font-size: 1.5em;
|
|
333
|
+
}
|
|
334
|
+
.md-editor-body h3 {
|
|
335
|
+
font-size: 1.17em;
|
|
336
|
+
}
|
|
337
|
+
.md-editor-body h4 {
|
|
338
|
+
font-size: 1em;
|
|
339
|
+
}
|
|
340
|
+
.md-editor-body h5 {
|
|
341
|
+
font-size: 0.83em;
|
|
342
|
+
}
|
|
343
|
+
.md-editor-body h6 {
|
|
344
|
+
font-size: 0.67em;
|
|
345
|
+
}
|
|
317
346
|
.md-editor-body ul, .md-editor-body ol {
|
|
318
347
|
margin: 0 0 1em;
|
|
319
348
|
padding-left: 2em;
|
|
320
349
|
}
|
|
350
|
+
.md-editor-body ul {
|
|
351
|
+
list-style-type: disc;
|
|
352
|
+
}
|
|
353
|
+
.md-editor-body ol {
|
|
354
|
+
list-style-type: decimal;
|
|
355
|
+
}
|
|
356
|
+
.md-editor-body ul ul {
|
|
357
|
+
list-style-type: circle;
|
|
358
|
+
}
|
|
359
|
+
.md-editor-body ul ul ul {
|
|
360
|
+
list-style-type: square;
|
|
361
|
+
}
|
|
362
|
+
.md-editor-body ol ol {
|
|
363
|
+
list-style-type: lower-alpha;
|
|
364
|
+
}
|
|
365
|
+
.md-editor-body ol ol ol {
|
|
366
|
+
list-style-type: lower-roman;
|
|
367
|
+
}
|
|
321
368
|
.md-editor-body blockquote {
|
|
322
369
|
margin: 0 0 1em;
|
|
323
370
|
padding-left: 1em;
|
|
324
371
|
border-left: 3px solid #ccc;
|
|
325
372
|
color: #666;
|
|
326
373
|
}
|
|
374
|
+
.md-editor-body hr {
|
|
375
|
+
border: none;
|
|
376
|
+
border-top: 1px solid #ccc;
|
|
377
|
+
margin: 1em 0;
|
|
378
|
+
}
|
|
379
|
+
.md-editor-body b, .md-editor-body strong {
|
|
380
|
+
font-weight: bold;
|
|
381
|
+
}
|
|
382
|
+
.md-editor-body i, .md-editor-body em {
|
|
383
|
+
font-style: italic;
|
|
384
|
+
}
|
|
385
|
+
.md-editor-body small {
|
|
386
|
+
font-size: 80%;
|
|
387
|
+
}
|
|
388
|
+
.md-editor-body sub {
|
|
389
|
+
vertical-align: sub;
|
|
390
|
+
font-size: smaller;
|
|
391
|
+
}
|
|
392
|
+
.md-editor-body sup {
|
|
393
|
+
vertical-align: super;
|
|
394
|
+
font-size: smaller;
|
|
395
|
+
}
|
|
327
396
|
.md-editor-body pre {
|
|
328
397
|
background: #f5f5f5;
|
|
329
398
|
padding: 12px;
|
|
@@ -340,12 +409,13 @@
|
|
|
340
409
|
font-size: 13px;
|
|
341
410
|
}
|
|
342
411
|
.md-editor-body a {
|
|
343
|
-
color: #
|
|
412
|
+
color: #2271b2;
|
|
344
413
|
text-decoration: underline;
|
|
345
414
|
}
|
|
346
415
|
.md-editor-body img {
|
|
347
416
|
max-width: 100%;
|
|
348
417
|
height: auto;
|
|
418
|
+
display: inline-block;
|
|
349
419
|
}
|
|
350
420
|
.md-editor-body table {
|
|
351
421
|
border-collapse: collapse;
|
|
@@ -452,9 +522,9 @@
|
|
|
452
522
|
background: #f0f0f0;
|
|
453
523
|
}
|
|
454
524
|
.md-charmap-tab.md-charmap-tab-active {
|
|
455
|
-
background: #
|
|
525
|
+
background: #2271b2;
|
|
456
526
|
color: #fff;
|
|
457
|
-
border-color: #
|
|
527
|
+
border-color: #2271b2;
|
|
458
528
|
}
|
|
459
529
|
|
|
460
530
|
.md-charmap-grid {
|
|
@@ -477,7 +547,7 @@
|
|
|
477
547
|
}
|
|
478
548
|
.md-charmap-char:hover {
|
|
479
549
|
background: #f0f0f0;
|
|
480
|
-
border-color: #
|
|
550
|
+
border-color: #2271b2;
|
|
481
551
|
}
|
|
482
552
|
|
|
483
553
|
.md-charmap-preview {
|
|
@@ -527,8 +597,8 @@
|
|
|
527
597
|
background: #f0f0f0;
|
|
528
598
|
}
|
|
529
599
|
.md-emoji-tab.md-emoji-tab-active {
|
|
530
|
-
border-color: #
|
|
531
|
-
background: rgba(
|
|
600
|
+
border-color: #2271b2;
|
|
601
|
+
background: rgba(34, 113, 178, 0.1);
|
|
532
602
|
}
|
|
533
603
|
|
|
534
604
|
.md-emoji-search {
|
|
@@ -544,7 +614,7 @@
|
|
|
544
614
|
}
|
|
545
615
|
.md-emoji-search-input:focus {
|
|
546
616
|
outline: none;
|
|
547
|
-
border-color: #
|
|
617
|
+
border-color: #2271b2;
|
|
548
618
|
}
|
|
549
619
|
|
|
550
620
|
.md-emoji-grid {
|
|
@@ -599,7 +669,7 @@
|
|
|
599
669
|
}
|
|
600
670
|
.md-searchreplace-input:focus {
|
|
601
671
|
outline: none;
|
|
602
|
-
border-color: #
|
|
672
|
+
border-color: #2271b2;
|
|
603
673
|
}
|
|
604
674
|
|
|
605
675
|
.md-searchreplace-count {
|
|
@@ -643,12 +713,12 @@
|
|
|
643
713
|
background: #f0f0f0;
|
|
644
714
|
}
|
|
645
715
|
.md-btn.md-btn-primary {
|
|
646
|
-
background: #
|
|
647
|
-
border-color: #
|
|
716
|
+
background: #2271b2;
|
|
717
|
+
border-color: #2271b2;
|
|
648
718
|
color: #fff;
|
|
649
719
|
}
|
|
650
720
|
.md-btn.md-btn-primary:hover {
|
|
651
|
-
background: #
|
|
721
|
+
background: #2761c4;
|
|
652
722
|
}
|
|
653
723
|
|
|
654
724
|
.md-image-upload-dialog {
|
|
@@ -675,9 +745,9 @@
|
|
|
675
745
|
background: #f0f0f0;
|
|
676
746
|
}
|
|
677
747
|
.md-image-upload-tab.md-image-upload-tab-active {
|
|
678
|
-
background: #
|
|
748
|
+
background: #2271b2;
|
|
679
749
|
color: #fff;
|
|
680
|
-
border-color: #
|
|
750
|
+
border-color: #2271b2;
|
|
681
751
|
}
|
|
682
752
|
|
|
683
753
|
.md-image-upload-dropzone {
|
|
@@ -694,12 +764,12 @@
|
|
|
694
764
|
text-align: center;
|
|
695
765
|
}
|
|
696
766
|
.md-image-upload-dropzone:hover {
|
|
697
|
-
border-color: #
|
|
698
|
-
background: rgba(
|
|
767
|
+
border-color: #2271b2;
|
|
768
|
+
background: rgba(34, 113, 178, 0.03);
|
|
699
769
|
}
|
|
700
770
|
.md-image-upload-dropzone.md-image-upload-dropzone-active {
|
|
701
|
-
border-color: #
|
|
702
|
-
background: rgba(
|
|
771
|
+
border-color: #2271b2;
|
|
772
|
+
background: rgba(34, 113, 178, 0.08);
|
|
703
773
|
}
|
|
704
774
|
|
|
705
775
|
.md-image-upload-dropzone-icon {
|
|
@@ -736,7 +806,7 @@
|
|
|
736
806
|
}
|
|
737
807
|
.md-image-upload-row input:focus {
|
|
738
808
|
outline: none;
|
|
739
|
-
border-color: #
|
|
809
|
+
border-color: #2271b2;
|
|
740
810
|
}
|
|
741
811
|
|
|
742
812
|
.md-image-upload-preview {
|
|
@@ -781,7 +851,7 @@
|
|
|
781
851
|
.md-image-upload-progress-fill {
|
|
782
852
|
height: 100%;
|
|
783
853
|
width: 0%;
|
|
784
|
-
background: #
|
|
854
|
+
background: #2271b2;
|
|
785
855
|
border-radius: 4px;
|
|
786
856
|
transition: width 0.2s;
|
|
787
857
|
}
|
|
@@ -821,7 +891,7 @@
|
|
|
821
891
|
}
|
|
822
892
|
.md-source-editor-textarea:focus {
|
|
823
893
|
outline: none;
|
|
824
|
-
border-color: #
|
|
894
|
+
border-color: #2271b2;
|
|
825
895
|
}
|
|
826
896
|
|
|
827
897
|
.md-source-editor-footer {
|
|
@@ -859,7 +929,7 @@
|
|
|
859
929
|
.md-link-editor-input:focus,
|
|
860
930
|
.md-link-editor-select:focus {
|
|
861
931
|
outline: none;
|
|
862
|
-
border-color: #
|
|
932
|
+
border-color: #2271b2;
|
|
863
933
|
}
|
|
864
934
|
|
|
865
935
|
.md-link-editor-select {
|
|
@@ -874,7 +944,7 @@
|
|
|
874
944
|
}
|
|
875
945
|
|
|
876
946
|
.md-editor-dragover .md-editor-content {
|
|
877
|
-
box-shadow: 0 0 10px 1px rgba(
|
|
947
|
+
box-shadow: 0 0 10px 1px rgba(34, 113, 178, 0.5) inset;
|
|
878
948
|
}
|
|
879
949
|
|
|
880
950
|
.md-editor-oxide-dark {
|
|
@@ -892,7 +962,7 @@
|
|
|
892
962
|
background: #2d3e50;
|
|
893
963
|
}
|
|
894
964
|
.md-editor-oxide-dark .md-toolbar-btn.md-toolbar-btn-active {
|
|
895
|
-
background: #
|
|
965
|
+
background: #2271b2;
|
|
896
966
|
}
|
|
897
967
|
.md-editor-oxide-dark .md-toolbar-dropdown-btn {
|
|
898
968
|
color: #fff;
|
|
@@ -946,8 +1016,8 @@
|
|
|
946
1016
|
border-color: #364049;
|
|
947
1017
|
}
|
|
948
1018
|
.md-editor-oxide-dark .md-image-upload-dropzone:hover, .md-editor-oxide-dark .md-image-upload-dropzone.md-image-upload-dropzone-active {
|
|
949
|
-
border-color: #
|
|
950
|
-
background: rgba(
|
|
1019
|
+
border-color: #2271b2;
|
|
1020
|
+
background: rgba(34, 113, 178, 0.1);
|
|
951
1021
|
}
|
|
952
1022
|
.md-editor-oxide-dark .md-image-upload-dropzone-icon {
|
|
953
1023
|
color: #666;
|
|
@@ -992,12 +1062,12 @@
|
|
|
992
1062
|
background: #2d3e50;
|
|
993
1063
|
}
|
|
994
1064
|
.md-editor-oxide-dark .md-btn.md-btn-primary {
|
|
995
|
-
background: #
|
|
996
|
-
border-color: #
|
|
1065
|
+
background: #2271b2;
|
|
1066
|
+
border-color: #2271b2;
|
|
997
1067
|
color: #fff;
|
|
998
1068
|
}
|
|
999
1069
|
.md-editor-oxide-dark .md-btn.md-btn-primary:hover {
|
|
1000
|
-
background: #
|
|
1070
|
+
background: #2761c4;
|
|
1001
1071
|
}
|
|
1002
1072
|
.md-editor-oxide-dark .md-source-editor-textarea {
|
|
1003
1073
|
background: #1a252f;
|
|
@@ -1005,7 +1075,7 @@
|
|
|
1005
1075
|
color: #fff;
|
|
1006
1076
|
}
|
|
1007
1077
|
.md-editor-oxide-dark .md-source-editor-textarea:focus {
|
|
1008
|
-
border-color: #
|
|
1078
|
+
border-color: #2271b2;
|
|
1009
1079
|
}
|
|
1010
1080
|
.md-editor-oxide-dark .md-link-editor-input,
|
|
1011
1081
|
.md-editor-oxide-dark .md-link-editor-select {
|
|
@@ -1015,7 +1085,7 @@
|
|
|
1015
1085
|
}
|
|
1016
1086
|
.md-editor-oxide-dark .md-link-editor-input:focus,
|
|
1017
1087
|
.md-editor-oxide-dark .md-link-editor-select:focus {
|
|
1018
|
-
border-color: #
|
|
1088
|
+
border-color: #2271b2;
|
|
1019
1089
|
}
|
|
1020
1090
|
.md-editor-oxide-dark .md-link-editor-row label {
|
|
1021
1091
|
color: #aaa;
|