@vonaffenfels/slate-editor 1.2.0 → 1.2.11

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.2.0",
+    "version": "1.2.11",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -72,7 +72,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "fe9b4ce59e9b4dfae924c580f3a1247c180f4d9b",
+    "gitHead": "fa0c31b3c84bf9dfc1ce3707da9fb135834adb85",
     "publishConfig": {
         "access": "public"
     }

package/scss/editor.scss

@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+input {
+  background-image: none !important;
+}
+
 .block-editor-wrapper {
 
   position: relative;
@@ -433,21 +437,29 @@
 .resizable {
 
   &.enabled {
-    .resizable-left {
-      max-width: calc(100vw - 300px);
+    @media (max-width: 360px) {
+      .resizable-left {
+        max-width: calc(100vw - 300px);
+      }
+
+      .resizable-right {
+        width: 100%;
+      }
     }
   }
 
   .resizable-left {
     scrollbar-width: none;
-    max-width: 100vw;
     position: relative;
   }
 
   .resizable-right {
     scrollbar-width: none;
-    max-width: calc(100vw - 300px);
-    position: relative;
+    max-width: 300px;
+    height: 100%;
+    position: absolute;
+    right: 0;
+    top: 0;
   }
 
   .resizable-x-handle {

package/scss/sidebarEditor.scss

@@ -1,5 +1,9 @@
 #sidebar-editor-wrapper {
-    padding-top: 45px;
+    @media (max-width: 768px) {
+        padding-top: 66px;
+    }
+
+    padding-top: 51px;
     height: 100%;
     flex-basis: 400px;
     flex-shrink: 0;

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/ElementAutocomplete.js

@@ -121,6 +121,7 @@ export const ElementAutocomplete = ({
             width="medium"
             itemToString={(item) => ""}
             renderItem={(item) => `${item.label}`}
+            className="!static" // fix for toolbar overflow
             {...props}
         />
     );

package/src/Toolbar/Toolbar.js

@@ -138,7 +138,7 @@ export const Toolbar = ({
             })}
         >
             <div className="toolbar-btns">
-                <div className="flex grow items-center">
+                <div className="flex grow items-center overflow-x-auto">
                     <div className="flex">
                         <FormatButtonBold/>
                         <FormatButtonItalic/>
@@ -177,7 +177,7 @@ export const Toolbar = ({
                         </ToobarHoverExpandButton>
                     </div>
 
-                    <div>
+                    <div className="shrink-0">
                         <ElementAutocomplete
                             isLoading={isLoadingStories}
                             storybookStories={storybookStories}
@@ -193,7 +193,7 @@ export const Toolbar = ({
                     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 className="shink-0">{buttons}</div>
                 )}
             </div>
         </Menu>;

package/src/Translation/TranslationToolbarButton.js

@@ -5,6 +5,7 @@ import {Modal} from '@contentful/f36-components';
 import {
     Select, Button, Paragraph,
 } from '@contentful/f36-components';
+import classNames from "classnames";
 
 export const TranslationToolbarButton = ({
     sdk,
@@ -12,6 +13,7 @@ export const TranslationToolbarButton = ({
     locale,
     setLocale,
     translateFromLocale = "de",
+    className,
 }) => {
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(null);
@@ -74,16 +76,18 @@ export const TranslationToolbarButton = ({
         translateEditorValue(translateFromValue, locale);
     };
 
-    return <div className="flex gap-2">
+    return <div className={classNames("flex gap-2", className)}>
         {!!error && <ErrorOverlay title={error.title} message={error.message} />}
         {locale !== sdk.locales.default &&
             <Button
                 variant="secondary"
+                className="shrink-0"
                 onClick={onAutoTranslateClick}
                 size="small">{loading ? "Wird übersetzt..." : "Automatisch Übersetzen"}</Button>}
         <Select
             value={locale}
             onChange={handleOnChange}
+            className="shrink-0"
         >
             {Object.keys(sdk?.locales?.names || {}).map((locale) => {
                 return <Select.Option key={locale} value={locale}>{sdk.locales.names[locale]}</Select.Option>;