Feature Request: wysiwyg editor for issues and wiki #2593

@lafriks commented on GitHub (Apr 22, 2019):

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

@lafriks commented on GitHub (Apr 22, 2019): I think it is already close enough to have it easy to use

GiteaMirror commented

@KaKi87 commented on GitHub (Apr 23, 2019):

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

@KaKi87 commented on GitHub (Apr 23, 2019): 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

GiteaMirror commented

@lafriks commented on GitHub (Apr 23, 2019):

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

@lafriks commented on GitHub (Apr 23, 2019): 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

GiteaMirror commented

@lunny commented on GitHub (Apr 25, 2019):

I think it Maybe like typora ?

@lunny commented on GitHub (Apr 25, 2019): I think it Maybe like typora ?

GiteaMirror commented

@Cherrg commented on GitHub (Jun 18, 2019):

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 commented on GitHub (Jun 18, 2019): > 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

GiteaMirror commented

@Cherrg commented on GitHub (Jun 18, 2019):

I think this issue is more like #6975

@Cherrg commented on GitHub (Jun 18, 2019): I think this issue is more like #6975

GiteaMirror commented

@KaKi87 commented on GitHub (Jun 18, 2019):

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

How would that make live rendering impossible ?

@KaKi87 commented on GitHub (Jun 18, 2019): > the previewing button request gitea to render the text to html and show it back on website How would that make live rendering impossible ?

GiteaMirror commented

@Cherrg commented on GitHub (Jun 18, 2019):

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 commented on GitHub (Jun 18, 2019): 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

GiteaMirror commented

@Cherrg commented on GitHub (Jun 18, 2019):

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

@Cherrg commented on GitHub (Jun 18, 2019): 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

GiteaMirror commented

@KaKi87 commented on GitHub (Jun 18, 2019):

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.

@KaKi87 commented on GitHub (Jun 18, 2019): > 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.

GiteaMirror commented

@Cherrg commented on GitHub (Jun 18, 2019):

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 commented on GitHub (Jun 18, 2019): 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.

GiteaMirror commented

@Cherrg commented on GitHub (Jun 18, 2019):

added PR for

inline code
checkboxes

too

@Cherrg commented on GitHub (Jun 18, 2019): added PR for - inline code - checkboxes too

GiteaMirror commented