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

package/src/store/__tests__/index.test.ts

@@ -0,0 +1,171 @@
+import { act, renderHook } from '@testing-library/react-hooks';
+
+import useStore, {
+  ContentEditorState,
+  useEditorUser,
+  useIsInsertingLink,
+  usePageState,
+  usePreviewContent,
+  useSetContent
+} from '../index';
+
+describe('GIVEN the Content Editor store', () => {
+  describe('WHEN initialized with the default state', () => {
+    let currentState: ContentEditorState;
+    beforeAll(() => {
+      const { result } = renderHook(() => useStore());
+      currentState = result.current;
+    });
+    test('THEN the PageState is VIEW', () => {
+      expect(currentState.pageState).toEqual('VIEW');
+    });
+    test('THEN the user is undefined', () => {
+      expect(currentState.user).toEqual(undefined);
+    });
+    test('THEN the previewContent is undefined', () => {
+      expect(currentState.previewContent).toEqual(undefined);
+    });
+    test('THEN the error message is undefined', () => {
+      expect(currentState.errorMessage).toEqual(undefined);
+    });
+    test('THEN isInsertlingLink is false', () => {
+      expect(currentState.isInsertingLink).toEqual(false);
+    });
+    test('THEN there is a setter for pageState', () => {
+      expect(currentState.setPageState).toBeDefined();
+    });
+    test('THEN there is a setter for errorMessage', () => {
+      expect(currentState.setErrorMessage).toBeDefined();
+    });
+    test('THEN there is a setter for user', () => {
+      expect(currentState.setUser).toBeDefined();
+    });
+    test('THEN there is a setter for previewContent', () => {
+      expect(currentState.setPreviewContent).toBeDefined();
+    });
+    test('THEN you can start editing', () => {
+      expect(currentState.startEditing).toBeDefined();
+    });
+    test('THEN you can stop editing', () => {
+      expect(currentState.stopEditing).toBeDefined();
+    });
+    test('THEN there is a setter for isInsertingLink', () => {
+      expect(currentState.setIsInsertingLink).toBeDefined();
+    });
+  });
+
+  describe('AND WHEN setPageState is called', () => {
+    test('THEN the pageState is updated', async () => {
+      const { result } = renderHook(() => useStore());
+      act(() => result.current.setPageState('EDIT'));
+      expect(result.current.pageState).toEqual('EDIT');
+    });
+  });
+
+  describe('AND WHEN startEditing is called ', () => {
+    test('THEN editing is started', async () => {
+      const { result } = renderHook(() => useStore());
+      act(() => result.current.startEditing());
+      expect(result.current.pageState).toEqual('EDIT');
+    });
+  });
+
+  describe('AND WHEN stopEditing is called', () => {
+    test('THEN editing is stopped', () => {
+      const { result } = renderHook(() => useStore());
+      act(() => result.current.stopEditing());
+      expect(result.current.pageState).toEqual('VIEW');
+      expect(result.current.previewContent).toBeUndefined();
+      expect(result.current.errorMessage).toBeUndefined();
+    });
+  });
+
+  describe('AND WHEN setPreviewContent is called', () => {
+    test('THEN the previewContent is updated', async () => {
+      const { result } = renderHook(() => useStore());
+      act(() => result.current.setPreviewContent('some markdown content'));
+      expect(result.current.previewContent).toEqual('some markdown content');
+    });
+  });
+
+  describe('AND WHEN setErrorMessage is called', () => {
+    test('THEN the errorMessage is updated', async () => {
+      const { result } = renderHook(() => useStore());
+      act(() => result.current.setErrorMessage('an error'));
+      expect(result.current.errorMessage).toEqual('an error');
+    });
+  });
+
+  describe('AND WHEN setUser is called', () => {
+    test('THEN the user is updated', async () => {
+      const user = { sid: 'S12345', displayName: 'name', email: 'email@domain.com' };
+      const { result } = renderHook(() => useStore());
+      act(() => result.current.setUser(user));
+      expect(result.current.user).toEqual(user);
+    });
+  });
+
+  describe('GIVEN the usePreviewContent hook', () => {
+    test('WHEN called provides the previewContent', async () => {
+      const { setPreviewContent } = useStore.getState();
+      const { result } = renderHook(() => usePreviewContent());
+
+      expect(result.current).toBeUndefined();
+      await act(() => setPreviewContent('some content'));
+      expect(result.current).toEqual('some content');
+    });
+  });
+
+  describe('GIVEN the useSetContent hook', () => {
+    test('WHEN called updates the previewContent', () => {
+      const { result } = renderHook(() => useSetContent());
+      expect(useStore.getState().previewContent).toBeUndefined();
+
+      act(() => result.current('some content'));
+      expect(useStore.getState().previewContent).toEqual('some content');
+    });
+  });
+
+  describe('GIVEN the usePageState hook', () => {
+    test('WHEN called provides the page state and an updater', () => {
+      const { result } = renderHook(() => usePageState());
+      expect(result.current.pageState).toEqual('VIEW');
+      expect(result.current.setPageState).toBeDefined();
+    });
+    test('WHEN called provides the error message and an updater', () => {
+      const { result } = renderHook(() => usePageState());
+      expect(result.current.errorMessage).toBeUndefined();
+      act(() => result.current.setErrorMessage('an error'));
+      expect(result.current.errorMessage).toEqual('an error');
+    });
+  });
+
+  describe('GIVEN the useEditorUser hook', () => {
+    test('WHEN called provides the user and an updater', () => {
+      const { result } = renderHook(() => useEditorUser());
+      expect(result.current.user).toEqual(undefined);
+      expect(result.current.setUser).toBeDefined();
+    });
+    test('AND when updater is called, user is updated', () => {
+      const user = { sid: 'S12345', displayName: 'name', email: 'email@domain.com' };
+      const { result } = renderHook(() => useEditorUser());
+      expect(result.current.user).toEqual(undefined);
+      act(() => result.current.setUser(user));
+      expect(result.current.user).toEqual(user);
+    });
+  });
+
+  describe('GIVEN the useIsInsertingLink hook', () => {
+    test('WHEN called provides the state and an updater', () => {
+      const { result } = renderHook(() => useIsInsertingLink());
+      expect(result.current.isInsertingLink).toEqual(false);
+      expect(result.current.setIsInsertingLink).toBeDefined();
+    });
+    test('AND when updater is called, isInsertingLink is updated', () => {
+      const { result } = renderHook(() => useIsInsertingLink());
+      expect(result.current.isInsertingLink).toEqual(false);
+      act(() => result.current.setIsInsertingLink(true));
+      expect(result.current.isInsertingLink).toEqual(true);
+    });
+  });
+});

