diff options
Diffstat (limited to 'packages/excalidraw/clipboard.test.ts')
| -rw-r--r-- | packages/excalidraw/clipboard.test.ts | 196 |
1 files changed, 196 insertions, 0 deletions
diff --git a/packages/excalidraw/clipboard.test.ts b/packages/excalidraw/clipboard.test.ts new file mode 100644 index 0000000..770bcc9 --- /dev/null +++ b/packages/excalidraw/clipboard.test.ts @@ -0,0 +1,196 @@ +import { + createPasteEvent, + parseClipboard, + serializeAsClipboardJSON, +} from "./clipboard"; +import { API } from "./tests/helpers/api"; + +describe("parseClipboard()", () => { + it("should parse JSON as plaintext if not excalidraw-api/clipboard data", async () => { + let text; + let clipboardData; + // ------------------------------------------------------------------------- + + text = "123"; + clipboardData = await parseClipboard( + createPasteEvent({ types: { "text/plain": text } }), + ); + expect(clipboardData.text).toBe(text); + + // ------------------------------------------------------------------------- + + text = "[123]"; + clipboardData = await parseClipboard( + createPasteEvent({ types: { "text/plain": text } }), + ); + expect(clipboardData.text).toBe(text); + + // ------------------------------------------------------------------------- + + text = JSON.stringify({ val: 42 }); + clipboardData = await parseClipboard( + createPasteEvent({ types: { "text/plain": text } }), + ); + expect(clipboardData.text).toBe(text); + }); + + it("should parse valid excalidraw JSON if inside text/plain", async () => { + const rect = API.createElement({ type: "rectangle" }); + + const json = serializeAsClipboardJSON({ elements: [rect], files: null }); + const clipboardData = await parseClipboard( + createPasteEvent({ + types: { + "text/plain": json, + }, + }), + ); + expect(clipboardData.elements).toEqual([rect]); + }); + + it("should parse valid excalidraw JSON if inside text/html", async () => { + const rect = API.createElement({ type: "rectangle" }); + + let json; + let clipboardData; + // ------------------------------------------------------------------------- + json = serializeAsClipboardJSON({ elements: [rect], files: null }); + clipboardData = await parseClipboard( + createPasteEvent({ + types: { + "text/html": json, + }, + }), + ); + expect(clipboardData.elements).toEqual([rect]); + // ------------------------------------------------------------------------- + json = serializeAsClipboardJSON({ elements: [rect], files: null }); + clipboardData = await parseClipboard( + createPasteEvent({ + types: { + "text/html": `<div> ${json}</div>`, + }, + }), + ); + expect(clipboardData.elements).toEqual([rect]); + // ------------------------------------------------------------------------- + }); + + it("should parse <image> `src` urls out of text/html", async () => { + let clipboardData; + // ------------------------------------------------------------------------- + clipboardData = await parseClipboard( + createPasteEvent({ + types: { + "text/html": `<img src="https://example.com/image.png" />`, + }, + }), + ); + expect(clipboardData.mixedContent).toEqual([ + { + type: "imageUrl", + value: "https://example.com/image.png", + }, + ]); + // ------------------------------------------------------------------------- + clipboardData = await parseClipboard( + createPasteEvent({ + types: { + "text/html": `<div><img src="https://example.com/image.png" /></div><a><img src="https://example.com/image2.png" /></a>`, + }, + }), + ); + expect(clipboardData.mixedContent).toEqual([ + { + type: "imageUrl", + value: "https://example.com/image.png", + }, + { + type: "imageUrl", + value: "https://example.com/image2.png", + }, + ]); + }); + + it("should parse text content alongside <image> `src` urls out of text/html", async () => { + const clipboardData = await parseClipboard( + createPasteEvent({ + types: { + "text/html": `<a href="https://example.com">hello </a><div><img src="https://example.com/image.png" /></div><b>my friend!</b>`, + }, + }), + ); + expect(clipboardData.mixedContent).toEqual([ + { + type: "text", + // trimmed + value: "hello", + }, + { + type: "imageUrl", + value: "https://example.com/image.png", + }, + { + type: "text", + value: "my friend!", + }, + ]); + }); + + it("should parse spreadsheet from either text/plain and text/html", async () => { + let clipboardData; + // ------------------------------------------------------------------------- + clipboardData = await parseClipboard( + createPasteEvent({ + types: { + "text/plain": `a b + 1 2 + 4 5 + 7 10`, + }, + }), + ); + expect(clipboardData.spreadsheet).toEqual({ + title: "b", + labels: ["1", "4", "7"], + values: [2, 5, 10], + }); + // ------------------------------------------------------------------------- + clipboardData = await parseClipboard( + createPasteEvent({ + types: { + "text/html": `a b + 1 2 + 4 5 + 7 10`, + }, + }), + ); + expect(clipboardData.spreadsheet).toEqual({ + title: "b", + labels: ["1", "4", "7"], + values: [2, 5, 10], + }); + // ------------------------------------------------------------------------- + clipboardData = await parseClipboard( + createPasteEvent({ + types: { + "text/html": `<html> + <body> + <!--StartFragment--><google-sheets-html-origin><style type="text/css"><!--td {border: 1px solid #cccccc;}br {mso-data-placement:same-cell;}--></style><table xmlns="http://www.w3.org/1999/xhtml" cellspacing="0" cellpadding="0" dir="ltr" border="1" style="table-layout:fixed;font-size:10pt;font-family:Arial;width:0px;border-collapse:collapse;border:none"><colgroup><col width="100"/><col width="100"/></colgroup><tbody><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;" data-sheets-value="{"1":2,"2":"a"}">a</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;" data-sheets-value="{"1":2,"2":"b"}">b</td></tr><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-align:right;" data-sheets-value="{"1":3,"3":1}">1</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-align:right;" data-sheets-value="{"1":3,"3":2}">2</td></tr><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-align:right;" data-sheets-value="{"1":3,"3":4}">4</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-align:right;" data-sheets-value="{"1":3,"3":5}">5</td></tr><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-align:right;" data-sheets-value="{"1":3,"3":7}">7</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-align:right;" data-sheets-value="{"1":3,"3":10}">10</td></tr></tbody></table><!--EndFragment--> + </body> + </html>`, + "text/plain": `a b + 1 2 + 4 5 + 7 10`, + }, + }), + ); + expect(clipboardData.spreadsheet).toEqual({ + title: "b", + labels: ["1", "4", "7"], + values: [2, 5, 10], + }); + }); +}); |