fix(1.1): update markdown editor style

shell/app/common/components/edit-field.scss

@@ -79,21 +79,4 @@
       }
     }
   }
-
-  .md-content-preview {
-    min-height: 100px;
-    max-height: 60vh;
-    overflow: auto;
-    background-color: $color-light-bg;
-    border: 1px solid $color-border;
-    cursor: text;
-
-    &:hover {
-      border: 1px solid $primary;
-    }
-
-    .md-content {
-      min-height: 100px;
-    }
-  }
 }

shell/app/common/components/edit-field.tsx

@@ -18,7 +18,6 @@ import { useMount } from 'react-use';
 import { MarkdownEditor, useUpdate } from 'common';
 import { getTimeRanges } from 'common/utils';
 import { isFunction, get, set } from 'lodash';
-import Markdown from 'common/utils/marked';
 import i18n from 'i18n';
 import classnames from 'classnames';
 
@@ -34,7 +33,6 @@ interface IMdProps {
 }
 export const EditMd = ({ value, onChange, onSave, disabled, originalValue, hasEdited, ...rest }: IMdProps) => {
   const [v, setV] = React.useState(value);
-  const [mdEditing, setMdEditing] = React.useState(false);
   const [showBtn, setShowBtn] = React.useState(false);
   React.useEffect(() => {
     setV(value);
@@ -50,33 +48,24 @@ export const EditMd = ({ value, onChange, onSave, disabled, originalValue, hasEd
           onSubmit(_v: string) {
             onSave(_v);
             setShowBtn(false);
-            setMdEditing(false);
           },
           onCancel() {
             setV(originalValue); // 取消时不应调用保存，加个内部状态来还原数据
             setShowBtn(false);
-            setMdEditing(false);
           },
         }
       : {};
-  return mdEditing ? (
+  return (
     <MarkdownEditor
       {...rest}
       value={v}
-      defaultMode="md"
-      autoFocus
-      canView={{ html: false }}
       onChange={onChange}
       onBlur={(_v: string) => onSave(_v, 'markdown')}
       onFocus={() => setShowBtn(true)}
       readOnly={disabled}
       notClearAfterSubmit
       {...btnProps}
     />
-  ) : (
-    <div className="md-content-preview border-radius pa8" onClick={() => setMdEditing(true)}>
-      <div className="md-content" dangerouslySetInnerHTML={{ __html: Markdown(v || '') }} />
-    </div>
   );
 };
 

shell/app/common/components/markdown-editor/index.scss

@@ -9,6 +9,12 @@
         outline: 1px solid $color-active-border;
       }
     }
+
+    &.show-btn {
+      .rc-md-editor {
+        padding-bottom: 50px;
+      }
+    }
   }
 
   .disable-edit {

shell/app/common/components/markdown-editor/index.tsx

@@ -26,14 +26,6 @@ interface ICanView {
   hideMenu?: boolean;
 }
 
-const defaultCanView = {
-  menu: true,
-  md: true,
-  html: true,
-  fullScreen: true,
-  hideMenu: true,
-};
-
 interface IProps {
   value?: string | null;
   placeholder?: string;
@@ -101,13 +93,12 @@ export default class MarkdownEditor extends PureComponent<IProps, IState> {
     const mdRef = this.mdEditor?.current as any;
     mdRef &&
       mdRef.on('viewchange', (view: { html: boolean; md: boolean; menu: boolean }) => {
-        this.setState({
-          view,
-        });
+        this.setState({ view });
         if (view.md) {
           mdRef.nodeMdText.current && mdRef.nodeMdText.current.focus();
         }
       });
+
     if (this.props.autoFocus && this.state.view.md && mdRef.nodeMdText.current) {
       mdRef.nodeMdText.current.focus();
     }
@@ -154,23 +145,23 @@ export default class MarkdownEditor extends PureComponent<IProps, IState> {
 
     if (onSubmit) {
       btns.push(
-        <Button key="md-editor-submit-btn" className="mt16 mb16 mr8" type="primary" onClick={this.onSubmit}>
+        <Button key="md-editor-submit-btn" className="my8 mr8" type="primary" onClick={this.onSubmit}>
           {btnText || i18n.t('common:submit')}
         </Button>,
       );
     }
 
     if (onSetLS) {
       btns.push(
-        <Button key="md-editor-keep-btn" className="mt16 mb16 mr8" onClick={this.onSetLS}>
+        <Button key="md-editor-keep-btn" className="mx8 mr8" onClick={this.onSetLS}>
           {i18n.t('application:temporary storage')}
         </Button>,
       );
     }
 
     if (onCancel) {
       btns.push(
-        <Button key="md-editor-cancel-btn" className="mt16 mb16" onClick={onCancel}>
+        <Button key="md-editor-cancel-btn" className="mx8 mr8" onClick={onCancel}>
           {i18n.t('common:cancel')}
         </Button>,
       );
@@ -186,24 +177,40 @@ export default class MarkdownEditor extends PureComponent<IProps, IState> {
   };
 
   render() {
-    const { placeholder, readOnly, extraRight, onFocus, isShowRate, style = { height: '400px' }, canView } = this.props;
+    const {
+      placeholder,
+      readOnly,
+      extraRight,
+      onFocus,
+      isShowRate,
+      style = { height: '400px' },
+      onSubmit,
+    } = this.props;
     const { content, view } = this.state;
     const disableEdit = view.html && !view.md; // 纯预览模式时禁用操作栏
+
+    const curShowButton = !!onSubmit;
+
+    let height = style.height ? parseInt(style.height, 10) : 400;
+    height = view.md && curShowButton ? height + 50 : height;
     return (
-      <div className="markdown-editor">
-        <div className={`markdown-editor-content ${disableEdit ? 'disable-edit' : ''} ${readOnly ? 'read-only' : ''}`}>
+      <div className="markdown-editor relative">
+        <div
+          className={`markdown-editor-content ${disableEdit ? 'disable-edit' : ''} ${readOnly ? 'read-only' : ''} ${
+            curShowButton ? 'show-btn' : ''
+          }`}
+        >
           <Editor
             ref={this.mdEditor}
             {...{
               placeholder,
               readOnly,
               extraRight,
               onFocus,
-              style,
+              style: { ...style, height },
             }}
             config={{
               view,
-              canView: { ...defaultCanView, ...canView },
             }}
             value={content}
             onChange={this.onChange}
@@ -216,7 +223,7 @@ export default class MarkdownEditor extends PureComponent<IProps, IState> {
             <Rate allowHalf onChange={this.onRateChange} value={this.state.score} />
           </div>
         </IF>
-        {this.renderButton()}
+        {view.md ? <div className="absolute left-2 bottom-0	">{this.renderButton()}</div> : null}
       </div>
     );
   }

shell/app/config-page/components/action-form.tsx

@@ -111,7 +111,7 @@ export const ActionForm = (props: IProps) => {
             ...curItem.componentProps,
             onChange: (e: any) => {
               const val = curItem.component === 'input' ? e.target.value : e;
-              execOperation({ ...curKeyOperation, key: 'change' }, { [curKey]: val });
+              execOperation({ key: 'change', ...curKeyOperation }, { [curKey]: val });
             },
           };
         }

shell/app/modules/application/pages/settings/components/app-notify/notify-config.tsx

@@ -221,7 +221,7 @@ export const NotifyConfig = ({ commonPayload, memberStore }: IProps) => {
       width: 200,
       render: (targets) => (
         <div className="flex-box truncate">
-          <ListTargets targets={targets} roleMap={roleMap} />
+          <ListTargets targets={targets || []} roleMap={roleMap} />
         </div>
       ),
     },

shell/app/modules/project/common/components/issue/edit-issue-drawer.tsx

@@ -1200,6 +1200,7 @@ export const EditIssueDrawer = (props: IProps) => {
             hasEdited,
             isEditMode,
             maxLength: 3000,
+            defaultMode: isEditMode ? 'html' : 'md',
           }} // 编辑时默认显示预览
           data={formData}
         />

shell/app/modules/project/common/components/issue/issue-drawer.tsx

@@ -89,6 +89,7 @@ export const IssueDrawer = (props: IProps) => {
   const customFieldDetail = issueStore.useStore((s) => s.customFieldDetail);
   const [copyTitle, setCopyTitle] = React.useState('');
   const [isChanged, setIsChanged] = React.useState(false);
+  const [showCopy, setShowCopy] = React.useState(false);
   const preDataRef = React.useRef(data);
   const preData = preDataRef.current;
 
@@ -158,6 +159,8 @@ export const IssueDrawer = (props: IProps) => {
                   <WithAuth pass={canCreate}>
                     <Popover
                       title={i18n.t('project:copy issue')}
+                      visible={showCopy}
+                      onVisibleChange={(v) => setShowCopy(v)}
                       content={
                         <>
                           <Input
@@ -167,7 +170,13 @@ export const IssueDrawer = (props: IProps) => {
                             onChange={(e) => setCopyTitle(e.target.value)}
                           />
                           <div className="right-flex-box mt8">
-                            <Button className="mr8" onClick={() => setCopyTitle('')}>
+                            <Button
+                              className="mr8"
+                              onClick={() => {
+                                setCopyTitle('');
+                                setShowCopy(false);
+                              }}
+                            >
                               {i18n.t('cancel')}
                             </Button>
                             <Button
@@ -178,6 +187,7 @@ export const IssueDrawer = (props: IProps) => {
                                 }
                                 handleCopy && handleCopy(true, copyTitle);
                                 setCopyTitle('');
+                                setShowCopy(false);
                               }}
                               type="primary"
                             >