remove markdown viewer dialog (#7052)

frontend/src/components/common/event-bus-type.js

@@ -4,5 +4,5 @@ export const EVENT_BUS_TYPE = {
   SEARCH_LIBRARY_CONTENT: 'search_library_content',
 
   RESTORE_IMAGE: 'restore_image',
-  OPEN_MARKDOWN_DIALOG: 'open_markdown_dialog',
+  OPEN_MARKDOWN: 'open_markdown',
 };

frontend/src/components/dir-view-mode/dir-column-view.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import DirColumnNav from './dir-column-nav';
-import MarkdownViewerDialog from './markdown-viewer-dialog';
 import DirListView from './dir-list-view';
 import DirGridView from './dir-grid-view';
 import { SIDE_PANEL_FOLDED_WIDTH } from '../../constants';
@@ -43,7 +42,6 @@ const propTypes = {
   lastModified: PropTypes.string,
   latestContributor: PropTypes.string,
   onLinkClick: PropTypes.func.isRequired,
-  onCloseMarkdownViewDialog: PropTypes.func,
   // repo content
   isRepoInfoBarShow: PropTypes.bool.isRequired,
   usedRepoTags: PropTypes.array.isRequired,
@@ -288,20 +286,6 @@ class DirColumnView extends React.Component {
               eventBus={this.props.eventBus}
             />
           }
-          {this.props.isViewFile &&
-            <MarkdownViewerDialog
-              repoID={this.props.repoID}
-              filePath={this.props.getMarkDownFilePath()}
-              fileName={this.props.getMarkDownFileName()}
-              openMarkdownFile={this.props.openMarkdownFile}
-              isFileLoading={this.props.isFileLoading}
-              content={this.props.content}
-              lastModified={this.props.lastModified}
-              latestContributor={this.props.latestContributor}
-              onLinkClick={this.props.onLinkClick}
-              onCloseMarkdownViewDialog={this.props.onCloseMarkdownViewDialog}
-            />
-          }
         </div>
       </div>
     );

frontend/src/components/dir-view-mode/markdown-viewer-dialog.css

@@ -1,56 +0,0 @@
-.seafile-markdown-viewer-modal {
-  max-width: 950px;
-  height: calc(100% - 56px);
-}
-
-.seafile-markdown-viewer-modal .seafile-markdown-viewer-modal-content {
-  height: 100%;
-}
-
-.seafile-markdown-viewer-modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid #e5e5e5;
-  padding: 0 16px;
-  height: 48px;
-}
-
-.seafile-markdown-viewer-modal-header .seafile-markdown-viewer-modal-header-left-name img {
-  margin-right: 6px;
-}
-
-.seafile-markdown-viewer-modal-header .seafile-markdown-viewer-modal-header-right-tool>span {
-  margin-left: 10px;
-  cursor: pointer;
-  color: #000;
-  opacity: 0.5;
-}
-
-.seafile-markdown-viewer-modal-header .seafile-markdown-viewer-modal-header-right-tool>span:hover {
-  opacity: 0.75;
-}
-
-.seafile-markdown-viewer-modal-body {
-  padding: 0;
-  height: calc(100vh / 2 + 130px);
-  overflow: auto;
-}
-
-.seafile-markdown-viewer-modal-body .wiki-page-container {
-  margin: 40px 60px 0px 60px;
-}
-
-.seafile-markdown-viewer-modal-body .wiki-page-container .empty-loading-page {
-  display: none;
-}
-
-.seafile-markdown-viewer-modal-body .loading-tip {
-  margin-top: 30%;
-}
-
-.seafile-markdown-viewer-modal-body .sf-slate-viewer-scroll-container {
-  background: #fff;
-  padding: 0px 0 0px;
-  overflow: hidden;
-}

frontend/src/components/dir-view-mode/markdown-viewer-dialog.js

