From dd4c333925c48009cc1677d9688462141df0aceb Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Thu, 9 Mar 2023 13:07:36 +0530 Subject: [PATCH] fix: add an offset of 0.5px for text editor in containers (#6328) * fix: add an offset of 0.5px for text editor in containers * fix specs and lint --- src/element/textWysiwyg.tsx | 5 ++--- src/tests/__snapshots__/linearElementEditor.test.tsx.snap | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/element/textWysiwyg.tsx b/src/element/textWysiwyg.tsx index bbe87ed2..e2810e81 100644 --- a/src/element/textWysiwyg.tsx +++ b/src/element/textWysiwyg.tsx @@ -11,7 +11,7 @@ import { isBoundToContainer, isTextElement, } from "./typeChecks"; -import { CLASSES, isFirefox, isSafari, VERTICAL_ALIGN } from "../constants"; +import { CLASSES, VERTICAL_ALIGN } from "../constants"; import { ExcalidrawElement, ExcalidrawLinearElement, @@ -273,8 +273,7 @@ export const textWysiwyg = ({ if (!container) { maxWidth = (appState.width - 8 - viewportX) / appState.zoom.value; textElementWidth = Math.min(textElementWidth, maxWidth); - } else if (isFirefox || isSafari) { - // As firefox, Safari needs little higher dimensions on DOM + } else { textElementWidth += 0.5; } // Make sure text editor height doesn't go beyond viewport diff --git a/src/tests/__snapshots__/linearElementEditor.test.tsx.snap b/src/tests/__snapshots__/linearElementEditor.test.tsx.snap index 5ea0ab4b..f84eab3a 100644 --- a/src/tests/__snapshots__/linearElementEditor.test.tsx.snap +++ b/src/tests/__snapshots__/linearElementEditor.test.tsx.snap @@ -5,7 +5,7 @@ exports[`Test Linear Elements Test bound text element should match styles for te class="excalidraw-wysiwyg" data-type="wysiwyg" dir="auto" - style="position: absolute; display: inline-block; min-height: 1em; 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: 10px; height: 24px; left: 35px; top: 8px; transform: translate(0px, 0px) scale(1) rotate(0deg); text-align: center; vertical-align: middle; color: rgb(0, 0, 0); opacity: 1; filter: var(--theme-filter); max-height: -8px; font: Emoji 20px 20px; line-height: 24px; font-family: Virgil, Segoe UI Emoji;" + style="position: absolute; display: inline-block; min-height: 1em; 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: 24px; left: 35px; top: 8px; transform: translate(0px, 0px) scale(1) rotate(0deg); text-align: center; vertical-align: middle; color: rgb(0, 0, 0); opacity: 1; filter: var(--theme-filter); max-height: -8px; font: Emoji 20px 20px; line-height: 24px; font-family: Virgil, Segoe UI Emoji;" tabindex="0" wrap="off" />