kopia lustrzana https://github.com/Tldraw/Tldraw
Fix stickes: line wrap mismatch between display/edit (#189)
The 'fake' textarea used to edit text in a sticky had a different overflow-wrap style than the component that renders the text. By forcing the display and edit components to use the same wrapping strategy, the caret from the textarea and the rendered text should remain in sync. There is a chance there are more styles which affect the wrapping of text that could still result in various mismatches, and even moreso when we consider more browsers (I tested this in Chrome alone).pull/192/head
rodzic
72d1c06014
commit
efbded7a06
|
@ -261,7 +261,13 @@ const styledStickyContainer = css({
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
const styledText = css({
|
const commonTextWrapping = css({
|
||||||
|
whiteSpace: 'pre-wrap',
|
||||||
|
overflowWrap: 'break-word',
|
||||||
|
})
|
||||||
|
|
||||||
|
const styledText = css(
|
||||||
|
{
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
top: PADDING,
|
top: PADDING,
|
||||||
left: PADDING,
|
left: PADDING,
|
||||||
|
@ -269,7 +275,6 @@ const styledText = css({
|
||||||
height: 'fit-content',
|
height: 'fit-content',
|
||||||
font: 'inherit',
|
font: 'inherit',
|
||||||
pointerEvents: 'none',
|
pointerEvents: 'none',
|
||||||
whiteSpace: 'pre-wrap',
|
|
||||||
userSelect: 'none',
|
userSelect: 'none',
|
||||||
variants: {
|
variants: {
|
||||||
isEditing: {
|
isEditing: {
|
||||||
|
@ -281,9 +286,12 @@ const styledText = css({
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
})
|
},
|
||||||
|
commonTextWrapping
|
||||||
|
)
|
||||||
|
|
||||||
const styledTextArea = css({
|
const styledTextArea = css(
|
||||||
|
{
|
||||||
width: '100%',
|
width: '100%',
|
||||||
height: '100%',
|
height: '100%',
|
||||||
border: 'none',
|
border: 'none',
|
||||||
|
@ -297,4 +305,6 @@ const styledTextArea = css({
|
||||||
verticalAlign: 'top',
|
verticalAlign: 'top',
|
||||||
resize: 'none',
|
resize: 'none',
|
||||||
caretColor: 'black',
|
caretColor: 'black',
|
||||||
})
|
},
|
||||||
|
commonTextWrapping
|
||||||
|
)
|
||||||
|
|
Ładowanie…
Reference in New Issue