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

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

@@ -0,0 +1,46 @@
+import { style } from '@vanilla-extract/css';
+import {
+  selectableColor,
+  table,
+  neutralBorder,
+  vars,
+  backgroundColor,
+  foregroundColor
+} from '@jpmorganchase/mosaic-theme';
+
+export default {
+  tableContainer: style({
+    position: 'relative',
+    margin: vars.space.horizontal.x2
+  }),
+  table: table({ context: 'component' }),
+  addColumnArea: style({
+    position: 'absolute',
+    top: 0,
+    width: '25px'
+  }),
+  addRowArea: style({
+    position: 'absolute',
+    left: 0,
+    height: '25px'
+  }),
+  headerRow: selectableColor({ variant: 'inEdit' }),
+  row: selectableColor({ variant: 'hover' }),
+  cell: style([
+    neutralBorder({
+      variant: 'high',
+      borderWidth: 'thin'
+    })
+  ]),
+  dimensions: style([
+    style({
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingTop: vars.space.vertical.x2
+    }),
+    foregroundColor({ variant: 'high' })
+  ]),
+  popper: style([style({ zIndex: 1600 }), backgroundColor({ variant: 'regular' })]),
+  spacer: style({ marginLeft: vars.space.horizontal.x1 })
+};

package/src/components/Toolbar/InsertTable.tsx

