@manuscripts/body-editor 3.12.67 → 3.13.0

package/src/views/link_editable.ts

@@ -0,0 +1,169 @@
+/*!
+ * © 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 { schema } from '@manuscripts/transform'
+import { TextSelection } from 'prosemirror-state'
+
+import {
+  LinkForm,
+  LinkFormProps,
+  LinkValue,
+} from '../components/views/LinkForm'
+import { allowedHref } from '../lib/url'
+import { createEditableNodeView } from './creators'
+import { LinkView } from './link'
+import ReactSubView from './ReactSubView'
+import { isDeleted } from '@manuscripts/track-changes-plugin'
+
+export class LinkEditableView extends LinkView {
+  protected popperContainer: HTMLDivElement
+
+  public ignoreMutation = () => true
+
+  public initialise = () => {
+    this.createDOM()
+    this.updateContents()
+  }
+
+  public updateContents() {
+    super.updateContents()
+    this.contentDOM = this.dom
+
+    const attrs = this.node.attrs
+    const href = attrs.href
+    const title = attrs.title
+    // This to prevent joining other inline nodes to link LEAN-4374
+    this.dom.setAttribute('contenteditable', 'false')
+    this.dom.setAttribute('href', allowedHref(href) ? href : '')
+    this.dom.setAttribute('target', '_blank')
+    this.dom.setAttribute('title', title || '')
+  }
+
+  protected createDOM = () => {
+    this.dom = document.createElement('a')
+    this.dom.classList.add('link')
+    this.dom.addEventListener('click', this.handleClick)
+  }
+
+  public selectNode = () => {
+    if (!isDeleted(this.node)) {
+      this.showForm()
+    }
+  }
+
+  public destroy = () => {
+    this.closeForm()
+  }
+
+  public deselectNode = () => {
+    this.closeForm()
+  }
+
+  private showForm = () => {
+    if (!this.props.getCapabilities().editArticle) {
+      return
+    }
+
+    const attrs = this.node.attrs
+
+    const value: LinkValue = {
+      href: attrs.href,
+      title: attrs.title,
+      text: this.node.textContent,
+    }
+
+    const componentProps: LinkFormProps = {
+      value,
+      onCancel: this.handleCancel,
+      onRemove: this.handleRemove,
+      onSave: this.handleSave,
+    }
+
+    this.popperContainer = ReactSubView(
+      this.props,
+      LinkForm,
+      componentProps,
+      this.node,
+      this.getPos,
+      this.view,
+      ['link-editor']
+    )
+
+    this.props.popper.show(this.dom, this.popperContainer, 'bottom')
+  }
+
+  private handleClick = (e: Event) => {
+    if (this.props.getCapabilities().editArticle) {
+      e.preventDefault()
+    }
+  }
+
+  private handleCancel = () => {
+    const attrs = this.node.attrs
+    if (!this.node.content.size || !attrs.href) {
+      this.removeLink()
+    }
+    this.closeForm()
+  }
+
+  private handleRemove = () => {
+    this.removeLink()
+    this.closeForm()
+  }
+
+  private handleSave = (value: LinkValue) => {
+    const tr = this.view.state.tr
+
+    const attrs = this.node.attrs
+    const pos = this.getPos()
+
+    if (value.href !== attrs.href || value.title !== attrs.title) {
+      tr.setNodeMarkup(pos, undefined, {
+        ...this.node.attrs,
+        href: value.href,
+        title: value.title,
+      })
+    }
+    if (value.text !== this.node.textContent) {
+      tr.delete(pos + 1, pos + this.node.nodeSize - 1)
+      tr.insert(pos + 1, schema.text(value.text))
+    }
+
+    tr.setSelection(TextSelection.create(tr.doc, pos))
+    this.view.focus()
+    this.view.dispatch(tr)
+    this.closeForm()
+  }
+
+  private removeLink = () => {
+    const tr = this.view.state.tr
+    const pos = this.getPos()
+    tr.delete(pos, pos + this.node.nodeSize)
+    const text = this.node.textContent
+    if (text) {
+      tr.insert(pos, schema.text(text))
+    }
+    tr.setSelection(TextSelection.create(tr.doc, pos))
+    this.view.dispatch(tr)
+  }
+
+  private closeForm = () => {
+    this.props.popper.destroy()
+    this.popperContainer?.remove()
+  }
+}
+
+export default createEditableNodeView(LinkEditableView)

package/src/views/list.ts

@@ -0,0 +1,46 @@
+/*!
+ * © 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 { ListNode, ManuscriptNode } from '@manuscripts/transform'
+
+import { writeCssListStyleType } from '../lib/lists'
+import { Trackable } from '../types'
+import BlockView from './block_view'
+import { createNodeOrElementView } from './creators'
+import { EditableBlock } from './editable_block'
+
+export class ListView extends BlockView<Trackable<ListNode>> {
+  public elementType = 'ul'
+
+  public updateContents() {
+    super.updateContents()
+    if (this.contentDOM) {
+      const type = this.node.attrs.listStyleType
+      this.contentDOM.style.listStyleType = writeCssListStyleType(type)
+    }
+  }
+}
+
+export const listCallback = (node: ManuscriptNode, dom: HTMLElement) => {
+  dom.classList.add('list')
+  const type = node.attrs.listStyleType
+  dom.style.listStyleType = writeCssListStyleType(type)
+}
+export default createNodeOrElementView(
+  EditableBlock(ListView),
+  'ul',
+  listCallback
+)

package/src/views/list_item.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 { ListItemNode } from '@manuscripts/transform'
+
+import BlockView from './block_view'
+import { createNodeOrElementView } from './creators'
+
+export class ListItemView extends BlockView<ListItemNode> {
+  public elementType = 'li'
+}
+
+export default createNodeOrElementView(ListItemView, 'li')

package/src/views/paragraph.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 { ParagraphNode } from '@manuscripts/transform'
+
+import BlockView from './block_view'
+import { createNodeOrElementView } from './creators'
+
+export class ParagraphView extends BlockView<ParagraphNode> {
+  public elementType = 'p'
+}
+
+export default createNodeOrElementView(ParagraphView, 'p')

package/src/views/paragraph_editable.ts

@@ -0,0 +1,21 @@
+/*!
+ * © 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 { createNodeOrElementView } from './creators'
+import { EditableBlock } from './editable_block'
+import { ParagraphView } from './paragraph'
+
+export default createNodeOrElementView(EditableBlock(ParagraphView), 'p')

package/src/views/placeholder.ts

@@ -0,0 +1,35 @@
+/*!
+ * © 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 { ManuscriptNodeView, PlaceholderNode } from '@manuscripts/transform'
+
+import { createPlaceholderContent } from '../lib/placeholder'
+import { BaseNodeView } from './base_node_view'
+import { createNodeView } from './creators'
+
+export class PlaceholderView
+  extends BaseNodeView<PlaceholderNode>
+  implements ManuscriptNodeView
+{
+  public ignoreMutation = () => true
+
+  public initialise = () => {
+    this.dom = createPlaceholderContent(this.node.attrs.label)
+    this.dom.classList.add('placeholder-item')
+  }
+}
+
+export default createNodeView(PlaceholderView)

package/src/views/placeholder_element.ts

@@ -0,0 +1,38 @@
+/*!
+ * © 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 { PlaceholderNode } from '@manuscripts/transform'
+
+import { createPlaceholderContent } from '../lib/placeholder'
+import BlockView from './block_view'
+import { createNodeView } from './creators'
+
+export class PlaceholderElementView extends BlockView<PlaceholderNode> {
+  private element: HTMLElement
+
+  public createElement = () => {
+    this.element = document.createElement('div')
+    this.element.className = 'block'
+    this.element.setAttribute('id', this.node.attrs.id)
+    this.dom.appendChild(this.element)
+
+    const content = createPlaceholderContent()
+    content.className = 'placeholder-item'
+    this.element.appendChild(content)
+  }
+}
+
+export default createNodeView(PlaceholderElementView)

package/src/views/placeholder_element_editable.ts

@@ -0,0 +1,21 @@
+/*!
+ * © 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 { EditableBlock } from './editable_block'
+import { PlaceholderElementView } from './placeholder_element'
+
+export default createEditableNodeView(EditableBlock(PlaceholderElementView))

package/src/views/pullquote_element.ts

@@ -0,0 +1,106 @@
+/*!
+ * © 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 { PullquoteElementNode, schema } from '@manuscripts/transform'
+import { NodeSelection } from 'prosemirror-state'
+import { findChildrenByType } from 'prosemirror-utils'
+
+import { CommentKey } from '../lib/comments'
+import { setCommentSelection } from '../plugins/comments'
+import BlockView from './block_view'
+import { createNodeOrElementView } from './creators'
+import ReactSubView from './ReactSubView'
+
+export class PullquoteElementView extends BlockView<PullquoteElementNode> {
+  public elementType = 'aside'
+  contextMenu: HTMLElement
+
+  public ignoreMutation = () => true
+  public stopEvent = () => true
+
+  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) {
+      const key = marker.dataset.key as CommentKey
+      const tr = this.view.state.tr
+      setCommentSelection(tr, key, undefined, false)
+      tr.setSelection(NodeSelection.create(this.view.state.doc, this.getPos()))
+      this.view.dispatch(tr)
+      return
+    }
+  }
+
+  public createElement = () => {
+    this.contentDOM = document.createElement(this.elementType)
+    this.contentDOM.className = 'block'
+    this.contentDOM.classList.add('pullquote')
+
+    this.dom.appendChild(this.contentDOM)
+
+    // Add click event listener to handle comment marker clicks
+    this.dom.addEventListener('click', this.handleClick)
+  }
+
+  handleAddFigure() {
+    const tr = this.view.state.tr
+    tr.insert(this.getPos() + 1, schema.nodes.quote_image.create())
+    this.view.dispatch(tr)
+  }
+
+  public actionGutterButtons = (): HTMLElement[] => {
+    const contextMenu = this.addFigureContextMenu()
+    return contextMenu ? [contextMenu] : []
+  }
+
+  addFigureContextMenu = (): HTMLElement | undefined => {
+    const can = this.props.getCapabilities()
+    const componentProps: ContextMenuProps = {
+      actions: [],
+    }
+    if (can.editArticle) {
+      componentProps.actions.push({
+        label: 'Add Image',
+        action: () => this.handleAddFigure(),
+        icon: 'AddFigure',
+        disabled: !!findChildrenByType(this.node, schema.nodes.quote_image)
+          .length,
+      })
+
+      this.contextMenu = ReactSubView(
+        this.props,
+        ContextMenu,
+        componentProps,
+        this.node,
+        this.getPos,
+        this.view,
+        ['context-menu']
+      )
+      return this.contextMenu
+    }
+    return undefined
+  }
+
+  public destroy = () => {
+    // Clean up event listener
+    this.dom.removeEventListener('click', this.handleClick)
+    super.destroy()
+  }
+}
+
+export default createNodeOrElementView(PullquoteElementView, 'aside')

package/src/views/pullquote_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 { createNodeOrElementView } from './creators'
+import { EditableBlock } from './editable_block'
+import { PullquoteElementView } from './pullquote_element'
+
+export default createNodeOrElementView(
+  EditableBlock(PullquoteElementView),
+  'aside'
+)

package/src/views/quote_image_editable.ts

@@ -0,0 +1,84 @@
+/*!
+ * © 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 {
+  addTrackChangesAttributes,
+  addTrackChangesClassNames,
+  isDeleted,
+} from '@manuscripts/track-changes-plugin'
+import { plusIcon } from '../icons'
+import { createEditableNodeView } from './creators'
+import { FigureEditableView } from './figure_editable'
+
+export class QuoteImageEditableView extends FigureEditableView {
+  closeButton: HTMLButtonElement
+  isInPullQuote: boolean
+
+  override createDOM() {
+    this.dom = document.createElement('figure')
+
+    this.container = document.createElement('div')
+    this.container.className = 'pullquote-figure'
+    this.container.contentEditable = 'false'
+    this.dom.appendChild(this.container)
+  }
+
+  override addTools() {
+    if (!this.closeButton) {
+      const closeButton = document.createElement('button')
+      closeButton.innerHTML = plusIcon
+      closeButton.classList.add('figure-remove-button', 'button-reset')
+
+      closeButton.addEventListener('click', () => {
+        if (this.node.attrs.src) {
+          this.setSrc('')
+        } else {
+          const { tr } = this.view.state
+          tr.delete(this.getPos(), this.getPos() + this.node.nodeSize)
+          this.view.dispatch(tr)
+        }
+      })
+
+      this.closeButton = closeButton
+    }
+  }
+
+  public override updateContents() {
+    super.updateContents()
+
+    if (!isDeleted(this.node)) {
+      this.container.appendChild(this.closeButton)
+    }
+    addTrackChangesAttributes(this.node.attrs, this.dom)
+    addTrackChangesClassNames(this.node.attrs, this.dom)
+  }
+
+  protected override createPlaceholder = () => {
+    const element = document.createElement('div')
+    element.classList.add('figure', 'placeholder')
+    element.tabIndex = 0
+
+    const instructions = document.createElement('div')
+    instructions.classList.add('instructions')
+    instructions.innerHTML = `${plusIcon}<div>Drag or click here to upload image</div>`
+
+    element.appendChild(instructions)
+
+    return element
+  }
+}
+
+export default createEditableNodeView(QuoteImageEditableView)

package/src/views/section.ts

@@ -0,0 +1,64 @@
+/*!
+ * © 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 { SectionNode } from '@manuscripts/transform'
+
+import { sectionTitleKey } from '../plugins/section_title'
+import BlockView from './block_view'
+import { createNodeView } from './creators'
+
+export class SectionView extends BlockView<SectionNode> {
+  public elementType = 'section'
+
+  public initialise() {
+    this.createDOM()
+    this.createElement()
+    this.updateContents()
+  }
+
+  public createElement() {
+    this.contentDOM = document.createElement(this.elementType)
+    this.dom.appendChild(this.contentDOM)
+  }
+
+  public updateContents() {
+    super.updateContents()
+    this.dom.setAttribute('data-category', this.node.attrs.category)
+    this.handleSectionNumbering()
+  }
+
+  // handle sections numbering after track-changes process
+  //todo move to plugin
+  handleSectionNumbering() {
+    const sections = sectionTitleKey.getState(this.view.state)
+    if (!sections) {
+      return
+    }
+    sections.forEach((sectionNumber, id) => {
+      const section = document.getElementById(id)
+      const sectionTitle = section?.querySelector('h1')
+      if (sectionTitle) {
+        sectionTitle.dataset.sectionNumber = sectionNumber
+      }
+    })
+  }
+
+  public destroy() {
+    super.destroy()
+  }
+}
+
+export default createNodeView(SectionView)

package/src/views/section_label.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 BlockView from './block_view'
+import { createNodeView } from './creators'
+
+export default createNodeView(BlockView)