@manuscripts/body-editor 3.12.66 → 3.13.0

package/src/views/inline_footnote.ts

@@ -0,0 +1,264 @@
+/*!
+ * © 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 { ContextMenu, ContextMenuProps } from '@manuscripts/style-guide'
+import {
+  FootnoteNode,
+  InlineFootnoteNode,
+  ManuscriptNodeView,
+} from '@manuscripts/transform'
+import { NodeSelection, TextSelection } from 'prosemirror-state'
+
+import { insertFootnotesElement } from '../commands'
+import {
+  FootnotesSelector,
+  FootnotesSelectorProps,
+} from '../components/views/FootnotesSelector'
+import { handleEnterKey } from '../lib/navigation-utils'
+import {
+  createFootnote,
+  findFootnotesContainerNode,
+  getFootnotesElementState,
+} from '../lib/footnotes'
+import { Trackable } from '../types'
+import { BaseNodeView } from './base_node_view'
+import { createNodeView } from './creators'
+import ReactSubView from './ReactSubView'
+import { isDeleted, isPendingInsert } from '@manuscripts/track-changes-plugin'
+
+export class InlineFootnoteView
+  extends BaseNodeView<Trackable<InlineFootnoteNode>>
+  implements ManuscriptNodeView
+{
+  protected popperContainer: HTMLDivElement
+
+  showContextMenu = () => {
+    this.props.popper.destroy()
+    const can = this.props.getCapabilities()
+    const showEditIcon = can?.editArticle
+
+    const componentProps: ContextMenuProps = {
+      actions: [
+        ...(showEditIcon
+          ? [
+              {
+                label: 'Edit',
+                action: () => {
+                  this.props.popper.destroy()
+                  this.showFootnotesSelector()
+                },
+                icon: 'Edit',
+              },
+            ]
+          : []),
+        {
+          label: 'Go to footnote',
+          action: () => {
+            this.props.popper.destroy()
+            this.scrollToReferencedFootnote()
+          },
+          icon: 'Scroll',
+        },
+      ],
+    }
+    this.props.popper.show(
+      this.dom,
+      ReactSubView(
+        this.props,
+        ContextMenu,
+        componentProps,
+        this.node,
+        this.getPos,
+        this.view,
+        ['context-menu']
+      ),
+      'right-start',
+      false
+    )
+  }
+
+  handleClick = () => {
+    if (isDeleted(this.node)) {
+      return
+    }
+    this.showContextMenu()
+  }
+
+  scrollToReferencedFootnote = () => {
+    const state = this.view.state
+    const fn = getFootnotesElementState(state, this.node.attrs.id)
+
+    if (!fn) {
+      return
+    }
+
+    let nodePos: number | undefined = undefined
+
+    for (const [node, pos] of fn.footnotes) {
+      if (node.attrs.id === this.node.attrs.rids[0]) {
+        nodePos = pos
+      }
+    }
+
+    if (nodePos && this.props.dispatch) {
+      const selection = NodeSelection.create(this.view.state.doc, nodePos + 1)
+
+      this.props.dispatch(
+        this.view.state.tr.setSelection(selection).scrollIntoView()
+      )
+    }
+  }
+
+  showFootnotesSelector = () => {
+    if (!this.props.getCapabilities().editArticle) {
+      return
+    }
+
+    const state = this.view.state
+    const pos = this.getPos()
+    const container = findFootnotesContainerNode(state.doc, pos)
+    const fn = getFootnotesElementState(state, container.node.attrs.id)
+
+    const footnotes = fn ? fn.footnotes.map((n) => n[0]) : []
+    const labels = fn ? fn.labels : new Map<string, string>()
+
+    const props: FootnotesSelectorProps = {
+      footnotes,
+      inlineFootnote: this.node,
+      labels,
+      onCancel: this.handleCancel,
+      onAdd: this.handleAdd,
+      onInsert: this.handleInsert,
+    }
+
+    this.popperContainer = ReactSubView(
+      this.props,
+      FootnotesSelector,
+      props,
+      this.node,
+      this.getPos,
+      this.view,
+      ['footnote-editor']
+    )
+    this.popperContainer.setAttribute('tabindex', '0')
+    this.props.popper.show(this.dom, this.popperContainer, 'auto', false)
+  }
+
+  public updateContents() {
+    super.updateContents()
+    const state = this.view.state
+    const fn = getFootnotesElementState(state, this.node.attrs.id)
+    if (!fn) {
+      this.dom.innerText = '?'
+      return
+    }
+
+    this.dom.innerText = fn.labels.get(this.node.attrs.id) || '?'
+  }
+
+  public initialise = () => {
+    this.dom = this.createDOM()
+    this.dom.classList.add('footnote-marker')
+    this.dom.tabIndex = 0
+    this.dom.addEventListener('click', this.handleClick)
+    this.dom.addEventListener(
+      'keydown',
+      handleEnterKey(() => this.handleClick())
+    )
+    this.updateContents()
+  }
+
+  selectNode = () => {
+    this.dom.classList.add('footnote-marker-selected')
+    if (!this.node.attrs.rids.length) {
+      this.showFootnotesSelector()
+    }
+  }
+
+  public deselectNode() {
+    this.dom.classList.remove('footnote-marker-selected')
+  }
+
+  public ignoreMutation = () => true
+
+  public createDOM = () => {
+    return document.createElement('span')
+  }
+
+  public destroy = () => {
+    this.props.popper.destroy()
+    this.popperContainer?.remove()
+  }
+
+  handleCancel = () => {
+    const tr = this.view.state.tr
+    const rids = this.node.attrs.rids
+    if (!rids.length) {
+      const pos = this.getPos()
+      tr.delete(pos, pos + this.node.nodeSize)
+      this.view.dispatch(tr)
+    }
+    this.destroy()
+  }
+
+  handleAdd = () => {
+    const state = this.view.state
+    const pos = this.getPos()
+    const container = findFootnotesContainerNode(state.doc, pos)
+    const fn = getFootnotesElementState(state, container.node.attrs.id)
+    const tr = this.view.state.tr
+    const footnote = createFootnote()
+    const rids = this.node.attrs.rids
+    tr.setNodeAttribute(pos, 'rids', [...rids, footnote.attrs.id])
+    let fnPos: number
+    if (fn) {
+      fnPos = fn.element[1] + fn.element[0].nodeSize - 1
+    } else {
+      const [elementNode, elementPos] = insertFootnotesElement(tr, [
+        container.node,
+        container.pos,
+      ])
+      fnPos = elementPos + elementNode.nodeSize - 1
+    }
+    tr.insert(fnPos, footnote)
+    const selection = TextSelection.create(tr.doc, fnPos + 2)
+    tr.setSelection(selection).scrollIntoView()
+    this.view.dispatch(tr)
+    this.view.focus()
+    this.destroy()
+  }
+
+  handleInsert = (footnotes: FootnoteNode[]) => {
+    const pos = this.getPos()
+    const tr = this.view.state.tr
+
+    if (footnotes.length) {
+      const rids = footnotes.map((note) => note.attrs.id)
+      if (rids.length) {
+        tr.setNodeAttribute(pos, 'rids', rids)
+      } else if (isPendingInsert(this.node)) {
+        tr.delete(pos, pos + this.node.nodeSize)
+      }
+    } else {
+      tr.delete(pos, pos + this.node.nodeSize)
+    }
+    this.view.dispatch(tr)
+
+    this.destroy()
+  }
+}
+
+export default createNodeView(InlineFootnoteView)

package/src/views/inline_footnote_editable.ts

@@ -0,0 +1,20 @@
+/*!
+ * © 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 { createEditableNodeView } from './creators'
+import { InlineFootnoteView } from './inline_footnote'
+
+export default createEditableNodeView(InlineFootnoteView)

package/src/views/keyword.ts

@@ -0,0 +1,127 @@
+/*!
+ * © 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 { KeywordNode, ManuscriptNodeView } from '@manuscripts/transform'
+import { TextSelection } from 'prosemirror-state'
+
+import {
+  DeleteKeywordDialog,
+  DeleteKeywordDialogProps,
+} from '../components/keywords/DeleteKeywordDialog'
+import { handleEnterKey } from '../lib/navigation-utils'
+import { Trackable } from '../types'
+import { BaseNodeView } from './base_node_view'
+import { createNodeView } from './creators'
+import ReactSubView from './ReactSubView'
+import { isDeleted } from '@manuscripts/track-changes-plugin'
+
+//todo fix
+const deleteIcon =
+  '<svg width="8px" height="8px" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg">\n' +
+  '    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\n' +
+  '        <g fill="#6E6E6E">\n' +
+  '            <rect id="Rectangle-23-Copy" transform="translate(13.000000, 13.000000) rotate(-45.000000) translate(-13.000000, -13.000000) " x="-3" y="11" width="32" height="4" rx="2"></rect>\n' +
+  '            <rect id="Rectangle-23-Copy-2" transform="translate(13.000000, 13.000000) scale(1, -1) rotate(-45.000000) translate(-13.000000, -13.000000) " x="-3" y="11" width="32" height="4" rx="2"></rect>\n' +
+  '        </g>\n' +
+  '    </g>\n' +
+  '</svg>'
+
+export class KeywordView
+  extends BaseNodeView<Trackable<KeywordNode>>
+  implements ManuscriptNodeView
+{
+  private dialog: HTMLElement
+
+  private isFirstKeyword(): boolean {
+    const pos = this.getPos()
+    const parent = this.view.state.doc.resolve(pos).parent
+    for (let i = 0; i < parent.childCount; i++) {
+      const child = parent.child(i)
+      if (!isDeleted(child)) {
+        return child === this.node
+      }
+    }
+    return false
+  }
+  public initialise = () => {
+    this.createDOM()
+    this.updateContents()
+  }
+
+  public createDOM = () => {
+    this.dom = document.createElement('span')
+    this.dom.classList.add('keyword')
+    this.dom.tabIndex = this.isFirstKeyword() ? 0 : -1
+    this.dom.addEventListener(
+      'keydown',
+      handleEnterKey(() => this.showConfirmationDialog())
+    )
+    this.contentDOM = document.createElement('span')
+  }
+
+  public updateContents() {
+    super.updateContents()
+    this.dom.innerHTML = ''
+    this.dom.appendChild(this.contentDOM as HTMLElement)
+
+    const can = this.props.getCapabilities()
+
+    if (can.editArticle) {
+      const svg = new DOMParser()
+        .parseFromString(deleteIcon, 'image/svg+xml')
+        .querySelector('svg') as SVGElement
+      svg.classList.add('delete-keyword')
+      svg.addEventListener('click', this.showConfirmationDialog)
+      this.dom.appendChild(svg)
+    }
+  }
+
+  private showConfirmationDialog = () => {
+    this.dialog?.remove()
+
+    const keyword = this.node
+    const pos = this.getPos()
+
+    const handleDelete = () => {
+      const tr = this.view.state.tr
+      tr.setSelection(
+        TextSelection.near(this.view.state.doc.resolve(0))
+      ).delete(pos, pos + keyword.nodeSize + 1)
+      this.view.dispatch(tr)
+    }
+
+    const componentProps: DeleteKeywordDialogProps = {
+      keyword: keyword.textContent,
+      handleDelete: handleDelete,
+    }
+
+    this.dialog = ReactSubView(
+      this.props,
+      DeleteKeywordDialog,
+      componentProps,
+      this.node,
+      this.getPos,
+      this.view,
+      ['keywords-delete']
+    )
+
+    if (this.dialog) {
+      this.dom.appendChild(this.dialog)
+    }
+  }
+}
+
+export default createNodeView(KeywordView)

package/src/views/keyword_group.ts

@@ -0,0 +1,109 @@
+/*!
+ * © 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 { KeywordGroupNode } from '@manuscripts/transform'
+
+import { AddKeywordInline } from '../components/keywords/AddKeywordInline'
+import { createKeyboardInteraction } from '../lib/navigation-utils'
+import BlockView from './block_view'
+import { createNodeView } from './creators'
+import ReactSubView from './ReactSubView'
+import { isDeleted } from '@manuscripts/track-changes-plugin'
+
+export class KeywordGroupView extends BlockView<KeywordGroupNode> {
+  private element: HTMLElement
+  private addingTools: HTMLDivElement
+  private removeKeydownListener?: () => void
+
+  public ignoreMutation = () => true
+
+  public createElement = () => {
+    this.element = document.createElement('div')
+    this.element.classList.add('block', 'keyword-group-container')
+    this.dom.appendChild(this.element)
+
+    this.contentDOM = document.createElement('div')
+    this.contentDOM.classList.add('keyword-group')
+    this.contentDOM.setAttribute('id', this.node.attrs.id)
+    this.contentDOM.setAttribute('contenteditable', 'false')
+
+    this.element.appendChild(this.contentDOM)
+
+    this.removeKeydownListener = createKeyboardInteraction({
+      container: this.element,
+      navigation: {
+        getItems: () =>
+          Array.from(
+            this.element.querySelectorAll<HTMLElement>(
+              '.keyword:not(.deleted), .keyword-add'
+            )
+          ),
+        arrowKeys: { forward: 'ArrowRight', backward: 'ArrowLeft' },
+      },
+    })
+
+    if (this.props.getCapabilities().editArticle) {
+      this.addingTools = ReactSubView(
+        this.props,
+        AddKeywordInline,
+        { getUpdatedNode: () => this.node },
+        this.node,
+        this.getPos,
+        this.view,
+        ['keywords-editor']
+      )
+    }
+
+    if (this.addingTools) {
+      this.element.appendChild(this.addingTools)
+    }
+  }
+
+  public updateContents() {
+    super.updateContents()
+    this.setKeywordsTabIndices()
+  }
+
+  private setKeywordsTabIndices() {
+    const container = this.contentDOM
+    if (!container) {
+      return
+    }
+    let firstFocusableFound = false
+    for (let i = 0; i < this.node.childCount; i++) {
+      const child = this.node.child(i)
+      const keyword = container.querySelector<HTMLElement>(
+        `.keyword[id="${child.attrs.id}"]`
+      ) as HTMLElement | undefined
+      if (!keyword) {
+        continue
+      }
+      if (!isDeleted(child) && !firstFocusableFound) {
+        keyword.tabIndex = 0
+        firstFocusableFound = true
+      } else {
+        keyword.tabIndex = -1
+      }
+    }
+  }
+
+  public destroy() {
+    this.removeKeydownListener?.()
+    super.destroy()
+  }
+}
+
+export default createNodeView(KeywordGroupView)

package/src/views/link.ts

@@ -0,0 +1,27 @@
+/*!
+ * © 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 { LinkNode, ManuscriptNodeView } from '@manuscripts/transform'
+
+import { Trackable } from '../types'
+import { BaseNodeView } from './base_node_view'
+import { createNodeView } from './creators'
+
+export class LinkView
+  extends BaseNodeView<Trackable<LinkNode>>
+  implements ManuscriptNodeView {}
+
+export default createNodeView(LinkView)