From 15834edb39dce8e66ec1f6346c45ac1cd89bdc50 Mon Sep 17 00:00:00 2001 From: Serhii Mamedov <43890857+Repugraf@users.noreply.github.com> Date: Thu, 4 Apr 2024 15:06:05 +0300 Subject: [PATCH 1/3] Update quill to latest version (2.0.0-rc.4) --- package.json | 6 +++--- src/index.tsx | 52 +++++++++++++++++++++++++-------------------------- 2 files changed, 28 insertions(+), 30 deletions(-) diff --git a/package.json b/package.json index 9013f4cf..1d49ecb6 100644 --- a/package.json +++ b/package.json @@ -43,9 +43,8 @@ "LICENSE" ], "dependencies": { - "@types/quill": "^1.3.10", - "lodash": "^4.17.4", - "quill": "^1.3.7" + "lodash": "^4.17.21", + "quill": "^2.0.0-rc.4" }, "peerDependencies": { "react": "^16 || ^17 || ^18", @@ -70,6 +69,7 @@ "jsdom-global": "^3.0.2", "mocha": "^6.2.2", "mocha-text-cov": "^0.1.1", + "quill-delta": "^5.1.0", "react": "^16.11.0", "react-dom": "^16.11.0", "react-test-renderer": "^16.11.0", diff --git a/src/index.tsx b/src/index.tsx index f83a11db..1d424744 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -7,14 +7,10 @@ import React from 'react'; import ReactDOM from 'react-dom'; import isEqual from 'lodash/isEqual'; -import Quill, { - QuillOptionsStatic, - DeltaStatic, - RangeStatic, - BoundsStatic, - StringMap, - Sources, -} from 'quill'; +import Quill, { QuillOptions as QuillOptionsStatic } from 'quill'; +import type { EmitterSource as Sources } from 'quill/core/emitter'; +import type { Range as RangeStatic } from 'quill/core/selection'; +import type DeltaStatic from 'quill-delta'; // Merged namespace hack to export types along with default object // See: https://github.com/Microsoft/TypeScript/issues/2719 @@ -23,6 +19,8 @@ namespace ReactQuill { export type Range = RangeStatic | null; export interface QuillOptions extends QuillOptionsStatic { + scrollingContainer?: HTMLElement | string | undefined, + strict?: boolean | undefined, tabIndex?: number, } @@ -33,7 +31,7 @@ namespace ReactQuill { defaultValue?: Value, formats?: string[], id?: string, - modules?: StringMap, + modules?: QuillOptions['modules'], onChange?( value: string, delta: DeltaStatic, @@ -69,12 +67,12 @@ namespace ReactQuill { } export interface UnprivilegedEditor { - getLength(): number; - getText(index?: number, length?: number): string; - getHTML(): string; - getBounds(index: number, length?: number): BoundsStatic; - getSelection(focus?: boolean): RangeStatic; - getContents(index?: number, length?: number): DeltaStatic; + getLength: Quill['getLength']; + getText: Quill['getText']; + getHTML: Quill['getSemanticHTML']; + getBounds: Quill['getBounds']; + getSelection: Quill['getSelection']; + getContents: Quill['getContents']; } } @@ -187,7 +185,7 @@ class ReactQuill extends React.Component { validateProps(props: ReactQuillProps): void { if (React.Children.count(props.children) > 1) throw new Error( 'The Quill editing area can only be composed of a single React element.' - ); + ); if (React.Children.count(props.children)) { const child = React.Children.only(props.children); @@ -199,11 +197,11 @@ class ReactQuill extends React.Component { if ( this.lastDeltaChangeSet && props.value === this.lastDeltaChangeSet - ) throw new Error( - 'You are passing the `delta` object from the `onChange` event back ' + - 'as `value`. You most probably want `editor.getContents()` instead. ' + - 'See: https://github.com/zenoamaro/react-quill#using-deltas' - ); + ) throw new Error( + 'You are passing the `delta` object from the `onChange` event back ' + + 'as `value`. You most probably want `editor.getContents()` instead. ' + + 'See: https://github.com/zenoamaro/react-quill#using-deltas' + ); } shouldComponentUpdate(nextProps: ReactQuillProps, nextState: ReactQuillState) { @@ -328,7 +326,7 @@ class ReactQuill extends React.Component { Creates an editor on the given element. The editor will be passed the configuration, have its events bound, */ - createEditor(element: Element, config: QuillOptions) { + createEditor(element: HTMLElement, config: QuillOptions) { const editor = new Quill(element, config); if (config.tabIndex != null) { this.setEditorTabIndex(editor, config.tabIndex); @@ -384,7 +382,7 @@ class ReactQuill extends React.Component { this.value = value; const sel = this.getEditorSelection(); if (typeof value === 'string') { - editor.setContents(editor.clipboard.convert(value)); + editor.setContents(editor.clipboard.convert({html: value})); } else { editor.setContents(value); } @@ -432,7 +430,7 @@ class ReactQuill extends React.Component { }; } - getEditingArea(): Element { + getEditingArea(): HTMLElement { if (!this.editingArea) { throw new Error('Instantiating on missing editing area'); } @@ -443,7 +441,7 @@ class ReactQuill extends React.Component { if (element.nodeType === 3) { throw new Error('Editing area cannot be a text node'); } - return element as Element; + return element as HTMLElement; } /* @@ -521,8 +519,8 @@ class ReactQuill extends React.Component { // We keep storing the same type of value as what the user gives us, // so that value comparisons will be more stable and predictable. const nextContents = this.isDelta(this.value) - ? editor.getContents() - : editor.getHTML(); + ? editor.getContents() + : editor.getHTML(); if (nextContents !== this.getEditorContents()) { // Taint this `delta` object, so we can recognize whether the user From 7fa062339bd63bac2309c61f111ce14b1afc36ac Mon Sep 17 00:00:00 2001 From: Serhii Mamedov <43890857+Repugraf@users.noreply.github.com> Date: Thu, 4 Apr 2024 15:29:49 +0300 Subject: [PATCH 2/3] Revert formatting of index.tsx --- src/index.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index 1d424744..5fdb0d83 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -185,7 +185,7 @@ class ReactQuill extends React.Component { validateProps(props: ReactQuillProps): void { if (React.Children.count(props.children) > 1) throw new Error( 'The Quill editing area can only be composed of a single React element.' - ); + ); if (React.Children.count(props.children)) { const child = React.Children.only(props.children); @@ -199,8 +199,8 @@ class ReactQuill extends React.Component { props.value === this.lastDeltaChangeSet ) throw new Error( 'You are passing the `delta` object from the `onChange` event back ' + - 'as `value`. You most probably want `editor.getContents()` instead. ' + - 'See: https://github.com/zenoamaro/react-quill#using-deltas' + 'as `value`. You most probably want `editor.getContents()` instead. ' + + 'See: https://github.com/zenoamaro/react-quill#using-deltas' ); } @@ -519,8 +519,8 @@ class ReactQuill extends React.Component { // We keep storing the same type of value as what the user gives us, // so that value comparisons will be more stable and predictable. const nextContents = this.isDelta(this.value) - ? editor.getContents() - : editor.getHTML(); + ? editor.getContents() + : editor.getHTML(); if (nextContents !== this.getEditorContents()) { // Taint this `delta` object, so we can recognize whether the user From 4306740d19f78a88dee554eb7aad0be17021f6c4 Mon Sep 17 00:00:00 2001 From: Serhii Mamedov <43890857+Repugraf@users.noreply.github.com> Date: Thu, 4 Apr 2024 15:32:49 +0300 Subject: [PATCH 3/3] Revert formating of index.tsx --- src/index.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index 5fdb0d83..dca751b8 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -197,11 +197,11 @@ class ReactQuill extends React.Component { if ( this.lastDeltaChangeSet && props.value === this.lastDeltaChangeSet - ) throw new Error( - 'You are passing the `delta` object from the `onChange` event back ' + - 'as `value`. You most probably want `editor.getContents()` instead. ' + - 'See: https://github.com/zenoamaro/react-quill#using-deltas' - ); + ) throw new Error( + 'You are passing the `delta` object from the `onChange` event back ' + + 'as `value`. You most probably want `editor.getContents()` instead. ' + + 'See: https://github.com/zenoamaro/react-quill#using-deltas' + ); } shouldComponentUpdate(nextProps: ReactQuillProps, nextState: ReactQuillState) {