v1.5.3:修复readOnly控制失效Bug

CHANGELOG.md

@@ -1,5 +1,7 @@
 # Change-Log
 
+### 1.5.3
+- 修复readOnly控制失效Bug
 ### 1.5.2
 - 重写ListItem，有序列表可以从任意数字开始，并能保存到Delta中
 - 修复Link tooltip不显示文本和URL的bug

index.tsx

@@ -102,7 +102,7 @@ interface IEditorProps {
 }
 
 const RichTextEditor: FC<IEditorProps> = (props) => {
-  const { modules = {}, content, i18n = 'en', style = {} } = props;
+  const { modules = {}, content, i18n = 'en', style = {}, readOnly = false } = props;
   const quillModules = useRef<
     IModules & {
       'better-table'?: Record<string, unknown>;
@@ -294,7 +294,7 @@ const RichTextEditor: FC<IEditorProps> = (props) => {
   }, [modules]);
 
   useEffect(() => {
-    const { placeholder, getQuill, readOnly = false, onChange, onFocus, onBlur } = props;
+    const { placeholder, getQuill, onChange, onFocus, onBlur } = props;
     if (quillModules.current['better-table']) {
       Quill.register(
         {
@@ -466,6 +466,16 @@ const RichTextEditor: FC<IEditorProps> = (props) => {
     }
   }, [content]);
 
+  useEffect(() => {
+    if (quillRef.current) {
+      if (readOnly) {
+        quillRef.current.enable(false);
+      } else {
+        quillRef.current.enable();
+      }
+    }
+  }, [readOnly]);
+
   return (
     <div className="ql-editor-container" style={style}>
       <div id={`editor${editorId.current}`} />

lib/index.js

@@ -21,7 +21,7 @@ var quillBetterTable = require('./modules/quill-better-table/quill-better-table.
 var keyboard = require('./modules/keyboard.js');
 
 var RichTextEditor = function (props) {
-    var _a = props.modules, modules = _a === void 0 ? {} : _a, content = props.content, _b = props.i18n, i18n$1 = _b === void 0 ? 'en' : _b, _c = props.style, style = _c === void 0 ? {} : _c;
+    var _a = props.modules, modules = _a === void 0 ? {} : _a, content = props.content, _b = props.i18n, i18n$1 = _b === void 0 ? 'en' : _b, _c = props.style, style = _c === void 0 ? {} : _c, _d = props.readOnly, readOnly = _d === void 0 ? false : _d;
     var quillModules = React.useRef({});
     var toolbarHandlers = React.useRef({});
     var quillRef = React.useRef();
@@ -163,7 +163,7 @@ var RichTextEditor = function (props) {
         icons.redo = redo.default;
     }, [modules]);
     React.useEffect(function () {
-        var placeholder = props.placeholder, getQuill = props.getQuill, _a = props.readOnly, readOnly = _a === void 0 ? false : _a, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur;
+        var placeholder = props.placeholder, getQuill = props.getQuill, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur;
         if (quillModules.current['better-table']) {
             quill.default.register({
                 'modules/better-table': quillBetterTable.default,
@@ -292,6 +292,16 @@ var RichTextEditor = function (props) {
             utils.setContent(content, quillRef.current);
         }
     }, [content]);
+    React.useEffect(function () {
+        if (quillRef.current) {
+            if (readOnly) {
+                quillRef.current.enable(false);
+            }
+            else {
+                quillRef.current.enable();
+            }
+        }
+    }, [readOnly]);
     return (React.createElement("div", { className: "ql-editor-container", style: style },
         React.createElement("div", { id: "editor" + editorId.current })));
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "quill-react-commercial",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "description": "A Quill component for React and more maturely.",
   "type": "commonjs",
   "main": "lib/index.js",

readme_CN.md

@@ -274,6 +274,7 @@ import 'highlight.js/styles/darcula.css';
 
 
 ### 剩余已知bug或体验优化，需要你的帮助
+- 改变selection文字颜色时，编辑器会自动滚到顶部
 - 复制文章中的图片处理
 - table中不能插入list、header、blockquote、code-block，尝试允许
 - 图片截取