Skip to content

Commit da99a56

Browse files
阿思根阿思根
阿思根
authored and
阿思根
committed
consider done
1 parent 28957e4 commit da99a56

File tree

3 files changed

+111
-107
lines changed

3 files changed

+111
-107
lines changed

‎src/component/paragraph.js

+17-67
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { Component } from 'react';
22
import { observer } from 'mobx-react';
33
import ReactDOM from 'react-dom';
4+
import util from '../mobx-script/util'
45

56

67
@observer
@@ -9,7 +10,7 @@ export default class Paragraph extends Component{
910
if(this.props.para.focus){
1011
ReactDOM.findDOMNode(this).focus();
1112
if(this.props.para.text){
12-
SetCaretPosition(ReactDOM.findDOMNode(this), this.props.para.selectionStart.offset);
13+
util.SetCaretPosition(ReactDOM.findDOMNode(this), this.props.para.selectionStart.offset);
1314
}
1415
}
1516
}
@@ -18,25 +19,29 @@ export default class Paragraph extends Component{
1819
if(this.refs.true){
1920
ReactDOM.findDOMNode(this).focus();
2021
if(param.para.text){
21-
SetCaretPosition(ReactDOM.findDOMNode(this), param.para.selectionStart.offset);
22+
util.SetCaretPosition(ReactDOM.findDOMNode(this), param.para.selectionStart.offset);
2223
}
2324
}
2425
}
2526
handlePaste(e){
2627
e.preventDefault();
27-
let copyStuff = e.clipboardData.getData('Text');
28-
let currentOffSet = RecursionCounter(e.target)[0];
28+
// console.log('pasting!')
2929

30-
this.props.para.selectionStart.offset = currentOffSet + copyStuff.length;
31-
console.log(this.props.para.selectionStart.offset)
30+
// incase there is a selection need to be replaced
31+
util.deleteContent();
3232

33-
let tmpHead = e.target.innerHTML.slice(0, currentOffSet);
34-
let tmpTail = e.target.innerHTML.slice(currentOffSet);
35-
this.props.para.innerHTML = tmpHead.concat(copyStuff,tmpTail);
33+
// clipboard only take palin text
34+
let copyStuff = e.clipboardData.getData('text/plain');
35+
let tmpOffSet = util.RecursionCounter(e.target)[0];
3636

37+
let tmpHead = e.target.innerHTML.slice(0, tmpOffSet);
38+
let tmpTail = e.target.innerHTML.slice(tmpOffSet);
3739

38-
// e.target.innerHTML = this.props.para.innerHTML;
39-
// SetCaretPosition(ReactDOM.findDOMNode(this), this.props.para.selectionStart.offset);
40+
// this.props.para.selectionStart.offset = tmpOffSet + copyStuff.length;
41+
e.target.innerHTML = tmpHead.concat(copyStuff,tmpTail);
42+
43+
// update cursor after paste
44+
util.SetCaretPosition(e.target, tmpOffSet + copyStuff.length);
4045
}
4146
render(){
4247
const para = this.props.para;
@@ -50,7 +55,7 @@ export default class Paragraph extends Component{
5055
id={'paragraph'}
5156
onBlur={() => para.focus = false}
5257
onFocus={() => para.focus = true}
53-
// onPaste={(e) => this.handlePaste(e)}
58+
onPaste={(e) => this.handlePaste(e)}
5459
dangerouslySetInnerHTML={{__html: para.innerHTML || ""}}
5560
data-placeholder={para.type.slice(5)}
5661
ref={para.focus}
@@ -60,58 +65,3 @@ export default class Paragraph extends Component{
6065
)
6166
}
6267
}
63-
64-
/*
65-
Find and place cursor in div-editable
66-
*/
67-
function SetCaretPosition(el, offset){
68-
for(let node of el.childNodes){
69-
if(node.nodeType == 3){
70-
if(node.length >= offset){
71-
// stop here
72-
let range = document.createRange();
73-
let sel = window.getSelection();
74-
range.setStart(node, offset);
75-
range.collapse(true);
76-
sel.removeAllRanges();
77-
sel.addRange(range);
78-
return -1;
79-
}
80-
offset -= node.length;
81-
}else{
82-
offset = SetCaretPosition(node, offset);
83-
if(offset == -1){
84-
return -1;
85-
}
86-
}
87-
}
88-
return offset;
89-
}
90-
91-
92-
/* ------------------------------------------------------
93-
div-contentEditable cursor position calculator
94-
dealing with <b> <i> and so on...
95-
------------------------------------------------------ */
96-
function RecursionCounter(el){
97-
let textCount = 0;
98-
for(let node of el.childNodes){
99-
if(node.nodeType === 3){
100-
let range = window.getSelection().getRangeAt(0);
101-
let containerNode = range.startContainer;
102-
103-
if(containerNode === node){
104-
textCount += range.startOffset;
105-
return ([textCount, true]);
106-
}
107-
textCount += node.textContent.length;
108-
}else{
109-
let tmp = RecursionCounter(node);
110-
textCount += tmp[0];
111-
if(tmp[1]){
112-
return ([textCount, true]);
113-
}
114-
}
115-
}
116-
return ([textCount, false]);
117-
}