package/src/store/index.ts

@@ -0,0 +1,84 @@
+import { useCallback } from 'react';
+import create from 'zustand';
+
+type PageState = 'VIEW' | 'EDIT' | 'REVIEW' | 'SAVING' | 'ERROR';
+type UserType = { sid: string; displayName: string; email: string };
+
+export interface ContentEditorState {
+  pageState: PageState;
+  user?: UserType;
+  previewContent?: any;
+  errorMessage?: string;
+  isInsertingLink: boolean;
+  setPageState: (state: PageState) => void;
+  startEditing: () => void;
+  stopEditing: () => void;
+  setPreviewContent: (content: any) => void;
+  setErrorMessage: (errorMessage: string) => void;
+  setUser: (user: UserType) => void;
+  setIsInsertingLink: (isInsertingLink: boolean) => void;
+}
+
+const initialState: Pick<
+  ContentEditorState,
+  'pageState' | 'user' | 'previewContent' | 'errorMessage' | 'isInsertingLink'
+> = {
+  pageState: 'VIEW',
+  user: undefined,
+  previewContent: undefined,
+  errorMessage: undefined,
+  isInsertingLink: false
+};
+
+const useStore = create<ContentEditorState>(set => ({
+  ...initialState,
+  setPageState: state => set({ pageState: state }),
+  startEditing: () => set({ ...initialState, pageState: 'EDIT' }),
+  stopEditing: () => set({ pageState: initialState.pageState }),
+  setPreviewContent: (content: string) =>
+    set({ pageState: 'EDIT', previewContent: content, errorMessage: undefined }),
+  setErrorMessage: (errorMessage: string) => set({ errorMessage, pageState: 'ERROR' }),
+  setUser: (user: any) => set({ user }),
+  setIsInsertingLink: (isInsertingLink: boolean) => set({ isInsertingLink })
+}));
+
+export const usePreviewContent = () => useStore(useCallback(state => state.previewContent, []));
+
+export const useSetContent = () => useStore(useCallback(state => state.setPreviewContent, []));
+
+export const usePageState = () =>
+  useStore(
+    useCallback(
+      state => ({
+        pageState: state.pageState,
+        setPageState: state.setPageState,
+        errorMessage: state.errorMessage,
+        setErrorMessage: state.setErrorMessage
+      }),
+      []
+    )
+  );
+
+export const useEditorUser = () =>
+  useStore(
+    useCallback(
+      state => ({
+        user: state.user,
+        setUser: state.setUser
+      }),
+      []
+    )
+  );
+
+export const useIsInsertingLink = () =>
+  useStore(
+    useCallback(
+      state => ({
+        isInsertingLink: state.isInsertingLink,
+        setIsInsertingLink: state.setIsInsertingLink
+      }),
+      []
+    )
+  );
+
+export default useStore;

