@manuscripts/body-editor 3.12.66 → 3.13.0

package/src/views/bibliography_element.ts

@@ -0,0 +1,313 @@
+/*!
+ * © 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 {
+  BibliographyElementNode,
+  BibliographyItemAttrs,
+  BibliographyItemNode,
+  schema,
+} from '@manuscripts/transform'
+import { NodeSelection } from 'prosemirror-state'
+
+import {
+  ReferencesEditor,
+  ReferencesEditorProps,
+} from '../components/references/ReferencesEditor'
+import { CommentKey, createCommentMarker, handleComment } from '../lib/comments'
+import { handleEnterKey } from '../lib/navigation-utils'
+import { findNodeByID } from '../lib/doc'
+import { sanitize } from '../lib/dompurify'
+
+import { deleteNode, findChildByID, updateNodeAttrs } from '../lib/view'
+import { getBibliographyPluginState } from '../plugins/bibliography'
+import { commentsKey, setCommentSelection } from '../plugins/comments'
+import { selectedSuggestionKey } from '../plugins/selected-suggestion'
+import { Trackable } from '../types'
+import BlockView from './block_view'
+import { createNodeView } from './creators'
+import ReactSubView from './ReactSubView'
+import {
+  addTrackChangesAttributes,
+  addTrackChangesClassNames,
+} from '@manuscripts/track-changes-plugin'
+
+export class BibliographyElementBlockView extends BlockView<
+  Trackable<BibliographyElementNode>
+> {
+  private container: HTMLElement
+  private editor: HTMLDivElement
+  private contextMenu: HTMLDivElement
+  private version: string
+
+  public showPopper(id: string) {
+    const bib = getBibliographyPluginState(this.view.state)
+    if (!bib) {
+      return
+    }
+
+    const componentProps: ReferencesEditorProps = {
+      items: Array.from(bib.bibliographyItems.values()),
+      citationCounts: bib.citationCounts,
+      item: bib.bibliographyItems.get(id),
+      onSave: this.handleSave,
+      onDelete: this.handleDelete,
+    }
+
+    this.editor = ReactSubView(
+      this.props,
+      ReferencesEditor,
+      componentProps,
+      this.node,
+      this.getPos,
+      this.view,
+      ['references-editor']
+    )
+
+    this.props.popper.show(this.dom, this.editor, 'right')
+  }
+
+  public stopEvent = () => true
+  public ignoreMutation = () => true
+
+  private handleEdit(citationID: string) {
+    this.showPopper(citationID)
+  }
+
+  private showContextMenu(element: HTMLElement) {
+    this.props.popper.destroy()
+    const can = this.props.getCapabilities()
+    const item = findNodeByID(this.view.state.doc, element.id)?.node
+
+    const componentProps: ContextMenuProps = {
+      actions: [],
+    }
+    if (can.editCitationsAndRefs) {
+      componentProps.actions.push({
+        label: 'Edit',
+        action: () => this.handleEdit(element.id),
+        icon: 'Edit',
+      })
+    }
+    componentProps.actions.push({
+      label: 'Comment',
+      action: () => handleComment(item, this.view),
+      icon: 'AddComment',
+    })
+
+    this.contextMenu = ReactSubView(
+      this.props,
+      ContextMenu,
+      componentProps,
+      this.node,
+      this.getPos,
+      this.view,
+      ['context-menu']
+    )
+    this.props.popper.show(element, this.contextMenu, 'right-start')
+  }
+
+  private handleCommentMarkerInteraction = (marker: HTMLElement) => {
+    const key = marker.dataset.key as CommentKey
+    const tr = this.view.state.tr
+    setCommentSelection(tr, key, undefined, false)
+    this.view.dispatch(tr)
+  }
+
+  private handleBibItemInteraction = (item: HTMLElement) => {
+    if (!this.props.getCapabilities().seeReferencesButtons) {
+      return
+    }
+
+    this.showContextMenu(item)
+    const node = findChildByID(this.view, item.id)
+    if (node) {
+      const tr = this.view.state.tr
+      tr.setSelection(NodeSelection.create(this.view.state.doc, node.pos))
+      this.view.dispatch(tr)
+    }
+  }
+
+  private handleClick = (event: Event) => {
+    const element = event.target as HTMLElement
+    // Handle click on comment marker
+    const marker = element.closest('.comment-marker') as HTMLElement
+    if (marker) {
+      this.handleCommentMarkerInteraction(marker)
+      return
+    }
+
+    // Handle click on bib-item
+    const item = element.closest('.bib-item')
+    if (item) {
+      this.handleBibItemInteraction(item as HTMLElement)
+    }
+  }
+
+  private handleKeyDown = (event: KeyboardEvent) => {
+    handleEnterKey(() => {
+      const target = document.activeElement as HTMLElement
+      // Handle Enter on comment marker
+      const marker = target?.closest('.comment-marker') as HTMLElement
+      if (marker) {
+        this.handleCommentMarkerInteraction(marker)
+        return
+      }
+
+      // Handle Enter on bib-item
+      const bibItem = target?.closest('.bib-item') as HTMLElement
+      if (bibItem) {
+        this.handleBibItemInteraction(bibItem)
+      }
+    })(event)
+  }
+
+  public updateContents() {
+    this.props.popper.destroy() // destroy the old context menu
+    const bib = getBibliographyPluginState(this.view.state)
+    if (!bib) {
+      return
+    }
+
+    if (bib.version === this.version) {
+      this.updateSelections()
+      return
+    }
+    this.version = bib.version
+
+    const nodes: Map<string, BibliographyItemNode> = new Map()
+
+    this.node.descendants((node) => {
+      const id = node.attrs.id
+      nodes.set(id, node as BibliographyItemNode)
+    })
+
+    const wrapper = document.createElement('div')
+    wrapper.classList.add('contents')
+    wrapper.addEventListener('click', this.handleClick)
+    wrapper.addEventListener('keydown', this.handleKeyDown)
+
+    const [meta, bibliography] = bib.engine.makeBibliography()
+
+    for (let i = 0; i < bibliography.length; i++) {
+      const id = meta.entry_ids[i][0]
+      const fragment = bibliography[i]
+      const node = nodes.get(id) as BibliographyItemNode
+      const isUnstructured = node.attrs.type === 'literal'
+
+      const tempDiv = document.createElement('div')
+      tempDiv.innerHTML = fragment
+
+      if (isUnstructured) {
+        const cslLeftMarginDiv = tempDiv.querySelector('.csl-left-margin')
+        let cslRightInlineDiv = tempDiv.querySelector('.csl-right-inline')
+        const cslEntry = tempDiv.querySelector('.csl-entry')
+
+        if (cslRightInlineDiv) {
+          // Overwrite existing inline content
+          cslRightInlineDiv.textContent = node.attrs.literal ?? ''
+        } else if (cslLeftMarginDiv) {
+          // Right inline missing, but left margin present — add right inline after it
+          cslRightInlineDiv = document.createElement('div')
+          cslRightInlineDiv.classList.add('csl-right-inline')
+          cslRightInlineDiv.textContent = node.attrs.literal ?? ''
+          cslLeftMarginDiv.after(cslRightInlineDiv)
+        } else if (cslEntry) {
+          // No left/right structure — overwrite the entry element content
+          cslEntry.textContent = node.attrs.literal ?? ''
+        }
+      }
+
+      const element = sanitize(
+        `<div id="${id}" class="bib-item"><div class="csl-bib-body">${tempDiv.innerHTML}</div></div>`
+      ).firstElementChild as HTMLElement
+
+      element.tabIndex = 0
+
+      const comment = createCommentMarker('div', id)
+      element.prepend(comment)
+
+      addTrackChangesAttributes(node.attrs, element)
+      addTrackChangesClassNames(node.attrs, element)
+
+      wrapper.append(element)
+    }
+
+    if (!bibliography.length) {
+      this.dom.classList.add('empty-node')
+    } else {
+      this.dom.classList.remove('empty-node')
+    }
+
+    const oldContent = this.container.querySelector('.contents')
+    if (oldContent) {
+      this.container.replaceChild(wrapper, oldContent)
+    } else {
+      this.container.appendChild(wrapper)
+    }
+    this.updateSelections()
+  }
+
+  public createElement = () => {
+    this.container = document.createElement('div')
+    this.container.classList.add('block')
+    this.container.contentEditable = 'false'
+    this.dom.setAttribute('contenteditable', 'false')
+    this.dom.appendChild(this.container)
+  }
+
+  private handleSave = (attrs: BibliographyItemAttrs) => {
+    updateNodeAttrs(this.view, schema.nodes.bibliography_item, attrs)
+  }
+
+  private handleDelete = (item: BibliographyItemAttrs) => {
+    deleteNode(this.view, item.id)
+  }
+
+  private updateSelections = () => {
+    const state = this.view.state
+    const com = commentsKey.getState(state)
+    const suggestion = selectedSuggestionKey.getState(state)?.suggestion
+
+    const items = this.container.querySelectorAll('.bib-item')
+    items.forEach((e) => {
+      const item = e as HTMLElement
+      if (suggestion?.id && item.dataset.trackId === suggestion?.id) {
+        item.classList.add('selected-suggestion')
+      } else {
+        item.classList.remove('selected-suggestion')
+      }
+
+      const marker = item.querySelector('.comment-marker') as HTMLElement
+      const key = marker.dataset.key as CommentKey
+      const comments = com?.commentsByKey.get(key)
+      if (!comments) {
+        marker.setAttribute('data-count', '0')
+      } else if (comments.length !== 1) {
+        marker.setAttribute('data-count', String(comments.length))
+      } else {
+        marker.removeAttribute('data-count')
+      }
+      if (key === com?.selection?.key) {
+        marker.classList.add('selected-comment')
+      } else {
+        marker.classList.remove('selected-comment')
+      }
+    })
+  }
+}
+
+export default createNodeView(BibliographyElementBlockView)

package/src/views/block_view.ts

@@ -0,0 +1,100 @@
+/*!
+ * © 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, ManuscriptNodeView } from '@manuscripts/transform'
+
+import { BaseNodeView } from './base_node_view'
+import { addTrackChangesAttributes } from '@manuscripts/track-changes-plugin'
+
+export default class BlockView<BlockNode extends ManuscriptNode>
+  extends BaseNodeView<BlockNode>
+  implements ManuscriptNodeView
+{
+  public initialise() {
+    this.createDOM()
+    this.createGutter('block-gutter', this.gutterButtons().filter(Boolean))
+    this.createElement()
+    this.updateContents()
+  }
+
+  public updateContents() {
+    this.createGutter(
+      'action-gutter',
+      this.actionGutterButtons().filter(Boolean)
+    )
+    super.updateContents()
+    this.updateClasses()
+    this.updatePlaceholder()
+  }
+
+  handleTrackChanges() {
+    addTrackChangesAttributes(this.node.attrs, this.dom)
+  }
+
+  public updateClasses() {
+    if (!this.contentDOM) {
+      return
+    }
+    this.contentDOM.classList.toggle('empty-node', !this.node.childCount)
+  }
+
+  public updatePlaceholder() {
+    if (!this.contentDOM) {
+      return
+    }
+    if (this.node.attrs.placeholder) {
+      this.contentDOM.dataset.placeholder = this.node.attrs.placeholder
+    }
+  }
+
+  public createElement() {
+    this.contentDOM = document.createElement(this.elementType)
+    this.contentDOM.className = 'block'
+    this.dom.appendChild(this.contentDOM)
+  }
+
+  public createDOM() {
+    this.dom = document.createElement('div')
+    this.dom.classList.add('block-container')
+    this.dom.classList.add(`block-${this.node.type.name}`)
+  }
+
+  gutter: Record<string, HTMLElement> = {}
+
+  public createGutter(className: string, buttons: HTMLElement[]) {
+    if (this.gutter[className]) {
+      this.gutter[className].remove()
+    }
+    this.gutter[className] = document.createElement('div')
+    this.gutter[className].setAttribute('contenteditable', 'false')
+    this.gutter[className].classList.add(className)
+
+    for (const button of buttons) {
+      this.gutter[className].appendChild(button)
+    }
+
+    this.dom.appendChild(this.gutter[className])
+  }
+
+  public gutterButtons(): HTMLElement[] {
+    // this to avoid issue of LEAN-4986, as with empty gutter text cursor will sink if that view was empty and has contenteditable as false
+    return [document.createElement('div')]
+  }
+
+  public actionGutterButtons(): HTMLElement[] {
+    return []
+  }
+}

package/src/views/blockquote_element.ts

@@ -0,0 +1,26 @@
+/*!
+ * © 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 { BlockquoteElementNode } from '@manuscripts/transform'
+
+import BlockView from './block_view'
+import { createNodeOrElementView } from './creators'
+
+export class BlockquoteElementView extends BlockView<BlockquoteElementNode> {
+  public elementType = 'blockquote'
+}
+
+export default createNodeOrElementView(BlockquoteElementView, 'blockquote')

package/src/views/blockquote_element_editable.ts

@@ -0,0 +1,24 @@
+/*!
+ * © 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 { BlockquoteElementView } from './blockquote_element'
+import { createNodeOrElementView } from './creators'
+import { EditableBlock } from './editable_block'
+
+export default createNodeOrElementView(
+  EditableBlock(BlockquoteElementView),
+  'blockquote'
+)

package/src/views/box_element.ts

@@ -0,0 +1,33 @@
+/*!
+ * © 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 { BoxElementNode } from '@manuscripts/transform'
+
+import BlockView from './block_view'
+import { createNodeView } from './creators'
+
+export class BoxElementView extends BlockView<BoxElementNode> {
+  public elementType = 'div'
+
+  public createElement = () => {
+    this.contentDOM = document.createElement(this.elementType)
+    this.contentDOM.className = 'block box-element'
+    this.contentDOM.setAttribute('id', this.node.attrs.id)
+    this.dom.appendChild(this.contentDOM)
+  }
+}
+
+export default createNodeView(BoxElementView)

package/src/views/caption.ts

@@ -0,0 +1,37 @@
+/*!
+ * © 2025 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 { CaptionNode, ManuscriptNodeView } from '@manuscripts/transform'
+
+import { BaseNodeView } from './base_node_view'
+import { createNodeView } from './creators'
+
+export class CaptionView
+  extends BaseNodeView<CaptionNode>
+  implements ManuscriptNodeView
+{
+  public initialise = () => {
+    this.createDOM()
+  }
+  protected createDOM() {
+    this.dom = document.createElement('caption')
+    this.dom.className = 'caption-description placeholder'
+    this.dom.contentEditable = 'true'
+    this.contentDOM = this.dom
+  }
+}
+
+export default createNodeView(CaptionView)

package/src/views/caption_title.ts

@@ -0,0 +1,33 @@
+/*!
+ * © 2025 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 { CaptionTitleNode } from '@manuscripts/transform'
+
+import { BaseNodeView } from './base_node_view'
+import { createNodeView } from './creators'
+
+export class CaptionTitleView extends BaseNodeView<CaptionTitleNode> {
+  public initialise = () => {
+    this.createDOM()
+  }
+  protected createDOM() {
+    this.dom = document.createElement('label')
+    this.dom.className = 'caption-title placeholder'
+    this.dom.contentEditable = 'true'
+    this.contentDOM = this.dom
+  }
+}
+export default createNodeView(CaptionTitleView)

package/src/views/citation.ts

@@ -0,0 +1,67 @@
+/*!
+ * © 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 { CitationNode, ManuscriptNodeView } from '@manuscripts/transform'
+
+import { sanitize } from '../lib/dompurify'
+import { getBibliographyPluginState } from '../plugins/bibliography'
+import { Trackable } from '../types'
+import { BaseNodeView } from './base_node_view'
+import { createNodeView } from './creators'
+
+export class CitationView
+  extends BaseNodeView<Trackable<CitationNode>>
+  implements ManuscriptNodeView
+{
+  public ignoreMutation = () => true
+
+  public initialise() {
+    this.createDOM()
+    this.updateContents()
+  }
+
+  public createDOM() {
+    this.dom = document.createElement('span')
+    this.dom.classList.add('citation')
+    this.dom.tabIndex = 0
+  }
+
+  public updateContents() {
+    super.updateContents()
+    const bib = getBibliographyPluginState(this.view.state)
+
+    if (!bib) {
+      return
+    }
+
+    const id = this.node.attrs.id
+    const text = bib.renderedCitations.get(id)
+    const fragment = sanitize(
+      text === '(n.d.)'
+        ? 'Missing citation data'
+        : text && text !== '[NO_PRINTED_FORM]'
+          ? text
+          : ' ',
+      {
+        ALLOWED_TAGS: ['i', 'b', 'span', 'sup', 'sub', '#text'],
+      }
+    )
+    this.dom.innerHTML = ''
+    this.dom.appendChild(fragment)
+  }
+}
+
+export default createNodeView(CitationView)