766658 - Kuma: Editor - Replace current default toolbar with one that sucks less

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: Wiki pages, defect)

Description

[Eric Shepherd [:sheppy]]

The current default toolbar is not awesome. Instead of trying to get a toolbar editor built, let's get the default one just better for now and worry about the rest later.

I will follow up on this bug with the toolbar configuration we want shortly.

Comment 1

[Eric Shepherd [:sheppy]]

Attachment: Our CKEditor config from MindTouch wiki

Attached a copy of the CKEditor configuration from MindTouch. This is not necessarily what we want to use! But it's a point of reference. I'm going to work on blending this with the stuff I like about the one we currently have on Kuma next.

Comment 2

[Eric Shepherd [:sheppy]]

Attachment: First draft of toolbar layout

Here's a first draft of the layout I think I'd like for the toolbar; would be nice to see what it looks like (hard to say when "drawing" it using text names for buttons).

Comment 3

[Eric Shepherd [:sheppy]]

I intentionally left save and cancel and the like out of the new toolbar layout since they're available right above it. No point reproducing them.

Comment 4

[John Karahalis [:openjck]]

What would the "Preview" button do?

Comment 5

[David Walsh :davidwalsh]

Preview button does what it currently does -- opens the content in a new page;  there would be no change here.

Comment 6

[John Karahalis [:openjck]]

Awesome. Does the main preview button (http://i.imgur.com/VZKYt.png) do the same thing? Just asking because Sheppy mentioned not duplicating existing buttons in the WYSIWYG.

Comment 7

[David Walsh :davidwalsh]

Yes, they both do the exact same thing.

Comment 8

[John Karahalis [:openjck]]

Cool, thanks for the clarification. Sheppy: Thoughts?

Comment 9

[John Karahalis [:openjck]]

cc'ing Sheppy. Sheppy: see above.

Comment 10

[Eric Shepherd [:sheppy]]

Missed that. Remove the preview button from my layout then! I don't want a dupe!

Comment 12

[[github robot]]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/4eb28973f56a98ed36453c61e8cd43536522970c
fix bug 766658 - Customized editor toolbar to Sheppy's liking

https://github.com/mozilla/kuma/commit/ce7dec39a5764f53754d8dd1cb7f1a306d9c3f1f
Merge pull request #296 from darkwing/replace-editor-toolbar-766658

fix bug 766658 - Customized editor toolbar to Sheppy's liking

Comment 13

[John Karahalis [:openjck]]

Looks awesome. Just a couple of minor things.

* We should remove the preview button as per comment 10.
* Can we enable spelling-as-you-type by default?
* What is the difference between code, pre, and source formatting?

Comment 14

[Eric Shepherd [:sheppy]]

(In reply to John Karahalis [:openjck] from comment #13)
> Looks awesome. Just a couple of minor things.
> 
> * We should remove the preview button as per comment 10.

Yes.

> * Can we enable spelling-as-you-type by default?

I'd rather not; we use a lot of API names that cause spurious spelling error indicators that are distracting.

> * What is the difference between code, pre, and source formatting?

code is <code>... that is, an inline code style.
pre is <pre> ... for blocks of code, like large inline code samples
source puts the editor into source mode, so you can edit the article's raw HTML source.

Comment 15

[potappo]

For Translation UI, the maximize button is needed.

When localizers translate long paragraph, they may require large translation area, even if the original content isn't shown for that reason.

Comment 16

[Eric Shepherd [:sheppy]]

Potappo: That's great feedback.

David, can we add the maximize button to the far right end of the top row of the toolbar, please?

Comment 17

[John Karahalis [:openjck]]

> I'd rather not; we use a lot of API names that cause spurious spelling error
> indicators that are distracting.

Understood. It's unfortunate that this gets in the way of automatic spell checking. Do you see many spelling errors?

> David, can we add the maximize button to the far right end of the top row of the toolbar,
> please?

David: What would happen if a user clicked this on the Translation page? Would the WYSIWYG fill the screen, hiding the source document? If so, we might want to consider supporting a full-screen view for the entire Translation page (pending feedback from potappo and Sheppy).

Comment 18

[Eric Shepherd [:sheppy]]

(In reply to John Karahalis [:openjck] from comment #17)
> > I'd rather not; we use a lot of API names that cause spurious spelling error
> > indicators that are distracting.
> 
> Understood. It's unfortunate that this gets in the way of automatic spell
> checking. Do you see many spelling errors?

Yes; unfortunately, we pretty much have to live with it. All the squiggles on API names just make as-you-type spell checking completely useless. You learn to simply ignore them.

Perhaps someday we can come up with a way to automatically add API names to the dictionary. That'd be pretty cool. In fact, I'm going to open a bug on it as a distant future crazy idea.

> 
> > David, can we add the maximize button to the far right end of the top row of the toolbar,
> > please?
> 
> David: What would happen if a user clicked this on the Translation page?
> Would the WYSIWYG fill the screen, hiding the source document? If so, we
> might want to consider supporting a full-screen view for the entire
> Translation page (pending feedback from potappo and Sheppy).

Comment 19

[John Karahalis [:openjck]]

(In reply to Eric Shepherd [:sheppy] from comment #18)
> Yes; unfortunately, we pretty much have to live with it. All the squiggles
> on API names just make as-you-type spell checking completely useless. You
> learn to simply ignore them.
> 
> Perhaps someday we can come up with a way to automatically add API names to
> the dictionary. That'd be pretty cool. In fact, I'm going to open a bug on
> it as a distant future crazy idea.

Agreed. The only real solution is for API names to be recognized. Thanks for opening bug 767979!

Comment 20

[[github robot]]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/7f9ac4690dd3e4313873580ae7b79d0b4b9793d6
fix bug 766658 - Removing heading prefixes and updated styles box

https://github.com/mozilla/kuma/commit/d6e2e1eb8ae87f481dd589c25494bf3d1f42745d
Merge pull request #306 from darkwing/editor-update-766658

fix bug 766658 - Removing heading prefixes and updated styles box

Comment 21

[John Karahalis [:openjck]]

Potappo: David added a translation button. Please try it out at the following address and let us know if it works for you.

NOTE: Please do not actually save this translation. If you do, the change will go live when we launch the updated MDN. 

https://developer-new.mozilla.org/en-US/docs/HTML/HTML5$translate?tolocale=fy-NL

Comment 22

[John Karahalis [:openjck]]

Correction: David added a *full screen* button.

Comment 23

[potappo]

Attachment: fullscreen edit mode screenshot

The toolbar should be stretched to the edit box size.

Comment 24

[David Walsh :davidwalsh]

What browser is this?  Firefox and Chrome show full screen on the translate page for me.

Comment 25

[John Karahalis [:openjck]]

I noticed the same problem in Firefox.

Steps to repeat:
1. Load this page: https://developer-new.mozilla.org/en-US/docs/HTML/HTML5$translate?tolocale=fy-NL
2. Scroll down until the top of the WYSIWYG has a tapered white border.
3. Press the fullscreen button. Notice problem.
4. Scroll up until the tapered border disappears. Notice problem is gone.

Comment 26

[John Karahalis [:openjck]]

Reopened due to comment 23 and comment 25.

Comment 27

[Eric Shepherd [:sheppy]]

Should this be moved into a new bug (see comments 23-25)?

Comment 28

[John Karahalis [:openjck]]

Yeah, that's a good point. Thanks, Sheppy. Opened bug 780257.