package/src/theme/index.css.ts

@@ -0,0 +1,39 @@
+import { style } from '@vanilla-extract/css';
+import {
+  vars,
+  link,
+  blockquote,
+  table,
+  td,
+  th,
+  tr,
+  neutralBorder,
+  paragraph
+} from '@jpmorganchase/mosaic-theme';
+
+export default {
+  bold: style({ fontWeight: vars.fontWeight.bold }),
+  italic: style({ fontStyle: 'italic' }),
+  underline: style({ textDecoration: 'underline' }),
+  strikeThrough: style({ textDecoration: 'line-through' }),
+  underlineStrikeThrough: style({ textDecoration: 'underline line-through' }),
+  link: style([link({ variant: 'document' })]),
+  paragraph: style([paragraph({ variant: 'paragraph2' })]),
+  quote: style([blockquote({ variant: 'regular', context: 'component' })]),
+  table: style([table()]),
+  tableCell: style([
+    td(),
+    neutralBorder({ variant: 'low', borderWidth: 'thin' }),
+    style({ fontWeight: 'inherit' })
+  ]),
+  tableHeader: style([th()]),
+  tableRow: style([
+    tr(),
+    neutralBorder({ variant: 'low', borderWidth: 'thin' }),
+    style({
+      selectors: {
+        '&:first-of-type': { fontWeight: vars.fontWeight.bold }
+      }
+    })
+  ])
+};

package/src/theme/index.ts

@@ -0,0 +1,22 @@
+import type { EditorThemeClasses } from 'lexical';
+
+import styles from './index.css';
+
+const theme: EditorThemeClasses = {
+  paragraph: styles.paragraph,
+  quote: styles.quote,
+  link: styles.link,
+  table: styles.table,
+  tableCell: styles.tableCell,
+  tableCellHeader: styles.tableHeader,
+  tableRow: styles.tableRow,
+  text: {
+    bold: styles.bold,
+    italic: styles.italic,
+    strikethrough: styles.strikeThrough,
+    underline: styles.underline,
+    underlineStrikethrough: styles.underlineStrikeThrough
+  }
+};
+
+export default theme;

package/src/transformers/horizontalRule.ts

