@vonaffenfels/contentful-slate-editor 1.1.32 → 1.1.34

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/contentful-slate-editor",
-    "version": "1.1.32",
+    "version": "1.1.34",
     "scripts": {
         "prepublish": "yarn run build",
         "dev": "yarn run start",
@@ -15,6 +15,8 @@
         "@babel/preset-env": "^7.13.15",
         "@babel/preset-react": "^7.13.13",
         "@contentful/app-sdk": "^3.33.0",
+        "@contentful/f36-components": "^4.56.2",
+        "@contentful/f36-multiselect": "^4.21.0",
         "@contentful/field-editor-single-line": "^0.14.1",
         "@contentful/field-editor-test-utils": "^0.11.1",
         "@contentful/forma-36-fcss": "^0.3.1",
@@ -93,10 +95,10 @@
         "webpack-watch-files-plugin": "^1.2.1"
     },
     "dependencies": {
-        "@vonaffenfels/slate-editor": "^1.1.32",
+        "@vonaffenfels/slate-editor": "^1.1.34",
         "webpack": "5.88.2"
     },
-    "gitHead": "2580259ce68220072e2ed08afae7dec37f573dee",
+    "gitHead": "1e3ea5ff0c721c70b372b3507f1c2ee1f4ff270c",
     "publishConfig": {
         "access": "public"
     }

package/src/components/EditorField.js

@@ -148,6 +148,13 @@ const EditorField = ({
         });
     };
 
+    const slug = sdk?.entry?.fields?.slug?.getForLocale(locale)?.getValue();
+    let liveLink = slug ? `${activeConfig.domain}/${slug}` : null;
+
+    if (slug && sdk?.locales?.default !== locale) {
+        liveLink = `${activeConfig.domain}/${locale}/${slug}`;
+    }
+
     return <div ref={wrapperRef} className="editor-field h-full">
         <BlockEditor
             onChange={onChange}
@@ -162,7 +169,7 @@ const EditorField = ({
             isLoading={isLoadingCount !== 0}
             storybookComponentDataLoader={async (block, attributes) => await getLoaderResult(block, attributes)}
             onStorybookElementClick={onStorybookElementClick}
-            activeConfig={activeConfig}
+            liveLink={liveLink}
         />
     </div>;
 };

package/src/components/Sidebar.js

@@ -22,6 +22,23 @@ const OpenProdPageLink = ({
     sdk,
 }) => {
     const [slug, setSlug] = useState(sdk?.entry?.fields?.slug?.getValue());
+    const [locale, setLocale] = useState(sdk.locales.default);
+
+    useEffect(() => {
+        const detachHandler = sdk.editor.onLocaleSettingsChanged((loc) => {
+            setLocale(loc?.focused || sdk.locales.default);
+        });
+
+        return () => {
+            detachHandler();
+        };
+    }, [sdk]);
+
+    useEffect(() => {
+        if (locale) {
+            setSlug(sdk?.entry?.fields?.slug.getForLocale(locale).getValue());
+        }
+    }, [locale]);
 
     useEffect(() => {
         if (sdk?.entry?.fields?.slug) {
@@ -30,12 +47,17 @@ const OpenProdPageLink = ({
     }, [sdk]);
 
     const disabled = !activeConfig?.domain || !slug;
-    const link = `${activeConfig.domain}/${slug}`;
+    let link = `${activeConfig.domain}/${slug}`;
+
+    if (sdk?.locales?.default !== locale) {
+        link = `${activeConfig.domain}/${locale}/${slug}`;
+    }
 
     const onClick = () => {
         if (disabled) {
             return;
         }
+
         window.open(link, "_blank");
     };