Merge branch 'master' of github.com:excalidraw/excalidraw into arnost/export-image-background

.env.development

@@ -10,6 +10,9 @@ VITE_APP_WS_SERVER_URL=http://localhost:3002
 # set this only if using the collaboration workflow we use on excalidraw.com
 VITE_APP_PORTAL_URL=
 
+VITE_APP_PLUS_LP=https://plus.excalidraw.com
+VITE_APP_PLUS_APP=https://app.excalidraw.com
+
 VITE_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8","authDomain":"excalidraw-oss-dev.firebaseapp.com","projectId":"excalidraw-oss-dev","storageBucket":"excalidraw-oss-dev.appspot.com","messagingSenderId":"664559512677","appId":"1:664559512677:web:a385181f2928d328a7aa8c"}'
 
 # put these in your .env.local, or make sure you don't commit!

.env.production

@@ -5,11 +5,14 @@ VITE_APP_LIBRARY_URL=https://libraries.excalidraw.com
 VITE_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries
 
 VITE_APP_PORTAL_URL=https://portal.excalidraw.com
+
+VITE_APP_PLUS_LP=https://plus.excalidraw.com
+VITE_APP_PLUS_APP=https://app.excalidraw.com
+
 # Fill to set socket server URL used for collaboration.
 # Meant for forks only: excalidraw.com uses custom VITE_APP_PORTAL_URL flow
 VITE_APP_WS_SERVER_URL=
 
 VITE_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyAd15pYlMci_xIp9ko6wkEsDzAAA0Dn0RU","authDomain":"excalidraw-room-persistence.firebaseapp.com","databaseURL":"https://excalidraw-room-persistence.firebaseio.com","projectId":"excalidraw-room-persistence","storageBucket":"excalidraw-room-persistence.appspot.com","messagingSenderId":"654800341332","appId":"1:654800341332:web:4a692de832b55bd57ce0c1"}'
 
-VITE_APP_PLUS_APP=https://app.excalidraw.com
 VITE_APP_DISABLE_TRACKING=

README.md

@@ -1,7 +1,7 @@
 <a href="https://excalidraw.com/" target="_blank" rel="noopener">
   <picture>
-    <source media="(prefers-color-scheme: dark)" alt="Excalidraw" srcset="https://excalidraw.nyc3.cdn.digitaloceanspaces.com/github%2FExcalidraw_Github_cover_dark.png" />
-    <img alt="Excalidraw" src="https://excalidraw.nyc3.cdn.digitaloceanspaces.com/github%2FExcalidraw_Github_cover.png" />
+    <source media="(prefers-color-scheme: dark)" alt="Excalidraw" srcset="https://excalidraw.nyc3.cdn.digitaloceanspaces.com/github/excalidraw_github_cover_2_dark.png" />
+    <img alt="Excalidraw" src="https://excalidraw.nyc3.cdn.digitaloceanspaces.com/github/excalidraw_github_cover_2.png" />
   </picture>
 </a>
 

dev-docs/docs/@excalidraw/excalidraw/api/children-components/children-components-intro.mdx

@@ -17,5 +17,6 @@ Below are the currently supported components:
 
 - [MainMenu](/docs/@excalidraw/excalidraw/api/children-components/main-menu)
 - [WelcomeScreen](/docs/@excalidraw/excalidraw/api/children-components/welcome-screen)
+- [Sidebar](/docs/@excalidraw/excalidraw/api/children-components/sidebar)
 - [Footer](/docs/@excalidraw/excalidraw/api/children-components/footer)
 - [LiveCollaborationTrigger](/docs/@excalidraw/excalidraw/api/children-components/live-collaboration-trigger)

dev-docs/docs/@excalidraw/excalidraw/api/children-components/sidebar.mdx

@@ -0,0 +1,129 @@
+# Sidebar
+
+The editor comes with a default sidebar on the right in LTR (Left to Right) mode which contains the library. You can also add your own custom sidebar(s) by rendering this component as a child of `<Excalidraw>`.
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `name` | `string` | Yes | Sidebar name that uniquely identifies it. |
+| `children` | `React.ReactNode` | Yes | Content you want to render inside the sidebar. |
+| `onStateChange` | `(state: AppState["openSidebar"]) => void` | No | Invoked on open/close or tab change. No need to act on this event, as the editor manages the sidebar open state on its own. |
+| `onDock` | `(docked: boolean) => void` | No | Invoked when the user toggles the `dock` button. Passed the current docked state. |
+| `docked` | `boolean` | No | Indicates whether the sidebar is `docked`. By default, the sidebar is `undocked`. If passed, the docking becomes controlled. |
+| `className` | `string` | No |  |
+| `style` | `React.CSSProperties` | No |  |
+
+At minimum, each sidebar needs to have a unique `name` prop, and render some content inside it, which can be either composed from the exported sidebar sub-components, or custom elements.
+
+Unless `docked={true}` is passed, the sidebar will close when the user clicks outside of it. It can also be closed using the close button in the header, if you render the `<Sidebar.Header>` component.
+
+Further, if the sidebader doesn't comfortably fit in the editor, it won't be dockable. To decide the breakpoint for docking you can use [UIOptions.dockedSidebarBreakpoint](/docs/@excalidraw/excalidraw/api/props/ui-options#dockedsidebarbreakpoint).
+
+To make your sidebar user-dockable, you need to supply `props.docked` (current docked state) alongside `props.onDock` callback (to listen for and handle docked state changes). The component doesn't track local state for the `docked` prop, so you need to manage it yourself.
+
+## Sidebar.Header
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `children` | `React.ReactNode` | No | Content you want to render inside the sidebar header next to the `close` / `dock` buttons. |
+| `className` | `string` | No |  |
+
+Renders a sidebar header which contains a close button, and a dock button (when applicable). You can also render custom content in addition.
+
+Can be nested inside specific tabs, or rendered as direct child of `<Sidebar>` for the whole sidebar component.
+
+## Sidebar.Tabs
+
+| Prop       | Type              | Required | Description                    |
+| ---------- | ----------------- | -------- | ------------------------------ |
+| `children` | `React.ReactNode` | No       | Container for individual tabs. |
+
+Sidebar may contain inner tabs. Each `<Sidebar.Tab>` must be rendered inside this `<Sidebar.Tabs>` container component.
+
+## Sidebar.Tab
+
+| Prop       | Type              | Required | Description      |
+| ---------- | ----------------- | -------- | ---------------- |
+| `tab`      | `string`          | Yes      | Unique tab name. |
+| `children` | `React.ReactNode` | No       | Tab content.     |
+
+Content of a given sidebar tab. It must be rendered inside `<Sidebar.Tabs>`.
+
+## Sidebar.TabTriggers
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `children` | `React.ReactNode` | No | Container for individual tab triggers. |
+
+Container component for tab trigger buttons to switch between tabs.
+
+## Sidebar.TabTrigger
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `tab` | `string` | Yes | Tab name to toggle. |
+| `children` | `React.ReactNode` | No | Tab trigger content, such as a label. |
+
+A given tab trigger button that switches to a given sidebar tab. It must be rendered inside `<Sidebar.TabTriggers>`.
+
+## Sidebar.Trigger
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `name` | `string` | Yes | Sidebar name the trigger will control. |
+| `tab` | `string` | No | Optional tab to open. |
+| `onToggle` | `(open: boolean) => void` | No | Callback invoked on toggle. |
+| `title` | `string` | No | A11y title. |
+| `children` | `React.ReactNode` | No | Content (usually label) you want to render inside the button. |
+| `icon` | `JSX.Element` | No | Trigger icon if any. |
+| `className` | `string` | No |  |
+| `style` | `React.CSSProperties` | No |  |
+
+You can use the [`ref.toggleSidebar({ name: "custom" })`](/docs/@excalidraw/excalidraw/api/props/ref#toggleSidebar) api to control the sidebar, but we export a trigger button to make UI use cases easier.
+
+## Example
+
+```tsx live
+function App() {
+  const [docked, setDocked] = useState(false);
+
+  return (
+    <div style={{ height: "580px" }}>
+      <Excalidraw
+        UIOptions={{
+          // this effectively makes the sidebar dockable on any screen size,
+          // ignoring if it fits or not
+          dockedSidebarBreakpoint: 0,
+        }}
+      >
+        <Sidebar name="custom" docked={docked} onDock={setDocked}>
+          <Sidebar.Header />
+          <Sidebar.Tabs style={{ padding: "0.5rem" }}>
+            <Sidebar.Tab tab="one">Tab one!</Sidebar.Tab>
+            <Sidebar.Tab tab="two">Tab two!</Sidebar.Tab>
+            <Sidebar.TabTriggers>
+              <Sidebar.TabTrigger tab="one">One</Sidebar.TabTrigger>
+              <Sidebar.TabTrigger tab="two">Two</Sidebar.TabTrigger>
+            </Sidebar.TabTriggers>
+          </Sidebar.Tabs>
+        </Sidebar>
+
+        <Footer>
+          <Sidebar.Trigger
+            name="custom"
+            tab="one"
+            style={{
+              marginLeft: "0.5rem",
+              background: "#70b1ec",
+              color: "white",
+            }}
+          >
+            Toggle Custom Sidebar
+          </Sidebar.Trigger>
+        </Footer>
+      </Excalidraw>
+    </div>
+  );
+}
+```

dev-docs/docs/@excalidraw/excalidraw/api/excalidraw-element-skeleton.mdx

@@ -0,0 +1,429 @@
+# Creating Elements programmatically
+
+We support a simplified API to make it easier to generate Excalidraw elements programmatically. This API is in beta and subject to change before stable. You can check the [PR](https://github.com/excalidraw/excalidraw/pull/6546) for more details.
+
+For this purpose we introduced a new type [`ExcalidrawElementSkeleton`](https://github.com/excalidraw/excalidraw/blob/master/src/data/transform.ts#L133). This is the simplified version of [`ExcalidrawElement`](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L134) type with the minimum possible attributes so that creating elements programmatically is much easier (especially for cases like binding arrows or creating text containers).
+
+The [`ExcalidrawElementSkeleton`](https://github.com/excalidraw/excalidraw/blob/master/src/data/transform.ts#L133) can be converted to fully qualified Excalidraw elements by using [`convertToExcalidrawElements`](/docs/@excalidraw/excalidraw/api/excalidraw-element-skeleton#converttoexcalidrawelements).
+
+## convertToExcalidrawElements
+
+**_Signature_**
+
+<pre>
+  convertToExcalidrawElements(elements:{" "}
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/data/transform.ts#L133">
+    ExcalidrawElementSkeleton
+  </a>
+  )
+</pre>
+
+**_How to use_**
+
+```js
+import { convertToExcalidrawElements } from "@excalidraw/excalidraw";
+```
+
+This function converts the Excalidraw Element Skeleton to excalidraw elements which could be then rendered on the canvas. Hence calling this function is necessary before passing it to APIs like [`initialData`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/props/initialdata), [`updateScene`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/props/ref#updatescene) if you are using the Skeleton API
+
+## Supported Features
+
+### Rectangle, Ellipse, and Diamond
+
+To create these shapes you need to pass its `type` and `x` and `y` coordinates for position. The rest of the attributes are optional_.
+
+For the Skeleton API to work, `convertToExcalidrawElements` needs to be called before passing it to Excalidraw Component via initialData, updateScene or any such API.
+
+```jsx live
+function App() {
+  const elements = convertToExcalidrawElements([
+    {
+      type: "rectangle",
+      x: 100,
+      y: 250,
+    },
+    {
+      type: "ellipse",
+      x: 250,
+      y: 250,
+    },
+    {
+      type: "diamond",
+      x: 380,
+      y: 250,
+    },
+  ]);
+  return (
+    <div style={{ height: "500px" }}>
+      <Excalidraw
+        initialData={{
+          elements,
+          appState: { zenModeEnabled: true, viewBackgroundColor: "#a5d8ff" },
+          scrollToContent: true,
+        }}
+      />
+    </div>
+  );
+}
+```
+
+You can pass additional [`properties`](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L27) as well to decorate the shapes.
+
+:::info
+
+You can copy the below test examples and replace the elements in the live editor above to test it out.
+
+:::
+
+```js
+convertToExcalidrawElements([
+  {
+    type: "rectangle",
+    x: 50,
+    y: 250,
+    width: 200,
+    height: 100,
+    backgroundColor: "#c0eb75",
+    strokeWidth: 2,
+  },
+  {
+    type: "ellipse",
+    x: 300,
+    y: 250,
+    width: 200,
+    height: 100,
+    backgroundColor: "#ffc9c9",
+    strokeStyle: "dotted",
+    fillStyle: "solid",
+    strokeWidth: 2,
+  },
+  {
+    type: "diamond",
+    x: 550,
+    y: 250,
+    width: 200,
+    height: 100,
+    backgroundColor: "#a5d8ff",
+    strokeColor: "#1971c2",
+    strokeStyle: "dashed",
+    fillStyle: "cross-hatch",
+    strokeWidth: 2,
+  },
+]);
+```
+
+![image](https://github.com/excalidraw/excalidraw/assets/11256141/70ca7063-88fb-434c-838a-cd466e1bc3c2)
+
+### Text Element
+
+The `type`, `x`, `y` and `text` properties are required to create a text element, rest of the attributes are optional
+
+```js
+convertToExcalidrawElements([
+  {
+    type: "text",
+    x: 100,
+    y: 100,
+    text: "HELLO WORLD!",
+  },
+  {
+    type: "text",
+    x: 100,
+    y: 150,
+    text: "STYLED HELLO WORLD!",
+    fontSize: 20,
+    strokeColor: "#5f3dc4",
+  },
+]);
+```
+
+![image](https://github.com/excalidraw/excalidraw/assets/11256141/085c7ac3-7952-4f22-b9c3-6beb51438526)
+
+### Lines and Arrows
+
+The `type`, `x`, and `y` properties are required, rest of the attributes are optional
+
+```js
+convertToExcalidrawElements([
+  {
+    type: "arrow",
+    x: 100,
+    y: 20,
+  },
+  {
+    type: "line",
+    x: 100,
+    y: 60,
+  },
+]);
+```
+
+![image](https://github.com/excalidraw/excalidraw/assets/11256141/0c22a06b-b568-4ab5-9848-a5f0160f66a6)
+
+#### With Addtional properties
+
+```js
+convertToExcalidrawElements([
+  {
+    type: "arrow",
+    x: 450,
+    y: 20,
+    startArrowhead: "dot",
+    endArrowhead: "triangle",
+    strokeColor: "#1971c2",
+    strokeWidth: 2,
+  },
+  {
+    type: "line",
+    x: 450,
+    y: 60,
+    strokeColor: "#2f9e44",
+    strokeWidth: 2,
+    strokeStyle: "dotted",
+  },
+]);
+```
+
+![image](https://github.com/excalidraw/excalidraw/assets/11256141/14f1bf3f-ad81-4096-8c1c-f35235084ec5)
+
+### Text Containers
+
+In addition to `type`, `x` and `y` properties, [`label`](https://github.com/excalidraw/excalidraw/blob/master/src/data/transform.ts#L124C7-L130C59) property is required for text containers. The `text` property in `label` is required, rest of the attributes are optional.
+
+If you don't provide the dimensions of container, we calculate it based of the label dimensions.
+
+```js
+convertToExcalidrawElements([
+  {
+    type: "rectangle",
+    x: 300,
+    y: 290,
+    label: {
+      text: "RECTANGLE TEXT CONTAINER",
+    },
+  },
+  {
+    type: "ellipse",
+    x: 500,
+    y: 100,
+    label: {
+      text: "ELLIPSE\n TEXT CONTAINER",
+    },
+  },
+  {
+    type: "diamond",
+    x: 100,
+    y: 100,
+    label: {
+      text: "DIAMOND\nTEXT CONTAINER",
+    },
+  },
+]);
+```
+
+![image](https://github.com/excalidraw/excalidraw/assets/11256141/1e2c7b5d-fcb4-4f86-946d-0bfb0e97d532)
+
+#### With Additional properties
+
+```js
+convertToExcalidrawElements([
+  {
+    type: "diamond",
+    x: -120,
+    y: 100,
+    width: 270,
+    backgroundColor: "#fff3bf",
+    strokeWidth: 2,
+    label: {
+      text: "STYLED DIAMOND TEXT CONTAINER",
+      strokeColor: "#099268",
+      fontSize: 20,
+    },
+  },
+  {
+    type: "rectangle",
+    x: 180,
+    y: 150,
+    width: 200,
+    strokeColor: "#c2255c",
+    label: {
+      text: "TOP LEFT ALIGNED RECTANGLE TEXT CONTAINER",
+      textAlign: "left",
+      verticalAlign: "top",
+      fontSize: 20,
+    },
+  },
+  {
+    type: "ellipse",
+    x: 400,
+    y: 130,
+    strokeColor: "#f08c00",
+    backgroundColor: "#ffec99",
+    width: 200,
+    label: {
+      text: "STYLED ELLIPSE TEXT CONTAINER",
+      strokeColor: "#c2255c",
+    },
+  },
+]);
+```
+
+![image](https://github.com/excalidraw/excalidraw/assets/11256141/f8123cd1-c9aa-452d-b96b-05c846c5030d)
+
+### Labelled Arrows
+
+Similar to Text Containers, you can create labelled arrows as well.
+
+```js
+convertToExcalidrawElements([
+  {
+    type: "arrow",
+    x: 100,
+    y: 100,
+    label: {
+      text: "LABELED ARROW",
+    },
+  },
+  {
+    type: "arrow",
+    x: 100,
+    y: 200,
+    label: {
+      text: "STYLED LABELED ARROW",
+      strokeColor: "#099268",
+      fontSize: 20,
+    },
+  },
+  {
+    type: "arrow",
+    x: 100,
+    y: 300,
+    strokeColor: "#1098ad",
+    strokeWidth: 2,
+    label: {
+      text: "ANOTHER STYLED LABELLED ARROW",
+    },
+  },
+  {
+    type: "arrow",
+    x: 100,
+    y: 400,
+    strokeColor: "#1098ad",
+    strokeWidth: 2,
+    label: {
+      text: "ANOTHER STYLED LABELLED ARROW",
+      strokeColor: "#099268",
+    },
+  },
+]);
+```
+
+![image](https://github.com/excalidraw/excalidraw/assets/11256141/70635e9b-f1c8-4839-89e1-73b813abeb93)
+
+### Arrow bindings
+
+To bind arrow to a shape you need to specify its [`start`](https://github.com/excalidraw/excalidraw/blob/master/src/data/transform.ts#L86) and [`end`](https://github.com/excalidraw/excalidraw/blob/master/src/data/transform.ts#L54) properties. You need to pass either `type` or `id` property in `start` and `end` properties, rest of the attributes are optional
+
+```js
+convertToExcalidrawElements([
+  {
+    type: "arrow",
+    x: 255,
+    y: 239,
+    label: {
+      text: "HELLO WORLD!!",
+    },
+    start: {
+      type: "rectangle",
+    },
+    end: {
+      type: "ellipse",
+    },
+  },
+]);
+```
+
+When position for `start` and `end ` properties are not specified, we compute it according to arrow position.
+
+![image](https://github.com/excalidraw/excalidraw/assets/11256141/5aff09fd-b7e8-4c63-98be-da40b0698704)
+
+```js
+convertToExcalidrawElements([
+  {
+    type: "arrow",
+    x: 255,
+    y: 239,
+    label: {
+      text: "HELLO WORLD!!",
+    },
+    start: {
+      type: "text",
+      text: "HEYYYYY",
+    },
+    end: {
+      type: "text",
+      text: "WHATS UP ?",
+    },
+  },
+]);
+```
+
+![image](https://github.com/excalidraw/excalidraw/assets/11256141/2a9f03ac-e45c-4fbd-9be0-5d9f8c8e0343)
+
+#### When passing `id`
+
+Useful when you want to bind multiple arrows to one diagram / use some existing diagram
+
+```js
+convertToExcalidrawElements([
+  {
+    type: "ellipse",
+    id: "ellipse-1",
+    strokeColor: "#66a80f",
+    x: 390,
+    y: 356,
+    width: 150,
+    height: 150,
+    backgroundColor: "#d8f5a2",
+  },
+  {
+    type: "diamond",
+    id: "diamond-1",
+    strokeColor: "#9c36b5",
+    width: 100,
+    x: -30,
+    y: 380,
+  },
+  {
+    type: "arrow",
+    x: 100,
+    y: 440,
+    width: 295,
+    height: 35,
+    strokeColor: "#1864ab",
+    start: {
+      type: "rectangle",
+      width: 150,
+      height: 150,
+    },
+    end: {
+      id: "ellipse-1",
+    },
+  },
+  {
+    type: "arrow",
+    x: 60,
+    y: 420,
+    width: 330,
+    strokeColor: "#e67700",
+    start: {
+      id: "diamond-1",
+    },
+    end: {
+      id: "ellipse-1",
+    },
+  },
+]);
+```
+
+![image](https://github.com/excalidraw/excalidraw/assets/11256141/a8b047c8-2eed-4aea-82a2-e1e6bbddb8d4)

dev-docs/docs/@excalidraw/excalidraw/api/props/props.mdx

@@ -17,7 +17,6 @@ All `props` are *optional*.
 | [`langCode`](#langcode) | `string` | `en` | Language code string to be used in Excalidraw |
 | [`renderTopRightUI`](/docs/@excalidraw/excalidraw/api/props/render-props#rendertoprightui) | `function` | _ | Render function that renders custom UI in top right corner |
 | [`renderCustomStats`](/docs/@excalidraw/excalidraw/api/props/render-props#rendercustomstats) | `function` | _ | Render function that can be used to render custom stats on the stats dialog. |
-| [`renderSidebar`](/docs/@excalidraw/excalidraw/api/props/render-props#rendersidebar) | `function` | _ | Render function that renders custom sidebar. |
 | [`viewModeEnabled`](#viewmodeenabled) | `boolean` | _ | This indicates if the app is in `view` mode. |
 | [`zenModeEnabled`](#zenmodeenabled) | `boolean` | _ | This indicates if the `zen` mode is enabled |
 | [`gridModeEnabled`](#gridmodeenabled) | `boolean` | _ | This indicates if the `grid` mode is enabled |

dev-docs/docs/@excalidraw/excalidraw/api/props/ref.mdx

@@ -404,15 +404,15 @@ This API can be used to customise the mouse cursor on the canvas and has the bel
 (cursor: string) => void
 ```
 
-## toggleMenu
+## toggleSidebar
 
 ```tsx
-(type: "library" | "customSidebar", force?: boolean) => boolean;
+(opts: { name: string; tab?: string; force?: boolean }) => boolean;
 ```
 
-This API can be used to toggle a specific menu (currently only the sidebars), and returns whether the menu was toggled on or off. If the `force` flag passed, it will force the menu to be toggled either on/off based on the `boolean` passed.
+This API can be used to toggle sidebar, optionally opening a specific sidebar tab. It returns whether the sidebar was toggled on or off. If the `force` flag passed, it will force the sidebar to be toggled either on/off.
 
-This API is especially useful when you render a custom sidebar using [`renderSidebar`](#rendersidebar) prop, and you want to toggle it from your app based on a user action.
+This API is especially useful when you render a custom [`<Sidebar/>`](/docs/@excalidraw/excalidraw/api/children-components/sidebar), and you want to toggle it from your app based on a user action.
 
 ## resetCursor
 

dev-docs/docs/@excalidraw/excalidraw/api/props/render-props.mdx

@@ -6,8 +6,7 @@
   (isMobile: boolean, appState:
   <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95">
     AppState
-  </a>
-  ) => JSX | null
+  </a>) => JSX | null
 </pre>
 
 A function returning `JSX` to render `custom` UI in the top right corner of the app.
@@ -63,69 +62,14 @@ function App() {
 }
 ```
 
-## renderSidebar
-
-```tsx
-() => JSX | null;
-```
-
-You can render `custom sidebar` using this prop. This sidebar is the same that the library menu sidebar is using, and can be used for any purposes your app needs.
-
-You need to import the `Sidebar` component from `excalidraw` package and pass your content as its `children`. The function `renderSidebar` should return the `Sidebar` instance.
-
-### Sidebar
-The `<Sidebar>` component takes these props (all are optional except `children`):
-
-| Prop | Type | Description |
-| --- | --- | --- |
-| `children` | `React.ReactNode` | Content you want to render inside the `sidebar`. |
-| `onClose` | `function` | Invoked when the component is closed (by user, or the editor). No need to act on this event, as the editor manages the sidebar open state on its own. |
-| `onDock` | `function` | Invoked when the user toggles the `dock` button. The callback recieves a `boolean` parameter `isDocked` which indicates whether the sidebar is `docked` |
-| `docked` | `boolean` | Indicates whether the sidebar is`docked`. By default, the sidebar is `undocked`. If passed, the docking becomes controlled, and you are responsible for updating the `docked` state by listening on `onDock` callback. To decide the breakpoint for docking you can use [UIOptions.dockedSidebarBreakpoint](/docs/@excalidraw/excalidraw/api/props/ui-options#dockedsidebarbreakpoint) for more info on docking. |
-| `dockable` | `boolean` | Indicates whether to show the `dock` button so that user can `dock` the sidebar. If `false`, you can still dock programmatically by passing `docked` as `true`. |
-
-The sidebar will always include a header with `close / dock` buttons (when applicable).
-You can also add custom content to the header, by rendering `<Sidebar.Header>` as a child of the `<Sidebar>` component. Note that the custom header will still include the default buttons.
-
-
-### Sidebar.Header
-
-| name | type | description |
-| --- | --- | --- |
-| children | `React.ReactNode` | Content you want to render inside the sidebar header as a sibling of `close` / `dock` buttons. |
-
-To control the visibility of the sidebar you can use [`toggleMenu("customSidebar")`](/docs/@excalidraw/excalidraw/api/props/ref#togglemenu) api available via `ref`.
-
-```tsx live
-function App() {
-  const [excalidrawAPI, setExcalidrawAPI] = useState(null);
-
-  return (
-    <div style={{ height: "500px" }}>
-      <button className="custom-button" onClick={() => excalidrawAPI.toggleMenu("customSidebar")}>
-        Toggle Custom Sidebar
-      </button>
-      <Excalidraw
-        UIOptions={{ dockedSidebarBreakpoint: 100 }}
-        ref={(api) => setExcalidrawAPI(api)}
-        renderSidebar={() => {
-          return (
-            <Sidebar dockable={true}>
-              <Sidebar.Header>Custom Sidebar Header </Sidebar.Header>
-              <p style={{ padding: "1rem" }}> custom Sidebar Content </p>
-            </Sidebar>
-          );
-        }}
-      />
-    </div>
-  );
-}
-```
-
 ## renderEmbeddable
 
 <pre>
-  (element: NonDeleted&lt;ExcalidrawEmbeddableElement&gt;, appState: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95">AppState</a>) => JSX.Element | null
+  (element: NonDeleted&lt;ExcalidrawEmbeddableElement&gt;, appState:{" "}
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95">
+    AppState
+  </a>
+  ) => JSX.Element | null
 </pre>
 
 Allows you to replace the renderer for embeddable elements (which renders `<iframe>` elements).

dev-docs/docs/@excalidraw/mermaid-to-excalidraw/api.mdx

@@ -0,0 +1,155 @@
+# API
+
+At the moment the mermaid-to-excalidraw works in two steps. First, you call `parseMermaidToExcalidraw(mermaidSyntax)` on the mermaid diagram definition string, which resolves with elements in a skeleton format — a simplified excalidraw JSON format (docs coming soon). You then pass them to `convertToExcalidrawElements(elements)` to get the fully qualified excalidraw elements you can render in the editor.
+
+The need for these two steps is due to the [@excalidraw/excalidraw](/docs/@excalidraw/excalidraw/installation) being a **UMD** build so we currently cannot import the `convertToExcalidrawElements()` util alone, until we support a tree-shakeable **ESM** build.
+
+## parseMermaidToExcalidraw
+
+This API receives the mermaid syntax as the input, and resolves to skeleton Excalidraw elements. You will need to call `convertToExcalidraw` API to convert them to fully qualified elements that you can render in Excalidraw.
+
+** Example **
+
+```ts
+import { parseMermaidToExcalidraw } from "@excalidraw/mermaid-to-excalidraw";
+import { convertToExcalidrawElements}  from "@excalidraw/excalidraw"
+try {
+  const { elements, files } = await parseMermaid(mermaidSyntax: string, {
+    fontSize: number,
+  });
+  const excalidrawElements = convertToExcalidrawElements(elements);
+  // Render elements and files on Excalidraw
+} catch (e) {
+  // Parse error, displaying error message to users
+}
+```
+
+## Supported Diagram Types
+
+Currently only [flowcharts](https://mermaid.js.org/syntax/flowchart.html) are supported. Oother diagram types will be rendered as an image in Excalidraw.
+
+### Flowchart
+
+#### Excalidraw Regular Shapes
+
+**Rectangles**, **Circle**, **Diamond**, and **Arrows** are fully supported in Excalidraw
+
+```
+flowchart TD
+  A[Christmas] -->|Get money| B(Go shopping)
+  B --> C{Let me think}
+  C -->|One| D[Laptop]
+  C -->|Two| E[iPhone]
+  C -->|Three| F[Car]
+ ```
+
+<img src="https://github.com/excalidraw/excalidraw/assets/11256141/c8ea84fc-e9fb-4652-9a12-154136d1a798"  width="250" height="200"/>
+
+
+```
+flowchart LR
+  id1((Hello from Circle))
+```
+
+<img src="https://github.com/excalidraw/excalidraw/assets/11256141/6202a8b9-8aa7-451e-9478-4d8d75c0f2fa"  width="250" height="200"/>
+
+
+#### Subgraphs
+
+Subgraphs are grouped diagrams hence they are also supported in Excalidraw
+
+```
+flowchart TB
+  c1-->a2
+  subgraph one
+  a1-->a2
+  end
+  subgraph two
+  b1-->b2
+  end
+  subgraph three
+  c1-->c2
+  end
+```
+
+<img src="https://github.com/excalidraw/excalidraw/assets/11256141/098bce52-8f93-437c-9a06-c6972e27c70a"  width="350" height="200"/>
+
+#### Unsupported shapes fallback to Rectangle
+
+**Subroutine**, **Cylindrical**, **Asymmetric**, **Hexagon**, **Parallelogram**, **Trapezoid** are not supported in Excalidraw hence they fallback to the closest shape **Rectangle**
+
+```
+flowchart LR
+  id1[[Subroutine fallback to Rectangle]]
+  id2[(Cylindrical fallback to Rectangle)]
+  id3>Asymmetric fallback to Rectangle]
+  id4{{Hexagon fallback to Rectangle}}
+  id5[/Parallelogram fallback to Rectangle /]
+  id6[/Trapezoid fallback to Rectangle\]
+```
+The above shapes are not supported in Excalidraw hence they fallback to Rectangle
+
+<img src="https://github.com/excalidraw/excalidraw/assets/11256141/cb269473-16c5-4c35-bd7a-d631d8cc5b47"  width="350" height="200"/>
+
+#### Markdown fallback to Regular text
+
+Since we don't support wysiwyg text editor yet, hence [Markdown Strings](https://mermaid.js.org/syntax/flowchart.html#markdown-strings) will fallback to regular text.
+
+```
+flowchart LR
+  A("`Hello **World**`") --> B("`Whats **up** ?`")
+```
+<img src="https://github.com/excalidraw/excalidraw/assets/11256141/107bd428-9ab9-42d4-ba12-b1e29c8db478"  width="250" height="200"/>
+
+#### Basic FontAwesome fallback to text
+
+The [FontAwesome](https://mermaid.js.org/syntax/flowchart.html#basic-support-for-fontawesome) icons aren't support so they won't be rendered in Excalidraw
+
+```
+flowchart TD
+  B["fab:fa-twitter for peace"]
+  B-->C[fa:fa-ban forbidden]
+  B-->E(A fa:fa-camera-retro perhaps?)
+```
+
+
+<img src="https://github.com/excalidraw/excalidraw/assets/11256141/7a693863-c3f9-42ff-b325-4b3f8303c7af"  width="250" height="200"/>
+
+#### Cross Arrow head fallback to Bar Arrow head
+
+```
+flowchart LR
+  Start x--x Stop
+```
+<img src="https://github.com/excalidraw/excalidraw/assets/11256141/217dd1ad-7f4e-4c80-8c1c-03647b42d821"  width="250" height="200"/>
+
+
+## Unsupported Diagram Types
+
+Currently only [flowcharts](https://mermaid.js.org/syntax/flowchart.html) are supported. All other diagram types will be rendered as an image in Excalidraw.
+
+```
+erDiagram
+  CUSTOMER ||--o{ ORDER : places
+  ORDER ||--|{ LINE-ITEM : contains
+  CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+```
+
+<img src="https://github.com/excalidraw/excalidraw/assets/11256141/c1d3fdb3-32ef-4bf3-a38a-02ac3d7d2cb9"  width="300" height="200"/>
+
+```
+gitGraph
+  commit
+  commit
+  branch develop
+  checkout develop
+  commit
+  commit
+  checkout main
+  merge develop
+  commit
+  commit
+
+```
+
+<img src="https://github.com/excalidraw/excalidraw/assets/11256141/e5dcec0b-d570-4eb4-b981-412a996aa96c"  width="400" height="300"/>

dev-docs/docs/@excalidraw/mermaid-to-excalidraw/codebase/codebase.mdx

@@ -0,0 +1,7 @@
+# Codebase
+
+The Codebase is divided into 2 Sections
+
+* [How Parser Works under the hood](/docs/@excalidraw/mermaid-to-excalidraw/codebase/parser) - If you are interested in understanding and deep diving into inner workings of the Parser, then make sure to checkout this section.
+
+* [Adding a new diagram type](/docs/@excalidraw/mermaid-to-excalidraw/codebase/new-diagram-type) - If you want to help us make the mermaid to Excalidraw Parser more powerful, you will find all information in this section to do so.

dev-docs/docs/@excalidraw/mermaid-to-excalidraw/codebase/new-diagram-type.mdx

@@ -0,0 +1,54 @@
+# Adding a new Diagram Type
+
+To add a new diagram type to the parser you can follow the below steps :point_down:
+
+All the code for the parser resides in [`src`](https://github.com/excalidraw/mermaid-to-excalidraw/tree/master/src) folder and for playground resides in [`playground`](https://github.com/excalidraw/mermaid-to-excalidraw/tree/master/playground) folder.
+
+lets run the playground server in local :point_down:
+
+```bash
+yarn start
+```
+
+This will start the playground server in port `1234` and open it in browser so  you start playing with the playground.
+
+## Update Supported Diagram Types
+
+First step is to add the new diagram type in [`SUPPORTED_DIAGRAM_TYPES`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/constants.ts#L2).
+
+Once this is done the new diagram type won't be rendered as an image but start throwing error since we don't support parsing the data yet.
+
+## Writing the Diagram Parser
+
+Once the diagram type is added in previous step. Next step is to write the parser to parse the mermaid diagram.
+
+For this create a file named `{{diagramType}}.ts` in [`src/parser`](https://github.com/excalidraw/mermaid-to-excalidraw/tree/master/src/parser) and write a function `parseMermaid{{diagramType}}Diagram` similar to how we [`parseMermaidFlowChartDiagram`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/parser/flowchart.ts#L256) for parsing flowchart diagram.
+
+The main aim of the parser is :point_down:
+
+1. Determine how elements are connected in the diagram and thus finding arrow and text bindings. 
+
+For this you might have to dig in to the parser `diagram.parser.yy` and which attributes to parse for the new diagram.
+
+2. Determine the position and dimensions of each element, for this would be using the `svg`
+
+Once the parser is ready, lets start using it. 
+
+Add the diagram type in switch case in [`parseMermaid`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/parseMermaid.ts#L97) and call the parser for the same.
+
+## Writing the Excalidraw Skeleton Convertor
+
+With the completion of previous step, we have all the data, now we need to transform it so to [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/src/data/transform.ts#L133) format.
+
+Similar to [`FlowChartToExcalidrawSkeletonConverter`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/converter/types/flowchart.ts#L24), you have to write the `{{diagramType}}ToExcalidrawSkeletonConverter` which parses the data received in previous step and returns the [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/src/data/transform.ts#L133).
+
+Thats it, you have added the new diagram type 🥳, now lets test it out!
+
+## Updating the Playground
+
+1. Create a file named `{{diagramType}}.ts` in [`playround/testcases/`](https://github.com/excalidraw/mermaid-to-excalidraw/tree/master/playground/testcases). For reference you can check [`flowchart.ts`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/playground/testcases/flowchart.ts).
+
+2. Incase the new diagram type added is present in [`unsupported.ts`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/playground/testcases/unsupported.ts) then remove it from there.
+
+3. Verify if the test cases are running fine in playground.
+

dev-docs/docs/@excalidraw/mermaid-to-excalidraw/codebase/parser/flowchart.mdx

@@ -0,0 +1,177 @@
+# Flowchart Parser
+
+As mentioned in the previous section, we use [getDiagramFromText](https://github.com/mermaid-js/mermaid/blob/00d06c7282a701849793680c1e97da1cfdfcce62/packages/mermaid/src/Diagram.ts#L80) to parse the full defination and get the [Diagram](https://github.com/mermaid-js/mermaid/blob/00d06c7282a701849793680c1e97da1cfdfcce62/packages/mermaid/src/Diagram.ts#L15) json from it.
+
+In this section we will be diving into how the [flowchart parser](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/parser/flowchart.ts#L256) works behind the scenes.
+
+![image](https://github.com/excalidraw/excalidraw/assets/11256141/2a097bbb-64bf-49d6-bf7f-21172bdb538d)
+
+We use `diagram.parser.yy` attribute to parse the data. If you want to know more about how the `diagram.parse.yy` attribute looks like, you can check it [here](https://github.com/mermaid-js/mermaid/blob/00d06c7282a701849793680c1e97da1cfdfcce62/packages/mermaid/src/diagrams/flowchart/flowDb.js#L768), however for scope of flowchart we are using **3** APIs from this parser to compute `vertices`, `edges` and `clusters` as we need these data to transform to [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/src/data/transform.ts#L133C13-L133C38).
+
+
+For computing `vertices` and `edge`s lets consider the below svg generated by mermaid
+
+![image](https://github.com/excalidraw/excalidraw/assets/11256141/d7013305-0b90-4fa0-a66e-b4f4604ad0b2)
+
+
+## Computing the vertices
+
+We use `getVertices` API from `diagram.parse.yy` to get the vertices for a given flowchart.
+
+Considering the same example this is the response from the API
+
+```js
+{
+	"start": {
+		"id": "start",
+		"labelType": "text",
+		"domId": "flowchart-start-1414",
+		"styles": [],
+		"classes": [],
+		"text": "start",
+		"props": {}
+	},
+	"stop": {
+		"id": "stop",
+		"labelType": "text",
+		"domId": "flowchart-stop-1415",
+		"styles": [],
+		"classes": [],
+		"text": "stop",
+		"props": {}
+	}
+}
+```
+The dimensions and position is missing in this response and we need that to transform to [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/src/data/transform.ts#L133C13-L133C38), for this we have our own parser [`parseVertex`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/parseMermaid.ts#L178) which takes the above response and uses the `svg` together to compute position, dimensions and cleans up the response.
+
+ The final output from `parseVertex` looks like :point_down:
+
+```js
+{
+	"start": {
+		"id": "start",
+		"labelType": "text",
+		"text": "start",
+		"x": 0,
+		"y": 0,
+		"width": 67.796875,
+		"height": 44,
+		"containerStyle": {},
+		"labelStyle": {}
+	},
+	"stop": {
+		"id": "stop",
+		"labelType": "text",
+		"text": "stop",
+		"x": 117.796875,
+		"y": 0,
+		"width": 62.3828125,
+		"height": 44,
+		"containerStyle": {},
+		"labelStyle": {}
+	}
+}
+```
+
+
+## Computing the edges
+
+The lines and arrows are considered as `edges` in mermaid as shown in the above diagram.
+We use `getEdges` API from `diagram.parse.yy` to get the edges for a given flowchart.
+Considering the same example this is the response from the API
+
+```js
+[
+	{
+		"start": "start",
+		"end": "stop",
+		"type": "arrow_point",
+		"text": "",
+		"labelType": "text",
+		"stroke": "normal",
+		"length": 1
+	}
+]
+```
+
+Similarly here the dimensions and position is missing and we compute that from the svg. The [`parseEdge`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/parseMermaid.ts#L245) takes the above response along with `svg` and computes the position, dimensions and cleans up the response.
+
+ The final output from `parseEdge` looks like :point_down:
+
+```js
+[
+	{
+		"start": "start",
+		"end": "stop",
+		"type": "arrow_point",
+		"text": "",
+		"labelType": "text",
+		"stroke": "normal",
+		"startX": 67.797,
+		"startY": 22,
+		"endX": 117.797,
+		"endY": 22,
+		"reflectionPoints": [
+			{
+				"x": 67.797,
+				"y": 22
+			},
+			{
+				"x": 117.797,
+				"y": 22
+			}
+		]
+	}
+]
+```
+## Computing the Subgraphs
+
+`Subgraphs` is collection of elements grouped together. The Subgraphs map to `grouping` elements in Excalidraw.
+
+Lets consider the below example :point_down:
+
+![image](https://github.com/excalidraw/excalidraw/assets/11256141/5243ce4c-beaa-43d2-812a-0577b0a574d7)
+
+We use `getSubgraphs` API to get the subgraph data for a given flowchart.
+Considering the same example this is the response from the API
+
+```js
+[
+	{
+		"id": "one",
+		"nodes": [
+				"flowchart-a2-1399",
+				"flowchart-a1-1400"
+		],
+		"title": "one",
+		"classes": [],
+		"labelType": "text"
+	}
+]
+```
+
+For position and dimensions we use the svg to compute. The [`parseSubgraph`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/parseMermaid.ts#L139) takes the above response along with `svg` and computes the position, dimensions and cleans up the response.
+
+
+```js
+[
+	{
+		"id": "one",
+		"nodes": [
+				"flowchart-a2-1399",
+				"flowchart-a1-1400"
+		],
+		"title": "one",
+		"labelType": "text",
+		"nodeIds": [
+				"a2",
+				"a1"
+		],
+		"x": 75.4921875,
+		"y": 0,
+		"width": 121.25,
+		"height": 188,
+		"text": "one"
+	}
+]
+```

dev-docs/docs/@excalidraw/mermaid-to-excalidraw/codebase/parser/parser.mdx

@@ -0,0 +1,65 @@
+# How the Parser works under the hood ?
+
+[This](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/index.ts) is the entry point of the library.
+
+
+`parseMermaidToExcalidraw` function is the only function exposed which receives mermaid syntax as the input, parses the mermaid syntax and resolves to Excalidraw Skeleton.
+
+Lets look at the high level overview at how the parse works :point_down:
+
+![image](https://github.com/excalidraw/excalidraw/assets/11256141/8e060de7-b867-44ad-864b-0c1b24466b67)
+
+Lets dive deeper into individual section now to understand better.
+
+## Parsing Mermaid diagram
+
+One of the dependencies of the library is [`mermaid`](https://www.npmjs.com/package/mermaid) library.
+We need the mermaid diagram in some extractable format so we can parse it to Excalidraw Elements.
+
+Parsing is broken into two steps
+1. [`Rendering Mermaid to Svg`](/docs/@excalidraw/mermaid-to-excalidraw/codebase/parser#rendering-mermaid-to-svg) - This helps in determining the position and dimensions of each element in the diagram
+
+2. [`Parsing the mermaid syntax`](/docs/@excalidraw/mermaid-to-excalidraw/codebase/parser#parsing-the-mermaid-syntax) - We also need to know how elements are connected which isn't possible with svg alone hence we also parse the mermaid syntax which helps in determining the connections and bindings between elements in the diagram.
+
+### Rendering Mermaid to Svg
+
+![image](https://github.com/excalidraw/excalidraw/assets/11256141/2c24cf7b-f096-4c12-88db-55520de27558)
+
+The [`mermaid`](https://www.npmjs.com/package/mermaid) library provides the API `mermaid.render` API which gives the output of the diagram in `svg`.
+
+
+If the diagram isn't supported, this svg is converted to `dataURL` and can be rendered as an image in Excalidraw.
+
+
+### Parsing the mermaid syntax
+
+For this we first need to process the options along with mermaid defination for diagram provided by the user.
+
+[`processMermaidTextWithOptions`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/parseMermaid.ts#L13) takes the mermaid defination and options and returns the full defination including the mermaid [directives ](https://mermaid.js.org/config/directives.html).
+
+![image](https://github.com/excalidraw/excalidraw/assets/11256141/3a4825d8-9704-468c-a02f-7e507f4d5b7a)
+
+Next we use mermaid api [getDiagramFromText](https://github.com/mermaid-js/mermaid/blob/00d06c7282a701849793680c1e97da1cfdfcce62/packages/mermaid/src/Diagram.ts#L80) to parse the full defination and get the [Diagram](https://github.com/mermaid-js/mermaid/blob/00d06c7282a701849793680c1e97da1cfdfcce62/packages/mermaid/src/Diagram.ts#L15) json from it.
+
+```js
+const diagram = await mermaid.mermaidAPI.getDiagramFromText(fullDefinition);
+```
+
+Next we write our own parser to parse this diagram.
+
+### Parsing the Diagram
+
+For each diagram type, we need a parser as the result of every diagram would differ and dependinng on the data we have to write the parser. Since currently we support flowchart, so here is the [`parseMermaidFlowChartDiagram`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/parser/flowchart.ts#L256) to parse the flowchart diagram.
+
+If you want to understand how flowchart parser works, you can navigate to [Flowchart Parser](http://localhost:3003/docs/@excalidraw/mermaid-to-excalidraw/codebase/parser/flowchart).
+
+## Converting to ExcalidrawElementSkeleton
+
+Now we have all the data, we just need to transform it to [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/src/data/transform.ts#L133C13-L133C38) API so it can be rendered in Excalidraw.
+
+For this we have `converters` which takes the parsed mermaid data and gives back the Excalidraw Skeleton.
+For Unsupported types, we have already mentioned above that we convert it to `dataURL` and return the ExcalidrawImageSkeleton.
+
+For supported types, currently only flowchart, we have [flowchartConverter](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/converter/types/flowchart.ts#L24) which parses the data and converts to [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/src/data/transform.ts#L133C13-L133C38).
+
+![image](https://github.com/excalidraw/excalidraw/assets/11256141/00226e9d-043d-4a08-989a-3ad9d2a574f1)

dev-docs/docs/@excalidraw/mermaid-to-excalidraw/development.mdx

@@ -0,0 +1,60 @@
+# Development
+
+This page relates to developing the `@excalidraw/mermaid-to-excalidraw` package itself.
+
+## Setting up in Local
+
+To set up the library in local, follow the below steps 👇🏼
+
+### Clone the Repository
+
+Go to [@excalidraw/mermaid-to-excalidraw](https://github.com/excalidraw/mermaid-to-excalidraw) and clone the repository to your local.
+
+
+```bash
+git clone [email protected]:excalidraw/mermaid-to-excalidraw.git
+```
+
+### Install the dependencies
+
+Using `npm`
+
+```bash
+npm install @excalidraw/mermaid-to-excalidraw
+```
+
+Using `yarn`
+
+```bash
+yarn add @excalidraw/mermaid-to-excalidraw
+```
+
+### Run the playground server
+
+```bash
+yarn start
+```
+
+This will start the playground server in port `1234` and you start playing with the playground.
+
+## Creating a test release
+
+We will soon simplify creating release via commenting on GitHub PR similar till then you can create a release by following the below steps
+
+1. Create the build
+
+```bash
+yarn build
+```
+
+This will create the dist folder which we need to publish next.
+
+2. Publish the library
+
+Update the package name and version in [package.json](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/package.json) and run the below command to publish it
+
+```bash
+yarn publish
+```
+
+And thats all your test release is successfully created 🎉

dev-docs/docs/@excalidraw/mermaid-to-excalidraw/installation.mdx

@@ -0,0 +1,42 @@
+# Installation
+
+`@excalidraw/mermaid-to-excalidraw` is published to npm. This library is used in [excalidraw](https://excalidraw.com) to transform mermaid syntax to Excalidraw diagrams.
+
+Using `npm`
+
+```bash
+npm install @excalidraw/mermaid-to-excalidraw
+```
+
+Using `yarn`
+
+```bash
+yarn add @excalidraw/mermaid-to-excalidraw
+```
+
+## Usage
+
+Once the library is installed, its ready to use.
+
+```js
+import { parseMermaidToExcalidraw } from "@excalidraw/mermaid-to-excalidraw";
+import { convertToExcalidrawElements}  from "@excalidraw/excalidraw"
+
+try {
+  const { elements, files } = await parseMermaid(diagramDefinition, {
+    fontSize: DEFAULT_FONT_SIZE,
+  });
+  // currently the elements returned from the parser are in a "skeleton" format
+  // which we need to convert to fully qualified excalidraw elements first
+  const excalidrawElements = convertToExcalidrawElements(elements);
+
+  // Render elements and files on Excalidraw
+} catch (e) {
+  // Error handling
+}
+```
+
+## Playground
+
+ Try it out [here](https://mermaid-to-excalidraw.vercel.app)
+

dev-docs/docs/codebase/json-schema.mdx

@@ -0,0 +1,75 @@
+# JSON Schema
+
+The Excalidraw data format uses plaintext JSON.
+
+## Excalidraw files
+
+When saving an Excalidraw scene locally to a file, the JSON file (`.excalidraw`) is using the below format.
+
+### Attributes
+
+| Attribute | Description | Value |
+| --- | --- | --- |
+| `type` | The type of the Excalidraw schema | `"excalidraw"` |
+| `version` | The version of the Excalidraw schema | number |
+| `source` | The source URL of the Excalidraw application | `"https://excalidraw.com"` |
+| `elements` | An array of objects representing excalidraw elements on canvas | Array containing excalidraw element objects |
+| `appState` | Additional application state/configuration | Object containing application state properties |
+| `files` | Data for excalidraw `image` elements | Object containing image data |
+
+### JSON Schema example
+
+```json
+{
+  // schema information
+  "type": "excalidraw",
+  "version": 2,
+  "source": "https://excalidraw.com",
+
+  // elements on canvas
+  "elements": [
+    // example element
+    {
+      "id": "pologsyG-tAraPgiN9xP9b",
+      "type": "rectangle",
+      "x": 928,
+      "y": 319,
+      "width": 134,
+      "height": 90
+      /* ...other element properties */
+    }
+    /* other elements */
+  ],
+
+  // editor state (canvas config, preferences, ...)
+  "appState": {
+    "gridSize": null,
+    "viewBackgroundColor": "#ffffff"
+  },
+
+  // files data for "image" elements, using format `{ [fileId]: fileData }`
+  "files": {
+    // example of an image data object
+    "3cebd7720911620a3938ce77243696149da03861": {
+      "mimeType": "image/png",
+      "id": "3cebd7720911620a3938c.77243626149da03861",
+      "dataURL": "data:image/png;base64,iVBORWOKGgoAAAANSUhEUgA=",
+      "created": 1690295874454,
+      "lastRetrieved": 1690295874454
+    }
+    /* ...other image data objects */
+  }
+}
+```
+
+## Excalidraw clipboard format
+
+When copying selected excalidraw elements to clipboard, the JSON schema is similar to `.excalidraw` format, except it differs in attributes.
+
+### Attributes
+
+| Attribute | Description | Example Value |
+| --- | --- | --- |
+| `type` | The type of the Excalidraw document. | "excalidraw/clipboard" |
+| `elements` | An array of objects representing excalidraw elements on canvas. | Array containing excalidraw element objects (see example below) |
+| `files` | Data for excalidraw `image` elements. | Object containing image data |

dev-docs/docs/introduction/get-started.mdx

@@ -14,3 +14,4 @@ These docs are focused on developers, and structured in the following way:
 - [Introduction](/docs/) — development setup and introduction.
 - [@excalidraw/excalidraw](/docs/@excalidraw/excalidraw/installation) — docs for the npm package to help you integrate Excalidraw into your own app.
 - Editor — IN PROGRESS. Docs describing the internals of the Excalidraw editor to help in contributing to the codebase.
+- [@excalidraw/mermaid-to-excalidraw](/docs/@excalidraw/mermaid-to-excalidraw/installation) - Docs for the mermaid to excalidraw parser

dev-docs/docusaurus.config.js

@@ -10,7 +10,7 @@ const config = {
   baseUrl: "/",
   onBrokenLinks: "throw",
   onBrokenMarkdownLinks: "warn",
-  favicon: "img/favicon.ico",
+  favicon: "img/favicon.png",
   organizationName: "Excalidraw", // Usually your GitHub org/user name.
   projectName: "excalidraw", // Usually your repo name.
 
@@ -123,7 +123,7 @@ const config = {
       prism: {
         theme: require("prism-react-renderer/themes/dracula"),
       },
-      image: "img/og-image.png",
+      image: "img/og-image-2.png",
       docs: {
         sidebar: {
           hideable: true,

dev-docs/package.json

@@ -18,7 +18,7 @@
     "@docusaurus/core": "2.2.0",
     "@docusaurus/preset-classic": "2.2.0",
     "@docusaurus/theme-live-codeblock": "2.2.0",
-    "@excalidraw/excalidraw": "0.15.3",
+    "@excalidraw/excalidraw": "0.15.2-eb020d0",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.2.1",
     "docusaurus-plugin-sass": "0.2.3",

dev-docs/sidebars.js

@@ -23,7 +23,7 @@ const sidebars = {
       },
       items: ["introduction/development", "introduction/contributing"],
     },
-
+    { type: "category", label: "Codebase", items: ["codebase/json-schema"] },
     {
       type: "category",
       label: "@excalidraw/excalidraw",
@@ -64,6 +64,7 @@ const sidebars = {
               items: [
                 "@excalidraw/excalidraw/api/children-components/main-menu",
                 "@excalidraw/excalidraw/api/children-components/welcome-screen",
+                "@excalidraw/excalidraw/api/children-components/sidebar",
                 "@excalidraw/excalidraw/api/children-components/footer",
                 "@excalidraw/excalidraw/api/children-components/live-collaboration-trigger",
               ],
@@ -80,16 +81,46 @@ const sidebars = {
                 "@excalidraw/excalidraw/api/utils/restore",
               ],
             },
+            "@excalidraw/excalidraw/api/constants",
+            "@excalidraw/excalidraw/api/excalidraw-element-skeleton",
+          ],
+        },
+        "@excalidraw/excalidraw/faq",
+        "@excalidraw/excalidraw/development",
+      ],
+    },
+    {
+      type: "category",
+      label: "@excalidraw/mermaid-to-excalidraw",
+      link: {
+        type: "doc",
+        id: "@excalidraw/mermaid-to-excalidraw/installation",
+      },
+      items: [
+        "@excalidraw/mermaid-to-excalidraw/api",
+        "@excalidraw/mermaid-to-excalidraw/development",
+        {
+          type: "category",
+          label: "Codebase",
+          link: {
+            type: "doc",
+            id: "@excalidraw/mermaid-to-excalidraw/codebase/codebase",
+          },
+          items: [
             {
               type: "category",
-              label: "Constants",
-              link: { type: "doc", id: "@excalidraw/excalidraw/api/constants" },
-              items: [],
+              label: "How Parser works under the hood?",
+              link: {
+                type: "doc",
+                id: "@excalidraw/mermaid-to-excalidraw/codebase/parser/parser",
+              },
+              items: [
+                "@excalidraw/mermaid-to-excalidraw/codebase/parser/flowchart",
+              ],
             },
+            "@excalidraw/mermaid-to-excalidraw/codebase/new-diagram-type",
           ],
         },
-        "@excalidraw/excalidraw/faq",
-        "@excalidraw/excalidraw/development",
       ],
     },
   ],

dev-docs/src/theme/ReactLiveScope/index.js

@@ -25,6 +25,7 @@ const ExcalidrawScope = {
   exportToCanvas: ExcalidrawComp.exportToCanvas,
   initialData,
   useI18n: ExcalidrawComp.useI18n,
+  convertToExcalidrawElements: ExcalidrawComp.convertToExcalidrawElements,
 };
 
 export default ExcalidrawScope;

dev-docs/yarn.lock

@@ -1631,10 +1631,10 @@
     url-loader "^4.1.1"
     webpack "^5.73.0"
 
-"@excalidraw/[email protected].3":
-  version "0.15.3"
-  resolved "https://registry.yarnpkg.com/@excalidraw/excalidraw/-/excalidraw-0.15.3.tgz#5dea570f76451adf68bc24d4bfdd67a375cfeab1"
-  integrity sha512-/gpY7fgMO/AEaFLWnPqzbY8H7ly+/zocFf7D0Is5sWNMD2mhult5tana12lXKLSJ6EAz7ubo1A7LajXzvJXJDA==
+"@excalidraw/[email protected].2-eb020d0":
+  version "0.15.2-eb020d0"
+  resolved "https://registry.yarnpkg.com/@excalidraw/excalidraw/-/excalidraw-0.15.2-eb020d0.tgz#25bd61e6f23da7c084fb16a3e0fe0dd9ad8e6533"
+  integrity sha512-TKGLzpOVqFQcwK1GFKTDXgg1s2U6tc5KE3qXuv87osbzOtftQn3x4+VH61vwdj11l00nEN80SMdXUC43T9uJqQ==
 
 "@hapi/hoek@^9.0.0":
   version "9.3.0"

index.html

@@ -20,7 +20,7 @@
       name="description"
       content="Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them."
     />
-    <meta name="image" content="https://excalidraw.com/og-general-v1.png" />
+    <meta name="image" content="https://excalidraw.com/og-image-2.png" />
 
     <!-- Open Graph / Facebook -->
     <meta property="og:site_name" content="Excalidraw" />
@@ -35,7 +35,7 @@
       property="og:description"
       content="Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them."
     />
-    <meta property="og:image" content="https://excalidraw.com/og-fb-v1.png" />
+    <meta property="og:image" content="https://excalidraw.com/og-image-2.png" />
 
     <!-- Twitter -->
     <meta property="twitter:card" content="summary_large_image" />
@@ -51,7 +51,7 @@
     />
     <meta
       property="twitter:image"
-      content="https://excalidraw.com/og-twitter-v1.png"
+      content="https://excalidraw.com/og-twitter-v2.png"
     />
 
     <!-- General tags -->
@@ -99,7 +99,9 @@
     </script>
     <% } %>
 
-    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
 
     <!-- Excalidraw version -->
     <meta name="version" content="{version}" />

public/manifest.json

@@ -4,8 +4,8 @@
   "description": "Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.",
   "icons": [
     {
-      "src": "logo-180x180.png",
-      "sizes": "180x180",
+      "src": "android-chrome-192x192.png",
+      "sizes": "192x192",
       "type": "image/png"
     },
     {

src/actions/actionFlip.ts

@@ -60,6 +60,7 @@ const flipSelectedElements = (
     getNonDeletedElements(elements),
     appState,
     {
+      includeBoundTextElement: true,
       includeElementsInFrames: true,
     },
   );

src/actions/actionProperties.tsx

@@ -95,7 +95,7 @@ import { register } from "./register";
 
 const FONT_SIZE_RELATIVE_INCREASE_STEP = 0.1;
 
-const changeProperty = (
+export const changeProperty = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
   callback: (element: ExcalidrawElement) => ExcalidrawElement,
@@ -118,7 +118,7 @@ const changeProperty = (
   });
 };
 
-const getFormValue = function <T>(
+export const getFormValue = function <T>(
   elements: readonly ExcalidrawElement[],
   appState: AppState,
   getAttribute: (element: ExcalidrawElement) => T,

src/components/App.tsx

@@ -85,6 +85,7 @@ import {
   VERTICAL_ALIGN,
   YOUTUBE_STATES,
   ZOOM_STEP,
+  POINTER_EVENTS,
 } from "../constants";
 import { exportCanvas, loadFromBlob } from "../data";
 import Library, { distributeLibraryItemsOnSquareGrid } from "../data/library";
@@ -857,7 +858,9 @@ class App extends React.Component<AppProps, AppState> {
                   width: isVisible ? `${el.width}px` : 0,
                   height: isVisible ? `${el.height}px` : 0,
                   transform: isVisible ? `rotate(${el.angle}rad)` : "none",
-                  pointerEvents: isActive ? "auto" : "none",
+                  pointerEvents: isActive
+                    ? POINTER_EVENTS.enabled
+                    : POINTER_EVENTS.disabled,
                 }}
               >
                 {isHovered && (
@@ -1081,9 +1084,9 @@ class App extends React.Component<AppProps, AppState> {
             whiteSpace: "nowrap",
             textOverflow: "ellipsis",
             cursor: CURSOR_TYPE.MOVE,
-            // disable all interaction (e.g. cursor change) when in view
-            // mode
-            pointerEvents: this.state.viewModeEnabled ? "none" : "all",
+            pointerEvents: this.state.viewModeEnabled
+              ? POINTER_EVENTS.disabled
+              : POINTER_EVENTS.inheritFromUI,
           }}
           onPointerDown={(event) => this.handleCanvasPointerDown(event)}
           onWheel={(event) => this.handleWheel(event)}
@@ -1125,6 +1128,16 @@ class App extends React.Component<AppProps, AppState> {
           "excalidraw--view-mode": this.state.viewModeEnabled,
           "excalidraw--mobile": this.device.isMobile,
         })}
+        style={{
+          ["--ui-pointerEvents" as any]:
+            this.state.selectionElement ||
+            this.state.draggingElement ||
+            this.state.resizingElement ||
+            (this.state.editingElement &&
+              !isTextElement(this.state.editingElement))
+              ? POINTER_EVENTS.disabled
+              : POINTER_EVENTS.enabled,
+        }}
         ref={this.excalidrawContainerRef}
         onDrop={this.handleAppOnDrop}
         tabIndex={0}
@@ -3944,7 +3957,7 @@ class App extends React.Component<AppProps, AppState> {
         const [gridX, gridY] = getGridPoint(
           scenePointerX,
           scenePointerY,
-          this.state.gridSize,
+          event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize,
         );
 
         const [lastCommittedX, lastCommittedY] =
@@ -4761,7 +4774,11 @@ class App extends React.Component<AppProps, AppState> {
       origin,
       withCmdOrCtrl: event[KEYS.CTRL_OR_CMD],
       originInGrid: tupleToCoors(
-        getGridPoint(origin.x, origin.y, this.state.gridSize),
+        getGridPoint(
+          origin.x,
+          origin.y,
+          event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize,
+        ),
       ),
       scrollbars: isOverScrollBars(
         currentScrollBars,
@@ -5285,7 +5302,11 @@ class App extends React.Component<AppProps, AppState> {
     sceneY: number;
     link: string;
   }) => {
-    const [gridX, gridY] = getGridPoint(sceneX, sceneY, this.state.gridSize);
+    const [gridX, gridY] = getGridPoint(
+      sceneX,
+      sceneY,
+      this.lastPointerDown?.[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize,
+    );
 
     const embedLink = getEmbedLink(link);
 
@@ -5331,7 +5352,11 @@ class App extends React.Component<AppProps, AppState> {
     sceneX: number;
     sceneY: number;
   }) => {
-    const [gridX, gridY] = getGridPoint(sceneX, sceneY, this.state.gridSize);
+    const [gridX, gridY] = getGridPoint(
+      sceneX,
+      sceneY,
+      this.lastPointerDown?.[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize,
+    );
 
     const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
       x: gridX,
@@ -5414,7 +5439,7 @@ class App extends React.Component<AppProps, AppState> {
       const [gridX, gridY] = getGridPoint(
         pointerDownState.origin.x,
         pointerDownState.origin.y,
-        this.state.gridSize,
+        event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize,
       );
 
       const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
@@ -5507,7 +5532,7 @@ class App extends React.Component<AppProps, AppState> {
     const [gridX, gridY] = getGridPoint(
       pointerDownState.origin.x,
       pointerDownState.origin.y,
-      this.state.gridSize,
+      this.lastPointerDown?.[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize,
     );
 
     const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
@@ -5565,7 +5590,7 @@ class App extends React.Component<AppProps, AppState> {
     const [gridX, gridY] = getGridPoint(
       pointerDownState.origin.x,
       pointerDownState.origin.y,
-      this.state.gridSize,
+      this.lastPointerDown?.[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize,
     );
 
     const frame = newFrameElement({
@@ -5648,7 +5673,7 @@ class App extends React.Component<AppProps, AppState> {
       const [gridX, gridY] = getGridPoint(
         pointerCoords.x,
         pointerCoords.y,
-        this.state.gridSize,
+        event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize,
       );
 
       // for arrows/lines, don't start dragging until a given threshold
@@ -5694,6 +5719,7 @@ class App extends React.Component<AppProps, AppState> {
             this.state.selectedLinearElement,
             pointerCoords,
             this.state,
+            !event[KEYS.CTRL_OR_CMD],
           );
           if (!ret) {
             return;
@@ -5819,7 +5845,7 @@ class App extends React.Component<AppProps, AppState> {
           const [dragX, dragY] = getGridPoint(
             pointerCoords.x - pointerDownState.drag.offset.x,
             pointerCoords.y - pointerDownState.drag.offset.y,
-            this.state.gridSize,
+            event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize,
           );
 
           const [dragDistanceX, dragDistanceY] = [
@@ -5886,7 +5912,7 @@ class App extends React.Component<AppProps, AppState> {
                 const [originDragX, originDragY] = getGridPoint(
                   pointerDownState.origin.x - pointerDownState.drag.offset.x,
                   pointerDownState.origin.y - pointerDownState.drag.offset.y,
-                  this.state.gridSize,
+                  event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize,
                 );
                 mutateElement(duplicatedElement, {
                   x: duplicatedElement.x + (originDragX - dragX),
@@ -6501,7 +6527,7 @@ class App extends React.Component<AppProps, AppState> {
             }
 
             nextElements = updateFrameMembershipOfSelectedElements(
-              this.scene.getElementsIncludingDeleted(),
+              nextElements,
               this.state,
               this,
             );
@@ -7679,7 +7705,7 @@ class App extends React.Component<AppProps, AppState> {
       const [gridX, gridY] = getGridPoint(
         pointerCoords.x,
         pointerCoords.y,
-        this.state.gridSize,
+        event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize,
       );
 
       const image =
@@ -7748,7 +7774,7 @@ class App extends React.Component<AppProps, AppState> {
     const [resizeX, resizeY] = getGridPoint(
       pointerCoords.x - pointerDownState.resize.offset.x,
       pointerCoords.y - pointerDownState.resize.offset.y,
-      this.state.gridSize,
+      event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize,
     );
 
     const frameElementsOffsetsMap = new Map<

src/components/ColorPicker/ColorInput.tsx

@@ -15,9 +15,15 @@ interface ColorInputProps {
   color: string;
   onChange: (color: string) => void;
   label: string;
+  eyeDropperType: "strokeColor" | "backgroundColor";
 }
 
-export const ColorInput = ({ color, onChange, label }: ColorInputProps) => {
+export const ColorInput = ({
+  color,
+  onChange,
+  label,
+  eyeDropperType,
+}: ColorInputProps) => {
   const device = useDevice();
   const [innerValue, setInnerValue] = useState(color);
   const [activeSection, setActiveColorPickerSection] = useAtom(
@@ -110,6 +116,7 @@ export const ColorInput = ({ color, onChange, label }: ColorInputProps) => {
                   : {
                       keepOpenOnAlt: false,
                       onSelect: (color) => onChange(color),
+                      previewType: eyeDropperType,
                     },
               )
             }

src/components/ColorPicker/ColorPicker.tsx

@@ -82,7 +82,14 @@ const ColorPickerPopupContent = ({
   const { container } = useExcalidrawContainer();
   const { isMobile, isLandscape } = useDevice();
 
-  const colorInputJSX = (
+  const eyeDropperType =
+    type === "canvasBackground"
+      ? undefined
+      : type === "elementBackground"
+      ? "backgroundColor"
+      : "strokeColor";
+
+  const colorInputJSX = eyeDropperType && (
     <div>
       <PickerHeading>{t("colorPicker.hexCode")}</PickerHeading>
       <ColorInput
@@ -91,6 +98,7 @@ const ColorPickerPopupContent = ({
         onChange={(color) => {
           onChange(color);
         }}
+        eyeDropperType={eyeDropperType}
       />
     </div>
   );
@@ -140,7 +148,7 @@ const ColorPickerPopupContent = ({
         alignOffset={-16}
         sideOffset={20}
         style={{
-          zIndex: 9999,
+          zIndex: "var(--zIndex-layerUI)",
           backgroundColor: "var(--popup-bg-color)",
           maxWidth: "208px",
           maxHeight: window.innerHeight,
@@ -152,7 +160,7 @@ const ColorPickerPopupContent = ({
             "0px 7px 14px rgba(0, 0, 0, 0.05), 0px 0px 3.12708px rgba(0, 0, 0, 0.0798), 0px 0px 0.931014px rgba(0, 0, 0, 0.1702)",
         }}
       >
-        {palette ? (
+        {palette && eyeDropperType ? (
           <Picker
             palette={palette}
             color={color}
@@ -165,6 +173,7 @@ const ColorPickerPopupContent = ({
                   state = state || {
                     keepOpenOnAlt: true,
                     onSelect: onChange,
+                    previewType: eyeDropperType,
                   };
                   state.keepOpenOnAlt = true;
                   return state;
@@ -175,6 +184,7 @@ const ColorPickerPopupContent = ({
                   : {
                       keepOpenOnAlt: false,
                       onSelect: onChange,
+                      previewType: eyeDropperType,
                     };
               });
             }}

src/components/ExcalidrawLogo.scss

@@ -0,0 +1,73 @@
+.excalidraw {
+  .ExcalidrawLogo {
+    --logo-icon--xs: 2rem;
+    --logo-text--xs: 1.5rem;
+
+    --logo-icon--small: 2.5rem;
+    --logo-text--small: 1.75rem;
+
+    --logo-icon--normal: 3rem;
+    --logo-text--normal: 2.2rem;
+
+    --logo-icon--large: 90px;
+    --logo-text--large: 65px;
+
+    display: flex;
+    align-items: center;
+
+    svg {
+      flex: 0 0 auto;
+    }
+
+    .ExcalidrawLogo-icon {
+      width: auto;
+      color: var(--color-logo-icon);
+    }
+
+    .ExcalidrawLogo-text {
+      margin-left: 0.75rem;
+      width: auto;
+      color: var(--color-logo-text);
+    }
+
+    &.is-xs {
+      .ExcalidrawLogo-icon {
+        height: var(--logo-icon--xs);
+      }
+
+      .ExcalidrawLogo-text {
+        height: var(--logo-text--xs);
+      }
+    }
+
+    &.is-small {
+      .ExcalidrawLogo-icon {
+        height: var(--logo-icon--small);
+      }
+
+      .ExcalidrawLogo-text {
+        height: var(--logo-text--small);
+      }
+    }
+
+    &.is-normal {
+      .ExcalidrawLogo-icon {
+        height: var(--logo-icon--normal);
+      }
+
+      .ExcalidrawLogo-text {
+        height: var(--logo-text--normal);
+      }
+    }
+
+    &.is-large {
+      .ExcalidrawLogo-icon {
+        height: var(--logo-icon--large);
+      }
+
+      .ExcalidrawLogo-text {
+        height: var(--logo-text--large);
+      }
+    }
+  }
+}

src/components/EyeDropper.scss

@@ -4,7 +4,7 @@
     position: absolute;
     width: 100%;
     height: 100%;
-    z-index: 2;
+    z-index: var(--zIndex-eyeDropperBackdrop);
     touch-action: none;
   }
 
@@ -21,7 +21,7 @@
     width: 3rem;
     height: 3rem;
     position: fixed;
-    z-index: 999999;
+    z-index: var(--zIndex-eyeDropperPreview);
     border-radius: 1rem;
     border: 1px solid var(--default-border-color);
     filter: var(--theme-filter);

src/components/EyeDropper.tsx

@@ -1,7 +1,7 @@
 import { atom } from "jotai";
 import { useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
-import { COLOR_PALETTE, rgbToHex } from "../colors";
+import { rgbToHex } from "../colors";
 import { EVENT } from "../constants";
 import { useUIAppState } from "../context/ui-appState";
 import { mutateElement } from "../element/mutateElement";
@@ -18,8 +18,8 @@ import "./EyeDropper.scss";
 type EyeDropperProperties = {
   keepOpenOnAlt: boolean;
   swapPreviewOnAlt?: boolean;
-  onSelect?: (color: string, event: PointerEvent) => void;
-  previewType?: "strokeColor" | "backgroundColor";
+  onSelect: (color: string, event: PointerEvent) => void;
+  previewType: "strokeColor" | "backgroundColor";
 };
 
 export const activeEyeDropperAtom = atom<null | EyeDropperProperties>(null);
@@ -28,13 +28,8 @@ export const EyeDropper: React.FC<{
   onCancel: () => void;
   onSelect: Required<EyeDropperProperties>["onSelect"];
   swapPreviewOnAlt?: EyeDropperProperties["swapPreviewOnAlt"];
-  previewType?: EyeDropperProperties["previewType"];
-}> = ({
-  onCancel,
-  onSelect,
-  swapPreviewOnAlt,
-  previewType = "backgroundColor",
-}) => {
+  previewType: EyeDropperProperties["previewType"];
+}> = ({ onCancel, onSelect, swapPreviewOnAlt, previewType }) => {
   const eyeDropperContainer = useCreatePortalContainer({
     className: "excalidraw-eye-dropper-backdrop",
     parentSelector: ".excalidraw-eye-dropper-container",
@@ -58,24 +53,17 @@ export const EyeDropper: React.FC<{
       return;
     }
 
-    let currentColor: string = COLOR_PALETTE.black;
     let isHoldingPointerDown = false;
 
     const ctx = app.canvas.getContext("2d")!;
 
-    const mouseMoveListener = ({
+    const getCurrentColor = ({
       clientX,
       clientY,
-      altKey,
     }: {
       clientX: number;
       clientY: number;
-      altKey: boolean;
     }) => {
-      // FIXME swap offset when the preview gets outside viewport
-      colorPreviewDiv.style.top = `${clientY + 20}px`;
-      colorPreviewDiv.style.left = `${clientX + 20}px`;
-
       const pixel = ctx.getImageData(
         (clientX - appState.offsetLeft) * window.devicePixelRatio,
         (clientY - appState.offsetTop) * window.devicePixelRatio,
@@ -83,7 +71,23 @@ export const EyeDropper: React.FC<{
         1,
       ).data;
 
-      currentColor = rgbToHex(pixel[0], pixel[1], pixel[2]);
+      return rgbToHex(pixel[0], pixel[1], pixel[2]);
+    };
+
+    const mouseMoveListener = ({
+      clientX,
+      clientY,
+      altKey,
+    }: {
+      clientX: number;
+      clientY: number;
+      altKey: boolean;
+    }) => {
+      // FIXME swap offset when the preview gets outside viewport
+      colorPreviewDiv.style.top = `${clientY + 20}px`;
+      colorPreviewDiv.style.left = `${clientX + 20}px`;
+
+      const currentColor = getCurrentColor({ clientX, clientY });
 
       if (isHoldingPointerDown) {
         for (const element of metaStuffRef.current.selectedElements) {
@@ -125,7 +129,7 @@ export const EyeDropper: React.FC<{
       event.stopImmediatePropagation();
       event.preventDefault();
 
-      onSelect(currentColor, event);
+      onSelect(getCurrentColor(event), event);
     };
 
     const keyDownListener = (event: KeyboardEvent) => {

src/components/FixedSideContainer.scss

@@ -7,7 +7,7 @@
   }
 
   .FixedSideContainer > * {
-    pointer-events: all;
+    pointer-events: var(--ui-pointerEvents);
   }
 
   .FixedSideContainer_side_top {

src/components/HintViewer.tsx

@@ -83,27 +83,36 @@ const getHints = ({ appState, isMobile, device, app }: HintViewerProps) => {
   if (activeTool.type === "selection") {
     if (
       appState.draggingElement?.type === "selection" &&
+      !selectedElements.length &&
       !appState.editingElement &&
       !appState.editingLinearElement
     ) {
       return t("hints.deepBoxSelect");
     }
+
+    if (appState.gridSize && appState.draggingElement) {
+      return t("hints.disableSnapping");
+    }
+
     if (!selectedElements.length && !isMobile) {
       return t("hints.canvasPanning");
     }
-  }
 
-  if (selectedElements.length === 1) {
-    if (isLinearElement(selectedElements[0])) {
-      if (appState.editingLinearElement) {
-        return appState.editingLinearElement.selectedPointsIndices
-          ? t("hints.lineEditor_pointSelected")
-          : t("hints.lineEditor_nothingSelected");
+    if (selectedElements.length === 1) {
+      if (isLinearElement(selectedElements[0])) {
+        if (appState.editingLinearElement) {
+          return appState.editingLinearElement.selectedPointsIndices
+            ? t("hints.lineEditor_pointSelected")
+            : t("hints.lineEditor_nothingSelected");
+        }
+        return t("hints.lineEditor_info");
+      }
+      if (
+        !appState.draggingElement &&
+        isTextBindableContainer(selectedElements[0])
+      ) {
+        return t("hints.bindTextToElement");
       }
-      return t("hints.lineEditor_info");
-    }
-    if (isTextBindableContainer(selectedElements[0])) {
-      return t("hints.bindTextToElement");
     }
   }
 

src/components/LayerUI.scss

@@ -56,34 +56,52 @@
     }
 
     .disable-zen-mode {
-      height: 30px;
+      padding: 10px;
       position: absolute;
-      bottom: 10px;
+      bottom: 0;
       [dir="ltr"] & {
-        right: 15px;
+        right: 1rem;
       }
       [dir="rtl"] & {
-        left: 15px;
+        left: 1rem;
       }
-      font-size: 10px;
-      padding: 10px;
-      font-weight: 500;
       opacity: 0;
       visibility: hidden;
       transition: visibility 0s linear 0s, opacity 0.5s;
 
+      font-family: var(--ui-font);
+      font-size: 0.75rem;
+      font-weight: 500;
+      line-height: 1;
+
+      border-radius: var(--border-radius-lg);
+      border: 1px solid var(--default-border-color);
+      background-color: var(--island-bg-color);
+      color: var(--text-primary-color);
+
+      &:hover {
+        background-color: var(--button-hover-bg);
+      }
+      &:active {
+        border-color: var(--color-primary);
+      }
+
       &--visible {
         opacity: 1;
         visibility: visible;
         transition: visibility 0s linear 300ms, opacity 0.5s;
         transition-delay: 0.8s;
+
+        pointer-events: var(--ui-pointerEvents);
       }
     }
 
     .layer-ui__wrapper__footer-left,
-    .layer-ui__wrapper__footer-right,
-    .disable-zen-mode--visible {
-      pointer-events: all;
+    .footer-center,
+    .layer-ui__wrapper__footer-right {
+      & > * {
+        pointer-events: var(--ui-pointerEvents);
+      }
     }
 
     .layer-ui__wrapper__footer-right {

src/components/LayerUI.tsx

@@ -2,7 +2,7 @@ import clsx from "clsx";
 import React from "react";
 import { ActionManager } from "../actions/manager";
 import { CLASSES, DEFAULT_SIDEBAR, LIBRARY_SIDEBAR_WIDTH } from "../constants";
-import { isTextElement, showSelectedShapeActions } from "../element";
+import { showSelectedShapeActions } from "../element";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { Language, t } from "../i18n";
 import { calculateScrollCenter } from "../scene";
@@ -427,13 +427,7 @@ const LayerUI = ({
       {!device.isMobile && (
         <>
           <div
-            className={clsx("layer-ui__wrapper", {
-              "disable-pointerEvents":
-                appState.draggingElement ||
-                appState.resizingElement ||
-                (appState.editingElement &&
-                  !isTextElement(appState.editingElement)),
-            })}
+            className="layer-ui__wrapper"
             style={
               appState.openSidebar &&
               isSidebarDocked &&

src/components/Sidebar/Sidebar.scss

@@ -17,6 +17,8 @@
     background-color: var(--sidebar-bg-color);
     box-shadow: var(--sidebar-shadow);
 
+    pointer-events: var(--ui-pointerEvents);
+
     :root[dir="rtl"] & {
       left: 0;
       right: auto;

src/components/Sidebar/SidebarTrigger.scss

@@ -25,10 +25,10 @@
   }
 
   .default-sidebar-trigger .sidebar-trigger__label {
-    display: none;
+    display: block;
+  }
 
-    @media screen and (min-width: 1024px) {
-      display: block;
-    }
+  &.excalidraw--mobile .default-sidebar-trigger .sidebar-trigger__label {
+    display: none;
   }
 }

src/components/Stats.scss

@@ -7,7 +7,7 @@
     right: 12px;
     font-size: 12px;
     z-index: 10;
-    pointer-events: all;
+    pointer-events: var(--ui-pointerEvents);
 
     h3 {
       margin: 0 24px 8px 0;

src/components/UserList.scss

@@ -26,7 +26,7 @@
   }
 
   .UserList > * {
-    pointer-events: all;
+    pointer-events: var(--ui-pointerEvents);
   }
 
   .UserList_mobile {

src/components/canvases/StaticCanvas.tsx

@@ -37,10 +37,25 @@ const StaticCanvas = (props: StaticCanvasProps) => {
       canvas.classList.add("excalidraw__canvas", "static");
     }
 
-    canvas.style.width = `${props.appState.width}px`;
-    canvas.style.height = `${props.appState.height}px`;
-    canvas.width = props.appState.width * props.scale;
-    canvas.height = props.appState.height * props.scale;
+    const widthString = `${props.appState.width}px`;
+    const heightString = `${props.appState.height}px`;
+    if (canvas.style.width !== widthString) {
+      canvas.style.width = widthString;
+    }
+    if (canvas.style.height !== heightString) {
+      canvas.style.height = heightString;
+    }
+
+    const scaledWidth = props.appState.width * props.scale;
+    const scaledHeight = props.appState.height * props.scale;
+    // setting width/height resets the canvas even if dimensions not changed,
+    // which would cause flicker when we skip frame (due to throttling)
+    if (canvas.width !== scaledWidth) {
+      canvas.width = scaledWidth;
+    }
+    if (canvas.height !== scaledHeight) {
+      canvas.height = scaledHeight;
+    }
 
     renderStaticScene(
       {

src/components/footer/Footer.tsx

@@ -73,7 +73,7 @@ const Footer = ({
       <FooterCenterTunnel.Out />
       <div
         className={clsx("layer-ui__wrapper__footer-right zen-mode-transition", {
-          "transition-right disable-pointerEvents": appState.zenModeEnabled,
+          "transition-right": appState.zenModeEnabled,
         })}
       >
         <div style={{ position: "relative" }}>

src/components/footer/FooterCenter.scss

@@ -1,10 +1,11 @@
 .footer-center {
   pointer-events: none;
   & > * {
-    pointer-events: all;
+    pointer-events: var(--ui-pointerEvents);
   }
 
   display: flex;
   width: 100%;
   justify-content: flex-start;
+  margin-inline-end: 0.6rem;
 }

src/components/welcome-screen/WelcomeScreen.Center.tsx

@@ -3,8 +3,9 @@ import { getShortcutFromShortcutName } from "../../actions/shortcuts";
 import { t, useI18n } from "../../i18n";
 import { useDevice, useExcalidrawActionManager } from "../App";
 import { useTunnels } from "../../context/tunnels";
-import { ExcalLogo, HelpIcon, LoadIcon, usersIcon } from "../icons";
+import { HelpIcon, LoadIcon, usersIcon } from "../icons";
 import { useUIAppState } from "../../context/ui-appState";
+import { ExcalidrawLogo } from "../ExcalidrawLogo";
 
 const WelcomeScreenMenuItemContent = ({
   icon,
@@ -109,7 +110,7 @@ Center.displayName = "Center";
 const Logo = ({ children }: { children?: React.ReactNode }) => {
   return (
     <div className="welcome-screen-center__logo virgil welcome-screen-decor">
-      {children || <>{ExcalLogo} Excalidraw</>}
+      {children || <ExcalidrawLogo withText />}
     </div>
   );
 };

src/components/welcome-screen/WelcomeScreen.scss

@@ -10,6 +10,13 @@
     pointer-events: none;
 
     color: var(--color-gray-40);
+
+    a {
+      --color: var(--color-primary);
+      color: var(--color);
+      text-decoration: none;
+      margin-bottom: -6px;
+    }
   }
 
   &.theme--dark {
@@ -136,11 +143,6 @@
     align-items: center;
     column-gap: 0.75rem;
     font-size: 2.25rem;
-
-    svg {
-      width: 1.625rem;
-      height: auto;
-    }
   }
 
   .welcome-screen-center__heading {
@@ -159,7 +161,7 @@
   .welcome-screen-menu-item {
     box-sizing: border-box;
 
-    pointer-events: all;
+    pointer-events: var(--ui-pointerEvents);
 
     color: var(--color-gray-50);
     font-size: 0.875rem;
@@ -200,7 +202,7 @@
     }
   }
 
-  &:not(:active) .welcome-screen-menu-item:hover {
+  .welcome-screen-menu-item:hover {
     text-decoration: none;
     background: var(--color-gray-10);
 
@@ -244,7 +246,7 @@
       }
     }
 
-    &:not(:active) .welcome-screen-menu-item:hover {
+    .welcome-screen-menu-item:hover {
       background: var(--color-gray-85);
 
       .welcome-screen-menu-item__shortcut {

src/constants.ts

@@ -41,6 +41,14 @@ export const POINTER_BUTTON = {
   TOUCH: -1,
 } as const;
 
+export const POINTER_EVENTS = {
+  enabled: "all",
+  disabled: "none",
+  // asserted as any so it can be freely assigned to React Element
+  // "pointerEnvets" CSS prop
+  inheritFromUI: "var(--ui-pointerEvents)" as any,
+} as const;
+
 export enum EVENT {
   COPY = "copy",
   PASTE = "paste",

src/css/styles.scss

@@ -6,6 +6,8 @@
   --zIndex-interactiveCanvas: 2;
   --zIndex-wysiwyg: 3;
   --zIndex-layerUI: 4;
+  --zIndex-eyeDropperBackdrop: 5;
+  --zIndex-eyeDropperPreview: 6;
 
   --zIndex-modal: 1000;
   --zIndex-popup: 1001;
@@ -251,7 +253,7 @@
       max-height: 100%;
       display: flex;
       flex-direction: column;
-      pointer-events: initial;
+      pointer-events: var(--ui-pointerEvents);
 
       .panelColumn {
         padding: 8px 8px 0 8px;
@@ -299,7 +301,7 @@
     pointer-events: none !important;
 
     & > * {
-      pointer-events: all;
+      pointer-events: var(--ui-pointerEvents);
     }
   }
 
@@ -310,16 +312,16 @@
     cursor: default;
     pointer-events: none !important;
 
+    & > * {
+      pointer-events: var(--ui-pointerEvents);
+    }
+
     @media (min-width: 1536px) {
       grid-template-columns: 1fr 1fr 1fr;
       grid-gap: 3rem;
     }
   }
 
-  .layer-ui__wrapper:not(.disable-pointerEvents) .App-menu_top > * {
-    pointer-events: all;
-  }
-
   .App-menu_top > *:first-child {
     justify-self: flex-start;
   }
@@ -423,17 +425,6 @@
     }
   }
 
-  .disable-zen-mode {
-    border-radius: var(--border-radius-lg);
-    background-color: var(--color-gray-20);
-    border: 1px solid var(--color-gray-30);
-    padding: 10px 20px;
-
-    &:hover {
-      background-color: var(--color-gray-30);
-    }
-  }
-
   .scroll-back-to-content {
     border-radius: var(--border-radius-lg);
     background-color: var(--island-bg-color);
@@ -445,7 +436,7 @@
     left: 50%;
     bottom: 30px;
     transform: translateX(-50%);
-    pointer-events: all;
+    pointer-events: var(--ui-pointerEvents);
     font-family: inherit;
 
     &:hover {

src/css/theme.scss

@@ -126,6 +126,9 @@
   --color-success: #268029;
   --color-success-lighter: #cafccc;
 
+  --color-logo-icon: var(--color-primary);
+  --color-logo-text: #190064;
+
   --border-radius-md: 0.375rem;
   --border-radius-lg: 0.5rem;
 
@@ -219,5 +222,7 @@
     --color-muted-background-darker: var(--color-gray-20);
 
     --color-promo: #d297ff;
+
+    --color-logo-text: #e2dfff;
   }
 }

src/element/linearElementEditor.ts

@@ -42,7 +42,7 @@ import {
 } from "./binding";
 import { tupleToCoors } from "../utils";
 import { isBindingElement } from "./typeChecks";
-import { shouldRotateWithDiscreteAngle } from "../keys";
+import { KEYS, shouldRotateWithDiscreteAngle } from "../keys";
 import { getBoundTextElement, handleBindTextResize } from "./textElement";
 import { DRAGGING_THRESHOLD } from "../constants";
 import { Mutable } from "../utility-types";
@@ -221,7 +221,7 @@ export class LinearElementEditor {
           element,
           referencePoint,
           [scenePointerX, scenePointerY],
-          appState.gridSize,
+          event[KEYS.CTRL_OR_CMD] ? null : appState.gridSize,
         );
 
         LinearElementEditor.movePoints(element, [
@@ -238,7 +238,7 @@ export class LinearElementEditor {
           element,
           scenePointerX - linearElementEditor.pointerOffset.x,
           scenePointerY - linearElementEditor.pointerOffset.y,
-          appState.gridSize,
+          event[KEYS.CTRL_OR_CMD] ? null : appState.gridSize,
         );
 
         const deltaX = newDraggingPointPosition[0] - draggingPoint[0];
@@ -254,7 +254,7 @@ export class LinearElementEditor {
                     element,
                     scenePointerX - linearElementEditor.pointerOffset.x,
                     scenePointerY - linearElementEditor.pointerOffset.y,
-                    appState.gridSize,
+                    event[KEYS.CTRL_OR_CMD] ? null : appState.gridSize,
                   )
                 : ([
                     element.points[pointIndex][0] + deltaX,
@@ -647,7 +647,7 @@ export class LinearElementEditor {
               element,
               scenePointer.x,
               scenePointer.y,
-              appState.gridSize,
+              event[KEYS.CTRL_OR_CMD] ? null : appState.gridSize,
             ),
           ],
         });
@@ -798,7 +798,7 @@ export class LinearElementEditor {
         element,
         lastCommittedPoint,
         [scenePointerX, scenePointerY],
-        appState.gridSize,
+        event[KEYS.CTRL_OR_CMD] ? null : appState.gridSize,
       );
 
       newPoint = [
@@ -810,7 +810,7 @@ export class LinearElementEditor {
         element,
         scenePointerX - appState.editingLinearElement.pointerOffset.x,
         scenePointerY - appState.editingLinearElement.pointerOffset.y,
-        appState.gridSize,
+        event[KEYS.CTRL_OR_CMD] ? null : appState.gridSize,
       );
     }
 
@@ -1176,6 +1176,7 @@ export class LinearElementEditor {
     linearElementEditor: LinearElementEditor,
     pointerCoords: PointerCoords,
     appState: AppState,
+    snapToGrid: boolean,
   ) {
     const element = LinearElementEditor.getElement(
       linearElementEditor.elementId,
@@ -1196,7 +1197,7 @@ export class LinearElementEditor {
       element,
       pointerCoords.x,
       pointerCoords.y,
-      appState.gridSize,
+      snapToGrid ? appState.gridSize : null,
     );
     const points = [
       ...element.points.slice(0, segmentMidpoint.index!),

src/element/textWysiwyg.test.tsx

@@ -1509,4 +1509,30 @@ describe("textWysiwyg", () => {
       expect(text.text).toBe("Excalidraw");
     });
   });
+
+  it("should bump the version of labelled arrow when label updated", async () => {
+    await render(<ExcalidrawApp />);
+    const arrow = UI.createElement("arrow", {
+      width: 300,
+      height: 0,
+    });
+
+    mouse.select(arrow);
+    Keyboard.keyPress(KEYS.ENTER);
+    let editor = getTextEditor();
+    await new Promise((r) => setTimeout(r, 0));
+    updateTextEditor(editor, "Hello");
+    editor.blur();
+
+    const { version } = arrow;
+
+    mouse.select(arrow);
+    Keyboard.keyPress(KEYS.ENTER);
+    editor = getTextEditor();
+    await new Promise((r) => setTimeout(r, 0));
+    updateTextEditor(editor, "Hello\nworld!");
+    editor.blur();
+
+    expect(arrow.version).toEqual(version + 1);
+  });
 });

src/element/textWysiwyg.tsx

@@ -20,7 +20,7 @@ import {
   ExcalidrawTextContainer,
 } from "./types";
 import { AppState } from "../types";
-import { mutateElement } from "./mutateElement";
+import { bumpVersion, mutateElement } from "./mutateElement";
 import {
   getBoundTextElementId,
   getContainerElement,
@@ -541,6 +541,9 @@ export const textWysiwyg = ({
               id: element.id,
             }),
           });
+        } else if (isArrowElement(container)) {
+          // updating an arrow label may change bounds, prevent stale cache:
+          bumpVersion(container);
         }
       } else {
         mutateElement(container, {

src/element/typeChecks.ts

@@ -121,6 +121,7 @@ export const isBindableElement = (
       element.type === "ellipse" ||
       element.type === "image" ||
       element.type === "embeddable" ||
+      element.type === "frame" ||
       (element.type === "text" && !element.containerId))
   );
 };

src/excalidraw-app/components/AppFooter.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Footer } from "../../packages/excalidraw/index";
 import { EncryptedIcon } from "./EncryptedIcon";
 import { ExcalidrawPlusAppLink } from "./ExcalidrawPlusAppLink";
+import { isExcalidrawPlusSignedUser } from "../app_constants";
 
 export const AppFooter = React.memo(() => {
   return (
@@ -13,8 +14,11 @@ export const AppFooter = React.memo(() => {
           alignItems: "center",
         }}
       >
-        <ExcalidrawPlusAppLink />
-        <EncryptedIcon />
+        {isExcalidrawPlusSignedUser ? (
+          <ExcalidrawPlusAppLink />
+        ) : (
+          <EncryptedIcon />
+        )}
       </div>
     </Footer>
   );

src/excalidraw-app/components/AppMainMenu.tsx

@@ -26,7 +26,9 @@ export const AppMainMenu: React.FC<{
       <MainMenu.Separator />
       <MainMenu.ItemLink
         icon={PlusPromoIcon}
-        href="https://plus.excalidraw.com/plus?utm_source=excalidraw&utm_medium=app&utm_content=hamburger"
+        href={`${
+          import.meta.env.VITE_APP_PLUS_LP
+        }/plus?utm_source=excalidraw&utm_medium=app&utm_content=hamburger`}
         className="ExcalidrawPlus"
       >
         Excalidraw+

src/excalidraw-app/components/AppWelcomeScreen.tsx

@@ -3,6 +3,7 @@ import { PlusPromoIcon } from "../../components/icons";
 import { useI18n } from "../../i18n";
 import { WelcomeScreen } from "../../packages/excalidraw/index";
 import { isExcalidrawPlusSignedUser } from "../app_constants";
+import { POINTER_EVENTS } from "../../constants";
 
 export const AppWelcomeScreen: React.FC<{
   setCollabDialogShown: (toggle: boolean) => any;
@@ -18,7 +19,7 @@ export const AppWelcomeScreen: React.FC<{
         if (bit === "Excalidraw+") {
           return (
             <a
-              style={{ pointerEvents: "all" }}
+              style={{ pointerEvents: POINTER_EVENTS.inheritFromUI }}
               href={`${
                 import.meta.env.VITE_APP_PLUS_APP
               }?utm_source=excalidraw&utm_medium=app&utm_content=welcomeScreenSignedInUser`}
@@ -56,7 +57,9 @@ export const AppWelcomeScreen: React.FC<{
           )}
           {!isExcalidrawPlusSignedUser && (
             <WelcomeScreen.Center.MenuItemLink
-              href="https://plus.excalidraw.com/plus?utm_source=excalidraw&utm_medium=app&utm_content=welcomeScreenGuest"
+              href={`${
+                import.meta.env.VITE_APP_PLUS_LP
+              }/plus?utm_source=excalidraw&utm_medium=app&utm_content=welcomeScreenGuest`}
               shortcut={null}
               icon={PlusPromoIcon}
             >

src/excalidraw-app/components/ExportToExcalidrawPlus.tsx

@@ -7,7 +7,6 @@ import { FileId, NonDeletedExcalidrawElement } from "../../element/types";
 import { AppState, BinaryFileData, BinaryFiles } from "../../types";
 import { nanoid } from "nanoid";
 import { useI18n } from "../../i18n";
-import { excalidrawPlusIcon } from "./icons";
 import { encryptData, generateEncryptionKey } from "../../data/encryption";
 import { isInitializedImageElement } from "../../element/typeChecks";
 import { FILE_UPLOAD_MAX_BYTES } from "../app_constants";
@@ -15,6 +14,7 @@ import { encodeFilesForUpload } from "../data/FileManager";
 import { MIME_TYPES } from "../../constants";
 import { trackEvent } from "../../analytics";
 import { getFrame } from "../../utils";
+import { ExcalidrawLogo } from "../../components/ExcalidrawLogo";
 
 export const exportToExcalidrawPlus = async (
   elements: readonly NonDeletedExcalidrawElement[],
@@ -69,7 +69,9 @@ export const exportToExcalidrawPlus = async (
   }
 
   window.open(
-    `https://plus.excalidraw.com/import?excalidraw=${id},${encryptionKey}`,
+    `${
+      import.meta.env.VITE_APP_PLUS_APP
+    }/import?excalidraw=${id},${encryptionKey}`,
   );
 };
 
@@ -82,7 +84,15 @@ export const ExportToExcalidrawPlus: React.FC<{
   const { t } = useI18n();
   return (
     <Card color="primary">
-      <div className="Card-icon">{excalidrawPlusIcon}</div>
+      <div className="Card-icon">
+        <ExcalidrawLogo
+          style={{
+            [`--color-logo-icon` as any]: "#fff",
+            width: "2.8rem",
+            height: "2.8rem",
+          }}
+        />
+      </div>
       <h2>Excalidraw+</h2>
       <div className="Card-details">
         {t("exportDialog.excalidrawplus_description")}

src/excalidraw-app/index.scss

@@ -77,13 +77,14 @@
   align-items: center;
   border: 1px solid var(--color-primary);
   padding: 0.5rem 0.75rem;
-  border-radius: var(--space-factor);
+  border-radius: var(--border-radius-lg);
+  background-color: var(--island-bg-color);
   color: var(--color-primary) !important;
   text-decoration: none !important;
 
   font-size: 0.75rem;
   box-sizing: border-box;
-  height: var(--default-button-size);
+  height: var(--lg-button-size);
 
   &:hover {
     background-color: var(--color-primary);

src/frame.test.tsx

@@ -0,0 +1,440 @@
+import { ExcalidrawElement } from "./element/types";
+import {
+  convertToExcalidrawElements,
+  Excalidraw,
+} from "./packages/excalidraw/index";
+import { API } from "./tests/helpers/api";
+import { Keyboard, Pointer } from "./tests/helpers/ui";
+import { render } from "./tests/test-utils";
+
+const { h } = window;
+const mouse = new Pointer("mouse");
+
+describe("adding elements to frames", () => {
+  type ElementType = string;
+  const assertOrder = (
+    els: readonly { type: ElementType }[],
+    order: ElementType[],
+  ) => {
+    expect(els.map((el) => el.type)).toEqual(order);
+  };
+
+  const reorderElements = <T extends { type: ElementType }>(
+    els: readonly T[],
+    order: ElementType[],
+  ) => {
+    return order.reduce((acc: T[], el) => {
+      acc.push(els.find((e) => e.type === el)!);
+      return acc;
+    }, []);
+  };
+
+  function resizeFrameOverElement(
+    frame: ExcalidrawElement,
+    element: ExcalidrawElement,
+  ) {
+    mouse.clickAt(0, 0);
+    mouse.downAt(frame.x + frame.width, frame.y + frame.height);
+    mouse.moveTo(
+      element.x + element.width + 50,
+      element.y + element.height + 50,
+    );
+    mouse.up();
+  }
+
+  function dragElementIntoFrame(
+    frame: ExcalidrawElement,
+    element: ExcalidrawElement,
+  ) {
+    mouse.clickAt(element.x, element.y);
+    mouse.downAt(element.x + element.width / 2, element.y + element.height / 2);
+    mouse.moveTo(frame.x + frame.width / 2, frame.y + frame.height / 2);
+    mouse.up();
+  }
+
+  function selectElementAndDuplicate(
+    element: ExcalidrawElement,
+    moveTo: [number, number] = [element.x + 25, element.y + 25],
+  ) {
+    const [x, y] = [
+      element.x + element.width / 2,
+      element.y + element.height / 2,
+    ];
+
+    Keyboard.withModifierKeys({ alt: true }, () => {
+      mouse.downAt(x, y);
+      mouse.moveTo(moveTo[0], moveTo[1]);
+      mouse.up();
+    });
+  }
+
+  function expectEqualIds(expected: ExcalidrawElement[]) {
+    expect(h.elements.map((x) => x.id)).toEqual(expected.map((x) => x.id));
+  }
+
+  let frame: ExcalidrawElement;
+  let rect1: ExcalidrawElement;
+  let rect2: ExcalidrawElement;
+  let rect3: ExcalidrawElement;
+  let rect4: ExcalidrawElement;
+  let text: ExcalidrawElement;
+  let arrow: ExcalidrawElement;
+
+  beforeEach(async () => {
+    await render(<Excalidraw />);
+
+    frame = API.createElement({ id: "id0", type: "frame", x: 0, width: 150 });
+    rect1 = API.createElement({
+      id: "id1",
+      type: "rectangle",
+      x: -1000,
+    });
+    rect2 = API.createElement({
+      id: "id2",
+      type: "rectangle",
+      x: 200,
+      width: 50,
+    });
+    rect3 = API.createElement({
+      id: "id3",
+      type: "rectangle",
+      x: 400,
+      width: 50,
+    });
+    rect4 = API.createElement({
+      id: "id4",
+      type: "rectangle",
+      x: 1000,
+      width: 50,
+    });
+    text = API.createElement({
+      id: "id5",
+      type: "text",
+      x: 100,
+    });
+    arrow = API.createElement({
+      id: "id6",
+      type: "arrow",
+      x: 100,
+      boundElements: [{ id: text.id, type: "text" }],
+    });
+  });
+
+  const commonTestCases = async (
+    func: typeof resizeFrameOverElement | typeof dragElementIntoFrame,
+  ) => {
+    describe("when frame is in a layer below", async () => {
+      it("should add an element", async () => {
+        h.elements = [frame, rect2];
+
+        func(frame, rect2);
+
+        expect(h.elements[0].frameId).toBe(frame.id);
+        expectEqualIds([rect2, frame]);
+      });
+
+      it("should add elements", async () => {
+        h.elements = [frame, rect2, rect3];
+
+        func(frame, rect2);
+        func(frame, rect3);
+
+        expect(rect2.frameId).toBe(frame.id);
+        expect(rect3.frameId).toBe(frame.id);
+        expectEqualIds([rect2, rect3, frame]);
+      });
+
+      it("should add elements when there are other other elements in between", async () => {
+        h.elements = [frame, rect1, rect2, rect4, rect3];
+
+        func(frame, rect2);
+        func(frame, rect3);
+
+        expect(rect2.frameId).toBe(frame.id);
+        expect(rect3.frameId).toBe(frame.id);
+        expectEqualIds([rect2, rect3, frame, rect1, rect4]);
+      });
+
+      it("should add elements when there are other elements in between and the order is reversed", async () => {
+        h.elements = [frame, rect3, rect4, rect2, rect1];
+
+        func(frame, rect2);
+        func(frame, rect3);
+
+        expect(rect2.frameId).toBe(frame.id);
+        expect(rect3.frameId).toBe(frame.id);
+        expectEqualIds([rect2, rect3, frame, rect4, rect1]);
+      });
+    });
+
+    describe("when frame is in a layer above", async () => {
+      it("should add an element", async () => {
+        h.elements = [rect2, frame];
+
+        func(frame, rect2);
+
+        expect(h.elements[0].frameId).toBe(frame.id);
+        expectEqualIds([rect2, frame]);
+      });
+
+      it("should add elements", async () => {
+        h.elements = [rect2, rect3, frame];
+
+        func(frame, rect2);
+        func(frame, rect3);
+
+        expect(rect2.frameId).toBe(frame.id);
+        expect(rect3.frameId).toBe(frame.id);
+        expectEqualIds([rect3, rect2, frame]);
+      });
+
+      it("should add elements when there are other other elements in between", async () => {
+        h.elements = [rect1, rect2, rect4, rect3, frame];
+
+        func(frame, rect2);
+        func(frame, rect3);
+
+        expect(rect2.frameId).toBe(frame.id);
+        expect(rect3.frameId).toBe(frame.id);
+        expectEqualIds([rect1, rect4, rect3, rect2, frame]);
+      });
+
+      it("should add elements when there are other elements in between and the order is reversed", async () => {
+        h.elements = [rect3, rect4, rect2, rect1, frame];
+
+        func(frame, rect2);
+        func(frame, rect3);
+
+        expect(rect2.frameId).toBe(frame.id);
+        expect(rect3.frameId).toBe(frame.id);
+        expectEqualIds([rect4, rect1, rect3, rect2, frame]);
+      });
+    });
+
+    describe("when frame is in an inner layer", async () => {
+      it("should add elements", async () => {
+        h.elements = [rect2, frame, rect3];
+
+        func(frame, rect2);
+        func(frame, rect3);
+
+        expect(rect2.frameId).toBe(frame.id);
+        expect(rect3.frameId).toBe(frame.id);
+        expectEqualIds([rect2, rect3, frame]);
+      });
+
+      it("should add elements when there are other other elements in between", async () => {
+        h.elements = [rect2, rect1, frame, rect4, rect3];
+
+        func(frame, rect2);
+        func(frame, rect3);
+
+        expect(rect2.frameId).toBe(frame.id);
+        expect(rect3.frameId).toBe(frame.id);
+        expectEqualIds([rect1, rect2, rect3, frame, rect4]);
+      });
+
+      it("should add elements when there are other elements in between and the order is reversed", async () => {
+        h.elements = [rect3, rect4, frame, rect2, rect1];
+
+        func(frame, rect2);
+        func(frame, rect3);
+
+        expect(rect2.frameId).toBe(frame.id);
+        expect(rect3.frameId).toBe(frame.id);
+        expectEqualIds([rect4, rect3, rect2, frame, rect1]);
+      });
+    });
+  };
+
+  const resizingTest = async (
+    containerType: "arrow" | "rectangle",
+    initialOrder: ElementType[],
+    expectedOrder: ElementType[],
+  ) => {
+    await render(<Excalidraw />);
+
+    const frame = API.createElement({ type: "frame", x: 0, y: 0 });
+
+    h.elements = reorderElements(
+      [
+        frame,
+        ...convertToExcalidrawElements([
+          {
+            type: containerType,
+            x: 100,
+            y: 100,
+            height: 10,
+            label: { text: "xx" },
+          },
+        ]),
+      ],
+      initialOrder,
+    );
+
+    assertOrder(h.elements, initialOrder);
+
+    expect(h.elements[1].frameId).toBe(null);
+    expect(h.elements[2].frameId).toBe(null);
+
+    const container = h.elements[1];
+
+    resizeFrameOverElement(frame, container);
+    assertOrder(h.elements, expectedOrder);
+
+    expect(h.elements[0].frameId).toBe(frame.id);
+    expect(h.elements[1].frameId).toBe(frame.id);
+  };
+
+  describe("resizing frame over elements", async () => {
+    await commonTestCases(resizeFrameOverElement);
+
+    it("resizing over text containers and labelled arrows", async () => {
+      await resizingTest(
+        "rectangle",
+        ["frame", "rectangle", "text"],
+        ["rectangle", "text", "frame"],
+      );
+      await resizingTest(
+        "rectangle",
+        ["frame", "text", "rectangle"],
+        ["rectangle", "text", "frame"],
+      );
+      await resizingTest(
+        "rectangle",
+        ["rectangle", "text", "frame"],
+        ["rectangle", "text", "frame"],
+      );
+      await resizingTest(
+        "rectangle",
+        ["text", "rectangle", "frame"],
+        ["rectangle", "text", "frame"],
+      );
+      await resizingTest(
+        "arrow",
+        ["frame", "arrow", "text"],
+        ["arrow", "text", "frame"],
+      );
+      await resizingTest(
+        "arrow",
+        ["text", "arrow", "frame"],
+        ["arrow", "text", "frame"],
+      );
+      await resizingTest(
+        "arrow",
+        ["frame", "arrow", "text"],
+        ["arrow", "text", "frame"],
+      );
+
+      // FIXME failing in tests (it fails to add elements to frame for some
+      // reason) but works in browser. (╯°□°)╯︵ ┻━┻
+      //
+      // Looks like the `getElementsCompletelyInFrame()` doesn't work
+      // in these cases.
+      //
+      // await testElements(
+      //   "arrow",
+      //   ["arrow", "text", "frame"],
+      //   ["arrow", "text", "frame"],
+      // );
+    });
+
+    it("should add arrow bound with text when frame is in a layer below", async () => {
+      h.elements = [frame, arrow, text];
+
+      resizeFrameOverElement(frame, arrow);
+
+      expect(arrow.frameId).toBe(frame.id);
+      expect(text.frameId).toBe(frame.id);
+      expectEqualIds([arrow, text, frame]);
+    });
+
+    it("should add arrow bound with text when frame is in a layer above", async () => {
+      h.elements = [arrow, text, frame];
+
+      resizeFrameOverElement(frame, arrow);
+
+      expect(arrow.frameId).toBe(frame.id);
+      expect(text.frameId).toBe(frame.id);
+      expectEqualIds([arrow, text, frame]);
+    });
+
+    it("should add arrow bound with text when frame is in an inner layer", async () => {
+      h.elements = [arrow, frame, text];
+
+      resizeFrameOverElement(frame, arrow);
+
+      expect(arrow.frameId).toBe(frame.id);
+      expect(text.frameId).toBe(frame.id);
+      expectEqualIds([arrow, text, frame]);
+    });
+  });
+
+  describe("resizing frame over elements but downwards", async () => {
+    it("should add elements when frame is in a layer below", async () => {
+      h.elements = [frame, rect1, rect2, rect3, rect4];
+
+      resizeFrameOverElement(frame, rect4);
+      resizeFrameOverElement(frame, rect3);
+
+      expect(rect2.frameId).toBe(frame.id);
+      expect(rect3.frameId).toBe(frame.id);
+      expectEqualIds([rect2, rect3, frame, rect4, rect1]);
+    });
+
+    it("should add elements when frame is in a layer above", async () => {
+      h.elements = [rect1, rect2, rect3, rect4, frame];
+
+      resizeFrameOverElement(frame, rect4);
+      resizeFrameOverElement(frame, rect3);
+
+      expect(rect2.frameId).toBe(frame.id);
+      expect(rect3.frameId).toBe(frame.id);
+      expectEqualIds([rect1, rect2, rect3, frame, rect4]);
+    });
+
+    it("should add elements when frame is in an inner layer", async () => {
+      h.elements = [rect1, rect2, frame, rect3, rect4];
+
+      resizeFrameOverElement(frame, rect4);
+      resizeFrameOverElement(frame, rect3);
+
+      expect(rect2.frameId).toBe(frame.id);
+      expect(rect3.frameId).toBe(frame.id);
+      expectEqualIds([rect1, rect2, rect3, frame, rect4]);
+    });
+  });
+
+  describe("dragging elements into the frame", async () => {
+    await commonTestCases(dragElementIntoFrame);
+
+    it("should drag element inside, duplicate it and keep it in frame", () => {
+      h.elements = [frame, rect2];
+
+      dragElementIntoFrame(frame, rect2);
+
+      const rect2_copy = { ...rect2, id: `${rect2.id}_copy` };
+
+      selectElementAndDuplicate(rect2);
+
+      expect(rect2_copy.frameId).toBe(frame.id);
+      expect(rect2.frameId).toBe(frame.id);
+      expectEqualIds([rect2_copy, rect2, frame]);
+    });
+
+    it("should drag element inside, duplicate it and remove it from frame", () => {
+      h.elements = [frame, rect2];
+
+      dragElementIntoFrame(frame, rect2);
+
+      const rect2_copy = { ...rect2, id: `${rect2.id}_copy` };
+
+      // move the rect2 outside the frame
+      selectElementAndDuplicate(rect2, [-1000, -1000]);
+
+      expect(rect2_copy.frameId).toBe(frame.id);
+      expect(rect2.frameId).toBe(null);
+      expectEqualIds([rect2_copy, frame, rect2]);
+    });
+  });
+});

src/frame.ts

@@ -468,22 +468,39 @@ export const addElementsToFrame = (
     }
   }
 
-  let nextElements = allElements.slice();
-  // Optimisation since findIndex on "newElements" is slow
-  const nextElementsIndex = nextElements.reduce(
-    (acc: Record<string, number | undefined>, element, index) => {
+  const allElementsIndex = allElements.reduce(
+    (acc: Record<string, number>, element, index) => {
       acc[element.id] = index;
       return acc;
     },
     {},
   );
 
-  const frameBoundary = findIndex(nextElements, (e) => e.frameId === frame.id);
+  const frameIndex = allElementsIndex[frame.id];
+  // need to be calculated before the mutation below occurs
+  const leftFrameBoundaryIndex = findIndex(
+    allElements,
+    (e) => e.frameId === frame.id,
+  );
+
+  const existingFrameChildren = allElements.filter(
+    (element) => element.frameId === frame.id,
+  );
+
+  const addedFrameChildren_left: ExcalidrawElement[] = [];
+  const addedFrameChildren_right: ExcalidrawElement[] = [];
+
   for (const element of omitGroupsContainingFrames(
     allElements,
     _elementsToAdd,
   )) {
     if (element.frameId !== frame.id && !isFrameElement(element)) {
+      if (allElementsIndex[element.id] > frameIndex) {
+        addedFrameChildren_right.push(element);
+      } else {
+        addedFrameChildren_left.push(element);
+      }
+
       mutateElement(
         element,
         {
@@ -491,28 +508,35 @@ export const addElementsToFrame = (
         },
         false,
       );
-
-      const frameIndex = nextElementsIndex[frame.id] ?? -1;
-      const elementIndex = nextElementsIndex[element.id] ?? -1;
-
-      if (elementIndex < frameBoundary) {
-        nextElements = [
-          ...nextElements.slice(0, elementIndex),
-          ...nextElements.slice(elementIndex + 1, frameBoundary),
-          element,
-          ...nextElements.slice(frameBoundary),
-        ];
-      } else if (elementIndex > frameIndex) {
-        nextElements = [
-          ...nextElements.slice(0, frameIndex),
-          element,
-          ...nextElements.slice(frameIndex, elementIndex),
-          ...nextElements.slice(elementIndex + 1),
-        ];
-      }
     }
   }
 
+  const frameElement = allElements[frameIndex];
+  const nextFrameChildren = addedFrameChildren_left
+    .concat(existingFrameChildren)
+    .concat(addedFrameChildren_right);
+
+  const nextFrameChildrenMap = nextFrameChildren.reduce(
+    (acc: Record<string, boolean>, element) => {
+      acc[element.id] = true;
+      return acc;
+    },
+    {},
+  );
+
+  const nextOtherElements_left = allElements
+    .slice(0, leftFrameBoundaryIndex >= 0 ? leftFrameBoundaryIndex : frameIndex)
+    .filter((element) => !nextFrameChildrenMap[element.id]);
+
+  const nextOtherElement_right = allElements
+    .slice(frameIndex + 1)
+    .filter((element) => !nextFrameChildrenMap[element.id]);
+
+  const nextElements = nextOtherElements_left
+    .concat(nextFrameChildren)
+    .concat([frameElement])
+    .concat(nextOtherElement_right);
+
   return nextElements;
 };
 
@@ -526,6 +550,7 @@ export const removeElementsFromFrame = (
   for (const element of elementsToRemove) {
     if (element.frameId) {
       _elementsToRemove.push(element);
+
       const boundTextElement = getBoundTextElement(element);
       if (boundTextElement) {
         _elementsToRemove.push(boundTextElement);
@@ -574,7 +599,7 @@ export const replaceAllElementsInFrame = (
   );
 };
 
-/** does not mutate elements, but return new ones */
+/** does not mutate elements, but returns new ones */
 export const updateFrameMembershipOfSelectedElements = (
   allElements: ExcalidrawElementsIncludingDeleted,
   appState: AppState,

src/groups.ts

@@ -71,6 +71,7 @@ export const selectGroupsForSelectedElements = (function () {
     selectedElements: readonly NonDeleted<ExcalidrawElement>[],
     elements: readonly NonDeleted<ExcalidrawElement>[],
     appState: Pick<AppState, "selectedElementIds" | "editingGroupId">,
+    prevAppState: InteractiveCanvasAppState,
   ): SelectGroupsReturnType => {
     if (
       lastReturnValue !== undefined &&
@@ -134,10 +135,13 @@ export const selectGroupsForSelectedElements = (function () {
     lastReturnValue = {
       editingGroupId: appState.editingGroupId,
       selectedGroupIds,
-      selectedElementIds: {
-        ...appState.selectedElementIds,
-        ...selectedElementIdsInGroups,
-      },
+      selectedElementIds: makeNextSelectedElementIds(
+        {
+          ...appState.selectedElementIds,
+          ...selectedElementIdsInGroups,
+        },
+        prevAppState,
+      ),
     };
 
     return lastReturnValue;
@@ -181,7 +185,7 @@ export const selectGroupsForSelectedElements = (function () {
       };
     }
 
-    return _selectGroups(selectedElements, elements, appState);
+    return _selectGroups(selectedElements, elements, appState, prevAppState);
   };
 
   selectGroupsForSelectedElements.clearCache = () => {

src/locales/en.json

@@ -264,7 +264,8 @@
     "bindTextToElement": "Press enter to add text",
     "deepBoxSelect": "Hold CtrlOrCmd to deep select, and to prevent dragging",
     "eraserRevert": "Hold Alt to revert the elements marked for deletion",
-    "firefox_clipboard_write": "This feature can likely be enabled by setting the \"dom.events.asyncClipboard.clipboardItem\" flag to \"true\". To change the browser flags in Firefox, visit the \"about:config\" page."
+    "firefox_clipboard_write": "This feature can likely be enabled by setting the \"dom.events.asyncClipboard.clipboardItem\" flag to \"true\". To change the browser flags in Firefox, visit the \"about:config\" page.",
+    "disableSnapping": "Hold CtrlOrCmd to disable snapping"
   },
   "canvasError": {
     "cannotShowPreview": "Cannot show preview",

src/packages/excalidraw/.size-limit.json

@@ -1,7 +1,7 @@
 [
   {
     "path": "dist/excalidraw.production.min.js",
-    "limit": "291 kB"
+    "limit": "305 kB"
   },
   {
     "path": "dist/excalidraw-assets/locales",

src/packages/excalidraw/CHANGELOG.md

@@ -11,28 +11,10 @@ The change should be grouped under one of the below section and must contain PR
 Please add the latest change on the top under the correct section.
 -->
 
-## Unreleased
-
-### renderEmbeddable
-
-```tsx
-(element: NonDeletedExcalidrawElement, radius: number, appState: UIAppState) => JSX.Element | null;`
-```
-
-The renderEmbeddable function allows you to customize the rendering of a JSX component instead of using the default `<iframe>`. By setting props.renderEmbeddable, you can provide a custom implementation for rendering the element.
-
-#### Parameters:
-
-- element (NonDeletedExcalidrawElement): The element to be rendered.
-- radius (number): The calculated border radius in pixels.
-- appState (UIAppState): The current state of the UI.
-
-#### Return value:
-
-JSX.Element | null: The JSX component representing the custom rendering, or null if the default `<iframe>` should be rendered.
-
-### Features
+## 0.16.0 (2023-09-19)
 
+- Support creating containers, linear elements, text containers, labelled arrows and arrow bindings programatically [#6546](https://github.com/excalidraw/excalidraw/pull/6546)
+- Introducing Web-Embeds (alias iframe element)[#6691](https://github.com/excalidraw/excalidraw/pull/6691)
 - Added [`props.validateEmbeddable`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/props#validateEmbeddable) to customize embeddable src url validation. [#6691](https://github.com/excalidraw/excalidraw/pull/6691)
 - Add support for `opts.fitToViewport` and `opts.viewportZoomFactor` in the [`ExcalidrawAPI.scrollToContent`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/props/ref#scrolltocontent) API. [#6581](https://github.com/excalidraw/excalidraw/pull/6581).
 - Properly sanitize element `link` urls. [#6728](https://github.com/excalidraw/excalidraw/pull/6728).
@@ -48,6 +30,235 @@ JSX.Element | null: The JSX component representing the custom rendering, or null
   - `props.onClose` replaced with `props.onStateChange`.
   - `restore()`/`restoreAppState()` now retains `appState.openSidebar` regardless of docked state.
 
+## Excalidraw Library
+
+**_This section lists the updates made to the excalidraw library and will not affect the integration._**
+
+### Features
+
+- allow `avif`, `jfif`, `webp`, `bmp`, `ico` image types [#6500](https://github.com/excalidraw/excalidraw/pull/6500)
+- Zen-mode/go-to-plus button style tweaks [#7006](https://github.com/excalidraw/excalidraw/pull/7006)
+
+- Holding down CMD/CTRL will disable snap to grid when grid is active [#6983](https://github.com/excalidraw/excalidraw/pull/6983)
+
+- Update logo [#6979](https://github.com/excalidraw/excalidraw/pull/6979)
+
+- Export `changeProperty()` and `getFormValue()`. [#6957](https://github.com/excalidraw/excalidraw/pull/6957)
+
+- Partition main canvas vertically [#6759](https://github.com/excalidraw/excalidraw/pull/6759)
+
+- Support creating containers, linear elements, text containers, labelled arrows and arrow bindings programatically [#6546](https://github.com/excalidraw/excalidraw/pull/6546)
+
+- Add support for simplePDF in Web-Embeds [#6810](https://github.com/excalidraw/excalidraw/pull/6810)
+
+- Add support for val.town embeds [#6821](https://github.com/excalidraw/excalidraw/pull/6821)
+
+- Render bold lines in grid [#6779](https://github.com/excalidraw/excalidraw/pull/6779)
+
+- Adds support for stackblitz.com embeds [#6813](https://github.com/excalidraw/excalidraw/pull/6813)
+
+- Cache most of element selection [#6747](https://github.com/excalidraw/excalidraw/pull/6747)
+
+- Support customizing what parts of frames are rendered [#6752](https://github.com/excalidraw/excalidraw/pull/6752)
+
+- Make `appState.selectedElementIds` more stable [#6745](https://github.com/excalidraw/excalidraw/pull/6745)
+
+- Overwrite confirmation dialogs [#6658](https://github.com/excalidraw/excalidraw/pull/6658)
+
+- Simple analitycs [#6683](https://github.com/excalidraw/excalidraw/pull/6683)
+
+- Introduce frames [#6123](https://github.com/excalidraw/excalidraw/pull/6123)
+
+- Add canvas-roundrect-polyfill package [#6675](https://github.com/excalidraw/excalidraw/pull/6675)
+
+- Polyfill `CanvasRenderingContext2D.roundRect` [#6673](https://github.com/excalidraw/excalidraw/pull/6673)
+
+- Disable collab feature when running in iframe [#6646](https://github.com/excalidraw/excalidraw/pull/6646)
+
+- Assign random user name when not set [#6663](https://github.com/excalidraw/excalidraw/pull/6663)
+
+- Redesigned collab cursors [#6659](https://github.com/excalidraw/excalidraw/pull/6659)
+
+- Eye dropper [#6615](https://github.com/excalidraw/excalidraw/pull/6615)
+
+- Redesign of Live Collaboration dialog [#6635](https://github.com/excalidraw/excalidraw/pull/6635)
+
+- Recover scrolled position after Library re-opening [#6624](https://github.com/excalidraw/excalidraw/pull/6624)
+
+- Clearing library cache [#6621](https://github.com/excalidraw/excalidraw/pull/6621)
+
+- Update design of ImageExportDialog [#6614](https://github.com/excalidraw/excalidraw/pull/6614)
+
+- Add flipping for multiple elements [#5578](https://github.com/excalidraw/excalidraw/pull/5578)
+
+- Color picker redesign [#6216](https://github.com/excalidraw/excalidraw/pull/6216)
+
+- Add "unlock all elements" to canvas contextMenu [#5894](https://github.com/excalidraw/excalidraw/pull/5894)
+
+- Library sidebar design tweaks [#6582](https://github.com/excalidraw/excalidraw/pull/6582)
+
+- Add Trans component for interpolating JSX in translations [#6534](https://github.com/excalidraw/excalidraw/pull/6534)
+
+- Testing simple analytics and fathom analytics for better privacy of the users [#6529](https://github.com/excalidraw/excalidraw/pull/6529)
+
+- Retain `seed` on shift-paste [#6509](https://github.com/excalidraw/excalidraw/pull/6509)
+
+- Allow `avif`, `jfif`, `webp`, `bmp`, `ico` image types (#6500
+
+### Fixes
+
+- Improperly disabling UI pointer-events on canvas interaction [#7005](https://github.com/excalidraw/excalidraw/pull/7005)
+
+- Several eyeDropper fixes [#7002](https://github.com/excalidraw/excalidraw/pull/7002)
+
+- IsBindableElement to affirm frames [#6900](https://github.com/excalidraw/excalidraw/pull/6900)
+
+- Use `device.isMobile` for sidebar trigger label breakpoint [#6994](https://github.com/excalidraw/excalidraw/pull/6994)
+
+- Export to plus url [#6980](https://github.com/excalidraw/excalidraw/pull/6980)
+
+- Z-index inconsistencies during addition / deletion in frames [#6914](https://github.com/excalidraw/excalidraw/pull/6914)
+
+- Update size-limit so react is not installed as dependency [#6964](https://github.com/excalidraw/excalidraw/pull/6964)
+
+- Stale labeled arrow bounds cache after editing the label [#6893](https://github.com/excalidraw/excalidraw/pull/6893)
+
+- Canvas flickering due to resetting canvas on skipped frames [#6960](https://github.com/excalidraw/excalidraw/pull/6960)
+
+- Grid jittery after partition PR [#6935](https://github.com/excalidraw/excalidraw/pull/6935)
+
+- Regression in indexing when adding elements to frame [#6904](https://github.com/excalidraw/excalidraw/pull/6904)
+
+- Stabilize `selectedElementIds` when box selecting [#6912](https://github.com/excalidraw/excalidraw/pull/6912)
+
+- Resetting deleted elements on duplication [#6906](https://github.com/excalidraw/excalidraw/pull/6906)
+
+- Make canvas compos memoize appState on props they declare [#6897](https://github.com/excalidraw/excalidraw/pull/6897)
+
+- Scope `--color-selection` retrieval to given instance [#6886](https://github.com/excalidraw/excalidraw/pull/6886)
+
+- Webpack config exclude statement to system agnostic [#6857](https://github.com/excalidraw/excalidraw/pull/6857)
+
+- Remove `embeddable` from generic elements [#6853](https://github.com/excalidraw/excalidraw/pull/6853)
+
+- Resizing arrow labels [#6789](https://github.com/excalidraw/excalidraw/pull/6789)
+
+- Eye-dropper not working with app offset correctly on non-1 dPR [#6835](https://github.com/excalidraw/excalidraw/pull/6835)
+
+- Add self destroying service-worker.js to migrate everyone from CRA to Vite [#6833](https://github.com/excalidraw/excalidraw/pull/6833)
+
+- Forgotten REACT_APP env variables [#6834](https://github.com/excalidraw/excalidraw/pull/6834)
+
+- Refresh sw when browser refreshed [#6824](https://github.com/excalidraw/excalidraw/pull/6824)
+
+- Adding to selection via shift box-select [#6815](https://github.com/excalidraw/excalidraw/pull/6815)
+
+- Prevent binding focus NaN value [#6803](https://github.com/excalidraw/excalidraw/pull/6803)
+
+- Use pull request in semantic workflow for better security [#6799](https://github.com/excalidraw/excalidraw/pull/6799)
+
+- Don't show `canvasBackground` label when `UIOptions.canvasActions.changeViewBackgroundColor` is false [#6781](https://github.com/excalidraw/excalidraw/pull/6781)
+
+- Use subdirectory for @excalidraw/excalidraw size limit [#6787](https://github.com/excalidraw/excalidraw/pull/6787)
+
+- Use actual dock state to not close docked library on insert [#6766](https://github.com/excalidraw/excalidraw/pull/6766)
+
+- UI disappears when pressing the eyedropper shortcut on mobile [#6725](https://github.com/excalidraw/excalidraw/pull/6725)
+
+- Elements in non-existing frame getting removed [#6708](https://github.com/excalidraw/excalidraw/pull/6708)
+
+- Scrollbars renders but disable [#6706](https://github.com/excalidraw/excalidraw/pull/6706)
+
+- Typo in chart.ts [#6696](https://github.com/excalidraw/excalidraw/pull/6696)
+
+- Do not bind text to container using text tool when it has text already [#6694](https://github.com/excalidraw/excalidraw/pull/6694)
+
+- Don't allow binding text to images [#6693](https://github.com/excalidraw/excalidraw/pull/6693)
+
+- Updated link for documentation page under help section [#6654](https://github.com/excalidraw/excalidraw/pull/6654)
+
+- Collab username style fixes [#6668](https://github.com/excalidraw/excalidraw/pull/6668)
+
+- Bound arrows not updated when rotating multiple elements [#6662](https://github.com/excalidraw/excalidraw/pull/6662)
+
+- Delete setCursor when resize [#6660](https://github.com/excalidraw/excalidraw/pull/6660)
+
+- Creating text while color picker open [#6651](https://github.com/excalidraw/excalidraw/pull/6651)
+
+- Cleanup textWysiwyg and getAdjustedDimensions [#6520](https://github.com/excalidraw/excalidraw/pull/6520)
+
+- Eye dropper not accounting for offsets [#6640](https://github.com/excalidraw/excalidraw/pull/6640)
+
+- Color picker input closing problem [#6599](https://github.com/excalidraw/excalidraw/pull/6599)
+
+- Export dialog shortcut toggles console on firefox [#6620](https://github.com/excalidraw/excalidraw/pull/6620)
+
+- Add react v17 `useTransition` polyfill [#6618](https://github.com/excalidraw/excalidraw/pull/6618)
+
+- Library dropdown visibility issue for mobile [#6613](https://github.com/excalidraw/excalidraw/pull/6613)
+
+- `withInternalFallback` leaking state in multi-instance scenarios [#6602](https://github.com/excalidraw/excalidraw/pull/6602)
+
+- Language list containing duplicate `en` lang [#6583](https://github.com/excalidraw/excalidraw/pull/6583)
+
+- Garbled text displayed on avatars [#6575](https://github.com/excalidraw/excalidraw/pull/6575)
+
+- Assign the original text to text editor only during init [#6580](https://github.com/excalidraw/excalidraw/pull/6580)
+
+- I18n: Apply Trans component to publish library dialogue [#6564](https://github.com/excalidraw/excalidraw/pull/6564)
+
+- Fix brave error i18n string and remove unused [#6561](https://github.com/excalidraw/excalidraw/pull/6561)
+
+- Revert add version tags to Docker build [#6540](https://github.com/excalidraw/excalidraw/pull/6540)
+
+- Don't refresh dimensions for text containers on font load [#6523](https://github.com/excalidraw/excalidraw/pull/6523)
+
+- Cleanup getMaxContainerHeight and getMaxContainerWidth [#6519](https://github.com/excalidraw/excalidraw/pull/6519)
+
+- Cleanup redrawTextBoundingBox [#6518](https://github.com/excalidraw/excalidraw/pull/6518)
+
+- Text jumps when editing on Android Chrome [#6503](https://github.com/excalidraw/excalidraw/pull/6503)
+
+### Styles
+
+- Removes extra spaces [#6558](https://github.com/excalidraw/excalidraw/pull/6558)
+
+- Fix font family inconsistencies [#6501](https://github.com/excalidraw/excalidraw/pull/6501)
+
+### Refactor
+
+- Factor out shape generation from `renderElement.ts` pt 2 [#6878](https://github.com/excalidraw/excalidraw/pull/6878)
+
+- Add typeScript support to enforce valid translation keys [#6776](https://github.com/excalidraw/excalidraw/pull/6776)
+
+- Simplify `ImageExportDialog` [#6578](https://github.com/excalidraw/excalidraw/pull/6578)
+
+### Performance
+
+- Limiting the suggested binding to fix performance issue [#6877](https://github.com/excalidraw/excalidraw/pull/6877)
+
+- Memoize rendering of library [#6622](https://github.com/excalidraw/excalidraw/pull/6622)
+
+- Improve rendering performance for Library [#6587](https://github.com/excalidraw/excalidraw/pull/6587)
+
+- Use `UIAppState` where possible to reduce UI rerenders [#6560](https://github.com/excalidraw/excalidraw/pull/6560)
+
+### Build
+
+- Increase limit for bundle by 1kb [#6880](https://github.com/excalidraw/excalidraw/pull/6880)
+
+- Update to node 18 in docker [#6822](https://github.com/excalidraw/excalidraw/pull/6822)
+
+- Migrate to Vite 🚀 [#6818](https://github.com/excalidraw/excalidraw/pull/6818)
+
+- Migrate to Vite 🚀 [#6713](https://github.com/excalidraw/excalidraw/pull/6713)
+
+- Increase limit to 290 kB for prod bundle [#6809](https://github.com/excalidraw/excalidraw/pull/6809)
+
+- Add version tags to Docker build [#6508](https://github.com/excalidraw/excalidraw/pull/6508)
+
+---
+
 ## 0.15.2 (2023-04-20)
 
 ### Docs

src/packages/excalidraw/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@excalidraw/excalidraw",
-  "version": "0.15.2",
+  "version": "0.16.0",
   "main": "main.js",
   "types": "types/packages/excalidraw/index.d.ts",
   "files": [
@@ -52,7 +52,7 @@
     "@babel/preset-env": "7.18.6",
     "@babel/preset-react": "7.18.6",
     "@babel/preset-typescript": "7.18.6",
-    "@size-limit/preset-big-lib": "8.2.6",
+    "@size-limit/preset-big-lib": "9.0.0",
     "autoprefixer": "10.4.7",
     "babel-loader": "8.2.5",
     "babel-plugin-transform-class-properties": "6.24.1",
@@ -63,7 +63,7 @@
     "mini-css-extract-plugin": "2.6.1",
     "postcss-loader": "7.0.1",
     "sass-loader": "13.0.2",
-    "size-limit": "8.2.4",
+    "size-limit": "9.0.0",
     "style-loader": "3.3.3",
     "terser-webpack-plugin": "5.3.3",
     "ts-loader": "9.3.1",

src/packages/excalidraw/yarn.lock

@@ -1112,38 +1112,37 @@
   dependencies:
     debug "^4.1.1"
 
-"@size-limit/file@8.2.6":
-  version "8.2.6"
-  resolved "https://registry.yarnpkg.com/@size-limit/file/-/file-8.2.6.tgz#0e17045a0fa8009fc787c85e3c09f611316f908c"
-  integrity sha512-B7ayjxiJsbtXdIIWazJkB5gezi5WBMecdHTFPMDhI3NwEML1RVvUjAkrb1mPAAkIpt2LVHPnhdCUHjqDdjugwg==
+"@size-limit/file@9.0.0":
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/@size-limit/file/-/file-9.0.0.tgz#eed5415f5bcc8407979e47ffa49ffaf12d2d2378"
+  integrity sha512-oM2UaH2FRq4q22k+R+P6xCpzET10T94LFdSjb9svVu/vOD7NaB9LGcG6se8TW1BExXiyXO4GEhLsBt3uMKM3qA==
   dependencies:
-    semver "7.5.3"
+    semver "7.5.4"
 
-"@size-limit/preset-big-lib@8.2.6":
-  version "8.2.6"
-  resolved "https://registry.yarnpkg.com/@size-limit/preset-big-lib/-/preset-big-lib-8.2.6.tgz#fbff51e7a03fc36b6b3d9103cbe5b3909e35a83e"
-  integrity sha512-63a+yos0QNMVCfx1OWnxBrdQVTlBVGzW5fDXwpWq/hKfP3B89XXHYGeL2Z2f8IXSVeGkAHXnDcTZyIPRaXffVg==
+"@size-limit/preset-big-lib@9.0.0":
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/@size-limit/preset-big-lib/-/preset-big-lib-9.0.0.tgz#ddcf30e7646b66ecc0f8a1a6498a5eda6d82876d"
+  integrity sha512-wc+VNLXjn0z11s1IWevo8+utP7uZGPVDNNe5cNyMFYHv7/pwJtgsd8w2onEkbK1h8x1oJfWlcqFNKAnvD1Bylw==
   dependencies:
-    "@size-limit/file" "8.2.6"
-    "@size-limit/time" "8.2.6"
-    "@size-limit/webpack" "8.2.6"
-    size-limit "8.2.6"
+    "@size-limit/file" "9.0.0"
+    "@size-limit/time" "9.0.0"
+    "@size-limit/webpack" "9.0.0"
+    size-limit "9.0.0"
 
-"@size-limit/time@8.2.6":
-  version "8.2.6"
-  resolved "https://registry.yarnpkg.com/@size-limit/time/-/time-8.2.6.tgz#5d1912bcfc6437f6f59804737ad0538b25c207ed"
-  integrity sha512-fUEPvz7Uq6+oUQxSYbNlJt3tTgQBl1VY21USi/B7ebdnVKLnUx1JyPI9v7imN6XEkB2VpJtnYgjFeLgNrirzMA==
+"@size-limit/time@9.0.0":
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/@size-limit/time/-/time-9.0.0.tgz#44ba75b3cba30736b133dbb3fd740f894a642c87"
+  integrity sha512-//Yba5fRkYqpBZ6MFtjDTSjCpQonDMqkwofpe0G1hMd/5l/3PZXVLDCAU2BW3nQFqTkpeyytFG6Y3jxUqSddiw==
   dependencies:
     estimo "^2.3.6"
-    react "^17.0.2"
 
-"@size-limit/webpack@8.2.6":
-  version "8.2.6"
-  resolved "https://registry.yarnpkg.com/@size-limit/webpack/-/webpack-8.2.6.tgz#3a3c98293b80f7c5fb6e8499199ae6f94f05b463"
-  integrity sha512-y2sB66m5sJxIjZ8SEAzpWbiw3/+bnQHDHfk9cSbV5ChKklq02AlYg8BS5KxGWmMpdyUo4TzpjSCP9oEudY+hxQ==
+"@size-limit/webpack@9.0.0":
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/@size-limit/webpack/-/webpack-9.0.0.tgz#4514851d3607490e228bf22bc95286643f64a490"
+  integrity sha512-0YwdvmBj9rS4bXE/PY9vSdc5lCiQXmT0794EsG7yvlDMWyrWa/dsgcRok/w0MoZstfuLaS6lv03VI5UJRFU/lg==
   dependencies:
     nanoid "^3.3.6"
-    webpack "^5.88.0"
+    webpack "^5.88.2"
 
 "@types/body-parser@*":
   version "1.19.2"
@@ -1694,9 +1693,9 @@ ansi-styles@^4.1.0:
     color-convert "^2.0.1"
 
 anymatch@~3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
-  integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
+  integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
   dependencies:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
@@ -2553,9 +2552,9 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
 fast-glob@^3.2.9:
-  version "3.2.12"
-  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
-  integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.1.tgz#784b4e897340f3dbbef17413b3f11acf03c874c4"
+  integrity sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==
   dependencies:
     "@nodelib/fs.stat" "^2.0.2"
     "@nodelib/fs.walk" "^1.2.3"
@@ -2672,9 +2671,9 @@ fs.realpath@^1.0.0:
   integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
 
 fsevents@~2.3.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
-  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
 
 function-bind@^1.1.1:
   version "1.1.1"
@@ -2993,7 +2992,7 @@ is-docker@^2.0.0, is-docker@^2.1.1:
 is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
-  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
+  integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
 
 is-glob@^4.0.1, is-glob@~4.0.1:
   version "4.0.3"
@@ -3105,7 +3104,7 @@ klona@^2.0.4, klona@^2.0.5:
   resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.5.tgz#d166574d90076395d9963aa7a928fabb8d76afbc"
   integrity sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==
 
-lilconfig@^2.0.6, lilconfig@^2.1.0:
+lilconfig@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
   integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
@@ -3146,7 +3145,7 @@ lodash@^4.17.20, lodash@^4.17.4:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-loose-envify@^1.0.0, loose-envify@^1.1.0:
+loose-envify@^1.0.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -3360,11 +3359,6 @@ npm-run-path@^4.0.1:
   dependencies:
     path-key "^3.0.0"
 
-object-assign@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
-  integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
-
 object-inspect@^1.9.0:
   version "1.12.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.0.tgz#6e2c120e868fd1fd18cb4f18c31741d0d6e776f0"
@@ -3519,16 +3513,16 @@ picocolors@^1.0.0:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
-picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
-  integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==
-
-picomatch@^2.3.1:
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
+picomatch@^2.2.3:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
+  integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==
+
 [email protected], pkg-dir@^4.1.0, pkg-dir@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
@@ -3685,14 +3679,6 @@ [email protected]:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-react@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
-  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-
 readable-stream@^2.0.1:
   version "2.3.7"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
@@ -3927,10 +3913,10 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
   integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
 
[email protected]:
-  version "7.5.3"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.3.tgz#161ce8c2c6b4b3bdca6caadc9fa3317a4c4fe88e"
-  integrity sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==
[email protected].4, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7:
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
+  integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
   dependencies:
     lru-cache "^6.0.0"
 
@@ -3939,13 +3925,6 @@ semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
-semver@^7.3.4, semver@^7.3.5, semver@^7.3.7:
-  version "7.5.4"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
-  integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
-  dependencies:
-    lru-cache "^6.0.0"
-
 [email protected]:
   version "0.18.0"
   resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be"
@@ -4054,22 +4033,10 @@ sirv@^1.0.7:
     mime "^2.3.1"
     totalist "^1.0.0"
 
[email protected]:
-  version "8.2.4"
-  resolved "https://registry.yarnpkg.com/size-limit/-/size-limit-8.2.4.tgz#0ab0df7cbc89007d544a50b451f5fb4d110694ca"
-  integrity sha512-Un16nSreD1v2CYwSorattiJcHuAWqXvg4TsGgzpjnoByqQwsSfCIEQHuaD14HNStzredR8cdsO9oGH91ibypTA==
-  dependencies:
-    bytes-iec "^3.1.1"
-    chokidar "^3.5.3"
-    globby "^11.1.0"
-    lilconfig "^2.0.6"
-    nanospinner "^1.1.0"
-    picocolors "^1.0.0"
-
[email protected]:
-  version "8.2.6"
-  resolved "https://registry.yarnpkg.com/size-limit/-/size-limit-8.2.6.tgz#e41dbc74a4d7fc13be72551b6ef31ea50007d18d"
-  integrity sha512-zpznim/tX/NegjoQuRKgWTF4XiB0cn2qt90uJzxYNTFAqexk4b94DOAkBD3TwhC6c3kw2r0KcnA5upziVMZqDg==
[email protected]:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/size-limit/-/size-limit-9.0.0.tgz#203c47303462a8351976eb26175acea5f4e80447"
+  integrity sha512-DrA7o2DeRN3s+vwCA9nn7Ck9Y4pn9t0GNUwQRpKqBtBmNkl6LA2s/NlNCdtKHrEkRTeYA1ZQ65mnYveo9rUqgA==
   dependencies:
     bytes-iec "^3.1.1"
     chokidar "^3.5.3"
@@ -4556,7 +4523,7 @@ [email protected]:
     watchpack "^2.4.0"
     webpack-sources "^3.2.3"
 
-webpack@^5.88.0:
+webpack@^5.88.2:
   version "5.88.2"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.88.2.tgz#f62b4b842f1c6ff580f3fcb2ed4f0b579f4c210e"
   integrity sha512-JmcgNZ1iKj+aiR0OvTYtWQqJwq37Pf683dY9bVORwVbUrDhLhdn/PlO2sHsFHPkj7sHNQF3JwaAkp49V+Sq1tQ==

src/renderer/renderScene.ts

@@ -940,10 +940,8 @@ const _renderStaticScene = ({
     strokeGrid(
       context,
       appState.gridSize,
-      -Math.ceil(appState.zoom.value / appState.gridSize) * appState.gridSize +
-        (appState.scrollX % appState.gridSize),
-      -Math.ceil(appState.zoom.value / appState.gridSize) * appState.gridSize +
-        (appState.scrollY % appState.gridSize),
+      appState.scrollX,
+      appState.scrollY,
       appState.zoom,
       normalizedWidth / appState.zoom.value,
       normalizedHeight / appState.zoom.value,

src/tests/__snapshots__/regressionTests.test.tsx.snap

@@ -1737,7 +1737,7 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
 
 exports[`regression tests > Cmd/Ctrl-click exclusively select element under pointer > [end of test] number of elements 1`] = `0`;
 
-exports[`regression tests > Cmd/Ctrl-click exclusively select element under pointer > [end of test] number of renders 1`] = `32`;
+exports[`regression tests > Cmd/Ctrl-click exclusively select element under pointer > [end of test] number of renders 1`] = `30`;
 
 exports[`regression tests > Drags selected element when hitting only bounding box and keeps element selected > [end of test] appState 1`] = `
 {
@@ -4622,7 +4622,7 @@ exports[`regression tests > click-drag to select a group > [end of test] history
 
 exports[`regression tests > click-drag to select a group > [end of test] number of elements 1`] = `0`;
 
-exports[`regression tests > click-drag to select a group > [end of test] number of renders 1`] = `19`;
+exports[`regression tests > click-drag to select a group > [end of test] number of renders 1`] = `18`;
 
 exports[`regression tests > deleting last but one element in editing group should unselect the group > [end of test] appState 1`] = `
 {
@@ -15351,7 +15351,7 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
 
 exports[`regression tests > single-clicking on a subgroup of a selected group should not alter selection > [end of test] number of elements 1`] = `0`;
 
-exports[`regression tests > single-clicking on a subgroup of a selected group should not alter selection > [end of test] number of renders 1`] = `31`;
+exports[`regression tests > single-clicking on a subgroup of a selected group should not alter selection > [end of test] number of renders 1`] = `30`;
 
 exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] appState 1`] = `
 {

src/tests/flip.test.tsx

@@ -1,11 +1,13 @@
 import ReactDOM from "react-dom";
 import {
   createPasteEvent,
+  fireEvent,
   GlobalTestState,
   render,
+  screen,
   waitFor,
 } from "./test-utils";
-import { UI, Pointer } from "./helpers/ui";
+import { UI, Pointer, Keyboard } from "./helpers/ui";
 import { API } from "./helpers/api";
 import { actionFlipHorizontal, actionFlipVertical } from "../actions";
 import { getElementAbsoluteCoords } from "../element";
@@ -13,6 +15,7 @@ import {
   ExcalidrawElement,
   ExcalidrawImageElement,
   ExcalidrawLinearElement,
+  ExcalidrawTextElementWithContainer,
   FileId,
 } from "../element/types";
 import { newLinearElement } from "../element";
@@ -22,6 +25,8 @@ import { NormalizedZoomValue } from "../types";
 import { ROUNDNESS } from "../constants";
 import { vi } from "vitest";
 import * as blob from "../data/blob";
+import { KEYS } from "../keys";
+import { getBoundTextElementPosition } from "../element/textElement";
 
 const { h } = window;
 const mouse = new Pointer("mouse");
@@ -812,3 +817,69 @@ describe("image", () => {
     expect(h.elements[0].angle).toBeCloseTo(0);
   });
 });
+
+describe("mutliple elements", () => {
+  it("with bound text flip correctly", async () => {
+    UI.clickTool("arrow");
+    fireEvent.click(screen.getByTitle("Architect"));
+    const arrow = UI.createElement("arrow", {
+      x: 0,
+      y: 0,
+      width: 180,
+      height: 80,
+    });
+
+    Keyboard.keyPress(KEYS.ENTER);
+    let editor = document.querySelector<HTMLTextAreaElement>(
+      ".excalidraw-textEditorContainer > textarea",
+    )!;
+    fireEvent.input(editor, { target: { value: "arrow" } });
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    Keyboard.keyPress(KEYS.ESCAPE);
+
+    const rectangle = UI.createElement("rectangle", {
+      x: 0,
+      y: 100,
+      width: 100,
+      height: 100,
+    });
+
+    Keyboard.keyPress(KEYS.ENTER);
+    editor = document.querySelector<HTMLTextAreaElement>(
+      ".excalidraw-textEditorContainer > textarea",
+    )!;
+    fireEvent.input(editor, { target: { value: "rect\ntext" } });
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    Keyboard.keyPress(KEYS.ESCAPE);
+
+    mouse.select([arrow, rectangle]);
+    h.app.actionManager.executeAction(actionFlipHorizontal);
+    h.app.actionManager.executeAction(actionFlipVertical);
+
+    const arrowText = h.elements[1] as ExcalidrawTextElementWithContainer;
+    const arrowTextPos = getBoundTextElementPosition(arrow.get(), arrowText)!;
+    const rectText = h.elements[3] as ExcalidrawTextElementWithContainer;
+
+    expect(arrow.x).toBeCloseTo(180);
+    expect(arrow.y).toBeCloseTo(200);
+    expect(arrow.points[1][0]).toBeCloseTo(-180);
+    expect(arrow.points[1][1]).toBeCloseTo(-80);
+
+    expect(arrowTextPos.x - (arrow.x - arrow.width)).toBeCloseTo(
+      arrow.x - (arrowTextPos.x + arrowText.width),
+    );
+    expect(arrowTextPos.y - (arrow.y - arrow.height)).toBeCloseTo(
+      arrow.y - (arrowTextPos.y + arrowText.height),
+    );
+
+    expect(rectangle.x).toBeCloseTo(80);
+    expect(rectangle.y).toBeCloseTo(0);
+
+    expect(rectText.x - rectangle.x).toBeCloseTo(
+      rectangle.x + rectangle.width - (rectText.x + rectText.width),
+    );
+    expect(rectText.y - rectangle.y).toBeCloseTo(
+      rectangle.y + rectangle.height - (rectText.y + rectText.height),
+    );
+  });
+});

src/tests/helpers/api.ts

@@ -17,6 +17,7 @@ import path from "path";
 import { getMimeType } from "../../data/blob";
 import {
   newEmbeddableElement,
+  newFrameElement,
   newFreeDrawElement,
   newImageElement,
 } from "../../element/newElement";
@@ -24,6 +25,7 @@ import { Point } from "../../types";
 import { getSelectedElements } from "../../scene/selection";
 import { isLinearElementType } from "../../element/typeChecks";
 import { Mutable } from "../../utility-types";
+import { assertNever } from "../../utils";
 
 const readFile = util.promisify(fs.readFile);
 
@@ -244,6 +246,15 @@ export class API {
           scale: rest.scale || [1, 1],
         });
         break;
+      case "frame":
+        element = newFrameElement({ ...base, width, height });
+        break;
+      default:
+        assertNever(
+          type,
+          `API.createElement: unimplemented element type ${type}}`,
+        );
+        break;
     }
     if (element.type === "arrow") {
       element.startBinding = rest.startBinding ?? null;

src/tests/linearElementEditor.test.tsx

@@ -275,7 +275,7 @@ describe("Test Linear Elements", () => {
       // drag line from midpoint
       drag(midpoint, [midpoint[0] + delta, midpoint[1] + delta]);
       expect(renderInteractiveScene).toHaveBeenCalledTimes(14);
-      expect(renderStaticScene).toHaveBeenCalledTimes(8);
+      expect(renderStaticScene).toHaveBeenCalledTimes(6);
 
       expect(line.points.length).toEqual(3);
       expect(line.points).toMatchInlineSnapshot(`
@@ -418,7 +418,7 @@ describe("Test Linear Elements", () => {
         ]);
 
         expect(renderInteractiveScene).toHaveBeenCalledTimes(21);
-        expect(renderStaticScene).toHaveBeenCalledTimes(11);
+        expect(renderStaticScene).toHaveBeenCalledTimes(9);
 
         expect(line.points.length).toEqual(5);
 
@@ -521,7 +521,7 @@ describe("Test Linear Elements", () => {
         deletePoint(points[2]);
         expect(line.points.length).toEqual(3);
         expect(renderInteractiveScene).toHaveBeenCalledTimes(21);
-        expect(renderStaticScene).toHaveBeenCalledTimes(12);
+        expect(renderStaticScene).toHaveBeenCalledTimes(9);
 
         const newMidPoints = LinearElementEditor.getEditorMidPoints(
           line,
@@ -568,7 +568,7 @@ describe("Test Linear Elements", () => {
           lastSegmentMidpoint[1] + delta,
         ]);
         expect(renderInteractiveScene).toHaveBeenCalledTimes(21);
-        expect(renderStaticScene).toHaveBeenCalledTimes(11);
+        expect(renderStaticScene).toHaveBeenCalledTimes(9);
         expect(line.points.length).toEqual(5);
 
         expect((h.elements[0] as ExcalidrawLinearElement).points)

src/tests/selection.test.tsx

@@ -308,7 +308,7 @@ describe("select single element on the scene", () => {
     fireEvent.pointerUp(canvas);
 
     expect(renderInteractiveScene).toHaveBeenCalledTimes(9);
-    expect(renderStaticScene).toHaveBeenCalledTimes(9);
+    expect(renderStaticScene).toHaveBeenCalledTimes(8);
     expect(h.state.selectionElement).toBeNull();
     expect(h.elements.length).toEqual(1);
     expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
@@ -338,7 +338,7 @@ describe("select single element on the scene", () => {
     fireEvent.pointerUp(canvas);
 
     expect(renderInteractiveScene).toHaveBeenCalledTimes(9);
-    expect(renderStaticScene).toHaveBeenCalledTimes(9);
+    expect(renderStaticScene).toHaveBeenCalledTimes(8);
     expect(h.state.selectionElement).toBeNull();
     expect(h.elements.length).toEqual(1);
     expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
@@ -368,7 +368,7 @@ describe("select single element on the scene", () => {
     fireEvent.pointerUp(canvas);
 
     expect(renderInteractiveScene).toHaveBeenCalledTimes(9);
-    expect(renderStaticScene).toHaveBeenCalledTimes(9);
+    expect(renderStaticScene).toHaveBeenCalledTimes(8);
     expect(h.state.selectionElement).toBeNull();
     expect(h.elements.length).toEqual(1);
     expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
@@ -411,7 +411,7 @@ describe("select single element on the scene", () => {
     fireEvent.pointerUp(canvas);
 
     expect(renderInteractiveScene).toHaveBeenCalledTimes(9);
-    expect(renderStaticScene).toHaveBeenCalledTimes(9);
+    expect(renderStaticScene).toHaveBeenCalledTimes(8);
     expect(h.state.selectionElement).toBeNull();
     expect(h.elements.length).toEqual(1);
     expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
@@ -453,7 +453,7 @@ describe("select single element on the scene", () => {
     fireEvent.pointerUp(canvas);
 
     expect(renderInteractiveScene).toHaveBeenCalledTimes(9);
-    expect(renderStaticScene).toHaveBeenCalledTimes(9);
+    expect(renderStaticScene).toHaveBeenCalledTimes(8);
     expect(h.state.selectionElement).toBeNull();
     expect(h.elements.length).toEqual(1);
     expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
@@ -477,3 +477,46 @@ describe("tool locking & selection", () => {
     }
   });
 });
+
+describe("selectedElementIds stability", () => {
+  beforeEach(async () => {
+    await render(<ExcalidrawApp />);
+  });
+
+  it("box-selection should be stable when not changing selection", () => {
+    const rectangle = API.createElement({
+      type: "rectangle",
+      x: 0,
+      y: 0,
+      width: 10,
+      height: 10,
+    });
+
+    h.elements = [rectangle];
+
+    const selectedElementIds_1 = h.state.selectedElementIds;
+
+    mouse.downAt(-100, -100);
+    mouse.moveTo(-50, -50);
+    mouse.up();
+
+    expect(h.state.selectedElementIds).toBe(selectedElementIds_1);
+
+    mouse.downAt(-50, -50);
+    mouse.moveTo(50, 50);
+
+    const selectedElementIds_2 = h.state.selectedElementIds;
+
+    expect(selectedElementIds_2).toEqual({ [rectangle.id]: true });
+
+    mouse.moveTo(60, 60);
+
+    // box-selecting further without changing selection should keep
+    // selectedElementIds stable (the same object)
+    expect(h.state.selectedElementIds).toBe(selectedElementIds_2);
+
+    mouse.up();
+
+    expect(h.state.selectedElementIds).toBe(selectedElementIds_2);
+  });
+});

src/types.ts

@@ -512,8 +512,9 @@ export type AppProps = Merge<
  * in the app, eg Manager. Factored out into a separate type to keep DRY. */
 export type AppClassProperties = {
   props: AppProps;
-  canvas: HTMLCanvasElement;
   interactiveCanvas: HTMLCanvasElement | null;
+  /** static canvas */
+  canvas: HTMLCanvasElement;
   focusContainer(): void;
   library: Library;
   imageCache: Map<

src/vite-env.d.ts

@@ -47,6 +47,9 @@ interface ImportMetaEnv {
   VITE_PKG_VERSION: string;
   VITE_IS_EXCALIDRAW_NPM_PACKAGE: string;
 
+  VITE_APP_PLUS_LP: string;
+  VITE_APP_PLUS_APP: string;
+
   VITE_WORKER_ID: string;
   MODE: string;
   DEV: string;