|
1 | 1 | # Clipboard Inspector |
2 | 2 |
|
3 | | -Working with the clipboard in web browsers is subject to many inconsistencies. This tool helps you explore the content of the clipboard when you paste something on a web page. |
| 3 | +A tool to help you explore the kinds of data available when you paste something on a web page, or drop something onto it: |
4 | 4 |
|
5 | | -Run it online: [https://evercoder.github.io/clipboard-inspector/](https://evercoder.github.io/clipboard-inspector/) |
| 5 | +[https://evercoder.github.io/clipboard-inspector/](https://evercoder.github.io/clipboard-inspector/) |
6 | 6 |
|
7 | | -## Reading from the clipboard |
| 7 | +The project requires Node and npm to run locally. After cloning the repo, run `npm install` in the project folder to install all dependencies. |
8 | 8 |
|
9 | | -A `paste` event contains the `clipboardData` property, which has the following properties of interest: |
| 9 | +A few scripts are available: |
10 | 10 |
|
11 | | -* `types` is an array of MIME types available in the clipboard; |
12 | | -* `items` is a list of `DataTransferItem` objects (`DataTransferItemList`); |
13 | | -* `files` is a list of `File` objects available in the clipboard. |
14 | | - |
15 | | -Additionally, `clipboardData` contains the `getData(type)` method to fetch a string representation of the data for a specific format. |
16 | | - |
17 | | -In our context `DataTransferItem.getAsString()` seems to be useless, as textual data can be read synchronously through other methods. |
18 | | - |
19 | | -## Specification |
20 | | - |
21 | | -[W3C Clipboard API and Events](https://w3c.github.io/clipboard-apis/), Editor's Draft. |
22 | | - |
23 | | -## Scenarios |
24 | | - |
25 | | -Exploring the behavior of Chrome, Firefox, and Safari in various situations. |
26 | | - |
27 | | -### Pasting plain text content |
28 | | - |
29 | | -All browsers have a `text/plain` type and the content is easily accessible. |
30 | | - |
31 | | -### Pasting HTML content |
32 | | - |
33 | | -All browsers provide the HTML content in the `text/html` type, and the stripped-down content in `text/plain` type (similar to `.innerHMTL` vs `.textContent`). |
34 | | - |
35 | | -### Pasting RTF content |
36 | | - |
37 | | -For example, from Notes or Pages. |
38 | | - |
39 | | -__Firefox__ has `text/plain` and `text/rtf` types. No `text/html`. |
40 | | -__Chrome__ contains, in addition to `text/plain` and `text/rtf`, a `text/html` representation of the content. |
41 | | -__Safari__ only contains the stripped down `text/plain` type. |
42 | | - |
43 | | -### Pasting Google Docs content |
44 | | - |
45 | | -All browsers will contain `text/plain` and `text/html` versions of the content. Images sources are URLs. The _originating browser_ (where the Copy operation took place) retains custom, application-specific MIME types. In addition, _Safari_ can report which browser originated the copy through a specific MIME type (but empty content). |
46 | | - |
47 | | -### Pasting an image file from Finder |
48 | | - |
49 | | -All three browsers report the file name in `text/plain` type. |
50 | | - |
51 | | -__Chrome__ exposes a File of `image/png` type (regardless of the image format on the disk) containing the image data, with the `name` set to `image.png`. |
52 | | - |
53 | | -__Firefox__ exposes a File of `image/png` type containing... _the generic MacOS image thumbnail_, with the `name` set to `image.png`. [Issue here](https://bugzilla.mozilla.org/show_bug.cgi?id=1389961). |
54 | | - |
55 | | -__Safari__ exposes a file of `image/*` (depending on the image format) containing, presumably, the image data, but which _cannot_ be transformed into an object URL, with the `name` set to the file name. (Error in console: `Failed to load resource: The operation couldn’t be completed. (WebKitBlobResource error 4.)`) |
56 | | - |
57 | | -### Pasting multiple image files from Finder |
58 | | - |
59 | | -All three browsers report the _concatenated file names_ in `text/plain` type. |
60 | | - |
61 | | -__Firefox__ has no other usable data. [Issue here](https://bugzilla.mozilla.org/show_bug.cgi?id=1389964). |
62 | | - |
63 | | -__Chrome__ offers a File with the content of the _last_ image in the selection, under the name `image.png` of type `image/png`. |
64 | | - |
65 | | -__Safari__ has individual entries in `files` for each image, but with the same problem in using the image data as the single-image scenario. |
66 | | - |
67 | | -### Pasting image data from a system app |
68 | | - |
69 | | -For example, copying part of an image in Preview. |
70 | | - |
71 | | -__Firefox__ and __Chrome__ report a single entry in the `types` array: `Files`. The image data is available in `files` under the name `image.png` of type `image/png`. |
72 | | - |
73 | | -__Safari__ exposes the `public.tiff` and `image/tiff` data types (no actual data for them, though), and no `items`, nor `files` arrays ([issue here](https://bugs.webkit.org/show_bug.cgi?id=170449)). Data types _may_ be useful in isolating Safari and falling back to pasting into a contenteditable div and subsequently retrieving the image data from there. |
74 | | - |
75 | | -### Pasting proprietary data from a system app |
76 | | - |
77 | | -The W3C spec lists a series of MIME types that the browser must support (among which `text/plain`, `text/html`, et cetera). Support for custom, application-specific MIME types is not mandated by the spec, but is indeed a Very Nice Thing To Have. |
78 | | - |
79 | | -__Firefox__ ([issue here](https://bugzilla.mozilla.org/show_bug.cgi?id=1389919)) and __Chrome__ ([issue here](https://bugs.chromium.org/p/chromium/issues/detail?id=487266)) filter out custom MIME types that the application might have put into the clipboard. __Safari__, on the other hand, provides much more liberal access to the clipboard's content, and is at the moment of writing the only browser in which a web application could potentially handle interesting file formats from the clipboard, like the ones from Sketch or Adobe Products. |
80 | | - |
81 | | -### Some browser milestones |
82 | | - |
83 | | -__Note:__ It turns out it's pretty hard to test this across browsers, as Browserstack, Sauce Labs, Browserling et al only support basic clipboard functionality. |
84 | | - |
85 | | -#### Firefox |
86 | | - |
87 | | -* Firefox 50 made [`clipboardData.items` available](https://bugzilla.mozilla.org/show_bug.cgi?id=906420) |
88 | | -* Firefox 52 changed [`clipboardData.types` to a simple array](https://bugzilla.mozilla.org/show_bug.cgi?id=1298243); that means it's best to always cast `types` to an array, just to be sure. |
89 | | - |
90 | | - |
91 | | -## Running the project locally |
92 | | - |
93 | | -The project requires Node and NPM/Yarn to run locally. It's built with React (piped through Babel / Webpack) — a bit more cumbersome to set up but makes it easy to prototype quickly. |
94 | | - |
95 | | -After cloning the repo, run `yarn` (or `npm install`) in the project folder to install all dependencies. |
96 | | - |
97 | | -To start a local server: |
98 | | - |
99 | | -`yarn start` (or `npm start`) |
100 | | - |
101 | | -This will make the project available on [http://localhost:1234](http://localhost:1234). |
102 | | - |
103 | | -To build the project: |
104 | | - |
105 | | -`yarn build` (or `npm build`) |
106 | | - |
107 | | -To deploy the project: |
108 | | - |
109 | | -`yarn deploy` |
110 | | - |
111 | | -This will build the project and push the `dist/` folder on the `gh-pages` Git branch. GitHub Pages is set up to work with this branch. |
112 | | - |
113 | | -## Additional resources |
114 | | - |
115 | | -* [Clipboard test](http://madebyevan.com/clipboard-test/) is a similar tool built by Evan Wallace (of Figma) in May 2015. |
| 11 | +- `npm run start` starts a local server on [127.0.0.1:8000](http://127.0.0.1:8000/) |
| 12 | +- `npm run build` builds the project |
| 13 | +- `npm run deploy` deploys the project by building it and pushing to the `gh-pages` Git branch, where GitHub Pages is set up to run. |
0 commit comments