@manuscripts/body-editor 3.12.67 → 3.13.0

package/src/components/views/InsertSpecialCharacter.tsx

@@ -0,0 +1,245 @@
+/*!
+ * © 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 {
+  ButtonGroup,
+  CloseButton,
+  IconButton,
+  IconButtonGroup,
+  ModalBody,
+  ModalContainer,
+  ModalHeader,
+  ModalSidebar,
+  ModalSidebarHeader,
+  ModalSidebarTitle,
+  PrimaryButton,
+  SidebarContent,
+  StyledModal,
+  withNavigableListItem,
+  withListNavigation,
+} from '@manuscripts/style-guide'
+import { EditorView } from 'prosemirror-view'
+import React, { MouseEvent, useState } from 'react'
+import Select, { OptionProps, SingleValue } from 'react-select'
+import styled from 'styled-components'
+
+import { getEditorProps } from '../../plugins/editor-props'
+import ReactSubView from '../../views/ReactSubView'
+
+// Ranges brought from: https://www.unicode.org/Public/UCD/latest/ucd/Blocks.txt
+const unicodeRanges = [
+  { label: 'Latin', value: [0x0100, 0x024f] },
+  { label: 'Greek and Coptic', value: [0x0370, 0x03ff] },
+  { label: 'Mathematical Operators', value: [0x2200, 0x22ff] },
+  { label: 'Arrows', value: [0x2190, 0x21ff] },
+]
+
+type OptionType = { value: number[]; label: string }
+
+const reservedCharacters = new Set([
+  0x0380, 0x0381, 0x0382, 0x0383, 0x03a2, 0x0378, 0x0379, 0x038b, 0x038d,
+])
+
+const generateCharacters = (start: number, end: number) =>
+  Array.from({ length: end - start + 1 }, (_, i) => start + i)
+    .filter((c) => !reservedCharacters.has(c))
+    .map((c) => String.fromCharCode(c))
+
+const InsertSpecialCharacterDialog: React.FC<{
+  view: EditorView
+}> = ({ view }) => {
+  const [isOpen, setOpen] = useState(true)
+  const [range, setRange] = useState(unicodeRanges[0].value)
+
+  const handleRangeChange = (range: SingleValue<OptionType>) =>
+    range && setRange(range.value)
+
+  const handleClose = () => setOpen(false)
+
+  const addCharacter = (event: MouseEvent<HTMLButtonElement>) =>
+    view.dispatch(
+      view.state.tr.insertText(
+        event.currentTarget.value,
+        view.state.selection.from
+      )
+    )
+
+  return (
+    <StyledModal
+      isOpen={isOpen}
+      onRequestClose={handleClose}
+      shouldCloseOnOverlayClick={true}
+    >
+      <Container data-cy="special-characters-modal">
+        <ModalHeader>
+          <CloseButton onClick={handleClose} data-cy="modal-close-button" />
+        </ModalHeader>
+        <StyledModalBody>
+          <StyledModalSidebar>
+            <ModalSidebarHeader>
+              <ModalSidebarTitle>Insert special characters</ModalSidebarTitle>
+            </ModalSidebarHeader>
+            <StyledSidebarContent>
+              <Select<OptionType>
+                onChange={handleRangeChange}
+                classNamePrefix={'special-characters-ranges-select'}
+                defaultValue={unicodeRanges[0]}
+                options={unicodeRanges}
+                components={{
+                  Option: OptionComponent,
+                }}
+                menuPosition="fixed"
+              />
+              <CharactersSetContainer>
+                <CharactersSet>
+                  {generateCharacters(range[0], range[1]).map((character) => (
+                    <Character
+                      key={character}
+                      value={character}
+                      onClick={addCharacter}
+                      data-cy="special-character"
+                    >
+                      {character}
+                    </Character>
+                  ))}
+                </CharactersSet>
+              </CharactersSetContainer>
+            </StyledSidebarContent>
+            <ButtonsContainer>
+              <PrimaryButton onClick={handleClose}>Close</PrimaryButton>
+            </ButtonsContainer>
+          </StyledModalSidebar>
+        </StyledModalBody>
+      </Container>
+    </StyledModal>
+  )
+}
+
+const OptionComponent: React.FC<OptionProps<OptionType, false>> = ({
+  innerProps,
+  innerRef,
+  data,
+  isFocused,
+  isSelected,
+}) => {
+  return (
+    <OptionWrapper
+      {...innerProps}
+      ref={innerRef}
+      focused={isFocused}
+      selected={isSelected}
+    >
+      {data.label}
+    </OptionWrapper>
+  )
+}
+
+const Container = styled(ModalContainer)`
+  padding: 8px;
+`
+
+const StyledModalSidebar = styled(ModalSidebar)`
+  background: white;
+  width: 30vw;
+`
+
+const StyledModalBody = styled(ModalBody)`
+  height: 60vh;
+`
+
+const StyledSidebarContent = styled(SidebarContent)`
+  display: flex;
+  flex-direction: column;
+`
+
+const ButtonsContainer = styled(ButtonGroup)`
+  padding-top: ${(props) => props.theme.grid.unit * 5}px;
+`
+
+const OptionWrapper = styled.div<{ focused?: boolean; selected?: boolean }>`
+  padding-left: ${(props) => props.theme.grid.unit * 4}px;
+  padding-top: ${(props) => props.theme.grid.unit * 2}px;
+  padding-bottom: ${(props) => props.theme.grid.unit * 2}px;
+
+  background-color: ${(props) => {
+    if (props.selected) {
+      return props.theme.colors.background.selected
+    }
+    if (props.focused) {
+      return props.theme.colors.background.fifth
+    }
+    return 'transparent'
+  }};
+
+  &:hover {
+    background-color: ${(props) => props.theme.colors.background.fifth};
+  }
+`
+
+const CharactersSetContainer = styled.div`
+  flex: 1;
+  overflow-y: scroll;
+  margin: 18px 0;
+  padding: 8px;
+`
+
+const CharactersSet = withListNavigation(styled(IconButtonGroup)`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(28px, max-content));
+  border: 1px solid #ddd;
+`)
+
+const Character = withNavigableListItem(styled(IconButton)`
+  border-bottom: 1px solid #ddd;
+  border-right: 1px solid #ddd;
+  border-radius: unset;
+
+  :hover,
+  :focus {
+    background-color: #f0f0f0 !important;
+  }
+
+  :active,
+  :focus {
+    color: inherit !important;
+    border-bottom: 1px solid #ddd !important;
+    border-right: 1px solid #ddd !important;
+  }
+
+  &&:not([disabled]):focus-visible {
+    outline: 1px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: 2px;
+  }
+`)
+
+export const openInsertSpecialCharacterDialog = (view?: EditorView) => {
+  if (!view) {
+    return
+  }
+
+  const { state } = view
+  const props = getEditorProps(state)
+
+  const dialog = ReactSubView(
+    props,
+    InsertSpecialCharacterDialog,
+    { view },
+    state.doc,
+    () => 0,
+    view
+  )
+
+  document.body.appendChild(dialog)
+}

package/src/components/views/LinkForm.tsx

@@ -0,0 +1,220 @@
+/*!
+ * © 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 {
+  DeleteIcon,
+  FormContainer,
+  FormRow,
+  Label,
+  PrimaryButton,
+  SecondaryButton,
+  TextField,
+  InputErrorText,
+  withFocusTrap,
+} from '@manuscripts/style-guide'
+import React, { useCallback, useState } from 'react'
+import styled from 'styled-components'
+
+import { allowedHref } from '../../lib/url'
+
+const Actions = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 16px;
+`
+
+const ActionGroup = styled.span`
+  display: flex;
+  align-items: center;
+
+  button:not(:last-of-type) {
+    margin-right: 4px;
+  }
+`
+
+const RemoveButton = styled(SecondaryButton)`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+
+  svg .icon_element {
+    fill: #6e6e6e;
+  }
+`
+
+export const Open = styled.a`
+  display: inline-block;
+  margin-left: ${(props) => props.theme.grid.unit * 2}px;
+  margin-top: 4px;
+  text-transform: uppercase;
+  color: inherit;
+  font-size: ${(props) => props.theme.font.size.small};
+  text-decoration: none;
+
+  &:after {
+    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
+    margin-left: 4px;
+  }
+
+  &&:not([disabled]):focus-visible {
+    outline: 2px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: 3px;
+  }
+`
+
+const Form = withFocusTrap(styled.form``)
+
+export interface LinkValue {
+  text: string
+  href: string
+  title?: string
+}
+
+export interface LinkFormProps {
+  onCancel: () => void
+  onRemove: () => void
+  onSave: (value: LinkValue) => void
+  value: LinkValue
+}
+
+export const LinkForm: React.FC<LinkFormProps> = ({
+  onCancel,
+  onRemove,
+  onSave,
+  value,
+}) => {
+  const [href, setHref] = useState(value.href)
+  const [text, setText] = useState(value.text)
+  const [title, setTitle] = useState(value.title || '')
+  const [errors, setErrors] = useState<Record<string, string>>({})
+
+  const validate = useCallback((currentHref: string, currentText: string) => {
+    const newErrors: Record<string, string> = {}
+    if (!currentHref) {
+      newErrors.href = 'URL is required'
+    } else if (!allowedHref(currentHref)) {
+      newErrors.href = 'Please enter a valid URL'
+    }
+    if (!currentText) {
+      newErrors.text = 'Text is required'
+    }
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }, [])
+
+  const handleHrefChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = e.target.value
+      setHref(newValue)
+      if (errors.href) {
+        validate(newValue, text)
+      }
+    },
+    [errors.href, text, validate]
+  )
+
+  const handleTextChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = e.target.value
+      setText(newValue)
+      if (errors.text) {
+        validate(href, newValue)
+      }
+    },
+    [errors.text, href, validate]
+  )
+
+  const handleSubmit = useCallback(
+    (event: React.FormEvent<HTMLFormElement>) => {
+      event.preventDefault()
+      if (validate(href, text)) {
+        onSave({ href, text, title })
+      }
+    },
+    [href, text, title, onSave, validate]
+  )
+
+  return (
+    <Form onSubmit={handleSubmit} noValidate={true}>
+      <FormContainer>
+        <FormRow>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <Label>URL*</Label>
+            {href && allowedHref(href) && (
+              <Open href={href} target={'_blank'} rel={'noopener'} />
+            )}
+          </div>
+
+          <TextField
+            type={'text'}
+            name={'href'}
+            value={href}
+            autoComplete={'off'}
+            error={!!errors.href}
+            onChange={handleHrefChange}
+          />
+
+          {errors.href && <InputErrorText>{errors.href}</InputErrorText>}
+        </FormRow>
+
+        <FormRow>
+          <Label>Text</Label>
+
+          <TextField
+            type={'text'}
+            name={'text'}
+            value={text}
+            autoComplete={'off'}
+            error={!!errors.text}
+            onChange={handleTextChange}
+          />
+          {errors.text && <InputErrorText>{errors.text}</InputErrorText>}
+        </FormRow>
+
+        <FormRow>
+          <Label>Title</Label>
+
+          <TextField
+            type={'text'}
+            name={'title'}
+            value={title}
+            autoComplete={'off'}
+            required={false}
+            onChange={(e) => setTitle(e.target.value)}
+          />
+        </FormRow>
+
+        <Actions>
+          <ActionGroup>
+            <RemoveButton type={'button'} onClick={onRemove}>
+              <DeleteIcon />
+              <span>Remove Link</span>
+            </RemoveButton>
+          </ActionGroup>
+
+          <ActionGroup>
+            <SecondaryButton type={'button'} onClick={onCancel}>
+              Cancel
+            </SecondaryButton>
+            <PrimaryButton type={'submit'}>Save</PrimaryButton>
+          </ActionGroup>
+        </Actions>
+      </FormContainer>
+    </Form>
+  )
+}

package/src/components/views/TableCellContextMenu.tsx

@@ -0,0 +1,241 @@
+/*!
+ * © 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 {
+  Category,
+  DeleteIcon,
+  Dialog,
+  IconTextButton,
+  PlusIcon,
+} from '@manuscripts/style-guide'
+import { skipTracking } from '@manuscripts/track-changes-plugin'
+import { schema } from '@manuscripts/transform'
+import { Command, EditorState } from 'prosemirror-state'
+import {
+  CellSelection,
+  deleteColumn,
+  deleteRow,
+  mergeCells,
+  selectedRect,
+  splitCell,
+} from 'prosemirror-tables'
+import { EditorView } from 'prosemirror-view'
+import React, { Dispatch, useState } from 'react'
+import styled from 'styled-components'
+
+import { addColumns, addHeaderRow, addRows } from '../../commands'
+import { getEditorProps } from '../../plugins/editor-props'
+
+/**
+ * Return the number of selected rows/columns
+ */
+const getSelectedCellsCount = (state: EditorState) => {
+  const { selection } = state
+  const selectedCells = { rows: 1, columns: 1 }
+  if (selection instanceof CellSelection) {
+    const rect = selectedRect(state)
+    selectedCells.rows = rect.bottom - rect.top
+    selectedCells.columns = rect.right - rect.left
+  }
+  return selectedCells
+}
+
+const isHeaderCellSelected = (state: EditorState) => {
+  if (state.selection instanceof CellSelection) {
+    const anchorNode = state.selection.$anchorCell.node(
+      state.selection.$anchorCell.depth
+    ).firstChild
+    const headNode = state.selection.$headCell.node(
+      state.selection.$headCell.depth
+    ).firstChild
+    return (
+      anchorNode?.type === schema.nodes.table_header ||
+      headNode?.type === schema.nodes.table_header
+    )
+  }
+
+  return (
+    state.doc.nodeAt(state.selection.from)?.type === schema.nodes.table_header
+  )
+}
+
+const TableChangeWarningDialog: React.FC<{
+  isOpen: boolean
+  primaryAction: () => void
+  secondaryAction: () => void
+}> = ({ isOpen, primaryAction, secondaryAction }) => (
+  <Dialog
+    isOpen={isOpen}
+    category={Category.confirmation}
+    header={"This change can't be tracked"}
+    message={"This action won't be marked as change. Do you want to continue?"}
+    actions={{
+      primary: { action: primaryAction, title: 'Ok' },
+      secondary: { action: secondaryAction, title: 'Cancel' },
+    }}
+  />
+)
+
+export const ContextMenu: React.FC<{
+  view: EditorView
+  close: () => void
+  onCancelColumnDialog: () => void
+}> = ({ view, close, onCancelColumnDialog }) => {
+  const runCommand = (command: Command, noTracking?: boolean) => {
+    command(view.state, (tr) =>
+      view.dispatch((noTracking && skipTracking(tr)) || tr)
+    )
+    close()
+  }
+
+  const [rowDeleteAction, setRowDeleteAction] = useState<Command>()
+  const [columnAction, setColumnAction] = useState<Command>()
+
+  const isCellSelectionMerged = mergeCells(view.state)
+  const isCellSelectionSplittable = splitCell(view.state)
+  const count = getSelectedCellsCount(view.state)
+  const rows = count.rows > 1 ? `${count.rows} rows` : `row`
+  const columns = count.columns > 1 ? `${count.columns} columns` : `column`
+  const headerPosition = isHeaderCellSelected(view.state) ? 'below' : 'above'
+
+  const showWarningForTCPlugin = (
+    action: Dispatch<() => Command>,
+    command: () => Command
+  ) => {
+    const props = getEditorProps(view.state)
+    if (!props.getCapabilities().editWithoutTracking) {
+      action(command)
+    } else {
+      runCommand(command(), true)
+    }
+  }
+
+  return (
+    <MenuDropdownList className={'table-ctx'}>
+      <ActionButton
+        disabled={isHeaderCellSelected(view.state)}
+        onClick={() => runCommand(addRows('top'))}
+      >
+        <PlusIcon /> Insert {rows} above
+      </ActionButton>
+      <ActionButton onClick={() => runCommand(addRows('bottom'))}>
+        <PlusIcon /> Insert {rows} below
+      </ActionButton>
+      <ActionButton
+        onClick={() =>
+          showWarningForTCPlugin(setColumnAction, () => addColumns('left'))
+        }
+      >
+        <PlusIcon /> Insert {columns} to the left
+      </ActionButton>
+      <ActionButton
+        onClick={() =>
+          showWarningForTCPlugin(setColumnAction, () => addColumns('right'))
+        }
+      >
+        <PlusIcon /> Insert {columns} to the right
+      </ActionButton>
+      <Separator />
+      <ActionButton
+        disabled={count.rows !== 1}
+        onClick={() => runCommand(addHeaderRow(headerPosition))}
+      >
+        <PlusIcon /> Insert header row {headerPosition}
+      </ActionButton>
+      <Separator />
+      <ActionButton
+        onClick={() =>
+          showWarningForTCPlugin(setRowDeleteAction, () => deleteRow)
+        }
+      >
+        <GrayDeleteIcon /> Delete
+        {isHeaderCellSelected(view.state) ? ' header ' : ''} {rows}
+      </ActionButton>
+      <ActionButton
+        onClick={() =>
+          showWarningForTCPlugin(setColumnAction, () => deleteColumn)
+        }
+      >
+        <GrayDeleteIcon /> Delete {columns}
+      </ActionButton>
+      {(isCellSelectionMerged || isCellSelectionSplittable) && <Separator />}
+      {isCellSelectionMerged && (
+        <ActionButton onClick={() => runCommand(mergeCells, true)}>
+          Merge cells
+        </ActionButton>
+      )}
+      {isCellSelectionSplittable && (
+        <ActionButton onClick={() => runCommand(splitCell, true)}>
+          Split cells
+        </ActionButton>
+      )}
+      <TableChangeWarningDialog
+        isOpen={!!rowDeleteAction}
+        primaryAction={() => {
+          if (rowDeleteAction) {
+            runCommand(rowDeleteAction, true)
+            setRowDeleteAction(undefined)
+          }
+        }}
+        secondaryAction={() => setRowDeleteAction(undefined)}
+      />
+      <TableChangeWarningDialog
+        isOpen={!!columnAction}
+        primaryAction={() => {
+          if (columnAction) {
+            runCommand(columnAction, true)
+            setColumnAction(undefined)
+          }
+        }}
+        secondaryAction={() => {
+          setColumnAction(undefined)
+          onCancelColumnDialog()
+        }}
+      />
+    </MenuDropdownList>
+  )
+}
+
+const MenuDropdownList = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+const ActionButton = styled(IconTextButton)`
+  padding: 8px 16px;
+  justify-content: flex-start;
+
+  :hover {
+    background: #f2fbfc;
+  }
+  :disabled {
+    color: #353535;
+    background-color: #ffffff;
+    opacity: 0.4;
+  }
+`
+
+const Separator = styled.div`
+  height: 0;
+  border-bottom: 1px solid #e2e2e2;
+  margin: 4px 0;
+`
+
+const GrayDeleteIcon = styled(DeleteIcon)`
+  path,
+  rect {
+    fill: #333333;
+  }
+`