Skip to content
This repository has been archived by the owner on May 9, 2022. It is now read-only.

Buttons stay disabled, when selection is released outside of editor #20

Open
choffmeister opened this issue Oct 20, 2015 · 3 comments
Open
Assignees

Comments

@choffmeister
Copy link

How to reproduce

  1. Open up chrome (update: didn't notice before, that this only seems to occur in chrome. then my simple fix might be wrong)
  2. Go to the current live example of scribe here.
  3. Start selecting some text
  4. While still pressing the mouse, move the mouse outside of the editor and release.

Now the buttons stay disabled.

scribe-selection-bug

How to fix

The easy fix is this:

diff --git a/src/scribe-plugin-toolbar.js b/src/scribe-plugin-toolbar.js
index 36f0248..b42b66a 100644
--- a/src/scribe-plugin-toolbar.js
+++ b/src/scribe-plugin-toolbar.js
@@ -35,6 +35,11 @@ define(function () {
         scribe.el.addEventListener('focus', updateUi);
         scribe.el.addEventListener('blur', updateUi);

+        // Start selecting in the element but releasing the mouse
+        // outside of the element does not trigger the elements mouseup.
+        // So the buttons may remain disabled.
+        window.addEventListener('mouseup', updateUi);
+
         // We also want to update the UI whenever the content changes. This
         // could be when one of the toolbar buttons is actioned.
         scribe.on('content-changed', updateUi);

Wanted to create a PR for this, but did not manage to get the test suite running on my machine (using node 4.2.1).

@rrees rrees self-assigned this Oct 20, 2015
@choffmeister
Copy link
Author

Updated the original description, since as I noticed this only occurs in chrome. In firefox it works fine. Seems, like not the mouse releasing is the problem, but what happens while starting the selection. In firefox when starting the selection, all buttons are activated. In chrome not. Guess the problem is the updateUi while the first click.

@choffmeister
Copy link
Author

When clicking the first time into the editor, the var selection = new scribe.api.Selection(); returns the following:

  • Chrome: Selection {selection: Selection}
  • Firefox: Object { selection: Selection, range: Range }

Maybe the missing range is the problem?

Update: this.selection.anchorNode; is null on the first click (in scribe scribe-editor/src/api/selection.js). This issue might be caused by scribe itself.

@mindplay-dk
Copy link

I solved this - but at this point, my toolbar plugin is basically a complete rewrite.

I'm going to just dump it here, in case you're interested:

https://gist.github.com/mindplay-dk/f6d76ae9b7ff45983539

Several other things are different in my version of this plugin, because I have several shared toolbars (one fixed, and one floating) and lots of Scribe instances.

I use a single set of button event-handlers - attaching dedicated event-handlers for every instance of Scribe seemed unnecessary.

I also avoid using an option and if-statement as a means of creating shared toolbars - instead, creating one or more instances is the consumer's choice, so you can choose to create a single instance of the toolbar plugin, with one set of button-handlers, etc. and apply the same plugin instance to several editors, e.g.:

var toolbar = scribePluginToolbar($('#toolbar').get(0));
scribe1.use(toolbar);
scribe2.use(toolbar);
// ...

In other words, you create a toolbar plugin for every toolbar - rather than a toolbar plugin for every editor instance, which may not be the "idiomatic" Scribe approach. But this approach should work well with any number of shared or dedicated toolbars.

Personally, I find this approach also leads to simpler and easier to understand code, but YMMV.

Note that I've paid no attention to backwards compatibility, there's no updated test-suite or anything, but I figured I'd dump it here anyhow.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants