wip: adaptive roughness

dev-docs/docs/@excalidraw/excalidraw/api/utils/restore.mdx

@@ -31,29 +31,10 @@ You can pass `null` / `undefined` if not applicable.
 restoreElements(
   elements: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ImportedDataState["elements"]</a>,<br/>&nbsp;
   localElements: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ExcalidrawElement[]</a> | null | undefined): <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ExcalidrawElement[]</a>,<br/>&nbsp;
-  opts: &#123; refreshDimensions?: boolean, repairBindings?: boolean }<br/>
+  refreshDimensions?: boolean<br/>
 )
 </pre>
 
-| Prop | Type | Description |
-| ---- | ---- | ---- |
-| `elements` | <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ImportedDataState["elements"]</a> | The `elements` to be restored |
-| [`localElements`](#localelements) | <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ExcalidrawElement[]</a> &#124; null &#124; undefined |  When `localElements` are supplied, they are used to ensure that existing restored elements reuse `version` (and increment it), and regenerate `versionNonce`. |
-| [`opts`](#opts) | `Object` | The extra optional parameter to configure restored elements
-
-#### localElements
-
-When `localElements` are supplied, they are used to ensure that existing restored elements reuse `version` (and increment it), and regenerate `versionNonce`.  
-Use this when you `import` elements which may already be present in the scene to ensure that you do not disregard the newly imported elements if you're using element version to detect the update
-
-#### opts
-The extra optional parameter to configure restored elements. It has the following attributes
-
-| Prop | Type | Description|
-| --- | --- | ------|
-| `refreshDimensions` | `boolean` | Indicates whether we should also `recalculate` text element dimensions. Since this is a potentially costly operation, you may want to disable it if you restore elements in tight loops, such as during collaboration. |
-| `repairBindings` |`boolean` | Indicates whether the `bindings` for the elements should be repaired. This is to make sure there are no containers with non existent bound text element id and no bound text elements with non existent container id. |
-
 **_How to use_**
 
 ```js
@@ -62,6 +43,9 @@ import { restoreElements } from "@excalidraw/excalidraw";
 
 This function will make sure all properties of element is correctly set and if any attribute is missing, it will be set to its default value.
 
+When `localElements` are supplied, they are used to ensure that existing restored elements reuse `version` (and increment it), and regenerate `versionNonce`.  
+Use this when you import elements which may already be present in the scene to ensure that you do not disregard the newly imported elements if you're using element version to detect the updates.
+
 Parameter `refreshDimensions` indicates whether we should also `recalculate` text element dimensions. Defaults to `false`. Since this is a potentially costly operation, you may want to disable it if you restore elements in tight loops, such as during collaboration.
 
 ### restore
@@ -72,9 +56,7 @@ Parameter `refreshDimensions` indicates whether we should also `recalculate` tex
 restore(
   data: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/data/types.ts#L34">ImportedDataState</a>,<br/>&nbsp;
   localAppState: Partial&lt;<a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95">AppState</a>> | null | undefined,<br/>&nbsp;
-  localElements: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ExcalidrawElement[]</a> | null | undefined<br/>): <a href="https://github.com/excalidraw/excalidraw/blob/master/src/data/types.ts#L4">DataState</a><br/>
+  localElements: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ExcalidrawElement[]</a> | null | undefined<br/>): <a href="https://github.com/excalidraw/excalidraw/blob/master/src/data/types.ts#L4">DataState</a>
-  opts: &#123; refreshDimensions?: boolean, repairBindings?: boolean }<br/>
-
 )
 </pre>
 

dev-docs/docs/@excalidraw/excalidraw/api/utils/utils-intro.md

@@ -339,47 +339,3 @@ The `device` has the following `attributes`
 | `isMobile` | `boolean` | Set to `true` when the device is `mobile` |
 | `isTouchScreen` | `boolean` | Set to `true` for `touch` devices |
 | `canDeviceFitSidebar` | `boolean` | Implies whether there is enough space to fit the `sidebar` |
-
-### i18n
-
-To help with localization, we export the following.
-
-| name | type |
-| --- | --- |
-| `defaultLang` | `string` |
-| `languages` | [`Language[]`](https://github.com/excalidraw/excalidraw/blob/master/src/i18n.ts#L15) |
-| `useI18n` | [`() => { langCode, t }`](https://github.com/excalidraw/excalidraw/blob/master/src/i18n.ts#L15) |
-
-```js
-import { defaultLang, languages, useI18n } from "@excalidraw/excalidraw";
-```
-
-#### defaultLang
-
-Default language code, `en`.
-
-#### languages
-
-List of supported language codes. You can pass any of these to `Excalidraw`'s [`langCode` prop](/docs/@excalidraw/excalidraw/api/props/#langcode).
-
-#### useI18n
-
-A hook that returns the current language code and translation helper function. You can use this to translate strings in the components you render as children of `<Excalidraw>`.
-
-```jsx live
-function App() {
-  const { t } = useI18n();
-  return (
-    <div style={{ height: "500px" }}>
-      <Excalidraw>
-        <button
-          style={{ position: "absolute", zIndex: 10, height: "2rem" }}
-          onClick={() => window.alert(t("labels.madeWithExcalidraw"))}
-        >
-          {t("buttons.confirm")}
-        </button>
-      </Excalidraw>
-    </div>
-  );
-}
-```

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.2",
+    "@excalidraw/excalidraw": "0.14.2",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.2.1",
     "docusaurus-plugin-sass": "0.2.3",

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

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

dev-docs/yarn.lock

@@ -1631,10 +1631,10 @@
     url-loader "^4.1.1"
     webpack "^5.73.0"
 
-"@excalidraw/excalidraw@0.15.2":
+"@excalidraw/excalidraw@0.14.2":
-  version "0.15.2"
+  version "0.14.2"
-  resolved "https://registry.yarnpkg.com/@excalidraw/excalidraw/-/excalidraw-0.15.2.tgz#7dba4f6e10c52015a007efb75a9fc1afe598574c"
+  resolved "https://registry.yarnpkg.com/@excalidraw/excalidraw/-/excalidraw-0.14.2.tgz#150cb4b7a1bf0d11cd64295936c930e7e0db8375"
-  integrity sha512-rTI02kgWSTXiUdIkBxt9u/581F3eXcqQgJdIxmz54TFtG3ughoxO5fr4t7Fr2LZIturBPqfocQHGKZ0t2KLKgw==
+  integrity sha512-8LdjpTBWEK5waDWB7Bt/G9YBI4j0OxkstUhvaDGz7dwQGfzF6FW5CXBoYHNEoX0qmb+Fg/NPOlZ7FrKsrSVCqg==
 
 "@hapi/hoek@^9.0.0":
   version "9.3.0"
@@ -7159,9 +7159,9 @@ typescript@^4.7.4:
   integrity sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==
 
 ua-parser-js@^0.7.30:
-  version "0.7.33"
+  version "0.7.31"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.33.tgz#1d04acb4ccef9293df6f70f2c3d22f3030d8b532"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.31.tgz#649a656b191dffab4f21d5e053e27ca17cbff5c6"
-  integrity sha512-s8ax/CeZdK9R/56Sui0WM6y9OFREJarMRHqLB2EwkovemBxNQ+Bqu8GAsUnVcXKgphb++ghr/B2BZx4mahujPw==
+  integrity sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==
 
 unescape@^1.0.1:
   version "1.0.1"

package.json

@@ -19,7 +19,8 @@
     ]
   },
   "dependencies": {
-    "@radix-ui/react-tabs": "1.0.2",
+    "@dwelle/tunnel-rat": "0.1.1",
+    "@excalidraw/roughjs": "4.5.3",
     "@sentry/browser": "6.2.5",
     "@sentry/integrations": "6.2.5",
     "@testing-library/jest-dom": "5.16.2",
@@ -50,8 +51,8 @@
     "react-scripts": "5.0.1",
     "roughjs": "4.5.2",
     "sass": "1.51.0",
-    "socket.io-client": "4.6.1",
+    "socket.io-client": "2.3.1",
-    "tunnel-rat": "0.1.2",
+    "tunnel-rat": "0.1.0",
     "workbox-background-sync": "^6.5.4",
     "workbox-broadcast-update": "^6.5.4",
     "workbox-cacheable-response": "^6.5.4",

public/index.html

@@ -79,7 +79,6 @@
     </style>
     <!------------------------------------------------------------------------->
 
-    <% if (process.env.NODE_ENV === "production") { %>
     <script>
       // Redirect Excalidraw+ users which have auto-redirect enabled.
       //
@@ -95,10 +94,9 @@
         // if its present redirect
         document.cookie.includes("excplus-autoredirect=true")
       ) {
-        window.location.href = "https://app.excalidraw.com";
+        // window.location.href = "https://app.excalidraw.com";
       }
     </script>
-    <% } %>
 
     <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
 
@@ -150,14 +148,6 @@
     </script>
     <% if (process.env.REACT_APP_DISABLE_TRACKING !== 'true') { %>
 
-    <!-- Fathom - privacy-friendly analytics -->
-    <script
-      src="https://cdn.usefathom.com/script.js"
-      data-site="VMSBUEYA"
-      defer
-    ></script>
-    <!-- / Fathom -->
-
     <!-- LEGACY GOOGLE ANALYTICS -->
     <% if (process.env.REACT_APP_GOOGLE_ANALYTICS_ID) { %>
     <script
@@ -174,6 +164,31 @@
     </script>
     <% } %>
     <!-- end LEGACY GOOGLE ANALYTICS -->
+
+    <!-- Matomo -->
+    <% if (process.env.REACT_APP_MATOMO_URL &&
+    process.env.REACT_APP_MATOMO_SITE_ID &&
+    process.env.REACT_APP_CDN_MATOMO_TRACKER_URL) { %>
+    <script>
+      var _paq = (window._paq = window._paq || []);
+      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+      _paq.push(["trackPageView"]);
+      _paq.push(["enableLinkTracking"]);
+      (function () {
+        var u = "%REACT_APP_MATOMO_URL%";
+        _paq.push(["setTrackerUrl", u + "matomo.php"]);
+        _paq.push(["setSiteId", "%REACT_APP_MATOMO_SITE_ID%"]);
+        var d = document,
+          g = d.createElement("script"),
+          s = d.getElementsByTagName("script")[0];
+        g.async = true;
+        g.src = "%REACT_APP_CDN_MATOMO_TRACKER_URL%";
+        s.parentNode.insertBefore(g, s);
+      })();
+    </script>
+    <% } %>
+    <!-- end Matomo analytics -->
+
     <% } %>
 
     <!-- FIXME: remove this when we update CRA (fix SW caching) -->
@@ -227,17 +242,5 @@
       <h1 class="visually-hidden">Excalidraw</h1>
     </header>
     <div id="root"></div>
-    <!-- 100% privacy friendly analytics -->
-    <script
-      async
-      defer
-      src="https://scripts.simpleanalyticscdn.com/latest.js"
-    ></script>
-    <noscript
-      ><img
-        src="https://queue.simpleanalyticscdn.com/noscript.gif"
-        alt=""
-        referrerpolicy="no-referrer-when-downgrade"
-    /></noscript>
   </body>
 </html>

scripts/release.js

@@ -1,9 +1,22 @@
+const fs = require("fs");
 const { execSync } = require("child_process");
 
 const excalidrawDir = `${__dirname}/../src/packages/excalidraw`;
 const excalidrawPackage = `${excalidrawDir}/package.json`;
 const pkg = require(excalidrawPackage);
 
+const originalReadMe = fs.readFileSync(`${excalidrawDir}/README.md`, "utf8");
+
+const updateReadme = () => {
+  const excalidrawIndex = originalReadMe.indexOf("### Excalidraw");
+
+  // remove note for stable readme
+  const data = originalReadMe.slice(excalidrawIndex);
+
+  // update readme
+  fs.writeFileSync(`${excalidrawDir}/README.md`, data, "utf8");
+};
+
 const publish = () => {
   try {
     execSync(`yarn  --frozen-lockfile`);
@@ -17,8 +30,15 @@ const publish = () => {
 };
 
 const release = () => {
+  updateReadme();
+  console.info("Note for stable readme removed");
+
   publish();
   console.info(`Published ${pkg.version}!`);
+
+  // revert readme after release
+  fs.writeFileSync(`${excalidrawDir}/README.md`, originalReadMe, "utf8");
+  console.info("Readme reverted");
 };
 
 release();

src/actions/actionBoundText.tsx

@@ -1,13 +1,7 @@
-import {
+import { BOUND_TEXT_PADDING, ROUNDNESS, VERTICAL_ALIGN } from "../constants";
-  BOUND_TEXT_PADDING,
-  ROUNDNESS,
-  VERTICAL_ALIGN,
-  TEXT_ALIGN,
-} from "../constants";
 import { getNonDeletedElements, isTextElement, newElement } from "../element";
 import { mutateElement } from "../element/mutateElement";
 import {
-  computeBoundTextPosition,
   computeContainerDimensionForBoundText,
   getBoundTextElement,
   measureText,
@@ -16,7 +10,6 @@ import {
 import {
   getOriginalContainerHeightFromCache,
   resetOriginalContainerCache,
-  updateOriginalContainerCache,
 } from "../element/textWysiwyg";
 import {
   hasBoundTextElement,
@@ -40,7 +33,6 @@ export const actionUnbindText = register({
   trackEvent: { category: "element" },
   predicate: (elements, appState) => {
     const selectedElements = getSelectedElements(elements, appState);
-
     return selectedElements.some((element) => hasBoundTextElement(element));
   },
   perform: (elements, appState) => {
@@ -51,7 +43,7 @@ export const actionUnbindText = register({
     selectedElements.forEach((element) => {
       const boundTextElement = getBoundTextElement(element);
       if (boundTextElement) {
-        const { width, height, baseline } = measureText(
+        const { width, height } = measureText(
           boundTextElement.originalText,
           getFontString(boundTextElement),
           boundTextElement.lineHeight,
@@ -60,15 +52,12 @@ export const actionUnbindText = register({
           element.id,
         );
         resetOriginalContainerCache(element.id);
-        const { x, y } = computeBoundTextPosition(element, boundTextElement);
+
         mutateElement(boundTextElement as ExcalidrawTextElement, {
           containerId: null,
           width,
           height,
-          baseline,
           text: boundTextElement.originalText,
-          x,
-          y,
         });
         mutateElement(element, {
           boundElements: element.boundElements?.filter(
@@ -138,7 +127,6 @@ export const actionBindText = register({
     mutateElement(textElement, {
       containerId: container.id,
       verticalAlign: VERTICAL_ALIGN.MIDDLE,
-      textAlign: TEXT_ALIGN.CENTER,
     });
     mutateElement(container, {
       boundElements: (container.boundElements || []).concat({
@@ -146,11 +134,7 @@ export const actionBindText = register({
         id: textElement.id,
       }),
     });
-    const originalContainerHeight = container.height;
     redrawTextBoundingBox(textElement, container);
-    // overwritting the cache with original container height so
-    // it can be restored when unbind
-    updateOriginalContainerCache(container.id, originalContainerHeight);
 
     return {
       elements: pushTextAboveContainer(elements, container, textElement),
@@ -196,8 +180,8 @@ const pushContainerBelowText = (
   return updatedElements;
 };
 
-export const actionWrapTextInContainer = register({
+export const actionCreateContainerFromText = register({
-  name: "wrapTextInContainer",
+  name: "createContainerFromText",
   contextItemLabel: "labels.createContainerFromText",
   trackEvent: { category: "element" },
   predicate: (elements, appState) => {
@@ -286,7 +270,6 @@ export const actionWrapTextInContainer = register({
             containerId: container.id,
             verticalAlign: VERTICAL_ALIGN.MIDDLE,
             boundElements: null,
-            textAlign: TEXT_ALIGN.CENTER,
           },
           false,
         );

src/actions/actionClipboard.tsx

@@ -18,7 +18,7 @@ export const actionCopy = register({
   perform: (elements, appState, _, app) => {
     const selectedElements = getSelectedElements(elements, appState, true);
 
-    copyToClipboard(selectedElements, app.files);
+    copyToClipboard(selectedElements, appState, app.files);
 
     return {
       commitToHistory: false,

src/actions/actionProperties.tsx

@@ -1,5 +1,4 @@
 import { AppState } from "../../src/types";
-import { trackEvent } from "../analytics";
 import { ButtonIconSelect } from "../components/ButtonIconSelect";
 import { ColorPicker } from "../components/ColorPicker";
 import { IconPicker } from "../components/IconPicker";
@@ -38,7 +37,6 @@ import {
   TextAlignLeftIcon,
   TextAlignCenterIcon,
   TextAlignRightIcon,
-  FillZigZagIcon,
 } from "../components/icons";
 import {
   DEFAULT_FONT_FAMILY,
@@ -84,7 +82,7 @@ import {
   isSomeElementSelected,
 } from "../scene";
 import { hasStrokeColor } from "../scene/comparisons";
-import { arrayToMap, getShortcutKey } from "../utils";
+import { arrayToMap } from "../utils";
 import { register } from "./register";
 
 const FONT_SIZE_RELATIVE_INCREASE_STEP = 0.1;
@@ -296,12 +294,7 @@ export const actionChangeBackgroundColor = register({
 export const actionChangeFillStyle = register({
   name: "changeFillStyle",
   trackEvent: false,
-  perform: (elements, appState, value, app) => {
+  perform: (elements, appState, value) => {
-    trackEvent(
-      "element",
-      "changeFillStyle",
-      `${value} (${app.device.isMobile ? "mobile" : "desktop"})`,
-    );
     return {
       elements: changeProperty(elements, appState, (el) =>
         newElementWith(el, {
@@ -312,57 +305,40 @@ export const actionChangeFillStyle = register({
       commitToHistory: true,
     };
   },
-  PanelComponent: ({ elements, appState, updateData }) => {
+  PanelComponent: ({ elements, appState, updateData }) => (
-    const selectedElements = getSelectedElements(elements, appState);
+    <fieldset>
-    const allElementsZigZag =
+      <legend>{t("labels.fill")}</legend>
-      selectedElements.length > 0 &&
+      <ButtonIconSelect
-      selectedElements.every((el) => el.fillStyle === "zigzag");
+        options={[
-
+          {
-    return (
+            value: "hachure",
-      <fieldset>
+            text: t("labels.hachure"),
-        <legend>{t("labels.fill")}</legend>
+            icon: FillHachureIcon,
-        <ButtonIconSelect
+          },
-          type="button"
+          {
-          options={[
+            value: "cross-hatch",
-            {
+            text: t("labels.crossHatch"),
-              value: "hachure",
+            icon: FillCrossHatchIcon,
-              text: `${
+          },
-                allElementsZigZag ? t("labels.zigzag") : t("labels.hachure")
+          {
-              } (${getShortcutKey("Alt-Click")})`,
+            value: "solid",
-              icon: allElementsZigZag ? FillZigZagIcon : FillHachureIcon,
+            text: t("labels.solid"),
-              active: allElementsZigZag ? true : undefined,
+            icon: FillSolidIcon,
-            },
+          },
-            {
+        ]}
-              value: "cross-hatch",
+        group="fill"
-              text: t("labels.crossHatch"),
+        value={getFormValue(
-              icon: FillCrossHatchIcon,
+          elements,
-            },
+          appState,
-            {
+          (element) => element.fillStyle,
-              value: "solid",
+          appState.currentItemFillStyle,
-              text: t("labels.solid"),
+        )}
-              icon: FillSolidIcon,
+        onChange={(value) => {
-            },
+          updateData(value);
-          ]}
+        }}
-          value={getFormValue(
+      />
-            elements,
+    </fieldset>
-            appState,
+  ),
-            (element) => element.fillStyle,
-            appState.currentItemFillStyle,
-          )}
-          onClick={(value, event) => {
-            const nextValue =
-              event.altKey &&
-              value === "hachure" &&
-              selectedElements.every((el) => el.fillStyle === "hachure")
-                ? "zigzag"
-                : value;
-
-            updateData(nextValue);
-          }}
-        />
-      </fieldset>
-    );
-  },
 });
 
 export const actionChangeStrokeWidth = register({

src/actions/types.ts

@@ -115,7 +115,7 @@ export type ActionName =
   | "toggleLinearEditor"
   | "toggleEraserTool"
   | "toggleHandTool"
-  | "wrapTextInContainer";
+  | "createContainerFromText";
 
 export type PanelComponentProps = {
   elements: readonly ExcalidrawElement[];

src/analytics.ts

@@ -20,20 +20,9 @@ export const trackEvent = (
       });
     }
 
-    if (window.sa_event) {
+    // MATOMO event tracking _paq must be same as the one in index.html
-      window.sa_event(action, {
+    if (window._paq) {
-        category,
+      window._paq.push(["trackEvent", category, action, label, value]);
-        label,
-        value,
-      });
-    }
-
-    if (window.fathom) {
-      window.fathom.trackEvent(action, {
-        category,
-        label,
-        value,
-      });
     }
   } catch (error) {
     console.error("error during analytics", error);

src/appState.ts

@@ -1,6 +1,5 @@
 import oc from "open-color";
 import {
-  DEFAULT_ELEMENT_PROPS,
   DEFAULT_FONT_FAMILY,
   DEFAULT_FONT_SIZE,
   DEFAULT_TEXT_ALIGN,
@@ -24,18 +23,18 @@ export const getDefaultAppState = (): Omit<
     theme: THEME.LIGHT,
     collaborators: new Map(),
     currentChartType: "bar",
-    currentItemBackgroundColor: DEFAULT_ELEMENT_PROPS.backgroundColor,
+    currentItemBackgroundColor: "transparent",
     currentItemEndArrowhead: "arrow",
-    currentItemFillStyle: DEFAULT_ELEMENT_PROPS.fillStyle,
+    currentItemFillStyle: "hachure",
     currentItemFontFamily: DEFAULT_FONT_FAMILY,
     currentItemFontSize: DEFAULT_FONT_SIZE,
-    currentItemOpacity: DEFAULT_ELEMENT_PROPS.opacity,
+    currentItemOpacity: 100,
-    currentItemRoughness: DEFAULT_ELEMENT_PROPS.roughness,
+    currentItemRoughness: 1,
     currentItemStartArrowhead: null,
-    currentItemStrokeColor: DEFAULT_ELEMENT_PROPS.strokeColor,
+    currentItemStrokeColor: oc.black,
     currentItemRoundness: "round",
-    currentItemStrokeStyle: DEFAULT_ELEMENT_PROPS.strokeStyle,
+    currentItemStrokeStyle: "solid",
-    currentItemStrokeWidth: DEFAULT_ELEMENT_PROPS.strokeWidth,
+    currentItemStrokeWidth: 1,
     currentItemTextAlign: DEFAULT_TEXT_ALIGN,
     cursorButton: "up",
     draggingElement: null,
@@ -45,7 +44,7 @@ export const getDefaultAppState = (): Omit<
     activeTool: {
       type: "selection",
       customType: null,
-      locked: DEFAULT_ELEMENT_PROPS.locked,
+      locked: false,
       lastActiveTool: null,
     },
     penMode: false,
@@ -58,7 +57,7 @@ export const getDefaultAppState = (): Omit<
     fileHandle: null,
     gridSize: null,
     isBindingEnabled: true,
-    defaultSidebarDockedPreference: false,
+    isSidebarDocked: false,
     isLoading: false,
     isResizing: false,
     isRotating: false,
@@ -150,11 +149,7 @@ const APP_STATE_STORAGE_CONF = (<
   gridSize: { browser: true, export: true, server: true },
   height: { browser: false, export: false, server: false },
   isBindingEnabled: { browser: false, export: false, server: false },
-  defaultSidebarDockedPreference: {
+  isSidebarDocked: { browser: true, export: false, server: false },
-    browser: true,
-    export: false,
-    server: false,
-  },
   isLoading: { browser: false, export: false, server: false },
   isResizing: { browser: false, export: false, server: false },
   isRotating: { browser: false, export: false, server: false },

src/charts.ts

@@ -1,5 +1,10 @@
 import colors from "./colors";
-import { DEFAULT_FONT_SIZE, ENV } from "./constants";
+import {
+  DEFAULT_FONT_FAMILY,
+  DEFAULT_FONT_SIZE,
+  ENV,
+  VERTICAL_ALIGN,
+} from "./constants";
 import { newElement, newLinearElement, newTextElement } from "./element";
 import { NonDeletedExcalidrawElement } from "./element/types";
 import { randomId } from "./random";
@@ -161,7 +166,17 @@ const bgColors = colors.elementBackground.slice(
 // Put all the common properties here so when the whole chart is selected
 // the properties dialog shows the correct selected values
 const commonProps = {
+  fillStyle: "hachure",
+  fontFamily: DEFAULT_FONT_FAMILY,
+  fontSize: DEFAULT_FONT_SIZE,
+  opacity: 100,
+  roughness: 1,
   strokeColor: colors.elementStroke[0],
+  roundness: null,
+  strokeStyle: "solid",
+  strokeWidth: 1,
+  verticalAlign: VERTICAL_ALIGN.MIDDLE,
+  locked: false,
 } as const;
 
 const getChartDimentions = (spreadsheet: Spreadsheet) => {
@@ -308,6 +323,7 @@ const chartBaseElements = (
         x: x + chartWidth / 2,
         y: y - BAR_HEIGHT - BAR_GAP * 2 - DEFAULT_FONT_SIZE,
         roundness: null,
+        strokeStyle: "solid",
         textAlign: "center",
       })
     : null;

src/clipboard.ts

@@ -2,12 +2,12 @@ import {
   ExcalidrawElement,
   NonDeletedExcalidrawElement,
 } from "./element/types";
-import { BinaryFiles } from "./types";
+import { AppState, BinaryFiles } from "./types";
 import { SVG_EXPORT_TAG } from "./scene/export";
 import { tryParseSpreadsheet, Spreadsheet, VALID_SPREADSHEET } from "./charts";
 import { EXPORT_DATA_TYPES, MIME_TYPES } from "./constants";
 import { isInitializedImageElement } from "./element/typeChecks";
-import { isPromiseLike, isTestEnv } from "./utils";
+import { isPromiseLike } from "./utils";
 
 type ElementsClipboard = {
   type: typeof EXPORT_DATA_TYPES.excalidrawClipboard;
@@ -55,40 +55,24 @@ const clipboardContainsElements = (
 
 export const copyToClipboard = async (
   elements: readonly NonDeletedExcalidrawElement[],
+  appState: AppState,
   files: BinaryFiles | null,
 ) => {
-  let foundFile = false;
-
-  const _files = elements.reduce((acc, element) => {
-    if (isInitializedImageElement(element)) {
-      foundFile = true;
-      if (files && files[element.fileId]) {
-        acc[element.fileId] = files[element.fileId];
-      }
-    }
-    return acc;
-  }, {} as BinaryFiles);
-
-  if (foundFile && !files) {
-    console.warn(
-      "copyToClipboard: attempting to file element(s) without providing associated `files` object.",
-    );
-  }
-
   // select binded text elements when copying
   const contents: ElementsClipboard = {
     type: EXPORT_DATA_TYPES.excalidrawClipboard,
     elements,
-    files: files ? _files : undefined,
+    files: files
+      ? elements.reduce((acc, element) => {
+          if (isInitializedImageElement(element) && files[element.fileId]) {
+            acc[element.fileId] = files[element.fileId];
+          }
+          return acc;
+        }, {} as BinaryFiles)
+      : undefined,
   };
   const json = JSON.stringify(contents);
-
-  if (isTestEnv()) {
-    return json;
-  }
-
   CLIPBOARD = json;
-
   try {
     PREFER_APP_CLIPBOARD = false;
     await copyTextToSystemClipboard(json);

src/components/Actions.tsx

@@ -14,7 +14,7 @@ import {
   hasText,
 } from "../scene";
 import { SHAPES } from "../shapes";
-import { UIAppState, Zoom } from "../types";
+import { AppState, Zoom } from "../types";
 import {
   capitalizeString,
   isTransparent,
@@ -28,20 +28,19 @@ import { trackEvent } from "../analytics";
 import { hasBoundTextElement } from "../element/typeChecks";
 import clsx from "clsx";
 import { actionToggleZenMode } from "../actions";
+import "./Actions.scss";
 import { Tooltip } from "./Tooltip";
 import {
   shouldAllowVerticalAlign,
   suppportsHorizontalAlign,
 } from "../element/textElement";
 
-import "./Actions.scss";
-
 export const SelectedShapeActions = ({
   appState,
   elements,
   renderAction,
 }: {
-  appState: UIAppState;
+  appState: AppState;
   elements: readonly ExcalidrawElement[];
   renderAction: ActionManager["renderAction"];
 }) => {
@@ -216,10 +215,10 @@ export const ShapesSwitcher = ({
   appState,
 }: {
   canvas: HTMLCanvasElement | null;
-  activeTool: UIAppState["activeTool"];
+  activeTool: AppState["activeTool"];
-  setAppState: React.Component<any, UIAppState>["setState"];
+  setAppState: React.Component<any, AppState>["setState"];
   onImageAction: (data: { pointerType: PointerType | null }) => void;
-  appState: UIAppState;
+  appState: AppState;
 }) => (
   <>
     {SHAPES.map(({ value, icon, key, numericKey, fillable }, index) => {

src/components/App.tsx

@@ -1,8 +1,8 @@
 import React, { useContext } from "react";
 import { flushSync } from "react-dom";
 
-import { RoughCanvas } from "roughjs/bin/canvas";
+import { RoughCanvas } from "@excalidraw/roughjs/bin/canvas";
-import rough from "roughjs/bin/rough";
+import rough from "@excalidraw/roughjs/bin/rough";
 import clsx from "clsx";
 import { nanoid } from "nanoid";
 
@@ -60,7 +60,6 @@ import {
   ENV,
   EVENT,
   GRID_SIZE,
-  IMAGE_MIME_TYPES,
   IMAGE_RENDER_TIMEOUT,
   isAndroid,
   isBrave,
@@ -128,11 +127,7 @@ import {
 } from "../element/binding";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { mutateElement, newElementWith } from "../element/mutateElement";
-import {
+import { deepCopyElement, newFreeDrawElement } from "../element/newElement";
-  deepCopyElement,
-  duplicateElements,
-  newFreeDrawElement,
-} from "../element/newElement";
 import {
   hasBoundTextElement,
   isArrowElement,
@@ -210,8 +205,6 @@ import {
   PointerDownState,
   SceneData,
   Device,
-  SidebarName,
-  SidebarTabName,
 } from "../types";
 import {
   debounce,
@@ -298,12 +291,9 @@ import {
 } from "../actions/actionCanvas";
 import { jotaiStore } from "../jotai";
 import { activeConfirmDialogAtom } from "./ActiveConfirmDialog";
-import { actionWrapTextInContainer } from "../actions/actionBoundText";
+import { actionCreateContainerFromText } from "../actions/actionBoundText";
 import BraveMeasureTextError from "./BraveMeasureTextError";
 
-const AppContext = React.createContext<AppClassProperties>(null!);
-const AppPropsContext = React.createContext<AppProps>(null!);
-
 const deviceContextInitialValue = {
   isSmScreen: false,
   isMobile: false,
@@ -345,8 +335,6 @@ const ExcalidrawActionManagerContext = React.createContext<ActionManager>(
 );
 ExcalidrawActionManagerContext.displayName = "ExcalidrawActionManagerContext";
 
-export const useApp = () => useContext(AppContext);
-export const useAppProps = () => useContext(AppPropsContext);
 export const useDevice = () => useContext<Device>(DeviceContext);
 export const useExcalidrawContainer = () =>
   useContext(ExcalidrawContainerContext);
@@ -407,7 +395,7 @@ class App extends React.Component<AppProps, AppState> {
   private nearestScrollableContainer: HTMLElement | Document | undefined;
   public library: AppClassProperties["library"];
   public libraryItemsFromStorage: LibraryItems | undefined;
-  public id: string;
+  private id: string;
   private history: History;
   private excalidrawContainerValue: {
     container: HTMLDivElement | null;
@@ -445,7 +433,7 @@ class App extends React.Component<AppProps, AppState> {
       width: window.innerWidth,
       height: window.innerHeight,
       showHyperlinkPopup: false,
-      defaultSidebarDockedPreference: false,
+      isSidebarDocked: false,
     };
 
     this.id = nanoid();
@@ -476,7 +464,7 @@ class App extends React.Component<AppProps, AppState> {
         setActiveTool: this.setActiveTool,
         setCursor: this.setCursor,
         resetCursor: this.resetCursor,
-        toggleSidebar: this.toggleSidebar,
+        toggleMenu: this.toggleMenu,
       } as const;
       if (typeof excalidrawRef === "function") {
         excalidrawRef(api);
@@ -584,91 +572,101 @@ class App extends React.Component<AppProps, AppState> {
           this.props.handleKeyboardGlobally ? undefined : this.onKeyDown
         }
       >
-        <AppContext.Provider value={this}>
+        <ExcalidrawContainerContext.Provider
-          <AppPropsContext.Provider value={this.props}>
+          value={this.excalidrawContainerValue}
-            <ExcalidrawContainerContext.Provider
+        >
-              value={this.excalidrawContainerValue}
+          <DeviceContext.Provider value={this.device}>
-            >
+            <ExcalidrawSetAppStateContext.Provider value={this.setAppState}>
-              <DeviceContext.Provider value={this.device}>
+              <ExcalidrawAppStateContext.Provider value={this.state}>
-                <ExcalidrawSetAppStateContext.Provider value={this.setAppState}>
+                <ExcalidrawElementsContext.Provider
-                  <ExcalidrawAppStateContext.Provider value={this.state}>
+                  value={this.scene.getNonDeletedElements()}
-                    <ExcalidrawElementsContext.Provider
+                >
-                      value={this.scene.getNonDeletedElements()}
+                  <ExcalidrawActionManagerContext.Provider
+                    value={this.actionManager}
+                  >
+                    <LayerUI
+                      canvas={this.canvas}
+                      appState={this.state}
+                      files={this.files}
+                      setAppState={this.setAppState}
+                      actionManager={this.actionManager}
+                      elements={this.scene.getNonDeletedElements()}
+                      onLockToggle={this.toggleLock}
+                      onPenModeToggle={this.togglePenMode}
+                      onHandToolToggle={this.onHandToolToggle}
+                      onInsertElements={(elements) =>
+                        this.addElementsFromPasteOrLibrary({
+                          elements,
+                          position: "center",
+                          files: null,
+                        })
+                      }
+                      langCode={getLanguage().code}
+                      renderTopRightUI={renderTopRightUI}
+                      renderCustomStats={renderCustomStats}
+                      renderCustomSidebar={this.props.renderSidebar}
+                      showExitZenModeBtn={
+                        typeof this.props?.zenModeEnabled === "undefined" &&
+                        this.state.zenModeEnabled
+                      }
+                      libraryReturnUrl={this.props.libraryReturnUrl}
+                      UIOptions={this.props.UIOptions}
+                      focusContainer={this.focusContainer}
+                      library={this.library}
+                      id={this.id}
+                      onImageAction={this.onImageAction}
+                      renderWelcomeScreen={
+                        !this.state.isLoading &&
+                        this.state.showWelcomeScreen &&
+                        this.state.activeTool.type === "selection" &&
+                        !this.scene.getElementsIncludingDeleted().length
+                      }
                     >
-                      <ExcalidrawActionManagerContext.Provider
+                      {this.props.children}
-                        value={this.actionManager}
+                    </LayerUI>
-                      >
+                    <div className="excalidraw-textEditorContainer" />
-                        <LayerUI
+                    <div className="excalidraw-contextMenuContainer" />
-                          canvas={this.canvas}
+                    {selectedElement.length === 1 &&
-                          appState={this.state}
+                      !this.state.contextMenu &&
-                          files={this.files}
+                      this.state.showHyperlinkPopup && (
+                        <Hyperlink
+                          key={selectedElement[0].id}
+                          element={selectedElement[0]}
                           setAppState={this.setAppState}
-                          actionManager={this.actionManager}
+                          onLinkOpen={this.props.onLinkOpen}
-                          elements={this.scene.getNonDeletedElements()}
+                        />
-                          onLockToggle={this.toggleLock}
+                      )}
-                          onPenModeToggle={this.togglePenMode}
+                    {this.state.toast !== null && (
-                          onHandToolToggle={this.onHandToolToggle}
+                      <Toast
-                          langCode={getLanguage().code}
+                        message={this.state.toast.message}
-                          renderTopRightUI={renderTopRightUI}
+                        onClose={() => this.setToast(null)}
-                          renderCustomStats={renderCustomStats}
+                        duration={this.state.toast.duration}
-                          showExitZenModeBtn={
+                        closable={this.state.toast.closable}
-                            typeof this.props?.zenModeEnabled === "undefined" &&
+                      />
-                            this.state.zenModeEnabled
+                    )}
-                          }
+                    {this.state.contextMenu && (
-                          UIOptions={this.props.UIOptions}
+                      <ContextMenu
-                          onImageAction={this.onImageAction}
+                        items={this.state.contextMenu.items}
-                          renderWelcomeScreen={
+                        top={this.state.contextMenu.top}
-                            !this.state.isLoading &&
+                        left={this.state.contextMenu.left}
-                            this.state.showWelcomeScreen &&
+                        actionManager={this.actionManager}
-                            this.state.activeTool.type === "selection" &&
+                      />
-                            !this.scene.getElementsIncludingDeleted().length
+                    )}
-                          }
+                    <main>{this.renderCanvas()}</main>
-                        >
+                  </ExcalidrawActionManagerContext.Provider>
-                          {this.props.children}
+                </ExcalidrawElementsContext.Provider>{" "}
-                        </LayerUI>
+              </ExcalidrawAppStateContext.Provider>
-                        <div className="excalidraw-textEditorContainer" />
+            </ExcalidrawSetAppStateContext.Provider>
-                        <div className="excalidraw-contextMenuContainer" />
+          </DeviceContext.Provider>
-                        {selectedElement.length === 1 &&
+        </ExcalidrawContainerContext.Provider>
-                          !this.state.contextMenu &&
-                          this.state.showHyperlinkPopup && (
-                            <Hyperlink
-                              key={selectedElement[0].id}
-                              element={selectedElement[0]}
-                              setAppState={this.setAppState}
-                              onLinkOpen={this.props.onLinkOpen}
-                            />
-                          )}
-                        {this.state.toast !== null && (
-                          <Toast
-                            message={this.state.toast.message}
-                            onClose={() => this.setToast(null)}
-                            duration={this.state.toast.duration}
-                            closable={this.state.toast.closable}
-                          />
-                        )}
-                        {this.state.contextMenu && (
-                          <ContextMenu
-                            items={this.state.contextMenu.items}
-                            top={this.state.contextMenu.top}
-                            left={this.state.contextMenu.left}
-                            actionManager={this.actionManager}
-                          />
-                        )}
-                        <main>{this.renderCanvas()}</main>
-                      </ExcalidrawActionManagerContext.Provider>
-                    </ExcalidrawElementsContext.Provider>{" "}
-                  </ExcalidrawAppStateContext.Provider>
-                </ExcalidrawSetAppStateContext.Provider>
-              </DeviceContext.Provider>
-            </ExcalidrawContainerContext.Provider>
-          </AppPropsContext.Provider>
-        </AppContext.Provider>
       </div>
     );
   }
 
   public focusContainer: AppClassProperties["focusContainer"] = () => {
-    this.excalidrawContainerRef.current?.focus();
+    if (this.props.autoFocus) {
+      this.excalidrawContainerRef.current?.focus();
+    }
   };
 
   public getSceneElementsIncludingDeleted = () => {
@@ -679,14 +677,6 @@ class App extends React.Component<AppProps, AppState> {
     return this.scene.getNonDeletedElements();
   };
 
-  public onInsertElements = (elements: readonly ExcalidrawElement[]) => {
-    this.addElementsFromPasteOrLibrary({
-      elements,
-      position: "center",
-      files: null,
-    });
-  };
-
   private syncActionResult = withBatchedUpdates(
     (actionResult: ActionResult) => {
       if (this.unmounted || actionResult === false) {
@@ -956,7 +946,7 @@ class App extends React.Component<AppProps, AppState> {
     this.scene.addCallback(this.onSceneUpdated);
     this.addEventListeners();
 
-    if (this.props.autoFocus && this.excalidrawContainerRef.current) {
+    if (this.excalidrawContainerRef.current) {
       this.focusContainer();
     }
 
@@ -1595,7 +1585,6 @@ class App extends React.Component<AppProps, AppState> {
           elements: data.elements,
           files: data.files || null,
           position: "cursor",
-          retainSeed: isPlainPaste,
         });
       } else if (data.text) {
         this.addTextFromPaste(data.text, isPlainPaste);
@@ -1609,7 +1598,6 @@ class App extends React.Component<AppProps, AppState> {
     elements: readonly ExcalidrawElement[];
     files: BinaryFiles | null;
     position: { clientX: number; clientY: number } | "cursor" | "center";
-    retainSeed?: boolean;
   }) => {
     const elements = restoreElements(opts.elements, null);
     const [minX, minY, maxX, maxY] = getCommonBounds(elements);
@@ -1637,25 +1625,35 @@ class App extends React.Component<AppProps, AppState> {
 
     const dx = x - elementsCenterX;
     const dy = y - elementsCenterY;
+    const groupIdMap = new Map();
 
     const [gridX, gridY] = getGridPoint(dx, dy, this.state.gridSize);
 
-    const newElements = duplicateElements(
+    const oldIdToDuplicatedId = new Map();
-      elements.map((element) => {
+    const newElements = elements.map((element) => {
-        return newElementWith(element, {
+      const newElement = duplicateElement(
+        this.state.editingGroupId,
+        groupIdMap,
+        element,
+        {
           x: element.x + gridX - minX,
           y: element.y + gridY - minY,
-        });
+        },
-      }),
+      );
-      {
+      oldIdToDuplicatedId.set(element.id, newElement.id);
-        randomizeSeed: !opts.retainSeed,
+      return newElement;
-      },
+    });
-    );
 
+    bindTextToShapeAfterDuplication(newElements, elements, oldIdToDuplicatedId);
     const nextElements = [
       ...this.scene.getElementsIncludingDeleted(),
       ...newElements,
     ];
+    fixBindingsAfterDuplication(nextElements, elements, oldIdToDuplicatedId);
+
+    if (opts.files) {
+      this.files = { ...this.files, ...opts.files };
+    }
 
     this.scene.replaceAllElements(nextElements);
 
@@ -1666,10 +1664,6 @@ class App extends React.Component<AppProps, AppState> {
       }
     });
 
-    if (opts.files) {
-      this.files = { ...this.files, ...opts.files };
-    }
-
     this.history.resumeRecording();
 
     this.setState(
@@ -1684,7 +1678,7 @@ class App extends React.Component<AppProps, AppState> {
           openSidebar:
             this.state.openSidebar &&
             this.device.canDeviceFitSidebar &&
-            this.state.defaultSidebarDockedPreference
+            this.state.isSidebarDocked
               ? this.state.openSidebar
               : null,
           selectedElementIds: newElements.reduce(
@@ -2022,24 +2016,30 @@ class App extends React.Component<AppProps, AppState> {
   /**
    * @returns whether the menu was toggled on or off
    */
-  public toggleSidebar = ({
+  public toggleMenu = (
-    name,
+    type: "library" | "customSidebar",
-    tab,
+    force?: boolean,
-    force,
+  ): boolean => {
-  }: {
+    if (type === "customSidebar" && !this.props.renderSidebar) {
-    name: SidebarName;
+      console.warn(
-    tab?: SidebarTabName;
+        `attempting to toggle "customSidebar", but no "props.renderSidebar" is defined`,
-    force?: boolean;
+      );
-  }): boolean => {
+      return false;
-    let nextName;
-    if (force === undefined) {
-      nextName = this.state.openSidebar?.name === name ? null : name;
-    } else {
-      nextName = force ? name : null;
     }
-    this.setState({ openSidebar: nextName ? { name: nextName, tab } : null });
 
-    return !!nextName;
+    if (type === "library" || type === "customSidebar") {
+      let nextValue;
+      if (force === undefined) {
+        nextValue = this.state.openSidebar === type ? null : type;
+      } else {
+        nextValue = force ? type : null;
+      }
+      this.setState({ openSidebar: nextValue });
+
+      return !!nextValue;
+    }
+
+    return false;
   };
 
   private updateCurrentCursorPosition = withBatchedUpdates(
@@ -2737,6 +2737,7 @@ class App extends React.Component<AppProps, AppState> {
           strokeStyle: this.state.currentItemStrokeStyle,
           roughness: this.state.currentItemRoughness,
           opacity: this.state.currentItemOpacity,
+          roundness: null,
           text: "",
           fontSize,
           fontFamily,
@@ -2748,8 +2749,8 @@ class App extends React.Component<AppProps, AppState> {
             : DEFAULT_VERTICAL_ALIGN,
           containerId: shouldBindToContainer ? container?.id : undefined,
           groupIds: container?.groupIds ?? [],
+          locked: false,
           lineHeight,
-          angle: container?.angle ?? 0,
         });
 
     if (!existingTextElement && shouldBindToContainer && container) {
@@ -3499,43 +3500,6 @@ class App extends React.Component<AppProps, AppState> {
       this.setState({ contextMenu: null });
     }
 
-    this.updateGestureOnPointerDown(event);
-
-    // if dragging element is freedraw and another pointerdown event occurs
-    // a second finger is on the screen
-    // discard the freedraw element if it is very short because it is likely
-    // just a spike, otherwise finalize the freedraw element when the second
-    // finger is lifted
-    if (
-      event.pointerType === "touch" &&
-      this.state.draggingElement &&
-      this.state.draggingElement.type === "freedraw"
-    ) {
-      const element = this.state.draggingElement as ExcalidrawFreeDrawElement;
-      this.updateScene({
-        ...(element.points.length < 10
-          ? {
-              elements: this.scene
-                .getElementsIncludingDeleted()
-                .filter((el) => el.id !== element.id),
-            }
-          : {}),
-        appState: {
-          draggingElement: null,
-          editingElement: null,
-          startBoundElement: null,
-          suggestedBindings: [],
-          selectedElementIds: Object.keys(this.state.selectedElementIds)
-            .filter((key) => key !== element.id)
-            .reduce((obj: { [id: string]: boolean }, key) => {
-              obj[key] = this.state.selectedElementIds[key];
-              return obj;
-            }, {}),
-        },
-      });
-      return;
-    }
-
     // remove any active selection when we start to interact with canvas
     // (mainly, we care about removing selection outside the component which
     //  would prevent our copy handling otherwise)
@@ -3575,6 +3539,8 @@ class App extends React.Component<AppProps, AppState> {
     });
     this.savePointer(event.clientX, event.clientY, "down");
 
+    this.updateGestureOnPointerDown(event);
+
     if (this.handleCanvasPanUsingWheelOrSpaceDrag(event)) {
       return;
     }
@@ -4725,12 +4691,7 @@ class App extends React.Component<AppProps, AppState> {
         pointerDownState.drag.hasOccurred = true;
         // prevent dragging even if we're no longer holding cmd/ctrl otherwise
         // it would have weird results (stuff jumping all over the screen)
-        // Checking for editingElement to avoid jump while editing on mobile #6503
+        if (selectedElements.length > 0 && !pointerDownState.withCmdOrCtrl) {
-        if (
-          selectedElements.length > 0 &&
-          !pointerDownState.withCmdOrCtrl &&
-          !this.state.editingElement
-        ) {
           const [dragX, dragY] = getGridPoint(
             pointerCoords.x - pointerDownState.drag.offset.x,
             pointerCoords.y - pointerDownState.drag.offset.y,
@@ -5753,9 +5714,7 @@ class App extends React.Component<AppProps, AppState> {
 
       const imageFile = await fileOpen({
         description: "Image",
-        extensions: Object.keys(
+        extensions: ["jpg", "png", "svg", "gif"],
-          IMAGE_MIME_TYPES,
-        ) as (keyof typeof IMAGE_MIME_TYPES)[],
       });
 
       const imageElement = this.createImageElement({
@@ -6377,7 +6336,7 @@ class App extends React.Component<AppProps, AppState> {
       actionGroup,
       actionUnbindText,
       actionBindText,
-      actionWrapTextInContainer,
+      actionCreateContainerFromText,
       actionUngroup,
       CONTEXT_MENU_SEPARATOR,
       actionAddToLibrary,

src/components/BraveMeasureTextError.tsx

@@ -1,40 +1,39 @@
-import Trans from "./Trans";
+import { t } from "../i18n";
-
 const BraveMeasureTextError = () => {
   return (
     <div data-testid="brave-measure-text-error">
       <p>
-        <Trans
+        {t("errors.brave_measure_text_error.start")} &nbsp;
-          i18nKey="errors.brave_measure_text_error.line1"
+        <span style={{ fontWeight: 600 }}>
-          bold={(el) => <span style={{ fontWeight: 600 }}>{el}</span>}
+          {t("errors.brave_measure_text_error.aggressive_block_fingerprint")}
-        />
+        </span>{" "}
+        {t("errors.brave_measure_text_error.setting_enabled")}.
+        <br />
+        <br />
+        {t("errors.brave_measure_text_error.break")}{" "}
+        <span style={{ fontWeight: 600 }}>
+          {t("errors.brave_measure_text_error.text_elements")}
+        </span>{" "}
+        {t("errors.brave_measure_text_error.in_your_drawings")}.
       </p>
       <p>
-        <Trans
+        {t("errors.brave_measure_text_error.strongly_recommend")}{" "}
-          i18nKey="errors.brave_measure_text_error.line2"
+        <a href="http://docs.excalidraw.com/docs/@excalidraw/excalidraw/faq#turning-off-aggresive-block-fingerprinting-in-brave-browser">
-          bold={(el) => <span style={{ fontWeight: 600 }}>{el}</span>}
+          {" "}
-        />
+          {t("errors.brave_measure_text_error.steps")}
+        </a>{" "}
+        {t("errors.brave_measure_text_error.how")}.
       </p>
       <p>
-        <Trans
+        {t("errors.brave_measure_text_error.disable_setting")}{" "}
-          i18nKey="errors.brave_measure_text_error.line3"
+        <a href="https://github.com/excalidraw/excalidraw/issues/new">
-          link={(el) => (
+          {t("errors.brave_measure_text_error.issue")}
-            <a href="http://docs.excalidraw.com/docs/@excalidraw/excalidraw/faq#turning-off-aggresive-block-fingerprinting-in-brave-browser">
+        </a>{" "}
-              {el}
+        {t("errors.brave_measure_text_error.write")}{" "}
-            </a>
+        <a href="https://discord.gg/UexuTaE">
-          )}
+          {t("errors.brave_measure_text_error.discord")}
-        />
+        </a>
-      </p>
+        .
-      <p>
-        <Trans
-          i18nKey="errors.brave_measure_text_error.line4"
-          issueLink={(el) => (
-            <a href="https://github.com/excalidraw/excalidraw/issues/new">
-              {el}
-            </a>
-          )}
-          discordLink={(el) => <a href="https://discord.gg/UexuTaE">{el}.</a>}
-        />
       </p>
     </div>
   );

src/components/Button.tsx

@@ -1,12 +1,8 @@
-import clsx from "clsx";
-import { composeEventHandlers } from "../utils";
 import "./Button.scss";
 
 interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
   type?: "button" | "submit" | "reset";
   onSelect: () => any;
-  /** whether button is in active state */
-  selected?: boolean;
   children: React.ReactNode;
   className?: string;
 }
@@ -19,18 +15,18 @@ interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
 export const Button = ({
   type = "button",
   onSelect,
-  selected,
   children,
   className = "",
   ...rest
 }: ButtonProps) => {
   return (
     <button
-      onClick={composeEventHandlers(rest.onClick, (event) => {
+      onClick={(event) => {
         onSelect();
-      })}
+        rest.onClick?.(event);
+      }}
       type={type}
-      className={clsx("excalidraw-button", className, { selected })}
+      className={`excalidraw-button ${className}`}
       {...rest}
     >
       {children}

src/components/ButtonIconSelect.tsx

@@ -1,59 +1,33 @@
 import clsx from "clsx";
 
 // TODO: It might be "clever" to add option.icon to the existing component <ButtonSelect />
-export const ButtonIconSelect = <T extends Object>(
+export const ButtonIconSelect = <T extends Object>({
-  props: {
+  options,
-    options: {
+  value,
-      value: T;
+  onChange,
-      text: string;
+  group,
-      icon: JSX.Element;
+}: {
-      testId?: string;
+  options: { value: T; text: string; icon: JSX.Element; testId?: string }[];
-      /** if not supplied, defaults to value identity check */
+  value: T | null;
-      active?: boolean;
+  onChange: (value: T) => void;
-    }[];
+  group: string;
-    value: T | null;
+}) => (
-    type?: "radio" | "button";
-  } & (
-    | { type?: "radio"; group: string; onChange: (value: T) => void }
-    | {
-        type: "button";
-        onClick: (
-          value: T,
-          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
-        ) => void;
-      }
-  ),
-) => (
   <div className="buttonList buttonListIcon">
-    {props.options.map((option) =>
+    {options.map((option) => (
-      props.type === "button" ? (
+      <label
-        <button
+        key={option.text}
-          key={option.text}
+        className={clsx({ active: value === option.value })}
-          onClick={(event) => props.onClick(option.value, event)}
+        title={option.text}
-          className={clsx({
+      >
-            active: option.active ?? props.value === option.value,
+        <input
-          })}
+          type="radio"
+          name={group}
+          onChange={() => onChange(option.value)}
+          checked={value === option.value}
           data-testid={option.testId}
-          title={option.text}
+        />
-        >
+        {option.icon}
-          {option.icon}
+      </label>
-        </button>
+    ))}
-      ) : (
-        <label
-          key={option.text}
-          className={clsx({ active: props.value === option.value })}
-          title={option.text}
-        >
-          <input
-            type="radio"
-            name={props.group}
-            onChange={() => props.onChange(option.value)}
-            checked={props.value === option.value}
-            data-testid={option.testId}
-          />
-          {option.icon}
-        </label>
-      ),
-    )}
   </div>
 );

src/components/ColorPicker.scss

@@ -183,7 +183,6 @@
     width: 100%;
     margin: 0;
     font-size: 0.875rem;
-    font-family: inherit;
     background-color: transparent;
     color: var(--text-primary-color);
     border: 0;

src/components/ConfirmDialog.tsx

@@ -4,8 +4,8 @@ import { Dialog, DialogProps } from "./Dialog";
 import "./ConfirmDialog.scss";
 import DialogActionButton from "./DialogActionButton";
 import { useSetAtom } from "jotai";
-import { isLibraryMenuOpenAtom } from "./LibraryMenu";
+import { isLibraryMenuOpenAtom } from "./LibraryMenuHeaderContent";
-import { useExcalidrawContainer, useExcalidrawSetAppState } from "./App";
+import { useExcalidrawSetAppState } from "./App";
 import { jotaiScope } from "../jotai";
 
 interface Props extends Omit<DialogProps, "onCloseRequest"> {
@@ -26,7 +26,6 @@ const ConfirmDialog = (props: Props) => {
   } = props;
   const setAppState = useExcalidrawSetAppState();
   const setIsLibraryMenuOpen = useSetAtom(isLibraryMenuOpenAtom, jotaiScope);
-  const { container } = useExcalidrawContainer();
 
   return (
     <Dialog
@@ -43,7 +42,6 @@ const ConfirmDialog = (props: Props) => {
             setAppState({ openMenu: null });
             setIsLibraryMenuOpen(false);
             onCancel();
-            container?.focus();
           }}
         />
         <DialogActionButton
@@ -52,7 +50,6 @@ const ConfirmDialog = (props: Props) => {
             setAppState({ openMenu: null });
             setIsLibraryMenuOpen(false);
             onConfirm();
-            container?.focus();
           }}
           actionType="danger"
         />

src/components/ContextMenu.scss

@@ -30,7 +30,6 @@
     background-color: transparent;
     border: none;
     white-space: nowrap;
-    font-family: inherit;
 
     display: grid;
     grid-template-columns: 1fr 0.2fr;

src/components/DefaultSidebar.test.tsx

@@ -1,144 +0,0 @@
-import React from "react";
-import { DEFAULT_SIDEBAR } from "../constants";
-import { DefaultSidebar } from "../packages/excalidraw/index";
-import {
-  fireEvent,
-  waitFor,
-  withExcalidrawDimensions,
-} from "../tests/test-utils";
-import {
-  assertExcalidrawWithSidebar,
-  assertSidebarDockButton,
-} from "./Sidebar/Sidebar.test";
-
-const { h } = window;
-
-describe("DefaultSidebar", () => {
-  it("when `docked={undefined}` & `onDock={undefined}`, should allow docking", async () => {
-    await assertExcalidrawWithSidebar(
-      <DefaultSidebar />,
-      DEFAULT_SIDEBAR.name,
-      async () => {
-        expect(h.state.defaultSidebarDockedPreference).toBe(false);
-
-        const { dockButton } = await assertSidebarDockButton(true);
-
-        fireEvent.click(dockButton);
-        await waitFor(() => {
-          expect(h.state.defaultSidebarDockedPreference).toBe(true);
-          expect(dockButton).toHaveClass("selected");
-        });
-
-        fireEvent.click(dockButton);
-        await waitFor(() => {
-          expect(h.state.defaultSidebarDockedPreference).toBe(false);
-          expect(dockButton).not.toHaveClass("selected");
-        });
-      },
-    );
-  });
-
-  it("when `docked={undefined}` & `onDock`, should allow docking", async () => {
-    await assertExcalidrawWithSidebar(
-      <DefaultSidebar onDock={() => {}} />,
-      DEFAULT_SIDEBAR.name,
-      async () => {
-        expect(h.state.defaultSidebarDockedPreference).toBe(false);
-
-        const { dockButton } = await assertSidebarDockButton(true);
-
-        fireEvent.click(dockButton);
-        await waitFor(() => {
-          expect(h.state.defaultSidebarDockedPreference).toBe(true);
-          expect(dockButton).toHaveClass("selected");
-        });
-
-        fireEvent.click(dockButton);
-        await waitFor(() => {
-          expect(h.state.defaultSidebarDockedPreference).toBe(false);
-          expect(dockButton).not.toHaveClass("selected");
-        });
-      },
-    );
-  });
-
-  it("when `docked={true}` & `onDock`, should allow docking", async () => {
-    await assertExcalidrawWithSidebar(
-      <DefaultSidebar onDock={() => {}} />,
-      DEFAULT_SIDEBAR.name,
-      async () => {
-        expect(h.state.defaultSidebarDockedPreference).toBe(false);
-
-        const { dockButton } = await assertSidebarDockButton(true);
-
-        fireEvent.click(dockButton);
-        await waitFor(() => {
-          expect(h.state.defaultSidebarDockedPreference).toBe(true);
-          expect(dockButton).toHaveClass("selected");
-        });
-
-        fireEvent.click(dockButton);
-        await waitFor(() => {
-          expect(h.state.defaultSidebarDockedPreference).toBe(false);
-          expect(dockButton).not.toHaveClass("selected");
-        });
-      },
-    );
-  });
-
-  it("when `onDock={false}`, should disable docking", async () => {
-    await assertExcalidrawWithSidebar(
-      <DefaultSidebar onDock={false} />,
-      DEFAULT_SIDEBAR.name,
-      async () => {
-        await withExcalidrawDimensions(
-          { width: 1920, height: 1080 },
-          async () => {
-            expect(h.state.defaultSidebarDockedPreference).toBe(false);
-
-            await assertSidebarDockButton(false);
-          },
-        );
-      },
-    );
-  });
-
-  it("when `docked={true}` & `onDock={false}`, should force-dock sidebar", async () => {
-    await assertExcalidrawWithSidebar(
-      <DefaultSidebar docked onDock={false} />,
-      DEFAULT_SIDEBAR.name,
-      async () => {
-        expect(h.state.defaultSidebarDockedPreference).toBe(false);
-
-        const { sidebar } = await assertSidebarDockButton(false);
-        expect(sidebar).toHaveClass("sidebar--docked");
-      },
-    );
-  });
-
-  it("when `docked={true}` & `onDock={undefined}`, should force-dock sidebar", async () => {
-    await assertExcalidrawWithSidebar(
-      <DefaultSidebar docked />,
-      DEFAULT_SIDEBAR.name,
-      async () => {
-        expect(h.state.defaultSidebarDockedPreference).toBe(false);
-
-        const { sidebar } = await assertSidebarDockButton(false);
-        expect(sidebar).toHaveClass("sidebar--docked");
-      },
-    );
-  });
-
-  it("when `docked={false}` & `onDock={undefined}`, should force-undock sidebar", async () => {
-    await assertExcalidrawWithSidebar(
-      <DefaultSidebar docked={false} />,
-      DEFAULT_SIDEBAR.name,
-      async () => {
-        expect(h.state.defaultSidebarDockedPreference).toBe(false);
-
-        const { sidebar } = await assertSidebarDockButton(false);
-        expect(sidebar).not.toHaveClass("sidebar--docked");
-      },
-    );
-  });
-});

src/components/DefaultSidebar.tsx

@@ -1,118 +0,0 @@
-import clsx from "clsx";
-import { DEFAULT_SIDEBAR, LIBRARY_SIDEBAR_TAB } from "../constants";
-import { useTunnels } from "../context/tunnels";
-import { useUIAppState } from "../context/ui-appState";
-import { t } from "../i18n";
-import { MarkOptional, Merge } from "../utility-types";
-import { composeEventHandlers } from "../utils";
-import { useExcalidrawSetAppState } from "./App";
-import { withInternalFallback } from "./hoc/withInternalFallback";
-import { LibraryMenu } from "./LibraryMenu";
-import { SidebarProps, SidebarTriggerProps } from "./Sidebar/common";
-import { Sidebar } from "./Sidebar/Sidebar";
-
-const DefaultSidebarTrigger = withInternalFallback(
-  "DefaultSidebarTrigger",
-  (
-    props: Omit<SidebarTriggerProps, "name"> &
-      React.HTMLAttributes<HTMLDivElement>,
-  ) => {
-    const { DefaultSidebarTriggerTunnel } = useTunnels();
-    return (
-      <DefaultSidebarTriggerTunnel.In>
-        <Sidebar.Trigger
-          {...props}
-          className="default-sidebar-trigger"
-          name={DEFAULT_SIDEBAR.name}
-        />
-      </DefaultSidebarTriggerTunnel.In>
-    );
-  },
-);
-DefaultSidebarTrigger.displayName = "DefaultSidebarTrigger";
-
-const DefaultTabTriggers = ({
-  children,
-  ...rest
-}: { children: React.ReactNode } & React.HTMLAttributes<HTMLDivElement>) => {
-  const { DefaultSidebarTabTriggersTunnel } = useTunnels();
-  return (
-    <DefaultSidebarTabTriggersTunnel.In>
-      <Sidebar.TabTriggers {...rest}>{children}</Sidebar.TabTriggers>
-    </DefaultSidebarTabTriggersTunnel.In>
-  );
-};
-DefaultTabTriggers.displayName = "DefaultTabTriggers";
-
-export const DefaultSidebar = Object.assign(
-  withInternalFallback(
-    "DefaultSidebar",
-    ({
-      children,
-      className,
-      onDock,
-      docked,
-      ...rest
-    }: Merge<
-      MarkOptional<Omit<SidebarProps, "name">, "children">,
-      {
-        /** pass `false` to disable docking */
-        onDock?: SidebarProps["onDock"] | false;
-      }
-    >) => {
-      const appState = useUIAppState();
-      const setAppState = useExcalidrawSetAppState();
-
-      const { DefaultSidebarTabTriggersTunnel } = useTunnels();
-
-      return (
-        <Sidebar
-          {...rest}
-          name="default"
-          key="default"
-          className={clsx("default-sidebar", className)}
-          docked={docked ?? appState.defaultSidebarDockedPreference}
-          onDock={
-            // `onDock=false` disables docking.
-            // if `docked` passed, but no onDock passed, disable manual docking.
-            onDock === false || (!onDock && docked != null)
-              ? undefined
-              : // compose to allow the host app to listen on default behavior
-                composeEventHandlers(onDock, (docked) => {
-                  setAppState({ defaultSidebarDockedPreference: docked });
-                })
-          }
-        >
-          <Sidebar.Tabs>
-            <Sidebar.Header>
-              {rest.__fallback && (
-                <div
-                  style={{
-                    color: "var(--color-primary)",
-                    fontSize: "1.2em",
-                    fontWeight: "bold",
-                    textOverflow: "ellipsis",
-                    overflow: "hidden",
-                    whiteSpace: "nowrap",
-                    paddingRight: "1em",
-                  }}
-                >
-                  {t("toolBar.library")}
-                </div>
-              )}
-              <DefaultSidebarTabTriggersTunnel.Out />
-            </Sidebar.Header>
-            <Sidebar.Tab tab={LIBRARY_SIDEBAR_TAB}>
-              <LibraryMenu />
-            </Sidebar.Tab>
-            {children}
-          </Sidebar.Tabs>
-        </Sidebar>
-      );
-    },
-  ),
-  {
-    Trigger: DefaultSidebarTrigger,
-    TabTriggers: DefaultTabTriggers,
-  },
-);

src/components/Dialog.tsx

@@ -15,7 +15,7 @@ import { Modal } from "./Modal";
 import { AppState } from "../types";
 import { queryFocusableElements } from "../utils";
 import { useSetAtom } from "jotai";
-import { isLibraryMenuOpenAtom } from "./LibraryMenu";
+import { isLibraryMenuOpenAtom } from "./LibraryMenuHeaderContent";
 import { jotaiScope } from "../jotai";
 
 export interface DialogProps {

src/components/HelpDialog.tsx

@@ -165,12 +165,11 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
               shortcuts={[KEYS.E, KEYS["0"]]}
             />
             <Shortcut
-              label={t("helpDialog.editLineArrowPoints")}
+              label={t("helpDialog.editSelectedShape")}
-              shortcuts={[getShortcutKey("CtrlOrCmd+Enter")]}
+              shortcuts={[
-            />
+                getShortcutKey("CtrlOrCmd+Enter"),
-            <Shortcut
+                getShortcutKey(`CtrlOrCmd + ${t("helpDialog.doubleClick")}`),
-              label={t("helpDialog.editText")}
+              ]}
-              shortcuts={[getShortcutKey("Enter")]}
             />
             <Shortcut
               label={t("helpDialog.textNewLine")}

src/components/HintViewer.tsx

@@ -1,7 +1,9 @@
 import { t } from "../i18n";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { getSelectedElements } from "../scene";
-import { Device, UIAppState } from "../types";
+
+import "./HintViewer.scss";
+import { AppState, Device } from "../types";
 import {
   isImageElement,
   isLinearElement,
@@ -11,10 +13,8 @@ import {
 import { getShortcutKey } from "../utils";
 import { isEraserActive } from "../appState";
 
-import "./HintViewer.scss";
-
 interface HintViewerProps {
-  appState: UIAppState;
+  appState: AppState;
   elements: readonly NonDeletedExcalidrawElement[];
   isMobile: boolean;
   device: Device;
@@ -29,7 +29,7 @@ const getHints = ({
   const { activeTool, isResizing, isRotating, lastPointerDownWith } = appState;
   const multiMode = appState.multiElement !== null;
 
-  if (appState.openSidebar && !device.canDeviceFitSidebar) {
+  if (appState.openSidebar === "library" && !device.canDeviceFitSidebar) {
     return null;
   }
 

src/components/ImageExportDialog.tsx

@@ -4,18 +4,17 @@ import { canvasToBlob } from "../data/blob";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
-import { BinaryFiles, UIAppState } from "../types";
+import { exportToCanvas } from "../scene/export";
+import { AppState, BinaryFiles } from "../types";
 import { Dialog } from "./Dialog";
 import { clipboard } from "./icons";
 import Stack from "./Stack";
+import "./ExportDialog.scss";
 import OpenColor from "open-color";
 import { CheckboxItem } from "./CheckboxItem";
 import { DEFAULT_EXPORT_PADDING, isFirefox } from "../constants";
 import { nativeFileSystemSupported } from "../data/filesystem";
 import { ActionManager } from "../actions/manager";
-import { exportToCanvas } from "../packages/utils";
-
-import "./ExportDialog.scss";
 
 const supportsContextFilters =
   "filter" in document.createElement("canvas").getContext("2d")!;
@@ -71,7 +70,7 @@ const ImageExportModal = ({
   onExportToSvg,
   onExportToClipboard,
 }: {
-  appState: UIAppState;
+  appState: AppState;
   elements: readonly NonDeletedExcalidrawElement[];
   files: BinaryFiles;
   exportPadding?: number;
@@ -84,6 +83,7 @@ const ImageExportModal = ({
   const someElementIsSelected = isSomeElementSelected(elements, appState);
   const [exportSelected, setExportSelected] = useState(someElementIsSelected);
   const previewRef = useRef<HTMLDivElement>(null);
+  const { exportBackground, viewBackgroundColor } = appState;
   const [renderError, setRenderError] = useState<Error | null>(null);
 
   const exportedElements = exportSelected
@@ -99,16 +99,10 @@ const ImageExportModal = ({
     if (!previewNode) {
       return;
     }
-    const maxWidth = previewNode.offsetWidth;
+    exportToCanvas(exportedElements, appState, files, {
-    if (!maxWidth) {
+      exportBackground,
-      return;
+      viewBackgroundColor,
-    }
-    exportToCanvas({
-      elements: exportedElements,
-      appState,
-      files,
       exportPadding,
-      maxWidthOrHeight: maxWidth,
     })
       .then((canvas) => {
         setRenderError(null);
@@ -122,7 +116,14 @@ const ImageExportModal = ({
         console.error(error);
         setRenderError(error);
       });
-  }, [appState, files, exportedElements, exportPadding]);
+  }, [
+    appState,
+    files,
+    exportedElements,
+    exportBackground,
+    exportPadding,
+    viewBackgroundColor,
+  ]);
 
   return (
     <div className="ExportDialog">
@@ -217,8 +218,8 @@ export const ImageExportDialog = ({
   onExportToSvg,
   onExportToClipboard,
 }: {
-  appState: UIAppState;
+  appState: AppState;
-  setAppState: React.Component<any, UIAppState>["setState"];
+  setAppState: React.Component<any, AppState>["setState"];
   elements: readonly NonDeletedExcalidrawElement[];
   files: BinaryFiles;
   exportPadding?: number;

src/components/JSONExportDialog.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
 
-import { ExportOpts, BinaryFiles, UIAppState } from "../types";
+import { AppState, ExportOpts, BinaryFiles } from "../types";
 import { Dialog } from "./Dialog";
 import { exportToFileIcon, LinkIcon } from "./icons";
 import { ToolButton } from "./ToolButton";
@@ -28,7 +28,7 @@ const JSONExportModal = ({
   exportOpts,
   canvas,
 }: {
-  appState: UIAppState;
+  appState: AppState;
   files: BinaryFiles;
   elements: readonly NonDeletedExcalidrawElement[];
   actionManager: ActionManager;
@@ -96,12 +96,12 @@ export const JSONExportDialog = ({
   setAppState,
 }: {
   elements: readonly NonDeletedExcalidrawElement[];
-  appState: UIAppState;
+  appState: AppState;
   files: BinaryFiles;
   actionManager: ActionManager;
   exportOpts: ExportOpts;
   canvas: HTMLCanvasElement | null;
-  setAppState: React.Component<any, UIAppState>["setState"];
+  setAppState: React.Component<any, AppState>["setState"];
 }) => {
   const handleClose = React.useCallback(() => {
     setAppState({ openDialog: null });

src/components/LayerUI.tsx

@@ -1,21 +1,15 @@
 import clsx from "clsx";
 import React from "react";
 import { ActionManager } from "../actions/manager";
-import { CLASSES, DEFAULT_SIDEBAR, LIBRARY_SIDEBAR_WIDTH } from "../constants";
+import { CLASSES, LIBRARY_SIDEBAR_WIDTH } from "../constants";
 import { exportCanvas } from "../data";
 import { isTextElement, showSelectedShapeActions } from "../element";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { Language, t } from "../i18n";
 import { calculateScrollCenter } from "../scene";
 import { ExportType } from "../scene/types";
-import {
+import { AppProps, AppState, ExcalidrawProps, BinaryFiles } from "../types";
-  AppProps,
+import { isShallowEqual, muteFSAbortError } from "../utils";
-  AppState,
-  ExcalidrawProps,
-  BinaryFiles,
-  UIAppState,
-} from "../types";
-import { capitalizeString, isShallowEqual, muteFSAbortError } from "../utils";
 import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
 import { ErrorDialog } from "./ErrorDialog";
 import { ExportCB, ImageExportDialog } from "./ImageExportDialog";
@@ -30,32 +24,32 @@ import { Section } from "./Section";
 import { HelpDialog } from "./HelpDialog";
 import Stack from "./Stack";
 import { UserList } from "./UserList";
+import Library from "../data/library";
 import { JSONExportDialog } from "./JSONExportDialog";
+import { LibraryButton } from "./LibraryButton";
 import { isImageFileHandle } from "../data/blob";
+import { LibraryMenu } from "./LibraryMenu";
+
+import "./LayerUI.scss";
+import "./Toolbar.scss";
 import { PenModeButton } from "./PenModeButton";
 import { trackEvent } from "../analytics";
 import { useDevice } from "../components/App";
 import { Stats } from "./Stats";
 import { actionToggleStats } from "../actions/actionToggleStats";
 import Footer from "./footer/Footer";
-import { isSidebarDockedAtom } from "./Sidebar/Sidebar";
+import { hostSidebarCountersAtom } from "./Sidebar/Sidebar";
 import { jotaiScope } from "../jotai";
-import { Provider, useAtomValue } from "jotai";
+import { Provider, useAtom } from "jotai";
 import MainMenu from "./main-menu/MainMenu";
 import { ActiveConfirmDialog } from "./ActiveConfirmDialog";
 import { HandButton } from "./HandButton";
 import { isHandToolActive } from "../appState";
-import { TunnelsContext, useInitializeTunnels } from "../context/tunnels";
+import { TunnelsContext, useInitializeTunnels } from "./context/tunnels";
-import { LibraryIcon } from "./icons";
-import { UIAppStateContext } from "../context/ui-appState";
-import { DefaultSidebar } from "./DefaultSidebar";
-
-import "./LayerUI.scss";
-import "./Toolbar.scss";
 
 interface LayerUIProps {
   actionManager: ActionManager;
-  appState: UIAppState;
+  appState: AppState;
   files: BinaryFiles;
   canvas: HTMLCanvasElement | null;
   setAppState: React.Component<any, AppState>["setState"];
@@ -63,11 +57,17 @@ interface LayerUIProps {
   onLockToggle: () => void;
   onHandToolToggle: () => void;
   onPenModeToggle: () => void;
+  onInsertElements: (elements: readonly NonDeletedExcalidrawElement[]) => void;
   showExitZenModeBtn: boolean;
   langCode: Language["code"];
   renderTopRightUI?: ExcalidrawProps["renderTopRightUI"];
   renderCustomStats?: ExcalidrawProps["renderCustomStats"];
+  renderCustomSidebar?: ExcalidrawProps["renderSidebar"];
+  libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
   UIOptions: AppProps["UIOptions"];
+  focusContainer: () => void;
+  library: Library;
+  id: string;
   onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
   renderWelcomeScreen: boolean;
   children?: React.ReactNode;
@@ -109,10 +109,16 @@ const LayerUI = ({
   onLockToggle,
   onHandToolToggle,
   onPenModeToggle,
+  onInsertElements,
   showExitZenModeBtn,
   renderTopRightUI,
   renderCustomStats,
+  renderCustomSidebar,
+  libraryReturnUrl,
   UIOptions,
+  focusContainer,
+  library,
+  id,
   onImageAction,
   renderWelcomeScreen,
   children,
@@ -150,8 +156,7 @@ const LayerUI = ({
         const fileHandle = await exportCanvas(
           type,
           exportedElements,
-          // FIXME once we split UI canvas from element canvas
+          appState,
-          appState as AppState,
           files,
           {
             exportBackground: appState.exportBackground,
@@ -192,8 +197,8 @@ const LayerUI = ({
     <div style={{ position: "relative" }}>
       {/* wrapping to Fragment stops React from occasionally complaining
                 about identical Keys */}
-      <tunnels.MainMenuTunnel.Out />
+      <tunnels.mainMenuTunnel.Out />
-      {renderWelcomeScreen && <tunnels.WelcomeScreenMenuHintTunnel.Out />}
+      {renderWelcomeScreen && <tunnels.welcomeScreenMenuHintTunnel.Out />}
     </div>
   );
 
@@ -245,7 +250,7 @@ const LayerUI = ({
               {(heading: React.ReactNode) => (
                 <div style={{ position: "relative" }}>
                   {renderWelcomeScreen && (
-                    <tunnels.WelcomeScreenToolbarHintTunnel.Out />
+                    <tunnels.welcomeScreenToolbarHintTunnel.Out />
                   )}
                   <Stack.Col gap={4} align="start">
                     <Stack.Row
@@ -319,12 +324,9 @@ const LayerUI = ({
           >
             <UserList collaborators={appState.collaborators} />
             {renderTopRightUI?.(device.isMobile, appState)}
-            {!appState.viewModeEnabled &&
+            {!appState.viewModeEnabled && (
-              // hide button when sidebar docked
+              <LibraryButton appState={appState} setAppState={setAppState} />
-              (!isSidebarDocked ||
+            )}
-                appState.openSidebar?.name !== DEFAULT_SIDEBAR.name) && (
-                <tunnels.DefaultSidebarTriggerTunnel.Out />
-              )}
           </div>
         </div>
       </FixedSideContainer>
@@ -332,21 +334,21 @@ const LayerUI = ({
   };
 
   const renderSidebars = () => {
-    return (
+    return appState.openSidebar === "customSidebar" ? (
-      <DefaultSidebar
+      renderCustomSidebar?.() || null
-        __fallback
+    ) : appState.openSidebar === "library" ? (
-        onDock={(docked) => {
+      <LibraryMenu
-          trackEvent(
+        appState={appState}
-            "sidebar",
+        onInsertElements={onInsertElements}
-            `toggleDock (${docked ? "dock" : "undock"})`,
+        libraryReturnUrl={libraryReturnUrl}
-            `(${device.isMobile ? "mobile" : "desktop"})`,
+        focusContainer={focusContainer}
-          );
+        library={library}
-        }}
+        id={id}
       />
-    );
+    ) : null;
   };
 
-  const isSidebarDocked = useAtomValue(isSidebarDockedAtom, jotaiScope);
+  const [hostSidebarCounters] = useAtom(hostSidebarCountersAtom, jotaiScope);
 
   const layerUIJSX = (
     <>
@@ -356,25 +358,8 @@ const LayerUI = ({
       {children}
       {/* render component fallbacks. Can be rendered anywhere as they'll be
           tunneled away. We only render tunneled components that actually
-        have defaults when host do not render anything. */}
+          have defaults when host do not render anything. */}
       <DefaultMainMenu UIOptions={UIOptions} />
-      <DefaultSidebar.Trigger
-        __fallback
-        icon={LibraryIcon}
-        title={capitalizeString(t("toolBar.library"))}
-        onToggle={(open) => {
-          if (open) {
-            trackEvent(
-              "sidebar",
-              `${DEFAULT_SIDEBAR.name} (open)`,
-              `button (${device.isMobile ? "mobile" : "desktop"})`,
-            );
-          }
-        }}
-        tab={DEFAULT_SIDEBAR.defaultTab}
-      >
-        {t("toolBar.library")}
-      </DefaultSidebar.Trigger>
       {/* ------------------------------------------------------------------ */}
 
       {appState.isLoading && <LoadingMessage delay={250} />}
@@ -397,6 +382,7 @@ const LayerUI = ({
         <PasteChartDialog
           setAppState={setAppState}
           appState={appState}
+          onInsertChart={onInsertElements}
           onClose={() =>
             setAppState({
               pasteDialog: { shown: false, data: null },
@@ -424,6 +410,7 @@ const LayerUI = ({
           renderWelcomeScreen={renderWelcomeScreen}
         />
       )}
+
       {!device.isMobile && (
         <>
           <div
@@ -435,14 +422,15 @@ const LayerUI = ({
                   !isTextElement(appState.editingElement)),
             })}
             style={
-              appState.openSidebar &&
+              ((appState.openSidebar === "library" &&
-              isSidebarDocked &&
+                appState.isSidebarDocked) ||
+                hostSidebarCounters.docked) &&
               device.canDeviceFitSidebar
                 ? { width: `calc(100% - ${LIBRARY_SIDEBAR_WIDTH}px)` }
                 : {}
             }
           >
-            {renderWelcomeScreen && <tunnels.WelcomeScreenCenterTunnel.Out />}
+            {renderWelcomeScreen && <tunnels.welcomeScreenCenterTunnel.Out />}
             {renderFixedSideContainer()}
             <Footer
               appState={appState}
@@ -465,9 +453,9 @@ const LayerUI = ({
               <button
                 className="scroll-back-to-content"
                 onClick={() => {
-                  setAppState((appState) => ({
+                  setAppState({
                     ...calculateScrollCenter(elements, appState, canvas),
-                  }));
+                  });
                 }}
               >
                 {t("buttons.scrollBackToContent")}
@@ -481,25 +469,19 @@ const LayerUI = ({
   );
 
   return (
-    <UIAppStateContext.Provider value={appState}>
+    <Provider scope={tunnels.jotaiScope}>
-      <Provider scope={tunnels.jotaiScope}>
+      <TunnelsContext.Provider value={tunnels}>
-        <TunnelsContext.Provider value={tunnels}>
+        {layerUIJSX}
-          {layerUIJSX}
+      </TunnelsContext.Provider>
-        </TunnelsContext.Provider>
+    </Provider>
-      </Provider>
-    </UIAppStateContext.Provider>
   );
 };
 
-const stripIrrelevantAppStateProps = (appState: AppState): UIAppState => {
+const stripIrrelevantAppStateProps = (
-  const {
+  appState: AppState,
-    suggestedBindings,
+): Partial<AppState> => {
-    startBoundElement,
+  const { suggestedBindings, startBoundElement, cursorButton, ...ret } =
-    cursorButton,
+    appState;
-    scrollX,
-    scrollY,
-    ...ret
-  } = appState;
   return ret;
 };
 
@@ -509,19 +491,24 @@ const areEqual = (prevProps: LayerUIProps, nextProps: LayerUIProps) => {
     return false;
   }
 
-  const { canvas: _prevCanvas, appState: prevAppState, ...prev } = prevProps;
+  const {
-  const { canvas: _nextCanvas, appState: nextAppState, ...next } = nextProps;
+    canvas: _prevCanvas,
+    // not stable, but shouldn't matter in our case
+    onInsertElements: _prevOnInsertElements,
+    appState: prevAppState,
+    ...prev
+  } = prevProps;
+  const {
+    canvas: _nextCanvas,
+    onInsertElements: _nextOnInsertElements,
+    appState: nextAppState,
+    ...next
+  } = nextProps;
 
   return (
     isShallowEqual(
-      // asserting AppState because we're being passed the whole AppState
+      stripIrrelevantAppStateProps(prevAppState),
-      // but resolve to only the UI-relevant props
+      stripIrrelevantAppStateProps(nextAppState),
-      stripIrrelevantAppStateProps(prevAppState as AppState),
-      stripIrrelevantAppStateProps(nextAppState as AppState),
-      {
-        selectedElementIds: isShallowEqual,
-        selectedGroupIds: isShallowEqual,
-      },
     ) && isShallowEqual(prev, next)
   );
 };

src/components/LibraryButton.scss

@@ -0,0 +1,32 @@
+@import "../css/variables.module";
+
+.library-button {
+  @include outlineButtonStyles;
+
+  background-color: var(--island-bg-color);
+
+  width: auto;
+  height: var(--lg-button-size);
+
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  line-height: 0;
+
+  font-size: 0.75rem;
+  letter-spacing: 0.4px;
+
+  svg {
+    width: var(--lg-icon-size);
+    height: var(--lg-icon-size);
+  }
+
+  &__label {
+    display: none;
+
+    @media screen and (min-width: 1024px) {
+      display: block;
+    }
+  }
+}

src/components/LibraryButton.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { t } from "../i18n";
+import { AppState } from "../types";
+import { capitalizeString } from "../utils";
+import { trackEvent } from "../analytics";
+import { useDevice } from "./App";
+import "./LibraryButton.scss";
+import { LibraryIcon } from "./icons";
+
+export const LibraryButton: React.FC<{
+  appState: AppState;
+  setAppState: React.Component<any, AppState>["setState"];
+  isMobile?: boolean;
+}> = ({ appState, setAppState, isMobile }) => {
+  const device = useDevice();
+  const showLabel = !isMobile;
+
+  // TODO barnabasmolnar/redesign
+  // not great, toolbar jumps in a jarring manner
+  if (appState.isSidebarDocked && appState.openSidebar === "library") {
+    return null;
+  }
+
+  return (
+    <label title={`${capitalizeString(t("toolBar.library"))}`}>
+      <input
+        className="ToolIcon_type_checkbox"
+        type="checkbox"
+        name="editor-library"
+        onChange={(event) => {
+          document
+            .querySelector(".layer-ui__wrapper")
+            ?.classList.remove("animate");
+          const isOpen = event.target.checked;
+          setAppState({ openSidebar: isOpen ? "library" : null });
+          // track only openings
+          if (isOpen) {
+            trackEvent(
+              "library",
+              "toggleLibrary (open)",
+              `toolbar (${device.isMobile ? "mobile" : "desktop"})`,
+            );
+          }
+        }}
+        checked={appState.openSidebar === "library"}
+        aria-label={capitalizeString(t("toolBar.library"))}
+        aria-keyshortcuts="0"
+      />
+      <div className="library-button">
+        <div>{LibraryIcon}</div>
+        {showLabel && (
+          <div className="library-button__label">{t("toolBar.library")}</div>
+        )}
+      </div>
+    </label>
+  );
+};

src/components/LibraryMenu.scss

@@ -1,9 +1,9 @@
 @import "open-color/open-color";
 
 .excalidraw {
-  .library-menu-items-container {
+  .layer-ui__library-sidebar {
-    height: 100%;
+    display: flex;
-    width: 100%;
+    flex-direction: column;
   }
 
   .layer-ui__library {
@@ -11,6 +11,28 @@
     flex-direction: column;
 
     flex: 1 1 auto;
+
+    .layer-ui__library-header {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      margin: 2px 0 15px 0;
+      .Spinner {
+        margin-right: 1rem;
+      }
+
+      button {
+        // 2px from the left to account for focus border of left-most button
+        margin: 0 2px;
+      }
+    }
+  }
+
+  .layer-ui__sidebar {
+    .library-menu-items-container {
+      height: 100%;
+      width: 100%;
+    }
   }
 
   .library-actions-counter {
@@ -65,17 +87,10 @@
     }
   }
 
-  .library-menu-control-buttons {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.625rem;
-  }
-
   .library-menu-browse-button {
-    flex: 1;
+    margin: 1rem auto;
 
-    height: var(--lg-button-size);
+    padding: 0.875rem 1rem;
 
     display: flex;
     align-items: center;
@@ -107,19 +122,30 @@
     }
   }
 
-  &.excalidraw--mobile .library-menu-browse-button {
+  .library-menu-browse-button--mobile {
-    height: var(--default-button-size);
+    min-height: 22px;
+    margin-left: auto;
+    a {
+      padding-right: 0;
+    }
   }
 
-  .layer-ui__library .dropdown-menu {
+  .layer-ui__sidebar__header .dropdown-menu {
-    width: auto;
+    &.dropdown-menu--mobile {
-    top: initial;
+      top: 100%;
-    right: 0;
+    }
-    left: initial;
-    bottom: 100%;
-    margin-bottom: 0.625rem;
-
     .dropdown-menu-container {
+      --gap: 0;
+      z-index: 1;
+      position: absolute;
+      top: 100%;
+      left: 0;
+
+      :root[dir="rtl"] & {
+        right: 0;
+        left: auto;
+      }
+
       width: 196px;
       box-shadow: var(--library-dropdown-shadow);
       border-radius: var(--border-radius-lg);

src/components/LibraryMenu.tsx

@@ -1,39 +1,77 @@
-import React, { useState, useCallback } from "react";
+import {
+  useRef,
+  useState,
+  useEffect,
+  useCallback,
+  RefObject,
+  forwardRef,
+} from "react";
 import Library, {
   distributeLibraryItemsOnSquareGrid,
   libraryItemsAtom,
 } from "../data/library";
 import { t } from "../i18n";
 import { randomId } from "../random";
-import {
+import { LibraryItems, LibraryItem, AppState, ExcalidrawProps } from "../types";
-  LibraryItems,
+
-  LibraryItem,
+import "./LibraryMenu.scss";
-  ExcalidrawProps,
-  UIAppState,
-} from "../types";
 import LibraryMenuItems from "./LibraryMenuItems";
+import { EVENT } from "../constants";
+import { KEYS } from "../keys";
 import { trackEvent } from "../analytics";
-import { atom, useAtom } from "jotai";
+import { useAtom } from "jotai";
 import { jotaiScope } from "../jotai";
 import Spinner from "./Spinner";
 import {
-  useApp,
+  useDevice,
-  useAppProps,
   useExcalidrawElements,
   useExcalidrawSetAppState,
 } from "./App";
+import { Sidebar } from "./Sidebar/Sidebar";
 import { getSelectedElements } from "../scene";
-import { useUIAppState } from "../context/ui-appState";
+import { NonDeletedExcalidrawElement } from "../element/types";
+import { LibraryMenuHeader } from "./LibraryMenuHeaderContent";
+import LibraryMenuBrowseButton from "./LibraryMenuBrowseButton";
 
-import "./LibraryMenu.scss";
+const useOnClickOutside = (
-import { LibraryMenuControlButtons } from "./LibraryMenuControlButtons";
+  ref: RefObject<HTMLElement>,
+  cb: (event: MouseEvent) => void,
+) => {
+  useEffect(() => {
+    const listener = (event: MouseEvent) => {
+      if (!ref.current) {
+        return;
+      }
 
-export const isLibraryMenuOpenAtom = atom(false);
+      if (
+        event.target instanceof Element &&
+        (ref.current.contains(event.target) ||
+          !document.body.contains(event.target))
+      ) {
+        return;
+      }
 
-const LibraryMenuWrapper = ({ children }: { children: React.ReactNode }) => {
+      cb(event);
-  return <div className="layer-ui__library">{children}</div>;
+    };
+    document.addEventListener("pointerdown", listener, false);
+
+    return () => {
+      document.removeEventListener("pointerdown", listener);
+    };
+  }, [ref, cb]);
 };
 
+const LibraryMenuWrapper = forwardRef<
+  HTMLDivElement,
+  { children: React.ReactNode }
+>(({ children }, ref) => {
+  return (
+    <div ref={ref} className="layer-ui__library">
+      {children}
+    </div>
+  );
+});
+
 export const LibraryMenuContent = ({
   onInsertLibraryItems,
   pendingElements,
@@ -49,11 +87,11 @@ export const LibraryMenuContent = ({
   pendingElements: LibraryItem["elements"];
   onInsertLibraryItems: (libraryItems: LibraryItems) => void;
   onAddToLibrary: () => void;
-  setAppState: React.Component<any, UIAppState>["setState"];
+  setAppState: React.Component<any, AppState>["setState"];
   libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
   library: Library;
   id: string;
-  appState: UIAppState;
+  appState: AppState;
   selectedItems: LibraryItem["id"][];
   onSelectItems: (id: LibraryItem["id"][]) => void;
 }) => {
@@ -120,31 +158,81 @@ export const LibraryMenuContent = ({
         theme={appState.theme}
       />
       {showBtn && (
-        <LibraryMenuControlButtons
+        <LibraryMenuBrowseButton
-          style={{ padding: "16px 12px 0 12px" }}
           id={id}
           libraryReturnUrl={libraryReturnUrl}
           theme={appState.theme}
-          selectedItems={selectedItems}
-          onSelectItems={onSelectItems}
         />
       )}
     </LibraryMenuWrapper>
   );
 };
 
-/**
+export const LibraryMenu: React.FC<{
- * This component is meant to be rendered inside <Sidebar.Tab/> inside our
+  appState: AppState;
- * <DefaultSidebar/> or host apps Sidebar components.
+  onInsertElements: (elements: readonly NonDeletedExcalidrawElement[]) => void;
- */
+  libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
-export const LibraryMenu = () => {
+  focusContainer: () => void;
-  const { library, id, onInsertElements } = useApp();
+  library: Library;
-  const appProps = useAppProps();
+  id: string;
-  const appState = useUIAppState();
+}> = ({
+  appState,
+  onInsertElements,
+  libraryReturnUrl,
+  focusContainer,
+  library,
+  id,
+}) => {
   const setAppState = useExcalidrawSetAppState();
   const elements = useExcalidrawElements();
+  const device = useDevice();
 
   const [selectedItems, setSelectedItems] = useState<LibraryItem["id"][]>([]);
+  const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
+
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  const closeLibrary = useCallback(() => {
+    const isDialogOpen = !!document.querySelector(".Dialog");
+
+    // Prevent closing if any dialog is open
+    if (isDialogOpen) {
+      return;
+    }
+    setAppState({ openSidebar: null });
+  }, [setAppState]);
+
+  useOnClickOutside(
+    ref,
+    useCallback(
+      (event) => {
+        // If click on the library icon, do nothing so that LibraryButton
+        // can toggle library menu
+        if ((event.target as Element).closest(".ToolIcon__library")) {
+          return;
+        }
+        if (!appState.isSidebarDocked || !device.canDeviceFitSidebar) {
+          closeLibrary();
+        }
+      },
+      [closeLibrary, appState.isSidebarDocked, device.canDeviceFitSidebar],
+    ),
+  );
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === KEYS.ESCAPE &&
+        (!appState.isSidebarDocked || !device.canDeviceFitSidebar)
+      ) {
+        closeLibrary();
+      }
+    };
+    document.addEventListener(EVENT.KEYDOWN, handleKeyDown);
+    return () => {
+      document.removeEventListener(EVENT.KEYDOWN, handleKeyDown);
+    };
+  }, [closeLibrary, appState.isSidebarDocked, device.canDeviceFitSidebar]);
 
   const deselectItems = useCallback(() => {
     setAppState({
@@ -153,20 +241,69 @@ export const LibraryMenu = () => {
     });
   }, [setAppState]);
 
+  const removeFromLibrary = useCallback(
+    async (libraryItems: LibraryItems) => {
+      const nextItems = libraryItems.filter(
+        (item) => !selectedItems.includes(item.id),
+      );
+      library.setLibrary(nextItems).catch(() => {
+        setAppState({ errorMessage: t("alerts.errorRemovingFromLibrary") });
+      });
+      setSelectedItems([]);
+    },
+    [library, setAppState, selectedItems, setSelectedItems],
+  );
+
+  const resetLibrary = useCallback(() => {
+    library.resetLibrary();
+    focusContainer();
+  }, [library, focusContainer]);
+
   return (
-    <LibraryMenuContent
+    <Sidebar
-      pendingElements={getSelectedElements(elements, appState, true)}
+      __isInternal
-      onInsertLibraryItems={(libraryItems) => {
+      // necessary to remount when switching between internal
-        onInsertElements(distributeLibraryItemsOnSquareGrid(libraryItems));
+      // and custom (host app) sidebar, so that the `props.onClose`
+      // is colled correctly
+      key="library"
+      className="layer-ui__library-sidebar"
+      initialDockedState={appState.isSidebarDocked}
+      onDock={(docked) => {
+        trackEvent(
+          "library",
+          `toggleLibraryDock (${docked ? "dock" : "undock"})`,
+          `sidebar (${device.isMobile ? "mobile" : "desktop"})`,
+        );
       }}
-      onAddToLibrary={deselectItems}
+      ref={ref}
-      setAppState={setAppState}
+    >
-      libraryReturnUrl={appProps.libraryReturnUrl}
+      <Sidebar.Header className="layer-ui__library-header">
-      library={library}
+        <LibraryMenuHeader
-      id={id}
+          appState={appState}
-      appState={appState}
+          setAppState={setAppState}
-      selectedItems={selectedItems}
+          selectedItems={selectedItems}
-      onSelectItems={setSelectedItems}
+          onSelectItems={setSelectedItems}
-    />
+          library={library}
+          onRemoveFromLibrary={() =>
+            removeFromLibrary(libraryItemsData.libraryItems)
+          }
+          resetLibrary={resetLibrary}
+        />
+      </Sidebar.Header>
+      <LibraryMenuContent
+        pendingElements={getSelectedElements(elements, appState, true)}
+        onInsertLibraryItems={(libraryItems) => {
+          onInsertElements(distributeLibraryItemsOnSquareGrid(libraryItems));
+        }}
+        onAddToLibrary={deselectItems}
+        setAppState={setAppState}
+        libraryReturnUrl={libraryReturnUrl}
+        library={library}
+        id={id}
+        appState={appState}
+        selectedItems={selectedItems}
+        onSelectItems={setSelectedItems}
+      />
+    </Sidebar>
   );
 };

src/components/LibraryMenuBrowseButton.tsx

@@ -1,6 +1,6 @@
 import { VERSIONS } from "../constants";
 import { t } from "../i18n";
-import { ExcalidrawProps, UIAppState } from "../types";
+import { AppState, ExcalidrawProps } from "../types";
 
 const LibraryMenuBrowseButton = ({
   theme,
@@ -8,7 +8,7 @@ const LibraryMenuBrowseButton = ({
   libraryReturnUrl,
 }: {
   libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
-  theme: UIAppState["theme"];
+  theme: AppState["theme"];
   id: string;
 }) => {
   const referrer =

src/components/LibraryMenuControlButtons.tsx

@@ -1,33 +0,0 @@
-import { LibraryItem, ExcalidrawProps, UIAppState } from "../types";
-import LibraryMenuBrowseButton from "./LibraryMenuBrowseButton";
-import { LibraryDropdownMenu } from "./LibraryMenuHeaderContent";
-
-export const LibraryMenuControlButtons = ({
-  selectedItems,
-  onSelectItems,
-  libraryReturnUrl,
-  theme,
-  id,
-  style,
-}: {
-  selectedItems: LibraryItem["id"][];
-  onSelectItems: (id: LibraryItem["id"][]) => void;
-  libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
-  theme: UIAppState["theme"];
-  id: string;
-  style: React.CSSProperties;
-}) => {
-  return (
-    <div className="library-menu-control-buttons" style={style}>
-      <LibraryMenuBrowseButton
-        id={id}
-        libraryReturnUrl={libraryReturnUrl}
-        theme={theme}
-      />
-      <LibraryDropdownMenu
-        selectedItems={selectedItems}
-        onSelectItems={onSelectItems}
-      />
-    </div>
-  );
-};

src/components/LibraryMenuHeaderContent.tsx

@@ -1,11 +1,8 @@
-import { useCallback, useState } from "react";
+import React, { useCallback, useState } from "react";
-import { t } from "../i18n";
-import Trans from "./Trans";
-import { jotaiScope } from "../jotai";
-import { LibraryItem, LibraryItems, UIAppState } from "../types";
-import { useApp, useExcalidrawSetAppState } from "./App";
 import { saveLibraryAsJSON } from "../data/json";
 import Library, { libraryItemsAtom } from "../data/library";
+import { t } from "../i18n";
+import { AppState, LibraryItem, LibraryItems } from "../types";
 import {
   DotsIcon,
   ExportIcon,
@@ -16,27 +13,29 @@ import {
 import { ToolButton } from "./ToolButton";
 import { fileOpen } from "../data/filesystem";
 import { muteFSAbortError } from "../utils";
-import { useAtom } from "jotai";
+import { atom, useAtom } from "jotai";
+import { jotaiScope } from "../jotai";
 import ConfirmDialog from "./ConfirmDialog";
 import PublishLibrary from "./PublishLibrary";
 import { Dialog } from "./Dialog";
+
 import DropdownMenu from "./dropdownMenu/DropdownMenu";
-import { isLibraryMenuOpenAtom } from "./LibraryMenu";
+
-import { useUIAppState } from "../context/ui-appState";
+export const isLibraryMenuOpenAtom = atom(false);
 
 const getSelectedItems = (
   libraryItems: LibraryItems,
   selectedItems: LibraryItem["id"][],
 ) => libraryItems.filter((item) => selectedItems.includes(item.id));
 
-export const LibraryDropdownMenuButton: React.FC<{
+export const LibraryMenuHeader: React.FC<{
-  setAppState: React.Component<any, UIAppState>["setState"];
+  setAppState: React.Component<any, AppState>["setState"];
   selectedItems: LibraryItem["id"][];
   library: Library;
   onRemoveFromLibrary: () => void;
   resetLibrary: () => void;
   onSelectItems: (items: LibraryItem["id"][]) => void;
-  appState: UIAppState;
+  appState: AppState;
 }> = ({
   setAppState,
   selectedItems,
@@ -51,7 +50,6 @@ export const LibraryDropdownMenuButton: React.FC<{
     isLibraryMenuOpenAtom,
     jotaiScope,
   );
-
   const renderRemoveLibAlert = useCallback(() => {
     const content = selectedItems.length
       ? t("alerts.removeItemsFromsLibrary", { count: selectedItems.length })
@@ -106,19 +104,16 @@ export const LibraryDropdownMenuButton: React.FC<{
         small={true}
       >
         <p>
-          <Trans
+          {t("publishSuccessDialog.content", {
-            i18nKey="publishSuccessDialog.content"
+            authorName: publishLibSuccess!.authorName,
-            authorName={publishLibSuccess!.authorName}
+          })}{" "}
-            link={(el) => (
+          <a
-              <a
+            href={publishLibSuccess?.url}
-                href={publishLibSuccess?.url}
+            target="_blank"
-                target="_blank"
+            rel="noopener noreferrer"
-                rel="noopener noreferrer"
+          >
-              >
+            {t("publishSuccessDialog.link")}
-                {el}
+          </a>
-              </a>
-            )}
-          />
         </p>
         <ToolButton
           type="button"
@@ -186,6 +181,7 @@ export const LibraryDropdownMenuButton: React.FC<{
     return (
       <DropdownMenu open={isLibraryMenuOpen}>
         <DropdownMenu.Trigger
+          className="Sidebar__dropdown-btn"
           onToggle={() => setIsLibraryMenuOpen(!isLibraryMenuOpen)}
         >
           {DotsIcon}
@@ -234,7 +230,6 @@ export const LibraryDropdownMenuButton: React.FC<{
       </DropdownMenu>
     );
   };
-
   return (
     <div style={{ position: "relative" }}>
       {renderLibraryMenu()}
@@ -266,48 +261,3 @@ export const LibraryDropdownMenuButton: React.FC<{
     </div>
   );
 };
-
-export const LibraryDropdownMenu = ({
-  selectedItems,
-  onSelectItems,
-}: {
-  selectedItems: LibraryItem["id"][];
-  onSelectItems: (id: LibraryItem["id"][]) => void;
-}) => {
-  const { library } = useApp();
-  const appState = useUIAppState();
-  const setAppState = useExcalidrawSetAppState();
-
-  const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
-
-  const removeFromLibrary = useCallback(
-    async (libraryItems: LibraryItems) => {
-      const nextItems = libraryItems.filter(
-        (item) => !selectedItems.includes(item.id),
-      );
-      library.setLibrary(nextItems).catch(() => {
-        setAppState({ errorMessage: t("alerts.errorRemovingFromLibrary") });
-      });
-      onSelectItems([]);
-    },
-    [library, setAppState, selectedItems, onSelectItems],
-  );
-
-  const resetLibrary = useCallback(() => {
-    library.resetLibrary();
-  }, [library]);
-
-  return (
-    <LibraryDropdownMenuButton
-      appState={appState}
-      setAppState={setAppState}
-      selectedItems={selectedItems}
-      onSelectItems={onSelectItems}
-      library={library}
-      onRemoveFromLibrary={() =>
-        removeFromLibrary(libraryItemsData.libraryItems)
-      }
-      resetLibrary={resetLibrary}
-    />
-  );
-};

src/components/LibraryMenuItems.scss

@@ -47,7 +47,7 @@
 
     &__items {
       row-gap: 0.5rem;
-      padding: var(--container-padding-y) 0;
+      padding: var(--container-padding-y) var(--container-padding-x);
       flex: 1;
       overflow-y: auto;
       overflow-x: hidden;
@@ -61,7 +61,7 @@
       margin-bottom: 0.75rem;
 
       &--excal {
-        margin-top: 2rem;
+        margin-top: 2.5rem;
       }
     }
 

src/components/LibraryMenuItems.tsx

@@ -2,21 +2,16 @@ import React, { useState } from "react";
 import { serializeLibraryAsJSON } from "../data/json";
 import { ExcalidrawElement, NonDeleted } from "../element/types";
 import { t } from "../i18n";
-import {
+import { AppState, ExcalidrawProps, LibraryItem, LibraryItems } from "../types";
-  ExcalidrawProps,
-  LibraryItem,
-  LibraryItems,
-  UIAppState,
-} from "../types";
 import { arrayToMap, chunk } from "../utils";
 import { LibraryUnit } from "./LibraryUnit";
 import Stack from "./Stack";
-import { MIME_TYPES } from "../constants";
-import Spinner from "./Spinner";
-import { duplicateElements } from "../element/newElement";
-import { LibraryMenuControlButtons } from "./LibraryMenuControlButtons";
 
 import "./LibraryMenuItems.scss";
+import { MIME_TYPES } from "../constants";
+import Spinner from "./Spinner";
+import LibraryMenuBrowseButton from "./LibraryMenuBrowseButton";
+import clsx from "clsx";
 
 const CELLS_PER_ROW = 4;
 
@@ -40,7 +35,7 @@ const LibraryMenuItems = ({
   selectedItems: LibraryItem["id"][];
   onSelectItems: (id: LibraryItem["id"][]) => void;
   libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
-  theme: UIAppState["theme"];
+  theme: AppState["theme"];
   id: string;
 }) => {
   const [lastSelectedItem, setLastSelectedItem] = useState<
@@ -101,14 +96,7 @@ const LibraryMenuItems = ({
     } else {
       targetElements = libraryItems.filter((item) => item.id === id);
     }
-    return targetElements.map((item) => {
+    return targetElements;
-      return {
-        ...item,
-        // duplicate each library item before inserting on canvas to confine
-        // ids and bindings to each library item. See #6465
-        elements: duplicateElements(item.elements, { randomizeSeed: true }),
-      };
-    });
   };
 
   const createLibraryItemCompo = (params: {
@@ -205,7 +193,11 @@ const LibraryMenuItems = ({
     (item) => item.status === "published",
   );
 
-  const showBtn = !libraryItems.length && !pendingElements.length;
+  const showBtn =
+    !libraryItems.length &&
+    !unpublishedItems.length &&
+    !publishedItems.length &&
+    !pendingElements.length;
 
   return (
     <div
@@ -215,7 +207,7 @@ const LibraryMenuItems = ({
         unpublishedItems.length ||
         publishedItems.length
           ? { justifyContent: "flex-start" }
-          : { borderBottom: 0 }
+          : {}
       }
     >
       <Stack.Col
@@ -251,7 +243,11 @@ const LibraryMenuItems = ({
           </div>
           {!pendingElements.length && !unpublishedItems.length ? (
             <div className="library-menu-items__no-items">
-              <div className="library-menu-items__no-items__label">
+              <div
+                className={clsx({
+                  "library-menu-items__no-items__label": showBtn,
+                })}
+              >
                 {t("library.noItems")}
               </div>
               <div className="library-menu-items__no-items__hint">
@@ -299,13 +295,10 @@ const LibraryMenuItems = ({
         </>
 
         {showBtn && (
-          <LibraryMenuControlButtons
+          <LibraryMenuBrowseButton
-            style={{ padding: "16px 0", width: "100%" }}
             id={id}
             libraryReturnUrl={libraryReturnUrl}
             theme={theme}
-            selectedItems={selectedItems}
-            onSelectItems={onSelectItems}
           />
         )}
       </Stack.Col>

src/components/LibraryUnit.tsx

@@ -2,7 +2,7 @@ import clsx from "clsx";
 import oc from "open-color";
 import { useEffect, useRef, useState } from "react";
 import { useDevice } from "../components/App";
-import { exportToSvg } from "../packages/utils";
+import { exportToSvg } from "../scene/export";
 import { LibraryItem } from "../types";
 import "./LibraryUnit.scss";
 import { CheckboxItem } from "./CheckboxItem";
@@ -36,14 +36,14 @@ export const LibraryUnit = ({
       if (!elements) {
         return;
       }
-      const svg = await exportToSvg({
+      const svg = await exportToSvg(
         elements,
-        appState: {
+        {
           exportBackground: false,
           viewBackgroundColor: oc.white,
         },
-        files: null,
+        null,
-      });
+      );
       svg.querySelector(".style-fonts")?.remove();
       node.innerHTML = svg.outerHTML;
     })();

src/components/MobileMenu.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { AppState, Device, ExcalidrawProps, UIAppState } from "../types";
+import { AppState, Device, ExcalidrawProps } from "../types";
 import { ActionManager } from "../actions/manager";
 import { t } from "../i18n";
 import Stack from "./Stack";
@@ -13,15 +13,16 @@ import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
 import { Section } from "./Section";
 import { SCROLLBAR_WIDTH, SCROLLBAR_MARGIN } from "../scene/scrollbars";
 import { LockButton } from "./LockButton";
+import { LibraryButton } from "./LibraryButton";
 import { PenModeButton } from "./PenModeButton";
 import { Stats } from "./Stats";
 import { actionToggleStats } from "../actions";
 import { HandButton } from "./HandButton";
 import { isHandToolActive } from "../appState";
-import { useTunnels } from "../context/tunnels";
+import { useTunnels } from "./context/tunnels";
 
 type MobileMenuProps = {
-  appState: UIAppState;
+  appState: AppState;
   actionManager: ActionManager;
   renderJSONExportDialog: () => React.ReactNode;
   renderImageExportDialog: () => React.ReactNode;
@@ -35,7 +36,7 @@ type MobileMenuProps = {
   onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
   renderTopRightUI?: (
     isMobile: boolean,
-    appState: UIAppState,
+    appState: AppState,
   ) => JSX.Element | null;
   renderCustomStats?: ExcalidrawProps["renderCustomStats"];
   renderSidebars: () => JSX.Element | null;
@@ -59,15 +60,11 @@ export const MobileMenu = ({
   device,
   renderWelcomeScreen,
 }: MobileMenuProps) => {
-  const {
+  const { welcomeScreenCenterTunnel, mainMenuTunnel } = useTunnels();
-    WelcomeScreenCenterTunnel,
-    MainMenuTunnel,
-    DefaultSidebarTriggerTunnel,
-  } = useTunnels();
   const renderToolbar = () => {
     return (
       <FixedSideContainer side="top" className="App-top-bar">
-        {renderWelcomeScreen && <WelcomeScreenCenterTunnel.Out />}
+        {renderWelcomeScreen && <welcomeScreenCenterTunnel.Out />}
         <Section heading="shapes">
           {(heading: React.ReactNode) => (
             <Stack.Col gap={4} align="center">
@@ -91,7 +88,11 @@ export const MobileMenu = ({
                 {renderTopRightUI && renderTopRightUI(true, appState)}
                 <div className="mobile-misc-tools-container">
                   {!appState.viewModeEnabled && (
-                    <DefaultSidebarTriggerTunnel.Out />
+                    <LibraryButton
+                      appState={appState}
+                      setAppState={setAppState}
+                      isMobile
+                    />
                   )}
                   <PenModeButton
                     checked={appState.penMode}
@@ -131,14 +132,14 @@ export const MobileMenu = ({
     if (appState.viewModeEnabled) {
       return (
         <div className="App-toolbar-content">
-          <MainMenuTunnel.Out />
+          <mainMenuTunnel.Out />
         </div>
       );
     }
 
     return (
       <div className="App-toolbar-content">
-        <MainMenuTunnel.Out />
+        <mainMenuTunnel.Out />
         {actionManager.renderAction("toggleEditMenu")}
         {actionManager.renderAction("undo")}
         {actionManager.renderAction("redo")}
@@ -189,13 +190,13 @@ export const MobileMenu = ({
             {renderAppToolbar()}
             {appState.scrolledOutside &&
               !appState.openMenu &&
-              !appState.openSidebar && (
+              appState.openSidebar !== "library" && (
                 <button
                   className="scroll-back-to-content"
                   onClick={() => {
-                    setAppState((appState) => ({
+                    setAppState({
                       ...calculateScrollCenter(elements, appState, canvas),
-                    }));
+                    });
                   }}
                 >
                   {t("buttons.scrollBackToContent")}

src/components/PasteChartDialog.tsx

@@ -5,10 +5,8 @@ import { ChartElements, renderSpreadsheet, Spreadsheet } from "../charts";
 import { ChartType } from "../element/types";
 import { t } from "../i18n";
 import { exportToSvg } from "../scene/export";
-import { UIAppState } from "../types";
+import { AppState, LibraryItem } from "../types";
-import { useApp } from "./App";
 import { Dialog } from "./Dialog";
-
 import "./PasteChartDialog.scss";
 
 type OnInsertChart = (chartType: ChartType, elements: ChartElements) => void;
@@ -80,12 +78,13 @@ export const PasteChartDialog = ({
   setAppState,
   appState,
   onClose,
+  onInsertChart,
 }: {
-  appState: UIAppState;
+  appState: AppState;
   onClose: () => void;
-  setAppState: React.Component<any, UIAppState>["setState"];
+  setAppState: React.Component<any, AppState>["setState"];
+  onInsertChart: (elements: LibraryItem["elements"]) => void;
 }) => {
-  const { onInsertElements } = useApp();
   const handleClose = React.useCallback(() => {
     if (onClose) {
       onClose();
@@ -93,7 +92,7 @@ export const PasteChartDialog = ({
   }, [onClose]);
 
   const handleChartClick = (chartType: ChartType, elements: ChartElements) => {
-    onInsertElements(elements);
+    onInsertChart(elements);
     trackEvent("magic", "chart", chartType);
     setAppState({
       currentChartType: chartType,

src/components/Popover.scss

@@ -3,6 +3,5 @@
     position: absolute;
     z-index: 10;
     padding: 5px 0 5px;
-    outline: none;
   }
 }

src/components/Popover.tsx

@@ -29,21 +29,13 @@ export const Popover = ({
 }: Props) => {
   const popoverRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
+  const container = popoverRef.current;
-    const container = popoverRef.current;
 
+  useEffect(() => {
     if (!container) {
       return;
     }
 
-    // focus popover only if the caller didn't focus on something else nested
-    // within the popover, which should take precedence. Fixes cases
-    // like color picker listening to keydown events on containers nested
-    // in the popover.
-    if (!container.contains(document.activeElement)) {
-      container.focus();
-    }
-
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === KEYS.TAB) {
         const focusableElements = queryFocusableElements(container);
@@ -52,23 +44,15 @@ export const Popover = ({
           (element) => element === activeElement,
         );
 
-        if (activeElement === container) {
+        if (currentIndex === 0 && event.shiftKey) {
-          if (event.shiftKey) {
+          focusableElements[focusableElements.length - 1].focus();
-            focusableElements[focusableElements.length - 1]?.focus();
-          } else {
-            focusableElements[0].focus();
-          }
-          event.preventDefault();
-          event.stopImmediatePropagation();
-        } else if (currentIndex === 0 && event.shiftKey) {
-          focusableElements[focusableElements.length - 1]?.focus();
           event.preventDefault();
           event.stopImmediatePropagation();
         } else if (
           currentIndex === focusableElements.length - 1 &&
           !event.shiftKey
         ) {
-          focusableElements[0]?.focus();
+          focusableElements[0].focus();
           event.preventDefault();
           event.stopImmediatePropagation();
         }
@@ -78,59 +62,35 @@ export const Popover = ({
     container.addEventListener("keydown", handleKeyDown);
 
     return () => container.removeEventListener("keydown", handleKeyDown);
-  }, []);
+  }, [container]);
-
-  const lastInitializedPosRef = useRef<{ top: number; left: number } | null>(
-    null,
-  );
 
   // ensure the popover doesn't overflow the viewport
   useLayoutEffect(() => {
-    if (fitInViewport && popoverRef.current && top != null && left != null) {
+    if (fitInViewport && popoverRef.current) {
-      const container = popoverRef.current;
+      const element = popoverRef.current;
-      const { width, height } = container.getBoundingClientRect();
+      const { x, y, width, height } = element.getBoundingClientRect();
 
-      // hack for StrictMode so this effect only runs once for
+      //Position correctly when clicked on rightmost part or the bottom part of viewport
-      // the same top/left position, otherwise
+      if (x + width - offsetLeft > viewportWidth) {
-      // we'd potentically reposition twice (once for viewport overflow)
+        element.style.left = `${viewportWidth - width - 10}px`;
-      // and once for top/left position afterwards
-      if (
-        lastInitializedPosRef.current?.top === top &&
-        lastInitializedPosRef.current?.left === left
-      ) {
-        return;
       }
-      lastInitializedPosRef.current = { top, left };
+      if (y + height - offsetTop > viewportHeight) {
-
+        element.style.top = `${viewportHeight - height}px`;
-      if (width >= viewportWidth) {
-        container.style.width = `${viewportWidth}px`;
-        container.style.left = "0px";
-        container.style.overflowX = "scroll";
-      } else if (left + width - offsetLeft > viewportWidth) {
-        container.style.left = `${viewportWidth - width - 10}px`;
-      } else {
-        container.style.left = `${left}px`;
       }
 
+      //Resize to fit viewport on smaller screens
       if (height >= viewportHeight) {
-        container.style.height = `${viewportHeight - 20}px`;
+        element.style.height = `${viewportHeight - 20}px`;
-        container.style.top = "10px";
+        element.style.top = "10px";
-        container.style.overflowY = "scroll";
+        element.style.overflowY = "scroll";
-      } else if (top + height - offsetTop > viewportHeight) {
+      }
-        container.style.top = `${viewportHeight - height}px`;
+      if (width >= viewportWidth) {
-      } else {
+        element.style.width = `${viewportWidth}px`;
-        container.style.top = `${top}px`;
+        element.style.left = "0px";
+        element.style.overflowX = "scroll";
       }
     }
-  }, [
+  }, [fitInViewport, viewportWidth, viewportHeight, offsetLeft, offsetTop]);
-    top,
-    left,
-    fitInViewport,
-    viewportWidth,
-    viewportHeight,
-    offsetLeft,
-    offsetTop,
-  ]);
 
   useEffect(() => {
     if (onCloseRequest) {
@@ -145,7 +105,7 @@ export const Popover = ({
   }, [onCloseRequest]);
 
   return (
-    <div className="popover" ref={popoverRef} tabIndex={-1}>
+    <div className="popover" style={{ top, left }} ref={popoverRef}>
       {children}
     </div>
   );

src/components/PublishLibrary.scss

@@ -93,80 +93,4 @@
       display: block;
     }
   }
-
-  .single-library-item {
-    position: relative;
-
-    &-status {
-      position: absolute;
-      top: 0.3rem;
-      left: 0.3rem;
-      font-size: 0.7rem;
-      color: $oc-red-7;
-      background: rgba(255, 255, 255, 0.9);
-      padding: 0.1rem 0.2rem;
-      border-radius: 0.2rem;
-    }
-
-    &__svg {
-      background-color: $oc-white;
-      padding: 0.3rem;
-      width: 7.5rem;
-      height: 7.5rem;
-      border: 1px solid var(--button-gray-2);
-      svg {
-        width: 100%;
-        height: 100%;
-      }
-    }
-
-    .ToolIcon__icon {
-      background-color: $oc-white;
-      width: auto;
-      height: auto;
-      margin: 0 0.5rem;
-    }
-    .ToolIcon,
-    .ToolIcon_type_button:hover {
-      background-color: white;
-    }
-    .required,
-    .error {
-      color: $oc-red-8;
-      font-weight: bold;
-      font-size: 1rem;
-      margin: 0.2rem;
-    }
-    .error {
-      font-weight: 500;
-      margin: 0;
-      padding: 0.3em 0;
-    }
-
-    &--remove {
-      position: absolute;
-      top: 0.2rem;
-      right: 1rem;
-
-      .ToolIcon__icon {
-        margin: 0;
-      }
-      .ToolIcon__icon {
-        background-color: $oc-red-6;
-        &:hover {
-          background-color: $oc-red-7;
-        }
-        &:active {
-          background-color: $oc-red-8;
-        }
-      }
-      svg {
-        color: $oc-white;
-        padding: 0.26rem;
-        border-radius: 0.3em;
-        width: 1rem;
-        height: 1rem;
-      }
-    }
-  }
 }

src/components/PublishLibrary.tsx

@@ -1,12 +1,11 @@
-import { ReactNode, useCallback, useEffect, useRef, useState } from "react";
+import { ReactNode, useCallback, useEffect, useState } from "react";
 import OpenColor from "open-color";
 
 import { Dialog } from "./Dialog";
 import { t } from "../i18n";
-import Trans from "./Trans";
 
-import { LibraryItems, LibraryItem, UIAppState } from "../types";
+import { AppState, LibraryItems, LibraryItem } from "../types";
-import { exportToCanvas, exportToSvg } from "../packages/utils";
+import { exportToCanvas } from "../packages/utils";
 import {
   EXPORT_DATA_TYPES,
   EXPORT_SOURCE,
@@ -14,13 +13,12 @@ import {
   VERSIONS,
 } from "../constants";
 import { ExportedLibraryData } from "../data/types";
+
+import "./PublishLibrary.scss";
+import SingleLibraryItem from "./SingleLibraryItem";
 import { canvasToBlob, resizeImageFile } from "../data/blob";
 import { chunk } from "../utils";
 import DialogActionButton from "./DialogActionButton";
-import { CloseIcon } from "./icons";
-import { ToolButton } from "./ToolButton";
-
-import "./PublishLibrary.scss";
 
 interface PublishLibraryDataParams {
   authorName: string;
@@ -128,99 +126,6 @@ const generatePreviewImage = async (libraryItems: LibraryItems) => {
   );
 };
 
-const SingleLibraryItem = ({
-  libItem,
-  appState,
-  index,
-  onChange,
-  onRemove,
-}: {
-  libItem: LibraryItem;
-  appState: UIAppState;
-  index: number;
-  onChange: (val: string, index: number) => void;
-  onRemove: (id: string) => void;
-}) => {
-  const svgRef = useRef<HTMLDivElement | null>(null);
-  const inputRef = useRef<HTMLInputElement | null>(null);
-
-  useEffect(() => {
-    const node = svgRef.current;
-    if (!node) {
-      return;
-    }
-    (async () => {
-      const svg = await exportToSvg({
-        elements: libItem.elements,
-        appState: {
-          ...appState,
-          viewBackgroundColor: OpenColor.white,
-          exportBackground: true,
-        },
-        files: null,
-      });
-      node.innerHTML = svg.outerHTML;
-    })();
-  }, [libItem.elements, appState]);
-
-  return (
-    <div className="single-library-item">
-      {libItem.status === "published" && (
-        <span className="single-library-item-status">
-          {t("labels.statusPublished")}
-        </span>
-      )}
-      <div ref={svgRef} className="single-library-item__svg" />
-      <ToolButton
-        aria-label={t("buttons.remove")}
-        type="button"
-        icon={CloseIcon}
-        className="single-library-item--remove"
-        onClick={onRemove.bind(null, libItem.id)}
-        title={t("buttons.remove")}
-      />
-      <div
-        style={{
-          display: "flex",
-          margin: "0.8rem 0",
-          width: "100%",
-          fontSize: "14px",
-          fontWeight: 500,
-          flexDirection: "column",
-        }}
-      >
-        <label
-          style={{
-            display: "flex",
-            justifyContent: "space-between",
-            flexDirection: "column",
-          }}
-        >
-          <div style={{ padding: "0.5em 0" }}>
-            <span style={{ fontWeight: 500, color: OpenColor.gray[6] }}>
-              {t("publishDialog.itemName")}
-            </span>
-            <span aria-hidden="true" className="required">
-              *
-            </span>
-          </div>
-          <input
-            type="text"
-            ref={inputRef}
-            style={{ width: "80%", padding: "0.2rem" }}
-            defaultValue={libItem.name}
-            placeholder="Item name"
-            onChange={(event) => {
-              onChange(event.target.value, index);
-            }}
-          />
-        </label>
-        <span className="error">{libItem.error}</span>
-      </div>
-    </div>
-  );
-};
-
 const PublishLibrary = ({
   onClose,
   libraryItems,
@@ -232,7 +137,7 @@ const PublishLibrary = ({
 }: {
   onClose: () => void;
   libraryItems: LibraryItems;
-  appState: UIAppState;
+  appState: AppState;
   onSuccess: (data: {
     url: string;
     authorName: string;
@@ -403,32 +308,26 @@ const PublishLibrary = ({
       {shouldRenderForm ? (
         <form onSubmit={onSubmit}>
           <div className="publish-library-note">
-            <Trans
+            {t("publishDialog.noteDescription.pre")}
-              i18nKey="publishDialog.noteDescription"
+            <a
-              link={(el) => (
+              href="https://libraries.excalidraw.com"
-                <a
+              target="_blank"
-                  href="https://libraries.excalidraw.com"
+              rel="noopener noreferrer"
-                  target="_blank"
+            >
-                  rel="noopener noreferrer"
+              {t("publishDialog.noteDescription.link")}
-                >
+            </a>{" "}
-                  {el}
+            {t("publishDialog.noteDescription.post")}
-                </a>
-              )}
-            />
           </div>
           <span className="publish-library-note">
-            <Trans
+            {t("publishDialog.noteGuidelines.pre")}
-              i18nKey="publishDialog.noteGuidelines"
+            <a
-              link={(el) => (
+              href="https://github.com/excalidraw/excalidraw-libraries#guidelines"
-                <a
+              target="_blank"
-                  href="https://github.com/excalidraw/excalidraw-libraries#guidelines"
+              rel="noopener noreferrer"
-                  target="_blank"
+            >
-                  rel="noopener noreferrer"
+              {t("publishDialog.noteGuidelines.link")}
-                >
+            </a>
-                  {el}
+            {t("publishDialog.noteGuidelines.post")}
-                </a>
-              )}
-            />
           </span>
 
           <div className="publish-library-note">
@@ -522,18 +421,15 @@ const PublishLibrary = ({
               />
             </label>
             <span className="publish-library-note">
-              <Trans
+              {t("publishDialog.noteLicense.pre")}
-                i18nKey="publishDialog.noteLicense"
+              <a
-                link={(el) => (
+                href="https://github.com/excalidraw/excalidraw-libraries/blob/main/LICENSE"
-                  <a
+                target="_blank"
-                    href="https://github.com/excalidraw/excalidraw-libraries/blob/main/LICENSE"
+                rel="noopener noreferrer"
-                    target="_blank"
+              >
-                    rel="noopener noreferrer"
+                {t("publishDialog.noteLicense.link")}
-                  >
+              </a>
-                    {el}
+              {t("publishDialog.noteLicense.post")}
-                  </a>
-                )}
-              />
             </span>
           </div>
           <div className="publish-library__buttons">

src/components/Sidebar/Sidebar.scss

@@ -2,26 +2,67 @@
 @import "../../css/variables.module";
 
 .excalidraw {
-  .sidebar {
+  .Sidebar {
-    display: flex;
+    &__close-btn,
-    flex-direction: column;
+    &__pin-btn,
+    &__dropdown-btn {
+      @include outlineButtonStyles;
+      width: var(--lg-button-size);
+      height: var(--lg-button-size);
+      padding: 0;
+
+      svg {
+        width: var(--lg-icon-size);
+        height: var(--lg-icon-size);
+      }
+    }
+
+    &__pin-btn {
+      &--pinned {
+        background-color: var(--color-primary);
+        border-color: var(--color-primary);
+
+        svg {
+          color: #fff;
+        }
+
+        &:hover,
+        &:active {
+          background-color: var(--color-primary-darker);
+        }
+      }
+    }
+  }
+
+  &.theme--dark {
+    .Sidebar {
+      &__pin-btn {
+        &--pinned {
+          svg {
+            color: var(--color-gray-90);
+          }
+        }
+      }
+    }
+  }
+
+  .layer-ui__sidebar {
     position: absolute;
     top: 0;
     bottom: 0;
     right: 0;
     z-index: 5;
     margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-
-    background-color: var(--sidebar-bg-color);
-    box-shadow: var(--sidebar-shadow);
 
     :root[dir="rtl"] & {
       left: 0;
       right: auto;
     }
 
+    background-color: var(--sidebar-bg-color);
+
+    box-shadow: var(--sidebar-shadow);
+
     &--docked {
       box-shadow: none;
     }
@@ -36,134 +77,52 @@
       border-right: 1px solid var(--sidebar-border-color);
       border-left: 0;
     }
+
+    padding: 0;
+    box-sizing: border-box;
+
+    .Island {
+      box-shadow: none;
+    }
+
+    .ToolIcon__icon {
+      border-radius: var(--border-radius-md);
+    }
+
+    .ToolIcon__icon__close {
+      .Modal__close {
+        width: calc(var(--space-factor) * 7);
+        height: calc(var(--space-factor) * 7);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: var(--color-text);
+      }
+    }
+
+    .Island {
+      --padding: 0;
+      background-color: var(--island-bg-color);
+      border-radius: var(--border-radius-lg);
+      padding: calc(var(--padding) * var(--space-factor));
+      position: relative;
+      transition: box-shadow 0.5s ease-in-out;
+    }
   }
 
-  // ---------------------------- sidebar header ------------------------------
+  .layer-ui__sidebar__header {
-
-  .sidebar__header {
     box-sizing: border-box;
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
-    padding-top: 1rem;
+    padding: 1rem;
-    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--sidebar-border-color);
   }
 
-  .sidebar__header__buttons {
+  .layer-ui__sidebar__header__buttons {
-    gap: 0;
     display: flex;
     align-items: center;
-    margin-left: auto;
+    gap: 0.625rem;
-
-    button {
-      @include outlineButtonStyles;
-      --button-bg: transparent;
-      border: 0 !important;
-
-      width: var(--lg-button-size);
-      height: var(--lg-button-size);
-      padding: 0;
-
-      svg {
-        width: var(--lg-icon-size);
-        height: var(--lg-icon-size);
-      }
-
-      &:hover {
-        background: var(--button-hover-bg, var(--island-bg-color));
-      }
-    }
-
-    .sidebar__dock.selected {
-      svg {
-        stroke: var(--color-primary);
-        fill: var(--color-primary);
-      }
-    }
-  }
-
-  // ---------------------------- sidebar tabs ------------------------------
-
-  .sidebar-tabs-root {
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 auto;
-    padding: 1rem 0.75rem;
-
-    [role="tabpanel"] {
-      flex: 1;
-      outline: none;
-
-      flex: 1 1 auto;
-      display: flex;
-      flex-direction: column;
-      outline: none;
-    }
-
-    [role="tabpanel"][data-state="inactive"] {
-      display: none !important;
-    }
-
-    [role="tablist"] {
-      display: grid;
-      gap: 1rem;
-      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-    }
-  }
-
-  .sidebar-tabs-root > .sidebar__header {
-    padding-top: 0;
-    padding-bottom: 1rem;
-  }
-
-  .sidebar-tab-trigger {
-    --button-width: auto;
-    --button-bg: transparent;
-    --button-hover-bg: transparent;
-    --button-active-bg: var(--color-primary);
-    --button-hover-color: var(--color-primary);
-    --button-hover-border: var(--color-primary);
-
-    &[data-state="active"] {
-      --button-bg: var(--color-primary);
-      --button-hover-bg: var(--color-primary-darker);
-      --button-hover-color: var(--color-icon-white);
-      --button-border: var(--color-primary);
-      color: var(--color-icon-white);
-    }
-  }
-
-  // ---------------------------- default sidebar ------------------------------
-
-  .default-sidebar {
-    display: flex;
-    flex-direction: column;
-
-    .sidebar-triggers {
-      $padding: 2px;
-      $border: 1px;
-      display: flex;
-      gap: 0;
-      padding: $padding;
-      // offset by padding + border to vertically center the list with sibling
-      // buttons (both from top and bototm, due to flex layout)
-      margin-top: -#{$padding + $border};
-      margin-bottom: -#{$padding + $border};
-      border: $border solid var(--sidebar-border-color);
-      background: var(--default-bg-color);
-      border-radius: 0.625rem;
-
-      .sidebar-tab-trigger {
-        height: var(--lg-button-size);
-        width: var(--lg-button-size);
-
-        border: none;
-      }
-    }
-
-    .sidebar__header {
-      border-bottom: 1px solid var(--sidebar-border-color);
-    }
   }
 }

src/components/Sidebar/Sidebar.test.tsx

@@ -1,9 +1,8 @@
 import React from "react";
-import { DEFAULT_SIDEBAR } from "../../constants";
 import { Excalidraw, Sidebar } from "../../packages/excalidraw/index";
 import {
+  act,
   fireEvent,
-  GlobalTestState,
   queryAllByTestId,
   queryByTestId,
   render,
@@ -11,321 +10,346 @@ import {
   withExcalidrawDimensions,
 } from "../../tests/test-utils";
 
-export const assertSidebarDockButton = async <T extends boolean>(
-  hasDockButton: T,
-): Promise<
-  T extends false
-    ? { dockButton: null; sidebar: HTMLElement }
-    : { dockButton: HTMLElement; sidebar: HTMLElement }
-> => {
-  const sidebar =
-    GlobalTestState.renderResult.container.querySelector<HTMLElement>(
-      ".sidebar",
-    );
-  expect(sidebar).not.toBe(null);
-  const dockButton = queryByTestId(sidebar!, "sidebar-dock");
-  if (hasDockButton) {
-    expect(dockButton).not.toBe(null);
-    return { dockButton: dockButton!, sidebar: sidebar! } as any;
-  }
-  expect(dockButton).toBe(null);
-  return { dockButton: null, sidebar: sidebar! } as any;
-};
-
-export const assertExcalidrawWithSidebar = async (
-  sidebar: React.ReactNode,
-  name: string,
-  test: () => void,
-) => {
-  await render(
-    <Excalidraw initialData={{ appState: { openSidebar: { name } } }}>
-      {sidebar}
-    </Excalidraw>,
-  );
-  await withExcalidrawDimensions({ width: 1920, height: 1080 }, test);
-};
-
 describe("Sidebar", () => {
-  describe("General behavior", () => {
+  it("should render custom sidebar", async () => {
-    it("should render custom sidebar", async () => {
+    const { container } = await render(
-      const { container } = await render(
+      <Excalidraw
-        <Excalidraw
+        initialData={{ appState: { openSidebar: "customSidebar" } }}
-          initialData={{ appState: { openSidebar: { name: "customSidebar" } } }}
+        renderSidebar={() => (
-        >
+          <Sidebar>
-          <Sidebar name="customSidebar">
             <div id="test-sidebar-content">42</div>
           </Sidebar>
-        </Excalidraw>,
+        )}
-      );
+      />,
+    );
 
-      const node = container.querySelector("#test-sidebar-content");
+    const node = container.querySelector("#test-sidebar-content");
-      expect(node).not.toBe(null);
+    expect(node).not.toBe(null);
-    });
-
-    it("should render only one sidebar and prefer the custom one", async () => {
-      const { container } = await render(
-        <Excalidraw
-          initialData={{ appState: { openSidebar: { name: "customSidebar" } } }}
-        >
-          <Sidebar name="customSidebar">
-            <div id="test-sidebar-content">42</div>
-          </Sidebar>
-        </Excalidraw>,
-      );
-
-      await waitFor(() => {
-        // make sure the custom sidebar is rendered
-        const node = container.querySelector("#test-sidebar-content");
-        expect(node).not.toBe(null);
-
-        // make sure only one sidebar is rendered
-        const sidebars = container.querySelectorAll(".sidebar");
-        expect(sidebars.length).toBe(1);
-      });
-    });
-
-    it("should toggle sidebar using props.toggleMenu()", async () => {
-      const { container } = await render(
-        <Excalidraw>
-          <Sidebar name="customSidebar">
-            <div id="test-sidebar-content">42</div>
-          </Sidebar>
-        </Excalidraw>,
-      );
-
-      // sidebar isn't rendered initially
-      // -------------------------------------------------------------------------
-      await waitFor(() => {
-        const node = container.querySelector("#test-sidebar-content");
-        expect(node).toBe(null);
-      });
-
-      // toggle sidebar on
-      // -------------------------------------------------------------------------
-      expect(window.h.app.toggleSidebar({ name: "customSidebar" })).toBe(true);
-
-      await waitFor(() => {
-        const node = container.querySelector("#test-sidebar-content");
-        expect(node).not.toBe(null);
-      });
-
-      // toggle sidebar off
-      // -------------------------------------------------------------------------
-      expect(window.h.app.toggleSidebar({ name: "customSidebar" })).toBe(false);
-
-      await waitFor(() => {
-        const node = container.querySelector("#test-sidebar-content");
-        expect(node).toBe(null);
-      });
-
-      // force-toggle sidebar off (=> still hidden)
-      // -------------------------------------------------------------------------
-      expect(
-        window.h.app.toggleSidebar({ name: "customSidebar", force: false }),
-      ).toBe(false);
-
-      await waitFor(() => {
-        const node = container.querySelector("#test-sidebar-content");
-        expect(node).toBe(null);
-      });
-
-      // force-toggle sidebar on
-      // -------------------------------------------------------------------------
-      expect(
-        window.h.app.toggleSidebar({ name: "customSidebar", force: true }),
-      ).toBe(true);
-      expect(
-        window.h.app.toggleSidebar({ name: "customSidebar", force: true }),
-      ).toBe(true);
-
-      await waitFor(() => {
-        const node = container.querySelector("#test-sidebar-content");
-        expect(node).not.toBe(null);
-      });
-
-      // toggle library (= hide custom sidebar)
-      // -------------------------------------------------------------------------
-      expect(window.h.app.toggleSidebar({ name: DEFAULT_SIDEBAR.name })).toBe(
-        true,
-      );
-
-      await waitFor(() => {
-        const node = container.querySelector("#test-sidebar-content");
-        expect(node).toBe(null);
-
-        // make sure only one sidebar is rendered
-        const sidebars = container.querySelectorAll(".sidebar");
-        expect(sidebars.length).toBe(1);
-      });
-    });
   });
 
-  describe("<Sidebar.Header/>", () => {
+  it("should render custom sidebar header", async () => {
-    it("should render custom sidebar header", async () => {
+    const { container } = await render(
-      const { container } = await render(
+      <Excalidraw
-        <Excalidraw
+        initialData={{ appState: { openSidebar: "customSidebar" } }}
-          initialData={{ appState: { openSidebar: { name: "customSidebar" } } }}
+        renderSidebar={() => (
-        >
+          <Sidebar>
-          <Sidebar name="customSidebar">
             <Sidebar.Header>
               <div id="test-sidebar-header-content">42</div>
             </Sidebar.Header>
           </Sidebar>
-        </Excalidraw>,
+        )}
-      );
+      />,
+    );
 
-      const node = container.querySelector("#test-sidebar-header-content");
+    const node = container.querySelector("#test-sidebar-header-content");
+    expect(node).not.toBe(null);
+    // make sure we don't render the default fallback header,
+    // just the custom one
+    expect(queryAllByTestId(container, "sidebar-header").length).toBe(1);
+  });
+
+  it("should render only one sidebar and prefer the custom one", async () => {
+    const { container } = await render(
+      <Excalidraw
+        initialData={{ appState: { openSidebar: "customSidebar" } }}
+        renderSidebar={() => (
+          <Sidebar>
+            <div id="test-sidebar-content">42</div>
+          </Sidebar>
+        )}
+      />,
+    );
+
+    await waitFor(() => {
+      // make sure the custom sidebar is rendered
+      const node = container.querySelector("#test-sidebar-content");
       expect(node).not.toBe(null);
-      // make sure we don't render the default fallback header,
-      // just the custom one
-      expect(queryAllByTestId(container, "sidebar-header").length).toBe(1);
-    });
 
-    it("should not render <Sidebar.Header> for custom sidebars by default", async () => {
+      // make sure only one sidebar is rendered
-      const CustomExcalidraw = () => {
+      const sidebars = container.querySelectorAll(".layer-ui__sidebar");
-        return (
+      expect(sidebars.length).toBe(1);
-          <Excalidraw
+    });
-            initialData={{
+  });
-              appState: { openSidebar: { name: "customSidebar" } },
+
-            }}
+  it("should always render custom sidebar with close button & close on click", async () => {
-          >
+    const onClose = jest.fn();
-            <Sidebar name="customSidebar" className="test-sidebar">
+    const CustomExcalidraw = () => {
+      return (
+        <Excalidraw
+          initialData={{ appState: { openSidebar: "customSidebar" } }}
+          renderSidebar={() => (
+            <Sidebar className="test-sidebar" onClose={onClose}>
               hello
             </Sidebar>
-          </Excalidraw>
+          )}
-        );
+        />
-      };
+      );
+    };
 
-      const { container } = await render(<CustomExcalidraw />);
+    const { container } = await render(<CustomExcalidraw />);
 
+    const sidebar = container.querySelector<HTMLElement>(".test-sidebar");
+    expect(sidebar).not.toBe(null);
+    const closeButton = queryByTestId(sidebar!, "sidebar-close")!;
+    expect(closeButton).not.toBe(null);
+
+    fireEvent.click(closeButton);
+    await waitFor(() => {
+      expect(container.querySelector<HTMLElement>(".test-sidebar")).toBe(null);
+      expect(onClose).toHaveBeenCalled();
+    });
+  });
+
+  it("should render custom sidebar with dock (irrespective of onDock prop)", async () => {
+    const CustomExcalidraw = () => {
+      return (
+        <Excalidraw
+          initialData={{ appState: { openSidebar: "customSidebar" } }}
+          renderSidebar={() => (
+            <Sidebar className="test-sidebar">hello</Sidebar>
+          )}
+        />
+      );
+    };
+
+    const { container } = await render(<CustomExcalidraw />);
+
+    // should show dock button when the sidebar fits to be docked
+    // -------------------------------------------------------------------------
+
+    await withExcalidrawDimensions({ width: 1920, height: 1080 }, () => {
       const sidebar = container.querySelector<HTMLElement>(".test-sidebar");
       expect(sidebar).not.toBe(null);
-      const closeButton = queryByTestId(sidebar!, "sidebar-close");
+      const closeButton = queryByTestId(sidebar!, "sidebar-dock");
-      expect(closeButton).toBe(null);
+      expect(closeButton).not.toBe(null);
     });
 
-    it("<Sidebar.Header> should render close button", async () => {
+    // should not show dock button when the sidebar does not fit to be docked
-      const onStateChange = jest.fn();
+    // -------------------------------------------------------------------------
-      const CustomExcalidraw = () => {
-        return (
-          <Excalidraw
-            initialData={{
-              appState: { openSidebar: { name: "customSidebar" } },
-            }}
-          >
-            <Sidebar
-              name="customSidebar"
-              className="test-sidebar"
-              onStateChange={onStateChange}
-            >
-              <Sidebar.Header />
-            </Sidebar>
-          </Excalidraw>
-        );
-      };
-
-      const { container } = await render(<CustomExcalidraw />);
-
-      // initial open
-      expect(onStateChange).toHaveBeenCalledWith({ name: "customSidebar" });
 
+    await withExcalidrawDimensions({ width: 400, height: 1080 }, () => {
       const sidebar = container.querySelector<HTMLElement>(".test-sidebar");
       expect(sidebar).not.toBe(null);
-      const closeButton = queryByTestId(sidebar!, "sidebar-close")!;
+      const closeButton = queryByTestId(sidebar!, "sidebar-dock");
-      expect(closeButton).not.toBe(null);
+      expect(closeButton).toBe(null);
+    });
+  });
+
+  it("should support controlled docking", async () => {
+    let _setDockable: (dockable: boolean) => void = null!;
+
+    const CustomExcalidraw = () => {
+      const [dockable, setDockable] = React.useState(false);
+      _setDockable = setDockable;
+      return (
+        <Excalidraw
+          initialData={{ appState: { openSidebar: "customSidebar" } }}
+          renderSidebar={() => (
+            <Sidebar
+              className="test-sidebar"
+              docked={false}
+              dockable={dockable}
+            >
+              hello
+            </Sidebar>
+          )}
+        />
+      );
+    };
+
+    const { container } = await render(<CustomExcalidraw />);
+
+    await withExcalidrawDimensions({ width: 1920, height: 1080 }, async () => {
+      // should not show dock button when `dockable` is `false`
+      // -------------------------------------------------------------------------
+
+      act(() => {
+        _setDockable(false);
+      });
 
-      fireEvent.click(closeButton);
       await waitFor(() => {
-        expect(container.querySelector<HTMLElement>(".test-sidebar")).toBe(
+        const sidebar = container.querySelector<HTMLElement>(".test-sidebar");
-          null,
+        expect(sidebar).not.toBe(null);
-        );
+        const closeButton = queryByTestId(sidebar!, "sidebar-dock");
-        expect(onStateChange).toHaveBeenCalledWith(null);
+        expect(closeButton).toBe(null);
+      });
+
+      // should show dock button when `dockable` is `true`, even if `docked`
+      // prop is set
+      // -------------------------------------------------------------------------
+
+      act(() => {
+        _setDockable(true);
+      });
+
+      await waitFor(() => {
+        const sidebar = container.querySelector<HTMLElement>(".test-sidebar");
+        expect(sidebar).not.toBe(null);
+        const closeButton = queryByTestId(sidebar!, "sidebar-dock");
+        expect(closeButton).not.toBe(null);
       });
     });
   });
 
-  describe("Docking behavior", () => {
+  it("should support controlled docking", async () => {
-    it("shouldn't be user-dockable if `onDock` not supplied", async () => {
+    let _setDocked: (docked?: boolean) => void = null!;
-      await assertExcalidrawWithSidebar(
-        <Sidebar name="customSidebar">
-          <Sidebar.Header />
-        </Sidebar>,
-        "customSidebar",
-        async () => {
-          await assertSidebarDockButton(false);
-        },
-      );
-    });
 
-    it("shouldn't be user-dockable if `onDock` not supplied & `docked={true}`", async () => {
+    const CustomExcalidraw = () => {
-      await assertExcalidrawWithSidebar(
+      const [docked, setDocked] = React.useState<boolean | undefined>();
-        <Sidebar name="customSidebar" docked={true}>
+      _setDocked = setDocked;
-          <Sidebar.Header />
+      return (
-        </Sidebar>,
-        "customSidebar",
-        async () => {
-          await assertSidebarDockButton(false);
-        },
-      );
-    });
-
-    it("shouldn't be user-dockable if `onDock` not supplied & docked={false}`", async () => {
-      await assertExcalidrawWithSidebar(
-        <Sidebar name="customSidebar" docked={false}>
-          <Sidebar.Header />
-        </Sidebar>,
-        "customSidebar",
-        async () => {
-          await assertSidebarDockButton(false);
-        },
-      );
-    });
-
-    it("should be user-dockable when both `onDock` and `docked` supplied", async () => {
-      await render(
         <Excalidraw
-          initialData={{ appState: { openSidebar: { name: "customSidebar" } } }}
+          initialData={{ appState: { openSidebar: "customSidebar" } }}
-        >
+          renderSidebar={() => (
-          <Sidebar
+            <Sidebar className="test-sidebar" docked={docked}>
-            name="customSidebar"
+              hello
-            className="test-sidebar"
+            </Sidebar>
-            onDock={() => {}}
+          )}
-            docked
+        />
-          >
-            <Sidebar.Header />
-          </Sidebar>
-        </Excalidraw>,
       );
+    };
 
-      await withExcalidrawDimensions(
+    const { container } = await render(<CustomExcalidraw />);
-        { width: 1920, height: 1080 },
+
-        async () => {
+    const { h } = window;
-          await assertSidebarDockButton(true);
+
-        },
+    await withExcalidrawDimensions({ width: 1920, height: 1080 }, async () => {
-      );
+      const dockButton = await waitFor(() => {
+        const sidebar = container.querySelector<HTMLElement>(".test-sidebar");
+        expect(sidebar).not.toBe(null);
+        const dockBotton = queryByTestId(sidebar!, "sidebar-dock");
+        expect(dockBotton).not.toBe(null);
+        return dockBotton!;
+      });
+
+      const dockButtonInput = dockButton.querySelector("input")!;
+
+      // should not show dock button when `dockable` is `false`
+      // -------------------------------------------------------------------------
+
+      expect(h.state.isSidebarDocked).toBe(false);
+
+      fireEvent.click(dockButtonInput);
+      await waitFor(() => {
+        expect(h.state.isSidebarDocked).toBe(true);
+        expect(dockButtonInput).toBeChecked();
+      });
+
+      fireEvent.click(dockButtonInput);
+      await waitFor(() => {
+        expect(h.state.isSidebarDocked).toBe(false);
+        expect(dockButtonInput).not.toBeChecked();
+      });
+
+      // shouldn't update `appState.isSidebarDocked` when the sidebar
+      // is controlled (`docked` prop is set), as host apps should handle
+      // the state themselves
+      // -------------------------------------------------------------------------
+
+      act(() => {
+        _setDocked(true);
+      });
+
+      await waitFor(() => {
+        expect(dockButtonInput).toBeChecked();
+        expect(h.state.isSidebarDocked).toBe(false);
+        expect(dockButtonInput).toBeChecked();
+      });
+
+      fireEvent.click(dockButtonInput);
+      await waitFor(() => {
+        expect(h.state.isSidebarDocked).toBe(false);
+        expect(dockButtonInput).toBeChecked();
+      });
+
+      // the `appState.isSidebarDocked` should remain untouched when
+      // `props.docked` is set to `false`, and user toggles
+      // -------------------------------------------------------------------------
+
+      act(() => {
+        _setDocked(false);
+        h.setState({ isSidebarDocked: true });
+      });
+
+      await waitFor(() => {
+        expect(h.state.isSidebarDocked).toBe(true);
+        expect(dockButtonInput).not.toBeChecked();
+      });
+
+      fireEvent.click(dockButtonInput);
+      await waitFor(() => {
+        expect(dockButtonInput).not.toBeChecked();
+        expect(h.state.isSidebarDocked).toBe(true);
+      });
+    });
+  });
+
+  it("should toggle sidebar using props.toggleMenu()", async () => {
+    const { container } = await render(
+      <Excalidraw
+        renderSidebar={() => (
+          <Sidebar>
+            <div id="test-sidebar-content">42</div>
+          </Sidebar>
+        )}
+      />,
+    );
+
+    // sidebar isn't rendered initially
+    // -------------------------------------------------------------------------
+    await waitFor(() => {
+      const node = container.querySelector("#test-sidebar-content");
+      expect(node).toBe(null);
     });
 
-    it("shouldn't be user-dockable when only `onDock` supplied w/o `docked`", async () => {
+    // toggle sidebar on
-      await render(
+    // -------------------------------------------------------------------------
-        <Excalidraw
+    expect(window.h.app.toggleMenu("customSidebar")).toBe(true);
-          initialData={{ appState: { openSidebar: { name: "customSidebar" } } }}
-        >
-          <Sidebar
-            name="customSidebar"
-            className="test-sidebar"
-            onDock={() => {}}
-          >
-            <Sidebar.Header />
-          </Sidebar>
-        </Excalidraw>,
-      );
 
-      await withExcalidrawDimensions(
+    await waitFor(() => {
-        { width: 1920, height: 1080 },
+      const node = container.querySelector("#test-sidebar-content");
-        async () => {
+      expect(node).not.toBe(null);
-          await assertSidebarDockButton(false);
+    });
-        },
+
-      );
+    // toggle sidebar off
+    // -------------------------------------------------------------------------
+    expect(window.h.app.toggleMenu("customSidebar")).toBe(false);
+
+    await waitFor(() => {
+      const node = container.querySelector("#test-sidebar-content");
+      expect(node).toBe(null);
+    });
+
+    // force-toggle sidebar off (=> still hidden)
+    // -------------------------------------------------------------------------
+    expect(window.h.app.toggleMenu("customSidebar", false)).toBe(false);
+
+    await waitFor(() => {
+      const node = container.querySelector("#test-sidebar-content");
+      expect(node).toBe(null);
+    });
+
+    // force-toggle sidebar on
+    // -------------------------------------------------------------------------
+    expect(window.h.app.toggleMenu("customSidebar", true)).toBe(true);
+    expect(window.h.app.toggleMenu("customSidebar", true)).toBe(true);
+
+    await waitFor(() => {
+      const node = container.querySelector("#test-sidebar-content");
+      expect(node).not.toBe(null);
+    });
+
+    // toggle library (= hide custom sidebar)
+    // -------------------------------------------------------------------------
+    expect(window.h.app.toggleMenu("library")).toBe(true);
+
+    await waitFor(() => {
+      const node = container.querySelector("#test-sidebar-content");
+      expect(node).toBe(null);
+
+      // make sure only one sidebar is rendered
+      const sidebars = container.querySelectorAll(".layer-ui__sidebar");
+      expect(sidebars.length).toBe(1);
     });
   });
 });

