You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@allura.apache.org by Dave Brondsema <da...@brondsema.net> on 2015/06/15 16:30:35 UTC

[allura:tickets] #7897 Live syntax highlighting for markdown editing



---

** [tickets:#7897] Live syntax highlighting for markdown editing**

**Status:** open
**Milestone:** unreleased
**Labels:** ux sf-current 
**Created:** Mon Jun 15, 2015 02:30 PM UTC by Dave Brondsema
**Last Updated:** Mon Jun 15, 2015 02:30 PM UTC
**Owner:** nobody

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


---

Sent from forge-allura.apache.org because dev@allura.apache.org is subscribed to https://forge-allura.apache.org/p/allura/tickets/

To unsubscribe from further messages, a project admin can change settings at https://forge-allura.apache.org/p/allura/admin/tickets/options.  Or, if this is a mailing list, you can unsubscribe from the mailing list.

[allura:tickets] #7897 Live syntax highlighting for markdown editing

Posted by Igor Bondarenko <je...@gmail.com>.
- **status**: in-progress --> review
- **Comment**:

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.



---

** [tickets:#7897] Live syntax highlighting for markdown editing**

**Status:** review
**Milestone:** unreleased
**Labels:** 42cc sf-8 ux sf-current 
**Created:** Mon Jun 15, 2015 02:30 PM UTC by Dave Brondsema
**Last Updated:** Thu Jul 16, 2015 08:41 PM UTC
**Owner:** Igor Bondarenko


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


---

Sent from forge-allura.apache.org because dev@allura.apache.org is subscribed to https://forge-allura.apache.org/p/allura/tickets/

To unsubscribe from further messages, a project admin can change settings at https://forge-allura.apache.org/p/allura/admin/tickets/options.  Or, if this is a mailing list, you can unsubscribe from the mailing list.

[allura:tickets] #7897 Live syntax highlighting for markdown editing

Posted by Dave Brondsema <da...@brondsema.net>.
- **status**: review --> in-progress
- **Comment**:

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



---

** [tickets:#7897] Live syntax highlighting for markdown editing**

**Status:** in-progress
**Milestone:** unreleased
**Labels:** 42cc sf-8 ux sf-current 
**Created:** Mon Jun 15, 2015 02:30 PM UTC by Dave Brondsema
**Last Updated:** Thu Jul 16, 2015 08:08 AM UTC
**Owner:** Igor Bondarenko


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


---

Sent from forge-allura.apache.org because dev@allura.apache.org is subscribed to https://forge-allura.apache.org/p/allura/tickets/

To unsubscribe from further messages, a project admin can change settings at https://forge-allura.apache.org/p/allura/admin/tickets/options.  Or, if this is a mailing list, you can unsubscribe from the mailing list.

[allura:tickets] #7897 Live syntax highlighting for markdown editing

Posted by Dave Brondsema <da...@brondsema.net>.
- **status**: review --> in-progress
- **Reviewer**: Dave Brondsema
- **Comment**:

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.



---

** [tickets:#7897] Live syntax highlighting for markdown editing**

**Status:** in-progress
**Milestone:** unreleased
**Labels:** 42cc sf-8 ux sf-current 
**Created:** Mon Jun 15, 2015 02:30 PM UTC by Dave Brondsema
**Last Updated:** Wed Jul 08, 2015 10:06 AM UTC
**Owner:** Igor Bondarenko

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


---

Sent from forge-allura.apache.org because dev@allura.apache.org is subscribed to https://forge-allura.apache.org/p/allura/tickets/

To unsubscribe from further messages, a project admin can change settings at https://forge-allura.apache.org/p/allura/admin/tickets/options.  Or, if this is a mailing list, you can unsubscribe from the mailing list.

[allura:tickets] #7897 Live syntax highlighting for markdown editing

Posted by Dave Brondsema <da...@brondsema.net>.
- **labels**: ux, sf-current --> ux, sf-current, sf-8



---

** [tickets:#7897] Live syntax highlighting for markdown editing**

**Status:** open
**Milestone:** unreleased
**Labels:** ux sf-current sf-8 
**Created:** Mon Jun 15, 2015 02:30 PM UTC by Dave Brondsema
**Last Updated:** Mon Jun 15, 2015 02:30 PM UTC
**Owner:** nobody

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


---

Sent from forge-allura.apache.org because dev@allura.apache.org is subscribed to https://forge-allura.apache.org/p/allura/tickets/

To unsubscribe from further messages, a project admin can change settings at https://forge-allura.apache.org/p/allura/admin/tickets/options.  Or, if this is a mailing list, you can unsubscribe from the mailing list.

[allura:tickets] #7897 Live syntax highlighting for markdown editing

Posted by Dave Brondsema <da...@brondsema.net>.
- **status**: review --> closed



---

** [tickets:#7897] Live syntax highlighting for markdown editing**

**Status:** closed
**Milestone:** unreleased
**Labels:** 42cc sf-8 ux 
**Created:** Mon Jun 15, 2015 02:30 PM UTC by Dave Brondsema
**Last Updated:** Wed Jul 29, 2015 10:54 AM UTC
**Owner:** Igor Bondarenko


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


---

Sent from forge-allura.apache.org because dev@allura.apache.org is subscribed to https://forge-allura.apache.org/p/allura/tickets/

To unsubscribe from further messages, a project admin can change settings at https://forge-allura.apache.org/p/allura/admin/tickets/options.  Or, if this is a mailing list, you can unsubscribe from the mailing list.

[allura:tickets] #7897 Live syntax highlighting for markdown editing

Posted by Dave Brondsema <da...@brondsema.net>.
- **status**: review --> in-progress



---

** [tickets:#7897] Live syntax highlighting for markdown editing**

**Status:** in-progress
**Milestone:** unreleased
**Labels:** 42cc sf-8 ux 
**Created:** Mon Jun 15, 2015 02:30 PM UTC by Dave Brondsema
**Last Updated:** Mon Jul 27, 2015 02:55 PM UTC
**Owner:** Igor Bondarenko


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


---

Sent from forge-allura.apache.org because dev@allura.apache.org is subscribed to https://forge-allura.apache.org/p/allura/tickets/

To unsubscribe from further messages, a project admin can change settings at https://forge-allura.apache.org/p/allura/admin/tickets/options.  Or, if this is a mailing list, you can unsubscribe from the mailing list.

[allura:tickets] #7897 Live syntax highlighting for markdown editing

Posted by Igor Bondarenko <je...@gmail.com>.
- **status**: in-progress --> review
- **Comment**:

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)



---

** [tickets:#7897] Live syntax highlighting for markdown editing**

**Status:** review
**Milestone:** unreleased
**Labels:** 42cc sf-8 ux sf-current 
**Created:** Mon Jun 15, 2015 02:30 PM UTC by Dave Brondsema
**Last Updated:** Tue Jun 16, 2015 09:02 AM UTC
**Owner:** Igor Bondarenko

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


---

Sent from forge-allura.apache.org because dev@allura.apache.org is subscribed to https://forge-allura.apache.org/p/allura/tickets/

To unsubscribe from further messages, a project admin can change settings at https://forge-allura.apache.org/p/allura/admin/tickets/options.  Or, if this is a mailing list, you can unsubscribe from the mailing list.

[allura:tickets] #7897 Live syntax highlighting for markdown editing

Posted by Igor Bondarenko <je...@gmail.com>.
FYI, I've included Font Awesome here, since SimpleMDE relies on it


---

** [tickets:#7897] Live syntax highlighting for markdown editing**

**Status:** review
**Milestone:** unreleased
**Labels:** 42cc sf-8 ux sf-current 
**Created:** Mon Jun 15, 2015 02:30 PM UTC by Dave Brondsema
**Last Updated:** Tue Jul 14, 2015 03:03 PM UTC
**Owner:** Igor Bondarenko


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


---

Sent from forge-allura.apache.org because dev@allura.apache.org is subscribed to https://forge-allura.apache.org/p/allura/tickets/

To unsubscribe from further messages, a project admin can change settings at https://forge-allura.apache.org/p/allura/admin/tickets/options.  Or, if this is a mailing list, you can unsubscribe from the mailing list.

[allura:tickets] #7897 Live syntax highlighting for markdown editing

Posted by Igor Bondarenko <je...@gmail.com>.
- **status**: in-progress --> review
- **Comment**:

Closed #832. `{allura,sftheme}:ib/7897`

Created [#7941] to add some space between bullet lists and the next section



---

** [tickets:#7897] Live syntax highlighting for markdown editing**

**Status:** review
**Milestone:** unreleased
**Labels:** 42cc sf-8 ux 
**Created:** Mon Jun 15, 2015 02:30 PM UTC by Dave Brondsema
**Last Updated:** Tue Jul 28, 2015 02:01 PM UTC
**Owner:** Igor Bondarenko


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


---

Sent from forge-allura.apache.org because dev@allura.apache.org is subscribed to https://forge-allura.apache.org/p/allura/tickets/

To unsubscribe from further messages, a project admin can change settings at https://forge-allura.apache.org/p/allura/admin/tickets/options.  Or, if this is a mailing list, you can unsubscribe from the mailing list.

[allura:tickets] #7897 Live syntax highlighting for markdown editing

Posted by Igor Bondarenko <je...@gmail.com>.
- **status**: in-progress --> review
- **Comment**:

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](https://github.com/NextStepWebs/simplemde-markdown-editor/commit/c7dd040ed32e06ff0e7332cf2a79fdb75356dcb1) in the version 1.4.0, so I've updated our dependencies.




---

** [tickets:#7897] Live syntax highlighting for markdown editing**

**Status:** review
**Milestone:** unreleased
**Labels:** 42cc sf-8 ux sf-current 
**Created:** Mon Jun 15, 2015 02:30 PM UTC by Dave Brondsema
**Last Updated:** Thu Jul 23, 2015 10:07 PM UTC
**Owner:** Igor Bondarenko


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


---

Sent from forge-allura.apache.org because dev@allura.apache.org is subscribed to https://forge-allura.apache.org/p/allura/tickets/

To unsubscribe from further messages, a project admin can change settings at https://forge-allura.apache.org/p/allura/admin/tickets/options.  Or, if this is a mailing list, you can unsubscribe from the mailing list.

[allura:tickets] #7897 Live syntax highlighting for markdown editing

Posted by Dave Brondsema <da...@brondsema.net>.
- **status**: review --> in-progress
- **Comment**:

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



---

** [tickets:#7897] Live syntax highlighting for markdown editing**

**Status:** in-progress
**Milestone:** unreleased
**Labels:** 42cc sf-8 ux sf-current 
**Created:** Mon Jun 15, 2015 02:30 PM UTC by Dave Brondsema
**Last Updated:** Wed Jul 22, 2015 12:32 PM UTC
**Owner:** Igor Bondarenko


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


---

Sent from forge-allura.apache.org because dev@allura.apache.org is subscribed to https://forge-allura.apache.org/p/allura/tickets/

To unsubscribe from further messages, a project admin can change settings at https://forge-allura.apache.org/p/allura/admin/tickets/options.  Or, if this is a mailing list, you can unsubscribe from the mailing list.

[allura:tickets] #7897 Live syntax highlighting for markdown editing

Posted by Igor Bondarenko <je...@gmail.com>.
- **status**: in-progress --> review
- **Comment**:

Closed #820. Force-pushed `ib/7897`



---

** [tickets:#7897] Live syntax highlighting for markdown editing**

**Status:** review
**Milestone:** unreleased
**Labels:** 42cc sf-8 ux sf-current 
**Created:** Mon Jun 15, 2015 02:30 PM UTC by Dave Brondsema
**Last Updated:** Thu Jul 09, 2015 10:26 PM UTC
**Owner:** Igor Bondarenko


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


---

Sent from forge-allura.apache.org because dev@allura.apache.org is subscribed to https://forge-allura.apache.org/p/allura/tickets/

To unsubscribe from further messages, a project admin can change settings at https://forge-allura.apache.org/p/allura/admin/tickets/options.  Or, if this is a mailing list, you can unsubscribe from the mailing list.

[allura:tickets] #7897 Live syntax highlighting for markdown editing

Posted by Dave Brondsema <da...@brondsema.net>.
- **labels**: 42cc, sf-8, ux, sf-current --> 42cc, sf-8, ux



---

** [tickets:#7897] Live syntax highlighting for markdown editing**

**Status:** review
**Milestone:** unreleased
**Labels:** 42cc sf-8 ux 
**Created:** Mon Jun 15, 2015 02:30 PM UTC by Dave Brondsema
**Last Updated:** Mon Jul 27, 2015 01:51 PM UTC
**Owner:** Igor Bondarenko


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


---

Sent from forge-allura.apache.org because dev@allura.apache.org is subscribed to https://forge-allura.apache.org/p/allura/tickets/

To unsubscribe from further messages, a project admin can change settings at https://forge-allura.apache.org/p/allura/admin/tickets/options.  Or, if this is a mailing list, you can unsubscribe from the mailing list.

[allura:tickets] Re: #7897 Live syntax highlighting for markdown editing

Posted by Dave Brondsema <da...@brondsema.net>.
Works correct for me now.  Not sure what was happening yesterday.


---

** [tickets:#7897] Live syntax highlighting for markdown editing**

**Status:** in-progress
**Milestone:** unreleased
**Labels:** 42cc sf-8 ux sf-current 
**Created:** Mon Jun 15, 2015 02:30 PM UTC by Dave Brondsema
**Last Updated:** Thu Jul 16, 2015 08:41 PM UTC
**Owner:** Igor Bondarenko


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


---

Sent from forge-allura.apache.org because dev@allura.apache.org is subscribed to https://forge-allura.apache.org/p/allura/tickets/

To unsubscribe from further messages, a project admin can change settings at https://forge-allura.apache.org/p/allura/admin/tickets/options.  Or, if this is a mailing list, you can unsubscribe from the mailing list.

[allura:tickets] Re: #7897 Live syntax highlighting for markdown editing

Posted by Igor Bondarenko <je...@gmail.com>.
> * 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 the mode?


---

** [tickets:#7897] Live syntax highlighting for markdown editing**

**Status:** in-progress
**Milestone:** unreleased
**Labels:** 42cc sf-8 ux sf-current 
**Created:** Mon Jun 15, 2015 02:30 PM UTC by Dave Brondsema
**Last Updated:** Thu Jul 16, 2015 08:41 PM UTC
**Owner:** Igor Bondarenko


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


---

Sent from forge-allura.apache.org because dev@allura.apache.org is subscribed to https://forge-allura.apache.org/p/allura/tickets/

To unsubscribe from further messages, a project admin can change settings at https://forge-allura.apache.org/p/allura/admin/tickets/options.  Or, if this is a mailing list, you can unsubscribe from the mailing list.

[allura:tickets] Re: #7897 Live syntax highlighting for markdown editing

Posted by Igor Bondarenko <je...@gmail.com>.
Sure. Let's make it as good as we can! 

I've created #823 and #824 (for the last point) on our side


---

** [tickets:#7897] Live syntax highlighting for markdown editing**

**Status:** in-progress
**Milestone:** unreleased
**Labels:** 42cc sf-8 ux sf-current 
**Created:** Mon Jun 15, 2015 02:30 PM UTC by Dave Brondsema
**Last Updated:** Thu Jul 16, 2015 08:41 PM UTC
**Owner:** Igor Bondarenko


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


---

Sent from forge-allura.apache.org because dev@allura.apache.org is subscribed to https://forge-allura.apache.org/p/allura/tickets/

To unsubscribe from further messages, a project admin can change settings at https://forge-allura.apache.org/p/allura/admin/tickets/options.  Or, if this is a mailing list, you can unsubscribe from the mailing list.

[allura:tickets] Re: #7897 Live syntax highlighting for markdown editing

Posted by Igor Bondarenko <je...@gmail.com>.
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](https://github.com/NextStepWebs/simplemde-markdown-editor/blob/master/source%20files/simplemde.js#L315-L373) 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.



---

** [tickets:#7897] Live syntax highlighting for markdown editing**

**Status:** in-progress
**Milestone:** unreleased
**Labels:** 42cc sf-8 ux sf-current 
**Created:** Mon Jun 15, 2015 02:30 PM UTC by Dave Brondsema
**Last Updated:** Thu Jul 09, 2015 10:26 PM UTC
**Owner:** Igor Bondarenko

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


---

Sent from forge-allura.apache.org because dev@allura.apache.org is subscribed to https://forge-allura.apache.org/p/allura/tickets/

To unsubscribe from further messages, a project admin can change settings at https://forge-allura.apache.org/p/allura/admin/tickets/options.  Or, if this is a mailing list, you can unsubscribe from the mailing list.

[allura:tickets] Re: #7897 Live syntax highlighting for markdown editing

Posted by Dave Brondsema <da...@brondsema.net>.
In those screenshots, take note that the gray background for `<pre>` is hard to see on some monitors.  Make sure you see it :)


---

** [tickets:#7897] Live syntax highlighting for markdown editing**

**Status:** review
**Milestone:** unreleased
**Labels:** 42cc sf-8 ux 
**Created:** Mon Jun 15, 2015 02:30 PM UTC by Dave Brondsema
**Last Updated:** Mon Jul 27, 2015 02:55 PM UTC
**Owner:** Igor Bondarenko


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


---

Sent from forge-allura.apache.org because dev@allura.apache.org is subscribed to https://forge-allura.apache.org/p/allura/tickets/

To unsubscribe from further messages, a project admin can change settings at https://forge-allura.apache.org/p/allura/admin/tickets/options.  Or, if this is a mailing list, you can unsubscribe from the mailing list.

[allura:tickets] Re: #7897 Live syntax highlighting for markdown editing

Posted by Dave Brondsema <da...@brondsema.net>.
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)




---

** [tickets:#7897] Live syntax highlighting for markdown editing**

**Status:** review
**Milestone:** unreleased
**Labels:** 42cc sf-8 ux 
**Created:** Mon Jun 15, 2015 02:30 PM UTC by Dave Brondsema
**Last Updated:** Mon Jul 27, 2015 02:55 PM UTC
**Owner:** Igor Bondarenko


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


---

Sent from forge-allura.apache.org because dev@allura.apache.org is subscribed to https://forge-allura.apache.org/p/allura/tickets/

To unsubscribe from further messages, a project admin can change settings at https://forge-allura.apache.org/p/allura/admin/tickets/options.  Or, if this is a mailing list, you can unsubscribe from the mailing list.