deblan-mirror/editor.js
deblan-mirror/editor.js
1
0
Fork 0
mirror of https://github.com/codex-team/editor.js synced 2026-03-17 16:10:07 +01:00
Code Issues Projects Releases Wiki Activity

trying new architecture

Browse source
This commit is contained in:
Murod Khaydarov 2017-11-21 00:17:18 +03:00
commit 19320da8d1
9 changed files with 989 additions and 627 deletions
Download patch file Download diff file Expand all files Collapse all files

1011
codex-editor.js
View file

File diff suppressed because it is too large Load diff

2
codex-editor.js.map
View file

File diff suppressed because one or more lines are too long

56
codex.js
View file

@ -24,7 +24,9 @@ module.exports = class CodexEditor {
this._configuration.holderId = config.holderId;
this._configuration.placeholder = config.placeholder || 'write your story...';
this._configuration.sanitizer = config.sanitizer || {
p: true,
b: true,
a: true
};
this._configuration.hideToolbar = config.hideToolbar ? config.hideToolbar : false;
@ -59,7 +61,9 @@ module.exports = class CodexEditor {
this.eventsDispatcher = new Events();
this.init();
return Promise.resolve()
.then(() => this.init())
.then(() => this.prepare());
}
@ -70,8 +74,9 @@ module.exports = class CodexEditor {
*/
init() {
let Core = require('./src/modules/core'),
Tools = require('./src/modules/tools');
let Dom = require('./src/modules/dom'),
Core = require('./src/modules/core'),
Ui = require('./src/modules/ui');
// transport = require('./src/modules/transport'),
// renderer = require('./src/modules/renderer'),
// saver = require('./src/modules/saver'),
@ -88,13 +93,14 @@ module.exports = class CodexEditor {
// paste = require('./src/modules/paste');
let moduleList = {
'core' : Core,
'tools' : Tools
'dom' : Dom,
'core' : Core,
'ui' : Ui
};
for(let moduleName in moduleList) {
let modules = [];
let modules = {};
for(let moduleExtends in moduleList) {
@ -103,7 +109,7 @@ module.exports = class CodexEditor {
continue;
}
modules.push(moduleList[moduleExtends]);
modules[moduleExtends] = moduleList[moduleExtends];
}
@ -116,16 +122,30 @@ module.exports = class CodexEditor {
}
// this.moduleInstances['core'].prepare();
Promise.resolve()
.then(this.moduleInstances['core'].prepare.bind(this.moduleInstances['core']));
// .then(this.moduleInstances['ui'].prepare)
// .then(this.moduleInstances['tools'.prepare])
// .catch(function (error) {
//
// console.log('Error occured', error);
//
// });
}
/**
* @param module - module instance
* @returns {*}
*/
prepare(module) {
function prepareDecorator(module) {
return module.prepare();
}
return Promise.resolve()
.then(prepareDecorator(this.moduleInstances['core']))
.then(prepareDecorator(this.moduleInstances['ui']));
// .then(this.moduleInstances['tools'.prepare])
// .catch(function (error) {
//
// console.log('Error occured', error);
//
// });
}

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "codex.editor",
"version": "1.7.8",
"version": "2.0.0",
"description": "Codex Editor. Native JS, based on API and Open Source",
"main": "index.js",
"scripts": {

337
src/modules/core.js
View file

@ -22,6 +22,12 @@ module.exports = class Core {
}
/**
* @public
*
* Editor preparing method
* @return Promise
*/
prepare() {
let self = this;
@ -81,64 +87,150 @@ module.exports = class Core {
}
/**
* Native Ajax
* @param {String} settings.url - request URL
* @param {function} settings.beforeSend - returned value will be passed as context to the Success, Error and Progress callbacks
* @param {function} settings.success
* @param {function} settings.progress
*/
ajax(settings) {
if (!settings || !settings.url) {
return;
}
var XMLHTTP = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'),
encodedString,
isFormData,
prop;
settings.async = true;
settings.type = settings.type || 'GET';
settings.data = settings.data || '';
settings['content-type'] = settings['content-type'] || 'application/json; charset=utf-8';
if (settings.type == 'GET' && settings.data) {
settings.url = /\?/.test(settings.url) ? settings.url + '&' + settings.data : settings.url + '?' + settings.data;
} else {
encodedString = '';
for(prop in settings.data) {
encodedString += (prop + '=' + encodeURIComponent(settings.data[prop]) + '&');
}
}
if (settings.withCredentials) {
XMLHTTP.withCredentials = true;
}
/**
* Value returned in beforeSend funtion will be passed as context to the other response callbacks
* If beforeSend returns false, AJAX will be blocked
*/
let responseContext,
beforeSendResult;
if (typeof settings.beforeSend === 'function') {
beforeSendResult = settings.beforeSend.call();
if (beforeSendResult === false) {
return;
}
}
XMLHTTP.open( settings.type, settings.url, settings.async );
/**
* If we send FormData, we need no content-type header
*/
isFormData = isFormData_(settings.data);
if (!isFormData) {
if (settings.type !== 'POST') {
XMLHTTP.setRequestHeader('Content-type', settings['content-type']);
} else {
XMLHTTP.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
}
}
XMLHTTP.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
responseContext = beforeSendResult || XMLHTTP;
if (typeof settings.progress === 'function') {
XMLHTTP.upload.onprogress = settings.progress.bind(responseContext);
}
XMLHTTP.onreadystatechange = function () {
if (XMLHTTP.readyState === 4) {
if (XMLHTTP.status === 200) {
if (typeof settings.success === 'function') {
settings.success.call(responseContext, XMLHTTP.responseText);
}
} else {
if (typeof settings.error === 'function') {
settings.error.call(responseContext, XMLHTTP.responseText, XMLHTTP.status);
}
}
}
};
if (isFormData) {
// Sending FormData
XMLHTTP.send(settings.data);
} else {
// POST requests
XMLHTTP.send(encodedString);
}
return XMLHTTP;
}
};
// module.exports = (function (core) {
//
// let editor = codex.editor;
//
// /**
// * @public
// *
// * Editor preparing method
// * @return Promise
// */
// core.prepare = function (userSettings) {
//
// return new Promise(function (resolve, reject) {
//
// if ( userSettings ) {
//
// editor.settings.tools = userSettings.tools || editor.settings.tools;
//
// }
//
// if (userSettings.data) {
//
// editor.state.blocks = userSettings.data;
//
// }
//
// if (userSettings.initialBlockPlugin) {
//
// editor.settings.initialBlockPlugin = userSettings.initialBlockPlugin;
//
// }
//
// if (userSettings.sanitizer) {
//
// editor.settings.sanitizer = userSettings.sanitizer;
//
// }
//
// editor.hideToolbar = userSettings.hideToolbar;
//
// editor.settings.placeholder = userSettings.placeholder || '';
//
// editor.nodes.holder = document.getElementById(userSettings.holderId || editor.settings.holderId);
//
// if (typeof editor.nodes.holder === undefined || editor.nodes.holder === null) {
//
// reject(Error("Holder wasn't found by ID: #" + userSettings.holderId));
//
// } else {
//
// resolve();
//
// }
//
// });
//
// };
//
// /**
// * @protected
@ -192,145 +284,6 @@ module.exports = class Core {
// };
//
// /**
// * Native Ajax
// * @param {String} settings.url - request URL
// * @param {function} settings.beforeSend - returned value will be passed as context to the Success, Error and Progress callbacks
// * @param {function} settings.success
// * @param {function} settings.progress
// */
// core.ajax = function (settings) {
//
// if (!settings || !settings.url) {
//
// return;
//
// }
//
// var XMLHTTP = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'),
// encodedString,
// isFormData,
// prop;
//
//
// settings.async = true;
// settings.type = settings.type || 'GET';
// settings.data = settings.data || '';
// settings['content-type'] = settings['content-type'] || 'application/json; charset=utf-8';
//
// if (settings.type == 'GET' && settings.data) {
//
// settings.url = /\?/.test(settings.url) ? settings.url + '&' + settings.data : settings.url + '?' + settings.data;
//
// } else {
//
// encodedString = '';
// for(prop in settings.data) {
//
// encodedString += (prop + '=' + encodeURIComponent(settings.data[prop]) + '&');
//
// }
//
// }
//
// if (settings.withCredentials) {
//
// XMLHTTP.withCredentials = true;
//
// }
//
// /**
// * Value returned in beforeSend funtion will be passed as context to the other response callbacks
// * If beforeSend returns false, AJAX will be blocked
// */
// let responseContext,
// beforeSendResult;
//
// if (typeof settings.beforeSend === 'function') {
//
// beforeSendResult = settings.beforeSend.call();
//
// if (beforeSendResult === false) {
//
// return;
//
// }
//
// }
//
// XMLHTTP.open( settings.type, settings.url, settings.async );
//
// /**
// * If we send FormData, we need no content-type header
// */
// isFormData = isFormData_(settings.data);
//
// if (!isFormData) {
//
// if (settings.type !== 'POST') {
//
// XMLHTTP.setRequestHeader('Content-type', settings['content-type']);
//
// } else {
//
// XMLHTTP.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
//
// }
//
// }
//
// XMLHTTP.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
//
// responseContext = beforeSendResult || XMLHTTP;
//
// if (typeof settings.progress === 'function') {
//
// XMLHTTP.upload.onprogress = settings.progress.bind(responseContext);
//
// }
//
// XMLHTTP.onreadystatechange = function () {
//
// if (XMLHTTP.readyState === 4) {
//
// if (XMLHTTP.status === 200) {
//
// if (typeof settings.success === 'function') {
//
// settings.success.call(responseContext, XMLHTTP.responseText);
//
// }
//
// } else {
//
// if (typeof settings.error === 'function') {
//
// settings.error.call(responseContext, XMLHTTP.responseText, XMLHTTP.status);
//
// }
//
// }
//
// }
//
// };
//
// if (isFormData) {
//
// // Sending FormData
// XMLHTTP.send(settings.data);
//
// } else {
//
// // POST requests
// XMLHTTP.send(encodedString);
//
// }
//
// return XMLHTTP;
//
// };
//
// /**
// * Appends script to head of document
// * @return Promise
// */

63
src/modules/dom.js Normal file
View file

@ -0,0 +1,63 @@
module.exports = class Dom {
/**
* Draws element with class and properties
*
* @param {String} el - Element name
* @param {Array} classList - array of CSS classes
* @param {Object} properties - list of objects/properties
*
* @returns {Element}
*/
make(el, classList, properties) {
let element = document.createElement(el);
classList.forEach(function (className) {
element.classList.add(className);
});
for(property in properties) {
element.property = properties[property];
}
return element;
}
/**
* Selector Decorator
*
* Returns first match
*
* @param {Element} el - element we searching inside. Default - DOM Document
* @param {String} selector - searching string
*
* @returns {Element}
*/
find(el = document, selector) {
return el.querySelector(selector);
}
/**
* Selector Decorator.
*
* Returns all matches
*
* @param {Element} el - element we searching inside. Default - DOM Document
* @param {String} selector - searching string
* @returns {NodeList}
*/
findAll(el = document, selector) {
return el.querySelectorAll(selector);
}
};

26
src/modules/draw.js
View file

@ -7,32 +7,6 @@
module.exports = (function (draw) {
/**
* Base editor wrapper
*/
draw.wrapper = function () {
var wrapper = document.createElement('div');
wrapper.className += 'codex-editor';
return wrapper;
};
/**
* Content-editable holder
*/
draw.redactor = function () {
var redactor = document.createElement('div');
redactor.className += 'ce-redactor';
return redactor;
};
draw.ceBlock = function () {
var block = document.createElement('DIV');

159
src/modules/ui.js
View file

@ -1,15 +1,97 @@
/**
* Module UI
*
* @type {UI}
*/
let className = {
/**
* @const {string} BLOCK_CLASSNAME - redactor blocks name
*/
BLOCK_CLASSNAME : 'ce-block',
/**
* @const {String} wrapper for plugins content
*/
BLOCK_CONTENT : 'ce-block__content',
/**
* @const {String} BLOCK_STRETCHED - makes block stretched
*/
BLOCK_STRETCHED : 'ce-block--stretched',
/**
* @const {String} BLOCK_HIGHLIGHTED - adds background
*/
BLOCK_HIGHLIGHTED : 'ce-block--focused',
/**
* @const {String} - for all default settings
*/
SETTINGS_ITEM : 'ce-settings__item'
};
let CSS_ = {
editorWrapper : 'codex-editor',
editorZone : 'ce-redactor'
};
module.exports = class UI {
constructor(Editor) {
this.Editor = Editor;
this.modules = this.Editor.modules;
}
/**
* @protected
*
* Making main interface
*/
prepare() {
return new Promise(function(resolve, reject) {
return new Promise(function (resolve, reject) {
let wrapper = this.modules.dom.make('DIV', [ CSS_.editorWrapper ], {}),
redactor = this.modules.dom.make('DIV', [ CSS_.editorZone ], {}),
toolbar = makeToolBar_();
wrapper.appendChild(toolbar);
wrapper.appendChild(redactor);
/** Save created ui-elements to static nodes state */
editor.nodes.wrapper = wrapper;
editor.nodes.redactor = redactor;
/** Append editor wrapper with redactor zone into holder */
editor.nodes.holder.appendChild(wrapper);
resolve();
})
/** Add toolbox tools */
.then(addTools_)
/** Make container for inline toolbar */
.then(makeInlineToolbar_)
/** Add inline toolbar tools */
.then(addInlineToolbarTools_)
/** Draw wrapper for notifications */
.then(makeNotificationHolder_)
/** Add eventlisteners to redactor elements */
.then(bindEvents_)
.catch( function () {
editor.core.log("Can't draw editor interface");
});
}
@ -29,82 +111,9 @@ module.exports = class UI {
// /**
// * Basic editor classnames
// */
// ui.className = {
//
// /**
// * @const {string} BLOCK_CLASSNAME - redactor blocks name
// */
// BLOCK_CLASSNAME : 'ce-block',
//
// /**
// * @const {String} wrapper for plugins content
// */
// BLOCK_CONTENT : 'ce-block__content',
//
// /**
// * @const {String} BLOCK_STRETCHED - makes block stretched
// */
// BLOCK_STRETCHED : 'ce-block--stretched',
//
// /**
// * @const {String} BLOCK_HIGHLIGHTED - adds background
// */
// BLOCK_HIGHLIGHTED : 'ce-block--focused',
//
// /**
// * @const {String} - for all default settings
// */
// SETTINGS_ITEM : 'ce-settings__item'
//
// };
//
// /**
// * @protected
// *
// * Making main interface
// */
// ui.prepare = function () {
//
// return new Promise(function (resolve) {
//
// let wrapper = editor.draw.wrapper(),
// redactor = editor.draw.redactor(),
// toolbar = makeToolBar_();
//
// wrapper.appendChild(toolbar);
// wrapper.appendChild(redactor);
//
// /** Save created ui-elements to static nodes state */
// editor.nodes.wrapper = wrapper;
// editor.nodes.redactor = redactor;
//
// /** Append editor wrapper with redactor zone into holder */
// editor.nodes.holder.appendChild(wrapper);
//
// resolve();
//
// })
//
// /** Add toolbox tools */
// .then(addTools_)
//
// /** Make container for inline toolbar */
// .then(makeInlineToolbar_)
//
// /** Add inline toolbar tools */
// .then(addInlineToolbarTools_)
//
// /** Draw wrapper for notifications */
// .then(makeNotificationHolder_)
//
// /** Add eventlisteners to redactor elements */
// .then(bindEvents_)
//
// .catch( function () {
//
// editor.core.log("Can't draw editor interface");
//
// });
//
// };
//

2
webpack.config.js
View file

@ -70,7 +70,7 @@ module.exports = {
// }),
/** Block biuld if errors found */
new webpack.NoErrorsPlugin(),
// new webpack.NoErrorsPlugin(),
],