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..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", @@ -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..15a4041f 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,11 +92,12 @@ 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) { this.instance = this.initQuillInstance() + this.resetLinkInputPlaceholder() initAudioPlayers() @@ -233,8 +234,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, }, @@ -261,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/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..9c53cf8b 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' @@ -113,8 +113,7 @@ export class MattersCommentEditor extends React.Component { 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 })} />
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/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)) 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)