Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Typescript: Convert story editor utils #12737

Merged
merged 77 commits into from Dec 9, 2022
Merged

Typescript: Convert story editor utils #12737

merged 77 commits into from Dec 9, 2022

Conversation

spacedmonkey
Copy link
Contributor

@spacedmonkey spacedmonkey commented Nov 25, 2022

Context

Summary

Covert the simple utils in story editor to use type script.

Relevant Technical Choices

The following files were not converted, for these reasons.

  • contrastUtils.js - Can’t convert as not typed @ap.cx/hues'
  • copyPaste.js - Too complex and lots of lints errors that could not be resolved.
  • generateBlurhash.worker.js / getBlurHashFromImage.js - Can’t convert because used in worker. Requires changes to build process to get working.
  • getUpdatedSizeAndPosition.js - Can’t convert as blocked by calculateTextHeight
  • useAddPreset.js - useStory not converted.
  • useApplyTextAutoStyle.js - blocked by useCalculateAccessibleTextColors
  • useElementPolygon.js - blocked by canvas
  • useElementsWithLinks - blocked by canvas
  • useFocusTrapping - useKeyDownEffect params or incorrect
  • useIsUploadingToStory - blocked by upload
  • useShapeMask - useStory not converted.
  • useShapeMaskElements - useStory not converted.

To-do

User-facing changes

Testing Instructions

  • This is a non-user-facing change and requires no QA

This PR can be tested by following these steps:

Reviews

Does this PR have a security-related impact?

Does this PR change what data or activity we track or use?

Does this PR have a legal-related impact?

Checklist

  • This PR addresses an existing issue and I have linked this PR to it in ZenHub
  • I have tested this code to the best of my abilities
  • I have verified accessibility to the best of my abilities (docs)
  • I have verified i18n and l10n (translation, right-to-left layout) to the best of my abilities
  • This code is covered by automated tests (unit, integration, and/or e2e) to verify it works as intended (docs)
  • I have added documentation where necessary
  • I have added a matching Type: XYZ label to the PR

Fixes #12740

@spacedmonkey spacedmonkey self-assigned this Dec 5, 2022
@spacedmonkey spacedmonkey added Type: Code Quality Things that need a refactor, rewrite or just some good old developer ❤️ Package: Story Editor /packages/story-editor Pod: WP labels Dec 5, 2022
@spacedmonkey spacedmonkey marked this pull request as ready for review December 8, 2022 13:40
@googleforcreators-bot
Copy link
Collaborator

googleforcreators-bot commented Dec 8, 2022

Plugin builds for 6fd2808 are ready 🛎️!

@github-actions
Copy link
Contributor

github-actions bot commented Dec 8, 2022

Size Change: +121 B (0%)

Total Size: 2.71 MB

