From b0148cb2eb45375f2b172a5874740114dcb39ce5 Mon Sep 17 00:00:00 2001 From: Peter Wielander Date: Sun, 15 Sep 2024 12:18:27 +0200 Subject: [PATCH] Add back webpack config for building a standalone plain JS module --- docs/index.html | 22 +- docs/index.js | 86 +- docs/quill.snow.css | 10 - docs/quill.snow.js | 1 + docs/react-quill.js | 386 +------- package.json | 14 +- src/index.tsx | 2 +- webpack.config.cjs | 45 + yarn.lock | 2035 +++++++++++++++++++++++++++++++++++++++++-- 9 files changed, 2065 insertions(+), 536 deletions(-) delete mode 100644 docs/quill.snow.css create mode 120000 docs/quill.snow.js mode change 100644 => 120000 docs/react-quill.js create mode 100644 webpack.config.cjs diff --git a/docs/index.html b/docs/index.html index 38b74fdb..8ef3a4a5 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,23 +1,17 @@ - + - +
- - + + - + diff --git a/docs/index.js b/docs/index.js index 278eae21..3a582cc5 100644 --- a/docs/index.js +++ b/docs/index.js @@ -6,14 +6,17 @@ 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 = { @@ -21,14 +24,12 @@ class Editor extends React.Component { 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) => { @@ -36,61 +37,65 @@ class Editor extends React.Component { 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 fine example content' }); - } + }; render() { return (
{this.renderToolbar()} -
+
{this.renderSidebar()} - {this.state.enabled && } + {this.state.enabled && ( + + )}
); } @@ -103,38 +108,35 @@ class Editor extends React.Component { return (
- +
); } renderSidebar() { return ( -
+