Fix selection on text element
This commit is contained in:
parent
639f2412d1
commit
3eb09d1eb1
3 changed files with 635 additions and 57 deletions
Binary file not shown.
561
packages/dev/src/assets/local.tldr
Normal file
561
packages/dev/src/assets/local.tldr
Normal file
|
@ -0,0 +1,561 @@
|
||||||
|
{
|
||||||
|
"id": "doc",
|
||||||
|
"pages": {
|
||||||
|
"page": {
|
||||||
|
"id": "page",
|
||||||
|
"name": "Page 1",
|
||||||
|
"childIndex": 1,
|
||||||
|
"shapes": {
|
||||||
|
"58343232-2843-48ff-214c-f801ba274f24": {
|
||||||
|
"id": "58343232-2843-48ff-214c-f801ba274f24",
|
||||||
|
"type": "rectangle",
|
||||||
|
"name": "Rectangle",
|
||||||
|
"parentId": "page",
|
||||||
|
"childIndex": 1,
|
||||||
|
"point": [
|
||||||
|
653.82,
|
||||||
|
158.58
|
||||||
|
],
|
||||||
|
"size": [
|
||||||
|
146.33,
|
||||||
|
213.43
|
||||||
|
],
|
||||||
|
"rotation": 0,
|
||||||
|
"style": {
|
||||||
|
"color": "Green",
|
||||||
|
"size": "Medium",
|
||||||
|
"isFilled": true,
|
||||||
|
"dash": "Draw"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"a755e702-548c-4ae3-0f62-307ced48d060": {
|
||||||
|
"id": "a755e702-548c-4ae3-0f62-307ced48d060",
|
||||||
|
"type": "ellipse",
|
||||||
|
"name": "Ellipse",
|
||||||
|
"parentId": "page",
|
||||||
|
"childIndex": 2,
|
||||||
|
"point": [
|
||||||
|
316.64,
|
||||||
|
164.11
|
||||||
|
],
|
||||||
|
"radius": [
|
||||||
|
73.7000000000001,
|
||||||
|
74.86500000000002
|
||||||
|
],
|
||||||
|
"rotation": 0,
|
||||||
|
"style": {
|
||||||
|
"color": "Blue",
|
||||||
|
"size": "Medium",
|
||||||
|
"isFilled": true,
|
||||||
|
"dash": "Draw"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"2ac5ddca-0fdd-4744-3c5b-dc63d9804993": {
|
||||||
|
"id": "2ac5ddca-0fdd-4744-3c5b-dc63d9804993",
|
||||||
|
"type": "rectangle",
|
||||||
|
"name": "Rectangle",
|
||||||
|
"parentId": "page",
|
||||||
|
"childIndex": 2,
|
||||||
|
"point": [
|
||||||
|
495.88,
|
||||||
|
466.31
|
||||||
|
],
|
||||||
|
"size": [
|
||||||
|
149.87,
|
||||||
|
134.37
|
||||||
|
],
|
||||||
|
"rotation": 0,
|
||||||
|
"style": {
|
||||||
|
"color": "Red",
|
||||||
|
"size": "Medium",
|
||||||
|
"isFilled": true,
|
||||||
|
"dash": "Draw"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"8f7c6768-8124-427f-0795-5b11b8e55cb3": {
|
||||||
|
"id": "8f7c6768-8124-427f-0795-5b11b8e55cb3",
|
||||||
|
"type": "arrow",
|
||||||
|
"name": "Arrow",
|
||||||
|
"parentId": "page",
|
||||||
|
"childIndex": 3,
|
||||||
|
"point": [
|
||||||
|
663.96,
|
||||||
|
388.01
|
||||||
|
],
|
||||||
|
"rotation": 0,
|
||||||
|
"bend": 0,
|
||||||
|
"handles": {
|
||||||
|
"start": {
|
||||||
|
"id": "start",
|
||||||
|
"index": 0,
|
||||||
|
"point": [
|
||||||
|
0,
|
||||||
|
66.018
|
||||||
|
],
|
||||||
|
"canBind": true,
|
||||||
|
"bindingId": "37f1f650-7368-41df-2489-b980efab5b7d"
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"id": "end",
|
||||||
|
"index": 1,
|
||||||
|
"point": [
|
||||||
|
37.531,
|
||||||
|
0
|
||||||
|
],
|
||||||
|
"canBind": true,
|
||||||
|
"bindingId": "284b2bbb-92eb-4f2b-255d-4b5a78e8a991"
|
||||||
|
},
|
||||||
|
"bend": {
|
||||||
|
"id": "bend",
|
||||||
|
"index": 2,
|
||||||
|
"point": [
|
||||||
|
18.765,
|
||||||
|
33.009
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"decorations": {
|
||||||
|
"end": "Arrow"
|
||||||
|
},
|
||||||
|
"style": {
|
||||||
|
"color": "Black",
|
||||||
|
"size": "Medium",
|
||||||
|
"isFilled": true,
|
||||||
|
"dash": "Draw"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"10e6dade-7fab-42f8-0fc3-2091f8b5cb1f": {
|
||||||
|
"id": "10e6dade-7fab-42f8-0fc3-2091f8b5cb1f",
|
||||||
|
"type": "arrow",
|
||||||
|
"name": "Arrow",
|
||||||
|
"parentId": "page",
|
||||||
|
"childIndex": 4,
|
||||||
|
"point": [
|
||||||
|
479.98,
|
||||||
|
235.6
|
||||||
|
],
|
||||||
|
"rotation": 0,
|
||||||
|
"bend": 0,
|
||||||
|
"handles": {
|
||||||
|
"start": {
|
||||||
|
"id": "start",
|
||||||
|
"index": 0,
|
||||||
|
"point": [
|
||||||
|
157.84,
|
||||||
|
18.972
|
||||||
|
],
|
||||||
|
"canBind": true,
|
||||||
|
"bindingId": "500844a2-1dc9-4f58-0837-1a0caf446604"
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"id": "end",
|
||||||
|
"index": 1,
|
||||||
|
"point": [
|
||||||
|
0,
|
||||||
|
0
|
||||||
|
],
|
||||||
|
"canBind": true,
|
||||||
|
"bindingId": "a9c71649-7729-47c5-0e3c-37455ecd837c"
|
||||||
|
},
|
||||||
|
"bend": {
|
||||||
|
"id": "bend",
|
||||||
|
"index": 2,
|
||||||
|
"point": [
|
||||||
|
78.921,
|
||||||
|
9.4859
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"decorations": {
|
||||||
|
"end": "Arrow"
|
||||||
|
},
|
||||||
|
"style": {
|
||||||
|
"color": "Black",
|
||||||
|
"size": "Medium",
|
||||||
|
"isFilled": true,
|
||||||
|
"dash": "Draw"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"0ef85012-7e75-4fdf-119f-18e615609335": {
|
||||||
|
"id": "0ef85012-7e75-4fdf-119f-18e615609335",
|
||||||
|
"type": "arrow",
|
||||||
|
"name": "Arrow",
|
||||||
|
"parentId": "page",
|
||||||
|
"childIndex": 5,
|
||||||
|
"point": [
|
||||||
|
414.98,
|
||||||
|
326.35
|
||||||
|
],
|
||||||
|
"rotation": 0,
|
||||||
|
"bend": 0,
|
||||||
|
"handles": {
|
||||||
|
"start": {
|
||||||
|
"id": "start",
|
||||||
|
"index": 0,
|
||||||
|
"point": [
|
||||||
|
0,
|
||||||
|
0
|
||||||
|
],
|
||||||
|
"canBind": true,
|
||||||
|
"bindingId": "aea8ac9a-0527-47ea-1d50-43862270759a"
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"id": "end",
|
||||||
|
"index": 1,
|
||||||
|
"point": [
|
||||||
|
74.457,
|
||||||
|
123.96
|
||||||
|
],
|
||||||
|
"canBind": true,
|
||||||
|
"bindingId": "be4cee5e-484d-4908-1079-a93aba785bd1"
|
||||||
|
},
|
||||||
|
"bend": {
|
||||||
|
"id": "bend",
|
||||||
|
"index": 2,
|
||||||
|
"point": [
|
||||||
|
37.228,
|
||||||
|
61.982
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"decorations": {
|
||||||
|
"end": "Arrow"
|
||||||
|
},
|
||||||
|
"style": {
|
||||||
|
"color": "Black",
|
||||||
|
"size": "Medium",
|
||||||
|
"isFilled": true,
|
||||||
|
"dash": "Draw"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"bindings": {
|
||||||
|
"284b2bbb-92eb-4f2b-255d-4b5a78e8a991": {
|
||||||
|
"id": "284b2bbb-92eb-4f2b-255d-4b5a78e8a991",
|
||||||
|
"type": "arrow",
|
||||||
|
"fromId": "8f7c6768-8124-427f-0795-5b11b8e55cb3",
|
||||||
|
"handleId": "end",
|
||||||
|
"toId": "58343232-2843-48ff-214c-f801ba274f24",
|
||||||
|
"point": [
|
||||||
|
0.67161,
|
||||||
|
0.5518
|
||||||
|
],
|
||||||
|
"distance": 16
|
||||||
|
},
|
||||||
|
"37f1f650-7368-41df-2489-b980efab5b7d": {
|
||||||
|
"id": "37f1f650-7368-41df-2489-b980efab5b7d",
|
||||||
|
"type": "arrow",
|
||||||
|
"fromId": "8f7c6768-8124-427f-0795-5b11b8e55cb3",
|
||||||
|
"handleId": "start",
|
||||||
|
"toId": "2ac5ddca-0fdd-4744-3c5b-dc63d9804993",
|
||||||
|
"point": [
|
||||||
|
0.68144,
|
||||||
|
0.58126
|
||||||
|
],
|
||||||
|
"distance": 18.210000000000036
|
||||||
|
},
|
||||||
|
"a9c71649-7729-47c5-0e3c-37455ecd837c": {
|
||||||
|
"id": "a9c71649-7729-47c5-0e3c-37455ecd837c",
|
||||||
|
"type": "arrow",
|
||||||
|
"fromId": "10e6dade-7fab-42f8-0fc3-2091f8b5cb1f",
|
||||||
|
"handleId": "end",
|
||||||
|
"toId": "a755e702-548c-4ae3-0f62-307ced48d060",
|
||||||
|
"point": [
|
||||||
|
0.84807,
|
||||||
|
0.4752
|
||||||
|
],
|
||||||
|
"distance": 16
|
||||||
|
},
|
||||||
|
"500844a2-1dc9-4f58-0837-1a0caf446604": {
|
||||||
|
"id": "500844a2-1dc9-4f58-0837-1a0caf446604",
|
||||||
|
"type": "arrow",
|
||||||
|
"fromId": "10e6dade-7fab-42f8-0fc3-2091f8b5cb1f",
|
||||||
|
"handleId": "start",
|
||||||
|
"toId": "58343232-2843-48ff-214c-f801ba274f24",
|
||||||
|
"point": [
|
||||||
|
0.5,
|
||||||
|
0.5
|
||||||
|
],
|
||||||
|
"distance": 16
|
||||||
|
},
|
||||||
|
"be4cee5e-484d-4908-1079-a93aba785bd1": {
|
||||||
|
"id": "be4cee5e-484d-4908-1079-a93aba785bd1",
|
||||||
|
"type": "arrow",
|
||||||
|
"fromId": "0ef85012-7e75-4fdf-119f-18e615609335",
|
||||||
|
"handleId": "end",
|
||||||
|
"toId": "2ac5ddca-0fdd-4744-3c5b-dc63d9804993",
|
||||||
|
"point": [
|
||||||
|
0.38339,
|
||||||
|
0.55439
|
||||||
|
],
|
||||||
|
"distance": 16
|
||||||
|
},
|
||||||
|
"aea8ac9a-0527-47ea-1d50-43862270759a": {
|
||||||
|
"id": "aea8ac9a-0527-47ea-1d50-43862270759a",
|
||||||
|
"type": "arrow",
|
||||||
|
"fromId": "0ef85012-7e75-4fdf-119f-18e615609335",
|
||||||
|
"handleId": "start",
|
||||||
|
"toId": "a755e702-548c-4ae3-0f62-307ced48d060",
|
||||||
|
"point": [
|
||||||
|
0.57016,
|
||||||
|
0.83242
|
||||||
|
],
|
||||||
|
"distance": 16
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"page1": {
|
||||||
|
"id": "page1",
|
||||||
|
"shapes": {
|
||||||
|
"fa7a50a0-00d3-432c-3e97-585a9d97b6c6": {
|
||||||
|
"id": "fa7a50a0-00d3-432c-3e97-585a9d97b6c6",
|
||||||
|
"type": "rectangle",
|
||||||
|
"name": "Rectangle",
|
||||||
|
"parentId": "page1",
|
||||||
|
"childIndex": 1,
|
||||||
|
"point": [
|
||||||
|
1757.9,
|
||||||
|
912.27
|
||||||
|
],
|
||||||
|
"size": [
|
||||||
|
92.549,
|
||||||
|
78.049
|
||||||
|
],
|
||||||
|
"rotation": 0,
|
||||||
|
"radius": 0,
|
||||||
|
"style": {
|
||||||
|
"color": "Indigo",
|
||||||
|
"size": "Medium",
|
||||||
|
"isFilled": true,
|
||||||
|
"dash": "Draw"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"76a961f3-9cad-4a44-3790-74d8e46c918b": {
|
||||||
|
"id": "76a961f3-9cad-4a44-3790-74d8e46c918b",
|
||||||
|
"type": "rectangle",
|
||||||
|
"name": "Rectangle",
|
||||||
|
"parentId": "page1",
|
||||||
|
"childIndex": 2,
|
||||||
|
"point": [
|
||||||
|
2054.6,
|
||||||
|
956.4
|
||||||
|
],
|
||||||
|
"size": [
|
||||||
|
53.205,
|
||||||
|
136.52
|
||||||
|
],
|
||||||
|
"rotation": 0,
|
||||||
|
"radius": 0,
|
||||||
|
"style": {
|
||||||
|
"color": "Red",
|
||||||
|
"size": "Medium",
|
||||||
|
"isFilled": true,
|
||||||
|
"dash": "Draw"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"5e9a929d-6fa4-4176-3f60-9a0d206a986b": {
|
||||||
|
"id": "5e9a929d-6fa4-4176-3f60-9a0d206a986b",
|
||||||
|
"type": "ellipse",
|
||||||
|
"name": "Ellipse",
|
||||||
|
"parentId": "page1",
|
||||||
|
"childIndex": 3,
|
||||||
|
"point": [
|
||||||
|
1821.3,
|
||||||
|
1044.1
|
||||||
|
],
|
||||||
|
"radius": [
|
||||||
|
34.65772824556598,
|
||||||
|
39.066377761684635
|
||||||
|
],
|
||||||
|
"rotation": 0,
|
||||||
|
"style": {
|
||||||
|
"color": "Green",
|
||||||
|
"size": "Medium",
|
||||||
|
"isFilled": true,
|
||||||
|
"dash": "Draw"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"d6e6f6a8-8472-4a05-352e-3749bc75f487": {
|
||||||
|
"id": "d6e6f6a8-8472-4a05-352e-3749bc75f487",
|
||||||
|
"type": "arrow",
|
||||||
|
"name": "Arrow",
|
||||||
|
"parentId": "page1",
|
||||||
|
"childIndex": 4,
|
||||||
|
"point": [
|
||||||
|
1873.779,
|
||||||
|
968.915
|
||||||
|
],
|
||||||
|
"rotation": 0,
|
||||||
|
"bend": 0,
|
||||||
|
"handles": {
|
||||||
|
"start": {
|
||||||
|
"id": "start",
|
||||||
|
"index": 0,
|
||||||
|
"point": [
|
||||||
|
71.321,
|
||||||
|
20.225
|
||||||
|
],
|
||||||
|
"canBind": true
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"id": "end",
|
||||||
|
"index": 1,
|
||||||
|
"point": [
|
||||||
|
-8.5265e-14,
|
||||||
|
2.1316e-14
|
||||||
|
],
|
||||||
|
"canBind": true
|
||||||
|
},
|
||||||
|
"bend": {
|
||||||
|
"id": "bend",
|
||||||
|
"index": 2,
|
||||||
|
"point": [
|
||||||
|
35.661,
|
||||||
|
10.112
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"decorations": {
|
||||||
|
"end": "Arrow"
|
||||||
|
},
|
||||||
|
"style": {
|
||||||
|
"color": "Black",
|
||||||
|
"size": "Medium",
|
||||||
|
"isFilled": true,
|
||||||
|
"dash": "Draw"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"ede2b8f7-2ce0-4b79-2770-a5d5b174f7d4": {
|
||||||
|
"id": "ede2b8f7-2ce0-4b79-2770-a5d5b174f7d4",
|
||||||
|
"type": "arrow",
|
||||||
|
"name": "Arrow",
|
||||||
|
"parentId": "page1",
|
||||||
|
"childIndex": 5,
|
||||||
|
"point": [
|
||||||
|
1781.2,
|
||||||
|
1003.8
|
||||||
|
],
|
||||||
|
"rotation": 0,
|
||||||
|
"bend": 0,
|
||||||
|
"handles": {
|
||||||
|
"start": {
|
||||||
|
"id": "start",
|
||||||
|
"index": 0,
|
||||||
|
"point": [
|
||||||
|
0,
|
||||||
|
0
|
||||||
|
],
|
||||||
|
"canBind": true
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"id": "end",
|
||||||
|
"index": 1,
|
||||||
|
"point": [
|
||||||
|
25.925,
|
||||||
|
43.226
|
||||||
|
],
|
||||||
|
"canBind": true
|
||||||
|
},
|
||||||
|
"bend": {
|
||||||
|
"id": "bend",
|
||||||
|
"index": 2,
|
||||||
|
"point": [
|
||||||
|
12.963,
|
||||||
|
21.613
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"decorations": {
|
||||||
|
"end": "Arrow"
|
||||||
|
},
|
||||||
|
"style": {
|
||||||
|
"color": "Black",
|
||||||
|
"size": "Medium",
|
||||||
|
"isFilled": true,
|
||||||
|
"dash": "Draw"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"8edca8a7-0c6d-414b-0ff0-e00c32733b46": {
|
||||||
|
"id": "8edca8a7-0c6d-414b-0ff0-e00c32733b46",
|
||||||
|
"type": "arrow",
|
||||||
|
"name": "Arrow",
|
||||||
|
"parentId": "page1",
|
||||||
|
"childIndex": 6,
|
||||||
|
"point": [
|
||||||
|
1912.9,
|
||||||
|
1065.7669999999998
|
||||||
|
],
|
||||||
|
"rotation": 0,
|
||||||
|
"bend": 0,
|
||||||
|
"handles": {
|
||||||
|
"start": {
|
||||||
|
"id": "start",
|
||||||
|
"index": 0,
|
||||||
|
"point": [
|
||||||
|
0,
|
||||||
|
12.333
|
||||||
|
],
|
||||||
|
"canBind": true
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"id": "end",
|
||||||
|
"index": 1,
|
||||||
|
"point": [
|
||||||
|
36.712,
|
||||||
|
8.3489e-14
|
||||||
|
],
|
||||||
|
"canBind": true
|
||||||
|
},
|
||||||
|
"bend": {
|
||||||
|
"id": "bend",
|
||||||
|
"index": 2,
|
||||||
|
"point": [
|
||||||
|
18.356,
|
||||||
|
6.1665
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"decorations": {
|
||||||
|
"end": "Arrow"
|
||||||
|
},
|
||||||
|
"style": {
|
||||||
|
"color": "Black",
|
||||||
|
"size": "Medium",
|
||||||
|
"isFilled": true,
|
||||||
|
"dash": "Draw"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"bindings": {},
|
||||||
|
"name": "Page 2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"pageStates": {
|
||||||
|
"page": {
|
||||||
|
"id": "page",
|
||||||
|
"selectedIds": [],
|
||||||
|
"camera": {
|
||||||
|
"point": [
|
||||||
|
-257,
|
||||||
|
-61
|
||||||
|
],
|
||||||
|
"zoom": 1
|
||||||
|
},
|
||||||
|
"editingId": null
|
||||||
|
},
|
||||||
|
"page1": {
|
||||||
|
"id": "page1",
|
||||||
|
"selectedIds": [
|
||||||
|
"76a961f3-9cad-4a44-3790-74d8e46c918b"
|
||||||
|
],
|
||||||
|
"camera": {
|
||||||
|
"point": [
|
||||||
|
-1620.9073790458274,
|
||||||
|
-841.1990943476605
|
||||||
|
],
|
||||||
|
"zoom": 1.5319298689588086
|
||||||
|
},
|
||||||
|
"currentParentId": "page1"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -147,43 +147,50 @@ export const Text = new ShapeUtil<TextShape, HTMLDivElement, TLDrawMeta>(() => (
|
||||||
elm.focus()
|
elm.focus()
|
||||||
elm.select()
|
elm.select()
|
||||||
})
|
})
|
||||||
} else {
|
|
||||||
const elm = rInput.current!
|
|
||||||
elm.setSelectionRange(0, 0)
|
|
||||||
}
|
}
|
||||||
}, [isEditing])
|
}, [isEditing])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<HTMLContainer ref={ref} {...events}>
|
<HTMLContainer ref={ref} {...events}>
|
||||||
<div className={wrapper({ isEditing })} onPointerDown={handlePointerDown}>
|
<div className={wrapper({ isEditing })} onPointerDown={handlePointerDown}>
|
||||||
<textarea
|
<div
|
||||||
className={textArea({ isEditing, isBinding })}
|
className={innerWrapper()}
|
||||||
ref={rInput}
|
|
||||||
style={{
|
style={{
|
||||||
font,
|
font,
|
||||||
color: styles.stroke,
|
color: styles.stroke,
|
||||||
userSelect: isEditing ? 'all' : 'none',
|
|
||||||
}}
|
}}
|
||||||
name="text"
|
>
|
||||||
defaultValue={text}
|
{isEditing ? (
|
||||||
tabIndex={-1}
|
<textarea
|
||||||
autoComplete="false"
|
className={textArea({ isBinding })}
|
||||||
autoCapitalize="false"
|
ref={rInput}
|
||||||
autoCorrect="false"
|
style={{
|
||||||
autoSave="false"
|
font,
|
||||||
placeholder=""
|
color: styles.stroke,
|
||||||
color={styles.stroke}
|
}}
|
||||||
onFocus={handleFocus}
|
name="text"
|
||||||
onBlur={handleBlur}
|
defaultValue={text}
|
||||||
onChange={handleChange}
|
tabIndex={-1}
|
||||||
onKeyDown={handleKeyDown}
|
autoComplete="false"
|
||||||
onPointerDown={handlePointerDown}
|
autoCapitalize="false"
|
||||||
autoFocus={isEditing}
|
autoCorrect="false"
|
||||||
readOnly={!isEditing}
|
autoSave="false"
|
||||||
wrap="off"
|
placeholder=""
|
||||||
dir="auto"
|
color={styles.stroke}
|
||||||
datatype="wysiwyg"
|
onFocus={handleFocus}
|
||||||
/>
|
onBlur={handleBlur}
|
||||||
|
onChange={handleChange}
|
||||||
|
onKeyDown={handleKeyDown}
|
||||||
|
onPointerDown={handlePointerDown}
|
||||||
|
autoFocus
|
||||||
|
wrap="off"
|
||||||
|
dir="auto"
|
||||||
|
datatype="wysiwyg"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
text
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</HTMLContainer>
|
</HTMLContainer>
|
||||||
)
|
)
|
||||||
|
@ -297,58 +304,68 @@ const wrapper = css({
|
||||||
isEditing: {
|
isEditing: {
|
||||||
false: {
|
false: {
|
||||||
pointerEvents: 'all',
|
pointerEvents: 'all',
|
||||||
|
userSelect: 'all',
|
||||||
},
|
},
|
||||||
true: {
|
true: {
|
||||||
pointerEvents: 'none',
|
pointerEvents: 'none',
|
||||||
|
userSelect: 'none',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
const textArea = css({
|
const innerWrapper = css({
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
top: 'var(--tl-padding)',
|
top: 'var(--tl-padding)',
|
||||||
left: 'var(--tl-padding)',
|
left: 'var(--tl-padding)',
|
||||||
zIndex: 1,
|
|
||||||
width: 'calc(100% - (var(--tl-padding) * 2))',
|
width: 'calc(100% - (var(--tl-padding) * 2))',
|
||||||
height: 'calc(100% - (var(--tl-padding) * 2))',
|
height: 'calc(100% - (var(--tl-padding) * 2))',
|
||||||
border: 'none',
|
|
||||||
padding: '4px',
|
padding: '4px',
|
||||||
whiteSpace: 'pre',
|
zIndex: 1,
|
||||||
alignmentBaseline: 'mathematical',
|
|
||||||
dominantBaseline: 'mathematical',
|
|
||||||
resize: 'none',
|
|
||||||
minHeight: 1,
|
minHeight: 1,
|
||||||
minWidth: 1,
|
minWidth: 1,
|
||||||
lineHeight: 1.4,
|
lineHeight: 1.4,
|
||||||
letterSpacing: LETTER_SPACING,
|
letterSpacing: LETTER_SPACING,
|
||||||
outline: 0,
|
outline: 0,
|
||||||
fontWeight: '500',
|
fontWeight: '500',
|
||||||
overflow: 'hidden',
|
|
||||||
backfaceVisibility: 'hidden',
|
backfaceVisibility: 'hidden',
|
||||||
display: 'inline-block',
|
userSelect: 'none',
|
||||||
WebkitUserSelect: 'text',
|
pointerEvents: 'none',
|
||||||
|
WebkitUserSelect: 'none',
|
||||||
WebkitTouchCallout: 'none',
|
WebkitTouchCallout: 'none',
|
||||||
variants: {
|
isEditing: {
|
||||||
isBinding: {
|
false: {},
|
||||||
false: {},
|
true: {
|
||||||
true: {
|
pointerEvents: 'all',
|
||||||
background: '$boundsBg',
|
background: '$boundsBg',
|
||||||
},
|
userSelect: 'text',
|
||||||
},
|
WebkitUserSelect: 'text',
|
||||||
isEditing: {
|
|
||||||
false: {
|
|
||||||
pointerEvents: 'none',
|
|
||||||
userSelect: 'none',
|
|
||||||
background: 'none',
|
|
||||||
WebkitUserSelect: 'none',
|
|
||||||
},
|
|
||||||
true: {
|
|
||||||
pointerEvents: 'all',
|
|
||||||
userSelect: 'text',
|
|
||||||
background: '$boundsBg',
|
|
||||||
WebkitUserSelect: 'text',
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const textArea = css({
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
zIndex: 1,
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
border: 'none',
|
||||||
|
padding: '4px',
|
||||||
|
whiteSpace: 'pre',
|
||||||
|
resize: 'none',
|
||||||
|
minHeight: 'inherit',
|
||||||
|
minWidth: 'inherit',
|
||||||
|
lineHeight: 'inherit',
|
||||||
|
letterSpacing: 'inherit',
|
||||||
|
outline: 0,
|
||||||
|
fontWeight: 'inherit',
|
||||||
|
overflow: 'hidden',
|
||||||
|
backfaceVisibility: 'hidden',
|
||||||
|
display: 'inline-block',
|
||||||
|
pointerEvents: 'all',
|
||||||
|
background: '$boundsBg',
|
||||||
|
userSelect: 'text',
|
||||||
|
WebkitUserSelect: 'text',
|
||||||
|
})
|
||||||
|
|
Loading…
Reference in a new issue