@vonaffenfels/contentful-slate-editor 1.0.1

package/.babelrc

@@ -0,0 +1,38 @@
+{
+    "presets": [
+        "next/babel",
+        [
+            "@babel/preset-env",
+            {
+                "modules": false,
+                "targets": {
+                    "browsers": [
+                        "last 2 Chrome versions",
+                        "last 2 Firefox versions",
+                        "last 2 Safari versions",
+                        "last 2 iOS versions",
+                        "last 1 Android version",
+                        "last 1 ChromeAndroid version",
+                        "ie 11"
+                    ]
+                }
+            }
+        ],
+        "@babel/preset-react"
+    ],
+    "plugins": [
+        [
+            "@babel/plugin-proposal-private-property-in-object",
+            {
+                "loose": true
+            }
+        ],
+        [
+            "@babel/plugin-proposal-class-properties",
+            {
+                "loose": true
+            }
+        ],
+        "@babel/plugin-syntax-dynamic-import"
+    ]
+}

package/.nvmrc

@@ -0,0 +1 @@
+v14.16.1

package/package.json

@@ -0,0 +1,59 @@
+{
+    "name": "@vonaffenfels/contentful-slate-editor",
+    "version": "1.0.1",
+    "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",
+        "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"
+    },
+    "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"
+    },
+    "dependencies": {
+        "@vonaffenfels/slate-editor": "^1.0.1",
+        "webpack": "5.73.0"
+    },
+    "gitHead": "06971175660ea52650bfb65a3d68b34a7926475e",
+    "publishConfig": {
+        "access": "public"
+    }
+}

package/postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    plugins: {
+        'postcss-import': {},
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};

package/src/components/ConfigScreen.js

@@ -0,0 +1,71 @@
+import React, {Component} from 'react';
+import {
+    Heading, Form, TextField, Workbench, Paragraph,
+} from '@contentful/forma-36-react-components';
+import {css} from 'emotion';
+
+export default class Config extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {parameters: {}};
+
+        // `onConfigure` allows to configure a callback to be
+        // invoked when a user attempts to install the app or update
+        // its configuration.
+        props.sdk.app.onConfigure(() => this.onConfigure());
+    }
+
+    async componentDidMount() {
+        // Get current parameters of the app.
+        // If the app is not installed yet, `parameters` will be `null`.
+        const parameters = await this.props.sdk.app.getParameters();
+
+        this.setState(parameters ? {parameters} : this.state, () => {
+            // Once preparation has finished, call `setReady` to hide
+            // the loading screen and present the app to a user.
+            this.props.sdk.app.setReady();
+        });
+    }
+
+    async onConfigure() {
+        // This method will be called when a user clicks on "Install"
+        // or "Save" in the configuration screen.
+        // for more details see https://www.contentful.com/developers/docs/extensibility/ui-extensions/sdk-reference/#register-an-app-configuration-hook
+
+        // Get current the state of EditorInterface and other entities
+        // related to this app installation
+        const currentState = await this.props.sdk.app.getCurrentState();
+
+        return {
+            // Parameters to be persisted as the app configuration.
+            parameters: this.state.parameters,
+            // In case you don't want to submit any update to app
+            // locations, you can just pass the currentState as is
+            targetState: currentState,
+        };
+    }
+
+    onFieldChanged(value, field) {
+        this.setState({
+            parameters: {
+                ...this.state.parameters,
+                [field]: value,
+            },
+        });
+    }
+
+    render() {
+        return (
+            <Workbench className={css({
+                padding: '80px',
+                backgroundColor: "#FFF",
+            })}>
+                <Form>
+                    <Heading>No Configuration necessary</Heading>
+                </Form>
+            </Workbench>
+        );
+    }
+
+}

package/src/components/Dialog.js

