From e6e1baafe984a4ca5f39aa2c26bc705fc08fd93c Mon Sep 17 00:00:00 2001 From: robertu <4065233+robertu7@users.noreply.github.com> Date: Fri, 30 Dec 2022 11:25:11 +0800 Subject: [PATCH 1/3] feat: import Quill from quill instead of react-quill --- demo/index.tsx | 4 ++-- package-lock.json | 26 +++++++++++++------------- package.json | 2 +- src/article.tsx | 7 +++---- src/blots/AudioFigure.ts | 2 +- src/blots/BaseBlockEmbed.ts | 2 +- src/blots/Divider.ts | 2 +- src/blots/EmbedClipboard.ts | 2 +- src/blots/EmbedCode.ts | 2 +- src/blots/EmbedVideo.ts | 2 +- src/blots/Figcaption.ts | 2 +- src/blots/ImageFigure.ts | 2 +- src/blots/Mention.ts | 2 +- src/blots/SmartBreak.ts | 2 +- src/blots/Source.ts | 2 +- src/blots/Tag.ts | 2 +- src/blots/Util.ts | 2 +- src/comment.tsx | 2 +- src/components/Toolbar/index.tsx | 2 +- src/matchers/createImage.ts | 2 +- src/matchers/lineBreaker.ts | 2 +- src/modules/clipboard.ts | 7 ++++--- 22 files changed, 40 insertions(+), 40 deletions(-) diff --git a/demo/index.tsx b/demo/index.tsx index d88a68e3..de97087b 100644 --- a/demo/index.tsx +++ b/demo/index.tsx @@ -97,7 +97,7 @@ const App = () => { titleDefaultValue="" titleReadOnly={false} /> - + {/*
{ texts={{ COMMENT_PLACEHOLDER: 'custom placeholder\nand line break', }} - /> + /> */} ) } diff --git a/package-lock.json b/package-lock.json index 93207d12..eba3351c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@matters/matters-editor", - "version": "0.1.27", + "version": "0.1.27-alpha.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@matters/matters-editor", - "version": "0.1.27", + "version": "0.1.27-alpha.0", "license": "MIT", "dependencies": { "autosize": "^4.0.2", @@ -19,7 +19,7 @@ "@tippyjs/react": "^4.0.4", "@types/classnames": "^2.2.10", "@types/lodash": "^4.14.191", - "@types/quill": "^2.0.3", + "@types/quill": "^2.0.10", "@types/react": "^18.0.26", "@types/react-dom": "^18.0.10", "@types/uuid": "^9.0.0", @@ -2036,9 +2036,9 @@ "dev": true }, "node_modules/@types/quill": { - "version": "2.0.9", - "resolved": "https://registry.npmjs.org/@types/quill/-/quill-2.0.9.tgz", - "integrity": "sha512-/n40Ypp+jF3GDLqB/5z1P+Odq1K98txXbBgRDkG6Z90LGC1AwQPtZWNeOdDg0yUlgBSUASmpeDn3eBPUuPXtuw==", + "version": "2.0.10", + "resolved": "https://registry.npmjs.org/@types/quill/-/quill-2.0.10.tgz", + "integrity": "sha512-L6OHONEj2v4NRbWQOsn7j1N0SyzhRR3M4g1M6j/uuIwIsIW2ShWHhwbqNvH8hSmVktzqu0lITfdnqVOQ4qkrhA==", "dev": true, "dependencies": { "parchment": "^1.1.2", @@ -5616,13 +5616,13 @@ "node_modules/lodash.clonedeep": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz", - "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=", + "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==", "dev": true }, "node_modules/lodash.isequal": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", - "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=", + "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==", "dev": true }, "node_modules/lodash.memoize": { @@ -12000,9 +12000,9 @@ "dev": true }, "@types/quill": { - "version": "2.0.9", - "resolved": "https://registry.npmjs.org/@types/quill/-/quill-2.0.9.tgz", - "integrity": "sha512-/n40Ypp+jF3GDLqB/5z1P+Odq1K98txXbBgRDkG6Z90LGC1AwQPtZWNeOdDg0yUlgBSUASmpeDn3eBPUuPXtuw==", + "version": "2.0.10", + "resolved": "https://registry.npmjs.org/@types/quill/-/quill-2.0.10.tgz", + "integrity": "sha512-L6OHONEj2v4NRbWQOsn7j1N0SyzhRR3M4g1M6j/uuIwIsIW2ShWHhwbqNvH8hSmVktzqu0lITfdnqVOQ4qkrhA==", "dev": true, "requires": { "parchment": "^1.1.2", @@ -14676,13 +14676,13 @@ "lodash.clonedeep": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz", - "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=", + "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==", "dev": true }, "lodash.isequal": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", - "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=", + "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==", "dev": true }, "lodash.memoize": { diff --git a/package.json b/package.json index 18dbdf27..430a1ec2 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ "@tippyjs/react": "^4.0.4", "@types/classnames": "^2.2.10", "@types/lodash": "^4.14.191", - "@types/quill": "^2.0.3", + "@types/quill": "^2.0.10", "@types/react": "^18.0.26", "@types/react-dom": "^18.0.10", "@types/uuid": "^9.0.0", diff --git a/src/article.tsx b/src/article.tsx index b635561c..7b3cb25b 100644 --- a/src/article.tsx +++ b/src/article.tsx @@ -1,7 +1,7 @@ import _debounce from 'lodash/debounce' -import Quill from 'quill' import React from 'react' import ReactQuill from 'react-quill' +import Quill from 'quill' import Util from './blots/Util' import MattersEditorMention from './components/Mention' @@ -92,7 +92,7 @@ export class MattersArticleEditor extends React.Component { initAudioPlayers() // set init text - this.initText = this.instance.getText() || '' + this.initText = this.instance?.getText() || '' } componentDidUpdate(prevProps: Props, prevState: State) { @@ -233,8 +233,7 @@ export class MattersArticleEditor extends React.Component { texts: this.texts, }, mention: { - mentionContainer: - this.mentionReference && this.mentionReference.current, + mentionContainer: this.mentionReference.current, handleMentionChange: this.handleMentionChange, storeMentionInstance: this.storeMentionInstance, }, diff --git a/src/blots/AudioFigure.ts b/src/blots/AudioFigure.ts index a0e8f3c4..55793068 100644 --- a/src/blots/AudioFigure.ts +++ b/src/blots/AudioFigure.ts @@ -1,4 +1,4 @@ -import { Quill } from 'react-quill' +import Quill from 'quill' import BaseBlockEmbed from './BaseBlockEmbed' diff --git a/src/blots/BaseBlockEmbed.ts b/src/blots/BaseBlockEmbed.ts index 708de78b..7ea45fcf 100644 --- a/src/blots/BaseBlockEmbed.ts +++ b/src/blots/BaseBlockEmbed.ts @@ -1,4 +1,4 @@ -import { Quill } from 'react-quill' +import Quill from 'quill' const Parchment = Quill.import('parchment') const BlockEmbed = Quill.import('blots/block/embed') diff --git a/src/blots/Divider.ts b/src/blots/Divider.ts index b78a238f..41f9b3d0 100644 --- a/src/blots/Divider.ts +++ b/src/blots/Divider.ts @@ -1,4 +1,4 @@ -import { Quill } from 'react-quill' +import Quill from 'quill' import BaseBlockEmbed from './BaseBlockEmbed' diff --git a/src/blots/EmbedClipboard.ts b/src/blots/EmbedClipboard.ts index e3e0ed35..4793f015 100644 --- a/src/blots/EmbedClipboard.ts +++ b/src/blots/EmbedClipboard.ts @@ -1,4 +1,4 @@ -import { Quill } from 'react-quill' +import Quill from 'quill' import { COLOR, KEYCODES, URL_LIKE_BUTTON } from '../enums/common' import { TEXT } from '../enums/text' diff --git a/src/blots/EmbedCode.ts b/src/blots/EmbedCode.ts index 2a802982..8ef3f37e 100644 --- a/src/blots/EmbedCode.ts +++ b/src/blots/EmbedCode.ts @@ -1,4 +1,4 @@ -import { Quill } from 'react-quill' +import Quill from 'quill' import BaseBlockEmbed from './BaseBlockEmbed' diff --git a/src/blots/EmbedVideo.ts b/src/blots/EmbedVideo.ts index da5fa2b7..90245a20 100644 --- a/src/blots/EmbedVideo.ts +++ b/src/blots/EmbedVideo.ts @@ -1,4 +1,4 @@ -import { Quill } from 'react-quill' +import Quill from 'quill' import BaseBlockEmbed from './BaseBlockEmbed' diff --git a/src/blots/Figcaption.ts b/src/blots/Figcaption.ts index bbbb7308..731582ee 100644 --- a/src/blots/Figcaption.ts +++ b/src/blots/Figcaption.ts @@ -1,4 +1,4 @@ -import { Quill } from 'react-quill' +import Quill from 'quill' import BaseBlockEmbed from './BaseBlockEmbed' diff --git a/src/blots/ImageFigure.ts b/src/blots/ImageFigure.ts index 4f014dc8..f8545ccd 100644 --- a/src/blots/ImageFigure.ts +++ b/src/blots/ImageFigure.ts @@ -1,4 +1,4 @@ -import { Quill } from 'react-quill' +import Quill from 'quill' import BaseBlockEmbed from './BaseBlockEmbed' diff --git a/src/blots/Mention.ts b/src/blots/Mention.ts index a5e002a7..f5ddc862 100644 --- a/src/blots/Mention.ts +++ b/src/blots/Mention.ts @@ -1,4 +1,4 @@ -import { Quill } from 'react-quill' +import Quill from 'quill' const Embed = Quill.import('blots/embed') diff --git a/src/blots/SmartBreak.ts b/src/blots/SmartBreak.ts index ebc40b44..a0a7504b 100644 --- a/src/blots/SmartBreak.ts +++ b/src/blots/SmartBreak.ts @@ -1,4 +1,4 @@ -import { Quill } from 'react-quill' +import Quill from 'quill' const Embed = Quill.import('blots/embed') diff --git a/src/blots/Source.ts b/src/blots/Source.ts index 109103f7..3641f31b 100644 --- a/src/blots/Source.ts +++ b/src/blots/Source.ts @@ -1,4 +1,4 @@ -import { Quill } from 'react-quill' +import Quill from 'quill' const BlockEmbed = Quill.import('blots/block/embed') diff --git a/src/blots/Tag.ts b/src/blots/Tag.ts index 4e52009d..f9c3e92d 100644 --- a/src/blots/Tag.ts +++ b/src/blots/Tag.ts @@ -1,4 +1,4 @@ -import { Quill } from 'react-quill' +import Quill from 'quill' const Embed = Quill.import('blots/embed') diff --git a/src/blots/Util.ts b/src/blots/Util.ts index efe29f48..80bb19ac 100644 --- a/src/blots/Util.ts +++ b/src/blots/Util.ts @@ -1,4 +1,4 @@ -import { Quill } from 'react-quill' +import Quill from 'quill' const Embed = Quill.import('blots/embed') diff --git a/src/comment.tsx b/src/comment.tsx index 7d833171..acf39303 100644 --- a/src/comment.tsx +++ b/src/comment.tsx @@ -1,6 +1,6 @@ import _debounce from 'lodash/debounce' -import Quill from 'quill' import React from 'react' +import Quill from 'quill' import ReactQuill from 'react-quill' import MattersEditorMention from './components/Mention' diff --git a/src/components/Toolbar/index.tsx b/src/components/Toolbar/index.tsx index e462327a..f96f4ec3 100644 --- a/src/components/Toolbar/index.tsx +++ b/src/components/Toolbar/index.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames' -import Quill from 'quill' import React from 'react' +import Quill from 'quill' import { Texts } from '../../enums/text' import SVGToolbarAdd from '../../icons/ToolbarAdd' diff --git a/src/matchers/createImage.ts b/src/matchers/createImage.ts index 3d9ea0ca..d988c2ad 100644 --- a/src/matchers/createImage.ts +++ b/src/matchers/createImage.ts @@ -1,4 +1,4 @@ -import { Quill } from 'react-quill' +import Quill from 'quill' //import IMAGE_PLACEHOLDER from '~/static/images/image-placeholder.svg' diff --git a/src/matchers/lineBreaker.ts b/src/matchers/lineBreaker.ts index c05c8acc..abb56a97 100644 --- a/src/matchers/lineBreaker.ts +++ b/src/matchers/lineBreaker.ts @@ -1,4 +1,4 @@ -import { Quill } from 'react-quill' +import Quill from 'quill' const Delta = Quill.import('delta') diff --git a/src/modules/clipboard.ts b/src/modules/clipboard.ts index a17d8490..158a6f86 100644 --- a/src/modules/clipboard.ts +++ b/src/modules/clipboard.ts @@ -1,4 +1,4 @@ -import { Quill } from 'react-quill' +import Quill from 'quill' // import { docsSoap } from 'docs-soap' import { soap } from '../utils/soap' @@ -61,9 +61,10 @@ class RemadeClipboard extends Clipboard { delta.insert(text, { [CodeBlock.blotName]: formats[CodeBlock.blotName], }) - } else if (!clipboardData.types.includes("text/html") || !htmlRaw) { + } else if (!clipboardData.types.includes('text/html') || !htmlRaw) { delta.insert(text) - } else { // text/html + } else { + // text/html // add image matcher only when pasting html this.addMatcher('IMG', createImageMatcher(this.upload)) From e7d44c7084100a8fd738d93a7576bb17e959a86f Mon Sep 17 00:00:00 2001 From: robertu <4065233+robertu7@users.noreply.github.com> Date: Fri, 30 Dec 2022 12:38:39 +0800 Subject: [PATCH 2/3] fix: force update state to trigger re-rendering --- package.json | 2 +- src/article.tsx | 31 ++++++++++++++++++------------- src/components/Mention/index.tsx | 10 +++++++--- src/utils/soap.ts | 15 ++++++++------- 4 files changed, 34 insertions(+), 24 deletions(-) diff --git a/package.json b/package.json index 430a1ec2..84520aeb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@matters/matters-editor", - "version": "0.1.27-alpha.0", + "version": "0.1.27-alpha.1", "description": "The editor component.", "author": "https://github.com/thematters", "homepage": "https://github.com/thematters/matters-editor", diff --git a/src/article.tsx b/src/article.tsx index 7b3cb25b..59fd2faf 100644 --- a/src/article.tsx +++ b/src/article.tsx @@ -97,6 +97,7 @@ export class MattersArticleEditor extends React.Component { componentDidUpdate(prevProps: Props, prevState: State) { this.instance = this.initQuillInstance() + this.resetLinkInputPlaceholder() initAudioPlayers() @@ -260,19 +261,21 @@ export class MattersArticleEditor extends React.Component { update={this.props.editorUpdate} />
- + {this.mentionReference.current && ( + + )} { mentionSelection={this.handleMentionSelection} mentionUsers={this.props.mentionUsers} reference={this.mentionReference} + // FIXME: force update state to re-render + onMount={() => this.setState({ content: this.state.content })} />
diff --git a/src/components/Mention/index.tsx b/src/components/Mention/index.tsx index 1e9b4060..5adc58c2 100644 --- a/src/components/Mention/index.tsx +++ b/src/components/Mention/index.tsx @@ -1,6 +1,4 @@ -import React from 'react' - -import SVGSpinner from '../../icons/Spinner' +import React, { useEffect } from 'react' /** * This component is a mention list container which will be visible when typing `@`. @@ -20,6 +18,7 @@ interface Props { mentionSelection: any mentionUsers: any[] reference: React.RefObject + onMount: () => any } export default ({ @@ -28,9 +27,14 @@ export default ({ mentionSelection, mentionUsers, reference, + onMount, }: Props) => { const hasMention = mentionUsers.length <= 0 && !mentionLoading + useEffect(() => { + onMount() + }, []) + return (
{hasMention diff --git a/src/utils/soap.ts b/src/utils/soap.ts index 2f806d2d..c69cecfe 100644 --- a/src/utils/soap.ts +++ b/src/utils/soap.ts @@ -5,21 +5,22 @@ const docsId = /id="docs\-internal\-guid/ // for copying from GoogleDoc export function soap(html: string) { - if (!html.match(docsId)) return html const doc = parseHTML(html) // GoogleDoc seems always wrap the clipboard under a `` tag with "font-weight:normal;" // ... - if (doc?.children?.length > 0 - && doc.children[0] instanceof Node - && doc.children[0].nodeType === Node.ELEMENT_NODE + if ( + doc?.children?.length > 0 && + doc.children[0] instanceof Node && + doc.children[0].nodeType === Node.ELEMENT_NODE ) { const node = doc.children[0] as HTMLElement - if (node.tagName === 'B' - && node.style?.fontWeight === 'normal' - && node.id?.match(/^docs-internal-guid-/) + if ( + node.tagName === 'B' && + node.style?.fontWeight === 'normal' && + node.id?.match(/^docs-internal-guid-/) ) { const body = document.createElement('body') body.append(...node.children) From 21a1e3d7772f75b9b667a0d74c70dd2f30b27c69 Mon Sep 17 00:00:00 2001 From: robertu <4065233+robertu7@users.noreply.github.com> Date: Fri, 30 Dec 2022 12:40:47 +0800 Subject: [PATCH 3/3] fix: force update state to re-render --- demo/index.tsx | 4 ++-- src/article.tsx | 4 ++-- src/comment.tsx | 31 +++++++++++++++++-------------- 3 files changed, 21 insertions(+), 18 deletions(-) diff --git a/demo/index.tsx b/demo/index.tsx index de97087b..d88a68e3 100644 --- a/demo/index.tsx +++ b/demo/index.tsx @@ -97,7 +97,7 @@ const App = () => { titleDefaultValue="" titleReadOnly={false} /> - {/* +
{ texts={{ COMMENT_PLACEHOLDER: 'custom placeholder\nand line break', }} - /> */} + /> ) } diff --git a/src/article.tsx b/src/article.tsx index 59fd2faf..15a4041f 100644 --- a/src/article.tsx +++ b/src/article.tsx @@ -234,7 +234,7 @@ export class MattersArticleEditor extends React.Component { texts: this.texts, }, mention: { - mentionContainer: this.mentionReference.current, + mentionContainer: this.mentionReference?.current, handleMentionChange: this.handleMentionChange, storeMentionInstance: this.storeMentionInstance, }, @@ -261,7 +261,7 @@ export class MattersArticleEditor extends React.Component { update={this.props.editorUpdate} />
- {this.mentionReference.current && ( + {this.mentionReference?.current && ( { const modulesConfig = { ...MODULE_CONFIG, mention: { - mentionContainer: - this.mentionReference && this.mentionReference.current, + mentionContainer: this.mentionReference?.current, handleMentionChange: this.handleMentionChange, storeMentionInstance: this.storeMentionInstance, }, @@ -123,18 +122,20 @@ export class MattersCommentEditor extends React.Component { return ( <>
- + {this.mentionReference?.current && ( + + )} { mentionSelection={this.handleMentionSelection} mentionUsers={this.props.mentionUsers} reference={this.mentionReference} + // FIXME: force update state to re-render + onMount={() => this.setState({ content: this.state.content })} />