#7955 Add more formatting support to markdown editor

v1.3.2
closed
General
Heith Seewald
2015-09-21
2015-08-10
No

It'd be nice to add more toolbar buttons to support inserting formatting like:

  • ~~~~ code blocks
  • strikethrough
  • backticks
  • tables
  • headers

Tables & headers might need a drop-down to support choosing which one, so not sure if that is realistic.

Syntax highlighting of those elements (especially our code blocks) would be nice too, but perhaps a lot of work?

See if we can include tooltip text on the new buttons too. I note that our custom preview and help buttons don't have tooltips.

Related

Tickets: #7956

Discussion

  • Dave Brondsema

    Dave Brondsema - 2015-08-10
    • labels: ux, sf-current --> ux, sf-current, sf-4
     
  • Igor Bondarenko

    Igor Bondarenko - 2015-08-17
    • assigned_to: Igor Bondarenko
     
  • Dave Brondsema

    Dave Brondsema - 2015-08-28

    Tooltips added in db/7955


    So adding a toolbar button that runs an action like this is pretty straightfoward:

    function toggleStrikethrough(editor) {
      _toggleBlock(editor, 'strikethrough', '<s>', '</s>');
    }
    

    But then if you hit the button again it doubles up instead of toggling off the strikethrough. All the toggle functions call getState() to know what type of section you are in. But codemirror/gfm doesn't know about strikethrough (it does recognize the tag at the beginning, but not the span of text between the tags). It does recognize section headers (e.g. "header header-2") and the "hr" type. It thinks ` as well as ``` sections are both "comment". It doesn't know anything about tables, or ~~~~ sections.

    The state type also appears to be what controls a button being highlighted when its active. The state type should match the toolbar item's 'name'.

     

    Last edit: Dave Brondsema 2015-08-28
  • Dave Brondsema

    Dave Brondsema - 2015-08-28

    Author has some in-progress work to put section headers buttons in the toolbar, nice :)

    State types are mostly set starting here https://github.com/codemirror/CodeMirror/blob/master/mode/markdown/markdown.js#L54 "comment" actually means "code"

    ``` blocks can be controlled with option fencedCodeBlocks in markdown.js but we don't have a way to pass that in right now. We'd need to change mode in simplemde.js from a simple string to {name: "gfm", fencedCodeBlocks: false} And gfm.js will pass it through to markdown.js config. General config docs) Or to keep it but change from ``` to ~~~~ would require forking markdown.js and changing ``` in just a few places, might be actually not bad if we decide to do a custom build of simplemde and codemirror.

    I am working on a button to support just single ` inline formatting. I think it should be possible.

     

    Last edit: Dave Brondsema 2015-08-28
  • Dave Brondsema

    Dave Brondsema - 2015-09-08
    • status: open --> in-progress
    • assigned_to: Igor Bondarenko --> Dave Brondsema
     
  • Dave Brondsema

    Dave Brondsema - 2015-09-14

    db/7955

    Test:

    • tooltips on preview & help buttons
    • <hr> button
    • code sections are formatted good enough (can't do background colors well)
    • table button
    • preview still works
    • no ~~strikethrough~~ formatting any more
    • styling of section headers (text line, followed by ---- or ====)
    • code snippets of all types, test this thoroughly and note carefully what you do so I can reproduce any issues.

    I'd like to submit toggleCodeBlock upstream after QA passes and we know its solid. But we still will have to maintain a customized version (all the FIXME lines) until [#7987] is done.

     

    Related

    Tickets: #7987

  • Dave Brondsema

    Dave Brondsema - 2015-09-14
    • status: in-progress --> review
     
  • Heith Seewald

    Heith Seewald - 2015-09-15

    Looking really good overall!

    There are a few minor notes:

    1. When you hit "Edit" on a "Reply" the width forces the toolbar buttons to wrap. (maybe drop a button?)
    2. Hitting the code block button in the middle of a word splits the word -- and hitting the button again will place the cursor back an extra character. (which you already fixed)
    3. Table button is nice in theory -- but looks much nicer when it's using fixed width fonts while editing. For example, if you create a table, highlight it and hit tab, you'll notice it's much nicer to work with. The issue is you can't save it preformatted or it won't get rendered properly. Is there anything else we can do here?

    I also tested the code snippets of all types and saved the markdown here for reference -- looks good.

     
  • Heith Seewald

    Heith Seewald - 2015-09-15
    • status: review --> in-progress
     
  • Dave Brondsema

    Dave Brondsema - 2015-09-16

    Tables aren't parsed in the CodeMirror markdown modes, so we don't have a way to style it. I think it'll be hard to add parsing for it, so I'm not going to attempt it now. I did file an issue for it though https://github.com/codemirror/CodeMirror/issues/3532

    And one option would be intentionally make the pipes in the table not line up. They don't have to be, so maybe if we don't make them look like they're supposed to be then it'd be good. Example:

    First Header | Second Header | Third Header
    --- | --- | ---
    Content Cell | Content Cell | Content Cell
    Foo | Bar | Baz

     
    • Heith Seewald

      Heith Seewald - 2015-09-16

      That could work. The font kerning prevents it from looking perfect, but keeping the placeholder text simple might help make it easier to digest (and edit).

      A  | B  | C
      --- | --- |---
      1   | 2  | 3
      x   | y   | z
      
      A B C
      1 2 3
      x y z

      ^ looks better when you're editing it...

       

      Last edit: Heith Seewald 2015-09-16
      • Dave Brondsema

        Dave Brondsema - 2015-09-16

        Yeah, but you do lose a bit of the table meaning. It's nice for the example to show that the first row is headers. Maybe this?

        Header Header Header
        Cell Cell Cell
        Cell Cell Cell
         
        • Heith Seewald

          Heith Seewald - 2015-09-17

          Yeah, I think that's a good compromise between comprehension and ease of editing.

          We also might want to make sure the table width is set to 100% so it fit properly when rendered -- but that might be out of scope.

           
  • Dave Brondsema

    Dave Brondsema - 2015-09-16

    Editing a top-level comment wraps 1 button. Editing 2nd level wraps 2 buttons. Editing 6th level wraps 3 buttons. It takes 11 levels deep for a post (not edit) to wrap a toolbar button.

    I'd be fine with dropping the <hr> button. But we'd still have wrapping if you edit a 2nd level (or deeper) reply. And I'm not sure about removing any other buttons. In fact, eventually I'd like to have more buttons (e.g. for macro choices). I will see about removing the right section (Reply/Link/Edit/Delete/Spam) when you are in edit mode, so there is more width to work with.

     
    • Dave Brondsema

      Dave Brondsema - 2015-09-16

      This is done and pushed to db/7955 The implementation is a bit ugly due to some already hard-coded widths, but it works and it looks good to me.

       
      • Heith Seewald

        Heith Seewald - 2015-09-17

        Yeah, that looks good to me.

         
  • Dave Brondsema

    Dave Brondsema - 2015-09-17
    • status: in-progress --> review
    • Reviewer: Heith Seewald
     
  • Dave Brondsema

    Dave Brondsema - 2015-09-17

    Ok, updated db/7955 with the new example table, plus a few other little fixes I noticed.

     
  • Heith Seewald

    Heith Seewald - 2015-09-17
    • status: review --> closed
     
  • Heith Seewald

    Heith Seewald - 2015-09-17

    Nice work, Dave.

     
  • Dave Brondsema

    Dave Brondsema - 2015-09-21
    • labels: ux, sf-current, sf-4 --> ux, sf-4
     
  • Dave Brondsema

    Dave Brondsema - 2015-12-08
    • Milestone: unreleased --> v1.3.2
     

Log in to post a comment.