change markdown view in metadata (#6746)

* change markdown viewer in metadata * fix side nav click event
2025-09-14 06:11:16 +00:00 · 2024-09-11 10:13:10 +08:00
parent b166c5d3c3
commit 57954854d0
9 changed files with 96 additions and 71 deletions
--- a/frontend/src/components/common/event-bus-type.js
+++ b/frontend/src/components/common/event-bus-type.js
@@ -4,4 +4,5 @@ export const EVENT_BUS_TYPE = {
  SEARCH_LIBRARY_CONTENT: 'search_library_content',

  RESTORE_IMAGE: 'restore_image',
+  OPEN_MARKDOWN_DIALOG: 'open_markdown_dialog',
 };
--- a/frontend/src/components/dir-view-mode/dir-column-view.js
+++ b/frontend/src/components/dir-view-mode/dir-column-view.js
@@ -281,11 +281,12 @@ class DirColumnView extends React.Component {
          }
          {this.props.isViewFile &&
            <MarkdownViewerDialog
-              path={this.props.path}
              repoID={this.props.repoID}
+              filePath={this.props.getMarkDownFilePath()}
+              fileName={this.props.getMarkDownFileName()}
+              openMarkdownFile={this.props.openMarkdownFile}
              isFileLoading={this.props.isFileLoading}
              content={this.props.content}
-              currentDirent={this.props.currentDirent}
              lastModified={this.props.lastModified}
              latestContributor={this.props.latestContributor}
              onLinkClick={this.props.onLinkClick}
--- a/frontend/src/components/dir-view-mode/markdown-viewer-dialog.js
+++ b/frontend/src/components/dir-view-mode/markdown-viewer-dialog.js
@@ -1,37 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Modal, ModalBody } from 'reactstrap';
-import { Utils } from '../../utils/utils';
-import { siteRoot, mediaUrl } from '../../utils/constants';
+import { mediaUrl } from '../../utils/constants';
 import SeafileMarkdownViewer from '../seafile-markdown-viewer';

 import './markdown-viewer-dialog.css';

 const propTypes = {
-  path: PropTypes.string.isRequired,
+  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,
-  currentDirent: PropTypes.object,
-  onCloseMarkdownViewDialog: PropTypes.func
+  onCloseMarkdownViewDialog: PropTypes.func,
+  openMarkdownFile: PropTypes.func,
 };

 class MarkdownViewerDialog extends React.Component {

-  onOpenFile = (e) => {
-    e.preventDefault();
-    let { path, repoID, currentDirent } = this.props;
-    let { name } = currentDirent || {};
-    let newUrl = siteRoot + 'lib/' + repoID + '/file' + Utils.encodePath(path) + (path.endsWith('/') ? '' : '/') + name;
-    window.open(newUrl, '_blank');
-  };
-
  render() {
-    const { currentDirent } = this.props;
-    const { name } = currentDirent || {};
    return (
      <Modal
        isOpen={true}
@@ -43,10 +33,10 @@ class MarkdownViewerDialog extends React.Component {
        <div className='seafile-markdown-viewer-modal-header'>
          <div className='seafile-markdown-viewer-modal-header-left-name'>
            <span><img src={`${mediaUrl}img/file/256/md.png`} width='24' alt='' /></span>
-            <span>{name}</span>
+            <span>{this.props.fileName}</span>
          </div>
          <div className='seafile-markdown-viewer-modal-header-right-tool'>
-            <span className='sf3-font sf3-font-open' onClick={this.onOpenFile}></span>
+            <span className='sf3-font sf3-font-open' onClick={this.props.openMarkdownFile}></span>
            <span className='sf3-font sf3-font-x-01' onClick={this.props.onCloseMarkdownViewDialog}></span>
          </div>
        </div>
@@ -59,7 +49,7 @@ class MarkdownViewerDialog extends React.Component {
            latestContributor={this.props.latestContributor}
            onLinkClick={this.props.onLinkClick}
            repoID={this.props.repoID}
-            path={this.props.path}
+            path={this.props.filePath}
          >
          </SeafileMarkdownViewer>
        </ModalBody>
--- a/frontend/src/components/main-side-nav.js
+++ b/frontend/src/components/main-side-nav.js
@@ -152,7 +152,7 @@ class MainSideNav extends React.Component {
        className={`nav sub-nav nav-pills flex-column ${this.state.sharedExtended ? 'side-panel-slide-share-admin' : 'side-panel-slide-up-share-admin'}`}
        style={style}
      >
-        {canAddRepo && canShareRepo && (
+        {canAddRepo && canShareRepo && height !== 0 && (
          <li className={`nav-item ${this.getActiveClass('share-admin-libs')}`}>
            <Link to={siteRoot + 'share-admin-libs/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-libs')}`} title={gettext('Libraries')} onClick={(e) => this.tabItemClick(e, 'share-admin-libs')}>
              <span aria-hidden="true" className="sharp">#</span>
@@ -160,7 +160,7 @@ class MainSideNav extends React.Component {
            </Link>
          </li>
        )}
-        {canShareRepo && (
+        {canShareRepo && height !== 0 && (
          <li className={`nav-item ${this.getActiveClass('share-admin-folders')}`}>
            <Link to={siteRoot + 'share-admin-folders/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-folders')}`} title={gettext('Folders')} onClick={(e) => this.tabItemClick(e, 'share-admin-folders')}>
              <span aria-hidden="true" className="sharp">#</span>
@@ -168,7 +168,7 @@ class MainSideNav extends React.Component {
            </Link>
          </li>
        )}
-        {linksNavItem}
+        { height !== 0 && linksNavItem}
      </ul>
    );
  }
--- a/frontend/src/metadata/metadata-view/components/cell-editor/file-name-editor.js
+++ b/frontend/src/metadata/metadata-view/components/cell-editor/file-name-editor.js
@@ -4,6 +4,7 @@ import { ModalPortal } from '@seafile/sf-metadata-ui-component';
 import { PRIVATE_COLUMN_KEY } from '../../_basic';
 import { Utils } from '../../../../utils/utils';
 import ImageDialog from '../../../../components/dialog/image-dialog';
+import { EVENT_BUS_TYPE } from '../../../../components/common/event-bus-type';
 import { siteRoot, thumbnailSizeForOriginal } from '../../../../utils/constants';

 const FileNameEditor = ({ column, record, table, onCommitCancel }) => {
@@ -59,7 +60,7 @@ const FileNameEditor = ({ column, record, table, onCommitCancel }) => {
    const suffix = fileName.slice(index).toLowerCase();
    if (suffix.indexOf(' ') > -1) return '';
    if (Utils.imageCheck(fileName)) return 'image';
-    if (Utils.isMarkdownFile(fileName)) return 'file';
+    if (Utils.isMarkdownFile(fileName)) return 'markdown';
    if (Utils.isSdocFile(fileName)) return 'sdoc';
    return '';
  }, [_isDir, fileName]);
@@ -92,6 +93,19 @@ const FileNameEditor = ({ column, record, table, onCommitCancel }) => {
    setImageIndex((prevState) => (prevState + 1) % imageItemsLength);
  };

+  useEffect(() => {
+    if (fileType === 'markdown') {
+      const fileName = record[PRIVATE_COLUMN_KEY.FILE_NAME];
+      const parentDir = record[PRIVATE_COLUMN_KEY.PARENT_DIR];
+      window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.OPEN_MARKDOWN_DIALOG, parentDir, fileName);
+    }
+    return () => {};
+  }, [record, fileType]);
+
+  if (fileType === 'markdown') {
+    return null;
+  }
+
  if (fileType === 'image') {
    return (
      <ModalPortal>
--- a/frontend/src/metadata/metadata-view/components/view/table/table-main/records/record/cell/operation-btn/index.js
+++ b/frontend/src/metadata/metadata-view/components/view/table/table-main/records/record/cell/operation-btn/index.js
@@ -8,11 +8,7 @@ import { gettext } from '../../../../../../../../utils';

 import './index.css';

-const CellOperationBtn = ({
-  isDir,
-  column,
-  value,
-}) => {
+const CellOperationBtn = ({ isDir, column, value }) => {

  const openFile = useCallback((event) => {
    event.stopPropagation();
@@ -20,27 +16,23 @@ const CellOperationBtn = ({
    window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.OPEN_EDITOR, EDITOR_TYPE.PREVIEWER);
  }, []);

-  if (!value) return null;
-  const { type } = column;
-  if (type === CellType.FILE_NAME) {
-    const target = 'sf-metadata-cell-open-file-btn';
+  if (!value || column.type !== CellType.FILE_NAME) return null;
+
  return (
    <>
-        <IconBtn id={target} className="sf-metadata-cell-operation-btn" size={20} iconName="open-file" onClick={openFile} />
+      <IconBtn id={'sf-metadata-cell-open-file-btn'} className="sf-metadata-cell-operation-btn" size={20} iconName="open-file" onClick={openFile} />
      <UncontrolledTooltip
        hideArrow
-          target={target}
+        target={'sf-metadata-cell-open-file-btn'}
        placement="bottom"
        fade={false}
        delay={{ show: 0, hide: 0 }}
        modifiers={{ preventOverflow: { boundariesElement: document.body } }}
      >
-          {gettext(isDir ? 'Open folder' : 'Open file')}
+        {isDir ? gettext('Open folder') : gettext('Open file')}
      </UncontrolledTooltip>
    </>
  );
-  }
-  return null;
 };

 CellOperationBtn.propTypes = {
--- a/frontend/src/metadata/metadata-view/components/view/table/table-masks/interaction-masks/index.js
+++ b/frontend/src/metadata/metadata-view/components/view/table/table-masks/interaction-masks/index.js
@@ -1011,16 +1011,15 @@ class InteractionMasks extends React.Component {

  renderSingleCellSelectView = () => {
    const { columns } = this.props;
-    const {
-      isEditorEnabled,
-      selectedPosition,
-    } = this.state;
+    const { isEditorEnabled, selectedPosition } = this.state;
    const isDragEnabled = this.isSelectedCellEditable();
    const canEdit = window.sfMetadataContext.canModifyRows();
    const showDragHandle = (isDragEnabled && canEdit);
    const column = getSelectedColumn({ selectedPosition, columns });
    const { type: columnType } = column || {};
-    if (isEditorEnabled && columnType !== CellType.RATE && columnType !== CellType.CHECKBOX && columnType !== CellType.FILE_NAME) return null;
+    if (isEditorEnabled && columnType !== CellType.RATE && columnType !== CellType.CHECKBOX && columnType !== CellType.FILE_NAME) {
+      return null;
+    }
    if (!this.isGridSelected()) return null;

    const props = {
@@ -1030,12 +1029,7 @@ class InteractionMasks extends React.Component {
    };
    return (
      <SelectionMask {...props}>
-        {showDragHandle ?
-          <DragHandler
-            onDragStart={this.handleDragStart}
-            onDragEnd={this.handleDragEnd}
-          />
-          : null}
+        {showDragHandle && <DragHandler onDragStart={this.handleDragStart} onDragEnd={this.handleDragEnd} />}
      </SelectionMask>
    );
  };
@@ -1056,12 +1050,7 @@ class InteractionMasks extends React.Component {
        rowHeight={rowHeight}
        getSelectedRangeDimensions={this.getSelectedRangeDimensions}
      >
-        {showDragHandle ?
-          <DragHandler
-            onDragStart={this.handleDragStart}
-            onDragEnd={this.handleDragEnd}
-          />
-          : null}
+        {showDragHandle && <DragHandler onDragStart={this.handleDragStart} onDragEnd={this.handleDragEnd} />}
      </SelectionRangeMask>,
      <SelectionMask
        key="selection-mask"
@@ -1093,8 +1082,7 @@ class InteractionMasks extends React.Component {
            getSelectedRangeDimensions={this.getSelectedRangeDimensions}
          />
        )}
-        {isSelectedSingleCell && this.renderSingleCellSelectView()}
-        {!isSelectedSingleCell && this.renderCellRangeSelectView()}
+        {isSelectedSingleCell ? this.renderSingleCellSelectView() : this.renderCellRangeSelectView()}
        {isEditorEnabled && (
          <EditorPortal target={editorPortalTarget}>
            <EditorContainer
--- a/frontend/src/pages/lib-content-view/lib-content-container.js
+++ b/frontend/src/pages/lib-content-view/lib-content-container.js
@@ -343,6 +343,9 @@ class LibContentContainer extends React.Component {
              isDirentDetailShow={this.props.isDirentDetailShow}
              eventBus={this.props.eventBus}
              onCloseMarkdownViewDialog={this.props.onCloseMarkdownViewDialog}
+              getMarkDownFilePath={this.props.getMarkDownFilePath}
+              getMarkDownFileName={this.props.getMarkDownFileName}
+              openMarkdownFile={this.props.openMarkdownFile}
            />
          )}
          {this.props.isDirentDetailShow && (
--- a/frontend/src/pages/lib-content-view/lib-content-view.js
+++ b/frontend/src/pages/lib-content-view/lib-content-view.js
@@ -99,6 +99,9 @@ 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;
  }

  showDirentDetail = (direntDetailPanelTab) => {
@@ -129,6 +132,7 @@ class LibContentView extends React.Component {
  };

  componentDidMount() {
+    this.unsubscribeEvent = this.props.eventBus.subscribe(EVENT_BUS_TYPE.SEARCH_LIBRARY_CONTENT, this.onSearchedClick);
    this.calculatePara(this.props);
  }

@@ -139,8 +143,7 @@ class LibContentView extends React.Component {
  }

  calculatePara = async (props) => {
-    const { repoID, eventBus } = props;
-    this.unsubscribeEvent = eventBus.subscribe(EVENT_BUS_TYPE.SEARCH_LIBRARY_CONTENT, this.onSearchedClick);
+    const { repoID } = props;

    const path = this.getPathFromLocation(repoID);

@@ -227,6 +230,7 @@ class LibContentView extends React.Component {
    window.onpopstate = this.oldonpopstate;
    collabServer.unwatchRepo(this.props.repoID, this.onRepoUpdateEvent);
    this.unsubscribeEvent();
+    this.unsubscribeEventBus && this.unsubscribeEventBus();
    this.props.eventBus.dispatch(EVENT_BUS_TYPE.CURRENT_LIBRARY_CHANGED, {
      repoID: '',
      repoName: '',
@@ -457,6 +461,13 @@ class LibContentView extends React.Component {
    window.history.pushState({ url: url, path: path }, path, url);
  };

+  openMarkDownDialog = (parentDir, fileName) => {
+    this.markdownFileParentDir = parentDir;
+    this.markdownFileName = fileName;
+    const markdownFilePath = Utils.joinPath(parentDir, fileName);
+    this.showFile(markdownFilePath, true);
+  };
+
  showFile = (filePath, noRedirection) => {
    let repoID = this.props.repoID;

@@ -519,6 +530,10 @@ class LibContentView extends React.Component {
      path: filePath,
      viewId: viewId,
      isDirentDetailShow: false
+    }, () => {
+      setTimeout(() => {
+        this.unsubscribeEventBus = window.sfMetadataContext.eventBus.subscribe(EVENT_BUS_TYPE.OPEN_MARKDOWN_DIALOG, this.openMarkDownDialog);
+      }, 1);
    });
    const url = `${siteRoot}library/${repoID}/${encodeURIComponent(repoInfo.repo_name)}/?view=${encodeURIComponent(viewId)}`;
    window.history.pushState({ url: url, path: '' }, '', url);
@@ -2003,9 +2018,27 @@ class LibContentView extends React.Component {
      this.setState({
        currentMode: cookie.load('seafile_view_mode') || LIST_MODE,
      });
+      this.markdownFileName = '';
+      this.markdownFileParentDir = '';
    }
  };

+  getMarkDownFilePath = () => {
+    return this.markdownFileParentDir || this.state.path || '';
+  };
+
+  getMarkDownFileName = () => {
+    return this.markdownFileName || this.state.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) {
@@ -2289,6 +2322,9 @@ class LibContentView extends React.Component {
              onUploadFolder={this.onUploadFolder}
              eventBus={this.props.eventBus}
              onCloseMarkdownViewDialog={this.onCloseMarkdownViewDialog}
+              getMarkDownFilePath={this.getMarkDownFilePath}
+              getMarkDownFileName={this.getMarkDownFileName}
+              openMarkdownFile={this.openMarkdownFile}
            />
            {canUpload && this.state.pathExist && !this.state.isViewFile && (
              <FileUploader