•  
     
    story #18336 add support of markdown
Summary
Empty
add support of markdown
Empty

CommonMark spec of Markdown is supported. "Markdown" is used as label (instead of CommonMark). The documentation will refer to CommonMark for those who want the nifty details.

User interface modifications

At the end of this story, Markdown is rendered in HTML in the following views:

  • Artifact Tooltips, when a Text field is chosen in the Tooltip Semantic
  • Cardwall and Cardwall renderer when a Text field is chosen in the Card fields Semantic
  • Modal v2 in Cardwall when I display comments (follow-ups)
  • Planning view and Kanban when a Text field is chosen in the Card fields Semantic. HTML tags are removed as a post-processing step, leaving only the text content for those card fields. The same treatment will apply to Markdown rendered in HTML.
  • Artifact Modal (in Kanban, etc.) to display comments (follow-ups)
  • In the test steps of a Test Execution in TestManagement
  • In the comment of a Test Execution in TestManagement. This is only in case someone modifies the comment "by hand" in Trackers. The comment is also truncated, the same truncation logic should be applied (rendered HTML is truncated)
  • In the notification e-mails (in text and HTML format) sent by Tracker plugin

I can choose the "Markdown" format and write Markdown formatted text in a plain Textarea field (no CKEditor) in the following views:

  • Creation of comments (follow-ups) on the Artifact view
  • Edition of comments on the Artifact view
  • Text fields on the Artifact view (creation & edition of artifacts)
  • Step definition fields on the Artifact view
  • Creation of comments in the Mass Change view
  • Artifact Modal (in Kanban, etc.) in Text fields
  • Creation of comments (follow-ups) in the Artifact Modal
  • Modal v2 in Cardwall for Text fields

There is a syntax help button "? help" in the following views:

  • in the Artifact view next to Markdown-enabled fields (follow-ups, Text fields, Step definitions).
  • In the Artifact Modal

The syntax help details mostly used formatting preferences.

No feature flag seems required as markdown is an improvement of text in 95% of the cases.

  • There is a "Design Check" to ensure that the possibilities unlocked by markdown renders well
  • Existing comments & Text fields that are in Text or HTML formats cannot be switch to markdown (yet)
  • Existing comments that are in markdown cannot be converted to HTML or Text formats (yet)

Definition of "broken"

The interface is considered "broken" when Markdown is displayed as-is (raw, source Markdown) in read-only views. It should always be converted to HTML when displayed. Raw Markdown is only shown in edition views, such as edition or creation of Text fields, creation or edition of Follow-up comments, etc.

REST API modifications

Why is the REST API is modified this way ?

Given the rule above, Tuleap's Javascript apps such as Planning View, Kanban and TestManagement (and likely other unknown consumers of the REST API) will be "broken" if we simply push a new "commonmark" format for Text fields and follow-ups. Their display logic relies on the (no longer true) fact that there were only two possible formats, so when the format is not "html", they would simply assume that it was "text". If we were to push a new "commonmark" format, those apps would naively treat it as "text" and would display the raw Markdown source. Given the rule above, their interface would be broken.

