@manuscripts/body-editor 3.12.66 → 3.13.0

package/src/components/toolbar/InsertEmbedDialog.tsx

@@ -0,0 +1,222 @@
+/*!
+ * © 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 {
+  ButtonGroup,
+  DialogModalBody,
+  MessageContainer,
+  PrimaryBoldHeading,
+  PrimaryButton,
+  PrimarySmallText,
+  SecondaryButton,
+  StyledModal,
+  TextArea,
+  Label,
+  FormRow,
+} from '@manuscripts/style-guide'
+import { ManuscriptEditorState } from '@manuscripts/transform'
+import { EditorView } from 'prosemirror-view'
+import React, { useEffect, useState } from 'react'
+import styled from 'styled-components'
+
+import { Dispatch, insertEmbed } from '../../commands'
+import { allowedHref } from '../../lib/url'
+import { useDoWithDebounce } from '../../lib/use-do-with-debounce'
+import { getEditorProps } from '../../plugins/editor-props'
+import ReactSubView from '../../views/ReactSubView'
+import { Open } from '../views/LinkForm'
+
+const HeaderContainer = styled(PrimaryBoldHeading)`
+  font-size: ${(props) => props.theme.font.size.large};
+`
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 16px;
+`
+
+const DialogContainer = styled(DialogModalBody)`
+  min-width: 750px;
+`
+
+const PreviewContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  border: 1px solid ${(props) => props.theme.colors.border.field.default};
+  border-radius: ${(props) => props.theme.grid.radius.small};
+  padding: 6px ${(props) => props.theme.grid.unit * 4}px;
+`
+
+export type InsertEmbedDialogProps = {
+  state: ManuscriptEditorState
+  dispatch: Dispatch
+  pos?: number
+}
+
+export const InsertEmbedDialog: React.FC<InsertEmbedDialogProps> = ({
+  state,
+  dispatch,
+  pos,
+}) => {
+  const attrs = pos ? state.doc.nodeAt(pos)?.attrs : undefined
+  const [isOpen, setOpen] = useState(true)
+  const [url, setUrl] = useState<string>(attrs?.href)
+  const [oembedHTML, setOEmbedHTML] = useState<string>()
+
+  const debounce = useDoWithDebounce()
+
+  const handleSave = () => {
+    if (!pos) {
+      insertEmbed(state, dispatch, { href: url })
+    } else {
+      const tr = state.tr.setNodeAttribute(pos, 'href', url)
+      dispatch(tr)
+    }
+    setOpen(false)
+  }
+
+  useEffect(
+    () => {
+      debounce(async () => {
+        if (url && allowedHref(url)) {
+        const html = await getEditorProps(state).fetchOEmbedHtml(url, 368, 217)
+        setOEmbedHTML(html)
+        }
+      })
+    },
+    [url] // eslint-disable-line react-hooks/exhaustive-deps
+  )
+
+  const operation = pos !== undefined && attrs?.href ? 'Update' : 'Insert'
+
+  return (
+    <StyledModal isOpen={isOpen} onRequestClose={() => setOpen(false)}>
+      <DialogContainer data-cy="media-editor">
+        <HeaderContainer>{operation} external media</HeaderContainer>
+
+        <MessageContainer>
+          <Container>
+            <FormRow direction={'row'}>
+              <Label htmlFor={'embed-link'}>Media link</Label>
+              {url && allowedHref(url) && (
+                <Open
+                  id={'media-link'}
+                  href={url}
+                  target={'_blank'}
+                  rel={'noopener'}
+                />
+              )}
+
+              <TextArea
+                id={'embed-link'}
+                rows={2}
+                cols={2}
+                defaultValue={url}
+                autoFocus={true}
+                required={true}
+                placeholder={'https://youtube.com/...'}
+                onChange={(e) => setUrl(e.target.value.trim())}
+              />
+            </FormRow>
+          </Container>
+          {url && allowedHref(url) && (
+            <Container>
+              <FormRow>
+                <Label>Preview</Label>
+              </FormRow>
+              {(oembedHTML && (
+                <PreviewContainer
+                  dangerouslySetInnerHTML={{ __html: oembedHTML }}
+                />
+              )) || <NoPreviewMessage />}
+            </Container>
+          )}
+        </MessageContainer>
+
+        <ButtonGroup>
+          <SecondaryButton onClick={() => setOpen(false)}>
+            Cancel
+          </SecondaryButton>
+          <PrimaryButton
+            onClick={handleSave}
+            disabled={!(url && allowedHref(url))}
+          >
+            {operation}
+          </PrimaryButton>
+        </ButtonGroup>
+      </DialogContainer>
+    </StyledModal>
+  )
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  padding: 50px 0;
+`
+
+const NoPreviewMessage: React.FC = () => (
+  <PreviewContainer>
+    <Wrapper>Preview not available</Wrapper>
+  </PreviewContainer>
+)
+
+const NoPreviewContainer = styled(PreviewContainer)`
+  flex-direction: column;
+  background: #fafafa;
+  padding: 16px 56px 16px 48px;
+`
+
+const Heading = styled(PrimaryBoldHeading)`
+  font-size: ${(props) => props.theme.font.size.medium};
+`
+
+export const NoPreviewMessageWithLink: React.FC<{ href: string }> = ({
+  href,
+}) => (
+  <NoPreviewContainer>
+    <Heading>Preview currently not available</Heading>
+    <PrimarySmallText>
+      <a href={href} target={'_blank'} rel="noreferrer">
+        Click here
+      </a>{' '}
+      to see the source media
+    </PrimarySmallText>
+  </NoPreviewContainer>
+)
+
+export const openEmbedDialog = (view?: EditorView, pos?: number) => {
+  if (!view) {
+    return
+  }
+  const { state, dispatch } = view
+
+  const dialog = ReactSubView(
+    getEditorProps(state),
+    InsertEmbedDialog,
+    {
+      state,
+      dispatch,
+      pos,
+    },
+    state.doc,
+    () => 0,
+    view
+  )
+
+  document.body.appendChild(dialog)
+}

package/src/components/toolbar/InsertTableDialog.tsx

@@ -0,0 +1,208 @@
+/*!
+ * © 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,
+  CheckboxField,
+  CheckboxLabel,
+  Dialog,
+} from '@manuscripts/style-guide'
+import { ManuscriptEditorState } from '@manuscripts/transform'
+import React, { useState } from 'react'
+import Select, { OptionProps } from 'react-select'
+import styled from 'styled-components'
+
+import { Dispatch, insertTable } from '../../commands'
+import { getEditorProps } from '../../plugins/editor-props'
+import ReactSubView from '../../views/ReactSubView'
+
+const Label = styled.div`
+  padding-right: 16px;
+  width: 150px;
+`
+const SelectContainer = styled.div`
+  width: 182px;
+  height: 30px;
+`
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  padding-bottom: 16px;
+`
+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};
+  }
+`
+
+export type InsertTableDialogProps = {
+  state: ManuscriptEditorState
+  dispatch?: Dispatch
+}
+
+export const InsertTableDialog: React.FC<InsertTableDialogProps> = ({
+  state,
+  dispatch,
+}) => {
+  const [isOpen, setOpen] = useState(true)
+  const [numberOfColumns, setNumColumns] = useState({ value: 4, label: `4` })
+  const [numberOfRows, setNumRows] = useState({ value: 4, label: `4` })
+  const [includeHeader, setIncludeHeader] = useState(true)
+
+  type OptionType = { value: number; label: string }
+
+  const handleColumnChange = (newValue: OptionType) => {
+    setNumColumns(newValue)
+  }
+
+  const handleRowChange = (newValue: OptionType) => {
+    setNumRows(newValue)
+  }
+
+  const options: OptionType[] = Array.from({ length: 20 }, (_, index) => ({
+    value: index + 1,
+    label: `${index + 1}`,
+  }))
+
+  const OptionComponent: React.FC<OptionProps<OptionType, false>> = ({
+    innerProps,
+    data,
+    innerRef,
+    isFocused,
+    isSelected,
+  }) => {
+    return (
+      <OptionWrapper
+        {...innerProps}
+        ref={innerRef}
+        focused={isFocused}
+        selected={isSelected}
+      >
+        {data.label}
+      </OptionWrapper>
+    )
+  }
+
+  const actions = {
+    primary: {
+      action: () => {
+        const config = {
+          numberOfColumns: numberOfColumns.value,
+          numberOfRows: numberOfRows.value,
+          includeHeader,
+        }
+        insertTable(config, state, dispatch)
+        setOpen(false)
+      },
+      title: 'Create table',
+    },
+    secondary: {
+      action: () => setOpen(false),
+      title: 'Cancel',
+    },
+  }
+
+  return (
+    <Dialog
+      isOpen={isOpen}
+      actions={actions}
+      category={Category.confirmation}
+      header={'Insert table'}
+      message={''}
+    >
+      <Container>
+        <Label>Number of columns:</Label>
+        <SelectContainer>
+          <Select<OptionType>
+            onChange={(v) => handleColumnChange(v as OptionType)}
+            value={numberOfColumns}
+            options={options}
+            components={{
+              Option: OptionComponent,
+            }}
+            menuPosition="fixed"
+            maxMenuHeight={150}
+          />
+        </SelectContainer>
+      </Container>
+      <Container>
+        <Label>Number of rows:</Label>
+        <SelectContainer>
+          <Select<OptionType>
+            onChange={(v) => handleRowChange(v as OptionType)}
+            value={numberOfRows}
+            options={options}
+            components={{
+              Option: OptionComponent,
+            }}
+            menuPosition="fixed"
+            maxMenuHeight={150}
+          />
+        </SelectContainer>
+      </Container>
+      <CheckboxLabel>
+        <CheckboxField
+          name={'include-header'}
+          checked={includeHeader}
+          onChange={(e) => {
+            setIncludeHeader(e.target.checked)
+          }}
+        />
+        <div>Include header row</div>
+      </CheckboxLabel>
+    </Dialog>
+  )
+}
+
+export const openInsertTableDialog = (
+  state: ManuscriptEditorState,
+  dispatch?: Dispatch
+) => {
+  const props = getEditorProps(state)
+
+  const componentProps: InsertTableDialogProps = {
+    state,
+    dispatch,
+  }
+
+  const dialog = ReactSubView(
+    props,
+    InsertTableDialog,
+    componentProps,
+    state.doc,
+    //@ts-ignore
+    null,
+    //@ts-ignore
+    null
+  )
+
+  document.body.appendChild(dialog)
+}

package/src/components/toolbar/ListMenuItem.tsx

@@ -0,0 +1,203 @@
+/*!
+ * © 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 {
+  Menu,
+  MenuComponentProps,
+  NestedSubmenusContainer,
+  SubmenuContainer,
+  SubmenuLabel,
+} from '@manuscripts/style-guide'
+import React, { useEffect, useRef } from 'react'
+import styled from 'styled-components'
+
+export const ListMenuItem: React.FC<MenuComponentProps> = ({
+  menu,
+  handleClick,
+  close,
+}) => {
+  const styleRefs = useRef<(HTMLDivElement | null)[]>([])
+
+  useEffect(() => {
+    if (menu.isOpen && styleRefs.current.length > 0) {
+      // Auto-focus first style when menu opens
+      styleRefs.current[0]?.focus()
+    }
+  }, [menu.isOpen])
+
+  if (!menu.submenu) {
+    return null
+  }
+  const styles = menu.submenu.map((m) => (m as Menu).id)
+
+  const handleStyleClick = (s: string, i: number) => {
+    handleClick([i])
+    close()
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    const items = styleRefs.current.filter(Boolean) as HTMLDivElement[]
+    if (items.length === 0) {
+      return
+    }
+
+    const currentIndex = items.indexOf(document.activeElement as HTMLDivElement)
+    if (currentIndex === -1) {
+      return
+    }
+
+    e.preventDefault()
+    e.stopPropagation()
+
+    switch (e.key) {
+      case 'ArrowDown':
+      case 'ArrowRight':
+        items[(currentIndex + 1) % items.length]?.focus()
+        break
+      case 'ArrowUp':
+      case 'ArrowLeft':
+        items[(currentIndex - 1 + items.length) % items.length]?.focus()
+        break
+      case 'Escape':
+        close()
+        break
+      case 'Enter': {
+        const el = document.activeElement as HTMLElement
+        el?.click()
+        break
+      }
+    }
+  }
+
+  return (
+    <SubmenuContainer>
+      <SubmenuLabel menu={menu} handleClick={handleClick} close={close} />
+      {menu.isOpen && (
+        <NestedSubmenusContainer onKeyDown={handleKeyDown}>
+          <ListStyles
+            styles={styles}
+            onClick={handleStyleClick}
+            styleRefs={styleRefs}
+          />
+        </NestedSubmenusContainer>
+      )}
+    </SubmenuContainer>
+  )
+}
+
+export interface ListSubmenuItemsProps {
+  styles: string[]
+  onClick: (style: string, index: number) => void
+  styleRefs?: React.MutableRefObject<(HTMLDivElement | null)[]>
+}
+
+export const ListStyles: React.FC<ListSubmenuItemsProps> = ({
+  styles,
+  onClick,
+  styleRefs,
+}) => {
+  return (
+    <ListContainer>
+      {styles.map((style, index) => (
+        <StyleBlock
+          data-cy="submenu"
+          key={index}
+          ref={(el) => {
+            if (styleRefs) {
+              styleRefs.current[index] = el
+            }
+          }}
+          onClick={() => onClick(style, index)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault()
+              onClick(style, index)
+            }
+          }}
+          tabIndex={0}
+        >
+          {styleItems[style].map((item, index) => (
+            <BlockItem key={index}>
+              <Label hide={item === '-'}>{item}</Label>
+              <Block />
+            </BlockItem>
+          ))}
+        </StyleBlock>
+      ))}
+    </ListContainer>
+  )
+}
+
+const styleItems: { [key: string]: string[] } = {
+  order: ['1.', '2.', '3.'],
+  'alpha-upper': ['A.', 'B.', 'C.'],
+  'alpha-lower': ['a.', 'b.', 'c.'],
+  'roman-upper': ['I.', 'II.', 'III.'],
+  'roman-lower': ['i.', 'ii.', 'iii.'],
+  bullet: ['•', '•', '•'],
+  simple: ['-', '-', '-'],
+}
+
+export const ListContainer = styled.div`
+  padding: ${(props) => props.theme.grid.unit * 4}px;
+  display: grid;
+  grid-template-columns:
+    ${(props) => props.theme.grid.unit * 21}px
+    ${(props) => props.theme.grid.unit * 21}px;
+  gap: 6px;
+`
+
+export const StyleBlock = styled.div`
+  border: 1px solid ${(props) => props.theme.colors.border.tertiary};
+  padding: ${(props) => props.theme.grid.unit * 2}px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  row-gap: ${(props) => props.theme.grid.unit * 2}px;
+
+  &:hover {
+    background: ${(props) => props.theme.colors.button.default.border.hover};
+  }
+
+  &:active {
+    border-color: ${(props) => props.theme.colors.border.primary};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: -2px;
+  }
+`
+
+export const BlockItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`
+
+export const Block = styled.div`
+  height: 3px;
+  width: ${(props) => props.theme.grid.unit * 14}px;
+  background: ${(props) => props.theme.colors.border.tertiary};
+`
+
+export const Label = styled.div<{ hide?: boolean }>`
+  font-family: Lato, serif;
+  font-size: ${(props) => props.theme.font.size.small};
+  font-weight: ${(props) => props.theme.font.weight.normal};
+  line-height: ${(props) => props.theme.font.lineHeight.small};
+  font-style: normal;
+  color: ${(props) => (props.hide && 'white') || 'initial'};
+`