Filename Size Change
assets/js/wp-story-editor.js 1.44 MB +121 B (0%)
ℹ️ View Unchanged
Filename Size
assets/css/carousel-view-rtl.css 702 B
assets/css/carousel-view.css 701 B
assets/css/web-stories-block-rtl.css 4.54 kB
assets/css/web-stories-block.css 4.58 kB
assets/css/web-stories-embed-rtl.css 318 B
assets/css/web-stories-embed.css 317 B
assets/css/web-stories-list-styles-rtl.css 2.35 kB
assets/css/web-stories-list-styles.css 2.38 kB
assets/css/web-stories-theme-style-twentyeleven-rtl.css 102 B
assets/css/web-stories-theme-style-twentyeleven.css 102 B
assets/css/web-stories-theme-style-twentyfifteen-rtl.css 251 B
assets/css/web-stories-theme-style-twentyfifteen.css 251 B
assets/css/web-stories-theme-style-twentyfourteen-rtl.css 287 B
assets/css/web-stories-theme-style-twentyfourteen.css 287 B
assets/css/web-stories-theme-style-twentyseventeen-rtl.css 288 B
assets/css/web-stories-theme-style-twentyseventeen.css 288 B
assets/css/web-stories-theme-style-twentysixteen-rtl.css 224 B
assets/css/web-stories-theme-style-twentysixteen.css 224 B
assets/css/web-stories-theme-style-twentyten-rtl.css 143 B
assets/css/web-stories-theme-style-twentyten.css 143 B
assets/css/web-stories-theme-style-twentytwelve-rtl.css 256 B
assets/css/web-stories-theme-style-twentytwelve.css 256 B
assets/css/web-stories-theme-style-twentytwenty-rtl.css 86 B
assets/css/web-stories-theme-style-twentytwenty.css 86 B
assets/css/web-stories-theme-style-twentytwentyone-rtl.css 326 B
assets/css/web-stories-theme-style-twentytwentyone.css 326 B
assets/css/web-stories-widget-rtl.css 482 B
assets/css/web-stories-widget.css 482 B
assets/css/wp-dashboard-rtl.css 657 B
assets/css/wp-dashboard.css 659 B
assets/css/wp-story-editor-rtl.css 769 B
assets/css/wp-story-editor.css 771 B
assets/js/1873.js 37.6 kB
assets/js/2475.js 7.78 kB
assets/js/3371.js 194 kB
assets/js/4422.js 49.3 kB
assets/js/6071.js 92.9 kB
assets/js/9750.js 12.8 kB
assets/js/carousel-view.js 3.5 kB
assets/js/chunk-colorthief.js 2.64 kB
assets/js/chunk-ffmpeg.js 5.88 kB
assets/js/chunk-html-to-image.js 4.51 kB
assets/js/chunk-opentype.js 96 B
assets/js/chunk-react-calendar.js 22.7 kB
assets/js/chunk-react-color.js 44.3 kB
assets/js/chunk-selfie-segmentation.js 12.5 kB
assets/js/chunk-web-stories-template-0-metaData.js 546 B
assets/js/chunk-web-stories-template-0.js 11.4 kB
assets/js/chunk-web-stories-template-1-metaData.js 540 B
assets/js/chunk-web-stories-template-1.js 9.57 kB
assets/js/chunk-web-stories-template-10-metaData.js 532 B
assets/js/chunk-web-stories-template-10.js 7.34 kB
assets/js/chunk-web-stories-template-11-metaData.js 539 B
assets/js/chunk-web-stories-template-11.js 9.02 kB
assets/js/chunk-web-stories-template-12-metaData.js 496 B
assets/js/chunk-web-stories-template-12.js 9.66 kB
assets/js/chunk-web-stories-template-13-metaData.js 525 B
assets/js/chunk-web-stories-template-13.js 7.37 kB
assets/js/chunk-web-stories-template-14-metaData.js 582 B
assets/js/chunk-web-stories-template-14.js 7.36 kB
assets/js/chunk-web-stories-template-15-metaData.js 544 B
assets/js/chunk-web-stories-template-15.js 8.98 kB
assets/js/chunk-web-stories-template-16-metaData.js 588 B
assets/js/chunk-web-stories-template-16.js 10.8 kB
assets/js/chunk-web-stories-template-17-metaData.js 540 B
assets/js/chunk-web-stories-template-17.js 9.18 kB
assets/js/chunk-web-stories-template-18-metaData.js 587 B
assets/js/chunk-web-stories-template-18.js 9.86 kB
assets/js/chunk-web-stories-template-19-metaData.js 501 B
assets/js/chunk-web-stories-template-19.js 10.8 kB
assets/js/chunk-web-stories-template-2-metaData.js 586 B
assets/js/chunk-web-stories-template-2.js 9.25 kB
assets/js/chunk-web-stories-template-20-metaData.js 548 B
assets/js/chunk-web-stories-template-20.js 8.97 kB
assets/js/chunk-web-stories-template-21-metaData.js 536 B
assets/js/chunk-web-stories-template-21.js 9.84 kB
assets/js/chunk-web-stories-template-22-metaData.js 525 B
assets/js/chunk-web-stories-template-22.js 7.79 kB
assets/js/chunk-web-stories-template-23-metaData.js 604 B
assets/js/chunk-web-stories-template-23.js 7.43 kB
assets/js/chunk-web-stories-template-24-metaData.js 517 B
assets/js/chunk-web-stories-template-24.js 11.6 kB
assets/js/chunk-web-stories-template-25-metaData.js 543 B
assets/js/chunk-web-stories-template-25.js 7.04 kB
assets/js/chunk-web-stories-template-26-metaData.js 600 B
assets/js/chunk-web-stories-template-26.js 7.25 kB
assets/js/chunk-web-stories-template-27-metaData.js 542 B
assets/js/chunk-web-stories-template-27.js 7.78 kB
assets/js/chunk-web-stories-template-28-metaData.js 532 B
assets/js/chunk-web-stories-template-28.js 9.01 kB
assets/js/chunk-web-stories-template-29-metaData.js 561 B
assets/js/chunk-web-stories-template-29.js 9.23 kB
assets/js/chunk-web-stories-template-3-metaData.js 539 B
assets/js/chunk-web-stories-template-3.js 8.38 kB
assets/js/chunk-web-stories-template-30-metaData.js 576 B
assets/js/chunk-web-stories-template-30.js 7.87 kB
assets/js/chunk-web-stories-template-31-metaData.js 503 B
assets/js/chunk-web-stories-template-31.js 10.3 kB
assets/js/chunk-web-stories-template-32-metaData.js 552 B
assets/js/chunk-web-stories-template-32.js 13.2 kB
assets/js/chunk-web-stories-template-33-metaData.js 491 B
assets/js/chunk-web-stories-template-33.js 9.04 kB
assets/js/chunk-web-stories-template-34-metaData.js 570 B
assets/js/chunk-web-stories-template-34.js 7.55 kB
assets/js/chunk-web-stories-template-35-metaData.js 565 B
assets/js/chunk-web-stories-template-35.js 8.87 kB
assets/js/chunk-web-stories-template-36-metaData.js 575 B
assets/js/chunk-web-stories-template-36.js 12.6 kB
assets/js/chunk-web-stories-template-37-metaData.js 529 B
assets/js/chunk-web-stories-template-37.js 6.69 kB
assets/js/chunk-web-stories-template-38-metaData.js 572 B
assets/js/chunk-web-stories-template-38.js 7.89 kB
assets/js/chunk-web-stories-template-39-metaData.js 589 B
assets/js/chunk-web-stories-template-39.js 8.04 kB
assets/js/chunk-web-stories-template-4-metaData.js 564 B
assets/js/chunk-web-stories-template-4.js 12.6 kB
assets/js/chunk-web-stories-template-40-metaData.js 556 B
assets/js/chunk-web-stories-template-40.js 10.1 kB
assets/js/chunk-web-stories-template-41-metaData.js 573 B
assets/js/chunk-web-stories-template-41.js 7.72 kB
assets/js/chunk-web-stories-template-42-metaData.js 521 B
assets/js/chunk-web-stories-template-42.js 6.96 kB
assets/js/chunk-web-stories-template-43-metaData.js 557 B
assets/js/chunk-web-stories-template-43.js 8.7 kB
assets/js/chunk-web-stories-template-44-metaData.js 583 B
assets/js/chunk-web-stories-template-44.js 11 kB
assets/js/chunk-web-stories-template-45-metaData.js 565 B
assets/js/chunk-web-stories-template-45.js 7.48 kB
assets/js/chunk-web-stories-template-46-metaData.js 531 B
assets/js/chunk-web-stories-template-46.js 5.2 kB
assets/js/chunk-web-stories-template-47-metaData.js 591 B
assets/js/chunk-web-stories-template-47.js 9.37 kB
assets/js/chunk-web-stories-template-48-metaData.js 556 B
assets/js/chunk-web-stories-template-48.js 9.05 kB
assets/js/chunk-web-stories-template-49-metaData.js 518 B
assets/js/chunk-web-stories-template-49.js 9.63 kB
assets/js/chunk-web-stories-template-5-metaData.js 556 B
assets/js/chunk-web-stories-template-5.js 9.89 kB
assets/js/chunk-web-stories-template-50-metaData.js 503 B
assets/js/chunk-web-stories-template-50.js 9.09 kB
assets/js/chunk-web-stories-template-51-metaData.js 526 B
assets/js/chunk-web-stories-template-51.js 10.3 kB
assets/js/chunk-web-stories-template-52-metaData.js 601 B
assets/js/chunk-web-stories-template-52.js 10.3 kB
assets/js/chunk-web-stories-template-53-metaData.js 551 B
assets/js/chunk-web-stories-template-53.js 5.76 kB
assets/js/chunk-web-stories-template-54-metaData.js 547 B
assets/js/chunk-web-stories-template-54.js 7.63 kB
assets/js/chunk-web-stories-template-55-metaData.js 574 B
assets/js/chunk-web-stories-template-55.js 7.09 kB
assets/js/chunk-web-stories-template-56-metaData.js 542 B
assets/js/chunk-web-stories-template-56.js 9.81 kB
assets/js/chunk-web-stories-template-57-metaData.js 528 B
assets/js/chunk-web-stories-template-57.js 14.8 kB
assets/js/chunk-web-stories-template-58-metaData.js 554 B
assets/js/chunk-web-stories-template-58.js 5.71 kB
assets/js/chunk-web-stories-template-59-metaData.js 590 B
assets/js/chunk-web-stories-template-59.js 8.92 kB
assets/js/chunk-web-stories-template-6-metaData.js 568 B
assets/js/chunk-web-stories-template-6.js 7.04 kB
assets/js/chunk-web-stories-template-60-metaData.js 509 B
assets/js/chunk-web-stories-template-60.js 9.48 kB
assets/js/chunk-web-stories-template-7-metaData.js 569 B
assets/js/chunk-web-stories-template-7.js 7.43 kB
assets/js/chunk-web-stories-template-8-metaData.js 569 B
assets/js/chunk-web-stories-template-8.js 8.87 kB
assets/js/chunk-web-stories-template-9-metaData.js 580 B
assets/js/chunk-web-stories-template-9.js 8.39 kB
assets/js/chunk-web-stories-templates.js 1.17 kB
assets/js/chunk-web-stories-textset-0.js 5 kB
assets/js/chunk-web-stories-textset-1.js 6.58 kB
assets/js/chunk-web-stories-textset-2.js 7.57 kB
assets/js/chunk-web-stories-textset-3.js 14.6 kB
assets/js/chunk-web-stories-textset-4.js 4.1 kB
assets/js/chunk-web-stories-textset-5.js 5.41 kB
assets/js/chunk-web-stories-textset-6.js 5.21 kB
assets/js/chunk-web-stories-textset-7.js 10 kB
assets/js/generateBlurhash.worker.worker.js 1.1 kB
assets/js/imgareaselect.js 3.77 kB
assets/js/lightbox.js 550 B
assets/js/tinymce-button.js 2.85 kB
assets/js/web-stories-activation-notice.js 27.1 kB
assets/js/web-stories-block.js 22.7 kB
assets/js/web-stories-embed.js 20 B
assets/js/web-stories-widget.js 587 B
assets/js/wp-dashboard.js 63.2 kB

