React demo working

Author: benwinding

demos/react/public/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
     <title>Quill Demo (react)</title>
-    <link id="src-code" data="https://github.com/benwinding/quill-html-edit-button/blob/master/demos/vue" ></link>
+    <link id="src-code" data="https://github.com/benwinding/quill-html-edit-button/blob/master/demos/react" ></link>
     <script src="./header-text.js" ></script>
 
     <!-- Theme included stylesheets -->

demos/react/src/app.jsx

@@ -1,23 +1,30 @@
 import React, { useState } from 'react';
 
-// import htmlEditButton from "../../../src/quill.htmlEditButton";
+import htmlEditButton from "../../../src/quill.htmlEditButton";
 // import htmlEditButton from "quill-html-edit-button";
 //     ^ In production use this
-import ReactQuill from 'react-quill';
+import ReactQuill, { Quill } from 'react-quill';
 import 'react-quill/dist/quill.snow.css';
 
-// const modules = {
-//   ['name']: 'htmlEditButton',
-//   ['module']: htmlEditButton,
-//   ['options']: {
-//     debug: true
-//   },
-// };
+import Toolbar from "quill/modules/toolbar";
+import Snow from "quill/themes/snow";
+
+Quill.register({
+  'modules/toolbar': Toolbar,
+  'themes/snow': Snow,
+  "modules/htmlEditButton": htmlEditButton
+})
+
+const modules = {
+  htmlEditButton: {
+    debug: true,
+  }   
+};
 
 export function MyApp() {
-  const [value, setValue] = useState('');
+  const [value, setValue] = useState('Here is some text!');
 
   return <ReactQuill theme="snow" value={value} onChange={setValue} 
-  // modules={modules} 
+  modules={modules} 
   />;
 }