withTranslation

resource/locales/en-US/translation.json

@@ -77,7 +77,7 @@
   "Hide": "Hide",
   "Disclose E-mail": "Disclose E-mail",
 
-
+  "page exists": "this page already exists",
 
   "Create today's": "Create today's ...",
   "Memo": "memo",

resource/locales/ja/translation.json

@@ -75,8 +75,7 @@
   "Hide": "非公開",
   "Disclose E-mail": "メールアドレスの公開",
 
-
-
+  "page exists": "このページはすでに存在しています",
 
   "Create today's": "今日の◯◯を作成",
   "Memo": "メモ",

src/client/js/app.js

@@ -409,7 +409,9 @@ if (myDraftControlsElem) {
 
   limit = 3;
   ReactDOM.render(
-    <MyDraftList crowi={crowi} limit={limit} />,
+    <I18nextProvider i18n={i18n}>
+      <MyDraftList crowi={crowi} limit={limit} />
+    </I18nextProvider>,
     myDraftControlsElem,
   );
 }

src/client/js/components/PageList/Draft.jsx

@@ -1,22 +1,62 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export default class Draft extends React.Component {
+import Popover from 'react-bootstrap/lib/Popover';
+import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
+import { withTranslation } from 'react-i18next';
+
+class Draft extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.renderButton = this.renderButton.bind(this);
+    this.renderPopover = this.renderPopover.bind(this);
+    this.copyMarkdownToClipboard = this.copyMarkdownToClipboard.bind(this);
+  }
+
+  renderButton(isExist, markdown) {
+    if (isExist) {
+      return (
+        <button type="button" className="btn-primary p-0" onClick={this.copyMarkdownToClipboard}>
+          <span className="icon-doc"></span> Copy
+        </button>
+      );
+    }
+
+    return (
+      <a href={`${this.props.path}#edit`} target="_blank" rel="noopener noreferrer">
+        <button type="button" className="btn-primary p-0">
+          <span className="icon-note"></span>
+        </button>
+      </a>
+    );
+  }
+
+  copyMarkdownToClipboard() {
+    navigator.clipboard.writeText(this.props.markdown);
+  }
+
+  renderPopover(id, markdown) {
+    return (
+      <Popover id={id}>
+        {markdown}
+      </Popover>
+    );
+  }
 
   render() {
+    const { t } = this.props;
+
     return (
       <li className="page-list-li d-flex align-items-center">
-        <a href={`${this.props.path}#edit`} target="_blank" rel="noopener noreferrer">
-          <button type="button" className="btn-primary p-0">
-            <span className="icon-note"></span>
-          </button>
-        </a>
+        {this.renderButton(this.props.isExist, this.props.markdown)}
         <button type="button" className="btn-danger p-0" onClick={() => { return this.props.clearDraft(this.props.path) }}>
           <span className="icon-trash"></span>
         </button>
-        <a className="page-list-link px-3" href={this.props.path}>
-          {this.props.path} {this.props.markdown} {this.props.isExist ? 'exists' : ''}
-        </a>
+        <OverlayTrigger placement="right" overlay={this.renderPopover(this.props.path, this.props.markdown)}>
+          <span onClick={this.copyMarkdownToClipboard}>{this.props.path} {this.props.isExist ? `(${t('page exists')})` : ''}</span>
+        </OverlayTrigger>
       </li>
     );
   }
@@ -24,9 +64,12 @@ export default class Draft extends React.Component {
 }
 
 Draft.propTypes = {
+  t: PropTypes.func.isRequired,
   crowi: PropTypes.object.isRequired,
   path: PropTypes.string.isRequired,
   markdown: PropTypes.string.isRequired,
   isExist: PropTypes.bool.isRequired,
   clearDraft: PropTypes.func.isRequired,
 };
+
+export default withTranslation()(Draft);