Add editor HTML element to plugin bindings

Question

Add editor HTML element to plugin bindings

Closed this issue 8 years ago · 11 comments

@stevermeister what do you think about passing the HTML element that hosts the editor in the bindings property of ngWigPlugin? In that way, we could overcome difficulties that appear when using multiple editors in a template and simplify the way to find in which editor the plugin belongs to.

For example, in clear-styles plugin, we use the following to find the actual editor element:

var ngWigElement = e.target.parentElement.parentElement.parentElement.parentElement.parentElement;
var container = angular.element(ngWigElement.querySelector('#ng-wig-editable'));

which is really error prone and difficult to read and test. It could be changed to something like:

var container = angular.element(this.hostElement);

Answer 1 · 2016-07-18T12:55:40.000Z

why do we need it inside plugin?
it was nice to bind ngModel, but why element itself?

Answer 2 · 2016-07-18T13:07:31.000Z

I think it will be helpful in case someone wants to interact directly with the actual HTML element.

Take for instance the clear-styles plugin that uses an inefficient way to find the host element of the editor. Or even in the case of #130 where @sajithk was having problems with the focus on the editor. If he was to create a plugin that sets focus, he should find a way to decide which is the owner editor.

We could pass the ID of the element if we do not want to have the whole editor object being transferred between the bindings.

Answer 3 · 2016-07-18T13:15:44.000Z

yes, "focus" is a good example.

but " clear-styles" should work only with ngModel, no?

Answer 4 · 2016-07-18T13:28:09.000Z

I think that ngModel contains the text along with any styles (e.g. p, li, br). If it is like that, there is no easy way to get the text only. except from textContent property of the element.

Answer 5 · 2016-07-20T08:52:47.000Z

in this case if you want to work with DOM properties, you can just create virtual element, put content there and do textContent.
still not convinced.
I just want to provide properties that you really need, but not that you might want to have in some rare cases.

Could you provide at least on more example please?

Answer 6 · 2016-07-20T11:05:55.000Z

I gave a second thought on the issue and I think it is not worth to provide it as a binding, for the reasons you have already mentioned.

Could you please provide an example with the use of the virtual element that you describe? I would be really interested to integrate such a solution to the clear-styles plugin.

Alternatively, we could provide a service that gets the active editor and each plugin could inject it when needed.

Answer 7 · 2016-07-20T14:22:59.000Z

let div = document.createElement('div')
div.innerHTML = htmlContent;
div.textContent

Answer 8 · 2016-07-20T14:26:09.000Z

I am struggling to understand how can this be used in clear-styles plugin. Could you please elaborate a bit?

Answer 9 · 2016-07-20T14:29:16.000Z

let div = document.createElement('div')
div.innerHTML = ngModel;
ngModel = div.textContent

Answer 10 · 2016-07-20T14:29:53.000Z

it's the same what we did here
https://github.com/stevermeister/ngWig/blob/master/src/javascript/app/plugins/clear-styles.ngWig.js#L17

Answer 11 · 2016-07-20T14:32:38.000Z

I really like your approach. Never thought of it! It is also much more testable. I will make the change and submit a PR for that. Thanks!