v1.6.0: add custom divider & update quill@2.0.2 & setting 6 default d…

…ividers
ludejun · Jun 5, 2024 · 281b2c4 · 281b2c4
1 parent 614c293
commit 281b2c4
Show file tree

Hide file tree

Showing 31 changed files with 818 additions and 205 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Change-Log
 
+### 1.6.0
+- quill升级到2.0.2
+- 添加自定义Divider格式，设置多个默认分割线，允许保存Delta及重新渲染
+
 ### 1.5.9
 - 添加保存快捷键回调
 - quill升级到2.0.1

diff --git a/assets/icons/divider.svg b/assets/icons/divider.svg
diff --git a/assets/toolbar.less b/assets/toolbar.less
@@ -4,14 +4,24 @@
 .ql-toolbar {
   position: relative;
 }
-.ql-table-dialog {
+.ql-toolbar-dialog {
   position: absolute;
   display: flex;
   flex-direction: column;
   z-index: 10;
   border: 1px solid @editor-border;
   background-color: #fff;
   padding: 8px;
+  font-size: 14px;
+}
+.ql-table-dialog {
+  // position: absolute;
+  // display: flex;
+  // flex-direction: column;
+  // z-index: 10;
+  // border: 1px solid @editor-border;
+  // background-color: #fff;
+  // padding: 8px;
 
   .table-dialog-tr {
     display: flex;
@@ -42,15 +52,15 @@
 }
 // image upload dialog
 .ql-image-dialog {
-  position: absolute;
-   display: flex;
-  flex-direction: column;
-  z-index: 10;
-  border: 1px solid @editor-border;
-  background-color: #fff;
-  padding: 8px;
+  // position: absolute;
+  //  display: flex;
+  // flex-direction: column;
+  // z-index: 10;
+  // border: 1px solid @editor-border;
+  // background-color: #fff;
+  // padding: 8px;
   width: 280px;
-  font-size: 14px;
+  // font-size: 14px;
 
   input.ql-image-upload {
     display: none;
@@ -62,8 +72,9 @@
     border-radius: 4px;
     color: #fff;
   }
-  button.local-image:hover, button.local-image:focus {
-    color: #fff
+  button.local-image:hover,
+  button.local-image:focus {
+    color: #fff;
   }
   .url-label {
     margin: 12px 0 5px;
@@ -74,7 +85,7 @@
     display: flex;
     align-items: center;
     margin-bottom: 10px;
-    input[type=text] {
+    input[type='text'] {
       flex: 1;
       padding: 6px;
     }
@@ -84,4 +95,26 @@
       color: @primary-color;
     }
   }
-}
+}
+.ql-divider-dialog {
+  width: 200px;
+  .divider-item {
+    height: 20px;
+  }
+  .divider-item:hover {
+    background-color: #eee;
+    cursor: pointer;
+  }
+  .divider-setting {
+    margin-top: 10px;
+    align-items: center;
+    label {
+      white-space: nowrap;
+    }
+  }
+  .divider-color {
+    margin-left: 4px;
+    flex: 1;
+    min-width: 60px;
+  }
+}
diff --git a/dist/quill-react-commercial.min.css b/dist/quill-react-commercial.min.css
@@ -104,7 +104,7 @@ XCode style (c) Angel Garcia <angelgarcia.mail@gmail.com>
 }
 
 /*!
- * Quill Editor v2.0.1
+ * Quill Editor v2.0.2
  * https://quilljs.com
  * Copyright (c) 2017-2024, Slab
  * Copyright (c) 2014, Jason Chen
@@ -544,14 +544,15 @@ table.quill-better-table tr:first-child {
 .ql-toolbar {
   position: relative;
 }
-.ql-table-dialog {
+.ql-toolbar-dialog {
   position: absolute;
   display: flex;
   flex-direction: column;
   z-index: 10;
   border: 1px solid #e7e7e7;
   background-color: #fff;
   padding: 8px;
+  font-size: 14px;
 }
 .ql-table-dialog .table-dialog-tr {
   display: flex;
@@ -580,15 +581,7 @@ table.quill-better-table tr:first-child {
   color: #999;
 }
 .ql-image-dialog {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  z-index: 10;
-  border: 1px solid #e7e7e7;
-  background-color: #fff;
-  padding: 8px;
   width: 280px;
-  font-size: 14px;
 }
 .ql-image-dialog input.ql-image-upload {
   display: none;
@@ -614,7 +607,7 @@ table.quill-better-table tr:first-child {
   align-items: center;
   margin-bottom: 10px;
 }
-.ql-image-dialog .image-url-form input[type=text] {
+.ql-image-dialog .image-url-form input[type='text'] {
   flex: 1;
   padding: 6px;
 }
@@ -623,3 +616,25 @@ table.quill-better-table tr:first-child {
   margin-left: 10px;
   color: #6918b4;
 }
+.ql-divider-dialog {
+  width: 200px;
+}
+.ql-divider-dialog .divider-item {
+  height: 20px;
+}
+.ql-divider-dialog .divider-item:hover {
+  background-color: #eee;
+  cursor: pointer;
+}
+.ql-divider-dialog .divider-setting {
+  margin-top: 10px;
+  align-items: center;
+}
+.ql-divider-dialog .divider-setting label {
+  white-space: nowrap;
+}
+.ql-divider-dialog .divider-color {
+  margin-left: 4px;
+  flex: 1;
+  min-width: 60px;
+}
diff --git a/dist/quill-react-commercial.min.js b/dist/quill-react-commercial.min.js
diff --git a/dist/quill-react-commercial.min.js.map b/dist/quill-react-commercial.min.js.map
diff --git a/example/quill-react-commercial.min.css b/example/quill-react-commercial.min.css
@@ -104,7 +104,7 @@ XCode style (c) Angel Garcia <angelgarcia.mail@gmail.com>
 }
 
 /*!
- * Quill Editor v2.0.1
+ * Quill Editor v2.0.2
  * https://quilljs.com
  * Copyright (c) 2017-2024, Slab
  * Copyright (c) 2014, Jason Chen
@@ -544,14 +544,15 @@ table.quill-better-table tr:first-child {
 .ql-toolbar {
   position: relative;
 }
-.ql-table-dialog {
+.ql-toolbar-dialog {
   position: absolute;
   display: flex;
   flex-direction: column;
   z-index: 10;
   border: 1px solid #e7e7e7;
   background-color: #fff;
   padding: 8px;
+  font-size: 14px;
 }
 .ql-table-dialog .table-dialog-tr {
   display: flex;
@@ -580,15 +581,7 @@ table.quill-better-table tr:first-child {
   color: #999;
 }
 .ql-image-dialog {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  z-index: 10;
-  border: 1px solid #e7e7e7;
-  background-color: #fff;
-  padding: 8px;
   width: 280px;
-  font-size: 14px;
 }
 .ql-image-dialog input.ql-image-upload {
   display: none;
@@ -614,7 +607,7 @@ table.quill-better-table tr:first-child {
   align-items: center;
   margin-bottom: 10px;
 }
-.ql-image-dialog .image-url-form input[type=text] {
+.ql-image-dialog .image-url-form input[type='text'] {
   flex: 1;
   padding: 6px;
 }
@@ -623,3 +616,25 @@ table.quill-better-table tr:first-child {
   margin-left: 10px;
   color: #6918b4;
 }
+.ql-divider-dialog {
+  width: 200px;
+}
+.ql-divider-dialog .divider-item {
+  height: 20px;
+}
+.ql-divider-dialog .divider-item:hover {
+  background-color: #eee;
+  cursor: pointer;
+}
+.ql-divider-dialog .divider-setting {
+  margin-top: 10px;
+  align-items: center;
+}
+.ql-divider-dialog .divider-setting label {
+  white-space: nowrap;
+}
+.ql-divider-dialog .divider-color {
+  margin-left: 4px;
+  flex: 1;
+  min-width: 60px;
+}
diff --git a/example/quill-react-commercial.min.js b/example/quill-react-commercial.min.js
diff --git a/i18n.ts b/i18n.ts
@@ -11,6 +11,7 @@ export const i18nConfig = {
     iamgeDialogInsert: 'Insert',
     imageDialogTypeErr: 'File type is error, please upload again!',
     imageDialogSizeErr: 'Image size cannot exceed $M',
+    dividerDialogColorLabel: 'Primary Color:',
 
     placeholder: 'Start Note(Support input markdown)...',
     alignLeft: 'Left align',
@@ -43,6 +44,7 @@ export const i18nConfig = {
     iamgeDialogInsert: '插入',
     imageDialogTypeErr: '图片格式错误，请重新上传！',
     imageDialogSizeErr: '图片大小不能超过$M',
+    dividerDialogColorLabel: '主色：',
 
     placeholder: '开始笔记（支持直接Markdown输入）...',
     alignLeft: '居左',

diff --git a/index.tsx b/index.tsx
@@ -24,6 +24,7 @@ import { optionDisableToggle, setContent, throttle } from './utils';
 import { getI18nText, i18nConfig } from './i18n';
 import IconUndo from 'quill/assets/icons/undo.svg';
 import IconRedo from 'quill/assets/icons/redo.svg';
+import IconDivider from './assets/icons/divider.svg';
 import 'quill/dist/quill.snow.css';
 import './assets/richTextEditor.less';
 import './assets/modules.less';
@@ -116,6 +117,7 @@ const RichTextEditor: FC<IEditorProps> = (props) => {
       };
       qSyntax?: any;
       codeHandler?: boolean | string;
+      dividerHandler?: boolean | {};
     }
   >({});
   const toolbarHandlers = useRef<Record<string, unknown>>({});
@@ -259,6 +261,7 @@ const RichTextEditor: FC<IEditorProps> = (props) => {
       quillModules.current.codeHandler = true;
       toolbarHandlers.current.undo = () => undoHandler(quillRef.current!);
       toolbarHandlers.current.redo = () => redoHandler(quillRef.current!);
+      quillModules.current.dividerHandler = {i18n};
     }
 
     // 设置自定义字体/大小
@@ -292,6 +295,7 @@ const RichTextEditor: FC<IEditorProps> = (props) => {
     const icons = Quill.import('ui/icons');
     icons.undo = IconUndo;
     icons.redo = IconRedo;
+    icons.divider = IconDivider;
   }, [modules]);
 
   useEffect(() => {
@@ -352,6 +356,7 @@ const RichTextEditor: FC<IEditorProps> = (props) => {
         { script: 'sub' },
         { script: 'super' },
         quillModules.current['better-table'] ? 'table' : undefined,
+        'divider'
       ],
     ];
 

diff --git a/lib/i18n.d.ts b/lib/i18n.d.ts
@@ -11,6 +11,7 @@ export declare const i18nConfig: {
         iamgeDialogInsert: string;
         imageDialogTypeErr: string;
         imageDialogSizeErr: string;
+        dividerDialogColorLabel: string;
         placeholder: string;
         alignLeft: string;
         alignRight: string;
@@ -40,6 +41,7 @@ export declare const i18nConfig: {
         iamgeDialogInsert: string;
         imageDialogTypeErr: string;
         imageDialogSizeErr: string;
+        dividerDialogColorLabel: string;
         placeholder: string;
         alignLeft: string;
         alignRight: string;