@@ -0,0 +1,25 @@
+import { ElementTransformer } from '@lexical/markdown';
+import {
+  $createHorizontalRuleNode,
+  $isHorizontalRuleNode,
+  HorizontalRuleNode
+} from '@lexical/react/LexicalHorizontalRuleNode';
+import { LexicalNode } from 'lexical';
+
+export const HORIZONTAL_RULE: ElementTransformer = {
+  dependencies: [HorizontalRuleNode],
+  export: (node: LexicalNode) => ($isHorizontalRuleNode(node) ? '---' : null),
+  regExp: /^(---|\*\*\*|___)\s?$/,
+  replace: parentNode => {
+    const line = $createHorizontalRuleNode();
+
+    if (parentNode.getNextSibling() != null) {
+      parentNode.replace(line);
+    } else {
+      parentNode.insertBefore(line);
+    }
+
+    line.selectNext();
+  },
+  type: 'element'
+};

package/src/transformers/index.ts

@@ -0,0 +1,6 @@
+import { TRANSFORMERS } from '@lexical/markdown';
+
+import { HORIZONTAL_RULE } from './horizontalRule';
+import { TABLE_RULE } from './tableRule';
+
+export default [HORIZONTAL_RULE, TABLE_RULE, ...TRANSFORMERS];

package/src/transformers/link.ts

@@ -0,0 +1,3 @@
+import { LINK as LINK_TRANSFORMER } from '@lexical/markdown';
+
+export default LINK_TRANSFORMER;

package/src/transformers/tableRule.ts

