Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Froala 3 fixes #59

Closed
wants to merge 17 commits into from
Closed

Froala 3 fixes #59

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
06116dc
Roll back to gulp 3.9.1 since tasks are v3 format
Jul 4, 2019
bf5f801
Fix set/observation of value
Jul 4, 2019
2c7adf0
Fix Indentiation
Jul 9, 2019
a9e74e6
Fix typo in comment
Jul 9, 2019
d8ff625
Make instance bindable.
Jul 9, 2019
e93e361
Fix Event Handlers
Jul 9, 2019
8a95bce
Set html after initialization
Jul 9, 2019
9946a60
Setup editor on correct element
Jul 9, 2019
d5446b2
Simplified checking if editor is initalized
Jul 10, 2019
dda4707
Refactor (spaces to tabs)
Jul 10, 2019
7b49c3c
(Refactor) Put code directly in attached/detached
Jul 10, 2019
96cc292
Rename instance to editor to better match the docs
Jul 10, 2019
daf234d
Add support for 'initialized' event handler
Jul 10, 2019
b6cc87e
Update to 3.0.3
Jul 16, 2019
d9f579f
Remove need for id selector
Jul 17, 2019
5c5c040
npm: Update to Froala Editor 3.0.6
Nov 19, 2019
288b950
Merge branch 'master' into Froala-3-Fixes
alexisszabo Nov 19, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 52 additions & 51 deletions dist/amd/froala-editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,12 +63,10 @@ define(['exports', 'aurelia-framework', 'aurelia-binding', './froala-editor-conf
throw new Error('Decorating class property failed. Please ensure that transform-class-properties is enabled.');
}

var _dec, _dec2, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3;
var _dec, _dec2, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4;

var FroalaEditor1 = exports.FroalaEditor1 = (_dec = (0, _aureliaFramework.customElement)('froala-editor'), _dec2 = (0, _aureliaFramework.inject)(Element, _froalaEditorConfig.Config, _aureliaBinding.ObserverLocator), _dec(_class = _dec2(_class = (_class2 = function () {
function FroalaEditor1(element, config, observerLocator) {
var _this = this;

_classCallCheck(this, FroalaEditor1);

_initDefineProp(this, 'value', _descriptor, this);
Expand All @@ -77,69 +75,69 @@ define(['exports', 'aurelia-framework', 'aurelia-binding', './froala-editor-conf

_initDefineProp(this, 'eventHandlers', _descriptor3, this);

this.element = element;
_initDefineProp(this, 'editor', _descriptor4, this);

this.element = element;
this.config = config.options();

this.subscriptions = [observerLocator.getObserver(this, 'value').subscribe(function (newValue, oldValue) {
if (_this.instance && _this.instance.html.get() != newValue) {
_this.instance.html(newValue);
}
})];
this.observerLocator = observerLocator;
}

FroalaEditor1.prototype.tearUp = function tearUp() {
var _this2 = this;
FroalaEditor1.prototype.bind = function bind(bindingContext, overrideContext) {
this.parent = bindingContext;
};

if (this.config.iframe) {
this.instance = this.element.getElementsByTagName('textarea')[0];
} else {
this.instance = this.element.getElementsByTagName('div')[0];
}
FroalaEditor1.prototype.attached = function attached() {
var _this = this;

if (this.instance['data-froala.editor']) {
var editorSelector = this.config.iframe ? 'textarea' : 'div';

if (this.editor != null) {
return;
}

this.instance.innerHTML = this.value;

if (this.eventHandlers && this.eventHandlers.length != 0) {
var _loop = function _loop(eventHandlerName) {
var handler = _this2.eventHandlers[eventHandlerName];
_this2.instance.addEventListener('' + eventHandlerName, function () {
var p = arguments;
return handler.apply(this, p);
});
};
this.subscriptions = [this.observerLocator.getObserver(this, 'value').subscribe(function (newValue, oldValue) {
if (_this.editor && _this.editor.html.get() != newValue) {
_this.editor.html.set(newValue);
}
})];

for (var eventHandlerName in this.eventHandlers) {
_loop(eventHandlerName);
this.editor = new _froala_editorPkgdMin2.default(this.element.querySelector(editorSelector), Object.assign({}, this.config), function () {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it will select first element of that type. not that particular element?

Copy link
Author

@alexisszabo alexisszabo Nov 19, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's correct. However, for example, since we are searching only within the element itself, and there is only one 'textarea', we will get that.

This is similar to the old code:
if (this.config.iframe) {
this.instance = this.element.getElementsByTagName('textarea')[0];
}
else {
this.instance = this.element.getElementsByTagName('div')[0];
}

_this.editor.html.set(_this.value);

if (_this.eventHandlers && _this.eventHandlers.length != 0) {
var _loop = function _loop(eventHandlerName) {
var handler = _this.eventHandlers[eventHandlerName];
if (eventHandlerName === 'initialized') {
handler.apply(_this.parent);
} else {
_this.editor.events.on('' + eventHandlerName, function () {
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}

return handler.apply(_this.parent, args);
});
}
};

for (var eventHandlerName in _this.eventHandlers) {
_loop(eventHandlerName);
}
}
}
this.instance.addEventListener('contentChanged', function (e, editor) {
return _this2.value = editor.html.get();
_this.editor.events.on('blur', function (e) {
return _this.value = _this.editor.html.get();
});
_this.editor.events.on('contentChanged', function (e) {
return _this.value = _this.editor.html.get();
});
});
this.instance.addEventListener('blur', function (e, editor) {
return _this2.value = editor.html.get();
});

this.instance = new _froala_editorPkgdMin2.default('#' + this.element.id, Object.assign({}, this.config));
};

FroalaEditor1.prototype.tearDown = function tearDown() {
if (this.instance && this.instance['data-froala.editor']) {
this.instance.destroy();
}

this.instance = null;
};

FroalaEditor1.prototype.attached = function attached() {
this.tearUp();
};

FroalaEditor1.prototype.detached = function detached() {
this.tearDown();
if (this.editor != null) {
this.editor.destroy();
this.editor = null;
}
};

return FroalaEditor1;
Expand All @@ -156,5 +154,8 @@ define(['exports', 'aurelia-framework', 'aurelia-binding', './froala-editor-conf
initializer: function initializer() {
return {};
}
}), _descriptor4 = _applyDecoratedDescriptor(_class2.prototype, 'editor', [_aureliaFramework.bindable], {
enumerable: true,
initializer: null
})), _class2)) || _class) || _class);
});
103 changes: 52 additions & 51 deletions dist/commonjs/froala-editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
});
exports.FroalaEditor1 = undefined;

var _dec, _dec2, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3;
var _dec, _dec2, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4;

var _aureliaFramework = require('aurelia-framework');

Expand Down Expand Up @@ -66,8 +66,6 @@ function _initializerWarningHelper(descriptor, context) {

var FroalaEditor1 = exports.FroalaEditor1 = (_dec = (0, _aureliaFramework.customElement)('froala-editor'), _dec2 = (0, _aureliaFramework.inject)(Element, _froalaEditorConfig.Config, _aureliaBinding.ObserverLocator), _dec(_class = _dec2(_class = (_class2 = function () {
function FroalaEditor1(element, config, observerLocator) {
var _this = this;

_classCallCheck(this, FroalaEditor1);

_initDefineProp(this, 'value', _descriptor, this);
Expand All @@ -76,69 +74,69 @@ var FroalaEditor1 = exports.FroalaEditor1 = (_dec = (0, _aureliaFramework.custom

_initDefineProp(this, 'eventHandlers', _descriptor3, this);

this.element = element;
_initDefineProp(this, 'editor', _descriptor4, this);

this.element = element;
this.config = config.options();

this.subscriptions = [observerLocator.getObserver(this, 'value').subscribe(function (newValue, oldValue) {
if (_this.instance && _this.instance.html.get() != newValue) {
_this.instance.html(newValue);
}
})];
this.observerLocator = observerLocator;
}

FroalaEditor1.prototype.tearUp = function tearUp() {
var _this2 = this;
FroalaEditor1.prototype.bind = function bind(bindingContext, overrideContext) {
this.parent = bindingContext;
};

if (this.config.iframe) {
this.instance = this.element.getElementsByTagName('textarea')[0];
} else {
this.instance = this.element.getElementsByTagName('div')[0];
}
FroalaEditor1.prototype.attached = function attached() {
var _this = this;

if (this.instance['data-froala.editor']) {
var editorSelector = this.config.iframe ? 'textarea' : 'div';

if (this.editor != null) {
return;
}

this.instance.innerHTML = this.value;

if (this.eventHandlers && this.eventHandlers.length != 0) {
var _loop = function _loop(eventHandlerName) {
var handler = _this2.eventHandlers[eventHandlerName];
_this2.instance.addEventListener('' + eventHandlerName, function () {
var p = arguments;
return handler.apply(this, p);
});
};
this.subscriptions = [this.observerLocator.getObserver(this, 'value').subscribe(function (newValue, oldValue) {
if (_this.editor && _this.editor.html.get() != newValue) {
_this.editor.html.set(newValue);
}
})];

for (var eventHandlerName in this.eventHandlers) {
_loop(eventHandlerName);
this.editor = new _froala_editorPkgdMin2.default(this.element.querySelector(editorSelector), Object.assign({}, this.config), function () {
_this.editor.html.set(_this.value);

if (_this.eventHandlers && _this.eventHandlers.length != 0) {
var _loop = function _loop(eventHandlerName) {
var handler = _this.eventHandlers[eventHandlerName];
if (eventHandlerName === 'initialized') {
handler.apply(_this.parent);
} else {
_this.editor.events.on('' + eventHandlerName, function () {
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}

return handler.apply(_this.parent, args);
});
}
};

for (var eventHandlerName in _this.eventHandlers) {
_loop(eventHandlerName);
}
}
}
this.instance.addEventListener('contentChanged', function (e, editor) {
return _this2.value = editor.html.get();
_this.editor.events.on('blur', function (e) {
return _this.value = _this.editor.html.get();
});
_this.editor.events.on('contentChanged', function (e) {
return _this.value = _this.editor.html.get();
});
});
this.instance.addEventListener('blur', function (e, editor) {
return _this2.value = editor.html.get();
});

this.instance = new _froala_editorPkgdMin2.default('#' + this.element.id, Object.assign({}, this.config));
};

FroalaEditor1.prototype.tearDown = function tearDown() {
if (this.instance && this.instance['data-froala.editor']) {
this.instance.destroy();
}

this.instance = null;
};

FroalaEditor1.prototype.attached = function attached() {
this.tearUp();
};

FroalaEditor1.prototype.detached = function detached() {
this.tearDown();
if (this.editor != null) {
this.editor.destroy();
this.editor = null;
}
};

return FroalaEditor1;
Expand All @@ -155,4 +153,7 @@ var FroalaEditor1 = exports.FroalaEditor1 = (_dec = (0, _aureliaFramework.custom
initializer: function initializer() {
return {};
}
}), _descriptor4 = _applyDecoratedDescriptor(_class2.prototype, 'editor', [_aureliaFramework.bindable], {
enumerable: true,
initializer: null
})), _class2)) || _class) || _class);
79 changes: 39 additions & 40 deletions dist/es2015/froala-editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
var _dec, _dec2, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3;
var _dec, _dec2, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4;

function _initDefineProp(target, property, descriptor, context) {
if (!descriptor) return;
Expand Down Expand Up @@ -59,59 +59,55 @@ export let FroalaEditor1 = (_dec = customElement('froala-editor'), _dec2 = injec

_initDefineProp(this, 'eventHandlers', _descriptor3, this);

this.element = element;
_initDefineProp(this, 'editor', _descriptor4, this);

this.element = element;
this.config = config.options();
this.observerLocator = observerLocator;
}

this.subscriptions = [observerLocator.getObserver(this, 'value').subscribe((newValue, oldValue) => {
if (this.instance && this.instance.html.get() != newValue) {
this.instance.html(newValue);
}
})];
bind(bindingContext, overrideContext) {
this.parent = bindingContext;
}

tearUp() {
if (this.config.iframe) {
this.instance = this.element.getElementsByTagName('textarea')[0];
} else {
this.instance = this.element.getElementsByTagName('div')[0];
}
attached() {
const editorSelector = this.config.iframe ? 'textarea' : 'div';

if (this.instance['data-froala.editor']) {
if (this.editor != null) {
return;
}

this.instance.innerHTML = this.value;

if (this.eventHandlers && this.eventHandlers.length != 0) {
for (let eventHandlerName in this.eventHandlers) {
let handler = this.eventHandlers[eventHandlerName];
this.instance.addEventListener(`${eventHandlerName}`, function () {
let p = arguments;
return handler.apply(this, p);
});
this.subscriptions = [this.observerLocator.getObserver(this, 'value').subscribe((newValue, oldValue) => {
if (this.editor && this.editor.html.get() != newValue) {
this.editor.html.set(newValue);
}
}
this.instance.addEventListener('contentChanged', (e, editor) => this.value = editor.html.get());
this.instance.addEventListener('blur', (e, editor) => this.value = editor.html.get());

this.instance = new FroalaEditor(`#${this.element.id}`, Object.assign({}, this.config));
}

tearDown() {
if (this.instance && this.instance['data-froala.editor']) {
this.instance.destroy();
}

this.instance = null;
}
})];

attached() {
this.tearUp();
this.editor = new FroalaEditor(this.element.querySelector(editorSelector), Object.assign({}, this.config), () => {
this.editor.html.set(this.value);

if (this.eventHandlers && this.eventHandlers.length != 0) {
for (let eventHandlerName in this.eventHandlers) {
let handler = this.eventHandlers[eventHandlerName];
if (eventHandlerName === 'initialized') {
handler.apply(this.parent);
} else {
this.editor.events.on(`${eventHandlerName}`, (...args) => {
return handler.apply(this.parent, args);
});
}
}
}
this.editor.events.on('blur', e => this.value = this.editor.html.get());
this.editor.events.on('contentChanged', e => this.value = this.editor.html.get());
});
}

detached() {
this.tearDown();
if (this.editor != null) {
this.editor.destroy();
this.editor = null;
}
}
}, (_descriptor = _applyDecoratedDescriptor(_class2.prototype, 'value', [bindable], {
enumerable: true,
Expand All @@ -126,4 +122,7 @@ export let FroalaEditor1 = (_dec = customElement('froala-editor'), _dec2 = injec
initializer: function () {
return {};
}
}), _descriptor4 = _applyDecoratedDescriptor(_class2.prototype, 'editor', [bindable], {
enumerable: true,
initializer: null
})), _class2)) || _class) || _class);
Loading