Lint fix, comment fix

Vertical offset based on the canvas text metrics
deprecate baseline
2025-10-04 06:40:02 +02:00 · 2024-02-08 10:05:58 +01:00 · 2024-02-07 22:36:23 +01:00 · 2024-02-07 21:45:24 +01:00
26 changed files with 381 additions and 192 deletions
--- a/excalidraw-app/App.tsx
+++ b/excalidraw-app/App.tsx
@@ -104,7 +104,6 @@ import { openConfirmModal } from "../packages/excalidraw/components/OverwriteCon
 import { OverwriteConfirmDialog } from "../packages/excalidraw/components/OverwriteConfirm/OverwriteConfirm";
 import Trans from "../packages/excalidraw/components/Trans";
 import { ShareDialog, shareDialogStateAtom } from "./share/ShareDialog";
-import { getFileName } from "../packages/excalidraw/data/filename";

 polyfill();

@@ -691,6 +690,7 @@ const ExcalidrawWrapper = () => {
      </div>
    );
  }
+
  return (
    <div
      style={{ height: "100%" }}
@@ -775,7 +775,6 @@ const ExcalidrawWrapper = () => {
                  excalidrawAPI.getSceneElements(),
                  excalidrawAPI.getAppState(),
                  excalidrawAPI.getFiles(),
-                  getFileName(),
                );
              }}
            >
--- a/excalidraw-app/components/ExportToExcalidrawPlus.tsx
+++ b/excalidraw-app/components/ExportToExcalidrawPlus.tsx
@@ -25,13 +25,11 @@ import { MIME_TYPES } from "../../packages/excalidraw/constants";
 import { trackEvent } from "../../packages/excalidraw/analytics";
 import { getFrame } from "../../packages/excalidraw/utils";
 import { ExcalidrawLogo } from "../../packages/excalidraw/components/ExcalidrawLogo";
