[fix] Fix text clipboard issues (#682)

* add encode URI component

* prevent copying while editing text

* Add copy listeners to canvas instead

* remove trailing whitespace on paste

packages/core/src/components/Canvas/Canvas.tsx

@@ -107,7 +107,14 @@ export const Canvas = observer(function _Canvas<
     <div id={id} className="tl-container" ref={rContainer}>
       <div id="canvas" className="tl-absolute tl-canvas" ref={rCanvas} {...events}>
         {!hideGrid && grid && <Grid grid={grid} camera={pageState.camera} />}
-        <div ref={rLayer} className="tl-absolute tl-layer" data-testid="layer">
+        <div
+          ref={rLayer}
+          className="tl-absolute tl-layer"
+          data-testid="layer"
+          onCopy={stopPropagation}
+          onPaste={stopPropagation}
+          onCut={stopPropagation}
+        >
           <Page
             page={page}
             pageState={pageState}
@@ -136,3 +143,5 @@ export const Canvas = observer(function _Canvas<
     </div>
   )
 })
+
+const stopPropagation: React.ClipboardEventHandler<HTMLDivElement> = (e) => e.stopPropagation()

packages/tldraw/src/state/TLDR.ts

@@ -1136,7 +1136,7 @@ export class TLDR {
 
       image.crossOrigin = 'anonymous'
 
-      const base64SVG = window.btoa(unescape(svgString))
+      const base64SVG = window.btoa(unescape(encodeURIComponent(svgString)))
 
       const dataUrl = `data:image/svg+xml;base64,${base64SVG}`
 
@@ -1154,6 +1154,10 @@ export class TLDR {
         resolve(canvas)
       }
 
+      image.onerror = () => {
+        console.warn('Could not convert that SVG to an image.')
+      }
+
       image.src = dataUrl
     })
 

packages/tldraw/src/state/TldrawApp.ts

@@ -1919,7 +1919,7 @@ export class TldrawApp extends StateManager<TDSnapshot> {
         id: shapeId,
         type: TDShapeType.Text,
         parentId: this.appState.currentPageId,
-        text: TLDR.normalizeText(text),
+        text: TLDR.normalizeText(text.trim()),
         point: this.getPagePoint(this.centerPoint, this.currentPageId),
         style: { ...this.appState.currentStyle },
       })

packages/tldraw/src/state/shapes/TextUtil/TextUtil.tsx

@@ -12,6 +12,7 @@ import { getTextAlign } from '../shared/getTextAlign'
 import { getTextSvgElement } from '../shared/getTextSvgElement'
 import { stopPropagation } from '~components/stopPropagation'
 import { useTextKeyboardEvents } from '../shared/useTextKeyboardEvents'
+import { preventEvent } from '~components/preventEvent'
 
 type T = TextShape
 type E = HTMLDivElement