@vonaffenfels/contentful-slate-editor 1.0.3 → 1.0.5

package/package.json

@@ -1,13 +1,12 @@
 {
     "name": "@vonaffenfels/contentful-slate-editor",
-    "version": "1.0.3",
+    "version": "1.0.5",
     "scripts": {
         "prepublish": "yarn run build",
         "dev": "yarn run start",
         "test": "echo \"Error: no test specified\" && exit 1",
         "build": "echo \"Don't build this module!\"",
-        "start": "webpack serve --config webpack.config.dev.js",
-        "vercelDev": "cp ./.vercel.project.json ../../.vercel/project.json && cd ../../ && vercel dev"
+        "start": "webpack serve --config webpack.config.dev.js"
     },
     "peerDependencies": {
         "@babel/core": "^7.20.12",
@@ -49,11 +48,51 @@
         "webpack-cli": "^4.6.0",
         "webpack-dev-server": "^4.0.0-beta.2"
     },
+    "devDependencies": {
+        "@babel/core": "^7.20.12",
+        "@babel/plugin-proposal-class-properties": "^7.13.0",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/preset-env": "^7.13.15",
+        "@babel/preset-react": "^7.13.13",
+        "@contentful/app-sdk": "^3.33.0",
+        "@contentful/field-editor-single-line": "^0.14.1",
+        "@contentful/field-editor-test-utils": "^0.11.1",
+        "@contentful/forma-36-fcss": "^0.3.1",
+        "@contentful/forma-36-react-components": "^3.88.3",
+        "@contentful/forma-36-tokens": "^0.10.1",
+        "@svgr/webpack": "^5.5.0",
+        "babel-loader": "^8.2.2",
+        "clean-webpack-plugin": "^3.0.0",
+        "cloudinary": "^1.25.1",
+        "contentful-management": "^7.17.0",
+        "copy-webpack-plugin": "^8.1.1",
+        "cross-env": "^7.0.3",
+        "css-loader": "^5.2.4",
+        "cssnano": "^5.0.1",
+        "dotenv-webpack": "^7.0.2",
+        "file-loader": "^6.2.0",
+        "html-webpack-plugin": "^5.3.1",
+        "mini-css-extract-plugin": "^1.5.0",
+        "postcss": "8.4.14",
+        "postcss-loader": "^5.2.0",
+        "raw-loader": "^4.0.2",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "react-uid": "^2.3.1",
+        "sass": "^1.32.11",
+        "sass-loader": "^11.0.1",
+        "speakingurl": "^14.0.1",
+        "style-loader": "^2.0.0",
+        "tailwindcss": "3.3.2",
+        "url-loader": "^4.1.1",
+        "webpack-cli": "^4.6.0",
+        "webpack-dev-server": "^4.0.0-beta.2"
+    },
     "dependencies": {
-        "@vonaffenfels/slate-editor": "^1.0.3",
+        "@vonaffenfels/slate-editor": "^1.0.5",
         "webpack": "5.73.0"
     },
-    "gitHead": "5886b3f191d7e644434c7baef0808194aec62802",
+    "gitHead": "718a65757ab690aa3e2df05274a9c401ce466b6e",
     "publishConfig": {
         "access": "public"
     }

package/src/components/ConfigScreen.js

@@ -62,7 +62,19 @@ export default class Config extends Component {
                 backgroundColor: "#FFF",
             })}>
                 <Form>
-                    <Heading>No Configuration necessary</Heading>
+                    <Heading>Configuration</Heading>
+                    <TextField
+                        value={this.state.parameters.cloudinaryApiKey}
+                        onChange={e => this.onFieldChanged(e.target.value, "cloudinaryApiKey")}
+                        labelText="Cloudinary API Key"
+                        required
+                    />
+                    <TextField
+                        value={this.state.parameters.cloudinaryCloudName}
+                        onChange={e => this.onFieldChanged(e.target.value, "cloudinaryCloudName")}
+                        labelText="Cloudinary Cloud Name"
+                        required
+                    />
                 </Form>
             </Workbench>
         );

package/src/components/Dialog.js

