@vonaffenfels/slate-editor 1.1.49 → 1.1.51

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.1.49",
+    "version": "1.1.51",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -72,7 +72,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "079434363aa137a5f0cb69f42321a4e148e7a914",
+    "gitHead": "b95716b54761425787bdbbd58d7324005c26902c",
     "publishConfig": {
         "access": "public"
     }

package/src/Nodes/Leaf.js

@@ -1,8 +1,16 @@
 import React from "react";
-import {Bold, Italic, Text, Underlined, Strikethrough, Small} from "./Text";
-
-export const Leaf = ({attributes, children, leaf, isRenderer, typeProps, ...props}) => {
+import {
+    Bold, Italic, Text, Underlined, Strikethrough, Small, SuperscriptUp,
+} from "./Text";
 
+export const Leaf = ({
+    attributes,
+    children,
+    leaf,
+    isRenderer,
+    typeProps,
+    ...props
+}) => {
     if (leaf.bold) {
         children = <Bold typeProps={typeProps} attributes={attributes}><Text
             attributes={attributes}
@@ -36,5 +44,12 @@ export const Leaf = ({attributes, children, leaf, isRenderer, typeProps, ...prop
             isRenderer={isRenderer}>{children}</Text></Small>;
     }
 
+    if (leaf.superscriptUp) {
+        children = <SuperscriptUp typeProps={typeProps} attributes={attributes}><Text
+            attributes={attributes}
+            typeProps={typeProps}
+            isRenderer={isRenderer}>{children}</Text></SuperscriptUp>;
+    }
+
     return <Text attributes={attributes} typeProps={typeProps} isRenderer={isRenderer}>{children}</Text>;
 };

package/src/Nodes/Text.js

@@ -2,7 +2,12 @@ import React, {Fragment} from "react";
 
 const EmptyWrapper = ({children}) => <>{children}</>;
 
-export const Text = ({isRenderer, attributes, children, typeProps}) => {
+export const Text = ({
+    isRenderer,
+    attributes,
+    children,
+    typeProps,
+}) => {
     if (isRenderer) {
         if (!children) {
             return null;
@@ -23,7 +28,6 @@ export const Text = ({isRenderer, attributes, children, typeProps}) => {
                 {children}
             </Fragment>;
         }
-
     }
 
     return <span {...attributes}>{children}</span>;
@@ -46,22 +50,49 @@ function renderTextLine(text, typeProps) {
     return text;
 }
 
-export const Bold = ({attributes, children}) => {
+export const Bold = ({
+    attributes,
+    children,
+}) => {
     return <strong {...attributes}>{children}</strong>;
 };
 
-export const Italic = ({attributes, children}) => {
+export const Italic = ({
+    attributes,
+    children,
+}) => {
     return <i {...attributes}>{children}</i>;
 };
 
-export const Underlined = ({attributes, children}) => {
+export const Underlined = ({
+    attributes,
+    children,
+}) => {
     return <u {...attributes}>{children}</u>;
 };
 
-export const Strikethrough = ({attributes, children}) => {
+export const Strikethrough = ({
+    attributes,
+    children,
+}) => {
     return <del {...attributes}>{children}</del>;
 };
 
-export const Small = ({attributes, children}) => {
+export const Small = ({
+    attributes,
+    children,
+}) => {
     return <small {...attributes}>{children}</small>;
+};
+
+export const SuperscriptUp = ({
+    attributes,
+    children,
+}) => {
+    return <span
+        style={{
+            fontSize: "60%",
+            verticalAlign: "top",
+        }}
+        {...attributes}>{children}</span>;
 };

package/src/SidebarEditor.js

@@ -109,7 +109,7 @@ const SidebarEditor = ({
                         [fieldKey]: value,
                     },
                 };
-                
+
                 onChange(newStorybookElement);
             }
         }
@@ -322,7 +322,7 @@ const SidebarEditor = ({
     };
 
     return (
-        <div id="sidebar-editor-wrapper">
+        <div id="sidebar-editor-wrapper" className="relative z-[999999]">
             <div id="sidebar-editor">
                 {isLoading ? (
                     <div className="flex h-full flex-col items-center justify-center">

package/src/Toolbar/Formats.js

@@ -2,10 +2,18 @@ import {useSlate} from "slate-react";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import React, {useState} from "react";
 import classNames from "classnames";
-import {Editor, Text, Transforms} from "slate";
-import {faBold, faItalic, faUnderline, faStrikethrough} from "@fortawesome/free-solid-svg-icons";
+import {
+    Editor, Text, Transforms,
+} from "slate";
+import {
+    faBold, faItalic, faUnderline, faStrikethrough, faSuperscript,
+} from "@fortawesome/free-solid-svg-icons";
 
-export const FormatButton = ({format, icon, children}) => {
+export const FormatButton = ({
+    format,
+    icon,
+    children,
+}) => {
     const editor = useSlate();
     const onClick = (event) => {
         event.preventDefault();
@@ -57,4 +65,8 @@ export const FormatButtonUnderline = () => {
 
 export const FormatButtonStrikethrough = () => {
     return <FormatButton format="strikethrough" icon={faStrikethrough}/>;
+};
+
+export const FormatButtonSuperscriptUp = () => {
+    return <FormatButton format="superscriptUp" icon={faSuperscript}/>;
 };

package/src/Toolbar/Toolbar.js

@@ -8,7 +8,7 @@ import classNames from "classnames";
 // eslint-disable-next-line import/no-unresolved
 import "scss/toolbar.scss";
 import {
-    FormatButtonBold, FormatButtonItalic, FormatButtonStrikethrough, FormatButtonUnderline,
+    FormatButtonBold, FormatButtonItalic, FormatButtonStrikethrough, FormatButtonSuperscriptUp, FormatButtonUnderline,
 } from "./Formats";
 import {
     AlignButtonLeft, AlignButtonCenter, AlignButtonRight,
@@ -144,6 +144,7 @@ export const Toolbar = ({
                         <FormatButtonItalic/>
                         <FormatButtonUnderline/>
                         <FormatButtonStrikethrough/>
+                        <FormatButtonSuperscriptUp />
 
                         <LinkButton/>