@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
@@ -0,0 +1,23 @@
1
+ /*!
2
+ * escape-html
3
+ * Copyright(c) 2012-2013 TJ Holowaychuk
4
+ * Copyright(c) 2015 Andreas Lubbe
5
+ * Copyright(c) 2015 Tiancheng "Timothy" Gu
6
+ * MIT Licensed
7
+ */
8
+
9
+ /*!
10
+ * is-plain-object <https://github.com/jonschlinkert/is-plain-object>
11
+ *
12
+ * Copyright (c) 2014-2017, Jon Schlinkert.
13
+ * Released under the MIT License.
14
+ */
15
+
16
+ /*!
17
+ * isobject <https://github.com/jonschlinkert/isobject>
18
+ *
19
+ * Copyright (c) 2014-2017, Jon Schlinkert.
20
+ * Released under the MIT License.
21
+ */
22
+
23
+ /*! https://mths.be/esrever v0.2.0 by @mathias */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vonaffenfels/slate-editor",
3
- "version": "1.1.71",
3
+ "version": "1.2.10",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
@@ -72,7 +72,7 @@
72
72
  "cssnano": "^5.0.1",
73
73
  "escape-html": "^1.0.3"
74
74
  },
75
- "gitHead": "0677709b6ead1d574706f5b33b9068fdfeac2509",
75
+ "gitHead": "2fb71335ee7a1a3578e463b6c9c37ddb99e1f018",
76
76
  "publishConfig": {
77
77
  "access": "public"
78
78
  }
