@vonaffenfels/slate-editor 1.1.69 → 1.1.71

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 (94) hide show
  1. package/.babelrc +43 -43
  2. package/README.md +5 -5
  3. package/componentLoader.js +93 -93
  4. package/dist/BlockEditor.css +1871 -4
  5. package/dist/BlockEditor.js +3960 -336
  6. package/dist/Renderer.js +2081 -2
  7. package/dist/fromHTML.js +78 -1
  8. package/dist/index.css +1871 -4
  9. package/dist/index.js +4037 -336
  10. package/dist/toHTML.js +1689 -2
  11. package/dist/toText.js +1689 -2
  12. package/package.json +2 -2
  13. package/postcss.config.js +6 -6
  14. package/scss/demo.scss +148 -148
  15. package/scss/sidebarEditor.scss +181 -181
  16. package/scss/toolbar.scss +161 -161
  17. package/src/Blocks/EmptyBlock.js +11 -11
  18. package/src/Blocks/EmptyWrapper.js +4 -4
  19. package/src/Blocks/ErrorBoundary.js +40 -40
  20. package/src/Blocks/LayoutBlock.js +274 -274
  21. package/src/Blocks/LayoutSlot.js +90 -90
  22. package/src/CollapsableMenu/CollapsableMenu.js +48 -48
  23. package/src/Context/StorybookContext.js +6 -6
  24. package/src/ElementAutocomplete.js +133 -133
  25. package/src/Loader.js +137 -137
  26. package/src/Nodes/Default.js +158 -158
  27. package/src/Nodes/Leaf.js +54 -54
  28. package/src/Nodes/Text.js +97 -97
  29. package/src/ObjectId.js +3 -3
  30. package/src/Renderer.js +73 -73
  31. package/src/Serializer/Html.js +42 -42
  32. package/src/Serializer/Serializer.js +371 -371
  33. package/src/Serializer/Text.js +17 -17
  34. package/src/Serializer/ads.js +174 -174
  35. package/src/Serializer/index.js +3 -3
  36. package/src/SidebarEditor/AssetList.js +181 -181
  37. package/src/SidebarEditor/Fields/CloudinaryContentSelect.js +89 -89
  38. package/src/SidebarEditor/Fields/ColorPicker.js +89 -89
  39. package/src/SidebarEditor/Fields/ContentfulContentSelect.js +62 -62
  40. package/src/SidebarEditor/Fields/DateTime.js +55 -55
  41. package/src/SidebarEditor/Fields/MVP.js +66 -66
  42. package/src/SidebarEditor/Fields/MultiSelect.js +13 -13
  43. package/src/SidebarEditor/Fields/RemoteMultiSelect.js +40 -40
  44. package/src/SidebarEditor/Fields/RemoteSelect.js +39 -39
  45. package/src/SidebarEditor/Fields/Select.js +47 -47
  46. package/src/SidebarEditor/Fields/StreamSelect.js +15 -15
  47. package/src/SidebarEditor/Fields/Switch.js +34 -34
  48. package/src/SidebarEditor/Fields/Textarea.js +21 -21
  49. package/src/SidebarEditor/Resizable.js +85 -85
  50. package/src/Storybook.js +151 -151
  51. package/src/Toolbar/Align.js +64 -64
  52. package/src/Toolbar/Anchor.js +94 -94
  53. package/src/Toolbar/Block.js +135 -135
  54. package/src/Toolbar/Element.js +44 -44
  55. package/src/Toolbar/Formats.js +71 -71
  56. package/src/Toolbar/Insert.js +28 -28
  57. package/src/Toolbar/Layout.js +399 -399
  58. package/src/Toolbar/Link.js +164 -164
  59. package/src/Toolbar/Toolbar.js +235 -235
  60. package/src/Tools/Margin.js +51 -51
  61. package/src/Translation/TranslationToolbarButton.js +115 -115
  62. package/src/dev/draftToSlate.json +3147 -3147
  63. package/src/dev/index.css +2 -2
  64. package/src/dev/index.html +10 -10
  65. package/src/dev/index.js +4 -4
  66. package/src/dev/sampleValue1.json +4294 -4294
  67. package/src/dev/sampleValueValid.json +410 -410
  68. package/src/dev/testComponents/TestStory.js +74 -74
  69. package/src/dev/testComponents/TestStory.stories.js +216 -216
  70. package/src/dev/testComponents/TestStory2.js +74 -74
  71. package/src/dev/testComponents/TestStory2.stories.js +197 -197
  72. package/src/dev/testComponents/TestStory3.js +74 -74
  73. package/src/dev/testComponents/TestStory3.stories.js +197 -197
  74. package/src/dev/testSampleValue.json +746 -746
  75. package/src/fromHTML.js +4 -4
  76. package/src/helper/array.js +8 -8
  77. package/src/index.js +10 -10
  78. package/src/plugins/ListItem.js +48 -48
  79. package/src/plugins/SoftBreak.js +23 -23
  80. package/src/toHTML.js +6 -6
  81. package/src/toText.js +6 -6
  82. package/src/util/reduceContentfulResponse.js +64 -64
  83. package/src/util.js +19 -19
  84. package/storyLoader.js +47 -47
  85. package/tailwind.config.js +4 -4
  86. package/webpack.config.build.js +55 -55
  87. package/webpack.config.dev.js +60 -60
  88. package/webpack.config.js +130 -130
  89. package/webpack.config.watch.js +4 -4
  90. package/dist/BlockEditor.js.LICENSE.txt +0 -61
  91. package/dist/Renderer.js.LICENSE.txt +0 -15
  92. package/dist/index.js.LICENSE.txt +0 -69
  93. package/dist/toHTML.js.LICENSE.txt +0 -23
  94. package/dist/toText.js.LICENSE.txt +0 -23
