No resize overlay toolbar when adding image

[ZissisT]

Hello,

I was trying to use textangular in my app but overlay does not work when adding an image and clicking on toolbar button before clicking on the image
I can reproduce this also in www.textangular.com.

Firefox

1. In www.textangular.com click to add an image url .e.g http://i.telegraph.co.uk/multimedia/archive/01448/Sax_1448658i.jpg
2. DO NOT click on image yet, but click on P button for paragraph.
3. click anywhere outside the image, on the white space, so P gets active.
4. Now click on image. Resize overlay appears but the toolbar to align image left and right is not and there is no way to make it appear.

In some cases no resize borders appear at all also, depends on which button is active when we click on the image. --- I do not mean when we add the image, I mean when we click on image, button must be active when we click on image for this to be reproduced ---

In my app, I don't know why, P is always enabled for some reason, even with no content, which makes it impossible for me to add any picture/resize it/move it inside the document.

This can be reproduce in latest stable Firefox and Chrome.

Chrome

In Chrome is even worse, add the image (do not click on it), then click on any of the h1/h2/h3 etc or P toolbar buttons and THEN click on image. No resize overlay at all (or toolbar)

Thank you
Zissis

[SimeonC]

Thanks, I'll look into it when I can and get back to you.

[SimeonC]

I think I have it fixed now. Cleaned up some of the logic around applying the onSelectElement handlers.

[ZissisT]

Thanks for this, but how can I test it/use it? 1.3.x is unusable because of rangy error, will this work only when 1.3 is officially released?

Error I receive is (I have included textangular-rangy.min.js)
'Range.detach' is now a no-op, as per DOM (http://dom.spec.whatwg.org/#dom-range-detach).
Uncaught NotFoundError: Failed to execute 'selectNodeContents' on 'Range': The node provided is null.

If so, any release dates? :) It's major blocking issue to me

Thank you very much
Zissis

[SimeonC]

That's odd, it works for me!

Can you throw up your code so I can try debug it? Or is there something I need to do to get the error to occur?

[ZissisT]

I didn't do anything special, I just upgraded textangular from 1.2.2 I was using, to 1.3.0-18, included
'bower_components/textAngular/dist/textAngular-rangy.min.js',
'bower_components/textAngular/dist/textAngular-sanitize.min.js',
'bower_components/textAngular/dist/textAngular.min.js'

and in my html I have this
<div text-angular ng-model="model.data"></div>

Now when this is displayed, it is displayed as one line contenteditable div, and when I click inside it, I get the rangy error and nothing works.

Am I missing something?
Zissis

[ZissisT]

Edit: the one line display was because of me forgetting to include textangular.css, I included it, now editor is displayed normal, but is unusable because wherever I click I get the rangy error

[SimeonC]

Ummm, I dunno why that's happening. I just checked with the static-demo.html with the same setup as you and I got no errors at all. Can you recreate it in a plunkr?

[ZissisT]

Issue does not happen with 1.3.0-pre15, only change I did is change bower.json entry from 1.3.0-18 to 1.3.0-pre15 and all work.

Did you click inside the area?Error was thrown only when I clicked inside the edit area, not on buttons.
Zissis

[SimeonC]

Yup, and typing and a bunch of other tests in safari, chrome and firefox. I can't find any problems.

[ZissisT]

Ok I debugged it and issue seems to be the fix here http://github.com/fraywing/textAngular/commit/05f15a5e4adcd4d21cd3b9085bcd031e5d0e0c65

which added onMouseUp handler, this one calls
taSelection.setSelectionToElementStart(element.children()[0]);

with undefined param, since element has no children, it's this div
<div id="taTextElement2109444430097937" contenteditable="true" ta-bind="ta-bind" ng-model="html" class="ng-valid ta-bind ng-dirty"></div>

Zissis

[SimeonC]

OK, thanks for the debugging help. I'll put some catches around it which should hopefully catch it.

[SimeonC]

OK, I've added a check to see if the element has any children, that should fix the problem.

[ZissisT]

I tested with 1.3.0-19, no error when I click inside editor, but when the first thing I do is insert image, nothing happens, image is not inserted. Also if i type one 2 words with space, without pressing enter, and then add image, all content is cleared.

