Adding bootstrap-markdown editor #6551

ghost · 2015-11-17T21:37:42Z

Adding Bootstrap Markdown editor to publisher.

diaspora-code-review · 2015-11-17T21:37:50Z

app/assets/javascripts/helpers/markdown_editor.js

+    options.onPreview = previewCallback;
+  }
+  else{
+    options.disabledButtons = ["cmdPreview"]


Missing semicolon.

ghost · 2015-11-17T21:39:25Z

@jhass: I'm having a problem with the asset pipeline on this:

Do you know where it comes from?

jaywink · 2015-11-18T06:43:08Z

This would be pretty awesome if you can pull it off! The markdown variant seems like the correct one, though I the preview should probably be disabled since it probably wont be able to render all the codes diaspora supports? And we already have a preview.

This would especially help new users to settle in who have never heard about markdown.

ghost · 2015-11-18T08:44:46Z

I the preview should probably be disabled since it probably wont be able to render all the codes diaspora supports?

I plan to use our rendering engine. One can sepcify a rendering function.

This would especially help new users to settle in who have never heard about markdown.

Yep, and it would clearly easier markdown formatting on mobile.

ghost · 2015-11-18T09:13:36Z

I think my problem could be related to this. Since there seems to be no way to prevent bundler to perform dependency resolution, I'll try the solution in the last answer tonight.
Edit: Ok, nice, the fix works!

diaspora-code-review · 2015-11-18T10:09:48Z

config/initializers/assets.rb

@@ -2,6 +2,10 @@
 #   licensed under the Affero General Public License version 3 or later.  See
 #   the COPYRIGHT file.

+Rails.configuration.assets.paths.reject! do |path|
+  path.include?('rails-assets-bootstrap') && !path.include?('rails-assets-bootstrap-markdown')


Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.

Flaburgan · 2015-11-18T10:13:44Z

So this looks like an attempt to solve #5801. Is this conform to what we said there, == a publisher close to what github does (a write tab, not wisiwig, and a preview tab)?

ghost · 2015-11-18T10:14:31Z

Yup! :)

jhass · 2015-11-18T16:53:48Z

Nothing against a preview tab, but these buttons always look so clunky and messy :/

jhass · 2015-11-18T16:55:02Z

config/initializers/assets.rb

@@ -2,6 +2,10 @@
 #   licensed under the Affero General Public License version 3 or later.  See
 #   the COPYRIGHT file.

+Rails.configuration.assets.paths.reject! do |path|


Please add a comment explaining this hack.

Sure. Ninja commit from work ;)

jhass · 2015-11-18T16:56:31Z

Also make sure to render the preview with our existing markdown-it pipeline, if it uses a different renderer it's useless.

ghost · 2015-11-18T17:25:08Z

Nothing to worry, preview will be rendered with our engine.

goobertron · 2015-11-18T19:02:54Z

Will be great if you can get this working! Just a thought, to save visual clutter and space, could you have the format icons spaced along a single bar rather than each being in a button? Something like this:

It might even be best to merge this bar with the notification about using Markdown, to save space.

I'd also suggest streamlining the new preview function with the existing one. There was discussion before about changing the preview button to a tab, which seems a good idea to me - but whether or not you decide to tackle that in this PR, I don't think there's a need for a second preview button.

Thanks for your work!

DeadSuperHero · 2015-11-18T19:14:03Z

That looks great, goob! I agree that a simple formatting bar might do the
trick here.

On Wed, Nov 18, 2015 at 1:03 PM, goob [email protected] wrote:

Will be great if you can get this working! Just a thought, to save visual
clutter and space, could you have the format icons spaced along a single
bar rather than each being in a button? Something like this:

[image: _format]
https://cloud.githubusercontent.com/assets/2530168/11250958/e0fb08a2-8e26-11e5-8a83-b706ec7e8e8f.png

It might even be best to merge this bar with the notification about using
Markdown, to save space.

I'd also suggest streamlining the new preview function with the existing
one. There was discussion before about changing the preview button to a
tab, which seems a good idea to me - but whether or not you decide to
tackle that in this PR, I don't think there's a need for a second preview
button.

Thanks for your work!

