@vonaffenfels/slate-editor 1.1.71 → 1.2.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.
Files changed (96) hide show
  1. package/.babelrc +43 -43
  2. package/README.md +5 -5
  3. package/componentLoader.js +93 -93
  4. package/dist/BlockEditor.css +4 -1871
  5. package/dist/BlockEditor.js +336 -3960
  6. package/dist/BlockEditor.js.LICENSE.txt +61 -0
  7. package/dist/Renderer.js +2 -2081
  8. package/dist/Renderer.js.LICENSE.txt +15 -0
  9. package/dist/fromHTML.js +1 -78
  10. package/dist/index.css +4 -1871
  11. package/dist/index.js +336 -4037
  12. package/dist/index.js.LICENSE.txt +69 -0
  13. package/dist/toHTML.js +2 -1689
  14. package/dist/toHTML.js.LICENSE.txt +23 -0
  15. package/dist/toText.js +2 -1689
  16. package/dist/toText.js.LICENSE.txt +23 -0
  17. package/package.json +2 -2
  18. package/postcss.config.js +6 -6
  19. package/scss/demo.scss +148 -148
  20. package/scss/editor.scss +17 -5
  21. package/scss/sidebarEditor.scss +185 -181
  22. package/scss/toolbar.scss +161 -161
  23. package/src/BlockEditor.js +6 -3
  24. package/src/Blocks/EmptyBlock.js +11 -11
  25. package/src/Blocks/EmptyWrapper.js +4 -4
  26. package/src/Blocks/ErrorBoundary.js +40 -40
  27. package/src/Blocks/LayoutBlock.js +274 -274
  28. package/src/Blocks/LayoutSlot.js +90 -90
  29. package/src/CollapsableMenu/CollapsableMenu.js +48 -48
  30. package/src/Context/StorybookContext.js +6 -6
  31. package/src/ElementAutocomplete.js +133 -133
  32. package/src/Loader.js +137 -137
  33. package/src/Nodes/Default.js +158 -158
  34. package/src/Nodes/Leaf.js +54 -54
  35. package/src/Nodes/Text.js +97 -97
  36. package/src/ObjectId.js +3 -3
  37. package/src/Renderer.js +73 -73
  38. package/src/Serializer/Html.js +42 -42
  39. package/src/Serializer/Serializer.js +371 -371
  40. package/src/Serializer/Text.js +17 -17
  41. package/src/Serializer/ads.js +174 -174
  42. package/src/Serializer/index.js +3 -3
  43. package/src/SidebarEditor/AssetList.js +181 -181
  44. package/src/SidebarEditor/Fields/CloudinaryContentSelect.js +89 -89
  45. package/src/SidebarEditor/Fields/ColorPicker.js +89 -89
  46. package/src/SidebarEditor/Fields/ContentfulContentSelect.js +62 -62
  47. package/src/SidebarEditor/Fields/DateTime.js +55 -55
  48. package/src/SidebarEditor/Fields/MVP.js +66 -66
  49. package/src/SidebarEditor/Fields/MultiSelect.js +13 -13
  50. package/src/SidebarEditor/Fields/RemoteMultiSelect.js +40 -40
  51. package/src/SidebarEditor/Fields/RemoteSelect.js +39 -39
  52. package/src/SidebarEditor/Fields/Select.js +47 -47
  53. package/src/SidebarEditor/Fields/StreamSelect.js +15 -15
  54. package/src/SidebarEditor/Fields/Switch.js +34 -34
  55. package/src/SidebarEditor/Fields/Textarea.js +21 -21
  56. package/src/SidebarEditor/Resizable.js +85 -85
  57. package/src/Storybook.js +151 -151
  58. package/src/Toolbar/Align.js +64 -64
  59. package/src/Toolbar/Anchor.js +94 -94
  60. package/src/Toolbar/Block.js +135 -135
  61. package/src/Toolbar/Element.js +44 -44
  62. package/src/Toolbar/Formats.js +71 -71
  63. package/src/Toolbar/Insert.js +28 -28
  64. package/src/Toolbar/Layout.js +399 -399
  65. package/src/Toolbar/Link.js +164 -164
  66. package/src/Toolbar/Toolbar.js +235 -235
  67. package/src/Tools/Margin.js +51 -51
  68. package/src/Translation/TranslationToolbarButton.js +119 -115
  69. package/src/dev/draftToSlate.json +3147 -3147
  70. package/src/dev/index.css +2 -2
  71. package/src/dev/index.html +10 -10
  72. package/src/dev/index.js +4 -4
  73. package/src/dev/sampleValue1.json +4294 -4294
  74. package/src/dev/sampleValueValid.json +410 -410
  75. package/src/dev/testComponents/TestStory.js +74 -74
  76. package/src/dev/testComponents/TestStory.stories.js +216 -216
  77. package/src/dev/testComponents/TestStory2.js +74 -74
  78. package/src/dev/testComponents/TestStory2.stories.js +197 -197
  79. package/src/dev/testComponents/TestStory3.js +74 -74
  80. package/src/dev/testComponents/TestStory3.stories.js +197 -197
  81. package/src/dev/testSampleValue.json +746 -746
  82. package/src/fromHTML.js +4 -4
  83. package/src/helper/array.js +8 -8
  84. package/src/index.js +10 -10
  85. package/src/plugins/ListItem.js +48 -48
  86. package/src/plugins/SoftBreak.js +23 -23
  87. package/src/toHTML.js +6 -6
  88. package/src/toText.js +6 -6
  89. package/src/util/reduceContentfulResponse.js +64 -64
  90. package/src/util.js +19 -19
  91. package/storyLoader.js +47 -47
  92. package/tailwind.config.js +4 -4
  93. package/webpack.config.build.js +55 -55
  94. package/webpack.config.dev.js +60 -60
  95. package/webpack.config.js +130 -130
  96. package/webpack.config.watch.js +4 -4
package/scss/sidebarEditor.scss CHANGED
@@ -1,182 +1,186 @@
1
- #sidebar-editor-wrapper {
2
- padding-top: 45px;
3
- height: 100%;
4
- flex-basis: 400px;
5
- flex-shrink: 0;
6
- }
7
-
8
- #sidebar-editor {
9
- display: flex;
10
- flex-direction: column;
11
- background-color: rgb(247, 249, 250);
12
- max-height: 100%;
13
- height: 100%;
14
- overflow-y: auto;
15
- padding: 16px;
16
-
17
- * {
18
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
19
- }
20
-
21
- p, label, b, span {
22
- color: rgb(90, 101, 124);
23
- }
24
-
25
- label {
26
- margin: 0 0 2px 0 !important;
27
- }
28
-
29
- input[type="text"],
30
- input[type="time"],
31
- input[type="date"],
32
- input[type="number"],
33
- input[type="color"],
34
- input[type="datetime-local"],
35
- input[type="search"],
36
- select,
37
- textarea {
38
- display: block;
39
- font-size: 0.875rem !important;
40
- color: rgb(90, 101, 124) !important;
41
- background-color: white !important;
42
- border: 1px solid #cfd9e0 !important;
43
- border-radius: 6px !important;
44
- box-shadow: none !important;
45
- filter: none !important;
46
- width: 100% !important;
47
- padding: 8px 0.75rem !important;
48
- }
49
-
50
- textarea {
51
- height: 42px;
52
- max-height: 200px;
53
- }
54
-
55
- input[type="color"] {
56
- padding: 4px !important;
57
- }
58
-
59
- input[type="range"] {
60
- display: block;
61
- width: 100%;
62
- }
63
-
64
- input[type="radio"],
65
- input[type="checkbox"] {
66
- margin-right: 8px;
67
- margin-left: 4px;
68
- }
69
-
70
- option[disabled] {
71
- color: rgba(0, 0, 0, 0.3)
72
- }
73
-
74
- /* button[data-test-id="cf-ui-button"] span {
75
- color: #036fe3 !important;
76
- }
77
-
78
- button[data-test-id="cf-ui-button"] svg {
79
- fill: #036fe3 !important;
80
- }
81
-
82
- button[data-test-id="cf-ui-button"]:hover span {
83
- color: #FFFFFF !important;
84
- }
85
-
86
- button[data-test-id="cf-ui-button"]:hover svg {
87
- fill: #FFFFFF !important;
88
- } */
89
-
90
- .inline-check-wrapper {
91
- display: inline-block;
92
- margin-right: 8px;
93
- }
94
-
95
- details {
96
- display: block;
97
- font-size: 0.875rem !important;
98
- color: rgb(90, 101, 124) !important;
99
- background-color: white !important;
100
- border: 1px solid #cfd9e0 !important;
101
- border-radius: 6px !important;
102
- box-shadow: none !important;
103
- filter: none !important;
104
- width: 100% !important;
105
- padding: 16px !important;
106
- }
107
-
108
- summary {
109
- cursor: pointer;
110
- }
111
-
112
- .disabled {
113
- opacity: 0.4;
114
- cursor: not-allowed !important;
115
- }
116
-
117
- .icon-button {
118
- display: inline-block;
119
- color: rgb(90, 101, 124) !important;
120
- background-color: white !important;
121
- border: 1px solid #cfd9e0 !important;
122
- border-radius: 6px;
123
- filter: none !important;
124
- width: auto !important;
125
- text-align: center;
126
- }
127
-
128
- .icon-button:not(.disabled):hover {
129
- background-color: rgb(248, 248, 248) !important;
130
- }
131
-
132
- .icon-button:not(.disabled):active {
133
- background-color: rgb(237, 237, 237) !important;
134
- }
135
-
136
- .icon-button-group {
137
- display: inline-flex;
138
- border-radius: 6px !important;
139
- overflow: hidden;
140
- border: 1px solid #cfd9e0 !important;
141
-
142
- .icon-button {
143
- border-radius: 0 !important;
144
- border: none !important;
145
- border-right: 1px solid #cfd9e0 !important;
146
- }
147
-
148
- .icon-button:last-child {
149
- border: none !important;
150
- }
151
- }
152
-
153
- .message {
154
- font-size: 0.875rem;
155
- padding: 16px;
156
- border-radius: 4px;
157
- }
158
-
159
- .message.message--negative {
160
- background-color: rgba(238, 26, 26, 0.2);
161
- }
162
-
163
- .collapsable-menu {
164
- background-color: white !important;
165
- border: 1px solid #cfd9e0 !important;
166
- border-radius: 6px;
167
- z-index: 2;
168
- overflow: hidden;
169
- }
170
-
171
- .collapsable-menu-item {
172
- color: rgb(90, 101, 124) !important;
173
- }
174
-
175
- .collapsable-menu-item:not(.disabled):hover {
176
- background-color: rgb(248, 248, 248) !important;
177
- }
178
-
179
- .collapsable-menu-item:not(.disabled):active {
180
- background-color: rgb(237, 237, 237) !important;
181
- }
1
+ #sidebar-editor-wrapper {
2
+ @media (max-width: 768px) {
3
+ padding-top: 66px;
4
+ }
5
+
6
+ padding-top: 51px;
7
+ height: 100%;
8
+ flex-basis: 400px;
9
+ flex-shrink: 0;
10
+ }
11
+
12
+ #sidebar-editor {
13
+ display: flex;
14
+ flex-direction: column;
15
+ background-color: rgb(247, 249, 250);
16
+ max-height: 100%;
17
+ height: 100%;
18
+ overflow-y: auto;
19
+ padding: 16px;
20
+
21
+ * {
22
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
23
+ }
24
+
25
+ p, label, b, span {
26
+ color: rgb(90, 101, 124);
27
+ }
28
+
29
+ label {
30
+ margin: 0 0 2px 0 !important;
31
+ }
32
+
33
+ input[type="text"],
34
+ input[type="time"],
35
+ input[type="date"],
36
+ input[type="number"],
37
+ input[type="color"],
38
+ input[type="datetime-local"],
39
+ input[type="search"],
40
+ select,
41
+ textarea {
42
+ display: block;
43
+ font-size: 0.875rem !important;
44
+ color: rgb(90, 101, 124) !important;
45
+ background-color: white !important;
46
+ border: 1px solid #cfd9e0 !important;
47
+ border-radius: 6px !important;
48
+ box-shadow: none !important;
49
+ filter: none !important;
50
+ width: 100% !important;
51
+ padding: 8px 0.75rem !important;
52
+ }
53
+
54
+ textarea {
55
+ height: 42px;
56
+ max-height: 200px;
57
+ }
58
+
59
+ input[type="color"] {
60
+ padding: 4px !important;
61
+ }
62
+
63
+ input[type="range"] {
64
+ display: block;
65
+ width: 100%;
66
+ }
67
+
68
+ input[type="radio"],
69
+ input[type="checkbox"] {
70
+ margin-right: 8px;
71
+ margin-left: 4px;
72
+ }
73
+
74
+ option[disabled] {
75
+ color: rgba(0, 0, 0, 0.3)
76
+ }
77
+
78
+ /* button[data-test-id="cf-ui-button"] span {
79
+ color: #036fe3 !important;
80
+ }
81
+
82
+ button[data-test-id="cf-ui-button"] svg {
83
+ fill: #036fe3 !important;
84
+ }
85
+
86
+ button[data-test-id="cf-ui-button"]:hover span {
87
+ color: #FFFFFF !important;
88
+ }
89
+
90
+ button[data-test-id="cf-ui-button"]:hover svg {
91
+ fill: #FFFFFF !important;
92
+ } */
93
+
94
+ .inline-check-wrapper {
95
+ display: inline-block;
96
+ margin-right: 8px;
97
+ }
98
+
99
+ details {
100
+ display: block;
101
+ font-size: 0.875rem !important;
102
+ color: rgb(90, 101, 124) !important;
103
+ background-color: white !important;
104
+ border: 1px solid #cfd9e0 !important;
105
+ border-radius: 6px !important;
106
+ box-shadow: none !important;
107
+ filter: none !important;
108
+ width: 100% !important;
109
+ padding: 16px !important;
110
+ }
111
+
112
+ summary {
113
+ cursor: pointer;
114
+ }
115
+
116
+ .disabled {
117
+ opacity: 0.4;
118
+ cursor: not-allowed !important;
119
+ }
120
+
121
+ .icon-button {
122
+ display: inline-block;
123
+ color: rgb(90, 101, 124) !important;
124
+ background-color: white !important;
125
+ border: 1px solid #cfd9e0 !important;
126
+ border-radius: 6px;
127
+ filter: none !important;
128
+ width: auto !important;
129
+ text-align: center;
130
+ }
131
+
132
+ .icon-button:not(.disabled):hover {
133
+ background-color: rgb(248, 248, 248) !important;
134
+ }
135
+
136
+ .icon-button:not(.disabled):active {
137
+ background-color: rgb(237, 237, 237) !important;
138
+ }
139
+
140
+ .icon-button-group {
141
+ display: inline-flex;
142
+ border-radius: 6px !important;
143
+ overflow: hidden;
144
+ border: 1px solid #cfd9e0 !important;
145
+
146
+ .icon-button {
147
+ border-radius: 0 !important;
148
+ border: none !important;
149
+ border-right: 1px solid #cfd9e0 !important;
150
+ }
151
+
152
+ .icon-button:last-child {
153
+ border: none !important;
154
+ }
155
+ }
156
+
157
+ .message {
158
+ font-size: 0.875rem;
159
+ padding: 16px;
160
+ border-radius: 4px;
161
+ }
162
+
163
+ .message.message--negative {
164
+ background-color: rgba(238, 26, 26, 0.2);
165
+ }
166
+
167
+ .collapsable-menu {
168
+ background-color: white !important;
169
+ border: 1px solid #cfd9e0 !important;
170
+ border-radius: 6px;
171
+ z-index: 2;
172
+ overflow: hidden;
173
+ }
174
+
175
+ .collapsable-menu-item {
176
+ color: rgb(90, 101, 124) !important;
177
+ }
178
+
179
+ .collapsable-menu-item:not(.disabled):hover {
180
+ background-color: rgb(248, 248, 248) !important;
181
+ }
182
+
183
+ .collapsable-menu-item:not(.disabled):active {
184
+ background-color: rgb(237, 237, 237) !important;
185
+ }
182
186
  }