fix: 🐛 update wysiwyg content when value is updated

resources/ts/back/Components/Inputs/SimpleWysiwyg.tsx

@@ -1,6 +1,6 @@
 // * Packages
 import { usePage } from "@inertiajs/react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import RichTextEditor, { BaseKit, UseEditorOptions } from "reactjs-tiptap-editor";
 import { Blockquote } from "reactjs-tiptap-editor/blockquote";
 import { Bold } from "reactjs-tiptap-editor/bold";
@@ -112,6 +112,7 @@ export default function SimpleWysiwyg({
     ];
 
     const [content, setContent] = useState(value);
+    const [version, setVersion] = useState(1);
 
     const onChangeContent = (changedValue: string) => {
         setContent(changedValue);
@@ -127,14 +128,22 @@ export default function SimpleWysiwyg({
         },
     };
 
+    useEffect(() => {
+        if (content !== value) {
+            setContent(value);
+            setVersion(version + 1);
+        }
+    }, [value]);
+
     return (
         <div className={cn("col-span-2", { "wysiwyg-error": errors[name] }, className)}>
             <Label htmlFor={name}>{label + (required ? " *" : "")}</Label>
             {wordCounter && <WordCounter value={content.replace(/<[^>]*>/g, "")} />}
             <div className="my-1.5">
                 <RichTextEditor
+                    key={version}
                     output="html"
-                    content={String(content)}
+                    content={content}
                     onChangeContent={onChangeContent}
                     // @ts-ignore
                     extensions={extensions}