diff --git a/packages/excalidraw/element/textWysiwyg.tsx b/packages/excalidraw/element/textWysiwyg.tsx index 5663af8f8..efe27bc6e 100644 --- a/packages/excalidraw/element/textWysiwyg.tsx +++ b/packages/excalidraw/element/textWysiwyg.tsx @@ -11,7 +11,7 @@ import { isBoundToContainer, isTextElement, } from "./typeChecks"; -import { CLASSES, isSafari, POINTER_BUTTON } from "../constants"; +import { CLASSES, POINTER_BUTTON } from "../constants"; import type { ExcalidrawElement, ExcalidrawLinearElement, @@ -245,11 +245,6 @@ export const textWysiwyg = ({ const font = getFontString(updatedTextElement); - // adding left and right padding buffer, so that browser does not cut the glyphs (does not work in Safari) - const padding = !isSafari - ? Math.ceil(updatedTextElement.fontSize / appState.zoom.value / 2) - : 0; - // Make sure text editor height doesn't go beyond viewport const editorMaxHeight = (appState.height - viewportY) / appState.zoom.value; @@ -259,7 +254,7 @@ export const textWysiwyg = ({ lineHeight: updatedTextElement.lineHeight, width: `${width}px`, height: `${height}px`, - left: `${viewportX - padding}px`, + left: `${viewportX}px`, top: `${viewportY}px`, transform: getTransform( width, @@ -269,7 +264,6 @@ export const textWysiwyg = ({ maxWidth, editorMaxHeight, ), - padding: `0 ${padding}px`, textAlign, verticalAlign, color: updatedTextElement.strokeColor, @@ -310,6 +304,7 @@ export const textWysiwyg = ({ minHeight: "1em", backfaceVisibility: "hidden", margin: 0, + padding: 0, border: 0, outline: 0, resize: "none", diff --git a/packages/excalidraw/tests/__snapshots__/linearElementEditor.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/linearElementEditor.test.tsx.snap index 399fab29b..00857987c 100644 --- a/packages/excalidraw/tests/__snapshots__/linearElementEditor.test.tsx.snap +++ b/packages/excalidraw/tests/__snapshots__/linearElementEditor.test.tsx.snap @@ -17,7 +17,7 @@ exports[`Test Linear Elements > Test bound text element > should match styles fo class="excalidraw-wysiwyg" data-type="wysiwyg" dir="auto" - style="position: absolute; display: inline-block; min-height: 1em; backface-visibility: hidden; margin: 0px; border: 0px; outline: 0; resize: none; background: transparent; overflow: hidden; z-index: var(--zIndex-wysiwyg); word-break: break-word; white-space: pre-wrap; overflow-wrap: break-word; box-sizing: content-box; width: 10.5px; height: 26.25px; left: 25px; top: 7.5px; transform: translate(0px, 0px) scale(1) rotate(0deg); padding: 0px 10px; text-align: center; vertical-align: middle; color: rgb(30, 30, 30); opacity: 1; filter: var(--theme-filter); max-height: 992.5px; font: Emoji 20px 20px; line-height: 1.25; font-family: Excalifont, Xiaolai, Segoe UI Emoji;" + style="position: absolute; display: inline-block; min-height: 1em; backface-visibility: hidden; margin: 0px; padding: 0px; border: 0px; outline: 0; resize: none; background: transparent; overflow: hidden; z-index: var(--zIndex-wysiwyg); word-break: break-word; white-space: pre-wrap; overflow-wrap: break-word; box-sizing: content-box; width: 10.5px; height: 26.25px; left: 35px; top: 7.5px; transform: translate(0px, 0px) scale(1) rotate(0deg); text-align: center; vertical-align: middle; color: rgb(30, 30, 30); opacity: 1; filter: var(--theme-filter); max-height: 992.5px; font: Emoji 20px 20px; line-height: 1.25; font-family: Excalifont, Xiaolai, Segoe UI Emoji;" tabindex="0" wrap="off" />