@manuscripts/body-editor 3.12.66 → 3.13.0

package/src/node-type-icons.tsx

@@ -0,0 +1,83 @@
+/*!
+ * © 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 {
+  FileDocumentIcon,
+  SupplementsIcon,
+  FileImageIcon,
+  OutlineBlockQuoteIcon,
+  OutlineEmbedIcon,
+  OutlineEquationIcon,
+  OutlineFigureIcon,
+  OutlineManuscriptIcon,
+  OutlineOrderedListIcon,
+  OutlineParagraphIcon,
+  OutlinePullQuoteIcon,
+  OutlineSectionIcon,
+  OutlineTableIcon,
+  OutlineUnorderedListIcon,
+} from '@manuscripts/style-guide'
+import { ManuscriptNodeType, schema } from '@manuscripts/transform'
+import { NodeType } from 'prosemirror-model'
+import React from 'react'
+
+const { nodes } = schema
+
+const OutlineImageIcon: React.FC = () => (
+  <FileImageIcon width="11" height="14" />
+)
+const OutlineSupplementsIcon: React.FC = () => (
+  <SupplementsIcon width="11" height="14" />
+)
+
+const OutlineMainDocumentIcon: React.FC = () => (
+  <FileDocumentIcon width="11" height="14" />
+)
+const icons: Map<
+  ManuscriptNodeType,
+  React.FunctionComponent<React.SVGAttributes<SVGElement>>
+> = new Map([
+  [nodes.manuscript, OutlineManuscriptIcon],
+  [nodes.bibliography_section, OutlineSectionIcon],
+  [nodes.blockquote_element, OutlineBlockQuoteIcon],
+  [nodes.equation_element, OutlineEquationIcon],
+  [nodes.embed, OutlineEmbedIcon],
+  [nodes.figure_element, OutlineFigureIcon],
+  [nodes.paragraph, OutlineParagraphIcon],
+  [nodes.pullquote_element, OutlinePullQuoteIcon],
+  [nodes.section, OutlineSectionIcon],
+  [nodes.table_element, OutlineTableIcon],
+  [nodes.graphical_abstract_section, OutlineSectionIcon],
+  [nodes.trans_graphical_abstract, OutlineSectionIcon],
+  [nodes.footnotes_section, OutlineSectionIcon],
+  [nodes.image_element, OutlineImageIcon],
+  [nodes.hero_image, OutlineImageIcon],
+  [nodes.supplements, OutlineSupplementsIcon],
+  [nodes.attachments, OutlineMainDocumentIcon],
+])
+
+export const nodeTypeIcon = (nodeType: NodeType, listType?: string) => {
+  if (nodeType === schema.nodes.list) {
+    if (listType === 'bullet') {
+      return <OutlineUnorderedListIcon />
+    } else {
+      return <OutlineOrderedListIcon />
+    }
+  }
+  const Icon = icons.get(nodeType as ManuscriptNodeType)
+
+  return Icon ? <Icon /> : null
+}

package/src/plugins/__tests__/__fixtures__/deleted-footnote.json

@@ -0,0 +1,140 @@
+{
+  "doc": {
+    "type": "manuscript",
+    "attrs": {
+      "id": "MPManuscript:D1797375-EF63-49AF-B140-04B2FA6B8365"
+    },
+    "content": [
+      {
+        "type": "abstracts",
+        "attrs": {
+          "id": ""
+        },
+        "content": []
+      },
+      {
+        "type": "body",
+        "attrs": {
+          "id": "MPSection:5346C94F-8C83-4585-811E-2209C269ED71"
+        },
+        "content": [
+          {
+            "type": "section",
+            "attrs": {
+              "id": "MPSection:5346C94F-8C83-4585-811E-2209C269ED71",
+              "category": "",
+              "titleSuppressed": false,
+              "dataTracked": null,
+              "comments": null
+            },
+            "content": [
+              {
+                "type": "section_title",
+                "attrs": {
+                  "dataTracked": null
+                }
+              },
+              {
+                "type": "paragraph",
+                "attrs": {
+                  "id": "MPParagraphElement:08E4B001-BB01-4666-9E33-9355AEC3CFC3",
+                  "paragraphStyle": "MPParagraphStyle:51671E8C-C9EE-461D-B6FF-756817829B3F",
+                  "placeholder": "",
+                  "dataTracked": null,
+                  "comments": null
+                },
+                "content": [
+                  {
+                    "type": "text",
+                    "text": "test"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "type": "backmatter",
+        "attrs": {
+          "id": "MPSection:05EA736A-BBE3-4904-B2F5-59E861208BA9"
+        },
+        "content": [
+          {
+            "type": "footnotes_section",
+            "attrs": {
+              "id": "footnotes_section_id",
+              "dataTracked": null
+            },
+            "content": [
+              {
+                "type": "section_title",
+                "attrs": {
+                  "dataTracked": null
+                },
+                "content": [
+                  {
+                    "type": "text",
+                    "text": "Footnotes"
+                  }
+                ]
+              },
+              {
+                "type": "footnotes_element",
+                "attrs": {
+                  "id": "footnotes_element_id",
+                  "kind": "footnote",
+                  "paragraphStyle": "",
+                  "dataTracked": null
+                },
+                "content": [
+                  {
+                    "type": "footnote",
+                    "attrs": {
+                      "id": "footnote_id",
+                      "kind": "footnote",
+                      "paragraphStyle": "",
+                      "placeholder": "",
+                      "dataTracked": null,
+                      "comments": null
+                    },
+                    "content": [
+                      {
+                        "type": "paragraph",
+                        "attrs": {
+                          "id": "paragraph_id",
+                          "paragraphStyle": "",
+                          "placeholder": "",
+                          "dataTracked": null,
+                          "comments": null
+                        },
+                        "content": [
+                          {
+                            "type": "text",
+                            "text": "a footnote"
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "type": "comments",
+        "attrs": {
+          "id": ""
+        },
+        "content": []
+      }
+    ]
+  },
+  "selection": {
+    "type": "text",
+    "anchor": 10,
+    "head": 10
+  }
+}

package/src/plugins/__tests__/__fixtures__/inserted-footnote.json

@@ -0,0 +1,153 @@
+{
+  "doc": {
+    "type": "manuscript",
+    "attrs": {
+      "id": "MPManuscript:D1797375-EF63-49AF-B140-04B2FA6B8365"
+    },
+    "content": [
+      {
+        "type": "abstracts",
+        "attrs": {
+          "id": ""
+        },
+        "content": []
+      },
+      {
+        "type": "body",
+        "attrs": {
+          "id": "MPSection:5346C94F-8C83-4585-811E-2209C269ED71"
+        },
+        "content": [
+          {
+            "type": "section",
+            "attrs": {
+              "id": "MPSection:5346C94F-8C83-4585-811E-2209C269ED71",
+              "category": "",
+              "titleSuppressed": false,
+              "dataTracked": null,
+              "comments": null
+            },
+            "content": [
+              {
+                "type": "section_title",
+                "attrs": {
+                  "dataTracked": null
+                }
+              },
+              {
+                "type": "paragraph",
+                "attrs": {
+                  "id": "MPParagraphElement:08E4B001-BB01-4666-9E33-9355AEC3CFC3",
+                  "paragraphStyle": "MPParagraphStyle:51671E8C-C9EE-461D-B6FF-756817829B3F",
+                  "placeholder": "",
+                  "dataTracked": null,
+                  "comments": null
+                },
+                "content": [
+                  {
+                    "type": "text",
+                    "text": "tes"
+                  },
+                  {
+                    "type": "inline_footnote",
+                    "attrs": {
+                      "id": "inline_footnote_id",
+                      "rids": ["footnote_id"],
+                      "contents": "a",
+                      "dataTracked": null
+                    }
+                  },
+                  {
+                    "type": "text",
+                    "text": "t"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "type": "backmatter",
+        "attrs": {
+          "id": "MPSection:05EA736A-BBE3-4904-B2F5-59E861208BA9"
+        },
+        "content": [
+          {
+            "type": "footnotes_section",
+            "attrs": {
+              "id": "footnotes_section_id",
+              "dataTracked": null
+            },
+            "content": [
+              {
+                "type": "section_title",
+                "attrs": {
+                  "dataTracked": null
+                },
+                "content": [
+                  {
+                    "type": "text",
+                    "text": "Footnotes"
+                  }
+                ]
+              },
+              {
+                "type": "footnotes_element",
+                "attrs": {
+                  "id": "footnotes_element_id",
+                  "kind": "footnote",
+                  "paragraphStyle": "",
+                  "dataTracked": null
+                },
+                "content": [
+                  {
+                    "type": "footnote",
+                    "attrs": {
+                      "id": "footnote_id",
+                      "kind": "footnote",
+                      "paragraphStyle": "",
+                      "placeholder": "",
+                      "dataTracked": null,
+                      "comments": null
+                    },
+                    "content": [
+                      {
+                        "type": "paragraph",
+                        "attrs": {
+                          "id": "paragraph_id",
+                          "paragraphStyle": "",
+                          "placeholder": "",
+                          "dataTracked": null,
+                          "comments": null
+                        },
+                        "content": [
+                          {
+                            "type": "text",
+                            "text": "a footnote"
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "type": "comments",
+        "attrs": {
+          "id": ""
+        },
+        "content": []
+      }
+    ]
+  },
+  "selection": {
+    "type": "text",
+    "anchor": 41,
+    "head": 41
+  }
+}

package/src/plugins/__tests__/footnotes.test.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 { ManuscriptNodeType } from '@manuscripts/transform'
+import { vi } from 'vitest'
+
+import { insertInlineFootnote } from '../../commands'
+import { parseDoc, setupEditor } from '../../testing/setup-editor'
+import deletedFootnoteJson from './__fixtures__/deleted-footnote.json'
+import insertedFootnoteJson from './__fixtures__/inserted-footnote.json'
+
+vi.mock('@manuscripts/transform', async (importOriginal) => {
+  const mockTransformOriginal =
+    await importOriginal<typeof import('@manuscripts/transform')>()
+  return {
+    ...mockTransformOriginal,
+    // Ids are generated by the persist plugin in an appendTransaction
+    generateNodeID: (type: ManuscriptNodeType) => `${type.name}_id`,
+  }
+})
+
+describe('footnotes plugin', () => {
+  test("should create an inline node and footnotes section if it doesn't exist", () => {
+    const expectedDoc = parseDoc(insertedFootnoteJson.doc)
+
+    const { view } = setupEditor()
+      .selectText(10)
+      .command(insertInlineFootnote)
+      .insertText('a footnote')
+      .callback((content) => {
+        expect(content.state.tr.doc.toJSON()).toEqual(expectedDoc.toJSON())
+        expect(content.state.tr.selection.toJSON()).toEqual(
+          insertedFootnoteJson.selection
+        )
+      })
+    view.destroy()
+  })
+  test('should remove the inline node as well as the footnote on deletion', () => {
+    const expectedDoc = parseDoc(deletedFootnoteJson.doc)
+    const { view } = setupEditor()
+      .selectText(10)
+      .command(insertInlineFootnote)
+      .insertText('a footnote')
+      .selectText(11)
+      .backspace()
+      .callback((content) => {
+        expect(content.state.tr.doc.toJSON()).toEqual(expectedDoc.toJSON())
+        expect(content.state.tr.selection.toJSON()).toEqual(
+          deletedFootnoteJson.selection
+        )
+      })
+    view.destroy()
+  })
+})

package/src/plugins/accessibility_element.ts

@@ -0,0 +1,219 @@
+/*!
+ * © 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 {
+  ManuscriptNode,
+  ManuscriptTransaction,
+  schema,
+} from '@manuscripts/transform'
+import { Plugin, PluginKey, Selection } from 'prosemirror-state'
+import { Decoration, DecorationSet, EditorView } from 'prosemirror-view'
+
+import { createToggleButton } from '../lib/utils'
+
+export interface PluginState {
+  expandButtonDecorations: Decoration[]
+  expandedElementDecorations: Decoration[]
+  expandedElementIDs: Set<string>
+}
+
+export const accessibilityElementKey = new PluginKey<PluginState>(
+  'accessibility-element'
+)
+
+const nodeTypes = [schema.nodes.alt_text, schema.nodes.long_desc]
+
+const handleExpandButtonClick = (
+  view: EditorView,
+  node: ManuscriptNode,
+  event: MouseEvent | KeyboardEvent
+) => {
+  const tr = view.state.tr
+  toggleAccessibilitySection(tr, node)
+  view.dispatch(tr)
+
+  // Only auto-focus first accessibility element on keyboard interaction, not mouse clicks
+  const isKeyboardEvent = event.type === 'keydown'
+  if (isKeyboardEvent) {
+    const parentElement = view.dom.querySelector(`[id="${node.attrs.id}"]`)
+    if (parentElement) {
+      const firstInput = parentElement.querySelector(
+        '.accessibility_element_input'
+      ) as HTMLElement
+      firstInput?.focus()
+    }
+  }
+}
+const isSelectionWithin = (
+  node: ManuscriptNode,
+  pos: number,
+  selection?: Selection
+) => {
+  if (!selection || !nodeTypes.includes(node.type)) {
+    return false
+  }
+  const to = pos + node.nodeSize
+  return selection.from >= pos && selection.to <= to
+}
+
+const buildExpandButtonDecorations = (doc: ManuscriptNode) => {
+  const decorations: Decoration[] = []
+  doc.descendants((node, pos) => {
+    if (node.type.spec.content?.includes('alt_text')) {
+      decorations.push(
+        Decoration.widget(
+          pos + node.nodeSize - 1,
+          (view) => {
+            const container = document.createElement('div')
+            container.className =
+              'accessibility_element_expander_button_container'
+            container.appendChild(
+              createToggleButton(
+                (e) => handleExpandButtonClick(view, node, e),
+                'additional info'
+              )
+            )
+            return container
+          },
+          {
+            key: node.attrs.id,
+          }
+        )
+      )
+    }
+  })
+
+  return decorations
+}
+
+const buildExpandedElementsDecorations = (
+  doc: ManuscriptNode,
+  expandedElementIDs: Set<string>,
+  selection?: Selection
+) => {
+  const decorations: Decoration[] = []
+  doc.descendants((node, pos) => {
+    if (
+      expandedElementIDs.has(node.attrs.id) ||
+      isSelectionWithin(node, pos, selection)
+    ) {
+      decorations.push(
+        Decoration.node(pos, pos + node.nodeSize, {
+          class: 'show_accessibility_element',
+        })
+      )
+    }
+  })
+
+  return decorations
+}
+
+export default () => {
+  return new Plugin<PluginState>({
+    key: accessibilityElementKey,
+    state: {
+      init(config, instance) {
+        return {
+          expandButtonDecorations: buildExpandButtonDecorations(instance.doc),
+          expandedElementDecorations: [],
+          expandedElementIDs: new Set(),
+        }
+      },
+      apply(tr, value, oldState, newState) {
+        const s = {
+          expandButtonDecorations: value.expandButtonDecorations,
+          expandedElementDecorations: value.expandedElementDecorations,
+          expandedElementIDs: new Set(value.expandedElementIDs),
+        }
+
+        if (tr.docChanged) {
+          s.expandButtonDecorations = buildExpandButtonDecorations(newState.doc)
+        }
+
+        let expandedElementIDsChanged = false
+        const meta = tr.getMeta(accessibilityElementKey)
+        if (meta) {
+          expandedElementIDsChanged = true
+          const isExpanded = s.expandedElementIDs.has(meta.id)
+          if (
+            meta.action === 'add' ||
+            (meta.action === 'toggle' && !isExpanded)
+          ) {
+            s.expandedElementIDs.add(meta.id)
+          } else if (
+            meta.action === 'remove' ||
+            (meta.action === 'toggle' && isExpanded)
+          ) {
+            s.expandedElementIDs.delete(meta.id)
+          }
+        }
+
+        if (tr.selectionSet) {
+          const $pos = tr.selection.$from
+          for (let i = $pos.depth; i >= 0; i--) {
+            const node = $pos.node(i)
+            if (nodeTypes.includes(node.type)) {
+              const parent = $pos.node(i - 1)
+              s.expandedElementIDs.add(parent.attrs.id)
+              expandedElementIDsChanged = true
+              break
+            }
+          }
+        }
+
+        if (expandedElementIDsChanged || tr.docChanged) {
+          s.expandedElementDecorations = buildExpandedElementsDecorations(
+            newState.doc,
+            s.expandedElementIDs
+          )
+        }
+        return s
+      },
+    },
+    props: {
+      decorations: (state) => {
+        const pluginState = accessibilityElementKey.getState(state)
+        if (pluginState) {
+          return DecorationSet.create(state.doc, [
+            ...pluginState.expandButtonDecorations,
+            ...pluginState.expandedElementDecorations,
+          ])
+        }
+      },
+    },
+  })
+}
+
+export const expandAccessibilitySection = (
+  tr: ManuscriptTransaction,
+  node: ManuscriptNode
+) => {
+  if (node.attrs.id && node.type.spec.content?.includes('alt_text')) {
+    tr.setMeta(accessibilityElementKey, {
+      action: 'add',
+      id: node.attrs.id,
+    })
+  }
+}
+
+export const toggleAccessibilitySection = (
+  tr: ManuscriptTransaction,
+  node: ManuscriptNode
+) => {
+  tr.setMeta(accessibilityElementKey, {
+    action: 'toggle',
+    id: node.attrs.id,
+  })
+}