Skip to content

Conversation

@korelstar
Copy link
Member

This adds a preview mode, in which the formatted text is shown without any possibility to edit. Implementation uses MarkdownIt. Fixes #23.

  • new component EditorMarkdownIt for preview mode
  • toggle preview mode with action button (bottom right)
  • introduce three-dot-menu for action buttons (bottom right)

Screenshots

Normal editor (like before)

editor

Action menu closed (bottom right)

action menu closed

Action menu opened (bottom right)

action menu opened

Action menu: Preview active (bottom right)

action menu preview active

New Preview

preview

@korelstar korelstar added enhancement New feature or request feature: editor Related to generic parts of the editor, e.g. loading/saving notes labels May 26, 2019
@korelstar korelstar added this to the 3.0.0 milestone May 26, 2019
@korelstar korelstar added the feature: Markdown-it Related to preview mode using Markdown-it label May 26, 2019
@korelstar korelstar mentioned this pull request May 26, 2019
@phsc84
Copy link

phsc84 commented May 26, 2019

Looks great! Thank you for implementing this feature.

@korelstar korelstar marked this pull request as ready for review May 26, 2019 12:22
@korelstar korelstar requested a review from jancborchardt May 26, 2019 12:23
@korelstar
Copy link
Member Author

Please have a look @nextcloud/designers / @jancborchardt : are the action buttons at bottom right fine?

@jancborchardt
Copy link
Member

@korelstar the 3-dot button is fine, but for the actions in there, could you use the popover menu: https://docs.nextcloud.com/server/latest/developer_manual/design/popovermenu.html
That has icons and the text next to it, because the icons are not self-explanatory. :)

@skjnldsv
Copy link
Member

Even Better, the vue Actions component (Jan, at some point we will stop supporting the design html standards in favour of the vue components :) )

@korelstar
Copy link
Member Author

@jancborchardt @skjnldsv Good idea, thank! I will do that ...

@korelstar
Copy link
Member Author

@jancborchardt Where is the best position for the three-dot-button? bottom-right or top-right?

Background for this question: the actions component from nextcloud-vue supports positioning the popover menu below of the button, only.

@skjnldsv
Copy link
Member

skjnldsv commented Jun 3, 2019

I would say top right :)

@jancborchardt
Copy link
Member

Agree with @skjnldsv, top-rigth. Reason being that whenever we have additional controls (like in the Files app or in the Talk app for example) they are always top right.

@korelstar
Copy link
Member Author

Here is the new design using the actions component from nextcloud-vue:

Actions menu closed

Screenshot

Actions menu opened

Screenshot

@skjnldsv
Copy link
Member

skjnldsv commented Jun 7, 2019

Oh yes! Me likey!! 😍

@korelstar korelstar merged commit a40d98b into master Jun 7, 2019
@korelstar korelstar deleted the preview branch June 7, 2019 14:07
@jancborchardt
Copy link
Member

@korelstar looks fabulous! Very well made :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request feature: editor Related to generic parts of the editor, e.g. loading/saving notes feature: Markdown-it Related to preview mode using Markdown-it

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add edit/preview toggle

4 participants