@@ -0,0 +1,193 @@
+import { ElementTransformer } from '@lexical/markdown';
+import type { ElementNode, LexicalNode } from 'lexical';
+import {
+  $createTableCellNode,
+  $createTableNode,
+  $createTableRowNode,
+  $isTableNode,
+  $isTableRowNode,
+  TableCellHeaderStates,
+  TableCellNode,
+  TableNode,
+  TableRowNode
+} from '@lexical/table';
+import {
+  $createParagraphNode,
+  $createTextNode,
+  $isElementNode,
+  $isParagraphNode,
+  $isTextNode
+} from 'lexical';
+
+import LINK_TRANSFORMER from './link';
+
+const TABLE_ROW_REG_EXP = /^(?:\|)(.+)(?:\|)\s?$/;
+const TABLE_HEADER_REG_EXP = /(---)/;
+
+export const TABLE_RULE: ElementTransformer = {
+  dependencies: [TableNode, TableRowNode, TableCellNode],
+  export: (node: LexicalNode, exportChildren: (elementNode: ElementNode) => string) => {
+    if (!$isTableNode(node)) {
+      return null;
+    }
+
+    const output: string[] = [];
+    let columnCount: number | null = null;
+
+    // eslint-disable-next-line no-restricted-syntax
+    for (const row of node.getChildren()) {
+      const rowOutput: string[] = [];
+
+      if ($isTableRowNode(row)) {
+        // eslint-disable-next-line no-restricted-syntax
+        for (const cell of row.getChildren()) {
+          if ($isElementNode(cell)) {
+            rowOutput.push(exportChildren(cell));
+          }
+        }
+        if (columnCount === null) {
+          columnCount = rowOutput.length;
+        }
+      }
+      output.push(`| ${rowOutput.join(' | ')} |`);
+    }
+    addHeaderDividerToOutput(output, columnCount);
+    return output.join('\n');
+  },
+  regExp: TABLE_ROW_REG_EXP,
+  replace: (parentNode, _1, match) => {
+    const matchCells = mapToTableCells(match[0]);
+
+    if (matchCells == null) {
+      return;
+    }
+
+    const rows = handleHeaderDashes(matchCells);
+    let sibling = parentNode.getPreviousSibling();
+    let maxCells = matchCells.length;
+
+    while (sibling) {
+      if (!$isParagraphNode(sibling)) {
+        break;
+      }
+
+      if (sibling.getChildrenSize() !== 1) {
+        break;
+      }
+
+      const firstChild = sibling.getFirstChild();
+
+      if (!$isTextNode(firstChild)) {
+        break;
+      }
+
+      const cells = mapToTableCells(firstChild.getTextContent());
+
+      if (cells == null) {
+        break;
+      }
+
+      maxCells = Math.max(maxCells, cells.length);
+      rows.unshift(cells);
+      const previousSibling = sibling.getPreviousSibling();
+      sibling.remove();
+      sibling = previousSibling;
+    }
+
+    const table = createTableNode(rows, maxCells);
+
+    const previousSibling = parentNode.getPreviousSibling();
+    if ($isTableNode(previousSibling) && getTableColumnsSize(previousSibling) === maxCells) {
+      previousSibling.append(...table.getChildren());
+      parentNode.remove();
+    } else {
+      parentNode.replace(table);
+    }
+
+    table.selectEnd();
+  },
+  type: 'element'
+};
+
+function getTableColumnsSize(table: TableNode) {
+  const row = table.getFirstChild();
+  return $isTableRowNode(row) ? row.getChildrenSize() : 0;
+}
+
+const createTableCell = (textContent: string | null | undefined): TableCellNode => {
+  const cell = $createTableCellNode(TableCellHeaderStates.NO_STATUS);
+  const paragraph = $createParagraphNode();
+
+  if (textContent != null) {
+    const textNode = $createTextNode(textContent.trim());
+    paragraph.append(textNode);
+    /**
+     * Table cells are treated as text only.
+     * However, it is very common to see links inside tables
+     * so we check if the content is a markdown link and render a link accordingly
+     */
+    const linkMatch = textContent.trim().match(LINK_TRANSFORMER.regExp);
+    if (linkMatch) {
+      LINK_TRANSFORMER.replace(textNode, linkMatch);
+    }
+  }
+
+  cell.append(paragraph);
+  return cell;
+};
+
+const mapToTableCells = (textContent: string): Array<TableCellNode> | null => {
+  const match = textContent.match(TABLE_ROW_REG_EXP);
+
+  if (!match || !match[1]) {
+    return null;
+  }
+
+  return match[1].split('|').map(text => createTableCell(text));
+};
+
+const addHeaderDividerToOutput = (output: string[], columnCount?: number | null) => {
+  let divider = '';
+
+  if (!columnCount) {
+    return output;
+  }
+  for (let i = 0; i < columnCount + 1; i++) {
+    divider = divider.concat('|');
+
+    if (i < columnCount) {
+      divider = divider.concat('----');
+    }
+  }
+
+  const headerMatch = output[1]?.match(TABLE_HEADER_REG_EXP);
+  if (headerMatch) {
+    // output already has the header dashes
+    return output;
+  }
+  return output.splice(1, 0, divider);
+};
+
+/**
+ * if a table has the markdown dashes then
+ * we don't want to render them as part of the table
+ */
+const handleHeaderDashes = (matchCells: TableCellNode[]) => {
+  const test = matchCells[0].getFirstChild()?.getTextContent();
+  const headerMatch = test?.match(TABLE_HEADER_REG_EXP);
+  return headerMatch === null ? [matchCells] : [];
+};
+
+const createTableNode = (rows: TableCellNode[][], maxCells: number) => {
+  const table = $createTableNode();
+  // eslint-disable-next-line no-restricted-syntax
+  for (const cells of rows) {
+    const tableRow = $createTableRowNode();
+    table.append(tableRow);
+
+    for (let i = 0; i < maxCells; i++) {
+      tableRow.append(i < cells.length ? cells[i] : createTableCell(null));
+    }
+  }
+  return table;
+};

package/src/utils/getSelectedNode.ts

@@ -0,0 +1,16 @@
+import { $isAtNodeEnd } from '@lexical/selection';
+import { ElementNode, RangeSelection, TextNode } from 'lexical';
+
+export function getSelectedNode(selection: RangeSelection): TextNode | ElementNode {
+  const { anchor, focus } = selection;
+  const anchorNode = selection.anchor.getNode();
+  const focusNode = selection.focus.getNode();
+  if (anchorNode === focusNode) {
+    return anchorNode;
+  }
+  const isBackward = selection.isBackward();
+  if (isBackward) {
+    return $isAtNodeEnd(focus) ? anchorNode : focusNode;
+  }
+  return $isAtNodeEnd(anchor) ? focusNode : anchorNode;
+}

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.bundle.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist"
+  },
+  "include": ["src"]
+}