@@ -1,67 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Modal, ModalBody } from 'reactstrap';
-import { mediaUrl } from '../../utils/constants';
-import SeafileMarkdownViewer from '../seafile-markdown-viewer';
-import InternalLinkOperation from '../operations/internal-link-operation';
-import { Utils } from '../../utils/utils';
-
-import './markdown-viewer-dialog.css';
-
-const propTypes = {
-  filePath: PropTypes.string.isRequired,
-  fileName: PropTypes.string.isRequired,
-  repoID: PropTypes.string.isRequired,
-  isFileLoading: PropTypes.bool.isRequired,
-  content: PropTypes.string,
-  lastModified: PropTypes.string,
-  latestContributor: PropTypes.string,
-  onLinkClick: PropTypes.func.isRequired,
-  onCloseMarkdownViewDialog: PropTypes.func,
-  openMarkdownFile: PropTypes.func,
-};
-
-class MarkdownViewerDialog extends React.Component {
-
-  render() {
-    const { repoID, filePath, fileName } = this.props;
-    return (
-      <Modal
-        isOpen={true}
-        className='seafile-markdown-viewer-modal'
-        toggle={this.props.onCloseMarkdownViewDialog}
-        contentClassName='seafile-markdown-viewer-modal-content'
-        zIndex={1046}
-      >
-        <div className='seafile-markdown-viewer-modal-header'>
-          <div className='seafile-markdown-viewer-modal-header-left-name d-flex align-items-center'>
-            <span><img src={`${mediaUrl}img/file/256/md.png`} width='24' alt='' /></span>
-            <span>{fileName}</span>
-            <InternalLinkOperation path={Utils.joinPath(filePath, fileName)} repoID={repoID} />
-          </div>
-          <div className='seafile-markdown-viewer-modal-header-right-tool'>
-            <span className='sf3-font sf3-font-new-page' onClick={this.props.openMarkdownFile}></span>
-            <span className='sf3-font sf3-font-x-01' onClick={this.props.onCloseMarkdownViewDialog}></span>
-          </div>
-        </div>
-        <ModalBody className='seafile-markdown-viewer-modal-body'>
-          <SeafileMarkdownViewer
-            isTOCShow={false}
-            isFileLoading={this.props.isFileLoading}
-            markdownContent={this.props.content}
-            lastModified = {this.props.lastModified}
-            latestContributor={this.props.latestContributor}
-            onLinkClick={this.props.onLinkClick}
-            repoID={repoID}
-            path={filePath}
-          >
-          </SeafileMarkdownViewer>
-        </ModalBody>
-      </Modal>
-    );
-  }
-}
-
-MarkdownViewerDialog.propTypes = propTypes;
-
-export default MarkdownViewerDialog;

frontend/src/metadata/utils/open-file.js

