Replace space with non-breaking space in footnotes backreference

[techbridgedev]

The backreference link appearing at the end of every footnote is currently separated from the footnote copy by a breaking space, sometimes resulting in a typographic orphan. In other words, the link can appear on the next line all by itself.

I'd like to see that space replaced by a non-breaking space   to prevent typographic orphans.

I tried to find the code that generates the backlinks but failed. I suspect it's actually in the Markdown parser?

[slorber]

This behavior is produced by remark-gfm which tries to align with the behavior of GitHub.

If you don't like this behavior, you'd have to contact GitHub to change this behavior in the first place because I don't think the gfm plugin will be ok to make an exception to diverge from GitHub behavior.

See also: https://github.com/micromark/micromark-extension-gfm-footnote

Here is a simple footnote[^1]. With some additional text after it.

[^1]: My reference.

Here is a simple footnote¹. With some additional text after it.

Using the MDX playground, you can see how this code is compiled to React:

---

Technically you could solve this problem yourself to alter how this is rendered.

Solution 1

You could create a rehype plugin that process this <p> AST node (HAST) and replace the breaking space:

const node = {
  type: "element",
  tagName: "p",
  properties: {},
  children: [
    {
      type: "text",
      value: "My reference. ",
    },
    {
      type: "element",
      tagName: "a",
      properties: {
        href: "#user-content-fnref-1",
        dataFootnoteBackref: "",
        ariaLabel: "Back to reference 1",
        className: ["data-footnote-backref"],
      },
      children: [
        {
          type: "text",
          value: "↩",
        },
      ],
    },
  ],
};

---

Solution 2

You could also register a custom React component for p in that map that would decide how to render paragraphs of the JSX output produced by MDX

https://docusaurus.io/docs/markdown-features/react#mdx-component-scope

It's a bit complicated to explain so here's a demo sandbox to help you:
https://stackblitz.com/edit/github-axpson-kzuf8x?file=src%2Ftheme%2FMDXComponents.js

import React from 'react';
import MDXComponents from '@theme-original/MDXComponents';

function MyCustomParagraph(props) {

  // Here you can override how we render the backref paragraph you don't like
  const isFootnoteBackref =
    typeof props?.children?.[1]?.props?.['data-footnote-backref'] !==
    'undefined';
  if (isFootnoteBackref) {
    const children = [...props.children];
    children[0] = children[0].trim() + '🚀🚀🚀🚀🚀🚀🚀';
    return <p {...props} children={children} />;
  }

  return <p {...props} />;
}

export default {
  ...MDXComponents,
  p: MyCustomParagraph,
};

Result:

Footnotes

1. My reference. ↩

[techbridgedev]

Thanks,

I suspected this was coming from a 3rd-party plugin; I appreciate the confirmation and the example workarounds.

[techbridgedev]

BTW your example code fails when there's any nested HTML in the paragraph. For instance, if you include a Markdown link or a <abbr> tag in the footnote.

I fixed the linting errors, but have no idea how to deal with this particular error.

import React from 'react';
import PropTypes from 'prop-types';
// Import the original mapper
import MDXComponents from '@theme-original/MDXComponents';

// If paragraph includes with a backref, replace the space with a non-breaking space
function TBCustomParagraph(props) {
  const isFootnoteBackref =
    typeof props?.children?.[1]?.props?.[`data-footnote-backref`] !==
    `undefined`;
  if (isFootnoteBackref) {
    const children = [...props.children];
    // Trim the whitespace and append the non-breaking space
    children[0] = children[0].trim() + String.fromCharCode(160);
    return <p {...props}>{children}</p>;
  }

  return <p {...props} />;
}

TBCustomParagraph.propTypes = {
  children: PropTypes.any
};

export default {
  ...MDXComponents,
  p: TBCustomParagraph,
};

[slorber]

My sandbox is just an example, it does not cover edge cases, and you'll have to figure out those yourself 😅

If you want to make it robust, you have to understand how JSX works and understand that children[0] might not always be a string.

I'm just giving you 2 possible directions to follow here, not doing all the work for you.

You can console.log the paragraph prop and figure out how to adapt the above example according to the props you receive

[slorber]

I would try that, but can't guarantee it always works, as it depends on how MDX compiles footnotes to JSX and I don't know 100% of those details:

  const isFootnoteBackref =
    typeof props?.children?.at(-1)?.props?.[`data-footnote-backref`] !==
    `undefined`;

  if (isFootnoteBackref) {
    const children = [...props.children];
    children[children.length - 2] = children[children.length - 2].trim() + `🤘🤘🤘🤘🤘🤘`;
    return <p {...props}>{children}</p>;
  }

[techbridgedev]

Brilliant! That works! Is there a tutorial or doc you could point me to that could teach me about this syntax?

[slorber]

I don't have a tutorial to teach you about this, this is React JSX, a tree of JSON objects describing your UI. You can lookup on the internet and learn about React JSX to understand how it works.

The MDX playground shows you the JSX tree being created by MDX according to your content, cf the first image I posted:

Now it's your responsibility to transform that JSX to whatever you want so that it renders what you want instead of the default

The jsx() function will just create objects, nothing more complex. Try to log the props of your paragraph and see the structure it receives as props.

[techbridgedev]

Codepen demonstrating the error: https://stackblitz.com/edit/github-axpson-vcyooy?file=src%2Fpages%2Findex.md

[techbridgedev]

Understood & appreciated.

[techbridgedev]

Quick follow-up for anyone who might see this issue: it turns out there's a much simpler solution, which is to use the CSS text-wrap: pretty rule. It isn't fully supported yet, but it degrades gracefully:

@supports (text-wrap: pretty) {
  [id^="user-content-fn-"] p {
    text-wrap: pretty;
  }
}