@@ -1,4 +1,6 @@
-import React, {useEffect, useState} from 'react';
+import React, {
+    useEffect, useState,
+} from 'react';
 import DialogCloudinary from "./DialogCloudinary";
 import componentLoader from "@vonaffenfels/slate-editor/componentLoader";
 // eslint-disable-next-line import/no-unresolved
@@ -24,7 +26,7 @@ const Dialog = ({sdk}) => {
 
     const saveChanges = () => {
         sdk.close(value);
-    }
+    };
 
     useEffect(() => {
         loadStories();
@@ -34,23 +36,24 @@ const Dialog = ({sdk}) => {
         case "cloudinary":
             return <DialogCloudinary sdk={sdk} config={sdk.parameters.invocation}/>;
         default:
-            return <div>
-                <BlockEditor
-                    storybookStories={loadedStorybookStories}
-                    onChange={setValue}
-                    elementPropsMap={{}}
-                    value={value}
-                    storybookComponentLoader={(block) => {
-                        return componentLoader(block);
-                    }}
-                    storybookComponentDataLoader={async (block, attributes) => {
-                        return {};
-                    }}
-                />
-                <div>
-                    <button onClick={saveChanges}>Änderungen speichern</button>
+            return <div className="relative flex h-full max-h-full justify-between">
+                <div className="grow">
+                    <BlockEditor
+                        storybookStories={loadedStorybookStories}
+                        onChange={setValue}
+                        elementPropsMap={{}}
+                        value={value}
+                        storybookComponentLoader={(block) => {
+                            return componentLoader(block);
+                        }}
+                        storybookComponentDataLoader={async (block, attributes) => {
+                            return {};
+                        }}
+                        contentfulSdk={sdk}
+                        onSaveClick={saveChanges}
+                    />
                 </div>
-            </div>
+            </div>;
     }
 };
 

package/src/components/DialogCloudinary.js

@@ -9,8 +9,8 @@ const DialogCloudinary = ({
     sdk,
     config,
 }) => {
-    const cloudinaryApiKey = config?.cloudinaryApiKey;
-    const cloudinaryCloudName = config?.cloudinaryCloudName;
+    const cloudinaryApiKey = sdk?.parameters?.installation?.cloudinaryApiKey;
+    const cloudinaryCloudName = sdk?.parameters?.installation?.cloudinaryCloudName;
 
     const cloudinaryRef = useRef(null);
 

package/src/components/Field.js

@@ -1,5 +1,15 @@
-import React from 'react';
+import React, {
+    useEffect, useRef, useState,
+} from 'react';
+import Renderer from "@vonaffenfels/slate-editor/dist/Renderer";
+import componentLoader from "@vonaffenfels/slate-editor/componentLoader.js";
+
+const FIELD_HEIGHT = 300;
+
 const Field = ({sdk}) => {
+    const [value, setValue] = useState(sdk.field.getValue());
+    const wrapperRef = useRef();
+
     const openDialog = () => {
         console.log("KIENZ_DEBUG: :14 / openDialog", sdk.field.getValue());
 
@@ -11,20 +21,48 @@ const Field = ({sdk}) => {
             shouldCloseOnOverlayClick: false,
             shouldCloseOnEscapePress: false,
             minHeight: 500,
-            parameters: {
-                value: sdk.field.getValue(),
-            },
+            parameters: {value: sdk.field.getValue()},
         }).then((data) => {
             console.log("KIENZ_DEBUG: :26 / ANON", data);
             if (data) {
                 sdk.field.setValue(data);
             }
         });
-    }
+    };
+
+    useEffect(() => {
+        sdk.window.updateHeight(FIELD_HEIGHT);
+
+        sdk.field.onValueChanged(handleValueChanged);
+
+        console.log({sdk});
+    }, []);
+
+    const handleValueChanged = value => {
+        setValue(value);
+
+        setInterval(() => {
+            if (wrapperRef.current) {
+                sdk.window.updateHeight(wrapperRef.current.clientHeight);
+            }
+        }, 500);
+    };
 
-    return <div>
-        <button onClick={openDialog}>Inhalt bearbeiten</button>
-    </div>
+    return <div
+        ref={wrapperRef}
+    >
+        <button onClick={openDialog} className="mb-2 w-full">Inhalt bearbeiten</button>
+        <div style={{
+            overflowY: "auto",
+            maxHeight: "500px",
+        }}>
+            <Renderer
+                value={value}
+                storybookComponentLoader={(block) => {
+                    return componentLoader(block);
+                }}/>
+        </div>
+    </div>;
 };
 
 export default Field;

