diff --git a/app/assets/scripts/components/slate/plugins/caption/caption.js b/app/assets/scripts/components/slate/plugins/caption/caption.js index 1efad477..c8d292ad 100644 --- 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 && ( Write a caption )} - {numbering} {children} ); diff --git a/app/assets/scripts/context/numbering.js b/app/assets/scripts/context/numbering.js index eff391e8..1c59c851 100644 --- 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 index ade874a8..26cd4eec 100644 --- 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 }; }