@@ -43,7 +43,7 @@ const _openUrl = (url) => {
 };
 
 const _openMarkdown = (fileName, parentDir, eventBus) => {
-  eventBus && eventBus.dispatch(EVENT_BUS_TYPE.OPEN_MARKDOWN_DIALOG, parentDir, fileName);
+  eventBus && eventBus.dispatch(EVENT_BUS_TYPE.OPEN_MARKDOWN, parentDir, fileName);
 };
 
 const _openByNewWindow = (fileName, parentDir, fileType) => {

frontend/src/pages/lib-content-view/lib-content-view.js

@@ -105,8 +105,6 @@ class LibContentView extends React.Component {
     this.isNeedUpdateHistoryState = true; // Load, refresh page, switch mode for the first time, no need to set historyState
     this.currentMoveItemName = '';
     this.currentMoveItemPath = '';
-    this.markdownFileName = '';
-    this.markdownFileParentDir = '';
     this.unsubscribeEventBus = null;
   }
 
@@ -282,12 +280,6 @@ class LibContentView extends React.Component {
       }
     } else if (event.state && event.state.path) { // file path
       let path = event.state.path;
-      if (this.state.isTreePanelShown) {
-        if (Utils.isMarkdownFile(path)) { // Judging not strict
-          this.showFile(path);
-          return;
-        }
-      }
       this.loadDirentList(path);
       this.setState({
         path: path,
@@ -393,26 +385,6 @@ class LibContentView extends React.Component {
     // list used FileTags
     this.updateUsedRepoTags();
 
-    if (Utils.isMarkdownFile(path)) {
-      this.handleMarkdownFile(path);
-    } else {
-      this.handleNonMarkdownFile(path);
-    }
-  };
-
-  handleMarkdownFile = (path) => {
-    seafileAPI.getFileInfo(this.props.repoID, path).then(() => {
-      this.loadSidePanel(path);
-      this.showFile(path);
-    }).catch(() => {
-      if (this.state.isTreePanelShown) {
-        this.loadSidePanel(path);
-      }
-      this.showDir(path);
-    });
-  };
-
-  handleNonMarkdownFile = (path) => {
     if (this.state.isTreePanelShown) {
       this.loadSidePanel(path);
     }
@@ -469,11 +441,12 @@ class LibContentView extends React.Component {
     window.history.pushState({ url: url, path: path }, path, url);
   };
 
-  openMarkDownDialog = (parentDir, fileName) => {
+  openMarkDown = (parentDir, fileName) => {
-    this.markdownFileParentDir = parentDir;
+    let filePath = Utils.joinPath(parentDir, fileName);
-    this.markdownFileName = fileName;
+    let repoID = this.props.repoID;
-    const markdownFilePath = Utils.joinPath(parentDir, fileName);
+    const w = window.open('about:blank');
-    this.showFile(markdownFilePath, true);
+    const url = siteRoot + 'lib/' + repoID + '/file' + Utils.encodePath(filePath);
+    w.location.href = url;
   };
 
   showFile = (filePath, noRedirection) => {
@@ -540,7 +513,7 @@ class LibContentView extends React.Component {
       isDirentDetailShow: viewType === VIEW_TYPE.GALLERY ? this.state.isDirentDetailShow : false,
     }, () => {
       setTimeout(() => {
-        this.unsubscribeEventBus = window.sfMetadataContext.eventBus.subscribe(EVENT_BUS_TYPE.OPEN_MARKDOWN_DIALOG, this.openMarkDownDialog);
+        this.unsubscribeEventBus = window.sfMetadataContext.eventBus.subscribe(EVENT_BUS_TYPE.OPEN_MARKDOWN, this.openMarkDown);
       }, 1);
     });
     const url = `${siteRoot}library/${repoID}/${encodeURIComponent(repoInfo.repo_name)}/?view=${encodeURIComponent(viewId)}`;
@@ -1498,21 +1471,15 @@ class LibContentView extends React.Component {
       }
       this.showDir(direntPath);
     } else { // is file
-      if (this.state.isTreePanelShown && Utils.isMarkdownFile(direntPath)) {
+      let url = siteRoot + 'lib/' + repoID + '/file' + Utils.encodePath(direntPath);
-        this.setState({ currentDirent: dirent });
+      if (dirent.is_sdoc_revision && dirent.revision_id) {
-        this.showColumnMarkdownFile(direntPath);
+        url = siteRoot + 'lib/' + repoID + '/revisions/' + dirent.revision_id + '/';
+      }
+      let isWeChat = Utils.isWeChat();
+      if (!isWeChat) {
+        window.open(url);
       } else {
-        let url = siteRoot + 'lib/' + repoID + '/file' + Utils.encodePath(direntPath);
+        location.href = url;
-        if (dirent.is_sdoc_revision && dirent.revision_id) {
-          url = siteRoot + 'lib/' + repoID + '/revisions/' + dirent.revision_id + '/';
-        }
-
-        let isWeChat = Utils.isWeChat();
-        if (!isWeChat) {
-          window.open(url);
-        } else {
-          location.href = url;
-        }
       }
     }
   };
@@ -1877,11 +1844,7 @@ class LibContentView extends React.Component {
       }
       this.showDir(node.path);
     } else {
-      if (Utils.isMarkdownFile(node.path)) {
+      if (Utils.isFileMetadata(node?.object?.type)) {
-        if (node.path !== this.state.path) {
-          this.showColumnMarkdownFile(node.path);
-        }
-      } else if (Utils.isFileMetadata(node?.object?.type)) {
         if (node.path !== this.state.path) {
           this.showFileMetadata(node.path, node.view_id || '0000', node.view_type || VIEW_TYPE.TABLE);
         }
@@ -1896,27 +1859,6 @@ class LibContentView extends React.Component {
     }
   };
 
-  showColumnMarkdownFile = (filePath) => {
-    let repoID = this.props.repoID;
-    seafileAPI.getFileInfo(repoID, filePath).then((res) => {
-      if (res.data.size === 0) {
-        // loading of asynchronously obtained data may be blocked
-        const w = window.open('about:blank');
-        const url = siteRoot + 'lib/' + repoID + '/file' + Utils.encodePath(filePath);
-        w.location.href = url;
-      } else {
-        this.showFile(filePath, true);
-      }
-    }).catch(error => {
-      let errMessage = Utils.getErrorMsg(error);
-      toaster.danger(errMessage);
-    });
-  };
-
-  onCloseMarkdownViewDialog = () => {
-    this.setState({ isViewFile: false });
-  };
-
   onTreeNodeCollapse = (node) => {
     let tree = treeHelper.collapseNode(this.state.treeData, node);
     this.setState({ treeData: tree });
@@ -2028,28 +1970,9 @@ class LibContentView extends React.Component {
       this.setState({
         currentMode: cookie.load('seafile_view_mode') || (isMetadataView ? METADATA_MODE : LIST_MODE),
       });
-      this.markdownFileName = '';
-      this.markdownFileParentDir = '';
     }
   };
 
-  getMarkDownFilePath = () => {
-    return this.markdownFileParentDir || this.state.path || '';
-  };
-
-  getMarkDownFileName = () => {
-    const { currentDirent } = this.state;
-    return this.markdownFileName || (currentDirent && currentDirent.name) || '';
-  };
-
-  openMarkdownFile = () => {
-    let { repoID } = this.props;
-    let path = this.getMarkDownFilePath();
-    let name = this.getMarkDownFileName();
-    let newUrl = siteRoot + 'lib/' + repoID + '/file' + Utils.encodePath(path) + (path.endsWith('/') ? '' : '/') + name;
-    window.open(newUrl, '_blank');
-  };
-
   recalculateSelectedDirents = (unSelectNames, newDirentList) => {
     let selectedDirentList = this.state.selectedDirentList.slice(0);
     if (selectedDirentList.length > 0) {
@@ -2418,10 +2341,6 @@ class LibContentView extends React.Component {
                     showDirentDetail={this.showDirentDetail}
                     onItemsScroll={this.onItemsScroll}
                     eventBus={this.props.eventBus}
-                    onCloseMarkdownViewDialog={this.onCloseMarkdownViewDialog}
-                    getMarkDownFilePath={this.getMarkDownFilePath}
-                    getMarkDownFileName={this.getMarkDownFileName}
-                    openMarkdownFile={this.openMarkdownFile}
                     updateCurrentDirent={this.updateCurrentDirent}
                     closeDirentDetail={this.closeDirentDetail}
                   />

frontend/src/pages/markdown-editor/index.js

@@ -211,7 +211,7 @@ class MarkdownEditor extends React.Component {
     const fileInfoRes = await seafileAPI.getFileInfo(repoID, filePath);
     const { mtime, size, starred, permission, last_modifier_name, id } = fileInfoRes.data;
     const lastModifier = last_modifier_name;
-    const { rawPath } = window.app.pageOptions;    
+    const { rawPath } = window.app.pageOptions;
     // get file content
     const fileContentRes = await seafileAPI.getFileContent(rawPath);
     const markdownContent = fileContentRes.data;