PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Fix Text Editing Issues in VS Code Extension (#399)

Browse source 
* Temp change so I can create a PR

* Have select all,copy/paste/cut, and  undo/redo working for text/sticky shapes in VS Code extension

* cleanup

* removed some semi colons

* Ran prettier

* More cleanup

* Adds stopPropagation for native context menu

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
This commit is contained in:
Francois Laberge 2021-11-28 09:53:35 -05:00 committed by GitHub
parent a816ceaa64
commit a1dd79ce35
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 50 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/tldraw/src/components/stopPropagation.ts
View file

@ -1 +1,4 @@
export const stopPropagation = (e: Event) => e.stopPropagation()
import type React from 'react'
export const stopPropagation = (e: KeyboardEvent | React.SyntheticEvent<any, Event>) =>
e.stopPropagation()

24
packages/tldraw/src/state/shapes/StickyUtil/StickyUtil.tsx
View file

@ -11,6 +11,7 @@ import { Vec } from '@tldraw/vec'
import { GHOSTED_OPACITY } from '~constants'
import { TLDR } from '~state/TLDR'
import { getTextSvgElement } from '../shared/getTextSvgElement'
import { stopPropagation } from '~components/stopPropagation'
type T = StickyShape
type E = HTMLDivElement
@ -84,7 +85,27 @@ export class StickyUtil extends TDShapeUtil<T, E> {
return
}
e.stopPropagation()
// If this keydown was just the meta key or a shortcut
// that includes holding the meta key like (Command+V)
// then leave the event untouched. We also have to explicitly
// Implement undo/redo for some reason in order to get this working
// in the vscode extension. Without the below code the following doesn't work
//
// - You can't cut/copy/paste when when text-editing/focused
// - You can't undo/redo when when text-editing/focused
// - You can't use Command+A to select all the text, when when text-editing/focused
if (!(e.key === 'Meta' || e.metaKey)) {
e.stopPropagation()
} else if (e.key === 'z' && e.metaKey) {
if (e.shiftKey) {
document.execCommand('redo', false)
} else {
document.execCommand('undo', false)
}
e.stopPropagation()
e.preventDefault()
return
}
if (e.key === 'Tab') {
e.preventDefault()
@ -190,6 +211,7 @@ export class StickyUtil extends TDShapeUtil<T, E> {
autoFocus
spellCheck={true}
alignment={shape.style.textAlign}
onContextMenu={stopPropagation}
/>
)}
</StyledStickyContainer>

24
packages/tldraw/src/state/shapes/TextUtil/TextUtil.tsx
View file

@ -11,6 +11,7 @@ import { Vec } from '@tldraw/vec'
import { TLDR } from '~state/TLDR'
import { getTextAlign } from '../shared/getTextAlign'
import { getTextSvgElement } from '../shared/getTextSvgElement'
import { stopPropagation } from '~components/stopPropagation'
type T = TextShape
type E = HTMLDivElement
@ -93,7 +94,27 @@ export class TextUtil extends TDShapeUtil<T, E> {
const handleKeyDown = React.useCallback(
(e: React.KeyboardEvent<HTMLTextAreaElement>) => {
e.stopPropagation()
// If this keydown was just the meta key or a shortcut
// that includes holding the meta key like (Command+V)
// then leave the event untouched. We also have to explicitly
// Implement undo/redo for some reason in order to get this working
// in the vscode extension. Without the below code the following doesn't work
//
// - You can't cut/copy/paste when when text-editing/focused
// - You can't undo/redo when when text-editing/focused
// - You can't use Command+A to select all the text, when when text-editing/focused
if (!(e.key === 'Meta' || e.metaKey)) {
e.stopPropagation()
} else if (e.key === 'z' && e.metaKey) {
if (e.shiftKey) {
document.execCommand('redo', false)
} else {
document.execCommand('undo', false)
}
e.stopPropagation()
e.preventDefault()
return
}
if (e.key === 'Escape' || (e.key === 'Enter' && (e.ctrlKey || e.metaKey))) {
e.currentTarget.blur()
@ -205,6 +226,7 @@ export class TextUtil extends TDShapeUtil<T, E> {
wrap="off"
dir="auto"
datatype="wysiwyg"
onContextMenu={stopPropagation}
/>
) : (
text