‎src/mobx-script/mobx-script.js

+23-40
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { observable, action, computed, toJS } from 'mobx';
2+
import util from './util'
23

34
/*
45
@@ -269,7 +270,7 @@ export default class scripts{
269270
const targetInnerHTML = targetElement.innerHTML || '';
270271
const targetText = targetElement.textContent || '';
271272
const targetHeight = targetElement.offsetHeight + this.Hdata[targetClassName];
272-
const targetOffSet = RecursionCounter(targetElement)[0];
273+
const targetOffSet = util.RecursionCounter(targetElement)[0];
273274
const targetLineOffSet = parseInt(targetOffSet / this.lineCharNum[targetClassName]);
274275
const targetLine = parseInt(targetText.length / this.lineCharNum[targetClassName]) + 1;
275276

@@ -279,8 +280,7 @@ export default class scripts{
279280
/* ------------------------------------------------------
280281
compute cursor line and offset in current div-editable
281282
------------------------------------------------------ */
282-
this.paragraphs[index].selectionStart.offset = targetOffSet;
283-
this.paragraphs[index].selectionStart.line = targetLineOffSet;
283+
this.paragraphs[index].selectionStart = {line:targetLineOffSet, offset: targetOffSet};
284284

285285
/* ------------------------------------------------------
286286
calculate and update qurrent target height and line
@@ -307,13 +307,19 @@ export default class scripts{
307307
308308
------------------------------------------------------ */
309309
@action handleKey(e){
310+
// target mac, sorry windows...
311+
// do not care if not paste or new line
312+
if(e.metaKey && e.keyCode != 13 && e.keyCode != 86){
313+
return;
314+
}
315+
310316
const targetElement = e.target;
311317
const index = parseInt(targetElement.attributes['data-unique'].value)
312318
const targetClassName = targetElement.className;
313319
const targetInnerHTML = targetElement.innerHTML || '';
314320
const targetText = targetElement.textContent || '';
315321
const targetHeight = targetElement.offsetHeight + this.Hdata[targetClassName];
316-
const targetOffSet = RecursionCounter(targetElement)[0];
322+
const targetOffSet = util.RecursionCounter(targetElement)[0];
317323
const targetLineOffSet = parseInt(targetOffSet / this.lineCharNum[targetClassName]);
318324
const targetLine = parseInt(targetText.length / this.lineCharNum[targetClassName]) + 1;
319325

@@ -330,6 +336,7 @@ export default class scripts{
330336
this.paragraphs[index].line = targetLine;
331337
this.paragraphs[index].innerHTML = targetInnerHTML;
332338
this.paragraphs[index].text = targetText;
339+
this.paragraphs[index].selectionStart = {line:targetLineOffSet, offset: targetOffSet};
333340
}
334341

335342
//// =============================== DEBUG HERE ========================================== ////
@@ -493,23 +500,26 @@ export default class scripts{
493500
}
494501

495502
/* ------------------------------------------------------
496-
If keydown delete at begining when prev paragraph is empty
503+
If keydown delete at begining when prev paragraph is empty && !isSelected
497504
------------------------------------------------------ */
498-
else if(e.keyCode === 8 && targetOffSet === 0 && index > 1 && !this.paragraphs[index - 1].innerHTML && targetInnerHTML){
505+
else if(e.keyCode === 8 && targetOffSet === 0 && index > 1 && !this.paragraphs[index - 1].innerHTML && targetInnerHTML && !util.isSelected()){
499506
e.preventDefault();
500507
this.paragraphs.splice(index - 1, 1);
501508
}
502509

503510
// /* ------------------------------------------------------
504511
// If keydown delete at begining when prev paragraph is not empty
505-
// !!! THERE'S SOME ISSUE WITH THIS -> (targetOffSet === 0) alone can not deside if it's select all !!!
506512
// ------------------------------------------------------ */
507-
// else if(e.keyCode === 8 && targetOffSet === 0 && index > 1 && this.paragraphs[index - 1].innerHTML && targetInnerHTML){
508-
// e.preventDefault();
509-
// this.paragraphs[index].focus = false;
510-
// this.paragraphs[index - 1].focus = true;
511-
// this.paragraphs[index - 1].selectionStart = {line: this.paragraphs[index - 1].line - 1, offset: this.paragraphs[index - 1].text.length};
512-
// }
513+
else if(e.keyCode === 8 && targetOffSet === 0 && index > 1 && this.paragraphs[index - 1].innerHTML && targetInnerHTML){
514+
e.preventDefault();
515+
if(util.isSelected()){
516+
util.deleteContent();
517+
}else{
518+
this.paragraphs[index].focus = false;
519+
this.paragraphs[index - 1].focus = true;
520+
this.paragraphs[index - 1].selectionStart = {line: this.paragraphs[index - 1].line - 1, offset: this.paragraphs[index - 1].text.length};
521+
}
522+
}
513523

514524
/* ------------------------------------------------------
515525
If keydown backward when cursor at begining
@@ -571,30 +581,3 @@ export default class scripts{
571581
}
572582

573583
} // End of mobx-script
574-
575-
/* ------------------------------------------------------
576-
div-contentEditable cursor position calculator
577-
dealing with <b> <i> and so on...
578-
------------------------------------------------------ */
579-
function RecursionCounter(el){
580-
let textCount = 0;
581-
for(let node of el.childNodes){
582-
if(node.nodeType === 3){
583-
let range = window.getSelection().getRangeAt(0);
584-
let containerNode = range.startContainer;
585-
586-
if(containerNode === node){
587-
textCount += range.startOffset;
588-
return ([textCount, true]);
589-
}
590-
textCount += node.textContent.length;
591-
}else{
592-
let tmp = RecursionCounter(node);
593-
textCount += tmp[0];
594-
if(tmp[1]){
595-
return ([textCount, true]);
596-
}
597-
}
598-
}
599-
return ([textCount, false]);
600-
}

‎src/mobx-script/util.js

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
export default class util{
2+
/* ------------------------------------------------------
3+
div-contentEditable cursor position calculator
4+
dealing with <b> <i> and so on...
5+
------------------------------------------------------ */
6+
static RecursionCounter(el){
7+
let textCount = 0;
8+
for(let node of el.childNodes){
9+
if(node.nodeType === 3){
10+
let range = window.getSelection().getRangeAt(0);
11+
let containerNode = range.startContainer;
12+
13+
if(containerNode === node){
14+
textCount += range.startOffset;
15+
return ([textCount, true]);
16+
}
17+
textCount += node.textContent.length;
18+
}else{
19+
let tmp = this.RecursionCounter(node);
20+
textCount += tmp[0];
21+
if(tmp[1]){
22+
return ([textCount, true]);
23+
}
24+
}
25+
}
26+
return ([textCount, false]);
27+
}
28+
29+
/* ------------------------------------------------------
30+
Find and place cursor in div-editable
31+
------------------------------------------------------ */
32+
static SetCaretPosition(el, offset){
33+
for(let node of el.childNodes){
34+
if(node.nodeType == 3){
35+
if(node.length >= offset){
36+
// stop here
37+
let range = document.createRange();
38+
let sel = window.getSelection();
39+
range.setStart(node, offset);
40+
range.collapse(true);
41+
sel.removeAllRanges();
42+
sel.addRange(range);
43+
return -1;
44+
}
45+
offset -= node.length;
46+
}else{
47+
offset = this.SetCaretPosition(node, offset);
48+
if(offset == -1){
49+
return -1;
50+
}
51+
}
52+
}
53+
return offset;
54+
}
55+
56+
/* ------------------------------------------------------
57+
delete selected content
58+
------------------------------------------------------ */
59+
static deleteContent(){
60+
window.getSelection().getRangeAt(0).deleteContents()
61+
}
62+
63+
/* ------------------------------------------------------
64+
return true if startOffSet != endOffSet
65+
------------------------------------------------------ */
66+
static isSelected(){
67+
let range = window.getSelection().getRangeAt(0);
68+
return range.startOffset != range.endOffset
69+
}
70+
71+
}

0 commit comments

Comments
 (0)