How to use @times-components/markup-forest - 10 common examples

onRelatedArticlePress={onRelatedArticlePress}
          onTopicPress={onTopicPress}
        />
      
    ),
    []
  );

  const fixedContent = useMemo(
    () => [...fixup(isTablet, content), { name: "footer" }],
    [content, isTablet]
  );
  const images = fixedContent.filter(node => node.name === "image");

  const dropcapsDisabled = isDropcapsDisabled(data);
  const renderChild = render(renderers({ dropcapsDisabled, ...props, images }));
  // eslint-disable-next-line react/prop-types
  const Child = useCallback(
    ({ item, index }) => (
      
        
          {item.name === "footer"
            ? footer
            : renderChild(item, index.toString(), index)}
        
      
    ),
    [footer]
  );

  // FIXME: remove this when ios memory leaks are resolved
  const Scroller = React.useCallback(

test: () => {
        const output = renderComponent(renderTree(emphasis, coreRenderers));

        expect(output).toMatchSnapshot();
      }
    },

test: () => {
        const output = renderComponent(renderTree(paragraph, coreRenderers));

        expect(output).toMatchSnapshot();
      }
    },

test: () => {
        const output = renderComponent(renderTree(subscript, coreRenderers));

        expect(output).toMatchSnapshot();
      }
    },

test: () => {
        const output = renderComponent(renderTree(superscript, coreRenderers));

        expect(output).toMatchSnapshot();
      }
    },

test: () => {
        const output = renderComponent(
          
        );

        expect(output).toMatchSnapshot();
      }
    },

test: () => {
        const output = renderComponent(
          
        );

        expect(output).toMatchSnapshot();
      }
    }

const renderParagraphWithScale = ({ select, boolean }, ast) => {
  const scale = select("Scale", scales, scales.medium);
  const section = select("Section", sections, "The Times Magazine");
  const theme = themeFactory(section, "magazinestandard");
  const enableDropcap = boolean && boolean("Enable DropCap", true);

  return (
    
      {renderTree(ast, {
        ...coreRenderers,
        dropCap(key, { value }) {
          return (
            enableDropcap && (
              
            )
          );
        },

const renderParagraph = ({ select, boolean }, ast) => {
  const sections = Object.keys(colours.section).sort();
  const sectionIdx = select("Section", sections, 0);
  const enableDropcap = boolean && boolean("Enable DropCap", true);
  const section = sections[sectionIdx];
  const theme = themeFactory(section, "magazinecomment");
  const colour = theme.sectionColour;
  const font = theme.dropCapFont;
  const dropCapAst = !ast && select("DropCap Type", dropCapTypes, dropCapData);

  return renderTree(ast || dropCapAst, {
    ...coreRenderers,
    dropCap(key, { value }) {
      return (
        enableDropcap && (
          
            {unescape(value)}
          
        )
      );
    },
    paragraph(key, attributes, children, indx, node) {
      return (
        
          {children}
        
      );

const ArticleRow = ({ content: { data, index } }) =>
  renderTree(data, {
    ...coreRenderers,
    ad(key, attributes) {
      return {
        element: (
          
        )
      };
    },
    paragraph(key, attributes, children) {
      return {
        element: (