mirror of
https://github.com/codex-team/editor.js
synced 2024-06-23 16:00:44 +02:00
Merge remote-tracking branch 'refs/remotes/origin/master' into destroy-module
This commit is contained in:
commit
f9bd88743d
|
@ -238,7 +238,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cdx-plugin-settings__item {
|
.cdx-plugin-settings--horisontal .cdx-plugin-settings__item {
|
||||||
flex: 1 0 auto;
|
flex: 1 0 auto;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
@ -275,7 +275,8 @@
|
||||||
border-bottom: 1px solid #e7e9f1;
|
border-bottom: 1px solid #e7e9f1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ce-settings__item i {
|
.ce-settings__item i,
|
||||||
|
.cdx-plugin-settings__item i {
|
||||||
min-width: 16px;
|
min-width: 16px;
|
||||||
margin-right: 1.3em;
|
margin-right: 1.3em;
|
||||||
}
|
}
|
||||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
19
example.html
19
example.html
|
@ -121,14 +121,15 @@
|
||||||
iconClassname: 'ce-icon-list-bullet',
|
iconClassname: 'ce-icon-list-bullet',
|
||||||
make: list.make,
|
make: list.make,
|
||||||
appendCallback: null,
|
appendCallback: null,
|
||||||
settings: list.makeSettings,
|
makeSettings: list.makeSettings,
|
||||||
render: list.render,
|
render: list.render,
|
||||||
validate: list.validate,
|
validate: list.validate,
|
||||||
save: list.save,
|
save: list.save,
|
||||||
destroy: list.destroy,
|
destroy: list.destroy,
|
||||||
displayInToolbox: true,
|
displayInToolbox: true,
|
||||||
showInlineToolbar: true,
|
showInlineToolbar: true,
|
||||||
enableLineBreaks: true
|
enableLineBreaks: true,
|
||||||
|
allowedToPaste: true,
|
||||||
},
|
},
|
||||||
quote_styled: {
|
quote_styled: {
|
||||||
type: 'quote_styled',
|
type: 'quote_styled',
|
||||||
|
@ -202,20 +203,6 @@
|
||||||
text : 'Привет от CodeX'
|
text : 'Привет от CodeX'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
type : 'tweet',
|
|
||||||
data : {
|
|
||||||
"media" : true,
|
|
||||||
"conversation" : false,
|
|
||||||
"user" : null,
|
|
||||||
"id" : 12312312312,
|
|
||||||
"text" : null,
|
|
||||||
"created_at" : null,
|
|
||||||
"status_url" : 'ertertert',
|
|
||||||
"caption" : null
|
|
||||||
},
|
|
||||||
cover : false
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
type : 'paragraph',
|
type : 'paragraph',
|
||||||
data : {
|
data : {
|
||||||
|
|
|
@ -810,8 +810,8 @@ module.exports = (function (callbacks) {
|
||||||
/** Prevent default behaviour */
|
/** Prevent default behaviour */
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
/** Allow paste when event target is editable */
|
/** Allow paste when event target placed in Editable element */
|
||||||
if (event.target.contentEditable != 'true') {
|
if (!editor.content.getEditableParent(event.target)) {
|
||||||
|
|
||||||
return;
|
return;
|
||||||
|
|
||||||
|
|
|
@ -868,6 +868,23 @@ module.exports = (function (content) {
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Finds closest Contenteditable parent from Element
|
||||||
|
* @param {Element} node element looking from
|
||||||
|
* @return {Element} node contenteditable
|
||||||
|
*/
|
||||||
|
content.getEditableParent = function (node) {
|
||||||
|
|
||||||
|
while (node && node.contentEditable != 'true') {
|
||||||
|
|
||||||
|
node = node.parentNode;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
return node;
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
return content;
|
return content;
|
||||||
|
|
||||||
})({});
|
})({});
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "codex.editor",
|
"name": "codex.editor",
|
||||||
"version": "1.4.8",
|
"version": "1.4.10",
|
||||||
"description": "Codex Editor. Native JS, based on API and Open Source",
|
"description": "Codex Editor. Native JS, based on API and Open Source",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|
|
@ -1,32 +1,11 @@
|
||||||
.ce-list {
|
.cdx-plugin-list {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: .5em 0;
|
padding: .5em 0;
|
||||||
|
line-height: 1.7em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ce_plugin_list--settings{
|
.cdx-plugin-list__li{
|
||||||
white-space: nowrap;
|
display: list-item;
|
||||||
}
|
|
||||||
|
|
||||||
.ce_plugin_list--select_button{
|
|
||||||
display: block;
|
|
||||||
color: #306ac7;
|
|
||||||
cursor: pointer;
|
|
||||||
line-height: 1.3em;
|
|
||||||
}
|
|
||||||
.ce_plugin_list--select_button:not(:last-of-type){
|
|
||||||
margin-bottom: 0.9em;
|
|
||||||
}
|
|
||||||
.ce_plugin_list--select_button:hover{
|
|
||||||
color: #a1b4ec;
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* List style settigns icons
|
|
||||||
*/
|
|
||||||
.ce_plugin_list--select_button i{
|
|
||||||
margin-right: 1.3em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ce-list li{
|
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border: 1px solid #ebeef3;
|
border: 1px solid #ebeef3;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
@ -35,3 +14,23 @@
|
||||||
list-style-position: outside;
|
list-style-position: outside;
|
||||||
margin-left: 1.1em;
|
margin-left: 1.1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.cdx-plugin-list p {
|
||||||
|
margin: 0.6em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cdx-plugin-list p:first-of-type {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cdx-plugin-list p:last-of-type {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* List style settigns icons
|
||||||
|
*/
|
||||||
|
.ce_plugin_list--select_button i{
|
||||||
|
margin-right: 1.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
@ -4,21 +4,29 @@
|
||||||
*/
|
*/
|
||||||
var list = (function(list_plugin) {
|
var list = (function(list_plugin) {
|
||||||
|
|
||||||
var baseClass = "tool-list";
|
/**
|
||||||
|
* CSS class names
|
||||||
var elementClasses = {
|
*/
|
||||||
li : "tool-list-li"
|
var elementClasses_ = {
|
||||||
|
pluginWrapper: 'cdx-plugin-list',
|
||||||
|
li: 'cdx-plugin-list__li',
|
||||||
|
settings: 'cdx-plugin-list__settings',
|
||||||
|
settingsItem: 'cdx-plugin-settings__item'
|
||||||
};
|
};
|
||||||
|
|
||||||
|
var LIST_ITEM_TAG = 'LI';
|
||||||
|
|
||||||
var ui = {
|
var ui = {
|
||||||
|
|
||||||
make: function (blockType) {
|
make: function (blockType) {
|
||||||
|
|
||||||
var wrapper = this.block(blockType || 'UL', baseClass);
|
var wrapper = this.block(blockType || 'UL', elementClasses_.pluginWrapper);
|
||||||
|
|
||||||
wrapper.dataset.type = 'UL';
|
wrapper.dataset.type = blockType;
|
||||||
wrapper.contentEditable = true;
|
wrapper.contentEditable = true;
|
||||||
|
|
||||||
|
wrapper.addEventListener('keydown', methods_.keyDown);
|
||||||
|
|
||||||
return wrapper;
|
return wrapper;
|
||||||
|
|
||||||
},
|
},
|
||||||
|
@ -36,20 +44,20 @@ var list = (function(list_plugin) {
|
||||||
button: function (buttonType) {
|
button: function (buttonType) {
|
||||||
|
|
||||||
var types = {
|
var types = {
|
||||||
unordered: '<i class="ce-icon-list-bullet"></i>Обычный список',
|
unordered: '<i class="ce-icon-list-bullet"></i>Обычный',
|
||||||
ordered: '<i class="ce-icon-list-numbered"></i>Нумерованный список'
|
ordered: '<i class="ce-icon-list-numbered"></i>Нумерованный'
|
||||||
},
|
},
|
||||||
button = document.createElement('SPAN');
|
button = document.createElement('DIV');
|
||||||
|
|
||||||
button.innerHTML = types[buttonType];
|
button.innerHTML = types[buttonType];
|
||||||
|
|
||||||
button.className = 'ce_plugin_list--select_button';
|
button.classList.add(elementClasses_.settingsItem);
|
||||||
|
|
||||||
return button;
|
return button;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
var methods = {
|
var methods_ = {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Changes block type => OL or UL
|
* Changes block type => OL or UL
|
||||||
|
@ -64,31 +72,56 @@ var list = (function(list_plugin) {
|
||||||
|
|
||||||
newEditable.dataset.type = blockType;
|
newEditable.dataset.type = blockType;
|
||||||
newEditable.innerHTML = oldEditable.innerHTML;
|
newEditable.innerHTML = oldEditable.innerHTML;
|
||||||
newEditable.classList.add('ce-list');
|
newEditable.classList.add(elementClasses_.pluginWrapper);
|
||||||
|
|
||||||
codex.editor.content.switchBlock(currentBlock, newEditable, 'list');
|
codex.editor.content.switchBlock(currentBlock, newEditable, 'list');
|
||||||
}
|
},
|
||||||
};
|
keyDown: function (e) {
|
||||||
|
|
||||||
|
var controlKeyPressed = e.ctrlKey || e.metaKey,
|
||||||
|
keyCodeForA = 65;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Make initial header block
|
* If CTRL+A (CMD+A) was pressed, we should select only one list item,
|
||||||
* @param {object} JSON with block data
|
* not all <OL> or <UI>
|
||||||
* @return {Element} element to append
|
|
||||||
*/
|
*/
|
||||||
list_plugin.make = function () {
|
if (controlKeyPressed && e.keyCode == keyCodeForA) {
|
||||||
|
|
||||||
var tag = ui.make(),
|
e.preventDefault();
|
||||||
li = ui.block("li", "tool-link-li");
|
|
||||||
|
|
||||||
var br = document.createElement("br");
|
/**
|
||||||
|
* Select <LI> content
|
||||||
|
*/
|
||||||
|
methods_.selectListItem();
|
||||||
|
|
||||||
li.appendChild(br);
|
}
|
||||||
tag.appendChild(li);
|
|
||||||
|
|
||||||
tag.classList.add('ce-list');
|
},
|
||||||
|
|
||||||
return tag;
|
/**
|
||||||
|
* Select all content of <LI> with caret
|
||||||
|
*/
|
||||||
|
selectListItem : function () {
|
||||||
|
|
||||||
|
var selection = window.getSelection(),
|
||||||
|
currentSelectedNode = selection.anchorNode.parentNode,
|
||||||
|
range = new Range();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Search for <LI> element
|
||||||
|
*/
|
||||||
|
while ( currentSelectedNode && currentSelectedNode.tagName != LIST_ITEM_TAG ) {
|
||||||
|
|
||||||
|
currentSelectedNode = currentSelectedNode.parentNode;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
range.selectNodeContents(currentSelectedNode);
|
||||||
|
|
||||||
|
selection.removeAllRanges();
|
||||||
|
selection.addRange(range);
|
||||||
|
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -96,22 +129,30 @@ var list = (function(list_plugin) {
|
||||||
*/
|
*/
|
||||||
list_plugin.render = function (data) {
|
list_plugin.render = function (data) {
|
||||||
|
|
||||||
var type = data.type == 'ordered' ? 'OL' : 'UL',
|
var type = data && data.type == 'ordered' ? 'OL' : 'UL',
|
||||||
tag = ui.make(type);
|
tag = ui.make(type),
|
||||||
|
newLi;
|
||||||
|
|
||||||
tag.classList.add('ce-list');
|
if (data && data.items) {
|
||||||
|
|
||||||
data.items.forEach(function (element, index, array) {
|
data.items.forEach(function (element, index, array) {
|
||||||
|
|
||||||
var newLi = ui.block("li", listTool.elementClasses.li);
|
newLi = ui.block('li', elementClasses_.li);
|
||||||
|
|
||||||
newLi.innerHTML = element;
|
newLi.innerHTML = element;
|
||||||
|
|
||||||
tag.dataset.type = data.type;
|
|
||||||
tag.appendChild(newLi);
|
tag.appendChild(newLi);
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
newLi = ui.block('li', elementClasses_.li);
|
||||||
|
|
||||||
|
tag.appendChild(newLi);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
return tag;
|
return tag;
|
||||||
|
|
||||||
};
|
};
|
||||||
|
@ -119,7 +160,7 @@ var list = (function(list_plugin) {
|
||||||
list_plugin.validate = function(data) {
|
list_plugin.validate = function(data) {
|
||||||
|
|
||||||
var items = data.items.every(function(item){
|
var items = data.items.every(function(item){
|
||||||
return item.trim() != '';
|
return item.trim() !== '';
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!items)
|
if (!items)
|
||||||
|
@ -150,24 +191,23 @@ var list = (function(list_plugin) {
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
list_plugin.makeSettings = function(data) {
|
list_plugin.makeSettings = function () {
|
||||||
|
|
||||||
var holder = document.createElement('DIV'),
|
var holder = document.createElement('DIV');
|
||||||
selectTypeButton;
|
|
||||||
|
|
||||||
/** Add holder classname */
|
/** Add holder classname */
|
||||||
holder.className = 'ce_plugin_list--settings';
|
holder.className = elementClasses_.settings;
|
||||||
|
|
||||||
var orderedButton = ui.button("ordered"),
|
var orderedButton = ui.button("ordered"),
|
||||||
unorderedButton = ui.button("unordered");
|
unorderedButton = ui.button("unordered");
|
||||||
|
|
||||||
orderedButton.addEventListener('click', function (event) {
|
orderedButton.addEventListener('click', function (event) {
|
||||||
methods.changeBlockStyle(event, 'OL');
|
methods_.changeBlockStyle(event, 'OL');
|
||||||
codex.editor.toolbar.settings.close();
|
codex.editor.toolbar.settings.close();
|
||||||
});
|
});
|
||||||
|
|
||||||
unorderedButton.addEventListener('click', function (event) {
|
unorderedButton.addEventListener('click', function (event) {
|
||||||
methods.changeBlockStyle(event, 'UL');
|
methods_.changeBlockStyle(event, 'UL');
|
||||||
codex.editor.toolbar.settings.close();
|
codex.editor.toolbar.settings.close();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue