From ce1d4f80872ac35494942a8afd1de89b3ae79f34 Mon Sep 17 00:00:00 2001
From: 2nthony <ant.hu@outlook.com>
Date: Fri, 12 Aug 2022 10:55:14 +0800
Subject: [PATCH 1/2] fix: watch content changes

---
 src/HtmlPreviewer.tsx     | 1 +
 src/MarkdownPreviewer.tsx | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/HtmlPreviewer.tsx b/src/HtmlPreviewer.tsx
index 45ac4d9..39f726d 100644
--- a/src/HtmlPreviewer.tsx
+++ b/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);
diff --git a/src/MarkdownPreviewer.tsx b/src/MarkdownPreviewer.tsx
index 2411c55..315896f 100644
--- a/src/MarkdownPreviewer.tsx
+++ b/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

From c14a5dd9d7dd38eef9992127843ac698f4ede4f2 Mon Sep 17 00:00:00 2001
From: 2nthony <ant.hu@outlook.com>
Date: Fri, 12 Aug 2022 11:03:44 +0800
Subject: [PATCH 2/2] docs: update

---
 demo/App.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/demo/App.tsx b/demo/App.tsx
index 8d016fa..bce9c25 100644
--- a/demo/App.tsx
+++ b/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>