mirror of
https://github.com/codex-team/editor.js
synced 2024-06-26 17:30:48 +02:00
c3ee7560f1
* cover restoring fixed * upd * fetch fixed in safari * updated * plugins * plugins ready * code improved * fixed bug with backspace * improved architecture * Versioning (#102) * start versioning * codex.version * eslint settings * versioning improved * cover restoring and fetch function fixed (#101) * cover restoring fixed * upd * fetch fixed in safari * updated * plugins * plugins ready * code improved * fixed bug with backspace * improved architecture * new sanitize method (#103) * new sanitize method Need to fix caret position * removed console logs * version updated * eslint style * caret position * big fixed on sanitize method * sanitize improved, using observers * sanitize: using html-janitor * fixes * last fixes, code improved after review * updated * new bundle * webpack config improved * upd * upd * upd * upd * clear from conflicts * upd * upd
315 lines
5.9 KiB
JavaScript
315 lines
5.9 KiB
JavaScript
/**
|
|
* Codex Editor Draw module
|
|
*
|
|
* @author Codex Team
|
|
* @version 1.0.
|
|
*/
|
|
|
|
var draw = (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');
|
|
|
|
block.className += 'ce_block';
|
|
|
|
return block;
|
|
|
|
};
|
|
|
|
/**
|
|
* Empty toolbar with toggler
|
|
*/
|
|
draw.toolbar = function () {
|
|
|
|
var bar = document.createElement('div');
|
|
|
|
bar.className += 'ce-toolbar';
|
|
|
|
return bar;
|
|
};
|
|
|
|
draw.toolbarContent = function() {
|
|
|
|
var wrapper = document.createElement('DIV');
|
|
wrapper.classList.add('ce-toolbar__content');
|
|
|
|
return wrapper;
|
|
};
|
|
|
|
/**
|
|
* Inline toolbar
|
|
*/
|
|
draw.inlineToolbar = function() {
|
|
|
|
var bar = document.createElement('DIV');
|
|
|
|
bar.className += 'ce-toolbar-inline';
|
|
|
|
return bar;
|
|
|
|
};
|
|
|
|
/**
|
|
* Wrapper for inline toobar buttons
|
|
*/
|
|
draw.inlineToolbarButtons = function() {
|
|
|
|
var wrapper = document.createElement('DIV');
|
|
|
|
wrapper.className += 'ce-toolbar-inline__buttons';
|
|
|
|
return wrapper;
|
|
};
|
|
|
|
/**
|
|
* For some actions
|
|
*/
|
|
draw.inlineToolbarActions = function() {
|
|
|
|
var wrapper = document.createElement('DIV');
|
|
|
|
wrapper.className += 'ce-toolbar-inline__actions';
|
|
|
|
return wrapper;
|
|
|
|
};
|
|
|
|
draw.inputForLink = function() {
|
|
|
|
var input = document.createElement('INPUT');
|
|
|
|
input.type = 'input';
|
|
input.className += 'inputForLink';
|
|
input.placeholder = 'Type URL ...';
|
|
input.setAttribute('form', 'defaultForm');
|
|
|
|
input.setAttribute('autofocus', 'autofocus');
|
|
|
|
return input;
|
|
|
|
};
|
|
|
|
/**
|
|
* Block with notifications
|
|
*/
|
|
draw.alertsHolder = function() {
|
|
|
|
var block = document.createElement('div');
|
|
|
|
block.classList.add('ce_notifications-block');
|
|
|
|
return block;
|
|
|
|
};
|
|
|
|
/**
|
|
* @todo Desc
|
|
*/
|
|
draw.blockButtons = function() {
|
|
|
|
var block = document.createElement('div');
|
|
|
|
block.className += 'ce-toolbar__actions';
|
|
|
|
return block;
|
|
};
|
|
|
|
/**
|
|
* Block settings panel
|
|
*/
|
|
draw.blockSettings = function () {
|
|
|
|
var settings = document.createElement('div');
|
|
|
|
settings.className += 'ce-settings';
|
|
|
|
return settings;
|
|
};
|
|
|
|
draw.defaultSettings = function() {
|
|
|
|
var div = document.createElement('div');
|
|
|
|
div.classList.add('ce-settings_default');
|
|
|
|
return div;
|
|
};
|
|
|
|
draw.pluginsSettings = function() {
|
|
|
|
var div = document.createElement('div');
|
|
|
|
div.classList.add('ce-settings_plugin');
|
|
|
|
return div;
|
|
|
|
};
|
|
|
|
draw.plusButton = function() {
|
|
|
|
var button = document.createElement('span');
|
|
|
|
button.className = 'ce-toolbar__plus';
|
|
// button.innerHTML = '<i class="ce-icon-plus"></i>';
|
|
|
|
return button;
|
|
};
|
|
|
|
/**
|
|
* Settings button in toolbar
|
|
*/
|
|
draw.settingsButton = function () {
|
|
|
|
var toggler = document.createElement('span');
|
|
|
|
toggler.className = 'ce-toolbar__settings-btn';
|
|
|
|
/** Toggler button*/
|
|
toggler.innerHTML = '<i class="ce-icon-cog"></i>';
|
|
|
|
return toggler;
|
|
};
|
|
|
|
/**
|
|
* Redactor tools wrapper
|
|
*/
|
|
|
|
draw.toolbox = function() {
|
|
|
|
var wrapper = document.createElement('div');
|
|
|
|
wrapper.className = 'ce-toolbar__tools';
|
|
|
|
return wrapper;
|
|
};
|
|
|
|
/**
|
|
* @protected
|
|
*
|
|
* Draws tool buttons for toolbox
|
|
*
|
|
* @param {String} type
|
|
* @param {String} classname
|
|
* @returns {Element}
|
|
*/
|
|
draw.toolbarButton = function (type, classname) {
|
|
|
|
var button = document.createElement("li"),
|
|
tool_icon = document.createElement("i"),
|
|
tool_title = document.createElement("span");
|
|
|
|
button.dataset.type = type;
|
|
button.setAttribute('title', type);
|
|
|
|
tool_icon.classList.add(classname);
|
|
tool_title.classList.add('ce_toolbar_tools--title');
|
|
|
|
|
|
button.appendChild(tool_icon);
|
|
button.appendChild(tool_title);
|
|
|
|
return button;
|
|
|
|
};
|
|
|
|
/**
|
|
* @protected
|
|
*
|
|
* Draws tools for inline toolbar
|
|
*
|
|
* @param {String} type
|
|
* @param {String} classname
|
|
*/
|
|
draw.toolbarButtonInline = function(type, classname) {
|
|
var button = document.createElement("BUTTON"),
|
|
tool_icon = document.createElement("I");
|
|
|
|
button.type = "button";
|
|
button.dataset.type = type;
|
|
tool_icon.classList.add(classname);
|
|
|
|
button.appendChild(tool_icon);
|
|
|
|
return button;
|
|
};
|
|
|
|
/**
|
|
* Redactor block
|
|
*/
|
|
draw.block = function (tagName, content) {
|
|
|
|
var node = document.createElement(tagName);
|
|
|
|
node.innerHTML = content || '';
|
|
|
|
return node;
|
|
|
|
};
|
|
|
|
/**
|
|
* Creates Node with passed tagName and className
|
|
* @param {string} tagName
|
|
* @param {string} className
|
|
* @param {object} properties - allow to assign properties
|
|
*/
|
|
draw.node = function( tagName , className , properties ){
|
|
|
|
var el = document.createElement( tagName );
|
|
|
|
if ( className ) el.className = className;
|
|
|
|
if ( properties ) {
|
|
|
|
for (var name in properties){
|
|
el[name] = properties[name];
|
|
}
|
|
}
|
|
|
|
return el;
|
|
};
|
|
|
|
draw.pluginsRender = function(type, content) {
|
|
|
|
return {
|
|
type : type,
|
|
block : cEditor.tools[type].render({
|
|
text : content
|
|
})
|
|
};
|
|
};
|
|
|
|
return draw;
|
|
|
|
})({});
|
|
|
|
module.exports = draw;
|
|
|
|
|