@@ -0,0 +1,190 @@
+import React, { ReactElement, FC, MouseEventHandler, useRef, useState } from 'react';
+import { Icon } from '@jpmorganchase/mosaic-components';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { INSERT_TABLE_COMMAND } from '@lexical/table';
+
+import { useFloatingUI } from '@salt-ds/lab';
+import { useDismiss, useInteractions } from '@floating-ui/react-dom-interactions';
+import { Popper } from '../Popper/Popper';
+import { TextFormatToolbarButton } from './TextFormatToolbarButton';
+import styles from './InsertTable.css';
+
+interface IndexableEntity {
+  index: number;
+}
+
+const Cell: FC<IndexableEntity> = ({ index, ...rest }) => (
+  <td className={styles.cell} data-column={index} {...rest} />
+);
+
+const Row: FC<IndexableEntity> = ({ children, index }) => (
+  <tr className={index === 1 ? styles.headerRow : styles.row} data-row={index}>
+    {children}
+  </tr>
+);
+
+interface TableBodyProps {
+  rowCount: number;
+  columnCount: number;
+}
+
+const TableBody: FC<TableBodyProps> = ({ rowCount, columnCount }) => {
+  const cells: ReactElement[] = [];
+  const rows: ReactElement[] = [];
+  for (let i = 1; i <= columnCount; i++) {
+    cells.push(<Cell key={i} index={i} />);
+  }
+
+  for (let i = 1; i <= rowCount; i++) {
+    rows.push(
+      <Row key={i} index={i}>
+        {cells}
+      </Row>
+    );
+  }
+  return <tbody>{rows}</tbody>;
+};
+
+function getPosition(node: HTMLElement) {
+  const columnIndex = parseInt(node?.dataset?.column || '0', 10);
+  const parentRow = node.parentNode as HTMLTableRowElement;
+  const rowIndex = parseInt(parentRow?.dataset?.row || '0', 10);
+
+  return { columnIndex, rowIndex };
+}
+
+interface InsertTableProps {
+  minRows?: number;
+  minColumns?: number;
+  maxColumns?: number;
+  initialRowCount?: number;
+  initialColumnCount?: number;
+}
+
+export const InsertTable: FC<InsertTableProps> = ({
+  minRows = 2,
+  minColumns = 2,
+  maxColumns = 10,
+  initialRowCount = 4,
+  initialColumnCount = 4
+}) => {
+  const [editor] = useLexicalComposerContext();
+  const tableRef = useRef<HTMLTableElement>(null);
+  const boundaryTouchedRef = useRef(false);
+  const [columnCount, setColumnCount] = useState(initialColumnCount);
+  const [rowCount, setRowCount] = useState(initialRowCount);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const togglePopper = () => {
+    reset();
+    setIsOpen(prevState => !prevState);
+  };
+
+  const { context, floating, reference, strategy, x, y } = useFloatingUI({
+    placement: 'bottom',
+    strategy: 'absolute',
+    open: isOpen,
+    onOpenChange: togglePopper
+  });
+
+  const { getFloatingProps } = useInteractions([
+    useDismiss(context, {
+      ancestorScroll: true
+    })
+  ]);
+
+  const handleCellMouseOver: MouseEventHandler<HTMLDivElement> = event => {
+    const target = event.nativeEvent.target as HTMLElement;
+    if (!tableRef.current?.contains(target) || !boundaryTouchedRef.current) {
+      return;
+    }
+
+    const { columnIndex, rowIndex } = getPosition(target);
+
+    if (columnIndex < columnCount && columnIndex >= minColumns) {
+      setColumnCount(columnIndex);
+    }
+    if (rowIndex < rowCount && rowIndex >= minRows) {
+      setRowCount(rowIndex);
+    }
+  };
+
+  function reset() {
+    setColumnCount(initialColumnCount);
+    setRowCount(initialRowCount);
+    boundaryTouchedRef.current = false;
+  }
+
+  const addColumn = () => {
+    boundaryTouchedRef.current = true;
+    if (columnCount + 1 <= maxColumns) {
+      setColumnCount(prevState => prevState + 1);
+    }
+  };
+
+  const addRow = () => {
+    boundaryTouchedRef.current = true;
+    setRowCount(prevState => prevState + 1);
+  };
+
+  const handleSelect = () => {
+    editor.dispatchCommand(INSERT_TABLE_COMMAND, {
+      columns: columnCount.toString(),
+      rows: rowCount.toString()
+    });
+    reset();
+    setIsOpen(false);
+  };
+
+  const cellSize = 25;
+  const tableHeight = rowCount * cellSize;
+  const tableWidth = columnCount * cellSize;
+
+  return (
+    <>
+      <TextFormatToolbarButton ref={reference} onClick={togglePopper} active={isOpen}>
+        <Icon name="grid" />
+        <div className={styles.spacer} />
+        <Icon name="chevronDown" />
+      </TextFormatToolbarButton>
+      <Popper
+        className={styles.popper}
+        ref={floating}
+        open={isOpen}
+        style={{ top: y ?? '', left: x ?? '', position: strategy }}
+        {...getFloatingProps({})}
+      >
+        <div
+          className={styles.tableContainer}
+          onMouseOver={handleCellMouseOver}
+          onClick={handleSelect}
+        >
+          <table
+            className={styles.table}
+            style={{ width: tableWidth, height: tableHeight }}
+            ref={tableRef}
+          >
+            <TableBody rowCount={rowCount} columnCount={columnCount} />
+          </table>
+          <div className={styles.dimensions}>{`${columnCount} x ${rowCount}`}</div>
+          <div
+            className={styles.addColumnArea}
+            style={{
+              left: tableWidth,
+              height: tableHeight + cellSize
+            }}
+            onMouseOver={addColumn}
+          />
+          <div
+            className={styles.addRowArea}
+            style={{
+              top: tableHeight,
+              width: tableWidth + cellSize
+            }}
+            onMouseOver={addRow}
+          />
+        </div>
+      </Popper>
+    </>
+  );
+};

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

@@ -0,0 +1,10 @@
+import { style } from '@vanilla-extract/css';
+import { primaryColor } from '@jpmorganchase/mosaic-theme';
+
+export default {
+  active: primaryColor({ variant: 'regular' }),
+  root: style({
+    width: '28px',
+    height: '28px'
+  })
+};

package/src/components/Toolbar/TextFormatToolbarButton.tsx

@@ -0,0 +1,29 @@
+import React, { forwardRef, Ref } from 'react';
+import classnames from 'classnames';
+import { ToolbarButton, ToolbarButtonProps } from '@salt-ds/lab';
+
+import styles from './TextFormatToolbarButton.css';
+
+interface TextFormatToolbarButtonProps extends ToolbarButtonProps {
+  active: boolean;
+}
+
+export const TextFormatToolbarButton = forwardRef(function TextFormatToolbarButton(
+  { active, className, onClick, children, ...rest }: TextFormatToolbarButtonProps,
+  ref: Ref<HTMLButtonElement>
+) {
+  return (
+    <ToolbarButton
+      ref={ref}
+      onClick={onClick}
+      // TODO remove once Salt ToolbarButton supports className overrides
+      style={{ width: 28, height: 28 }}
+      className={classnames(className, styles.root, {
+        [styles.active]: active
+      })}
+      {...rest}
+    >
+      {children}
+    </ToolbarButton>
+  );
+});

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

