magicOffset

src/element/textWysiwyg.tsx

@@ -277,6 +277,9 @@ export const textWysiwyg = ({
         // As firefox, Safari needs little higher dimensions on DOM
         textElementWidth += 0.5;
       }
+      const magicOffset = excalidrawContainer
+        ? parseFloat(getComputedStyle(excalidrawContainer).fontSize)
+        : 16;
       // Make sure text editor height doesn't go beyond viewport
       const editorMaxHeight =
         (appState.height - viewportY) / appState.zoom.value;
@@ -284,9 +287,9 @@ export const textWysiwyg = ({
         font: getFontString(updatedTextElement),
         // must be defined *after* font ¯\_(ツ)_/¯
         lineHeight: `${lineHeight}px`,
-        width: `${textElementWidth}px`,
+        width: `${textElementWidth+magicOffset*2}px`,
         height: `${textElementHeight}px`,
-        left: `${viewportX}px`,
+        left: `${viewportX-magicOffset}px`,
         top: `${viewportY}px`,
         transform: getTransform(
           textElementWidth,