add export as markdown menuitem to PageItemControl for SearchResultContent

packages/app/src/components/SearchPage.jsx

@@ -292,6 +292,7 @@ class SearchPage extends React.Component {
         appContainer={this.props.appContainer}
         searchingKeyword={this.state.searchingKeyword}
         focusedSearchResultData={this.state.focusedSearchResultData}
+        showPageControlDropdown={!this.props.isGuestUser}
       >
       </SearchResultContent>
     );

packages/app/src/components/SearchPage/SearchResultContent.tsx

@@ -1,40 +1,86 @@
 import React, { FC, useCallback } from 'react';
 
+import { DropdownItem } from 'reactstrap';
+import { useTranslation } from 'react-i18next';
+
 import { IPageWithMeta } from '~/interfaces/page';
 import { IPageSearchMeta } from '~/interfaces/search';
 
+import { exportAsMarkdown } from '~/client/services/page-operation';
+
 import RevisionLoader from '../Page/RevisionLoader';
 import AppContainer from '../../client/services/AppContainer';
 import { GrowiSubNavigation } from '../Navbar/GrowiSubNavigation';
 import { SubNavButtons } from '../Navbar/SubNavButtons';
+import { AdditionalMenuItemsRendererProps } from '../Common/Dropdown/PageItemControl';
+
+
+type AdditionalMenuItemsProps = AdditionalMenuItemsRendererProps & {
+  pageId: string,
+  revisionId: string,
+}
+
+const AdditionalMenuItems = (props: AdditionalMenuItemsProps): JSX.Element => {
+  const { t } = useTranslation();
+
+  const { pageId, revisionId } = props;
+
+  return (
+    <>
+      <DropdownItem divider />
+
+      {/* Export markdown */}
+      <DropdownItem onClick={() => exportAsMarkdown(pageId, revisionId, 'md')}>
+        <i className="icon-fw icon-cloud-download"></i>
+        {t('export_bulk.export_page_markdown')}
+      </DropdownItem>
+    </>
+  );
+};
+
 
 type Props ={
   appContainer: AppContainer,
   searchingKeyword:string,
   focusedSearchResultData : IPageWithMeta<IPageSearchMeta>,
+  showPageControlDropdown?: boolean,
 }
 
-
 const SearchResultContent: FC<Props> = (props: Props) => {
-  const page = props.focusedSearchResultData?.pageData;
+  const {
+    appContainer,
+    focusedSearchResultData,
+    showPageControlDropdown,
+  } = props;
 
-  const growiRenderer = props.appContainer.getRenderer('searchresult');
+  const page = focusedSearchResultData?.pageData;
+
+  const growiRenderer = appContainer.getRenderer('searchresult');
 
   const ControlComponents = useCallback(() => {
     if (page == null) {
       return <></>;
     }
 
+    const revisionId = typeof page.revision === 'string'
+      ? page.revision
+      : page.revision._id;
+
     return (
       <>
         <div className="h-50 d-flex flex-column align-items-end justify-content-center">
-          <SubNavButtons pageId={page._id} />
+          <SubNavButtons
+            pageId={page._id}
+            revisionId={revisionId}
+            showPageControlDropdown={showPageControlDropdown}
+            additionalMenuItemRenderer={props => <AdditionalMenuItems {...props} pageId={page._id} revisionId={revisionId} />}
+          />
         </div>
         <div className="h-50 d-flex flex-column align-items-end justify-content-center">
         </div>
       </>
     );
-  }, [page]);
+  }, [page, showPageControlDropdown]);
 
   // return if page is null
   if (page == null) return <></>;

packages/app/src/interfaces/page.ts

@@ -9,7 +9,7 @@ import { SubscriptionStatusType } from './subscription';
 export interface IPage {
   path: string,
   status: string,
-  revision: Ref<IRevision>,
+  revision: Ref<IRevision & HasObjectId>,
   tags: Ref<ITag>[],
   creator: Ref<IUser>,
   createdAt: Date,