@manuscripts/body-editor 3.12.67 → 3.13.1

package/src/components/form/FormFooter.tsx

@@ -0,0 +1,54 @@
+/*!
+ * © 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 { IconTextButton } from '@manuscripts/style-guide'
+import React from 'react'
+import styled from 'styled-components'
+
+const Footer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: ${(props) => props.theme.grid.unit * 6}px;
+  padding: 16px 32px;
+  min-height: 40px;
+  box-shadow: 0px -2px 12px 0px rgba(216, 216, 216, 0.26);
+  border-radius: 0px 0px 8px 8px;
+  position: relative;
+  z-index: 3;
+`
+
+const StyledIconTextButton = styled(IconTextButton)`
+  color: ${(props) => props.theme.colors.brand.default};
+`
+
+const FormFooter = ({
+  onCancel,
+  primaryAction,
+}: {
+  onCancel: () => void
+  primaryAction?: React.ReactNode
+}) => {
+  return (
+    <Footer>
+      <StyledIconTextButton color="secondary" onClick={onCancel}>
+        Close
+      </StyledIconTextButton>
+      {primaryAction}
+    </Footer>
+  )
+}
+
+export default FormFooter

package/src/components/form/FormPlaceholder.tsx

@@ -0,0 +1,71 @@
+/*!
+ * © 2024 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 React from 'react'
+import styled from 'styled-components'
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  overflow-y: auto;
+`
+
+const Placeholder = styled.div`
+  margin-bottom: ${(props) => props.theme.grid.unit * 5}px;
+`
+
+const Action = styled.div`
+  font-size: ${(props) => props.theme.font.size.xlarge};
+  font-weight: ${(props) => props.theme.font.weight.medium};
+  letter-spacing: -0.5px;
+`
+
+const Message = styled.div`
+  max-width: 400px;
+  font-size: ${(props) => props.theme.font.size.xlarge};
+  margin-top: ${(props) => props.theme.grid.unit * 6}px;
+  font-weight: ${(props) => props.theme.font.weight.light};
+  color: ${(props) => props.theme.colors.text.secondary};
+  text-align: center;
+
+  @media (max-width: 850px) {
+    margin-right: ${(props) => props.theme.grid.unit * 5}px;
+    margin-left: ${(props) => props.theme.grid.unit * 5}px;
+    max-width: 350px;
+  }
+`
+
+interface FormPlaceholderProps {
+  type: string
+  title: string
+  message: string
+  placeholderIcon: React.ReactNode
+}
+
+export const FormPlaceholder: React.FC<FormPlaceholderProps> = ({
+  type,
+  title,
+  message,
+  placeholderIcon,
+}) => (
+  <Container data-cy={`${type}-details`}>
+    <Placeholder>{placeholderIcon}</Placeholder>
+    <Action>{title}</Action>
+    <Message>{message}</Message>
+  </Container>
+)

package/src/components/form/ModalFormActions.tsx

@@ -0,0 +1,88 @@
+/*!
+ * © 2024 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 { PrimaryButton } from '@manuscripts/style-guide'
+import React from 'react'
+
+import { ConfirmationDialog, DialogType } from '../dialog/ConfirmationDialog'
+import styled from 'styled-components'
+
+export interface ModalFormSaveButtonProps {
+  form: string
+  isDisableSave: boolean
+  onSubmitForm?: () => void | Promise<void>
+  label?: string
+}
+
+export const ModalFormSaveButton: React.FC<ModalFormSaveButtonProps> = ({
+  form,
+  isDisableSave,
+  onSubmitForm,
+  label,
+}) => {
+  label = label || 'Save Changes'
+
+  const saveButton = onSubmitForm ? (
+    <StylePrimaryButton
+      data-cy="save-changes"
+      disabled={isDisableSave}
+      type="button"
+      onClick={() => {
+        if (!isDisableSave) {
+          void onSubmitForm()
+        }
+      }}
+    >
+      {label}
+    </StylePrimaryButton>
+  ) : (
+    <StylePrimaryButton disabled={isDisableSave} type="submit" form={form}>
+      {label}
+    </StylePrimaryButton>
+  )
+
+  return saveButton
+}
+
+interface ModalFormActionsProps {
+  type: string
+  onDelete: () => void
+  showingDeleteDialog: boolean
+  showDeleteDialog: () => void
+}
+
+export const ModalFormActions: React.FC<ModalFormActionsProps> = ({
+  type,
+  onDelete,
+  showingDeleteDialog,
+  showDeleteDialog,
+}) => {
+  return (
+    <ConfirmationDialog
+      isOpen={showingDeleteDialog}
+      onPrimary={() => {
+        onDelete()
+        showDeleteDialog()
+      }}
+      onSecondary={showDeleteDialog}
+      type={DialogType.DELETE}
+      entityType={type}
+    />
+  )
+}
+
+const StylePrimaryButton = styled(PrimaryButton)`
+  min-width: 145px;
+`

package/src/components/form/UnsavedLabel.tsx

@@ -0,0 +1,49 @@
+/*!
+ * © 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 { Label } from '@manuscripts/style-guide'
+import React from 'react'
+import styled from 'styled-components'
+
+interface UnsavedLabelProps {
+  htmlFor: string
+  showDot: boolean
+  children: React.ReactNode
+}
+
+export const UnsavedLabel: React.FC<UnsavedLabelProps> = ({
+  htmlFor,
+  showDot,
+  children,
+}) => (
+  <UnsavedLabelRow>
+    {showDot ? <FieldUnsavedDot aria-hidden /> : null}
+    <Label htmlFor={htmlFor}>{children}</Label>
+  </UnsavedLabelRow>
+)
+
+export const UnsavedLabelRow = styled.div`
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+`
+
+export const FieldUnsavedDot = styled.span`
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: ${(props) => props.theme.colors.text.warning};
+  flex-shrink: 0;
+`

package/src/components/hooks/use-debounce.ts

@@ -0,0 +1,56 @@
+/*!
+ * © 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 { useCallback, useEffect, useRef, useState } from 'react'
+
+export const useDebounce = <T>(value: T, delay: number): T => {
+  const [debouncedValue, setDebouncedValue] = useState(value)
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value)
+    }, delay)
+
+    return () => {
+      clearTimeout(handler)
+    }
+  }, [value, delay])
+
+  return debouncedValue
+}
+
+export default function useDebounced<Input, Output>(
+  fn: (arg: Input) => Promise<Output>,
+  delay: number
+): (arg: Input) => Promise<Output> {
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  return useCallback(
+    (arg: Input) => {
+      const timeout = timeoutRef.current
+      if (timeout) {
+        clearTimeout(timeout)
+      }
+
+      return new Promise((resolve) => {
+        timeoutRef.current = setTimeout(async () => {
+          resolve(await fn(arg))
+        }, delay)
+      })
+    },
+    [fn, delay]
+  )
+}

package/src/components/hooks/useAffiliationShowsErrorIndicator.ts

@@ -0,0 +1,51 @@
+/*!
+ * © 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 { FormikProps, getIn, useFormikContext } from 'formik'
+import { useEffect } from 'react'
+
+import { AffiliationAttrs } from '../../lib/authors'
+
+export function isInstitutionError(
+  formik: FormikProps<AffiliationAttrs>,
+  newEntity: boolean
+) {
+  if (!getIn(formik.errors, 'institution')) {
+    return false
+  }
+  if (newEntity) {
+    return Boolean(formik.touched.institution || formik.dirty)
+  }
+  return Boolean(formik.touched.institution)
+}
+
+export function affiliationShowsErrorIndicator(
+  formik: FormikProps<AffiliationAttrs>,
+  newEntity: boolean
+) {
+  return isInstitutionError(formik, newEntity)
+}
+
+export const useAffiliationShowsErrorIndicator = (
+  newEntity: boolean,
+  onChange?: (hasError: boolean) => void
+) => {
+  const formik = useFormikContext<AffiliationAttrs>()
+  const hasError = affiliationShowsErrorIndicator(formik, newEntity)
+
+  useEffect(() => {
+    onChange?.(hasError)
+  }, [hasError, onChange])
+}

package/src/components/hooks/useAuthorShowsErrorIndicator.ts

@@ -0,0 +1,73 @@
+/*!
+ * © 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 { FormikProps, getIn, useFormikContext } from 'formik'
+import { useEffect } from 'react'
+
+import { ContributorAttrs } from '../../lib/authors'
+
+export function isNamePairError(
+  formik: FormikProps<ContributorAttrs>,
+  newEntity: boolean,
+  requiredContinueActive = false
+) {
+  if (!getIn(formik.errors, 'given')) {
+    return false
+  }
+  if (requiredContinueActive) {
+    return true
+  }
+  if (newEntity) {
+    return Boolean(formik.touched.given || formik.touched.family)
+  }
+  return Boolean(formik.touched.given || formik.touched.family || formik.dirty)
+}
+
+export function authorShowsErrorIndicator(
+  formik: FormikProps<ContributorAttrs>,
+  newEntity: boolean,
+  requiredContinueActive = false
+) {
+  if (isNamePairError(formik, newEntity, requiredContinueActive)) {
+    return true
+  }
+  if (
+    (getIn(formik.touched, 'email') || requiredContinueActive) &&
+    getIn(formik.errors, 'email')
+  ) {
+    return true
+  }
+  if (getIn(formik.touched, 'ORCID') && getIn(formik.errors, 'ORCID')) {
+    return true
+  }
+  return false
+}
+
+export const useAuthorShowsErrorIndicator = (
+  newEntity: boolean,
+  requiredContinueActive: boolean,
+  onChange?: (hasError: boolean) => void
+) => {
+  const formik = useFormikContext<ContributorAttrs>()
+  const hasError = authorShowsErrorIndicator(
+    formik,
+    newEntity,
+    requiredContinueActive
+  )
+
+  useEffect(() => {
+    onChange?.(hasError)
+  }, [hasError, onChange])
+}

package/src/components/keyboard-shortcuts-modal/FormattedShortcut.tsx

@@ -0,0 +1,56 @@
+/*!
+ * © 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 { Shortcut, ShortcutConnector } from '@manuscripts/style-guide'
+import React, { JSX } from 'react'
+
+import { isMac } from '../../lib/platform'
+
+const keyMap: Record<string, React.ReactNode> = {
+  CommandOrControl: isMac ? '⌘' : 'Ctrl',
+  Option: isMac ? '⌥' : 'Alt',
+  Shift: isMac ? '⇧' : 'Shift',
+  ArrowUp: '↑',
+  ArrowDown: '↓',
+  ArrowLeft: '←',
+  ArrowRight: '→',
+  BracketLeft: '[',
+  BracketRight: ']',
+  Escape: 'Esc',
+  Tab: 'Tab',
+  Enter: '↵',
+}
+
+export const formattedShortCut = (accelerator: string): JSX.Element => {
+  const parts = accelerator.split('+').map((p) => p.trim())
+
+  return (
+    <>
+      {parts.map((part, index) => {
+        const content = keyMap[part] ?? part
+
+        return (
+          <React.Fragment key={`${part}-${index}`}>
+            <Shortcut>{content}</Shortcut>
+            {index < parts.length - 1 && (
+              <ShortcutConnector>+</ShortcutConnector>
+            )}
+          </React.Fragment>
+        )
+      })}
+    </>
+  )
+}