@jpmorganchase/mosaic-content-editor-plugin 0.1.0-beta.10

package/src/components/PersistEditDialog/index.tsx

@@ -0,0 +1,109 @@
+import React, { FC, useState } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $convertToMarkdownString } from '@lexical/markdown';
+import { Link, P2, Button } from '@jpmorganchase/mosaic-components';
+import { Dialog as SaltDialog, DialogTitle, DialogContent, DialogActions } from '@salt-ds/lab';
+
+import { useEditorUser, usePageState } from '../../store';
+import { save } from '../../api/save';
+import transformers from '../../transformers';
+import { PersistStatus } from './PersistStatus';
+
+interface InfoProps {
+  isRaising: boolean;
+  prHref: string | null;
+  error: string | null;
+}
+
+const Info: FC<InfoProps> = ({ isRaising, prHref, error }) =>
+  !isRaising && !prHref && !error ? (
+    <>
+      <P2>
+        The content of this page resides in a Git repository and to update it requires a Pull
+        Request which will be reviewed by the content owners.
+      </P2>
+      <br />
+      <P2>
+        Should you decide to stop editing before creating the Pull Request then all changes will be
+        lost.
+      </P2>
+    </>
+  ) : null;
+
+export const PersistDialog = ({ meta }: { meta: any }) => {
+  const { pageState, setPageState } = usePageState();
+  const { user } = useEditorUser();
+  const [editor] = useLexicalComposerContext();
+  const [isRaising, setIsRaising] = useState(false);
+  const [prHref, setPrHref] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const open = pageState === 'SAVING';
+  const state = prHref !== null ? 'success' : 'info';
+
+  const handleClose = () => {
+    setPageState('EDIT');
+    setPrHref(null);
+    setIsRaising(false);
+  };
+
+  const handleRaisePr = () => {
+    setIsRaising(true);
+    setPrHref(null);
+    setError(null);
+    try {
+      editor.update(async () => {
+        const markdown = $convertToMarkdownString(transformers);
+        if (markdown && user) {
+          const { sid, displayName, email } = user;
+          const response = await save({ sid, name: displayName, email }, meta.route, markdown);
+
+          if (response.ok) {
+            const data = await response.json();
+            if (data.error) {
+              setError(data.error);
+              setPrHref(null);
+              setIsRaising(false);
+            } else {
+              setPrHref(data?.links?.self[0]?.href);
+              setIsRaising(false);
+            }
+          }
+
+          if (response.status === 500) {
+            setError('An unexpected error has occurred.');
+            setPrHref(null);
+            setIsRaising(false);
+          }
+        }
+      });
+    } catch (e) {
+      setError('Sorry');
+      setPrHref(null);
+      setIsRaising(false);
+    }
+  };
+
+  return (
+    <SaltDialog onClose={handleClose} open={open} status={error ? 'error' : state} width="50%">
+      <DialogTitle>{!prHref ? 'Save Changes' : 'Pull Request Created Successfully'}</DialogTitle>
+      <DialogContent>
+        {(isRaising || error) && !prHref && <PersistStatus isRaising={isRaising} error={error} />}
+        <Info isRaising={isRaising} prHref={prHref} error={error} />
+        {!isRaising && prHref && (
+          <Link href={prHref} target="_blank">
+            A Pull Request for your changes has been created
+          </Link>
+        )}
+      </DialogContent>
+      <DialogActions>
+        <Button disabled={isRaising} onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button disabled={isRaising || prHref !== null} onClick={handleRaisePr} variant="cta">
+          Raise Pull Request
+        </Button>
+      </DialogActions>
+    </SaltDialog>
+  );
+};

package/src/components/Popper/Popper.css.ts

@@ -0,0 +1,12 @@
+import { style } from '@vanilla-extract/css';
+import { backgroundColor, shadow } from '@jpmorganchase/mosaic-theme';
+
+export const POPPER_Z_INDEX = 10;
+
+export default {
+  root: style([
+    style({ zIndex: POPPER_Z_INDEX }),
+    backgroundColor({ variant: 'regular' }),
+    shadow({ variant: 'elevation3' })
+  ])
+};

package/src/components/Popper/Popper.tsx

