@manuscripts/body-editor 3.12.67 → 3.13.1

package/src/components/toolbar/type-selector/TypeSelector.tsx

@@ -0,0 +1,157 @@
+/*!
+ * © 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 {
+  ManuscriptEditorView,
+  ManuscriptNodeType,
+  schema,
+} from '@manuscripts/transform'
+import { EditorState, Transaction } from 'prosemirror-state'
+import { hasParentNodeOfType } from 'prosemirror-utils'
+import React from 'react'
+import { OnChangeValue } from 'react-select'
+
+import { findClosestParentElement } from '../../../lib/hierarchy'
+import { isEditAllowed } from '../../../lib/utils'
+import {
+  demoteSectionToParagraph,
+  findSelectedOption,
+  optionName,
+  promoteParagraphToSection,
+  titleCase,
+} from '../helpers'
+import { CustomControl, OptionComponent } from './OptionComponent'
+import { customStyles, StyledSelect } from './styles'
+import { isDeleted } from '@manuscripts/track-changes-plugin'
+
+export interface Option {
+  action?: (
+    state: EditorState,
+    dispatch: (tr: Transaction) => void,
+    view?: ManuscriptEditorView
+  ) => void
+  isDisabled: boolean
+  isSelected: boolean
+  label: string
+  nodeType: ManuscriptNodeType
+}
+
+const buildOptions = (state: EditorState): Option[] => {
+  const {
+    doc,
+    selection: { $from, $to },
+    schema,
+  } = state
+  const { nodes } = schema
+
+  if (!$from.sameParent($to)) {
+    return []
+  }
+
+  const parentElement = findClosestParentElement($from)
+
+  if (!parentElement) {
+    return []
+  }
+
+  const parentElementType = parentElement.node.type
+  const options: Option[] = []
+
+  switch (parentElementType) {
+    case parentElementType.schema.nodes.section: {
+      const sectionDepth = Math.max(1, $from.depth - 1)
+      const beforeSection = $from.before(sectionDepth)
+      const $beforeSection = doc.resolve(beforeSection)
+      const sectionOffset = $beforeSection.parentOffset
+      const section = $from.node(sectionDepth)
+      !isDeleted(section) &&
+        options.push({
+          nodeType: nodes.paragraph,
+          label: 'Paragraph',
+          action: demoteSectionToParagraph,
+          isDisabled:
+            (sectionDepth <= 1 && sectionOffset <= 1) || isDeleted(section),
+          isSelected: false,
+        })
+      options.push({
+        nodeType: nodes.section,
+        label: 'Heading',
+        isDisabled: true,
+        isSelected: true,
+      })
+      return options
+    }
+    case parentElementType.schema.nodes.paragraph: {
+      const paragraph = $from.node($from.depth)
+      options.push({
+        nodeType: nodes.paragraph,
+        label: 'Paragraph',
+        isDisabled: true,
+        isSelected: true,
+      })
+      !isDeleted(paragraph) &&
+        options.push({
+          nodeType: nodes.section,
+          label: 'Heading',
+          action: promoteParagraphToSection,
+          isDisabled: isDeleted(paragraph),
+          isSelected: false,
+        })
+      return options
+    }
+    default: {
+      options.push({
+        nodeType: parentElementType,
+        label: titleCase(optionName(parentElementType)),
+        isDisabled: true,
+        isSelected: true,
+      })
+      return options
+    }
+  }
+}
+
+export const TypeSelector: React.FC<{
+  state: EditorState
+  dispatch: (tr: Transaction) => void
+  view?: ManuscriptEditorView
+}> = ({ state, dispatch, view }) => {
+  const options = buildOptions(state)
+  const isInBody = hasParentNodeOfType(schema.nodes.body)(state.selection)
+  return (
+    <StyledSelect
+      onChange={(value: OnChangeValue<Option, false>) => {
+        if (value && value.action) {
+          value.action(state, dispatch, view)
+        }
+      }}
+      value={
+        options.length === 1
+          ? (options[0] as Option | undefined)
+          : findSelectedOption(options)
+      }
+      options={options}
+      components={{
+        Control: CustomControl,
+        Option: OptionComponent,
+      }}
+      classNamePrefix="type-selector"
+      styles={customStyles}
+      isDisabled={options.length <= 1 || !isInBody || !isEditAllowed(state)}
+      isSearchable={false}
+      tabIndex={-1}
+    />
+  )
+}

package/src/components/toolbar/type-selector/styles.ts

@@ -0,0 +1,79 @@
+/*!
+ * © 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 Select, { CSSObjectWithLabel, GroupBase, Props } from 'react-select'
+import styled from 'styled-components'
+
+import { Option } from './TypeSelector'
+
+const TypeSelect: React.ComponentType<Props<Option, false, GroupBase<Option>>> = Select
+
+export const StyledSelect = styled(TypeSelect)`
+  .type-selector__control:hover {
+    border-color: ${(props) => props.theme.colors.border.secondary};
+  }
+
+  .type-selector__control:focus-visible {
+    border-color: ${(props) => props.theme.colors.outline.focus} !important;
+    box-shadow: 0 0 0 1px ${(props) => props.theme.colors.outline.focus} !important;
+    outline: none;
+
+    .type-selector__dropdown-indicator {
+      color: #6e6e6e;
+    }
+  }
+`
+
+export const customStyles = {
+  control: (styles: CSSObjectWithLabel): CSSObjectWithLabel => ({
+    ...styles,
+    backgroundColor: '#fff',
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: '#e2e2e2',
+    boxShadow: 'none',
+    fontSize: '14px',
+    minHeight: 0,
+    padding: 0,
+    width: 200,
+    overflowX: 'hidden',
+    textOverflow: 'ellipsis',
+    cursor: 'pointer',
+    height: 32,
+  }),
+  indicatorSeparator: (): CSSObjectWithLabel => ({
+    display: 'none',
+  }),
+  dropdownIndicator: (styles: CSSObjectWithLabel): CSSObjectWithLabel => ({
+    ...styles,
+    padding: '0 4px',
+  }),
+  menu: (styles: CSSObjectWithLabel): CSSObjectWithLabel => ({
+    ...styles,
+    width: '200px',
+  }),
+  singleValue: (styles: CSSObjectWithLabel): CSSObjectWithLabel => ({
+    ...styles,
+    padding: 0,
+  }),
+  valueContainer: (styles: CSSObjectWithLabel): CSSObjectWithLabel => ({
+    ...styles,
+    padding: '1px 8px',
+  }),
+  container: (styles: CSSObjectWithLabel): CSSObjectWithLabel => ({
+    ...styles,
+    border: 'none',
+  }),
+}

package/src/components/views/CrossReferenceItems.tsx

@@ -0,0 +1,199 @@
+/*!
+ * © 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 {
+  ButtonGroup,
+  PrimaryButton,
+  SecondaryButton,
+  TextArea,
+  withFocusTrap,
+  withListNavigation,
+  withNavigableListItem,
+} from '@manuscripts/style-guide'
+import { Target } from '@manuscripts/transform'
+import React, { useEffect, useRef, useState } from 'react'
+import styled from 'styled-components'
+
+const Container = withFocusTrap(styled.div`
+  padding: ${(props) => props.theme.grid.unit * 3}px
+    ${(props) => props.theme.grid.unit * 4}px;
+  display: flex;
+  flex-direction: column;
+  max-height: 60vh;
+  overflow: hidden;
+`)
+
+const Actions = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-shrink: 0;
+`
+
+const Items = withListNavigation(styled.div`
+  flex: 1;
+  overflow-y: auto;
+  padding: ${(props) => props.theme.grid.unit * 3}px;
+`)
+
+const CrossReferenceItem = withNavigableListItem(styled.div<{
+  isSelected: boolean
+}>`
+  cursor: pointer;
+  padding: ${(props) => props.theme.grid.unit * 4}px;
+  background-color: ${(props) =>
+    props.isSelected
+      ? props.theme.colors.background.selected
+      : props.theme.colors.background.primary};
+  transition: background-color 0.1s;
+  border: solid
+    ${(props) =>
+      props.isSelected
+        ? props.theme.colors.brand.medium
+        : props.theme.colors.border.secondary};
+  border-width: 1px 0;
+  z-index: ${(props) => (props.isSelected ? '1' : '0')};
+
+  &:hover {
+    background-color: ${(props) => props.theme.colors.background.selected};
+  }
+`)
+
+const Label = styled.span`
+  color: ${(props) => props.theme.colors.text.primary};
+`
+
+const Caption = styled.span`
+  color: ${(props) => props.theme.colors.text.secondary};
+`
+
+const Heading = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  font-weight: ${(props) => props.theme.font.weight.bold};
+`
+
+const Empty = styled.div`
+  margin-bottom: ${(props) => props.theme.grid.unit * 4}px;
+  color: ${(props) => props.theme.colors.text.tertiary};
+`
+const DefaultLabelWrapper = styled.div`
+  margin-bottom: ${(props) => props.theme.grid.unit * 2}px;
+`
+
+const CustomTextArea = styled(TextArea)`
+  width: 100%;
+  height: 75px;
+  color: ${(props) => props.theme.colors.text.secondary};
+  background-color: ${(props) =>
+    props.theme.colors.background.primary} !important;
+  border: 1px solid ${(props) => props.theme.colors.border.secondary};
+  border-radius: ${(props) => props.theme.grid.radius.small};
+  padding: ${(props) => props.theme.grid.unit * 2}px;
+`
+
+// trim a caption, avoiding cutting words
+const trimmedCaption = (caption: string, limit: number): string => {
+  if (caption.length <= limit) {
+    return caption
+  }
+
+  const captionSearch = new RegExp(`^(.{${limit}}[^\\s]*).*`)
+
+  return caption.replace(captionSearch, '$1…')
+}
+
+interface Props {
+  targets: Target[]
+  handleSelect: (id: string, customLabel?: string) => void
+  handleCancel: () => void
+  currentTargetId?: string
+  currentCustomLabel?: string
+}
+
+export const CrossReferenceItems: React.FC<Props> = ({
+  targets,
+  handleSelect,
+  handleCancel,
+  currentTargetId,
+  currentCustomLabel,
+}) => {
+  const [selectedItem, setSelectedItem] = useState<string>('')
+  const customTextRef = useRef<HTMLTextAreaElement>(null)
+
+  useEffect(() => {
+    if (currentTargetId) {
+      setSelectedItem(currentTargetId)
+    }
+  }, [currentTargetId])
+
+  return (
+    <Container>
+      <Heading>Insert Cross-reference</Heading>
+
+      <Items>
+        {targets.length ? (
+          targets.map((target) => (
+            <CrossReferenceItem
+              key={target.id}
+              isSelected={selectedItem === target.id}
+              onClick={() => setSelectedItem(target.id)}
+            >
+              <DefaultLabelWrapper>
+                <Label>{target.label}</Label>
+                <Caption>
+                  {target.caption && ': ' + trimmedCaption(target.caption, 200)}
+                </Caption>
+              </DefaultLabelWrapper>
+              {selectedItem === target.id && (
+                <CustomTextArea
+                  ref={customTextRef}
+                  placeholder={'Or type custom text'}
+                  defaultValue={
+                    currentTargetId &&
+                    currentTargetId === selectedItem &&
+                    currentCustomLabel
+                      ? currentCustomLabel
+                      : ''
+                  }
+                />
+              )}
+            </CrossReferenceItem>
+          ))
+        ) : (
+          <Empty>No cross-reference targets available.</Empty>
+        )}
+      </Items>
+
+      <Actions>
+        <ButtonGroup>
+          <SecondaryButton onClick={handleCancel}>Cancel</SecondaryButton>
+          <PrimaryButton
+            onClick={() =>
+              selectedItem &&
+              handleSelect(selectedItem, customTextRef.current?.value || '')
+            }
+            disabled={!selectedItem}
+          >
+            Insert
+          </PrimaryButton>
+        </ButtonGroup>
+      </Actions>
+    </Container>
+  )
+}

package/src/components/views/DeleteEmbedDialog.tsx

@@ -0,0 +1,83 @@
+/*!
+ * © 2023 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 { Category, Dialog } from '@manuscripts/style-guide'
+import { EmbedNode } from '@manuscripts/transform'
+import { EditorView } from 'prosemirror-view'
+import React, { useState } from 'react'
+
+import { getEditorProps } from '../../plugins/editor-props'
+import ReactSubView from '../../views/ReactSubView'
+
+const DeleteEmbedDialog: React.FC<{
+  deleteNode: () => void
+}> = ({ deleteNode }) => {
+  const [isOpen, setOpen] = useState(true)
+
+  return (
+    <Dialog
+      isOpen={isOpen}
+      actions={{
+        primary: {
+          action: () => {
+            deleteNode()
+            setOpen(false)
+          },
+          title: 'Delete',
+        },
+        secondary: {
+          action: () => setOpen(false),
+          title: 'Cancel',
+        },
+      }}
+      category={Category.confirmation}
+      header={'Delete Media'}
+      message={
+        <>
+          <span>This action will delete the media from the page.</span>
+          <br />
+          <br />
+          <span>Do you want to continue?</span>
+        </>
+      }
+    />
+  )
+}
+
+export const openDeleteEmbedDialog = (
+  view: EditorView,
+  node: EmbedNode,
+  pos: number
+) => {
+  const { state, dispatch } = view
+  const props = getEditorProps(state)
+
+  const dialog = ReactSubView(
+    props,
+    DeleteEmbedDialog,
+    {
+      deleteNode: () => {
+        const from = pos
+        const to = from + node.nodeSize
+        dispatch(state.tr.delete(from, to))
+      },
+    },
+    state.doc,
+    () => 0,
+    view
+  )
+
+  document.body.appendChild(dialog)
+}

package/src/components/views/DeleteFootnoteDialog.tsx

@@ -0,0 +1,54 @@
+/*!
+ * © 2023 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 { Category, Dialog } from '@manuscripts/style-guide'
+import React, { useState } from 'react'
+
+export interface DeleteFootnoteDialogProps {
+  header: string
+  message: string
+  handleDelete: () => void
+}
+
+export const DeleteFootnoteDialog: React.FC<DeleteFootnoteDialogProps> = ({
+  header,
+  message,
+  handleDelete,
+}) => {
+  const [isOpen, setOpen] = useState(true)
+
+  return (
+    <Dialog
+      className="delete-footnote-dialog"
+      isOpen={isOpen}
+      actions={{
+        primary: {
+          action: () => {
+            setOpen(false)
+            handleDelete()
+          },
+          title: 'Delete',
+        },
+        secondary: {
+          action: () => setOpen(false),
+          title: 'Cancel',
+        },
+      }}
+      category={Category.confirmation}
+      header={header}
+      message={message}
+    />
+  )
+}