Also, we are not able to extract references from text on the client-side. Extraction of references (such as art #123) must be done on the server-side.

Finally, rendering Markdown on the server-side should guarantee that rendering is uniform (it avoids depending on N different npm libraries in various parts of Tuleap).

How it the API modified ?

REST API should prevent a breakage about unsupported format (first of all in Tuleap JS app) so:

  • Format is advertised as "html" and the output associated is Markdown rendered as HTML. This is for backward-compatibility reasons only.
  • a new property named "post_processed_body" is added. It contains the Markdown rendered as HTML and the references extracted as HTML links (this is the actual "post-processing" step). It is meant for display in HTML user interfaces. It is named this way to keep consistency with request #8527 where the same property was added to follow-up comments in order to process references.
  • a new property named "commonmark" is added and its value is the unprocessed Markdown source text. It allows clients to render a field or comment in "edition mode" to let people edit the Markdown source.
{
  "format": "html",
  "value" / "body": "<p>Text in <strong>markdown</strong> with ref art #123</p>",
  "post_processed_body": "<p>Text in <strong>markdown</strong> with ref <a href=\"https://tuleap/goto?key=art&amp;val=123&amp;group_id=101\" title=\"Tracker Artifact\" class=\"cross-reference\">art #123</a></p>",
  "commonmark": "Text in **markdown** with ref art #123"
}

Figma

https://www.figma.com/proto/gDrBYTYQVYKTSNJYKH3aXl/Markdown?node-id=1%3A3&viewport=-1040%2C692%2C1&scaling=scale-down-width

Empty
Empty
Status
Empty
Done
Development
  • [ ] Does it involves User Interface? 
  • [x] Are there any mockups?
  • [ ] Are permissions checked?
  • [ ] Does it need Javascript development?
  • [ ] Does it need a forge upgrade bucket?
  • [ ] Does it need to execute things in system events?
  • [ ] Does it impact project creation (templates)?
  • [ ] Is it exploratory?
Empty
Details
#18336
Manuel Vacelet (vaceletm)
2021-03-04 13:40
2020-11-20 14:37
3414

References
Referencing story #18336

Git commit

tuleap/tuleap/stable

Split the read/write representations of Comments c24f3e5df4
Rework the the artifact changeset value text representation to take in account the usage of the markdown 6f11b0b8b2
Replace the usage of 'markdown' by 'commonmark' 23f9cf40eb
Fix docblock type for Changeset 52f9822ff3
Refactoring: Extract representation builders 5c11141e46
Extract cross references from in rendered markdown ddd04d2b8e
Render Markdown in REST follow-ups comments b397db558c
Display the step definition in markdown in the Artifact view d29a05404f
Extract card-fields lib 214e64812a
Display the steps in commonmark in the test execution panel in Test Management 4a91dd0b8e
Extract ckeditor image upload lib 8a239d736c
Defintion description should be also interpreted in markdown 73b28ee072
Introduce the new Markdown format in the text field of the artifact modal 2a56ddc450
Extract lib gettext ee13fdf225
Extract another lib for ckeditor image upload ee8667eecf
Add the Markdown popover syntax helper in the artifact modal c7351ab39d
Add help block handling to the Image upload form lib f10ee7c221
Split jest configurations in tracker 92e444b22c
Render markdown in email notifications 43335235e2
Add Markdown support in new follow-ups a0ed87fa21
Fix "null" error when no image upload 9b39f12edb
Fix email copy paste broken in FP f7f2299af8
Fix warning on page leave in Artifact view 123647db1c
Check global variable exists 22c70d1ba8
Do not load JS dedicated to the follow comment edition when there is no follow up comments to post 6039ac653b
Cannot edit fields of an artifact while copying it 518ac368b6
Do not check if content is editable c9aa960157
Refactoring: wait for ready state interactive 3c13eb41f6
Refactoring: Move Interface before FormatSelectorBuilder 20df10f0b5
Rename changeset comments and text fields body format from markdown to commonmark 413e68a735
Add Markdown support to Text fields in Artifact edition view 7baa332111
Add Markdown support to Text fields in New artifact view 6d20d606e3
Enable extraction of gettext in lib f9272d6a65
Refactoring: Display comments with Mustache fef77f94ed
Edit comments on the Artifact view 4c32752b44
Add the Markdown format for Step defintiion field in Artifact view e11c031455
Remove the modal v2 from legacy script of Tracker 1a3f8df4fb
Fix the edition of follow ups comments 23dec38dc7
Add the support of the markdown in the text field of the modal v2 d3ea4df19d
Add the support of Markdown in the follow ups of the Mass change view 687b2cf185
Document the commonmark REST representations 83b8291ca1
Remove image upload capability from codendi.RTE bb4302ebff
Add missing translation in artifact modal bda74f2e99
Add the syntax helper popover in TTM step c0aa4dc9db
Import/Use the real tlp-popover instead of rewriting it e762a6a6aa
Move "ckeditor form" lib to Trackers plugin c674078825
Add the common mark syntax helper in text field in artifact view 7b5b71e394
Fix the display of the popover arrow in modal V2 e82847a664
Fix typo of in the syntax helper popover 6631f5fc39

Follow-ups

User avatar
Joris MASSON (jmasson)2021-03-03 12:34

Adjust Acceptance criteria:

  • There was no possibility to choose Text formats in Modal v1 (artifact links). It stays that way
  • There was no possibility to choose Text formats in the Mass change view. It stays that way, only creation of new comment has the Markdown format.
  • Since another story will remove the ability to comment in Modal v2, no change has been done for new comments.

  • Acceptance criteria
    Something went wrong, the follow up content couldn't be loaded
    Only formatting have been changed, you should switch to markup to see the changes
User avatar
Joris MASSON (jmasson)2021-02-02 10:09

Add the email notifications in the list of places where Markdown is interpreted. It had been forgotten.

Remove the opportunity target for references in card fields. There are interferences with the "highlighting" code in the card fields (when you search for a term and it is highlighted in Planning view and Kanban). HTML code is stripped from the card fields. If we start showing <a> tags, if someone searches for ">", the tags will appear broken like this:

<a href="https://example.com"<span class="highlight">&gt;</span>Link</a<span class="highlight">&gt;</span>

SInce the "highlighting" code uses regexp to parse the text, it will break all HTML tags. We need to refactor it to use a HTML parser to actually work on the text content and ignore the tags. Since this story is already pretty big, this part is ignored. So the "post_processed_body" is not added in the API since we cannot use it in the frontend to display references in card fields.


  • Acceptance criteria
    Something went wrong, the follow up content couldn't be loaded
    Only formatting have been changed, you should switch to markup to see the changes
User avatar
Joris MASSON (jmasson)2020-12-21 12:29

Explain the origins of "post_processed_body" naming with a link to the request.


  • Acceptance criteria
    Something went wrong, the follow up content couldn't be loaded
    Only formatting have been changed, you should switch to markup to see the changes
User avatar
Joris MASSON (jmasson)2020-12-21 12:23

Rework the REST API payload format for Text fields / Follow-up comments. Explains the differences between the values for "html", "text" and "commonmark" formats. Also add the Opportunity target of providing interpreted cross-references in some parts of the API (Card fields in Kanban / Planning view for example).


  • Acceptance criteria
    Something went wrong, the follow up content couldn't be loaded
    Only formatting have been changed, you should switch to markup to see the changes
User avatar
Joris MASSON (jmasson)2020-12-18 10:18
  • Acceptance criteria
    Something went wrong, the follow up content couldn't be loaded
    Only formatting have been changed, you should switch to markup to see the changes
User avatar
Joris MASSON (jmasson)2020-12-17 17:21
  • Acceptance criteria
    Something went wrong, the follow up content couldn't be loaded
    Only formatting have been changed, you should switch to markup to see the changes
User avatar
Joris MASSON (jmasson)2020-12-17 10:53

Modal v1 in Artifact links => All fields are open in "edition mode", and it can only create new artifacts. There is no existing markdown to render, therefore it is cancelled.

The following two parts have already been completed by @nterray in request #15026 :

  • Comments (follow-ups) in the Artifact view (when editing an artifact)
  • Text fields in the Artifact view (before switching them to edition)

  • Acceptance criteria
    Something went wrong, the follow up content couldn't be loaded
    Only formatting have been changed, you should switch to markup to see the changes
User avatar
Joris MASSON (jmasson)2020-12-16 16:20
  • Acceptance criteria
    Something went wrong, the follow up content couldn't be loaded
    Only formatting have been changed, you should switch to markup to see the changes
User avatar
  • Acceptance criteria
    Something went wrong, the follow up content couldn't be loaded
    Only formatting have been changed, you should switch to markup to see the changes