Problem/Motivation

A decision has been made on #424400: Use BUEditor on drupal.org

However, BUeditor is very configurable, and some of us want to bikeshed a bit more on exactly which optional features should be included in the drupal.org deployment.

Proposed resolution

A custom minified javascript library should be created which implement only those features which are generally agreed to be useful to the drupal.org community.

Remaining tasks

  1. Decide which of the available optional features are desired.

  2. Compile a list of libraries that must be combined to implement the desired feature-set.

  3. Create an editor template file whose buttons activate the desired features.

  4. Write an input-filter help text that describes to the new user how to use these features.

  5. Deploy all of the above to the drupal.org website.

User interface changes

This affects most textarea form inputs on drupal.org.

API changes

None.

Original report

#122 by ufku on October 7, 2011 at 3:34pm

I suggest using the library bue.min.all.js instead of bue.min.default.js.
With an extra 7kb we get:

  • Indent(TAB), unindent(Shift TAB) and auto indent(ENTER) in the textarea. This enhances readability a lot.
  • Ctrl shortcuts. Accesskeys turn into ctrl shortcuts.
  • Tag auto completion. Closing tags are automatically inserted during typing.
  • Auto list item. Additional li tags can be inserted by just pressing Enter when the cursor is at the end of a list item.
  • Find & Replace in textarea
  • Cross-browser undo-redo

#132 by pillarsdotnet on October 7, 2011 at 6:49pm

We may also have unneeded libraries(IMCE?) in default.min.js. For reference, here is the list of library files.

Can you separate the list into three categories, please?

  1. Libraries which implement features we all have agreed are desirable.

  2. Libraries which implement features regarding which we are undecided or of mixed opinion.

  3. Libraries which implement features that are not wanted or needed at this time.

#134 by ufku on October 7, 2011 at 7:24pm

  1. Decided: markup, popup, misc (These are required for Image/Link dialogs)
  2. Undecided: preview, ctrl-shortcuts, undo-redo, auto-li, tab-indent, autocomplete
  3. Unwanted: imce, find&replace

I've moved preview to undecided because it always displays Full HTML and not usable in non-empty textareas. OTH, ajax preview which is aware of input filters requires an additional module.

Comments

ufku’s picture

I think most people would agree on including ctrl-shortcuts.

I'm not sure about the undo-redo library. It won't differ much for Firefox users as FF already handles textarea history correctly.
The difference would be the ability to undo word by word. FF's state saving period could be very long. It sometimes undoes paragraphs or the whole content whereas undo library saves states when one of "backspace, enter, space, del, V, X, comma, dot" keys is pressed or when content is entered by a button. This provides smaller undo-redo steps.

For users of other browsers the question is "Have i ever wanted to fix my browsers handling of textarea history?"

pillarsdotnet’s picture

Well, my point is this:

  • If Ctrl-Z works for a plain textarea, and

  • If BUeditor without the undo-redo library breaks Ctrl-Z handling, and

  • If BUeditor with the undo-redo library fixes the Ctrl-Z brokenness,

... then I think it's a no-brainer. The library should be installed to avoid the backlash from people (like me) who depend on that keystroke and who will scream bloody murder if it breaks.

ufku’s picture

When a button inserts some content (when textarea content is changed by javascript);
Chrome and Safari: the textarea history is lost. impossible to undo.
IE: undo is possible but the content added by js is strangely ignored(stays unchanged).

Undo-redo library not only fixes the above issues but also provides the missing per-textarea history for Chrome, Safari, and IE.

To conclude; bueditor without undo-redo library breaks textarea history in Chrome and Safari.

michelle’s picture

I'm +1 on using the un/redo library. It's adding miniscule amounts of loading time and provides a consistent UI.

In general, I'm +1 on any feature someone thinks is useful that:

a) does not significantly increase load time
b) does not interfere with normal use of the text area so it can be ignored if not wanted

Michelle

MGParisi’s picture

+1 on undo/redo and a tag that inserts [XXXXX] for the issue queue inserts
Preview, ctrl shortcuts are currently working so we can take those of the list

ufku’s picture

The editor was deployed while i was posting this. Here are the latest changes;

  • Increased image src input size.
  • Disabled IMCE support
  • Enabled Ctrl shortcuts
  • Enabled history and bound undo-redo to Ctrl-Z and Ctrl-Y

I think we also need a button for php code as it is used frequently on d.o.
@MGParisi, can you find/create a php icon that fits into the current set?

Are we keeping the preview button? Note that it is incapable of displaying filtered html such as code or php-code. It displays pure html which might be inconsistent with what the user gets after form submission. Also it won't work on textareas that has already html in it.

MGParisi’s picture

there is a code icon, its "<?"
I created it, Im not a graphic artist, but I think it fits in maybe too well because people are not noticing it. The shift shortcuts work but require shift alt, and not all of them have them (see the help button up top).
I took out the IMCE logic in the BUEditor Config, is there javascript code or something left?

+1 for image size field size increase.