compressed-size-action

Copy link
Contributor

@barklund barklund left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good and sorely needed in many tickets. 🧨

@@ -23,15 +23,20 @@ import { useRef, useCallback } from '@googleforcreators/react';
*/
import { requestIdleCallback, cancelIdleCallback } from './idleCallback';

interface Task {
taskId: string | null;
task: number | null | (() => Promise<void>);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why can task be a number? What would that be used for?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because it changes from a promise to idleCallbackId, which is an int. That int is then passed to clearQueuedTask which expects an int.

Really hard to follow, I know, took me a while to understand.

packages/story-editor/src/utils/getInUseFonts.ts Outdated Show resolved Hide resolved
packages/story-editor/src/utils/getInsertedElementSize.ts Outdated Show resolved Hide resolved
packages/story-editor/src/utils/isOffCanvas.ts Outdated Show resolved Hide resolved
if (activeElement) {
const { tagName, type, contentEditable } = activeElement as
| HTMLInputElement
| HTMLAnchorElement
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why anchor elements? contentEditable can be applied to any element.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Recommended by @miina

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@spacedmonkey The idea was that previously you had created a custom interface to support tagName, type, contentEditable, however, I mentioned there are existing default types already. I did not look into it thoroughly though, so there might be some missing.

@barklund I don't think that contentEditable and type both exists on Element / HTMLElement so this needs more precision. In this particular case, we are trying to detect if native copy-paste should take over or not.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The typing is hard here. It can be multiple types, that is valid. Not all types have the same props, some have contentEditable and other have type. Not sure what to do here other than what as been done. Maybe a custom type.

packages/story-editor/src/utils/storyUpdates.ts Outdated Show resolved Hide resolved
packages/story-editor/src/utils/useDoubleClick.ts Outdated Show resolved Hide resolved
Copy link
Collaborator

@swissspidy swissspidy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good apart from the few open suggestions that need resolving

@swissspidy swissspidy merged commit 1622add into main Dec 9, 2022
@swissspidy swissspidy deleted the try/convert-ts-utils branch December 9, 2022 17:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Package: Story Editor /packages/story-editor Type: Code Quality Things that need a refactor, rewrite or just some good old developer ❤️
Projects
None yet
Development

Successfully merging this pull request may close these issues.

TypeScript: Convert utils folder
6 participants