Merge 9d98084b8e into 6e5aeb112d

Fixed wording contributing docs

dev-docs/docs/@excalidraw/excalidraw/integration.mdx

@@ -1,5 +1,11 @@
 # Integration
 
+See [here](https://marketplace.visualstudio.com/items?itemName=pomdtr.excalidraw-editor) for VSCode intergration
+
+See [here](https://www.npmjs.com/package/@excalidraw/excalidraw) for npm package
+
+[Use Directly in Browser](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/integration#browser)
+
 ## Module bundler
 
 If you are using a module bundler (for instance, Webpack), you can import it as an ES6 module as shown below
@@ -157,6 +163,8 @@ Since Vite removes env variables by default, you can update the vite config to e
 
 ## Browser
 
+Excalidraw can be rendered directly in your browser.
+
 To use it in a browser directly:
 
 For development use :point_down:

dev-docs/docs/introduction/contributing.mdx

@@ -26,11 +26,11 @@ In case you want to pick up something from the roadmap, comment on that issue an
 ### Option 2 - CodeSandbox
 
 1. Go to https://codesandbox.io/p/github/excalidraw/excalidraw
-1. Connect your GitHub account
+1. Connect your GitHub account (Sign in on the top left corner)
-1. Go to Git tab on left side
+1. Tap on `Create Branch` in the top right corner
-1. Tap on `Fork Sandbox`
+1. Click on the page icon on the left-hand side to access files
-1. Write your code
+1. Write code
-1. Commit and PR automatically
+1. Commit and PR automatically by clicking on the Pull request symbol on the left-hand side
 
 ## Pull Request Guidelines
 

packages/excalidraw/components/App.tsx

@@ -4166,6 +4166,11 @@ class App extends React.Component<AppProps, AppState> {
         originSnapOffset: null,
         activeEmbeddable: null,
       } as const;
+
+      if (nextActiveTool.type === "freedraw") {
+        this.store.shouldCaptureIncrement();
+      }
+
       if (nextActiveTool.type !== "selection") {
         return {
           ...prevState,

packages/excalidraw/store.ts

@@ -22,7 +22,7 @@ export const getObservedAppState = (appState: AppState): ObservedAppState => {
     selectedLinearElementId: appState.selectedLinearElement?.elementId || null,
   };
 
-  Object.defineProperty(observedAppState, hiddenObservedAppStateProp, {
+  Reflect.defineProperty(observedAppState, hiddenObservedAppStateProp, {
     value: true,
     enumerable: false,
   });
@@ -33,7 +33,7 @@ export const getObservedAppState = (appState: AppState): ObservedAppState => {
 const isObservedAppState = (
   appState: AppState | ObservedAppState,
 ): appState is ObservedAppState =>
-  Object.hasOwn(appState, hiddenObservedAppStateProp);
+  !!Reflect.get(appState, hiddenObservedAppStateProp);
 
 export type StoreActionType = "capture" | "update" | "none";
 

packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap

@@ -6570,12 +6570,27 @@ History {
         "delta": Delta {
           "deleted": {
             "selectedElementIds": {},
-            "selectedLinearElementId": null,
           },
           "inserted": {
             "selectedElementIds": {
               "id6": true,
             },
+          },
+        },
+      },
+      "elementsChange": ElementsChange {
+        "added": Map {},
+        "removed": Map {},
+        "updated": Map {},
+      },
+    },
+    HistoryEntry {
+      "appStateChange": AppStateChange {
+        "delta": Delta {
+          "deleted": {
+            "selectedLinearElementId": null,
+          },
+          "inserted": {
             "selectedLinearElementId": "id6",
           },
         },

packages/excalidraw/tests/history.test.tsx

@@ -15,7 +15,11 @@ import { createUndoAction, createRedoAction } from "../actions/actionHistory";
 import { EXPORT_DATA_TYPES, MIME_TYPES } from "../constants";
 import { AppState, ExcalidrawImperativeAPI } from "../types";
 import { arrayToMap, resolvablePromise } from "../utils";
-import { COLOR_PALETTE } from "../colors";
+import {
+  COLOR_PALETTE,
+  DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX,
+  DEFAULT_ELEMENT_STROKE_COLOR_INDEX,
+} from "../colors";
 import { KEYS } from "../keys";
 import { newElementWith } from "../element/mutateElement";
 import {
@@ -67,10 +71,11 @@ const checkpoint = (name: string) => {
 const renderStaticScene = vi.spyOn(StaticScene, "renderStaticScene");
 
 const transparent = COLOR_PALETTE.transparent;
-const red = COLOR_PALETTE.red[1];
+const black = COLOR_PALETTE.black;
-const blue = COLOR_PALETTE.blue[1];
+const red = COLOR_PALETTE.red[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX];
-const yellow = COLOR_PALETTE.yellow[1];
+const blue = COLOR_PALETTE.blue[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX];
-const violet = COLOR_PALETTE.violet[1];
+const yellow = COLOR_PALETTE.yellow[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX];
+const violet = COLOR_PALETTE.violet[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX];
 
 describe("history", () => {
   beforeEach(() => {
@@ -973,6 +978,69 @@ describe("history", () => {
       ]);
     });
 
+    it("should create entry when selecting freedraw", async () => {
+      await render(<Excalidraw handleKeyboardGlobally={true} />);
+
+      UI.clickTool("rectangle");
+      mouse.down(-10, -10);
+      mouse.up(10, 10);
+
+      UI.clickTool("freedraw");
+      mouse.down(40, -20);
+      mouse.up(50, 10);
+
+      const rectangle = h.elements[0];
+      const freedraw1 = h.elements[1];
+
+      expect(API.getUndoStack().length).toBe(3);
+      expect(API.getRedoStack().length).toBe(0);
+      expect(API.getSelectedElements().length).toBe(0);
+      expect(h.elements).toEqual([
+        expect.objectContaining({ id: rectangle.id }),
+        expect.objectContaining({ id: freedraw1.id, strokeColor: black }),
+      ]);
+
+      Keyboard.undo();
+      expect(API.getUndoStack().length).toBe(2);
+      expect(API.getRedoStack().length).toBe(1);
+      expect(API.getSelectedElements().length).toBe(0);
+      expect(h.elements).toEqual([
+        expect.objectContaining({ id: rectangle.id }),
+        expect.objectContaining({
+          id: freedraw1.id,
+          strokeColor: black,
+          isDeleted: true,
+        }),
+      ]);
+
+      togglePopover("Stroke");
+      UI.clickOnTestId("color-red");
+      mouse.down(40, -20);
+      mouse.up(50, 10);
+
+      const freedraw2 = h.elements[2];
+
+      expect(API.getUndoStack().length).toBe(3);
+      expect(API.getRedoStack().length).toBe(0);
+      expect(h.elements).toEqual([
+        expect.objectContaining({ id: rectangle.id }),
+        expect.objectContaining({
+          id: freedraw1.id,
+          strokeColor: black,
+          isDeleted: true,
+        }),
+        expect.objectContaining({
+          id: freedraw2.id,
+          strokeColor: COLOR_PALETTE.red[DEFAULT_ELEMENT_STROKE_COLOR_INDEX],
+        }),
+      ]);
+
+      // ensure we don't end up with duplicated entries
+      UI.clickTool("freedraw");
+      expect(API.getUndoStack().length).toBe(3);
+      expect(API.getRedoStack().length).toBe(0);
+    });
+
     it("should support duplication of groups, appstate group selection and editing group", async () => {
       await render(<Excalidraw handleKeyboardGlobally={true} />);
       const rect1 = API.createElement({