diff --git a/components/lib/editor/Editor.js b/components/lib/editor/Editor.js
index 3dee079913..1d3612d5bf 100644
--- a/components/lib/editor/Editor.js
+++ b/components/lib/editor/Editor.js
@@ -2,6 +2,8 @@ import * as React from 'react';
import { useMountEffect, useUpdateEffect } from '../hooks/Hooks';
import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
+const QuillJS = function() {try {return Quill;} catch {return null;}}();
+
export const Editor = React.memo(React.forwardRef((props, ref) => {
const elementRef = React.useRef(null);
const contentRef = React.useRef(null);
@@ -11,69 +13,84 @@ export const Editor = React.memo(React.forwardRef((props, ref) => {
useMountEffect(() => {
if (!isQuillLoaded.current) {
- import('quill').then((module) => {
- if (module && DomHandler.isExist(contentRef.current)) {
- const configuration = {
- modules: {
- toolbar: props.showHeader ? toolbarRef.current : false,
- ...props.modules
- },
- placeholder: props.placeholder,
- readOnly: props.readOnly,
- theme: props.theme,
- formats: props.formats
- };
-
- if (module.default) {
- // webpack
- quill.current = new module.default(contentRef.current, configuration);
- } else {
- // parceljs
- quill.current = new module(contentRef.current, configuration);
- }
+ const configuration = {
+ modules: {
+ toolbar: props.showHeader ? toolbarRef.current : false,
+ ...props.modules
+ },
+ placeholder: props.placeholder,
+ readOnly: props.readOnly,
+ theme: props.theme,
+ formats: props.formats
+ };
- if (props.value) {
- quill.current.setContents(quill.current.clipboard.convert(props.value));
- }
-
- quill.current.on('text-change', (delta, source) => {
- let firstChild = contentRef.current.children[0];
- let html = firstChild ? firstChild.innerHTML : null;
- let text = quill.current.getText();
- if (html === '
') {
- html = null;
- }
+ if (QuillJS) {
+ // GitHub #3097 loaded by script only
+ quill.current = new Quill(contentRef.current, configuration);
+ initQuill();
- if (props.onTextChange) {
- props.onTextChange({
- htmlValue: html,
- textValue: text,
- delta: delta,
- source: source
- });
- }
- });
-
- quill.current.on('selection-change', (range, oldRange, source) => {
- if (props.onSelectionChange) {
- props.onSelectionChange({
- range: range,
- oldRange: oldRange,
- source: source
- });
- }
- });
- }
- }).then(() => {
if (quill.current && quill.current.getModule('toolbar')) {
props.onLoad && props.onLoad(quill.current);
}
- });
+ }
+ else {
+ import('quill').then((module) => {
+ if (module && DomHandler.isExist(contentRef.current)) {
+ if (module.default) {
+ // webpack
+ quill.current = new module.default(contentRef.current, configuration);
+ } else {
+ // parceljs
+ quill.current = new module(contentRef.current, configuration);
+ }
+
+ initQuill();
+ }
+ }).then(() => {
+ if (quill.current && quill.current.getModule('toolbar')) {
+ props.onLoad && props.onLoad(quill.current);
+ }
+ });
+ }
isQuillLoaded.current = true;
}
});
+ const initQuill = () => {
+ if (props.value) {
+ quill.current.setContents(quill.current.clipboard.convert(props.value));
+ }
+
+ quill.current.on('text-change', (delta, source) => {
+ let firstChild = contentRef.current.children[0];
+ let html = firstChild ? firstChild.innerHTML : null;
+ let text = quill.current.getText();
+ if (html === '
') {
+ html = null;
+ }
+
+ if (props.onTextChange) {
+ props.onTextChange({
+ htmlValue: html,
+ textValue: text,
+ delta: delta,
+ source: source
+ });
+ }
+ });
+
+ quill.current.on('selection-change', (range, oldRange, source) => {
+ if (props.onSelectionChange) {
+ props.onSelectionChange({
+ range: range,
+ oldRange: oldRange,
+ source: source
+ });
+ }
+ });
+ }
+
useUpdateEffect(() => {
if (quill.current && !quill.current.hasFocus()) {
props.value ?