@vonaffenfels/contentful-slate-editor 1.0.13 → 1.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/contentful-slate-editor",
-    "version": "1.0.13",
+    "version": "1.0.15",
     "scripts": {
         "prepublish": "yarn run build",
         "dev": "yarn run start",
@@ -89,10 +89,10 @@
         "webpack-dev-server": "^4.0.0-beta.2"
     },
     "dependencies": {
-        "@vonaffenfels/slate-editor": "^1.0.12",
+        "@vonaffenfels/slate-editor": "^1.0.15",
         "webpack": "5.73.0"
     },
-    "gitHead": "eec71f728cf8460a2a30562d15695b9f1418e141",
+    "gitHead": "47f4facbe8b8f024950c5d29e230d6b22fe51434",
     "publishConfig": {
         "access": "public"
     }

package/src/components/Dialog.js

@@ -8,7 +8,7 @@ import BlockEditor from "@vonaffenfels/slate-editor/dist/BlockEditor";
 // eslint-disable-next-line import/no-unresolved
 import storybookStories from "storybookStories";
 
-const Dialog = ({sdk}) => {
+const Dialog = ({sdk, elementPropsMap}) => {
     const defaultValue = [
         {
             type: "paragraph",
@@ -41,7 +41,7 @@ const Dialog = ({sdk}) => {
                     <BlockEditor
                         storybookStories={loadedStorybookStories}
                         onChange={setValue}
-                        elementPropsMap={{}}
+                        elementPropsMap={elementPropsMap}
                         value={value}
                         storybookComponentLoader={(block) => {
                             return componentLoader(block);

package/src/components/EditorField.js

@@ -19,6 +19,7 @@ const EditorField = ({
     portal,
     locale,
     onStorybookElementClick,
+    elementPropsMap,
 }) => {
     const wrapperRef = useRef();
     const loadedValue = fieldSdk.getValue(locale);
@@ -94,6 +95,7 @@ const EditorField = ({
             value={validateValue(value)}
             contentfulSdk={sdk}
             config={JSON.parse("{}")}
+            elementPropsMap={elementPropsMap}
             storybookComponentLoader={componentLoader}
             storybookStories={storybookStories}
             storybookComponentDataLoader={async (block, attributes) => {

package/src/components/EntryEditor.js

@@ -6,6 +6,7 @@ import EditorField from "./EditorField";
 const Entry = ({
     sdk,
     onStorybookElementClick,
+    elementPropsMap,
 }) => {
     const field = sdk.parameters.instance.contentField;
     const fieldSdk = sdk.entry.fields[field];
@@ -35,6 +36,7 @@ const Entry = ({
         fieldSdk={fieldSdk}
         editorSdk={sdk.editor}
         locale={locale}
+        elementPropsMap={elementPropsMap}
         entrySdk={sdk.entry}
         appSdk={sdk.app}
         sdk={sdk}

package/src/components/Field.js

@@ -6,7 +6,7 @@ import componentLoader from "@vonaffenfels/slate-editor/componentLoader.js";
 
 const FIELD_HEIGHT = 300;
 
-const Field = ({sdk}) => {
+const Field = ({sdk, elementPropsMap}) => {
     const [value, setValue] = useState(sdk.field.getValue());
     const wrapperRef = useRef();
 
@@ -19,7 +19,11 @@ const Field = ({sdk}) => {
             shouldCloseOnOverlayClick: false,
             shouldCloseOnEscapePress: false,
             minHeight: 500,
-            parameters: {value: sdk.field.getValue(), portal: sdk.entry.fields.portal.getValue()},
+            parameters: {
+                value: sdk.field.getValue(),
+                portal: sdk.entry.fields.portal.getValue(),
+                contentType: sdk.entry.getSys().contentType.sys.id,
+            },
         }).then((data) => {
             if (data) {
                 sdk.field.setValue(data);
@@ -29,10 +33,7 @@ const Field = ({sdk}) => {
 
     useEffect(() => {
         sdk.window.updateHeight(FIELD_HEIGHT);
-
         sdk.field.onValueChanged(handleValueChanged);
-
-        console.log({sdk});
     }, []);
 
     const handleValueChanged = value => {
@@ -55,6 +56,7 @@ const Field = ({sdk}) => {
         }}>
             <Renderer
                 value={value}
+                elementPropsMap={elementPropsMap}
                 storybookComponentLoader={(block) => {
                     return componentLoader(block);
                 }}/>

package/src/index.js

@@ -19,6 +19,13 @@ export const BaseContentfulApp = (props) => {
     init((sdk) => {
         const rootContainer = document.getElementById('root');
         const RendererWrapperComponent = props.RendererWrapperComponent || (({children}) => <div>{children}</div>);
+        const wrapperProps = {
+            sdk,
+            value: sdk.parameters?.invocation?.value || sdk?.field?.getValue(),
+            portal: sdk.parameters?.invocation?.portal || sdk?.entry?.fields?.portal.getValue(),
+            contentType: sdk.parameters?.invocation?.contentType || sdk?.entry?.getSys()?.contentType?.sys?.id,
+        };
+        const elementPropsMap = props.getElementPropsMap?.(wrapperProps.contentType) || props.elementPropsMap;
 
         const ComponentLocationSettings = [
             {
@@ -27,11 +34,12 @@ export const BaseContentfulApp = (props) => {
             },
             {
                 location: locations.LOCATION_ENTRY_FIELD,
-                component: <RendererWrapperComponent sdk={sdk} value={sdk?.field?.getValue()} portal={sdk?.entry?.fields?.portal.getValue()}><Field sdk={sdk}/></RendererWrapperComponent>,
+                component: <RendererWrapperComponent  {...wrapperProps}><Field sdk={sdk} elementPropsMap={elementPropsMap}/></RendererWrapperComponent>,
             },
             {
                 location: locations.LOCATION_ENTRY_EDITOR,
-                component: <RendererWrapperComponent sdk={sdk}  value={sdk?.field?.getValue()} portal={sdk?.entry?.fields?.portal.getValue()}><EntryEditor
+                component: <RendererWrapperComponent {...wrapperProps}><EntryEditor
+                    elementPropsMap={elementPropsMap}
                     sdk={sdk}
                     onStorybookElementClick={element => {
                         const storybookElementChangeEvent = new CustomEvent("storybookElementChange", {detail: element});
@@ -41,7 +49,7 @@ export const BaseContentfulApp = (props) => {
             },
             {
                 location: locations.LOCATION_DIALOG,
-                component: <RendererWrapperComponent sdk={sdk} portal={sdk.parameters?.invocation?.portal} value={sdk.parameters?.invocation?.value}><Dialog sdk={sdk}/></RendererWrapperComponent>,
+                component: <RendererWrapperComponent  {...wrapperProps} ><Dialog sdk={sdk}  elementPropsMap={elementPropsMap}/></RendererWrapperComponent>,
             },
         ];