@manuscripts/body-editor 3.12.67 → 3.13.1

package/src/menus.tsx

@@ -0,0 +1,684 @@
+/*!
+ * © 2019 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { MenuSpec } from '@manuscripts/style-guide'
+import {
+  getGroupCategories,
+  schema,
+  SectionCategory,
+} from '@manuscripts/transform'
+import { toggleMark } from 'prosemirror-commands'
+import { redo, undo } from 'prosemirror-history'
+import { Command } from 'prosemirror-state'
+
+import {
+  activateSearchReplace,
+  addInlineComment,
+  blockActive,
+  canInsert,
+  copySelection,
+  insertAbstractSection,
+  insertAffiliation,
+  insertAward,
+  insertBackmatterSection,
+  insertBlock,
+  insertBoxElement,
+  insertContributors,
+  insertCrossReference,
+  insertEmbed,
+  insertGraphicalAbstract,
+  insertHeroImage,
+  insertInlineCitation,
+  insertInlineEquation,
+  insertInlineFootnote,
+  insertKeywords,
+  insertLink,
+  insertList,
+  insertSection,
+  markActive,
+  paste,
+} from './commands'
+import { openInsertTableDialog } from './components/toolbar/InsertTableDialog'
+import { ListMenuItem } from './components/toolbar/ListMenuItem'
+import { openInsertSpecialCharacterDialog } from './components/views/InsertSpecialCharacter'
+import { openKeyboardShortcuts } from './components/keyboard-shortcuts-modal/KeyboardShortcutsModal'
+import {
+  deleteClosestParentElement,
+  findClosestParentElementNodeName,
+} from './lib/hierarchy'
+import { templateAllows } from './lib/template'
+import { isEditAllowed } from './lib/utils'
+import { getEditorProps } from './plugins/editor-props'
+import { useEditor } from './useEditor'
+import { openInsertAwardModal } from './components/awards/AwardModal'
+
+export const getEditorMenus = (
+  editor: ReturnType<typeof useEditor>
+): MenuSpec[] => {
+  const { isCommandValid, state, view } = editor
+  const doCommand = (command: Command) => () => editor.doCommand(command)
+  const props = getEditorProps(state)
+
+  const insertBackmatterSectionMenu = (category: SectionCategory) => {
+    const command = insertBackmatterSection(category)
+    return {
+      id: `insert-${category.id}`,
+      label: category.titles[0],
+      isEnabled: isCommandValid(command),
+      run: doCommand(command),
+    }
+  }
+
+  const insertAbstractsSectionMenu = (category: SectionCategory) => {
+    const command =
+      category.group === 'abstracts-graphic'
+        ? insertGraphicalAbstract(category)
+        : insertAbstractSection(category)
+
+    return {
+      id: `insert-${category.id}`,
+      label: category.titles[0],
+      isEnabled: isCommandValid(command),
+      run: doCommand(command),
+    }
+  }
+
+  const edit: MenuSpec = {
+    id: 'edit',
+    label: 'Edit',
+    isEnabled: true,
+    submenu: [
+      {
+        id: 'edit-undo',
+        role: 'undo',
+        label: 'Undo',
+        shortcut: {
+          mac: 'CommandOrControl+Z',
+          pc: 'CommandOrControl+Z',
+        },
+        isEnabled: isCommandValid(undo),
+        run: doCommand(undo),
+      },
+      {
+        id: 'edit-redo',
+        role: 'redo',
+        label: 'Redo',
+        shortcut: {
+          mac: 'Shift+CommandOrControl+Z',
+          pc: 'CommandOrControl+Y',
+        },
+        isEnabled: isCommandValid(redo),
+        run: doCommand(redo),
+      },
+      {
+        role: 'separator',
+      },
+      {
+        id: 'edit-copy',
+        role: 'copy',
+        label: 'Copy',
+        isEnabled: isEditAllowed(state) && isCommandValid(copySelection),
+        run: doCommand(copySelection),
+      },
+      {
+        id: 'edit-paste',
+        role: 'paste',
+        label: 'Paste',
+        isEnabled: isEditAllowed(state) && isCommandValid(paste('html')),
+        run: doCommand(paste('html')),
+      },
+      {
+        id: 'edit-paste-text',
+        role: 'paste-text',
+        label: 'Paste without formatting',
+        isEnabled: isEditAllowed(state) && isCommandValid(paste('text')),
+        run: doCommand(paste('text')),
+      },
+      {
+        role: 'separator',
+      },
+      {
+        id: 'edit-delete',
+        role: 'delete',
+        label: (() => {
+          const nodeName = findClosestParentElementNodeName(state)
+
+          return `Delete ${nodeName}`
+        })(),
+        isEnabled:
+          isEditAllowed(state) && isCommandValid(deleteClosestParentElement),
+        run: doCommand(deleteClosestParentElement),
+      },
+      {
+        role: 'separator',
+      },
+      {
+        id: 'find-replace',
+        role: 'find-replace',
+        label: 'Find and replace',
+        shortcut: {
+          mac: 'CommandOrControl+Shift+H',
+          pc: 'CommandOrControl+Shift+H',
+        },
+        isEnabled: isCommandValid(activateSearchReplace),
+        run: doCommand(activateSearchReplace),
+      },
+    ],
+  }
+
+  const categories = getGroupCategories(props.sectionCategories, 'backmatter')
+  const abstractsCategories = getGroupCategories(
+    props.sectionCategories,
+    'abstracts'
+  )
+  const graphicalAbstractsCategories = getGroupCategories(
+    props.sectionCategories,
+    'abstracts-graphic'
+  )
+  const allAbstractsCategories = [
+    ...abstractsCategories,
+    ...graphicalAbstractsCategories,
+  ]
+  const insert: MenuSpec = {
+    id: 'insert',
+    label: 'Insert',
+    isEnabled: true,
+    submenu: [
+      {
+        id: 'insert-comment',
+        label: 'Comment',
+        isEnabled: isEditAllowed(state) && isCommandValid(addInlineComment),
+        run: doCommand(addInlineComment),
+        isHidden: !templateAllows(state, schema.nodes.comment),
+      },
+      {
+        id: 'back-matter',
+        label: 'Author Notes',
+        isEnabled: true,
+        submenu: categories.map(insertBackmatterSectionMenu),
+        isHidden: !categories.length,
+      },
+      {
+        id: 'insert-section',
+        label: 'Section',
+        shortcut: {
+          mac: 'CommandOrControl+Enter',
+          pc: 'CommandOrControl+Enter',
+        },
+        isEnabled: isEditAllowed(state) && isCommandValid(insertSection()),
+        run: doCommand(insertSection()),
+        isHidden: !templateAllows(state, schema.nodes.section),
+      },
+      {
+        id: 'insert-subsection',
+        label: 'Subsection',
+        shortcut: {
+          mac: 'Shift+CommandOrControl+Enter',
+          pc: 'Shift+CommandOrControl+Enter',
+        },
+        isEnabled: isEditAllowed(state) && isCommandValid(insertSection(true)),
+        run: doCommand(insertSection(true)),
+        isHidden: !templateAllows(state, schema.nodes.section),
+      },
+      {
+        id: 'insert-paragraph',
+        label: 'Paragraph',
+        isEnabled:
+          isEditAllowed(state) &&
+          isCommandValid(canInsert(schema.nodes.paragraph)),
+        run: doCommand(insertBlock(schema.nodes.paragraph)),
+        isHidden: !templateAllows(state, schema.nodes.paragraph),
+      },
+      {
+        role: 'separator',
+      },
+      {
+        id: 'insert-bullet-list',
+        label: 'Bullet List',
+        isEnabled:
+          isEditAllowed(state) && isCommandValid(canInsert(schema.nodes.list)),
+        run: doCommand(insertList(schema.nodes.list, 'bullet')),
+        isHidden: !templateAllows(state, schema.nodes.list),
+      },
+      {
+        id: 'insert-order-list',
+        label: 'Ordered List',
+        isEnabled:
+          isEditAllowed(state) && isCommandValid(canInsert(schema.nodes.list)),
+        run: doCommand(insertList(schema.nodes.list, 'order')),
+        isHidden: !templateAllows(state, schema.nodes.list),
+      },
+      {
+        role: 'separator',
+      },
+      {
+        id: 'insert-blockquote',
+        label: 'Block Quote',
+        isEnabled:
+          isEditAllowed(state) &&
+          isCommandValid(canInsert(schema.nodes.blockquote_element)),
+        run: doCommand(insertBlock(schema.nodes.blockquote_element)),
+        isHidden: !templateAllows(state, schema.nodes.blockquote_element),
+      },
+      {
+        id: 'insert-pullquote',
+        label: 'Pull Quote',
+        isEnabled:
+          isEditAllowed(state) &&
+          isCommandValid(canInsert(schema.nodes.pullquote_element)),
+        run: doCommand(insertBlock(schema.nodes.pullquote_element)),
+        isHidden: !templateAllows(state, schema.nodes.pullquote_element),
+      },
+      {
+        role: 'separator',
+      },
+      {
+        id: 'insert-figure-element',
+        label: 'Figure Panel',
+        shortcut: {
+          mac: 'Option+CommandOrControl+P',
+          pc: 'CommandOrControl+Option+P',
+        },
+        isEnabled:
+          isEditAllowed(state) &&
+          isCommandValid(canInsert(schema.nodes.figure_element)),
+        run: doCommand(insertBlock(schema.nodes.figure_element)),
+        isHidden: !templateAllows(state, schema.nodes.figure_element),
+      },
+      {
+        id: 'insert-image-element',
+        label: 'Image',
+        isEnabled:
+          isEditAllowed(state) &&
+          isCommandValid(canInsert(schema.nodes.image_element)),
+        run: doCommand(insertBlock(schema.nodes.image_element)),
+        isHidden: !templateAllows(state, schema.nodes.image_element),
+      },
+      {
+        id: 'insert-table-element',
+        label: 'Table',
+        shortcut: {
+          mac: 'Option+CommandOrControl+T',
+          pc: 'CommandOrControl+Option+T',
+        },
+        isEnabled:
+          isEditAllowed(state) &&
+          isCommandValid(canInsert(schema.nodes.table_element)),
+        run: () => openInsertTableDialog(editor.state, editor.dispatch),
+        isHidden: !templateAllows(state, schema.nodes.table_element),
+      },
+      {
+        id: 'insert-boxed-text',
+        label: 'Boxed Text',
+        shortcut: {
+          mac: 'Option+CommandOrControl+B',
+          pc: 'CommandOrControl+Option+B',
+        },
+        isEnabled:
+          isEditAllowed(state) &&
+          isCommandValid(canInsert(schema.nodes.box_element)),
+        run: doCommand(insertBoxElement),
+        isHidden: !templateAllows(state, schema.nodes.box_element),
+      },
+      {
+        role: 'separator',
+      },
+      {
+        id: 'insert-embed-media',
+        label: 'Media',
+        isActive: blockActive(schema.nodes.embed)(state),
+        isEnabled:
+          isEditAllowed(state) && isCommandValid(canInsert(schema.nodes.embed)),
+        run: doCommand(insertEmbed),
+        isHidden: !templateAllows(state, schema.nodes.embed),
+      },
+      {
+        id: 'insert-link',
+        label: 'Link',
+        shortcut: {
+          mac: 'Option+CommandOrControl+H',
+          pc: 'CommandOrControl+Option+H',
+        },
+        isActive: blockActive(schema.nodes.link)(state),
+        isEnabled:
+          isEditAllowed(state) && isCommandValid(canInsert(schema.nodes.link)),
+        run: doCommand(insertLink),
+        isHidden: !templateAllows(state, schema.nodes.link),
+      },
+      {
+        role: 'separator',
+      },
+      {
+        id: 'insert-equation',
+        label: 'Equation',
+        shortcut: {
+          mac: 'Option+CommandOrControl+E',
+          pc: 'CommandOrControl+Option+E',
+        },
+        isEnabled:
+          isEditAllowed(state) &&
+          isCommandValid(canInsert(schema.nodes.equation_element)),
+        run: doCommand(insertBlock(schema.nodes.equation_element)),
+        isHidden: !templateAllows(state, schema.nodes.equation_element),
+      },
+      {
+        id: 'insert-inline-equation',
+        label: 'Inline Equation',
+        shortcut: {
+          mac: 'Shift+Option+CommandOrControl+E',
+          pc: 'Shift+CommandOrControl+E',
+        },
+        isEnabled:
+          isEditAllowed(state) &&
+          isCommandValid(canInsert(schema.nodes.inline_equation)),
+        run: doCommand(insertInlineEquation),
+        isHidden: !templateAllows(state, schema.nodes.inline_equation),
+      },
+      {
+        role: 'separator',
+      },
+      {
+        id: 'insert-citation',
+        label: 'Citation',
+        shortcut: {
+          mac: 'Option+CommandOrControl+C',
+          pc: 'CommandOrControl+Option+C',
+        },
+        isEnabled:
+          isEditAllowed(state) &&
+          isCommandValid(canInsert(schema.nodes.citation)),
+        run: doCommand(insertInlineCitation),
+        isHidden: !templateAllows(state, schema.nodes.citation),
+      },
+      {
+        id: 'insert-cross-reference',
+        label: 'Cross-reference',
+        shortcut: {
+          mac: 'Option+CommandOrControl+R',
+          pc: 'CommandOrControl+Option+R',
+        },
+        isEnabled:
+          isEditAllowed(state) &&
+          isCommandValid(canInsert(schema.nodes.cross_reference)),
+        run: doCommand(insertCrossReference),
+        isHidden: !templateAllows(state, schema.nodes.cross_reference),
+      },
+      {
+        id: 'insert-footnote',
+        label: 'Footnote',
+        shortcut: {
+          mac: 'Option+CommandOrControl+F',
+          pc: 'CommandOrControl+Option+F',
+        },
+        isEnabled:
+          isEditAllowed(state) &&
+          isCommandValid(canInsert(schema.nodes.inline_footnote)),
+        run: doCommand(insertInlineFootnote),
+        isHidden: !templateAllows(state, schema.nodes.inline_footnote),
+      },
+      {
+        id: 'insert-special-character',
+        label: 'Special Characters',
+        isEnabled:
+          isEditAllowed(state) && isCommandValid(canInsert(schema.nodes.text)),
+        run: () => openInsertSpecialCharacterDialog(view),
+        isHidden: !templateAllows(state, schema.nodes.text),
+      },
+      {
+        id: 'insert-hero-image',
+        label: 'Hero Image',
+        isEnabled:
+          isEditAllowed(state) &&
+          isCommandValid(canInsert(schema.nodes.hero_image)),
+        run: doCommand(insertHeroImage()),
+        isHidden: !templateAllows(state, schema.nodes.hero_image),
+      },
+    ],
+  }
+  const format: MenuSpec = {
+    id: 'format',
+    label: 'Format',
+    isEnabled: isEditAllowed(state),
+    submenu: [
+      {
+        id: 'format-bold',
+        label: 'Bold',
+        shortcut: {
+          mac: 'CommandOrControl+B',
+          pc: 'CommandOrControl+B',
+        },
+        isActive: markActive(schema.marks.bold)(state),
+        isEnabled: isCommandValid(toggleMark(schema.marks.bold)),
+        run: doCommand(toggleMark(schema.marks.bold)),
+      },
+      {
+        id: 'format-italic',
+        label: 'Italic',
+        shortcut: {
+          mac: 'CommandOrControl+I',
+          pc: 'CommandOrControl+I',
+        },
+        isActive: markActive(schema.marks.italic)(state),
+        isEnabled: isCommandValid(toggleMark(schema.marks.italic)),
+        run: doCommand(toggleMark(schema.marks.italic)),
+      },
+      {
+        id: 'format-strikethrough',
+        label: 'Strikethrough',
+        shortcut: {
+          mac: 'CommandOrControl+Shift+X',
+          pc: 'CommandOrControl+Shift+X',
+        },
+        isActive: markActive(schema.marks.strikethrough)(state),
+        isEnabled: isCommandValid(toggleMark(schema.marks.strikethrough)),
+        run: doCommand(toggleMark(schema.marks.strikethrough)),
+      },
+      {
+        id: 'format-underline',
+        label: 'Underline',
+        shortcut: {
+          mac: 'CommandOrControl+U',
+          pc: 'CommandOrControl+U',
+        },
+        isActive: markActive(schema.marks.underline)(state),
+        isEnabled: isCommandValid(toggleMark(schema.marks.underline)),
+        run: doCommand(toggleMark(schema.marks.underline)),
+      },
+      {
+        role: 'separator',
+      },
+      {
+        id: 'format-superscript',
+        label: 'Superscript',
+        shortcut: {
+          mac: 'Option+CommandOrControl+=',
+          pc: 'CommandOrControl+Option+=',
+        },
+        isActive: markActive(schema.marks.superscript)(state),
+        isEnabled: isCommandValid(toggleMark(schema.marks.superscript)),
+        run: doCommand(toggleMark(schema.marks.superscript)),
+      },
+      {
+        id: 'format-subscript',
+        label: 'Subscript',
+        shortcut: {
+          mac: 'Option+CommandOrControl+-',
+          pc: 'CommandOrControl+Option+-',
+        },
+        isActive: markActive(schema.marks.subscript)(state),
+        isEnabled: isCommandValid(toggleMark(schema.marks.subscript)),
+        run: doCommand(toggleMark(schema.marks.subscript)),
+      },
+      {
+        role: 'separator',
+      },
+      {
+        id: 'insert-bullet-list',
+        label: 'Bulleted list',
+        component: ListMenuItem,
+        isEnabled: isCommandValid(insertList(schema.nodes.list, 'bullet')),
+        submenu: [
+          {
+            id: 'bullet',
+            label: 'Bullet',
+            isEnabled: true,
+            run: doCommand(insertList(schema.nodes.list, 'bullet')),
+          },
+          {
+            id: 'simple',
+            label: 'Simple',
+            isEnabled: true,
+            run: doCommand(insertList(schema.nodes.list, 'simple')),
+          },
+        ],
+      },
+      {
+        id: 'insert-ordered-list',
+        label: 'Ordered list',
+        component: ListMenuItem,
+        isEnabled: isCommandValid(insertList(schema.nodes.list, 'order')),
+        submenu: [
+          {
+            id: 'order',
+            label: 'Order',
+            isEnabled: true,
+            run: doCommand(insertList(schema.nodes.list, 'order')),
+          },
+          {
+            id: 'alpha-upper',
+            label: 'Alpha upper',
+            isEnabled: true,
+            run: doCommand(insertList(schema.nodes.list, 'alpha-upper')),
+          },
+          {
+            id: 'alpha-lower',
+            label: 'Alpha lower',
+            isEnabled: true,
+            run: doCommand(insertList(schema.nodes.list, 'alpha-lower')),
+          },
+          {
+            id: 'roman-upper',
+            label: 'Roman upper',
+            isEnabled: true,
+            run: doCommand(insertList(schema.nodes.list, 'roman-upper')),
+          },
+          {
+            id: 'roman-lower',
+            label: 'Roman lower',
+            isEnabled: true,
+            run: doCommand(insertList(schema.nodes.list, 'roman-lower')),
+          },
+        ],
+      },
+    ],
+  }
+
+  const ABSTRACT_ID = 'abstract'
+
+  const abstractSection = allAbstractsCategories.find(
+    (s) => s.id === ABSTRACT_ID
+  )
+  const ABSTRACT_GRAPHICAL_ID = 'abstract-graphical'
+  const graphicalAbstractSection = allAbstractsCategories.find(
+    (s) => s.id === ABSTRACT_GRAPHICAL_ID
+  )
+
+  const abstractsSubmenuList = allAbstractsCategories.filter(
+    (c) => c.id !== ABSTRACT_ID && c.id !== ABSTRACT_GRAPHICAL_ID
+  )
+
+  const metadata: MenuSpec = {
+    id: 'insert-metadata',
+    label: 'Metadata',
+    isEnabled: true,
+    submenu: [
+      {
+        id: 'insert-abstract',
+        label: 'Abstract',
+        isEnabled: isCommandValid(insertAbstractSection(abstractSection)),
+        run: doCommand(insertAbstractSection(abstractSection)),
+        isHidden:
+          !abstractSection || !templateAllows(state, schema.nodes.abstracts),
+      },
+      {
+        id: 'insert-graphical-abstract',
+        label: 'Graphical Abstract',
+        isEnabled: isCommandValid(
+          insertGraphicalAbstract(graphicalAbstractSection)
+        ),
+        run: doCommand(insertGraphicalAbstract(graphicalAbstractSection)),
+        isHidden:
+          !graphicalAbstractSection ||
+          !templateAllows(state, schema.nodes.graphical_abstract_section),
+      },
+      {
+        id: 'insert-abstract-types',
+        label: 'Other Abstract Types',
+        isEnabled: !!abstractsSubmenuList.length,
+        submenu: abstractsSubmenuList.map(insertAbstractsSectionMenu),
+        isHidden: !allAbstractsCategories.length,
+      },
+      {
+        id: 'insert-authors',
+        label: 'Authors',
+        isEnabled: isCommandValid(insertContributors),
+        run: doCommand(insertContributors),
+        isHidden: !templateAllows(state, schema.nodes.contributors),
+      },
+      {
+        id: 'insert-contributors',
+        label: 'Affiliations',
+        isEnabled: isCommandValid(insertAffiliation),
+        run: doCommand(insertAffiliation),
+        isHidden: !templateAllows(state, schema.nodes.affiliations),
+      },
+      {
+        id: 'insert-awards',
+        label: 'Funder Information',
+        isEnabled: isEditAllowed(state) && isCommandValid(insertAward()),
+        run: () => openInsertAwardModal(view),
+        isHidden: !templateAllows(state, schema.nodes.awards),
+      },
+      {
+        id: 'insert-keywords',
+        label: 'Keywords',
+        isEnabled: isCommandValid(insertKeywords),
+        run: doCommand(insertKeywords),
+        isHidden: !templateAllows(state, schema.nodes.keywords),
+      },
+    ],
+  }
+
+  const help: MenuSpec = {
+    id: 'help',
+    label: 'Help',
+    isEnabled: true,
+    submenu: [
+      {
+        id: 'help-keyboard-shortcuts',
+        label: 'Keyboard shortcuts',
+        isEnabled: true,
+        shortcut: {
+          mac: 'CommandOrControl+Shift+/',
+          pc: 'CommandOrControl+Shift+/',
+        },
+        run: () => openKeyboardShortcuts(view),
+      },
+    ],
+  }
+
+  return [edit, insert, metadata, format, help]
+}