Merge pull request #565 from NASA-IMPACT/fix/captions

Fix figure caption position
NASA-IMPACT · Oct 20, 2023 · 7783e33 · 7783e33
2 parents 665cd00 + 116a543
commit 7783e33
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 122 deletions.
diff --git a/app/assets/scripts/components/slate/plugins/caption/caption.js b/app/assets/scripts/components/slate/plugins/caption/caption.js
@@ -4,9 +4,6 @@ import { Node } from 'slate';
 import { useReadOnly, useSelected } from 'slate-react';
 import styled from 'styled-components';
 
-import { NumberingContext } from '../../../../context/numbering';
-import { IMAGE_BLOCK, TABLE_BLOCK } from '../constants';
-
 const CaptionElement = styled.figcaption`
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -27,42 +24,11 @@ export function Caption(props) {
   const { attributes, htmlAttributes, element, children } = props;
   const isSelected = useSelected();
   const readOnly = useReadOnly();
-  const id = JSON.stringify(element);
-  const { parent } = element;
 
   const emptyCaption = !Node.string(element);
-  const numberingContext = React.useContext(NumberingContext);
 
   const showPlaceholder = !readOnly && !isSelected && emptyCaption;
 
-  React.useEffect(() => {
-    if (numberingContext && !showPlaceholder && id) {
-      if (parent === TABLE_BLOCK) {
-        numberingContext.registerTable(id);
-      } else if (parent === IMAGE_BLOCK) {
-        numberingContext.registerImage(id);
-      }
-    }
-  }, [numberingContext, showPlaceholder, id, parent]);
-
-  const numbering = React.useMemo(() => {
-    if (!numberingContext) {
-      return null;
-    }
-
-    if (parent === TABLE_BLOCK) {
-      return numberingContext.getTableNumbering(id);
-    }
-
-    if (parent === IMAGE_BLOCK) {
-      return numberingContext.getImageNumbering(id);
-    }
-
-    return null;
-  }, [numberingContext, parent, id]);
-
-  // if (readOnly && emptyCaption) return null;
-
   // The current version of Slate has no way to render a placeholder on an
   // element. The best way is to create an element which is absolutely
   // positioned and has no interaction.
@@ -71,7 +37,6 @@ export function Caption(props) {
       {showPlaceholder && (
         <Placeholder contentEditable={false}>Write a caption</Placeholder>
       )}
-      {numbering}
       {children}
     </CaptionElement>
   );

diff --git a/app/assets/scripts/context/numbering.js b/app/assets/scripts/context/numbering.js
@@ -1,9 +1,10 @@
 import { createContext, useCallback, useMemo, useState } from 'react';
 
+/**
+ *  Provides a context for equation numbering.
+ */
 export function useNumberingProviderValue() {
   const [registeredEquations, setRegisteredEquations] = useState({});
-  const [registeredImages, setRegisteredImages] = useState({});
-  const [registeredTables, setRegisteredTables] = useState({});
 
   const registerEquation = useCallback((key) => {
     setRegisteredEquations((prevElements) => {
@@ -19,34 +20,6 @@ export function useNumberingProviderValue() {
     });
   }, []);
 
-  const registerImage = useCallback((key) => {
-    setRegisteredImages((prevElements) => {
-      if (prevElements[key]) {
-        return prevElements;
-      }
-
-      const numElements = Object.keys(prevElements).length;
-      return {
-        ...prevElements,
-        [key]: numElements + 1
-      };
-    });
-  }, []);
-
-  const registerTable = useCallback((key) => {
-    setRegisteredTables((prevElements) => {
-      if (prevElements[key]) {
-        return prevElements;
-      }
-
-      const numElements = Object.keys(prevElements).length;
-      return {
-        ...prevElements,
-        [key]: numElements + 1
-      };
-    });
-  }, []);
-
   const getEquationNumbering = useCallback(
     (key) => {
       const numbering = registeredEquations[key];
@@ -59,47 +32,12 @@ export function useNumberingProviderValue() {
     [registeredEquations]
   );
 
-  const getTableNumbering = useCallback(
-    (key) => {
-      const numbering = registeredTables[key];
-      if (!numbering) {
-        return '';
-      }
-
-      return `Table ${numbering}: `;
-    },
-    [registeredTables]
-  );
-
-  const getImageNumbering = useCallback(
-    (key) => {
-      const numbering = registeredImages[key];
-      if (!numbering) {
-        return '';
-      }
-
-      return `Figure ${numbering}: `;
-    },
-    [registeredImages]
-  );
-
   return useMemo(
     () => ({
       getEquationNumbering,
-      getTableNumbering,
-      getImageNumbering,
-      registerEquation,
-      registerTable,
-      registerImage
+      registerEquation
     }),
-    [
-      getEquationNumbering,
-      getTableNumbering,
-      getImageNumbering,
-      registerEquation,
-      registerTable,
-      registerImage
-    ]
+    [getEquationNumbering, registerEquation]
   );
 }
 

diff --git a/app/assets/scripts/utils/apply-number-captions-to-document.js b/app/assets/scripts/utils/apply-number-captions-to-document.js
@@ -5,7 +5,10 @@ import {
 } from '../components/slate/plugins/constants';
 
 /**
- * Include table numbers and move captions before the table in the document.
+ * Include tables and figures numbers to their captions. We don't use a
+ * numbering context (like equation numbering) because we also need to change
+ * the position of the caption in the document, which is not possible with the
+ * current implementation of equation numbering context.
  */
 export function applyNumberCaptionsToDocument(document) {
   // Section id list in the order they should appear in the document
@@ -71,27 +74,33 @@ export function applyNumberCaptionsToDocument(document) {
                 child.type === TABLE_BLOCK ? 'Table' : 'Figure'
               } ${elementCount[child.type]}: `;
 
-              // Reverse the table rows to make caption appear first
-              // and add the table number to the caption
-              return {
-                ...child,
-                children: child.children.reverse().map((c) => {
-                  if (c.type !== 'caption') {
-                    return c;
-                  }
+              // Prefix the caption with the table/image number
+              const children = child.children.map((c) => {
+                if (c.type !== 'caption') {
+                  return c;
+                }
+
+                const currentCaption = get(c, 'children[0].text');
 
-                  const currentCaption = get(c, 'children[0].text');
+                return {
+                  ...c,
+                  children: [
+                    {
+                      ...c.children[0],
+                      text: `${captionPrefix}${currentCaption}`
+                    }
+                  ]
+                };
+              });
 
-                  return {
-                    ...c,
-                    children: [
-                      {
-                        ...c.children[0],
-                        text: `${captionPrefix}${currentCaption}`
-                      }
-                    ]
-                  };
-                })
+              // Table should be reversed to make the caption appear first
+              if (child.type === TABLE_BLOCK) {
+                children.reverse();
+              }
+
+              return {
+                ...child,
+                children
               };
             }