feat: handle default Slate widget

collective · May 2, 2024 · f6974df · f6974df
1 parent 35116b4
commit f6974df
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 82 deletions.
diff --git a/package.json b/package.json
@@ -10,7 +10,6 @@
     "@plone/scripts": "^2.0.0",
     "release-it": "^14.10.1"
   },
-  "dependencies": {},
   "peerDependencies": {
     "@plone/volto": ">=16.0.0-alpha.38"
   },

diff --git a/src/MultilingualWidget.jsx b/src/MultilingualWidget.jsx
@@ -1,10 +1,9 @@
 import React, { useEffect } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import { Tab, Grid, Form } from 'semantic-ui-react';
+import { Tab, TabPane, Grid, Form } from 'semantic-ui-react';
 import { useSelector, useDispatch } from 'react-redux';
 import { getContent } from '@plone/volto/actions';
-
-import { WysiwygWidget } from '@plone/volto/components';
+import config from '@plone/volto/registry';
 
 const messages = defineMessages({
   valueForLang: {
@@ -29,91 +28,94 @@ const srOnlyStyles = {
   border: '0',
 };
 
-const MultilingualWidget = (Widget = WysiwygWidget, defaultValue = '') => ({
-  value = defaultValue,
-  id,
-  onChange,
-  required,
-  title,
-  description,
-}) => {
-  const intl = useIntl();
-  const availableLanguages = useSelector(
-    (state) =>
-      state.content?.subrequests?.languageControlpanel?.data?.data
-        ?.available_languages,
-  );
-  const dispatch = useDispatch();
+const MultilingualWidget =
+  (Widget, defaultValue = '') =>
+  ({ value = defaultValue, id, onChange, required, title, description }) => {
+    const editor = !!config.settings.slate ? 'slate' : 'draftjs';
+    const DefaultWidget = config.widgets.widget.richtext;
 
-  const valueObj = typeof value === 'string' ? JSON.parse(value) : value;
+    const WidgetComponent = Widget ?? DefaultWidget;
 
-  const handleChangeLangValue = (lang) => (fid, v) => {
-    onChange(
-      id,
-      JSON.stringify({
-        ...valueObj,
-        [lang]: Widget === WysiwygWidget ? v.data : v,
-      }),
+    const intl = useIntl();
+    const availableLanguages = useSelector(
+      (state) =>
+        state.content?.subrequests?.languageControlpanel?.data?.data
+          ?.available_languages,
     );
-  };
+    const dispatch = useDispatch();
 
-  useEffect(() => {
-    dispatch(
-      getContent('/@controlpanels/language', null, 'languageControlpanel'),
-    );
-  }, [dispatch]);
+    const valueObj = typeof value === 'string' ? JSON.parse(value) : value;
 
-  const tabPanes = availableLanguages?.map(({ title, token }) => ({
-    menuItem: title,
-    render: () => (
-      <Tab.Pane
-        id={`multilingual-item-${token}-${id}`}
-        key={`multilingual-item-${token}-${id}`}
-      >
-        <label
-          htmlFor={`multilingual-text-${token}-${id}`}
-          style={srOnlyStyles}
-        >
-          {intl.formatMessage(messages.valueForLang, { lang: title })}
-        </label>
+    const handleChangeLangValue = (lang) => (fid, v) => {
+      onChange(
+        id,
+        JSON.stringify({
+          ...valueObj,
+          [lang]:
+            WidgetComponent === DefaultWidget && editor == 'draftjs'
+              ? v.data
+              : v,
+        }),
+      );
+    };
 
-        <Widget
-          id={`multilingual-text-${token}-${id}`}
-          placeholder={intl.formatMessage(messages.placeholder)}
-          value={
-            Widget === WysiwygWidget
-              ? { data: valueObj[token] ?? defaultValue }
-              : valueObj[token] ?? defaultValue
-          }
-          title={title}
-          description={description}
-          onChange={handleChangeLangValue(token)}
-          wrapped={false}
-        />
-      </Tab.Pane>
-    ),
-  }));
+    useEffect(() => {
+      dispatch(
+        getContent('/@controlpanels/language', null, 'languageControlpanel'),
+      );
+    }, [dispatch]);
 
-  return (
-    <Form.Field inline required={required} id={id}>
-      <Grid>
-        <Grid.Row>
-          <Grid.Column width="4">
-            <div className="wrapper">
-              <label htmlFor="multilingual-item">{title}</label>
-            </div>
-          </Grid.Column>
-          <Grid.Column
-            width="8"
-            id="multilingual-item"
-            className="multilingual-widget"
+    const tabPanes = availableLanguages?.map(({ title, token }) => ({
+      menuItem: title,
+      render: () => (
+        <TabPane
+          id={`multilingual-item-${token}-${id}`}
+          key={`multilingual-item-${token}-${id}`}
+        >
+          <label
+            htmlFor={`multilingual-text-${token}-${id}`}
+            style={srOnlyStyles}
           >
-            {availableLanguages && <Tab panes={tabPanes} />}
-          </Grid.Column>
-        </Grid.Row>
-      </Grid>
-    </Form.Field>
-  );
-};
+            {intl.formatMessage(messages.valueForLang, { lang: title })}
+          </label>
+
+          <WidgetComponent
+            id={`multilingual-text-${token}-${id}`}
+            placeholder={intl.formatMessage(messages.placeholder)}
+            value={
+              WidgetComponent === DefaultWidget && editor == 'draftjs'
+                ? { data: valueObj[token] ?? defaultValue }
+                : valueObj[token] ?? defaultValue
+            }
+            title={title}
+            description={description}
+            onChange={handleChangeLangValue(token)}
+            wrapped={false}
+          />
+        </TabPane>
+      ),
+    }));
+
+    return (
+      <Form.Field inline required={required} id={id}>
+        <Grid>
+          <Grid.Row>
+            <Grid.Column width="4">
+              <div className="wrapper">
+                <label htmlFor="multilingual-item">{title}</label>
+              </div>
+            </Grid.Column>
+            <Grid.Column
+              width="8"
+              id="multilingual-item"
+              className="multilingual-widget"
+            >
+              {availableLanguages && <Tab panes={tabPanes} />}
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
+      </Form.Field>
+    );
+  };
 
 export default MultilingualWidget;