@@ -0,0 +1,57 @@
+import React, {useEffect, useState} from 'react';
+import DialogCloudinary from "./DialogCloudinary";
+import componentLoader from "@vonaffenfels/slate-editor/componentLoader";
+// eslint-disable-next-line import/no-unresolved
+import BlockEditor from "@vonaffenfels/slate-editor/dist/BlockEditor";
+// eslint-disable-next-line import/no-unresolved
+import storybookStories from "storybookStories";
+
+const Dialog = ({sdk}) => {
+    const defaultValue = [
+        {
+            type: "paragraph",
+            children: [
+                {text: ""},
+            ],
+        },
+    ];
+    const [value, setValue] = useState(sdk.parameters.invocation.value || defaultValue);
+    const [loadedStorybookStories, setLoadedStorybookStories] = useState([]);
+
+    const loadStories = async () => {
+        setLoadedStorybookStories(await storybookStories());
+    };
+
+    const saveChanges = () => {
+        sdk.close(value);
+    }
+
+    useEffect(() => {
+        loadStories();
+    }, []);
+
+    switch (sdk.parameters.invocation.type) {
+        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>
+                </div>
+            </div>
+    }
+};
+
+export default Dialog;

package/src/components/DialogCloudinary.js

@@ -0,0 +1,50 @@
+import React, {
+    useEffect, useRef,
+} from 'react';
+import "../scss/dialog-cloudinary.scss";
+
+/* global cloudinary */
+
+const DialogCloudinary = ({
+    sdk,
+    config,
+}) => {
+    const cloudinaryApiKey = config?.cloudinaryApiKey;
+    const cloudinaryCloudName = config?.cloudinaryCloudName;
+
+    const cloudinaryRef = useRef(null);
+
+    useEffect(() => {
+        // sdk.window.startAutoResizer();
+    }, []);
+
+    const eventHandlers = {
+        insertHandler: (data) => {
+            sdk.close(data);
+        },
+    };
+
+    const libraryOptions = {
+        cloud_name: cloudinaryCloudName,
+        api_key: cloudinaryApiKey,
+        remove_header: true,
+        max_files: config.max_files || undefined,
+        multiple: config.multiple || false,
+        insert_caption: 'Insert',
+        inline_container: '#cloudinary-root',
+    };
+
+    useEffect(() => {
+        if (cloudinaryRef.current) {
+            const library = cloudinary.createMediaLibrary(libraryOptions, eventHandlers);
+
+            library.show(libraryOptions);
+
+            sdk.window.updateHeight(window.outerHeight);
+        }
+    }, [cloudinaryRef]);
+
+    return <div ref={cloudinaryRef} className="cloudinary-dialog" id="cloudinary-root"/>;
+};
+
+export default DialogCloudinary;

package/src/components/EditorField.js