@@ -0,0 +1,31 @@
+import React, { forwardRef, HTMLAttributes, ReactNode } from 'react';
+import { Portal, useWindow } from '@salt-ds/lab';
+import classnames from 'classnames';
+
+import styles from './Popper.css';
+
+interface PopperProps extends HTMLAttributes<HTMLDivElement> {
+  /** Floating contents */
+  children?: ReactNode;
+  /** Class name */
+  className?: string;
+  /** Flag indicating whether the floating content is visible */
+  open?: boolean;
+}
+
+export const Popper = forwardRef<HTMLDivElement, PopperProps>(function Popper(props, forwardedRef) {
+  const { children, className, ...rest } = props;
+  const Window = useWindow();
+
+  if (!rest.open) {
+    return null;
+  }
+
+  return (
+    <Portal>
+      <Window className={classnames(className, styles.root)} ref={forwardedRef} {...rest}>
+        {children}
+      </Window>
+    </Portal>
+  );
+});

package/src/components/SaveButton.tsx

@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+import { Button, Icon } from '@jpmorganchase/mosaic-components';
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+
+import { usePageState } from '../store';
+
+export const SaveButton = () => {
+  const { setPageState } = usePageState();
+  const [isDisabled, setIsDisabled] = useState(true);
+
+  const onChange = () => {
+    setIsDisabled(false);
+  };
+
+  return (
+    <>
+      <OnChangePlugin onChange={onChange} ignoreSelectionChange />
+      <Button disabled={isDisabled} variant="cta" onClick={() => setPageState('SAVING')}>
+        <Icon name="save" /> &nbsp; Save
+      </Button>
+    </>
+  );
+};

package/src/components/ScrollableSection/ScrollableSection.css.ts

@@ -0,0 +1,10 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '@jpmorganchase/mosaic-theme';
+
+export default {
+  root: style({
+    padding: vars.space.horizontal.x3,
+    maxHeight: '100vh',
+    overflow: 'scroll'
+  })
+};

package/src/components/ScrollableSection/ScrollableSection.tsx

@@ -0,0 +1,20 @@
+import React, { Ref, forwardRef } from 'react';
+import classnames from 'classnames';
+
+import styles from './ScrollableSection.css';
+
+interface ScrollableSectionProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+export const ScrollableSection = forwardRef(function ScrollableSection(
+  { className, children }: ScrollableSectionProps,
+  ref: Ref<HTMLDivElement>
+) {
+  return (
+    <section ref={ref} className={classnames(styles.root, className)}>
+      {children}
+    </section>
+  );
+});

package/src/components/StatusBanner.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Banner } from '@salt-ds/lab';
+
+import { usePageState } from '../store';
+
+const StatusBanner = () => {
+  const { pageState, errorMessage } = usePageState();
+  const isError = pageState === 'ERROR';
+  return isError ? (
+    <Banner announcement={errorMessage} status="error">
+      {errorMessage}
+    </Banner>
+  ) : null;
+};
+
+export default StatusBanner;

