@openeditor/ui 0.0.33 → 0.0.35

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 (6) hide show
  1. package/dist/index.css +74 -74
  2. package/dist/index.css.map +1 -1
  3. package/dist/index.d.ts +30 -1
  4. package/dist/index.js +306 -193
  5. package/dist/index.js.map +1 -1
  6. package/package.json +5 -6
package/dist/index.css CHANGED
@@ -1,5 +1,7 @@
1
1
  /* src/styles.css */
2
2
  .oe-editor-surface {
3
+ --oe-control-hover: var(--oe-interaction-hover, color-mix(in srgb, var(--oe-text, #171717) 10%, var(--oe-surface-raised, var(--oe-surface, #fff))));
4
+ --oe-control-selected: var(--oe-interaction-selected, color-mix(in srgb, var(--oe-text, #171717) 15%, var(--oe-surface-raised, var(--oe-surface, #fff))));
3
5
  container-type: inline-size;
4
6
  display: grid;
5
7
  gap: 12px;
@@ -35,9 +37,12 @@
35
37
  z-index: 40;
36
38
  }
37
39
  .oe-block-handle-anchor:hover .oe-block-handle,
38
- .oe-block-handle-anchor:focus-visible .oe-block-handle,
40
+ .oe-block-handle-anchor:focus-visible .oe-block-handle {
41
+ background: var(--oe-control-hover);
42
+ color: var(--oe-text, #171717);
43
+ }
39
44
  .oe-block-handle-anchor[aria-expanded=true] .oe-block-handle {
40
- background: var(--oe-surface-muted, #f5f5f5);
45
+ background: var(--oe-control-selected);
41
46
  color: var(--oe-text, #171717);
42
47
  }
43
48
  .oe-block-handle-anchor:focus-visible {
@@ -48,6 +53,7 @@
48
53
  outline-offset: 2px;
49
54
  }
50
55
  .oe-block-menu {
56
+ --oe-control-hover: var(--oe-interaction-hover, color-mix(in srgb, var(--oe-text, #171717) 10%, var(--oe-surface-raised, #fff)));
51
57
  background: var(--oe-surface-raised);
52
58
  border: 1px solid var(--oe-border, #e5e5e5);
53
59
  border-radius: 12px;
@@ -72,8 +78,10 @@
72
78
  outline: none;
73
79
  padding: 0 9px;
74
80
  }
81
+ .oe-block-menu-item:hover,
82
+ .oe-block-menu-item:focus-visible,
75
83
  .oe-block-menu-item[data-highlighted] {
76
- background: var(--oe-surface-muted, #f5f5f5);
84
+ background: var(--oe-control-hover);
77
85
  }
78
86
  .oe-block-menu-item[data-danger] {
79
87
  color: #c83232;
@@ -85,11 +93,6 @@
85
93
  display: block;
86
94
  width: 15px;
87
95
  }
88
- .oe-block-menu-separator {
89
- background: var(--oe-border, #e5e5e5);
90
- height: 1px;
91
- margin: 4px;
92
- }
93
96
  .oe-prosemirror .ProseMirror-selectednode {
94
97
  outline: none;
95
98
  }
@@ -450,7 +453,7 @@
450
453
  .oe-viewer p,
451
454
  .oe-viewer ul,
452
455
  .oe-viewer ol {
453
- color: var(--oe-text-soft, #262626);
456
+ color: var(--oe-text-soft, var(--oe-text, #262626));
454
457
  font-size: var(--oe-body-font-size, 16px);
455
458
  line-height: var(--oe-body-line-height, 1.6);
456
459
  }
@@ -526,7 +529,7 @@ details.oe-toggle-list-item {
526
529
  margin: 8px 0;
527
530
  }
528
531
  details.oe-toggle-list-item > summary {
529
- color: var(--oe-text-soft, #262626);
532
+ color: var(--oe-text-soft, var(--oe-text, #262626));
530
533
  cursor: pointer;
531
534
  font-weight: 500;
532
535
  }
@@ -541,7 +544,7 @@ details.oe-toggle-list-item > summary + * {
541
544
  align-self: start;
542
545
  background: transparent;
543
546
  border: 0;
544
- color: var(--oe-text-soft, #262626);
547
+ color: var(--oe-text-soft, var(--oe-text, #262626));
545
548
  cursor: pointer;
546
549
  display: inline-flex;
547
550
  height: 24px;
@@ -636,11 +639,13 @@ details.oe-toggle-list-item > summary + * {
636
639
  background: transparent;
637
640
  border: 0;
638
641
  border-radius: 6px;
642
+ box-sizing: border-box;
639
643
  color: var(--oe-text, #171717);
640
644
  display: flex;
641
645
  font: inherit;
642
646
  gap: 8px;
643
647
  margin: 4px 0;
648
+ max-width: 100%;
644
649
  min-height: 34px;
645
650
  padding: 3px 6px;
646
651
  text-align: left;
@@ -908,36 +913,9 @@ details.oe-toggle-list-item > summary + * {
908
913
  white-space: pre-wrap;
909
914
  }
910
915
  .oe-prosemirror hr,
911
- .oe-divider,
912
916
  .oe-viewer hr {
913
917
  border: 0;
914
- cursor: pointer;
915
- height: 1px;
916
- margin: 18px 0;
917
- padding: 10px 0;
918
- position: relative;
919
- }
920
- .oe-prosemirror hr::after,
921
- .oe-divider::after,
922
- .oe-viewer hr::after {
923
- background: var(--oe-structural-line, var(--oe-border, #e5e5e5));
924
- content: "";
925
- display: block;
926
- height: 1px;
927
- left: 0;
928
- pointer-events: none;
929
- position: absolute;
930
- right: 0;
931
- top: 10px;
932
- }
933
- .oe-prosemirror hr.ProseMirror-selectednode,
934
- .oe-divider.ProseMirror-selectednode {
935
- outline: none;
936
- }
937
- .oe-prosemirror hr.ProseMirror-selectednode::after,
938
- .oe-divider.ProseMirror-selectednode::after {
939
- background: var(--oe-structural-line, var(--oe-border, #e5e5e5));
940
- box-shadow: 0 0 0 6px var(--oe-accent, #f5f5f5);
918
+ border-top: 1px solid var(--oe-structural-line, var(--oe-border, #e5e5e5));
941
919
  }
942
920
  .oe-columns {
943
921
  --oe-column-count: 2;
@@ -976,19 +954,12 @@ details.oe-toggle-list-item > summary + * {
976
954
  list-style: none;
977
955
  padding-left: 0;
978
956
  }
957
+ .oe-prosemirror ul[data-type=taskList] li > label,
979
958
  .oe-viewer li.oe-task-item > label {
980
959
  align-items: start;
981
- display: grid;
982
- gap: 8px;
983
- grid-template-columns: 20px minmax(0, 1fr);
984
- }
985
- .oe-viewer li.oe-task-item > label > input {
986
- height: 18px;
987
- margin: 3px 0 0;
988
- width: 18px;
989
- }
990
- .oe-prosemirror ul[data-type=taskList] > .react-renderer.node-taskItem {
991
- display: contents;
960
+ display: inline-flex;
961
+ margin-top: 3px;
962
+ position: relative;
992
963
  }
993
964
  .oe-prosemirror ul[data-type=taskList] li,
994
965
  .oe-viewer li[data-checked] {
@@ -997,18 +968,11 @@ details.oe-toggle-list-item > summary + * {
997
968
  gap: 8px;
998
969
  grid-template-columns: 20px minmax(0, 1fr);
999
970
  }
1000
- .oe-prosemirror ul[data-type=taskList] li > .oe-task-item-checkbox,
1001
- .oe-viewer li[data-checked] > .oe-task-item-checkbox {
1002
- align-items: center;
1003
- display: inline-flex;
1004
- flex: 0 0 auto;
1005
- line-height: 1.6;
1006
- margin-top: 3px;
1007
- }
1008
- .oe-task-checkbox {
971
+ .oe-prosemirror ul[data-type=taskList] li > label > input,
972
+ .oe-viewer li.oe-task-item > label > input {
1009
973
  appearance: none;
1010
974
  background: var(--oe-block-surface, var(--oe-surface-muted, #f5f5f5));
1011
- border: 0;
975
+ border: 1px solid var(--oe-border-strong, #d4d4d4);
1012
976
  border-radius: 4px;
1013
977
  box-shadow: none;
1014
978
  cursor: pointer;
@@ -1019,33 +983,62 @@ details.oe-toggle-list-item > summary + * {
1019
983
  place-items: center;
1020
984
  width: 20px;
1021
985
  }
1022
- .oe-task-checkbox[data-readonly] {
986
+ .oe-viewer li.oe-task-item > label > input {
1023
987
  cursor: default;
1024
988
  }
1025
- .oe-task-checkbox-indicator {
1026
- border-bottom: 2px solid var(--oe-button-text, #ffffff);
1027
- border-right: 2px solid var(--oe-button-text, #ffffff);
989
+ .oe-prosemirror ul[data-type=taskList] li > label > span,
990
+ .oe-viewer li.oe-task-item > label > span {
991
+ border-bottom: 2px solid var(--oe-accent-text, #ffffff);
992
+ border-right: 2px solid var(--oe-accent-text, #ffffff);
1028
993
  height: 9px;
1029
994
  opacity: 0;
1030
- transform: translateY(-1px) rotate(45deg);
995
+ pointer-events: none;
996
+ position: absolute;
997
+ left: 50%;
998
+ top: 50%;
999
+ transform: translate(-50%, -50%) rotate(45deg);
1031
1000
  width: 5px;
1032
1001
  }
1033
- .oe-task-checkbox[data-checked] {
1002
+ .oe-prosemirror ul[data-type=taskList] li > label > input:checked,
1003
+ .oe-viewer li.oe-task-item > label > input:checked {
1034
1004
  background: var(--oe-accent-strong, #171717);
1005
+ border-color: var(--oe-accent-strong, #171717);
1035
1006
  }
1036
- .oe-task-checkbox[data-checked] .oe-task-checkbox-indicator {
1007
+ .oe-prosemirror ul[data-type=taskList] li > label > input:checked + span,
1008
+ .oe-viewer li.oe-task-item > label > input:checked + span {
1037
1009
  opacity: 1;
1038
1010
  }
1039
- .oe-prosemirror ul[data-type=taskList] li > [data-node-view-content],
1011
+ .oe-prosemirror ul[data-type=taskList] li > div,
1040
1012
  .oe-viewer li[data-checked] > div {
1041
1013
  flex: 1 1 auto;
1042
1014
  min-width: 0;
1043
1015
  }
1044
- .oe-prosemirror ul[data-type=taskList] li [data-node-view-content] p,
1016
+ .oe-prosemirror ul[data-type=taskList] li > div > p,
1045
1017
  .oe-viewer li[data-checked] > div > p {
1046
1018
  margin: 0;
1047
1019
  min-height: 1.6em;
1048
1020
  }
1021
+ @media (pointer: coarse) {
1022
+ .oe-prosemirror ul[data-type=taskList] li,
1023
+ .oe-viewer li[data-checked] {
1024
+ grid-template-columns: 24px minmax(0, 1fr);
1025
+ min-height: 44px;
1026
+ }
1027
+ .oe-prosemirror ul[data-type=taskList] li > label,
1028
+ .oe-viewer li.oe-task-item > label {
1029
+ align-items: center;
1030
+ height: 44px;
1031
+ justify-content: center;
1032
+ margin: -9px 0 -9px -10px;
1033
+ touch-action: manipulation;
1034
+ width: 44px;
1035
+ -webkit-tap-highlight-color: transparent;
1036
+ }
1037
+ .oe-prosemirror ul[data-type=taskList] li > label > input,
1038
+ .oe-viewer li.oe-task-item > label > input {
1039
+ flex: 0 0 20px;
1040
+ }
1041
+ }
1049
1042
  .oe-prosemirror .tableWrapper > table,
1050
1043
  .oe-prosemirror table[data-openeditor-table],
1051
1044
  .oe-viewer table[data-openeditor-table] {
@@ -1158,6 +1151,7 @@ details.oe-toggle-list-item > summary + * {
1158
1151
  flex: 0 0 auto;
1159
1152
  }
1160
1153
  .oe-slash-menu {
1154
+ --oe-control-hover: var(--oe-interaction-hover, color-mix(in srgb, var(--oe-text, #171717) 10%, var(--oe-surface-raised, #fff)));
1161
1155
  background: var(--oe-surface-raised);
1162
1156
  border: 1px solid var(--oe-border, #e5e5e5);
1163
1157
  border-radius: 23px;
@@ -1206,7 +1200,7 @@ details.oe-toggle-list-item > summary + * {
1206
1200
  .oe-slash-menu-item:hover,
1207
1201
  .oe-slash-menu-item:focus-visible,
1208
1202
  .oe-slash-menu-item[data-highlighted] {
1209
- background: var(--oe-surface-muted, #f5f5f5);
1203
+ background: var(--oe-control-hover);
1210
1204
  box-shadow: none !important;
1211
1205
  outline: none !important;
1212
1206
  }
@@ -1235,6 +1229,7 @@ details.oe-toggle-list-item > summary + * {
1235
1229
  color: var(--oe-text, #171717);
1236
1230
  }
1237
1231
  .oe-bubble-menu {
1232
+ --oe-control-hover: var(--oe-interaction-hover, color-mix(in srgb, var(--oe-text, #171717) 10%, var(--oe-surface-raised, #fff)));
1238
1233
  align-items: center;
1239
1234
  background: var(--oe-surface-raised);
1240
1235
  border: 1px solid var(--oe-border, #e5e5e5);
@@ -1245,6 +1240,7 @@ details.oe-toggle-list-item > summary + * {
1245
1240
  z-index: 1000;
1246
1241
  }
1247
1242
  .oe-table-menu {
1243
+ --oe-control-hover: var(--oe-interaction-hover, color-mix(in srgb, var(--oe-text, #171717) 10%, var(--oe-surface-raised, #fff)));
1248
1244
  background: var(--oe-surface-raised);
1249
1245
  border: 1px solid var(--oe-border, #e5e5e5);
1250
1246
  border-radius: 999px;
@@ -1281,7 +1277,7 @@ details.oe-toggle-list-item > summary + * {
1281
1277
  .oe-table-toolbar-trigger:hover,
1282
1278
  .oe-table-toolbar-trigger:focus-visible,
1283
1279
  .oe-table-toolbar-trigger[data-popup-open] {
1284
- background: var(--oe-surface-muted, #f5f5f5);
1280
+ background: var(--oe-control-hover);
1285
1281
  outline: none;
1286
1282
  }
1287
1283
  .oe-table-toolbar-button[data-danger] {
@@ -1299,6 +1295,7 @@ details.oe-toggle-list-item > summary + * {
1299
1295
  width: 1px;
1300
1296
  }
1301
1297
  .oe-table-action-menu {
1298
+ --oe-control-hover: var(--oe-interaction-hover, color-mix(in srgb, var(--oe-text, #171717) 10%, var(--oe-surface-raised, #fff)));
1302
1299
  background: var(--oe-surface-raised);
1303
1300
  border: 1px solid var(--oe-border, #e5e5e5);
1304
1301
  border-radius: 16px;
@@ -1326,7 +1323,7 @@ details.oe-toggle-list-item > summary + * {
1326
1323
  .oe-table-action-item:hover,
1327
1324
  .oe-table-action-item:focus-visible,
1328
1325
  .oe-table-action-item[data-highlighted] {
1329
- background: var(--oe-surface-muted, #f5f5f5);
1326
+ background: var(--oe-control-hover);
1330
1327
  }
1331
1328
  .oe-table-action-item[data-danger] {
1332
1329
  color: #b42318;
@@ -1374,7 +1371,7 @@ details.oe-toggle-list-item > summary + * {
1374
1371
  .oe-toolbar-button:hover,
1375
1372
  .oe-toolbar-button:focus-visible,
1376
1373
  .oe-toolbar-button[data-active] {
1377
- background: var(--oe-surface-muted, #f5f5f5);
1374
+ background: var(--oe-control-hover);
1378
1375
  color: var(--oe-accent-strong, #171717);
1379
1376
  outline: none;
1380
1377
  }
@@ -1384,6 +1381,7 @@ details.oe-toggle-list-item > summary + * {
1384
1381
  color: var(--oe-accent-strong, #171717);
1385
1382
  }
1386
1383
  .oe-block-transform-menu {
1384
+ --oe-control-hover: var(--oe-interaction-hover, color-mix(in srgb, var(--oe-text, #171717) 10%, var(--oe-surface-raised, #fff)));
1387
1385
  background: var(--oe-surface-raised);
1388
1386
  border: 1px solid var(--oe-border, #e5e5e5);
1389
1387
  border-radius: 23px;
@@ -1429,7 +1427,7 @@ details.oe-toggle-list-item > summary + * {
1429
1427
  .oe-block-transform-item:focus-visible,
1430
1428
  .oe-block-transform-item[data-highlighted],
1431
1429
  .oe-block-transform-item[data-active] {
1432
- background: var(--oe-surface-muted, #f5f5f5);
1430
+ background: var(--oe-control-hover);
1433
1431
  box-shadow: none !important;
1434
1432
  outline: none !important;
1435
1433
  }
@@ -1578,11 +1576,13 @@ details.oe-toggle-list-item > summary + * {
1578
1576
  background: var(--oe-block-surface, var(--oe-surface-muted, #f5f5f5));
1579
1577
  border: 0;
1580
1578
  border-radius: var(--oe-attachment-radius);
1579
+ box-sizing: border-box;
1581
1580
  color: var(--oe-text, #171717);
1582
1581
  display: flex;
1583
1582
  font: inherit;
1584
1583
  gap: 8px;
1585
1584
  margin: 4px 0;
1585
+ max-width: 100%;
1586
1586
  min-height: 34px;
1587
1587
  padding: var(--oe-attachment-inset) calc(var(--oe-attachment-inset) + var(--oe-attachment-inset));
1588
1588
  position: relative;