@pie-lib/text-select 1.8.4 → 1.8.6-next.122
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/CHANGELOG.json +30 -0
- package/CHANGELOG.md +20 -77
- package/lib/index.js +8 -0
- package/lib/index.js.map +1 -1
- package/lib/text-select.js +5 -2
- package/lib/text-select.js.map +1 -1
- package/lib/token-select/index.js +30 -25
- package/lib/token-select/index.js.map +1 -1
- package/lib/token-select/token.js +12 -2
- package/lib/token-select/token.js.map +1 -1
- package/lib/tokenizer/selection-utils.js +1 -1
- package/lib/tokenizer/selection-utils.js.map +1 -1
- package/lib/tokenizer/token-text.js +15 -4
- package/lib/tokenizer/token-text.js.map +1 -1
- package/lib/utils.js +67 -0
- package/lib/utils.js.map +1 -0
- package/package.json +3 -3
- package/src/index.js +2 -1
- package/src/text-select.jsx +4 -1
- package/src/token-select/index.jsx +11 -5
- package/src/token-select/token.jsx +12 -1
- package/src/tokenizer/selection-utils.js +1 -1
- package/src/tokenizer/token-text.jsx +34 -6
- package/src/utils.js +56 -0
package/CHANGELOG.json
CHANGED
|
@@ -598,5 +598,35 @@
|
|
|
598
598
|
"committerDate": "2021-07-22 12:12:59 +0300",
|
|
599
599
|
"isTagged": true,
|
|
600
600
|
"tag": "@pie-lib/text-select@1.8.3"
|
|
601
|
+
},
|
|
602
|
+
{
|
|
603
|
+
"type": "fix",
|
|
604
|
+
"scope": "text-select",
|
|
605
|
+
"subject": "move prepareText function from pie-elements",
|
|
606
|
+
"merge": null,
|
|
607
|
+
"header": "fix(text-select): move prepareText function from pie-elements",
|
|
608
|
+
"body": null,
|
|
609
|
+
"footer": null,
|
|
610
|
+
"notes": [],
|
|
611
|
+
"hash": "0eaee810bca925de966d43e2a1a27f358df6b19d",
|
|
612
|
+
"gitTags": " (origin/fix/text-select-refactor)",
|
|
613
|
+
"committerDate": "2021-08-09 09:58:13 +0300",
|
|
614
|
+
"isTagged": true,
|
|
615
|
+
"tag": "@pie-lib/text-select@1.8.5"
|
|
616
|
+
},
|
|
617
|
+
{
|
|
618
|
+
"type": "fix",
|
|
619
|
+
"scope": "select-text",
|
|
620
|
+
"subject": "made sure the new line characters are taken into consideration for offsets [PD-1145]",
|
|
621
|
+
"merge": null,
|
|
622
|
+
"header": "fix(select-text): made sure the new line characters are taken into consideration for offsets [PD-1145]",
|
|
623
|
+
"body": null,
|
|
624
|
+
"footer": null,
|
|
625
|
+
"notes": [],
|
|
626
|
+
"hash": "a7bb44a833e2931177e122010aa160a924982530",
|
|
627
|
+
"gitTags": " (origin/feat/PD-1145-new-line-offset-handling)",
|
|
628
|
+
"committerDate": "2021-09-24 13:15:39 +0300",
|
|
629
|
+
"isTagged": true,
|
|
630
|
+
"tag": "@pie-lib/text-select@1.8.8"
|
|
601
631
|
}
|
|
602
632
|
]
|
package/CHANGELOG.md
CHANGED
|
@@ -3,26 +3,18 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
-
## [1.8.
|
|
7
|
-
|
|
8
|
-
**Note:** Version bump only for package @pie-lib/text-select
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
## [1.8.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.8.2...@pie-lib/text-select@1.8.3) (2021-07-23)
|
|
6
|
+
## [1.8.5](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.8.4...@pie-lib/text-select@1.8.5) (2021-08-30)
|
|
15
7
|
|
|
16
8
|
|
|
17
9
|
### Bug Fixes
|
|
18
10
|
|
|
19
|
-
* **text-select:**
|
|
11
|
+
* **text-select:** move prepareText function from pie-elements ([0eaee81](https://github.com/pie-framework/pie-lib/commit/0eaee81))
|
|
20
12
|
|
|
21
13
|
|
|
22
14
|
|
|
23
15
|
|
|
24
16
|
|
|
25
|
-
## [1.8.
|
|
17
|
+
## [1.8.4](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.8.3...@pie-lib/text-select@1.8.4) (2021-08-04)
|
|
26
18
|
|
|
27
19
|
**Note:** Version bump only for package @pie-lib/text-select
|
|
28
20
|
|
|
@@ -30,135 +22,86 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
30
22
|
|
|
31
23
|
|
|
32
24
|
|
|
33
|
-
|
|
34
|
-
|
|
25
|
+
## [1.8.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.8.2...@pie-lib/text-select@1.8.3) (2021-07-23)
|
|
35
26
|
|
|
36
27
|
### Bug Fixes
|
|
37
28
|
|
|
38
|
-
|
|
39
|
-
* **text-select:** select text view mode should use black for text color PD-1154 ([0db5b1e](https://github.com/pie-framework/pie-lib/commit/0db5b1e))
|
|
29
|
+
- **text-select:** Fixed white space collapse PD-477 ([1f9481f](https://github.com/pie-framework/pie-lib/commit/1f9481f))
|
|
40
30
|
|
|
31
|
+
## [1.8.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.8.0...@pie-lib/text-select@1.8.2) (2021-06-25)
|
|
41
32
|
|
|
42
|
-
|
|
33
|
+
**Note:** Version bump only for package @pie-lib/text-select
|
|
43
34
|
|
|
44
|
-
|
|
35
|
+
# [1.8.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.7.13...@pie-lib/text-select@1.8.0) (2021-06-25)
|
|
45
36
|
|
|
37
|
+
### Bug Fixes
|
|
46
38
|
|
|
39
|
+
- **text-select:** fix incorrect indenting PD-1038 ([4d56509](https://github.com/pie-framework/pie-lib/commit/4d56509))
|
|
40
|
+
- **text-select:** select text view mode should use black for text color PD-1154 ([0db5b1e](https://github.com/pie-framework/pie-lib/commit/0db5b1e))
|
|
47
41
|
|
|
42
|
+
### Features
|
|
48
43
|
|
|
44
|
+
- **text-select:** when select-text item permits only one selection, change behavior of gather PD-958 ([c181314](https://github.com/pie-framework/pie-lib/commit/c181314))
|
|
49
45
|
|
|
50
46
|
## [1.7.13](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.7.12...@pie-lib/text-select@1.7.13) (2021-03-01)
|
|
51
47
|
|
|
52
48
|
**Note:** Version bump only for package @pie-lib/text-select
|
|
53
49
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
50
|
## [1.7.12](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.7.11...@pie-lib/text-select@1.7.12) (2021-03-01)
|
|
59
51
|
|
|
60
|
-
|
|
61
52
|
### Bug Fixes
|
|
62
53
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
54
|
+
- **text-select:** fix layout for legacy items with line number ([d50865e](https://github.com/pie-framework/pie-lib/commit/d50865e))
|
|
55
|
+
- **text-select:** fix padding for tokens in order to fix PD-860 ([eacb81c](https://github.com/pie-framework/pie-lib/commit/eacb81c))
|
|
56
|
+
- **text-select:** show tokens if they are selected in view mode to fix PD-464 ([7821536](https://github.com/pie-framework/pie-lib/commit/7821536))
|
|
70
57
|
|
|
71
58
|
## [1.7.11](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.7.10...@pie-lib/text-select@1.7.11) (2021-02-15)
|
|
72
59
|
|
|
73
60
|
**Note:** Version bump only for package @pie-lib/text-select
|
|
74
61
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
62
|
## [1.7.10](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.7.8...@pie-lib/text-select@1.7.10) (2021-02-15)
|
|
80
63
|
|
|
81
64
|
**Note:** Version bump only for package @pie-lib/text-select
|
|
82
65
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
66
|
## [1.7.8](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.7.7...@pie-lib/text-select@1.7.8) (2021-02-15)
|
|
88
67
|
|
|
89
|
-
|
|
90
68
|
### Bug Fixes
|
|
91
69
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
70
|
+
- **text-select:** fix space between lines ([5633537](https://github.com/pie-framework/pie-lib/commit/5633537))
|
|
97
71
|
|
|
98
72
|
## [1.7.7](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.7.6...@pie-lib/text-select@1.7.7) (2021-02-01)
|
|
99
73
|
|
|
100
74
|
**Note:** Version bump only for package @pie-lib/text-select
|
|
101
75
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
76
|
## [1.7.6](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.7.5...@pie-lib/text-select@1.7.6) (2021-01-28)
|
|
107
77
|
|
|
108
78
|
**Note:** Version bump only for package @pie-lib/text-select
|
|
109
79
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
80
|
## [1.7.5](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.7.4...@pie-lib/text-select@1.7.5) (2021-01-28)
|
|
115
81
|
|
|
116
82
|
**Note:** Version bump only for package @pie-lib/text-select
|
|
117
83
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
84
|
## [1.7.4](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.7.3...@pie-lib/text-select@1.7.4) (2021-01-25)
|
|
123
85
|
|
|
124
|
-
|
|
125
86
|
### Bug Fixes
|
|
126
87
|
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
88
|
+
- **text-select:** fix token rendering issue - PD-642 ([89f3b70](https://github.com/pie-framework/pie-lib/commit/89f3b70))
|
|
132
89
|
|
|
133
90
|
## [1.7.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.7.2...@pie-lib/text-select@1.7.3) (2021-01-11)
|
|
134
91
|
|
|
135
|
-
|
|
136
92
|
### Bug Fixes
|
|
137
93
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
94
|
+
- Added fix for style changes after selection of max tokens PD-646 ([30183a9](https://github.com/pie-framework/pie-lib/commit/30183a9))
|
|
143
95
|
|
|
144
96
|
## [1.7.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.7.1...@pie-lib/text-select@1.7.2) (2020-10-29)
|
|
145
97
|
|
|
146
98
|
**Note:** Version bump only for package @pie-lib/text-select
|
|
147
99
|
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
100
|
## [1.7.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.7.0...@pie-lib/text-select@1.7.1) (2020-10-26)
|
|
153
101
|
|
|
154
|
-
|
|
155
102
|
### Bug Fixes
|
|
156
103
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
104
|
+
- **select-text:** fix text indent styling for tokens ([0d13170](https://github.com/pie-framework/pie-lib/commit/0d13170))
|
|
162
105
|
|
|
163
106
|
# [1.7.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.6.1...@pie-lib/text-select@1.7.0) (2020-10-26)
|
|
164
107
|
|
package/lib/index.js
CHANGED
|
@@ -33,6 +33,12 @@ Object.defineProperty(exports, "Token", {
|
|
|
33
33
|
return _token["default"];
|
|
34
34
|
}
|
|
35
35
|
});
|
|
36
|
+
Object.defineProperty(exports, "prepareText", {
|
|
37
|
+
enumerable: true,
|
|
38
|
+
get: function get() {
|
|
39
|
+
return _utils.prepareText;
|
|
40
|
+
}
|
|
41
|
+
});
|
|
36
42
|
|
|
37
43
|
var _tokenizer = _interopRequireDefault(require("./tokenizer"));
|
|
38
44
|
|
|
@@ -42,6 +48,8 @@ var _textSelect = _interopRequireDefault(require("./text-select"));
|
|
|
42
48
|
|
|
43
49
|
var _token = _interopRequireDefault(require("./token-select/token"));
|
|
44
50
|
|
|
51
|
+
var _utils = require("./utils");
|
|
52
|
+
|
|
45
53
|
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
|
|
46
54
|
|
|
47
55
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["import Tokenizer from './tokenizer';\nimport TokenSelect, { TokenTypes } from './token-select';\nimport TextSelect from './text-select';\nimport Token from './token-select/token';\nimport { prepareText } from './utils';\n\nexport { TextSelect, TokenTypes, Tokenizer, TokenSelect, Token, prepareText };\n"],"file":"index.js"}
|
package/lib/text-select.js
CHANGED
|
@@ -97,7 +97,8 @@ function (_React$Component) {
|
|
|
97
97
|
selectedTokens = _this$props.selectedTokens,
|
|
98
98
|
className = _this$props.className,
|
|
99
99
|
highlightChoices = _this$props.highlightChoices,
|
|
100
|
-
maxNoOfSelections = _this$props.maxNoOfSelections
|
|
100
|
+
maxNoOfSelections = _this$props.maxNoOfSelections,
|
|
101
|
+
animationsDisabled = _this$props.animationsDisabled;
|
|
101
102
|
var normalized = (0, _builder.normalize)(text, tokens);
|
|
102
103
|
log('normalized: ', normalized);
|
|
103
104
|
var prepped = normalized.map(function (t) {
|
|
@@ -118,7 +119,8 @@ function (_React$Component) {
|
|
|
118
119
|
tokens: prepped,
|
|
119
120
|
disabled: disabled,
|
|
120
121
|
onChange: this.change,
|
|
121
|
-
maxNoOfSelections: maxNoOfSelections
|
|
122
|
+
maxNoOfSelections: maxNoOfSelections,
|
|
123
|
+
animationsDisabled: animationsDisabled
|
|
122
124
|
});
|
|
123
125
|
}
|
|
124
126
|
}]);
|
|
@@ -136,6 +138,7 @@ _defineProperty(TextSelect, "propTypes", {
|
|
|
136
138
|
text: _propTypes["default"].string.isRequired,
|
|
137
139
|
className: _propTypes["default"].string,
|
|
138
140
|
highlightChoices: _propTypes["default"].bool,
|
|
141
|
+
animationsDisabled: _propTypes["default"].bool,
|
|
139
142
|
maxNoOfSelections: _propTypes["default"].number
|
|
140
143
|
});
|
|
141
144
|
//# sourceMappingURL=text-select.js.map
|
package/lib/text-select.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/text-select.jsx"],"names":["log","TextSelect","tokens","onChange","props","out","filter","t","selected","map","start","end","text","disabled","selectedTokens","className","highlightChoices","maxNoOfSelections","normalized","prepped","selectedIndex","findIndex","s","correct","undefined","selectable","predefined","change","React","Component","PropTypes","func","bool","arrayOf","shape","TokenTypes","isRequired","string","number"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,IAAMA,GAAG,GAAG,uBAAM,sBAAN,CAAZ;AACA;;;;IAGqBC,U;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../src/text-select.jsx"],"names":["log","TextSelect","tokens","onChange","props","out","filter","t","selected","map","start","end","text","disabled","selectedTokens","className","highlightChoices","maxNoOfSelections","animationsDisabled","normalized","prepped","selectedIndex","findIndex","s","correct","undefined","selectable","predefined","change","React","Component","PropTypes","func","bool","arrayOf","shape","TokenTypes","isRequired","string","number"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport TokenSelect from './token-select';\nimport { normalize } from './tokenizer/builder';\nimport { TokenTypes } from './token-select/token';\nimport debug from 'debug';\nconst log = debug('@pie-lib:text-select');\n/**\n * Built on TokenSelect uses build.normalize to build the token set.\n */\nexport default class TextSelect extends React.Component {\n static propTypes = {\n onChange: PropTypes.func,\n disabled: PropTypes.bool,\n tokens: PropTypes.arrayOf(PropTypes.shape(TokenTypes)).isRequired,\n selectedTokens: PropTypes.arrayOf(PropTypes.shape(TokenTypes)).isRequired,\n text: PropTypes.string.isRequired,\n className: PropTypes.string,\n highlightChoices: PropTypes.bool,\n animationsDisabled: PropTypes.bool,\n maxNoOfSelections: PropTypes.number\n };\n\n change = tokens => {\n const { onChange } = this.props;\n\n if (!onChange) {\n return;\n }\n const out = tokens.filter(t => t.selected).map(t => ({ start: t.start, end: t.end }));\n\n onChange(out);\n };\n\n render() {\n const {\n text,\n disabled,\n tokens,\n selectedTokens,\n className,\n highlightChoices,\n maxNoOfSelections,\n animationsDisabled\n } = this.props;\n\n const normalized = normalize(text, tokens);\n log('normalized: ', normalized);\n const prepped = normalized.map(t => {\n const selectedIndex = selectedTokens.findIndex(s => {\n return s.start === t.start && s.end === t.end;\n });\n const selected = selectedIndex !== -1;\n const correct = selected ? t.correct : undefined;\n return {\n ...t,\n selectable: !disabled && t.predefined,\n selected,\n correct\n };\n });\n\n return (\n <TokenSelect\n highlightChoices={!disabled && highlightChoices}\n className={className}\n tokens={prepped}\n disabled={disabled}\n onChange={this.change}\n maxNoOfSelections={maxNoOfSelections}\n animationsDisabled={animationsDisabled}\n />\n );\n }\n}\n"],"file":"text-select.js"}
|
|
@@ -94,16 +94,18 @@ function (_React$Component) {
|
|
|
94
94
|
|
|
95
95
|
_defineProperty(_assertThisInitialized(_this), "toggleToken", function (event) {
|
|
96
96
|
var target = event.target;
|
|
97
|
-
var
|
|
97
|
+
var _this$props = _this.props,
|
|
98
|
+
tokens = _this$props.tokens,
|
|
99
|
+
animationsDisabled = _this$props.animationsDisabled;
|
|
98
100
|
var tokensCloned = (0, _clone["default"])(tokens);
|
|
99
101
|
var targetSpanWrapper = target.closest(".".concat(_token["default"].rootClassName));
|
|
100
102
|
var targetedTokenIndex = targetSpanWrapper && targetSpanWrapper.dataset && targetSpanWrapper.dataset.indexkey;
|
|
101
103
|
var t = targetedTokenIndex && tokensCloned[targetedTokenIndex];
|
|
102
104
|
|
|
103
|
-
if (t && t.correct === undefined) {
|
|
104
|
-
var _this$
|
|
105
|
-
onChange = _this$
|
|
106
|
-
maxNoOfSelections = _this$
|
|
105
|
+
if (t && t.correct === undefined && !animationsDisabled) {
|
|
106
|
+
var _this$props2 = _this.props,
|
|
107
|
+
onChange = _this$props2.onChange,
|
|
108
|
+
maxNoOfSelections = _this$props2.maxNoOfSelections;
|
|
107
109
|
var selected = !t.selected;
|
|
108
110
|
|
|
109
111
|
if (maxNoOfSelections === 1 && _this.selectedCount() === 1) {
|
|
@@ -145,10 +147,11 @@ function (_React$Component) {
|
|
|
145
147
|
});
|
|
146
148
|
|
|
147
149
|
_defineProperty(_assertThisInitialized(_this), "generateTokensInHtml", function () {
|
|
148
|
-
var _this$
|
|
149
|
-
tokens = _this$
|
|
150
|
-
disabled = _this$
|
|
151
|
-
highlightChoices = _this$
|
|
150
|
+
var _this$props3 = _this.props,
|
|
151
|
+
tokens = _this$props3.tokens,
|
|
152
|
+
disabled = _this$props3.disabled,
|
|
153
|
+
highlightChoices = _this$props3.highlightChoices,
|
|
154
|
+
animationsDisabled = _this$props3.animationsDisabled;
|
|
152
155
|
|
|
153
156
|
var selectedCount = _this.selectedCount();
|
|
154
157
|
|
|
@@ -172,19 +175,20 @@ function (_React$Component) {
|
|
|
172
175
|
|
|
173
176
|
if (isLineBreak(t.text)) {
|
|
174
177
|
return finalAcc + '<br>';
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
if (selectable && !disabled || showCorrectAnswer || t.selected || animationsDisabled && t.predefined // if we are in print mode
|
|
181
|
+
) {
|
|
182
|
+
return finalAcc + (0, _server.renderToString)(_react["default"].createElement(_token["default"], _extends({
|
|
183
|
+
key: index,
|
|
184
|
+
disabled: disabled,
|
|
185
|
+
index: index
|
|
186
|
+
}, t, {
|
|
187
|
+
selectable: selectable,
|
|
188
|
+
highlight: highlightChoices,
|
|
189
|
+
animationsDisabled: animationsDisabled
|
|
190
|
+
})));
|
|
191
|
+
} else {
|
|
188
192
|
return accumulator + t.text;
|
|
189
193
|
}
|
|
190
194
|
};
|
|
@@ -199,9 +203,9 @@ function (_React$Component) {
|
|
|
199
203
|
_createClass(TokenSelect, [{
|
|
200
204
|
key: "render",
|
|
201
205
|
value: function render() {
|
|
202
|
-
var _this$
|
|
203
|
-
classes = _this$
|
|
204
|
-
classNameProp = _this$
|
|
206
|
+
var _this$props4 = this.props,
|
|
207
|
+
classes = _this$props4.classes,
|
|
208
|
+
classNameProp = _this$props4.className;
|
|
205
209
|
var className = (0, _classnames["default"])(classes.tokenSelect, classNameProp);
|
|
206
210
|
var html = this.generateTokensInHtml();
|
|
207
211
|
return _react["default"].createElement("div", {
|
|
@@ -226,6 +230,7 @@ _defineProperty(TokenSelect, "propTypes", {
|
|
|
226
230
|
onChange: _propTypes["default"].func.isRequired,
|
|
227
231
|
disabled: _propTypes["default"].bool,
|
|
228
232
|
highlightChoices: _propTypes["default"].bool,
|
|
233
|
+
animationsDisabled: _propTypes["default"].bool,
|
|
229
234
|
maxNoOfSelections: _propTypes["default"].number
|
|
230
235
|
});
|
|
231
236
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/token-select/index.jsx"],"names":["log","TokenSelect","props","tokens","filter","t","selected","length","selectedCount","maxNoOfSelections","isFinite","event","target","tokensCloned","targetSpanWrapper","closest","Token","rootClassName","targetedTokenIndex","dataset","indexkey","correct","undefined","onChange","selectedToken","updatedTokens","map","token","selectable","update","splice","disabled","highlightChoices","isLineBreak","text","isNewParagraph","reducer","accumulator","index","canSelectMore","showCorrectAnswer","finalAcc","reduceResult","reduce","classes","classNameProp","className","tokenSelect","html","generateTokensInHtml","__html","toggleToken","React","Component","PropTypes","arrayOf","shape","TokenTypes","isRequired","string","object","func","bool","number","backgroundColor","whiteSpace"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Token, { TokenTypes } from './token';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport clone from 'lodash/clone';\nimport debug from 'debug';\nimport { noSelect } from '@pie-lib/style-utils';\nimport { renderToString } from 'react-dom/server';\nimport isEqual from 'lodash/isEqual';\n\nconst log = debug('@pie-lib:text-select:token-select');\n\nexport class TokenSelect extends React.Component {\n static propTypes = {\n tokens: PropTypes.arrayOf(PropTypes.shape(TokenTypes)).isRequired,\n className: PropTypes.string,\n classes: PropTypes.object.isRequired,\n onChange: PropTypes.func.isRequired,\n disabled: PropTypes.bool,\n highlightChoices: PropTypes.bool,\n maxNoOfSelections: PropTypes.number\n };\n\n static defaultProps = {\n highlightChoices: false,\n maxNoOfSelections: 0,\n tokens: []\n };\n\n selectedCount = () => this.props.tokens.filter(t => t.selected).length;\n\n canSelectMore = selectedCount => {\n const { maxNoOfSelections } = this.props;\n\n if (maxNoOfSelections === 1) {\n return true;\n }\n\n log('[canSelectMore] maxNoOfSelections: ', maxNoOfSelections, 'selectedCount: ', selectedCount);\n return (\n maxNoOfSelections <= 0 || (isFinite(maxNoOfSelections) && selectedCount < maxNoOfSelections)\n );\n };\n\n /**\n @function\n @param { object } event\n\n @description\n each token is wrapped into a span that has Token.rootClassName class and indexkey attribute (represents the index of the token)\n tokens are updated with the targeted token having the correct value set for 'selected' property\n */\n toggleToken = event => {\n const { target } = event;\n const { tokens } = this.props;\n const tokensCloned = clone(tokens);\n const targetSpanWrapper = target.closest(`.${Token.rootClassName}`);\n const targetedTokenIndex =\n targetSpanWrapper && targetSpanWrapper.dataset && targetSpanWrapper.dataset.indexkey;\n const t = targetedTokenIndex && tokensCloned[targetedTokenIndex];\n\n if (t && t.correct === undefined) {\n const { onChange, maxNoOfSelections } = this.props;\n const selected = !t.selected;\n\n if (maxNoOfSelections === 1 && this.selectedCount() === 1) {\n const selectedToken = (tokens || []).filter(t => t.selected);\n\n const updatedTokens = tokensCloned.map(token => {\n if (isEqual(token, selectedToken[0])) {\n return { ...token, selected: false };\n }\n\n return { ...token, selectable: true };\n });\n\n const update = { ...t, selected: !t.selected };\n\n updatedTokens.splice(targetedTokenIndex, 1, update);\n onChange(updatedTokens);\n } else {\n if (selected && maxNoOfSelections > 0 && this.selectedCount() >= maxNoOfSelections) {\n log('skip toggle max reached');\n return;\n }\n\n const update = { ...t, selected: !t.selected };\n\n tokensCloned.splice(targetedTokenIndex, 1, update);\n onChange(tokensCloned);\n }\n }\n };\n\n generateTokensInHtml = () => {\n const { tokens, disabled, highlightChoices } = this.props;\n const selectedCount = this.selectedCount();\n const isLineBreak = text => text === '\\n';\n const isNewParagraph = text => text === '\\n\\n';\n\n const reducer = (accumulator, t, index) => {\n const selectable = t.selected || (t.selectable && this.canSelectMore(selectedCount));\n const showCorrectAnswer = t.correct !== undefined && (t.selectable || t.selected);\n let finalAcc = accumulator;\n\n if (isNewParagraph(t.text)) {\n return finalAcc + '</p><p>';\n }\n\n if (isLineBreak(t.text)) {\n return finalAcc + '<br>';\n }\n\n //modified (selectable && !disabled) to !disabled to fix PD-646\n if (!disabled || showCorrectAnswer || t.selected) {\n return (\n finalAcc +\n renderToString(\n <Token\n key={index}\n disabled={disabled}\n index={index}\n {...t}\n selectable={selectable}\n highlight={highlightChoices}\n />\n )\n );\n } else {\n return accumulator + t.text;\n }\n };\n\n const reduceResult = (tokens || []).reduce(reducer, '<p>');\n\n return reduceResult + '</p>';\n };\n\n render() {\n const { classes, className: classNameProp } = this.props;\n const className = classNames(classes.tokenSelect, classNameProp);\n const html = this.generateTokensInHtml();\n\n return (\n <div\n className={className}\n dangerouslySetInnerHTML={{ __html: html }}\n onClick={this.toggleToken}\n />\n );\n }\n}\n\nexport default withStyles(() => ({\n tokenSelect: {\n backgroundColor: 'none',\n whiteSpace: 'pre',\n ...noSelect(),\n '& p': {\n whiteSpace: 'break-spaces'\n }\n }\n}))(TokenSelect);\n"],"file":"index.js"}
|
|
1
|
+
{"version":3,"sources":["../../src/token-select/index.jsx"],"names":["log","TokenSelect","props","tokens","filter","t","selected","length","selectedCount","maxNoOfSelections","isFinite","event","target","animationsDisabled","tokensCloned","targetSpanWrapper","closest","Token","rootClassName","targetedTokenIndex","dataset","indexkey","correct","undefined","onChange","selectedToken","updatedTokens","map","token","selectable","update","splice","disabled","highlightChoices","isLineBreak","text","isNewParagraph","reducer","accumulator","index","canSelectMore","showCorrectAnswer","finalAcc","predefined","reduceResult","reduce","classes","classNameProp","className","tokenSelect","html","generateTokensInHtml","__html","toggleToken","React","Component","PropTypes","arrayOf","shape","TokenTypes","isRequired","string","object","func","bool","number","backgroundColor","whiteSpace"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Token, { TokenTypes } from './token';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport clone from 'lodash/clone';\nimport debug from 'debug';\nimport { noSelect } from '@pie-lib/style-utils';\nimport { renderToString } from 'react-dom/server';\nimport isEqual from 'lodash/isEqual';\n\nconst log = debug('@pie-lib:text-select:token-select');\n\nexport class TokenSelect extends React.Component {\n static propTypes = {\n tokens: PropTypes.arrayOf(PropTypes.shape(TokenTypes)).isRequired,\n className: PropTypes.string,\n classes: PropTypes.object.isRequired,\n onChange: PropTypes.func.isRequired,\n disabled: PropTypes.bool,\n highlightChoices: PropTypes.bool,\n animationsDisabled: PropTypes.bool,\n maxNoOfSelections: PropTypes.number\n };\n\n static defaultProps = {\n highlightChoices: false,\n maxNoOfSelections: 0,\n tokens: []\n };\n\n selectedCount = () => this.props.tokens.filter(t => t.selected).length;\n\n canSelectMore = selectedCount => {\n const { maxNoOfSelections } = this.props;\n\n if (maxNoOfSelections === 1) {\n return true;\n }\n\n log('[canSelectMore] maxNoOfSelections: ', maxNoOfSelections, 'selectedCount: ', selectedCount);\n return (\n maxNoOfSelections <= 0 || (isFinite(maxNoOfSelections) && selectedCount < maxNoOfSelections)\n );\n };\n\n /**\n @function\n @param { object } event\n\n @description\n each token is wrapped into a span that has Token.rootClassName class and indexkey attribute (represents the index of the token)\n tokens are updated with the targeted token having the correct value set for 'selected' property\n */\n toggleToken = event => {\n const { target } = event;\n const { tokens, animationsDisabled } = this.props;\n const tokensCloned = clone(tokens);\n const targetSpanWrapper = target.closest(`.${Token.rootClassName}`);\n const targetedTokenIndex =\n targetSpanWrapper && targetSpanWrapper.dataset && targetSpanWrapper.dataset.indexkey;\n const t = targetedTokenIndex && tokensCloned[targetedTokenIndex];\n\n if (t && t.correct === undefined && !animationsDisabled) {\n const { onChange, maxNoOfSelections } = this.props;\n const selected = !t.selected;\n\n if (maxNoOfSelections === 1 && this.selectedCount() === 1) {\n const selectedToken = (tokens || []).filter(t => t.selected);\n\n const updatedTokens = tokensCloned.map(token => {\n if (isEqual(token, selectedToken[0])) {\n return { ...token, selected: false };\n }\n\n return { ...token, selectable: true };\n });\n\n const update = { ...t, selected: !t.selected };\n\n updatedTokens.splice(targetedTokenIndex, 1, update);\n onChange(updatedTokens);\n } else {\n if (selected && maxNoOfSelections > 0 && this.selectedCount() >= maxNoOfSelections) {\n log('skip toggle max reached');\n return;\n }\n\n const update = { ...t, selected: !t.selected };\n\n tokensCloned.splice(targetedTokenIndex, 1, update);\n onChange(tokensCloned);\n }\n }\n };\n\n generateTokensInHtml = () => {\n const { tokens, disabled, highlightChoices, animationsDisabled } = this.props;\n const selectedCount = this.selectedCount();\n const isLineBreak = text => text === '\\n';\n const isNewParagraph = text => text === '\\n\\n';\n\n const reducer = (accumulator, t, index) => {\n const selectable = t.selected || (t.selectable && this.canSelectMore(selectedCount));\n const showCorrectAnswer = t.correct !== undefined && (t.selectable || t.selected);\n let finalAcc = accumulator;\n\n if (isNewParagraph(t.text)) {\n return finalAcc + '</p><p>';\n }\n\n if (isLineBreak(t.text)) {\n return finalAcc + '<br>';\n }\n\n if (\n (selectable && !disabled) ||\n showCorrectAnswer ||\n t.selected ||\n (animationsDisabled && t.predefined) // if we are in print mode\n ) {\n return (\n finalAcc +\n renderToString(\n <Token\n key={index}\n disabled={disabled}\n index={index}\n {...t}\n selectable={selectable}\n highlight={highlightChoices}\n animationsDisabled={animationsDisabled}\n />\n )\n );\n } else {\n return accumulator + t.text;\n }\n };\n\n const reduceResult = (tokens || []).reduce(reducer, '<p>');\n\n return reduceResult + '</p>';\n };\n\n render() {\n const { classes, className: classNameProp } = this.props;\n const className = classNames(classes.tokenSelect, classNameProp);\n const html = this.generateTokensInHtml();\n\n return (\n <div\n className={className}\n dangerouslySetInnerHTML={{ __html: html }}\n onClick={this.toggleToken}\n />\n );\n }\n}\n\nexport default withStyles(() => ({\n tokenSelect: {\n backgroundColor: 'none',\n whiteSpace: 'pre',\n ...noSelect(),\n '& p': {\n whiteSpace: 'break-spaces'\n }\n }\n}))(TokenSelect);\n"],"file":"index.js"}
|
|
@@ -70,7 +70,8 @@ function (_React$Component) {
|
|
|
70
70
|
disabled = _this$props.disabled,
|
|
71
71
|
index = _this$props.index,
|
|
72
72
|
highlight = _this$props.highlight,
|
|
73
|
-
correct = _this$props.correct
|
|
73
|
+
correct = _this$props.correct,
|
|
74
|
+
animationsDisabled = _this$props.animationsDisabled;
|
|
74
75
|
var className;
|
|
75
76
|
|
|
76
77
|
if (correct === undefined && selected && disabled) {
|
|
@@ -78,7 +79,7 @@ function (_React$Component) {
|
|
|
78
79
|
} else if (correct !== undefined) {
|
|
79
80
|
className = (0, _classnames["default"])(Token.rootClassName, classes.custom, correct === true && classes.correct, correct === false && classes.incorrect);
|
|
80
81
|
} else {
|
|
81
|
-
className = (0, _classnames["default"])(Token.rootClassName, classes.token, disabled && classes.disabled, selectable && !disabled && classes.selectable, selected && !disabled && classes.selected, selected && disabled && classes.disabledAndSelected, highlight && selectable && !disabled && !selected && classes.highlight, classNameProp);
|
|
82
|
+
className = (0, _classnames["default"])(Token.rootClassName, classes.token, disabled && classes.disabled, selectable && !disabled && classes.selectable, selected && !disabled && classes.selected, selected && disabled && classes.disabledAndSelected, highlight && selectable && !disabled && !selected && classes.highlight, animationsDisabled && classes.print, classNameProp);
|
|
82
83
|
}
|
|
83
84
|
|
|
84
85
|
return _react["default"].createElement("span", {
|
|
@@ -162,6 +163,15 @@ var _default = (0, _styles.withStyles)(function (theme) {
|
|
|
162
163
|
display: 'inline-block',
|
|
163
164
|
padding: theme.spacing.unit
|
|
164
165
|
},
|
|
166
|
+
print: {
|
|
167
|
+
border: 'dashed 2px gray',
|
|
168
|
+
lineHeight: 2,
|
|
169
|
+
boxSizing: 'border-box',
|
|
170
|
+
marginTop: theme.spacing.unit / 2,
|
|
171
|
+
display: 'inline-block',
|
|
172
|
+
padding: theme.spacing.unit,
|
|
173
|
+
color: _renderUi.color.text()
|
|
174
|
+
},
|
|
165
175
|
custom: {
|
|
166
176
|
display: 'initial'
|
|
167
177
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/token-select/token.jsx"],"names":["TokenTypes","text","PropTypes","string","selectable","bool","Token","props","selected","classes","classNameProp","className","disabled","index","highlight","correct","undefined","token","disabledBlack","rootClassName","custom","incorrect","disabledAndSelected","__html","replace","React","Component","object","isRequired","theme","cursor","textIndent","padding","spacing","unit","paddingRight","paddingLeft","transition","color","backgroundColor","primaryLight","lineHeight","marginTop","border","boxSizing","display"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEO,IAAMA,UAAU,GAAG;AACxBC,EAAAA,IAAI,EAAEC,sBAAUC,MADQ;AAExBC,EAAAA,UAAU,EAAEF,sBAAUG;AAFE,CAAnB;;;IAKMC,K;;;;;;;;;;;;;6BAkBF;AAAA,
|
|
1
|
+
{"version":3,"sources":["../../src/token-select/token.jsx"],"names":["TokenTypes","text","PropTypes","string","selectable","bool","Token","props","selected","classes","classNameProp","className","disabled","index","highlight","correct","animationsDisabled","undefined","token","disabledBlack","rootClassName","custom","incorrect","disabledAndSelected","print","__html","replace","React","Component","object","isRequired","theme","cursor","textIndent","padding","spacing","unit","paddingRight","paddingLeft","transition","color","backgroundColor","primaryLight","lineHeight","marginTop","border","boxSizing","display"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEO,IAAMA,UAAU,GAAG;AACxBC,EAAAA,IAAI,EAAEC,sBAAUC,MADQ;AAExBC,EAAAA,UAAU,EAAEF,sBAAUG;AAFE,CAAnB;;;IAKMC,K;;;;;;;;;;;;;6BAkBF;AAAA,wBAYH,KAAKC,KAZF;AAAA,UAELN,IAFK,eAELA,IAFK;AAAA,UAGLG,UAHK,eAGLA,UAHK;AAAA,UAILI,QAJK,eAILA,QAJK;AAAA,UAKLC,OALK,eAKLA,OALK;AAAA,UAMMC,aANN,eAMLC,SANK;AAAA,UAOLC,QAPK,eAOLA,QAPK;AAAA,UAQLC,KARK,eAQLA,KARK;AAAA,UASLC,SATK,eASLA,SATK;AAAA,UAULC,OAVK,eAULA,OAVK;AAAA,UAWLC,kBAXK,eAWLA,kBAXK;AAcP,UAAIL,SAAJ;;AAEA,UAAII,OAAO,KAAKE,SAAZ,IAAyBT,QAAzB,IAAqCI,QAAzC,EAAmD;AACjDD,QAAAA,SAAS,GAAG,4BAAWF,OAAO,CAACS,KAAnB,EAA0BT,OAAO,CAACD,QAAlC,EAA4CC,OAAO,CAACU,aAApD,CAAZ;AACD,OAFD,MAEO,IAAIJ,OAAO,KAAKE,SAAhB,EAA2B;AAChCN,QAAAA,SAAS,GAAG,4BACVL,KAAK,CAACc,aADI,EAEVX,OAAO,CAACY,MAFE,EAGVN,OAAO,KAAK,IAAZ,IAAoBN,OAAO,CAACM,OAHlB,EAIVA,OAAO,KAAK,KAAZ,IAAqBN,OAAO,CAACa,SAJnB,CAAZ;AAMD,OAPM,MAOA;AACLX,QAAAA,SAAS,GAAG,4BACVL,KAAK,CAACc,aADI,EAEVX,OAAO,CAACS,KAFE,EAGVN,QAAQ,IAAIH,OAAO,CAACG,QAHV,EAIVR,UAAU,IAAI,CAACQ,QAAf,IAA2BH,OAAO,CAACL,UAJzB,EAKVI,QAAQ,IAAI,CAACI,QAAb,IAAyBH,OAAO,CAACD,QALvB,EAMVA,QAAQ,IAAII,QAAZ,IAAwBH,OAAO,CAACc,mBANtB,EAOVT,SAAS,IAAIV,UAAb,IAA2B,CAACQ,QAA5B,IAAwC,CAACJ,QAAzC,IAAqDC,OAAO,CAACK,SAPnD,EAQVE,kBAAkB,IAAIP,OAAO,CAACe,KARpB,EASVd,aATU,CAAZ;AAWD;;AAED,aACE;AACE,QAAA,SAAS,EAAEC,SADb;AAEE,QAAA,uBAAuB,EAAE;AAAEc,UAAAA,MAAM,EAAE,CAACxB,IAAI,IAAI,EAAT,EAAayB,OAAb,CAAqB,KAArB,EAA4B,MAA5B;AAAV,SAF3B;AAGE,yBAAeb;AAHjB,QADF;AAOD;;;;EAhEwBc,kBAAMC,S;;;;gBAApBtB,K,mBACY,gB;;gBADZA,K,iCAINN,U;AACHS,EAAAA,OAAO,EAAEP,sBAAU2B,MAAV,CAAiBC,U;AAC1BnB,EAAAA,SAAS,EAAET,sBAAUC,M;AACrBS,EAAAA,QAAQ,EAAEV,sBAAUG,I;AACpBS,EAAAA,SAAS,EAAEZ,sBAAUG,I;AACrBU,EAAAA,OAAO,EAAEb,sBAAUG,I;AACnBJ,EAAAA,IAAI,EAAEC,sBAAUC,MAAV,CAAiB2B;;;gBAVdxB,K,kBAaW;AACpBF,EAAAA,UAAU,EAAE,KADQ;AAEpBH,EAAAA,IAAI,EAAE;AAFc,C;;eAsDT,wBAAW,UAAA8B,KAAK,EAAI;AACjC,SAAO;AACLb,IAAAA,KAAK,EAAE;AACLc,MAAAA,MAAM,EAAE,SADH;AAELC,MAAAA,UAAU,EAAE,CAFP;AAGLC,MAAAA,OAAO,EAAEH,KAAK,CAACI,OAAN,CAAcC,IAAd,GAAqB,CAHzB;AAILC,MAAAA,YAAY,EAAE,CAJT;AAKLC,MAAAA,WAAW,EAAE,CALR;AAMLC,MAAAA,UAAU,EAAE;AANP,KADF;AASL3B,IAAAA,QAAQ,EAAE;AACRoB,MAAAA,MAAM,EAAE,SADA;AAERQ,MAAAA,KAAK,EAAE,MAFC,CAEM;;AAFN,KATL;AAaLrB,IAAAA,aAAa,EAAE;AACba,MAAAA,MAAM,EAAE;AADK,KAbV;AAgBLT,IAAAA,mBAAmB,EAAE;AACnBkB,MAAAA,eAAe,EAAE,MADE,CACK;;AADL,KAhBhB;AAmBLrC,IAAAA,UAAU,EAAE;AACV,iBAAW;AACTqC,QAAAA,eAAe,EAAED,gBAAME,YAAN,EADR;AAET,iBAAS;AACPD,UAAAA,eAAe,EAAED,gBAAME,YAAN;AADV;AAFA;AADD,KAnBP;AA2BLlC,IAAAA,QAAQ,EAAE;AACRmC,MAAAA,UAAU,EAAE,CADJ;AAERC,MAAAA,SAAS,EAAEb,KAAK,CAACI,OAAN,CAAcC,IAAd,GAAqB,CAFxB;AAGR,iBAAW;AACTK,QAAAA,eAAe,EAAED,gBAAME,YAAN;AADR,OAHH;AAMRD,MAAAA,eAAe,EAAED,gBAAME,YAAN,EANT;AAOR,eAAS;AACPD,QAAAA,eAAe,EAAED,gBAAME,YAAN;AADV;AAPD,KA3BL;AAsCL5B,IAAAA,SAAS,EAAE;AACT;AACA+B,MAAAA,MAAM,EAAE,iBAFC;AAGTF,MAAAA,UAAU,EAAE,CAHH;AAITG,MAAAA,SAAS,EAAE,YAJF;AAKTF,MAAAA,SAAS,EAAEb,KAAK,CAACI,OAAN,CAAcC,IAAd,GAAqB,CALvB;AAMTW,MAAAA,OAAO,EAAE,cANA;AAOTb,MAAAA,OAAO,EAAEH,KAAK,CAACI,OAAN,CAAcC;AAPd,KAtCN;AA+CLZ,IAAAA,KAAK,EAAE;AACLqB,MAAAA,MAAM,EAAE,iBADH;AAELF,MAAAA,UAAU,EAAE,CAFP;AAGLG,MAAAA,SAAS,EAAE,YAHN;AAILF,MAAAA,SAAS,EAAEb,KAAK,CAACI,OAAN,CAAcC,IAAd,GAAqB,CAJ3B;AAKLW,MAAAA,OAAO,EAAE,cALJ;AAMLb,MAAAA,OAAO,EAAEH,KAAK,CAACI,OAAN,CAAcC,IANlB;AAOLI,MAAAA,KAAK,EAAEA,gBAAMvC,IAAN;AAPF,KA/CF;AAyDLoB,IAAAA,MAAM,EAAE;AACN0B,MAAAA,OAAO,EAAE;AADH,KAzDH;AA4DLhC,IAAAA,OAAO,EAAE;AACP0B,MAAAA,eAAe,EAAED,gBAAMzB,OAAN;AADV,KA5DJ;AA+DLO,IAAAA,SAAS,EAAE;AACTmB,MAAAA,eAAe,EAAED,gBAAMlB,SAAN;AADR;AA/DN,GAAP;AAmED,CApEc,EAoEZhB,KApEY,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport { color } from '@pie-lib/render-ui';\n\nexport const TokenTypes = {\n text: PropTypes.string,\n selectable: PropTypes.bool\n};\n\nexport class Token extends React.Component {\n static rootClassName = 'tokenRootClass';\n\n static propTypes = {\n ...TokenTypes,\n classes: PropTypes.object.isRequired,\n className: PropTypes.string,\n disabled: PropTypes.bool,\n highlight: PropTypes.bool,\n correct: PropTypes.bool,\n text: PropTypes.string.isRequired\n };\n\n static defaultProps = {\n selectable: false,\n text: ''\n };\n\n render() {\n const {\n text,\n selectable,\n selected,\n classes,\n className: classNameProp,\n disabled,\n index,\n highlight,\n correct,\n animationsDisabled\n } = this.props;\n\n let className;\n\n if (correct === undefined && selected && disabled) {\n className = classNames(classes.token, classes.selected, classes.disabledBlack);\n } else if (correct !== undefined) {\n className = classNames(\n Token.rootClassName,\n classes.custom,\n correct === true && classes.correct,\n correct === false && classes.incorrect\n );\n } else {\n className = classNames(\n Token.rootClassName,\n classes.token,\n disabled && classes.disabled,\n selectable && !disabled && classes.selectable,\n selected && !disabled && classes.selected,\n selected && disabled && classes.disabledAndSelected,\n highlight && selectable && !disabled && !selected && classes.highlight,\n animationsDisabled && classes.print,\n classNameProp\n );\n }\n\n return (\n <span\n className={className}\n dangerouslySetInnerHTML={{ __html: (text || '').replace(/\\n/g, '<br>') }}\n data-indexkey={index}\n />\n );\n }\n}\n\nexport default withStyles(theme => {\n return {\n token: {\n cursor: 'pointer',\n textIndent: 0,\n padding: theme.spacing.unit / 2,\n paddingRight: 0,\n paddingLeft: 0,\n transition: 'background-color 100ms ease-in'\n },\n disabled: {\n cursor: 'inherit',\n color: 'grey' // TODO hardcoded color\n },\n disabledBlack: {\n cursor: 'inherit'\n },\n disabledAndSelected: {\n backgroundColor: 'pink' // TODO hardcoded color\n },\n selectable: {\n '&:hover': {\n backgroundColor: color.primaryLight(),\n '& > *': {\n backgroundColor: color.primaryLight()\n }\n }\n },\n selected: {\n lineHeight: 2,\n marginTop: theme.spacing.unit / 2,\n '&:hover': {\n backgroundColor: color.primaryLight()\n },\n backgroundColor: color.primaryLight(),\n '& > *': {\n backgroundColor: color.primaryLight()\n }\n },\n highlight: {\n // TODO hardcoded color,\n border: 'dashed 2px gray',\n lineHeight: 2,\n boxSizing: 'border-box',\n marginTop: theme.spacing.unit / 2,\n display: 'inline-block',\n padding: theme.spacing.unit\n },\n print: {\n border: 'dashed 2px gray',\n lineHeight: 2,\n boxSizing: 'border-box',\n marginTop: theme.spacing.unit / 2,\n display: 'inline-block',\n padding: theme.spacing.unit,\n color: color.text()\n },\n\n custom: {\n display: 'initial'\n },\n correct: {\n backgroundColor: color.correct()\n },\n incorrect: {\n backgroundColor: color.incorrect()\n }\n };\n})(Token);\n"],"file":"token.js"}
|
|
@@ -50,7 +50,7 @@ var getCaretCharacterOffsetWithin = function getCaretCharacterOffsetWithin(eleme
|
|
|
50
50
|
caretOffset = preCaretRange.toString().length;
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
|
-
} else if ((sel = doc.selection) && sel.type
|
|
53
|
+
} else if ((sel = doc.selection) && sel.type !== 'Control') {
|
|
54
54
|
var textRange = sel.createRange();
|
|
55
55
|
var preCaretTextRange = doc.body.createTextRange();
|
|
56
56
|
preCaretTextRange.moveToElementText(element);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/tokenizer/selection-utils.js"],"names":["clearSelection","document","getSelection","removeAllRanges","addRange","createRange","window","empty","selection","getCaretCharacterOffsetWithin","element","caretOffset","doc","ownerDocument","win","defaultView","parentWindow","sel","rangeCount","range","getRangeAt","selected","toString","length","preCaretRange","cloneRange","selectNodeContents","setEnd","endContainer","endOffset","type","textRange","preCaretTextRange","body","createTextRange","moveToElementText","setEndPoint","text"],"mappings":";;;;;;;AAAO,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,GAAM;AAClC,MAAIC,QAAQ,CAACC,YAAb,EAA2B;AACzB;AACAD,IAAAA,QAAQ,CAACC,YAAT,GAAwBC,eAAxB;AACAF,IAAAA,QAAQ,CAACC,YAAT,GAAwBE,QAAxB,CAAiCH,QAAQ,CAACI,WAAT,EAAjC;AACD,GAJD,MAIO,IAAIC,MAAM,CAACJ,YAAX,EAAyB;AAC9B;AACA,QAAII,MAAM,CAACJ,YAAP,GAAsBC,eAA1B,EAA2C;AACzC;AACAG,MAAAA,MAAM,CAACJ,YAAP,GAAsBC,eAAtB;AACAG,MAAAA,MAAM,CAACJ,YAAP,GAAsBE,QAAtB,CAA+BH,QAAQ,CAACI,WAAT,EAA/B;AACD,KAJD,MAIO,IAAIC,MAAM,CAACJ,YAAP,GAAsBK,KAA1B,EAAiC;AACtC;AACAD,MAAAA,MAAM,CAACJ,YAAP,GAAsBK,KAAtB;AACD;AACF,GAVM,MAUA,IAAIN,QAAQ,CAACO,SAAb,EAAwB;AAC7B;AACAP,IAAAA,QAAQ,CAACO,SAAT,CAAmBD,KAAnB;AACD;AACF,CAnBM;;;;AAqBA,IAAME,6BAA6B,GAAG,SAAhCA,6BAAgC,CAAAC,OAAO,EAAI;AACtD,MAAIC,WAAW,GAAG,CAAlB;AACA,MAAIC,GAAG,GAAGF,OAAO,CAACG,aAAR,IAAyBH,OAAO,CAACT,QAA3C;AACA,MAAIa,GAAG,GAAGF,GAAG,CAACG,WAAJ,IAAmBH,GAAG,CAACI,YAAjC;AACA,MAAIC,GAAJ;;AACA,MAAI,OAAOH,GAAG,CAACZ,YAAX,KAA4B,WAAhC,EAA6C;AAC3Ce,IAAAA,GAAG,GAAGH,GAAG,CAACZ,YAAJ,EAAN;;AACA,QAAIe,GAAG,CAACC,UAAJ,GAAiB,CAArB,EAAwB;AACtB,UAAIC,KAAK,GAAGL,GAAG,CAACZ,YAAJ,GAAmBkB,UAAnB,CAA8B,CAA9B,CAAZ;AACA,UAAIC,QAAQ,GAAGF,KAAK,CAACG,QAAN,GAAiBC,MAAhC;AACA,UAAIC,aAAa,GAAGL,KAAK,CAACM,UAAN,EAApB;AACAD,MAAAA,aAAa,CAACE,kBAAd,CAAiChB,OAAjC;AACAc,MAAAA,aAAa,CAACG,MAAd,CAAqBR,KAAK,CAACS,YAA3B,EAAyCT,KAAK,CAACU,SAA/C;;AACA,UAAIR,QAAJ,EAAc;AACZV,QAAAA,WAAW,GAAGa,aAAa,CAACF,QAAd,GAAyBC,MAAzB,GAAkCF,QAAhD;AACD,OAFD,MAEO;AACLV,QAAAA,WAAW,GAAGa,aAAa,CAACF,QAAd,GAAyBC,MAAvC;AACD;AACF;AACF,GAdD,MAcO,IAAI,CAACN,GAAG,GAAGL,GAAG,CAACJ,SAAX,KAAyBS,GAAG,CAACa,IAAJ,
|
|
1
|
+
{"version":3,"sources":["../../src/tokenizer/selection-utils.js"],"names":["clearSelection","document","getSelection","removeAllRanges","addRange","createRange","window","empty","selection","getCaretCharacterOffsetWithin","element","caretOffset","doc","ownerDocument","win","defaultView","parentWindow","sel","rangeCount","range","getRangeAt","selected","toString","length","preCaretRange","cloneRange","selectNodeContents","setEnd","endContainer","endOffset","type","textRange","preCaretTextRange","body","createTextRange","moveToElementText","setEndPoint","text"],"mappings":";;;;;;;AAAO,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,GAAM;AAClC,MAAIC,QAAQ,CAACC,YAAb,EAA2B;AACzB;AACAD,IAAAA,QAAQ,CAACC,YAAT,GAAwBC,eAAxB;AACAF,IAAAA,QAAQ,CAACC,YAAT,GAAwBE,QAAxB,CAAiCH,QAAQ,CAACI,WAAT,EAAjC;AACD,GAJD,MAIO,IAAIC,MAAM,CAACJ,YAAX,EAAyB;AAC9B;AACA,QAAII,MAAM,CAACJ,YAAP,GAAsBC,eAA1B,EAA2C;AACzC;AACAG,MAAAA,MAAM,CAACJ,YAAP,GAAsBC,eAAtB;AACAG,MAAAA,MAAM,CAACJ,YAAP,GAAsBE,QAAtB,CAA+BH,QAAQ,CAACI,WAAT,EAA/B;AACD,KAJD,MAIO,IAAIC,MAAM,CAACJ,YAAP,GAAsBK,KAA1B,EAAiC;AACtC;AACAD,MAAAA,MAAM,CAACJ,YAAP,GAAsBK,KAAtB;AACD;AACF,GAVM,MAUA,IAAIN,QAAQ,CAACO,SAAb,EAAwB;AAC7B;AACAP,IAAAA,QAAQ,CAACO,SAAT,CAAmBD,KAAnB;AACD;AACF,CAnBM;;;;AAqBA,IAAME,6BAA6B,GAAG,SAAhCA,6BAAgC,CAAAC,OAAO,EAAI;AACtD,MAAIC,WAAW,GAAG,CAAlB;AACA,MAAIC,GAAG,GAAGF,OAAO,CAACG,aAAR,IAAyBH,OAAO,CAACT,QAA3C;AACA,MAAIa,GAAG,GAAGF,GAAG,CAACG,WAAJ,IAAmBH,GAAG,CAACI,YAAjC;AACA,MAAIC,GAAJ;;AACA,MAAI,OAAOH,GAAG,CAACZ,YAAX,KAA4B,WAAhC,EAA6C;AAC3Ce,IAAAA,GAAG,GAAGH,GAAG,CAACZ,YAAJ,EAAN;;AACA,QAAIe,GAAG,CAACC,UAAJ,GAAiB,CAArB,EAAwB;AACtB,UAAIC,KAAK,GAAGL,GAAG,CAACZ,YAAJ,GAAmBkB,UAAnB,CAA8B,CAA9B,CAAZ;AACA,UAAIC,QAAQ,GAAGF,KAAK,CAACG,QAAN,GAAiBC,MAAhC;AACA,UAAIC,aAAa,GAAGL,KAAK,CAACM,UAAN,EAApB;AACAD,MAAAA,aAAa,CAACE,kBAAd,CAAiChB,OAAjC;AACAc,MAAAA,aAAa,CAACG,MAAd,CAAqBR,KAAK,CAACS,YAA3B,EAAyCT,KAAK,CAACU,SAA/C;;AACA,UAAIR,QAAJ,EAAc;AACZV,QAAAA,WAAW,GAAGa,aAAa,CAACF,QAAd,GAAyBC,MAAzB,GAAkCF,QAAhD;AACD,OAFD,MAEO;AACLV,QAAAA,WAAW,GAAGa,aAAa,CAACF,QAAd,GAAyBC,MAAvC;AACD;AACF;AACF,GAdD,MAcO,IAAI,CAACN,GAAG,GAAGL,GAAG,CAACJ,SAAX,KAAyBS,GAAG,CAACa,IAAJ,KAAa,SAA1C,EAAqD;AAC1D,QAAIC,SAAS,GAAGd,GAAG,CAACZ,WAAJ,EAAhB;AACA,QAAI2B,iBAAiB,GAAGpB,GAAG,CAACqB,IAAJ,CAASC,eAAT,EAAxB;AACAF,IAAAA,iBAAiB,CAACG,iBAAlB,CAAoCzB,OAApC;AACAsB,IAAAA,iBAAiB,CAACI,WAAlB,CAA8B,UAA9B,EAA0CL,SAA1C;AACApB,IAAAA,WAAW,GAAGqB,iBAAiB,CAACK,IAAlB,CAAuBd,MAArC;AACD;;AACD,SAAOZ,WAAP;AACD,CA3BM","sourcesContent":["export const clearSelection = () => {\n if (document.getSelection) {\n // for all new browsers (IE9+, Chrome, Firefox)\n document.getSelection().removeAllRanges();\n document.getSelection().addRange(document.createRange());\n } else if (window.getSelection) {\n // equals with the document.getSelection (MSDN info)\n if (window.getSelection().removeAllRanges) {\n // for all new browsers (IE9+, Chrome, Firefox)\n window.getSelection().removeAllRanges();\n window.getSelection().addRange(document.createRange());\n } else if (window.getSelection().empty) {\n // Chrome supports this as well\n window.getSelection().empty();\n }\n } else if (document.selection) {\n // IE8-\n document.selection.empty();\n }\n};\n\nexport const getCaretCharacterOffsetWithin = element => {\n var caretOffset = 0;\n var doc = element.ownerDocument || element.document;\n var win = doc.defaultView || doc.parentWindow;\n var sel;\n if (typeof win.getSelection !== 'undefined') {\n sel = win.getSelection();\n if (sel.rangeCount > 0) {\n var range = win.getSelection().getRangeAt(0);\n var selected = range.toString().length;\n var preCaretRange = range.cloneRange();\n preCaretRange.selectNodeContents(element);\n preCaretRange.setEnd(range.endContainer, range.endOffset);\n if (selected) {\n caretOffset = preCaretRange.toString().length - selected;\n } else {\n caretOffset = preCaretRange.toString().length;\n }\n }\n } else if ((sel = doc.selection) && sel.type !== 'Control') {\n var textRange = sel.createRange();\n var preCaretTextRange = doc.body.createTextRange();\n preCaretTextRange.moveToElementText(element);\n preCaretTextRange.setEndPoint('EndToEnd', textRange);\n caretOffset = preCaretTextRange.text.length;\n }\n return caretOffset;\n};\n"],"file":"selection-utils.js"}
|
|
@@ -85,6 +85,7 @@ var Text = (0, _styles.withStyles)(function () {
|
|
|
85
85
|
}
|
|
86
86
|
});
|
|
87
87
|
exports.Text = Text;
|
|
88
|
+
var notAllowedCharacters = ['\n', ' ', '\t'];
|
|
88
89
|
|
|
89
90
|
var TokenText =
|
|
90
91
|
/*#__PURE__*/
|
|
@@ -104,12 +105,12 @@ function (_React$Component) {
|
|
|
104
105
|
|
|
105
106
|
_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(TokenText)).call.apply(_getPrototypeOf2, [this].concat(args)));
|
|
106
107
|
|
|
107
|
-
_defineProperty(_assertThisInitialized(_this), "
|
|
108
|
-
event.preventDefault();
|
|
108
|
+
_defineProperty(_assertThisInitialized(_this), "onClick", function (event) {
|
|
109
109
|
var _this$props = _this.props,
|
|
110
110
|
onSelectToken = _this$props.onSelectToken,
|
|
111
111
|
text = _this$props.text,
|
|
112
112
|
tokens = _this$props.tokens;
|
|
113
|
+
event.preventDefault();
|
|
113
114
|
|
|
114
115
|
if (typeof window === 'undefined') {
|
|
115
116
|
return;
|
|
@@ -118,9 +119,19 @@ function (_React$Component) {
|
|
|
118
119
|
var selection = window.getSelection();
|
|
119
120
|
var textSelected = selection.toString();
|
|
120
121
|
|
|
121
|
-
if (textSelected.length > 0) {
|
|
122
|
+
if (textSelected.length > 0 && notAllowedCharacters.indexOf(textSelected) < 0) {
|
|
122
123
|
if (_this.root) {
|
|
123
124
|
var offset = (0, _selectionUtils.getCaretCharacterOffsetWithin)(_this.root);
|
|
125
|
+
/*
|
|
126
|
+
Since we implemented new line functionality (\n) using <br /> dom elements
|
|
127
|
+
and window.getSelection is not taking that into consideration, the offset might
|
|
128
|
+
be off by a few characters.
|
|
129
|
+
To combat that, we check if the selected text is right at the beginning of the offset.
|
|
130
|
+
If it's not, we add the additional offset in order for that to be accurate
|
|
131
|
+
*/
|
|
132
|
+
|
|
133
|
+
var newLineOffset = text.slice(offset).indexOf(textSelected);
|
|
134
|
+
offset += newLineOffset;
|
|
124
135
|
|
|
125
136
|
if (offset !== undefined) {
|
|
126
137
|
var endIndex = offset + textSelected.length;
|
|
@@ -169,7 +180,7 @@ function (_React$Component) {
|
|
|
169
180
|
ref: function ref(r) {
|
|
170
181
|
return _this2.root = r;
|
|
171
182
|
},
|
|
172
|
-
|
|
183
|
+
onClick: this.onClick
|
|
173
184
|
}, normalized.map(function (t, index) {
|
|
174
185
|
return _react["default"].createElement(Text, _extends({
|
|
175
186
|
key: index
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/tokenizer/token-text.jsx"],"names":["log","Text","predefined","cursor","backgroundColor","yellow","border","correct","green","text","classes","onClick","formattedText","replace","className","__html","
|
|
1
|
+
{"version":3,"sources":["../../src/tokenizer/token-text.jsx"],"names":["log","Text","predefined","cursor","backgroundColor","yellow","border","correct","green","text","classes","onClick","formattedText","replace","className","__html","notAllowedCharacters","TokenText","event","props","onSelectToken","tokens","preventDefault","window","selection","getSelection","textSelected","toString","length","indexOf","root","offset","newLineOffset","slice","undefined","endIndex","i","start","end","hasOverlap","tokensToRemove","surroundedTokens","token","onTokenClick","normalized","r","map","t","index","React","Component","PropTypes","string","isRequired","array","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport { normalize, intersection } from './builder';\nimport yellow from '@material-ui/core/colors/yellow';\nimport green from '@material-ui/core/colors/green';\nimport debug from 'debug';\nimport classNames from 'classnames';\n\nimport { clearSelection, getCaretCharacterOffsetWithin } from './selection-utils';\n\nconst log = debug('@pie-lib:text-select:token-text');\n\nexport const Text = withStyles(() => ({\n predefined: {\n cursor: 'pointer',\n backgroundColor: yellow[100],\n border: `dashed 0px ${yellow[700]}`\n },\n correct: {\n backgroundColor: green[500]\n }\n}))(({ text, predefined, classes, onClick, correct }) => {\n const formattedText = (text || '').replace(/\\n/g, '<br>');\n\n if (predefined) {\n const className = classNames(classes.predefined, correct && classes.correct);\n\n return (\n <span\n onClick={onClick}\n className={className}\n dangerouslySetInnerHTML={{ __html: formattedText }}\n />\n );\n } else {\n return <span dangerouslySetInnerHTML={{ __html: formattedText }} />;\n }\n});\n\nconst notAllowedCharacters = ['\\n', ' ', '\\t'];\n\nexport default class TokenText extends React.Component {\n static propTypes = {\n text: PropTypes.string.isRequired,\n tokens: PropTypes.array.isRequired,\n onTokenClick: PropTypes.func.isRequired,\n onSelectToken: PropTypes.func.isRequired,\n className: PropTypes.string\n };\n\n /*\n Change this to onClick instead of mouseUp because previously, in some cases\n the onClick event from the <Text /> component was called right after the user\n selected token and that token was then removed because the setCorrectMode was not true.\n\n const { setCorrectMode } = this.state;\n\n if (setCorrectMode) {\n this.setCorrect(token);\n } else {\n this.removeToken(token);\n }\n */\n onClick = event => {\n const { onSelectToken, text, tokens } = this.props;\n\n event.preventDefault();\n\n if (typeof window === 'undefined') {\n return;\n }\n\n const selection = window.getSelection();\n const textSelected = selection.toString();\n\n if (textSelected.length > 0 && notAllowedCharacters.indexOf(textSelected) < 0) {\n if (this.root) {\n let offset = getCaretCharacterOffsetWithin(this.root);\n /*\n Since we implemented new line functionality (\\n) using <br /> dom elements\n and window.getSelection is not taking that into consideration, the offset might\n be off by a few characters.\n\n To combat that, we check if the selected text is right at the beginning of the offset.\n\n If it's not, we add the additional offset in order for that to be accurate\n */\n const newLineOffset = text.slice(offset).indexOf(textSelected);\n\n offset += newLineOffset;\n\n if (offset !== undefined) {\n const endIndex = offset + textSelected.length;\n\n if (endIndex <= text.length) {\n const i = intersection({ start: offset, end: endIndex }, tokens);\n if (i.hasOverlap) {\n log('hasOverlap - do nothing');\n clearSelection();\n } else {\n const tokensToRemove = i.surroundedTokens;\n const token = {\n text: textSelected,\n start: offset,\n end: endIndex\n };\n\n onSelectToken(token, tokensToRemove);\n clearSelection();\n }\n }\n }\n }\n }\n };\n\n render() {\n const { text, tokens, className, onTokenClick } = this.props;\n const normalized = normalize(text, tokens);\n\n return (\n <div className={className} ref={r => (this.root = r)} onClick={this.onClick}>\n {normalized.map((t, index) => {\n return <Text key={index} {...t} onClick={() => onTokenClick(t)} />;\n })}\n </div>\n );\n }\n}\n"],"file":"token-text.js"}
|
package/lib/utils.js
ADDED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.prepareText = exports.parseParagraphs = exports.parseParagraph = exports.parseBrs = void 0;
|
|
7
|
+
|
|
8
|
+
var createElementFromHTML = function createElementFromHTML() {
|
|
9
|
+
var htmlString = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
|
10
|
+
var div = document.createElement('div');
|
|
11
|
+
div.innerHTML = htmlString.trim();
|
|
12
|
+
return div;
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
var parseBrs = function parseBrs(dom) {
|
|
16
|
+
var brs = dom.querySelectorAll('br');
|
|
17
|
+
brs.forEach(function (br) {
|
|
18
|
+
return br.replaceWith('\n');
|
|
19
|
+
});
|
|
20
|
+
dom.innerHTML = dom.innerHTML.replace(/\n\n/g, '\n');
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
exports.parseBrs = parseBrs;
|
|
24
|
+
|
|
25
|
+
var parseParagraph = function parseParagraph(paragraph, end) {
|
|
26
|
+
if (end) {
|
|
27
|
+
return paragraph.innerHTML;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
return "".concat(paragraph.innerHTML, "\n\n");
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
exports.parseParagraph = parseParagraph;
|
|
34
|
+
|
|
35
|
+
var parseParagraphs = function parseParagraphs(dom) {
|
|
36
|
+
var paragraphs = dom.querySelectorAll('p'); // separate variable for easily debugging, if needed
|
|
37
|
+
|
|
38
|
+
var str = '';
|
|
39
|
+
paragraphs.forEach(function (par, index) {
|
|
40
|
+
str += parseParagraph(par, index === paragraphs.length - 1);
|
|
41
|
+
});
|
|
42
|
+
return str || null;
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
exports.parseParagraphs = parseParagraphs;
|
|
46
|
+
|
|
47
|
+
var prepareText = function prepareText(text) {
|
|
48
|
+
var txtDom = createElementFromHTML(text);
|
|
49
|
+
var allDomElements = Array.from(txtDom.querySelectorAll('*'));
|
|
50
|
+
|
|
51
|
+
if (txtDom.querySelectorAll('p').length === 0) {
|
|
52
|
+
var div = document.createElement('div');
|
|
53
|
+
div.innerHTML = "<p>".concat(txtDom.innerHTML, "</p>");
|
|
54
|
+
txtDom = div;
|
|
55
|
+
} // if no dom elements, we just return the text
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
if (allDomElements.length === 0) {
|
|
59
|
+
return text;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
parseBrs(txtDom);
|
|
63
|
+
return parseParagraphs(txtDom);
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
exports.prepareText = prepareText;
|
|
67
|
+
//# sourceMappingURL=utils.js.map
|
package/lib/utils.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/utils.js"],"names":["createElementFromHTML","htmlString","div","document","createElement","innerHTML","trim","parseBrs","dom","brs","querySelectorAll","forEach","br","replaceWith","replace","parseParagraph","paragraph","end","parseParagraphs","paragraphs","str","par","index","length","prepareText","text","txtDom","allDomElements","Array","from"],"mappings":";;;;;;;AAAA,IAAMA,qBAAqB,GAAG,SAAxBA,qBAAwB,GAAqB;AAAA,MAApBC,UAAoB,uEAAP,EAAO;AACjD,MAAMC,GAAG,GAAGC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAZ;AAEAF,EAAAA,GAAG,CAACG,SAAJ,GAAgBJ,UAAU,CAACK,IAAX,EAAhB;AAEA,SAAOJ,GAAP;AACD,CAND;;AAQO,IAAMK,QAAQ,GAAG,SAAXA,QAAW,CAAAC,GAAG,EAAI;AAC7B,MAAMC,GAAG,GAAGD,GAAG,CAACE,gBAAJ,CAAqB,IAArB,CAAZ;AAEAD,EAAAA,GAAG,CAACE,OAAJ,CAAY,UAAAC,EAAE;AAAA,WAAIA,EAAE,CAACC,WAAH,CAAe,IAAf,CAAJ;AAAA,GAAd;AAEAL,EAAAA,GAAG,CAACH,SAAJ,GAAgBG,GAAG,CAACH,SAAJ,CAAcS,OAAd,CAAsB,OAAtB,EAA+B,IAA/B,CAAhB;AACD,CANM;;;;AAQA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,SAAD,EAAYC,GAAZ,EAAoB;AAChD,MAAIA,GAAJ,EAAS;AACP,WAAOD,SAAS,CAACX,SAAjB;AACD;;AAED,mBAAUW,SAAS,CAACX,SAApB;AACD,CANM;;;;AAQA,IAAMa,eAAe,GAAG,SAAlBA,eAAkB,CAAAV,GAAG,EAAI;AACpC,MAAMW,UAAU,GAAGX,GAAG,CAACE,gBAAJ,CAAqB,GAArB,CAAnB,CADoC,CAEpC;;AACA,MAAIU,GAAG,GAAG,EAAV;AAEAD,EAAAA,UAAU,CAACR,OAAX,CAAmB,UAACU,GAAD,EAAMC,KAAN,EAAgB;AACjCF,IAAAA,GAAG,IAAIL,cAAc,CAACM,GAAD,EAAMC,KAAK,KAAKH,UAAU,CAACI,MAAX,GAAoB,CAApC,CAArB;AACD,GAFD;AAIA,SAAOH,GAAG,IAAI,IAAd;AACD,CAVM;;;;AAYA,IAAMI,WAAW,GAAG,SAAdA,WAAc,CAAAC,IAAI,EAAI;AACjC,MAAIC,MAAM,GAAG1B,qBAAqB,CAACyB,IAAD,CAAlC;AACA,MAAME,cAAc,GAAGC,KAAK,CAACC,IAAN,CAAWH,MAAM,CAAChB,gBAAP,CAAwB,GAAxB,CAAX,CAAvB;;AAEA,MAAIgB,MAAM,CAAChB,gBAAP,CAAwB,GAAxB,EAA6Ba,MAA7B,KAAwC,CAA5C,EAA+C;AAC7C,QAAMrB,GAAG,GAAGC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAZ;AAEAF,IAAAA,GAAG,CAACG,SAAJ,gBAAsBqB,MAAM,CAACrB,SAA7B;AACAqB,IAAAA,MAAM,GAAGxB,GAAT;AACD,GATgC,CAWjC;;;AACA,MAAIyB,cAAc,CAACJ,MAAf,KAA0B,CAA9B,EAAiC;AAC/B,WAAOE,IAAP;AACD;;AAEDlB,EAAAA,QAAQ,CAACmB,MAAD,CAAR;AAEA,SAAOR,eAAe,CAACQ,MAAD,CAAtB;AACD,CAnBM","sourcesContent":["const createElementFromHTML = (htmlString = '') => {\n const div = document.createElement('div');\n\n div.innerHTML = htmlString.trim();\n\n return div;\n};\n\nexport const parseBrs = dom => {\n const brs = dom.querySelectorAll('br');\n\n brs.forEach(br => br.replaceWith('\\n'));\n\n dom.innerHTML = dom.innerHTML.replace(/\\n\\n/g, '\\n');\n};\n\nexport const parseParagraph = (paragraph, end) => {\n if (end) {\n return paragraph.innerHTML;\n }\n\n return `${paragraph.innerHTML}\\n\\n`;\n};\n\nexport const parseParagraphs = dom => {\n const paragraphs = dom.querySelectorAll('p');\n // separate variable for easily debugging, if needed\n let str = '';\n\n paragraphs.forEach((par, index) => {\n str += parseParagraph(par, index === paragraphs.length - 1);\n });\n\n return str || null;\n};\n\nexport const prepareText = text => {\n let txtDom = createElementFromHTML(text);\n const allDomElements = Array.from(txtDom.querySelectorAll('*'));\n\n if (txtDom.querySelectorAll('p').length === 0) {\n const div = document.createElement('div');\n\n div.innerHTML = `<p>${txtDom.innerHTML}</p>`;\n txtDom = div;\n }\n\n // if no dom elements, we just return the text\n if (allDomElements.length === 0) {\n return text;\n }\n\n parseBrs(txtDom);\n\n return parseParagraphs(txtDom);\n};\n"],"file":"utils.js"}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"publishConfig": {
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
|
-
"version": "1.8.
|
|
6
|
+
"version": "1.8.6-next.122+dba4534e",
|
|
7
7
|
"description": "Some react components for text selection",
|
|
8
8
|
"keywords": [
|
|
9
9
|
"react",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"license": "ISC",
|
|
19
19
|
"dependencies": {
|
|
20
20
|
"@pie-framework/parse-english": "^1.0.0",
|
|
21
|
-
"@pie-lib/render-ui": "^4.
|
|
21
|
+
"@pie-lib/render-ui": "^4.12.0",
|
|
22
22
|
"@pie-lib/style-utils": "^0.1.25",
|
|
23
23
|
"classnames": "^2.2.6",
|
|
24
24
|
"debug": "^4.1.1",
|
|
@@ -38,6 +38,6 @@
|
|
|
38
38
|
"@material-ui/core": "^3.8.3",
|
|
39
39
|
"react": "^16.8.1"
|
|
40
40
|
},
|
|
41
|
-
"gitHead": "
|
|
41
|
+
"gitHead": "dba4534e24ec71a69ac1d71b55ac3e8a107c6f39",
|
|
42
42
|
"scripts": {}
|
|
43
43
|
}
|
package/src/index.js
CHANGED
|
@@ -2,5 +2,6 @@ import Tokenizer from './tokenizer';
|
|
|
2
2
|
import TokenSelect, { TokenTypes } from './token-select';
|
|
3
3
|
import TextSelect from './text-select';
|
|
4
4
|
import Token from './token-select/token';
|
|
5
|
+
import { prepareText } from './utils';
|
|
5
6
|
|
|
6
|
-
export { TextSelect, TokenTypes, Tokenizer, TokenSelect, Token };
|
|
7
|
+
export { TextSelect, TokenTypes, Tokenizer, TokenSelect, Token, prepareText };
|
package/src/text-select.jsx
CHANGED
|
@@ -18,6 +18,7 @@ export default class TextSelect extends React.Component {
|
|
|
18
18
|
text: PropTypes.string.isRequired,
|
|
19
19
|
className: PropTypes.string,
|
|
20
20
|
highlightChoices: PropTypes.bool,
|
|
21
|
+
animationsDisabled: PropTypes.bool,
|
|
21
22
|
maxNoOfSelections: PropTypes.number
|
|
22
23
|
};
|
|
23
24
|
|
|
@@ -40,7 +41,8 @@ export default class TextSelect extends React.Component {
|
|
|
40
41
|
selectedTokens,
|
|
41
42
|
className,
|
|
42
43
|
highlightChoices,
|
|
43
|
-
maxNoOfSelections
|
|
44
|
+
maxNoOfSelections,
|
|
45
|
+
animationsDisabled
|
|
44
46
|
} = this.props;
|
|
45
47
|
|
|
46
48
|
const normalized = normalize(text, tokens);
|
|
@@ -67,6 +69,7 @@ export default class TextSelect extends React.Component {
|
|
|
67
69
|
disabled={disabled}
|
|
68
70
|
onChange={this.change}
|
|
69
71
|
maxNoOfSelections={maxNoOfSelections}
|
|
72
|
+
animationsDisabled={animationsDisabled}
|
|
70
73
|
/>
|
|
71
74
|
);
|
|
72
75
|
}
|
|
@@ -19,6 +19,7 @@ export class TokenSelect extends React.Component {
|
|
|
19
19
|
onChange: PropTypes.func.isRequired,
|
|
20
20
|
disabled: PropTypes.bool,
|
|
21
21
|
highlightChoices: PropTypes.bool,
|
|
22
|
+
animationsDisabled: PropTypes.bool,
|
|
22
23
|
maxNoOfSelections: PropTypes.number
|
|
23
24
|
};
|
|
24
25
|
|
|
@@ -53,14 +54,14 @@ export class TokenSelect extends React.Component {
|
|
|
53
54
|
*/
|
|
54
55
|
toggleToken = event => {
|
|
55
56
|
const { target } = event;
|
|
56
|
-
const { tokens } = this.props;
|
|
57
|
+
const { tokens, animationsDisabled } = this.props;
|
|
57
58
|
const tokensCloned = clone(tokens);
|
|
58
59
|
const targetSpanWrapper = target.closest(`.${Token.rootClassName}`);
|
|
59
60
|
const targetedTokenIndex =
|
|
60
61
|
targetSpanWrapper && targetSpanWrapper.dataset && targetSpanWrapper.dataset.indexkey;
|
|
61
62
|
const t = targetedTokenIndex && tokensCloned[targetedTokenIndex];
|
|
62
63
|
|
|
63
|
-
if (t && t.correct === undefined) {
|
|
64
|
+
if (t && t.correct === undefined && !animationsDisabled) {
|
|
64
65
|
const { onChange, maxNoOfSelections } = this.props;
|
|
65
66
|
const selected = !t.selected;
|
|
66
67
|
|
|
@@ -94,7 +95,7 @@ export class TokenSelect extends React.Component {
|
|
|
94
95
|
};
|
|
95
96
|
|
|
96
97
|
generateTokensInHtml = () => {
|
|
97
|
-
const { tokens, disabled, highlightChoices } = this.props;
|
|
98
|
+
const { tokens, disabled, highlightChoices, animationsDisabled } = this.props;
|
|
98
99
|
const selectedCount = this.selectedCount();
|
|
99
100
|
const isLineBreak = text => text === '\n';
|
|
100
101
|
const isNewParagraph = text => text === '\n\n';
|
|
@@ -112,8 +113,12 @@ export class TokenSelect extends React.Component {
|
|
|
112
113
|
return finalAcc + '<br>';
|
|
113
114
|
}
|
|
114
115
|
|
|
115
|
-
|
|
116
|
-
|
|
116
|
+
if (
|
|
117
|
+
(selectable && !disabled) ||
|
|
118
|
+
showCorrectAnswer ||
|
|
119
|
+
t.selected ||
|
|
120
|
+
(animationsDisabled && t.predefined) // if we are in print mode
|
|
121
|
+
) {
|
|
117
122
|
return (
|
|
118
123
|
finalAcc +
|
|
119
124
|
renderToString(
|
|
@@ -124,6 +129,7 @@ export class TokenSelect extends React.Component {
|
|
|
124
129
|
{...t}
|
|
125
130
|
selectable={selectable}
|
|
126
131
|
highlight={highlightChoices}
|
|
132
|
+
animationsDisabled={animationsDisabled}
|
|
127
133
|
/>
|
|
128
134
|
)
|
|
129
135
|
);
|
|
@@ -37,7 +37,8 @@ export class Token extends React.Component {
|
|
|
37
37
|
disabled,
|
|
38
38
|
index,
|
|
39
39
|
highlight,
|
|
40
|
-
correct
|
|
40
|
+
correct,
|
|
41
|
+
animationsDisabled
|
|
41
42
|
} = this.props;
|
|
42
43
|
|
|
43
44
|
let className;
|
|
@@ -60,6 +61,7 @@ export class Token extends React.Component {
|
|
|
60
61
|
selected && !disabled && classes.selected,
|
|
61
62
|
selected && disabled && classes.disabledAndSelected,
|
|
62
63
|
highlight && selectable && !disabled && !selected && classes.highlight,
|
|
64
|
+
animationsDisabled && classes.print,
|
|
63
65
|
classNameProp
|
|
64
66
|
);
|
|
65
67
|
}
|
|
@@ -122,6 +124,15 @@ export default withStyles(theme => {
|
|
|
122
124
|
display: 'inline-block',
|
|
123
125
|
padding: theme.spacing.unit
|
|
124
126
|
},
|
|
127
|
+
print: {
|
|
128
|
+
border: 'dashed 2px gray',
|
|
129
|
+
lineHeight: 2,
|
|
130
|
+
boxSizing: 'border-box',
|
|
131
|
+
marginTop: theme.spacing.unit / 2,
|
|
132
|
+
display: 'inline-block',
|
|
133
|
+
padding: theme.spacing.unit,
|
|
134
|
+
color: color.text()
|
|
135
|
+
},
|
|
125
136
|
|
|
126
137
|
custom: {
|
|
127
138
|
display: 'initial'
|
|
@@ -38,7 +38,7 @@ export const getCaretCharacterOffsetWithin = element => {
|
|
|
38
38
|
caretOffset = preCaretRange.toString().length;
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
|
-
} else if ((sel = doc.selection) && sel.type
|
|
41
|
+
} else if ((sel = doc.selection) && sel.type !== 'Control') {
|
|
42
42
|
var textRange = sel.createRange();
|
|
43
43
|
var preCaretTextRange = doc.body.createTextRange();
|
|
44
44
|
preCaretTextRange.moveToElementText(element);
|
|
@@ -38,6 +38,8 @@ export const Text = withStyles(() => ({
|
|
|
38
38
|
}
|
|
39
39
|
});
|
|
40
40
|
|
|
41
|
+
const notAllowedCharacters = ['\n', ' ', '\t'];
|
|
42
|
+
|
|
41
43
|
export default class TokenText extends React.Component {
|
|
42
44
|
static propTypes = {
|
|
43
45
|
text: PropTypes.string.isRequired,
|
|
@@ -47,10 +49,24 @@ export default class TokenText extends React.Component {
|
|
|
47
49
|
className: PropTypes.string
|
|
48
50
|
};
|
|
49
51
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
+
/*
|
|
53
|
+
Change this to onClick instead of mouseUp because previously, in some cases
|
|
54
|
+
the onClick event from the <Text /> component was called right after the user
|
|
55
|
+
selected token and that token was then removed because the setCorrectMode was not true.
|
|
56
|
+
|
|
57
|
+
const { setCorrectMode } = this.state;
|
|
58
|
+
|
|
59
|
+
if (setCorrectMode) {
|
|
60
|
+
this.setCorrect(token);
|
|
61
|
+
} else {
|
|
62
|
+
this.removeToken(token);
|
|
63
|
+
}
|
|
64
|
+
*/
|
|
65
|
+
onClick = event => {
|
|
52
66
|
const { onSelectToken, text, tokens } = this.props;
|
|
53
67
|
|
|
68
|
+
event.preventDefault();
|
|
69
|
+
|
|
54
70
|
if (typeof window === 'undefined') {
|
|
55
71
|
return;
|
|
56
72
|
}
|
|
@@ -58,9 +74,22 @@ export default class TokenText extends React.Component {
|
|
|
58
74
|
const selection = window.getSelection();
|
|
59
75
|
const textSelected = selection.toString();
|
|
60
76
|
|
|
61
|
-
if (textSelected.length > 0) {
|
|
77
|
+
if (textSelected.length > 0 && notAllowedCharacters.indexOf(textSelected) < 0) {
|
|
62
78
|
if (this.root) {
|
|
63
|
-
|
|
79
|
+
let offset = getCaretCharacterOffsetWithin(this.root);
|
|
80
|
+
/*
|
|
81
|
+
Since we implemented new line functionality (\n) using <br /> dom elements
|
|
82
|
+
and window.getSelection is not taking that into consideration, the offset might
|
|
83
|
+
be off by a few characters.
|
|
84
|
+
|
|
85
|
+
To combat that, we check if the selected text is right at the beginning of the offset.
|
|
86
|
+
|
|
87
|
+
If it's not, we add the additional offset in order for that to be accurate
|
|
88
|
+
*/
|
|
89
|
+
const newLineOffset = text.slice(offset).indexOf(textSelected);
|
|
90
|
+
|
|
91
|
+
offset += newLineOffset;
|
|
92
|
+
|
|
64
93
|
if (offset !== undefined) {
|
|
65
94
|
const endIndex = offset + textSelected.length;
|
|
66
95
|
|
|
@@ -88,11 +117,10 @@ export default class TokenText extends React.Component {
|
|
|
88
117
|
|
|
89
118
|
render() {
|
|
90
119
|
const { text, tokens, className, onTokenClick } = this.props;
|
|
91
|
-
|
|
92
120
|
const normalized = normalize(text, tokens);
|
|
93
121
|
|
|
94
122
|
return (
|
|
95
|
-
<div className={className} ref={r => (this.root = r)}
|
|
123
|
+
<div className={className} ref={r => (this.root = r)} onClick={this.onClick}>
|
|
96
124
|
{normalized.map((t, index) => {
|
|
97
125
|
return <Text key={index} {...t} onClick={() => onTokenClick(t)} />;
|
|
98
126
|
})}
|
package/src/utils.js
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
const createElementFromHTML = (htmlString = '') => {
|
|
2
|
+
const div = document.createElement('div');
|
|
3
|
+
|
|
4
|
+
div.innerHTML = htmlString.trim();
|
|
5
|
+
|
|
6
|
+
return div;
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
export const parseBrs = dom => {
|
|
10
|
+
const brs = dom.querySelectorAll('br');
|
|
11
|
+
|
|
12
|
+
brs.forEach(br => br.replaceWith('\n'));
|
|
13
|
+
|
|
14
|
+
dom.innerHTML = dom.innerHTML.replace(/\n\n/g, '\n');
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
export const parseParagraph = (paragraph, end) => {
|
|
18
|
+
if (end) {
|
|
19
|
+
return paragraph.innerHTML;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
return `${paragraph.innerHTML}\n\n`;
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
export const parseParagraphs = dom => {
|
|
26
|
+
const paragraphs = dom.querySelectorAll('p');
|
|
27
|
+
// separate variable for easily debugging, if needed
|
|
28
|
+
let str = '';
|
|
29
|
+
|
|
30
|
+
paragraphs.forEach((par, index) => {
|
|
31
|
+
str += parseParagraph(par, index === paragraphs.length - 1);
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
return str || null;
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
export const prepareText = text => {
|
|
38
|
+
let txtDom = createElementFromHTML(text);
|
|
39
|
+
const allDomElements = Array.from(txtDom.querySelectorAll('*'));
|
|
40
|
+
|
|
41
|
+
if (txtDom.querySelectorAll('p').length === 0) {
|
|
42
|
+
const div = document.createElement('div');
|
|
43
|
+
|
|
44
|
+
div.innerHTML = `<p>${txtDom.innerHTML}</p>`;
|
|
45
|
+
txtDom = div;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
// if no dom elements, we just return the text
|
|
49
|
+
if (allDomElements.length === 0) {
|
|
50
|
+
return text;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
parseBrs(txtDom);
|
|
54
|
+
|
|
55
|
+
return parseParagraphs(txtDom);
|
|
56
|
+
};
|