Allow GFM supported html marks in content editor
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
andbdo
support thedir
attribute,abbr
supports thetitle
attribute andtime
supports thedatetime
attribute. Other elements do not support any attributes. In a future iteration, we will add support fordir
andtitle
as global attributes allowed on all elements. - Typing marks using input rules. (See gif in the description below)
- Input rules for
sup
andsub
.
Screenshots or Screencasts (strongly suggested)
How to setup and validate locally (strongly suggested)
-
Create a new Wiki page.
-
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>
-
Click "Use new editor".
-
The content editor will automatically convert the tags to appropriate representation of these elements.
-
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:
-
-
Click "save". The content should be saved successfully.
Does this MR meet the acceptance criteria?
Conformity
-
I have included changelog trailers, or none are needed. (Does this MR need a changelog?) -
I have added/updated documentation, or it's not needed. (Is documentation required?) -
I have properly separated EE content from FOSS, or this MR is FOSS only. (Where should EE code go?) -
I have added information for database reviewers in the MR description, or it's not needed. (Does this MR have database related changes?) -
I have self-reviewed this MR per code review guidelines. -
This MR does not harm performance, or I have asked a reviewer to help assess the performance impact. (Merge request performance guidelines) -
I have followed the style guides. -
This change is backwards compatible across updates, or this does not apply.
Availability and Testing
-
I have added/updated tests following the Testing Guide, or it's not needed. (Consider all test levels. See the Test Planning Process.) -
I have tested this MR in all supported browsers, or it's not needed. -
I have informed the Infrastructure department of a default or new setting change per definition of done, or it's not needed.
Related to #338380 (closed)
Edited by Himanshu Kapoor