@@ -0,0 +1,27 @@
+import { style } from '@vanilla-extract/css';
+import { vars, code } from '@jpmorganchase/mosaic-theme';
+
+export default {
+  // Salt wraps all Tooltray items in a Formfields which adds default padding
+  // Tooltray needs refactoring so the user can compose Formfields themselves.
+  root: style({
+    margin: '-8px 0px 0px 0px'
+  }),
+  icon: style({
+    width: '14px',
+    fontSize: '12px'
+  }),
+  bold: style({ fontWeight: vars.fontWeight.bold }),
+  italic: style({ fontStyle: 'italic' }),
+  code: style([
+    code({ variant: 'regular' }),
+    style({
+      width: '22px',
+      height: '18px',
+      backgroundColor: 'inherit!important',
+      display: 'inline-flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    })
+  ])
+};

package/src/components/Toolbar/TextFormatTooltray.tsx

@@ -0,0 +1,118 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import classnames from 'classnames';
+import {
+  FORMAT_TEXT_COMMAND,
+  SELECTION_CHANGE_COMMAND,
+  COMMAND_PRIORITY_CRITICAL,
+  $getSelection,
+  $isRangeSelection,
+  TextFormatType
+} from 'lexical';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $isListNode, ListNode } from '@lexical/list';
+import { $getNearestNodeOfType } from '@lexical/utils';
+import { $isHeadingNode } from '@lexical/rich-text';
+import { $isCodeNode } from '@lexical/code';
+import { Icon } from '@jpmorganchase/mosaic-components';
+
+import { Tooltray } from '@salt-ds/lab';
+import { TextFormatToolbarButton } from './TextFormatToolbarButton';
+import styles from './TextFormatTooltray.css';
+import { InsertBlockDropdown } from './InsertBlockDropdown';
+
+export function TextFormatTooltray({ floating = false }) {
+  const [editor] = useLexicalComposerContext();
+  const [activeEditor, setActiveEditor] = useState(editor);
+  const [isBold, setIsBold] = useState(false);
+  const [isItalic, setIsItalic] = useState(false);
+  const [isCode, setIsCode] = useState(false);
+  const [blockType, setBlockType] = useState<string>('paragraph');
+
+  const handleFormat = (format: TextFormatType) => {
+    activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
+  };
+  const updateToolbar = useCallback(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      setIsBold(selection.hasFormat('bold'));
+      setIsItalic(selection.hasFormat('italic'));
+      setIsCode(selection.hasFormat('code'));
+
+      const anchorNode = selection.anchor.getNode();
+      const element =
+        anchorNode.getKey() === 'root' ? anchorNode : anchorNode.getTopLevelElementOrThrow();
+      const elementKey = element.getKey();
+      const elementDOM = activeEditor.getElementByKey(elementKey);
+
+      if (elementDOM !== null) {
+        if ($isListNode(element)) {
+          const parentList = $getNearestNodeOfType<ListNode>(anchorNode, ListNode);
+          const type = parentList ? parentList.getListType() : element.getListType();
+          setBlockType(type);
+        } else {
+          const type = $isHeadingNode(element) ? element.getTag() : element.getType();
+          if (type) {
+            setBlockType(type);
+          }
+          if ($isCodeNode(element)) {
+            setIsCode(true);
+          }
+        }
+      }
+    }
+  }, [activeEditor]);
+
+  useEffect(
+    () =>
+      activeEditor.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          updateToolbar();
+        });
+      }),
+
+    [activeEditor, updateToolbar]
+  );
+
+  useEffect(
+    () =>
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        (_payload, newEditor) => {
+          updateToolbar();
+          setActiveEditor(newEditor);
+          return false;
+        },
+        COMMAND_PRIORITY_CRITICAL
+      ),
+    [editor, updateToolbar]
+  );
+
+  return (
+    <div className={styles.root}>
+      {!floating ? <span /> : null}
+      <Tooltray data-collapsible="instant">
+        {!floating && <InsertBlockDropdown editor={activeEditor} type={blockType} />}
+        <TextFormatToolbarButton active={isBold} onClick={() => handleFormat('bold')} label="Bold">
+          <span className={classnames(styles.icon, styles.bold)}>B</span>
+        </TextFormatToolbarButton>
+        <TextFormatToolbarButton
+          active={isItalic}
+          onClick={() => handleFormat('italic')}
+          label="Italic"
+        >
+          <span className={classnames(styles.icon, styles.italic)}>I</span>
+        </TextFormatToolbarButton>
+        <TextFormatToolbarButton
+          active={isCode}
+          onClick={() => handleFormat('code')}
+          label="Inline Code"
+        >
+          <span className={classnames(styles.code)}>
+            <Icon name="chevronLeft" />
+            <Icon name="chevronRight" />
+          </span>
+        </TextFormatToolbarButton>
+      </Tooltray>
+    </div>
+  );
+}

