@vonaffenfels/contentful-slate-editor 1.2.30 → 1.2.36
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.
- package/.babelrc +37 -37
- package/Readme.md +9 -9
- package/package.json +3 -3
- package/postcss.config.js +6 -6
- package/src/components/ConfigScreen.js +118 -118
- package/src/components/DialogCloudinary.js +51 -51
- package/src/components/DialogTranslation.js +316 -316
- package/src/components/EntryEditor.js +50 -50
- package/src/components/Field.js +71 -71
- package/src/components/Sidebar.js +92 -92
- package/src/dev.js +4 -4
- package/src/hooks/useOnScreen.js +23 -23
- package/src/index.html +11 -11
- package/src/index.js +85 -85
- package/src/scss/dialog-cloudinary.scss +17 -17
- package/src/scss/index.scss +24 -24
- package/tailwind.config.js +4 -4
- package/webpack.config.dev.js +25 -25
- package/webpack.config.js +197 -197
package/src/index.js
CHANGED
|
@@ -1,86 +1,86 @@
|
|
|
1
|
-
import React, {useState} from 'react';
|
|
2
|
-
import {createRoot} from 'react-dom/client';
|
|
3
|
-
|
|
4
|
-
import {
|
|
5
|
-
init,
|
|
6
|
-
locations,
|
|
7
|
-
} from '@contentful/app-sdk';
|
|
8
|
-
import '@contentful/forma-36-react-components/dist/styles.css';
|
|
9
|
-
import '@contentful/forma-36-fcss/dist/styles.css';
|
|
10
|
-
import '@contentful/forma-36-tokens/dist/css/index.css';
|
|
11
|
-
import '@vonaffenfels/slate-editor/dist/index.css';
|
|
12
|
-
|
|
13
|
-
import EntryEditor from './components/EntryEditor';
|
|
14
|
-
import Config from './components/ConfigScreen';
|
|
15
|
-
import Field from './components/Field';
|
|
16
|
-
import Dialog from "./components/Dialog";
|
|
17
|
-
import {Sidebar} from "./components/Sidebar";
|
|
18
|
-
|
|
19
|
-
export const BaseContentfulApp = (props) => {
|
|
20
|
-
init(async (sdk) => {
|
|
21
|
-
const rootContainer = document.getElementById('root');
|
|
22
|
-
const RendererWrapperComponent = props?.RendererWrapperComponent || (({children}) => <div
|
|
23
|
-
className="h-full">{children}</div>);
|
|
24
|
-
const wrapperProps = {
|
|
25
|
-
sdk,
|
|
26
|
-
value: sdk.parameters?.invocation?.value || sdk?.field?.getValue(),
|
|
27
|
-
portal: sdk.parameters?.invocation?.portal || sdk?.entry?.fields?.portal.getValue(),
|
|
28
|
-
contentType: sdk.parameters?.invocation?.contentType || sdk?.entry?.getSys()?.contentType?.sys?.id,
|
|
29
|
-
};
|
|
30
|
-
const elementPropsMap = props?.getElementPropsMap?.(wrapperProps.contentType) || props?.elementPropsMap;
|
|
31
|
-
|
|
32
|
-
let config = {};
|
|
33
|
-
|
|
34
|
-
if (wrapperProps.portal && props.getByPortal) {
|
|
35
|
-
try {
|
|
36
|
-
config = await props.getByPortal(wrapperProps.portal);
|
|
37
|
-
|
|
38
|
-
if (props.getDomain) {
|
|
39
|
-
config.domain = props.getDomain(wrapperProps.portal);
|
|
40
|
-
}
|
|
41
|
-
} catch (e) {
|
|
42
|
-
console.error(`Error in getting config for portal ${wrapperProps.portal}`, e);
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
const ComponentLocationSettings = [
|
|
47
|
-
{
|
|
48
|
-
location: locations.LOCATION_APP_CONFIG,
|
|
49
|
-
component: <Config sdk={sdk}/>,
|
|
50
|
-
},
|
|
51
|
-
{
|
|
52
|
-
location: locations.LOCATION_ENTRY_FIELD,
|
|
53
|
-
component: <RendererWrapperComponent {...wrapperProps}><Field
|
|
54
|
-
sdk={sdk}
|
|
55
|
-
elementPropsMap={elementPropsMap}/></RendererWrapperComponent>,
|
|
56
|
-
},
|
|
57
|
-
{
|
|
58
|
-
location: locations.LOCATION_ENTRY_EDITOR,
|
|
59
|
-
component: <RendererWrapperComponent {...wrapperProps}><EntryEditor
|
|
60
|
-
elementPropsMap={elementPropsMap}
|
|
61
|
-
sdk={sdk}
|
|
62
|
-
onStorybookElementClick={element => {
|
|
63
|
-
const storybookElementChangeEvent = new CustomEvent("storybookElementChange", {detail: element});
|
|
64
|
-
|
|
65
|
-
window.parent.document.dispatchEvent(storybookElementChangeEvent);
|
|
66
|
-
}}
|
|
67
|
-
activeConfig={config}/></RendererWrapperComponent>,
|
|
68
|
-
},
|
|
69
|
-
{
|
|
70
|
-
location: locations.LOCATION_DIALOG,
|
|
71
|
-
component: <Dialog sdk={sdk} elementPropsMap={elementPropsMap} activeConfig={config}/>,
|
|
72
|
-
},
|
|
73
|
-
{
|
|
74
|
-
location: locations.LOCATION_ENTRY_SIDEBAR,
|
|
75
|
-
component: <Sidebar sdk={sdk} activeConfig={config}/>,
|
|
76
|
-
},
|
|
77
|
-
];
|
|
78
|
-
|
|
79
|
-
ComponentLocationSettings.forEach((componentLocationSetting) => {
|
|
80
|
-
if (sdk.location.is(componentLocationSetting.location)) {
|
|
81
|
-
const root = createRoot(rootContainer); // createRoot(container!) if you use TypeScript
|
|
82
|
-
root.render(componentLocationSetting.component);
|
|
83
|
-
}
|
|
84
|
-
});
|
|
85
|
-
});
|
|
1
|
+
import React, {useState} from 'react';
|
|
2
|
+
import {createRoot} from 'react-dom/client';
|
|
3
|
+
|
|
4
|
+
import {
|
|
5
|
+
init,
|
|
6
|
+
locations,
|
|
7
|
+
} from '@contentful/app-sdk';
|
|
8
|
+
import '@contentful/forma-36-react-components/dist/styles.css';
|
|
9
|
+
import '@contentful/forma-36-fcss/dist/styles.css';
|
|
10
|
+
import '@contentful/forma-36-tokens/dist/css/index.css';
|
|
11
|
+
import '@vonaffenfels/slate-editor/dist/index.css';
|
|
12
|
+
|
|
13
|
+
import EntryEditor from './components/EntryEditor';
|
|
14
|
+
import Config from './components/ConfigScreen';
|
|
15
|
+
import Field from './components/Field';
|
|
16
|
+
import Dialog from "./components/Dialog";
|
|
17
|
+
import {Sidebar} from "./components/Sidebar";
|
|
18
|
+
|
|
19
|
+
export const BaseContentfulApp = (props) => {
|
|
20
|
+
init(async (sdk) => {
|
|
21
|
+
const rootContainer = document.getElementById('root');
|
|
22
|
+
const RendererWrapperComponent = props?.RendererWrapperComponent || (({children}) => <div
|
|
23
|
+
className="h-full">{children}</div>);
|
|
24
|
+
const wrapperProps = {
|
|
25
|
+
sdk,
|
|
26
|
+
value: sdk.parameters?.invocation?.value || sdk?.field?.getValue(),
|
|
27
|
+
portal: sdk.parameters?.invocation?.portal || sdk?.entry?.fields?.portal.getValue(),
|
|
28
|
+
contentType: sdk.parameters?.invocation?.contentType || sdk?.entry?.getSys()?.contentType?.sys?.id,
|
|
29
|
+
};
|
|
30
|
+
const elementPropsMap = props?.getElementPropsMap?.(wrapperProps.contentType) || props?.elementPropsMap;
|
|
31
|
+
|
|
32
|
+
let config = {};
|
|
33
|
+
|
|
34
|
+
if (wrapperProps.portal && props.getByPortal) {
|
|
35
|
+
try {
|
|
36
|
+
config = await props.getByPortal(wrapperProps.portal);
|
|
37
|
+
|
|
38
|
+
if (props.getDomain) {
|
|
39
|
+
config.domain = props.getDomain(wrapperProps.portal);
|
|
40
|
+
}
|
|
41
|
+
} catch (e) {
|
|
42
|
+
console.error(`Error in getting config for portal ${wrapperProps.portal}`, e);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
const ComponentLocationSettings = [
|
|
47
|
+
{
|
|
48
|
+
location: locations.LOCATION_APP_CONFIG,
|
|
49
|
+
component: <Config sdk={sdk}/>,
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
location: locations.LOCATION_ENTRY_FIELD,
|
|
53
|
+
component: <RendererWrapperComponent {...wrapperProps}><Field
|
|
54
|
+
sdk={sdk}
|
|
55
|
+
elementPropsMap={elementPropsMap}/></RendererWrapperComponent>,
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
location: locations.LOCATION_ENTRY_EDITOR,
|
|
59
|
+
component: <RendererWrapperComponent {...wrapperProps}><EntryEditor
|
|
60
|
+
elementPropsMap={elementPropsMap}
|
|
61
|
+
sdk={sdk}
|
|
62
|
+
onStorybookElementClick={element => {
|
|
63
|
+
const storybookElementChangeEvent = new CustomEvent("storybookElementChange", {detail: element});
|
|
64
|
+
|
|
65
|
+
window.parent.document.dispatchEvent(storybookElementChangeEvent);
|
|
66
|
+
}}
|
|
67
|
+
activeConfig={config}/></RendererWrapperComponent>,
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
location: locations.LOCATION_DIALOG,
|
|
71
|
+
component: <Dialog sdk={sdk} elementPropsMap={elementPropsMap} activeConfig={config}/>,
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
location: locations.LOCATION_ENTRY_SIDEBAR,
|
|
75
|
+
component: <Sidebar sdk={sdk} activeConfig={config}/>,
|
|
76
|
+
},
|
|
77
|
+
];
|
|
78
|
+
|
|
79
|
+
ComponentLocationSettings.forEach((componentLocationSetting) => {
|
|
80
|
+
if (sdk.location.is(componentLocationSetting.location)) {
|
|
81
|
+
const root = createRoot(rootContainer); // createRoot(container!) if you use TypeScript
|
|
82
|
+
root.render(componentLocationSetting.component);
|
|
83
|
+
}
|
|
84
|
+
});
|
|
85
|
+
});
|
|
86
86
|
};
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
html, body, #root, #root > div {
|
|
2
|
-
width: 100%;
|
|
3
|
-
height: 100%;
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
.cloudinary-dialog {
|
|
7
|
-
width: 100%;
|
|
8
|
-
height: 100%;
|
|
9
|
-
min-width: 100%;
|
|
10
|
-
min-height: 100%;
|
|
11
|
-
|
|
12
|
-
iframe {
|
|
13
|
-
width: 100%;
|
|
14
|
-
height: 100%;
|
|
15
|
-
min-width: 100%;
|
|
16
|
-
min-height: 100%;
|
|
17
|
-
}
|
|
1
|
+
html, body, #root, #root > div {
|
|
2
|
+
width: 100%;
|
|
3
|
+
height: 100%;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.cloudinary-dialog {
|
|
7
|
+
width: 100%;
|
|
8
|
+
height: 100%;
|
|
9
|
+
min-width: 100%;
|
|
10
|
+
min-height: 100%;
|
|
11
|
+
|
|
12
|
+
iframe {
|
|
13
|
+
width: 100%;
|
|
14
|
+
height: 100%;
|
|
15
|
+
min-width: 100%;
|
|
16
|
+
min-height: 100%;
|
|
17
|
+
}
|
|
18
18
|
}
|
package/src/scss/index.scss
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
@tailwind base;
|
|
2
|
-
@tailwind components;
|
|
3
|
-
@tailwind utilities;
|
|
4
|
-
|
|
5
|
-
html, body, div {
|
|
6
|
-
margin: 0;
|
|
7
|
-
padding: 0;
|
|
8
|
-
border: 0;
|
|
9
|
-
font-size: 100%;
|
|
10
|
-
font: inherit;
|
|
11
|
-
vertical-align: baseline;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.editor-field {
|
|
15
|
-
position: relative;
|
|
16
|
-
height: 100%;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
@media (prefers-color-scheme: dark) {
|
|
20
|
-
.editor-field {
|
|
21
|
-
color: white;
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
|
|
1
|
+
@tailwind base;
|
|
2
|
+
@tailwind components;
|
|
3
|
+
@tailwind utilities;
|
|
4
|
+
|
|
5
|
+
html, body, div {
|
|
6
|
+
margin: 0;
|
|
7
|
+
padding: 0;
|
|
8
|
+
border: 0;
|
|
9
|
+
font-size: 100%;
|
|
10
|
+
font: inherit;
|
|
11
|
+
vertical-align: baseline;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.editor-field {
|
|
15
|
+
position: relative;
|
|
16
|
+
height: 100%;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@media (prefers-color-scheme: dark) {
|
|
20
|
+
.editor-field {
|
|
21
|
+
color: white;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
package/tailwind.config.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
module.exports = {
|
|
2
|
-
content: [
|
|
3
|
-
'./src/**/*.js',
|
|
4
|
-
],
|
|
1
|
+
module.exports = {
|
|
2
|
+
content: [
|
|
3
|
+
'./src/**/*.js',
|
|
4
|
+
],
|
|
5
5
|
};
|
package/webpack.config.dev.js
CHANGED
|
@@ -1,26 +1,26 @@
|
|
|
1
|
-
const path = require('path');
|
|
2
|
-
let config = require("./webpack.config")({
|
|
3
|
-
componentImportRoot: "@vonaffenfels/slate-editor/src/dev/testComponents",
|
|
4
|
-
relativePathToComponents: path.resolve(__dirname + "../../../@base/slate-editor/src/dev/testComponents"),
|
|
5
|
-
});
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
config.entry = {index: './src/dev.js'};
|
|
9
|
-
|
|
10
|
-
config.mode = "development";
|
|
11
|
-
config.watch = true;
|
|
12
|
-
config.watchOptions = {ignored: ['dist/**', 'node_modules/**']};
|
|
13
|
-
config.cache = {type: "memory"};
|
|
14
|
-
|
|
15
|
-
config.output.publicPath = "/dist/";
|
|
16
|
-
config.devtool = 'inline-source-map';
|
|
17
|
-
|
|
18
|
-
config.devServer = {
|
|
19
|
-
static: path.join(__dirname, 'dist'),
|
|
20
|
-
compress: true,
|
|
21
|
-
historyApiFallback: true,
|
|
22
|
-
port: process.env.PORT,
|
|
23
|
-
devMiddleware: {writeToDisk: true},
|
|
24
|
-
};
|
|
25
|
-
|
|
1
|
+
const path = require('path');
|
|
2
|
+
let config = require("./webpack.config")({
|
|
3
|
+
componentImportRoot: "@vonaffenfels/slate-editor/src/dev/testComponents",
|
|
4
|
+
relativePathToComponents: path.resolve(__dirname + "../../../@base/slate-editor/src/dev/testComponents"),
|
|
5
|
+
});
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
config.entry = {index: './src/dev.js'};
|
|
9
|
+
|
|
10
|
+
config.mode = "development";
|
|
11
|
+
config.watch = true;
|
|
12
|
+
config.watchOptions = {ignored: ['dist/**', 'node_modules/**']};
|
|
13
|
+
config.cache = {type: "memory"};
|
|
14
|
+
|
|
15
|
+
config.output.publicPath = "/dist/";
|
|
16
|
+
config.devtool = 'inline-source-map';
|
|
17
|
+
|
|
18
|
+
config.devServer = {
|
|
19
|
+
static: path.join(__dirname, 'dist'),
|
|
20
|
+
compress: true,
|
|
21
|
+
historyApiFallback: true,
|
|
22
|
+
port: process.env.PORT,
|
|
23
|
+
devMiddleware: {writeToDisk: true},
|
|
24
|
+
};
|
|
25
|
+
|
|
26
26
|
module.exports = config;
|