Skip to content

Allow GFM supported html marks in content editor

Himanshu Kapoor requested to merge 338380-content-editor-html into master

What does this MR do?

Issue: #338380 (closed)

Allow adding arbitrary html marks to be added to content editor. See the documentation for HTML::Pipeline’s SanitizationFilter class for the list of allowed HTML tags and attributes supported by GFM.

This MR in particular adds support for:

  • Rendering marks: ins abbr bdo cite dfn mark small span time kbd q samp var ruby rp rt
  • Marks span and bdo support the dir attribute, abbr supports the title attribute and time supports the datetime attribute. Other elements do not support any attributes. In a future iteration, we will add support for dir and title as global attributes allowed on all elements.
  • Typing marks using input rules. (See gif in the description below)
  • Input rules for sup and sub.

Screenshots or Screencasts (strongly suggested)

image

How to setup and validate locally (strongly suggested)

  1. Create a new Wiki page.

  2. Type the below code:

    * Content editor is ~~great~~<ins>amazing</ins>.
* If the changes <abbr title="Looks good to merge">LGTM</abbr>, please <abbr title="Merge when pipeline succeeds">MWPS</abbr>.
* The English song <q>Oh I do like to be beside the seaside</q> looks like this in Hebrew: <span dir="rtl">אה, אני אוהב להיות ליד חוף הים</span>. In the computer's memory, this is stored as <bdo dir="ltr">אה, אני אוהב להיות ליד חוף הים</bdo>.
* <cite>The Scream</cite> by Edward Munch. Painted in 1893.
* <dfn>HTML</dfn> is the standard markup language for creating web pages.
* Do not forget to buy <mark>milk</mark> today.
* This is a paragraph and <small>smaller text goes here</small>.
* The concert starts at <time datetime="20:00">20:00</time> and you'll be able to enjoy the band for at least <time datetime="PT2H30M">2h 30m</time>.
* Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text (Windows).
* The error occured was: <samp>Keyboard not found. Press F1 to continue.</samp>
* The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the base, and <var>h</var> is the    vertical height.
* <ruby>漢<rt>ㄏㄢˋ</rt></ruby>
* C<sub>7</sub>H<sub>16</sub> + O<sub>2</sub> → CO<sub>2</sub> + H<sub>2</sub>O
* The **Pythagorean theorem** is often expressed as <var>a<sup>2</sup></var> + <var>b<sup>2</sup></var> = <var>c<sup>2</sup></var>

  3. Click "Use new editor".

  4. The content editor will automatically convert the tags to appropriate representation of these elements.

  5. The inline elements also support input rules, which means you can type them directly in content editor. Try typing the below content in content editor:

    • If the changes <abbr title="Looks good to merge">LGTM</abbr>, please <abbr title="Merge when pipeline succeeds">MWPS</abbr>.
    • The concert starts at <time datetime="20:00">20:00</time> and you'll be able to enjoy the band for at least <time datetime="PT2H30M">2h 30m</time>.
    • Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text (Windows).

    Here's a gif of what it might look like:

    image

  6. Click "save". The content should be saved successfully.

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Related to #338380 (closed)

Edited by Himanshu Kapoor

Merge request reports