package/src/components/Toolbar/Toolbar.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Toolbar as SaltToolbar, ToolbarButton, Tooltray } from '@salt-ds/lab';
+import { Icon } from '@jpmorganchase/mosaic-components';
+
+import { useEditHistory } from '../../hooks/useEditHistory';
+import { usePageState } from '../../store';
+import { SaveButton } from '../SaveButton';
+import { TextFormatTooltray } from './TextFormatTooltray';
+import { InsertTable } from './InsertTable';
+import { InsertImage } from './InsertImage';
+import { InsertLinkButton } from './InsertLink';
+import { InsertHorizontalRule } from './InsertHorizontalRule';
+
+const Toolbar = () => {
+  const { canRedo, canUndo, redoEdit, undoEdit } = useEditHistory();
+  const { setPageState } = usePageState();
+
+  return (
+    <SaltToolbar aria-label="page editing toolbar" style={{ minWidth: '100px' }}>
+      <Tooltray aria-label="history tooltray">
+        <ToolbarButton label="Undo" disabled={!canUndo} onClick={undoEdit}>
+          <Icon name="undo" />
+        </ToolbarButton>
+        <ToolbarButton label="Redo" disabled={!canRedo} onClick={redoEdit}>
+          <Icon name="redo" />
+        </ToolbarButton>
+      </Tooltray>
+      <TextFormatTooltray />
+      <Tooltray aria-label="text format tooltray">
+        <InsertLinkButton />
+        <InsertTable />
+        <InsertImage />
+        <InsertHorizontalRule />
+      </Tooltray>
+      <Tooltray aria-label="stop editing tooltray" alignEnd>
+        <ToolbarButton label="Cancel Editing" onClick={() => setPageState('VIEW')}>
+          <Icon name="delete" />
+        </ToolbarButton>
+      </Tooltray>
+      <Tooltray aria-label="copy tooltray" data-pad-start>
+        <SaveButton />
+      </Tooltray>
+    </SaltToolbar>
+  );
+};
+
+export default Toolbar;

