[docs][examples] Update plain text and rich text examples (#6187)

Co-authored-by: Maksym Plavinskyi <Maksym_Plavinskyi@epam.com>
facebook · Jun 5, 2024 · 7306c73 · 7306c73
1 parent 2605b8b
commit 7306c73
Show file tree

Hide file tree

Showing 21 changed files with 2,556 additions and 298 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -27,7 +27,7 @@ Lexical version:
 Link to code example:
 
 <!--
-  Please provide a CodeSandbox (https://codesandbox.io/s/new) or (https://codesandbox.io/s/lexical-plain-text-example-g932e), a link to a
+  Please provide a CodeSandbox (https://codesandbox.io/s/new) or (https://stackblitz.com/github/facebook/lexical/tree/main/examples/react-plain-text?embed=1&file=src%2FApp.tsx&terminalHeight=0&ctl=1&showSidebar=0&devtoolsheight=0&view=preview), a link to a
   repository on GitHub, or provide a minimal code example that reproduces the
   problem. You may provide a screenshot of the application if you think it is
   relevant to your bug report. Here are some tips for providing a minimal

diff --git a/README.md b/README.md
@@ -22,8 +22,8 @@ For documentation and more information about Lexical, be sure to [visit the Lexi
 Here are some examples of what you can do with Lexical:
 
 - [Lexical Playground](https://playground.lexical.dev)
-- [Plain text sandbox](https://codesandbox.io/s/lexical-plain-text-example-g932e)
-- [Rich text sandbox](https://codesandbox.io/s/lexical-rich-text-example-5tncvy)
+- [Plain text sandbox](https://stackblitz.com/github/facebook/lexical/tree/main/examples/react-plain-text?embed=1&file=src%2FApp.tsx&terminalHeight=0&ctl=1&showSidebar=0&devtoolsheight=0&view=preview)
+- [Rich text sandbox](https://stackblitz.com/github/facebook/lexical/tree/main/examples/react-rich?embed=1&file=src%2FApp.tsx&terminalHeight=0&ctl=1&showSidebar=0&devtoolsheight=0&view=preview)
 
 
 ---
@@ -50,7 +50,7 @@ Install `lexical` and `@lexical/react`:
 npm install --save lexical @lexical/react
 ```
 
-Below is an example of a basic plain text editor using `lexical` and `@lexical/react` ([try it yourself](https://codesandbox.io/s/lexical-plain-text-example-g932e)).
+Below is an example of a basic plain text editor using `lexical` and `@lexical/react` ([try it yourself](https://stackblitz.com/github/facebook/lexical/tree/main/examples/react-plain-text?embed=1&file=src%2FApp.tsx&terminalHeight=0&ctl=1&showSidebar=0&devtoolsheight=0&view=preview)).
 
 ```jsx
 import {$getRoot, $getSelection} from 'lexical';

diff --git a/examples/react-plain-text/README.md b/examples/react-plain-text/README.md
@@ -0,0 +1,7 @@
+# React Plain Text Lexical example
+
+Here we have simplest Lexical setup in plaintext configuration (`@lexical/plain-text`) with history (`@lexical/history`) and accessibility (`@lexical/dragon`) features enabled.
+
+**Run it locally:** `npm i && npm run dev`
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/facebook/lexical/tree/main/examples/react-plain-text?file=src/main.tsx)
diff --git a/examples/react-plain-text/icons/LICENSE.md b/examples/react-plain-text/icons/LICENSE.md
@@ -0,0 +1,5 @@
+Bootstrap Icons
+https://icons.getbootstrap.com
+
+Licensed under MIT license
+https://github.com/twbs/icons/blob/main/LICENSE.md
diff --git a/examples/react-plain-text/icons/arrow-clockwise.svg b/examples/react-plain-text/icons/arrow-clockwise.svg
diff --git a/examples/react-plain-text/icons/arrow-counterclockwise.svg b/examples/react-plain-text/icons/arrow-counterclockwise.svg
diff --git a/examples/react-plain-text/index.html b/examples/react-plain-text/index.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>Lexical Plain Text Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>