—
Reply to this email directly or view it on GitHub
#6551 (comment).

ghost · 2015-11-18T19:40:40Z

It might even be best to merge this bar with the notification about using Markdown, to save space.

I thought about doing this. But I fear it could be controversial.

I'd also suggest streamlining the new preview function with the existing one. There was discussion before about changing the preview button to a tab, which seems a good idea to me

Yep, that's planned ;)

I don't think there's a need for a second preview button.

Current existing one will be annihilated! >:D
Second shot:

#6537 will have to get merged before I can continue working on the preview function.

ghost · 2015-11-18T20:05:23Z

Here is a design proposition based on what @goobertron proposed:

I don't really like it. I find it messy and I fear about the risks of misclick. Particularly on a mobile phone.

Flaburgan · 2015-11-18T20:10:21Z

I would prefer to see the buttons at the bottom to not distract the user, but we then need a way to clearly differentiate what is markdown insert and what is post addition (polls, picture, location).

ghost · 2015-11-18T20:11:42Z

I would prefer to see the buttons at the bottom to not distract the user

I can't choose that, unhopefully. Besides, Having the formatting buttons at the top pretty a standard.

denschub · 2015-11-18T20:34:26Z

I have to agree with Jonne at

Nothing against a preview tab, but these buttons always look so clunky and messy :/

Idea: One could use the "Markdown" link that's already there to trigger the editor to load.

ghost · 2015-11-18T20:37:15Z

Idea: One could use the "Markdown" link that's already there to trigger the editor to load.

My opinion is that it has to be easy for inexperimented users first. So buttons have to be displayed by default.

jaywink · 2015-11-18T20:51:11Z

My opinion is that it has to be easy for inexperimented users first. So buttons have to be displayed by default.

I agree our default should be "common" users. Or have a setting to switch the default. But default for new users should be to show the buttons.

Flaburgan · 2015-11-18T20:52:58Z

Let's first see if we can make the buttons as subtle and integrated as possible. If that's still too much for used users, then we'll see what we can do :)

denschub · 2015-11-18T20:53:17Z

"Common users", at least on Geraspora, do not use any formatting but only publish plain text posts. ;)

jaywink · 2015-11-18T20:55:17Z

"Common users", at least on Geraspora, do not use any formatting but only publish plain text posts. ;)

Maybe they don't know how to format posts.

Flaburgan · 2015-11-18T21:28:11Z

Here is how I see the publisher (note that the images have a width of 650px so the mockups work on all screens):

First proposition:

Writing

Reading

Second proposition:

Writing

Reading

About the second proposition:
To move the poll, upload and location icon on the top right allow to:

Clearly separate them from the "insert markdown" button, so no confusion for the user (we could even add text like "Insert markdown" and "attach content" to legend what the buttons are doing)
Allow to completely hide the bottom bar when previewing, we have imo a better idea about how the post will look like.
A down side is that it puts them away from the "publish" button, meaning the user is not encourage / remembered to use them.

ghost · 2015-11-18T21:31:39Z

Nope, @Flaburgan, your proposition won't be possible. I can't just place the buttons where I want because they are created by the plugin. So, the way it goes, I'd have to... rewrite the plugin. Plus, I explained that small buttons like on your mocks causes huge risks on misclick.

Flaburgan · 2015-11-18T21:33:31Z

@AugierLe42e my mockups describe how the publisher can look like, they don't include any technical constraint. And I think we should first imagine and design what would be the best, and then see what are the technical limitations.

ghost · 2015-11-18T21:34:32Z

@AugierLe42e my mockups describe how the publisher can look like, they don't include any technical constraint.

So, maybe that's not the right place ;)

Flaburgan · 2015-11-18T21:38:36Z

Yeah I should have created them when I opened #5801 but now it looks like this PR is an attempt to close this issue (thanks for that!) so I post them here.

We already have a preview button and we use our own render engine. So to not use the plugin to do that seems fine for me. I don't think my proposed design adds a lot more work ;)

svbergerem · 2016-08-11T23:45:15Z

After reloading the stream page when there is still some content in the publisher:

svbergerem · 2016-08-11T23:57:18Z