@@ -0,0 +1,107 @@
+import React, {
+    useState, useEffect, useRef,
+} from 'react';
+// eslint-disable-next-line import/no-unresolved
+import BlockEditor from "@vonaffenfels/slate-editor/dist/BlockEditor";
+// eslint-disable-next-line import/no-unresolved
+import '@vonaffenfels/slate-editor/dist/index.css';
+import useOnScreen from "../hooks/useOnScreen";
+// eslint-disable-next-line import/no-unresolved
+import storybookStories from "storybookStories";
+// eslint-disable-next-line import/no-unresolved
+import componentLoader from "@vonaffenfels/slate-editor/componentLoader";
+
+const EditorField = ({
+    fieldSdk,
+    windowSdk,
+    entrySdk,
+    sdk,
+    portal,
+    locale,
+    onStorybookElementClick,
+}) => {
+    const wrapperRef = useRef();
+    const loadedValue = fieldSdk.getValue(locale);
+    const emptyValue = [
+        {
+            type: "paragraph",
+            children: [
+                {text: ""},
+            ],
+        },
+    ];
+    const [value, setValue] = useState(validateValue(loadedValue));
+    const [externalValue, setExternalValue] = useState(value);
+    const isVisible = useOnScreen(wrapperRef);
+
+    function validateValue(value) {
+        if (!value) {
+            return emptyValue;
+        }
+
+        value = value.filter(v => v.type !== "paragraph" || v.children);
+
+        return value;
+    }
+
+    function onChange(newValue) {
+        newValue = validateValue(newValue);
+
+        setValue(newValue);
+
+        if (newValue) {
+            fieldSdk.setValue(newValue, locale);
+        } else {
+            fieldSdk.removeValue(locale);
+        }
+    }
+
+    useEffect(() => {
+        if (windowSdk) {
+            windowSdk.startAutoResizer();
+        }
+    }, []);
+
+    useEffect(() => {
+        if (isVisible) {
+            setValue(externalValue[locale]);
+        }
+    }, [isVisible]);
+
+    useEffect(() => {
+        setValue(validateValue(fieldSdk.getValue(locale)));
+
+        // Handler for external field value changes (e.g. when multiple authors are working on the same entry).
+        const detatchValueChangeHandler = fieldSdk.onValueChanged(locale, (externalChangeValue) => {
+            setExternalValue({
+                ...externalValue,
+                [locale]: externalChangeValue,
+            });
+        });
+
+        return detatchValueChangeHandler;
+    }, [portal, locale]);
+
+    const fakeActiveContent = {};
+    for (let field in entrySdk.fields) {
+        fakeActiveContent.sys = entrySdk.getSys();
+        fakeActiveContent[field] = entrySdk.fields[field].getValue();
+    }
+
+    return <div ref={wrapperRef} className="editor-field">
+        <BlockEditor
+            onChange={onChange}
+            value={validateValue(value)}
+            contentfulSdk={sdk}
+            config={JSON.parse("{}")}
+            storybookComponentLoader={componentLoader}
+            storybookStories={storybookStories}
+            storybookComponentDataLoader={async (block, attributes) => {
+                return [];
+            }}
+            onStorybookElementClick={onStorybookElementClick}
+        />
+    </div>;
+};
+
+export default EditorField;

package/src/components/EntryEditor.js

@@ -0,0 +1,46 @@
+import React, {
+    useEffect, useState,
+} from 'react';
+import EditorField from "./EditorField";
+
+const Entry = ({
+    sdk,
+    onStorybookElementClick,
+}) => {
+    const field = sdk.parameters.instance.contentField;
+    const fieldSdk = sdk.entry.fields[field];
+
+    const [locale, setLocale] = useState(sdk.locales.default);
+    const [portal, setPortal] = useState();
+    const portalField = sdk?.entry?.fields?.portal;
+
+    portalField?.onValueChanged(() => {
+        if (portalField.getValue() !== portal) {
+            setPortal(portalField.getValue());
+        }
+    });
+
+    useEffect(() => {
+        const detachHandler = sdk.editor.onLocaleSettingsChanged((loc) => {
+            setLocale(loc?.focused || sdk.locales.default);
+        });
+
+        return () => {
+            detachHandler();
+        };
+    }, []);
+
+    return <EditorField
+        preview={false}
+        fieldSdk={fieldSdk}
+        editorSdk={sdk.editor}
+        locale={locale}
+        entrySdk={sdk.entry}
+        appSdk={sdk.app}
+        sdk={sdk}
+        portal={portal}
+        onStorybookElementClick={onStorybookElementClick}
+    />;
+};
+
+export default Entry;

package/src/components/Field.js

@@ -0,0 +1,30 @@
+import React from 'react';
+const Field = ({sdk}) => {
+    const openDialog = () => {
+        console.log("KIENZ_DEBUG: :14 / openDialog", sdk.field.getValue());
+
+        sdk.dialogs.openCurrentApp({
+            title: 'Inhalt bearbeiten',
+            width: 'fullWidth',
+            position: "center",
+            allowHeightOverflow: true,
+            shouldCloseOnOverlayClick: false,
+            shouldCloseOnEscapePress: false,
+            minHeight: 500,
+            parameters: {
+                value: sdk.field.getValue(),
+            },
+        }).then((data) => {
+            console.log("KIENZ_DEBUG: :26 / ANON", data);
+            if (data) {
+                sdk.field.setValue(data);
+            }
+        });
+    }
+
+    return <div>
+        <button onClick={openDialog}>Inhalt bearbeiten</button>
+    </div>
+};
+
+export default Field;

