Adding bootstrap-markdown editor #6551

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

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

app/assets/javascripts/helpers/markdown_editor.js

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


Missing semicolon.

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

app/assets/stylesheets/bootstrap-complete.scss

@@ -6,3 +6,4 @@
 // Plugins

 @import "bootstrap3-switch";
+@import "bootstrap-markdown/bootstrap-markdown.min";


Prefer single quoted strings

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 notifications@github.com 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.

svbergerem · 2016-08-12T00:01:18Z

app/views/publisher/_publisher.html.haml

-          #poll_creator_container
-            -# handlebars template
+          .poll-creator-container#poll_creator_container
+          -# handlebars template


I guess you can move this comment back in there.

svbergerem · 2016-08-12T00:08:56Z

config/locales/javascript/javascript.en.yml

+          list: "list text here"
+          quote: "quotation text here"
+          code: "code here"
+


trailing whitespaces

svbergerem · 2016-08-12T00:12:34Z

features/step_definitions/post_preview_steps.rb

 end

+Then /^I should see "([^"]*)" in the preview$/ do |text|
+  with_scope(".publisher-textarea-wrapper .md-preview") do
+    current_scope.should have_content(text)


expect(current_scope).to have_content(text)

svbergerem · 2016-08-12T00:13:35Z

features/step_definitions/post_preview_steps.rb

+
+Then /^I should not see "([^"]*)" in the preview$/ do |text|
+  with_scope(".publisher-textarea-wrapper .md-preview") do
+    current_scope.should_not have_content(text)


expect(current_scope).to_not have_content(text)

svbergerem · 2016-08-12T00:13:54Z

features/step_definitions/post_preview_steps.rb

+
+Then /^I should not be in preview mode$/ do
+  with_scope(".publisher-textarea-wrapper") do
+    current_scope.should_not have_css(".md-preview")


expect(current_scope).to_not have_content(".md-preview")

svbergerem · 2016-08-12T00:15:53Z

features/desktop/post_preview.feature

-      Then the preview should not be collapsed
-
+      And I preview the post
+      # Then the previewed should be collapsed


I think it would be great to keep the test.
Then the preview should not be collapsed

svbergerem · 2016-08-12T00:16:30Z

features/step_definitions/post_preview_steps.rb

+  with_scope("publisher-textarea-wrapper .md-preview") do
+    expect(find(".stream_element .collapsible", match: :first)).to have_css(".expander")
+  end
+end


You don't use this. (Drop it)

svbergerem · 2016-08-12T00:16:54Z

features/step_definitions/post_preview_steps.rb

 end

-Then /^the preview should not be collapsed$/ do
-  find(".post_preview").should_not have_selector('.collapsed')
-  find(".post_preview").should have_selector('.opened')


Keep it and just modify the test so it works with the new preview.

svbergerem · 2016-08-12T00:20:15Z

app/assets/javascripts/app/views/publisher_view.js

+      "author": app.currentUser ? app.currentUser.attributes : {},
+      "mentioned_people": mentionedPeople,
+      "photos": photos,
+      "frame_name": "status",


I'm unable to find this anywhere else so maybe we can just drop this?

svbergerem · 2016-08-12T00:20:37Z

spec/javascripts/app/views/preview_post_view_spec.js

+      "author": {},
+      "mentioned_people": [],
+      "photos": [],
+      "frame_name": "status",


drop this here, too

svbergerem · 2016-08-12T00:23:29Z

spec/javascripts/app/views/preview_post_view_spec.js

+      "location": ["", ""],
+      "interactions": {"likes": [], "reshares": [], "comments_count": 0, "likes_count": 0, "reshares_count": 0},
+      "poll": undefined
+    });


I heard factories are a thing now. ;) postWithPoll might fit.

Wow! Nice! How do you call it? Factories? :D

https://github.com/diaspora/diaspora/blob/develop/spec/javascripts/jasmine_helpers/factory.js#L184

spec/javascripts/app/views/poll_view_spec.js:4: this.view = new app.views.Poll({ model: factory.postWithPoll()});

I know. It was a joke but it seems I failed :(

svbergerem · 2016-08-12T00:25:17Z

spec/javascripts/app/views/publisher_view_spec.js

@@ -100,10 +112,10 @@ describe("app.views.Publisher", function() {
      });

      it("calls removePostPreview", function(){


"calls hidePreview"

svbergerem · 2016-08-12T00:27:16Z

spec/javascripts/helpers/markdown_editor_spec.js

+    this.$el = $("#fake-textarea");
+    Diaspora.I18n.language = "en";
+    var locale = {
+      // Localisation


localization

svbergerem · 2016-08-12T00:29:27Z

spec/javascripts/helpers/markdown_editor_spec.js

+      }
+      /* eslint-enable camelcase */
+    };
+    Diaspora.I18n.load(locale, "en", locale);


Regenerate fixtures, then you shouldn't need to set the locales manually: https://github.com/diaspora/diaspora/blob/develop/spec/javascripts/jasmine_helpers/SpecHelper.js#L161

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


        Displaying the markdown editor on publisher


        Merge pull request #6551 from AugierLe42e/bootstrap-markdown

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 changes

app/assets/javascripts/helpers/markdown_editor.js Outdated

options.onPreview = previewCallback;

}

else{

options.disabledButtons = ["cmdPreview"]

This comment has been minimized.

Sign in to view

Copy link

diaspora-code-review Nov 17, 2015

Missing semicolon.

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

app/assets/stylesheets/bootstrap-complete.scss Outdated

@@ -6,3 +6,4 @@

// Plugins

@import "bootstrap3-switch";

@import "bootstrap-markdown/bootstrap-markdown.min";

This comment has been minimized.

Sign in to view

Copy link

diaspora-code-review Nov 17, 2015

Prefer single quoted strings

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

jhass reviewed Nov 18, 2015
View changes

svbergerem reviewed Aug 11, 2016
View changes