Apache Allura™ / Tickets / #7897 Live syntax highlighting for markdown editing

Dave Brondsema - 2015-06-15

labels: ux, sf-current --> ux, sf-current, sf-8
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:

Igor Bondarenko - 2015-06-16

Owner: Anonymous --> Igor Bondarenko

Labels: ux, sf-current, sf-8 --> 42cc, sf-8, ux, sf-current

Status: open --> in-progress
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:

Igor Bondarenko - 2015-07-08

status: in-progress --> review
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:

Igor Bondarenko - 2015-07-08

Closed #804, #814. ib/7897

I needed to change editor code itself a bit, refer to git show 2008f8d for details. We probably shoud fork & contribute back to the editor, so it will be less painful to update editor in the future.

Some places to check for QA:

comments and replies add/edit

ticket create/edit

wiki create/edit

merge request create/edit

blog post create/edit

discussion (aka forum)
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:

Dave Brondsema - 2015-07-09

status: review --> in-progress

Reviewer: Dave Brondsema
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:

Dave Brondsema - 2015-07-09

I am so excited for this.

First, I just noticed https://github.com/NextStepWebs/simplemde-markdown-editor/#whats-changed have you seen that? Looks like some nice improvements: https://github.com/NextStepWebs/simplemde-markdown-editor/#whats-changed Any idea how easy it'd be to switch over? Too bad we didn't see it sooner :( My brief impressions is that SimpleMDE is better maintained (plus new features and fixes) so it probably would be the best route if we want to make some contributions upstream.

The CSSLink needs compress=False due to relative font references.

Can the preview be the same font as normal display font? I mean not fixed-width. If editing needs to be the same as preview, we could make it all be not fixed-width and that'd probably be fine I think. Also transparent background might be good for preview (our current preview is transparent background and also removes all borders so you can really see how it'll look - not sure if we really can remove borders with this editor though)

Sidenote: As we're adding more JS over time, we might want to figure out a JS test suite some day.

Do you know how hard it'd be in future tickets to enhance the toolbar and highlight support for our Markdown variations? If you don't really know that's fine, just wondering.

If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
- Igor Bondarenko - 2015-07-10
  
  SimpleMDE definitely looks better! It exposes "autofocus" option, so we don't need to change editor's code as I did in lepture's editor. I think it will be not very hard to switch, I'll give it a try.
  
  I'm not sure about transparent preview and borders, we'll need to hide central part of the editor for this to work, but we must leave toolbar, because it contains button for exiting the preview, so I'm not sure it will look good, but I'll try it.
  
  Toolbar enhancement should be pretty straightforward, you just add js object describing button and function, which should be called on click, to the toolbar list and that's all. But, if you need to modify text you need to use helpers to do it properly and editor isn't exposing them for external use :( That's one of the things we can contribute, I think.
  
  I'm not sure about highlight support, it's provided by CodeMirror and it is pretty extensible, so I think we can teach it our extended markdown syntax, but I did not look into it closely.
  
  Yeah, js test suite would be good. I didn't have experience with those, do you have something in mind? We can discuss it on allura's mailing list, I think.
  
  If you would like to refer to this comment somewhere else in this project, copy and paste the following link:

Igor Bondarenko - 2015-07-14

status: in-progress --> review
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:

Igor Bondarenko - 2015-07-14

Closed #820. Force-pushed ib/7897

If you would like to refer to this comment somewhere else in this project, copy and paste the following link:

Igor Bondarenko - 2015-07-16

FYI, I've included Font Awesome here, since SimpleMDE relies on it

If you would like to refer to this comment somewhere else in this project, copy and paste the following link:

Dave Brondsema - 2015-07-16

status: review --> in-progress
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:

Dave Brondsema - 2015-07-16

Good progress. Hope you don't mind getting into the details now, but there are a lot of details for this :)

there's an unnecessary call to /nf/markdown_to_html is made when leaving preview mode

preview doesn't style preformatted text (e.g. 4-space indented block) properly. Should be a fixed-width font

Is it possible to make <tab> insert 4 spaces instead of a literal tab? to be consistent with how we've done it previously. Might get messy if people edit existing content and get a mix of tabs and spaces. Looks like indentWithTabs and tabSize settings will do it.

the initial editor height for comments seems a bit too high, compared to before

the styles for editing labels (e.g. on ticket edit) seem to have gotten overridden or something. Not sure what happened, but I'm not seeing the blue boxes with 'x' for each label.

Last, this is an existing bug but I just found it and maybe you want to look at it while you're working on this stuff. If not, we can do a separate ticket for it. When editing a comment, or composing a new reply, a tiny width causing wrapping can happen in during preview. Example text to produce this problem:

* qwert 12345678901234567890

Last edit: Dave Brondsema 2015-07-16
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
- Igor Bondarenko - 2015-07-17
  
  Sure. Let's make it as good as we can!
  
  I've created #823 and #824 (for the last point) on our side
  
  If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
  - Igor Bondarenko - 2015-07-17
    
    the styles for editing labels (e.g. on ticket edit) seem to have gotten overridden or something. Not sure what happened, but I'm not seeing the blue boxes with 'x' for each label.
    
    I'm seeing normal styles. Checked with both allura and sftheme in anonymous browser mode. Both chrome and ff. Could you make sure this is not one of those glitches when styles are not loading properly in dev mode?
    
    Last edit: Igor Bondarenko 2015-07-17
    
    If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
    - Dave Brondsema - 2015-07-17
      
      Works correct for me now. Not sure what was happening yesterday.
      
      If you would like to refer to this comment somewhere else in this project, copy and paste the following link:

Igor Bondarenko - 2015-07-22

status: in-progress --> review
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:

Igor Bondarenko - 2015-07-22

Closed #823, #824. Force-pushed ib/7897 (rebase)

Fixed all of the above and also fixed bug with text "sticking" to the list above in the display & preview mode, e.g.

~~~~
one
two

some text
~~~~~

does not require   between list and "some text" anymore to look good.

If you would like to refer to this comment somewhere else in this project, copy and paste the following link:

Dave Brondsema - 2015-07-23

status: review --> in-progress
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:

Dave Brondsema - 2015-07-23

margin-bottom: 20px !important; is a lot of margin to put on all our lists including during regular display. It seems unnecessary to fix the issue too (at least in Firefox)

<pre> needs more styling for preview to match regular rendering.

Tabbing when in a list moves cursor to pos 4, but not 4 spaces (since "* " is in there). This likely is a bug within SimpleMDE what do you think? Might be one we want to contribute a fix for, if possible.

If you would like to refer to this comment somewhere else in this project, copy and paste the following link:

Igor Bondarenko - 2015-07-27

status: in-progress --> review
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:

Igor Bondarenko - 2015-07-27

Closed #828. Force-pushed ib/7897

Margin:

I think it is also needed in Firefox. Without it, the following style is used:

#comment ul ul { margin: 0px !important; }

So no vertical space between list and paragragh. I've decreased it to 5px.

Pre: Could you describe the differences? I am not seeing any (see attachment)

Tabbing:

It is a bug in SimpleMDE. It is fixed in the version 1.4.0, so I've updated our dependencies.
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
- Dave Brondsema - 2015-07-28
  
  For margin: yes the style you mention will be used then, but its not necessary to fix the preview bug. It would be useful to have some space between bullet lists and the next section, but this new margin-bottom rule also has a bad effect on nested lists and it looks kinda bad (SFtheme has this problem already). So maybe better to handle that as a separate issue.
  
  For <pre>: I don't see your attachment. But I realize now that the default theme is fine, it's only the SF theme that isn't right. I guess something is out of sync between them. (BTW, see sftheme:db/7897 where I've already applied the other css changes into that theme)
  
  edit-preview.png
  
  rendered.png
  
  If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
  - Dave Brondsema - 2015-07-28
    
    In those screenshots, take note that the gray background for <pre> is hard to see on some monitors. Make sure you see it :)
    
    If you would like to refer to this comment somewhere else in this project, copy and paste the following link:

Dave Brondsema - 2015-07-27

labels: 42cc, sf-8, ux, sf-current --> 42cc, sf-8, ux
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:

Dave Brondsema - 2015-07-28

status: review --> in-progress
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:

Apache Allura™

Forge software for hosting software projects

Milestone

Searches

Help

#7897 Live syntax highlighting for markdown editing

Related

Discussion