Merge remote-tracking branch 'origin/develop' into develop

src/pages/Memory/components/Quill.tsx → src/pages/Memory/components/MyQuill.tsx

@@ -14,7 +14,7 @@ export interface Props {
 const modules = {
   toolbar: [
     [{'header': [1, 2, false]}, 'bold', 'italic', 'blockquote', 'code-block', 'link'],
-    [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}, 'image'],
+    [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}, 'image','video'],
   ],
 };
 
@@ -22,10 +22,10 @@ const formats = [
   'header',
   'bold', 'italic', 'underline', 'strike', 'blockquote', 'code-block',
   'list', 'bullet', 'indent',
-  'link', 'image'
+  'link', 'image','video'
 ];
 
-const Quill: React.FC<Props> = (props) => {
+const MyQuill: React.FC<Props> = (props) => {
   const {
     value,
     onChange,
@@ -36,7 +36,7 @@ const Quill: React.FC<Props> = (props) => {
 
   return (
     <ReactQuill
-      className={styles.customImg}
+      className={styles.customEdit}
       readOnly={readonly}
       theme={theme}
       modules={modules}
@@ -47,4 +47,4 @@ const Quill: React.FC<Props> = (props) => {
   );
 };
 
-export default Quill;
+export default MyQuill;

src/pages/Memory/components/UpdateForm.tsx

@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from 'react';
 import {Button, message, Modal} from 'antd';
-import Quill from '@/pages/Memory/components/Quill';
+import MyQuill from '@/pages/Memory/components/MyQuill';
 import service from '@/pages/Memory/service';
 import {useSingleState} from 'nice-hooks';
 import {getTextFromHtml} from '@/utils/utils';
@@ -153,7 +153,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
     >
       <div>
         <h4>正面</h4>
-        <Quill
+        <MyQuill
           theme="snow"
           readonly={false}
           onChange={(value) => {
@@ -166,7 +166,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
 
         <p/>
         <h4>反面</h4>
-        <Quill
+        <MyQuill
           theme="snow"
           readonly={false}
           onChange={(value) => {

src/pages/Memory/index.less

@@ -1,33 +1,42 @@
-.upload{
+.upload {
   display: inline;
 }
 
 
-.btnRight{
+.btnRight {
   margin-right: 5px;
 }
 
-.divBottom{
-  button{
+.divBottom {
+  button {
     margin-bottom: 5px;
     margin-right: 5px;
   }
 }
 
-.minHeight{
+.minHeight {
   min-height: 100px;
 }
 
-.customImg{
+.customEdit {
   :global {
-    .ql-editor img{
+    .ql-editor img {
       max-height: 400px;
     }
+
     /* Bubble Theme */
+
     .ql-bubble .ql-editor {
       border: 1px solid #cccccc;
       //border-radius: 0.5em;
     }
+
+    @media (min-width: 800px) {
+      .ql-editor > .ql-video {
+        min-height: 400px;
+        min-width: 580px;
+      }
+    }
   }
 }
 

src/pages/Memory/index.tsx

@@ -2,7 +2,7 @@ import {Button, Input, message, Modal} from 'antd';
 import React, {useEffect, useState} from 'react';
 import {PageHeaderWrapper} from '@ant-design/pro-layout';
 import {useSingleState} from 'nice-hooks';
-import Quill from '@/pages/Memory/components/Quill';
+import MyQuill from '@/pages/Memory/components/MyQuill';
 import UpdateForm from '@/pages/Memory/components/UpdateForm';
 import {TableListItem} from '../MemoryList/data.d';
 import service from './service';
@@ -170,6 +170,10 @@ const TableList: React.FC<{}> = () => {
       }
     };
   };
+  // 判断背面是否是空
+  const isBackEmpty=()=>{
+    return getTextFromHtml(memory.back).length === 0 && memory.back.indexOf('img') < 0;
+  }
 
   useEffect(() => {
     countRemind();
@@ -199,7 +203,7 @@ const TableList: React.FC<{}> = () => {
     }
     // 进入复习页面后
     // 如果没有文字，并且也没有图片
-    if (getTextFromHtml(memory.back).length === 0 && memory.back.indexOf('img') < 0) {
+    if (isBackEmpty()) {
       setState({showBack: true});
     } else {
       setState({showBack: false});
@@ -241,16 +245,22 @@ const TableList: React.FC<{}> = () => {
         <div>
           正面：
           <p/>
-          <Quill theme="bubble" readonly onChange={() => {
+          <MyQuill theme="bubble" readonly onChange={() => {
           }} value={memory.front}/>
           <p/>
           {state.showBack ? (
             <div>
-              反面：
-              <p/>
-              <Quill theme="bubble" readonly onChange={() => {
-              }} value={memory.back}/>
-              <p/>
+              {
+                !isBackEmpty() ? (
+                  <div>
+                    反面：
+                    <p/>
+                    <MyQuill theme="bubble" readonly onChange={() => {
+                    }} value={memory.back}/>
+                    <p/>
+                  </div>
+                ) : null}
+
               <div className={styles.divBottom}>
                 <Button
                   type="primary"

src/pages/MemoryList/index.less

@@ -14,7 +14,11 @@
   :global {
     .ql-bubble .ql-editor{
       border: 0 solid #eaeaea !important;
+      .ql-video {
+        min-height: 100px !important;
+        min-width: 200px !important;
+      }
     }
   }
-
 }
+

src/pages/MemoryList/index.tsx

@@ -7,7 +7,7 @@ import {TableListItem} from './data.d';
 import service from './service';
 import UpdateForm from "@/pages/Memory/components/UpdateForm";
 import {ExclamationCircleOutlined} from "@ant-design/icons/lib";
-import Quill from "@/pages/Memory/components/Quill";
+import MyQuill from "@/pages/Memory/components/MyQuill";
 import styles from './index.less';
 
 /**
@@ -70,7 +70,7 @@ const TableList: React.FC<{}> = () => {
       // hideInSearch: true,
       render: (text, row) => {
         return (<div className={styles.listHeight}>
-          <Quill theme="bubble" readonly onChange={() => {
+          <MyQuill theme="bubble" readonly onChange={() => {
           }} value={text}/>
         </div>);
       }
@@ -82,7 +82,7 @@ const TableList: React.FC<{}> = () => {
       hideInSearch: true,
       render: (text, row) => {
         return (<div className={styles.listHeight}>
-          <Quill theme="bubble" readonly onChange={() => {
+          <MyQuill theme="bubble" readonly onChange={() => {
           }} value={text}/>
         </div>);
       }
@@ -239,12 +239,12 @@ const TableList: React.FC<{}> = () => {
         >
           正面：
           <p/>
-          <Quill theme="bubble" readonly onChange={() => {
+          <MyQuill theme="bubble" readonly onChange={() => {
           }} value={formValues.front}/>
           <p/>
           反面：
           <p/>
-          <Quill theme="bubble" readonly onChange={() => {
+          <MyQuill theme="bubble" readonly onChange={() => {
           }} value={formValues.back}/>
         </Modal>
       ) : null}