PageTagForm submit tag to app.js when its onSubmit occurs

src/client/js/app.js

@@ -64,7 +64,8 @@ let pagePath;
 let pageContent = '';
 let markdown = '';
 let slackChannels;
-let pageTags = '';
+let currentPageTags = '';
+let newPageTags = '';
 if (mainContent !== null) {
   pageId = mainContent.getAttribute('data-page-id') || null;
   pageRevisionId = mainContent.getAttribute('data-page-revision-id');
@@ -73,7 +74,7 @@ if (mainContent !== null) {
   pageIdOnHackmd = mainContent.getAttribute('data-page-id-on-hackmd') || null;
   hasDraftOnHackmd = !!mainContent.getAttribute('data-page-has-draft-on-hackmd');
   pagePath = mainContent.attributes['data-path'].value;
-  pageTags = mainContent.getAttribute('data-page-tags') || '';
+  currentPageTags = mainContent.getAttribute('data-page-tags') || '';
   slackChannels = mainContent.getAttribute('data-slack-channels') || '';
   const rawText = document.getElementById('raw-text-original');
   if (rawText) {
@@ -111,6 +112,11 @@ if (isEnabledPlugins) {
   crowiPlugin.installAll(crowi, crowiRenderer);
 }
 
+// get new page tag
+const getNewPageTags = function(tags) {
+  newPageTags = tags;
+};
+
 /**
  * component store
  */
@@ -189,7 +195,7 @@ const saveWithShortcut = function(markdown) {
   // get options
   const options = componentInstances.savePageControls.getCurrentOptionsToSave();
   options.socketClientId = socketClientId;
-  options.pageTags = 'hoge';
+  options.pageTags = newPageTags;
 
   if (editorMode === 'hackmd') {
     // set option to sync
@@ -227,7 +233,7 @@ const saveWithSubmitButton = function(submitOpts) {
   // get options
   const options = componentInstances.savePageControls.getCurrentOptionsToSave();
   options.socketClientId = socketClientId;
-  options.pageTags = 'hoge';
+  options.pageTags = newPageTags;
 
   // set 'submitOpts.overwriteScopesOfDescendants' to options
   options.overwriteScopesOfDescendants = submitOpts ? !!submitOpts.overwriteScopesOfDescendants : false;
@@ -299,7 +305,7 @@ if (pageId) {
 if (pagePath) {
   componentMappings['page'] = <Page crowi={crowi} crowiRenderer={crowiRenderer} markdown={markdown} pagePath={pagePath} showHeadEditButton={true} onSaveWithShortcut={saveWithShortcut} />;
   componentMappings['revision-path'] = <RevisionPath pagePath={pagePath} crowi={crowi} />;
-  componentMappings['page-tag'] = <PageTagForm pageId={pageId} pageTags={pageTags} pagePath={pagePath} crowi={crowi} />;
+  componentMappings['page-tag'] = <PageTagForm pageId={pageId} pageTags={currentPageTags} pagePath={pagePath} crowi={crowi} submitTags={getNewPageTags} />;
   componentMappings['revision-url'] = <RevisionUrl pageId={pageId} pagePath={pagePath} />;
 }
 
@@ -330,7 +336,7 @@ if (savePageControlsElem) {
               savePageControls = elem.getWrappedInstance();
             }
           }}
-          pageId={pageId} pagePath={pagePath} slackChannels={slackChannels} pageTags={pageTags}
+          pageId={pageId} pagePath={pagePath} slackChannels={slackChannels}
           grant={grant} grantGroupId={grantGroupId} grantGroupName={grantGroupName} />
     </I18nextProvider>,
     savePageControlsElem

src/client/js/components/PageTagForm.jsx

@@ -20,6 +20,7 @@ export default class PageTagForm extends React.Component {
     };
 
     this.updateState = this.updateState.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -28,8 +29,9 @@ export default class PageTagForm extends React.Component {
     });
   }
 
-  getCurrentOptionsToSave() {
-    return Object.assign({}, this.state);
+  handleSubmit() {
+    this.props.submitTags(this.state.pageTags);
+
   }
 
   updateState(value) {
@@ -38,7 +40,7 @@ export default class PageTagForm extends React.Component {
 
   render() {
     return (
-      <div className="input-group-sm extended-setting">
+      <form onSubmit={this.handleSubmit}>
         <label className="mr-2">Tag:</label>
         <input className="form-control" type="text" value={this.state.pageTags} placeholder="input tag name"
           data-toggle="popover"
@@ -48,7 +50,7 @@ export default class PageTagForm extends React.Component {
           data-placement="top"
           onChange={e => this.updateState(e.target.value)}
           />
-      </div>
+      </form>
     );
   }
 }
@@ -58,6 +60,7 @@ PageTagForm.propTypes = {
   pageId: PropTypes.string,
   pagePath: PropTypes.string,
   pageTags: PropTypes.string,
+  submitTags: PropTypes.func,
 };
 
 PageTagForm.defaultProps = {