Really we just need to have a process to do these things.
-The ticket [#XXXXX] functionality (Do we want this?)
-Undo/Redo
-and I don't understand ctrl support, shift+alt is annoying so ctrl only might be good if it does not get in the way of internationalization.

naught101’s picture

The <code> icon is good, but d.o comments also allow <?php ... ?> codeblocks too.

There is a "teaser break" icon on the comments, dunno if there's a way of removing that without removing it everywhere...

klonos’s picture

The php logo (in proper/smaller dimensions) seems good to you people for a php syntax highlight button?

MGParisi’s picture

Personally I would change the current coder icon to be <> and the php coder icon to be <?php

klonos’s picture

I have asked this here already, but was pointed here, so...

Have there been any thoughts, discussion, or perhaps a new issue already filed about adding a browse/attach button in the "Insert/edit image" pop-up? If such a thing was implemented, people wouldn't have to scroll up-n-down all the time in order to reach the "File attachments" section + it would feel like less steps are required to add an image.

From BUeditor's features list:

Insert/edit image: Inserts image html. Uses IMCE for file browsing, if it is installed. Editing a previously inserted image is possible if the html code of the image is selected with no extra characters.

I was more talking/thinking about duplicating the "File attachments" fieldset in the "Insert/edit image" pop-up. Can this be done?

dww’s picture

I have no problem with "Code" as the button label for inserting <code> tags. I think <> would be cryptic and no one would know WTF that means. I care less that all of these buttons are exactly the same width than I do that they make sense and people have a sense what they do without needing to just experiment or rely on the help.

I'd love a <del> button on here, too. That could be an S icon perhaps.

I'd be in favor of disabling the live preview entirely.

How often does anyone need/care about the break tag? Makes no sense on comments at all. Even on node bodies, almost nowhere does d.o use the core teaser for anything. I'd remove that entirely, too.

Might be nice to have a button to insert more blank <li></li> lines to an existing list. IMHO, could just label that <li> ;).

klonos’s picture

+1 for the <del> button. Googling a bit about it, shows that common images use T, A, S or abc.

michelle’s picture

I'm +1 on:

  • No teaser break
  • Disabling preview
  • Button for <li></li>
  • Code instead of <>

No opinion on Del... I can't say I've ever used it.

Michelle

PS: Formatting that post with the new bar was so nice. :)

dww’s picture

Assigned: Unassigned » dww
Issue tags: +bueditor

In the interest of momentum and progress, I just:

  • Removed teaser break
  • Removed preview (MGparisi agreed in IRC since it doesn't work in many cases)
  • Added strike-through (using the existing icon in the set)
  • Changed the label for <code> from <? to just "code"
  • Added a <?php %text% ?> button called "PHP"

In IRC there was concern about confusion over the proposed <li></li> button, especially if the label is just "li". I suggested "item" but no one jumped at that, either. Not wanting to take matters into my own hands too far, I held back on that. But, I'd still like to add something if we can figure out a good label/icon for it.

Instead of a single catch-all issue for everything, I'm wondering if separate issues for specific proposals would be easier to deal with. We can tag them all "bueditor" to keep track, but then the conversations would be easier to follow for interested parties and the status would be more useful.

wmostrey’s picture

The strike-through that was added doesn't work as expected. It replaces the selected word with the literal string <del>%TEXT</del> instead of keeping the selected word, as it does with bold and italic.

dww’s picture

Sorry about that, now fixed. Trivial typo when setting up the button...
asdgas
AHhhh.. ;)

Jeff Burnz’s picture

The one thing I would personally would LOVE would be a button for issue links that inserted this:

