mirror of
https://github.com/codex-team/editor.js
synced 2024-04-27 12:32:08 +02:00
600 lines
13 KiB
JavaScript
600 lines
13 KiB
JavaScript
/**
|
|
* Inline toolbar
|
|
*
|
|
* Contains from tools:
|
|
* Bold, Italic, Underline and Anchor
|
|
*
|
|
* @author Codex Team
|
|
* @version 1.0
|
|
*/
|
|
|
|
module.exports = (function (inline) {
|
|
|
|
let editor = codex.editor;
|
|
|
|
inline.buttonsOpened = null;
|
|
inline.actionsOpened = null;
|
|
inline.wrappersOffset = null;
|
|
|
|
/**
|
|
* saving selection that need for execCommand for styling
|
|
*
|
|
*/
|
|
inline.storedSelection = null;
|
|
|
|
/**
|
|
* @protected
|
|
*
|
|
* Open inline toobar
|
|
*/
|
|
inline.show = function () {
|
|
|
|
var currentNode = editor.content.currentNode,
|
|
tool = currentNode.dataset.tool,
|
|
plugin;
|
|
|
|
/**
|
|
* tool allowed to open inline toolbar
|
|
*/
|
|
plugin = editor.tools[tool];
|
|
|
|
if (!plugin.showInlineToolbar)
|
|
return;
|
|
|
|
var selectedText = inline.getSelectionText(),
|
|
toolbar = editor.nodes.inlineToolbar.wrapper;
|
|
|
|
if (selectedText.length > 0) {
|
|
|
|
/** Move toolbar and open */
|
|
editor.toolbar.inline.move();
|
|
|
|
/** Open inline toolbar */
|
|
toolbar.classList.add('opened');
|
|
|
|
/** show buttons of inline toolbar */
|
|
editor.toolbar.inline.showButtons();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
/**
|
|
* @protected
|
|
*
|
|
* Closes inline toolbar
|
|
*/
|
|
inline.close = function () {
|
|
|
|
var toolbar = editor.nodes.inlineToolbar.wrapper;
|
|
|
|
toolbar.classList.remove('opened');
|
|
|
|
};
|
|
|
|
/**
|
|
* @private
|
|
*
|
|
* Moving toolbar
|
|
*/
|
|
inline.move = function () {
|
|
|
|
if (!this.wrappersOffset) {
|
|
|
|
this.wrappersOffset = this.getWrappersOffset();
|
|
|
|
}
|
|
|
|
var coords = this.getSelectionCoords(),
|
|
defaultOffset = 0,
|
|
toolbar = editor.nodes.inlineToolbar.wrapper,
|
|
newCoordinateX,
|
|
newCoordinateY;
|
|
|
|
if (!coords) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (toolbar.offsetHeight === 0) {
|
|
|
|
defaultOffset = 40;
|
|
|
|
}
|
|
|
|
newCoordinateX = coords.x - this.wrappersOffset.left;
|
|
newCoordinateY = coords.y + window.scrollY - this.wrappersOffset.top - defaultOffset - toolbar.offsetHeight;
|
|
|
|
toolbar.style.transform = `translate3D(${Math.floor(newCoordinateX)}px, ${Math.floor(newCoordinateY)}px, 0)`;
|
|
|
|
/** Close everything */
|
|
editor.toolbar.inline.closeButtons();
|
|
editor.toolbar.inline.closeAction();
|
|
|
|
};
|
|
|
|
/**
|
|
* @private
|
|
*
|
|
* Tool Clicked
|
|
*/
|
|
|
|
inline.toolClicked = function (event, type) {
|
|
|
|
/**
|
|
* For simple tools we use default browser function
|
|
* For more complicated tools, we should write our own behavior
|
|
*/
|
|
switch (type) {
|
|
case 'createLink' : editor.toolbar.inline.createLinkAction(event, type); break;
|
|
default : editor.toolbar.inline.defaultToolAction(type); break;
|
|
}
|
|
|
|
/**
|
|
* highlight buttons
|
|
* after making some action
|
|
*/
|
|
editor.nodes.inlineToolbar.buttons.childNodes.forEach(editor.toolbar.inline.hightlight);
|
|
|
|
};
|
|
|
|
/**
|
|
* @private
|
|
*
|
|
* Saving wrappers offset in DOM
|
|
*/
|
|
inline.getWrappersOffset = function () {
|
|
|
|
var wrapper = editor.nodes.wrapper,
|
|
offset = this.getOffset(wrapper);
|
|
|
|
this.wrappersOffset = offset;
|
|
return offset;
|
|
|
|
};
|
|
|
|
/**
|
|
* @private
|
|
*
|
|
* Calculates offset of DOM element
|
|
*
|
|
* @param el
|
|
* @returns {{top: number, left: number}}
|
|
*/
|
|
inline.getOffset = function ( el ) {
|
|
|
|
var _x = 0;
|
|
var _y = 0;
|
|
|
|
while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
|
|
|
|
_x += (el.offsetLeft + el.clientLeft);
|
|
_y += (el.offsetTop + el.clientTop);
|
|
el = el.offsetParent;
|
|
|
|
}
|
|
return { top: _y, left: _x };
|
|
|
|
};
|
|
|
|
/**
|
|
* @private
|
|
*
|
|
* Calculates position of selected text
|
|
* @returns {{x: number, y: number}}
|
|
*/
|
|
inline.getSelectionCoords = function () {
|
|
|
|
var sel = document.selection, range;
|
|
var x = 0, y = 0;
|
|
|
|
if (sel) {
|
|
|
|
if (sel.type != 'Control') {
|
|
|
|
range = sel.createRange();
|
|
range.collapse(true);
|
|
x = range.boundingLeft;
|
|
y = range.boundingTop;
|
|
|
|
}
|
|
|
|
} else if (window.getSelection) {
|
|
|
|
sel = window.getSelection();
|
|
|
|
if (sel.rangeCount) {
|
|
|
|
range = sel.getRangeAt(0).cloneRange();
|
|
if (range.getClientRects) {
|
|
|
|
range.collapse(true);
|
|
var rect = range.getClientRects()[0];
|
|
|
|
if (!rect) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
x = rect.left;
|
|
y = rect.top;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
return { x: x, y: y };
|
|
|
|
};
|
|
|
|
/**
|
|
* @private
|
|
*
|
|
* Returns selected text as String
|
|
* @returns {string}
|
|
*/
|
|
inline.getSelectionText = function () {
|
|
|
|
var selectedText = '';
|
|
|
|
// all modern browsers and IE9+
|
|
if (window.getSelection) {
|
|
|
|
selectedText = window.getSelection().toString();
|
|
|
|
}
|
|
|
|
return selectedText;
|
|
|
|
};
|
|
|
|
/** Opens buttons block */
|
|
inline.showButtons = function () {
|
|
|
|
var buttons = editor.nodes.inlineToolbar.buttons;
|
|
|
|
buttons.classList.add('opened');
|
|
|
|
editor.toolbar.inline.buttonsOpened = true;
|
|
|
|
/** highlight buttons */
|
|
editor.nodes.inlineToolbar.buttons.childNodes.forEach(editor.toolbar.inline.hightlight);
|
|
|
|
};
|
|
|
|
/** Makes buttons disappear */
|
|
inline.closeButtons = function () {
|
|
|
|
var buttons = editor.nodes.inlineToolbar.buttons;
|
|
|
|
buttons.classList.remove('opened');
|
|
|
|
editor.toolbar.inline.buttonsOpened = false;
|
|
|
|
};
|
|
|
|
/** Open buttons defined action if exist */
|
|
inline.showActions = function () {
|
|
|
|
var action = editor.nodes.inlineToolbar.actions;
|
|
|
|
action.classList.add('opened');
|
|
|
|
editor.toolbar.inline.actionsOpened = true;
|
|
|
|
};
|
|
|
|
/** Close actions block */
|
|
inline.closeAction = function () {
|
|
|
|
var action = editor.nodes.inlineToolbar.actions;
|
|
|
|
action.innerHTML = '';
|
|
action.classList.remove('opened');
|
|
editor.toolbar.inline.actionsOpened = false;
|
|
|
|
};
|
|
|
|
|
|
/**
|
|
* Callback for keydowns in inline toolbar "Insert link..." input
|
|
*/
|
|
let inlineToolbarAnchorInputKeydown_ = function (event) {
|
|
|
|
if (event.keyCode != editor.core.keys.ENTER) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
let editable = editor.content.currentNode,
|
|
storedSelection = editor.toolbar.inline.storedSelection;
|
|
|
|
editor.toolbar.inline.restoreSelection(editable, storedSelection);
|
|
editor.toolbar.inline.setAnchor(this.value);
|
|
|
|
/**
|
|
* Preventing events that will be able to happen
|
|
*/
|
|
event.preventDefault();
|
|
event.stopImmediatePropagation();
|
|
|
|
editor.toolbar.inline.clearRange();
|
|
|
|
};
|
|
|
|
/** Action for link creation or for setting anchor */
|
|
inline.createLinkAction = function (event) {
|
|
|
|
var isActive = this.isLinkActive();
|
|
|
|
var editable = editor.content.currentNode,
|
|
storedSelection = editor.toolbar.inline.saveSelection(editable);
|
|
|
|
/** Save globally selection */
|
|
editor.toolbar.inline.storedSelection = storedSelection;
|
|
|
|
if (isActive) {
|
|
|
|
|
|
/**
|
|
* Changing stored selection. if we want to remove anchor from word
|
|
* we should remove anchor from whole word, not only selected part.
|
|
* The solution is than we get the length of current link
|
|
* Change start position to - end of selection minus length of anchor
|
|
*/
|
|
editor.toolbar.inline.restoreSelection(editable, storedSelection);
|
|
|
|
editor.toolbar.inline.defaultToolAction('unlink');
|
|
|
|
} else {
|
|
|
|
/** Create input and close buttons */
|
|
var action = editor.draw.inputForLink();
|
|
|
|
editor.nodes.inlineToolbar.actions.appendChild(action);
|
|
|
|
editor.toolbar.inline.closeButtons();
|
|
editor.toolbar.inline.showActions();
|
|
|
|
/**
|
|
* focus to input
|
|
* Solution: https://developer.mozilla.org/ru/docs/Web/API/HTMLElement/focus
|
|
* Prevents event after showing input and when we need to focus an input which is in unexisted form
|
|
*/
|
|
action.focus();
|
|
event.preventDefault();
|
|
|
|
/** Callback to link action */
|
|
editor.listeners.add(action, 'keydown', inlineToolbarAnchorInputKeydown_, false);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
inline.isLinkActive = function () {
|
|
|
|
var isActive = false;
|
|
|
|
editor.nodes.inlineToolbar.buttons.childNodes.forEach(function (tool) {
|
|
|
|
var dataType = tool.dataset.type;
|
|
|
|
if (dataType == 'link' && tool.classList.contains('hightlighted')) {
|
|
|
|
isActive = true;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
return isActive;
|
|
|
|
};
|
|
|
|
/** default action behavior of tool */
|
|
inline.defaultToolAction = function (type) {
|
|
|
|
document.execCommand(type, false, null);
|
|
|
|
};
|
|
|
|
/**
|
|
* @private
|
|
*
|
|
* Sets URL
|
|
*
|
|
* @param {String} url - URL
|
|
*/
|
|
inline.setAnchor = function (url) {
|
|
|
|
document.execCommand('createLink', false, url);
|
|
|
|
/** Close after URL inserting */
|
|
editor.toolbar.inline.closeAction();
|
|
|
|
};
|
|
|
|
/**
|
|
* @private
|
|
*
|
|
* Saves selection
|
|
*/
|
|
inline.saveSelection = function (containerEl) {
|
|
|
|
var range = window.getSelection().getRangeAt(0),
|
|
preSelectionRange = range.cloneRange(),
|
|
start;
|
|
|
|
preSelectionRange.selectNodeContents(containerEl);
|
|
preSelectionRange.setEnd(range.startContainer, range.startOffset);
|
|
|
|
start = preSelectionRange.toString().length;
|
|
|
|
return {
|
|
start: start,
|
|
end: start + range.toString().length
|
|
};
|
|
|
|
};
|
|
|
|
/**
|
|
* @private
|
|
*
|
|
* Sets to previous selection (Range)
|
|
*
|
|
* @param {Element} containerEl - editable element where we restore range
|
|
* @param {Object} savedSel - range basic information to restore
|
|
*/
|
|
inline.restoreSelection = function (containerEl, savedSel) {
|
|
|
|
var range = document.createRange(),
|
|
charIndex = 0;
|
|
|
|
range.setStart(containerEl, 0);
|
|
range.collapse(true);
|
|
|
|
var nodeStack = [ containerEl ],
|
|
node,
|
|
foundStart = false,
|
|
stop = false,
|
|
nextCharIndex;
|
|
|
|
while (!stop && (node = nodeStack.pop())) {
|
|
|
|
if (node.nodeType == 3) {
|
|
|
|
nextCharIndex = charIndex + node.length;
|
|
|
|
if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex) {
|
|
|
|
range.setStart(node, savedSel.start - charIndex);
|
|
foundStart = true;
|
|
|
|
}
|
|
if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) {
|
|
|
|
range.setEnd(node, savedSel.end - charIndex);
|
|
stop = true;
|
|
|
|
}
|
|
charIndex = nextCharIndex;
|
|
|
|
} else {
|
|
|
|
var i = node.childNodes.length;
|
|
|
|
while (i--) {
|
|
|
|
nodeStack.push(node.childNodes[i]);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
var sel = window.getSelection();
|
|
|
|
sel.removeAllRanges();
|
|
sel.addRange(range);
|
|
|
|
};
|
|
|
|
/**
|
|
* @private
|
|
*
|
|
* Removes all ranges from window selection
|
|
*/
|
|
inline.clearRange = function () {
|
|
|
|
var selection = window.getSelection();
|
|
|
|
selection.removeAllRanges();
|
|
|
|
};
|
|
|
|
/**
|
|
* @private
|
|
*
|
|
* sets or removes hightlight
|
|
*/
|
|
inline.hightlight = function (tool) {
|
|
|
|
var dataType = tool.dataset.type;
|
|
|
|
if (document.queryCommandState(dataType)) {
|
|
|
|
editor.toolbar.inline.setButtonHighlighted(tool);
|
|
|
|
} else {
|
|
|
|
editor.toolbar.inline.removeButtonsHighLight(tool);
|
|
|
|
}
|
|
|
|
/**
|
|
*
|
|
* hightlight for anchors
|
|
*/
|
|
var selection = window.getSelection(),
|
|
tag = selection.anchorNode.parentNode;
|
|
|
|
if (tag.tagName == 'A' && dataType == 'link') {
|
|
|
|
editor.toolbar.inline.setButtonHighlighted(tool);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
/**
|
|
* @private
|
|
*
|
|
* Mark button if text is already executed
|
|
*/
|
|
inline.setButtonHighlighted = function (button) {
|
|
|
|
button.classList.add('hightlighted');
|
|
|
|
/** At link tool we also change icon */
|
|
if (button.dataset.type == 'link') {
|
|
|
|
var icon = button.childNodes[0];
|
|
|
|
icon.classList.remove('ce-icon-link');
|
|
icon.classList.add('ce-icon-unlink');
|
|
|
|
}
|
|
|
|
};
|
|
|
|
/**
|
|
* @private
|
|
*
|
|
* Removes hightlight
|
|
*/
|
|
inline.removeButtonsHighLight = function (button) {
|
|
|
|
button.classList.remove('hightlighted');
|
|
|
|
/** At link tool we also change icon */
|
|
if (button.dataset.type == 'link') {
|
|
|
|
var icon = button.childNodes[0];
|
|
|
|
icon.classList.remove('ce-icon-unlink');
|
|
icon.classList.add('ce-icon-link');
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
return inline;
|
|
|
|
})({});
|