@manuscripts/body-editor 3.12.66 → 3.13.0

package/src/components/authors-affiliations/AuthorsAndAffiliationsModals.tsx

@@ -0,0 +1,170 @@
+/*!
+ * © 2026 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.
+ */
+
+/**
+ * Coordinates the authors and affiliations modals, including opening one from
+ * the other via an overlay (e.g. affiliations from the authors modal and vice versa).
+ */
+import { ManuscriptEditorView, schema } from '@manuscripts/transform'
+import { EditorView } from 'prosemirror-view'
+import React, { useState } from 'react'
+
+import { AffiliationAttrs, ContributorAttrs } from '../../lib/authors'
+import {
+  upsertAuthor,
+  upsertAffiliation,
+} from '../../lib/authors-and-affiliations'
+import { getEditorProps } from '../../plugins/editor-props'
+import ReactSubView from '../../views/ReactSubView'
+import {
+  deleteNode,
+  findChildrenAttrsByType,
+  updateNodeAttrs,
+} from '../../lib/view'
+import {
+  AffiliationsModal,
+  AffiliationsModalProps,
+} from '../affiliations/AffiliationsModal'
+import { CreateAffiliationModal } from '../affiliations/CreateAffiliationModal'
+import { AuthorsModal, AuthorsModalProps } from '../authors/AuthorsModal'
+import { CreateAuthorModal } from '../authors/CreateAuthorModal'
+
+export interface AuthorsAndAffiliationsModalsProps {
+  initialModal: 'authors' | 'affiliations'
+  view: ManuscriptEditorView
+  author?: ContributorAttrs
+  affiliation?: AffiliationAttrs
+  addNewAuthor?: boolean
+  addNewAffiliation?: boolean
+}
+
+export const AuthorsAndAffiliationsModals: React.FC<
+  AuthorsAndAffiliationsModalsProps
+> = ({
+  initialModal,
+  view,
+  author,
+  affiliation,
+  addNewAuthor,
+  addNewAffiliation,
+}) => {
+  const [showOverlay, setShowOverlay] = useState(false)
+  const [authors, setAuthors] = useState(() =>
+    findChildrenAttrsByType<ContributorAttrs>(view, schema.nodes.contributor)
+  )
+  const [affiliations, setAffiliations] = useState(() =>
+    findChildrenAttrsByType<AffiliationAttrs>(view, schema.nodes.affiliation)
+  )
+
+  const handleOpenOverlay = () => setShowOverlay(true)
+
+  const handleOverlayClose = () => {
+    setShowOverlay(false)
+    setAuthors(
+      findChildrenAttrsByType<ContributorAttrs>(view, schema.nodes.contributor)
+    )
+    setAffiliations(
+      findChildrenAttrsByType<AffiliationAttrs>(view, schema.nodes.affiliation)
+    )
+  }
+
+  const authorsProps: AuthorsModalProps = {
+    author,
+    authors,
+    affiliations,
+    addNewAuthor,
+    onSaveAuthor: (a) => upsertAuthor(view, a),
+    onDeleteAuthor: (a) => deleteNode(view, a.id),
+  }
+
+  const affiliationsProps: AffiliationsModalProps = {
+    affiliation,
+    authors,
+    affiliations,
+    addNewAffiliation,
+    onSaveAffiliation: (a) => upsertAffiliation(view, a),
+    onDeleteAffiliation: (a) => deleteNode(view, a.id),
+    onUpdateAuthors: (updated) =>
+      updated.forEach((a) =>
+        updateNodeAttrs(view, schema.nodes.contributor, a)
+      ),
+  }
+
+  if (initialModal === 'authors') {
+    return (
+      <>
+        <AuthorsModal
+          {...authorsProps}
+          onOpenAffiliationsModal={handleOpenOverlay}
+        />
+        {showOverlay && (
+          <CreateAffiliationModal
+            affiliationsCount={affiliations.length}
+            onSave={(a) => upsertAffiliation(view, a)}
+            onClose={handleOverlayClose}
+          />
+        )}
+      </>
+    )
+  }
+
+  return (
+    <>
+      <AffiliationsModal
+        {...affiliationsProps}
+        openAuthorsModal={handleOpenOverlay}
+      />
+      {showOverlay && (
+        <CreateAuthorModal
+          authorsCount={authors.length}
+          affiliations={affiliations}
+          onSave={(a) => upsertAuthor(view, a)}
+          onClose={handleOverlayClose}
+        />
+      )}
+    </>
+  )
+}
+
+export const openAuthorsAndAffiliationsModals = (
+  pos: number,
+  view: ManuscriptEditorView | EditorView | undefined,
+  initialModal: 'authors' | 'affiliations'
+) => {
+  if (!view) {
+    return
+  }
+
+  const { state } = view
+  const props = getEditorProps(state)
+  const componentProps: AuthorsAndAffiliationsModalsProps = {
+    initialModal,
+    view: view as ManuscriptEditorView,
+    addNewAuthor: initialModal === 'authors',
+    addNewAffiliation: initialModal === 'affiliations',
+  }
+
+  const dialog = ReactSubView(
+    props,
+    AuthorsAndAffiliationsModals,
+    componentProps,
+    state.doc,
+    () => pos,
+    view
+  )
+  view.focus()
+  document.body.appendChild(dialog)
+}

package/src/components/authors-affiliations/GenericPanel.tsx

