feat(examples/react-rich-collab): Added collaboration focused example

facebook · May 7, 2024 · 7ccb46d · 7ccb46d
1 parent ac97dfa
commit 7ccb46d
Show file tree

Hide file tree

Showing 34 changed files with 6,075 additions and 6 deletions.
diff --git a/examples/react-rich-collab/.gitignore b/examples/react-rich-collab/.gitignore
@@ -0,0 +1 @@
+/yjs-wss-db
diff --git a/examples/react-rich-collab/README.md b/examples/react-rich-collab/README.md
@@ -0,0 +1,7 @@
+# Basic Vanilla JS example
+
+Here we have simplest Lexical collaboration mode setup. Use it as a starting point for your own projects as well as platform for bug reporting!
+
+**Run it locally:** `npm i && npm run dev:local`
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/facebook/lexical/tree/fix/collab_example/examples/react-rich-collab?file=src/main.ts)
diff --git a/examples/react-rich-collab/app.html b/examples/react-rich-collab/app.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React.js Collaborative Lexical Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/react-rich-collab/index.html b/examples/react-rich-collab/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React.js Collaborative Lexical Example</title>
+  </head>
+  <body>
+    <h1 align="center" style="margin: 0; font-size: 1.3em">
+      React.js Collaborative Lexical Example (see iframes below)
+    </h1>
+    <iframe
+      width="50%"
+      name="left"
+      src="/app"
+      style="
+        border: 2px dashed black;
+        width: calc(50% - 4px);
+        position: fixed;
+        top: 40px;
+        left: 0;
+        height: calc(100% - 44px);
+      "></iframe>
+    <iframe
+      width="50%"
+      name="right"
+      src="/app"
+      style="
+        border: 2px dashed black;
+        width: calc(50% - 4px);
+        position: fixed;
+        top: 40px;
+        left: calc(50% + 1px);
+        height: calc(100% - 44px);
+      "></iframe>
+  </body>
+</html>