@manuscripts/body-editor 3.12.67 → 3.13.0

package/src/views/creators.ts

@@ -0,0 +1,82 @@
+/*!
+ * © 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 { ManuscriptNode } from '@manuscripts/transform'
+
+import { Dispatch } from '../commands'
+import { EditorProps } from '../configs/ManuscriptsEditor'
+import { NodeViewCreator } from '../types'
+import { BaseNodeView } from './base_node_view'
+import { addTrackChangesAttributes } from '@manuscripts/track-changes-plugin'
+
+export const createEditableNodeView =
+  <T extends BaseNodeView<ManuscriptNode>>(
+    type: new (...args: any[]) => T // eslint-disable-line @typescript-eslint/no-explicit-any
+  ) =>
+  (props: EditorProps, dispatch?: Dispatch): NodeViewCreator<T> =>
+  (node, view, getPos, decorations) => {
+    const nodeView = new type(
+      { ...props, dispatch },
+      node,
+      view,
+      getPos,
+      decorations
+    )
+
+    nodeView.initialise()
+
+    return nodeView
+  }
+
+export const createNodeView = createEditableNodeView
+
+export const createNodeOrElementView =
+  <T extends BaseNodeView<ManuscriptNode>>(
+    type: new (...args: any[]) => T, // eslint-disable-line @typescript-eslint/no-explicit-any
+    tagName: string,
+    callback?: (node: ManuscriptNode, dom: HTMLElement) => void
+  ) =>
+  (props: EditorProps): NodeViewCreator<T> =>
+  (node, view, getPos, decorations) => {
+    // TODO: look for parent Section instead?
+
+    for (const decoration of decorations) {
+      if (decoration.spec.element) {
+        const nodeView = new type(props, node, view, getPos, decorations)
+
+        nodeView.initialise()
+
+        return nodeView
+      }
+    }
+
+    const dom = document.createElement(tagName)
+
+    if (callback) {
+      callback(node, dom)
+    }
+    if (node.attrs.id) {
+      dom.id = node.attrs.id
+    }
+    addTrackChangesAttributes(node.attrs, dom)
+
+    const nodeView = {
+      dom,
+      contentDOM: dom,
+    }
+
+    return nodeView as T
+  }

package/src/views/cross_reference.ts

@@ -0,0 +1,74 @@
+/*!
+ * © 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 {
+  CrossReferenceNode,
+  ManuscriptNodeView,
+  Target,
+} from '@manuscripts/transform'
+
+import { handleEnterKey } from '../lib/navigation-utils'
+import { objectsKey } from '../plugins/objects'
+import { Trackable } from '../types'
+import { BaseNodeView } from './base_node_view'
+import { createNodeView } from './creators'
+
+export class CrossReferenceView
+  extends BaseNodeView<Trackable<CrossReferenceNode>>
+  implements ManuscriptNodeView
+{
+  public handleClick = () => {
+    const rids = this.node.attrs.rids
+    if (!rids.length) {
+      return
+    }
+    this.props.navigate({
+      pathname: this.props.location.pathname,
+      hash: '#' + rids[0],
+    })
+  }
+
+  public updateContents() {
+    super.updateContents()
+    const targets = objectsKey.getState(this.view.state) as Map<string, Target>
+    const attrs = this.node.attrs
+
+    const label = attrs.rids.length && targets.get(attrs.rids[0])?.label
+    // attrs.label contains custom text inserted at cross-reference creation time
+    this.dom.textContent = attrs.label || label || ''
+    this.dom.addEventListener('click', this.handleClick)
+  }
+
+  public initialise = () => {
+    this.createDOM()
+    this.updateContents()
+  }
+
+  public ignoreMutation = () => true
+
+  public createDOM = () => {
+    this.dom = document.createElement('span')
+    this.dom.className = 'cross-reference'
+    this.dom.tabIndex = 0
+
+    this.dom.addEventListener(
+      'keydown',
+      handleEnterKey(() => this.handleClick())
+    )
+  }
+}
+
+export default createNodeView(CrossReferenceView)

package/src/views/cross_reference_editable.ts

@@ -0,0 +1,113 @@
+/*!
+ * © 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 { skipTracking } from '@manuscripts/track-changes-plugin'
+import { schema, Target } from '@manuscripts/transform'
+import { TextSelection } from 'prosemirror-state'
+
+import { CrossReferenceItems } from '../components/views/CrossReferenceItems'
+import { objectsKey } from '../plugins/objects'
+import { createEditableNodeView } from './creators'
+import { CrossReferenceView } from './cross_reference'
+import ReactSubView from './ReactSubView'
+
+export class CrossReferenceEditableView extends CrossReferenceView {
+  protected popperContainer: HTMLDivElement
+
+  public selectNode = () => {
+    const { getCapabilities } = this.props
+
+    const rids = this.node.attrs.rids
+    const can = getCapabilities()
+
+    if (!can?.editArticle || rids.length) {
+      return
+    }
+
+    const componentProps = {
+      handleSelect: this.handleSelect,
+      targets: this.getTargets(),
+      handleCancel: this.handleCancel,
+      currentTargetId: rids[0],
+      currentCustomLabel: this.node.attrs.label,
+    }
+
+    this.popperContainer = ReactSubView(
+      this.props,
+      CrossReferenceItems,
+      componentProps,
+      this.node,
+      this.getPos,
+      this.view,
+      ['cross-reference-editor']
+    )
+    this.popperContainer.setAttribute('tabindex', '0')
+    this.props.popper.show(this.dom, this.popperContainer, 'auto')
+  }
+
+  public destroy = () => {
+    this.props.popper.destroy()
+    this.popperContainer?.remove()
+  }
+
+  public deselectNode = () => {
+    this.handleCancel()
+  }
+
+  public getTargets = () => {
+    const excludedTypes = [schema.nodes.image_element.name]
+
+    const targets = objectsKey.getState(this.view.state) as Map<string, Target>
+
+    return Array.from(targets.values()).filter(
+      (t) => !excludedTypes.includes(t.type)
+    )
+  }
+
+  public handleCancel = () => {
+    if (!this.node.attrs.rids.length) {
+      const { state } = this.view
+
+      const pos = this.getPos()
+      const tr = state.tr.delete(pos, pos + this.node.nodeSize)
+      tr.setSelection(TextSelection.create(tr.doc, pos))
+      skipTracking(tr)
+      this.view.dispatch(tr)
+    } else {
+      this.destroy()
+    }
+  }
+
+  public handleSelect = async (rid: string, label?: string) => {
+    const { state } = this.view
+
+    const pos = this.getPos()
+
+    const tr = state.tr.setNodeMarkup(pos, undefined, {
+      ...this.node.attrs,
+      label,
+      rids: [rid],
+    })
+
+    const selection = TextSelection.create(tr.doc, pos)
+
+    this.view.dispatch(tr.setSelection(selection))
+
+    this.destroy()
+  }
+}
+
+export default createEditableNodeView(CrossReferenceEditableView)

package/src/views/editable_block.ts

@@ -0,0 +1,141 @@
+/*!
+ * © 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 { ManuscriptNode, schema } from '@manuscripts/transform'
+
+import { ContextMenu, contextMenuBtnClass } from '../lib/context-menu'
+import { hasParent, isNotNull } from '../lib/utils'
+import BlockView from './block_view'
+import { createKeyboardInteraction } from '../lib/navigation-utils'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Constructor<T> = new (...args: any[]) => T
+
+export const EditableBlock = <T extends Constructor<BlockView<ManuscriptNode>>>(
+  Base: T
+) => {
+  return class extends Base {
+    public gutterButtons() {
+      const buttons = [this.createAddButton(), this.createEditButton()].filter(
+        isNotNull
+      )
+      // roving tabindex: first existing button is tabbable
+      buttons.forEach((btn) => (btn.tabIndex = -1))
+      if (buttons.length > 0) {
+        buttons[0].tabIndex = 0
+      }
+
+      return buttons
+    }
+
+    public actionGutterButtons() {
+      return []
+    }
+
+    public createAddButton() {
+      const hasAccess = this.props.getCapabilities()?.editArticle
+      if (!hasAccess) {
+        return null
+      }
+
+      const $pos = this.view.state.doc.resolve(this.getPos())
+      const nodeType = this.node.type
+      if (
+        nodeType === schema.nodes.hero_image ||
+        nodeType === schema.nodes.subtitles ||
+        nodeType === schema.nodes.supplements ||
+        hasParent($pos, [
+          schema.nodes.keywords,
+          schema.nodes.bibliography_section,
+          schema.nodes.footnotes_section,
+        ])
+      ) {
+        return null
+      }
+
+      const button = document.createElement('a')
+      button.classList.add('add-block', contextMenuBtnClass)
+      button.classList.add('add-block-after')
+      button.setAttribute('role', 'button')
+      button.setAttribute('aria-label', `Add an element below`)
+      button.setAttribute('data-balloon-pos', 'down-left')
+      const handleClick = (event: Event) => {
+        event.preventDefault()
+
+        const menu = this.createMenu()
+        menu.showAddMenu(event.currentTarget as Element)
+      }
+
+      button.addEventListener('mousedown', handleClick)
+      createKeyboardInteraction({
+        container: button,
+        additionalKeys: {
+          Enter: handleClick,
+          ArrowRight: () => {
+            const parent = button.parentElement
+            const editButton = parent?.querySelector(
+              '.edit-block'
+            ) as HTMLElement
+            if (editButton) {
+              editButton.focus()
+            }
+          },
+        },
+      })
+
+      return button
+    }
+
+    public createEditButton(): HTMLElement | null {
+      if (!this.props.getCapabilities()?.editArticle) {
+        return null
+      }
+
+      const button = document.createElement('a')
+      button.classList.add('edit-block', contextMenuBtnClass)
+      button.setAttribute('role', 'button')
+      button.setAttribute('aria-label', 'Open menu')
+      button.setAttribute('data-balloon-pos', 'down-left')
+      const handleClick = (event: Event) => {
+        event.preventDefault()
+
+        const menu = this.createMenu()
+        menu.showEditMenu(event.currentTarget as Element)
+      }
+
+      button.addEventListener('mousedown', handleClick)
+      createKeyboardInteraction({
+        container: button,
+        additionalKeys: {
+          Enter: handleClick,
+          ArrowLeft: () => {
+            const parent = button.parentElement
+            const addButton = parent?.querySelector('.add-block') as HTMLElement
+            if (addButton) {
+              addButton.focus()
+            }
+          },
+        },
+      })
+
+      return button
+    }
+
+    public createMenu = () => {
+      return new ContextMenu(this.node, this.view, this.getPos)
+    }
+  }
+}