Merge pull request #47 from opensquare-network/fix/watch-content-changes

fix: watch content changes

demo/App.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { HtmlPreviewer } from "../src/HtmlPreviewer";
 import { MarkdownPreviewer } from "../src/MarkdownPreviewer";
 import { renderMentionIdentityUserPlugin } from "../src/plugins";
@@ -84,12 +84,15 @@ function MentionIdentityUser({ address = "", network = "" }) {
 }
 
 function App() {
+  const [md, setMd] = useState(mdFeatures);
+
   return (
     <div className="App">
+      <button onClick={() => setMd("## change md features")}>button</button>
       <div className="features">
         <div>
           <h2>Features</h2>
-          <MarkdownPreviewer content={mdFeatures} />
+          <MarkdownPreviewer content={md} />
         </div>
 
         <div>

src/HtmlPreviewer.tsx

@@ -27,6 +27,7 @@ export function HtmlPreviewer(props: PreviewerProps) {
 
   const ref = useRef<HTMLDivElement>(null);
   const [html, setHtml] = useState(content);
+  useEffect(() => setHtml(content), [content]);
 
   useEffect(() => {
     applyPlugins(resolvedPlugins, "transformHtml", html, setHtml);

src/MarkdownPreviewer.tsx

@@ -1,4 +1,5 @@
 import { marked, Renderer } from "marked";
+import { useEffect, useState } from "react";
 
 import { HtmlPreviewer } from "./HtmlPreviewer";
 import { highLightPlugin } from "./plugins";
@@ -24,7 +25,8 @@ export function MarkdownPreviewer(props: PreviewerProps) {
 
   applyPlugins(resolvePlugins, "markedOptions", markedOptions);
 
-  const html = marked.parse(content, markedOptions);
+  const [html, setHtml] = useState("");
+  useEffect(() => setHtml(marked.parse(content, markedOptions)), [content]);
 
   return (
     <HtmlPreviewer