dom: Add types to document-has-selection #30386
Conversation
isTextField( doc.activeElement ) || | ||
isNumberInput( doc.activeElement ) || | ||
documentHasTextSelection( doc ) | ||
!! doc.activeElement && |
sarayourfriend
Mar 30, 2021
Author
Contributor
If a document has no activeElement
then it cannot have a selection. Furthermore, isTextField
and isNumberInput
access the passed in element completely unguarded, so the assumption here was always that activeElement
was defined.
If a document has no activeElement
then it cannot have a selection. Furthermore, isTextField
and isNumberInput
access the passed in element completely unguarded, so the assumption here was always that activeElement
was defined.
const range = selection.rangeCount ? selection.getRangeAt( 0 ) : null; | ||
return range && ! range.collapsed; | ||
return !! range && ! range.collapsed; |
sarayourfriend
Mar 30, 2021
Author
Contributor
range
is not a boolean so we cast it to a boolean to appease the return value.
range
is not a boolean so we cast it to a boolean to appease the return value.
@@ -23,7 +23,9 @@ export default function isTextField( element ) { | |||
'number', | |||
]; | |||
return ( | |||
( nodeName === 'INPUT' && ! nonTextInputs.includes( element.type ) ) || | |||
( nodeName === 'INPUT' && | |||
element.type && |
sarayourfriend
Mar 30, 2021
Author
Contributor
nonTextInputs
is a string[]
and because element.type
could be undefined | string
it doesn't fit in the box of a string[]
. Checking for it's presence first turns it into a string
which we can then pass to the includes
function on the next line.
nonTextInputs
is a string[]
and because element.type
could be undefined | string
it doesn't fit in the box of a string[]
. Checking for it's presence first turns it into a string
which we can then pass to the includes
function on the next line.
Size Change: +20 B (0%) Total Size: 1.42 MB
|
Filename | Size | Change |
---|---|---|
build/a11y/index.js |
1.14 kB | 0 B |
build/annotations/index.js |
3.78 kB | 0 B |
build/api-fetch/index.js |
3.42 kB | 0 B |
build/autop/index.js |
2.82 kB | 0 B |
build/blob/index.js |
664 B | 0 B |
build/block-directory/index.js |
8.63 kB | 0 B |
build/block-directory/style-rtl.css |
1 kB | 0 B |
build/block-directory/style.css |
1.01 kB | 0 B |
build/block-editor/index.js |
127 kB | 0 B |
build/block-editor/style-rtl.css |
12.4 kB | 0 B |
build/block-editor/style.css |
12.4 kB | 0 B |
build/block-library/blocks/archives/editor-rtl.css |
61 B | 0 B |
build/block-library/blocks/archives/editor.css |
60 B | 0 B |
build/block-library/blocks/audio/editor-rtl.css |
58 B | 0 B |
build/block-library/blocks/audio/editor.css |
58 B | 0 B |
build/block-library/blocks/audio/style-rtl.css |
112 B | 0 B |
build/block-library/blocks/audio/style.css |
112 B | 0 B |
build/block-library/blocks/block/editor-rtl.css |
161 B | 0 B |
build/block-library/blocks/block/editor.css |
161 B | 0 B |
build/block-library/blocks/button/editor-rtl.css |
475 B | 0 B |
build/block-library/blocks/button/editor.css |
474 B | 0 B |
build/block-library/blocks/button/style-rtl.css |
551 B | 0 B |
build/block-library/blocks/button/style.css |
551 B | 0 B |
build/block-library/blocks/buttons/editor-rtl.css |
315 B | 0 B |
build/block-library/blocks/buttons/editor.css |
315 B | 0 B |
build/block-library/blocks/buttons/style-rtl.css |
370 B | 0 B |
build/block-library/blocks/buttons/style.css |
370 B | 0 B |
build/block-library/blocks/calendar/style-rtl.css |
208 B | 0 B |
build/block-library/blocks/calendar/style.css |
208 B | 0 B |
build/block-library/blocks/categories/editor-rtl.css |
84 B | 0 B |
build/block-library/blocks/categories/editor.css |
83 B | 0 B |
build/block-library/blocks/categories/style-rtl.css |
79 B | 0 B |
build/block-library/blocks/categories/style.css |
79 B | 0 B |
build/block-library/blocks/code/style-rtl.css |
90 B | 0 B |
build/block-library/blocks/code/style.css |
90 B | 0 B |
build/block-library/blocks/columns/editor-rtl.css |
190 B | 0 B |
build/block-library/blocks/columns/editor.css |
190 B | 0 B |
build/block-library/blocks/columns/style-rtl.css |
436 B | 0 B |
build/block-library/blocks/columns/style.css |
435 B | 0 B |
build/block-library/blocks/cover/editor-rtl.css |
605 B | 0 B |
build/block-library/blocks/cover/editor.css |
605 B | 0 B |
build/block-library/blocks/cover/style-rtl.css |
1.24 kB | 0 B |
build/block-library/blocks/cover/style.css |
1.24 kB | 0 B |
build/block-library/blocks/embed/editor-rtl.css |
486 B | 0 B |
build/block-library/blocks/embed/editor.css |
486 B | 0 B |
build/block-library/blocks/embed/style-rtl.css |
401 B | 0 B |
build/block-library/blocks/embed/style.css |
400 B | 0 B |
build/block-library/blocks/file/editor-rtl.css |
175 B | 0 B |
build/block-library/blocks/file/editor.css |
174 B | 0 B |
build/block-library/blocks/file/style-rtl.css |
248 B | 0 B |
build/block-library/blocks/file/style.css |
248 B | 0 B |
build/block-library/blocks/freeform/editor-rtl.css |
2.45 kB | 0 B |
build/block-library/blocks/freeform/editor.css |
2.45 kB | 0 B |
build/block-library/blocks/gallery/editor-rtl.css |
704 B | 0 B |
build/block-library/blocks/gallery/editor.css |
705 B | 0 B |
build/block-library/blocks/gallery/style-rtl.css |
1.11 kB | 0 B |
build/block-library/blocks/gallery/style.css |
1.1 kB | 0 B |
build/block-library/blocks/group/editor-rtl.css |
160 B | 0 B |
build/block-library/blocks/group/editor.css |
160 B | 0 B |
build/block-library/blocks/group/style-rtl.css |
57 B | 0 B |
build/block-library/blocks/group/style.css |
57 B | 0 B |
build/block-library/blocks/heading/editor-rtl.css |
129 B | 0 B |
build/block-library/blocks/heading/editor.css |
129 B | 0 B |
build/block-library/blocks/heading/style-rtl.css |
76 B | 0 B |
build/block-library/blocks/heading/style.css |
76 B | 0 B |
build/block-library/blocks/html/editor-rtl.css |
281 B | 0 B |
build/block-library/blocks/html/editor.css |
281 B | 0 B |
build/block-library/blocks/image/editor-rtl.css |
717 B | 0 B |
build/block-library/blocks/image/editor.css |
716 B | 0 B |
build/block-library/blocks/image/style-rtl.css |
476 B | 0 B |
build/block-library/blocks/image/style.css |
478 B | 0 B |
build/block-library/blocks/latest-comments/style-rtl.css |
281 B | 0 B |
build/block-library/blocks/latest-comments/style.css |
282 B | 0 B |
build/block-library/blocks/latest-posts/editor-rtl.css |
137 B | 0 B |
build/block-library/blocks/latest-posts/editor.css |
137 B | 0 B |
build/block-library/blocks/latest-posts/style-rtl.css |
523 B | 0 B |
build/block-library/blocks/latest-posts/style.css |
522 B | 0 B |
build/block-library/blocks/legacy-widget/editor-rtl.css |
398 B | 0 B |
build/block-library/blocks/legacy-widget/editor.css |
399 B | 0 B |
build/block-library/blocks/list/style-rtl.css |
63 B | 0 B |
build/block-library/blocks/list/style.css |
63 B | 0 B |
build/block-library/blocks/media-text/editor-rtl.css |
191 B | 0 B |
build/block-library/blocks/media-text/editor.css |
191 B | 0 B |
build/block-library/blocks/media-text/style-rtl.css |
535 B | 0 B |
build/block-library/blocks/media-text/style.css |
532 B | 0 B |
build/block-library/blocks/more/editor-rtl.css |
434 B | 0 B |
build/block-library/blocks/more/editor.css |
434 B | 0 B |
build/block-library/blocks/navigation-link/editor-rtl.css |
651 B | 0 B |
build/block-library/blocks/navigation-link/editor.css |
651 B | 0 B |
build/block-library/blocks/navigation-link/style-rtl.css |
957 B | 0 B |
build/block-library/blocks/navigation-link/style.css |
955 B | 0 B |
build/block-library/blocks/navigation/editor-rtl.css |
1.13 kB | 0 B |
build/block-library/blocks/navigation/editor.css |
1.13 kB | 0 B |
build/block-library/blocks/navigation/style-rtl.css |
204 B | 0 B |
build/block-library/blocks/navigation/style.css |
205 B | 0 B |
build/block-library/blocks/nextpage/editor-rtl.css |
395 B | 0 B |
build/block-library/blocks/nextpage/editor.css |
395 B | 0 B |
build/block-library/blocks/page-list/editor-rtl.css |
170 B | 0 B |
build/block-library/blocks/page-list/editor.css |
170 B | 0 B |
build/block-library/blocks/page-list/style-rtl.css |
167 B | 0 B |
build/block-library/blocks/page-list/style.css |
167 B | 0 B |
build/block-library/blocks/paragraph/editor-rtl.css |
157 B | 0 B |
build/block-library/blocks/paragraph/editor.css |
157 B | 0 B |
build/block-library/blocks/paragraph/style-rtl.css |
247 B | 0 B |
build/block-library/blocks/paragraph/style.css |
248 B | 0 B |
build/block-library/blocks/post-author/editor-rtl.css |
209 B | 0 B |
build/block-library/blocks/post-author/editor.css |
209 B | 0 B |
build/block-library/blocks/post-author/style-rtl.css |
183 B | 0 B |
build/block-library/blocks/post-author/style.css |
184 B | 0 B |
build/block-library/blocks/post-comments-form/style-rtl.css |
250 B | 0 B |
build/block-library/blocks/post-comments-form/style.css |
250 B | 0 B |
build/block-library/blocks/post-content/editor-rtl.css |
139 B | 0 B |
build/block-library/blocks/post-content/editor.css |
139 B | 0 B |
build/block-library/blocks/post-excerpt/editor-rtl.css |
73 B | 0 B |
build/block-library/blocks/post-excerpt/editor.css |
73 B | 0 B |
build/block-library/blocks/post-featured-image/editor-rtl.css |
338 B | 0 B |
build/block-library/blocks/post-featured-image/editor.css |
338 B | 0 B |
build/block-library/blocks/post-featured-image/style-rtl.css |
100 B | 0 B |
build/block-library/blocks/post-featured-image/style.css |
100 B | 0 B |
build/block-library/blocks/preformatted/style-rtl.css |
103 B | 0 B |
build/block-library/blocks/preformatted/style.css |
103 B | 0 B |
build/block-library/blocks/pullquote/editor-rtl.css |
183 B | 0 B |
build/block-library/blocks/pullquote/editor.css |
183 B | 0 B |
build/block-library/blocks/pullquote/style-rtl.css |
318 B | 0 B |
build/block-library/blocks/pullquote/style.css |
318 B | 0 B |
build/block-library/blocks/query-loop/editor-rtl.css |
83 B | 0 B |
build/block-library/blocks/query-loop/editor.css |
82 B | 0 B |
build/block-library/blocks/query-loop/style-rtl.css |
315 B | 0 B |
build/block-library/blocks/query-loop/style.css |
317 B | 0 B |
build/block-library/blocks/query-pagination-numbers/editor-rtl.css |
122 B | 0 B |
build/block-library/blocks/query-pagination-numbers/editor.css |
121 B | 0 B |
build/block-library/blocks/query-pagination/editor-rtl.css |
270 B | 0 B |
build/block-library/blocks/query-pagination/editor.css |
262 B | 0 B |
build/block-library/blocks/query-pagination/style-rtl.css |
168 B | 0 B |
build/block-library/blocks/query-pagination/style.css |
168 B | 0 B |
build/block-library/blocks/query-title/editor-rtl.css |
86 B | 0 B |
build/block-library/blocks/query-title/editor.css |
86 B | 0 B |
build/block-library/blocks/query/editor-rtl.css |
795 B | 0 B |
build/block-library/blocks/query/editor.css |
794 B | 0 B |
build/block-library/blocks/quote/style-rtl.css |
169 B | 0 B |
build/block-library/blocks/quote/style.css |
169 B | 0 B |
build/block-library/blocks/rss/editor-rtl.css |
201 B | 0 B |
build/block-library/blocks/rss/editor.css |
202 B | 0 B |
build/block-library/blocks/rss/style-rtl.css |
290 B | 0 B |
build/block-library/blocks/rss/style.css |
290 B | 0 B |
build/block-library/blocks/search/editor-rtl.css |
165 B | 0 B |
build/block-library/blocks/search/editor.css |
165 B | 0 B |
build/block-library/blocks/search/style-rtl.css |
342 B | 0 B |
build/block-library/blocks/search/style.css |
344 B | 0 B |
build/block-library/blocks/separator/editor-rtl.css |
99 B | 0 B |
build/block-library/blocks/separator/editor.css |
99 B | 0 B |
build/block-library/blocks/separator/style-rtl.css |
251 B | 0 B |
build/block-library/blocks/separator/style.css |
251 B | 0 B |
build/block-library/blocks/shortcode/editor-rtl.css |
512 B | 0 B |
build/block-library/blocks/shortcode/editor.css |
512 B | 0 B |
build/block-library/blocks/site-logo/editor-rtl.css |
201 B | 0 B |
build/block-library/blocks/site-logo/editor.css |
201 B | 0 B |
build/block-library/blocks/site-logo/style-rtl.css |
115 B | 0 B |
build/block-library/blocks/site-logo/style.css |
115 B | 0 B |
build/block-library/blocks/social-link/editor-rtl.css |
164 B | 0 B |
build/block-library/blocks/social-link/editor.css |
165 B | 0 B |
build/block-library/blocks/social-links/editor-rtl.css |
776 B | 0 B |
build/block-library/blocks/social-links/editor.css |
776 B | 0 B |
build/block-library/blocks/social-links/style-rtl.css |
1.32 kB | 0 B |
build/block-library/blocks/social-links/style.css |
1.33 kB | 0 B |
build/block-library/blocks/spacer/editor-rtl.css |
317 B | 0 B |
build/block-library/blocks/spacer/editor.css |
317 B | 0 B |
build/block-library/blocks/spacer/style-rtl.css |
48 B | 0 B |
build/block-library/blocks/spacer/style.css |
48 B | 0 B |
build/block-library/blocks/table/editor-rtl.css |
478 B | 0 B |
build/block-library/blocks/table/editor.css |
478 B | 0 B |
build/block-library/blocks/table/style-rtl.css |
402 B | 0 B |
build/block-library/blocks/table/style.css |
402 B | 0 B |
build/block-library/blocks/tag-cloud/editor-rtl.css |
118 B | 0 B |
build/block-library/blocks/tag-cloud/editor.css |
118 B | 0 B |
build/block-library/blocks/tag-cloud/style-rtl.css |
94 B | 0 B |
build/block-library/blocks/tag-cloud/style.css |
94 B | 0 B |
build/block-library/blocks/template-part/editor-rtl.css |
552 B | 0 B |
build/block-library/blocks/template-part/editor.css |
551 B | 0 B |
build/block-library/blocks/term-description/editor-rtl.css |
90 B | 0 B |
build/block-library/blocks/term-description/editor.css |
90 B | 0 B |
build/block-library/blocks/text-columns/editor-rtl.css |
95 B | 0 B |
build/block-library/blocks/text-columns/editor.css |
95 B | 0 B |
build/block-library/blocks/text-columns/style-rtl.css |
166 B | 0 B |
build/block-library/blocks/text-columns/style.css |
166 B | 0 B |
build/block-library/blocks/verse/editor-rtl.css |
50 B | 0 B |
build/block-library/blocks/verse/editor.css |
50 B | 0 B |
build/block-library/blocks/verse/style-rtl.css |
87 B | 0 B |
build/block-library/blocks/verse/style.css |
87 B | 0 B |
build/block-library/blocks/video/editor-rtl.css |
504 B | 0 B |
build/block-library/blocks/video/editor.css |
503 B | 0 B |
build/block-library/blocks/video/style-rtl.css |
187 B | 0 B |
build/block-library/blocks/video/style.css |
187 B | 0 B |
build/block-library/common-rtl.css |
1.1 kB | 0 B |
build/block-library/common.css |
1.1 kB | 0 B |
build/block-library/editor-rtl.css |
9.56 kB | 0 B |
build/block-library/editor.css |
9.55 kB | 0 B |
build/block-library/index.js |
151 kB | 0 B |
build/block-library/reset-rtl.css |
375 B | 0 B |
build/block-library/reset.css |
376 B | 0 B |
build/block-library/style-rtl.css |
9.11 kB | 0 B |
build/block-library/style.css |
9.11 kB | 0 B |
build/block-library/theme-rtl.css |
692 B | 0 B |
build/block-library/theme.css |
693 B | 0 B |
build/block-serialization-default-parser/index.js |
1.87 kB | 0 B |
build/block-serialization-spec-parser/index.js |
3.06 kB | 0 B |
build/blocks/index.js |
48.4 kB | 0 B |
build/components/index.js |
284 kB | 0 B |
build/components/style-rtl.css |
16.2 kB | 0 B |
build/components/style.css |
16.2 kB | 0 B |
build/compose/index.js |
11.2 kB | 0 B |
build/core-data/index.js |
16.6 kB | 0 B |
build/customize-widgets/index.js |
7.33 kB | 0 B |
build/customize-widgets/style-rtl.css |
676 B | 0 B |
build/customize-widgets/style.css |
677 B | 0 B |
build/data-controls/index.js |
838 B | 0 B |
build/data/index.js |
8.89 kB | 0 B |
build/date/index.js |
31.9 kB | 0 B |
build/deprecated/index.js |
787 B | 0 B |
build/dom-ready/index.js |
576 B | 0 B |
build/edit-navigation/index.js |
17.4 kB | 0 B |
build/edit-navigation/style-rtl.css |
2.86 kB | 0 B |
build/edit-navigation/style.css |
2.86 kB | 0 B |
build/edit-post/index.js |
307 kB | 0 B |
build/edit-post/style-rtl.css |
7.05 kB | 0 B |
build/edit-post/style.css |
7.04 kB | 0 B |
build/edit-site/index.js |
27.5 kB | 0 B |
build/edit-site/style-rtl.css |
4.51 kB | 0 B |
build/edit-site/style.css |
4.5 kB | 0 B |
build/edit-widgets/index.js |
15.8 kB | 0 B |
build/edit-widgets/style-rtl.css |
2.98 kB | 0 B |
build/edit-widgets/style.css |
2.98 kB | 0 B |
build/editor/index.js |
42.7 kB | 0 B |
build/editor/style-rtl.css |
3.96 kB | 0 B |
build/editor/style.css |
3.96 kB | 0 B |
build/element/index.js |
4.62 kB | 0 B |
build/escape-html/index.js |
735 B | 0 B |
build/format-library/index.js |
6.76 kB | 0 B |
build/format-library/style-rtl.css |
637 B | 0 B |
build/format-library/style.css |
639 B | 0 B |
build/hooks/index.js |
2.28 kB | 0 B |
build/html-entities/index.js |
622 B | 0 B |
build/i18n/index.js |
4.02 kB | 0 B |
build/is-shallow-equal/index.js |
699 B | 0 B |
build/keyboard-shortcuts/index.js |
2.53 kB | 0 B |
build/keycodes/index.js |
1.96 kB | 0 B |
build/list-reusable-blocks/index.js |
3.19 kB | 0 B |
build/list-reusable-blocks/style-rtl.css |
629 B | 0 B |
build/list-reusable-blocks/style.css |
628 B | 0 B |
build/media-utils/index.js |
5.39 kB | 0 B |
build/notices/index.js |
1.85 kB | 0 B |
build/nux/index.js |
3.42 kB | 0 B |
build/nux/style-rtl.css |
731 B | 0 B |
build/nux/style.css |
727 B | 0 B |
build/plugins/index.js |
2.95 kB | 0 B |
build/primitives/index.js |
1.42 kB | 0 B |
build/priority-queue/index.js |
791 B | 0 B |
build/react-i18n/index.js |
1.46 kB | 0 B |
build/redux-routine/index.js |
2.84 kB | 0 B |
build/reusable-blocks/index.js |
3.79 kB | 0 B |
build/reusable-blocks/style-rtl.css |
225 B | 0 B |
build/reusable-blocks/style.css |
225 B | 0 B |
build/rich-text/index.js |
13.5 kB | 0 B |
build/server-side-render/index.js |
2.6 kB | 0 B |
build/shortcode/index.js |
1.7 kB | 0 B |
build/token-list/index.js |
1.27 kB | 0 B |
build/url/index.js |
3.02 kB | 0 B |
build/viewport/index.js |
1.86 kB | 0 B |
build/warning/index.js |
1.14 kB | 0 B |
build/wordcount/index.js |
1.22 kB | 0 B |
@@ -204,7 +204,7 @@ and has a valueAsNumber | |||
|
|||
_Parameters_ | |||
|
|||
- _element_ `HTMLElement`: The HTML element. | |||
- _element_ `Partial<HTMLInputElement>`: The HTML element. |
ellatrix
Mar 30, 2021
Member
Pretty new to this. Why is Partial
needed?
Pretty new to this. Why is Partial
needed?
sarayourfriend
Mar 31, 2021
Author
Contributor
Partial
is needed because the Element
itself could be any HTML element that we're testing to check to see if it's an input, textarea or contentEditable
Element. I wasn't sure how else to express that the Input
part is optional and I think this is what @sirreal suggested as a potential solution to this problem (though I may be mis remembering, I can't find the original comment where that was suggested.
Partial
is needed because the Element
itself could be any HTML element that we're testing to check to see if it's an input, textarea or contentEditable
Element. I wasn't sure how else to express that the Input
part is optional and I think this is what @sirreal suggested as a potential solution to this problem (though I may be mis remembering, I can't find the original comment where that was suggested.
sirreal
Mar 31, 2021
Member
I believe this was introduced because we have some type that HTMLInputElement
extends, but we don't know that it's an HTMLInputElement
.
Partial<HTMLInputElement>
doesn't seem ideal to me, it's typically used when we have an interface with optional properties. This usage is really that we have an Element
(I believe, could be another type) and want to use it safely if it satisfies HTMLInputElement
.
In my opinion, a better approach would be to accept the element type we expect to pass in (Element
?), and use a type guard to narrow our element to our desired type. I implemented a type guard like this in #29220 to handle this type of case:
gutenberg/packages/dom/src/dom.js
Lines 83 to 89
in
29601bd
@sarayourfriend I believe you're thinking of this comment: #30030 (comment)
I believe this was introduced because we have some type that HTMLInputElement
extends, but we don't know that it's an HTMLInputElement
.
Partial<HTMLInputElement>
doesn't seem ideal to me, it's typically used when we have an interface with optional properties. This usage is really that we have an Element
(I believe, could be another type) and want to use it safely if it satisfies HTMLInputElement
.
In my opinion, a better approach would be to accept the element type we expect to pass in (Element
?), and use a type guard to narrow our element to our desired type. I implemented a type guard like this in #29220 to handle this type of case:
gutenberg/packages/dom/src/dom.js
Lines 83 to 89 in 29601bd
@sarayourfriend I believe you're thinking of this comment: #30030 (comment)
ellatrix
Mar 31, 2021
Member
Right, maybe just HTMLElement
? We should allow any element to be checked with this function.
Right, maybe just HTMLElement
? We should allow any element to be checked with this function.
sarayourfriend
Mar 31, 2021
Author
Contributor
Aha, yes, I did try to create a type guard but got stuck on contentEditable
... I'll revisit this though and see if I can make it work with a type guard.
Aha, yes, I did try to create a type guard but got stuck on contentEditable
... I'll revisit this though and see if I can make it work with a type guard.
ellatrix
Mar 31, 2021
Member
Meaning: sometimes the flexibility is nice so you don't have to check the type before calling a function that's being strict about the type. I think this is generally good for all functions in this package.
Meaning: sometimes the flexibility is nice so you don't have to check the type before calling a function that's being strict about the type. I think this is generally good for all functions in this package.
Description
Add types to
document-has-selection
and its three dependencies.Some runtime changes are necessary to appease TypeScript. I've annotated each with the reason it is needed and why I think it's safe.
Part of #18838
How has this been tested?
Unit tests and e2e tests.
Types of changes
Non-breaking changes.
Checklist:
*.native.js
files for terms that need renaming or removal).