Skip to content

Limit SSE Toast UI changes upon entering WYSIWYG mode

The problem

There are at least a few issues when the WYSIWYG editor initializes for certain files. These can be seen in the screenshots below and in listed form here:

  1. Number formatting changes (1., 1., 1. -> 1., 2., 3.)
  2. Improper new line link syntax (duplicate [text](url) definitions when only one should exist)
  3. Triple tick code block marks

To test, I simply printed to the console on initialization the initial this.content and the this.editableContent (in the modified computed) without editing anything. Each of which was saved to content-a.md and content-b.md respectively for the screenshot diff test. My gut says this simply has to do with the markdown flavor differences where:

  • content-a.md: GitLab flavor
  • content-b.md: ToastUI's flavor (whatever it happens to be using at the moment)

The screenshots below show the detail for the first example I tried on local dev for file /gitlab-org/gitlab-shell/-/sse/master%2FREADME.md (I wasn't able to get one continuous screenshot in vscode)

Screen_Shot_2020-05-19_at_1.50.24_PM

Screen_Shot_2020-05-19_at_1.50.42_PM

Solution

Short-term

As a first iteration to address this issue and considering that the Static Site Editor’s main goal for the current and next milestones is to integrate with Handbook, we will configure the editor to follow the Handbook’s markdown formatting preferences.

We have created issues to tackle each formatting preference as individual pieces of work.

Long-term

Long-term we aspire to allow custom format in the WYSIWYG Markdown generation. We have to work with Toast UI to open the Markdown renderer service as much as possible to make it customizable.

  • Work with Toast UI to allow HTML to Markdown rendering customizations.
  • Translate any approach we use in the short-term to address the text escaping issues to a stable API.

Short-term solution implementation tasks

Edited by Enrique Alcántara