Gitea: Feature Request: wysiwyg editor for issues and wiki

[callamaris]

• Gitea version (or commit ref): 1.5.1
• Git version: All supported versions
• Operating system: All supported platforms
• Database (use [x]):
  
  
  
  • [ ] PostgreSQL
  
  
  • [ ] MySQL
  
  
  • [ ] MSSQL
  
  
  • [x] SQLite
  
  
• Can you reproduce the bug at https://try.gitea.io:
  
  
  
  • [ ] Yes (provide example URL)
  
  
  • [ ] No
  
  
  • [ ] Not relevant
  
  
• Log gist:

Description

Please add some sort of markdown wysiwyg editor to wiki and issue input boxes.

Something like benweet/stackedit for example.

Screenshots

[lafriks]

For wiki there already is one

[KaKi87]

@lafriks Wiki's editor is not WYSIWYG

[lafriks]

I think it is already close enough to have it easy to use

[KaKi87]

It's not about ease but experience.
Editing and previewing simultaneously is a better experience than edititing then previewing.
However, some complex elements like tables, are much easier to edit with a WYSIWYG editor.
Less significantly, images and links are easier too.
By the way, inline code and checkboxes are missing from the current editor. I noticed that but other elements may be missing as well

[lafriks]

Implementing new WYSIWYG editor in gitea is totally out of scope for this project. If there is any JavaScript library that is better than currently used we could look into it

[lunny]

I think it Maybe like typora ?

[Cherrg]

It's not about ease but experience.
Editing and previewing simultaneously is a better experience than edititing then previewing.

There is a problems with an live preview (Editing and previewing):

• currently markdown is rendered by https://github.com/russross/blackfriday which is an internal go library
• the live js implementation has to render the result exactly like the internal go variant, otherwise the user experience would be even worse.

the previewing button request gitea to render the text to html and show it back on website.

May you suggest some other CodeMirror theme or rules or something what should really be changed in edit mode. But I wouldn't like to see really colored markdown like here: https://codemirror.net/mode/markdown/.

I think it Maybe like typora ?

if i see it correctly 'typora' is standalone and no js library

[Cherrg]

I think this issue is more like #6975

[KaKi87]

the previewing button request gitea to render the text to html and show it back on website

How would that make live rendering impossible ?

[Cherrg]

I never said impossible, but

---

Let Go do the rendering:

• this will trigger rendering with every keypress
  
  
  
  • may the update could be delayed to time interval, or X changed letters)
  
  
• how do you integrate the returned html code into your text editor as it will return the whole text
  
  
  
  • A solution would be an additional container where the preview is shown. As it does not effect the editor at all.
  
  

Let JS do the rendering:

• The JS render implementation has to do the same thing as the go code, otherwise it will render differently on live preview and when it is finished. This would be an even worse solution.

Let me ask which solution is preferred/ goal should be achieved?
May the go rendering variant with delay could be done, if codemirror is fullscreen, screen is large enougth.

---

The codemirror (used by simpleMDEditor) currently does some simple highlighting.

However, some complex elements like tables, are much easier to edit with a WYSIWYG editor.

The current editor has a simple feature to add tables.
Are you looking for something like https://codepen.io/jasondavis/pen/eJBoeK ? Such things could be added to codemirror too. Or something else?

Less significantly, images and links are easier too.

You could simply paste links. Image pasting could be easily achieved too, if upload is working at all.

By the way, inline code

I don't know if it will make any sense to add inline code button if it could be done by simply adding ` around your code. Are there keyboards without this key?

and checkboxes are missing from the current editor.

* [ ] checkbox

There is a codemirror plugin called 'button' or 'buttons'. It allows to simply add some buttons and code there, by adding some lines to an array. May I will add some buttons later on to support

• inline code
• checkboxes

[Cherrg]

simpleMDE actually support side-by-side view -> which give live preview (and runs request by every keypress)
I will create an pr to anable this feature and i will delay the preview like mentioned above

[KaKi87]

this will trigger rendering with every keypress
may the update could be delayed to time interval, or X changed letters)

Smarter : we could trigger rendering when the user stops typing for 0.5s

how do you integrate the returned html code into your text editor as it will return the whole text
A solution would be an additional container where the preview is shown. As it does not effect the editor at all.

Even smarter : we could use contenteditable and only trigger rendering whenever the user creates a new block.

[Cherrg]

added an pull request to enable sideby side editor

Smarter : we could trigger rendering when the user stops typing for 0.5s

currently it will render on every 10th keystroke or with 1sec delay, i will reduce the delay to 500ms.

Even smarter : we could use contenteditable and only trigger rendering whenever the user creates a new block.

Codemirror will create elements on every line, and on every styled text element, so this could be quite often. (e.g. inserting an image by this: ![alias](image.png) will create 4 html elements. (and if i bind to that event, the renderer may get triggert 4 times))
Internal Codemirror does something like contenteditable on html elements. While updating an internal raw text state and tracks every keystroke, it will also update an rendered preview.

[Cherrg]

added PR for

• inline code
• checkboxes

too

[Cherrg]

@KaKi87 As you requested something for tables, i've written some jquery extension for it.
If you like it, i would create a PR to add this to simpleMDE/codemirror.
(First i will add this to wiki page, if all is done there, i will add all features to issues and normal markdown editor)

Running version could be found here:

Without Code

https://jsfiddle.net/cherrg/kywdz0jc/show

With Code

https://jsfiddle.net/cherrg/kywdz0jc/

Features

• create md tables of selected size
• editable table
• mark and edit tables
• text alignment inside tables

---

• parse and creates markdown tables from
  
  
  
  • markdown tables
  
  
  • html tables
  
  
  • csv
  
  
  • text based tables (copied by clipboard)
  
  

Images

[Booteille]

Hi. What's the status of this issue? I really think this is a must-have feature if we want non-technical users to be able to report issues easily.

[6543]

@Cherrg your commit (https://github.com/go-gitea/gitea/issues/5436#issuecomment-503757065) is worth a own issue ... i think

@callamaris gitea v1.11.0 will have wysiwyng editor for issue and wiki

[6543]

@callamaris can you close this issue