package/src/hooks/useOnScreen.js

@@ -0,0 +1,24 @@
+import React, {
+    useState, useEffect, useRef,
+} from "react";
+
+export default function useOnScreen(ref) {
+    const [isIntersecting, setIntersecting] = useState(false);
+    const observerRef = useRef();
+
+    useEffect(() => {
+        if (!observerRef.current && ref.current) {
+            observerRef.current = new IntersectionObserver(([entry]) => setIntersecting(entry.isIntersecting));
+
+            observerRef.current.observe(ref.current);
+
+            return () => {
+                if (observerRef.current) {
+                    observerRef.current.disconnect();
+                }
+            };
+        }
+    }, []);
+
+    return isIntersecting;
+}

package/src/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>Slate Block Editor Contentful App</title>
+    <script src="https://media-library.cloudinary.com/global/all.js"></script>
+</head>
+<body>
+<div id="root">
+</div>
+</body>
+</html>

package/src/index.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import {render} from 'react-dom';
+
+import {
+    init,
+    locations,
+} from '@contentful/app-sdk';
+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 './scss/index.scss';
+
+import EntryEditor from './components/EntryEditor';
+import Config from './components/ConfigScreen';
+import Field from './components/Field';
+import Dialog from "./components/Dialog";
+
+init((sdk) => {
+    const root = document.getElementById('root');
+
+    const ComponentLocationSettings = [
+        {
+            location: locations.LOCATION_APP_CONFIG,
+            component: <Config sdk={sdk}/>,
+        },
+        {
+            location: locations.LOCATION_ENTRY_FIELD,
+            component: <Field sdk={sdk}/>,
+        },
+        {
+            location: locations.LOCATION_ENTRY_EDITOR,
+            component: <EntryEditor
+                sdk={sdk}
+                onStorybookElementClick={element => {
+                    const storybookElementChangeEvent = new CustomEvent("storybookElementChange", {detail: element});
+
+                    window.parent.document.dispatchEvent(storybookElementChangeEvent);
+                }}/>,
+        },
+        {
+            location: locations.LOCATION_DIALOG,
+            component: <Dialog sdk={sdk}/>,
+        },
+    ];
+
+    ComponentLocationSettings.forEach((componentLocationSetting) => {
+        if (sdk.location.is(componentLocationSetting.location)) {
+            render(componentLocationSetting.component, root);
+        }
+    });
+});

package/src/scss/dialog-cloudinary.scss

@@ -0,0 +1,18 @@
+html, body, #root {
+    width: 100%;
+    height: 100%;
+}
+
+.cloudinary-dialog {
+    width: 100%;
+    height: 100%;
+    min-width: 100%;
+    min-height: 100%;
+
+    iframe {
+        width: 100%;
+        height: 100%;
+        min-width: 100%;
+        min-height: 100%;
+    }
+}

package/src/scss/index.scss

@@ -0,0 +1,19 @@
+html, body, div {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+
+.editor-field {
+    height: 100%;
+}
+
+@media (prefers-color-scheme: dark) {
+    .editor-field {
+        color: white;
+    }
+}
+

package/tailwind.config.js

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

package/webpack.config.dev.js

@@ -0,0 +1,23 @@
+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"),
+});
+
+config.mode = "development";
+config.watch = true;
+config.watchOptions = {ignored: ['dist/**', 'node_modules/**']};
+config.cache = {type: "memory"};
+
+config.output.publicPath = "/dist/";
+config.devtool = 'inline-source-map';
+
+config.devServer = {
+    static: path.join(__dirname, 'dist'),
+    compress: true,
+    historyApiFallback: true,
+    port: process.env.PORT,
+    devMiddleware: {writeToDisk: true},
+};
+
+module.exports = config;

