imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

initial hookup editor code with react component

Browse source
This commit is contained in:
Bruno Windels 2019-05-07 16:27:09 +02:00
parent 9f98a6c0e6
commit 76bb56a2bf
4 changed files with 75 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/editor/caret.js
View file

@ -14,21 +14,21 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
export function getCaretPosition(editor) {
export function getCaretOffset(editor) {
const sel = document.getSelection();
const atNodeEnd = sel.focusOffset === sel.focusNode.textContent.length;
let position = sel.focusOffset;
let offset = sel.focusOffset;
let node = sel.focusNode;
// when deleting the last character of a node,
// the caret gets reported as being after the focusOffset-th node,
// with the focusNode being the editor
if (node === editor) {
let position = 0;
let offset = 0;
for (let i = 0; i < sel.focusOffset; ++i) {
position += editor.childNodes[i].textContent.length;
offset += editor.childNodes[i].textContent.length;
}
return {position, atNodeEnd: false};
return {offset, atNodeEnd: false};
}
// first make sure we're at the level of a direct child of editor
@ -36,7 +36,7 @@ export function getCaretPosition(editor) {
// include all preceding siblings of the non-direct editor children
while (node.previousSibling) {
node = node.previousSibling;
position += node.textContent.length;
offset += node.textContent.length;
}
// then move up
// I guess technically there could be preceding text nodes in the parents here as well,
@ -48,13 +48,13 @@ export function getCaretPosition(editor) {
// now include the text length of all preceding direct editor children
while (node.previousSibling) {
node = node.previousSibling;
position += node.textContent.length;
offset += node.textContent.length;
}
{
const {focusOffset, focusNode} = sel;
console.log("selection", {focusOffset, focusNode, position, atNodeEnd});
}
return {position, atNodeEnd};
// {
// const {focusOffset, focusNode} = sel;
// console.log("selection", {focusOffset, focusNode, position, atNodeEnd});
// }
return {offset, atNodeEnd};
}
export function setCaretPosition(editor, caretPosition) {

8
src/editor/model.js
View file

@ -40,18 +40,22 @@ export default class EditorModel {
return this._parts;
}
serializeParts() {
return this._parts.map(({type, text}) => {return {type, text};});
}
_diff(newValue, inputType, caret) {
if (inputType === "deleteByDrag") {
return diffDeletion(this._previousValue, newValue);
} else {
return diffAtCaret(this._previousValue, newValue, caret.position);
return diffAtCaret(this._previousValue, newValue, caret.offset);
}
}
update(newValue, inputType, caret) {
const diff = this._diff(newValue, inputType, caret);
const position = this._positionForOffset(diff.at, caret.atNodeEnd);
console.log("update at", {position, diff});
console.log("update at", {position, diff, newValue, prevValue: this._previousValue});
if (diff.removed) {
this._removeText(position, diff.removed.length);
}