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

Added plain text paste handler #4600

Merged
merged 4 commits into from
Sep 21, 2020
Merged

Added plain text paste handler #4600

merged 4 commits into from
Sep 21, 2020

Conversation

barklund
Copy link
Contributor

Summary

Custom handling of pasted (plain text) content.

Note that this ignores formatted content. That work is still pending in #760.

Testing Instructions

  1. Make a text box
  2. Change the text color
  3. Double click and place the cursor somewhere inside the text without selecting anything
  4. Paste some content and observe text color is preserved and text is correctly inserted
  5. Select everything and paste some other content.
  6. Observe that formatting is preserved and text is correctly replaced

NB: Note that rich text formatting is ignored in pasted content. The content is pasted to match the style of the text field, not the original formatting from where it was pasted.


Fixes #1605

@github-actions
Copy link
Contributor

github-actions bot commented Sep 21, 2020

Size Change: +461 B (0%)

Total Size: 1.27 MB

Filename Size Change
assets/js/edit-story.js 504 kB +282 B (0%)
assets/js/stories-dashboard.js 599 kB +179 B (0%)
ℹ️ View Unchanged
Filename Size Change
assets/css/edit-story.css 909 B 0 B
assets/css/stories-dashboard.css 939 B 0 B
assets/css/web-stories-embed-block.css 515 B 0 B
assets/js/chunk-web-stories-template-0-********************.js 10.2 kB 0 B
assets/js/chunk-web-stories-template-1-********************.js 10.2 kB 0 B
assets/js/chunk-web-stories-template-2-********************.js 9.97 kB 0 B
assets/js/chunk-web-stories-template-3-********************.js 10.5 kB 0 B
assets/js/chunk-web-stories-template-4-********************.js 10.6 kB 0 B
assets/js/chunk-web-stories-template-5-********************.js 6.83 kB 0 B
assets/js/chunk-web-stories-template-6-********************.js 9.87 kB 0 B
assets/js/chunk-web-stories-template-7-********************.js 9.75 kB 0 B
assets/js/chunk-web-stories-textset-0-********************.js 1.63 kB 0 B
assets/js/web-stories-activation-notice.js 71 kB 0 B
assets/js/web-stories-embed-block.js 17.5 kB 0 B

compressed-size-action

Copy link
Contributor

@miina miina left a comment

Choose a reason for hiding this comment

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

LGTM -- a test would be great though!

@codecov
Copy link

codecov bot commented Sep 21, 2020

Codecov Report

Merging #4600 into main will increase coverage by 13.24%.
The diff coverage is n/a.

Impacted file tree graph

@@             Coverage Diff             @@
##             main    #4600       +/-   ##
===========================================
+ Coverage   70.10%   83.34%   +13.24%     
===========================================
  Files         881      882        +1     
  Lines       15519    15530       +11     
===========================================
+ Hits        10880    12944     +2064     
+ Misses       4639     2586     -2053     
Flag Coverage Δ
#karmatests 72.41% <ø> (+42.09%) ⬆️
#unittests 66.24% <ø> (-0.05%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files Coverage Δ
...ssets/src/edit-story/components/richText/editor.js 100.00% <ø> (+90.90%) ⬆️
...ets/src/edit-story/components/richText/provider.js 97.36% <ø> (+94.66%) ⬆️
...t-story/components/richText/useHandlePastedText.js 100.00% <ø> (ø)
...tory/components/keyboardShortcutsMenu/constants.js 100.00% <0.00%> (ø)
...edit-story/components/panels/sizePosition/panel.js 90.90% <0.00%> (+1.81%) ⬆️
assets/src/edit-story/elements/text/frame.js 97.50% <0.00%> (+2.50%) ⬆️
...onents/panels/sizePosition/usePresubmitHandlers.js 92.50% <0.00%> (+2.50%) ⬆️
...edit-story/components/panels/panel/shared/title.js 76.31% <0.00%> (+2.63%) ⬆️
...onents/library/panes/shared/pillGroup/pillGroup.js 96.96% <0.00%> (+3.03%) ⬆️
... and 200 more

@barklund
Copy link
Contributor Author

LGTM -- a test would be great though!

I don't think we can test with native paste event for this, but I can try.

@swissspidy
Copy link
Collaborator

@barklund would an e2e test be possible? If so, happy to help

@merapi
Copy link
Contributor

merapi commented Sep 21, 2020

Testing this is not easy (in Puppeteer/Playwright/Cypress/Selenium), I had the best luck (consistency across browsers/oss) with something like this:

  const plainText = "Foo Bar";
  const pasteEvent = Object.assign(
    new Event("paste", { bubbles: true, cancelable: true }),
    {
      clipboardData: {
        types: ["text/plain"],
        items: {
          length: 1,
          0: {
            kind: "string",
            type: "text/plain",
            getAsString: () => plainText
          }
        },
        getData: (type) => plainText
      }
    }
  );
  document.activeElement.dispatchEvent(pasteEvent);

@barklund
Copy link
Contributor Author

@merapi @miina, it worked!

@barklund barklund merged commit cfed7e3 into main Sep 21, 2020
@barklund barklund deleted the fix/1605-paste-in-richtext branch September 21, 2020 21:20
@swissspidy swissspidy added the Type: Enhancement New feature or improvement of an existing feature label Sep 22, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Elements: Text Group: Copy/Paste Clipboard-related functionality Type: Enhancement New feature or improvement of an existing feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Pasting formatted content into text field while editing removes formatting
4 participants