package/src/dev.js

@@ -0,0 +1,4 @@
+import './scss/dev.scss';
+import {BaseContentfulApp} from "./index"
+
+BaseContentfulApp();

package/src/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {render} from 'react-dom';
+import {createRoot} from 'react-dom/client';
 
 import {
     init,
@@ -8,6 +8,7 @@ import {
 import '@contentful/forma-36-react-components/dist/styles.css';
 import '@contentful/forma-36-fcss/dist/styles.css';
 import '@contentful/forma-36-tokens/dist/css/index.css';
+import '@vonaffenfels/slate-editor/dist/index.css';
 import './scss/index.scss';
 
 import EntryEditor from './components/EntryEditor';
@@ -17,7 +18,7 @@ import Dialog from "./components/Dialog";
 
 export const BaseContentfulApp = () => {
     init((sdk) => {
-        const root = document.getElementById('root');
+        const rootContainer = document.getElementById('root');
 
         const ComponentLocationSettings = [
             {
@@ -46,7 +47,8 @@ export const BaseContentfulApp = () => {
 
         ComponentLocationSettings.forEach((componentLocationSetting) => {
             if (sdk.location.is(componentLocationSetting.location)) {
-                render(componentLocationSetting.component, root);
+                const root = createRoot(rootContainer); // createRoot(container!) if you use TypeScript
+                root.render(componentLocationSetting.component);
             }
         });
     });

package/src/scss/index.scss

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 html, body, div {
     margin: 0;
     padding: 0;

package/tailwind.config.js

@@ -1,6 +1,5 @@
-
 module.exports = {
     content: [
-        './src/**/*.js'
+        './src/**/*.js',
     ],
 };

package/webpack.config.dev.js

@@ -1,9 +1,12 @@
 const path = require('path');
 let config = require("./webpack.config")({
     componentImportRoot: "@vonaffenfels/slate-editor/src/dev/testComponents",
-    relativePathToComponents: path.resolve(__dirname + "../../../@vonaffenfels/slate-editor/src/dev/testComponents"),
+    relativePathToComponents: path.resolve(__dirname + "../../../@base/slate-editor/src/dev/testComponents"),
 });
 
+
+config.entry = {index: './src/dev.js'};
+
 config.mode = "development";
 config.watch = true;
 config.watchOptions = {ignored: ['dist/**', 'node_modules/**']};

package/webpack.config.js

@@ -8,7 +8,7 @@ const {CleanWebpackPlugin} = require('clean-webpack-plugin');
 module.exports = ({
     babelConfig = JSON.parse(readFileSync("../../.babelrc").toString()),
     componentImportRoot = "@vonaffenfels/slate-editor/src/dev/testComponents",
-    relativePathToComponents = path.resolve(__dirname + "../../../@vonaffenfels/slate-editor/src/dev/testComponents"),
+    relativePathToComponents = path.resolve(__dirname + "../../../@base/slate-editor/src/dev/testComponents"),
     postCssConfig = {
         plugins: {
             'postcss-import': {},
@@ -74,12 +74,28 @@ module.exports = ({
                     include: path.resolve(__dirname, 'src', 'scss'),
                     use: [
                         "style-loader",
-                        "css-loader",
+                        {loader: 'css-loader', options: {importLoaders: 1}},
+                        {loader: 'postcss-loader', options: {postcssOptions: postCssConfig}},
                         "sass-loader",
                     ],
                 },
+                {
+                    test: /module\.css$/i,
+                    use: [
+                        'style-loader',
+                        {
+                            loader: 'css-loader',
+                            options: {
+                                importLoaders: 1,
+                                modules: {exportLocalsConvention: "camelCase"},
+                            },
+                        },
+                        {loader: 'postcss-loader', options: {postcssOptions: postCssConfig}},
+                    ],
+                },
                 {
                     test: /\.css$/i,
+                    exclude: [/module\.css$/i],
                     use: [
                         'style-loader',
                         {