Add support for collapsible content in content editor
What does this MR do?
Issue: #332082 (closed)
Content editor now supports details/summary elements to render and edit collapsible content.
Related MRs:
- Add support for div, figure, figcaption in content editor
-
Add support for collapsible content in content editor (
⬅ This MR) - Add support for description lists in content editor
Screenshots or Screencasts (strongly suggested)
How to setup and validate locally (strongly suggested)
Rendering a collapsible section
-
Create a new wiki page, or edit an existing one
-
Type in the following HTML in the markdown editor:
<details> <summary>click here to expand</summary> this portion will be _hidden_! </summary>
-
Switch to new editor by clicking "use new editor".
-
The collapsible section renders successfully.
-
Save with or without making any changes.
-
Edit the page again
-
Note that the markdown / HTML for the details is correct.
Creating a new collapsible section
- Type
<details>
in content editor to insert a new collapsible section. Or use the "Add a collapsible section" icon in the toolbar to insert it. - Press Enter when within a details summary to make it continue to the collapsed content.
- Click the arrow icon in the collapsible section to expand or collapse the section.
- Press Shift + Tab in the middle of collapsed section to convert it to a regular paragraph. If you press this shortcut in the details summary, the summary turns into a regular paragraph and the first line in the collapsed content becomes the new summary.
- Press Enter twice on the last item to exit the collapsible section and start a new paragraph.
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.
Security
Does this MR contain changes to processing or storing of credentials or tokens, authorization and authentication methods or other items described in the security review guidelines? If not, then delete this Security section.
-
Label as security and @ mention @gitlab-com/gl-security/appsec
-
The MR includes necessary changes to maintain consistency between UI, API, email, or other methods -
Security reports checked/validated by a reviewer from the AppSec team
Related to #332082 (closed)
Edited by Himanshu Kapoor