@crystallize/design-system 1.7.0 → 1.8.0

package/src/rich-text-editor/plugins/ComponentPickerPlugin/index.tsx

@@ -1,320 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { useCallback, useMemo, useState } from 'react';
-import * as React from 'react';
-import { $createParagraphNode, $getSelection, $isRangeSelection, FORMAT_ELEMENT_COMMAND, TextNode } from 'lexical';
-import * as ReactDOM from 'react-dom';
-import { $createCodeNode } from '@lexical/code';
-import { INSERT_CHECK_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND } from '@lexical/list';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { INSERT_HORIZONTAL_RULE_COMMAND } from '@lexical/react/LexicalHorizontalRuleNode';
-import {
-  LexicalTypeaheadMenuPlugin,
-  TypeaheadOption,
-  useBasicTypeaheadTriggerMatch,
-} from '@lexical/react/LexicalTypeaheadMenuPlugin';
-import { $createHeadingNode, $createQuoteNode } from '@lexical/rich-text';
-import { $setBlocksType } from '@lexical/selection';
-import { INSERT_TABLE_COMMAND } from '@lexical/table';
-
-// import { InsertNewTableDialog } from '../TablePlugin';
-
-class ComponentPickerOption extends TypeaheadOption {
-  // What shows up in the editor
-  title: string;
-  // Icon for display
-  icon?: JSX.Element;
-  // For extra searching.
-  keywords: Array<string>;
-  // TBD
-  keyboardShortcut?: string;
-  // What happens when you select this option?
-  onSelect: (queryString: string) => void;
-
-  constructor(
-    title: string,
-    options: {
-      icon?: JSX.Element;
-      keywords?: Array<string>;
-      keyboardShortcut?: string;
-      onSelect: (queryString: string) => void;
-    },
-  ) {
-    super(title);
-    this.title = title;
-    this.keywords = options.keywords || [];
-    this.icon = options.icon;
-    this.keyboardShortcut = options.keyboardShortcut;
-    this.onSelect = options.onSelect.bind(this);
-  }
-}
-
-function ComponentPickerMenuItem({
-  index,
-  isSelected,
-  onClick,
-  onMouseEnter,
-  option,
-}: {
-  index: number;
-  isSelected: boolean;
-  onClick: () => void;
-  onMouseEnter: () => void;
-  option: ComponentPickerOption;
-}) {
-  let className = 'item';
-  if (isSelected) {
-    className += ' selected';
-  }
-  return (
-    <li
-      key={option.key}
-      tabIndex={-1}
-      className={className}
-      ref={option.setRefElement}
-      role="option"
-      aria-selected={isSelected}
-      id={'typeahead-item-' + index}
-      onMouseEnter={onMouseEnter}
-      onClick={onClick}
-    >
-      {option.icon}
-      <span className="text">{option.title}</span>
-    </li>
-  );
-}
-
-export default function ComponentPickerMenuPlugin(): JSX.Element {
-  const [editor] = useLexicalComposerContext();
-  const [queryString, setQueryString] = useState<string | null>(null);
-
-  const checkForTriggerMatch = useBasicTypeaheadTriggerMatch('/', {
-    minLength: 0,
-  });
-
-  const getDynamicOptions = useCallback(() => {
-    const options: Array<ComponentPickerOption> = [];
-
-    if (queryString == null) {
-      return options;
-    }
-
-    const fullTableRegex = new RegExp(/^([1-9]|10)x([1-9]|10)$/);
-    const partialTableRegex = new RegExp(/^([1-9]|10)x?$/);
-
-    const fullTableMatch = fullTableRegex.exec(queryString);
-    const partialTableMatch = partialTableRegex.exec(queryString);
-
-    if (fullTableMatch) {
-      const [rows, columns] = fullTableMatch[0].split('x').map((n: string) => parseInt(n, 10));
-
-      options.push(
-        new ComponentPickerOption(`${rows}x${columns} Table`, {
-          icon: <i className="icon table" />,
-          keywords: ['table'],
-          onSelect: () =>
-            // @ts-ignore Correct types, but since they're dynamic TS doesn't like it.
-            editor.dispatchCommand(INSERT_TABLE_COMMAND, { columns, rows }),
-        }),
-      );
-    } else if (partialTableMatch) {
-      const rows = parseInt(partialTableMatch[0], 10);
-
-      options.push(
-        ...Array.from({ length: 5 }, (_, i) => i + 1).map(
-          columns =>
-            new ComponentPickerOption(`${rows}x${columns} Table`, {
-              icon: <i className="icon table" />,
-              keywords: ['table'],
-              onSelect: () =>
-                // @ts-ignore Correct types, but since they're dynamic TS doesn't like it.
-                editor.dispatchCommand(INSERT_TABLE_COMMAND, { columns, rows }),
-            }),
-        ),
-      );
-    }
-
-    return options;
-  }, [editor, queryString]);
-
-  const options = useMemo(() => {
-    const baseOptions = [
-      new ComponentPickerOption('Paragraph', {
-        icon: <i className="icon paragraph" />,
-        keywords: ['normal', 'paragraph', 'p', 'text'],
-        onSelect: () =>
-          editor.update(() => {
-            const selection = $getSelection();
-            if ($isRangeSelection(selection)) {
-              $setBlocksType(selection, () => $createParagraphNode());
-            }
-          }),
-      }),
-      ...Array.from({ length: 3 }, (_, i) => i + 1).map(
-        n =>
-          new ComponentPickerOption(`Heading ${n}`, {
-            icon: <i className={`icon h${n}`} />,
-            keywords: ['heading', 'header', `h${n}`],
-            onSelect: () =>
-              editor.update(() => {
-                const selection = $getSelection();
-                if ($isRangeSelection(selection)) {
-                  $setBlocksType(selection, () =>
-                    // @ts-ignore Correct types, but since they're dynamic TS doesn't like it.
-                    $createHeadingNode(`h${n}`),
-                  );
-                }
-              }),
-          }),
-      ),
-      // new ComponentPickerOption('Table', {
-      //   icon: <i className="icon table" />,
-      //   keywords: ['table', 'grid', 'spreadsheet', 'rows', 'columns'],
-      //   onSelect: () =>
-      //     showModal('Insert Table', onClose => <InsertTableDialog activeEditor={editor} onClose={onClose} />),
-      // }),
-      // new ComponentPickerOption('Table (Experimental)', {
-      //   icon: <i className="icon table" />,
-      //   keywords: ['table', 'grid', 'spreadsheet', 'rows', 'columns'],
-      //   onSelect: () =>
-      //     showModal('Insert Table', onClose => <InsertNewTableDialog activeEditor={editor} onClose={onClose} />),
-      // }),
-      new ComponentPickerOption('Numbered List', {
-        icon: <i className="icon number" />,
-        keywords: ['numbered list', 'ordered list', 'ol'],
-        onSelect: () => editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined),
-      }),
-      new ComponentPickerOption('Bulleted List', {
-        icon: <i className="icon bullet" />,
-        keywords: ['bulleted list', 'unordered list', 'ul'],
-        onSelect: () => editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined),
-      }),
-      new ComponentPickerOption('Check List', {
-        icon: <i className="icon check" />,
-        keywords: ['check list', 'todo list'],
-        onSelect: () => editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, undefined),
-      }),
-      new ComponentPickerOption('Quote', {
-        icon: <i className="icon quote" />,
-        keywords: ['block quote'],
-        onSelect: () =>
-          editor.update(() => {
-            const selection = $getSelection();
-            if ($isRangeSelection(selection)) {
-              $setBlocksType(selection, () => $createQuoteNode());
-            }
-          }),
-      }),
-      new ComponentPickerOption('Code', {
-        icon: <i className="icon code" />,
-        keywords: ['javascript', 'python', 'js', 'codeblock'],
-        onSelect: () =>
-          editor.update(() => {
-            const selection = $getSelection();
-
-            if ($isRangeSelection(selection)) {
-              if (selection.isCollapsed()) {
-                $setBlocksType(selection, () => $createCodeNode());
-              } else {
-                // Will this ever happen?
-                const textContent = selection.getTextContent();
-                const codeNode = $createCodeNode();
-                selection.insertNodes([codeNode]);
-                selection.insertRawText(textContent);
-              }
-            }
-          }),
-      }),
-      new ComponentPickerOption('Divider', {
-        icon: <i className="icon horizontal-rule" />,
-        keywords: ['horizontal rule', 'divider', 'hr'],
-        onSelect: () => editor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined),
-      }),
-
-      ...['left', 'center', 'right', 'justify'].map(
-        alignment =>
-          new ComponentPickerOption(`Align ${alignment}`, {
-            icon: <i className={`icon ${alignment}-align`} />,
-            keywords: ['align', 'justify', alignment],
-            onSelect: () =>
-              // @ts-ignore Correct types, but since they're dynamic TS doesn't like it.
-              editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, alignment),
-          }),
-      ),
-    ];
-
-    const dynamicOptions = getDynamicOptions();
-
-    return queryString
-      ? [
-          ...dynamicOptions,
-          ...baseOptions.filter(option => {
-            return new RegExp(queryString, 'gi').exec(option.title) || option.keywords != null
-              ? option.keywords.some(keyword => new RegExp(queryString, 'gi').exec(keyword))
-              : false;
-          }),
-        ]
-      : baseOptions;
-  }, [editor, getDynamicOptions, queryString]);
-
-  const onSelectOption = useCallback(
-    (
-      selectedOption: ComponentPickerOption,
-      nodeToRemove: TextNode | null,
-      closeMenu: () => void,
-      matchingString: string,
-    ) => {
-      editor.update(() => {
-        if (nodeToRemove) {
-          nodeToRemove.remove();
-        }
-        selectedOption.onSelect(matchingString);
-        closeMenu();
-      });
-    },
-    [editor],
-  );
-
-  return (
-    <>
-      <LexicalTypeaheadMenuPlugin<ComponentPickerOption>
-        onQueryChange={setQueryString}
-        onSelectOption={onSelectOption}
-        triggerFn={checkForTriggerMatch}
-        options={options}
-        menuRenderFn={(anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) =>
-          anchorElementRef.current && options.length
-            ? ReactDOM.createPortal(
-                <div className="typeahead-popover component-picker-menu">
-                  <ul>
-                    {options.map((option, i: number) => (
-                      <ComponentPickerMenuItem
-                        index={i}
-                        isSelected={selectedIndex === i}
-                        onClick={() => {
-                          setHighlightedIndex(i);
-                          selectOptionAndCleanUp(option);
-                        }}
-                        onMouseEnter={() => {
-                          setHighlightedIndex(i);
-                        }}
-                        key={option.key}
-                        option={option}
-                      />
-                    ))}
-                  </ul>
-                </div>,
-                anchorElementRef.current,
-              )
-            : null
-        }
-      />
-    </>
-  );
-}

