@vonaffenfels/slate-editor 1.1.71 → 1.2.10

package/scss/toolbar.scss

@@ -1,162 +1,162 @@
-.toolbar {
-    background-color: rgba(255, 255, 255, 0.95);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-    display: none;
-    flex-direction: row;
-    justify-content: space-between;
-    font-family: Arial, sans-serif;
-    padding: 5px;
-    position: absolute;
-    z-index: 500;
-
-    &.toolbar-static {
-        display: block;
-        position: fixed;
-        width: 100%;
-        max-width: 100%;
-        top: 0px;
-        left: 0px;
-    }
-
-    &.active {
-        display: block;
-    }
-
-    .toolbar-btns {
-        display: flex;
-        align-items: center;
-    }
-
-    .toolbar-btn {
-        border-radius: 3px;
-        color: black;
-        cursor: pointer;
-        font-weight: bold;
-        margin-right: 5px;
-        padding: 5px 7px;
-        z-index: 500;
-        position: relative;
-        display: block;
-
-        &.active {
-            background-color: rgba(0, 0, 0, 0.3);
-        }
-
-        &:last-child {
-            margin-right: 0px;
-        }
-
-        &:hover, &:active {
-            background-color: rgba(0, 0, 0, 0.2);
-
-            .toolbar-btn-config {
-                display: block;
-            }
-        }
-
-        .toolbar-btn-config {
-            position: absolute;
-            top: 28px;
-            left: 0px;
-            display: none;
-            background-color: rgba(255, 255, 255, 0.95);
-            border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-            padding: 5px 7px;
-
-            .toolbar-btn-config-inner {
-                display: flex;
-                flex-direction: column;
-
-                .toolbar-btn-config-row {
-                    min-width: 250px;
-                    padding: 5px 7px;
-                    display: flex;
-                    flex-direction: row;
-
-                    .toolbar-form-label {
-                        flex-grow: 0;
-                        padding: 0 7px 0 0;
-                    }
-
-                    .toolbar-form-input {
-                        flex-grow: 1;
-
-                        input {
-                            padding: 5px;
-                            border: 1px solid grey;
-                            background-color: white;
-                            color: black;
-
-                            &[type="checkbox"] {
-                                &:checked {
-                                    color: white;
-                                    background-color: black;
-                                }
-                            }
-                        }
-                    }
-
-                    .toolbar-btn {
-                        display: flex;
-                        flex-grow: 1;
-                        border: 1px solid black;
-                    }
-                }
-            }
-        }
-    }
-
-    .toolbar-btn-expand {
-        z-index: 500;
-        display: block;
-        max-height: 28px;
-        overflow: hidden;
-
-        .toolbar-btn-expand-inner {
-            display: flex;
-            flex-direction: column;
-
-            .toolbar-btn.active {
-                order: -1;
-            }
-        }
-
-        &:hover {
-            .toolbar-btn-expand-inner {
-                background-color: rgba(255, 255, 255, 0.95);
-                border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-            }
-
-            overflow: visible;
-        }
-
-    }
-
-
-    .toolbar-btn-expand-right {
-        z-index: 500;
-        display: block;
-        max-height: 28px;
-        overflow: hidden;
-
-        .toolbar-btn-expand-inner {
-            left: 100%;
-            display: flex;
-            flex-direction: column;
-
-            .toolbar-btn.active {
-                order: -1;
-            }
-        }
-
-        &:hover {
-            .toolbar-btn-expand-inner {
-                background-color: rgba(255, 255, 255, 0.95);
-                border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-            }
-
-            overflow: visible;
-        }
-
-    }
+.toolbar {
+    background-color: rgba(255, 255, 255, 0.95);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+    display: none;
+    flex-direction: row;
+    justify-content: space-between;
+    font-family: Arial, sans-serif;
+    padding: 5px;
+    position: absolute;
+    z-index: 500;
+
+    &.toolbar-static {
+        display: block;
+        position: fixed;
+        width: 100%;
+        max-width: 100%;
+        top: 0px;
+        left: 0px;
+    }
+
+    &.active {
+        display: block;
+    }
+
+    .toolbar-btns {
+        display: flex;
+        align-items: center;
+    }
+
+    .toolbar-btn {
+        border-radius: 3px;
+        color: black;
+        cursor: pointer;
+        font-weight: bold;
+        margin-right: 5px;
+        padding: 5px 7px;
+        z-index: 500;
+        position: relative;
+        display: block;
+
+        &.active {
+            background-color: rgba(0, 0, 0, 0.3);
+        }
+
+        &:last-child {
+            margin-right: 0px;
+        }
+
+        &:hover, &:active {
+            background-color: rgba(0, 0, 0, 0.2);
+
+            .toolbar-btn-config {
+                display: block;
+            }
+        }
+
+        .toolbar-btn-config {
+            position: absolute;
+            top: 28px;
+            left: 0px;
+            display: none;
+            background-color: rgba(255, 255, 255, 0.95);
+            border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+            padding: 5px 7px;
+
+            .toolbar-btn-config-inner {
+                display: flex;
+                flex-direction: column;
+
+                .toolbar-btn-config-row {
+                    min-width: 250px;
+                    padding: 5px 7px;
+                    display: flex;
+                    flex-direction: row;
+
+                    .toolbar-form-label {
+                        flex-grow: 0;
+                        padding: 0 7px 0 0;
+                    }
+
+                    .toolbar-form-input {
+                        flex-grow: 1;
+
+                        input {
+                            padding: 5px;
+                            border: 1px solid grey;
+                            background-color: white;
+                            color: black;
+
+                            &[type="checkbox"] {
+                                &:checked {
+                                    color: white;
+                                    background-color: black;
+                                }
+                            }
+                        }
+                    }
+
+                    .toolbar-btn {
+                        display: flex;
+                        flex-grow: 1;
+                        border: 1px solid black;
+                    }
+                }
+            }
+        }
+    }
+
+    .toolbar-btn-expand {
+        z-index: 500;
+        display: block;
+        max-height: 28px;
+        overflow: hidden;
+
+        .toolbar-btn-expand-inner {
+            display: flex;
+            flex-direction: column;
+
+            .toolbar-btn.active {
+                order: -1;
+            }
+        }
+
+        &:hover {
+            .toolbar-btn-expand-inner {
+                background-color: rgba(255, 255, 255, 0.95);
+                border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+            }
+
+            overflow: visible;
+        }
+
+    }
+
+
+    .toolbar-btn-expand-right {
+        z-index: 500;
+        display: block;
+        max-height: 28px;
+        overflow: hidden;
+
+        .toolbar-btn-expand-inner {
+            left: 100%;
+            display: flex;
+            flex-direction: column;
+
+            .toolbar-btn.active {
+                order: -1;
+            }
+        }
+
+        &:hover {
+            .toolbar-btn-expand-inner {
+                background-color: rgba(255, 255, 255, 0.95);
+                border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+            }
+
+            overflow: visible;
+        }
+
+    }
 }

package/src/BlockEditor.js

@@ -17,7 +17,9 @@ import "../scss/editor.scss";
 import {ListItemPlugin} from "./plugins/ListItem";
 import ErrorBoundary from "../src/Blocks/ErrorBoundary";
 import SidebarEditor from './SidebarEditor';
-import {Spinner} from '@contentful/forma-36-react-components';
+import {
+    Button, Spinner,
+} from '@contentful/forma-36-react-components';
 import {ObjectId} from "./ObjectId";
 import {Resizable} from "./SidebarEditor/Resizable";
 import {Loader} from "./Loader";
@@ -421,10 +423,11 @@ export default function BlockEditor({
                                         sdk={contentfulSdk}
                                         setEditorValue={onSlateChange}
                                         locale={locale}
+                                        className="shrink-0"
                                         setLocale={setLocale}/>
                                     {liveLink && (
-                                        <a href={liveLink} target="_blank" rel="noreferrer">
-                                            <button className='button button--secondary'>Live-Seite öffnen</button>
+                                        <a href={liveLink} target="_blank" rel="noreferrer" className='shrink-0'>
+                                            <Button className='whitespace-nowrap' icon="ExternalLink" buttonType='naked'>Live ansehen</Button>
                                         </a>
                                     )}
                                 </div>}/>

package/src/Blocks/EmptyBlock.js

@@ -1,12 +1,12 @@
-import React from "react";
-
-export const EmptyBlock = () => {
-    if (process.env.NEXT_PUBLIC_VERCEL_ENV === "production") {
-        // hide this in production
-        return null;
-    }
-
-    return <span className="editor-empty-element" style={{minHeight: 200, display: "inline-block"}}>
-        Unbekanntes Element
-    </span>;
+import React from "react";
+
+export const EmptyBlock = () => {
+    if (process.env.NEXT_PUBLIC_VERCEL_ENV === "production") {
+        // hide this in production
+        return null;
+    }
+
+    return <span className="editor-empty-element" style={{minHeight: 200, display: "inline-block"}}>
+        Unbekanntes Element
+    </span>;
 };

package/src/Blocks/EmptyWrapper.js

@@ -1,5 +1,5 @@
-import React from "react";
-
-export const EmptyWrapper = ({children}) => {
-    return <>{children}</>;
+import React from "react";
+
+export const EmptyWrapper = ({children}) => {
+    return <>{children}</>;
 };

package/src/Blocks/ErrorBoundary.js

@@ -1,41 +1,41 @@
-import React from "react";
-
-export default class ErrorBoundary extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            hasError: false,
-        };
-    }
-
-    static getDerivedStateFromError(error) {
-        return {hasError: true};
-    }
-
-    componentDidCatch(error, errorInfo) {
-        const groupName = `Error in ${this.props.name}`;
-        console.groupCollapsed(groupName);
-        console.error("Error", error);
-        console.error("Info", errorInfo);
-        console.groupEnd(groupName);
-    }
-
-    render() {
-        if (this.state.hasError) {
-
-            if (this.props.fallback) {
-                return this.props.fallback;
-            }
-
-            if (this.props.isEditor) {
-                return <div className="storybook-element-error">
-                    <p>Error in Element {this.props.name}</p>
-                </div>;
-            }
-
-            return null;
-        }
-
-        return this.props.children;
-    }
+import React from "react";
+
+export default class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            hasError: false,
+        };
+    }
+
+    static getDerivedStateFromError(error) {
+        return {hasError: true};
+    }
+
+    componentDidCatch(error, errorInfo) {
+        const groupName = `Error in ${this.props.name}`;
+        console.groupCollapsed(groupName);
+        console.error("Error", error);
+        console.error("Info", errorInfo);
+        console.groupEnd(groupName);
+    }
+
+    render() {
+        if (this.state.hasError) {
+
+            if (this.props.fallback) {
+                return this.props.fallback;
+            }
+
+            if (this.props.isEditor) {
+                return <div className="storybook-element-error">
+                    <p>Error in Element {this.props.name}</p>
+                </div>;
+            }
+
+            return null;
+        }
+
+        return this.props.children;
+    }
 }