[#]

So I can just paste in the issue number, highlight and click...

naught101’s picture

Perhaps for the >li> button, just use the bulleted list icon with a green plus overlayed on it in the bottom right hand corner? Problem will be that people will press it when they're not in a list, or when they're inside an existing <li>.

re #18, dreditor has a function that takes a https://drupal.org/node/1302972 style url and replaces it with #1302972: Decide on a specific set of libraries, extensions, and icons for BUEditor as used on drupal.org. Something like that might be good.

naught101’s picture

TABLE! Please, table. Extremely useful, yet so annoying to code by hand. I didn't add it before, because I assumes from the screenshots that BUEditor didn't have it, but I just saw #240470: Adding table.

Also, I just noticed that BUEditor destroys a feature that I quite like in firefox - that textarea contents are retained after going to another page, then clicking back/forward to return to the half-completed textarea. This is quite useful if you need to grab a link or some text from your immediate history - just got back a few pages, copy what you want, go forward, paste. Unfortunately BUEditor clears the textbox when you return to the page (or at least, having it implemented causes the text box to be cleared...

klonos’s picture

Title: Decide on a specific set of libraries and extensions for BUeditor as used on drupal.org » Decide on a specific set of libraries and extensions for BUEditor as used on drupal.org

...minor edit to reflect actual capitalization in the editor's name ;)

michelle’s picture

Putting in a -1 for breaking into issues for each feature unless it's a feature that really requires a lot of discussion. That would make for a whole lot of tiny issues to follow. IMO, let's only break one off if it starts monopolizing this issue and getting a lot of back and forth.

As for the li button... ISTR there was a mention in one of these issues about a library that would add another set of them when you are at the end of your list and hit enter...

Michelle

ufku’s picture

Also, I just noticed that BUEditor destroys a feature that I quite like in firefox - that textarea contents are retained after going to another page, then clicking back/forward to return to the half-completed textarea. This is quite useful if you need to grab a link or some text from your immediate history - just got back a few pages, copy what you want, go forward, paste. Unfortunately BUEditor clears the textbox when you return to the page (or at least, having it implemented causes the text box to be cleared...

This happens to be a jquery bug where it resets the textarea on window unload. In order to observe the behavior, at least one input element must be inserted somewhere in the document before the textarea.

BUEditor does this for the text buttons, e.g. Code and PHP buttons in our editor.
A workaround is to set all the buttons as images.

naught101’s picture

Hrm, in that case, can we just have an image that contains the code/php text, like the B/I/ABC/H2/3/4 buttons?

dww’s picture

Yes, if we had icons with just the text as images, I'd be happy to swap those out.

ufku’s picture

StatusFileSize
new193 bytes
new195 bytes
new13.95 KB

I've updated the editor on http://bueditor-drupal.redesign.devdrupal.org (drupal/drupal, bananas/bananas)

  • Added icons for Code:ico_code.png and PHP:ico_code_php.png
  • Added new button: Issue number. Simply inserts [#], cursor being at the correct position
  • Added new button: Table. Asks for # of rows & columns and creates a table with header and body. Odd-even row classes are automatically added.
  • Removed: imce and preview libraries
  • Added: ctrl-shortcuts and undo-redo libraries

We can go on discussing further on this live example.

One can also test it locally by importing the attached editor file at admin/settings/bueditor/import. Icons will also be imported if a directory is specified in the form.

dww’s picture

Cool, thanks ufku.

Just had another idea for a button (at least for the next few weeks/months). Something that adds this link:

@%text%: Stop subscribing, start following!

;) So, you cut/paste a username, select it, click the button and you've added social pressure to help stop a nasty habit we've had to rely on for the last 10 years. ;) See #986616-54: Update Manager fails when the primary module/theme for a project lives in a subdirectory as an example...

klonos’s picture

If we had #42232: Help Maintainers Manage Issue Priority by Encouraging Voting implemented it would be so much easier to decide.

@dww: Hey Derek, just something to think about... adding another comment simply to ask people to stop posting useless comments is simply adding another (equally useless IMHO) comment. Don't you agree?

Please stay put as I am in the middle of proposing a solution to finally end both "subscribe" as well as "+1" comments (without extra comments being added in the issues). Please give me the time to get my case together and present it to the public. Thanx in advance ;)

michelle’s picture

It does add one more comment but I don't agree that it's useless because it will (hopefully!) avoid any more sub comments being added to that issue. So you get one "sub" and one "don't sub!" and then you're done instead of "sub" "sub" "sub"... and so on.

Looking forward to your solution. :)

Michelle

MGParisi’s picture

can we get #26, or would you all like to see an icon that is more universally accessible (Not English)

pillarsdotnet’s picture

StatusFileSize
new196 bytes
new451 bytes

Here's a couple of icons.

pillarsdotnet’s picture

StatusFileSize
new2.78 KB

And here's a replacement sprite image, with the code and php images in place:

BUEditor toolbar images.

MGParisi’s picture

I like < code > better then the current one, but think people with artistic ability (like pillars) can do abit better. The PHP is AWSOME!

pillarsdotnet’s picture

StatusFileSize
new2.35 KB

That's the first time I've been accused of artistic ability.

The PHP image in the sprite above was copied from http://static.php.net/www.php.net/favicon.ico

The <code> is 15pt Terminus font with -1pt inter-character spacing.

Nevertheless, here's an attempt to do "a bit better".

New "Code" and "PHP" buttons.

klonos’s picture

That's the first time I've been accused of artistic ability.

:)

I like the php icon in #32 better, since it has the same dimensions as the rest.

...btw, why not http://drupal.org/sites/all/themes/bluecheese/images/blockquote-66.png ??

pillarsdotnet’s picture

Title: Decide on a specific set of libraries and extensions for BUEditor as used on drupal.org » Decide on a specific set of libraries, extensions, and icons for BUEditor as used on drupal.org
naught101’s picture

yes, the buttons in #32 are better than in #34

Also, it would be useful to have a button that adds "<a href="">%text%</a>" Never mind me.

klonos’s picture

basic’s picture

Project: Drupal.org infrastructure » Drupal.org site moderators
Component: Other » Redesign
Issue summary: View changes
lizzjoy’s picture

Component: Redesign » Other

I'm closing this issue due to inactivity. @dww, if you or anyone else wants to re-open it, please do.

lizzjoy’s picture

Status: Active » Closed (won't fix)