package/src/components/__tests__/EditorControls.test.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { EditorControls } from '../EditorControls';
+import store from '../../store';
+
+jest.mock('../../store', () => ({
+  ...jest.requireActual('../../store'),
+  __esModule: true,
+  default: jest.fn()
+}));
+
+const startEditingSpy = jest.fn();
+const stopEditingSpy = jest.fn();
+
+describe('GIVEN an EditorControls component', () => {
+  describe('WHEN **NOT** logged in', () => {
+    beforeAll(() => {
+      jest.mocked(store).mockReturnValue({
+        startEditing: startEditingSpy,
+        isEditing: false
+      });
+    });
+    test('THEN the edit button is disabled', () => {
+      render(<EditorControls isLoggedIn={false} />);
+      const tooltips = screen.queryAllByRole('tooltip');
+      expect(tooltips.length).toBe(0);
+    });
+  });
+
+  describe('WHEN logged in', () => {
+    test('THEN the edit button is enabled', () => {
+      render(<EditorControls isLoggedIn />);
+      const button = screen.getByRole('button');
+      expect(button).not.toBeDisabled();
+    });
+
+    describe('AND WHEN **NOT** editing and the edit button is clicked', () => {
+      beforeAll(() => {
+        jest.mocked(store).mockReturnValue({
+          startEditing: startEditingSpy,
+          pageState: 'VIEW'
+        });
+      });
+      test('THEN editing is started', async () => {
+        render(<EditorControls isLoggedIn />);
+        const button = screen.getByLabelText('start editing');
+        await userEvent.click(button);
+        expect(startEditingSpy).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    describe('AND WHEN editing and the edit button is clicked', () => {
+      beforeAll(() => {
+        jest.mocked(store).mockReturnValue({
+          stopEditing: stopEditingSpy,
+          pageState: 'EDIT'
+        });
+      });
+      test('THEN editing is stopped', async () => {
+        render(<EditorControls isLoggedIn />);
+        const button = screen.getByLabelText('cancel editing');
+        await userEvent.click(button);
+        expect(stopEditingSpy).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
+});

package/src/components/__tests__/StatusBanner.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+
+import * as store from '../../store';
+import StatusBanner from '../StatusBanner';
+
+jest.mock('../../store');
+
+describe('GIVEN a StatusBanner ', () => {
+  const { usePageState } = store;
+
+  test('THEN it does not report on non-error states', () => {
+    usePageState.mockReturnValue({
+      pageState: 'WARNING',
+      errorMessage: 'some warning'
+    });
+    // arrange
+    render(<StatusBanner />);
+    // assert
+    expect(screen.queryByText('some warning')).not.toBeInTheDocument();
+  });
+
+  test('THEN it does report on error states', () => {
+    usePageState.mockReturnValue({
+      pageState: 'ERROR',
+      errorMessage: 'some error'
+    });
+    // arrange
+    render(<StatusBanner />);
+    // assert
+    expect(screen.getByText('some error')).toBeDefined();
+  });
+});

package/src/hooks/useEditHistory.ts

@@ -0,0 +1,49 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import {
+  CAN_REDO_COMMAND,
+  CAN_UNDO_COMMAND,
+  REDO_COMMAND,
+  UNDO_COMMAND,
+  COMMAND_PRIORITY_CRITICAL
+} from 'lexical';
+import { mergeRegister } from '@lexical/utils';
+
+export function useEditHistory() {
+  const [editor] = useLexicalComposerContext();
+  const [canUndo, setCanUndo] = useState(false);
+  const [canRedo, setCanRedo] = useState(false);
+
+  useEffect(
+    () =>
+      mergeRegister(
+        editor.registerCommand<boolean>(
+          CAN_UNDO_COMMAND,
+          payload => {
+            setCanUndo(payload);
+            return false;
+          },
+          COMMAND_PRIORITY_CRITICAL
+        ),
+        editor.registerCommand<boolean>(
+          CAN_REDO_COMMAND,
+          payload => {
+            setCanRedo(payload);
+            return false;
+          },
+          COMMAND_PRIORITY_CRITICAL
+        )
+      ),
+    [editor]
+  );
+
+  const undoEdit = useCallback(() => editor.dispatchCommand(UNDO_COMMAND, undefined), [editor]);
+  const redoEdit = useCallback(() => editor.dispatchCommand(REDO_COMMAND, undefined), [editor]);
+
+  return {
+    canRedo,
+    canUndo,
+    undoEdit,
+    redoEdit
+  };
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+import Editor from './components/Editor';
+import { EditorControls } from './components/EditorControls';
+import { default as useContentEditor, usePageState } from './store';
+
+export { Editor, EditorControls, usePageState, useContentEditor };

package/src/nodes/index.ts

@@ -0,0 +1,23 @@
+import { HeadingNode, QuoteNode } from '@lexical/rich-text';
+import { ListNode, ListItemNode } from '@lexical/list';
+import { AutoLinkNode, LinkNode } from '@lexical/link';
+import { TableCellNode, TableNode, TableRowNode } from '@lexical/table';
+import { CodeHighlightNode, CodeNode } from '@lexical/code';
+import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
+
+const nodes = [
+  AutoLinkNode,
+  CodeHighlightNode,
+  CodeNode,
+  HeadingNode,
+  HorizontalRuleNode,
+  LinkNode,
+  ListItemNode,
+  ListNode,
+  QuoteNode,
+  TableCellNode,
+  TableNode,
+  TableRowNode
+];
+
+export { nodes };