mirror of
https://github.com/codex-team/editor.js
synced 2024-04-28 12:52:57 +02:00
805 lines
19 KiB
JavaScript
805 lines
19 KiB
JavaScript
/**
|
|
* Codex Editor Content Module
|
|
* Works with DOM
|
|
*
|
|
* @module Codex Editor content module
|
|
*
|
|
* @author Codex Team
|
|
* @version 1.3.13
|
|
*
|
|
* @description Module works with Elements that have been appended to the main DOM
|
|
*/
|
|
|
|
module.exports = (function (content) {
|
|
|
|
let editor = codex.editor;
|
|
|
|
/**
|
|
* Links to current active block
|
|
* @type {null | Element}
|
|
*/
|
|
content.currentNode = null;
|
|
|
|
/**
|
|
* clicked in redactor area
|
|
* @type {null | Boolean}
|
|
*/
|
|
content.editorAreaHightlighted = null;
|
|
|
|
/**
|
|
* @deprecated
|
|
* Synchronizes redactor with original textarea
|
|
*/
|
|
content.sync = function () {
|
|
|
|
editor.core.log('syncing...');
|
|
|
|
/**
|
|
* Save redactor content to editor.state
|
|
*/
|
|
editor.state.html = editor.nodes.redactor.innerHTML;
|
|
|
|
};
|
|
|
|
/**
|
|
* Appends background to the block
|
|
*
|
|
* @description add CSS class to highlight visually first-level block area
|
|
*/
|
|
content.markBlock = function () {
|
|
|
|
editor.content.currentNode.classList.add(editor.ui.className.BLOCK_HIGHLIGHTED);
|
|
|
|
};
|
|
|
|
/**
|
|
* Clear background
|
|
*
|
|
* @description clears styles that highlights block
|
|
*/
|
|
content.clearMark = function () {
|
|
|
|
if (editor.content.currentNode) {
|
|
|
|
editor.content.currentNode.classList.remove(editor.ui.className.BLOCK_HIGHLIGHTED);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
/**
|
|
* Finds first-level block
|
|
*
|
|
* @param {Element} node - selected or clicked in redactors area node
|
|
* @protected
|
|
*
|
|
* @description looks for first-level block.
|
|
* gets parent while node is not first-level
|
|
*/
|
|
content.getFirstLevelBlock = function (node) {
|
|
|
|
if (!editor.core.isDomNode(node)) {
|
|
|
|
node = node.parentNode;
|
|
|
|
}
|
|
|
|
if (node === editor.nodes.redactor || node === document.body) {
|
|
|
|
return null;
|
|
|
|
} else {
|
|
|
|
while(!node.classList.contains(editor.ui.className.BLOCK_CLASSNAME)) {
|
|
|
|
node = node.parentNode;
|
|
|
|
}
|
|
|
|
return node;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
/**
|
|
* Trigger this event when working node changed
|
|
* @param {Element} targetNode - first-level of this node will be current
|
|
* @protected
|
|
*
|
|
* @description If targetNode is first-level then we set it as current else we look for parents to find first-level
|
|
*/
|
|
content.workingNodeChanged = function (targetNode) {
|
|
|
|
/** Clear background from previous marked block before we change */
|
|
editor.content.clearMark();
|
|
|
|
if (!targetNode) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
content.currentNode = content.getFirstLevelBlock(targetNode);
|
|
|
|
};
|
|
|
|
/**
|
|
* Replaces one redactor block with another
|
|
* @protected
|
|
* @param {Element} targetBlock - block to replace. Mostly currentNode.
|
|
* @param {Element} newBlock
|
|
* @param {string} newBlockType - type of new block; we need to store it to data-attribute
|
|
*
|
|
* [!] Function does not saves old block content.
|
|
* You can get it manually and pass with newBlock.innerHTML
|
|
*/
|
|
content.replaceBlock = function (targetBlock, newBlock) {
|
|
|
|
if (!targetBlock || !newBlock) {
|
|
|
|
editor.core.log('replaceBlock: missed params');
|
|
return;
|
|
|
|
}
|
|
|
|
/** If target-block is not a frist-level block, then we iterate parents to find it */
|
|
while(!targetBlock.classList.contains(editor.ui.className.BLOCK_CLASSNAME)) {
|
|
|
|
targetBlock = targetBlock.parentNode;
|
|
|
|
}
|
|
|
|
/** Replacing */
|
|
editor.nodes.redactor.replaceChild(newBlock, targetBlock);
|
|
|
|
/**
|
|
* Set new node as current
|
|
*/
|
|
editor.content.workingNodeChanged(newBlock);
|
|
|
|
/**
|
|
* Add block handlers
|
|
*/
|
|
editor.ui.addBlockHandlers(newBlock);
|
|
|
|
/**
|
|
* Save changes
|
|
*/
|
|
editor.ui.saveInputs();
|
|
|
|
};
|
|
|
|
/**
|
|
* @protected
|
|
*
|
|
* Inserts new block to redactor
|
|
* Wrapps block into a DIV with BLOCK_CLASSNAME class
|
|
*
|
|
* @param blockData {object}
|
|
* @param blockData.block {Element} element with block content
|
|
* @param blockData.type {string} block plugin
|
|
* @param needPlaceCaret {bool} pass true to set caret in new block
|
|
*
|
|
*/
|
|
content.insertBlock = function ( blockData, needPlaceCaret ) {
|
|
|
|
var workingBlock = editor.content.currentNode,
|
|
newBlockContent = blockData.block,
|
|
blockType = blockData.type,
|
|
isStretched = blockData.stretched;
|
|
|
|
var newBlock = composeNewBlock_(newBlockContent, blockType, isStretched);
|
|
|
|
if (workingBlock) {
|
|
|
|
editor.core.insertAfter(workingBlock, newBlock);
|
|
|
|
} else {
|
|
|
|
/**
|
|
* If redactor is empty, append as first child
|
|
*/
|
|
editor.nodes.redactor.appendChild(newBlock);
|
|
|
|
}
|
|
|
|
/**
|
|
* Block handler
|
|
*/
|
|
editor.ui.addBlockHandlers(newBlock);
|
|
|
|
/**
|
|
* Set new node as current
|
|
*/
|
|
editor.content.workingNodeChanged(newBlock);
|
|
|
|
/**
|
|
* Save changes
|
|
*/
|
|
editor.ui.saveInputs();
|
|
|
|
|
|
if ( needPlaceCaret ) {
|
|
|
|
/**
|
|
* If we don't know input index then we set default value -1
|
|
*/
|
|
var currentInputIndex = editor.caret.getCurrentInputIndex() || -1;
|
|
|
|
|
|
if (currentInputIndex == -1) {
|
|
|
|
|
|
var editableElement = newBlock.querySelector('[contenteditable]'),
|
|
emptyText = document.createTextNode('');
|
|
|
|
editableElement.appendChild(emptyText);
|
|
editor.caret.set(editableElement, 0, 0);
|
|
|
|
editor.toolbar.move();
|
|
editor.toolbar.showPlusButton();
|
|
|
|
|
|
} else {
|
|
|
|
if (currentInputIndex === editor.state.inputs.length - 1)
|
|
return;
|
|
|
|
/** Timeout for browsers execution */
|
|
window.setTimeout(function () {
|
|
|
|
/** Setting to the new input */
|
|
editor.caret.setToNextBlock(currentInputIndex);
|
|
editor.toolbar.move();
|
|
editor.toolbar.open();
|
|
|
|
}, 10);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
/**
|
|
* Block is inserted, wait for new click that defined focusing on editors area
|
|
* @type {boolean}
|
|
*/
|
|
content.editorAreaHightlighted = false;
|
|
|
|
};
|
|
|
|
/**
|
|
* Replaces blocks with saving content
|
|
* @protected
|
|
* @param {Element} noteToReplace
|
|
* @param {Element} newNode
|
|
* @param {Element} blockType
|
|
*/
|
|
content.switchBlock = function (blockToReplace, newBlock, tool) {
|
|
|
|
tool = tool || editor.content.currentNode.dataset.tool;
|
|
var newBlockComposed = composeNewBlock_(newBlock, tool);
|
|
|
|
/** Replacing */
|
|
editor.content.replaceBlock(blockToReplace, newBlockComposed);
|
|
|
|
/** Save new Inputs when block is changed */
|
|
editor.ui.saveInputs();
|
|
|
|
};
|
|
|
|
/**
|
|
* Iterates between child noted and looking for #text node on deepest level
|
|
* @protected
|
|
*
|
|
* @param {Element} block - node where find
|
|
* @param {int} postiton - starting postion
|
|
* Example: childNodex.length to find from the end
|
|
* or 0 to find from the start
|
|
* @return {Text} block
|
|
* @uses DFS
|
|
*/
|
|
content.getDeepestTextNodeFromPosition = function (block, position) {
|
|
|
|
/**
|
|
* Clear Block from empty and useless spaces with trim.
|
|
* Such nodes we should remove
|
|
*/
|
|
var blockChilds = block.childNodes,
|
|
index,
|
|
node,
|
|
text;
|
|
|
|
for(index = 0; index < blockChilds.length; index++) {
|
|
|
|
node = blockChilds[index];
|
|
|
|
if (node.nodeType == editor.core.nodeTypes.TEXT) {
|
|
|
|
text = node.textContent.trim();
|
|
|
|
/** Text is empty. We should remove this child from node before we start DFS
|
|
* decrease the quantity of childs.
|
|
*/
|
|
if (text === '') {
|
|
|
|
block.removeChild(node);
|
|
position--;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (block.childNodes.length === 0) {
|
|
|
|
return document.createTextNode('');
|
|
|
|
}
|
|
|
|
/** Setting default position when we deleted all empty nodes */
|
|
if ( position < 0 )
|
|
position = 1;
|
|
|
|
var lookingFromStart = false;
|
|
|
|
/** For looking from START */
|
|
if (position === 0) {
|
|
|
|
lookingFromStart = true;
|
|
position = 1;
|
|
|
|
}
|
|
|
|
while ( position ) {
|
|
|
|
/** initial verticle of node. */
|
|
if ( lookingFromStart ) {
|
|
|
|
block = block.childNodes[0];
|
|
|
|
} else {
|
|
|
|
block = block.childNodes[position - 1];
|
|
|
|
}
|
|
|
|
if ( block.nodeType == editor.core.nodeTypes.TAG ) {
|
|
|
|
position = block.childNodes.length;
|
|
|
|
} else if (block.nodeType == editor.core.nodeTypes.TEXT ) {
|
|
|
|
position = 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return block;
|
|
|
|
};
|
|
|
|
/**
|
|
* @private
|
|
* @param {Element} block - current plugins render
|
|
* @param {String} tool - plugins name
|
|
* @param {Boolean} isStretched - make stretched block or not
|
|
*
|
|
* @description adds necessary information to wrap new created block by first-level holder
|
|
*/
|
|
var composeNewBlock_ = function (block, tool, isStretched) {
|
|
|
|
var newBlock = editor.draw.node('DIV', editor.ui.className.BLOCK_CLASSNAME, {}),
|
|
blockContent = editor.draw.node('DIV', editor.ui.className.BLOCK_CONTENT, {});
|
|
|
|
blockContent.appendChild(block);
|
|
newBlock.appendChild(blockContent);
|
|
|
|
if (isStretched) {
|
|
|
|
blockContent.classList.add(editor.ui.className.BLOCK_STRETCHED);
|
|
|
|
}
|
|
|
|
newBlock.dataset.tool = tool;
|
|
return newBlock;
|
|
|
|
};
|
|
|
|
/**
|
|
* Returns Range object of current selection
|
|
* @protected
|
|
*/
|
|
content.getRange = function () {
|
|
|
|
var selection = window.getSelection().getRangeAt(0);
|
|
|
|
return selection;
|
|
|
|
};
|
|
|
|
/**
|
|
* Divides block in two blocks (after and before caret)
|
|
*
|
|
* @protected
|
|
* @param {int} inputIndex - target input index
|
|
*
|
|
* @description splits current input content to the separate blocks
|
|
* When enter is pressed among the words, that text will be splited.
|
|
*/
|
|
content.splitBlock = function (inputIndex) {
|
|
|
|
var selection = window.getSelection(),
|
|
anchorNode = selection.anchorNode,
|
|
anchorNodeText = anchorNode.textContent,
|
|
caretOffset = selection.anchorOffset,
|
|
textBeforeCaret,
|
|
textNodeBeforeCaret,
|
|
textAfterCaret,
|
|
textNodeAfterCaret;
|
|
|
|
var currentBlock = editor.content.currentNode.querySelector('[contentEditable]');
|
|
|
|
|
|
textBeforeCaret = anchorNodeText.substring(0, caretOffset);
|
|
textAfterCaret = anchorNodeText.substring(caretOffset);
|
|
|
|
textNodeBeforeCaret = document.createTextNode(textBeforeCaret);
|
|
|
|
if (textAfterCaret) {
|
|
|
|
textNodeAfterCaret = document.createTextNode(textAfterCaret);
|
|
|
|
}
|
|
|
|
var previousChilds = [],
|
|
nextChilds = [],
|
|
reachedCurrent = false;
|
|
|
|
if (textNodeAfterCaret) {
|
|
|
|
nextChilds.push(textNodeAfterCaret);
|
|
|
|
}
|
|
|
|
for ( var i = 0, child; !!(child = currentBlock.childNodes[i]); i++) {
|
|
|
|
if ( child != anchorNode ) {
|
|
|
|
if ( !reachedCurrent ) {
|
|
|
|
previousChilds.push(child);
|
|
|
|
} else {
|
|
|
|
nextChilds.push(child);
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
reachedCurrent = true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
/** Clear current input */
|
|
editor.state.inputs[inputIndex].innerHTML = '';
|
|
|
|
/**
|
|
* Append all childs founded before anchorNode
|
|
*/
|
|
var previousChildsLength = previousChilds.length;
|
|
|
|
for(i = 0; i < previousChildsLength; i++) {
|
|
|
|
editor.state.inputs[inputIndex].appendChild(previousChilds[i]);
|
|
|
|
}
|
|
|
|
editor.state.inputs[inputIndex].appendChild(textNodeBeforeCaret);
|
|
|
|
/**
|
|
* Append text node which is after caret
|
|
*/
|
|
var nextChildsLength = nextChilds.length,
|
|
newNode = document.createElement('div');
|
|
|
|
for(i = 0; i < nextChildsLength; i++) {
|
|
|
|
newNode.appendChild(nextChilds[i]);
|
|
|
|
}
|
|
|
|
newNode = newNode.innerHTML;
|
|
|
|
/** This type of block creates when enter is pressed */
|
|
var NEW_BLOCK_TYPE = editor.settings.initialBlockPlugin;
|
|
|
|
/**
|
|
* Make new paragraph with text after caret
|
|
*/
|
|
editor.content.insertBlock({
|
|
type : NEW_BLOCK_TYPE,
|
|
block : editor.tools[NEW_BLOCK_TYPE].render({
|
|
text : newNode
|
|
})
|
|
}, true );
|
|
|
|
};
|
|
|
|
/**
|
|
* Merges two blocks — current and target
|
|
* If target index is not exist, then previous will be as target
|
|
*
|
|
* @protected
|
|
* @param {int} currentInputIndex
|
|
* @param {int} targetInputIndex
|
|
*
|
|
* @description gets two inputs indexes and merges into one
|
|
*/
|
|
content.mergeBlocks = function (currentInputIndex, targetInputIndex) {
|
|
|
|
/** If current input index is zero, then prevent method execution */
|
|
if (currentInputIndex === 0) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
var targetInput,
|
|
currentInputContent = editor.state.inputs[currentInputIndex].innerHTML;
|
|
|
|
if (!targetInputIndex) {
|
|
|
|
targetInput = editor.state.inputs[currentInputIndex - 1];
|
|
|
|
} else {
|
|
|
|
targetInput = editor.state.inputs[targetInputIndex];
|
|
|
|
}
|
|
|
|
targetInput.innerHTML += currentInputContent;
|
|
|
|
};
|
|
|
|
/**
|
|
* Iterates all right siblings and parents, which has right siblings
|
|
* while it does not reached the first-level block
|
|
*
|
|
* @param {Element} node
|
|
* @return {boolean}
|
|
*/
|
|
content.isLastNode = function (node) {
|
|
|
|
// console.log('погнали перебор родителей');
|
|
|
|
var allChecked = false;
|
|
|
|
while ( !allChecked ) {
|
|
|
|
// console.log('Смотрим на %o', node);
|
|
// console.log('Проверим, пустые ли соседи справа');
|
|
|
|
if ( !allSiblingsEmpty_(node) ) {
|
|
|
|
// console.log('Есть непустые соседи. Узел не последний. Выходим.');
|
|
return false;
|
|
|
|
}
|
|
|
|
node = node.parentNode;
|
|
|
|
/**
|
|
* Проверяем родителей до тех пор, пока не найдем блок первого уровня
|
|
*/
|
|
if ( node.classList.contains(editor.ui.className.BLOCK_CONTENT) ) {
|
|
|
|
allChecked = true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return true;
|
|
|
|
};
|
|
|
|
/**
|
|
* Checks if all element right siblings is empty
|
|
* @param node
|
|
*/
|
|
var allSiblingsEmpty_ = function (node) {
|
|
|
|
/**
|
|
* Нужно убедиться, что после пустого соседа ничего нет
|
|
*/
|
|
var sibling = node.nextSibling;
|
|
|
|
while ( sibling ) {
|
|
|
|
if (sibling.textContent.length) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
sibling = sibling.nextSibling;
|
|
|
|
}
|
|
|
|
return true;
|
|
|
|
};
|
|
|
|
/**
|
|
* @public
|
|
*
|
|
* @param {string} htmlData - html content as string
|
|
* @param {string} plainData - plain text
|
|
* @return {string} - html content as string
|
|
*/
|
|
content.wrapTextWithParagraphs = function (htmlData, plainData) {
|
|
|
|
if (!htmlData.trim()) {
|
|
|
|
return wrapPlainTextWithParagraphs(plainData);
|
|
|
|
}
|
|
|
|
var wrapper = document.createElement('DIV'),
|
|
newWrapper = document.createElement('DIV'),
|
|
i,
|
|
paragraph,
|
|
firstLevelBlocks = ['DIV', 'P'],
|
|
blockTyped,
|
|
node;
|
|
|
|
/**
|
|
* Make HTML Element to Wrap Text
|
|
* It allows us to work with input data as HTML content
|
|
*/
|
|
wrapper.innerHTML = htmlData;
|
|
paragraph = document.createElement('P');
|
|
|
|
for (i = 0; i < wrapper.childNodes.length; i++) {
|
|
|
|
node = wrapper.childNodes[i];
|
|
|
|
blockTyped = firstLevelBlocks.indexOf(node.tagName) != -1;
|
|
|
|
/**
|
|
* If node is first-levet
|
|
* we add this node to our new wrapper
|
|
*/
|
|
if ( blockTyped ) {
|
|
|
|
/**
|
|
* If we had splitted inline nodes to paragraph before
|
|
*/
|
|
if ( paragraph.childNodes.length ) {
|
|
|
|
newWrapper.appendChild(paragraph.cloneNode(true));
|
|
|
|
/** empty paragraph */
|
|
paragraph = null;
|
|
paragraph = document.createElement('P');
|
|
|
|
}
|
|
|
|
newWrapper.appendChild(node.cloneNode(true));
|
|
|
|
} else {
|
|
|
|
/** Collect all inline nodes to one as paragraph */
|
|
paragraph.appendChild(node.cloneNode(true));
|
|
|
|
/** if node is last we should append this node to paragraph and paragraph to new wrapper */
|
|
if ( i == wrapper.childNodes.length - 1 ) {
|
|
|
|
newWrapper.appendChild(paragraph.cloneNode(true));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return newWrapper.innerHTML;
|
|
|
|
};
|
|
|
|
/**
|
|
* Splits strings on new line and wraps paragraphs with <p> tag
|
|
* @param plainText
|
|
* @returns {string}
|
|
*/
|
|
var wrapPlainTextWithParagraphs = function (plainText) {
|
|
|
|
if (!plainText) return '';
|
|
|
|
return '<p>' + plainText.split('\n\n').join('</p><p>') + '</p>';
|
|
|
|
};
|
|
|
|
/**
|
|
* 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;
|
|
|
|
};
|
|
|
|
/**
|
|
* Clear editors content
|
|
*
|
|
* @param {Boolean} all — if true, delete all article data (content, id, etc.)
|
|
*/
|
|
content.clear = function (all) {
|
|
|
|
editor.nodes.redactor.innerHTML = '';
|
|
editor.content.sync();
|
|
editor.ui.saveInputs();
|
|
if (all) {
|
|
|
|
editor.state.blocks = {};
|
|
|
|
} else if (editor.state.blocks) {
|
|
|
|
editor.state.blocks.items = [];
|
|
|
|
}
|
|
|
|
editor.content.currentNode = null;
|
|
|
|
};
|
|
|
|
/**
|
|
*
|
|
* Load new data to editor
|
|
* If editor is not empty, just append articleData.items
|
|
*
|
|
* @param articleData.items
|
|
*/
|
|
content.load = function (articleData) {
|
|
|
|
var currentContent = Object.assign({}, editor.state.blocks);
|
|
|
|
editor.content.clear();
|
|
|
|
if (!Object.keys(currentContent).length) {
|
|
|
|
editor.state.blocks = articleData;
|
|
|
|
} else if (!currentContent.items) {
|
|
|
|
currentContent.items = articleData.items;
|
|
editor.state.blocks = currentContent;
|
|
|
|
} else {
|
|
|
|
currentContent.items = currentContent.items.concat(articleData.items);
|
|
editor.state.blocks = currentContent;
|
|
|
|
}
|
|
|
|
editor.renderer.makeBlocksFromData();
|
|
|
|
};
|
|
|
|
return content;
|
|
|
|
})({}); |