@vonaffenfels/slate-editor 1.0.1

package/src/Tools/Margin.js

@@ -0,0 +1,52 @@
+import classNames from "classnames";
+
+export const ToolMargin = ({
+    margin,
+    onChange,
+}) => {
+    const onMarginClick = (e, direction) => {
+        onChange({
+            ...(margin || {}),
+            [direction]: !margin?.[direction],
+        });
+    };
+
+    return <span className="layout-slot-option-padding">
+        <span
+            className={classNames({
+                "layout-slot-option-padding-item layout-slot-option-padding-top": true,
+                "active": margin?.top,
+            })}
+            contentEditable={false}
+            onClick={(e) => {
+                onMarginClick(e, "top");
+            }} />
+        <span
+            className={classNames({
+                "layout-slot-option-padding-item layout-slot-option-padding-right": true,
+                "active": margin?.right,
+            })}
+            contentEditable={false}
+            onClick={(e) => {
+                onMarginClick(e, "right");
+            }} />
+        <span
+            className={classNames({
+                "layout-slot-option-padding-item layout-slot-option-padding-bottom": true,
+                "active": margin?.bottom,
+            })}
+            contentEditable={false}
+            onClick={(e) => {
+                onMarginClick(e, "bottom");
+            }} />
+        <span
+            className={classNames({
+                "layout-slot-option-padding-item layout-slot-option-padding-left": true,
+                "active": margin?.left,
+            })}
+            contentEditable={false}
+            onClick={(e) => {
+                onMarginClick(e, "left");
+            }} />
+    </span>;
+};

package/src/dev/App.js

@@ -0,0 +1,61 @@
+import React, {useEffect} from 'react';
+import BlockEditor from "../BlockEditor";
+// eslint-disable-next-line import/no-unresolved
+import "scss/demo.scss";
+import "./index.css";
+import {
+    useState, useContext,
+} from "react";
+import SampleValue from "./testSampleValue.json";
+// eslint-disable-next-line
+import storybookStories from "storybookStories";
+import componentLoader from "@vonaffenfels/slate-editor/componentLoader.js";
+
+
+function App() {
+    const defaultValue = [
+        {
+            type: "paragraph",
+            children: [
+                {text: ""},
+            ],
+        },
+    ];
+    const [value, setValue] = useState(SampleValue);
+    const [loadedStorybookStories, setLoadedStorybookStories] = useState([]);
+
+    const loadStories = async () => {
+        setLoadedStorybookStories(await storybookStories());
+    };
+
+    useEffect(() => {
+        loadStories();
+    }, []);
+
+    return (
+        <div className="editor-demo-wrapper">
+            <div className="editor-demo block-editor-content">
+                <div className="editor-demo-editor container">
+                    <BlockEditor
+                        storybookStories={loadedStorybookStories}
+                        onChange={setValue}
+                        elementPropsMap={{}}
+                        value={value}
+                        storybookUrl={"http://localhost:3000/"}
+                        storybookComponentLoader={(block) => {
+                            return componentLoader(block);
+                        }}
+                        storybookComponentDataLoader={async (block, attributes) => {
+                            return {};
+                        }}
+                    />
+                </div>
+            </div>
+            <div className="editor-demo-output">
+                <textarea value={JSON.stringify(value)}/>
+            </div>
+        </div>
+    );
+}
+
+export default App;