package/webpack.config.js

@@ -0,0 +1,134 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require("webpack");
+const {readFileSync} = require("fs");
+const babelConfig = JSON.parse(readFileSync("../../.babelrc").toString());
+const {CleanWebpackPlugin} = require('clean-webpack-plugin');
+
+module.exports = ({
+    componentImportRoot = "@vonaffenfels/slate-editor/src/dev/testComponents",
+    relativePathToComponents = path.resolve(__dirname + "../../../@vonaffenfels/slate-editor/src/dev/testComponents"),
+}) => ({
+    mode: 'production',
+    entry: {index: './src/index.js'},
+    module: {
+        rules: [
+            {
+                test: /storyLoader.js/i,
+                use: [
+                    {
+                        loader: "@vonaffenfels/slate-editor/storyLoader.js",
+                        options: {
+                            storiesRoot: relativePathToComponents,
+                            storiesImportRoot: componentImportRoot,
+                        },
+                    },
+                ],
+            },
+            {
+                test: /componentLoader.js/i,
+                use: [
+                    {
+                        loader: "@vonaffenfels/slate-editor/componentLoader.js",
+                        options: {
+                            componentRoot: relativePathToComponents,
+                            componentImportRoot: componentImportRoot,
+                        },
+                    },
+                ],
+            },
+            {
+                test: /\.js$/,
+                include: [
+                    path.resolve(__dirname, 'src'),
+                    relativePathToComponents,
+                ],
+                use: [
+                    {
+                        loader: 'babel-loader',
+                        options: babelConfig,
+                    },
+                ],
+            },
+            {
+                test: /\.s[ac]ss$/i,
+                include: path.resolve(__dirname, 'src', 'scss'),
+                use: [
+                    "style-loader",
+                    "css-loader",
+                    "sass-loader",
+                ],
+            },
+            {
+                test: /\.css$/i,
+                use: [
+                    'style-loader',
+                    {
+                        loader: 'css-loader',
+                        options: {importLoaders: 1},
+                    },
+                    {loader: 'postcss-loader'},
+                ],
+            },
+            {
+                test: /\.svg$/,
+                resourceQuery: {not: [/url/]}, // exclude react component if *.svg?url
+                use: [
+                    {
+                        loader: '@svgr/webpack',
+                        options: {
+                            dimensions: false,
+                            svgo: false,
+                        },
+                    },
+                    'url-loader',
+                ],
+            },
+            {
+                test: /\.(woff(2)?|ttf|eot|png)(\?v=\d+\.\d+\.\d+)?$/,
+                use: [
+                    {
+                        loader: 'file-loader',
+                        options: {
+                            name: '[name].[ext]',
+                            outputPath: 'fonts/',
+                        },
+                    },
+                ],
+            },
+            {
+                test: /\.(graphql|gql)$/,
+                include: [
+                    path.resolve(__dirname, 'src'),
+                    path.resolve(__dirname, '../../@frontend/components'),
+                ],
+                loader: 'graphql-tag/loader',
+            },
+        ],
+    },
+    plugins: [
+        new CleanWebpackPlugin(),
+        new HtmlWebpackPlugin({template: path.join(__dirname, 'src', 'index.html')}),
+        new MiniCssExtractPlugin({}),
+        new webpack.DefinePlugin({'process.env': JSON.stringify(process.env)}),
+    ],
+    resolve: {
+        extensions: ['.json', '.js', '.jsx'],
+        fallback: {
+            stream: false,
+            path: false,
+            timers: false,
+        },
+        alias: {
+            storybookStories: '@vonaffenfels/slate-editor/storyLoader.js',
+        },
+    },
+    output: {
+        filename: '[name].js',
+        libraryTarget: "umd",
+        publicPath: "/",
+        globalObject: "this",
+        path: path.resolve(__dirname, 'dist'),
+    },
+});