package/src/components/Toolbar/InsertBlockDropdown.tsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import { Dropdown, SelectionChangeHandler } from '@salt-ds/lab';
+import { $createCodeNode } from '@lexical/code';
+import { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND } from '@lexical/list';
+import { $createHeadingNode, $createQuoteNode, HeadingTagType } from '@lexical/rich-text';
+import { $wrapNodes } from '@lexical/selection';
+import { $createParagraphNode, $getSelection, $isRangeSelection, LexicalEditor } from 'lexical';
+
+interface BlockSourceType {
+  name: string;
+  type: string;
+}
+
+const itemToString = (item?: BlockSourceType | null) => (item ? item.name : '');
+
+const headings = [
+  { name: 'Heading 1', type: 'h1' },
+  { name: 'Heading 2', type: 'h2' },
+  { name: 'Heading 3', type: 'h3' },
+  { name: 'Heading 4', type: 'h4' },
+  { name: 'Heading 5', type: 'h5' },
+  { name: 'Heading 6', type: 'h6' }
+];
+
+const source = [
+  { name: 'Bulleted List', type: 'bullet' },
+  { name: 'Code Block', type: 'code' },
+  ...headings,
+  { name: 'Numbered List', type: 'number' },
+  { name: 'Paragraph', type: 'paragraph' },
+  { name: 'Quote', type: 'quote' }
+];
+
+export function InsertBlockDropdown({
+  editor,
+  type: blockSourceType
+}: {
+  editor: LexicalEditor;
+  type: string;
+}): JSX.Element {
+  const formatParagraph = (item: BlockSourceType) => {
+    if (item.type === 'paragraph') {
+      editor.update(() => {
+        const selection = $getSelection();
+
+        if ($isRangeSelection(selection)) {
+          $wrapNodes(selection, () => $createParagraphNode());
+        }
+      });
+    }
+  };
+
+  const formatHeading = (item: BlockSourceType) => {
+    if (headings.findIndex(heading => heading.type === item.type) >= 0) {
+      editor.update(() => {
+        const selection = $getSelection();
+
+        if ($isRangeSelection(selection)) {
+          $wrapNodes(selection, () => $createHeadingNode(item.type as HeadingTagType));
+        }
+      });
+    }
+  };
+
+  const formatBulletList = (item: BlockSourceType) => {
+    if (item.type === 'bullet') {
+      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+    }
+  };
+
+  const formatNumberedList = (item: BlockSourceType) => {
+    if (item.type === 'number') {
+      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
+    }
+  };
+
+  const formatQuote = (item: BlockSourceType) => {
+    if (item.type === 'quote') {
+      editor.update(() => {
+        const selection = $getSelection();
+
+        if ($isRangeSelection(selection)) {
+          $wrapNodes(selection, () => $createQuoteNode());
+        }
+      });
+    }
+  };
+
+  const formatCode = (item: BlockSourceType) => {
+    if (item.type === 'code') {
+      editor.update(() => {
+        const selection = $getSelection();
+
+        if ($isRangeSelection(selection)) {
+          if (selection.isCollapsed()) {
+            $wrapNodes(selection, () => $createCodeNode());
+          } else {
+            const textContent = selection.getTextContent();
+            const codeNode = $createCodeNode();
+            selection.removeText();
+            selection.insertNodes([codeNode]);
+            selection.insertRawText(textContent);
+          }
+        }
+      });
+    }
+  };
+
+  const handleSelect: SelectionChangeHandler<BlockSourceType, 'default'> = (_event, item) => {
+    if (!item) {
+      return;
+    }
+    formatParagraph(item);
+    formatHeading(item);
+    formatBulletList(item);
+    formatNumberedList(item);
+    formatQuote(item);
+    formatCode(item);
+  };
+
+  const selectedBlockSourceIndex = source.findIndex(item => item.type === blockSourceType);
+  return (
+    <Dropdown
+      ListProps={{
+        width: 200
+      }}
+      defaultSelected={source[selectedBlockSourceIndex]}
+      itemToString={itemToString}
+      onSelectionChange={handleSelect}
+      source={source}
+      width={132}
+    />
+  );
+}

package/src/components/Toolbar/InsertHorizontalRule.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ToolbarButton } from '@salt-ds/lab';
+import { Icon } from '@jpmorganchase/mosaic-components';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { INSERT_HORIZONTAL_RULE_COMMAND } from '@lexical/react/LexicalHorizontalRuleNode';
+
+export const InsertHorizontalRule = () => {
+  const [editor] = useLexicalComposerContext();
+
+  const handleClick = () => {
+    editor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined);
+  };
+  return (
+    <ToolbarButton onClick={handleClick}>
+      <Icon name="minimize" />
+    </ToolbarButton>
+  );
+};

package/src/components/Toolbar/InsertImage.css.ts

@@ -0,0 +1,7 @@
+import { style } from '@vanilla-extract/css';
+
+export default {
+  fullWidth: style({
+    width: '100%'
+  })
+};

package/src/components/Toolbar/InsertImage.tsx

