From 4326c874ce8ae9fa13e5691ed2903e46503506e6 Mon Sep 17 00:00:00 2001
From: tiavina-mika <tiavinamika@gmail.com>
Date: Wed, 9 Oct 2024 10:23:44 +0300
Subject: [PATCH] Update App.tsx

---
 example/src/App.tsx | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/example/src/App.tsx b/example/src/App.tsx
index 2856bb0..545e1ad 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -96,7 +96,8 @@ const tabs = [
   'Async initial value',
   'React Hook Form',
   'Read without editor',
-  'Upload image'
+  'Upload image',
+  'Code block'
 ];
 
 const mentions = [
@@ -166,6 +167,16 @@ const htmlToParse = `
 </pre>
 `;
 
+const code = `
+<pre><code class="language-typescript">export const suggestIndex = (query: string, data: Article[]) =&gt; {
+  const suggestions = data.filter((item: Article) =&gt; {
+    const maxDistance = item.title.length - leven(query.toLocaleLowerCase(), item.title.toLocaleLowerCase());
+    return maxDistance &gt;= 6;
+  });
+  return suggestions;
+};</code></pre><p></p>
+`;
+
 const App = () => {
   const [tab, setTab] = useState<number>(0);
   const [asyncDefaultValue, setAsyncDefaultValue] = useState<string>('');
@@ -229,7 +240,7 @@ const App = () => {
               />
             </div>
             {/* Simple input */}
-            {tab === 0 && <TextEditor placeholder='Type something here...' />}
+            {tab === 0 && <TextEditor placeholder='Type something here...' onChange={v => console.log(v)} />}
 
             {/* Select toolbar */}
             {tab === 1 && (
@@ -302,6 +313,13 @@ const App = () => {
                 }}
               />
             )}
+
+            {/* With code */}
+            {tab === 11 && (
+              <TextEditor
+                content={code}
+              />
+            )}
           </Container>
       </Box>
     </ThemeProvider>