src/components/Sidebar/Sidebar.tsx

@@ -1,246 +1,151 @@
-import React, {
+import {
   useEffect,
   useLayoutEffect,
   useRef,
   useState,
   forwardRef,
-  useImperativeHandle,
-  useCallback,
-  RefObject,
 } from "react";
 import { Island } from ".././Island";
-import { atom, useSetAtom } from "jotai";
+import { atom, useAtom } from "jotai";
 import { jotaiScope } from "../../jotai";
 import {
   SidebarPropsContext,
   SidebarProps,
   SidebarPropsContextValue,
 } from "./common";
-import { SidebarHeader } from "./SidebarHeader";
+
-import clsx from "clsx";
+import { SidebarHeaderComponents } from "./SidebarHeader";
-import { useDevice, useExcalidrawSetAppState } from "../App";
-import { updateObject } from "../../utils";
-import { KEYS } from "../../keys";
-import { EVENT } from "../../constants";
-import { SidebarTrigger } from "./SidebarTrigger";
-import { SidebarTabTriggers } from "./SidebarTabTriggers";
-import { SidebarTabTrigger } from "./SidebarTabTrigger";
-import { SidebarTabs } from "./SidebarTabs";
-import { SidebarTab } from "./SidebarTab";
 
 import "./Sidebar.scss";
-import { useUIAppState } from "../../context/ui-appState";
+import clsx from "clsx";
+import { useExcalidrawSetAppState } from "../App";
+import { updateObject } from "../../utils";
 
-// FIXME replace this with the implem from ColorPicker once it's merged
+/** using a counter instead of boolean to handle race conditions where
-const useOnClickOutside = (
+ * the host app may render (mount/unmount) multiple different sidebar */
-  ref: RefObject<HTMLElement>,
+export const hostSidebarCountersAtom = atom({ rendered: 0, docked: 0 });
-  cb: (event: MouseEvent) => void,
-) => {
-  useEffect(() => {
-    const listener = (event: MouseEvent) => {
-      if (!ref.current) {
-        return;
-      }
-
-      if (
-        event.target instanceof Element &&
-        (ref.current.contains(event.target) ||
-          !document.body.contains(event.target))
-      ) {
-        return;
-      }
-
-      cb(event);
-    };
-    document.addEventListener("pointerdown", listener, false);
-
-    return () => {
-      document.removeEventListener("pointerdown", listener);
-    };
-  }, [ref, cb]);
-};
-
-/**
- * Flags whether the currently rendered Sidebar is docked or not, for use
- * in upstream components that need to act on this (e.g. LayerUI to shift the
- * UI). We use an atom because of potential host app sidebars (for the default
- * sidebar we could just read from appState.defaultSidebarDockedPreference).
- *
- * Since we can only render one Sidebar at a time, we can use a simple flag.
- */
-export const isSidebarDockedAtom = atom(false);
-
-export const SidebarInner = forwardRef(
-  (
-    {
-      name,
-      children,
-      onDock,
-      docked,
-      className,
-      ...rest
-    }: SidebarProps & Omit<React.RefAttributes<HTMLDivElement>, "onSelect">,
-    ref: React.ForwardedRef<HTMLDivElement>,
-  ) => {
-    if (process.env.NODE_ENV === "development" && onDock && docked == null) {
-      console.warn(
-        "Sidebar: `docked` must be set when `onDock` is supplied for the sidebar to be user-dockable. To hide this message, either pass `docked` or remove `onDock`",
-      );
-    }
-
-    const setAppState = useExcalidrawSetAppState();
-
-    const setIsSidebarDockedAtom = useSetAtom(isSidebarDockedAtom, jotaiScope);
-
-    useLayoutEffect(() => {
-      setIsSidebarDockedAtom(!!docked);
-      return () => {
-        setIsSidebarDockedAtom(false);
-      };
-    }, [setIsSidebarDockedAtom, docked]);
-
-    const headerPropsRef = useRef<SidebarPropsContextValue>(
-      {} as SidebarPropsContextValue,
-    );
-    headerPropsRef.current.onCloseRequest = () => {
-      setAppState({ openSidebar: null });
-    };
-    headerPropsRef.current.onDock = (isDocked) => onDock?.(isDocked);
-    // renew the ref object if the following props change since we want to
-    // rerender. We can't pass down as component props manually because
-    // the <Sidebar.Header/> can be rendered upstream.
-    headerPropsRef.current = updateObject(headerPropsRef.current, {
-      docked,
-      // explicit prop to rerender on update
-      shouldRenderDockButton: !!onDock && docked != null,
-    });
-
-    const islandRef = useRef<HTMLDivElement>(null);
-
-    useImperativeHandle(ref, () => {
-      return islandRef.current!;
-    });
-
-    const device = useDevice();
-
-    const closeLibrary = useCallback(() => {
-      const isDialogOpen = !!document.querySelector(".Dialog");
-
-      // Prevent closing if any dialog is open
-      if (isDialogOpen) {
-        return;
-      }
-      setAppState({ openSidebar: null });
-    }, [setAppState]);
-
-    useOnClickOutside(
-      islandRef,
-      useCallback(
-        (event) => {
-          // If click on the library icon, do nothing so that LibraryButton
-          // can toggle library menu
-          if ((event.target as Element).closest(".sidebar-trigger")) {
-            return;
-          }
-          if (!docked || !device.canDeviceFitSidebar) {
-            closeLibrary();
-          }
-        },
-        [closeLibrary, docked, device.canDeviceFitSidebar],
-      ),
-    );
-
-    useEffect(() => {
-      const handleKeyDown = (event: KeyboardEvent) => {
-        if (
-          event.key === KEYS.ESCAPE &&
-          (!docked || !device.canDeviceFitSidebar)
-        ) {
-          closeLibrary();
-        }
-      };
-      document.addEventListener(EVENT.KEYDOWN, handleKeyDown);
-      return () => {
-        document.removeEventListener(EVENT.KEYDOWN, handleKeyDown);
-      };
-    }, [closeLibrary, docked, device.canDeviceFitSidebar]);
-
-    return (
-      <Island
-        {...rest}
-        className={clsx("sidebar", { "sidebar--docked": docked }, className)}
-        ref={islandRef}
-      >
-        <SidebarPropsContext.Provider value={headerPropsRef.current}>
-          {children}
-        </SidebarPropsContext.Provider>
-      </Island>
-    );
-  },
-);
-SidebarInner.displayName = "SidebarInner";
 
 export const Sidebar = Object.assign(
-  forwardRef((props: SidebarProps, ref: React.ForwardedRef<HTMLDivElement>) => {
+  forwardRef(
-    const appState = useUIAppState();
+    (
+      {
+        children,
+        onClose,
+        onDock,
+        docked,
+        /** Undocumented, may be removed later. Generally should either be
+         * `props.docked` or `appState.isSidebarDocked`. Currently serves to
+         *  prevent unwanted animation of the shadow if initially docked. */
+        //
+        // NOTE we'll want to remove this after we sort out how to subscribe to
+        // individual appState properties
+        initialDockedState = docked,
+        dockable = true,
+        className,
+        __isInternal,
+      }: SidebarProps<{
+        // NOTE sidebars we use internally inside the editor must have this flag set.
+        // It indicates that this sidebar should have lower precedence over host
+        // sidebars, if both are open.
+        /** @private internal */
+        __isInternal?: boolean;
+      }>,
+      ref: React.ForwardedRef<HTMLDivElement>,
+    ) => {
+      const [hostSidebarCounters, setHostSidebarCounters] = useAtom(
+        hostSidebarCountersAtom,
+        jotaiScope,
+      );
 
-    const { onStateChange } = props;
+      const setAppState = useExcalidrawSetAppState();
 
-    const refPrevOpenSidebar = useRef(appState.openSidebar);
+      const [isDockedFallback, setIsDockedFallback] = useState(
-    useEffect(() => {
+        docked ?? initialDockedState ?? false,
-      if (
+      );
-        // closing sidebar
+
-        ((!appState.openSidebar &&
+      useLayoutEffect(() => {
-          refPrevOpenSidebar?.current?.name === props.name) ||
+        if (docked === undefined) {
-          // opening current sidebar
+          // ugly hack to get initial state out of AppState without subscribing
-          (appState.openSidebar?.name === props.name &&
+          // to it as a whole (once we have granular subscriptions, we'll move
-            refPrevOpenSidebar?.current?.name !== props.name) ||
+          // to that)
-          // switching tabs or switching to a different sidebar
+          //
-          refPrevOpenSidebar.current?.name === props.name) &&
+          // NOTE this means that is updated `state.isSidebarDocked` changes outside
-        appState.openSidebar !== refPrevOpenSidebar.current
+          // of this compoent, it won't be reflected here. Currently doesn't happen.
-      ) {
+          setAppState((state) => {
-        onStateChange?.(
+            setIsDockedFallback(state.isSidebarDocked);
-          appState.openSidebar?.name !== props.name
+            // bail from update
-            ? null
+            return null;
-            : appState.openSidebar,
+          });
-        );
+        }
+      }, [setAppState, docked]);
+
+      useLayoutEffect(() => {
+        if (!__isInternal) {
+          setHostSidebarCounters((s) => ({
+            rendered: s.rendered + 1,
+            docked: isDockedFallback ? s.docked + 1 : s.docked,
+          }));
+          return () => {
+            setHostSidebarCounters((s) => ({
+              rendered: s.rendered - 1,
+              docked: isDockedFallback ? s.docked - 1 : s.docked,
+            }));
+          };
+        }
+      }, [__isInternal, setHostSidebarCounters, isDockedFallback]);
+
+      const onCloseRef = useRef(onClose);
+      onCloseRef.current = onClose;
+
+      useEffect(() => {
+        return () => {
+          onCloseRef.current?.();
+        };
+      }, []);
+
+      const headerPropsRef = useRef<SidebarPropsContextValue>({});
+      headerPropsRef.current.onClose = () => {
+        setAppState({ openSidebar: null });
+      };
+      headerPropsRef.current.onDock = (isDocked) => {
+        if (docked === undefined) {
+          setAppState({ isSidebarDocked: isDocked });
+          setIsDockedFallback(isDocked);
+        }
+        onDock?.(isDocked);
+      };
+      // renew the ref object if the following props change since we want to
+      // rerender. We can't pass down as component props manually because
+      // the <Sidebar.Header/> can be rendered upsream.
+      headerPropsRef.current = updateObject(headerPropsRef.current, {
+        docked: docked ?? isDockedFallback,
+        dockable,
+      });
+
+      if (hostSidebarCounters.rendered > 0 && __isInternal) {
+        return null;
       }
-      refPrevOpenSidebar.current = appState.openSidebar;
-    }, [appState.openSidebar, onStateChange, props.name]);
 
-    const [mounted, setMounted] = useState(false);
+      return (
-    useLayoutEffect(() => {
+        <Island
-      setMounted(true);
+          className={clsx(
-      return () => setMounted(false);
+            "layer-ui__sidebar",
-    }, []);
+            { "layer-ui__sidebar--docked": isDockedFallback },
-
+            className,
-    // We want to render in the next tick (hence `mounted` flag) so that it's
+          )}
-    // guaranteed to happen after unmount of the previous sidebar (in case the
+          ref={ref}
-    // previous sidebar is mounted after the next one). This is necessary to
+        >
-    // prevent flicker of subcomponents that support fallbacks
+          <SidebarPropsContext.Provider value={headerPropsRef.current}>
-    // (e.g. SidebarHeader). This is because we're using flags to determine
+            <SidebarHeaderComponents.Context>
-    // whether prefer the fallback component or not (otherwise both will render
+              <SidebarHeaderComponents.Component __isFallback />
-    // initially), and the flag won't be reset in time if the unmount order
+              {children}
-    // it not correct.
+            </SidebarHeaderComponents.Context>
-    //
+          </SidebarPropsContext.Provider>
-    // Alternative, and more general solution would be to namespace the fallback
+        </Island>
-    // HoC so that state is not shared between subcomponents when the wrapping
+      );
-    // component is of the same type (e.g. Sidebar -> SidebarHeader).
+    },
-    const shouldRender = mounted && appState.openSidebar?.name === props.name;
+  ),
-
-    if (!shouldRender) {
-      return null;
-    }
-
-    return <SidebarInner {...props} ref={ref} key={props.name} />;
-  }),
   {
-    Header: SidebarHeader,
+    Header: SidebarHeaderComponents.Component,
-    TabTriggers: SidebarTabTriggers,
-    TabTrigger: SidebarTabTrigger,
-    Tabs: SidebarTabs,
-    Tab: SidebarTab,
-    Trigger: SidebarTrigger,
   },
 );
-Sidebar.displayName = "Sidebar";

src/components/Sidebar/SidebarHeader.tsx

@@ -4,54 +4,86 @@ import { t } from "../../i18n";
 import { useDevice } from "../App";
 import { SidebarPropsContext } from "./common";
 import { CloseIcon, PinIcon } from "../icons";
+import { withUpstreamOverride } from "../hoc/withUpstreamOverride";
 import { Tooltip } from "../Tooltip";
-import { Button } from "../Button";
 
-export const SidebarHeader = ({
+export const SidebarDockButton = (props: {
-  children,
+  checked: boolean;
-  className,
+  onChange?(): void;
-}: {
-  children?: React.ReactNode;
-  className?: string;
 }) => {
-  const device = useDevice();
-  const props = useContext(SidebarPropsContext);
-
-  const renderDockButton = !!(
-    device.canDeviceFitSidebar && props.shouldRenderDockButton
-  );
-
   return (
-    <div
+    <div className="layer-ui__sidebar-dock-button" data-testid="sidebar-dock">
-      className={clsx("sidebar__header", className)}
+      <Tooltip label={t("labels.sidebarLock")}>
-      data-testid="sidebar-header"
+        <label
-    >
+          className={clsx(
-      {children}
+            "ToolIcon ToolIcon__lock ToolIcon_type_floating",
-      <div className="sidebar__header__buttons">
+            `ToolIcon_size_medium`,
-        {renderDockButton && (
+          )}
-          <Tooltip label={t("labels.sidebarLock")}>
-            <Button
-              onSelect={() => props.onDock?.(!props.docked)}
-              selected={!!props.docked}
-              className="sidebar__dock"
-              data-testid="sidebar-dock"
-              aria-label={t("labels.sidebarLock")}
-            >
-              {PinIcon}
-            </Button>
-          </Tooltip>
-        )}
-        <Button
-          data-testid="sidebar-close"
-          className="sidebar__close"
-          onSelect={props.onCloseRequest}
-          aria-label={t("buttons.close")}
         >
-          {CloseIcon}
+          <input
-        </Button>
+            className="ToolIcon_type_checkbox"
-      </div>
+            type="checkbox"
+            onChange={props.onChange}
+            checked={props.checked}
+            aria-label={t("labels.sidebarLock")}
+          />{" "}
+          <div
+            className={clsx("Sidebar__pin-btn", {
+              "Sidebar__pin-btn--pinned": props.checked,
+            })}
+            tabIndex={0}
+          >
+            {PinIcon}
+          </div>{" "}
+        </label>{" "}
+      </Tooltip>
     </div>
   );
 };
 
-SidebarHeader.displayName = "SidebarHeader";
+const _SidebarHeader: React.FC<{
+  children?: React.ReactNode;
+  className?: string;
+}> = ({ children, className }) => {
+  const device = useDevice();
+  const props = useContext(SidebarPropsContext);
+
+  const renderDockButton = !!(device.canDeviceFitSidebar && props.dockable);
+  const renderCloseButton = !!props.onClose;
+
+  return (
+    <div
+      className={clsx("layer-ui__sidebar__header", className)}
+      data-testid="sidebar-header"
+    >
+      {children}
+      {(renderDockButton || renderCloseButton) && (
+        <div className="layer-ui__sidebar__header__buttons">
+          {renderDockButton && (
+            <SidebarDockButton
+              checked={!!props.docked}
+              onChange={() => {
+                props.onDock?.(!props.docked);
+              }}
+            />
+          )}
+          {renderCloseButton && (
+            <button
+              data-testid="sidebar-close"
+              className="Sidebar__close-btn"
+              onClick={props.onClose}
+              aria-label={t("buttons.close")}
+            >
+              {CloseIcon}
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const [Context, Component] = withUpstreamOverride(_SidebarHeader);
+
+/** @private */
+export const SidebarHeaderComponents = { Context, Component };

src/components/Sidebar/SidebarTab.tsx

@@ -1,18 +0,0 @@
-import * as RadixTabs from "@radix-ui/react-tabs";
-import { SidebarTabName } from "../../types";
-
-export const SidebarTab = ({
-  tab,
-  children,
-  ...rest
-}: {
-  tab: SidebarTabName;
-  children: React.ReactNode;
-} & React.HTMLAttributes<HTMLDivElement>) => {
-  return (
-    <RadixTabs.Content {...rest} value={tab}>
-      {children}
-    </RadixTabs.Content>
-  );
-};
-SidebarTab.displayName = "SidebarTab";

src/components/Sidebar/SidebarTabTrigger.tsx

@@ -1,26 +0,0 @@
-import * as RadixTabs from "@radix-ui/react-tabs";
-import { SidebarTabName } from "../../types";
-
-export const SidebarTabTrigger = ({
-  children,
-  tab,
-  onSelect,
-  ...rest
-}: {
-  children: React.ReactNode;
-  tab: SidebarTabName;
-  onSelect?: React.ReactEventHandler<HTMLButtonElement> | undefined;
-} & Omit<React.HTMLAttributes<HTMLButtonElement>, "onSelect">) => {
-  return (
-    <RadixTabs.Trigger value={tab} asChild onSelect={onSelect}>
-      <button
-        type={"button"}
-        className={`excalidraw-button sidebar-tab-trigger`}
-        {...rest}
-      >
-        {children}
-      </button>
-    </RadixTabs.Trigger>
-  );
-};
-SidebarTabTrigger.displayName = "SidebarTabTrigger";

src/components/Sidebar/SidebarTabTriggers.tsx

@@ -1,16 +0,0 @@
-import * as RadixTabs from "@radix-ui/react-tabs";
-
-export const SidebarTabTriggers = ({
-  children,
-  ...rest
-}: { children: React.ReactNode } & Omit<
-  React.RefAttributes<HTMLDivElement>,
-  "onSelect"
->) => {
-  return (
-    <RadixTabs.List className="sidebar-triggers" {...rest}>
-      {children}
-    </RadixTabs.List>
-  );
-};
-SidebarTabTriggers.displayName = "SidebarTabTriggers";

src/components/Sidebar/SidebarTabs.tsx

@@ -1,36 +0,0 @@
-import * as RadixTabs from "@radix-ui/react-tabs";
-import { useUIAppState } from "../../context/ui-appState";
-import { useExcalidrawSetAppState } from "../App";
-
-export const SidebarTabs = ({
-  children,
-  ...rest
-}: {
-  children: React.ReactNode;
-} & Omit<React.RefAttributes<HTMLDivElement>, "onSelect">) => {
-  const appState = useUIAppState();
-  const setAppState = useExcalidrawSetAppState();
-
-  if (!appState.openSidebar) {
-    return null;
-  }
-
-  const { name } = appState.openSidebar;
-
-  return (
-    <RadixTabs.Root
-      className="sidebar-tabs-root"
-      value={appState.openSidebar.tab}
-      onValueChange={(tab) =>
-        setAppState((state) => ({
-          ...state,
-          openSidebar: { ...state.openSidebar, name, tab },
-        }))
-      }
-      {...rest}
-    >
-      {children}
-    </RadixTabs.Root>
-  );
-};
-SidebarTabs.displayName = "SidebarTabs";

src/components/Sidebar/SidebarTrigger.scss

@@ -1,34 +0,0 @@
-@import "../../css/variables.module";
-
-.excalidraw {
-  .sidebar-trigger {
-    @include outlineButtonStyles;
-
-    background-color: var(--island-bg-color);
-
-    width: auto;
-    height: var(--lg-button-size);
-
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-
-    line-height: 0;
-
-    font-size: 0.75rem;
-    letter-spacing: 0.4px;
-
-    svg {
-      width: var(--lg-icon-size);
-      height: var(--lg-icon-size);
-    }
-  }
-
-  .default-sidebar-trigger .sidebar-trigger__label {
-    display: none;
-
-    @media screen and (min-width: 1024px) {
-      display: block;
-    }
-  }
-}

src/components/Sidebar/SidebarTrigger.tsx

@@ -1,45 +0,0 @@
-import { useExcalidrawSetAppState } from "../App";
-import { SidebarTriggerProps } from "./common";
-import { useUIAppState } from "../../context/ui-appState";
-import clsx from "clsx";
-
-import "./SidebarTrigger.scss";
-
-export const SidebarTrigger = ({
-  name,
-  tab,
-  icon,
-  title,
-  children,
-  onToggle,
-  className,
-  style,
-}: SidebarTriggerProps) => {
-  const setAppState = useExcalidrawSetAppState();
-  const appState = useUIAppState();
-
-  return (
-    <label title={title}>
-      <input
-        className="ToolIcon_type_checkbox"
-        type="checkbox"
-        onChange={(event) => {
-          document
-            .querySelector(".layer-ui__wrapper")
-            ?.classList.remove("animate");
-          const isOpen = event.target.checked;
-          setAppState({ openSidebar: isOpen ? { name, tab } : null });
-          onToggle?.(isOpen);
-        }}
-        checked={appState.openSidebar?.name === name}
-        aria-label={title}
-        aria-keyshortcuts="0"
-      />
-      <div className={clsx("sidebar-trigger", className)} style={style}>
-        {icon && <div>{icon}</div>}
-        {children && <div className="sidebar-trigger__label">{children}</div>}
-      </div>
-    </label>
-  );
-};
-SidebarTrigger.displayName = "SidebarTrigger";

src/components/Sidebar/common.ts

@@ -1,41 +1,23 @@
 import React from "react";
-import { AppState, SidebarName, SidebarTabName } from "../../types";
-
-export type SidebarTriggerProps = {
-  name: SidebarName;
-  tab?: SidebarTabName;
-  icon?: JSX.Element;
-  children?: React.ReactNode;
-  title?: string;
-  className?: string;
-  onToggle?: (open: boolean) => void;
-  style?: React.CSSProperties;
-};
 
 export type SidebarProps<P = {}> = {
-  name: SidebarName;
   children: React.ReactNode;
   /**
-   * Called on sidebar open/close or tab change.
+   * Called on sidebar close (either by user action or by the editor).
-   */
-  onStateChange?: (state: AppState["openSidebar"]) => void;
-  /**
-   * supply alongside `docked` prop in order to make the Sidebar user-dockable
    */
+  onClose?: () => void | boolean;
+  /** if not supplied, sidebar won't be dockable */
   onDock?: (docked: boolean) => void;
   docked?: boolean;
+  initialDockedState?: boolean;
+  dockable?: boolean;
   className?: string;
-  // NOTE sidebars we use internally inside the editor must have this flag set.
-  // It indicates that this sidebar should have lower precedence over host
-  // sidebars, if both are open.
-  /** @private internal */
-  __fallback?: boolean;
 } & P;
 
 export type SidebarPropsContextValue = Pick<
   SidebarProps,
-  "onDock" | "docked"
+  "onClose" | "onDock" | "docked" | "dockable"
-> & { onCloseRequest: () => void; shouldRenderDockButton: boolean };
+>;
 
 export const SidebarPropsContext =
-  React.createContext<SidebarPropsContextValue>({} as SidebarPropsContextValue);
+  React.createContext<SidebarPropsContextValue>({});

src/components/SingleLibraryItem.scss

@@ -0,0 +1,79 @@
+@import "../css/variables.module";
+
+.excalidraw {
+  .single-library-item {
+    position: relative;
+
+    &-status {
+      position: absolute;
+      top: 0.3rem;
+      left: 0.3rem;
+      font-size: 0.7rem;
+      color: $oc-red-7;
+      background: rgba(255, 255, 255, 0.9);
+      padding: 0.1rem 0.2rem;
+      border-radius: 0.2rem;
+    }
+
+    &__svg {
+      background-color: $oc-white;
+      padding: 0.3rem;
+      width: 7.5rem;
+      height: 7.5rem;
+      border: 1px solid var(--button-gray-2);
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .ToolIcon__icon {
+      background-color: $oc-white;
+      width: auto;
+      height: auto;
+      margin: 0 0.5rem;
+    }
+    .ToolIcon,
+    .ToolIcon_type_button:hover {
+      background-color: white;
+    }
+    .required,
+    .error {
+      color: $oc-red-8;
+      font-weight: bold;
+      font-size: 1rem;
+      margin: 0.2rem;
+    }
+    .error {
+      font-weight: 500;
+      margin: 0;
+      padding: 0.3em 0;
+    }
+
+    &--remove {
+      position: absolute;
+      top: 0.2rem;
+      right: 1rem;
+
+      .ToolIcon__icon {
+        margin: 0;
+      }
+      .ToolIcon__icon {
+        background-color: $oc-red-6;
+        &:hover {
+          background-color: $oc-red-7;
+        }
+        &:active {
+          background-color: $oc-red-8;
+        }
+      }
+      svg {
+        color: $oc-white;
+        padding: 0.26rem;
+        border-radius: 0.3em;
+        width: 1rem;
+        height: 1rem;
+      }
+    }
+  }
+}

src/components/SingleLibraryItem.tsx

@@ -0,0 +1,104 @@
+import oc from "open-color";
+import { useEffect, useRef } from "react";
+import { t } from "../i18n";
+import { exportToSvg } from "../packages/utils";
+import { AppState, LibraryItem } from "../types";
+import { CloseIcon } from "./icons";
+
+import "./SingleLibraryItem.scss";
+import { ToolButton } from "./ToolButton";
+
+const SingleLibraryItem = ({
+  libItem,
+  appState,
+  index,
+  onChange,
+  onRemove,
+}: {
+  libItem: LibraryItem;
+  appState: AppState;
+  index: number;
+  onChange: (val: string, index: number) => void;
+  onRemove: (id: string) => void;
+}) => {
+  const svgRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    const node = svgRef.current;
+    if (!node) {
+      return;
+    }
+    (async () => {
+      const svg = await exportToSvg({
+        elements: libItem.elements,
+        appState: {
+          ...appState,
+          viewBackgroundColor: oc.white,
+          exportBackground: true,
+        },
+        files: null,
+      });
+      node.innerHTML = svg.outerHTML;
+    })();
+  }, [libItem.elements, appState]);
+
+  return (
+    <div className="single-library-item">
+      {libItem.status === "published" && (
+        <span className="single-library-item-status">
+          {t("labels.statusPublished")}
+        </span>
+      )}
+      <div ref={svgRef} className="single-library-item__svg" />
+      <ToolButton
+        aria-label={t("buttons.remove")}
+        type="button"
+        icon={CloseIcon}
+        className="single-library-item--remove"
+        onClick={onRemove.bind(null, libItem.id)}
+        title={t("buttons.remove")}
+      />
+      <div
+        style={{
+          display: "flex",
+          margin: "0.8rem 0",
+          width: "100%",
+          fontSize: "14px",
+          fontWeight: 500,
+          flexDirection: "column",
+        }}
+      >
+        <label
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            flexDirection: "column",
+          }}
+        >
+          <div style={{ padding: "0.5em 0" }}>
+            <span style={{ fontWeight: 500, color: oc.gray[6] }}>
+              {t("publishDialog.itemName")}
+            </span>
+            <span aria-hidden="true" className="required">
+              *
+            </span>
+          </div>
+          <input
+            type="text"
+            ref={inputRef}
+            style={{ width: "80%", padding: "0.2rem" }}
+            defaultValue={libItem.name}
+            placeholder="Item name"
+            onChange={(event) => {
+              onChange(event.target.value, index);
+            }}
+          />
+        </label>
+        <span className="error">{libItem.error}</span>
+      </div>
+    </div>
+  );
+};
+
+export default SingleLibraryItem;

src/components/Stats.tsx

@@ -3,14 +3,14 @@ import { getCommonBounds } from "../element/bounds";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
 import { getTargetElements } from "../scene";
-import { ExcalidrawProps, UIAppState } from "../types";
+import { AppState, ExcalidrawProps } from "../types";
 import { CloseIcon } from "./icons";
 import { Island } from "./Island";
 import "./Stats.scss";
 
 export const Stats = (props: {
-  appState: UIAppState;
+  appState: AppState;
-  setAppState: React.Component<any, UIAppState>["setState"];
+  setAppState: React.Component<any, AppState>["setState"];
   elements: readonly NonDeletedExcalidrawElement[];
   onClose: () => void;
   renderCustomStats: ExcalidrawProps["renderCustomStats"];

src/components/Tooltip.scss

@@ -2,9 +2,6 @@
 
 // container in body where the actual tooltip is appended to
 .excalidraw-tooltip {
-  --ui-font: Assistant, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI,
-    Roboto, Helvetica, Arial, sans-serif;
-  font-family: var(--ui-font);
   position: fixed;
   z-index: 1000;
 

src/components/TopErrorBoundary.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import * as Sentry from "@sentry/browser";
 import { t } from "../i18n";
-import Trans from "./Trans";
 
 interface TopErrorBoundaryState {
   hasError: boolean;
@@ -75,31 +74,25 @@ export class TopErrorBoundary extends React.Component<
       <div className="ErrorSplash excalidraw">
         <div className="ErrorSplash-messageContainer">
           <div className="ErrorSplash-paragraph bigger align-center">
-            <Trans
+            {t("errorSplash.headingMain_pre")}
-              i18nKey="errorSplash.headingMain"
+            <button onClick={() => window.location.reload()}>
-              button={(el) => (
+              {t("errorSplash.headingMain_button")}
-                <button onClick={() => window.location.reload()}>{el}</button>
+            </button>
-              )}
-            />
           </div>
           <div className="ErrorSplash-paragraph align-center">
-            <Trans
+            {t("errorSplash.clearCanvasMessage")}
-              i18nKey="errorSplash.clearCanvasMessage"
+            <button
-              button={(el) => (
+              onClick={() => {
-                <button
+                try {
-                  onClick={() => {
+                  localStorage.clear();
-                    try {
+                  window.location.reload();
-                      localStorage.clear();
+                } catch (error: any) {
-                      window.location.reload();
+                  console.error(error);
-                    } catch (error: any) {
+                }
-                      console.error(error);
+              }}
-                    }
+            >
-                  }}
+              {t("errorSplash.clearCanvasMessage_button")}
-                >
+            </button>
-                  {el}
-                </button>
-              )}
-            />
             <br />
             <div className="smaller">
               <span role="img" aria-label="warning">
@@ -113,17 +106,16 @@ export class TopErrorBoundary extends React.Component<
           </div>
           <div>
             <div className="ErrorSplash-paragraph">
-              {t("errorSplash.trackedToSentry", {
+              {t("errorSplash.trackedToSentry_pre")}
-                eventId: this.state.sentryEventId,
+              {this.state.sentryEventId}
-              })}
+              {t("errorSplash.trackedToSentry_post")}
             </div>
             <div className="ErrorSplash-paragraph">
-              <Trans
+              {t("errorSplash.openIssueMessage_pre")}
-                i18nKey="errorSplash.openIssueMessage"
+              <button onClick={() => this.createGithubIssue()}>
-                button={(el) => (
+                {t("errorSplash.openIssueMessage_button")}
-                  <button onClick={() => this.createGithubIssue()}>{el}</button>
+              </button>
-                )}
+              {t("errorSplash.openIssueMessage_post")}
-              />
             </div>
             <div className="ErrorSplash-paragraph">
               <div className="ErrorSplash-details">

src/components/Trans.test.tsx

@@ -1,67 +0,0 @@
-import { render } from "@testing-library/react";
-
-import fallbackLangData from "../locales/en.json";
-
-import Trans from "./Trans";
-
-describe("Test <Trans/>", () => {
-  it("should translate the the strings correctly", () => {
-    //@ts-ignore
-    fallbackLangData.transTest = {
-      key1: "Hello {{audience}}",
-      key2: "Please <link>click the button</link> to continue.",
-      key3: "Please <link>click {{location}}</link> to continue.",
-      key4: "Please <link>click <bold>{{location}}</bold></link> to continue.",
-      key5: "Please <connect-link>click the button</connect-link> to continue.",
-    };
-
-    const { getByTestId } = render(
-      <>
-        <div data-testid="test1">
-          <Trans i18nKey="transTest.key1" audience="world" />
-        </div>
-        <div data-testid="test2">
-          <Trans
-            i18nKey="transTest.key2"
-            link={(el) => <a href="https://example.com">{el}</a>}
-          />
-        </div>
-        <div data-testid="test3">
-          <Trans
-            i18nKey="transTest.key3"
-            link={(el) => <a href="https://example.com">{el}</a>}
-            location="the button"
-          />
-        </div>
-        <div data-testid="test4">
-          <Trans
-            i18nKey="transTest.key4"
-            link={(el) => <a href="https://example.com">{el}</a>}
-            location="the button"
-            bold={(el) => <strong>{el}</strong>}
-          />
-        </div>
-        <div data-testid="test5">
-          <Trans
-            i18nKey="transTest.key5"
-            connect-link={(el) => <a href="https://example.com">{el}</a>}
-          />
-        </div>
-      </>,
-    );
-
-    expect(getByTestId("test1").innerHTML).toEqual("Hello world");
-    expect(getByTestId("test2").innerHTML).toEqual(
-      `Please <a href="https://example.com">click the button</a> to continue.`,
-    );
-    expect(getByTestId("test3").innerHTML).toEqual(
-      `Please <a href="https://example.com">click the button</a> to continue.`,
-    );
-    expect(getByTestId("test4").innerHTML).toEqual(
-      `Please <a href="https://example.com">click <strong>the button</strong></a> to continue.`,
-    );
-    expect(getByTestId("test5").innerHTML).toEqual(
-      `Please <a href="https://example.com">click the button</a> to continue.`,
-    );
-  });
-});

src/components/Trans.tsx

@@ -1,169 +0,0 @@
-import React from "react";
-
-import { useI18n } from "../i18n";
-
-// Used for splitting i18nKey into tokens in Trans component
-// Example:
-// "Please <link>click {{location}}</link> to continue.".split(SPLIT_REGEX).filter(Boolean)
-// produces
-// ["Please ", "<link>", "click ", "{{location}}", "</link>", " to continue."]
-const SPLIT_REGEX = /({{[\w-]+}})|(<[\w-]+>)|(<\/[\w-]+>)/g;
-// Used for extracting "location" from "{{location}}"
-const KEY_REGEXP = /{{([\w-]+)}}/;
-// Used for extracting "link" from "<link>"
-const TAG_START_REGEXP = /<([\w-]+)>/;
-// Used for extracting "link" from "</link>"
-const TAG_END_REGEXP = /<\/([\w-]+)>/;
-
-const getTransChildren = (
-  format: string,
-  props: {
-    [key: string]: React.ReactNode | ((el: React.ReactNode) => React.ReactNode);
-  },
-): React.ReactNode[] => {
-  const stack: { name: string; children: React.ReactNode[] }[] = [
-    {
-      name: "",
-      children: [],
-    },
-  ];
-
-  format
-    .split(SPLIT_REGEX)
-    .filter(Boolean)
-    .forEach((match) => {
-      const tagStartMatch = match.match(TAG_START_REGEXP);
-      const tagEndMatch = match.match(TAG_END_REGEXP);
-      const keyMatch = match.match(KEY_REGEXP);
-
-      if (tagStartMatch !== null) {
-        // The match is <tag>. Set the tag name as the name if it's one of the
-        // props, e.g. for "Please <link>click the button</link> to continue"
-        // tagStartMatch[1] = "link" and props contain "link" then it will be
-        // pushed to stack.
-        const name = tagStartMatch[1];
-        if (props.hasOwnProperty(name)) {
-          stack.push({
-            name,
-            children: [],
-          });
-        } else {
-          console.warn(
-            `Trans: missed to pass in prop ${name} for interpolating ${format}`,
-          );
-        }
-      } else if (tagEndMatch !== null) {
-        // If tag end match is found, this means we need to replace the content with
-        // its actual value in prop e.g. format = "Please <link>click the
-        // button</link> to continue", tagEndMatch is for "</link>", stack last item name =
-        // "link" and props.link = (el) => <a
-        // href="https://example.com">{el}</a> then its prop value will be
-        // pushed to "link"'s children so on DOM when rendering it's rendered as
-        // <a href="https://example.com">click the button</a>
-        const name = tagEndMatch[1];
-        if (name === stack[stack.length - 1].name) {
-          const item = stack.pop()!;
-          const itemChildren = React.createElement(
-            React.Fragment,
-            {},
-            ...item.children,
-          );
-          const fn = props[item.name];
-          if (typeof fn === "function") {
-            stack[stack.length - 1].children.push(fn(itemChildren));
-          }
-        } else {
-          console.warn(
-            `Trans: unexpected end tag ${match} for interpolating ${format}`,
-          );
-        }
-      } else if (keyMatch !== null) {
-        // The match is for {{key}}. Check if the key is present in props and set
-        // the prop value as children of last stack item e.g. format = "Hello
-        // {{name}}", key = "name" and props.name = "Excalidraw" then its prop
-        // value will be pushed to "name"'s children so it's rendered on DOM as
-        // "Hello Excalidraw"
-        const name = keyMatch[1];
-        if (props.hasOwnProperty(name)) {
-          stack[stack.length - 1].children.push(props[name] as React.ReactNode);
-        } else {
-          console.warn(
-            `Trans: key ${name} not in props for interpolating ${format}`,
-          );
-        }
-      } else {
-        // If none of cases match means we just need to push the string
-        // to stack eg - "Hello {{name}} Whats up?" "Hello", "Whats up" will be pushed
-        stack[stack.length - 1].children.push(match);
-      }
-    });
-
-  if (stack.length !== 1) {
-    console.warn(`Trans: stack not empty for interpolating ${format}`);
-  }
-
-  return stack[0].children;
-};
-
-/*
-Trans component is used for translating JSX.
-
-```json
-{
-  "example1": "Hello {{audience}}",
-  "example2": "Please <link>click the button</link> to continue.",
-  "example3": "Please <link>click {{location}}</link> to continue.",
-  "example4": "Please <link>click <bold>{{location}}</bold></link> to continue.",
-}
-```
-
-```jsx
-<Trans i18nKey="example1" audience="world" />
-
-<Trans
-  i18nKey="example2"
-  connectLink={(el) => <a href="https://example.com">{el}</a>}
-/>
-
-<Trans
-  i18nKey="example3"
-  connectLink={(el) => <a href="https://example.com">{el}</a>}
-  location="the button"
-/>
-
-<Trans
-  i18nKey="example4"
-  connectLink={(el) => <a href="https://example.com">{el}</a>}
-  location="the button"
-  bold={(el) => <strong>{el}</strong>}
-/>
-```
-
-Output:
-
-```html
-Hello world
-Please <a href="https://example.com">click the button</a> to continue.
-Please <a href="https://example.com">click the button</a> to continue.
-Please <a href="https://example.com">click <strong>the button</strong></a> to continue.
-```
-*/
-const Trans = ({
-  i18nKey,
-  children,
-  ...props
-}: {
-  i18nKey: string;
-  [key: string]: React.ReactNode | ((el: React.ReactNode) => React.ReactNode);
-}) => {
-  const { t } = useI18n();
-
-  // This is needed to avoid unique key error in list which gets rendered from getTransChildren
-  return React.createElement(
-    React.Fragment,
-    {},
-    ...getTransChildren(t(i18nKey), props),
-  );
-};
-
-export default Trans;

src/components/__snapshots__/App.test.tsx.snap

@@ -5,46 +5,59 @@ exports[`Test <App/> should show error modal when using brave and measureText AP
   data-testid="brave-measure-text-error"
 >
   <p>
-    Looks like you are using Brave browser with the 
+    Looks like you are using Brave browser with the
+      
     <span
       style="font-weight: 600;"
     >
       Aggressively Block Fingerprinting
     </span>
-     setting enabled.
+     
-  </p>
+    setting enabled
-  <p>
+    .
-    This could result in breaking the 
+    <br />
+    <br />
+    This could result in breaking the
+     
     <span
       style="font-weight: 600;"
     >
       Text Elements
     </span>
-     in your drawings.
+     
+    in your drawings
+    .
   </p>
   <p>
-    We strongly recommend disabling this setting. You can follow 
+    We strongly recommend disabling this setting. You can follow
+     
     <a
       href="http://docs.excalidraw.com/docs/@excalidraw/excalidraw/faq#turning-off-aggresive-block-fingerprinting-in-brave-browser"
     >
+       
       these steps
     </a>
-     on how to do so.
+     
+    on how to do so
+    .
   </p>
   <p>
-    If disabling this setting doesn't fix the display of text elements, please open an 
+     If disabling this setting doesn't fix the display of text elements, please open an
+     
     <a
       href="https://github.com/excalidraw/excalidraw/issues/new"
     >
       issue
     </a>
-     on our GitHub, or write us on 
+     
+    on our GitHub, or write us on
+     
     <a
       href="https://discord.gg/UexuTaE"
     >
       Discord
-      .
     </a>
+    .
   </p>
 </div>
 `;

src/components/context/tunnels.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import tunnel from "@dwelle/tunnel-rat";
+
+type Tunnel = ReturnType<typeof tunnel>;
+
+type TunnelsContextValue = {
+  mainMenuTunnel: Tunnel;
+  welcomeScreenMenuHintTunnel: Tunnel;
+  welcomeScreenToolbarHintTunnel: Tunnel;
+  welcomeScreenHelpHintTunnel: Tunnel;
+  welcomeScreenCenterTunnel: Tunnel;
+  footerCenterTunnel: Tunnel;
+  jotaiScope: symbol;
+};
+
+export const TunnelsContext = React.createContext<TunnelsContextValue>(null!);
+
+export const useTunnels = () => React.useContext(TunnelsContext);
+
+export const useInitializeTunnels = () => {
+  return React.useMemo((): TunnelsContextValue => {
+    return {
+      mainMenuTunnel: tunnel(),
+      welcomeScreenMenuHintTunnel: tunnel(),
+      welcomeScreenToolbarHintTunnel: tunnel(),
+      welcomeScreenHelpHintTunnel: tunnel(),
+      welcomeScreenCenterTunnel: tunnel(),
+      footerCenterTunnel: tunnel(),
+      jotaiScope: Symbol(),
+    };
+  }, []);
+};

src/components/dropdownMenu/DropdownMenuContent.tsx

@@ -1,4 +1,4 @@
-import { useOutsideClick } from "../../hooks/useOutsideClick";
+import { useOutsideClickHook } from "../../hooks/useOutsideClick";
 import { Island } from "../Island";
 
 import { useDevice } from "../App";
@@ -24,7 +24,7 @@ const MenuContent = ({
   style?: React.CSSProperties;
 }) => {
   const device = useDevice();
-  const menuRef = useOutsideClick(() => {
+  const menuRef = useOutsideClickHook(() => {
     onClickOutside?.();
   });
 

src/components/dropdownMenu/DropdownMenuTrigger.tsx

@@ -1,6 +1,5 @@
 import clsx from "clsx";
-import { useUIAppState } from "../../context/ui-appState";
+import { useDevice, useExcalidrawAppState } from "../App";
-import { useDevice } from "../App";
 
 const MenuTrigger = ({
   className = "",
@@ -11,7 +10,7 @@ const MenuTrigger = ({
   children: React.ReactNode;
   onToggle: () => void;
 }) => {
-  const appState = useUIAppState();
+  const appState = useExcalidrawAppState();
   const device = useDevice();
   const classNames = clsx(
     `dropdown-menu-button ${className}`,

src/components/footer/Footer.tsx

@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import { actionShortcuts } from "../../actions";
 import { ActionManager } from "../../actions/manager";
+import { AppState } from "../../types";
 import {
   ExitZenModeAction,
   FinalizeAction,
@@ -8,11 +9,10 @@ import {
   ZoomActions,
 } from "../Actions";
 import { useDevice } from "../App";
-import { useTunnels } from "../../context/tunnels";
+import { useTunnels } from "../context/tunnels";
 import { HelpButton } from "../HelpButton";
 import { Section } from "../Section";
 import Stack from "../Stack";
-import { UIAppState } from "../../types";
 
 const Footer = ({
   appState,
@@ -20,12 +20,12 @@ const Footer = ({
   showExitZenModeBtn,
   renderWelcomeScreen,
 }: {
-  appState: UIAppState;
+  appState: AppState;
   actionManager: ActionManager;
   showExitZenModeBtn: boolean;
   renderWelcomeScreen: boolean;
 }) => {
-  const { FooterCenterTunnel, WelcomeScreenHelpHintTunnel } = useTunnels();
+  const { footerCenterTunnel, welcomeScreenHelpHintTunnel } = useTunnels();
 
   const device = useDevice();
   const showFinalize =
@@ -70,14 +70,14 @@ const Footer = ({
           </Section>
         </Stack.Col>
       </div>
-      <FooterCenterTunnel.Out />
+      <footerCenterTunnel.Out />
       <div
         className={clsx("layer-ui__wrapper__footer-right zen-mode-transition", {
           "transition-right disable-pointerEvents": appState.zenModeEnabled,
         })}
       >
         <div style={{ position: "relative" }}>
-          {renderWelcomeScreen && <WelcomeScreenHelpHintTunnel.Out />}
+          {renderWelcomeScreen && <welcomeScreenHelpHintTunnel.Out />}
           <HelpButton
             onClick={() => actionManager.executeAction(actionShortcuts)}
           />

src/components/footer/FooterCenter.tsx

@@ -1,13 +1,13 @@
 import clsx from "clsx";
-import { useTunnels } from "../../context/tunnels";
+import { useExcalidrawAppState } from "../App";
+import { useTunnels } from "../context/tunnels";
 import "./FooterCenter.scss";
-import { useUIAppState } from "../../context/ui-appState";
 
 const FooterCenter = ({ children }: { children?: React.ReactNode }) => {
-  const { FooterCenterTunnel } = useTunnels();
+  const { footerCenterTunnel } = useTunnels();
-  const appState = useUIAppState();
+  const appState = useExcalidrawAppState();
   return (
-    <FooterCenterTunnel.In>
+    <footerCenterTunnel.In>
       <div
         className={clsx("footer-center zen-mode-transition", {
           "layer-ui__wrapper__footer-left--transition-bottom":
@@ -16,7 +16,7 @@ const FooterCenter = ({ children }: { children?: React.ReactNode }) => {
       >
         {children}
       </div>
-    </FooterCenterTunnel.In>
+    </footerCenterTunnel.In>
   );
 };
 

src/components/hoc/withInternalFallback.tsx

@@ -1,46 +1,32 @@
 import { atom, useAtom } from "jotai";
 import React, { useLayoutEffect } from "react";
-import { useTunnels } from "../../context/tunnels";
+import { useTunnels } from "../context/tunnels";
 
 export const withInternalFallback = <P,>(
   componentName: string,
   Component: React.FC<P>,
 ) => {
-  const renderAtom = atom(0);
+  const counterAtom = atom(0);
   // flag set on initial render to tell the fallback component to skip the
   // render until mount counter are initialized. This is because the counter
   // is initialized in an effect, and thus we could end rendering both
   // components at the same time until counter is initialized.
   let preferHost = false;
 
-  let counter = 0;
-
   const WrapperComponent: React.FC<
     P & {
       __fallback?: boolean;
     }
   > = (props) => {
     const { jotaiScope } = useTunnels();
-    const [, setRender] = useAtom(renderAtom, jotaiScope);
+    const [counter, setCounter] = useAtom(counterAtom, jotaiScope);
 
     useLayoutEffect(() => {
-      setRender((c) => {
+      setCounter((counter) => counter + 1);
-        const next = c + 1;
-        counter = next;
-
-        return next;
-      });
       return () => {
-        setRender((c) => {
+        setCounter((counter) => counter - 1);
-          const next = c - 1;
-          counter = next;
-          if (!next) {
-            preferHost = false;
-          }
-          return next;
-        });
       };
-    }, [setRender]);
+    }, [setCounter]);
 
     if (!props.__fallback) {
       preferHost = true;

src/components/hoc/withUpstreamOverride.tsx

@@ -0,0 +1,63 @@
+import React, {
+  useMemo,
+  useContext,
+  useLayoutEffect,
+  useState,
+  createContext,
+} from "react";
+
+export const withUpstreamOverride = <P,>(Component: React.ComponentType<P>) => {
+  type ContextValue = [boolean, React.Dispatch<React.SetStateAction<boolean>>];
+
+  const DefaultComponentContext = createContext<ContextValue>([
+    false,
+    () => {},
+  ]);
+
+  const ComponentContext: React.FC<{ children: React.ReactNode }> = ({
+    children,
+  }) => {
+    const [isRenderedUpstream, setIsRenderedUpstream] = useState(false);
+    const contextValue: ContextValue = useMemo(
+      () => [isRenderedUpstream, setIsRenderedUpstream],
+      [isRenderedUpstream],
+    );
+
+    return (
+      <DefaultComponentContext.Provider value={contextValue}>
+        {children}
+      </DefaultComponentContext.Provider>
+    );
+  };
+
+  const DefaultComponent = (
+    props: P & {
+      // indicates whether component should render when not rendered upstream
+      /** @private internal */
+      __isFallback?: boolean;
+    },
+  ) => {
+    const [isRenderedUpstream, setIsRenderedUpstream] = useContext(
+      DefaultComponentContext,
+    );
+
+    useLayoutEffect(() => {
+      if (!props.__isFallback) {
+        setIsRenderedUpstream(true);
+        return () => setIsRenderedUpstream(false);
+      }
+    }, [props.__isFallback, setIsRenderedUpstream]);
+
+    if (props.__isFallback && isRenderedUpstream) {
+      return null;
+    }
+
+    return <Component {...props} />;
+  };
+  if (Component.name) {
+    DefaultComponent.displayName = `${Component.name}_upstreamOverrideWrapper`;
+    ComponentContext.displayName = `${Component.name}_upstreamOverrideContextWrapper`;
+  }
+
+  return [ComponentContext, DefaultComponent] as const;
+};

src/components/icons.tsx

@@ -1008,13 +1008,6 @@ export const UngroupIcon = React.memo(({ theme }: { theme: Theme }) =>
   ),
 );
 
-export const FillZigZagIcon = createIcon(
-  <g strokeWidth={1.25}>
-    <path d="M5.879 2.625h8.242a3.27 3.27 0 0 1 3.254 3.254v8.242a3.27 3.27 0 0 1-3.254 3.254H5.88a3.27 3.27 0 0 1-3.254-3.254V5.88A3.27 3.27 0 0 1 5.88 2.626l-.001-.001ZM4.518 16.118l7.608-12.83m.198 13.934 5.051-9.897M2.778 9.675l9.348-6.387m-7.608 12.83 12.857-8.793" />
-  </g>,
-  modifiedTablerIconProps,
-);
-
 export const FillHachureIcon = createIcon(
   <>
     <path

src/components/live-collaboration/LiveCollaborationTrigger.tsx

@@ -3,9 +3,9 @@ import { usersIcon } from "../icons";
 import { Button } from "../Button";
 
 import clsx from "clsx";
+import { useExcalidrawAppState } from "../App";
 
 import "./LiveCollaborationTrigger.scss";
-import { useUIAppState } from "../../context/ui-appState";
 
 const LiveCollaborationTrigger = ({
   isCollaborating,
@@ -15,7 +15,7 @@ const LiveCollaborationTrigger = ({
   isCollaborating: boolean;
   onSelect: () => void;
 } & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
-  const appState = useUIAppState();
+  const appState = useExcalidrawAppState();
 
   return (
     <Button

src/components/main-menu/DefaultItems.tsx

@@ -1,6 +1,10 @@
 import { getShortcutFromShortcutName } from "../../actions/shortcuts";
 import { useI18n } from "../../i18n";
-import { useExcalidrawSetAppState, useExcalidrawActionManager } from "../App";
+import {
+  useExcalidrawAppState,
+  useExcalidrawSetAppState,
+  useExcalidrawActionManager,
+} from "../App";
 import {
   ExportIcon,
   ExportImageIcon,
@@ -28,7 +32,6 @@ import clsx from "clsx";
 import { useSetAtom } from "jotai";
 import { activeConfirmDialogAtom } from "../ActiveConfirmDialog";
 import { jotaiScope } from "../../jotai";
-import { useUIAppState } from "../../context/ui-appState";
 
 export const LoadScene = () => {
   const { t } = useI18n();
@@ -136,7 +139,7 @@ ClearCanvas.displayName = "ClearCanvas";
 
 export const ToggleTheme = () => {
   const { t } = useI18n();
-  const appState = useUIAppState();
+  const appState = useExcalidrawAppState();
   const actionManager = useExcalidrawActionManager();
 
   if (!actionManager.isActionEnabled(actionToggleTheme)) {
@@ -169,7 +172,7 @@ ToggleTheme.displayName = "ToggleTheme";
 
 export const ChangeCanvasBackground = () => {
   const { t } = useI18n();
-  const appState = useUIAppState();
+  const appState = useExcalidrawAppState();
   const actionManager = useExcalidrawActionManager();
 
   if (appState.viewModeEnabled) {

src/components/main-menu/MainMenu.tsx

@@ -1,5 +1,9 @@
 import React from "react";
-import { useDevice, useExcalidrawSetAppState } from "../App";
+import {
+  useDevice,
+  useExcalidrawAppState,
+  useExcalidrawSetAppState,
+} from "../App";
 import DropdownMenu from "../dropdownMenu/DropdownMenu";
 
 import * as DefaultItems from "./DefaultItems";
@@ -9,8 +13,7 @@ import { t } from "../../i18n";
 import { HamburgerMenuIcon } from "../icons";
 import { withInternalFallback } from "../hoc/withInternalFallback";
 import { composeEventHandlers } from "../../utils";
-import { useTunnels } from "../../context/tunnels";
+import { useTunnels } from "../context/tunnels";
-import { useUIAppState } from "../../context/ui-appState";
 
 const MainMenu = Object.assign(
   withInternalFallback(
@@ -25,16 +28,16 @@ const MainMenu = Object.assign(
        */
       onSelect?: (event: Event) => void;
     }) => {
-      const { MainMenuTunnel } = useTunnels();
+      const { mainMenuTunnel } = useTunnels();
       const device = useDevice();
-      const appState = useUIAppState();
+      const appState = useExcalidrawAppState();
       const setAppState = useExcalidrawSetAppState();
       const onClickOutside = device.isMobile
         ? undefined
         : () => setAppState({ openMenu: null });
 
       return (
-        <MainMenuTunnel.In>
+        <mainMenuTunnel.In>
           <DropdownMenu open={appState.openMenu === "canvas"}>
             <DropdownMenu.Trigger
               onToggle={() => {
@@ -63,7 +66,7 @@ const MainMenu = Object.assign(
               )}
             </DropdownMenu.Content>
           </DropdownMenu>
-        </MainMenuTunnel.In>
+        </mainMenuTunnel.In>
       );
     },
   ),

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

@@ -1,10 +1,13 @@
 import { actionLoadScene, actionShortcuts } from "../../actions";
 import { getShortcutFromShortcutName } from "../../actions/shortcuts";
 import { t, useI18n } from "../../i18n";
-import { useDevice, useExcalidrawActionManager } from "../App";
+import {
-import { useTunnels } from "../../context/tunnels";
+  useDevice,
+  useExcalidrawActionManager,
+  useExcalidrawAppState,
+} from "../App";
+import { useTunnels } from "../context/tunnels";
 import { ExcalLogo, HelpIcon, LoadIcon, usersIcon } from "../icons";
-import { useUIAppState } from "../../context/ui-appState";
 
 const WelcomeScreenMenuItemContent = ({
   icon,
@@ -86,9 +89,9 @@ const WelcomeScreenMenuItemLink = ({
 WelcomeScreenMenuItemLink.displayName = "WelcomeScreenMenuItemLink";
 
 const Center = ({ children }: { children?: React.ReactNode }) => {
-  const { WelcomeScreenCenterTunnel } = useTunnels();
+  const { welcomeScreenCenterTunnel } = useTunnels();
   return (
-    <WelcomeScreenCenterTunnel.In>
+    <welcomeScreenCenterTunnel.In>
       <div className="welcome-screen-center">
         {children || (
           <>
@@ -101,7 +104,7 @@ const Center = ({ children }: { children?: React.ReactNode }) => {
           </>
         )}
       </div>
-    </WelcomeScreenCenterTunnel.In>
+    </welcomeScreenCenterTunnel.In>
   );
 };
 Center.displayName = "Center";
@@ -145,7 +148,7 @@ const MenuItemHelp = () => {
 MenuItemHelp.displayName = "MenuItemHelp";
 
 const MenuItemLoadScene = () => {
-  const appState = useUIAppState();
+  const appState = useExcalidrawAppState();
   const actionManager = useExcalidrawActionManager();
 
   if (appState.viewModeEnabled) {

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

@@ -1,5 +1,5 @@
 import { t } from "../../i18n";
-import { useTunnels } from "../../context/tunnels";
+import { useTunnels } from "../context/tunnels";
 import {
   WelcomeScreenHelpArrow,
   WelcomeScreenMenuArrow,
@@ -7,44 +7,44 @@ import {
 } from "../icons";
 
 const MenuHint = ({ children }: { children?: React.ReactNode }) => {
-  const { WelcomeScreenMenuHintTunnel } = useTunnels();
+  const { welcomeScreenMenuHintTunnel } = useTunnels();
   return (
-    <WelcomeScreenMenuHintTunnel.In>
+    <welcomeScreenMenuHintTunnel.In>
       <div className="virgil welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--menu">
         {WelcomeScreenMenuArrow}
         <div className="welcome-screen-decor-hint__label">
           {children || t("welcomeScreen.defaults.menuHint")}
         </div>
       </div>
-    </WelcomeScreenMenuHintTunnel.In>
+    </welcomeScreenMenuHintTunnel.In>
   );
 };
 MenuHint.displayName = "MenuHint";
 
 const ToolbarHint = ({ children }: { children?: React.ReactNode }) => {
-  const { WelcomeScreenToolbarHintTunnel } = useTunnels();
+  const { welcomeScreenToolbarHintTunnel } = useTunnels();
   return (
-    <WelcomeScreenToolbarHintTunnel.In>
+    <welcomeScreenToolbarHintTunnel.In>
       <div className="virgil welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--toolbar">
         <div className="welcome-screen-decor-hint__label">
           {children || t("welcomeScreen.defaults.toolbarHint")}
         </div>
         {WelcomeScreenTopToolbarArrow}
       </div>
-    </WelcomeScreenToolbarHintTunnel.In>
+    </welcomeScreenToolbarHintTunnel.In>
   );
 };
 ToolbarHint.displayName = "ToolbarHint";
 
 const HelpHint = ({ children }: { children?: React.ReactNode }) => {
-  const { WelcomeScreenHelpHintTunnel } = useTunnels();
+  const { welcomeScreenHelpHintTunnel } = useTunnels();
   return (
-    <WelcomeScreenHelpHintTunnel.In>
+    <welcomeScreenHelpHintTunnel.In>
       <div className="virgil welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--help">
         <div>{children || t("welcomeScreen.defaults.helpHint")}</div>
         {WelcomeScreenHelpArrow}
       </div>
-    </WelcomeScreenHelpHintTunnel.In>
+    </welcomeScreenHelpHintTunnel.In>
   );
 };
 HelpHint.displayName = "HelpHint";

src/constants.ts

@@ -1,7 +1,6 @@
 import cssVariables from "./css/variables.module.scss";
 import { AppProps } from "./types";
-import { ExcalidrawElement, FontFamilyValues } from "./element/types";
+import { FontFamilyValues } from "./element/types";
-import oc from "open-color";
 
 export const isDarwin = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
 export const isWindows = /^Win/.test(navigator.platform);
@@ -105,30 +104,20 @@ export const CANVAS_ONLY_ACTIONS = ["selectAll"];
 
 export const GRID_SIZE = 20; // TODO make it configurable?
 
-export const IMAGE_MIME_TYPES = {
+export const MIME_TYPES = {
+  excalidraw: "application/vnd.excalidraw+json",
+  excalidrawlib: "application/vnd.excalidrawlib+json",
+  json: "application/json",
   svg: "image/svg+xml",
+  "excalidraw.svg": "image/svg+xml",
   png: "image/png",
+  "excalidraw.png": "image/png",
   jpg: "image/jpeg",
   gif: "image/gif",
   webp: "image/webp",
   bmp: "image/bmp",
   ico: "image/x-icon",
-  avif: "image/avif",
-  jfif: "image/jfif",
-} as const;
-
-export const MIME_TYPES = {
-  json: "application/json",
-  // excalidraw data
-  excalidraw: "application/vnd.excalidraw+json",
-  excalidrawlib: "application/vnd.excalidrawlib+json",
-  // image-encoded excalidraw data
-  "excalidraw.svg": "image/svg+xml",
-  "excalidraw.png": "image/png",
-  // binary
   binary: "application/octet-stream",
-  // image
-  ...IMAGE_MIME_TYPES,
 } as const;
 
 export const EXPORT_DATA_TYPES = {
@@ -199,6 +188,16 @@ export const DEFAULT_EXPORT_PADDING = 10; // px
 
 export const DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT = 1440;
 
+export const ALLOWED_IMAGE_MIME_TYPES = [
+  MIME_TYPES.png,
+  MIME_TYPES.jpg,
+  MIME_TYPES.svg,
+  MIME_TYPES.gif,
+  MIME_TYPES.webp,
+  MIME_TYPES.bmp,
+  MIME_TYPES.ico,
+] as const;
+
 export const MAX_ALLOWED_FILE_BYTES = 2 * 1024 * 1024;
 
 export const SVG_NS = "http://www.w3.org/2000/svg";
@@ -255,30 +254,3 @@ export const ROUNDNESS = {
 /** key containt id of precedeing elemnt id we use in reconciliation during
  * collaboration */
 export const PRECEDING_ELEMENT_KEY = "__precedingElement__";
-
-export const DEFAULT_ELEMENT_PROPS: {
-  strokeColor: ExcalidrawElement["strokeColor"];
-  backgroundColor: ExcalidrawElement["backgroundColor"];
-  fillStyle: ExcalidrawElement["fillStyle"];
-  strokeWidth: ExcalidrawElement["strokeWidth"];
-  strokeStyle: ExcalidrawElement["strokeStyle"];
-  roughness: ExcalidrawElement["roughness"];
-  opacity: ExcalidrawElement["opacity"];
-  locked: ExcalidrawElement["locked"];
-} = {
-  strokeColor: oc.black,
-  backgroundColor: "transparent",
-  fillStyle: "hachure",
-  strokeWidth: 1,
-  strokeStyle: "solid",
-  roughness: 1,
-  opacity: 100,
-  locked: false,
-};
-
-export const LIBRARY_SIDEBAR_TAB = "library";
-
-export const DEFAULT_SIDEBAR = {
-  name: "default",
-  defaultTab: LIBRARY_SIDEBAR_TAB,
-} as const;

src/context/tunnels.ts

@@ -1,36 +0,0 @@
-import React from "react";
-import tunnel from "tunnel-rat";
-
-export type Tunnel = ReturnType<typeof tunnel>;
-
-type TunnelsContextValue = {
-  MainMenuTunnel: Tunnel;
-  WelcomeScreenMenuHintTunnel: Tunnel;
-  WelcomeScreenToolbarHintTunnel: Tunnel;
-  WelcomeScreenHelpHintTunnel: Tunnel;
-  WelcomeScreenCenterTunnel: Tunnel;
-  FooterCenterTunnel: Tunnel;
-  DefaultSidebarTriggerTunnel: Tunnel;
-  DefaultSidebarTabTriggersTunnel: Tunnel;
-  jotaiScope: symbol;
-};
-
-export const TunnelsContext = React.createContext<TunnelsContextValue>(null!);
-
-export const useTunnels = () => React.useContext(TunnelsContext);
-
-export const useInitializeTunnels = () => {
-  return React.useMemo((): TunnelsContextValue => {
-    return {
-      MainMenuTunnel: tunnel(),
-      WelcomeScreenMenuHintTunnel: tunnel(),
-      WelcomeScreenToolbarHintTunnel: tunnel(),
-      WelcomeScreenHelpHintTunnel: tunnel(),
-      WelcomeScreenCenterTunnel: tunnel(),
-      FooterCenterTunnel: tunnel(),
-      DefaultSidebarTriggerTunnel: tunnel(),
-      DefaultSidebarTabTriggersTunnel: tunnel(),
-      jotaiScope: Symbol(),
-    };
-  }, []);
-};

src/context/ui-appState.ts

@@ -1,5 +0,0 @@
-import React from "react";
-import { UIAppState } from "../types";
-
-export const UIAppStateContext = React.createContext<UIAppState>(null!);
-export const useUIAppState = () => React.useContext(UIAppStateContext);

src/css/styles.scss

@@ -155,9 +155,6 @@
     margin: 1px;
   }
 
-  .welcome-screen-menu-item:focus-visible,
-  .dropdown-menu-item:focus-visible,
-  button:focus-visible,
   .buttonList label:focus-within,
   input:focus-visible {
     outline: transparent;
@@ -354,7 +351,6 @@
     border-radius: var(--space-factor);
     border: 1px solid var(--button-gray-2);
     font-size: 0.8rem;
-    font-family: inherit;
     outline: none;
     appearance: none;
     background-image: var(--dropdown-icon);
@@ -414,7 +410,6 @@
     bottom: 30px;
     transform: translateX(-50%);
     pointer-events: all;
-    font-family: inherit;
 
     &:hover {
       background-color: var(--button-hover-bg);
@@ -567,7 +562,7 @@
       border-radius: 0;
     }
 
-    .default-sidebar-trigger {
+    .library-button {
       border: 0;
     }
   }

src/css/theme.scss

@@ -78,13 +78,10 @@
 
   --color-selection: #6965db;
 
-  --color-icon-white: #{$oc-white};
-
   --color-primary: #6965db;
   --color-primary-darker: #5b57d1;
   --color-primary-darkest: #4a47b1;
   --color-primary-light: #e3e2fe;
-  --color-primary-light-darker: #d7d5ff;
 
   --color-gray-10: #f5f5f5;
   --color-gray-20: #ebebeb;
@@ -164,13 +161,10 @@
     // will be inverted to a lighter color.
     --color-selection: #3530c4;
 
-    --color-icon-white: var(--color-gray-90);
-
     --color-primary: #a8a5ff;
     --color-primary-darker: #b2aeff;
     --color-primary-darkest: #beb9ff;
     --color-primary-light: #4f4d6f;
-    --color-primary-light-darker: #43415e;
 
     --color-text-warning: var(--color-gray-80);
 

src/css/variables.module.scss

@@ -72,14 +72,7 @@
 
   &:hover {
     background-color: var(--button-hover-bg, var(--island-bg-color));
-    border-color: var(
+    border-color: var(--button-hover-border, var(--default-border-color));
-      --button-hover-border,
-      var(--button-border, var(--default-border-color))
-    );
-    color: var(
-      --button-hover-color,
-      var(--button-color, var(--text-primary-color, inherit))
-    );
   }
 
   &:active {
@@ -88,14 +81,11 @@
   }
 
   &.active {
-    background-color: var(--button-selected-bg, var(--color-primary-light));
+    background-color: var(--color-primary-light);
-    border-color: var(--button-selected-border, var(--color-primary-light));
+    border-color: var(--color-primary-light);
 
     &:hover {
-      background-color: var(
+      background-color: var(--color-primary-light);
-        --button-selected-hover-bg,
-        var(--color-primary-light)
-      );
     }
 
     svg {

src/data/blob.ts

@@ -1,6 +1,6 @@
 import { nanoid } from "nanoid";
 import { cleanAppStateForExport } from "../appState";
-import { IMAGE_MIME_TYPES, MIME_TYPES } from "../constants";
+import { ALLOWED_IMAGE_MIME_TYPES, MIME_TYPES } from "../constants";
 import { clearElementsForExport } from "../element";
 import { ExcalidrawElement, FileId } from "../element/types";
 import { CanvasError } from "../errors";
@@ -117,9 +117,11 @@ export const isImageFileHandle = (handle: FileSystemHandle | null) => {
 
 export const isSupportedImageFile = (
   blob: Blob | null | undefined,
-): blob is Blob & { type: ValueOf<typeof IMAGE_MIME_TYPES> } => {
+): blob is Blob & { type: typeof ALLOWED_IMAGE_MIME_TYPES[number] } => {
   const { type } = blob || {};
-  return !!type && (Object.values(IMAGE_MIME_TYPES) as string[]).includes(type);
+  return (
+    !!type && (ALLOWED_IMAGE_MIME_TYPES as readonly string[]).includes(type)
+  );
 };
 
 export const loadSceneOrLibraryFromBlob = async (
@@ -155,7 +157,7 @@ export const loadSceneOrLibraryFromBlob = async (
           },
           localAppState,
           localElements,
-          { repairBindings: true, refreshDimensions: false },
+          { repairBindings: true, refreshDimensions: true },
         ),
       };
     } else if (isValidLibrary(data)) {

src/data/filesystem.ts

@@ -8,7 +8,16 @@ import { EVENT, MIME_TYPES } from "../constants";
 import { AbortError } from "../errors";
 import { debounce } from "../utils";
 
-type FILE_EXTENSION = Exclude<keyof typeof MIME_TYPES, "binary">;
+type FILE_EXTENSION =
+  | "gif"
+  | "jpg"
+  | "png"
+  | "excalidraw.png"
+  | "svg"
+  | "excalidraw.svg"
+  | "json"
+  | "excalidraw"
+  | "excalidrawlib";
 
 const INPUT_CHANGE_INTERVAL_MS = 500;
 

src/data/library.ts

@@ -14,14 +14,7 @@ import { getCommonBoundingBox } from "../element/bounds";
 import { AbortError } from "../errors";
 import { t } from "../i18n";
 import { useEffect, useRef } from "react";
-import {
+import { URL_HASH_KEYS, URL_QUERY_KEYS, APP_NAME, EVENT } from "../constants";
-  URL_HASH_KEYS,
-  URL_QUERY_KEYS,
-  APP_NAME,
-  EVENT,
-  DEFAULT_SIDEBAR,
-  LIBRARY_SIDEBAR_TAB,
-} from "../constants";
 
 export const libraryItemsAtom = atom<{
   status: "loading" | "loaded";
@@ -155,9 +148,7 @@ class Library {
     defaultStatus?: "unpublished" | "published";
   }): Promise<LibraryItems> => {
     if (openLibraryMenu) {
-      this.app.setState({
+      this.app.setState({ openSidebar: "library" });
-        openSidebar: { name: DEFAULT_SIDEBAR.name, tab: LIBRARY_SIDEBAR_TAB },
-      });
     }
 
     return this.setLibrary(() => {
@@ -183,13 +174,6 @@ class Library {
               }),
             )
           ) {
-            if (prompt) {
-              // focus container if we've prompted. We focus conditionally
-              // lest `props.autoFocus` is disabled (in which case we should
-              // focus only on user action such as prompt confirm)
-              this.app.focusContainer();
-            }
-
             if (merge) {
               resolve(mergeLibraryItems(this.lastLibraryItems, nextItems));
             } else {
@@ -202,6 +186,8 @@ class Library {
           reject(error);
         }
       });
+    }).finally(() => {
+      this.app.focusContainer();
     });
   };
 

src/data/restore.ts

@@ -27,20 +27,15 @@ import {
   PRECEDING_ELEMENT_KEY,
   FONT_FAMILY,
   ROUNDNESS,
-  DEFAULT_SIDEBAR,
 } from "../constants";
 import { getDefaultAppState } from "../appState";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { bumpVersion } from "../element/mutateElement";
-import { getFontString, getUpdatedTimestamp, updateActiveTool } from "../utils";
+import { getUpdatedTimestamp, updateActiveTool } from "../utils";
 import { arrayToMap } from "../utils";
 import oc from "open-color";
 import { MarkOptional, Mutable } from "../utility-types";
-import {
+import { detectLineHeight, getDefaultLineHeight } from "../element/textElement";
-  detectLineHeight,
-  getDefaultLineHeight,
-  measureBaseline,
-} from "../element/textElement";
 
 type RestoredAppState = Omit<
   AppState,
@@ -176,24 +171,6 @@ const restoreElement = (
       }
       const text = element.text ?? "";
 
-      // line-height might not be specified either when creating elements
-      // programmatically, or when importing old diagrams.
-      // For the latter we want to detect the original line height which
-      // will likely differ from our per-font fixed line height we now use,
-      // to maintain backward compatibility.
-      const lineHeight =
-        element.lineHeight ||
-        (element.height
-          ? // detect line-height from current element height and font-size
-            detectLineHeight(element)
-          : // no element height likely means programmatic use, so default
-            // to a fixed line height
-            getDefaultLineHeight(element.fontFamily));
-      const baseline = measureBaseline(
-        element.text,
-        getFontString(element),
-        lineHeight,
-      );
       element = restoreElementWithProperties(element, {
         fontSize,
         fontFamily,
@@ -202,9 +179,19 @@ const restoreElement = (
         verticalAlign: element.verticalAlign || DEFAULT_VERTICAL_ALIGN,
         containerId: element.containerId ?? null,
         originalText: element.originalText || text,
-
+        // line-height might not be specified either when creating elements
-        lineHeight,
+        // programmatically, or when importing old diagrams.
-        baseline,
+        // For the latter we want to detect the original line height which
+        // will likely differ from our per-font fixed line height we now use,
+        // to maintain backward compatibility.
+        lineHeight:
+          element.lineHeight ||
+          (element.height
+            ? // detect line-height from current element height and font-size
+              detectLineHeight(element)
+            : // no element height likely means programmatic use, so default
+              // to a fixed line height
+              getDefaultLineHeight(element.fontFamily)),
       });
 
       if (refreshDimensions) {
@@ -370,9 +357,6 @@ export const restoreElements = (
   localElements: readonly ExcalidrawElement[] | null | undefined,
   opts?: { refreshDimensions?: boolean; repairBindings?: boolean } | undefined,
 ): ExcalidrawElement[] => {
-  // used to detect duplicate top-level element ids
-  const existingIds = new Set<string>();
-
   const localElementsMap = localElements ? arrayToMap(localElements) : null;
   const restoredElements = (elements || []).reduce((elements, element) => {
     // filtering out selection, which is legacy, no longer kept in elements,
@@ -387,10 +371,6 @@ export const restoreElements = (
         if (localElement && localElement.version > migratedElement.version) {
           migratedElement = bumpVersion(migratedElement, localElement.version);
         }
-        if (existingIds.has(migratedElement.id)) {
-          migratedElement = { ...migratedElement, id: randomId() };
-        }
-        existingIds.add(migratedElement.id);
         elements.push(migratedElement);
       }
     }
@@ -432,15 +412,21 @@ const LegacyAppStateMigrations: {
     defaultAppState: ReturnType<typeof getDefaultAppState>,
   ) => [LegacyAppState[K][1], AppState[LegacyAppState[K][1]]];
 } = {
-  isSidebarDocked: (appState, defaultAppState) => {
+  isLibraryOpen: (appState, defaultAppState) => {
     return [
-      "defaultSidebarDockedPreference",
+      "openSidebar",
-      appState.isSidebarDocked ??
+      "isLibraryOpen" in appState
-        coalesceAppStateValue(
+        ? appState.isLibraryOpen
-          "defaultSidebarDockedPreference",
+          ? "library"
-          appState,
+          : null
-          defaultAppState,
+        : coalesceAppStateValue("openSidebar", appState, defaultAppState),
-        ),
+    ];
+  },
+  isLibraryMenuDocked: (appState, defaultAppState) => {
+    return [
+      "isSidebarDocked",
+      appState.isLibraryMenuDocked ??
+        coalesceAppStateValue("isSidebarDocked", appState, defaultAppState),
     ];
   },
 };
@@ -512,10 +498,13 @@ export const restoreAppState = (
         : appState.zoom?.value
         ? appState.zoom
         : defaultAppState.zoom,
+    // when sidebar docked and user left it open in last session,
+    // keep it open. If not docked, keep it closed irrespective of last state.
     openSidebar:
-      // string (legacy)
+      nextAppState.openSidebar === "library"
-      typeof (appState.openSidebar as any as string) === "string"
+        ? nextAppState.isSidebarDocked
-        ? { name: DEFAULT_SIDEBAR.name }
+          ? "library"
+          : null
         : nextAppState.openSidebar,
   };
 };

src/data/types.ts

@@ -25,8 +25,10 @@ export interface ExportedDataState {
  * Don't consume on its own.
  */
 export type LegacyAppState = {
-  /** @deprecated #6213 TODO remove 23-06-01 */
+  /** @deprecated #5663 TODO remove 22-12-15 */
-  isSidebarDocked: [boolean, "defaultSidebarDockedPreference"];
+  isLibraryOpen: [boolean, "openSidebar"];
+  /** @deprecated #5663 TODO remove 22-12-15 */
+  isLibraryMenuDocked: [boolean, "isSidebarDocked"];
 };
 
 export interface ImportedDataState {

src/element/Hyperlink.tsx

@@ -1,4 +1,4 @@
-import { AppState, ExcalidrawProps, Point, UIAppState } from "../types";
+import { AppState, ExcalidrawProps, Point } from "../types";
 import {
   getShortcutKey,
   sceneCoordsToViewportCoords,
@@ -297,11 +297,10 @@ export const getContextMenuLabel = (
     : "labels.link.create";
   return label;
 };
-
 export const getLinkHandleFromCoords = (
   [x1, y1, x2, y2]: Bounds,
   angle: number,
-  appState: UIAppState,
+  appState: AppState,
 ): [x: number, y: number, width: number, height: number] => {
   const size = DEFAULT_LINK_SIZE;
   const linkWidth = size / appState.zoom.value;

src/element/bounds.ts

@@ -7,8 +7,8 @@ import {
   ExcalidrawTextElementWithContainer,
 } from "./types";
 import { distance2d, rotate } from "../math";
-import rough from "roughjs/bin/rough";
+import rough from "@excalidraw/roughjs/bin/rough";
-import { Drawable, Op } from "roughjs/bin/core";
+import { Drawable, Op } from "@excalidraw/roughjs/bin/core";
 import { Point } from "../types";
 import {
   getShapeForElement,

src/element/collision.ts

@@ -30,7 +30,7 @@ import {
 
 import { getElementAbsoluteCoords, getCurvePathOps, Bounds } from "./bounds";
 import { Point } from "../types";
-import { Drawable } from "roughjs/bin/core";
+import { Drawable } from "@excalidraw/roughjs/bin/core";
 import { AppState } from "../types";
 import { getShapeForElement } from "../renderer/renderElement";
 import { hasBoundTextElement, isImageElement } from "./typeChecks";

src/element/newElement.test.ts

@@ -1,9 +1,8 @@
-import { duplicateElement, duplicateElements } from "./newElement";
+import { duplicateElement } from "./newElement";
 import { mutateElement } from "./mutateElement";
 import { API } from "../tests/helpers/api";
 import { FONT_FAMILY, ROUNDNESS } from "../constants";
 import { isPrimitive } from "../utils";
-import { ExcalidrawLinearElement } from "./types";
 
 const assertCloneObjects = (source: any, clone: any) => {
   for (const key in clone) {
@@ -16,353 +15,79 @@ const assertCloneObjects = (source: any, clone: any) => {
   }
 };
 
-describe("duplicating single elements", () => {
+it("clones arrow element", () => {
-  it("clones arrow element", () => {
+  const element = API.createElement({
-    const element = API.createElement({
+    type: "arrow",
-      type: "arrow",
+    x: 0,
-      x: 0,
+    y: 0,
-      y: 0,
+    strokeColor: "#000000",
-      strokeColor: "#000000",
+    backgroundColor: "transparent",
-      backgroundColor: "transparent",
+    fillStyle: "hachure",
-      fillStyle: "hachure",
+    strokeWidth: 1,
-      strokeWidth: 1,
+    strokeStyle: "solid",
-      strokeStyle: "solid",
+    roundness: { type: ROUNDNESS.PROPORTIONAL_RADIUS },
-      roundness: { type: ROUNDNESS.PROPORTIONAL_RADIUS },
+    roughness: 1,
-      roughness: 1,
+    opacity: 100,
-      opacity: 100,
-    });
-
-    // @ts-ignore
-    element.__proto__ = { hello: "world" };
-
-    mutateElement(element, {
-      points: [
-        [1, 2],
-        [3, 4],
-      ],
-    });
-
-    const copy = duplicateElement(null, new Map(), element);
-
-    assertCloneObjects(element, copy);
-
-    // assert we clone the object's prototype
-    // @ts-ignore
-    expect(copy.__proto__).toEqual({ hello: "world" });
-    expect(copy.hasOwnProperty("hello")).toBe(false);
-
-    expect(copy.points).not.toBe(element.points);
-    expect(copy).not.toHaveProperty("shape");
-    expect(copy.id).not.toBe(element.id);
-    expect(typeof copy.id).toBe("string");
-    expect(copy.seed).not.toBe(element.seed);
-    expect(typeof copy.seed).toBe("number");
-    expect(copy).toEqual({
-      ...element,
-      id: copy.id,
-      seed: copy.seed,
-    });
   });
 
-  it("clones text element", () => {
+  // @ts-ignore
-    const element = API.createElement({
+  element.__proto__ = { hello: "world" };
-      type: "text",
-      x: 0,
-      y: 0,
-      strokeColor: "#000000",
-      backgroundColor: "transparent",
-      fillStyle: "hachure",
-      strokeWidth: 1,
-      strokeStyle: "solid",
-      roundness: null,
-      roughness: 1,
-      opacity: 100,
-      text: "hello",
-      fontSize: 20,
-      fontFamily: FONT_FAMILY.Virgil,
-      textAlign: "left",
-      verticalAlign: "top",
-    });
 
-    const copy = duplicateElement(null, new Map(), element);
+  mutateElement(element, {
+    points: [
+      [1, 2],
+      [3, 4],
+    ],
+  });
 
-    assertCloneObjects(element, copy);
+  const copy = duplicateElement(null, new Map(), element);
 
-    expect(copy).not.toHaveProperty("points");
+  assertCloneObjects(element, copy);
-    expect(copy).not.toHaveProperty("shape");
+
-    expect(copy.id).not.toBe(element.id);
+  // @ts-ignore
-    expect(typeof copy.id).toBe("string");
+  expect(copy.__proto__).toEqual({ hello: "world" });
-    expect(typeof copy.seed).toBe("number");
+  expect(copy.hasOwnProperty("hello")).toBe(false);
+
+  expect(copy.points).not.toBe(element.points);
+  expect(copy).not.toHaveProperty("shape");
+  expect(copy.id).not.toBe(element.id);
+  expect(typeof copy.id).toBe("string");
+  expect(copy.seed).not.toBe(element.seed);
+  expect(typeof copy.seed).toBe("number");
+  expect(copy).toEqual({
+    ...element,
+    id: copy.id,
+    seed: copy.seed,
   });
 });
 
-describe("duplicating multiple elements", () => {
+it("clones text element", () => {
-  it("duplicateElements should clone bindings", () => {
+  const element = API.createElement({
-    const rectangle1 = API.createElement({
+    type: "text",
-      type: "rectangle",
+    x: 0,
-      id: "rectangle1",
+    y: 0,
-      boundElements: [
+    strokeColor: "#000000",
-        { id: "arrow1", type: "arrow" },
+    backgroundColor: "transparent",
-        { id: "arrow2", type: "arrow" },
+    fillStyle: "hachure",
-        { id: "text1", type: "text" },
+    strokeWidth: 1,
-      ],
+    strokeStyle: "solid",
-    });
+    roundness: null,
-
+    roughness: 1,
-    const text1 = API.createElement({
+    opacity: 100,
-      type: "text",
+    text: "hello",
-      id: "text1",
+    fontSize: 20,
-      containerId: "rectangle1",
+    fontFamily: FONT_FAMILY.Virgil,
-    });
+    textAlign: "left",
-
+    verticalAlign: "top",
-    const arrow1 = API.createElement({
-      type: "arrow",
-      id: "arrow1",
-      startBinding: {
-        elementId: "rectangle1",
-        focus: 0.2,
-        gap: 7,
-      },
-    });
-
-    const arrow2 = API.createElement({
-      type: "arrow",
-      id: "arrow2",
-      endBinding: {
-        elementId: "rectangle1",
-        focus: 0.2,
-        gap: 7,
-      },
-      boundElements: [{ id: "text2", type: "text" }],
-    });
-
-    const text2 = API.createElement({
-      type: "text",
-      id: "text2",
-      containerId: "arrow2",
-    });
-
-    // -------------------------------------------------------------------------
-
-    const origElements = [rectangle1, text1, arrow1, arrow2, text2] as const;
-    const clonedElements = duplicateElements(origElements);
-
-    // generic id in-equality checks
-    // --------------------------------------------------------------------------
-    expect(origElements.map((e) => e.type)).toEqual(
-      clonedElements.map((e) => e.type),
-    );
-    origElements.forEach((origElement, idx) => {
-      const clonedElement = clonedElements[idx];
-      expect(origElement).toEqual(
-        expect.objectContaining({
-          id: expect.not.stringMatching(clonedElement.id),
-          type: clonedElement.type,
-        }),
-      );
-      if ("containerId" in origElement) {
-        expect(origElement.containerId).not.toBe(
-          (clonedElement as any).containerId,
-        );
-      }
-      if ("endBinding" in origElement) {
-        if (origElement.endBinding) {
-          expect(origElement.endBinding.elementId).not.toBe(
-            (clonedElement as any).endBinding?.elementId,
-          );
-        } else {
-          expect((clonedElement as any).endBinding).toBeNull();
-        }
-      }
-      if ("startBinding" in origElement) {
-        if (origElement.startBinding) {
-          expect(origElement.startBinding.elementId).not.toBe(
-            (clonedElement as any).startBinding?.elementId,
-          );
-        } else {
-          expect((clonedElement as any).startBinding).toBeNull();
-        }
-      }
-    });
-    // --------------------------------------------------------------------------
-
-    const clonedArrows = clonedElements.filter(
-      (e) => e.type === "arrow",
-    ) as ExcalidrawLinearElement[];
-
-    const [clonedRectangle, clonedText1, , clonedArrow2, clonedArrowLabel] =
-      clonedElements as any as typeof origElements;
-
-    expect(clonedText1.containerId).toBe(clonedRectangle.id);
-    expect(
-      clonedRectangle.boundElements!.find((e) => e.id === clonedText1.id),
-    ).toEqual(
-      expect.objectContaining({
-        id: clonedText1.id,
-        type: clonedText1.type,
-      }),
-    );
-
-    clonedArrows.forEach((arrow) => {
-      // console.log(arrow);
-      expect(
-        clonedRectangle.boundElements!.find((e) => e.id === arrow.id),
-      ).toEqual(
-        expect.objectContaining({
-          id: arrow.id,
-          type: arrow.type,
-        }),
-      );
-
-      if (arrow.endBinding) {
-        expect(arrow.endBinding.elementId).toBe(clonedRectangle.id);
-      }
-      if (arrow.startBinding) {
-        expect(arrow.startBinding.elementId).toBe(clonedRectangle.id);
-      }
-    });
-
-    expect(clonedArrow2.boundElements).toEqual([
-      { type: "text", id: clonedArrowLabel.id },
-    ]);
-    expect(clonedArrowLabel.containerId).toBe(clonedArrow2.id);
   });
 
-  it("should remove id references of elements that aren't found", () => {
+  const copy = duplicateElement(null, new Map(), element);
-    const rectangle1 = API.createElement({
-      type: "rectangle",
-      id: "rectangle1",
-      boundElements: [
-        // should keep
-        { id: "arrow1", type: "arrow" },
-        // should drop
-        { id: "arrow-not-exists", type: "arrow" },
-        // should drop
-        { id: "text-not-exists", type: "text" },
-      ],
-    });
 
-    const arrow1 = API.createElement({
+  assertCloneObjects(element, copy);
-      type: "arrow",
-      id: "arrow1",
-      startBinding: {
-        elementId: "rectangle1",
-        focus: 0.2,
-        gap: 7,
-      },
-    });
 
-    const text1 = API.createElement({
+  expect(copy).not.toHaveProperty("points");
-      type: "text",
+  expect(copy).not.toHaveProperty("shape");
-      id: "text1",
+  expect(copy.id).not.toBe(element.id);
-      containerId: "rectangle-not-exists",
+  expect(typeof copy.id).toBe("string");
-    });
+  expect(typeof copy.seed).toBe("number");
-
-    const arrow2 = API.createElement({
-      type: "arrow",
-      id: "arrow2",
-      startBinding: {
-        elementId: "rectangle1",
-        focus: 0.2,
-        gap: 7,
-      },
-      endBinding: {
-        elementId: "rectangle-not-exists",
-        focus: 0.2,
-        gap: 7,
-      },
-    });
-
-    const arrow3 = API.createElement({
-      type: "arrow",
-      id: "arrow2",
-      startBinding: {
-        elementId: "rectangle-not-exists",
-        focus: 0.2,
-        gap: 7,
-      },
-      endBinding: {
-        elementId: "rectangle1",
-        focus: 0.2,
-        gap: 7,
-      },
-    });
-
-    // -------------------------------------------------------------------------
-
-    const origElements = [rectangle1, text1, arrow1, arrow2, arrow3] as const;
-    const clonedElements = duplicateElements(
-      origElements,
-    ) as any as typeof origElements;
-    const [
-      clonedRectangle,
-      clonedText1,
-      clonedArrow1,
-      clonedArrow2,
-      clonedArrow3,
-    ] = clonedElements;
-
-    expect(clonedRectangle.boundElements).toEqual([
-      { id: clonedArrow1.id, type: "arrow" },
-    ]);
-
-    expect(clonedText1.containerId).toBe(null);
-
-    expect(clonedArrow2.startBinding).toEqual({
-      ...arrow2.startBinding,
-      elementId: clonedRectangle.id,
-    });
-    expect(clonedArrow2.endBinding).toBe(null);
-
-    expect(clonedArrow3.startBinding).toBe(null);
-    expect(clonedArrow3.endBinding).toEqual({
-      ...arrow3.endBinding,
-      elementId: clonedRectangle.id,
-    });
-  });
-
-  describe("should duplicate all group ids", () => {
-    it("should regenerate all group ids and keep them consistent across elements", () => {
-      const rectangle1 = API.createElement({
-        type: "rectangle",
-        groupIds: ["g1"],
-      });
-      const rectangle2 = API.createElement({
-        type: "rectangle",
-        groupIds: ["g2", "g1"],
-      });
-      const rectangle3 = API.createElement({
-        type: "rectangle",
-        groupIds: ["g2", "g1"],
-      });
-
-      const origElements = [rectangle1, rectangle2, rectangle3] as const;
-      const clonedElements = duplicateElements(
-        origElements,
-      ) as any as typeof origElements;
-      const [clonedRectangle1, clonedRectangle2, clonedRectangle3] =
-        clonedElements;
-
-      expect(rectangle1.groupIds[0]).not.toBe(clonedRectangle1.groupIds[0]);
-      expect(rectangle2.groupIds[0]).not.toBe(clonedRectangle2.groupIds[0]);
-      expect(rectangle2.groupIds[1]).not.toBe(clonedRectangle2.groupIds[1]);
-
-      expect(clonedRectangle1.groupIds[0]).toBe(clonedRectangle2.groupIds[1]);
-      expect(clonedRectangle2.groupIds[0]).toBe(clonedRectangle3.groupIds[0]);
-      expect(clonedRectangle2.groupIds[1]).toBe(clonedRectangle3.groupIds[1]);
-    });
-
-    it("should keep and regenerate ids of groups even if invalid", () => {
-      // lone element shouldn't be able to be grouped with itself,
-      // but hard to check against in a performant way so we ignore it
-      const rectangle1 = API.createElement({
-        type: "rectangle",
-        groupIds: ["g1"],
-      });
-
-      const [clonedRectangle1] = duplicateElements([rectangle1]);
-
-      expect(typeof clonedRectangle1.groupIds[0]).toBe("string");
-      expect(rectangle1.groupIds[0]).not.toBe(clonedRectangle1.groupIds[0]);
-    });
-  });
 });

src/element/newElement.ts

@@ -13,14 +13,9 @@ import {
   FontFamilyValues,
   ExcalidrawTextContainer,
 } from "../element/types";
-import {
+import { getFontString, getUpdatedTimestamp, isTestEnv } from "../utils";
-  arrayToMap,
-  getFontString,
-  getUpdatedTimestamp,
-  isTestEnv,
-} from "../utils";
 import { randomInteger, randomId } from "../random";
-import { bumpVersion, mutateElement, newElementWith } from "./mutateElement";
+import { mutateElement, newElementWith } from "./mutateElement";
 import { getNewGroupIdsForDuplication } from "../groups";
 import { AppState } from "../types";
 import { getElementAbsoluteCoords } from ".";
@@ -33,17 +28,10 @@ import {
   measureText,
   normalizeText,
   wrapText,
-  getBoundTextMaxWidth,
+  getMaxContainerWidth,
   getDefaultLineHeight,
 } from "./textElement";
-import {
+import { VERTICAL_ALIGN } from "../constants";
-  DEFAULT_ELEMENT_PROPS,
-  DEFAULT_FONT_FAMILY,
-  DEFAULT_FONT_SIZE,
-  DEFAULT_TEXT_ALIGN,
-  DEFAULT_VERTICAL_ALIGN,
-  VERTICAL_ALIGN,
-} from "../constants";
 import { isArrowElement } from "./typeChecks";
 import { MarkOptional, Merge, Mutable } from "../utility-types";
 
@@ -58,15 +46,6 @@ type ElementConstructorOpts = MarkOptional<
   | "version"
   | "versionNonce"
   | "link"
-  | "strokeStyle"
-  | "fillStyle"
-  | "strokeColor"
-  | "backgroundColor"
-  | "roughness"
-  | "strokeWidth"
-  | "roundness"
-  | "locked"
-  | "opacity"
 >;
 
 const _newElementBase = <T extends ExcalidrawElement>(
@@ -74,13 +53,13 @@ const _newElementBase = <T extends ExcalidrawElement>(
   {
     x,
     y,
-    strokeColor = DEFAULT_ELEMENT_PROPS.strokeColor,
+    strokeColor,
-    backgroundColor = DEFAULT_ELEMENT_PROPS.backgroundColor,
+    backgroundColor,
-    fillStyle = DEFAULT_ELEMENT_PROPS.fillStyle,
+    fillStyle,
-    strokeWidth = DEFAULT_ELEMENT_PROPS.strokeWidth,
+    strokeWidth,
-    strokeStyle = DEFAULT_ELEMENT_PROPS.strokeStyle,
+    strokeStyle,
-    roughness = DEFAULT_ELEMENT_PROPS.roughness,
+    roughness,
-    opacity = DEFAULT_ELEMENT_PROPS.opacity,
+    opacity,
     width = 0,
     height = 0,
     angle = 0,
@@ -88,7 +67,7 @@ const _newElementBase = <T extends ExcalidrawElement>(
     roundness = null,
     boundElements = null,
     link = null,
-    locked = DEFAULT_ELEMENT_PROPS.locked,
+    locked,
     ...rest
   }: ElementConstructorOpts & Omit<Partial<ExcalidrawGenericElement>, "type">,
 ) => {
@@ -154,44 +133,30 @@ const getTextElementPositionOffsets = (
 export const newTextElement = (
   opts: {
     text: string;
-    fontSize?: number;
+    fontSize: number;
-    fontFamily?: FontFamilyValues;
+    fontFamily: FontFamilyValues;
-    textAlign?: TextAlign;
+    textAlign: TextAlign;
-    verticalAlign?: VerticalAlign;
+    verticalAlign: VerticalAlign;
     containerId?: ExcalidrawTextContainer["id"];
     lineHeight?: ExcalidrawTextElement["lineHeight"];
-    strokeWidth?: ExcalidrawTextElement["strokeWidth"];
   } & ElementConstructorOpts,
 ): NonDeleted<ExcalidrawTextElement> => {
-  const fontFamily = opts.fontFamily || DEFAULT_FONT_FAMILY;
+  const lineHeight = opts.lineHeight || getDefaultLineHeight(opts.fontFamily);
-  const fontSize = opts.fontSize || DEFAULT_FONT_SIZE;
-  const lineHeight = opts.lineHeight || getDefaultLineHeight(fontFamily);
   const text = normalizeText(opts.text);
-  const metrics = measureText(
+  const metrics = measureText(text, getFontString(opts), lineHeight);
-    text,
+  const offsets = getTextElementPositionOffsets(opts, metrics);
-    getFontString({ fontFamily, fontSize }),
-    lineHeight,
-  );
-  const textAlign = opts.textAlign || DEFAULT_TEXT_ALIGN;
-  const verticalAlign = opts.verticalAlign || DEFAULT_VERTICAL_ALIGN;
-  const offsets = getTextElementPositionOffsets(
-    { textAlign, verticalAlign },
-    metrics,
-  );
-
   const textElement = newElementWith(
     {
       ..._newElementBase<ExcalidrawTextElement>("text", opts),
       text,
-      fontSize,
+      fontSize: opts.fontSize,
-      fontFamily,
+      fontFamily: opts.fontFamily,
-      textAlign,
+      textAlign: opts.textAlign,
-      verticalAlign,
+      verticalAlign: opts.verticalAlign,
       x: opts.x - offsets.x,
       y: opts.y - offsets.y,
       width: metrics.width,
       height: metrics.height,
-      baseline: metrics.baseline,
       containerId: opts.containerId || null,
       originalText: text,
       lineHeight,
@@ -209,15 +174,14 @@ const getAdjustedDimensions = (
   y: number;
   width: number;
   height: number;
-  baseline: number;
 } => {
   const container = getContainerElement(element);
 
-  const {
+  const { width: nextWidth, height: nextHeight } = measureText(
-    width: nextWidth,
+    nextText,
-    height: nextHeight,
+    getFontString(element),
-    baseline: nextBaseline,
+    element.lineHeight,
-  } = measureText(nextText, getFontString(element), element.lineHeight);
+  );
   const { textAlign, verticalAlign } = element;
   let x: number;
   let y: number;
@@ -292,7 +256,6 @@ const getAdjustedDimensions = (
   return {
     width: nextWidth,
     height: nextHeight,
-    baseline: nextBaseline,
     x: Number.isFinite(x) ? x : element.x,
     y: Number.isFinite(y) ? y : element.y,
   };
@@ -302,15 +265,12 @@ export const refreshTextDimensions = (
   textElement: ExcalidrawTextElement,
   text = textElement.text,
 ) => {
-  if (textElement.isDeleted) {
-    return;
-  }
   const container = getContainerElement(textElement);
   if (container) {
     text = wrapText(
       text,
       getFontString(textElement),
-      getBoundTextMaxWidth(container),
+      getMaxContainerWidth(container),
     );
   }
   const dimensions = getAdjustedDimensions(textElement, text);
@@ -390,24 +350,16 @@ export const newImageElement = (
   };
 };
 
-// Simplified deep clone for the purpose of cloning ExcalidrawElement.
+// Simplified deep clone for the purpose of cloning ExcalidrawElement only
-//
+// (doesn't clone Date, RegExp, Map, Set, Typed arrays etc.)
-// Only clones plain objects and arrays. Doesn't clone Date, RegExp, Map, Set,
-// Typed arrays and other non-null objects.
 //
 // Adapted from https://github.com/lukeed/klona
-//
+export const deepCopyElement = (val: any, depth: number = 0) => {
-// The reason for `deepCopyElement()` wrapper is type safety (only allow
-// passing ExcalidrawElement as the top-level argument).
-const _deepCopyElement = (val: any, depth: number = 0) => {
-  // only clone non-primitives
   if (val == null || typeof val !== "object") {
     return val;
   }
 
-  const objectType = Object.prototype.toString.call(val);
+  if (Object.prototype.toString.call(val) === "[object Object]") {
-
-  if (objectType === "[object Object]") {
     const tmp =
       typeof val.constructor === "function"
         ? Object.create(Object.getPrototypeOf(val))
@@ -419,7 +371,7 @@ const _deepCopyElement = (val: any, depth: number = 0) => {
         if (depth === 0 && (key === "shape" || key === "canvas")) {
           continue;
         }
-        tmp[key] = _deepCopyElement(val[key], depth + 1);
+        tmp[key] = deepCopyElement(val[key], depth + 1);
       }
     }
     return tmp;
@@ -429,67 +381,14 @@ const _deepCopyElement = (val: any, depth: number = 0) => {
     let k = val.length;
     const arr = new Array(k);
     while (k--) {
-      arr[k] = _deepCopyElement(val[k], depth + 1);
+      arr[k] = deepCopyElement(val[k], depth + 1);
     }
     return arr;
   }
 
-  // we're not cloning non-array & non-plain-object objects because we
-  // don't support them on excalidraw elements yet. If we do, we need to make
-  // sure we start cloning them, so let's warn about it.
-  if (process.env.NODE_ENV === "development") {
-    if (
-      objectType !== "[object Object]" &&
-      objectType !== "[object Array]" &&
-      objectType.startsWith("[object ")
-    ) {
-      console.warn(
-        `_deepCloneElement: unexpected object type ${objectType}. This value will not be cloned!`,
-      );
-    }
-  }
-
   return val;
 };
 
-/**
- * Clones ExcalidrawElement data structure. Does not regenerate id, nonce, or
- * any value. The purpose is to to break object references for immutability
- * reasons, whenever we want to keep the original element, but ensure it's not
- * mutated.
- *
- * Only clones plain objects and arrays. Doesn't clone Date, RegExp, Map, Set,
- * Typed arrays and other non-null objects.
- */
-export const deepCopyElement = <T extends ExcalidrawElement>(
-  val: T,
-): Mutable<T> => {
-  return _deepCopyElement(val);
-};
-
-/**
- * utility wrapper to generate new id. In test env it reuses the old + postfix
- * for test assertions.
- */
-const regenerateId = (
-  /** supply null if no previous id exists */
-  previousId: string | null,
-) => {
-  if (isTestEnv() && previousId) {
-    let nextId = `${previousId}_copy`;
-    // `window.h` may not be defined in some unit tests
-    if (
-      window.h?.app
-        ?.getSceneElementsIncludingDeleted()
-        .find((el) => el.id === nextId)
-    ) {
-      nextId += "_copy";
-    }
-    return nextId;
-  }
-  return randomId();
-};
-
 /**
  * Duplicate an element, often used in the alt-drag operation.
  * Note that this method has gotten a bit complicated since the
@@ -504,15 +403,27 @@ const regenerateId = (
  * @param element Element to duplicate
  * @param overrides Any element properties to override
  */
-export const duplicateElement = <TElement extends ExcalidrawElement>(
+export const duplicateElement = <TElement extends Mutable<ExcalidrawElement>>(
   editingGroupId: AppState["editingGroupId"],
   groupIdMapForOperation: Map<GroupId, GroupId>,
   element: TElement,
   overrides?: Partial<TElement>,
-): Readonly<TElement> => {
+): TElement => {
-  let copy = deepCopyElement(element);
+  let copy: TElement = deepCopyElement(element);
 
-  copy.id = regenerateId(copy.id);
+  if (isTestEnv()) {
+    copy.id = `${copy.id}_copy`;
+    // `window.h` may not be defined in some unit tests
+    if (
+      window.h?.app
+        ?.getSceneElementsIncludingDeleted()
+        .find((el) => el.id === copy.id)
+    ) {
+      copy.id += "_copy";
+    }
+  } else {
+    copy.id = randomId();
+  }
   copy.boundElements = null;
   copy.updated = getUpdatedTimestamp();
   copy.seed = randomInteger();
@@ -521,7 +432,7 @@ export const duplicateElement = <TElement extends ExcalidrawElement>(
     editingGroupId,
     (groupId) => {
       if (!groupIdMapForOperation.has(groupId)) {
-        groupIdMapForOperation.set(groupId, regenerateId(groupId));
+        groupIdMapForOperation.set(groupId, randomId());
       }
       return groupIdMapForOperation.get(groupId)!;
     },
@@ -531,115 +442,3 @@ export const duplicateElement = <TElement extends ExcalidrawElement>(
   }
   return copy;
 };
-
-/**
- * Clones elements, regenerating their ids (including bindings) and group ids.
- *
- * If bindings don't exist in the elements array, they are removed. Therefore,
- * it's advised to supply the whole elements array, or sets of elements that
- * are encapsulated (such as library items), if the purpose is to retain
- * bindings to the cloned elements intact.
- *
- * NOTE by default does not randomize or regenerate anything except the id.
- */
-export const duplicateElements = (
-  elements: readonly ExcalidrawElement[],
-  opts?: {
-    /** NOTE also updates version flags and `updated` */
-    randomizeSeed: boolean;
-  },
-) => {
-  const clonedElements: ExcalidrawElement[] = [];
-
-  const origElementsMap = arrayToMap(elements);
-
-  // used for for migrating old ids to new ids
-  const elementNewIdsMap = new Map<
-    /* orig */ ExcalidrawElement["id"],
-    /* new */ ExcalidrawElement["id"]
-  >();
-
-  const maybeGetNewId = (id: ExcalidrawElement["id"]) => {
-    // if we've already migrated the element id, return the new one directly
-    if (elementNewIdsMap.has(id)) {
-      return elementNewIdsMap.get(id)!;
-    }
-    // if we haven't migrated the element id, but an old element with the same
-    // id exists, generate a new id for it and return it
-    if (origElementsMap.has(id)) {
-      const newId = regenerateId(id);
-      elementNewIdsMap.set(id, newId);
-      return newId;
-    }
-    // if old element doesn't exist, return null to mark it for removal
-    return null;
-  };
-
-  const groupNewIdsMap = new Map</* orig */ GroupId, /* new */ GroupId>();
-
-  for (const element of elements) {
-    const clonedElement: Mutable<ExcalidrawElement> = _deepCopyElement(element);
-
-    clonedElement.id = maybeGetNewId(element.id)!;
-
-    if (opts?.randomizeSeed) {
-      clonedElement.seed = randomInteger();
-      bumpVersion(clonedElement);
-    }
-
-    if (clonedElement.groupIds) {
-      clonedElement.groupIds = clonedElement.groupIds.map((groupId) => {
-        if (!groupNewIdsMap.has(groupId)) {
-          groupNewIdsMap.set(groupId, regenerateId(groupId));
-        }
-        return groupNewIdsMap.get(groupId)!;
-      });
-    }
-
-    if ("containerId" in clonedElement && clonedElement.containerId) {
-      const newContainerId = maybeGetNewId(clonedElement.containerId);
-      clonedElement.containerId = newContainerId;
-    }
-
-    if ("boundElements" in clonedElement && clonedElement.boundElements) {
-      clonedElement.boundElements = clonedElement.boundElements.reduce(
-        (
-          acc: Mutable<NonNullable<ExcalidrawElement["boundElements"]>>,
-          binding,
-        ) => {
-          const newBindingId = maybeGetNewId(binding.id);
-          if (newBindingId) {
-            acc.push({ ...binding, id: newBindingId });
-          }
-          return acc;
-        },
-        [],
-      );
-    }
-
-    if ("endBinding" in clonedElement && clonedElement.endBinding) {
-      const newEndBindingId = maybeGetNewId(clonedElement.endBinding.elementId);
-      clonedElement.endBinding = newEndBindingId
-        ? {
-            ...clonedElement.endBinding,
-            elementId: newEndBindingId,
-          }
-        : null;
-    }
-    if ("startBinding" in clonedElement && clonedElement.startBinding) {
-      const newEndBindingId = maybeGetNewId(
-        clonedElement.startBinding.elementId,
-      );
-      clonedElement.startBinding = newEndBindingId
-        ? {
-            ...clonedElement.startBinding,
-            elementId: newEndBindingId,
-          }
-        : null;
-    }
-
-    clonedElements.push(clonedElement);
-  }
-
-  return clonedElements;
-};

src/element/resizeElements.ts

@@ -44,10 +44,8 @@ import {
   getBoundTextElementId,
   getContainerElement,
   handleBindTextResize,
-  getBoundTextMaxWidth,
+  getMaxContainerWidth,
   getApproxMinLineHeight,
-  measureText,
-  getBoundTextMaxHeight,
 } from "./textElement";
 
 export const normalizeAngle = (angle: number): number => {
@@ -195,8 +193,7 @@ const MIN_FONT_SIZE = 1;
 const measureFontSizeFromWidth = (
   element: NonDeleted<ExcalidrawTextElement>,
   nextWidth: number,
-  nextHeight: number,
+): number | null => {
-): { size: number; baseline: number } | null => {
   // We only use width to scale font on resize
   let width = element.width;
 
@@ -204,22 +201,15 @@ const measureFontSizeFromWidth = (
   if (hasContainer) {
     const container = getContainerElement(element);
     if (container) {
-      width = getBoundTextMaxWidth(container);
+      width = getMaxContainerWidth(container);
     }
   }
   const nextFontSize = element.fontSize * (nextWidth / width);
   if (nextFontSize < MIN_FONT_SIZE) {
     return null;
   }
-  const metrics = measureText(
+
-    element.text,
+  return nextFontSize;
-    getFontString({ fontSize: nextFontSize, fontFamily: element.fontFamily }),
-    element.lineHeight,
-  );
-  return {
-    size: nextFontSize,
-    baseline: metrics.baseline + (nextHeight - metrics.height),
-  };
 };
 
 const getSidesForTransformHandle = (
@@ -290,8 +280,8 @@ const resizeSingleTextElement = (
   if (scale > 0) {
     const nextWidth = element.width * scale;
     const nextHeight = element.height * scale;
-    const metrics = measureFontSizeFromWidth(element, nextWidth, nextHeight);
+    const nextFontSize = measureFontSizeFromWidth(element, nextWidth);
-    if (metrics === null) {
+    if (nextFontSize === null) {
       return;
     }
     const [nextX1, nextY1, nextX2, nextY2] = getResizedElementAbsoluteCoords(
@@ -315,10 +305,9 @@ const resizeSingleTextElement = (
       deltaY2,
     );
     mutateElement(element, {
-      fontSize: metrics.size,
+      fontSize: nextFontSize,
       width: nextWidth,
       height: nextHeight,
-      baseline: metrics.baseline,
       x: nextElementX,
       y: nextElementY,
     });
@@ -371,7 +360,7 @@ export const resizeSingleElement = (
   let scaleX = atStartBoundsWidth / boundsCurrentWidth;
   let scaleY = atStartBoundsHeight / boundsCurrentHeight;
 
-  let boundTextFont: { fontSize?: number; baseline?: number } = {};
+  let boundTextFontSize: number | null = null;
   const boundTextElement = getBoundTextElement(element);
 
   if (transformHandleDirection.includes("e")) {
@@ -421,10 +410,7 @@ export const resizeSingleElement = (
       boundTextElement.id,
     ) as typeof boundTextElement | undefined;
     if (stateOfBoundTextElementAtResize) {
-      boundTextFont = {
+      boundTextFontSize = stateOfBoundTextElementAtResize.fontSize;
-        fontSize: stateOfBoundTextElementAtResize.fontSize,
-        baseline: stateOfBoundTextElementAtResize.baseline,
-      };
     }
     if (shouldMaintainAspectRatio) {
       const updatedElement = {
@@ -433,18 +419,14 @@ export const resizeSingleElement = (
         height: eleNewHeight,
       };
 
-      const nextFont = measureFontSizeFromWidth(
+      const nextFontSize = measureFontSizeFromWidth(
         boundTextElement,
-        getBoundTextMaxWidth(updatedElement),
+        getMaxContainerWidth(updatedElement),
-        getBoundTextMaxHeight(updatedElement, boundTextElement),
       );
-      if (nextFont === null) {
+      if (nextFontSize === null) {
         return;
       }
-      boundTextFont = {
+      boundTextFontSize = nextFontSize;
-        fontSize: nextFont.size,
-        baseline: nextFont.baseline,
-      };
     } else {
       const minWidth = getApproxMinLineWidth(
         getFontString(boundTextElement),
@@ -586,10 +568,9 @@ export const resizeSingleElement = (
     });
 
     mutateElement(element, resizedElement);
-    if (boundTextElement && boundTextFont != null) {
+    if (boundTextElement && boundTextFontSize != null) {
       mutateElement(boundTextElement, {
-        fontSize: boundTextFont.fontSize,
+        fontSize: boundTextFontSize,
-        baseline: boundTextFont.baseline,
       });
     }
     handleBindTextResize(element, transformHandleDirection);
@@ -696,7 +677,6 @@ const resizeMultipleElements = (
       y: number;
       points?: Point[];
       fontSize?: number;
-      baseline?: number;
     } = {
       width,
       height,
@@ -705,7 +685,7 @@ const resizeMultipleElements = (
       ...rescaledPoints,
     };
 
-    let boundTextUpdates: { fontSize: number; baseline: number } | null = null;
+    let boundTextUpdates: { fontSize: number } | null = null;
 
     const boundTextElement = getBoundTextElement(element.latest);
 
@@ -715,29 +695,24 @@ const resizeMultipleElements = (
         width,
         height,
       };
-      const metrics = measureFontSizeFromWidth(
+      const fontSize = measureFontSizeFromWidth(
         boundTextElement ?? (element.orig as ExcalidrawTextElement),
         boundTextElement
-          ? getBoundTextMaxWidth(updatedElement)
+          ? getMaxContainerWidth(updatedElement)
           : updatedElement.width,
-        boundTextElement
-          ? getBoundTextMaxHeight(updatedElement, boundTextElement)
-          : updatedElement.height,
       );
 
-      if (!metrics) {
+      if (!fontSize) {
         return;
       }
 
       if (isTextElement(element.orig)) {
-        update.fontSize = metrics.size;
+        update.fontSize = fontSize;
-        update.baseline = metrics.baseline;
       }
 
       if (boundTextElement) {
         boundTextUpdates = {
-          fontSize: metrics.size,
+          fontSize,
-          baseline: metrics.baseline,
         };
       }
     }

src/element/showSelectedShapeActions.ts

@@ -1,9 +1,9 @@
+import { AppState } from "../types";
 import { NonDeletedExcalidrawElement } from "./types";
 import { getSelectedElements } from "../scene";
-import { UIAppState } from "../types";
 
 export const showSelectedShapeActions = (
-  appState: UIAppState,
+  appState: AppState,
   elements: readonly NonDeletedExcalidrawElement[],
 ) =>
   Boolean(

src/element/textElement.test.ts

@@ -3,15 +3,14 @@ import { API } from "../tests/helpers/api";
 import {
   computeContainerDimensionForBoundText,
   getContainerCoords,
-  getBoundTextMaxWidth,
+  getMaxContainerWidth,
-  getBoundTextMaxHeight,
+  getMaxContainerHeight,
   wrapText,
   detectLineHeight,
   getLineHeightInPx,
   getDefaultLineHeight,
-  parseTokens,
 } from "./textElement";
-import { ExcalidrawTextElementWithContainer, FontString } from "./types";
+import { FontString } from "./types";
 
 describe("Test wrapText", () => {
   const font = "20px Cascadia, width: Segoe UI Emoji" as FontString;
@@ -184,56 +183,6 @@ now`,
     expect(wrapText(text, font, -1)).toEqual(text);
     expect(wrapText(text, font, Infinity)).toEqual(text);
   });
-
-  it("should wrap the text correctly when text contains hyphen", () => {
-    let text =
-      "Wikipedia is hosted by Wikimedia- Foundation, a non-profit organization that also hosts a range-of other projects";
-    const res = wrapText(text, font, 110);
-    expect(res).toBe(
-      `Wikipedia \nis hosted \nby \nWikimedia-\nFoundation,\na non-\nprofit \norganizati\non that \nalso hosts\na range-of\nother \nprojects`,
-    );
-
-    text = "Hello thereusing-now";
-    expect(wrapText(text, font, 100)).toEqual("Hello \nthereusin\ng-now");
-  });
-});
-
-describe("Test parseTokens", () => {
-  it("should split into tokens correctly", () => {
-    let text = "Excalidraw is a virtual collaborative whiteboard";
-    expect(parseTokens(text)).toEqual([
-      "Excalidraw",
-      "is",
-      "a",
-      "virtual",
-      "collaborative",
-      "whiteboard",
-    ]);
-
-    text =
-      "Wikipedia is hosted by Wikimedia- Foundation, a non-profit organization that also hosts a range-of other projects";
-    expect(parseTokens(text)).toEqual([
-      "Wikipedia",
-      "is",
-      "hosted",
-      "by",
-      "Wikimedia-",
-      "",
-      "Foundation,",
-      "a",
-      "non-",
-      "profit",
-      "organization",
-      "that",
-      "also",
-      "hosts",
-      "a",
-      "range-",
-      "of",
-      "other",
-      "projects",
-    ]);
-  });
 });
 
 describe("Test measureText", () => {
@@ -311,7 +260,7 @@ describe("Test measureText", () => {
     });
   });
 
-  describe("Test getBoundTextMaxWidth", () => {
+  describe("Test getMaxContainerWidth", () => {
     const params = {
       width: 178,
       height: 194,
@@ -319,76 +268,39 @@ describe("Test measureText", () => {
 
     it("should return max width when container is rectangle", () => {
       const container = API.createElement({ type: "rectangle", ...params });
-      expect(getBoundTextMaxWidth(container)).toBe(168);
+      expect(getMaxContainerWidth(container)).toBe(168);
     });
 
     it("should return max width when container is ellipse", () => {
       const container = API.createElement({ type: "ellipse", ...params });
-      expect(getBoundTextMaxWidth(container)).toBe(116);
+      expect(getMaxContainerWidth(container)).toBe(116);
     });
 
     it("should return max width when container is diamond", () => {
       const container = API.createElement({ type: "diamond", ...params });
-      expect(getBoundTextMaxWidth(container)).toBe(79);
+      expect(getMaxContainerWidth(container)).toBe(79);
     });
   });
 
-  describe("Test getBoundTextMaxHeight", () => {
+  describe("Test getMaxContainerHeight", () => {
     const params = {
       width: 178,
       height: 194,
-      id: '"container-id',
     };
 
-    const boundTextElement = API.createElement({
-      type: "text",
-      id: "text-id",
-      x: 560.51171875,
-      y: 202.033203125,
-      width: 154,
-      height: 175,
-      fontSize: 20,
-      fontFamily: 1,
-      text: "Excalidraw is a\nvirtual \nopensource \nwhiteboard for \nsketching \nhand-drawn like\ndiagrams",
-      textAlign: "center",
-      verticalAlign: "middle",
-      containerId: params.id,
-    }) as ExcalidrawTextElementWithContainer;
-
     it("should return max height when container is rectangle", () => {
       const container = API.createElement({ type: "rectangle", ...params });
-      expect(getBoundTextMaxHeight(container, boundTextElement)).toBe(184);
+      expect(getMaxContainerHeight(container)).toBe(184);
     });
 
     it("should return max height when container is ellipse", () => {
       const container = API.createElement({ type: "ellipse", ...params });
-      expect(getBoundTextMaxHeight(container, boundTextElement)).toBe(127);
+      expect(getMaxContainerHeight(container)).toBe(127);
     });
 
     it("should return max height when container is diamond", () => {
       const container = API.createElement({ type: "diamond", ...params });
-      expect(getBoundTextMaxHeight(container, boundTextElement)).toBe(87);
+      expect(getMaxContainerHeight(container)).toBe(87);
-    });
-
-    it("should return max height when container is arrow", () => {
-      const container = API.createElement({
-        type: "arrow",
-        ...params,
-      });
-      expect(getBoundTextMaxHeight(container, boundTextElement)).toBe(194);
-    });
-
-    it("should return max height when container is arrow and height is less than threshold", () => {
-      const container = API.createElement({
-        type: "arrow",
-        ...params,
-        height: 70,
-        boundElements: [{ type: "text", id: "text-id" }],
-      });
-
-      expect(getBoundTextMaxHeight(container, boundTextElement)).toBe(
-        boundTextElement.height,
-      );
     });
   });
 });

src/element/textElement.ts

@@ -14,7 +14,6 @@ import {
   DEFAULT_FONT_FAMILY,
   DEFAULT_FONT_SIZE,
   FONT_FAMILY,
-  isSafari,
   TEXT_ALIGN,
   VERTICAL_ALIGN,
 } from "../constants";
@@ -59,13 +58,12 @@ export const redrawTextBoundingBox = (
     text: textElement.text,
     width: textElement.width,
     height: textElement.height,
-    baseline: textElement.baseline,
   };
 
   boundTextUpdates.text = textElement.text;
 
   if (container) {
-    maxWidth = getBoundTextMaxWidth(container);
+    maxWidth = getMaxContainerWidth(container);
     boundTextUpdates.text = wrapText(
       textElement.originalText,
       getFontString(textElement),
@@ -80,31 +78,37 @@ export const redrawTextBoundingBox = (
 
   boundTextUpdates.width = metrics.width;
   boundTextUpdates.height = metrics.height;
-  boundTextUpdates.baseline = metrics.baseline;
 
   if (container) {
-    const containerDims = getContainerDims(container);
+    if (isArrowElement(container)) {
-    const maxContainerHeight = getBoundTextMaxHeight(
+      const centerX = textElement.x + textElement.width / 2;
-      container,
+      const centerY = textElement.y + textElement.height / 2;
-      textElement as ExcalidrawTextElementWithContainer,
+      const diffWidth = metrics.width - textElement.width;
-    );
+      const diffHeight = metrics.height - textElement.height;
+      boundTextUpdates.x = centerY - (textElement.height + diffHeight) / 2;
+      boundTextUpdates.y = centerX - (textElement.width + diffWidth) / 2;
+    } else {
+      const containerDims = getContainerDims(container);
+      let maxContainerHeight = getMaxContainerHeight(container);
 
-    let nextHeight = containerDims.height;
+      let nextHeight = containerDims.height;
-    if (metrics.height > maxContainerHeight) {
+      if (metrics.height > maxContainerHeight) {
-      nextHeight = computeContainerDimensionForBoundText(
+        nextHeight = computeContainerDimensionForBoundText(
-        metrics.height,
+          metrics.height,
-        container.type,
+          container.type,
-      );
+        );
-      mutateElement(container, { height: nextHeight });
+        mutateElement(container, { height: nextHeight });
-      updateOriginalContainerCache(container.id, nextHeight);
+        maxContainerHeight = getMaxContainerHeight(container);
+        updateOriginalContainerCache(container.id, nextHeight);
+      }
+      const updatedTextElement = {
+        ...textElement,
+        ...boundTextUpdates,
+      } as ExcalidrawTextElementWithContainer;
+      const { x, y } = computeBoundTextPosition(container, updatedTextElement);
+      boundTextUpdates.x = x;
+      boundTextUpdates.y = y;
     }
-    const updatedTextElement = {
-      ...textElement,
-      ...boundTextUpdates,
-    } as ExcalidrawTextElementWithContainer;
-    const { x, y } = computeBoundTextPosition(container, updatedTextElement);
-    boundTextUpdates.x = x;
-    boundTextUpdates.y = y;
   }
 
   mutateElement(textElement, boundTextUpdates);
@@ -176,13 +180,9 @@ export const handleBindTextResize = (
     let nextHeight = textElement.height;
     let nextWidth = textElement.width;
     const containerDims = getContainerDims(container);
-    const maxWidth = getBoundTextMaxWidth(container);
+    const maxWidth = getMaxContainerWidth(container);
-    const maxHeight = getBoundTextMaxHeight(
+    const maxHeight = getMaxContainerHeight(container);
-      container,
-      textElement as ExcalidrawTextElementWithContainer,
-    );
     let containerHeight = containerDims.height;
-    let nextBaseLine = textElement.baseline;
     if (transformHandleType !== "n" && transformHandleType !== "s") {
       if (text) {
         text = wrapText(
@@ -191,14 +191,13 @@ export const handleBindTextResize = (
           maxWidth,
         );
       }
-      const metrics = measureText(
+      const dimensions = measureText(
         text,
         getFontString(textElement),
         textElement.lineHeight,
       );
-      nextHeight = metrics.height;
+      nextHeight = dimensions.height;
-      nextWidth = metrics.width;
+      nextWidth = dimensions.width;
-      nextBaseLine = metrics.baseline;
     }
     // increase height in case text element height exceeds
     if (nextHeight > maxHeight) {
@@ -226,7 +225,6 @@ export const handleBindTextResize = (
       text,
       width: nextWidth,
       height: nextHeight,
-      baseline: nextBaseLine,
     });
 
     if (!isArrowElement(container)) {
@@ -241,19 +239,13 @@ export const handleBindTextResize = (
   }
 };
 
-export const computeBoundTextPosition = (
+const computeBoundTextPosition = (
   container: ExcalidrawElement,
   boundTextElement: ExcalidrawTextElementWithContainer,
 ) => {
-  if (isArrowElement(container)) {
-    return LinearElementEditor.getBoundTextElementPosition(
-      container,
-      boundTextElement,
-    );
-  }
   const containerCoords = getContainerCoords(container);
-  const maxContainerHeight = getBoundTextMaxHeight(container, boundTextElement);
+  const maxContainerHeight = getMaxContainerHeight(container);
-  const maxContainerWidth = getBoundTextMaxWidth(container);
+  const maxContainerWidth = getMaxContainerWidth(container);
 
   let x;
   let y;
@@ -293,59 +285,8 @@ export const measureText = (
   const fontSize = parseFloat(font);
   const height = getTextHeight(text, fontSize, lineHeight);
   const width = getTextWidth(text, font);
-  const baseline = measureBaseline(text, font, lineHeight);
-  return { width, height, baseline };
-};
 
-export const measureBaseline = (
+  return { width, height };
-  text: string,
-  font: FontString,
-  lineHeight: ExcalidrawTextElement["lineHeight"],
-  wrapInContainer?: boolean,
-) => {
-  const container = document.createElement("div");
-  container.style.position = "absolute";
-  container.style.whiteSpace = "pre";
-  container.style.font = font;
-  container.style.minHeight = "1em";
-  if (wrapInContainer) {
-    container.style.overflow = "hidden";
-    container.style.wordBreak = "break-word";
-    container.style.whiteSpace = "pre-wrap";
-  }
-
-  container.style.lineHeight = String(lineHeight);
-
-  container.innerText = text;
-
-  // Baseline is important for positioning text on canvas
-  document.body.appendChild(container);
-
-  const span = document.createElement("span");
-  span.style.display = "inline-block";
-  span.style.overflow = "hidden";
-  span.style.width = "1px";
-  span.style.height = "1px";
-  container.appendChild(span);
-  let baseline = span.offsetTop + span.offsetHeight;
-  const height = container.offsetHeight;
-
-  if (isSafari) {
-    const canvasHeight = getTextHeight(text, parseFloat(font), lineHeight);
-    const fontSize = parseFloat(font);
-    // In Safari the font size gets rounded off when rendering hence calculating the safari height and shifting the baseline if it differs
-    // from the actual canvas height
-    const domHeight = getTextHeight(text, Math.round(fontSize), lineHeight);
-    if (canvasHeight > height) {
-      baseline += canvasHeight - domHeight;
-    }
-
-    if (height > canvasHeight) {
-      baseline -= domHeight - canvasHeight;
-    }
-  }
-  document.body.removeChild(container);
-  return baseline;
 };
 
 /**
@@ -415,24 +356,6 @@ export const getTextHeight = (
   return getLineHeightInPx(fontSize, lineHeight) * lineCount;
 };
 
-export const parseTokens = (text: string) => {
-  // Splitting words containing "-" as those are treated as separate words
-  // by css wrapping algorithm eg non-profit => non-, profit
-  const words = text.split("-");
-  if (words.length > 1) {
-    // non-proft org => ['non-', 'profit org']
-    words.forEach((word, index) => {
-      if (index !== words.length - 1) {
-        words[index] = word += "-";
-      }
-    });
-  }
-  // Joining the words with space and splitting them again with space to get the
-  // final list of tokens
-  // ['non-', 'profit org'] =>,'non- proft org' => ['non-','profit','org']
-  return words.join(" ").split(" ");
-};
-
 export const wrapText = (text: string, font: FontString, maxWidth: number) => {
   // if maxWidth is not finite or NaN which can happen in case of bugs in
   // computation, we need to make sure we don't continue as we'll end up
@@ -458,16 +381,17 @@ export const wrapText = (text: string, font: FontString, maxWidth: number) => {
     currentLine = "";
     currentLineWidthTillNow = 0;
   };
+
   originalLines.forEach((originalLine) => {
     const currentLineWidth = getTextWidth(originalLine, font);
 
-    // Push the line if its <= maxWidth
+    //Push the line if its <= maxWidth
     if (currentLineWidth <= maxWidth) {
       lines.push(originalLine);
       return; // continue
     }
+    const words = originalLine.split(" ");
 
-    const words = parseTokens(originalLine);
     resetParams();
 
     let index = 0;
@@ -485,7 +409,6 @@ export const wrapText = (text: string, font: FontString, maxWidth: number) => {
       else if (currentWordWidth > maxWidth) {
         // push current line since the current word exceeds the max width
         // so will be appended in next line
-
         push(currentLine);
 
         resetParams();
@@ -506,15 +429,15 @@ export const wrapText = (text: string, font: FontString, maxWidth: number) => {
             currentLine += currentChar;
           }
         }
+
         // push current line if appending space exceeds max width
         if (currentLineWidthTillNow + spaceWidth >= maxWidth) {
           push(currentLine);
           resetParams();
+        } else {
           // space needs to be appended before next word
           // as currentLine contains chars which couldn't be appended
-          // to previous line unless the line ends with hyphen to sync
+          // to previous line
-          // with css word-wrap
-        } else if (!currentLine.endsWith("-")) {
           currentLine += " ";
           currentLineWidthTillNow += spaceWidth;
         }
@@ -532,23 +455,12 @@ export const wrapText = (text: string, font: FontString, maxWidth: number) => {
             break;
           }
           index++;
-
+          currentLine += `${word} `;
-          // if word ends with "-" then we don't need to add space
-          // to sync with css word-wrap
-          const shouldAppendSpace = !word.endsWith("-");
-          currentLine += word;
-
-          if (shouldAppendSpace) {
-            currentLine += " ";
-          }
 
           // Push the word if appending space exceeds max width
           if (currentLineWidthTillNow + spaceWidth >= maxWidth) {
-            if (shouldAppendSpace) {
+            const word = currentLine.slice(0, -1);
-              lines.push(currentLine.slice(0, -1));
+            push(word);
-            } else {
-              lines.push(currentLine);
-            }
             resetParams();
             break;
           }
@@ -886,10 +798,18 @@ export const computeContainerDimensionForBoundText = (
   return dimension + padding;
 };
 
-export const getBoundTextMaxWidth = (container: ExcalidrawElement) => {
+export const getMaxContainerWidth = (container: ExcalidrawElement) => {
   const width = getContainerDims(container).width;
   if (isArrowElement(container)) {
-    return width - BOUND_TEXT_PADDING * 8 * 2;
+    const containerWidth = width - BOUND_TEXT_PADDING * 8 * 2;
+    if (containerWidth <= 0) {
+      const boundText = getBoundTextElement(container);
+      if (boundText) {
+        return boundText.width;
+      }
+      return BOUND_TEXT_PADDING * 8 * 2;
+    }
+    return containerWidth;
   }
 
   if (container.type === "ellipse") {
@@ -906,15 +826,16 @@ export const getBoundTextMaxWidth = (container: ExcalidrawElement) => {
   return width - BOUND_TEXT_PADDING * 2;
 };
 
-export const getBoundTextMaxHeight = (
+export const getMaxContainerHeight = (container: ExcalidrawElement) => {
-  container: ExcalidrawElement,
-  boundTextElement: ExcalidrawTextElementWithContainer,
-) => {
   const height = getContainerDims(container).height;
   if (isArrowElement(container)) {
     const containerHeight = height - BOUND_TEXT_PADDING * 8 * 2;
     if (containerHeight <= 0) {
-      return boundTextElement.height;
+      const boundText = getBoundTextElement(container);
+      if (boundText) {
+        return boundText.height;
+      }
+      return BOUND_TEXT_PADDING * 8 * 2;
     }
     return height;
   }