It's as if restoreSelection is called but saved selection is empty the moment image dialog opens.

I will have a closer look when I find some time.

Zissis

[SimeonC]

I think this may be a windows issue of some sort - it seems like for some reason your browser is killing some event somewhere that should be filling in the default wrap.

When I do the steps you just mentioned the content of textAngular model is: <p><img ...><br/></p>. What's yours output to?

[ZissisT]

It's empty, nothing. No html inside. And when content is cleared , again, html goes to ''.
When you start, is there any existing p tag?
I start in a clean content, no html inside, nothing, I click inside, then click on add image, add an image url, and click ok. Code is executed but I see nothing.
Also I noticed that when i have some words and add image clears them, image is added but after half a second everything gets reset. I will try to add a debug in restoreSelection() etc and see what happens

Zissis

[SimeonC]

OK, when you click in, the default wrap should be triggered making the html go to <p><br/></p> or something similar dependant on browser.

I think something else you are loading may be clashing with textAngular. Can you replicate your issue here: http://plnkr.co/edit/rgeAUFfoop5o4imZiC8J?p=preview

[ZissisT]

Hi,

No I can't, plunkr works great. Issue is with P on click. In my app it doesn't work. When I refresh and page appears and I first click inside, only left align is selected, p isn't (on plunkr it is). If I manage to add a P tag inside html, then image insert works great. Why does it need a P tag to work? :(
I will test some more with this plunkr and let you know, hopefully I will get to the bottom of this.

Thank you very much
Zissis

[ZissisT]

Problem is that ngModel.$render() of taBind is not called on('focus') but the default angular ngModel.$render() is called, so <p><br></p> is not added as html content. Any idea why this could happen?

Zissis

[SimeonC]

No, no ideas at the moment...

It almost sounds like the taBind .on('focus') isn't getting triggered as the handler for that calls the $render(). Can you check nothing in your app is stopping the focus event from propagating?

[ZissisT]

Hello,

Found the issue..there was a contenteditable directive that was overwriting ngModel.$render() function with its own (so textangular's activeElement set was never executed on textangular's ngModel.$render() function, so it didn't know where to add the image). I removed it and everything works fine :) But ngModel.$render function gets overridden often in several cases from other apps/directives, any way to 'shield' textAngular from that (not for my app, general speaking) ?

Zissis

[SimeonC]

Awesome, thanks for sharing your solution. We might be able to do something with terminal and compilation priorities to do that which would probably cover most cases, thanks for the suggestion.

[geyang]

@ZissisT

Just to clarify, did you have that directive bound to the same element as
the taBind directive and executed after taBind was applied?

ps: In my project I am actually intentionally overwriting the default
textAngular render with a differential html render I wrote myself. This is
done intentionally by running a my-bind directive after the taBind
directive.

[ZissisT]

Hi,

Well, not exactly. It was the contenteditable directive descibed inside angular.js file as an example over custom control using NgModelController.

      angular.module('customControl', ['ngSanitize']).
        directive('contenteditable', ['$sce', function($sce) {
          return {
            restrict: 'A', // only activate on element attribute
            require: '?ngModel', // get a hold of NgModelController
            link: function(scope, element, attrs, ngModel) {
              if(!ngModel) return; // do nothing if no ng-model

              // Specify how UI should be updated
              ngModel.$render = function() {
                element.html($sce.getTrustedHtml(ngModel.$viewValue || ''));
              };

              // Listen for change events to enable binding
              element.on('blur keyup change', function() {
                scope.$evalAsync(read);
              });
              read(); // initialize

              // Write data to the model
              function read() {
                var html = element.html();
                // When we clear the content editable the browser leaves a <br> behind
                // If strip-br attribute is provided then we strip this out
                if( attrs.stripBr && html == '<br>' ) {
                  html = '';
                }
                ngModel.$setViewValue(html);
              }
            }
          };
        }]);

so, I didn't use it directly but it was added in my app sometime ago as an actual directive and any div that used the html contenteditable attribute (like textangular I suppose) used this directive

Zissis