Replace the Markdown editor with a WYSIWYG #151
Comments
|
"Why complicate something..." The current implementation is simple, while the user interface is complex. It is a complex implementation to program a simple user interface. Given a small software development staff, complex implementations tend to be put on hold in favor of what can be done in short order. That aside, it could be possible to realize this with a two column view showing both editor window and preview window side-by-side. Sort of like this: However that two column interface would never work for mobile devices, in which case the back and forth method is still the only thing I can think of. The only alternative I can dream up is a full WYSIWYG editor with no different between preview and editing modes. We're not so far from that with the buttons that currently exist to inject the markdown (the user really doesn't need to know any markdown at present). However, the buttons would have to operate in a preview-mode fashion. I'm unaware of any open source markdown editors that presently do this. It'd be a large coding endeavor. If anyone finds an open source project that operates a full editor in preview mode and saves markdown in the backend, that'd be super nice. |
|
@ebarry two column layout should be fairly easy to implement, with gotchas on mobile. The ability to render markdown as it is being edited? I don't have any good ideas for that. I can't remember the last time I saw that sort of capability outside a dedicated document editor like MS Word, LibreOffice Writer, or various rich text editors. I've never seen it done on the web as I can recall. |
|
Side by side editing in Markdown Pad looks pretty slick-- it has formatting buttons and a live preview. pretty nice. It also helps someone learn to use markdown-- so maybe when they use the mobile interface they'll remember a few things. |
|
This would be so helpful! Being able to see the changes as you edit and On Tue, Aug 26, 2014 at 9:56 AM, mathew lippincott <notifications@github.com
|
|
VueJS is a nice side-by-side markdown editor that should be easy to incorporate. MIT Licensed, so we don't have to worry about that. We could get into weird issues here because we have a front-end markdown editor for preview mode (marked.js) which is separate from the markdown to HTML rendering gem used by Ruby (rdiscount). That leads to #139 It might be better to toss out the Ruby markdown renderer and perform all markdown rendering client-side, which would take care of #139. Based on the example of VueJS, it is pretty easy to add or remove the editor: |
|
@jywarren Any opinions regarding the removal of RDiscount and replacing the editor you've worked so hard on thus far with Vue? We might need to readd functions like embedding YouTube and such. I'm also unsure how well the Vue editor will support arbitrary HTML, which might be a good thing given the IFRAME discussion in other threads ;) |
|
I want to re-open this discussion in light of Mozilla's new Open Science forum, which has a great system implemented for the "dual display" |
|
love the look of this. Can we has it? @lizbarry http://twitter.com/lizbarry On Wed, Oct 8, 2014 at 1:57 PM, mathew lippincott notifications@github.com
|
|
I'm not sure that two column view is any different than markdownpad or vuejs. @mathewlippincott Can you elaborate on where to find source code for it and why it might be an improvement over the previous recommendations in this thread? |
|
I don't know where the code is. their bug reporting goes to a codeless repository: |
|
http://forum.mozillascience.org/ can't find a repo link or anything |
|
asked on twitter |
|
Hi @btbonval and @jywarren , a WYSIWYG editor seems like a major (yet basic) improvement for streamlining community contributions to PL research notes and the wiki knowledge base. There also seem to be clear next steps as described in this thread. Can you guys create an estimate of hours that it would take to do this so we can fundraise for it? |
|
Minimal effort, so with testing and allowing for unknown unknowns, I'd guess 4 worker hours. That should be a bit of a worst case estimate. There's an unaddressed question of whether or not to discard the Ruby-based markdown renderer and leave markdown rendering entirely client based. That is brought up in #139 , but for some reason none of the people in that ticket's conversation talk here and vice versa. The two are highly related. |
|
PS you going to use bounty source to put a value on this ticket? I highly recommend it. |
|
@btbonval i am only familiar with setting up contracts with individuals. Does Public Lab have bounty source set up? |
|
@ebarry Bountysource integrates into GitHub. This ticket will be marked with a dollar amount and have a link to BountySource (and BountySource will link to this ticket). They basically indexed github: I thought @jywarren set up an account to post some bounties on bountysource, but if he did, I don't think he posted any for PublicLab. Once you have an account, here's the page to add a bounty to this ticket: Here's a page to manage how BountySource modifies the tickets once bounties are assigned: |
|
Is there any way we can prioritize this? I'm editing long, image-heavy wiki pages and it is driving me completely nuts to
This is a high priority feature - not having a live preview or WYSIWYG is inhibiting the usability of our site for both beginners and expert users, limiting community growth, and skewing our contributor demographics. |
|
Liz has brought this up in person a few times recently; I wasn't aware it On Thu, Feb 5, 2015 at 3:10 PM, mathew lippincott notifications@github.com
|
|
a few more options: http://hallojs.org/demo/markdown/ |
|
Hallo looks like a decent solution that has a toolbar and is two-up. Definitely trumps VueJS. I seem to recall that @jywarren added some custom markdown components. We should take a look at the Hallo code to see if it would be easy to add in a few extra options, although I'd personally rather keep with an upstream distribution rather than trying to keep a fork up to date. Softish Pen doesn't have an obvious UI. It's there, but you have to highlight before it's apparent. I do like the button that toggles markdown markings on/off. I'm not sure how the two-up choices differ from VueJS and each other, but they all seem inferior to Hallo due to the lack of a toolbar. |
|
Hallo runs on jQuery UI, a pretty standard JS package. It isn't specifically for editing Markdown, instead it is for editing the DOM. So the example that @mathewlippincott found of Markdown actually renders the DOM element as HTML. A separate library converts the HTML to Markdown, and it appears to be this one: https://github.com/domchristie/to-markdown More info about the discussion of that example is here: Basically the example is there and isn't documented or referenced outside of the example's readable (but uncommented) source code. |
|
We could use the to-markdown function with any WYSIWYG HTML editor in the same way as Hallo, but Hallo happens to provide a nice example of how to do it. |
|
I'm glad it looks pretty doable! I was impressed when I found it. interesting that they do exaclty what you expected we'd have to do-- convert to HTML and back again. |
|
Honestly this is exactly why I said it's hard to find a WYSIWYG Markdown editor. They all kind of do this. This does raise the question of whether we even care to perform the HTML to Markdown conversion step. @jywarren has some good arguments in favor of keeping Markdown for simplicity (and some folks like raw Markdown). I think Markdown limits the structure that can be created in HTML, which I think is good. Even if we went straight HTML, keeping it simple might suggest performing a HTML > Markdown > HTML conversion, but then why not just stop the process at HTML > Markdown as noted above? I'm not seeing any particular reasons to move to HTML. Maybe we only discussed that in the email thread. Divergent discussions :( |
|
+1 keeping markdown if we can't think of a reason not to; the existence of On Fri, Feb 6, 2015 at 8:30 PM, Bryan Bonvallet notifications@github.com
|
|
@manleyjster suggestions from the Organizers e-mail thread: Hallo.js - WYSIWYG Markdown editor CKEditor - IMO the state-of-the-art for HTML text editors |
jywarren
changed the title
|
Hi, This has been listed under gsoc projects can this be taken.. I'm really interested in doing this. |
|
Yes! I think were going to try for a 2-up markdown WYSIWYG editor as
|
|
Just to be clear there are no 2 up WYSIWYG editors for markdown. Either you I think the current preference is for WYSIWYG but not 2 up. This assumes 2 up means raw and renders versions in a side by side preview,
|
|
Oops, indeed I misspoke!
|
btbonval
changed the title
jywarren
added
the
enhancement
|
Folding into Rich Editor project, thanks! https://github.com/publiclab/PublicLab.Editor/ |
A text editor that shows formatting is needed!
Viewing and editing text in markdown is a total accessibility issue for new users that may or may not be familiar with it. Even after learning how it works, editing text is with it is still unnecessarily difficult. With image heavy text like the curriculum I am creating, switching between the preview and edit mode is difficult and doesn't allow me to see how the document will turn out. It requires endless back and forth to make small edits. Why complicate something that we want to make easy for anyone to use?
The text was updated successfully, but these errors were encountered: