search

Tgemayel / variable-fonts-figma

A plugin to run variable fonts in Figma
Apache License 2.0
40 stars 4 forks source link

Pasting into the preview works funny #9

Closed davelab6 closed 3 years ago

davelab6 commented 3 years ago

Currently the input in the Preview section works via a <ContentEditable> element in the TSX

https://github.com/Tgemayel/variable-fonts-figma/blob/d14b752deaf1af663b7e960bb9fd882843933acb/src/app/components/PreviewSection.tsx#L67-L89

This seems to do odd things with paste.

First, if I copy text from a web page (like going to find some sample arabic text to test #8 :) then it takes HTML on the clipboard and renders it in the preview, but then samsa processes the HTML code:

Screen Shot 2021-04-01 at 10 39 22

Second, when I paste my html arabic into a text editor and edit it to make sure its plain text, then it doesn't remove the ;psbn& clipbboard markup:

Screen Shot 2021-04-01 at 10 39 56

I guess one solution may be to make the preview read-only, and then have an actual <input> element that uses the webkit/OS widget to handle all aspects of pasting correctly.

Another might be to make the ContentEditable only accept plain text somehow. I found this but I'm not familiar enough with React to make sense of it :)

https://stackoverflow.com/questions/50132851/contenteditable-plaintext-only-in-a-react-component-with-typescript

davelab6 commented 3 years ago

Second, when I paste my html arabic into a text editor and edit it to make sure its plain text, then it doesn't remove the ;psbn& clipbboard markup

;psbn& is not pasteboard markup! It is &nbsp; in RTL (per #7)

Tgemayel commented 3 years ago

Thanks! Fixes preview 5d3a88e8f81b2a74a2ab9eca771e13c62aaac2c8