@nodeject/ui-components
Version:
UI library for non-trivial components
312 lines (311 loc) • 15 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
import SchedioEditor from '@averystupidtest/editor';
import * as React from 'react';
// Customize the Editor here
var isActive = function (cmd) {
var blocks = this.selection.blocks();
if (blocks.length) {
var blk = blocks[0];
var tag = 'N';
var default_tag = this.html.defaultTag();
if (blk.tagName.toLowerCase() != default_tag && blk != this.el) {
tag = blk.tagName;
}
}
if (['LI', 'TD', 'TH'].indexOf(tag) >= 0) {
tag = 'N';
}
return tag.toLowerCase() == cmd;
};
SchedioEditor.DefineIcon('code', {
NAME: 'code',
PATH: 'm 16 3 h 3 c 1 0 1 1 1 1 v 16 c 0 0 0 1 -1 1 h -16 c -1 0 -1 -1 -1 -1 v -3 h 2 v 2 h 14 v -14 h -2 Z'
});
SchedioEditor.RegisterCommand('code', {
title: 'Block code',
callback: function (cmd) {
if (isActive.apply(this, ['pre'])) {
this.paragraphFormat.apply('N');
}
else {
this.paragraphFormat.apply('pre');
}
},
refresh: function ($btn) {
$btn.toggleClass('fr-active', isActive.apply(this, [$btn.data('cmd')]));
}
});
SchedioEditor.DefineIcon('codeBlock', {
NAME: 'Block code',
PATH: 'M 18 5 h 3 c 1 0 1 1 1 1 v 14 c 0 0 0 1 -1 1 h -16 c -1 0 -1 -1 -1 -1 v -3 h 2 v 2 h 14 v -12 h -2 Z m -0.5 4 v 0.255 a 0.595 0.595 90 0 1 -0.17 0.425 l -3.145 3.145 a 0.34 0.34 90 0 1 -0.595 0 l -0.51 -0.51 a 0.34 0.34 90 0 1 0 -0.51 l 2.635 -2.635 l -2.635 -2.635 a 0.34 0.34 90 0 1 0 -0.51 l 0.51 -0.51 a 0.34 0.34 90 0 1 0.595 0 l 3.145 3.145 a 0.595 0.595 90 0 1 0.17 0.425 z m -13.6 0.17 l 2.635 -2.635 a 0.34 0.34 90 0 0 0 -0.51 l -0.595 -0.51 a 0.34 0.34 90 0 0 -0.51 0 l -3.145 3.145 a 0.595 0.595 90 0 0 -0.17 0.425 v 0.255 a 0.595 0.595 90 0 0 0.17 0.425 l 3.145 3.145 a 0.34 0.34 90 0 0 0.595 0 l 0.51 -0.51 a 0.34 0.34 90 0 0 0 -0.51 z m 8.5 -5.865 l -0.765 -0.255 a 0.425 0.425 90 0 0 -0.51 0.255 l -4.08 11.305 a 0.34 0.34 90 0 0 0.255 0.51 l 0.765 0.255 a 0.425 0.425 90 0 0 0.51 -0.255 l 4.08 -11.305 a 0.34 0.34 90 0 0 -0.255 -0.51 z'
});
SchedioEditor.RegisterCommand('codeBlock', {
title: 'Block code',
callback: function (cmd) {
if (isActive.apply(this, ['pre'])) {
this.paragraphFormat.apply('N');
}
else {
this.paragraphFormat.apply('pre');
}
},
refresh: function ($btn) {
$btn.toggleClass('fr-active', isActive.apply(this, [$btn.data('cmd')]));
}
});
SchedioEditor.DefineIcon('send', {
NAME: 'Send',
PATH: 'M 2.1 18.9 l 18.9 -8.4 l -18.9 -8.4 v 6.3 l 13.3 2.1 l -13.3 2.1 v 6.3 z'
});
SchedioEditor.RegisterCommand('send', {
icon: 'send',
title: 'Send',
undo: false,
callback: function () {
this.save.save();
},
refresh: function ($btn) {
var fullHtmlContent = this.html
.get()
.replace('<p data-f-id="pbf" style="text-align: center; font-size: 14px; margin-top: 30px; opacity: 0.65; font-family: sans-serif;">Powered by <a href="https://www.froala.com/wysiwyg-editor?pb=1" title="Schedio Editor">Schedio Editor</a></p>', '')
.replace('<a id="fr-logo" href="https://froala.com/wysiwyg-editor" target="_blank" title="Schedio WYSIWYG HTML Editor"><span>Powered by</span><svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 822.8 355.33"><defs><style>.fr-logo{fill:#b1b2b7;}</style></defs><title>Schedio</title><path class="fr-logo" d="M123.58,78.65A16.16,16.16,0,0,0,111.13,73H16.6C7.6,73,0,80.78,0,89.94V128.3a16.45,16.45,0,0,0,32.9,0V104.14h78.5A15.63,15.63,0,0,0,126.87,91.2,15.14,15.14,0,0,0,123.58,78.65Z"/><path class="fr-logo" d="M103.54,170a16.05,16.05,0,0,0-11.44-4.85H15.79A15.81,15.81,0,0,0,0,180.93v88.69a16.88,16.88,0,0,0,5,11.92,16,16,0,0,0,11.35,4.7h.17a16.45,16.45,0,0,0,16.41-16.6v-73.4H92.2A15.61,15.61,0,0,0,107.89,181,15.1,15.1,0,0,0,103.54,170Z"/><path class="fr-logo" d="M233,144.17c-5.29-6.22-16-7.52-24.14-7.52-16.68,0-28.72,7.71-36.5,23.47v-5.67a16.15,16.15,0,1,0-32.3,0v115.5a16.15,16.15,0,1,0,32.3,0v-38.7c0-19.09,3.5-63.5,35.9-63.5a44.73,44.73,0,0,1,5.95.27h.12c12.79,1.2,20.06-2.73,21.6-11.69C236.76,151.48,235.78,147.39,233,144.17Z"/><path class="fr-logo" d="M371.83,157c-13.93-13.11-32.9-20.33-53.43-20.33S279,143.86,265.12,157c-14.67,13.88-22.42,32.82-22.42,54.77,0,21.68,8,41.28,22.4,55.2,13.92,13.41,32.85,20.8,53.3,20.8s39.44-7.38,53.44-20.79c14.55-13.94,22.56-33.54,22.56-55.21S386.39,170.67,371.83,157Zm-9.73,54.77c0,25.84-18.38,44.6-43.7,44.6s-43.7-18.76-43.7-44.6c0-25.15,18.38-43.4,43.7-43.4S362.1,186.59,362.1,211.74Z"/><path class="fr-logo" d="M552.7,138.14a16.17,16.17,0,0,0-16,16.3v1C526.41,143.85,509,136.64,490,136.64c-19.83,0-38.19,7.24-51.69,20.4C424,171,416.4,190,416.4,212c0,21.61,7.78,41.16,21.9,55,13.56,13.33,31.92,20.67,51.7,20.67,18.83,0,36.29-7.41,46.7-19.37v1.57a16.15,16.15,0,1,0,32.3,0V154.44A16.32,16.32,0,0,0,552.7,138.14Zm-16.3,73.6c0,30.44-22.81,44.3-44,44.3-24.57,0-43.1-19-43.1-44.3s18.13-43.4,43.1-43.4C513.73,168.34,536.4,183.55,536.4,211.74Z"/><path class="fr-logo" d="M623.5,61.94a16.17,16.17,0,0,0-16,16.3v191.7a16.15,16.15,0,1,0,32.3,0V78.24A16.32,16.32,0,0,0,623.5,61.94Z"/><path class="fr-logo" d="M806.5,138.14a16.17,16.17,0,0,0-16,16.3v1c-10.29-11.63-27.74-18.84-46.7-18.84-19.83,0-38.19,7.24-51.69,20.4-14.33,14-21.91,33-21.91,55,0,21.61,7.78,41.16,21.9,55,13.56,13.33,31.92,20.67,51.7,20.67,18.83,0,36.29-7.41,46.7-19.37v1.57a16.15,16.15,0,1,0,32.3,0V154.44A16.32,16.32,0,0,0,806.5,138.14Zm-16.3,73.6c0,30.44-22.81,44.3-44,44.3-24.57,0-43.1-19-43.1-44.3s18.13-43.4,43.1-43.4C767.53,168.34,790.2,183.55,790.2,211.74Z"/></svg></a>', '');
var strippedText = new DOMParser()
.parseFromString(fullHtmlContent, 'text/html')
.documentElement.textContent.trim();
$btn.toggleClass('fr-disabled', strippedText === '');
},
refreshAfterCallback: true
});
// SHORTCUTS (default seems to work with CTRL)
// https://www.froala.net/wysiwyg-editor/docs/concepts/custom/shortcut
SchedioEditor.RegisterShortcut(SchedioEditor.KEYCODE.ENTER, 'send', null, 'Save', false, false);
var lastId = 0;
var SchedioEditorFunctionality = /** @class */ (function (_super) {
__extends(SchedioEditorFunctionality, _super);
function SchedioEditorFunctionality(props) {
var _this = _super.call(this, props) || this;
// Tag on which the editor is initialized.
_this.tag = null;
_this.defaultTag = 'div';
_this.listeningEvents = [];
// Jquery wrapped element.
_this.element = null;
// Editor element.
_this.editor = null;
// Editor options config
_this.config = {
immediateReactModelUpdate: false,
reactIgnoreAttrs: null
};
_this.editorInitialized = false;
_this.SPECIAL_TAGS = ['img', 'button', 'input', 'a'];
_this.INNER_HTML_ATTR = 'innerHTML';
_this.hasSpecialTag = false;
_this.oldModel = null;
return _this;
}
// Before first time render.
SchedioEditorFunctionality.prototype.componentWillMount = function () {
this.tag = this.props.tag || this.defaultTag;
};
// After first time render.
SchedioEditorFunctionality.prototype.componentDidMount = function () {
var tagName = this.el.tagName.toLowerCase();
if (this.SPECIAL_TAGS.indexOf(tagName) != -1) {
this.tag = tagName;
this.hasSpecialTag = true;
}
if (this.props.onManualControllerReady) {
this.generateManualController();
}
else {
this.createEditor();
}
};
SchedioEditorFunctionality.prototype.componentWillUnmount = function () {
this.destroyEditor();
};
SchedioEditorFunctionality.prototype.componentDidUpdate = function () {
if (JSON.stringify(this.oldModel) == JSON.stringify(this.props.model)) {
return;
}
this.setContent();
};
SchedioEditorFunctionality.prototype.createEditor = function () {
var _this = this;
if (this.editorInitialized) {
return;
}
this.config = this.props.config || this.config;
this.element = this.el;
if (this.props.model) {
this.element.innerHTML = this.props.model;
}
this.setContent(true);
// Default initialized.
this.registerEvent('initialized', this.config.events && this.config.events.initialized);
// Check if events are set.
if (!this.config.events)
this.config.events = {};
this.config.events.initialized = function () { return _this.initListeners(); };
this.editor = new SchedioEditor(this.element, this.config);
// Call init events.
if (this._initEvents) {
for (var i = 0; i < this._initEvents.length; i++) {
this._initEvents[i].call(this.editor);
}
}
};
SchedioEditorFunctionality.prototype.setContent = function (firstTime) {
if (this.props.model || this.props.model == '') {
this.oldModel = this.props.model;
if (this.hasSpecialTag) {
this.setSpecialTagContent();
}
else {
this.setNormalTagContent(firstTime);
}
}
};
SchedioEditorFunctionality.prototype.setNormalTagContent = function (firstTime) {
var _this = this;
var self = this;
function htmlSet() {
self.editor.html && self.editor.html.set(self.props.model || '');
if (self.editorInitialized && self.editor.undo) {
//This will reset the undo stack everytime the model changes externally. Can we fix this?
self.editor.undo.reset();
self.editor.undo.saveStep();
}
}
if (firstTime) {
if (this.config.initOnClick) {
this.registerEvent('initializationDelayed', function () {
htmlSet();
});
this.registerEvent('initialized', function () {
_this.editorInitialized = true;
});
}
else {
this.registerEvent('initialized', function () {
_this.editorInitialized = true;
htmlSet();
});
}
}
else {
htmlSet();
}
};
SchedioEditorFunctionality.prototype.setSpecialTagContent = function () {
var tags = this.props.model;
// add tags on element
if (tags) {
for (var attr in tags) {
if (tags.hasOwnProperty(attr) && attr != this.INNER_HTML_ATTR) {
this.element.setAttribute(attr, tags[attr]);
}
}
if (tags.hasOwnProperty(this.INNER_HTML_ATTR)) {
this.element.innerHTML = tags[this.INNER_HTML_ATTR];
}
}
};
SchedioEditorFunctionality.prototype.destroyEditor = function () {
if (this.element) {
this.editor.destroy && this.editor.destroy();
this.listeningEvents.length = 0;
this.element = null;
this.editorInitialized = false;
}
};
SchedioEditorFunctionality.prototype.getEditor = function () {
if (this.element) {
return this.editor;
}
return null;
};
SchedioEditorFunctionality.prototype.generateManualController = function () {
var self = this;
var controls = {
initialize: function () { return self.createEditor.call(self); },
destroy: function () { return self.destroyEditor.call(self); },
getEditor: function () { return self.getEditor.call(self); }
};
this.props.onManualControllerReady(controls);
};
SchedioEditorFunctionality.prototype.updateModel = function () {
if (!this.props.onModelChange) {
return;
}
var modelContent = '';
if (this.hasSpecialTag) {
var attributeNodes = this.element.attributes;
var attrs = {};
for (var i = 0; i < attributeNodes.length; i++) {
var attrName = attributeNodes[i].name;
if (this.config.reactIgnoreAttrs &&
this.config.reactIgnoreAttrs.indexOf(attrName) != -1) {
continue;
}
attrs[attrName] = attributeNodes[i].value;
}
if (this.element.innerHTML) {
attrs[this.INNER_HTML_ATTR] = this.element.innerHTML;
}
modelContent = attrs;
}
else {
var returnedHtml = this.editor.html.get();
if (typeof returnedHtml === 'string') {
modelContent = returnedHtml;
}
}
this.oldModel = modelContent;
this.props.onModelChange(modelContent);
};
SchedioEditorFunctionality.prototype.initListeners = function () {
var self = this;
// bind contentChange and keyup event to froalaModel
this.editor.events.on('contentChanged', function () {
self.updateModel();
});
if (this.config.immediateReactModelUpdate) {
this.editor.events.on('keyup', function () {
self.updateModel();
});
}
};
// register event on jquery editor element
SchedioEditorFunctionality.prototype.registerEvent = function (eventName, callback) {
if (!eventName || !callback) {
return;
}
if (eventName == 'initialized') {
if (!this._initEvents)
this._initEvents = [];
this._initEvents.push(callback);
}
else {
if (!this.config.events) {
this.config.events = {};
}
this.config.events[eventName] = callback;
}
};
return SchedioEditorFunctionality;
}(React.Component));
export { SchedioEditorFunctionality };