@@ -0,0 +1,164 @@
+/*!
+ * © 2026 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 {
+  AddedIcon,
+  AddIcon,
+  DrawerIcon,
+  DrawerItemLabel,
+  DrawerItemMeta,
+  DrawerItemsList,
+  DrawerLabelContainer,
+  DrawerListItem,
+  IconButton,
+  PlusIcon,
+} from '@manuscripts/style-guide'
+import React, { useMemo } from 'react'
+import styled from 'styled-components'
+
+export const ListItems = DrawerItemsList
+
+const Panel = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+const PanelHeader = styled.div`
+  display: flex;
+  align-items: flex-start;
+  padding: ${(props) => props.theme.grid.unit * 2}px
+    ${(props) => props.theme.grid.unit * 4}px;
+`
+
+const PanelCreateButton = styled(IconButton)`
+  color: #0d79d0;
+  font-size: 14px;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 1;
+  width: auto;
+  height: 24px;
+  margin-left: auto;
+  svg {
+    margin-right: 4px;
+  }
+`
+
+const PanelEmpty = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: ${(props) => props.theme.grid.unit * 20}px
+    ${(props) => props.theme.grid.unit * 4}px;
+`
+
+const PanelEmptyIcon = styled.div`
+  width: 80px;
+  height: 80px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`
+
+const PanelEmptyText = styled.p`
+  margin: 0;
+  font-size: 18px;
+  line-height: 24px;
+  text-align: center;
+  letter-spacing: -0.369px;
+`
+
+export interface GenericPanelProps {
+  createLabel: string
+  onCreate: () => void
+  createDataCy: string
+  emptyDataCy: string
+  isEmpty: boolean
+  emptyIcon: React.ReactNode
+  emptyMessage: React.ReactNode
+  children: React.ReactNode
+}
+
+export const GenericPanel: React.FC<GenericPanelProps> = ({
+  createLabel,
+  onCreate,
+  createDataCy,
+  emptyDataCy,
+  isEmpty,
+  emptyIcon,
+  emptyMessage,
+  children,
+}) => (
+  <Panel>
+    <PanelHeader>
+      <PanelCreateButton onClick={onCreate} data-cy={createDataCy}>
+        <PlusIcon />
+        {createLabel}
+      </PanelCreateButton>
+    </PanelHeader>
+    {isEmpty ? (
+      <PanelEmpty data-cy={emptyDataCy}>
+        <PanelEmptyIcon aria-hidden>{emptyIcon}</PanelEmptyIcon>
+        <PanelEmptyText>{emptyMessage}</PanelEmptyText>
+      </PanelEmpty>
+    ) : (
+      children
+    )}
+  </Panel>
+)
+
+export interface ListItemProps {
+  selected: boolean
+  onClick: () => void
+  primary: React.ReactNode
+  secondary?: React.ReactNode
+}
+
+export const ListItem: React.FC<ListItemProps> = ({
+  selected,
+  onClick,
+  primary,
+  secondary,
+}) => (
+  <DrawerListItem data-cy="item" selected={selected} onClick={onClick}>
+    <DrawerIcon>
+      {selected ? (
+        <AddedIcon width={22} height={22} />
+      ) : (
+        <AddIcon width={22} height={22} />
+      )}
+    </DrawerIcon>
+    <DrawerLabelContainer>
+      <DrawerItemLabel>{primary}</DrawerItemLabel>
+      {secondary != null && secondary !== '' ? (
+        <DrawerItemMeta>{secondary}</DrawerItemMeta>
+      ) : null}
+    </DrawerLabelContainer>
+  </DrawerListItem>
+)
+
+export function useListSelectedIds(
+  selectedItems: { id: string }[]
+): Set<string> {
+  return useMemo(() => new Set(selectedItems.map((x) => x.id)), [selectedItems])
+}

package/src/components/authors-affiliations/ModalTabs.tsx

@@ -0,0 +1,100 @@
+/*!
+ * © 2026 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 { InspectorTab, InspectorTabList } from '@manuscripts/style-guide'
+import React from 'react'
+import styled from 'styled-components'
+
+export interface ModalTabsProps {
+  tabLabels: string[]
+  tabErrorIndicators?: boolean[]
+  tabWarningIndicators?: boolean[]
+}
+
+export const ModalTabs: React.FC<ModalTabsProps> = ({
+  tabLabels,
+  tabErrorIndicators,
+  tabWarningIndicators,
+}) => (
+  <StyledTabList data-cy="ModalTabs">
+    {tabLabels.map((label, i) => {
+      const hasError = tabErrorIndicators?.[i]
+      const showWarning = tabWarningIndicators?.[i] && !hasError
+      return (
+        <StyledTab key={label} data-cy="ModalTab">
+          {label}
+          {(showWarning || hasError) && (
+            <TabIndicatorGroup role="presentation">
+              {showWarning ? <TabWarningDot aria-hidden /> : null}
+              {hasError ? <TabErrorDot aria-hidden /> : null}
+            </TabIndicatorGroup>
+          )}
+        </StyledTab>
+      )
+    })}
+  </StyledTabList>
+)
+
+const TabIndicatorGroup = styled.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: 6px;
+  flex-shrink: 0;
+`
+
+const TabErrorDot = styled.span`
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #cf1322;
+  flex-shrink: 0;
+  vertical-align: middle;
+`
+
+const TabWarningDot = styled.span`
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: ${(props) => props.theme.colors.text.warning};
+  flex-shrink: 0;
+  vertical-align: middle;
+`
+
+const StyledTab = styled(InspectorTab)`
+  border-radius: 14px;
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &[aria-selected='true'] {
+    background: ${(props) => props.theme.colors.background.primary};
+    border: unset;
+    color: ${(props) => props.theme.colors.text.primary} !important;
+    font-weight: 700;
+  }
+`
+
+const StyledTabList = styled(InspectorTabList)`
+  display: flex;
+  justify-content: space-evenly;
+  border-radius: 14px;
+  background: #e2e2e2 !important;
+  padding: 2px;
+`