@crystallize/design-system 1.3.2 → 1.4.1

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

@@ -0,0 +1,195 @@
+/**
+ * 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/MaxLengthPlugin/index.tsx

@@ -0,0 +1,49 @@
+import { useEffect } from 'react';
+import { $getSelection, $isRangeSelection, EditorState, RootNode } from 'lexical';
+/**
+ * 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 { trimTextContentFromAnchor } from '@lexical/selection';
+import { $restoreEditorState } from '@lexical/utils';
+
+export function MaxLengthPlugin({ maxLength }: { maxLength: number }): null {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    let lastRestoredEditorState: EditorState | null = null;
+
+    return editor.registerNodeTransform(RootNode, (rootNode: RootNode) => {
+      const selection = $getSelection();
+      if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+        return;
+      }
+      const prevEditorState = editor.getEditorState();
+      const prevTextContent = prevEditorState.read(() => rootNode.getTextContent());
+      const textContent = rootNode.getTextContent();
+      if (prevTextContent !== textContent) {
+        const textLength = textContent.length;
+        const delCount = textLength - maxLength;
+        const anchor = selection.anchor;
+
+        if (delCount > 0) {
+          // Restore the old editor state instead if the last
+          // text content was already at the limit.
+          if (prevTextContent.length === maxLength && lastRestoredEditorState !== prevEditorState) {
+            lastRestoredEditorState = prevEditorState;
+            $restoreEditorState(editor, prevEditorState);
+          } else {
+            trimTextContentFromAnchor(editor, anchor, delCount);
+          }
+        }
+      }
+    });
+  }, [editor, maxLength]);
+
+  return null;
+}

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

@@ -0,0 +1,113 @@
+/**
+ * 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/TabFocusPlugin/index.tsx

@@ -0,0 +1,65 @@
+/**
+ * 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 {
+  $getSelection,
+  $isRangeSelection,
+  $setSelection,
+  FOCUS_COMMAND,
+} from 'lexical';
+import {useEffect} from 'react';
+
+const COMMAND_PRIORITY_LOW = 1;
+const TAB_TO_FOCUS_INTERVAL = 100;
+
+let lastTabKeyDownTimestamp = 0;
+let hasRegisteredKeyDownListener = false;
+
+function registerKeyTimeStampTracker() {
+  window.addEventListener(
+    'keydown',
+    (event: KeyboardEvent) => {
+      // Tab
+      if (event.keyCode === 9) {
+        lastTabKeyDownTimestamp = event.timeStamp;
+      }
+    },
+    true,
+  );
+}
+
+export default function TabFocusPlugin(): null {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    if (!hasRegisteredKeyDownListener) {
+      registerKeyTimeStampTracker();
+      hasRegisteredKeyDownListener = true;
+    }
+
+    return editor.registerCommand(
+      FOCUS_COMMAND,
+      (event: FocusEvent) => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+          if (
+            lastTabKeyDownTimestamp + TAB_TO_FOCUS_INTERVAL >
+            event.timeStamp
+          ) {
+            $setSelection(selection.clone());
+          }
+        }
+        return false;
+      },
+      COMMAND_PRIORITY_LOW,
+    );
+  }, [editor]);
+
+  return null;
+}