package/src/rich-text-editor/plugins/DragDropPastePlugin/index.ts

@@ -1,40 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { DRAG_DROP_PASTE } from '@lexical/rich-text';
-import { isMimeType, mediaFileReader } from '@lexical/utils';
-import { COMMAND_PRIORITY_LOW } from 'lexical';
-import { useEffect } from 'react';
-
-const ACCEPTABLE_IMAGE_TYPES = ['image/', 'image/heic', 'image/heif', 'image/gif', 'image/webp'];
-
-export default function DragDropPaste(): null {
-  const [editor] = useLexicalComposerContext();
-  useEffect(() => {
-    return editor.registerCommand(
-      DRAG_DROP_PASTE,
-      files => {
-        (async () => {
-          const filesResult = await mediaFileReader(
-            files,
-            [ACCEPTABLE_IMAGE_TYPES].flatMap(x => x),
-          );
-          for (const { file, result } of filesResult) {
-            if (isMimeType(file, ACCEPTABLE_IMAGE_TYPES)) {
-              console.log({ file, name: file.name });
-            }
-          }
-        })();
-        return true;
-      },
-      COMMAND_PRIORITY_LOW,
-    );
-  }, [editor]);
-  return null;
-}

package/src/rich-text-editor/plugins/MarkdownShortcutPlugin/index.tsx

