Read footnote names from their links in the rich text editor

What does this MR do and why?

The rich text editor reads a footnote's name from the ids the markdown API renders, with \w+. A name such as [^my-note], [^x-1] or [^😄] does not match, so editing a document that uses one and switching back to plain text rewrites it as [^null].

This MR reads a reference's name from its href with /^#fn-(.+)-\d+$/, a footnote's from its id with /^fn-(.+)-\d+$/, and URL-decodes it, as suggested in !265411 (merged). The greedy .+ leaves out only the last -<digits>, the suffix FootnoteFilter adds. A name that does not decode, which only hand-written HTML can produce, is kept as written.

This MR must merge before !265411 (merged). That MR links every reference to its footnote, and the later references get ids such as fnref-1-2-42, which the current id pattern reads as [^null]. GitLab.com runs mixed versions during a deploy, so the editor has to read the href first. With today's backend this MR changes only the names above: the later references are not footnote references there yet.

The new specs fail on master (both round trips give [^null], and decodeFootnoteName does not exist yet) and pass with this MR.

Specs and checks I ran
  • yarn jest spec/frontend/content_editor: 134 suites, 1827 tests, 0 failures.
  • With master's footnote_definition.js, or with the reference read without decoding, the names round trip fails.
  • The names fixture is the markdown API's HTML for that Markdown with GITLAB_TEST_FOOTNOTE_ID=42, the same with master's filter and with !265411 (merged)'s.
  • ESLint, Prettier and scripts/lint/commit_linter.rb on the changes: clean.

References

Related to #636343 (closed)

Must merge before !265411 (merged).

Screenshots or screen recordings

No visual change. The Markdown the rich text editor writes back:

Markdown On master With this MR
a[^my-note] and [^my-note]: one a[^null] and [^null]: one As written
b[^😄] and [^😄]: two b[^null] and [^null]: two As written

How to set up and validate locally

  1. Create an issue with this description:

    First[^my-note] and second[^😄].
    
    [^my-note]: One.
    [^😄]: Two.
  2. Edit the description in the rich text editor (type a character and delete it), then switch back to plain text: on master both references and both footnotes read [^null]; with this MR they stay as written.

I checked step 2 with the editor's serializer in Jest, not in a browser.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Merge request reports

Loading
Loading