@@ -0,0 +1,132 @@
+import React, { useState } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { Button, Icon } from '@jpmorganchase/mosaic-components';
+import { string, object } from 'yup';
+import {
+  ButtonBar,
+  Dialog as SaltDialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions
+} from '@salt-ds/lab';
+import { FormField, Input } from '@salt-ds/lab';
+
+import { TextFormatToolbarButton } from './TextFormatToolbarButton';
+import {
+  INSERT_MARKDOWN_IMAGE_COMMAND,
+  InsertImagePayload
+} from '../../plugins/MarkdownImagePlugin';
+import styles from './InsertImage.css';
+
+const validationSchema = object({
+  alt: string()
+    .required('Alternative Information is a required field')
+    .max(100, 'Alternative Information must be fewer than 100 characters'),
+  url: string().required('Url is required').url('Must be a valid Url')
+});
+
+const initialState = {
+  url: 'https://'
+};
+
+type FormValueState =
+  | {
+      alt?: string;
+      url?: string;
+    }
+  | undefined;
+
+type FormErrorState =
+  | {
+      alt?: string;
+      url?: string;
+    }
+  | undefined;
+
+export const InsertImage = () => {
+  const [editor] = useLexicalComposerContext();
+  const [isOpen, setIsOpen] = useState(false);
+  const [values, setValues] = useState<FormValueState>(initialState);
+  const [errors, setErrors] = useState<FormErrorState>();
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  const handleOpen = () => setIsOpen(true);
+
+  const processErrors = validationErrors => {
+    const newErrors = validationErrors.inner.reduce(
+      (acc, { path, message }) => ({
+        ...acc,
+        [path]: message
+      }),
+      {}
+    );
+    setErrors(newErrors);
+  };
+
+  const handleChange = (event, value) => {
+    const { name } = event.target;
+    const newValues = { ...values, [name]: value };
+    validationSchema.validateAt(name, newValues, { abortEarly: false }).then(() => {
+      setErrors({ ...errors, [name]: undefined });
+    }, processErrors);
+    setValues(newValues);
+  };
+
+  const handleSubmit = async event => {
+    event.preventDefault();
+    validationSchema.validate(values, { abortEarly: false }).then(() => {
+      const payload: InsertImagePayload = {
+        alt: values && values.alt !== undefined ? values.alt : null,
+        url: values && values.url !== undefined ? values.url : null
+      };
+      editor.dispatchCommand(INSERT_MARKDOWN_IMAGE_COMMAND, payload);
+      handleClose();
+    }, processErrors);
+  };
+
+  return (
+    <>
+      <TextFormatToolbarButton active={isOpen} onClick={handleOpen} label="Insert Image">
+        <Icon name="addDocument" />
+      </TextFormatToolbarButton>
+
+      <SaltDialog onClose={handleClose} open={isOpen} width={600}>
+        <form onSubmit={handleSubmit} noValidate>
+          <DialogTitle>Insert Image</DialogTitle>
+          <DialogContent>
+            <div className={styles.fullWidth}>
+              <FormField
+                label="Url for image"
+                validationStatus={errors?.url ? 'error' : undefined}
+                helperText={errors?.url}
+              >
+                <Input value={values?.url} inputProps={{ name: 'url' }} onChange={handleChange} />
+              </FormField>
+              <FormField
+                label="Alternative Information (alt)"
+                validationStatus={errors?.alt ? 'error' : undefined}
+                helperText={
+                  errors?.alt ||
+                  'Provides alternative information for the image if for some reason it cannot be viewed'
+                }
+              >
+                <Input value={values?.alt} inputProps={{ name: 'alt' }} onChange={handleChange} />
+              </FormField>
+            </div>
+          </DialogContent>
+          <DialogActions>
+            <ButtonBar>
+              <Button onClick={handleClose}>Cancel</Button>
+              <Button variant="cta" type="submit">
+                Insert
+              </Button>
+            </ButtonBar>
+          </DialogActions>
+        </form>
+      </SaltDialog>
+    </>
+  );
+};

package/src/components/Toolbar/InsertLink.css.ts

@@ -0,0 +1,7 @@
+import { style } from '@vanilla-extract/css';
+
+export default {
+  fullWidth: style({
+    width: '100%'
+  })
+};

package/src/components/Toolbar/InsertLink.tsx

