docs: migrating dev docs to docusaurus :) (#6073)

* docs: migrating existing docs to docosaraus :) * log broken links * lint :p * fix * divide the doc into diff categories * fix * order sidebars and more * fix lint * point to installation * making docs better :) * fix * renaming git * renaming git * fix links * fix * update readme * fix * resolve duplicate url and make /docs as base url * fix * move main docs as well * making docs better * support mdx * update og * fix title * upgrade docusarus to stable version * use draculla theme * fix * make entire sidebar collapsable * live editor for footer wohoo * render excalidraw only on client to fix the prod build * migrate MainMenu to live editor too :) * lint :p * cleanup integration and use live editor and tabs * fix * Add welcome screen doc * Live Collaboration comp docs * Add collaborator example * Add example * add more * remove isCollaborating * Rewrite ref and move to sidebar * change color of links inside pre * add initial data * fix lint * Add styling * fix lint * Add example for customizing styles * fix lint * fix * fix lint * Add link to livecollabtrigger * fix * rewrite UIOptions to sidebar * move initialdata to sidebar * move render props to sidebar and rewrite renderTopRightUI and renderCustomStats * rewrite renderSidebar * update og * update url for testing * fix url * update readme * fix style * tweaks * Add highlight comp to highlight text * Add bash syntax highlight * fix * tweaks * fix * rewrite export utilities * fix restore * rewrite utils * move constants to sidebar * update readme * add copyright * fix links style * Add linkedin * tweaks * rename package to @excalidraw/excalidraw * enable algolia with dummy creds * tweaks to integration doc * tweak WelcomeScreen docs to reflect upcoming API changes * tweak components intro * tweak nomenclature * fix admonition * rename `components` sidebar item and change order of components list * uncollapse package section in sidebar * show level 4 haeadings in TOC * remove algolia * remove unused assets * capitalize C * tweak * rename components to App * rename components -> children-components in the routes * move notable used tools to intro * update MainMenu docs with `onSelect` preventDefault behavior * change sidebar label for children components * use code * tweak README & docs intro * tweak package development doc * make scrollbar gutter stable * tweak api intro * add admonition for export utils * use next * wip * wip * make excalidraw examples use current color theme & prefer system * fix welcomescreen docs * use latest temp release * fix component order * revert wip changes * use next * tweak * increase height to fix welcome screen hint * tweak editor height * update excal version * wrap Excal with forwardRef to fix refs * migrate contributing.md * fix broken links --------- Co-authored-by: dwelle <luzar.david@gmail.com>
2025-09-04 16:17:06 +02:00 · 2023-02-01 19:57:54 +05:30
parent f68f4cb9e0
commit f23cdc47ee
49 changed files with 4397 additions and 2324 deletions
--- a/dev-docs/docs/@excalidraw/excalidraw/api/children-components/live-collaboration-trigger.mdx
+++ b/dev-docs/docs/@excalidraw/excalidraw/api/children-components/live-collaboration-trigger.mdx
@@ -0,0 +1,62 @@
+# LiveCollaborationTrigger
+
+If you implement live collaboration support and want to expose the same UI button as on [excalidraw.com](https://excalidraw.com), you can render the `<LiveCollaborationTrigger/>` component using the [renderTopRightUI](/docs/@excalidraw/excalidraw/api/props#rendertoprightui) prop.
+
+You'll need to supply `onSelect()` to handle opening of your collaboration dialog, but the button will display `appState.collaborators` count provided you have supplied it.
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `onSelect` | `function` | Yes |  | Handler called when the user clicks on the button |
+| `isCollaborating` | `boolean` | Yes | false | Whether live collaboration session is in effect. Modifies button style. |
+
+```tsx live
+function App() {
+  const [excalidrawAPI, setExcalidrawAPI] = useState(null);
+  const [isCollaborating, setIsCollaborating] = useState(false);
+  return (
+    <div style={{ height: "500px" }}>
+      <p style={{ fontSize: "16px" }}>
+        Selecting the checkbox to see the collaborator count
+      </p>
+      <label style={{ fontSize: "16px", fontWeight: "bold" }}>
+        <input
+          type="checkbox"
+          checked={isCollaborating}
+          onChange={() => {
+            if (!isCollaborating) {
+              const collaborators = new Map();
+              collaborators.set("id1", {
+                username: "Doremon",
+                avatarUrl: "../../../../img/doremon.png",
+              });
+              collaborators.set("id3", {
+                username: "Pika",
+                avatarUrl: "../../../../img/pika.jpeg",
+              });
+              excalidrawAPI.updateScene({ collaborators });
+            } else {
+              excalidrawAPI.updateScene({
+                collaborators: new Map(),
+              });
+            }
+            setIsCollaborating(!isCollaborating);
+          }}
+        />
+        Show Collaborators
+      </label>
+      <Excalidraw
+        ref={(api) => setExcalidrawAPI(api)}
+        renderTopRightUI={() => (
+          <LiveCollaborationTrigger
+            isCollaborating={isCollaborating}
+            onSelect={() => {
+              window.alert("You clicked on collab button");
+              setIsCollaborating(true);
+            }}
+          />
+        )}
+      ></Excalidraw>
+    </div>
+  );
+}
+```