package/postcss.config.js CHANGED
@@ -1,7 +1,7 @@
1
- module.exports = {
2
- plugins: {
3
- 'postcss-import': {},
4
- tailwindcss: {},
5
- autoprefixer: {},
6
- },
1
+ module.exports = {
2
+ plugins: {
3
+ 'postcss-import': {},
4
+ tailwindcss: {},
5
+ autoprefixer: {},
6
+ },
7
7
  };
package/scss/demo.scss CHANGED
@@ -1,149 +1,149 @@
1
- html, body, #root {
2
- height: 100%;
3
- width: 100%;
4
- }
5
-
6
- @media (prefers-color-scheme: dark) {
7
- .slate-editor {
8
- color: white;
9
- background-color: #1c1c27;
10
- }
11
- }
12
-
13
- .editor-demo-wrapper {
14
- display: flex;
15
- height: 100%;
16
- justify-content: center;
17
- width: 100%;
18
- flex-direction: column;
19
-
20
- .editor-demo-output {
21
- display: none;
22
- width: 100%;
23
- }
24
-
25
- .editor-demo {
26
- display: block;
27
- flex: 1;
28
- height: 100%;
29
- width: 100%;
30
- position: relative;
31
-
32
- .editor-demo-editor {
33
- display: flex;
34
- height: 100%;
35
- position: relative;
36
- width: 100%;
37
- padding-top: 40px;
38
-
39
- &.container {
40
- display: flex;
41
- flex: 1;
42
- justify-content: center;
43
- min-width: 100%;
44
- min-height: 100%;
45
- position: relative;
46
-
47
- &.block-editor-wrapper {
48
- flex-grow: 1;
49
- //max-width: 703px;
50
- //width: 703px; // contentful editor default width
51
- }
52
- }
53
-
54
- &.value {
55
- textarea {
56
- max-height: 50px;
57
- }
58
- }
59
- }
60
- }
61
- }
62
-
63
- .test-block {
64
- background-color: #fefefe;
65
- border: 1px solid black;
66
- color: black;
67
- padding: 5px;
68
- }
69
-
70
- .block-editor-content {
71
- font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
72
- line-height: 1em;
73
- }
74
-
75
- .block-editor-content p {
76
- margin-bottom: 20px;
77
- }
78
-
79
- .block-editor-content h1 {
80
- font-size: 2em;
81
- margin-bottom: 2em;
82
- }
83
-
84
- .block-editor-content h2 {
85
- font-size: 1.5em;
86
- margin-bottom: 1em;
87
- }
88
-
89
- .block-editor-content h3 {
90
- font-size: 1.3em;
91
- margin-bottom: 1em;
92
- }
93
-
94
- .block-editor-content h4 {
95
- font-size: 1.1em;
96
- margin-bottom: 1em;
97
- }
98
-
99
- .block-editor-content h5,
100
- .block-editor-content h6 {
101
- font-size: 1em;
102
- margin-bottom: 1em;
103
- }
104
-
105
- .block-editor-content ul, .block-editor-content ol {
106
- margin-block-start: 1em;
107
- margin-block-end: 1em;
108
- margin-inline-start: 0px;
109
- margin-inline-end: 0px;
110
- padding-inline-start: 40px;
111
- }
112
-
113
- .block-editor-content ul {
114
- list-style-type: disc;
115
- }
116
-
117
- .block-editor-content ol {
118
- list-style-type: decimal;
119
- }
120
-
121
- .block-editor-content blockquote {
122
- display: block;
123
- background-color: grey;
124
- padding: 1em;
125
- }
126
-
127
- .block-editor-content a,
128
- .block-editor-content a:visited {
129
- color: blue;
130
- cursor: pointer;
131
- }
132
-
133
-
134
- .block-editor-content a:hover {
135
- text-decoration: underline;
136
- }
137
-
138
- .editor-mt-16 {
139
- @apply pt-16 block;
140
- }
141
- .editor-mr-16 {
142
- @apply md:pr-16 block;
143
- }
144
- .editor-mb-16 {
145
- @apply pb-16 block;
146
- }
147
- .editor-ml-16 {
148
- @apply md:pl-16 block;
1
+ html, body, #root {
2
+ height: 100%;
3
+ width: 100%;
4
+ }
5
+
6
+ @media (prefers-color-scheme: dark) {
7
+ .slate-editor {
8
+ color: white;
9
+ background-color: #1c1c27;
10
+ }
11
+ }
12
+
13
+ .editor-demo-wrapper {
14
+ display: flex;
15
+ height: 100%;
16
+ justify-content: center;
17
+ width: 100%;
18
+ flex-direction: column;
19
+
20
+ .editor-demo-output {
21
+ display: none;
22
+ width: 100%;
23
+ }
24
+
25
+ .editor-demo {
26
+ display: block;
27
+ flex: 1;
28
+ height: 100%;
29
+ width: 100%;
30
+ position: relative;
31
+
32
+ .editor-demo-editor {
33
+ display: flex;
34
+ height: 100%;
35
+ position: relative;
36
+ width: 100%;
37
+ padding-top: 40px;
38
+
39
+ &.container {
40
+ display: flex;
41
+ flex: 1;
42
+ justify-content: center;
43
+ min-width: 100%;
44
+ min-height: 100%;
45
+ position: relative;
46
+
47
+ &.block-editor-wrapper {
48
+ flex-grow: 1;
49
+ //max-width: 703px;
50
+ //width: 703px; // contentful editor default width
51
+ }
52
+ }
53
+
54
+ &.value {
55
+ textarea {
56
+ max-height: 50px;
57
+ }
58
+ }
59
+ }
60
+ }
61
+ }
62
+
63
+ .test-block {
64
+ background-color: #fefefe;
65
+ border: 1px solid black;
66
+ color: black;
67
+ padding: 5px;
68
+ }
69
+
70
+ .block-editor-content {
71
+ font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
72
+ line-height: 1em;
73
+ }
74
+
75
+ .block-editor-content p {
76
+ margin-bottom: 20px;
77
+ }
78
+
79
+ .block-editor-content h1 {
80
+ font-size: 2em;
81
+ margin-bottom: 2em;
82
+ }
83
+
84
+ .block-editor-content h2 {
85
+ font-size: 1.5em;
86
+ margin-bottom: 1em;
87
+ }
88
+
89
+ .block-editor-content h3 {
90
+ font-size: 1.3em;
91
+ margin-bottom: 1em;
92
+ }
93
+
94
+ .block-editor-content h4 {
95
+ font-size: 1.1em;
96
+ margin-bottom: 1em;
97
+ }
98
+
99
+ .block-editor-content h5,
100
+ .block-editor-content h6 {
101
+ font-size: 1em;
102
+ margin-bottom: 1em;
103
+ }
104
+
105
+ .block-editor-content ul, .block-editor-content ol {
106
+ margin-block-start: 1em;
107
+ margin-block-end: 1em;
108
+ margin-inline-start: 0px;
109
+ margin-inline-end: 0px;
110
+ padding-inline-start: 40px;
111
+ }
112
+
113
+ .block-editor-content ul {
114
+ list-style-type: disc;
115
+ }
116
+
117
+ .block-editor-content ol {
118
+ list-style-type: decimal;
119
+ }
120
+
121
+ .block-editor-content blockquote {
122
+ display: block;
123
+ background-color: grey;
124
+ padding: 1em;
125
+ }
126
+
127
+ .block-editor-content a,
128
+ .block-editor-content a:visited {
129
+ color: blue;
130
+ cursor: pointer;
131
+ }
132
+
133
+
134
+ .block-editor-content a:hover {
135
+ text-decoration: underline;
136
+ }
137
+
138
+ .editor-mt-16 {
139
+ @apply pt-16 block;
140
+ }
141
+ .editor-mr-16 {
142
+ @apply md:pr-16 block;
143
+ }
144
+ .editor-mb-16 {
145
+ @apply pb-16 block;
146
+ }
147
+ .editor-ml-16 {
148
+ @apply md:pl-16 block;
149
149
  }
package/scss/editor.scss CHANGED
@@ -2,6 +2,10 @@
2
2
  @tailwind components;
3
3
  @tailwind utilities;
4
4
 
5
+ input {
6
+ background-image: none !important;
7
+ }
8
+
5
9
  .block-editor-wrapper {
6
10
 
7
11
  position: relative;
@@ -433,21 +437,29 @@
433
437
  .resizable {
434
438
 
435
439
  &.enabled {
436
- .resizable-left {
437
- max-width: calc(100vw - 300px);
440
+ @media (max-width: 360px) {
441
+ .resizable-left {
442
+ max-width: calc(100vw - 300px);
443
+ }
444
+
445
+ .resizable-right {
446
+ width: 100%;
447
+ }
438
448
  }
439
449
  }
440
450
 
441
451
  .resizable-left {
442
452
  scrollbar-width: none;
443
- max-width: 100vw;
444
453
  position: relative;
445
454
  }
446
455
 
447
456
  .resizable-right {
448
457
  scrollbar-width: none;
449
- max-width: calc(100vw - 300px);
450
- position: relative;
458
+ max-width: 300px;
459
+ height: 100%;
460
+ position: absolute;
461
+ right: 0;
462
+ top: 0;
451
463
  }
452
464
 
453
465
  .resizable-x-handle {