Namespace the plugins, otherwise there's problems with richtext fields

eea · Sep 21, 2021 · e7d4b3b · e7d4b3b
1 parent 4635fc2
commit e7d4b3b
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 14 deletions.
diff --git a/src/components/ElementEditor/ContextButtons.jsx b/src/components/ElementEditor/ContextButtons.jsx
@@ -20,8 +20,9 @@ export default (options) => (editor) => {
   } = options;
   const intl = useIntl();
   const dispatch = useDispatch();
+  const pid = `${editor.uid}-${pluginId}`;
   const showEditor = useSelector(
-    (state) => state['slate_plugins']?.[pluginId]?.show_sidebar_editor,
+    (state) => state['slate_plugins']?.[pid]?.show_sidebar_editor,
   );
 
   return isActiveElement(editor) ? (
@@ -32,7 +33,11 @@ export default (options) => (editor) => {
         active={showEditor}
         aria-label={intl.formatMessage(messages.edit)}
         onMouseDown={() => {
-          dispatch(setPluginOptions(pluginId, { show_sidebar_editor: true }));
+          dispatch(
+            setPluginOptions(pid, {
+              show_sidebar_editor: true,
+            }),
+          );
         }}
       />
       <ToolbarButton

diff --git a/src/components/ElementEditor/PluginEditor.jsx b/src/components/ElementEditor/PluginEditor.jsx
@@ -64,6 +64,7 @@ const PluginEditor = (props) => {
 
   const SchemaProvider = schemaProvider ? schemaProvider : BaseSchemaProvider;
 
+  const pid = `${editor.uid}-${pluginId}`;
   return (
     <SchemaProvider {...props} data={formData}>
       {(schema) => (
@@ -87,7 +88,9 @@ const PluginEditor = (props) => {
                 onClick={() => {
                   saveDataToEditor(formData);
                   dispatch(
-                    setPluginOptions(pluginId, { show_sidebar_editor: false }),
+                    setPluginOptions(pid, {
+                      show_sidebar_editor: false,
+                    }),
                   );
                   ReactEditor.focus(editor);
                 }}
@@ -98,7 +101,9 @@ const PluginEditor = (props) => {
                 onClick={() => {
                   checkForCancel();
                   dispatch(
-                    setPluginOptions(pluginId, { show_sidebar_editor: false }),
+                    setPluginOptions(pid, {
+                      show_sidebar_editor: false,
+                    }),
                   );
                   setFormData({});
                   ReactEditor.focus(editor);

diff --git a/src/components/ElementEditor/SidebarEditor.jsx b/src/components/ElementEditor/SidebarEditor.jsx
@@ -10,9 +10,10 @@ import { setPluginOptions } from 'volto-slate/actions';
 
 const SidebarEditor = (props) => {
   const { editor, pluginId, getActiveElement, pluginEditor } = props;
+  const pid = `${editor.uid}-${pluginId}`;
   const PluginEditor = pluginEditor;
   const showEditor = useSelector((state) => {
-    return state['slate_plugins']?.[pluginId]?.show_sidebar_editor;
+    return state['slate_plugins']?.[pid]?.show_sidebar_editor;
   });
 
   const dispatch = useDispatch();
@@ -28,8 +29,8 @@ const SidebarEditor = (props) => {
   // Hide the editor when switching to another text element
   React.useEffect(() => {
     if (!active)
-      dispatch(setPluginOptions(pluginId, { show_sidebar_editor: false }));
-  }, [active, dispatch, pluginId]);
+      dispatch(setPluginOptions(pid, { show_sidebar_editor: false }));
+  }, [active, dispatch, pluginId, pid]);
 
   editor.isSidebarOpen = showEditor && active;
 

diff --git a/src/components/ElementEditor/ToolbarButton.jsx b/src/components/ElementEditor/ToolbarButton.jsx
@@ -15,6 +15,7 @@ const ElementToolbarButton = (props) => {
   const editor = useSlate();
   const isElement = isActiveElement(editor);
   const dispatch = useDispatch();
+  const pid = `${editor.uid}-${pluginId}`;
 
   const omittedProps = [
     'insertElement',
@@ -31,7 +32,7 @@ const ElementToolbarButton = (props) => {
           active={isElement}
           onMouseDown={() => {
             if (!isElement) insertElement(editor, {});
-            dispatch(setPluginOptions(pluginId, { show_sidebar_editor: true }));
+            dispatch(setPluginOptions(pid, { show_sidebar_editor: true }));
           }}
           icon={toolbarButtonIcon}
         />

diff --git a/src/editor/SlateEditor.jsx b/src/editor/SlateEditor.jsx
@@ -4,6 +4,7 @@ import { Node, Transforms } from 'slate'; // , Transforms
 import { Slate, Editable, ReactEditor } from 'slate-react';
 import React, { Component } from 'react'; // , useState
 import { connect } from 'react-redux';
+import { v4 as uuid } from 'uuid';
 
 import config from '@plone/volto/registry';
 
@@ -54,9 +55,12 @@ class SlateEditor extends Component {
 
     this.savedSelection = null;
 
+    const uid = uuid();
+
     this.state = {
-      editor: this.createEditor(),
+      editor: this.createEditor(uid),
       showExpandedToolbar: config.settings.slate.showExpandedToolbar,
+      uid,
     };
 
     this.editor = null;
@@ -70,7 +74,7 @@ class SlateEditor extends Component {
     this.savedSelection = selection;
   }
 
-  createEditor() {
+  createEditor(uid) {
     const editor = makeEditor({ extensions: this.props.extensions });
 
     // When the editor loses focus it no longer has a valid selections. This
@@ -80,6 +84,7 @@ class SlateEditor extends Component {
 
     editor.getSavedSelection = this.getSavedSelection;
     editor.setSavedSelection = this.setSavedSelection;
+    editor.uid = uid || this.state.uid;
 
     return editor;
   }

diff --git a/src/editor/plugins/SimpleLink/index.js b/src/editor/plugins/SimpleLink/index.js
@@ -57,8 +57,9 @@ const SimpleLinkEditor = (props) => {
     unwrapElement,
     insertElement,
   } = props;
+  const pid = `${editor.uid}-${pluginId}`;
   const showEditor = useSelector((state) => {
-    return state['slate_plugins']?.[pluginId]?.show_sidebar_editor;
+    return state['slate_plugins']?.[pid]?.show_sidebar_editor;
   });
   const savedPosition = React.useRef();
 
@@ -88,7 +89,7 @@ const SimpleLinkEditor = (props) => {
             insertElement(editor, { url });
           }
           ReactEditor.focus(editor);
-          dispatch(setPluginOptions(pluginId, { show_sidebar_editor: false }));
+          dispatch(setPluginOptions(pid, { show_sidebar_editor: false }));
           savedPosition.current = null;
         }}
         onClear={() => {
@@ -100,7 +101,7 @@ const SimpleLinkEditor = (props) => {
           editor.savedSelection = newSelection;
         }}
         onOverrideContent={(c) => {
-          dispatch(setPluginOptions(pluginId, { show_sidebar_editor: false }));
+          dispatch(setPluginOptions(pid, { show_sidebar_editor: false }));
           savedPosition.current = null;
         }}
       />
@@ -137,8 +138,9 @@ export default (config) => {
         active={isElement}
         onMouseDown={() => {
           // if (!isElement) insertElement(editor, {});
+          const pid = `${editor.uid}-${PLUGINID}`;
           editor.savedSelection = JSON.parse(JSON.stringify(editor.selection));
-          dispatch(setPluginOptions(PLUGINID, { show_sidebar_editor: true }));
+          dispatch(setPluginOptions(pid, { show_sidebar_editor: true }));
         }}
       />
     );