Apache Allura™

I did some research and have opened issues with features we need to easily extend the editor. I will be absent for the next couple of weeks, so feel free to work on pull requests for those, or just wait for the maintainer reaction :)

1. spell checker memory leak (relevant for [#7954]) https://github.com/NextStepWebs/simplemde-markdown-editor/issues/56
2. expose _toggle* helpers (will help extend syntax) https://github.com/NextStepWebs/simplemde-markdown-editor/issues/57
3. customize preview source (good to have to get rid of some copy&paste code we have) https://github.com/NextStepWebs/simplemde-markdown-editor/issues/58

We can add tooltips easily with something like this: $('.editor-toolbar > a.fa-question-circle').tooltipster({content: 'Hello!'});

Syntax highlighting will be trickier, though. We'll need to extend GFM mode of the CodeMirror and use it here. Probably need to add option in SimpleMDE for it... It seems we will need to build our own version of the editor for this (to include CodeMirror compiled with our custom code) I didn't look at it very closely, though.

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

Incorrect highlight of Image icon when the cursor is active in a block quote is fixed in https://github.com/NextStepWebs/simplemde-markdown-editor/commit/1d69c335c40a379675add2b422dded4ae5a935bc#diff-5385f3431767cd4a3a0e3dc98e5a5b5cL419 not yet released.

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.

Have a few pull requests contributions:

• customizable preview function https://github.com/NextStepWebs/simplemde-markdown-editor/pull/82
• no button highlighting in preview mode https://github.com/NextStepWebs/simplemde-markdown-editor/pull/83
• ~~~~ code blocks https://github.com/codemirror/CodeMirror/pull/3496
• #foo with no space https://github.com/codemirror/CodeMirror/pull/3497

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.

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.

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

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.

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

Nice work, Dave.

• Milestone: unreleased --> v1.3.2