@vonaffenfels/slate-editor 1.1.71 → 1.2.10

package/src/Toolbar/Toolbar.js

@@ -1,236 +1,236 @@
-import ReactDOM from "react-dom";
-import React, {
-    useEffect, useRef, useState,
-} from "react";
-import {ReactEditor} from "slate-react";
-import {Node} from "slate";
-import classNames from "classnames";
-// eslint-disable-next-line import/no-unresolved
-import "scss/toolbar.scss";
-import {
-    FormatButtonBold, FormatButtonItalic, FormatButtonStrikethrough, FormatButtonSuperscriptUp, FormatButtonUnderline,
-} from "./Formats";
-import {
-    AlignButtonLeft, AlignButtonCenter, AlignButtonRight,
-} from "./Align";
-import {
-    BlockButtonHeading, BlockButtonUnorderedList, BlockButtonOrderedList, BlockButtonBlockquote, BlockButtonArrowList,
-} from "./Block";
-import {StorybookButton} from "./Element";
-import {LinkButton} from "./Link";
-import {InsertDividerButton} from "./Insert";
-import {InsertGridButton} from "./Layout";
-import {
-    Autocomplete, Spinner,
-} from "@contentful/forma-36-react-components";
-import {Transforms} from "slate";
-import {ElementAutocomplete} from "../ElementAutocomplete";
-import {AnchorButton} from "./Anchor";
-
-export const Portal = ({children}) => {
-    return ReactDOM.createPortal(children, window.document.body);
-};
-
-export const Toolbar = ({
-    hover,
-    onSaveClick,
-    storybookStories,
-    isLoadingStories,
-    editor,
-    sdk,
-    lastSelection,
-    buttons,
-}) => {
-    const ref = useRef();
-
-    const portal = sdk?.entry?.fields?.portal.getValue();
-
-    useEffect(() => {
-        if (!hover) {
-            return;
-        }
-
-        const el = ref.current;
-        const {selection} = editor;
-
-        if (!el) {
-            return;
-        }
-
-        if (
-            // !selection ||
-            !ReactEditor.isFocused(editor) // ||
-            // Range.isCollapsed(selection) ||
-            // Editor.string(editor, selection) === ''
-        ) {
-            el.removeAttribute('style');
-            el.classList.remove("active");
-            return;
-        }
-
-        try {
-            const domSelection = window.getSelection();
-            const domRange = domSelection.getRangeAt(0);
-            const rect = domRange.getBoundingClientRect();
-
-            el.classList.add("active");
-
-            let distanceToMouse = 10;
-            let top = rect.top + window.pageYOffset - el.offsetHeight - distanceToMouse;
-            let left = rect.left + window.pageXOffset - el.offsetWidth / 2 + rect.width / 2 + distanceToMouse;
-
-            if (top < 0) {
-                top = el.offsetHeight;
-            }
-
-            if (left < 0) {
-                left = 0;
-            }
-
-            el.style.top = `${top}px`;
-            el.style.left = `${left}px`;
-        } catch (e) {
-            el.removeAttribute('style');
-            el.classList.remove("active");
-        }
-    }, [hover, ref, editor]);
-
-    const handleAutocompleteChange = item => {
-        let element = {
-            children: [{text: ''}],
-            type: item.type,
-            block: item.value,
-            attributes: {
-                ...(item.attributes || {}),
-                blockWidth: "site",
-            },
-        };
-
-        if (lastSelection?.anchor?.path?.length) {
-            lastSelection.anchor.path.forEach((p, i) => {
-                let slicedPath = lastSelection.anchor.path.slice(0, i + 1);
-                let node = Node.get(editor, slicedPath);
-
-                // Wenn Paragraph, dann auf die Ebene des Paragraphen
-                if (node.type === "paragraph") {
-                    Transforms.insertNodes(editor, [element], {at: slicedPath});
-
-                    return;
-                }
-
-                // Wenn vorletzter Anchor, dann einfügen (letzter ist column, keine row)
-                if (i === lastSelection.anchor.path.length - 2) {
-                    Transforms.insertNodes(editor, [element], {at: slicedPath});
-                }
-            });
-        } else {
-            Transforms.insertNodes(editor, [element], {at: [0]});
-        }
-    };
-
-    function renderMenu() {
-        return <Menu
-            ref={ref}
-            className={classNames({
-                active: !hover,
-                "toolbar-static": !hover,
-                toolbar: true,
-            })}
-        >
-            <div className="toolbar-btns">
-                <div className="flex grow items-center">
-                    <div className="flex">
-                        <FormatButtonBold/>
-                        <FormatButtonItalic/>
-                        <FormatButtonUnderline/>
-                        <FormatButtonStrikethrough/>
-                        <FormatButtonSuperscriptUp />
-
-                        <LinkButton/>
-
-                        <ToobarHoverExpandButton>
-                            <BlockButtonHeading level={1}/>
-                            <BlockButtonHeading level={2}/>
-                            <BlockButtonHeading level={3}/>
-                            <BlockButtonHeading level={4}/>
-                        </ToobarHoverExpandButton>
-
-                        <ToobarHoverExpandButton>
-                            <BlockButtonUnorderedList/>
-                            <BlockButtonOrderedList/>
-                            <BlockButtonArrowList/>
-                        </ToobarHoverExpandButton>
-
-                        <BlockButtonBlockquote/>
-
-                        <ToobarHoverExpandButton>
-                            <AlignButtonLeft/>
-                            <AlignButtonCenter/>
-                            <AlignButtonRight/>
-                        </ToobarHoverExpandButton>
-
-                        <AnchorButton />
-
-                        <ToobarHoverExpandButton>
-                            <InsertDividerButton/>
-                            <InsertGridButton/>
-                        </ToobarHoverExpandButton>
-                    </div>
-
-                    <div>
-                        <ElementAutocomplete
-                            isLoading={isLoadingStories}
-                            storybookStories={storybookStories}
-                            editor={editor}
-                            storyContext={sdk.parameters.instance.storyContext}
-                            portal={portal}
-                            lastSelection={lastSelection}
-                            onChange={handleAutocompleteChange}
-                        />
-                    </div>
-                </div>
-                {!!onSaveClick && <button
-                    className="!w-auto !border-0 !bg-green-600 !text-xs font-bold text-white hover:!bg-green-700"
-                    onClick={onSaveClick}>Änderungen speichern</button>}
-                {buttons && (
-                    <div>{buttons}</div>
-                )}
-            </div>
-        </Menu>;
-    }
-
-    if (hover) {
-        return (
-            <Portal>
-                {renderMenu()}
-            </Portal>
-        );
-    } else {
-        return renderMenu();
-    }
-};
-
-export const ToobarHoverExpandButton = ({children}) => {
-    return <span
-        className={
-            classNames({"toolbar-btn-expand": true})
-        }
-    >
-        <div className="toolbar-btn-expand-inner">
-            {children}
-        </div>
-    </span>;
-};
-
-export const Menu = React.forwardRef(({
-    className, ...props
-},
-ref) => (
-    <div
-        {...props}
-        ref={ref}
-        className={className}
-    />
-));
-
+import ReactDOM from "react-dom";
+import React, {
+    useEffect, useRef, useState,
+} from "react";
+import {ReactEditor} from "slate-react";
+import {Node} from "slate";
+import classNames from "classnames";
+// eslint-disable-next-line import/no-unresolved
+import "scss/toolbar.scss";
+import {
+    FormatButtonBold, FormatButtonItalic, FormatButtonStrikethrough, FormatButtonSuperscriptUp, FormatButtonUnderline,
+} from "./Formats";
+import {
+    AlignButtonLeft, AlignButtonCenter, AlignButtonRight,
+} from "./Align";
+import {
+    BlockButtonHeading, BlockButtonUnorderedList, BlockButtonOrderedList, BlockButtonBlockquote, BlockButtonArrowList,
+} from "./Block";
+import {StorybookButton} from "./Element";
+import {LinkButton} from "./Link";
+import {InsertDividerButton} from "./Insert";
+import {InsertGridButton} from "./Layout";
+import {
+    Autocomplete, Spinner,
+} from "@contentful/forma-36-react-components";
+import {Transforms} from "slate";
+import {ElementAutocomplete} from "../ElementAutocomplete";
+import {AnchorButton} from "./Anchor";
+
+export const Portal = ({children}) => {
+    return ReactDOM.createPortal(children, window.document.body);
+};
+
+export const Toolbar = ({
+    hover,
+    onSaveClick,
+    storybookStories,
+    isLoadingStories,
+    editor,
+    sdk,
+    lastSelection,
+    buttons,
+}) => {
+    const ref = useRef();
+
+    const portal = sdk?.entry?.fields?.portal.getValue();
+
+    useEffect(() => {
+        if (!hover) {
+            return;
+        }
+
+        const el = ref.current;
+        const {selection} = editor;
+
+        if (!el) {
+            return;
+        }
+
+        if (
+            // !selection ||
+            !ReactEditor.isFocused(editor) // ||
+            // Range.isCollapsed(selection) ||
+            // Editor.string(editor, selection) === ''
+        ) {
+            el.removeAttribute('style');
+            el.classList.remove("active");
+            return;
+        }
+
+        try {
+            const domSelection = window.getSelection();
+            const domRange = domSelection.getRangeAt(0);
+            const rect = domRange.getBoundingClientRect();
+
+            el.classList.add("active");
+
+            let distanceToMouse = 10;
+            let top = rect.top + window.pageYOffset - el.offsetHeight - distanceToMouse;
+            let left = rect.left + window.pageXOffset - el.offsetWidth / 2 + rect.width / 2 + distanceToMouse;
+
+            if (top < 0) {
+                top = el.offsetHeight;
+            }
+
+            if (left < 0) {
+                left = 0;
+            }
+
+            el.style.top = `${top}px`;
+            el.style.left = `${left}px`;
+        } catch (e) {
+            el.removeAttribute('style');
+            el.classList.remove("active");
+        }
+    }, [hover, ref, editor]);
+
+    const handleAutocompleteChange = item => {
+        let element = {
+            children: [{text: ''}],
+            type: item.type,
+            block: item.value,
+            attributes: {
+                ...(item.attributes || {}),
+                blockWidth: "site",
+            },
+        };
+
+        if (lastSelection?.anchor?.path?.length) {
+            lastSelection.anchor.path.forEach((p, i) => {
+                let slicedPath = lastSelection.anchor.path.slice(0, i + 1);
+                let node = Node.get(editor, slicedPath);
+
+                // Wenn Paragraph, dann auf die Ebene des Paragraphen
+                if (node.type === "paragraph") {
+                    Transforms.insertNodes(editor, [element], {at: slicedPath});
+
+                    return;
+                }
+
+                // Wenn vorletzter Anchor, dann einfügen (letzter ist column, keine row)
+                if (i === lastSelection.anchor.path.length - 2) {
+                    Transforms.insertNodes(editor, [element], {at: slicedPath});
+                }
+            });
+        } else {
+            Transforms.insertNodes(editor, [element], {at: [0]});
+        }
+    };
+
+    function renderMenu() {
+        return <Menu
+            ref={ref}
+            className={classNames({
+                active: !hover,
+                "toolbar-static": !hover,
+                toolbar: true,
+            })}
+        >
+            <div className="toolbar-btns">
+                <div className="flex grow items-center overflow-x-auto">
+                    <div className="flex">
+                        <FormatButtonBold/>
+                        <FormatButtonItalic/>
+                        <FormatButtonUnderline/>
+                        <FormatButtonStrikethrough/>
+                        <FormatButtonSuperscriptUp />
+
+                        <LinkButton/>
+
+                        <ToobarHoverExpandButton>
+                            <BlockButtonHeading level={1}/>
+                            <BlockButtonHeading level={2}/>
+                            <BlockButtonHeading level={3}/>
+                            <BlockButtonHeading level={4}/>
+                        </ToobarHoverExpandButton>
+
+                        <ToobarHoverExpandButton>
+                            <BlockButtonUnorderedList/>
+                            <BlockButtonOrderedList/>
+                            <BlockButtonArrowList/>
+                        </ToobarHoverExpandButton>
+
+                        <BlockButtonBlockquote/>
+
+                        <ToobarHoverExpandButton>
+                            <AlignButtonLeft/>
+                            <AlignButtonCenter/>
+                            <AlignButtonRight/>
+                        </ToobarHoverExpandButton>
+
+                        <AnchorButton />
+
+                        <ToobarHoverExpandButton>
+                            <InsertDividerButton/>
+                            <InsertGridButton/>
+                        </ToobarHoverExpandButton>
+                    </div>
+
+                    <div className="shrink-0">
+                        <ElementAutocomplete
+                            isLoading={isLoadingStories}
+                            storybookStories={storybookStories}
+                            editor={editor}
+                            storyContext={sdk.parameters.instance.storyContext}
+                            portal={portal}
+                            lastSelection={lastSelection}
+                            onChange={handleAutocompleteChange}
+                        />
+                    </div>
+                </div>
+                {!!onSaveClick && <button
+                    className="!w-auto !border-0 !bg-green-600 !text-xs font-bold text-white hover:!bg-green-700"
+                    onClick={onSaveClick}>Änderungen speichern</button>}
+                {buttons && (
+                    <div className="shink-0">{buttons}</div>
+                )}
+            </div>
+        </Menu>;
+    }
+
+    if (hover) {
+        return (
+            <Portal>
+                {renderMenu()}
+            </Portal>
+        );
+    } else {
+        return renderMenu();
+    }
+};
+
+export const ToobarHoverExpandButton = ({children}) => {
+    return <span
+        className={
+            classNames({"toolbar-btn-expand": true})
+        }
+    >
+        <div className="toolbar-btn-expand-inner">
+            {children}
+        </div>
+    </span>;
+};
+
+export const Menu = React.forwardRef(({
+    className, ...props
+},
+ref) => (
+    <div
+        {...props}
+        ref={ref}
+        className={className}
+    />
+));
+
 Menu.displayName = "Menu";

package/src/Tools/Margin.js

@@ -1,52 +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>;
+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>;
 };