autumnnote 1.0.6 → 1.0.8
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 +3 -3
- package/dist/autumnnote.css +168 -4
- package/dist/autumnnote.es.js +886 -115
- package/dist/autumnnote.es.js.map +1 -1
- package/dist/autumnnote.umd.js +886 -115
- package/dist/autumnnote.umd.js.map +1 -1
- package/package.json +3 -2
- package/src/js/Context.js +6 -0
- package/src/js/core/sanitise.js +20 -2
- package/src/js/editing/Style.js +288 -24
- package/src/js/editing/Typing.js +2 -2
- package/src/js/module/Buttons.js +5 -4
- package/src/js/module/Clipboard.js +8 -0
- package/src/js/module/CodeTooltip.js +1 -0
- package/src/js/module/ContextMenu.js +146 -8
- package/src/js/module/Editor.js +73 -1
- package/src/js/module/EmojiDialog.js +11 -0
- package/src/js/module/IconDialog.js +11 -0
- package/src/js/module/ImageCropOverlay.js +2 -2
- package/src/js/module/ImageDialog.js +22 -3
- package/src/js/module/ImageResizer.js +2 -0
- package/src/js/module/ImageTooltip.js +9 -0
- package/src/js/module/LinkTooltip.js +4 -0
- package/src/js/module/Placeholder.js +7 -1
- package/src/js/module/TableTooltip.js +399 -86
- package/src/js/module/Toolbar.js +21 -3
- package/src/js/module/VideoDialog.js +5 -5
- package/src/js/module/VideoResizer.js +11 -0
- package/src/js/module/VideoTooltip.js +1 -0
- package/src/js/renderer.js +3 -0
- package/src/styles/autumnnote.scss +194 -12
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
<p align="center"><img src="image/banner.png" width="120" alt="AutumnNote Banner"/></p>
|
|
4
4
|
|
|
5
|
-
[](#)
|
|
6
6
|
[](https://github.com/cmm-cmm/Autumn-Note/actions/workflows/pages.yml)
|
|
7
7
|
[](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
|
|
8
8
|
[](https://vitejs.dev/)
|
|
@@ -51,7 +51,7 @@ Floating toolbars appear automatically when the user clicks on an editable eleme
|
|
|
51
51
|
| **Link** | Open in new tab, Edit (reopens dialog), Unlink |
|
|
52
52
|
| **Image** | Edit alt/URL (reopens dialog), Delete |
|
|
53
53
|
| **Video** | Edit (reopens dialog), Delete |
|
|
54
|
-
| **Table cell** | Row above/below, Delete row, Column left/right, Delete column, Merge cells, Column width, Row height, Border width, Delete table |
|
|
54
|
+
| **Table cell** | Row above/below, Delete row, Column left/right, Delete column, Merge cells, Unmerge cells, Cell selection mode, Column width, Row height, Border width, Delete table |
|
|
55
55
|
| **Code block** (`<pre>`) | Copy code, Delete block |
|
|
56
56
|
|
|
57
57
|
### Context menu
|
|
@@ -74,7 +74,7 @@ Right-click inside the editor opens a context menu with: **Undo**, **Redo**, **C
|
|
|
74
74
|
- **Tree-shakeable** — ES module build; all core utilities are individually exported
|
|
75
75
|
|
|
76
76
|
### Security
|
|
77
|
-
- All HTML (pasted content, `setHTML()`, or code-view output) is passed through a DOM-based sanitiser that strips `<script>`, `<
|
|
77
|
+
- All HTML (pasted content, `setHTML()`, or code-view output) is passed through a DOM-based sanitiser that strips `<script>`, `<object>`, `<embed>`, and all `on*` event handler attributes; `<iframe>` elements are permitted in `setHTML()` to support embedded content
|
|
78
78
|
- `javascript:` and `data:` URLs are rejected in links and images
|
|
79
79
|
- Clipboard paste sanitises rich content to remove XSS vectors before inserting
|
|
80
80
|
|
package/dist/autumnnote.css
CHANGED
|
@@ -30,7 +30,22 @@
|
|
|
30
30
|
.an-container.an-disabled .an-editable {
|
|
31
31
|
cursor: text;
|
|
32
32
|
user-select: text;
|
|
33
|
-
|
|
33
|
+
}
|
|
34
|
+
.an-container.an-disabled .an-editable ul.an-checklist input[type=checkbox] {
|
|
35
|
+
pointer-events: none;
|
|
36
|
+
cursor: default;
|
|
37
|
+
opacity: 1;
|
|
38
|
+
}
|
|
39
|
+
.an-container.an-disabled .an-editable img {
|
|
40
|
+
-webkit-user-drag: none;
|
|
41
|
+
user-drag: none;
|
|
42
|
+
}
|
|
43
|
+
.an-container.an-disabled .an-editable .an-video-wrapper {
|
|
44
|
+
-webkit-user-drag: none;
|
|
45
|
+
user-drag: none;
|
|
46
|
+
}
|
|
47
|
+
.an-container.an-disabled .an-editable .an-video-wrapper .an-video-shield {
|
|
48
|
+
pointer-events: none;
|
|
34
49
|
}
|
|
35
50
|
.an-container.an-fullscreen {
|
|
36
51
|
position: fixed;
|
|
@@ -60,6 +75,9 @@
|
|
|
60
75
|
align-items: center;
|
|
61
76
|
gap: 2px;
|
|
62
77
|
}
|
|
78
|
+
.an-btn-group > .an-btn {
|
|
79
|
+
padding: 0;
|
|
80
|
+
}
|
|
63
81
|
.an-btn-group + .an-btn-group {
|
|
64
82
|
position: relative;
|
|
65
83
|
padding-left: 8px;
|
|
@@ -326,6 +344,7 @@
|
|
|
326
344
|
}
|
|
327
345
|
|
|
328
346
|
.an-editable {
|
|
347
|
+
position: relative;
|
|
329
348
|
flex: 1;
|
|
330
349
|
padding: 12px 14px;
|
|
331
350
|
min-height: 0;
|
|
@@ -339,7 +358,10 @@
|
|
|
339
358
|
content: attr(data-placeholder);
|
|
340
359
|
color: #6b7280;
|
|
341
360
|
pointer-events: none;
|
|
342
|
-
|
|
361
|
+
position: absolute;
|
|
362
|
+
top: 12px;
|
|
363
|
+
left: 14px;
|
|
364
|
+
right: 14px;
|
|
343
365
|
}
|
|
344
366
|
.an-editable p {
|
|
345
367
|
margin: 0 0 0.75em;
|
|
@@ -349,8 +371,9 @@
|
|
|
349
371
|
line-height: 1.3;
|
|
350
372
|
}
|
|
351
373
|
.an-editable ul, .an-editable ol {
|
|
352
|
-
margin: 0 0 0.75em
|
|
353
|
-
padding:
|
|
374
|
+
margin: 0 0 0.75em 0;
|
|
375
|
+
padding-left: 1.5em;
|
|
376
|
+
list-style-position: inside;
|
|
354
377
|
}
|
|
355
378
|
.an-editable li {
|
|
356
379
|
margin-bottom: 0.25em;
|
|
@@ -413,7 +436,16 @@
|
|
|
413
436
|
inset: 0;
|
|
414
437
|
z-index: 2;
|
|
415
438
|
cursor: default;
|
|
439
|
+
pointer-events: all;
|
|
416
440
|
}
|
|
441
|
+
.an-video-wrapper .an-video-shield {
|
|
442
|
+
position: absolute;
|
|
443
|
+
inset: 0;
|
|
444
|
+
z-index: 2;
|
|
445
|
+
cursor: default;
|
|
446
|
+
pointer-events: all;
|
|
447
|
+
}
|
|
448
|
+
|
|
417
449
|
.an-editable table, .an-editable .an-table {
|
|
418
450
|
border-collapse: collapse;
|
|
419
451
|
table-layout: fixed;
|
|
@@ -529,6 +561,25 @@
|
|
|
529
561
|
letter-spacing: 0.02em;
|
|
530
562
|
}
|
|
531
563
|
|
|
564
|
+
.an-link-tooltip-btn--active {
|
|
565
|
+
background: rgba(59, 130, 246, 0.12) !important;
|
|
566
|
+
color: #3b82f6 !important;
|
|
567
|
+
}
|
|
568
|
+
.an-link-tooltip-btn--active svg {
|
|
569
|
+
stroke: #3b82f6;
|
|
570
|
+
}
|
|
571
|
+
|
|
572
|
+
.an-cell-selected {
|
|
573
|
+
background-color: rgba(59, 130, 246, 0.18) !important;
|
|
574
|
+
outline: 2px solid #3b82f6;
|
|
575
|
+
outline-offset: -2px;
|
|
576
|
+
}
|
|
577
|
+
|
|
578
|
+
.an-table-select-mode td,
|
|
579
|
+
.an-table-select-mode th {
|
|
580
|
+
cursor: cell;
|
|
581
|
+
}
|
|
582
|
+
|
|
532
583
|
.an-size-popover {
|
|
533
584
|
position: fixed;
|
|
534
585
|
background: #ffffff;
|
|
@@ -821,6 +872,91 @@
|
|
|
821
872
|
background: #d1d5db;
|
|
822
873
|
}
|
|
823
874
|
|
|
875
|
+
.an-context-icon--color {
|
|
876
|
+
flex-direction: column;
|
|
877
|
+
gap: 2px;
|
|
878
|
+
width: 16px;
|
|
879
|
+
align-items: center;
|
|
880
|
+
}
|
|
881
|
+
.an-context-icon--color .an-context-icon-svg {
|
|
882
|
+
display: flex;
|
|
883
|
+
align-items: center;
|
|
884
|
+
justify-content: center;
|
|
885
|
+
line-height: 0;
|
|
886
|
+
}
|
|
887
|
+
|
|
888
|
+
.an-context-color-strip {
|
|
889
|
+
display: block;
|
|
890
|
+
width: 100%;
|
|
891
|
+
height: 3px;
|
|
892
|
+
border-radius: 1px;
|
|
893
|
+
flex-shrink: 0;
|
|
894
|
+
}
|
|
895
|
+
|
|
896
|
+
.an-context-color-palette {
|
|
897
|
+
display: flex;
|
|
898
|
+
flex-wrap: wrap;
|
|
899
|
+
gap: 3px;
|
|
900
|
+
padding: 6px 12px 2px;
|
|
901
|
+
}
|
|
902
|
+
|
|
903
|
+
.an-context-color-swatch {
|
|
904
|
+
width: 15px;
|
|
905
|
+
height: 15px;
|
|
906
|
+
border-radius: 3px;
|
|
907
|
+
border: 1px solid rgba(0, 0, 0, 0.12);
|
|
908
|
+
cursor: pointer;
|
|
909
|
+
flex-shrink: 0;
|
|
910
|
+
position: relative;
|
|
911
|
+
transition: transform 0.1s;
|
|
912
|
+
}
|
|
913
|
+
.an-context-color-swatch:hover {
|
|
914
|
+
transform: scale(1.28);
|
|
915
|
+
z-index: 1;
|
|
916
|
+
border-color: rgba(0, 0, 0, 0.4);
|
|
917
|
+
}
|
|
918
|
+
|
|
919
|
+
.an-context-color-none {
|
|
920
|
+
display: flex;
|
|
921
|
+
align-items: center;
|
|
922
|
+
justify-content: center;
|
|
923
|
+
background: #fff !important;
|
|
924
|
+
color: #999;
|
|
925
|
+
}
|
|
926
|
+
.an-context-color-none svg {
|
|
927
|
+
display: block;
|
|
928
|
+
}
|
|
929
|
+
.an-context-color-none:hover {
|
|
930
|
+
color: #333;
|
|
931
|
+
}
|
|
932
|
+
|
|
933
|
+
.an-context-color-custom {
|
|
934
|
+
display: flex;
|
|
935
|
+
align-items: center;
|
|
936
|
+
gap: 8px;
|
|
937
|
+
padding: 4px 12px 8px;
|
|
938
|
+
font-size: 12px;
|
|
939
|
+
color: #6b7280;
|
|
940
|
+
cursor: pointer;
|
|
941
|
+
}
|
|
942
|
+
.an-context-color-custom input[type=color] {
|
|
943
|
+
width: 18px;
|
|
944
|
+
height: 18px;
|
|
945
|
+
padding: 0;
|
|
946
|
+
border: 1px solid #d1d5db;
|
|
947
|
+
border-radius: 3px;
|
|
948
|
+
cursor: pointer;
|
|
949
|
+
background: transparent;
|
|
950
|
+
-webkit-appearance: none;
|
|
951
|
+
appearance: none;
|
|
952
|
+
}
|
|
953
|
+
.an-context-color-custom span {
|
|
954
|
+
flex: 1;
|
|
955
|
+
}
|
|
956
|
+
.an-context-color-custom:hover span {
|
|
957
|
+
color: #111827;
|
|
958
|
+
}
|
|
959
|
+
|
|
824
960
|
.an-image-resizer {
|
|
825
961
|
position: absolute;
|
|
826
962
|
z-index: 10000;
|
|
@@ -1265,6 +1401,7 @@
|
|
|
1265
1401
|
.an-editable figure.an-figure img {
|
|
1266
1402
|
display: block;
|
|
1267
1403
|
max-width: 100%;
|
|
1404
|
+
margin: 0 auto;
|
|
1268
1405
|
}
|
|
1269
1406
|
.an-editable figcaption.an-figcaption {
|
|
1270
1407
|
font-size: 0.85em;
|
|
@@ -1506,6 +1643,17 @@
|
|
|
1506
1643
|
border-color: #3f3f5f;
|
|
1507
1644
|
color: #cdd6f4;
|
|
1508
1645
|
}
|
|
1646
|
+
.an-theme-dark .an-link-tooltip-btn--active {
|
|
1647
|
+
background: rgba(99, 102, 241, 0.2) !important;
|
|
1648
|
+
color: #818cf8 !important;
|
|
1649
|
+
}
|
|
1650
|
+
.an-theme-dark .an-link-tooltip-btn--active svg {
|
|
1651
|
+
stroke: #818cf8;
|
|
1652
|
+
}
|
|
1653
|
+
.an-theme-dark .an-cell-selected {
|
|
1654
|
+
background-color: rgba(99, 102, 241, 0.25) !important;
|
|
1655
|
+
outline-color: #6366f1;
|
|
1656
|
+
}
|
|
1509
1657
|
.an-theme-dark .an-table-cell {
|
|
1510
1658
|
background: #24273a;
|
|
1511
1659
|
border-color: #3f3f5f;
|
|
@@ -1520,6 +1668,22 @@
|
|
|
1520
1668
|
.an-theme-dark .an-context-sep {
|
|
1521
1669
|
background: #3f3f5f;
|
|
1522
1670
|
}
|
|
1671
|
+
.an-theme-dark .an-context-color-swatch {
|
|
1672
|
+
border-color: rgba(255, 255, 255, 0.15);
|
|
1673
|
+
}
|
|
1674
|
+
.an-theme-dark .an-context-color-swatch:hover {
|
|
1675
|
+
border-color: rgba(255, 255, 255, 0.5);
|
|
1676
|
+
}
|
|
1677
|
+
.an-theme-dark .an-context-color-none {
|
|
1678
|
+
background: #1e1e2e !important;
|
|
1679
|
+
color: #888;
|
|
1680
|
+
}
|
|
1681
|
+
.an-theme-dark .an-context-color-none:hover {
|
|
1682
|
+
color: #ccc;
|
|
1683
|
+
}
|
|
1684
|
+
.an-theme-dark .an-context-color-custom input[type=color] {
|
|
1685
|
+
border-color: #3f3f5f;
|
|
1686
|
+
}
|
|
1523
1687
|
.an-theme-dark .an-icon-cat {
|
|
1524
1688
|
border-color: #3f3f5f;
|
|
1525
1689
|
color: #a6adc8;
|