mirror of
https://github.com/codex-team/editor.js
synced 2024-05-23 08:42:25 +02:00
fixed caret transition to empty list content and pasting (#75)
* server-tool-link fixed bug * fixed caret transition to empty list content Fixed bug with list, URL path and block pasting. Now «paste» event inserts from buffer to the first contenteditable element * pasting to the block from Buffer in selected contenteditable element
This commit is contained in:
parent
13dea5af44
commit
04a2c05c11
165
codex-editor.js
165
codex-editor.js
|
@ -850,13 +850,19 @@ cEditor.callback = {
|
||||||
|
|
||||||
var clipboardData, pastedData, nodeContent;
|
var clipboardData, pastedData, nodeContent;
|
||||||
|
|
||||||
|
/** Prevent Default Browser behaviour */
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
clipboardData = event.clipboardData || window.clipboardData;
|
clipboardData = event.clipboardData || window.clipboardData;
|
||||||
pastedData = clipboardData.getData('Text');
|
pastedData = clipboardData.getData('Text');
|
||||||
|
|
||||||
nodeContent = document.createTextNode(pastedData);
|
nodeContent = document.createTextNode(pastedData);
|
||||||
block.appendChild(nodeContent);
|
|
||||||
|
var index = cEditor.caret.getCurrentInputIndex();
|
||||||
|
|
||||||
|
/** Insert parsed content to the editable block */
|
||||||
|
var editableElement = cEditor.state.inputs[index];
|
||||||
|
editableElement.appendChild(nodeContent);
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -1031,84 +1037,6 @@ cEditor.content = {
|
||||||
cEditor.content.workingNodeChanged(newBlock);
|
cEditor.content.workingNodeChanged(newBlock);
|
||||||
|
|
||||||
},
|
},
|
||||||
/**
|
|
||||||
* @deprecated with replaceBlock()
|
|
||||||
*/
|
|
||||||
_switchBlock : function (targetBlock, newBlockTagname) {
|
|
||||||
|
|
||||||
if (!targetBlock || !newBlockTagname) return;
|
|
||||||
|
|
||||||
var nodeToReplace;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* First-level nodes replaces as-is,
|
|
||||||
* otherwise we need to replace parent node
|
|
||||||
*/
|
|
||||||
if (cEditor.parser.isFirstLevelBlock(targetBlock)) {
|
|
||||||
nodeToReplace = targetBlock;
|
|
||||||
} else {
|
|
||||||
nodeToReplace = targetBlock.parentNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Make new node with original content
|
|
||||||
*/
|
|
||||||
var nodeCreated = cEditor.draw.block(newBlockTagname, targetBlock.innerHTML);
|
|
||||||
|
|
||||||
/** Mark node as redactor block */
|
|
||||||
nodeCreated.contentEditable = "true";
|
|
||||||
nodeCreated.classList.add(cEditor.ui.BLOCK_CLASSNAME);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* If it is a first-level node, replace as-is.
|
|
||||||
*/
|
|
||||||
if (cEditor.parser.isFirstLevelBlock(nodeCreated)) {
|
|
||||||
|
|
||||||
cEditor.nodes.redactor.replaceChild(nodeCreated, nodeToReplace);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Set new node as current
|
|
||||||
*/
|
|
||||||
|
|
||||||
cEditor.content.workingNodeChanged(nodeCreated);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Setting caret
|
|
||||||
*/
|
|
||||||
cEditor.caret.set(nodeCreated);
|
|
||||||
|
|
||||||
/** Add event listeners for created node */
|
|
||||||
cEditor.ui.addBlockHandlers(nodeCreated);
|
|
||||||
|
|
||||||
return;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* If it is not a first-level node, for example LI or IMG
|
|
||||||
* we need to wrap it in block-tag (<p> or <ul>)
|
|
||||||
*/
|
|
||||||
var newNodeWrapperTagname,
|
|
||||||
newNodeWrapper;
|
|
||||||
|
|
||||||
switch (newBlockTagname){
|
|
||||||
case 'LI' : newNodeWrapperTagname = 'UL'; break;
|
|
||||||
default : newNodeWrapperTagname = 'P'; break;
|
|
||||||
}
|
|
||||||
|
|
||||||
newNodeWrapper = cEditor.draw.block(newNodeWrapperTagname);
|
|
||||||
newNodeWrapper.appendChild(nodeCreated);
|
|
||||||
|
|
||||||
|
|
||||||
cEditor.nodes.redactor.replaceChild(newNodeWrapper, nodeToReplace);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Set new node as current
|
|
||||||
*/
|
|
||||||
cEditor.content.workingNodeChanged(nodeCreated);
|
|
||||||
|
|
||||||
//cEditor.caret.set(nodeCreated);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Replaces blocks with saving content
|
* Replaces blocks with saving content
|
||||||
|
@ -1233,7 +1161,7 @@ cEditor.caret = {
|
||||||
/**
|
/**
|
||||||
* @var {int} InputIndex - editable element in DOM
|
* @var {int} InputIndex - editable element in DOM
|
||||||
*/
|
*/
|
||||||
InputIndex : null,
|
inputIndex : null,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @var {int} offset - caret position in a text node.
|
* @var {int} offset - caret position in a text node.
|
||||||
|
@ -1246,54 +1174,6 @@ cEditor.caret = {
|
||||||
*/
|
*/
|
||||||
|
|
||||||
focusedNodeIndex: null,
|
focusedNodeIndex: null,
|
||||||
|
|
||||||
/**
|
|
||||||
* We need to save caret before we change the block,
|
|
||||||
* so that we could return it to original position in a new tag.
|
|
||||||
* We save caret offset in a text and index of child node.
|
|
||||||
*/
|
|
||||||
save : function() {
|
|
||||||
|
|
||||||
var selection = window.getSelection(),
|
|
||||||
parentElement,
|
|
||||||
previousElement,
|
|
||||||
nodeIndex = 0;
|
|
||||||
|
|
||||||
if (!selection.anchorNode) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
parentElement = selection.anchorNode;
|
|
||||||
previousElement = selection.anchorNode.previousSibling;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* We get index of node which is child of #BLOCK_CLASSNAME.
|
|
||||||
* if selected node is not below the block container, we get the closest TAG which is below #BLOCK_CLASSNAME
|
|
||||||
*/
|
|
||||||
if ( parentElement.className !== cEditor.ui.BLOCK_CLASSNAME ) {
|
|
||||||
|
|
||||||
while (parentElement.parentNode.className !== cEditor.ui.BLOCK_CLASSNAME) {
|
|
||||||
|
|
||||||
parentElement = parentElement.parentNode;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
previousElement = parentElement.previousSibling;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Counting index of focused node */
|
|
||||||
while (previousElement !== null) {
|
|
||||||
|
|
||||||
nodeIndex ++;
|
|
||||||
previousElement = previousElement.previousSibling;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
this.offset = selection.anchorOffset;
|
|
||||||
this.focusedNodeIndex = nodeIndex;
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Creates Document Range and sets caret to the element.
|
* Creates Document Range and sets caret to the element.
|
||||||
* @uses caret.save — if you need to save caret position
|
* @uses caret.save — if you need to save caret position
|
||||||
|
@ -1337,10 +1217,31 @@ cEditor.caret = {
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {Element} - block element where we should find caret position
|
* @return current index of input and saves it in caret object
|
||||||
*/
|
*/
|
||||||
get : function (el) {
|
getCurrentInputIndex : function () {
|
||||||
|
|
||||||
|
/** Index of Input that we paste sanitized content */
|
||||||
|
var selection = window.getSelection(),
|
||||||
|
inputs = cEditor.state.inputs,
|
||||||
|
focusedNode = selection.anchorNode,
|
||||||
|
focusedNodeHolder;
|
||||||
|
|
||||||
|
/** Looking for parent contentEditable block */
|
||||||
|
while (focusedNode.contentEditable != 'true') {
|
||||||
|
focusedNodeHolder = focusedNode.parentNode;
|
||||||
|
focusedNode = focusedNodeHolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Input index in DOM level */
|
||||||
|
var editableElementIndex = 0;
|
||||||
|
|
||||||
|
while (focusedNode != inputs[editableElementIndex]) {
|
||||||
|
editableElementIndex ++;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.inputIndex = editableElementIndex;
|
||||||
|
return this.inputIndex;
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -1360,7 +1261,7 @@ cEditor.caret = {
|
||||||
nextInput.appendChild(emptyTextElement);
|
nextInput.appendChild(emptyTextElement);
|
||||||
}
|
}
|
||||||
|
|
||||||
cEditor.caret.InputIndex = nextInput;
|
cEditor.caret.inputIndex = nextInput;
|
||||||
cEditor.caret.set(nextInput, 0, 0);
|
cEditor.caret.set(nextInput, 0, 0);
|
||||||
cEditor.content.workingNodeChanged(nextInput);
|
cEditor.content.workingNodeChanged(nextInput);
|
||||||
|
|
||||||
|
@ -1383,7 +1284,7 @@ cEditor.caret = {
|
||||||
previousInput.appendChild(emptyTextElement);
|
previousInput.appendChild(emptyTextElement);
|
||||||
}
|
}
|
||||||
|
|
||||||
cEditor.caret.InputIndex = previousInput;
|
cEditor.caret.inputIndex = previousInput;
|
||||||
cEditor.caret.set(previousInput, previousInput.childNodes.length - 1, lengthOfLastChildNode);
|
cEditor.caret.set(previousInput, previousInput.childNodes.length - 1, lengthOfLastChildNode);
|
||||||
cEditor.content.workingNodeChanged(inputs[index - 1]);
|
cEditor.content.workingNodeChanged(inputs[index - 1]);
|
||||||
},
|
},
|
||||||
|
|
|
@ -19,6 +19,9 @@ var listTool = {
|
||||||
var tag = listTool.ui.make(),
|
var tag = listTool.ui.make(),
|
||||||
li = listTool.ui.block("li", "tool-link-li");
|
li = listTool.ui.block("li", "tool-link-li");
|
||||||
|
|
||||||
|
var br = document.createElement("br");
|
||||||
|
|
||||||
|
li.appendChild(br);
|
||||||
tag.appendChild(li);
|
tag.appendChild(li);
|
||||||
|
|
||||||
return tag;
|
return tag;
|
||||||
|
@ -163,4 +166,4 @@ cEditor.tools.list = {
|
||||||
render : listTool.render,
|
render : listTool.render,
|
||||||
save : listTool.save
|
save : listTool.save
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
|
@ -30,7 +30,7 @@ function get_url()
|
||||||
if (filter_var($url, FILTER_VALIDATE_URL) === FALSE) {
|
if (filter_var($url, FILTER_VALIDATE_URL) === FALSE) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
return $url;
|
return $url;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -54,7 +54,7 @@ function get_meta_from_html($html)
|
||||||
$description = $meta->getAttribute('content');
|
$description = $meta->getAttribute('content');
|
||||||
if($meta->getAttribute('name') == 'keywords')
|
if($meta->getAttribute('name') == 'keywords')
|
||||||
$keywords = $meta->getAttribute('content');
|
$keywords = $meta->getAttribute('content');
|
||||||
if($meta->getAttribute('property')=='og:image'){
|
if($meta->getAttribute('property')=='og:image'){
|
||||||
$image = $meta->getAttribute('content');
|
$image = $meta->getAttribute('content');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -81,15 +81,15 @@ $result = get_meta_from_html($html);
|
||||||
|
|
||||||
$result = array_merge(
|
$result = array_merge(
|
||||||
|
|
||||||
get_meta_from_html($html),
|
get_meta_from_html($html),
|
||||||
|
|
||||||
array(
|
array(
|
||||||
'linkUrl' => $url,
|
'linkUrl' => $url,
|
||||||
'linkText' => $url_params["host"] . $url_params["path"],
|
'linkText' => $url_params["host"] . isset($url_params["path"])?$url_params["path"]:"",
|
||||||
)
|
)
|
||||||
|
|
||||||
);
|
);
|
||||||
|
|
||||||
echo json_encode($result);
|
echo json_encode($result);
|
||||||
|
|
||||||
?>
|
?>
|
||||||
|
|
Loading…
Reference in a new issue