-import { getFileName } from "../../packages/excalidraw/data/filename";

 export const exportToExcalidrawPlus = async (
  elements: readonly NonDeletedExcalidrawElement[],
  appState: Partial<AppState>,
  files: BinaryFiles,
-  name: string,
 ) => {
  const firebase = await loadFirebaseStorage();

@@ -55,7 +53,7 @@ export const exportToExcalidrawPlus = async (
    .ref(`/migrations/scenes/${id}`)
    .put(blob, {
      customMetadata: {
-        data: JSON.stringify({ version: 2, name }),
+        data: JSON.stringify({ version: 2, name: appState.name }),
        created: Date.now().toString(),
      },
    });
@@ -119,12 +117,7 @@ export const ExportToExcalidrawPlus: React.FC<{
        onClick={async () => {
          try {
            trackEvent("export", "eplus", `ui (${getFrame()})`);
-            await exportToExcalidrawPlus(
-              elements,
-              appState,
-              files,
-              getFileName(),
-            );
+            await exportToExcalidrawPlus(elements, appState, files);
            onSuccess();
          } catch (error: any) {
            console.error(error);
--- a/packages/excalidraw/actions/actionBoundText.tsx
+++ b/packages/excalidraw/actions/actionBoundText.tsx
@@ -49,7 +49,7 @@ export const actionUnbindText = register({
    selectedElements.forEach((element) => {
      const boundTextElement = getBoundTextElement(element, elementsMap);
      if (boundTextElement) {
-        const { width, height, baseline } = measureText(
+        const { width, height } = measureText(
          boundTextElement.originalText,
          getFontString(boundTextElement),
          boundTextElement.lineHeight,
@@ -63,7 +63,6 @@ export const actionUnbindText = register({
          containerId: null,
          width,
          height,
-          baseline,
          text: boundTextElement.originalText,
          x,
          y,
--- a/packages/excalidraw/actions/actionClipboard.tsx
+++ b/packages/excalidraw/actions/actionClipboard.tsx
@@ -13,7 +13,6 @@ import { exportCanvas, prepareElementsForExport } from "../data/index";
 import { isTextElement } from "../element";
 import { t } from "../i18n";
 import { isFirefox } from "../constants";
-import { getFileName } from "../data/filename";

 export const actionCopy = register({
  name: "copy",
@@ -139,7 +138,6 @@ export const actionCopyAsSvg = register({
        {
          ...appState,
          exportingFrame,
-          name: app.props.name || getFileName(),
        },
      );
      return {
@@ -186,7 +184,6 @@ export const actionCopyAsPng = register({
      await exportCanvas("clipboard", exportedElements, appState, app.files, {
        ...appState,
        exportingFrame,
-        name: app.props.name || getFileName(),
      });
      return {
        appState: {
--- a/packages/excalidraw/actions/actionExport.tsx
+++ b/packages/excalidraw/actions/actionExport.tsx
@@ -17,7 +17,6 @@ import { getNonDeletedElements } from "../element";
 import { isImageFileHandle } from "../data/blob";
 import { nativeFileSystemSupported } from "../data/filesystem";
 import { Theme } from "../element/types";
-import { getFileName } from "../data/filename";

 import "../components/ToolIcon.scss";

@@ -30,7 +29,7 @@ export const actionChangeProjectName = register({
  PanelComponent: ({ appState, updateData, appProps, data }) => (
    <ProjectName
      label={t("labels.fileTitle")}
-      value={appProps.name}
+      value={appState.name || "Unnamed"}
      onChange={(name: string) => updateData(name)}
      isNameEditable={
        typeof appProps.name === "undefined" && !appState.viewModeEnabled
@@ -145,18 +144,8 @@ export const actionSaveToActiveFile = register({

    try {
      const { fileHandle } = isImageFileHandle(appState.fileHandle)
-        ? await resaveAsImageWithScene(
-            elements,
-            appState,
-            app.files,
-            app.props.name || getFileName(),
-          )
-        : await saveAsJSON(
-            elements,
-            appState,
-            app.files,
-            app.props.name || getFileName(),
-          );
+        ? await resaveAsImageWithScene(elements, appState, app.files)
+        : await saveAsJSON(elements, appState, app.files);

      return {
        commitToHistory: false,
@@ -201,7 +190,6 @@ export const actionSaveFileToDisk = register({
          fileHandle: null,
        },
        app.files,
-        app.props.name || getFileName(),
      );
      return {
        commitToHistory: false,
--- a/packages/excalidraw/appState.ts
+++ b/packages/excalidraw/appState.ts
@@ -7,7 +7,9 @@ import {
  EXPORT_SCALES,
  THEME,
 } from "./constants";
+import { t } from "./i18n";
 import { AppState, NormalizedZoomValue } from "./types";
+import { getDateTime } from "./utils";

 const defaultExportScale = EXPORT_SCALES.includes(devicePixelRatio)
  ? devicePixelRatio
@@ -63,6 +65,7 @@ export const getDefaultAppState = (): Omit<
    isRotating: false,
    lastPointerDownWith: "mouse",
    multiElement: null,
+    name: `${t("labels.untitled")}-${getDateTime()}`,
    contextMenu: null,
    openMenu: null,
    openPopup: null,
@@ -172,6 +175,7 @@ const APP_STATE_STORAGE_CONF = (<
  isRotating: { browser: false, export: false, server: false },
  lastPointerDownWith: { browser: true, export: false, server: false },
  multiElement: { browser: false, export: false, server: false },
+  name: { browser: true, export: false, server: false },
  offsetLeft: { browser: false, export: false, server: false },
  offsetTop: { browser: false, export: false, server: false },
  contextMenu: { browser: false, export: false, server: false },
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@@ -409,7 +409,6 @@ import { withBatchedUpdates, withBatchedUpdatesThrottled } from "../reactUtils";
 import { getRenderOpacity } from "../renderer/renderElement";
 import { textWysiwyg } from "../element/textWysiwyg";
 import { isOverScrollBars } from "../scene/scrollbars";
-import { getFileName } from "../data/filename";

 const AppContext = React.createContext<AppClassProperties>(null!);
 const AppPropsContext = React.createContext<AppProps>(null!);
@@ -620,6 +619,7 @@ class App extends React.Component<AppProps, AppState> {
      gridModeEnabled = false,
      objectsSnapModeEnabled = false,
      theme = defaultAppState.theme,
+      name = defaultAppState.name,
    } = props;
    this.state = {
      ...defaultAppState,
@@ -630,6 +630,7 @@ class App extends React.Component<AppProps, AppState> {
      zenModeEnabled,
      objectsSnapModeEnabled,
      gridSize: gridModeEnabled ? GRID_SIZE : null,
+      name,
      width: window.innerWidth,
      height: window.innerHeight,
    };
@@ -1724,7 +1725,7 @@ class App extends React.Component<AppProps, AppState> {
      this.files,
      {
        exportBackground: this.state.exportBackground,
-        name: this.props.name || getFileName(),
+        name: this.state.name,
        viewBackgroundColor: this.state.viewBackgroundColor,
        exportingFrame: opts.exportingFrame,
      },
@@ -2123,7 +2124,7 @@ class App extends React.Component<AppProps, AppState> {
        let gridSize = actionResult?.appState?.gridSize || null;
        const theme =
          actionResult?.appState?.theme || this.props.theme || THEME.LIGHT;
-
+        let name = actionResult?.appState?.name ?? this.state.name;
        const errorMessage =
          actionResult?.appState?.errorMessage ?? this.state.errorMessage;
        if (typeof this.props.viewModeEnabled !== "undefined") {
@@ -2138,6 +2139,10 @@ class App extends React.Component<AppProps, AppState> {
          gridSize = this.props.gridModeEnabled ? GRID_SIZE : null;
        }

+        if (typeof this.props.name !== "undefined") {
+          name = this.props.name;
+        }
+
        editingElement =
          editingElement || actionResult.appState?.editingElement || null;

@@ -2160,6 +2165,7 @@ class App extends React.Component<AppProps, AppState> {
              zenModeEnabled,
              gridSize,
              theme,
+              name,
              errorMessage,
            });
          },
@@ -2693,6 +2699,12 @@ class App extends React.Component<AppProps, AppState> {
      });
    }

+    if (this.props.name && prevProps.name !== this.props.name) {
+      this.setState({
+        name: this.props.name,
+      });
+    }
+
    this.excalidrawContainerRef.current?.classList.toggle(
      "theme--dark",
      this.state.theme === "dark",
--- a/packages/excalidraw/components/ImageExportDialog.tsx
+++ b/packages/excalidraw/components/ImageExportDialog.tsx
@@ -36,7 +36,6 @@ import { useAppProps } from "./App";
 import { FilledButton } from "./FilledButton";
 import { cloneJSON } from "../utils";
 import { prepareElementsForExport } from "../data";
-import { getFileName } from "../data/filename";

 const supportsContextFilters =
  "filter" in document.createElement("canvas").getContext("2d")!;
@@ -74,9 +73,7 @@ const ImageExportModal = ({
  );

  const appProps = useAppProps();
-  const [projectName, setProjectName] = useState(
-    appProps.name || getFileName(),
-  );
+  const [projectName, setProjectName] = useState(appStateSnapshot.name);
  const [exportSelectionOnly, setExportSelectionOnly] = useState(hasSelection);
  const [exportWithBackground, setExportWithBackground] = useState(
    appStateSnapshot.exportBackground,
@@ -112,6 +109,7 @@ const ImageExportModal = ({
      elements: exportedElements,
      appState: {
        ...appStateSnapshot,
+        name: projectName,
        exportBackground: exportWithBackground,
        exportWithDarkMode: exportDarkMode,
        exportScale,
--- a/packages/excalidraw/components/ProjectName.tsx
+++ b/packages/excalidraw/components/ProjectName.tsx
@@ -6,12 +6,9 @@ import { focusNearestParent } from "../utils";
 import "./ProjectName.scss";
 import { useExcalidrawContainer } from "./App";
 import { KEYS } from "../keys";
-import { EditorLocalStorage } from "../data/EditorLocalStorage";
-import { EDITOR_LS_KEYS } from "../constants";
-import { getFileName } from "../data/filename";

 type Props = {
-  value?: string;
+  value: string;
  onChange: (value: string) => void;
  label: string;
  isNameEditable: boolean;
@@ -20,13 +17,9 @@ type Props = {

 export const ProjectName = (props: Props) => {
  const { id } = useExcalidrawContainer();
-  const [fileName, setFileName] = useState<string>(
-    props.value || getFileName(),
-  );
+  const [fileName, setFileName] = useState<string>(props.value);

  const handleBlur = (event: any) => {
-    EditorLocalStorage.set(EDITOR_LS_KEYS.EXCALIDRAW_FILE_NAME, fileName);
-
    if (!props.ignoreFocus) {
      focusNearestParent(event.target);
    }
--- a/packages/excalidraw/constants.ts
+++ b/packages/excalidraw/constants.ts
@@ -380,5 +380,4 @@ export const EDITOR_LS_KEYS = {
  // legacy naming (non)scheme
  MERMAID_TO_EXCALIDRAW: "mermaid-to-excalidraw",
  PUBLISH_LIBRARY: "publish-library-data",
-  EXCALIDRAW_FILE_NAME: "excalidraw-file-name",
 } as const;
--- a/packages/excalidraw/data/snapshots/transform.test.ts.snap
+++ b/packages/excalidraw/data/snapshots/transform.test.ts.snap
@@ -219,7 +219,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": [
    {
      "id": "id48",
@@ -263,7 +262,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": [
    {
      "id": "id48",
@@ -365,7 +363,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": null,
  "containerId": "id48",
  "fillStyle": "solid",
@@ -462,7 +459,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": null,
  "containerId": "id37",
  "fillStyle": "solid",
@@ -629,7 +625,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": null,
  "containerId": "id41",
  "fillStyle": "solid",
@@ -668,7 +663,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": [
    {
      "id": "id41",
@@ -712,7 +706,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": [
    {
      "id": "id41",
@@ -1146,7 +1139,6 @@ exports[`Test Transform > should transform text element 1`] = `
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": null,
  "containerId": null,
  "fillStyle": "solid",
@@ -1185,7 +1177,6 @@ exports[`Test Transform > should transform text element 2`] = `
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": null,
  "containerId": null,
  "fillStyle": "solid",
@@ -1424,7 +1415,6 @@ exports[`Test Transform > should transform to labelled arrows when label provide
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": null,
  "containerId": "id25",
  "fillStyle": "solid",
@@ -1463,7 +1453,6 @@ exports[`Test Transform > should transform to labelled arrows when label provide
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": null,
  "containerId": "id26",
  "fillStyle": "solid",
@@ -1502,7 +1491,6 @@ exports[`Test Transform > should transform to labelled arrows when label provide
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": null,
  "containerId": "id27",
  "fillStyle": "solid",
@@ -1542,7 +1530,6 @@ exports[`Test Transform > should transform to labelled arrows when label provide
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": null,
  "containerId": "id28",
  "fillStyle": "solid",
@@ -1792,7 +1779,6 @@ exports[`Test Transform > should transform to text containers when label provide
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": null,
  "containerId": "id13",
  "fillStyle": "solid",
@@ -1831,7 +1817,6 @@ exports[`Test Transform > should transform to text containers when label provide
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": null,
  "containerId": "id14",
  "fillStyle": "solid",
@@ -1871,7 +1856,6 @@ exports[`Test Transform > should transform to text containers when label provide
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": null,
  "containerId": "id15",
  "fillStyle": "solid",
@@ -1913,7 +1897,6 @@ exports[`Test Transform > should transform to text containers when label provide
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": null,
  "containerId": "id16",
  "fillStyle": "solid",
@@ -1953,7 +1936,6 @@ exports[`Test Transform > should transform to text containers when label provide
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": null,
  "containerId": "id17",
  "fillStyle": "solid",
@@ -1994,7 +1976,6 @@ exports[`Test Transform > should transform to text containers when label provide
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": null,
  "containerId": "id18",
  "fillStyle": "solid",
--- a/packages/excalidraw/data/filename.ts
+++ b/packages/excalidraw/data/filename.ts
@@ -1,11 +0,0 @@
-import { EDITOR_LS_KEYS } from "../constants";
-import { t } from "../i18n";
-import { getDateTime } from "../utils";
-import { EditorLocalStorage } from "./EditorLocalStorage";
-
-export const getFileName = () => {
-  return (
-    EditorLocalStorage.get<string>(EDITOR_LS_KEYS.EXCALIDRAW_FILE_NAME) ||
-    `${t("labels.untitled")}-${getDateTime()}`
-  );
-};
--- a/packages/excalidraw/data/json.ts
+++ b/packages/excalidraw/data/json.ts
@@ -71,7 +71,6 @@ export const saveAsJSON = async (
  elements: readonly ExcalidrawElement[],
  appState: AppState,
  files: BinaryFiles,
-  name: string,
 ) => {
  const serialized = serializeAsJSON(elements, appState, files, "local");
  const blob = new Blob([serialized], {
@@ -79,7 +78,7 @@ export const saveAsJSON = async (
  });

  const fileHandle = await fileSave(blob, {
-    name,
+    name: appState.name,
    extension: "excalidraw",
    description: "Excalidraw file",
    fileHandle: isImageFileHandle(appState.fileHandle)
--- a/packages/excalidraw/data/resave.ts
+++ b/packages/excalidraw/data/resave.ts
@@ -7,9 +7,8 @@ export const resaveAsImageWithScene = async (
  elements: readonly ExcalidrawElement[],
  appState: AppState,
  files: BinaryFiles,
-  name: string,
 ) => {
-  const { exportBackground, viewBackgroundColor, fileHandle } = appState;
+  const { exportBackground, viewBackgroundColor, name, fileHandle } = appState;

  const fileHandleType = getFileHandleType(fileHandle);

--- a/packages/excalidraw/data/restore.ts
+++ b/packages/excalidraw/data/restore.ts
@@ -35,14 +35,13 @@ import {
 import { getDefaultAppState } from "../appState";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { bumpVersion } from "../element/mutateElement";
-import { getFontString, getUpdatedTimestamp, updateActiveTool } from "../utils";
+import { getUpdatedTimestamp, updateActiveTool } from "../utils";
 import { arrayToMap } from "../utils";
 import { MarkOptional, Mutable } from "../utility-types";
 import {
  detectLineHeight,
  getContainerElement,
  getDefaultLineHeight,
-  measureBaseline,
 } from "../element/textElement";
 import { normalizeLink } from "./url";

@@ -207,11 +206,6 @@ const restoreElement = (
          : // no element height likely means programmatic use, so default
            // to a fixed line height
            getDefaultLineHeight(element.fontFamily));
-      const baseline = measureBaseline(
-        element.text,
-        getFontString(element),
-        lineHeight,
-      );
      element = restoreElementWithProperties(element, {
        fontSize,
        fontFamily,
@@ -222,7 +216,6 @@ const restoreElement = (
        originalText: element.originalText || text,

        lineHeight,
-        baseline,
      });

      // if empty text, mark as deleted. We keep in array
--- a/packages/excalidraw/element/newElement.ts
+++ b/packages/excalidraw/element/newElement.ts
@@ -246,7 +246,6 @@ export const newTextElement = (
      y: opts.y - offsets.y,
      width: metrics.width,
      height: metrics.height,
-      baseline: metrics.baseline,
      containerId: opts.containerId || null,
      originalText: text,
      lineHeight,
@@ -264,13 +263,12 @@ const getAdjustedDimensions = (
  y: number;
  width: number;
  height: number;
-  baseline: number;
 } => {
-  const {
-    width: nextWidth,
-    height: nextHeight,
-    baseline: nextBaseline,
-  } = measureText(nextText, getFontString(element), element.lineHeight);
+  const { width: nextWidth, height: nextHeight } = measureText(
+    nextText,
+    getFontString(element),
+    element.lineHeight,
+  );
  const { textAlign, verticalAlign } = element;
  let x: number;
  let y: number;
@@ -324,7 +322,6 @@ const getAdjustedDimensions = (
  return {
    width: nextWidth,
    height: nextHeight,
-    baseline: nextBaseline,
    x: Number.isFinite(x) ? x : element.x,
    y: Number.isFinite(y) ? y : element.y,
  };
--- a/packages/excalidraw/element/resizeElements.ts
+++ b/packages/excalidraw/element/resizeElements.ts
@@ -52,8 +52,6 @@ import {
  handleBindTextResize,
  getBoundTextMaxWidth,
  getApproxMinLineHeight,
-  measureText,
-  getBoundTextMaxHeight,
 } from "./textElement";
 import { LinearElementEditor } from "./linearElementEditor";

@@ -211,8 +209,7 @@ const measureFontSizeFromWidth = (
  element: NonDeleted<ExcalidrawTextElement>,
  elementsMap: ElementsMap,
  nextWidth: number,
-  nextHeight: number,
-): { size: number; baseline: number } | null => {
+): { size: number } | null => {
  // We only use width to scale font on resize
  let width = element.width;

@@ -227,14 +224,9 @@ const measureFontSizeFromWidth = (
  if (nextFontSize < MIN_FONT_SIZE) {
    return null;
  }
-  const metrics = measureText(
-    element.text,
-    getFontString({ fontSize: nextFontSize, fontFamily: element.fontFamily }),
-    element.lineHeight,
-  );
+
  return {
    size: nextFontSize,
-    baseline: metrics.baseline + (nextHeight - metrics.height),
  };
 };

@@ -307,12 +299,7 @@ const resizeSingleTextElement = (
  if (scale > 0) {
    const nextWidth = element.width * scale;
    const nextHeight = element.height * scale;
-    const metrics = measureFontSizeFromWidth(
-      element,
-      elementsMap,
-      nextWidth,
-      nextHeight,
-    );
+    const metrics = measureFontSizeFromWidth(element, elementsMap, nextWidth);
    if (metrics === null) {
      return;
    }
@@ -340,7 +327,6 @@ const resizeSingleTextElement = (
      fontSize: metrics.size,
      width: nextWidth,
      height: nextHeight,
-      baseline: metrics.baseline,
      x: nextElementX,
      y: nextElementY,
    });
@@ -394,7 +380,7 @@ export const resizeSingleElement = (
  let scaleX = atStartBoundsWidth / boundsCurrentWidth;
  let scaleY = atStartBoundsHeight / boundsCurrentHeight;

-  let boundTextFont: { fontSize?: number; baseline?: number } = {};
+  let boundTextFont: { fontSize?: number } = {};
  const boundTextElement = getBoundTextElement(element, elementsMap);

  if (transformHandleDirection.includes("e")) {
@@ -446,7 +432,6 @@ export const resizeSingleElement = (
    if (stateOfBoundTextElementAtResize) {
      boundTextFont = {
        fontSize: stateOfBoundTextElementAtResize.fontSize,
-        baseline: stateOfBoundTextElementAtResize.baseline,
      };
    }
    if (shouldMaintainAspectRatio) {
@@ -460,14 +445,12 @@ export const resizeSingleElement = (
        boundTextElement,
        elementsMap,
        getBoundTextMaxWidth(updatedElement, boundTextElement),
-        getBoundTextMaxHeight(updatedElement, boundTextElement),
      );
      if (nextFont === null) {
        return;
      }
      boundTextFont = {
        fontSize: nextFont.size,
-        baseline: nextFont.baseline,
      };
    } else {
      const minWidth = getApproxMinLineWidth(
@@ -636,7 +619,6 @@ export const resizeSingleElement = (
    if (boundTextElement && boundTextFont != null) {
      mutateElement(boundTextElement, {
        fontSize: boundTextFont.fontSize,
-        baseline: boundTextFont.baseline,
      });
    }
    handleBindTextResize(
@@ -763,7 +745,6 @@ export const resizeMultipleElements = (
    > & {
      points?: ExcalidrawLinearElement["points"];
      fontSize?: ExcalidrawTextElement["fontSize"];
-      baseline?: ExcalidrawTextElement["baseline"];
      scale?: ExcalidrawImageElement["scale"];
      boundTextFontSize?: ExcalidrawTextElement["fontSize"];
    };
@@ -838,17 +819,11 @@ export const resizeMultipleElements = (
    }

    if (isTextElement(orig)) {
-      const metrics = measureFontSizeFromWidth(
-        orig,
-        elementsMap,
-        width,
-        height,
-      );
+      const metrics = measureFontSizeFromWidth(orig, elementsMap, width);
      if (!metrics) {
        return;
      }
      update.fontSize = metrics.size;
-      update.baseline = metrics.baseline;
    }

    const boundTextElement = originalElements.get(
--- a/packages/excalidraw/element/textElement.ts
+++ b/packages/excalidraw/element/textElement.ts
@@ -18,7 +18,6 @@ import {
  DEFAULT_FONT_FAMILY,
  DEFAULT_FONT_SIZE,
  FONT_FAMILY,
-  isSafari,
  TEXT_ALIGN,
  VERTICAL_ALIGN,
 } from "../constants";
@@ -61,7 +60,6 @@ export const redrawTextBoundingBox = (
    text: textElement.text,
    width: textElement.width,
    height: textElement.height,
-    baseline: textElement.baseline,
  };

  boundTextUpdates.text = textElement.text;
@@ -82,7 +80,6 @@ export const redrawTextBoundingBox = (

  boundTextUpdates.width = metrics.width;
  boundTextUpdates.height = metrics.height;
-  boundTextUpdates.baseline = metrics.baseline;

  if (container) {
    const maxContainerHeight = getBoundTextMaxHeight(
@@ -183,7 +180,6 @@ export const handleBindTextResize = (
    const maxWidth = getBoundTextMaxWidth(container, textElement);
    const maxHeight = getBoundTextMaxHeight(container, textElement);
    let containerHeight = container.height;
-    let nextBaseLine = textElement.baseline;
    if (
      shouldMaintainAspectRatio ||
      (transformHandleType !== "n" && transformHandleType !== "s")
@@ -202,7 +198,6 @@ export const handleBindTextResize = (
      );
      nextHeight = metrics.height;
      nextWidth = metrics.width;
-      nextBaseLine = metrics.baseline;
    }
    // increase height in case text element height exceeds
    if (nextHeight > maxHeight) {
@@ -230,7 +225,6 @@ export const handleBindTextResize = (
      text,
      width: nextWidth,
      height: nextHeight,
-      baseline: nextBaseLine,
    });

    if (!isArrowElement(container)) {
@@ -294,59 +288,7 @@ export const measureText = (
  const fontSize = parseFloat(font);
  const height = getTextHeight(text, fontSize, lineHeight);
  const width = getTextWidth(text, font);
-  const baseline = measureBaseline(text, font, lineHeight);
-  return { width, height, baseline };
-};
-
-export const measureBaseline = (
-  text: string,
-  font: FontString,
-  lineHeight: ExcalidrawTextElement["lineHeight"],
-  wrapInContainer?: boolean,
-) => {
-  const container = document.createElement("div");
-  container.style.position = "absolute";
-  container.style.whiteSpace = "pre";
-  container.style.font = font;
-  container.style.minHeight = "1em";
-  if (wrapInContainer) {
-    container.style.overflow = "hidden";
-    container.style.wordBreak = "break-word";
-    container.style.whiteSpace = "pre-wrap";
-  }
-
-  container.style.lineHeight = String(lineHeight);
-
-  container.innerText = text;
-
-  // Baseline is important for positioning text on canvas
-  document.body.appendChild(container);
-
-  const span = document.createElement("span");
-  span.style.display = "inline-block";
-  span.style.overflow = "hidden";
-  span.style.width = "1px";
-  span.style.height = "1px";
-  container.appendChild(span);
-  let baseline = span.offsetTop + span.offsetHeight;
-  const height = container.offsetHeight;
-
-  if (isSafari) {
-    const canvasHeight = getTextHeight(text, parseFloat(font), lineHeight);
-    const fontSize = parseFloat(font);
-    // In Safari the font size gets rounded off when rendering hence calculating the safari height and shifting the baseline if it differs
-    // from the actual canvas height
-    const domHeight = getTextHeight(text, Math.round(fontSize), lineHeight);
-    if (canvasHeight > height) {
-      baseline += canvasHeight - domHeight;
-    }
-
-    if (height > canvasHeight) {
-      baseline -= domHeight - canvasHeight;
-    }
-  }
-  document.body.removeChild(container);
-  return baseline;
+  return { width, height };
 };

 /**
--- a/packages/excalidraw/element/types.ts
+++ b/packages/excalidraw/element/types.ts
@@ -176,7 +176,6 @@ export type ExcalidrawTextElement = _ExcalidrawElementBase &
    fontSize: number;
    fontFamily: FontFamilyValues;
    text: string;
-    baseline: number;
    textAlign: TextAlign;
    verticalAlign: VerticalAlign;
    containerId: ExcalidrawGenericElement["id"] | null;
--- a/packages/excalidraw/history.ts
+++ b/packages/excalidraw/history.ts
@@ -26,6 +26,7 @@ const clearAppStatePropertiesForHistory = (appState: AppState) => {
    viewBackgroundColor: appState.viewBackgroundColor,
    editingLinearElement: appState.editingLinearElement,
    editingGroupId: appState.editingGroupId,
+    name: appState.name,
  };
 };

--- a/packages/excalidraw/renderer/renderElement.ts
+++ b/packages/excalidraw/renderer/renderElement.ts
@@ -395,12 +395,24 @@ const drawElementOnCanvas = (
          element.fontSize,
          element.lineHeight,
        );
-        const verticalOffset = element.height - element.baseline;
+
+        const metrics = context.measureText(element.text);
+        const lineGap =
+          lineHeightPx -
+          (metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent);
+        /**
+         * Set a vertical offset to be aligned with <textarea>.
+         * - `fontBoundingBoxAscent` is here the font bouding box with its default line-height used in textareas
+         * - half of the line gap is the additional padding above and below the bounding box when line-height isn't equal to the default value
+         * - for details check - https://codesandbox.io/p/devbox/v4nsqz?file=%2Fsrc%2Findex.js%3A1%2C1-166%2C1
+         */
+        context.translate(0, metrics.fontBoundingBoxAscent + lineGap / 2);
+
        for (let index = 0; index < lines.length; index++) {
          context.fillText(
            lines[index],
            horizontalOffset,
-            (index + 1) * lineHeightPx - verticalOffset,
+            index * lineHeightPx,
          );
        }
        context.restore();
--- a/packages/excalidraw/tests/snapshots/contextmenu.test.tsx.snap
+++ b/packages/excalidraw/tests/snapshots/contextmenu.test.tsx.snap
@@ -328,6 +328,7 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
  "isRotating": false,
  "lastPointerDownWith": "mouse",
  "multiElement": null,
+  "name": "Untitled-201933152653",
  "objectsSnapModeEnabled": false,
  "offsetLeft": 20,
  "offsetTop": 10,
@@ -458,6 +459,7 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {},
        "selectedGroupIds": {},
        "viewBackgroundColor": "#ffffff",
@@ -527,6 +529,7 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
  "isRotating": false,
  "lastPointerDownWith": "mouse",
  "multiElement": null,
+  "name": "Untitled-201933152653",
  "objectsSnapModeEnabled": false,
  "offsetLeft": 20,
  "offsetTop": 10,
@@ -617,6 +620,7 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {},
        "selectedGroupIds": {},
        "viewBackgroundColor": "#ffffff",
@@ -627,6 +631,7 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id0": true,
        },
@@ -728,6 +733,7 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
  "isRotating": false,
  "lastPointerDownWith": "mouse",
  "multiElement": null,
+  "name": "Untitled-201933152653",
  "objectsSnapModeEnabled": false,
  "offsetLeft": 20,
  "offsetTop": 10,
@@ -848,6 +854,7 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {},
        "selectedGroupIds": {},
        "viewBackgroundColor": "#ffffff",
@@ -858,6 +865,7 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id0": true,
        },
@@ -900,6 +908,7 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id1": true,
        },
@@ -971,6 +980,7 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id0": true,
        },
@@ -1101,6 +1111,7 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
  "isRotating": false,
  "lastPointerDownWith": "mouse",
  "multiElement": null,
+  "name": "Untitled-201933152653",
  "objectsSnapModeEnabled": false,
  "offsetLeft": 20,
  "offsetTop": 10,
@@ -1221,6 +1232,7 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {},
        "selectedGroupIds": {},
        "viewBackgroundColor": "#ffffff",
@@ -1231,6 +1243,7 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id0": true,
        },
@@ -1273,6 +1286,7 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id1": true,
        },
@@ -1344,6 +1358,7 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id0": true,
        },
@@ -1474,6 +1489,7 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
  "isRotating": false,
  "lastPointerDownWith": "mouse",
  "multiElement": null,
+  "name": "Untitled-201933152653",
  "objectsSnapModeEnabled": false,
  "offsetLeft": 20,
  "offsetTop": 10,
@@ -1564,6 +1580,7 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {},
        "selectedGroupIds": {},
        "viewBackgroundColor": "#ffffff",
@@ -1574,6 +1591,7 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id0": true,
        },
@@ -1675,6 +1693,7 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
  "isRotating": false,
  "lastPointerDownWith": "mouse",
  "multiElement": null,
+  "name": "Untitled-201933152653",
  "objectsSnapModeEnabled": false,
  "offsetLeft": 20,
  "offsetTop": 10,
@@ -1761,6 +1780,7 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {},
        "selectedGroupIds": {},
        "viewBackgroundColor": "#ffffff",
@@ -1771,6 +1791,7 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id0": true,
        },
@@ -1813,6 +1834,7 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {},
        "selectedGroupIds": {},
        "viewBackgroundColor": "#ffffff",
@@ -1912,6 +1934,7 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
  "isRotating": false,
  "lastPointerDownWith": "mouse",
  "multiElement": null,
+  "name": "Untitled-201933152653",
  "objectsSnapModeEnabled": false,
  "offsetLeft": 20,
  "offsetTop": 10,
@@ -2032,6 +2055,7 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {},
        "selectedGroupIds": {},
        "viewBackgroundColor": "#ffffff",
@@ -2042,6 +2066,7 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id0": true,
        },
@@ -2084,6 +2109,7 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id0_copy": true,
        },
@@ -2214,6 +2240,7 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
  "isRotating": false,
  "lastPointerDownWith": "mouse",
  "multiElement": null,
+  "name": "Untitled-201933152653",
  "objectsSnapModeEnabled": false,
  "offsetLeft": 20,
  "offsetTop": 10,
@@ -2343,6 +2370,7 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {},
        "selectedGroupIds": {},
        "viewBackgroundColor": "#ffffff",
@@ -2353,6 +2381,7 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id0": true,
        },
@@ -2395,6 +2424,7 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id1": true,
        },
@@ -2466,6 +2496,7 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id0": true,
          "id1": true,
@@ -2603,6 +2634,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
  "isRotating": false,
  "lastPointerDownWith": "mouse",
  "multiElement": null,
+  "name": "Untitled-201933152653",
  "objectsSnapModeEnabled": false,
  "offsetLeft": 20,
  "offsetTop": 10,
@@ -2725,6 +2757,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {},
        "selectedGroupIds": {},
        "viewBackgroundColor": "#ffffff",
@@ -2735,6 +2768,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id0": true,
        },
@@ -2777,6 +2811,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id1": true,
        },
@@ -2848,6 +2883,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id1": true,
        },
@@ -2919,6 +2955,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id1": true,
        },
@@ -2990,6 +3027,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id1": true,
        },
@@ -3061,6 +3099,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id1": true,
        },
@@ -3132,6 +3171,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id1": true,
        },
@@ -3203,6 +3243,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id1": true,
        },
@@ -3274,6 +3315,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id0": true,
        },
@@ -3404,6 +3446,7 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
  "isRotating": false,
  "lastPointerDownWith": "mouse",
  "multiElement": null,
+  "name": "Untitled-201933152653",
  "objectsSnapModeEnabled": false,
  "offsetLeft": 20,
  "offsetTop": 10,
@@ -3524,6 +3567,7 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {},
        "selectedGroupIds": {},
        "viewBackgroundColor": "#ffffff",
@@ -3534,6 +3578,7 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id0": true,
        },
@@ -3576,6 +3621,7 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id1": true,
        },
@@ -3647,6 +3693,7 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id1": true,
        },
@@ -3777,6 +3824,7 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
  "isRotating": false,
  "lastPointerDownWith": "mouse",
  "multiElement": null,
+  "name": "Untitled-201933152653",
  "objectsSnapModeEnabled": false,
  "offsetLeft": 20,
  "offsetTop": 10,
@@ -3897,6 +3945,7 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {},
        "selectedGroupIds": {},
        "viewBackgroundColor": "#ffffff",
@@ -3907,6 +3956,7 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id0": true,
        },
@@ -3949,6 +3999,7 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id1": true,
        },
@@ -4020,6 +4071,7 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id1": true,
        },
@@ -4150,6 +4202,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
  "isRotating": false,
  "lastPointerDownWith": "mouse",
  "multiElement": null,
+  "name": "Untitled-201933152653",
  "objectsSnapModeEnabled": false,
  "offsetLeft": 20,
  "offsetTop": 10,
@@ -4273,6 +4326,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {},
        "selectedGroupIds": {},
        "viewBackgroundColor": "#ffffff",
@@ -4283,6 +4337,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id0": true,
        },
@@ -4325,6 +4380,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id1": true,
        },
@@ -4396,6 +4452,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id0": true,
          "id1": true,
@@ -4474,6 +4531,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id0": true,
          "id1": true,
@@ -4878,6 +4936,7 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
  "isRotating": false,
  "lastPointerDownWith": "mouse",
  "multiElement": null,
+  "name": "Untitled-201933152653",
  "objectsSnapModeEnabled": false,
  "offsetLeft": 20,
  "offsetTop": 10,
@@ -5001,6 +5060,7 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {},
        "selectedGroupIds": {},
        "viewBackgroundColor": "#ffffff",
@@ -5011,6 +5071,7 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id0": true,
        },
@@ -5053,6 +5114,7 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id1": true,
        },
@@ -5456,6 +5518,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
  "isRotating": false,
  "lastPointerDownWith": "mouse",
  "multiElement": null,
+  "name": "Untitled-201933152653",
  "objectsSnapModeEnabled": false,
  "offsetLeft": 20,
  "offsetTop": 10,
@@ -5585,6 +5648,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {},
        "selectedGroupIds": {},
        "viewBackgroundColor": "#ffffff",
@@ -5595,6 +5659,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id0": true,
        },
@@ -5637,6 +5702,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id1": true,
        },
@@ -5708,6 +5774,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id0": true,
          "id1": true,
@@ -5972,6 +6039,7 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
  "isRotating": false,
  "lastPointerDownWith": "mouse",
  "multiElement": null,
+  "name": "Untitled-201933152653",
  "objectsSnapModeEnabled": false,
  "offsetLeft": 20,
  "offsetTop": 10,
@@ -6029,6 +6097,7 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] his
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {},
        "selectedGroupIds": {},
        "viewBackgroundColor": "#ffffff",
@@ -6371,6 +6440,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
  "isRotating": false,
  "lastPointerDownWith": "mouse",
  "multiElement": null,
+  "name": "Untitled-201933152653",
  "objectsSnapModeEnabled": false,
  "offsetLeft": 20,
  "offsetTop": 10,
@@ -6746,6 +6816,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
  "isRotating": false,
  "lastPointerDownWith": "mouse",
  "multiElement": null,
+  "name": "Untitled-201933152653",
  "objectsSnapModeEnabled": false,
  "offsetLeft": 20,
  "offsetTop": 10,
@@ -6901,6 +6972,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] hi
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {},
        "selectedGroupIds": {},
        "viewBackgroundColor": "#ffffff",
@@ -6911,6 +6983,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] hi
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {
          "id0": true,
        },
@@ -6962,6 +7035,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] hi
      "appState": {
        "editingGroupId": null,
        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
        "selectedElementIds": {},
        "selectedGroupIds": {},
        "viewBackgroundColor": "#ffffff",
--- a/packages/excalidraw/tests/snapshots/regressionTests.test.tsx.snap
+++ b/packages/excalidraw/tests/snapshots/regressionTests.test.tsx.snap
--- a/packages/excalidraw/tests/data/snapshots/restore.test.ts.snap
+++ b/packages/excalidraw/tests/data/snapshots/restore.test.ts.snap
@@ -289,7 +289,6 @@ exports[`restoreElements > should restore text element correctly passing value f
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": [],
  "containerId": null,
  "fillStyle": "solid",
@@ -330,7 +329,6 @@ exports[`restoreElements > should restore text element correctly with unknown fo
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": [],
  "containerId": null,
  "fillStyle": "solid",
--- a/packages/excalidraw/tests/data/restore.test.ts
+++ b/packages/excalidraw/tests/data/restore.test.ts
@@ -306,10 +306,12 @@ describe("restoreAppState", () => {
    const stubImportedAppState = getDefaultAppState();
    stubImportedAppState.activeTool.type = "selection";
    stubImportedAppState.cursorButton = "down";
+    stubImportedAppState.name = "imported app state";

    const stubLocalAppState = getDefaultAppState();
    stubLocalAppState.activeTool.type = "rectangle";
    stubLocalAppState.cursorButton = "up";
+    stubLocalAppState.name = "local app state";

    const restoredAppState = restore.restoreAppState(
      stubImportedAppState,
@@ -319,6 +321,7 @@ describe("restoreAppState", () => {
      stubImportedAppState.activeTool,
    );
    expect(restoredAppState.cursorButton).toBe("up");
+    expect(restoredAppState.name).toBe(stubImportedAppState.name);
  });

  it("should restore with current app state when imported data state is undefined", () => {
@@ -330,31 +333,37 @@ describe("restoreAppState", () => {

    const stubLocalAppState = getDefaultAppState();
    stubLocalAppState.cursorButton = "down";
+    stubLocalAppState.name = "local app state";

    const restoredAppState = restore.restoreAppState(
      stubImportedAppState,
      stubLocalAppState,
    );
    expect(restoredAppState.cursorButton).toBe(stubLocalAppState.cursorButton);
+    expect(restoredAppState.name).toBe(stubLocalAppState.name);
  });

  it("should return imported data when local app state is null", () => {
    const stubImportedAppState = getDefaultAppState();
    stubImportedAppState.cursorButton = "down";
+    stubImportedAppState.name = "imported app state";

    const restoredAppState = restore.restoreAppState(
      stubImportedAppState,
      null,
    );
    expect(restoredAppState.cursorButton).toBe("up");
+    expect(restoredAppState.name).toBe(stubImportedAppState.name);
  });

  it("should return local app state when imported data state is null", () => {
    const stubLocalAppState = getDefaultAppState();
    stubLocalAppState.cursorButton = "down";
+    stubLocalAppState.name = "local app state";

    const restoredAppState = restore.restoreAppState(null, stubLocalAppState);
    expect(restoredAppState.cursorButton).toBe(stubLocalAppState.cursorButton);
+    expect(restoredAppState.name).toBe(stubLocalAppState.name);
  });

  it("should return default app state when imported data state and local app state are undefined", () => {
@@ -483,11 +492,13 @@ describe("restore", () => {
  it("when imported data state is null it should return the local app state property", () => {
    const stubLocalAppState = getDefaultAppState();
    stubLocalAppState.cursorButton = "down";
+    stubLocalAppState.name = "local app state";

    const restoredData = restore.restore(null, stubLocalAppState, null);
    expect(restoredData.appState.cursorButton).toBe(
      stubLocalAppState.cursorButton,
    );
+    expect(restoredData.appState.name).toBe(stubLocalAppState.name);
  });

  it("when imported data state has elements", () => {
@@ -511,12 +522,14 @@ describe("restore", () => {
  it("when local app state is null but imported app state is supplied", () => {
    const stubImportedAppState = getDefaultAppState();
    stubImportedAppState.cursorButton = "down";
+    stubImportedAppState.name = "imported app state";

    const importedDataState = {} as ImportedDataState;
    importedDataState.appState = stubImportedAppState;

    const restoredData = restore.restore(importedDataState, null, null);
    expect(restoredData.appState.cursorButton).toBe("up");
+    expect(restoredData.appState.name).toBe(stubImportedAppState.name);
  });

  it("bump versions of local duplicate elements when supplied", () => {
--- a/packages/excalidraw/types.ts
+++ b/packages/excalidraw/types.ts
@@ -247,6 +247,7 @@ export interface AppState {
  scrollY: number;
  cursorButton: "up" | "down";
  scrolledOutside: boolean;
+  name: string;
  isResizing: boolean;
  isRotating: boolean;
  zoom: Zoom;
Author	SHA1	Message	Date
Marcel Mraz	f16967fc52	Lint fix, comment fix	2024-02-08 10:05:58 +01:00
Marcel Mraz	8a06b70588	Vertical offset based on the canvas text metrics	2024-02-07 22:36:23 +01:00
Marcel Mraz	c31cbe646d	deprecate baseline	2024-02-07 21:45:24 +01:00