easy-richtextarea 4.0.20 → 4.0.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/example.js +176 -75
- package/lib/eventTypes.js +53 -0
- package/lib/example/view.js +14 -10
- package/lib/keyCodes.js +13 -4
- package/lib/richTextarea.js +86 -53
- package/package.json +1 -1
- package/src/eventTypes.js +17 -0
- package/src/example/view.js +13 -9
- package/src/keyCodes.js +1 -0
- package/src/richTextarea.js +78 -41
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "easy-richtextarea",
|
|
3
3
|
"author": "James Smith",
|
|
4
|
-
"version": "4.0.
|
|
4
|
+
"version": "4.0.22",
|
|
5
5
|
"license": "MIT, Anti-996",
|
|
6
6
|
"homepage": "https://github.com/djalbat/easy-richtextarea",
|
|
7
7
|
"description": "A textarea element that handles and hands off events well.",
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { eventTypes } from "easy";
|
|
4
|
+
|
|
5
|
+
export const { CUT_EVENT_TYPE,
|
|
6
|
+
COPY_EVENT_TYPE,
|
|
7
|
+
BLUR_EVENT_TYPE,
|
|
8
|
+
PASTE_EVENT_TYPE,
|
|
9
|
+
INPUT_EVENT_TYPE,
|
|
10
|
+
FOCUS_EVENT_TYPE,
|
|
11
|
+
CHANGE_EVENT_TYPE,
|
|
12
|
+
SCROLL_EVENT_TYPE,
|
|
13
|
+
KEYDOWN_EVENT_TYPE,
|
|
14
|
+
CONTEXTMENU_EVENT_TYPE,
|
|
15
|
+
SELECTIONCHANGE_EVENT_TYPE } = eventTypes;
|
|
16
|
+
|
|
17
|
+
export const FIND_EVENT_TYPE = "find";
|
package/src/example/view.js
CHANGED
|
@@ -5,7 +5,7 @@ import RichTextarea from "./richTextarea";
|
|
|
5
5
|
const content = "",
|
|
6
6
|
richTextarea =
|
|
7
7
|
|
|
8
|
-
<RichTextarea
|
|
8
|
+
<RichTextarea onFind={findHandler} onBlur={blurHandler} onFocus={focusHandler} onChange={changeHandler} onScroll={scrollHandler} />
|
|
9
9
|
|
|
10
10
|
;
|
|
11
11
|
|
|
@@ -23,6 +23,18 @@ const View = (properties) =>
|
|
|
23
23
|
|
|
24
24
|
export default View;
|
|
25
25
|
|
|
26
|
+
function findHandler(event, element) {
|
|
27
|
+
console.log("find")
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
function blurHandler(event, element) {
|
|
31
|
+
console.log("blur")
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
function focusHandler(event, element) {
|
|
35
|
+
console.log("focus")
|
|
36
|
+
}
|
|
37
|
+
|
|
26
38
|
function changeHandler(event, element) {
|
|
27
39
|
const contentChanged = richTextarea.hasContentChanged(),
|
|
28
40
|
selectionChanged = richTextarea.hasSelectionChanged();
|
|
@@ -36,11 +48,3 @@ function scrollHandler(event, element) {
|
|
|
36
48
|
|
|
37
49
|
console.log(scrollTop, scrollLeft)
|
|
38
50
|
}
|
|
39
|
-
|
|
40
|
-
function focusHandler(event, element) {
|
|
41
|
-
console.log("focus")
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
function blurHandler(event, element) {
|
|
45
|
-
console.log("blur")
|
|
46
|
-
}
|
package/src/keyCodes.js
CHANGED
package/src/richTextarea.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import { Element, document
|
|
3
|
+
import { Element, document } from "easy";
|
|
4
4
|
|
|
5
5
|
import Selection from "./selection"
|
|
6
6
|
import UndoBuffer from "./undoBuffer";
|
|
@@ -10,20 +10,20 @@ import transformContent from "./transform/content";
|
|
|
10
10
|
import transformSelection from "./transform/selection";
|
|
11
11
|
import generateOperations from "./operations/generate";
|
|
12
12
|
|
|
13
|
-
import { Z_KEY_CODE } from "./keyCodes";
|
|
14
13
|
import { TEXT, EMPTY_STRING } from "./constants";
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
14
|
+
import { F_KEY_CODE, Z_KEY_CODE } from "./keyCodes";
|
|
15
|
+
import { CUT_EVENT_TYPE,
|
|
16
|
+
COPY_EVENT_TYPE,
|
|
17
|
+
FIND_EVENT_TYPE,
|
|
18
|
+
BLUR_EVENT_TYPE,
|
|
19
|
+
PASTE_EVENT_TYPE,
|
|
20
|
+
INPUT_EVENT_TYPE,
|
|
21
|
+
FOCUS_EVENT_TYPE,
|
|
22
|
+
CHANGE_EVENT_TYPE,
|
|
23
|
+
SCROLL_EVENT_TYPE,
|
|
24
|
+
KEYDOWN_EVENT_TYPE,
|
|
25
|
+
CONTEXTMENU_EVENT_TYPE,
|
|
26
|
+
SELECTIONCHANGE_EVENT_TYPE } from "./eventTypes";
|
|
27
27
|
|
|
28
28
|
export default class RichTextarea extends Element {
|
|
29
29
|
constructor(selector, focused, readOnly, undoBuffer, previousContent, previousSelection) {
|
|
@@ -114,21 +114,31 @@ export default class RichTextarea extends Element {
|
|
|
114
114
|
}
|
|
115
115
|
|
|
116
116
|
keyDownHandler = (event, element) => {
|
|
117
|
-
const {
|
|
117
|
+
const { ctrlKey, metaKey } = event;
|
|
118
|
+
|
|
119
|
+
if (ctrlKey || metaKey) {
|
|
120
|
+
const { keyCode } = event;
|
|
121
|
+
|
|
122
|
+
switch (keyCode) {
|
|
123
|
+
case F_KEY_CODE: {
|
|
124
|
+
this.find(event, element);
|
|
118
125
|
|
|
119
|
-
|
|
120
|
-
const { ctrlKey, metaKey } = event;
|
|
126
|
+
event.preventDefault();
|
|
121
127
|
|
|
122
|
-
|
|
123
|
-
|
|
128
|
+
return;
|
|
129
|
+
}
|
|
124
130
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
this.undo(event, element);
|
|
131
|
+
case Z_KEY_CODE: {
|
|
132
|
+
const { shiftKey } = event;
|
|
128
133
|
|
|
129
|
-
|
|
134
|
+
shiftKey ?
|
|
135
|
+
this.redo(event, element) :
|
|
136
|
+
this.undo(event, element);
|
|
130
137
|
|
|
131
|
-
|
|
138
|
+
event.preventDefault();
|
|
139
|
+
|
|
140
|
+
return;
|
|
141
|
+
}
|
|
132
142
|
}
|
|
133
143
|
}
|
|
134
144
|
|
|
@@ -313,6 +323,12 @@ export default class RichTextarea extends Element {
|
|
|
313
323
|
}
|
|
314
324
|
}
|
|
315
325
|
|
|
326
|
+
find(event, element) {
|
|
327
|
+
const eventType = FIND_EVENT_TYPE;
|
|
328
|
+
|
|
329
|
+
this.callHandlers(eventType, event, element);
|
|
330
|
+
}
|
|
331
|
+
|
|
316
332
|
undo(event, element) {
|
|
317
333
|
const undoOperation = this.undoBuffer.undo();
|
|
318
334
|
|
|
@@ -437,6 +453,20 @@ export default class RichTextarea extends Element {
|
|
|
437
453
|
this.removeClass("active");
|
|
438
454
|
}
|
|
439
455
|
|
|
456
|
+
onFind(findHandler, element) {
|
|
457
|
+
const eventType = FIND_EVENT_TYPE,
|
|
458
|
+
handler = findHandler; ///
|
|
459
|
+
|
|
460
|
+
this.addEventListener(eventType, handler, element);
|
|
461
|
+
}
|
|
462
|
+
|
|
463
|
+
offFind(findHandler, element) {
|
|
464
|
+
const eventType = FIND_EVENT_TYPE,
|
|
465
|
+
handler = findHandler; ///
|
|
466
|
+
|
|
467
|
+
this.removeEventListener(eventType, handler, element);
|
|
468
|
+
}
|
|
469
|
+
|
|
440
470
|
onBlur(blurHandler, element) {
|
|
441
471
|
const eventType = BLUR_EVENT_TYPE,
|
|
442
472
|
handler = blurHandler; ///
|
|
@@ -494,11 +524,12 @@ export default class RichTextarea extends Element {
|
|
|
494
524
|
}
|
|
495
525
|
|
|
496
526
|
didMount() {
|
|
497
|
-
const {
|
|
498
|
-
|
|
499
|
-
|
|
527
|
+
const { onFind, onBlur, onFocus, onChange, onScroll } = this.properties,
|
|
528
|
+
findHandler = onFind, ///
|
|
529
|
+
blurHandler = onBlur, ///
|
|
500
530
|
focusHandler = onFocus, ///
|
|
501
|
-
|
|
531
|
+
changeHandler = onChange, ///
|
|
532
|
+
scrollHandler = onScroll; ///
|
|
502
533
|
|
|
503
534
|
const content = this.getContent(),
|
|
504
535
|
selection = this.getSelection();
|
|
@@ -507,13 +538,15 @@ export default class RichTextarea extends Element {
|
|
|
507
538
|
|
|
508
539
|
this.previousSelection = selection; ///
|
|
509
540
|
|
|
510
|
-
|
|
541
|
+
findHandler && this.onFind(findHandler, this);
|
|
511
542
|
|
|
512
|
-
|
|
543
|
+
blurHandler && this.onBlur(blurHandler, this);
|
|
513
544
|
|
|
514
545
|
focusHandler && this.onFocus(focusHandler, this);
|
|
515
546
|
|
|
516
|
-
|
|
547
|
+
changeHandler && this.onChange(changeHandler, this);
|
|
548
|
+
|
|
549
|
+
scrollHandler && this.onScroll(scrollHandler, this);
|
|
517
550
|
|
|
518
551
|
this.on(CUT_EVENT_TYPE, this.cutHandler);
|
|
519
552
|
|
|
@@ -527,19 +560,22 @@ export default class RichTextarea extends Element {
|
|
|
527
560
|
}
|
|
528
561
|
|
|
529
562
|
willUnmount() {
|
|
530
|
-
const {
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
563
|
+
const { onFind, onBlur, onFocus, onChange, onScroll } = this.properties,
|
|
564
|
+
findHandler = onFind, ///
|
|
565
|
+
blurHandler = onBlur, ///
|
|
566
|
+
focusHandler = onFocus, ///
|
|
567
|
+
changeHandler = onChange, ///
|
|
568
|
+
scrollHandler = onScroll; ///
|
|
535
569
|
|
|
536
|
-
|
|
570
|
+
findHandler && this.offFind(findHandler, this);
|
|
537
571
|
|
|
538
|
-
|
|
572
|
+
blurHandler && this.offBlur(blurHandler, this);
|
|
539
573
|
|
|
540
574
|
focusHandler && this.offFocus(focusHandler, this);
|
|
541
575
|
|
|
542
|
-
|
|
576
|
+
changeHandler && this.offChange(changeHandler, this);
|
|
577
|
+
|
|
578
|
+
scrollHandler && this.offScroll(scrollHandler, this);
|
|
543
579
|
|
|
544
580
|
this.off(CUT_EVENT_TYPE, this.cutHandler);
|
|
545
581
|
|
|
@@ -561,10 +597,11 @@ export default class RichTextarea extends Element {
|
|
|
561
597
|
static tagName = "textarea";
|
|
562
598
|
|
|
563
599
|
static ignoredProperties = [
|
|
600
|
+
"onFind",
|
|
601
|
+
"onBlur",
|
|
602
|
+
"onFocus",
|
|
564
603
|
"onChange",
|
|
565
604
|
"onScroll",
|
|
566
|
-
"onFocus",
|
|
567
|
-
"onBlur"
|
|
568
605
|
];
|
|
569
606
|
|
|
570
607
|
static defaultProperties = {
|