Add back webpack config for building a standalone plain JS module

VaguelySerious · Sep 15, 2024 · b0148cb · b0148cb
1 parent 0b9014a
commit b0148cb
Show file tree

Hide file tree

Showing 9 changed files with 2,065 additions and 536 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -1,23 +1,17 @@
-<head>
+<head></head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-  <link rel="stylesheet" href="./quill.snow.css" />
+  <link rel="stylesheet" href="quill.snow.css">
   <style>
-    .ql-toolbar:after {
-      clear: none !important;
-    }
+  .ql-toolbar:after {
+    clear: none !important;
+  }
   </style>
 </head>
 <body>
   <div id="app"></div>
-  <script
-    src="https://unpkg.com/react@18/umd/react.development.js"
-    crossorigin
-  ></script>
-  <script
-    src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
-    crossorigin
-  ></script>
+  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
+  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
   <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
   <script src="./react-quill.js"></script>
-  <script type="text/babel" src="index.js"></script>
+  <script defer type="text/babel" src="index.js"></script>
 </body>
diff --git a/docs/index.js b/docs/index.js
@@ -6,91 +6,96 @@ if (typeof React !== 'object') {
   alert('React not found. Did you run "npm install"?');
 }
 
-if (typeof ReactQuill !== 'function') {
-  alert('ReactQuill not found. Did you run "make build"?')
+if (!window.ReactQuill) {
+  alert('ReactQuill not found. Did you run "make build"?');
 }
 
-var EMPTY_DELTA = {ops: []};
+if (typeof window.ReactQuill.default !== 'function') {
+  alert('ReactQuill not a react component. Did you run "make build"?');
+}
 
-class Editor extends React.Component {
+var EMPTY_DELTA = { ops: [] };
 
+class Editor extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       theme: 'snow',
       enabled: true,
       readOnly: false,
       value: EMPTY_DELTA,
-      events: []
+      events: [],
     };
   }
 
   formatRange(range) {
-    return range
-      ? [range.index, range.index + range.length].join(',')
-      : 'none';
+    return range ? [range.index, range.index + range.length].join(',') : 'none';
   }
 
   onEditorChange = (value, delta, source, editor) => {
     this.setState({
       value: editor.getContents(),
       events: [`[${source}] text-change`, ...this.state.events],
     });
-  }
+  };
 
   onEditorChangeSelection = (range, source) => {
     this.setState({
       selection: range,
       events: [
-        `[${source}] selection-change(${this.formatRange(this.state.selection)} -> ${this.formatRange(range)})`,
+        `[${source}] selection-change(${this.formatRange(
+          this.state.selection
+        )} -> ${this.formatRange(range)})`,
         ...this.state.events,
-      ]
+      ],
     });
-  }
+  };
 
   onEditorFocus = (range, source) => {
     this.setState({
-      events: [
-        `[${source}] focus(${this.formatRange(range)})`
-      ].concat(this.state.events)
+      events: [`[${source}] focus(${this.formatRange(range)})`].concat(
+        this.state.events
+      ),
     });
-  }
+  };
 
   onEditorBlur = (previousRange, source) => {
     this.setState({
-      events: [
-        `[${source}] blur(${this.formatRange(previousRange)})`
-      ].concat(this.state.events)
+      events: [`[${source}] blur(${this.formatRange(previousRange)})`].concat(
+        this.state.events
+      ),
     });
-  }
+  };
 
   onToggle = () => {
     this.setState({ enabled: !this.state.enabled });
-  }
+  };
 
   onToggleReadOnly = () => {
     this.setState({ readOnly: !this.state.readOnly });
-  }
+  };
 
   onSetContents = () => {
     this.setState({ value: 'This is some <b>fine</b> example content' });
-  }
+  };
 
   render() {
     return (
       <div>
         {this.renderToolbar()}
-        <hr/>
+        <hr />
         {this.renderSidebar()}
-        {this.state.enabled && <ReactQuill
-          theme={this.state.theme}
-          value={this.state.value}
-          readOnly={this.state.readOnly}
-          onChange={this.onEditorChange}
-          onChangeSelection={this.onEditorChangeSelection}
-          onFocus={this.onEditorFocus}
-          onBlur={this.onEditorBlur}
-        />}
+        {this.state.enabled && (
+          <window.ReactQuill.default
+            theme={this.state.theme}
+            value={this.state.value}
+            readOnly={this.state.readOnly}
+            onChange={this.onEditorChange}
+            onChangeSelection={this.onEditorChangeSelection}
+            onFocus={this.onEditorFocus}
+            onBlur={this.onEditorBlur}
+          />
+        )}
       </div>
     );
   }
@@ -103,38 +108,35 @@ class Editor extends React.Component {
     return (
       <div>
         <button onClick={this.onToggle}>
-          {enabled? 'Disable' : 'Enable'}
+          {enabled ? 'Disable' : 'Enable'}
         </button>
         <button onClick={this.onToggleReadOnly}>
-          Set {readOnly? 'read/Write' : 'read-only'}
+          Set {readOnly ? 'read/Write' : 'read-only'}
         </button>
         <button onClick={this.onSetContents}>
           Fill contents programmatically
         </button>
-        <button disabled={true}>
-          Selection: ({selection})
-        </button>
+        <button disabled={true}>Selection: ({selection})</button>
       </div>
     );
   }
 
   renderSidebar() {
     return (
-      <div style={{ overflow:'hidden', float:'right' }}>
+      <div style={{ overflow: 'hidden', float: 'right' }}>
         <textarea
-          style={{ display:'block', width:300, height:300 }}
+          style={{ display: 'block', width: 300, height: 300 }}
           value={JSON.stringify(this.state.value, null, 2)}
           readOnly={true}
         />
         <textarea
-          style={{ display:'block', width:300, height:300 }}
+          style={{ display: 'block', width: 300, height: 300 }}
           value={this.state.events.join('\n')}
           readOnly={true}
         />
       </div>
     );
   }
-
 }
 
 const root = ReactDOM.createRoot(document.getElementById('app'));

diff --git a/docs/quill.snow.css b/docs/quill.snow.css
diff --git a/docs/quill.snow.js b/docs/quill.snow.js
@@ -0,0 +1 @@
+../dist/quill.snow.css