@vonaffenfels/contentful-slate-editor 1.0.26 → 1.0.28

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 (4) hide show
  1. package/package.json +4 -4
  2. package/src/components/EditorField.js +42 -3
  3. package/src/scss/index.scss +1 -0
  4. package/webpack.config.js +22 -8
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vonaffenfels/contentful-slate-editor",
3
- "version": "1.0.26",
3
+ "version": "1.0.28",
4
4
  "scripts": {
5
5
  "prepublish": "yarn run build",
6
6
  "dev": "yarn run start",
@@ -89,10 +89,10 @@
89
89
  "webpack-dev-server": "^4.0.0-beta.2"
90
90
  },
91
91
  "dependencies": {
92
- "@vonaffenfels/slate-editor": "^1.0.26",
93
- "webpack": "5.73.0"
92
+ "@vonaffenfels/slate-editor": "^1.0.28",
93
+ "webpack": "5.88.2"
94
94
  },
95
- "gitHead": "7089b60e41691c2c382e25c8447f74d0bd031aaa",
95
+ "gitHead": "fe5a1e14e437b67a1aa58fa6781b9ae134914750",
96
96
  "publishConfig": {
97
97
  "access": "public"
98
98
  }
package/src/components/EditorField.js CHANGED
@@ -11,6 +11,9 @@ import storybookStories from "storybookStories";
11
11
  // eslint-disable-next-line import/no-unresolved
12
12
  import componentLoader from "@vonaffenfels/slate-editor/componentLoader";
13
13
 
14
+ let isLoadingCountGlobal = 0;
15
+ let controller = new AbortController();
16
+
14
17
  const EditorField = ({
15
18
  fieldSdk,
16
19
  windowSdk,
@@ -32,7 +35,9 @@ const EditorField = ({
32
35
  },
33
36
  ];
34
37
  const [value, setValue] = useState(validateValue(loadedValue));
38
+ const [stories, setStories] = useState([]);
35
39
  const [externalValue, setExternalValue] = useState(value);
40
+ const [isLoadingCount, setIsLoadingCount] = useState(isLoadingCount);
36
41
  const isVisible = useOnScreen(wrapperRef);
37
42
 
38
43
  function validateValue(value) {
@@ -61,6 +66,8 @@ const EditorField = ({
61
66
  if (windowSdk) {
62
67
  windowSdk.startAutoResizer();
63
68
  }
69
+
70
+ storybookStories().then(s => setStories(s));
64
71
  }, []);
65
72
 
66
73
  useEffect(() => {
@@ -89,7 +96,7 @@ const EditorField = ({
89
96
  fakeActiveContent[field] = entrySdk.fields[field].getValue();
90
97
  }
91
98
 
92
- return <div ref={wrapperRef} className="editor-field">
99
+ return <div ref={wrapperRef} className="editor-field h-full">
93
100
  <BlockEditor
94
101
  onChange={onChange}
95
102
  value={validateValue(value)}
@@ -97,9 +104,41 @@ const EditorField = ({
97
104
  config={JSON.parse("{}")}
98
105
  elementPropsMap={elementPropsMap}
99
106
  storybookComponentLoader={componentLoader}
100
- storybookStories={storybookStories}
107
+ storybookStories={stories}
108
+ isLoading={isLoadingCount !== 0}
101
109
  storybookComponentDataLoader={async (block, attributes) => {
102
- return [];
110
+ let loaderResult = {};
111
+ setIsLoadingCount(++isLoadingCountGlobal);
112
+
113
+ controller.abort();
114
+
115
+ controller = new AbortController();
116
+
117
+ try {
118
+ const fetchUrl = `/api/loader/?${new URLSearchParams({
119
+ portal: portal,
120
+ block: block,
121
+ variables: JSON.stringify({
122
+ ...attributes,
123
+ entries: null,
124
+ items: null,
125
+ }),
126
+ })}`;
127
+ loaderResult = await fetch(fetchUrl, {signal: controller.signal}).then(res => res.json());
128
+
129
+ if (loaderResult) {
130
+ for (let key in loaderResult) {
131
+ attributes[key] = loaderResult[key];
132
+ }
133
+ }
134
+ } catch (e) {
135
+ console.error(`Error in loader for ${block}`);
136
+ console.error(e);
137
+ }
138
+
139
+ setIsLoadingCount(--isLoadingCountGlobal);
140
+
141
+ return loaderResult;
103
142
  }}
104
143
  onStorybookElementClick={onStorybookElementClick}
105
144
  />
package/src/scss/index.scss CHANGED
@@ -12,6 +12,7 @@ html, body, div {
12
12
  }
13
13
 
14
14
  .editor-field {
15
+ position: relative;
15
16
  height: 100%;
16
17
  }
17
18
 
package/webpack.config.js CHANGED
@@ -72,11 +72,21 @@ module.exports = ({
72
72
  },
73
73
  {
74
74
  test: /\.s[ac]ss$/i,
75
- include: path.resolve(__dirname, 'src', 'scss'),
75
+ include: [
76
+ path.resolve(__dirname, 'src', 'scss'),
77
+ relativePathToComponents,
78
+ ...transpilePaths,
79
+ ],
76
80
  use: [
77
81
  "style-loader",
78
- {loader: 'css-loader', options: {importLoaders: 1}},
79
- {loader: 'postcss-loader', options: {postcssOptions: postCssConfig}},
82
+ {
83
+ loader: 'css-loader',
84
+ options: {importLoaders: 1},
85
+ },
86
+ {
87
+ loader: 'postcss-loader',
88
+ options: {postcssOptions: postCssConfig},
89
+ },
80
90
  "sass-loader",
81
91
  ],
82
92
  },
@@ -91,7 +101,10 @@ module.exports = ({
91
101
  modules: {exportLocalsConvention: "camelCase"},
92
102
  },
93
103
  },
94
- {loader: 'postcss-loader', options: {postcssOptions: postCssConfig}},
104
+ {
105
+ loader: 'postcss-loader',
106
+ options: {postcssOptions: postCssConfig},
107
+ },
95
108
  ],
96
109
  },
97
110
  {
@@ -103,7 +116,10 @@ module.exports = ({
103
116
  loader: 'css-loader',
104
117
  options: {importLoaders: 1},
105
118
  },
106
- {loader: 'postcss-loader', options: {postcssOptions: postCssConfig}},
119
+ {
120
+ loader: 'postcss-loader',
121
+ options: {postcssOptions: postCssConfig},
122
+ },
107
123
  ],
108
124
  },
109
125
  {
@@ -152,9 +168,7 @@ module.exports = ({
152
168
  path: false,
153
169
  timers: false,
154
170
  },
155
- alias: {
156
- storybookStories: '@vonaffenfels/slate-editor/storyLoader.js',
157
- },
171
+ alias: {storybookStories: '@vonaffenfels/slate-editor/storyLoader.js'},
158
172
  },
159
173
  output: {
160
174
  filename: '[name].js',