chore: update example

tiavina-mika · Nov 13, 2024 · ecc1d02 · ecc1d02
1 parent b913f63
commit ecc1d02
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 29 deletions.
diff --git a/example/.yarn/install-state.gz b/example/.yarn/install-state.gz
diff --git a/example/package.json b/example/package.json
@@ -15,7 +15,7 @@
     "@emotion/styled": "^11.11.0",
     "@hookform/resolvers": "^3.3.4",
     "@mui/material": "^5.15.2",
-    "mui-tiptap-editor": "^0.11.2",
+    "mui-tiptap-editor": "^0.11.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.49.2",

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -258,12 +258,13 @@ const App = () => {
             />
           </div>
           {/* Simple input */}
-          {tab === 0 && <TextEditor placeholder="Type something here..." onChange={v => console.log(v)} />}
+          {tab === 0 && <TextEditor id="simple-input" placeholder="Type something here..." onChange={v => console.log(v)} />}
 
           {/* Select toolbar */}
           {tab === 1 && (
             <TextEditor
               disableTabs={false}
+              id="select-toolbar"
               placeholder="Type something here..."
               toolbar={['bold', 'italic', 'underline']}
               toolbarPosition="top"
@@ -274,13 +275,15 @@ const App = () => {
           {/* Custom global styles */}
           {tab === 3 && (
             <TextEditor
+              id="custom-global-styles"
               rootClassName="root"
               value="<p>Hello word!</p>"
             />
           )}
           {/* Each element styles */}
           {tab === 4 && (
             <TextEditor
+              id="each-element-styles"
               inputClassName="my-input"
               label="Content"
               labelClassName="my-label"
@@ -293,6 +296,7 @@ const App = () => {
           {/* Override labels */}
           {tab === 5 && (
             <TextEditor
+              id="override-labels"
               label="Content"
               labels={customLabels}
             />
@@ -301,14 +305,15 @@ const App = () => {
           {/* mentions */}
           {tab === 6 && (
             <TextEditor
+              id="mentions"
               label="Content"
               mentions={mentions}
               user={currentUser}
               userPathname="/profile"
             />
           )}
           {/* With default async value */}
-          {tab === 7 && <TextEditor value={asyncDefaultValue} />}
+          {tab === 7 && <TextEditor id="async-value" value={asyncDefaultValue} />}
 
           {/* With React Hook Form */}
           {tab === 8 && <WithHookForm />}
@@ -323,6 +328,7 @@ const App = () => {
           {tab === 10 && (
             <TextEditor
               content="<img alt='Cute cat' src='https://png.pngtree.com/png-clipart/20230511/ourmid/pngtree-isolated-cat-on-white-background-png-image_7094927.png' />"
+              id="upload-image"
               uploadFileOptions={{
                 uploadFile,
                 maxSize: 5,
@@ -338,6 +344,7 @@ const App = () => {
           {tab === 11 && (
             <TextEditor
               content={code}
+              id="code-block"
             />
           )}
         </Container>

diff --git a/example/src/WithHookForm.tsx b/example/src/WithHookForm.tsx
@@ -1,5 +1,7 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { SubmitHandler, useForm, FormProvider, Controller } from 'react-hook-form';
+import {
+  SubmitHandler, useForm, FormProvider, Controller,
+} from 'react-hook-form';
 
 import z from 'zod';
 import { TextEditor, TextEditorReadOnly } from 'mui-tiptap-editor';
@@ -17,14 +19,14 @@ const WithHookForm = () => {
 
   const form = useForm<Input>({
     resolver: zodResolver(schema),
-    defaultValues: { content: '' }
+    defaultValues: { content: '' },
 
   });
 
   const { handleSubmit, control } = form;
 
 
-  const handleFormSubmit: SubmitHandler<Input> = async values => {
+  const handleFormSubmit: SubmitHandler<Input> = async (values) => {
     setValue(values.content);
   };
 
@@ -35,24 +37,25 @@ const WithHookForm = () => {
         <form onSubmit={handleSubmit(handleFormSubmit)}>
           <Stack spacing={2}>
             <Controller
-                name="content"
-                control={control}
-                defaultValue=""
-                render={({ field }) => (
-                  <TextEditor
-                    {...field}
-                    label="Content"
-                  />
-                )}
-              />
-              {/* buttons */}
-              <Stack direction="row" spacing={3}>
-                <Button
-                  variant="contained"
-                  type="submit"
-                >
-                  Submit
-                </Button>
+              control={control}
+              defaultValue=""
+              name="content"
+              render={({ field }) => (
+                <TextEditor
+                  {...field}
+                  id="content"
+                  label="Content"
+                />
+              )}
+            />
+            {/* buttons */}
+            <Stack direction="row" spacing={3}>
+              <Button
+                type="submit"
+                variant="contained"
+              >
+                Submit
+              </Button>
             </Stack>
           </Stack>
         </form>

diff --git a/example/yarn.lock b/example/yarn.lock
@@ -2143,7 +2143,7 @@ __metadata:
     eslint-plugin-react-hooks: "npm:^4.6.2"
     eslint-plugin-react-refresh: "npm:^0.4.12"
     globals: "npm:^15.11.0"
-    mui-tiptap-editor: "npm:^0.11.2"
+    mui-tiptap-editor: "npm:^0.11.5"
     prettier: "npm:^3.3.3"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
@@ -4688,9 +4688,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mui-tiptap-editor@npm:^0.11.2":
-  version: 0.11.2
-  resolution: "mui-tiptap-editor@npm:0.11.2"
+"mui-tiptap-editor@npm:^0.11.5":
+  version: 0.11.5
+  resolution: "mui-tiptap-editor@npm:0.11.5"
   dependencies:
     "@emotion/css": "npm:^11.13.4"
     "@tiptap/extension-bubble-menu": "npm:^2.9.1"
@@ -4723,7 +4723,7 @@ __metadata:
     "@mui/material": ^5.15.2
     react: ^16.8.0 || ^17.0.2 || ^18.2.0
     react-dom: ^16.8.0 || ^17.0.2 || ^18.2.0
-  checksum: 10c0/a14626e7332c70fff57a61ebb53cf877b6a5c13c4d1b9da8f763436792a52a468029f07d10f04fd6fa36d252b3f1fe866b7e29db59aa5ba4dfb47ebf3cffeddd
+  checksum: 10c0/94306f3fc53bd9eb2823b137e3ffbd3da069363566c1075254b2d6e21e03ff1219692bb043159b33fd1416b18ab24602c4c1fcf7b27bbdc2b011a005fdb111dd
   languageName: node
   linkType: hard