Merge pull request #1206 from substance/issue-1187

Author and reference editing from manuscript

Author: oliver7654

src/article/ArticleAPI.js

@@ -1,4 +1,4 @@
-import { documentHelpers, includes, orderBy, without, copySelection, selectionHelpers } from 'substance'
+import { documentHelpers, includes, orderBy, without, copySelection, selectionHelpers, isString } from 'substance'
 import TableEditingAPI from './shared/TableEditingAPI'
 import { importFigures } from './articleHelpers'
 import { findParentByType } from './shared/nodeHelpers'
@@ -132,6 +132,10 @@ export default class ArticleAPI {
     this._setSelection(this._createValueSelection(path))
   }
 
+  selectFirstRequiredPropertyOfMetadataCard (nodeId) {
+    this._setSelection(this._selectFirstRequiredPropertyOfMetadataCard(nodeId))
+  }
+
   _appendChild (collectionPath, data) {
     this.editorSession.transaction(tx => {
       let node = tx.create(data)
@@ -391,6 +395,9 @@ export default class ArticleAPI {
 
   // ATTENTION: this only works for meta-data cards, thus the special naming
   _selectFirstRequiredPropertyOfMetadataCard (node) {
+    if (isString(node)) {
+      node = this.getDocument().get(node)
+    }
     let propName = this._getFirstRequiredPropertyName(node)
     if (propName) {
       let path = [node.id, propName]

src/article/editor/EditorPackage.js

@@ -40,6 +40,7 @@ import DownloadSupplementaryFileTool from './DownloadSupplementaryFileTool'
 import DropFigure from './DropFigure'
 import EditBlockFormulaCommand from '../shared/EditBlockFormulaCommand'
 import EditDispFormulaTool from './EditDispFormulaTool'
+import EditEntityCommand from '../shared/EditEntityCommand'
 import EditInlineFormulaCommand from '../shared/EditInlineFormulaCommand'
 import EditInlineFormulaTool from './EditInlineFormulaTool'
 import EditXrefCommand from '../shared/EditXrefCommand'
@@ -130,6 +131,10 @@ export default {
     config.addCommand('download-file', DownloadSupplementaryFileCommand, {
       commandGroup: 'file'
     })
+    config.addCommand('edit-author', EditEntityCommand, {
+      selectionType: 'author',
+      commandGroup: 'author'
+    })
     config.addCommand('edit-block-formula', EditBlockFormulaCommand, {
       commandGroup: 'prompt'
     })
@@ -141,6 +146,10 @@ export default {
       nodeType: 'inline-formula',
       commandGroup: 'prompt'
     })
+    config.addCommand('edit-reference', EditEntityCommand, {
+      selectionType: 'reference',
+      commandGroup: 'reference'
+    })
     config.addCommand('edit-xref', EditXrefCommand, {
       nodeType: 'xref',
       commandGroup: 'prompt'

src/article/editor/styles/_authors-list.css

@@ -6,10 +6,20 @@
   cursor: default;
 }
 
+.sc-authors-list .se-contrib {
+  padding: var(--t-input-padding);
+  margin: var(--t-negative-list-padding);
+  cursor: default;
+}
+
 .sc-authors-list .se-contrib.sm-empty {
   color: var(--t-light-text-color);
 }
 
+.sc-authors-list .se-contrib.sm-selected {
+  outline: var(--t-input-focus-border);
+}
+
 .sc-authors-list > .se-content {
   font-size: var(--t-large-font-size);
 }

src/article/editor/styles/_reference-list.css

@@ -6,6 +6,10 @@
   margin: var(--t-text-spacing) 0;
 }
 
+.sc-reference-list .sc-reference.sm-selected {
+  outline: var(--t-input-focus-border);
+}
+
 .sc-reference-list .sc-reference:first-child {
   margin-top: 0 !important;
 }

src/article/metadata/MetadataPackage.js

@@ -18,6 +18,7 @@ import {
   AddFigurePanelCommand, MoveFigurePanelCommand,
   ReplaceFigurePanelImageCommand, RemoveFigurePanelCommand, OpenFigurePanelImageCommand
 } from '../shared/FigurePanelCommands'
+import EditEntityCommand from '../shared/EditEntityCommand'
 import FiguresSectionComponent from './FiguresSectionComponent'
 import InsertFigurePanelTool from '../shared/InsertFigurePanelTool'
 import InsertFootnoteCommand from '../shared/InsertFootnoteCommand'
@@ -61,6 +62,14 @@ export default {
     config.addCommand('add-figure-panel', AddFigurePanelCommand, {
       commandGroup: 'figure-panel'
     })
+    config.addCommand('edit-author', EditEntityCommand, {
+      selectionType: 'author',
+      commandGroup: 'author'
+    })
+    config.addCommand('edit-reference', EditEntityCommand, {
+      selectionType: 'reference',
+      commandGroup: 'reference'
+    })
     config.addCommand('move-down-col-item', MoveCollectionItemCommand, {
       direction: 'down',
       commandGroup: 'collection'

src/article/shared/ArticleToolbarPackage.js

@@ -171,6 +171,22 @@ export default {
               { type: 'command-group', name: 'custom-metadata-fields' }
             ]
           },
+          {
+            type: 'group',
+            name: 'author',
+            style: 'descriptive',
+            items: [
+              { type: 'command-group', name: 'author' }
+            ]
+          },
+          {
+            type: 'group',
+            name: 'reference',
+            style: 'descriptive',
+            items: [
+              { type: 'command-group', name: 'reference' }
+            ]
+          },
           {
             type: 'group',
             name: 'collection',
@@ -194,6 +210,8 @@ export default {
           { type: 'command-group', name: 'file' },
           { type: 'command-group', name: 'figure-panel' },
           { type: 'command-group', name: 'footnote' },
+          { type: 'command-group', name: 'author' },
+          { type: 'command-group', name: 'reference' },
           { type: 'command-group', name: 'collection' },
           { type: 'command-group', name: 'list' },
           { type: 'command-group', name: 'custom-metadata-fields' }
@@ -326,6 +344,10 @@ export default {
     config.addLabel('move-down-metadata-field', 'Move Down Metadata Field')
     config.addLabel('move-up-metadata-field', 'Move Up Metadata Field')
     config.addLabel('remove-metadata-field', 'Remove Metadata Field')
+    // Author tools
+    config.addLabel('edit-author', 'Edit Author')
+    // Reference tools
+    config.addLabel('edit-reference', 'Edit Reference')
     // Context tools
     config.addLabel('context-tools', 'Edit')
     // Mode

src/article/shared/AuthorsListComponent.js

@@ -9,6 +9,18 @@ export default class AuthorsListComponent extends CustomSurface {
     }
   }
 
+  didMount () {
+    super.didMount()
+
+    const appState = this.context.appState
+    appState.addObserver(['selection'], this.rerender, this, { stage: 'render' })
+  }
+
+  dispose () {
+    super.dispose()
+    this.context.appState.removeObserver(this)
+  }
+
   render ($$) {
     let el = $$('div').addClass('sc-authors-list')
     el.append(
@@ -18,15 +30,19 @@ export default class AuthorsListComponent extends CustomSurface {
   }
 
   _renderAuthors ($$) {
+    const sel = this.context.appState.selection
+
     const authors = this._getAuthors()
     let els = []
     authors.forEach((author, index) => {
-      let short = author.type === 'organisation'
-      els.push(
-        $$('span').addClass('se-contrib').html(
-          this.context.api._renderEntity(author, { short })
-        )
-      )
+      const short = author.type === 'organisation'
+      const authorEl = $$('span').addClass('se-contrib').html(
+        this.context.api._renderEntity(author, { short })
+      ).on('click', this._selectAuthor.bind(this, author.id))
+      if (sel && sel.customType === 'author' && sel.data.authorId === author.id) {
+        authorEl.addClass('sm-selected')
+      }
+      els.push(authorEl)
       if (index < authors.length - 1) {
         els.push(', ')
       }
@@ -41,4 +57,16 @@ export default class AuthorsListComponent extends CustomSurface {
   _getAuthors () {
     return this.props.model.getItems()
   }
+
+  _selectAuthor (authorId) {
+    const newSel = {
+      type: 'custom',
+      customType: 'author',
+      nodeId: authorId,
+      data: {
+        authorId
+      }
+    }
+    this.context.editorSession.setSelection(newSel)
+  }
 }

src/article/shared/EditEntityCommand.js

@@ -0,0 +1,42 @@
+import { Command } from 'substance'
+
+/*
+  This command intended to switch view and scroll to the selected node.
+  Command state becoming active only for certain type of custom selection,
+  e.g. if you want to use it, provide config with selectionType property.
+*/
+export default class EditEntityCommand extends Command {
+  getCommandState (params, context) {
+    let sel = params.selection
+    let newState = {
+      disabled: true
+    }
+
+    if (sel.isCustomSelection()) {
+      if (sel.customType === this.config.selectionType) {
+        newState.disabled = false
+        newState.nodeId = sel.nodeId
+      }
+    }
+
+    return newState
+  }
+
+  execute (params, context) {
+    const appState = context.appState
+    const viewName = appState.get('viewName')
+    if (viewName !== 'metadata') {
+      const sel = params.selection
+      const nodeId = sel.nodeId
+      context.editor.send('updateViewName', 'metadata')
+      // HACK: using the ArticlePanel instance to get to the current editor
+      // so that we can dispatch 'executeCommand'
+      let editor = context.articlePanel.refs.content
+      editor.send('scrollTo', { nodeId })
+      // HACK: this is a mess because context.api is a different instance after
+      // switching to metadata view
+      // TODO: we should extend ArticleAPI to allow for this
+      editor.api.selectFirstRequiredPropertyOfMetadataCard(nodeId)
+    }
+  }
+}

src/article/shared/ReferenceListComponent.js

@@ -1,13 +1,18 @@
-import { Component } from 'substance'
+import { CustomSurface } from 'substance'
 import { renderNode } from '../../kit'
 import { getPos } from './nodeHelpers'
 
-export default class ReferenceListComponent extends Component {
+export default class ReferenceListComponent extends CustomSurface {
   didMount () {
-    this.context.appState.addObserver(['document'], this.rerender, this, { stage: 'render', document: { path: ['article', 'references'] } })
+    super.didMount()
+
+    const appState = this.context.appState
+    appState.addObserver(['document'], this.rerender, this, { stage: 'render', document: { path: ['article', 'references'] } })
+    appState.addObserver(['selection'], this.rerender, this, { stage: 'render' })
   }
 
   dispose () {
+    super.dispose()
     // TODO: as we have a node for references now, we should turn this into a NodeComponent instead
     this.context.appState.removeObserver(this)
   }
@@ -20,6 +25,7 @@ export default class ReferenceListComponent extends Component {
   }
 
   render ($$) {
+    const sel = this.context.appState.selection
     const bibliography = this._getBibliography()
 
     let el = $$('div').addClass('sc-reference-list')
@@ -31,19 +37,41 @@ export default class ReferenceListComponent extends Component {
     }
 
     bibliography.forEach(ref => {
-      el.append(
-        renderNode($$, this, ref)
-      )
+      const referenceEl = renderNode($$, this, ref)
+        .ref(ref.id)
+        .on('click', this._selectReference.bind(this, ref.id))
+
+      if (sel && sel.customType === 'reference' && sel.data.referenceId === ref.id) {
+        referenceEl.addClass('sm-selected')
+      }
+
+      el.append(referenceEl)
     })
 
     return el
   }
 
+  _getCustomResourceId () {
+    return 'reference-list'
+  }
+
   _getBibliography () {
     let references = this.props.model.getItems()
     references.sort((a, b) => {
       return getPos(a) - getPos(b)
     })
     return references
   }
+
+  _selectReference (referenceId) {
+    const newSel = {
+      type: 'custom',
+      customType: 'reference',
+      nodeId: referenceId,
+      data: {
+        referenceId
+      }
+    }
+    this.context.editorSession.setSelection(newSel)
+  }
 }

src/styles/_texture.css

@@ -97,6 +97,7 @@
   --t-input-outline-border: 2px solid var(--t-border-color);
   --t-input-focus-border: 2px solid rgb(145, 189, 240);
   --t-negative-input-padding: -6px; /* This must be the negative of input padding + default border width */
+  --t-negative-list-padding: -4px; /* Same, but without borders. Used in comma-separated lists. */
   --t-border-radius: 5px; /* Default border radius for rounded corners */
   --t-tool-border-radius: 3px; /* Default border radius for tools */
   --t-default-border: 1px solid var(--t-border-color);