feat: automatically add figure metadata section

src/Blocks/EmbedVisualization/Edit.jsx

@@ -17,6 +17,7 @@ const Edit = (props) => {
       {!!data.vis_url && (
         <div className="embed-visualization edit">
           <ConnectedChart
+            {...props}
             id={props.id}
             mode="edit"
             data={{

src/ConnectedChart/ConnectedChart.jsx

@@ -17,24 +17,15 @@ import {
   MoreInfo,
   Share,
 } from '@eeacms/volto-embed/Toolbar';
-import { getDataSources } from '@eeacms/volto-plotlycharts/helpers';
+import {
+  getDataSources,
+  getFigureMetadata,
+} from '@eeacms/volto-plotlycharts/helpers';
 import { Download } from '@eeacms/volto-plotlycharts/Utils';
 import PlotlyComponent from './PlotlyComponent';
 
 import '@eeacms/volto-embed/Toolbar/styles.less';
 
-export function ChartSkeleton() {
-  return (
-    <div style={{ position: 'relative', minHeight: '200px' }}>
-      <Dimmer active inverted>
-        <Loader size="mini">Loading chart...</Loader>
-      </Dimmer>
-
-      <Image src="https://react.semantic-ui.com/images/wireframe/paragraph.png" />
-    </div>
-  );
-}
-
 function getVisualization(props) {
   return props.visualization || props.data?.visualization || {};
 }
@@ -100,6 +91,18 @@ function getChartData({ data = [], dataSources, use_data_sources }) {
   }));
 }
 
+export function ChartSkeleton() {
+  return (
+    <div style={{ position: 'relative', minHeight: '200px' }}>
+      <Dimmer active inverted>
+        <Loader size="mini">Loading chart...</Loader>
+      </Dimmer>
+
+      <Image src="https://react.semantic-ui.com/images/wireframe/paragraph.png" />
+    </div>
+  );
+}
+
 function ConnectedChart(props) {
   const history = useHistory();
   const visEl = useRef(null);
@@ -175,6 +178,18 @@ function ConnectedChart(props) {
     }
   }, [screen, mobile, initialized]);
 
+  useEffect(() => {
+    const mode = props.mode;
+    const visUrl = props.data?.vis_url;
+    if (mode === 'edit' && visUrl) {
+      const metadataSection = getFigureMetadata(props.block, viz);
+      if (!metadataSection) return;
+
+      props.onInsertBlock(props.block, metadataSection);
+    }
+    /* eslint-disable-next-line */
+  }, [props.data.vis_url]);
+
   if (loadingVisualization || loadingProviderData) {
     return <ChartSkeleton />;
   }

src/helpers/index.js

@@ -1,4 +1,5 @@
 import { isString } from 'lodash';
+import { v4 as uuid } from 'uuid';
 import { toast } from 'react-toastify';
 import { Toast } from '@plone/volto/components';
 
@@ -85,3 +86,54 @@ export function onPasteEditor(editor) {
     editor.current.format();
   } catch {}
 }
+
+export function getFigureMetadata(block, metadata) {
+  const { title, description } = metadata || {};
+  const id = `figure-metadata-${block}`;
+  const metadataEl = document.getElementById(id);
+  if (metadataEl || (!title && !description)) return;
+
+  const data = {
+    blocks: {},
+    blocks_layout: { items: [] },
+  };
+
+  function getBlock(type, plaintext) {
+    const block = uuid();
+    return [
+      block,
+      {
+        '@type': 'slate',
+        value: [
+          {
+            type,
+            children: [
+              {
+                text: plaintext,
+              },
+            ],
+          },
+        ],
+        plaintext,
+      },
+    ];
+  }
+
+  const blocks = [
+    getBlock('h4', `Figure 1. ${title}`),
+    getBlock('p', description),
+  ];
+
+  blocks.forEach((block) => {
+    if (!block) return;
+    data.blocks[block[0]] = block[1];
+    data.blocks_layout.items.push(block[0]);
+  });
+
+  return {
+    '@type': 'group',
+    className: 'figure-metadata',
+    id,
+    data,
+  };
+}