app/assets/stylesheets/stream_element.scss

@@ -63,10 +63,19 @@
 #main_stream .stream_element {
  padding: 10px;


You also added padding: 10px; to the .stream_element rule so I guess you can remove this here.

ghost · 2016-08-12T15:02:21Z

After reloading the stream page when there is still some content in the publisher:

I can't reproduce :/

svbergerem · 2016-08-12T15:12:33Z

I'm able to reproduce it with Firefox 48 and Firefox Developer (50.0a2 (2016-08-05)):

Go to the main stream.
Enter some text into the publisher.
Reload the page. (Hit F5)
Confirm the alert.

ghost · 2016-08-12T15:22:48Z

Adding bootstrap-markdown editor

svbergerem · 2016-08-12T21:55:24Z

Thank you! 👍

goobertron · 2016-08-13T12:02:32Z

Wow, thank you @AugierLe42e! A major UI improvement.

ghost · 2016-08-13T12:44:37Z

Thank you @goobertron 😄

diaspora-code-review reviewed Nov 17, 2015
View reviewed changes

diaspora-code-review reviewed Nov 18, 2015
View reviewed changes

jhass reviewed Nov 18, 2015
View reviewed changes

svbergerem reviewed Aug 11, 2016
View reviewed changes

Displaying the markdown editor on publisher

5c2e241

svbergerem merged commit 5c2e241 into diaspora:develop Aug 12, 2016

svbergerem pushed a commit that referenced this pull request Aug 12, 2016

Merge pull request #6551 from AugierLe42e/bootstrap-markdown

bf6af40

Adding bootstrap-markdown editor

ghost deleted the bootstrap-markdown branch August 12, 2016 21:54

svbergerem added this to the 0.6.0.0 milestone Aug 12, 2016

This was referenced Aug 12, 2016

Improve the publisher #5801

Closed

Post preview not working for some users #4326

Closed

4ndyD mentioned this pull request Sep 13, 2016

Add WYSIWYG editor to private messages #7097

Closed

		@@ -63,10 +63,19 @@
		#main_stream .stream_element {
		padding: 10px;

Adding bootstrap-markdown editor #6551

Adding bootstrap-markdown editor #6551

Conversation

ghost commented Nov 17, 2015 • edited by ghost Loading

diaspora-code-review Nov 17, 2015

Choose a reason for hiding this comment

ghost commented Nov 17, 2015

jaywink commented Nov 18, 2015

ghost commented Nov 18, 2015

ghost commented Nov 18, 2015

diaspora-code-review Nov 18, 2015

Choose a reason for hiding this comment

Flaburgan commented Nov 18, 2015

ghost commented Nov 18, 2015

jhass commented Nov 18, 2015

jhass Nov 18, 2015

Choose a reason for hiding this comment

ghost Nov 18, 2015

Choose a reason for hiding this comment

jhass commented Nov 18, 2015

ghost commented Nov 18, 2015

goobertron commented Nov 18, 2015

DeadSuperHero commented Nov 18, 2015

ghost commented Nov 18, 2015

ghost commented Nov 18, 2015

Flaburgan commented Nov 18, 2015

ghost commented Nov 18, 2015

denschub commented Nov 18, 2015

ghost commented Nov 18, 2015

jaywink commented Nov 18, 2015

Flaburgan commented Nov 18, 2015

denschub commented Nov 18, 2015

jaywink commented Nov 18, 2015

Flaburgan commented Nov 18, 2015

First proposition:

Second proposition:

ghost commented Nov 18, 2015

Flaburgan commented Nov 18, 2015

ghost commented Nov 18, 2015

Flaburgan commented Nov 18, 2015

svbergerem commented Aug 11, 2016

svbergerem Aug 11, 2016

Choose a reason for hiding this comment

ghost commented Aug 12, 2016 • edited by ghost Loading

svbergerem commented Aug 12, 2016

ghost commented Aug 12, 2016

svbergerem commented Aug 12, 2016

goobertron commented Aug 13, 2016

ghost commented Aug 13, 2016

ghost commented Nov 17, 2015 •

edited by ghost

Loading

ghost commented Aug 12, 2016 •

edited by ghost

Loading