#7897 Live syntax highlighting for markdown editing

v1.3.1
closed
General
2015-07-29
2015-06-15
No

An editor like https://github.com/lepture/editor which shows some Markdown style rendering as you are editing (not full WYSIWYG though) could be very helpful. Demo at http://lab.lepture.com/editor/

We should figure out how to change the help & preview buttons to use our help & preview URLs. However I don't think we should try to customize the syntax highlighting for our customizations (e.g. ~~~~, artifact links, etc) yet. Can be a followup ticket.

I like this because it doesn't attempt to do a full WYSIWYG exact render, so we don't have to worry about some of our customizations. Yet it does do enough formatting that people will notice if they unintentionally cause formatting with a _ or a *. And it even helps with the sneaky gotcha of a bullet list without a preceding blank line (it doesn't work, it is rendered as italics)

(This idea came from discussion on [#6822])

Related

Tickets: #6114
Tickets: #6822
Tickets: #7327
Tickets: #7924

Discussion

1 2 > >> (Page 1 of 2)
  • Dave Brondsema

    Dave Brondsema - 2015-06-15
    • labels: ux, sf-current --> ux, sf-current, sf-8
     
  • 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
     
  • Igor Bondarenko - 2015-07-08
    • status: in-progress --> review
     
  • 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)
     
  • Dave Brondsema

    Dave Brondsema - 2015-07-09
    • status: review --> in-progress
    • Reviewer: Dave Brondsema
     
  • Dave Brondsema

    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.

     
    • 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.

       
  • Igor Bondarenko - 2015-07-14
    • status: in-progress --> review
     
  • Igor Bondarenko - 2015-07-14

    Closed #820. Force-pushed ib/7897

     
  • Igor Bondarenko - 2015-07-16

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

     
  • Dave Brondsema

    Dave Brondsema - 2015-07-16
    • status: review --> in-progress
     
  • Dave Brondsema

    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
    • 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

       
      • 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
        • Dave Brondsema

          Dave Brondsema - 2015-07-17

          Works correct for me now. Not sure what was happening yesterday.

           
  • Igor Bondarenko - 2015-07-22
    • status: in-progress --> review
     
  • 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 &nbsp; between list and "some text" anymore to look good.

     
  • Dave Brondsema

    Dave Brondsema - 2015-07-23
    • status: review --> in-progress
     
  • Dave Brondsema

    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.

     
  • Igor Bondarenko - 2015-07-27
    • status: in-progress --> review
     
  • 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.

     
    • Dave Brondsema

      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)

       
      • Dave Brondsema

        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 :)

         
  • Dave Brondsema

    Dave Brondsema - 2015-07-27
    • labels: 42cc, sf-8, ux, sf-current --> 42cc, sf-8, ux
     
  • Dave Brondsema

    Dave Brondsema - 2015-07-28
    • status: review --> in-progress
     
1 2 > >> (Page 1 of 2)

Log in to post a comment.