peek draft html

resource/locales/en-US/translation.json

@@ -3,6 +3,7 @@
   "Edit": "Edit",
   "Delete": "Delete",
   "Duplicate": "Duplicate",
+  "Copy": "Copy",
   "Move": "Move",
   "Moved": "Moved",
   "Unlinked": "Unlinked",

resource/locales/ja/translation.json

@@ -3,6 +3,7 @@
   "Edit": "編集",
   "Delete": "削除",
   "Duplicate": "複製",
+  "Copy": "コピー",
   "Move": "移動",
   "Moved": "移動しました",
   "Unlinked": "リダイレクト削除",

src/client/js/app.js

@@ -407,10 +407,13 @@ if (myDraftControlsElem) {
     limit = 10;
   }
 
-  limit = 3;
   ReactDOM.render(
     <I18nextProvider i18n={i18n}>
-      <MyDraftList crowi={crowi} limit={limit} />
+      <MyDraftList
+        limit={limit}
+        crowi={crowi}
+        crowiOriginRenderer={crowiRenderer}
+      />
     </I18nextProvider>,
     myDraftControlsElem,
   );

src/client/js/components/MyDraftList/MyDraftList.jsx

@@ -75,6 +75,7 @@ export default class MyDraftList extends React.Component {
         <Draft
           key={draft.path}
           crowi={this.props.crowi}
+          crowiOriginRenderer={this.props.crowiOriginRenderer}
           path={draft.path}
           markdown={draft.markdown}
           isExist={draft.isExist}
@@ -219,7 +220,7 @@ export default class MyDraftList extends React.Component {
 
     return (
       <div className="page-list-container-create">
-        <button type="button" className="btn-danger" onClick={this.clearAllDrafts}>Clear</button>
+        <button type="button" className="btn-danger mb-3" onClick={this.clearAllDrafts}>Delete All</button>
         <ul className="page-list-ul page-list-ul-flat">
           {draftList}
         </ul>
@@ -232,9 +233,7 @@ export default class MyDraftList extends React.Component {
 
 
 MyDraftList.propTypes = {
-  crowi: PropTypes.object.isRequired,
   limit: PropTypes.number,
-};
-
-MyDraftList.defaultProps = {
+  crowi: PropTypes.object.isRequired,
+  crowiOriginRenderer: PropTypes.object.isRequired,
 };

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

@@ -5,29 +5,44 @@ import Popover from 'react-bootstrap/lib/Popover';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
 import { withTranslation } from 'react-i18next';
 
+import GrowiRenderer from '../../util/GrowiRenderer';
+
+import RevisionBody from '../Page/RevisionBody';
+
 class Draft extends React.Component {
 
   constructor(props) {
     super(props);
 
+    this.state = {
+      html: '',
+    };
+
+    this.growiRenderer = new GrowiRenderer(this.props.crowi, this.props.crowiOriginRenderer, { mode: 'draft' });
+
+    this.renderHtml = this.renderHtml.bind(this);
     this.renderButton = this.renderButton.bind(this);
     this.renderPopover = this.renderPopover.bind(this);
     this.copyMarkdownToClipboard = this.copyMarkdownToClipboard.bind(this);
   }
 
+  async componentDidMount() {
+    this.setState({ html: await this.renderHtml(this.props.markdown) });
+  }
+
   renderButton(isExist, markdown) {
     if (isExist) {
       return (
-        <button type="button" className="btn-primary p-0" onClick={this.copyMarkdownToClipboard}>
-          <span className="icon-doc"></span> Copy
+        <button type="button" className="btn-primary mx-1" onClick={this.copyMarkdownToClipboard}>
+          <span className="icon-doc"></span> {this.props.t('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>
+      <a href={`${this.props.path}#edit`} target="_blank" rel="noopener noreferrer" className="p-0">
+        <button type="button" className="btn-primary mx-1">
+          <span className="icon-note"></span> {this.props.t('Edit')}
         </button>
       </a>
     );
@@ -40,23 +55,52 @@ class Draft extends React.Component {
   renderPopover(id, markdown) {
     return (
       <Popover id={id}>
-        {markdown}
+        <RevisionBody html={this.state.html} />
       </Popover>
     );
   }
 
+  async renderHtml(markdown) {
+    const context = {
+      markdown,
+    };
+
+    const growiRenderer = this.growiRenderer;
+    const interceptorManager = this.props.crowi.interceptorManager;
+    const html = await interceptorManager.process('prePreProcess', context)
+      .then(() => {
+        context.markdown = growiRenderer.preProcess(context.markdown);
+      })
+      .then(() => { return interceptorManager.process('postPreProcess', context) })
+      .then(() => {
+        const parsedHTML = growiRenderer.process(context.markdown);
+        context.parsedHTML = parsedHTML;
+      })
+      .then(() => { return interceptorManager.process('prePostProcess', context) })
+      .then(() => {
+        context.parsedHTML = growiRenderer.postProcess(context.parsedHTML);
+      })
+      .then(() => { return interceptorManager.process('postPostProcess', context) })
+      .then(() => { return context.parsedHTML });
+
+    return html;
+  }
+
   render() {
     const { t } = this.props;
 
     return (
       <li className="page-list-li d-flex align-items-center">
-        {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>
         <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>
+          <span onClick={this.copyMarkdownToClipboard}>
+            <span className="icon-doc"></span>
+            {this.props.path} {this.props.isExist ? `(${t('page exists')})` : ''}
+          </span>
         </OverlayTrigger>
+        {this.renderButton(this.props.isExist, this.props.markdown)}
+        <button type="button" className="btn-danger mx-1" onClick={() => { return this.props.clearDraft(this.props.path) }}>
+          <span className="icon-trash"></span> {t('Delete')}
+        </button>
       </li>
     );
   }
@@ -66,6 +110,7 @@ class Draft extends React.Component {
 Draft.propTypes = {
   t: PropTypes.func.isRequired,
   crowi: PropTypes.object.isRequired,
+  crowiOriginRenderer: PropTypes.object.isRequired,
   path: PropTypes.string.isRequired,
   markdown: PropTypes.string.isRequired,
   isExist: PropTypes.bool.isRequired,

src/client/styles/scss/_user.scss

@@ -67,12 +67,13 @@
 
   .user-page-content {
     #user-draft-list {
-      button {
-        $size: 1.5em;
-
-        width: $size;
-        height: $size;
-        border-radius: 50%;
+      li {
+        button {
+          min-width: 55px;
+          padding: 0 5px;
+          font-size: x-small;
+          border-radius: 10px;
+        }
       }
     }
   }