@@ -1,18 +1,18 @@
1
- import escapeHtml from 'escape-html';
2
- import {Text} from 'slate';
3
-
4
- export const TextSerializer = (slateValue) => {
5
- if (!Array.isArray(slateValue)) {
6
- return "";
7
- }
8
-
9
- return slateValue.map(serializeNode).join('');
10
- };
11
-
12
- export const serializeNode = (node) => {
13
- if (Text.isText(node)) {
14
- return escapeHtml(node.text);
15
- }
16
-
17
- return node.children.map(n => serializeNode(n)).join(' ');
1
+ import escapeHtml from 'escape-html';
2
+ import {Text} from 'slate';
3
+
4
+ export const TextSerializer = (slateValue) => {
5
+ if (!Array.isArray(slateValue)) {
6
+ return "";
7
+ }
8
+
9
+ return slateValue.map(serializeNode).join('');
10
+ };
11
+
12
+ export const serializeNode = (node) => {
13
+ if (Text.isText(node)) {
14
+ return escapeHtml(node.text);
15
+ }
16
+
17
+ return node.children.map(n => serializeNode(n)).join(' ');
18
18
  };
@@ -1,175 +1,175 @@
1
- export const addAdsToValue = (value, adDefinitionDesktop = [], adDefinitionMobile = []) => {
2
- let extendedValue = [];
3
- let counters = {
4
- fullTextCounter: 0,
5
- currTextCounterDesktop: 0,
6
- currTextCounterMobile: 0,
7
- currTextLength: 0,
8
- currElementsChain: [],
9
- };
10
-
11
- let remainingDesktop = [...adDefinitionDesktop];
12
- let remainingMobile = [...adDefinitionMobile];
13
-
14
- for (let i = 0; i < value.length; i++) {
15
- const element = value[i];
16
- const textLength = getElementTextLength(element);
17
- const isPlaceable = isAdPlaceable(element, counters);
18
-
19
- let placementDesktop = "after";
20
- let placementMobile = "after";
21
- let placedAdDesktop = null;
22
- let placedAdMobile = null;
23
-
24
- counters.fullTextCounter += textLength;
25
- counters.currTextCounterDesktop += textLength;
26
- counters.currTextCounterMobile += textLength;
27
- counters.currTextLength = textLength;
28
-
29
- if (isPlaceable) {
30
- const currAd = remainingDesktop.shift();
31
- const currAdMobile = remainingMobile.shift();
32
-
33
- counters.currElementsChain.push(element);
34
-
35
- if (checkAdPlacement(
36
- currAd, counters, counters.currTextCounterDesktop, element,
37
- )) {
38
- placedAdDesktop = currAd;
39
- if (currAd.reset !== false) {
40
- counters.currTextCounterDesktop = 0;
41
- }
42
- }
43
-
44
- if (checkAdPlacement(
45
- currAdMobile, counters, counters.currTextCounterMobile, element,
46
- )) {
47
- placedAdMobile = currAdMobile;
48
- if (currAdMobile.reset !== false) {
49
- counters.currTextCounterMobile = 0;
50
- }
51
- }
52
-
53
- if (placedAdDesktop?.placement) {
54
- placementDesktop = placedAdDesktop?.placement;
55
- } else if (placedAdDesktop?.inline) {
56
- placementDesktop = "before";
57
- }
58
-
59
- if (placedAdMobile?.placement) {
60
- placementMobile = placedAdMobile?.placement;
61
- } else if (placedAdMobile?.inline) {
62
- placementMobile = "before";
63
- }
64
-
65
- if (placedAdDesktop && placementDesktop === "before") {
66
- extendedValue.push(placedAdDesktop.component);
67
- }
68
- if (placedAdMobile && placementMobile === "before") {
69
- extendedValue.push(placedAdMobile.component);
70
- }
71
- extendedValue = extendedValue.concat(counters.currElementsChain);
72
- if (placedAdDesktop && placementDesktop === "after") {
73
- extendedValue.push(placedAdDesktop.component);
74
- }
75
- if (placedAdMobile && placementMobile === "after") {
76
- extendedValue.push(placedAdMobile.component);
77
- }
78
-
79
- counters.currElementsChain = [];
80
-
81
- // add the elements back, did not get placed!
82
- if (!placedAdDesktop && currAd) {
83
- remainingDesktop.unshift(currAd);
84
- }
85
- if (!placedAdMobile && currAdMobile) {
86
- remainingMobile.unshift(currAdMobile);
87
- }
88
- } else {
89
- counters.currElementsChain.push(element);
90
- }
91
- }
92
-
93
- if (counters.currElementsChain.length) {
94
- extendedValue = extendedValue.concat(counters.currElementsChain);
95
- }
96
-
97
- return extendedValue;
98
- };
99
-
100
- /**
101
- * checks if ad is placeable, ads can NOT be placed
102
- * 1. after headlines
103
- * 2. after galleries (should be before)
104
- *
105
- * @param element
106
- * @param counters
107
- */
108
- const isAdPlaceable = (element, counters) => {
109
- const type = element?.type;
110
- const chain = counters?.currElementsChain || [];
111
-
112
- if (type === "paragraph") {
113
- return true;
114
- } else if (type === "storybook") {
115
- return true;
116
- }
117
-
118
- // start of a new chain!
119
- return false;
120
- };
121
-
122
- const checkAdPlacement = (
123
- ad, counters, currTextCounter = 0, element = null,
124
- ) => {
125
- let canBePlaced = false;
126
-
127
- if (!ad) {
128
- return canBePlaced;
129
- }
130
-
131
- // can instantly be placed
132
- if (!ad.space) {
133
- canBePlaced = true;
134
- } else if (currTextCounter > ad.space) {
135
- canBePlaced = true;
136
- }
137
-
138
- // dont allow inline anywhere BUT paragraphs
139
- if (ad?.inline && element?.type !== "paragraph") {
140
- canBePlaced = false;
141
- }
142
-
143
- return canBePlaced;
144
- };
145
-
146
- const getElementTextLength = (el) => {
147
- let textLength = 0;
148
-
149
- // children
150
- if (el.children) {
151
- for (let i = 0; i < el.children.length; i++) {
152
- const child = el.children[i];
153
- textLength += getElementTextLength(child);
154
- }
155
- }
156
-
157
- // generic text
158
- if (el.text) {
159
- textLength += parseInt(el?.text?.length || 0);
160
- }
161
-
162
- // elements
163
- if (el.type === "storybook") {
164
- switch (el?.block) {
165
- case "Media/Image":
166
- case "Media/Gallery":
167
- textLength += 100;
168
- break;
169
- default:
170
- break;
171
- }
172
- }
173
-
174
- return textLength;
1
+ export const addAdsToValue = (value, adDefinitionDesktop = [], adDefinitionMobile = []) => {
2
+ let extendedValue = [];
3
+ let counters = {
4
+ fullTextCounter: 0,
5
+ currTextCounterDesktop: 0,
6
+ currTextCounterMobile: 0,
7
+ currTextLength: 0,
8
+ currElementsChain: [],
9
+ };
10
+
11
+ let remainingDesktop = [...adDefinitionDesktop];
12
+ let remainingMobile = [...adDefinitionMobile];
13
+
14
+ for (let i = 0; i < value.length; i++) {
15
+ const element = value[i];
16
+ const textLength = getElementTextLength(element);
17
+ const isPlaceable = isAdPlaceable(element, counters);
18
+
19
+ let placementDesktop = "after";
20
+ let placementMobile = "after";
21
+ let placedAdDesktop = null;
22
+ let placedAdMobile = null;
23
+
24
+ counters.fullTextCounter += textLength;
25
+ counters.currTextCounterDesktop += textLength;
26
+ counters.currTextCounterMobile += textLength;
27
+ counters.currTextLength = textLength;
28
+
29
+ if (isPlaceable) {
30
+ const currAd = remainingDesktop.shift();
31
+ const currAdMobile = remainingMobile.shift();
32
+
33
+ counters.currElementsChain.push(element);
34
+
35
+ if (checkAdPlacement(
36
+ currAd, counters, counters.currTextCounterDesktop, element,
37
+ )) {
38
+ placedAdDesktop = currAd;
39
+ if (currAd.reset !== false) {
40
+ counters.currTextCounterDesktop = 0;
41
+ }
42
+ }
43
+
44
+ if (checkAdPlacement(
45
+ currAdMobile, counters, counters.currTextCounterMobile, element,
46
+ )) {
47
+ placedAdMobile = currAdMobile;
48
+ if (currAdMobile.reset !== false) {
49
+ counters.currTextCounterMobile = 0;
50
+ }
51
+ }
52
+
53
+ if (placedAdDesktop?.placement) {
54
+ placementDesktop = placedAdDesktop?.placement;
55
+ } else if (placedAdDesktop?.inline) {
56
+ placementDesktop = "before";
57
+ }
58
+
59
+ if (placedAdMobile?.placement) {
60
+ placementMobile = placedAdMobile?.placement;
61
+ } else if (placedAdMobile?.inline) {
62
+ placementMobile = "before";
63
+ }
64
+
65
+ if (placedAdDesktop && placementDesktop === "before") {
66
+ extendedValue.push(placedAdDesktop.component);
67
+ }
68
+ if (placedAdMobile && placementMobile === "before") {
69
+ extendedValue.push(placedAdMobile.component);
70
+ }
71
+ extendedValue = extendedValue.concat(counters.currElementsChain);
72
+ if (placedAdDesktop && placementDesktop === "after") {
73
+ extendedValue.push(placedAdDesktop.component);
74
+ }
75
+ if (placedAdMobile && placementMobile === "after") {
76
+ extendedValue.push(placedAdMobile.component);
77
+ }
78
+
79
+ counters.currElementsChain = [];
80
+
81
+ // add the elements back, did not get placed!
82
+ if (!placedAdDesktop && currAd) {
83
+ remainingDesktop.unshift(currAd);
84
+ }
85
+ if (!placedAdMobile && currAdMobile) {
86
+ remainingMobile.unshift(currAdMobile);
87
+ }
88
+ } else {
89
+ counters.currElementsChain.push(element);
90
+ }
91
+ }
92
+
93
+ if (counters.currElementsChain.length) {
94
+ extendedValue = extendedValue.concat(counters.currElementsChain);
95
+ }
96
+
97
+ return extendedValue;
98
+ };
99
+
100
+ /**
101
+ * checks if ad is placeable, ads can NOT be placed
102
+ * 1. after headlines
103
+ * 2. after galleries (should be before)
104
+ *
105
+ * @param element
106
+ * @param counters
107
+ */
108
+ const isAdPlaceable = (element, counters) => {
109
+ const type = element?.type;
110
+ const chain = counters?.currElementsChain || [];
111
+
112
+ if (type === "paragraph") {
113
+ return true;
114
+ } else if (type === "storybook") {
115
+ return true;
116
+ }
117
+
118
+ // start of a new chain!
119
+ return false;
120
+ };
121
+
122
+ const checkAdPlacement = (
123
+ ad, counters, currTextCounter = 0, element = null,
124
+ ) => {
125
+ let canBePlaced = false;
126
+
127
+ if (!ad) {
128
+ return canBePlaced;
129
+ }
130
+
131
+ // can instantly be placed
132
+ if (!ad.space) {
133
+ canBePlaced = true;
134
+ } else if (currTextCounter > ad.space) {
135
+ canBePlaced = true;
136
+ }
137
+
138
+ // dont allow inline anywhere BUT paragraphs
139
+ if (ad?.inline && element?.type !== "paragraph") {
140
+ canBePlaced = false;
141
+ }
142
+
143
+ return canBePlaced;
144
+ };
145
+
146
+ const getElementTextLength = (el) => {
147
+ let textLength = 0;
148
+
149
+ // children
150
+ if (el.children) {
151
+ for (let i = 0; i < el.children.length; i++) {
152
+ const child = el.children[i];
153
+ textLength += getElementTextLength(child);
154
+ }
155
+ }
156
+
157
+ // generic text
158
+ if (el.text) {
159
+ textLength += parseInt(el?.text?.length || 0);
160
+ }
161
+
162
+ // elements
163
+ if (el.type === "storybook") {
164
+ switch (el?.block) {
165
+ case "Media/Image":
166
+ case "Media/Gallery":
167
+ textLength += 100;
168
+ break;
169
+ default:
170
+ break;
171
+ }
172
+ }
173
+
174
+ return textLength;
175
175
  };
@@ -1,4 +1,4 @@
1
- import {Serializer} from "./Serializer";
2
- import {HtmlSerializer} from "./Html";
3
-
1
+ import {Serializer} from "./Serializer";
2
+ import {HtmlSerializer} from "./Html";
3
+
4
4
  export {Serializer, HtmlSerializer};