docs: update readme, changelog and release 0.3.0 🎉 (#3003)

src/packages/excalidraw/CHANGELOG.md

@@ -12,7 +12,7 @@ The change should be grouped under one of the below section and must contain PR
 Please add the latest change on the top under the correct section.
 -->
 
-## [Unreleased]
+## 0.3.0
 
 ## Excalidraw API
 
@@ -20,6 +20,7 @@ Please add the latest change on the top under the correct section.
 
 - Allow host to pass [color](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L36) for [collaborator](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L27) [#2943](https://github.com/excalidraw/excalidraw/pull/2943). The unused prop `user` is now removed.
 - Add `zenModeEnabled` and `gridModeEnabled` prop which enables zen mode and grid mode respectively [#2901](https://github.com/excalidraw/excalidraw/pull/2901). When this prop is used, the zen mode / grid mode will be fully controlled by the host app.
+- Allow host to pass [userState](https://github.com/excalidraw/excalidraw/blob/6967d8c9851c65bb8873e2f97387749976bbe326/src/types.ts#L35) for [collaborator](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L27) to show the current user state [#2877](https://github.com/excalidraw/excalidraw/pull/2877).
 - Add `viewModeEnabled` prop which enabled the view mode [#2840](https://github.com/excalidraw/excalidraw/pull/2840). When this prop is used, the view mode will not show up in context menu is so it is fully controlled by host.
 - Expose `getAppState` on `excalidrawRef` [#2834](https://github.com/excalidraw/excalidraw/pull/2834).
 
@@ -31,15 +32,57 @@ Please add the latest change on the top under the correct section.
 
 ### Features
 
+- Add the ability to clear library [#2997](https://github.com/excalidraw/excalidraw/pull/2997)
+- Updates to Collaboration and RTL UX [#2994](https://github.com/excalidraw/excalidraw/pull/2994)
+- Show toast when saving to existing file [#2988](https://github.com/excalidraw/excalidraw/pull/2988)
+- Support supplying custom scale when exporting canvas [#2904](https://github.com/excalidraw/excalidraw/pull/2904)
+- Show version in the stats dialog [#2908](https://github.com/excalidraw/excalidraw/pull/2908)
+- Add idle detection to collaboration feature [#2877](https://github.com/excalidraw/excalidraw/pull/2877)
+- Add view mode in Excalidraw [#2840](https://github.com/excalidraw/excalidraw/pull/2840)
+- Increase max zoom [#2881](https://github.com/excalidraw/excalidraw/pull/2881)
+- Remove copy & paste from context menu on desktop [#2872](https://github.com/excalidraw/excalidraw/pull/2872)
+- Add separators on context menu [#2659](https://github.com/excalidraw/excalidraw/pull/2659)
+- Add ctrl-y to redo [#2831](https://github.com/excalidraw/excalidraw/pull/2831)
 - Add view mode [#2840](https://github.com/excalidraw/excalidraw/pull/2840).
 - Remove `copy`, `cut`, and `paste` actions from contextmenu [#2872](https://github.com/excalidraw/excalidraw/pull/2872)
 - Support `Ctrl-Y` shortcut to redo on Windows [#2831](https://github.com/excalidraw/excalidraw/pull/2831).
 
 ### Fixes
 
+- Refresh wysiwyg position on canvas resize [#3008](https://github.com/excalidraw/excalidraw/pull/3008)
+- Update the `lang` attribute with the current lang. [#2995](https://github.com/excalidraw/excalidraw/pull/2995)
+- Rename 'Grid mode' to 'Show grid' [#2944](https://github.com/excalidraw/excalidraw/pull/2944)
+- Deal with users on systems that don't handle emoji [#2941](https://github.com/excalidraw/excalidraw/pull/2941)
+- Mobile toolbar tooltip regression [#2939](https://github.com/excalidraw/excalidraw/pull/2939)
+- Hide collaborator list on mobile if empty [#2938](https://github.com/excalidraw/excalidraw/pull/2938)
+- Toolbar unnecessarily eats too much width [#2924](https://github.com/excalidraw/excalidraw/pull/2924)
+- Mistakenly hardcoding scale [#2925](https://github.com/excalidraw/excalidraw/pull/2925)
+- Text editor not visible in dark mode [#2920](https://github.com/excalidraw/excalidraw/pull/2920)
+- Incorrect z-index of text editor [#2914](https://github.com/excalidraw/excalidraw/pull/2914)
+- Make scrollbars draggable when offsets are set [#2916](https://github.com/excalidraw/excalidraw/pull/2916)
+- Pointer-events being disabled on free-draw [#2912](https://github.com/excalidraw/excalidraw/pull/2912)
+- Track zenmode and grid mode usage [#2900](https://github.com/excalidraw/excalidraw/pull/2900)
+- Disable UI pointer-events on canvas drag [#2856](https://github.com/excalidraw/excalidraw/pull/2856)
+- Stop flooring scroll positions [#2883](https://github.com/excalidraw/excalidraw/pull/2883)
+- Apply initialData appState for zenmode and grid stats and refactor check param for actions [#2871](https://github.com/excalidraw/excalidraw/pull/2871)
+- Show correct state of Nerd stats in context menu when nerd stats dialog closed [#2874](https://github.com/excalidraw/excalidraw/pull/2874)
+- Remote pointers not accounting for offset [#2855](https://github.com/excalidraw/excalidraw/pull/2855)
+- Toggle help dialog when "shift+?" is pressed [#2828](https://github.com/excalidraw/excalidraw/pull/2828)
+- Add safe check for process so Excalidraw can be loaded via script [#2824](https://github.com/excalidraw/excalidraw/pull/2824)
 - Fix UI pointer-events not disabled when dragging on canvas [#2856](https://github.com/excalidraw/excalidraw/pull/2856).
 - Fix remote pointers not accounting for offset [#2855](https://github.com/excalidraw/excalidraw/pull/2855).
 
+### Refactor
+
+- Remove duplicate key handling [#2878](https://github.com/excalidraw/excalidraw/pull/2878)
+- Reuse scss variables in js for SSOT [#2867](https://github.com/excalidraw/excalidraw/pull/2867)
+- Rename browser-nativefs to browser-fs-access [#2862](https://github.com/excalidraw/excalidraw/pull/2862)
+- Rewrite collabWrapper to remove TDZs and simplify [#2834](https://github.com/excalidraw/excalidraw/pull/2834)
+
+### Chore
+
+- Use `Sentence case` for `Live collaboration`
+
 ## 0.2.1
 
 ## Excalidraw API

src/packages/excalidraw/README.md

@@ -51,6 +51,10 @@ export default function App() {
     height: window.innerHeight,
   });
 
+  const [viewModeEnabled, setViewModeEnabled] = useState(false);
+  const [zenModeEnabled, setZenModeEnabled] = useState(false);
+  const [gridModeEnabled, setGridModeEnabled] = useState(false);
+
   useEffect(() => {
     const onResize = () => {
       setDimensions({
@@ -58,7 +62,9 @@ export default function App() {
         height: window.innerHeight,
       });
     };
+
     window.addEventListener("resize", onResize);
+
     return () => window.removeEventListener("resize", onResize);
   }, []);
 
@@ -96,30 +102,60 @@ export default function App() {
 
   return (
     <div className="App">
-      <button className="update-scene" onClick={updateScene}>
+      <div className="button-wrapper">
-        Update Scene
+        <button className="update-scene" onClick={updateScene}>
-      </button>
+          Update Scene
-      <button
+        </button>
-        className="reset-scene"
+        <button
-        onClick={() => {
+          className="reset-scene"
-          excalidrawRef.current.resetScene();
+          onClick={() => {
-        }}
+            excalidrawRef.current.resetScene();
-      >
+          }}
-        Reset Scene
+        >
-      </button>
+          Reset Scene
+        </button>
+        <label>
+          <input
+            type="checkbox"
+            checked={viewModeEnabled}
+            onChange={() => setViewModeEnabled(!viewModeEnabled)}
+          />
+          View mode
+        </label>
+        <label>
+          <input
+            type="checkbox"
+            checked={zenModeEnabled}
+            onChange={() => setZenModeEnabled(!zenModeEnabled)}
+          />
+          Zen mode
+        </label>
+        <label>
+          <input
+            type="checkbox"
+            checked={gridModeEnabled}
+            onChange={() => setGridModeEnabled(!gridModeEnabled)}
+          />
+          Grid mode
+        </label>
+      </div>
       <div className="excalidraw-wrapper">
         <Excalidraw
           ref={excalidrawRef}
           width={dimensions.width}
           height={dimensions.height}
           initialData={InitialData}
-          onChange={(elements, state) => {
+          onChange={(elements, state) =>
-            console.log("Latest elements:", elements, "Latest state:", state);
+            console.log("Elements :", elements, "State : ", state)
-          }}
+          }
-          onPointerUpdate={(pointerData) => console.log(pointerData)}
+          user={{ name: "Excalidraw User" }}
-          onCollabButtonClick={() => {
+          onPointerUpdate={(payload) => console.log(payload)}
-            window.alert("You clicked on collab button");
+          onCollabButtonClick={() =>
-          }}
+            window.alert("You clicked on collab button")
+          }
+          viewModeEnabled={viewModeEnabled}
+          zenModeEnabled={zenModeEnabled}
+          gridModeEnabled={gridModeEnabled}
         />
       </div>
     </div>
@@ -178,6 +214,19 @@ ReactDOM.render(
 
 [![Edit excalidraw-in-browser](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/excalidraw-in-browser-tlqom?fontsize=14&hidenavigation=1&theme=dark)
 
+Since Excalidraw doesn't support server side rendering yet so you will have to make sure the component is rendered once host is mounted.
+
+```js
+import { useState, useEffect } from "react";
+export default function IndexPage() {
+  const [Comp, setComp] = useState(null);
+  useEffect(() => {
+    import("@excalidraw/excalidraw").then((comp) => setComp(comp.default));
+  });
+  return <>{Comp && <Comp />}</>;
+}
+```
+
 ### Props
 
 | Name | Type | Default | Description |

src/packages/excalidraw/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@excalidraw/excalidraw",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

src/packages/excalidraw/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@excalidraw/excalidraw",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "main": "dist/excalidraw.min.js",
   "files": [
     "dist/*"