@@ -0,0 +1,145 @@
+import React, { useEffect, useState } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { Button, Icon } from '@jpmorganchase/mosaic-components';
+import { string, object } from 'yup';
+import { FormField, Input } from '@salt-ds/lab';
+import {
+  ButtonBar,
+  Dialog as SaltDialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions
+} from '@salt-ds/lab';
+import { $getSelection, $isRangeSelection } from 'lexical';
+
+import { TextFormatToolbarButton } from './TextFormatToolbarButton';
+import { INSERT_MARKDOWN_LINK_COMMAND, InsertLinkPayload } from '../../plugins/MarkdownLinkPlugin';
+import styles from './InsertLink.css';
+import { useIsInsertingLink } from '../../store';
+
+const validationSchema = object({
+  url: string().required('Url is required'),
+  text: string().required('Text is required').max(10, 'Text must be fewer than 100 characters')
+});
+
+export const InsertLinkButton = () => {
+  const { isInsertingLink, setIsInsertingLink } = useIsInsertingLink();
+  return (
+    <TextFormatToolbarButton
+      active={isInsertingLink}
+      onClick={() => setIsInsertingLink(true)}
+      label="Insert Link"
+    >
+      <Icon name="linked" />
+    </TextFormatToolbarButton>
+  );
+};
+
+const initialState = {
+  url: 'https://'
+};
+
+type FormValueState =
+  | {
+      text?: string;
+      url?: string;
+    }
+  | undefined;
+
+type FormErrorState =
+  | {
+      text?: string;
+      url?: string;
+    }
+  | undefined;
+
+export const InsertLinkDialog = () => {
+  const [editor] = useLexicalComposerContext();
+  const { isInsertingLink, setIsInsertingLink } = useIsInsertingLink();
+  const [values, setValues] = useState<FormValueState>(initialState);
+  const [errors, setErrors] = useState<FormErrorState>();
+
+  const handleClose = () => {
+    setIsInsertingLink(false);
+    setErrors(undefined);
+    setValues(initialState);
+  };
+
+  useEffect(() => {
+    editor.getEditorState().read(() => {
+      if (isInsertingLink) {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+          const textContent = selection.getTextContent();
+          setValues(values => ({ ...values, text: textContent }));
+        }
+      }
+    });
+  }, [editor, isInsertingLink]);
+
+  const processErrors = validationErrors => {
+    const newErrors = validationErrors.inner.reduce(
+      (acc, { path, message }) => ({
+        ...acc,
+        [path]: message
+      }),
+      {}
+    );
+    setErrors(newErrors);
+  };
+
+  const handleChange = (event, value) => {
+    const { name } = event.target;
+    const newValues = { ...values, [name]: value };
+    validationSchema.validateAt(name, newValues, { abortEarly: false }).then(() => {
+      setErrors({ ...errors, [name]: undefined });
+    }, processErrors);
+    setValues(newValues);
+  };
+
+  const handleSubmit = async event => {
+    event.preventDefault();
+    validationSchema.validate(values, { abortEarly: false }).then(() => {
+      const payload: InsertLinkPayload = {
+        url: values?.url,
+        text: values?.text
+      };
+      editor.dispatchCommand(INSERT_MARKDOWN_LINK_COMMAND, payload);
+      handleClose();
+    }, processErrors);
+  };
+
+  return (
+    <SaltDialog onClose={handleClose} open={isInsertingLink} width={600}>
+      <form onSubmit={handleSubmit} noValidate>
+        <DialogTitle>Insert Link</DialogTitle>
+        <DialogContent>
+          <div className={styles.fullWidth}>
+            <FormField
+              label="Image URL text"
+              validationStatus={errors?.url ? 'error' : undefined}
+              helperText={errors?.url}
+            >
+              <Input value={values?.url} inputProps={{ name: 'url' }} onChange={handleChange} />
+            </FormField>
+            <FormField
+              label="Link text"
+              validationStatus={errors?.text ? 'error' : undefined}
+              helperText={errors?.text}
+            >
+              <Input value={values?.text} inputProps={{ name: 'text' }} onChange={handleChange} />
+            </FormField>
+          </div>
+        </DialogContent>
+        <DialogActions>
+          <ButtonBar>
+            <Button onClick={handleClose}>Cancel</Button>
+            <Button variant="cta" type="submit">
+              Insert
+            </Button>
+          </ButtonBar>
+        </DialogActions>
+      </form>
+    </SaltDialog>
+  );
+};