@@ -1,16 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import * as React from 'react';
-import { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin';
-
-import { PLAYGROUND_TRANSFORMERS } from '../MarkdownTransformers';
-
-export default function MarkdownPlugin(): JSX.Element {
-  return <MarkdownShortcutPlugin transformers={PLAYGROUND_TRANSFORMERS} />;
-}

package/src/rich-text-editor/plugins/MarkdownTransformers/index.ts

@@ -1,195 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import {
-  $createParagraphNode,
-  $createTextNode,
-  $isElementNode,
-  $isParagraphNode,
-  $isTextNode,
-  type ElementNode,
-  type LexicalNode,
-} from 'lexical';
-import {
-  CHECK_LIST,
-  ELEMENT_TRANSFORMERS,
-  TEXT_FORMAT_TRANSFORMERS,
-  TEXT_MATCH_TRANSFORMERS,
-  type ElementTransformer,
-  type Transformer,
-} from '@lexical/markdown';
-import {
-  $createHorizontalRuleNode,
-  $isHorizontalRuleNode,
-  HorizontalRuleNode,
-} from '@lexical/react/LexicalHorizontalRuleNode';
-import {
-  $createTableCellNode,
-  $createTableNode,
-  $createTableRowNode,
-  $isTableNode,
-  $isTableRowNode,
-  TableCellHeaderStates,
-  TableCellNode,
-  TableNode,
-  TableRowNode,
-} from '@lexical/table';
-
-export const HR: ElementTransformer = {
-  dependencies: [HorizontalRuleNode],
-  export: (node: LexicalNode) => {
-    return $isHorizontalRuleNode(node) ? '***' : null;
-  },
-  regExp: /^(---|\*\*\*|___)\s?$/,
-  replace: (parentNode, _1, _2, isImport) => {
-    const line = $createHorizontalRuleNode();
-
-    // TODO: Get rid of isImport flag
-    if (isImport || parentNode.getNextSibling() != null) {
-      parentNode.replace(line);
-    } else {
-      parentNode.insertBefore(line);
-    }
-
-    line.selectNext();
-  },
-  type: 'element',
-};
-
-// Very primitive table setup
-const TABLE_ROW_REG_EXP = /^(?:\|)(.+)(?:\|)\s?$/;
-
-export const TABLE: ElementTransformer = {
-  // TODO: refactor transformer for new TableNode
-  dependencies: [TableNode, TableRowNode, TableCellNode],
-  export: (node: LexicalNode, exportChildren: (elementNode: ElementNode) => string) => {
-    if (!$isTableNode(node)) {
-      return null;
-    }
-
-    const output = [];
-
-    for (const row of node.getChildren()) {
-      const rowOutput = [];
-
-      if ($isTableRowNode(row)) {
-        for (const cell of row.getChildren()) {
-          // It's TableCellNode (hence ElementNode) so it's just to make flow happy
-          if ($isElementNode(cell)) {
-            rowOutput.push(exportChildren(cell));
-          }
-        }
-      }
-
-      output.push(`| ${rowOutput.join(' | ')} |`);
-    }
-
-    return output.join('\n');
-  },
-  regExp: TABLE_ROW_REG_EXP,
-  replace: (parentNode, _1, match) => {
-    const matchCells = mapToTableCells(match[0]);
-
-    if (matchCells == null) {
-      return;
-    }
-
-    const rows = [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();
-
-    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));
-      }
-    }
-
-    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) {
-    paragraph.append($createTextNode(textContent.trim()));
-  }
-
-  cell.append(paragraph);
-  return cell;
-};
-
-const mapToTableCells = (textContent: string): Array<TableCellNode> | null => {
-  // TODO:
-  // For now plain text, single node. Can be expanded to more complex content
-  // including formatted text
-  const match = textContent.match(TABLE_ROW_REG_EXP);
-
-  if (!match || !match[1]) {
-    return null;
-  }
-
-  return match[1].split('|').map(text => createTableCell(text));
-};
-
-export const PLAYGROUND_TRANSFORMERS: Array<Transformer> = [
-  TABLE,
-  HR,
-  CHECK_LIST,
-  ...ELEMENT_TRANSFORMERS,
-  ...TEXT_FORMAT_TRANSFORMERS,
-  ...TEXT_MATCH_TRANSFORMERS,
-];

