@vonaffenfels/slate-editor 1.2.15 → 1.2.19

package/src/Loader.js

@@ -1,138 +1,138 @@
-export const Loader = ({
-    width = "240px",
-    height = "240px",
-}) => {
-    return <svg
-        style={{
-            margin: "auto",
-            background: "none",
-            display: "block",
-            shapeRendering: "auto",
-        }}
-        width={width}
-        height={height}
-        viewBox="0 0 100 100"
-        preserveAspectRatio="xMidYMid">
-        <g transform="rotate(0 50 50)">
-            <rect x="46.5" y="17.5" rx="3.5" ry="1.5" width="7" height="3" fill="#000000">
-                <animate
-                    attributeName="opacity"
-                    values="1;0"
-                    keyTimes="0;1"
-                    dur="0.9174311926605504s"
-                    begin="-0.8340283569641368s"
-                    repeatCount="indefinite" />
-            </rect>
-        </g>
-        <g transform="rotate(32.72727272727273 50 50)">
-            <rect x="46.5" y="17.5" rx="3.5" ry="1.5" width="7" height="3" fill="#000000">
-                <animate
-                    attributeName="opacity"
-                    values="1;0"
-                    keyTimes="0;1"
-                    dur="0.9174311926605504s"
-                    begin="-0.7506255212677231s"
-                    repeatCount="indefinite" />
-            </rect>
-        </g>
-        <g transform="rotate(65.45454545454545 50 50)">
-            <rect x="46.5" y="17.5" rx="3.5" ry="1.5" width="7" height="3" fill="#000000">
-                <animate
-                    attributeName="opacity"
-                    values="1;0"
-                    keyTimes="0;1"
-                    dur="0.9174311926605504s"
-                    begin="-0.6672226855713094s"
-                    repeatCount="indefinite" />
-            </rect>
-        </g>
-        <g transform="rotate(98.18181818181819 50 50)">
-            <rect x="46.5" y="17.5" rx="3.5" ry="1.5" width="7" height="3" fill="#000000">
-                <animate
-                    attributeName="opacity"
-                    values="1;0"
-                    keyTimes="0;1"
-                    dur="0.9174311926605504s"
-                    begin="-0.5838198498748958s"
-                    repeatCount="indefinite" />
-            </rect>
-        </g>
-        <g transform="rotate(130.9090909090909 50 50)">
-            <rect x="46.5" y="17.5" rx="3.5" ry="1.5" width="7" height="3" fill="#000000">
-                <animate
-                    attributeName="opacity"
-                    values="1;0"
-                    keyTimes="0;1"
-                    dur="0.9174311926605504s"
-                    begin="-0.5004170141784821s"
-                    repeatCount="indefinite" />
-            </rect>
-        </g>
-        <g transform="rotate(163.63636363636363 50 50)">
-            <rect x="46.5" y="17.5" rx="3.5" ry="1.5" width="7" height="3" fill="#000000">
-                <animate
-                    attributeName="opacity"
-                    values="1;0"
-                    keyTimes="0;1"
-                    dur="0.9174311926605504s"
-                    begin="-0.4170141784820684s"
-                    repeatCount="indefinite" />
-            </rect>
-        </g>
-        <g transform="rotate(196.36363636363637 50 50)">
-            <rect x="46.5" y="17.5" rx="3.5" ry="1.5" width="7" height="3" fill="#000000">
-                <animate
-                    attributeName="opacity"
-                    values="1;0"
-                    keyTimes="0;1"
-                    dur="0.9174311926605504s"
-                    begin="-0.3336113427856547s"
-                    repeatCount="indefinite" />
-            </rect>
-        </g>
-        <g transform="rotate(229.0909090909091 50 50)">
-            <rect x="46.5" y="17.5" rx="3.5" ry="1.5" width="7" height="3" fill="#000000">
-                <animate
-                    attributeName="opacity"
-                    values="1;0"
-                    keyTimes="0;1"
-                    dur="0.9174311926605504s"
-                    begin="-0.25020850708924103s"
-                    repeatCount="indefinite" />
-            </rect>
-        </g>
-        <g transform="rotate(261.8181818181818 50 50)">
-            <rect x="46.5" y="17.5" rx="3.5" ry="1.5" width="7" height="3" fill="#000000">
-                <animate
-                    attributeName="opacity"
-                    values="1;0"
-                    keyTimes="0;1"
-                    dur="0.9174311926605504s"
-                    begin="-0.16680567139282734s"
-                    repeatCount="indefinite" />
-            </rect>
-        </g>
-        <g transform="rotate(294.54545454545456 50 50)">
-            <rect x="46.5" y="17.5" rx="3.5" ry="1.5" width="7" height="3" fill="#000000">
-                <animate
-                    attributeName="opacity"
-                    values="1;0"
-                    keyTimes="0;1"
-                    dur="0.9174311926605504s"
-                    begin="-0.08340283569641367s"
-                    repeatCount="indefinite" />
-            </rect>
-        </g>
-        <g transform="rotate(327.27272727272725 50 50)">
-            <rect x="46.5" y="17.5" rx="3.5" ry="1.5" width="7" height="3" fill="#000000">
-                <animate
-                    attributeName="opacity"
-                    values="1;0"
-                    keyTimes="0;1"
-                    dur="0.9174311926605504s"
-                    begin="0s"
-                    repeatCount="indefinite" />
-            </rect>
-        </g>
-    </svg>;
+export const Loader = ({
+    width = "240px",
+    height = "240px",
+}) => {
+    return <svg
+        style={{
+            margin: "auto",
+            background: "none",
+            display: "block",
+            shapeRendering: "auto",
+        }}
+        width={width}
+        height={height}
+        viewBox="0 0 100 100"
+        preserveAspectRatio="xMidYMid">
+        <g transform="rotate(0 50 50)">
+            <rect x="46.5" y="17.5" rx="3.5" ry="1.5" width="7" height="3" fill="#000000">
+                <animate
+                    attributeName="opacity"
+                    values="1;0"
+                    keyTimes="0;1"
+                    dur="0.9174311926605504s"
+                    begin="-0.8340283569641368s"
+                    repeatCount="indefinite" />
+            </rect>
+        </g>
+        <g transform="rotate(32.72727272727273 50 50)">
+            <rect x="46.5" y="17.5" rx="3.5" ry="1.5" width="7" height="3" fill="#000000">
+                <animate
+                    attributeName="opacity"
+                    values="1;0"
+                    keyTimes="0;1"
+                    dur="0.9174311926605504s"
+                    begin="-0.7506255212677231s"
+                    repeatCount="indefinite" />
+            </rect>
+        </g>
+        <g transform="rotate(65.45454545454545 50 50)">
+            <rect x="46.5" y="17.5" rx="3.5" ry="1.5" width="7" height="3" fill="#000000">
+                <animate
+                    attributeName="opacity"
+                    values="1;0"
+                    keyTimes="0;1"
+                    dur="0.9174311926605504s"
+                    begin="-0.6672226855713094s"
+                    repeatCount="indefinite" />
+            </rect>
+        </g>
+        <g transform="rotate(98.18181818181819 50 50)">
+            <rect x="46.5" y="17.5" rx="3.5" ry="1.5" width="7" height="3" fill="#000000">
+                <animate
+                    attributeName="opacity"
+                    values="1;0"
+                    keyTimes="0;1"
+                    dur="0.9174311926605504s"
+                    begin="-0.5838198498748958s"
+                    repeatCount="indefinite" />
+            </rect>
+        </g>
+        <g transform="rotate(130.9090909090909 50 50)">
+            <rect x="46.5" y="17.5" rx="3.5" ry="1.5" width="7" height="3" fill="#000000">
+                <animate
+                    attributeName="opacity"
+                    values="1;0"
+                    keyTimes="0;1"
+                    dur="0.9174311926605504s"
+                    begin="-0.5004170141784821s"
+                    repeatCount="indefinite" />
+            </rect>
+        </g>
+        <g transform="rotate(163.63636363636363 50 50)">
+            <rect x="46.5" y="17.5" rx="3.5" ry="1.5" width="7" height="3" fill="#000000">
+                <animate
+                    attributeName="opacity"
+                    values="1;0"
+                    keyTimes="0;1"
+                    dur="0.9174311926605504s"
+                    begin="-0.4170141784820684s"
+                    repeatCount="indefinite" />
+            </rect>
+        </g>
+        <g transform="rotate(196.36363636363637 50 50)">
+            <rect x="46.5" y="17.5" rx="3.5" ry="1.5" width="7" height="3" fill="#000000">
+                <animate
+                    attributeName="opacity"
+                    values="1;0"
+                    keyTimes="0;1"
+                    dur="0.9174311926605504s"
+                    begin="-0.3336113427856547s"
+                    repeatCount="indefinite" />
+            </rect>
+        </g>
+        <g transform="rotate(229.0909090909091 50 50)">
+            <rect x="46.5" y="17.5" rx="3.5" ry="1.5" width="7" height="3" fill="#000000">
+                <animate
+                    attributeName="opacity"
+                    values="1;0"
+                    keyTimes="0;1"
+                    dur="0.9174311926605504s"
+                    begin="-0.25020850708924103s"
+                    repeatCount="indefinite" />
+            </rect>
+        </g>
+        <g transform="rotate(261.8181818181818 50 50)">
+            <rect x="46.5" y="17.5" rx="3.5" ry="1.5" width="7" height="3" fill="#000000">
+                <animate
+                    attributeName="opacity"
+                    values="1;0"
+                    keyTimes="0;1"
+                    dur="0.9174311926605504s"
+                    begin="-0.16680567139282734s"
+                    repeatCount="indefinite" />
+            </rect>
+        </g>
+        <g transform="rotate(294.54545454545456 50 50)">
+            <rect x="46.5" y="17.5" rx="3.5" ry="1.5" width="7" height="3" fill="#000000">
+                <animate
+                    attributeName="opacity"
+                    values="1;0"
+                    keyTimes="0;1"
+                    dur="0.9174311926605504s"
+                    begin="-0.08340283569641367s"
+                    repeatCount="indefinite" />
+            </rect>
+        </g>
+        <g transform="rotate(327.27272727272725 50 50)">
+            <rect x="46.5" y="17.5" rx="3.5" ry="1.5" width="7" height="3" fill="#000000">
+                <animate
+                    attributeName="opacity"
+                    values="1;0"
+                    keyTimes="0;1"
+                    dur="0.9174311926605504s"
+                    begin="0s"
+                    repeatCount="indefinite" />
+            </rect>
+        </g>
+    </svg>;
 };

package/src/Nodes/Default.js

@@ -1,159 +1,163 @@
-import classNames from "classnames";
-import React from "react";
-
-export const Default = ({
-    attributes,
-    elementPropsMap,
-    specialClassMap,
-    transformAttributes,
-    children,
-    element,
-    isRenderer,
-    isInSlot = false,
-    defaultComponentReplacement,
-    onElementClick = () => {
-    },
-    ...props
-}) => {
-    const getPropsForType = (type) => {
-        if (!elementPropsMap) {
-            return {};
-        }
-
-        if (isInSlot) {
-            if (elementPropsMap[type + "-in-slot"]) {
-                return elementPropsMap[type + "-in-slot"];
-            }
-        }
-
-        return elementPropsMap[type] || {};
-    };
-    const {
-        type,
-        align,
-    } = element;
-    let elementAttributes = {
-        ...(element.attributes || {}),
-        ...getPropsForType(type),
-    };
-
-    if (typeof transformAttributes === "function") {
-        elementAttributes = transformAttributes(type, elementAttributes);
-    }
-
-    let alignedClassname = attributes.className || elementAttributes.className || "";
-    let Wrapper = elementAttributes.wrapper || function ({children}) {
-        return <>{children}</>;
-    };
-
-    if (align) {
-        if (specialClassMap && specialClassMap[align]) {
-            alignedClassname += specialClassMap[align];
-        } else {
-            alignedClassname += "align-" + align;
-        }
-    }
-
-    attributes.onClick = () => onElementClick(element);
-    attributes.className = alignedClassname.trim() || undefined;
-
-    switch (type) {
-        case "blockquote":
-            return <Wrapper type={type}>
-                <blockquote {...attributes}>{children}</blockquote>
-            </Wrapper>;
-        case "list-item":
-            return <Wrapper type={type}>
-                <li {...attributes}>{children}</li>
-            </Wrapper>;
-        case "unordered-list":
-            return <Wrapper type={type}>
-                <ul {...attributes}>{children}</ul>
-            </Wrapper>;
-        case "ordered-list":
-            return <Wrapper type={type}>
-                <ol {...attributes}>{children}</ol>
-            </Wrapper>;
-        case "arrow-list":
-            return <Wrapper type={type}>
-                <ul
-                    {...attributes}
-                    className={classNames("arrow-list", attributes.className)}>{children}</ul>
-            </Wrapper>;
-        case "code":
-            if (isRenderer) {
-                return <Wrapper code={element?.attributes?.code} type={type}/>;
-            } else {
-                return <Wrapper type={type}>
-                    <div {...attributes} >
-                        <div dangerouslySetInnerHTML={{__html: element?.attributes?.code}}/>
-                    </div>
-                </Wrapper>;
-            }
-        case "heading": {
-            const HeadingTag = `h${element.attributes.level || 1}`;
-            return <Wrapper level={element.attributes.level} type={type}>
-                <HeadingTag
-                    {...attributes}
-                    id={element?.attributes?.id || undefined}
-                >
-                    {children}
-                </HeadingTag>
-            </Wrapper>;
-        }
-        case "link": {
-            let relProp = `noopener noreferrer`;
-            let {
-                noFollow,
-                nofollow,
-                ...linkAttributes
-            } = elementAttributes;
-
-            const nofollowProp = noFollow || nofollow;
-
-            if (nofollowProp) {
-                relProp += " nofollow";
-            }
-
-            let CustomLink = typeof defaultComponentReplacement === "function" ? defaultComponentReplacement(type) : null;
-
-            if (CustomLink) {
-                return <Wrapper type={type}><CustomLink
-                    {...linkAttributes}
-                    {...attributes}
-                    rel={relProp}
-                    className={alignedClassname.trim()}>{children}</CustomLink></Wrapper>;
-            } else {
-                return <Wrapper type={type}><a
-                    {...linkAttributes}
-                    {...attributes}
-                    rel={relProp}
-                    className={alignedClassname.trim()}>{children}</a></Wrapper>;
-            }
-        }
-        case "paragraph":
-            return <Wrapper type={type}><p
-                {...element.attributes}
-                {...attributes}
-                className={alignedClassname.trim()}>{children}</p></Wrapper>;
-        case "divider":
-            return <Wrapper type={type}>
-                <hr {...attributes} />
-                {children}
-            </Wrapper>;
-        case "div":
-            return <Wrapper type={type}>
-                <div {...element.attributes} {...attributes}>{children}</div>
-            </Wrapper>;
-        case "span":
-            return <Wrapper type={type}>
-                <span {...element.attributes} {...attributes}>{children}</span>
-            </Wrapper>;
-        default:
-            if (isRenderer) {
-                return <Wrapper type={type}>{children}</Wrapper>;
-            } else {
-                return <span {...attributes} className={alignedClassname.trim()}>{children}</span>;
-            }
-    }
+import classNames from "classnames";
+import React from "react";
+
+export const Default = ({
+    attributes,
+    elementPropsMap,
+    specialClassMap,
+    transformAttributes,
+    children,
+    element,
+    isRenderer,
+    isInSlot = false,
+    defaultComponentReplacement,
+    onElementClick = () => {
+    },
+    ...props
+}) => {
+    const getPropsForType = (type) => {
+        if (!elementPropsMap) {
+            return {};
+        }
+
+        if (isInSlot) {
+            if (elementPropsMap[type + "-in-slot"]) {
+                return elementPropsMap[type + "-in-slot"];
+            }
+        }
+
+        return elementPropsMap[type] || {};
+    };
+    const {
+        type,
+        align,
+    } = element;
+    let elementAttributes = {
+        ...(element.attributes || {}),
+        ...getPropsForType(type),
+    };
+
+    if (typeof transformAttributes === "function") {
+        elementAttributes = transformAttributes(type, elementAttributes);
+    }
+
+    let alignedClassname = attributes.className || elementAttributes.className || "";
+    let Wrapper = elementAttributes.wrapper || function ({children}) {
+        return <>{children}</>;
+    };
+
+    if (align) {
+        if (specialClassMap && specialClassMap[align]) {
+            alignedClassname += specialClassMap[align];
+        } else {
+            alignedClassname += "align-" + align;
+        }
+    }
+
+    attributes.onClick = () => onElementClick(element);
+    attributes.className = alignedClassname.trim() || undefined;
+
+    switch (type) {
+        case "blockquote":
+            return <Wrapper type={type}>
+                <blockquote {...attributes}>{children}</blockquote>
+            </Wrapper>;
+        case "list-item":
+            return <Wrapper type={type}>
+                <li {...attributes}>{children}</li>
+            </Wrapper>;
+        case "unordered-list":
+            return <Wrapper type={type}>
+                <ul {...attributes}>{children}</ul>
+            </Wrapper>;
+        case "ordered-list":
+            return <Wrapper type={type}>
+                <ol {...attributes}>{children}</ol>
+            </Wrapper>;
+        case "arrow-list":
+            return <Wrapper type={type}>
+                <ul
+                    {...attributes}
+                    className={classNames("arrow-list", attributes.className)}>{children}</ul>
+            </Wrapper>;
+        case "code":
+            if (isRenderer) {
+                return <Wrapper code={element?.attributes?.code} type={type}/>;
+            } else {
+                return <Wrapper type={type}>
+                    <div {...attributes} >
+                        <div dangerouslySetInnerHTML={{__html: element?.attributes?.code}}/>
+                    </div>
+                </Wrapper>;
+            }
+        case "heading": {
+            const HeadingTag = `h${element.attributes.level || 1}`;
+            return <Wrapper level={element.attributes.level} type={type}>
+                <HeadingTag
+                    {...attributes}
+                    id={element?.attributes?.id || undefined}
+                >
+                    {children}
+                </HeadingTag>
+            </Wrapper>;
+        }
+        case "link": {
+            let relProp = `noopener noreferrer`;
+            let {
+                noFollow,
+                nofollow,
+                ...linkAttributes
+            } = elementAttributes;
+
+            const nofollowProp = noFollow || nofollow;
+
+            if (linkAttributes.href?.startsWith("/mailto:") || linkAttributes.href?.startsWith("/tel:")) {
+                linkAttributes.href = linkAttributes.href.slice(1);
+            }
+
+            if (nofollowProp) {
+                relProp += " nofollow";
+            }
+
+            let CustomLink = typeof defaultComponentReplacement === "function" ? defaultComponentReplacement(type) : null;
+
+            if (CustomLink) {
+                return <Wrapper type={type}><CustomLink
+                    {...linkAttributes}
+                    {...attributes}
+                    rel={relProp}
+                    className={alignedClassname.trim()}>{children}</CustomLink></Wrapper>;
+            } else {
+                return <Wrapper type={type}><a
+                    {...linkAttributes}
+                    {...attributes}
+                    rel={relProp}
+                    className={alignedClassname.trim()}>{children}</a></Wrapper>;
+            }
+        }
+        case "paragraph":
+            return <Wrapper type={type}><p
+                {...element.attributes}
+                {...attributes}
+                className={alignedClassname.trim()}>{children}</p></Wrapper>;
+        case "divider":
+            return <Wrapper type={type}>
+                <hr {...attributes} />
+                {children}
+            </Wrapper>;
+        case "div":
+            return <Wrapper type={type}>
+                <div {...element.attributes} {...attributes}>{children}</div>
+            </Wrapper>;
+        case "span":
+            return <Wrapper type={type}>
+                <span {...element.attributes} {...attributes}>{children}</span>
+            </Wrapper>;
+        default:
+            if (isRenderer) {
+                return <Wrapper type={type}>{children}</Wrapper>;
+            } else {
+                return <span {...attributes} className={alignedClassname.trim()}>{children}</span>;
+            }
+    }
 };