@vonaffenfels/slate-editor 1.0.25 → 1.0.28

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.0.25",
+    "version": "1.0.28",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -62,7 +62,7 @@
         "url-loader": "^4.1.1",
         "util": "^0.12.5",
         "walk-sync": "^3.0.0",
-        "webpack": "5.73.0",
+        "webpack": "5.88.2",
         "webpack-cli": "^4.6.0",
         "webpack-dev-server": "4.7.4"
     },
@@ -71,7 +71,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "fa30314075d5122e489573b5431e306ed63aa9af",
+    "gitHead": "fe5a1e14e437b67a1aa58fa6781b9ae134914750",
     "publishConfig": {
         "access": "public"
     }

package/src/BlockEditor.js

@@ -17,6 +17,8 @@ import "../scss/editor.scss";
 import {ListItemPlugin} from "./plugins/ListItem";
 import ErrorBoundary from "../src/Blocks/ErrorBoundary";
 import SidebarEditor from './SidebarEditor';
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faSpinner} from '@fortawesome/free-solid-svg-icons';
 
 export default function BlockEditor({
     onChange,
@@ -27,6 +29,7 @@ export default function BlockEditor({
     storybookComponentDataLoader,
     storybookStories,
     onSaveClick,
+    isLoading,
 }) {
     const scrollContainer = useRef(null);
     const [selectedStorybookElement, setSelectedStorybookElement] = useState(null);
@@ -231,7 +234,12 @@ export default function BlockEditor({
                     <div>
                         <Toolbar hover={false} onSaveClick={onSaveClick}/>
                     </div>
-                    <div className="h-full max-h-full overflow-scroll px-8 py-4" ref={scrollContainer}>
+                    <div className="relative h-full max-h-full overflow-scroll px-8 py-4" ref={scrollContainer}>
+                        {isLoading && (
+                            <div className='pointer-events-none fixed left-0 top-0 z-50 text-black dark:text-white' style={{padding: "61px 0 0 16px"}}>
+                                <FontAwesomeIcon icon={faSpinner} pulse />
+                            </div>
+                        )}
                         <ErrorBoundary
                             name="editor"
                             fallback={(

package/src/Blocks/LayoutBlock.js

@@ -1,6 +1,7 @@
 import React from "react";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {
+    faAlignCenter,
     faArrowDown, faArrowUp, faBorderAll, faBorderNone, faCompress, faTimes,
 } from "@fortawesome/free-solid-svg-icons";
 import {Transforms} from "slate";
@@ -119,6 +120,44 @@ export const LayoutBlock = ({
         }, {at: fromPath});
     };
 
+    const switchCenter = (e) => {
+        let node = ReactEditor.toSlateNode(editor, attributes.ref.current);
+        let fromPath = ReactEditor.findPath(editor, node);
+
+        if (!fromPath) {
+            return;
+        }
+
+        let justifyCenter = !(element?.attributes?.justifyCenter);
+
+        Transforms.setNodes(editor, {
+            type: "layout",
+            attributes: {
+                ...(element.attributes || {}),
+                justifyCenter,
+            },
+        }, {at: fromPath});
+    };
+
+    const switchBorder = (e) => {
+        let node = ReactEditor.toSlateNode(editor, attributes.ref.current);
+        let fromPath = ReactEditor.findPath(editor, node);
+
+        if (!fromPath) {
+            return;
+        }
+
+        let tableBorder = !(element?.attributes?.tableBorder);
+
+        Transforms.setNodes(editor, {
+            type: "layout",
+            attributes: {
+                ...(element.attributes || {}),
+                tableBorder,
+            },
+        }, {at: fromPath});
+    };
+
     const onMarginChange = (value) => {
         let node = ReactEditor.toSlateNode(editor, attributes.ref.current);
         let path = ReactEditor.findPath(editor, node);
@@ -159,12 +198,28 @@ export const LayoutBlock = ({
                     <FontAwesomeIcon icon={faBorderAll} size="lg"/>
                 )}
             </span>
+            <span className="options-container-option options-container-option-expand" onClick={switchCenter}>
+                {!element?.attributes?.justifyCenter ? (
+                    <FontAwesomeIcon icon={faAlignCenter} size="lg"/>
+                ) : (
+                    <FontAwesomeIcon icon={faAlignCenter} color="#3490f3" size="lg"/>
+                )}
+            </span>
+            <span className="options-container-option options-container-option-expand-text mx-2" onClick={switchBorder}>
+                {!element?.attributes?.tableBorder ? (
+                    <span>Kein Rahmen</span>
+                ) : (
+                    <span>Rahmen</span>
+                )}
+            </span>
             <ToolMargin margin={element?.attributes?.margin} onChange={onMarginChange}/>
         </div>
         <div
             className={`layout-block layout-grid layout-grid-cols-${children.length} ` + classNames({
                 [classNameArticle + " article-width"]: element?.attributes?.width === "article" || !element?.attributes?.width,
                 [classNameSite + " site-width"]: element?.attributes?.width === "full",
+                "block-editor-table-border-wrapper": element?.attributes?.tableBorder,
+                "justify-center": element?.attributes?.justifyCenter,
                 "space-x-4": element?.attributes?.spacing,
                 "editor-mt-large": element?.attributes?.margin?.top,
                 "editor-mr-large": element?.attributes?.margin?.right,

package/src/Serializer/Serializer.js

@@ -137,6 +137,8 @@ export function Serializer({
                             "mr-16": props?.attributes?.margin?.right,
                             "mb-16": props?.attributes?.margin?.bottom,
                             "ml-16": props?.attributes?.margin?.left,
+                            "block-editor-table-border-wrapper": props?.attributes?.tableBorder,
+                            "justify-center": props?.attributes?.justifyCenter,
                             [typeProps.classNameSite + " site-width"]: !isInSlot && (props.attributes?.width === "site" || props.attributes?.width === "full"),
                             [typeProps.classNameArticle + " article-width"]: !isInSlot && (props.attributes?.width === "article" || !props.attributes?.width),
                         })}

package/src/SidebarEditor/AssetList.js

@@ -107,6 +107,22 @@ export const Asset = ({
         return null;
     }
 
+    let assetType = "image";
+
+    if (title?.endsWith(".mp3")) {
+        assetType = "audio";
+    }
+
+    const renderMedia = () => {
+        switch (assetType) {
+            case "audio":
+                return <audio src={mediaUrl} className="mt-2 w-full" controls />;
+            case "image":
+            default:
+                return <img src={mediaUrl} width="100%" className="mt-2 rounded-md" />;
+        }
+    };
+
     return (
         <div className="flex flex-col">
             <div className="flex">
@@ -126,7 +142,7 @@ export const Asset = ({
                     <IconButton size="small" onClick={onDeleteClick}>⨯</IconButton>
                 </div>
             </div>
-            {!!mediaUrl && <img src={mediaUrl} width="100%" className="mt-2 rounded-md" />}
+            {!!mediaUrl && renderMedia()}
         </div>
     );
 };

package/src/SidebarEditor/SidebarEditorField.js

@@ -36,6 +36,10 @@ export const SidebarEditorField = ({
     };
 
     const renderFieldSelectOptions = field => {
+        if (field?.control?.labels) {
+            field.control.options = field.control.labels;
+        }
+
         if (!field?.control?.options) {
             return;
         }
@@ -118,8 +122,8 @@ export const SidebarEditorField = ({
             case "object":
                 return (
                     <textarea
-                        value={value || ""}
-                        onChange={e => onChange(fieldKey, e.target.value)} />
+                        value={typeof value === "object" ? JSON.stringify(value, null, 2) || "" : value}
+                        onChange={e => onChange(fieldKey, isJson(e.target.value) ? JSON.parse(e.target.value) : e.target.value)} />
                 );
             case "radio":
                 return (
@@ -375,8 +379,17 @@ export const SidebarEditorField = ({
 
     return (
         <div key={`${field.name}`} className="mb-2">
-            <label className="block">{field.name}</label>
+            <label className="block">{field.name || fieldKey}</label>
             {inputField}
         </div>
     );
+};
+
+const isJson = (str) => {
+    try {
+        JSON.parse(str);
+    } catch (e) {
+        return false;
+    }
+    return true;
 };

package/src/SidebarEditor.js

@@ -26,7 +26,7 @@ const SidebarEditor = ({
         tables: {},
     };
 
-    const story = storybookStories.find(v => storybookElement.block === v.id);
+    const story = storybookStories?.find(v => storybookElement.block === v.id);
 
     if (story) {
         Object.keys(story.argTypes).forEach(key => {

package/src/Toolbar/Block.js

@@ -73,8 +73,23 @@ export const toggleBlock = (editor, format, attributes) => {
 
 export const isBlockActive = (editor, format, attributes) => {
     const {selection} = editor;
+
     if (selection) {
-        const selectedNodes = [editor.children[selection.anchor.path[0]]];
+        let selected = editor;
+
+        let reducedPath = selection.anchor.path.slice(0, -1);
+
+        for (let i = 0; i < reducedPath.length; i++) {
+            let path = reducedPath[i];
+
+            selected = selected.children[path];
+
+            if (LIST_TYPES.includes(selected.type)) {
+                break;
+            }
+        }
+
+        const selectedNodes = [selected];
 
         return !!selectedNodes.find(v => {
             if (Editor.isEditor(v)) {

package/src/Toolbar/Layout.js

@@ -204,6 +204,73 @@ export const InsertGridButton = () => {
             }}>
                 <span>1 | 1 | 1 | 1</span>
             </InsertLayoutButton>
+            <InsertLayoutButton insert={{
+                "type": "layout",
+                "children": [
+                    {
+                        "type": "layout-slot",
+                        "attributes": {"name": "grid-1"},
+                        "children": [
+                            {
+                                "type": "paragraph",
+                                "children": [
+                                    {"text": ""},
+                                ],
+                            },
+                        ],
+                    },
+                    {
+                        "type": "layout-slot",
+                        "attributes": {"name": "grid-1"},
+                        "children": [
+                            {
+                                "type": "paragraph",
+                                "children": [
+                                    {"text": ""},
+                                ],
+                            },
+                        ],
+                    },
+                    {
+                        "type": "layout-slot",
+                        "attributes": {"name": "grid-1"},
+                        "children": [
+                            {
+                                "type": "paragraph",
+                                "children": [
+                                    {"text": ""},
+                                ],
+                            },
+                        ],
+                    },
+                    {
+                        "type": "layout-slot",
+                        "attributes": {"name": "grid-1"},
+                        "children": [
+                            {
+                                "type": "paragraph",
+                                "children": [
+                                    {"text": ""},
+                                ],
+                            },
+                        ],
+                    },
+                    {
+                        "type": "layout-slot",
+                        "attributes": {"name": "grid-1"},
+                        "children": [
+                            {
+                                "type": "paragraph",
+                                "children": [
+                                    {"text": ""},
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            }}>
+                <span>1 | 1 | 1 | 1 | 1</span>
+            </InsertLayoutButton>
             <InsertLayoutButton insert={{
                 "type": "layout",
                 "children": [

package/src/plugins/ListItem.js

@@ -21,9 +21,9 @@ export const ListItemPlugin = {
             event.preventDefault();
             Transforms.insertNodes(editor, {
                 at: editor.selection.anchor.path,
-                match: node => {
-                    return node.type === "list-item";
-                },
+                // match: node => {
+                //     return node.type === "list-item";
+                // },
                 type: "list-item",
                 children: [{text: ""}],
             });