package/src/rich-text-editor/plugins/SpeechToTextPlugin/index.ts

@@ -1,113 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import type { LexicalCommand, LexicalEditor, RangeSelection } from 'lexical';
-
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import {
-  $getSelection,
-  $isRangeSelection,
-  COMMAND_PRIORITY_EDITOR,
-  createCommand,
-  REDO_COMMAND,
-  UNDO_COMMAND,
-} from 'lexical';
-import { useEffect, useRef, useState } from 'react';
-
-import useReport from '../../hooks/useReport';
-
-export const SPEECH_TO_TEXT_COMMAND: LexicalCommand<boolean> = createCommand('SPEECH_TO_TEXT_COMMAND');
-
-const VOICE_COMMANDS: Readonly<Record<string, (arg0: { editor: LexicalEditor; selection: RangeSelection }) => void>> = {
-  '\n': ({ selection }) => {
-    selection.insertParagraph();
-  },
-  redo: ({ editor }) => {
-    editor.dispatchCommand(REDO_COMMAND, undefined);
-  },
-  undo: ({ editor }) => {
-    editor.dispatchCommand(UNDO_COMMAND, undefined);
-  },
-};
-
-export const SUPPORT_SPEECH_RECOGNITION: boolean =
-  typeof window !== 'undefined' && ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window);
-
-function SpeechToTextPlugin(): null {
-  const [editor] = useLexicalComposerContext();
-  const [isEnabled, setIsEnabled] = useState<boolean>(false);
-  const SpeechRecognition =
-    // @ts-ignore
-    window.SpeechRecognition || window.webkitSpeechRecognition;
-  const recognition = useRef<typeof SpeechRecognition | null>(null);
-  const report = useReport();
-
-  useEffect(() => {
-    if (isEnabled && recognition.current === null) {
-      recognition.current = new SpeechRecognition();
-      recognition.current.continuous = true;
-      recognition.current.interimResults = true;
-      recognition.current.addEventListener('result', (event: typeof SpeechRecognition) => {
-        const resultItem = event.results.item(event.resultIndex);
-        const { transcript } = resultItem.item(0);
-        report(transcript);
-
-        if (!resultItem.isFinal) {
-          return;
-        }
-
-        editor.update(() => {
-          const selection = $getSelection();
-
-          if ($isRangeSelection(selection)) {
-            const command = VOICE_COMMANDS[transcript.toLowerCase().trim()];
-
-            if (command) {
-              command({
-                editor,
-                selection,
-              });
-            } else if (transcript.match(/\s*\n\s*/)) {
-              selection.insertParagraph();
-            } else {
-              selection.insertText(transcript);
-            }
-          }
-        });
-      });
-    }
-
-    if (recognition.current) {
-      if (isEnabled) {
-        recognition.current.start();
-      } else {
-        recognition.current.stop();
-      }
-    }
-
-    return () => {
-      if (recognition.current !== null) {
-        recognition.current.stop();
-      }
-    };
-  }, [SpeechRecognition, editor, isEnabled, report]);
-  useEffect(() => {
-    return editor.registerCommand(
-      SPEECH_TO_TEXT_COMMAND,
-      (_isEnabled: boolean) => {
-        setIsEnabled(_isEnabled);
-        return true;
-      },
-      COMMAND_PRIORITY_EDITOR,
-    );
-  }, [editor]);
-
-  return null;
-}
-
-export default (SUPPORT_SPEECH_RECOGNITION ? SpeechToTextPlugin : () => null) as () => null;

package/src/rich-text-editor/plugins/TableCellResizer/index.css

@@ -1,12 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- *
- */
-
-.TableCellResizer__resizer {
-  position: absolute;
-}