@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 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 overflowEl;
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
- overflowEl = null;
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
- const rows = this.options.buttons.split("||");
42826
- const hasOverflow = rows.length > 1;
42827
- if (hasOverflow) {
42828
- const primaryEl = document.createElement("div");
42829
- primaryEl.className = "md-toolbar-primary";
42830
- this.renderGroups(rows[0].trim(), primaryEl);
42831
- this.toggleBtn = this.createToggleButton();
42832
- primaryEl.appendChild(this.toggleBtn);
42833
- this.container.appendChild(primaryEl);
42834
- this.overflowEl = document.createElement("div");
42835
- this.overflowEl.className = "md-toolbar-overflow";
42836
- const overflowStr = rows.slice(1).join("||").trim();
42837
- this.renderGroups(overflowStr, this.overflowEl);
42838
- this.container.appendChild(this.overflowEl);
42839
- if (this.state.showMoreButtons) {
42840
- this.overflowEl.classList.add("md-toolbar-overflow-visible");
42841
- this.toggleBtn.classList.add("md-toolbar-btn-active");
42842
- }
42843
- } else {
42844
- this.renderGroups(this.options.buttons, this.container);
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.overflowEl) {
42884
- this.overflowEl.classList.toggle("md-toolbar-overflow-visible", this.state.showMoreButtons);
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.overflowEl = null;
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 || lineheight alignleft aligncenter alignright alignjustify | forecolor backcolor | removeformat copy cut paste | undo redo | image charmap emoticons | fullscreen preview | code link codesample | ltr rtl | searchreplace";
46008
- 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";
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
- overflowEl = null;
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
- const rows = this.options.buttons.split("||");
42824
- const hasOverflow = rows.length > 1;
42825
- if (hasOverflow) {
42826
- const primaryEl = document.createElement("div");
42827
- primaryEl.className = "md-toolbar-primary";
42828
- this.renderGroups(rows[0].trim(), primaryEl);
42829
- this.toggleBtn = this.createToggleButton();
42830
- primaryEl.appendChild(this.toggleBtn);
42831
- this.container.appendChild(primaryEl);
42832
- this.overflowEl = document.createElement("div");
42833
- this.overflowEl.className = "md-toolbar-overflow";
42834
- const overflowStr = rows.slice(1).join("||").trim();
42835
- this.renderGroups(overflowStr, this.overflowEl);
42836
- this.container.appendChild(this.overflowEl);
42837
- if (this.state.showMoreButtons) {
42838
- this.overflowEl.classList.add("md-toolbar-overflow-visible");
42839
- this.toggleBtn.classList.add("md-toolbar-btn-active");
42840
- }
42841
- } else {
42842
- this.renderGroups(this.options.buttons, this.container);
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.overflowEl) {
42882
- this.overflowEl.classList.toggle("md-toolbar-overflow-visible", this.state.showMoreButtons);
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.overflowEl = null;
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 || lineheight alignleft aligncenter alignright alignjustify | forecolor backcolor | removeformat copy cut paste | undo redo | image charmap emoticons | fullscreen preview | code link codesample | ltr rtl | searchreplace";
46006
- 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";
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
- flex-wrap: wrap;
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-primary {
74
+ .md-toolbar-buttons {
60
75
  display: flex;
61
76
  flex-wrap: wrap;
62
77
  align-items: center;
63
78
  gap: 2px;
64
- width: 100%;
65
- }
66
-
67
- .md-toolbar-overflow {
68
- display: none;
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-overflow.md-toolbar-overflow-visible {
75
- display: flex;
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: #207ab7;
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: #207ab7;
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: #207ab7;
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: #1a6399;
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: #207ab7;
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: #207ab7;
525
+ background: #2271b2;
456
526
  color: #fff;
457
- border-color: #207ab7;
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: #207ab7;
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: #207ab7;
531
- background: rgba(32, 122, 183, 0.1);
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: #207ab7;
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: #207ab7;
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: #207ab7;
647
- border-color: #207ab7;
716
+ background: #2271b2;
717
+ border-color: #2271b2;
648
718
  color: #fff;
649
719
  }
650
720
  .md-btn.md-btn-primary:hover {
651
- background: #1a6399;
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: #207ab7;
748
+ background: #2271b2;
679
749
  color: #fff;
680
- border-color: #207ab7;
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: #207ab7;
698
- background: rgba(32, 122, 183, 0.03);
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: #207ab7;
702
- background: rgba(32, 122, 183, 0.08);
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: #207ab7;
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: #207ab7;
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: #207ab7;
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: #207ab7;
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(32, 122, 183, 0.5) inset;
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: #207ab7;
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: #207ab7;
950
- background: rgba(32, 122, 183, 0.1);
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: #207ab7;
996
- border-color: #207ab7;
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: #1a6399;
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: #207ab7;
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: #207ab7;
1088
+ border-color: #2271b2;
1019
1089
  }
1020
1090
  .md-editor-oxide-dark .md-link-editor-row label {
1021
1091
  color: #aaa;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mdaemon/html-editor",
3
- "version": "1.0.8",
3
+ "version": "1.0.10",
4
4
  "description": "A TinyMCE-compatible HTML editor built on TipTap",
5
5
  "homepage": "https://github.com/mdaemon-technologies/MDHTMLEditor",
6
6
  "repository": {