@crystallize/design-system 1.3.2 → 1.4.1

package/src/rich-text-editor/model/crystallize-to-lexical.ts

@@ -0,0 +1,186 @@
+import {
+  $createLineBreakNode,
+  $createParagraphNode,
+  $createTextNode,
+  $getRoot,
+  LexicalNode,
+  TextFormatType,
+} from 'lexical';
+import { $createCodeHighlightNode, $createCodeNode } from '@lexical/code';
+import { $createLinkNode } from '@lexical/link';
+import { $createListItemNode, $createListNode } from '@lexical/list';
+import { $createHorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
+import { $createHeadingNode, $createQuoteNode } from '@lexical/rich-text';
+import { $createTableCellNode, $createTableNode, $createTableRowNode } from '@lexical/table';
+
+import type { CrystallizeRichTextNode, CrystallizeRichText } from './crystallize-rich-text-types';
+
+export function composeInitialState({ richText }: { richText: CrystallizeRichText }) {
+  return function setLexicalState() {
+    const root = $getRoot();
+
+    const richTextArray = Array.isArray(richText) ? richText : [richText];
+
+    function handleNode({
+      crystallizeContentNode,
+      lexicalParent,
+    }: {
+      crystallizeContentNode: CrystallizeRichTextNode;
+      lexicalParent: LexicalNode;
+    }) {
+      const { textContent, kind, type, children, metadata } = crystallizeContentNode;
+      let lexicalNode: LexicalNode | null = null;
+
+      let insertedTextContent = false;
+
+      const customTextFormat = getLexicalTextFormat(crystallizeContentNode);
+      if (customTextFormat) {
+        lexicalNode = $createTextNode(textContent).toggleFormat(customTextFormat);
+        insertedTextContent = true;
+      } else {
+        switch (type) {
+          case 'heading1': {
+            lexicalNode = $createHeadingNode('h1');
+            break;
+          }
+          case 'heading2': {
+            lexicalNode = $createHeadingNode('h2');
+            break;
+          }
+          case 'heading3': {
+            lexicalNode = $createHeadingNode('h3');
+            break;
+          }
+          case 'heading4': {
+            lexicalNode = $createHeadingNode('h4');
+            break;
+          }
+          case 'heading5': {
+            lexicalNode = $createHeadingNode('h5');
+            break;
+          }
+          case 'heading6': {
+            lexicalNode = $createHeadingNode('h6');
+            break;
+          }
+          case 'paragraph': {
+            lexicalNode = $createParagraphNode();
+            break;
+          }
+          case 'horizontal-line': {
+            lexicalNode = $createHorizontalRuleNode();
+            break;
+          }
+          case 'code': {
+            const language = metadata && typeof metadata.language === 'string' ? metadata.language : null;
+            lexicalNode = $createCodeNode(language);
+            lexicalNode.append($createCodeHighlightNode(textContent ?? ''));
+            insertedTextContent = true;
+
+            break;
+          }
+          case 'ordered-list': {
+            lexicalNode = $createListNode('number');
+            break;
+          }
+          case 'unordered-list': {
+            lexicalNode = $createListNode('bullet');
+            break;
+          }
+          case 'list-item': {
+            lexicalNode = $createListItemNode();
+            break;
+          }
+          case 'line-break': {
+            lexicalNode = $createLineBreakNode();
+            break;
+          }
+          case 'link': {
+            const href = metadata && typeof metadata.href === 'string' ? metadata.href : '';
+            const target = metadata && typeof metadata.target === 'string' ? metadata.target : null;
+            const rel = metadata && typeof metadata.rel === 'string' ? metadata.rel : null;
+
+            lexicalNode = $createLinkNode(href, {
+              target,
+              rel,
+            });
+            break;
+          }
+          case 'quote': {
+            lexicalNode = $createQuoteNode();
+            break;
+          }
+          case 'table': {
+            lexicalNode = $createTableNode();
+            break;
+          }
+          case 'table-row': {
+            lexicalNode = $createTableRowNode();
+            break;
+          }
+          case 'table-cell': {
+            // ** colSpan / rowSpan has not yet been implemented **
+            // const colSpanFromMeta = metadata?.colSpan;
+            // const colSpanParsed =
+            //   typeof colSpanFromMeta === 'number'
+            //     ? colSpanFromMeta
+            //     : parseInt(colSpanFromMeta as unknown as string, 10);
+            // const colSpan = !isNaN(colSpanParsed) ? colSpanParsed : undefined;
+            const colSpan = undefined;
+
+            lexicalNode = $createTableCellNode(
+              // 2 indicates NO_HEADER_STATUS
+              // See TableCellHeaderStates in @lexical/table/LexicalTableCellNode for details
+              0,
+              colSpan,
+            );
+            break;
+          }
+        }
+
+        if (!insertedTextContent && typeof textContent === 'string') {
+          const textNode = $createTextNode(textContent);
+          if (!lexicalNode && kind === 'inline') {
+            lexicalNode = textNode;
+          } else if (lexicalNode) {
+            lexicalNode.append(textNode);
+          }
+        }
+      }
+
+      if (lexicalNode) {
+        if (Array.isArray(children)) {
+          children.forEach(n => handleNode({ crystallizeContentNode: n, lexicalParent: lexicalNode as LexicalNode }));
+        }
+
+        lexicalParent.append(lexicalNode);
+      }
+    }
+
+    richTextArray.forEach(crystallizeContentNode => handleNode({ crystallizeContentNode, lexicalParent: root }));
+  };
+}
+
+function getLexicalTextFormat(node: CrystallizeRichTextNode): null | TextFormatType {
+  switch (node.type) {
+    case 'strong':
+      return 'bold';
+    case 'emphasized':
+      return 'italic';
+    case 'underlined':
+      return 'underline';
+    case 'subscripted':
+      return 'subscript';
+    case 'superscripted':
+      return 'superscript';
+    case 'deleted':
+      return 'strikethrough';
+    case 'code': {
+      if (node.kind === 'inline') {
+        return 'code';
+      }
+      break;
+    }
+  }
+  return null;
+}

package/src/rich-text-editor/model/lexical-to-crystallize.ts

@@ -0,0 +1,232 @@
+import {
+  $getRoot,
+  $isElementNode,
+  $isLineBreakNode,
+  $isParagraphNode,
+  $isTextNode,
+  EditorState,
+  ElementNode,
+  TextNode,
+} from 'lexical';
+import { $isCodeNode } from '@lexical/code';
+import { $isLinkNode } from '@lexical/link';
+import { $isListItemNode, $isListNode } from '@lexical/list';
+import { $isHorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
+import { $isHeadingNode, $isQuoteNode, HeadingTagType } from '@lexical/rich-text';
+import { $isTableCellNode, $isTableNode, $isTableRowNode } from '@lexical/table';
+
+import type {
+  CrystallizeRichTextNode,
+  CrystallizeRichText,
+  CrystallizeRichTextCodeNodes,
+} from './crystallize-rich-text-types';
+import type { CrystallizeRichTextHeadingTypes } from './crystallize-rich-text-types/headings';
+
+const headingMapper: Record<HeadingTagType, CrystallizeRichTextHeadingTypes> = {
+  h1: 'heading1',
+  h2: 'heading2',
+  h3: 'heading3',
+  h4: 'heading4',
+  h5: 'heading5',
+  h6: 'heading6',
+};
+
+export function lexicalToCrystallizeRichText({ editorState }: { editorState: EditorState }): CrystallizeRichText {
+  const crystallizeRichText: CrystallizeRichTextNode['children'] = [];
+
+  editorState.read(() => {
+    handleNode($getRoot(), crystallizeRichText);
+
+    function handleNode(lexicalNode: ElementNode, parentChildren: CrystallizeRichTextNode[]) {
+      let crystallizeNode: CrystallizeRichTextNode | null = null;
+
+      let innerContentsIsTakenCareOf = false;
+
+      // Paragraph
+      if ($isParagraphNode(lexicalNode)) {
+        crystallizeNode = {
+          kind: 'block',
+          type: 'paragraph',
+        };
+      }
+      // Headings
+      else if ($isHeadingNode(lexicalNode)) {
+        const tag = lexicalNode.getTag();
+
+        crystallizeNode = {
+          kind: 'block',
+          type: headingMapper[tag],
+        };
+      }
+      // Link
+      else if ($isLinkNode(lexicalNode)) {
+        const href = lexicalNode.getURL();
+        const target = lexicalNode.getTarget();
+        const rel = lexicalNode.getRel();
+
+        crystallizeNode = {
+          kind: 'inline',
+          type: 'link',
+          metadata: {
+            href,
+            ...(target && { target }),
+            ...(rel && { rel }),
+          },
+        };
+      }
+      // List
+      else if ($isListNode(lexicalNode)) {
+        const listType = lexicalNode.getListType();
+        crystallizeNode = {
+          kind: 'block',
+          type: listType === 'number' ? 'ordered-list' : 'unordered-list',
+        };
+      }
+      // List item
+      else if ($isListItemNode(lexicalNode)) {
+        crystallizeNode = {
+          kind: 'block',
+          type: 'list-item',
+        };
+      }
+      // Quote
+      else if ($isQuoteNode(lexicalNode)) {
+        crystallizeNode = {
+          kind: 'block',
+          type: 'quote',
+        };
+      }
+      // Table
+      else if ($isTableNode(lexicalNode)) {
+        crystallizeNode = {
+          kind: 'block',
+          type: 'table',
+        };
+      }
+      // Table row
+      else if ($isTableRowNode(lexicalNode)) {
+        crystallizeNode = {
+          kind: 'block',
+          type: 'table-row',
+        };
+      }
+      // Table cell
+      else if ($isTableCellNode(lexicalNode)) {
+        crystallizeNode = {
+          kind: 'inline',
+          type: 'table-cell',
+        };
+      }
+      // Line break
+      else if ($isLineBreakNode(lexicalNode)) {
+        crystallizeNode = {
+          kind: 'inline',
+          type: 'line-break',
+        };
+      }
+      // Code
+      else if ($isCodeNode(lexicalNode)) {
+        const language = lexicalNode.getLanguage();
+        crystallizeNode = {
+          kind: 'block',
+          type: 'code',
+          textContent: lexicalNode.getTextContent(),
+          metadata: {
+            language,
+          },
+        } as CrystallizeRichTextCodeNodes;
+
+        innerContentsIsTakenCareOf = true;
+      }
+
+      if (crystallizeNode) {
+        parentChildren.push(crystallizeNode);
+      }
+
+      if (!innerContentsIsTakenCareOf) {
+        /**
+         * If there is only a single child, and that
+         * child does not have a format set, then we can
+         * set the textContent directly on the parent
+         */
+        let onlyChildIsPureTextContent = false;
+
+        const children = lexicalNode.getChildren();
+        if (children?.length > 0) {
+          let parentChildrenToUse = parentChildren;
+          if (crystallizeNode) {
+            if (children.length === 1 && parent) {
+              const [first] = children;
+              if ($isTextNode(first)) {
+                const childTextNode = getTextChild(first);
+                if (!childTextNode.type) {
+                  crystallizeNode.textContent = childTextNode.textContent;
+                  onlyChildIsPureTextContent = true;
+                }
+              }
+            }
+
+            if (!onlyChildIsPureTextContent) {
+              crystallizeNode.children = [];
+              parentChildrenToUse = crystallizeNode.children;
+            }
+          }
+
+          if (!onlyChildIsPureTextContent) {
+            children.forEach(childNode => {
+              if ($isElementNode(childNode)) {
+                handleNode(childNode, parentChildrenToUse);
+              }
+              if ($isHorizontalRuleNode(childNode)) {
+                parentChildrenToUse.push({
+                  kind: 'block',
+                  type: 'horizontal-line',
+                });
+              } else {
+                if ($isTextNode(childNode)) {
+                  parentChildrenToUse.push(getTextChild(childNode));
+                }
+              }
+            });
+          }
+        }
+      }
+    }
+  });
+
+  return crystallizeRichText;
+}
+
+function getTextChild(n: TextNode): CrystallizeRichTextNode {
+  const textContent = n.getTextContent();
+
+  // Deal with code seperately, since it can be both "inline" and "block"
+  if (n.hasFormat('code')) {
+    return {
+      type: 'code',
+      kind: 'inline',
+      textContent,
+    };
+  }
+
+  const textChild = {
+    kind: 'inline',
+    textContent,
+  } as CrystallizeRichTextNode;
+
+  if (n.hasFormat('bold')) {
+    textChild.type = 'strong';
+  } else if (n.hasFormat('italic')) {
+    textChild.type = 'emphasized';
+  } else if (n.hasFormat('underline')) {
+    textChild.type = 'underlined';
+  } else if (n.hasFormat('strikethrough')) {
+    textChild.type = 'deleted';
+  } else if (n.hasFormat('subscript')) {
+    textChild.type = 'subscripted';
+  } else if (n.hasFormat('superscript')) {
+    textChild.type = 'superscripted';
+  }
+
+  return textChild;
+}

package/src/rich-text-editor/nodes/AutocompleteNode.tsx

@@ -0,0 +1,96 @@
+/**
+ * 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 { Spread } from 'lexical';
+
+import { DecoratorNode, EditorConfig, NodeKey, SerializedLexicalNode } from 'lexical';
+import * as React from 'react';
+
+import { useSharedAutocompleteContext } from '../context/SharedAutocompleteContext';
+import { uuid as UUID } from '../plugins/AutocompletePlugin';
+
+declare global {
+  interface Navigator {
+    userAgentData?: {
+      mobile: boolean;
+    };
+  }
+}
+
+export type SerializedAutocompleteNode = Spread<
+  {
+    type: 'autocomplete';
+    version: 1;
+    uuid: string;
+  },
+  SerializedLexicalNode
+>;
+
+export class AutocompleteNode extends DecoratorNode<JSX.Element | null> {
+  // TODO add comment
+  __uuid: string;
+
+  static clone(node: AutocompleteNode): AutocompleteNode {
+    return new AutocompleteNode(node.__key);
+  }
+
+  static getType(): 'autocomplete' {
+    return 'autocomplete';
+  }
+
+  static importJSON(serializedNode: SerializedAutocompleteNode): AutocompleteNode {
+    const node = $createAutocompleteNode(serializedNode.uuid);
+    return node;
+  }
+
+  exportJSON(): SerializedAutocompleteNode {
+    return {
+      ...super.exportJSON(),
+      type: 'autocomplete',
+      uuid: this.__uuid,
+      version: 1,
+    };
+  }
+
+  constructor(uuid: string, key?: NodeKey) {
+    super(key);
+    this.__uuid = uuid;
+  }
+
+  updateDOM(prevNode: unknown, dom: HTMLElement, config: EditorConfig): boolean {
+    return false;
+  }
+
+  createDOM(config: EditorConfig): HTMLElement {
+    return document.createElement('span');
+  }
+
+  decorate(): JSX.Element | null {
+    if (this.__uuid !== UUID) {
+      return null;
+    }
+    return <AutocompleteComponent />;
+  }
+}
+
+export function $createAutocompleteNode(uuid: string): AutocompleteNode {
+  return new AutocompleteNode(uuid);
+}
+
+function AutocompleteComponent(): JSX.Element {
+  const [suggestion] = useSharedAutocompleteContext();
+  const userAgentData = window.navigator.userAgentData;
+  const isMobile =
+    userAgentData !== undefined ? userAgentData.mobile : window.innerWidth <= 800 && window.innerHeight <= 600;
+  // TODO Move to theme
+  return (
+    <span style={{ color: '#ccc' }} spellCheck="false">
+      {suggestion} {isMobile ? '(SWIPE \u2B95)' : '(TAB)'}
+    </span>
+  );
+}

package/src/rich-text-editor/nodes/BaseNodes.ts

@@ -0,0 +1,45 @@
+/**
+ * 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 { Klass, LexicalNode, LineBreakNode } from 'lexical';
+import { CodeHighlightNode, CodeNode } from '@lexical/code';
+import { HashtagNode } from '@lexical/hashtag';
+import { AutoLinkNode, LinkNode } from '@lexical/link';
+import { ListItemNode, ListNode } from '@lexical/list';
+import { MarkNode } from '@lexical/mark';
+import { OverflowNode } from '@lexical/overflow';
+import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
+import { HeadingNode, QuoteNode } from '@lexical/rich-text';
+import { TableCellNode, TableNode, TableRowNode } from '@lexical/table';
+
+// import { AutocompleteNode } from './AutocompleteNode';
+
+import { KeywordNode } from './KeywordNode';
+import { TableNode as NewTableNode } from './TableNode';
+
+export const BaseNodes: Array<Klass<LexicalNode>> = [
+  HeadingNode,
+  ListNode,
+  ListItemNode,
+  QuoteNode,
+  CodeNode,
+  NewTableNode,
+  TableNode,
+  TableCellNode,
+  TableRowNode,
+  HashtagNode,
+  CodeHighlightNode,
+  AutoLinkNode,
+  LinkNode,
+  OverflowNode,
+  // AutocompleteNode,
+  KeywordNode,
+  HorizontalRuleNode,
+  MarkNode,
+  LineBreakNode,
+];

package/src/rich-text-editor/nodes/KeywordNode.ts

@@ -0,0 +1,73 @@
+/**
+ * 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 { EditorConfig, LexicalNode, SerializedTextNode, Spread } from 'lexical';
+
+import { TextNode } from 'lexical';
+
+export type SerializedKeywordNode = Spread<
+  {
+    type: 'keyword';
+    version: 1;
+  },
+  SerializedTextNode
+>;
+
+export class KeywordNode extends TextNode {
+  static getType(): string {
+    return 'keyword';
+  }
+
+  static clone(node: KeywordNode): KeywordNode {
+    return new KeywordNode(node.__text, node.__key);
+  }
+
+  static importJSON(serializedNode: SerializedKeywordNode): KeywordNode {
+    const node = $createKeywordNode(serializedNode.text);
+    node.setFormat(serializedNode.format);
+    node.setDetail(serializedNode.detail);
+    node.setMode(serializedNode.mode);
+    node.setStyle(serializedNode.style);
+    return node;
+  }
+
+  exportJSON(): SerializedKeywordNode {
+    return {
+      ...super.exportJSON(),
+      type: 'keyword',
+      version: 1,
+    };
+  }
+
+  createDOM(config: EditorConfig): HTMLElement {
+    const dom = super.createDOM(config);
+    dom.style.cursor = 'default';
+    dom.className = 'keyword';
+    return dom;
+  }
+
+  canInsertTextBefore(): boolean {
+    return false;
+  }
+
+  canInsertTextAfter(): boolean {
+    return false;
+  }
+
+  isTextEntity(): true {
+    return true;
+  }
+}
+
+export function $createKeywordNode(keyword: string): KeywordNode {
+  return new KeywordNode(keyword);
+}
+
+export function $isKeywordNode(node: LexicalNode | null | undefined | undefined): boolean {
+  return node instanceof KeywordNode;
+}

package/src/rich-text-editor/nodes/TableCellNodes.ts

@@ -0,0 +1,31 @@
+/**
+ * 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 { Klass, LexicalNode } from 'lexical';
+import { CodeHighlightNode, CodeNode } from '@lexical/code';
+import { HashtagNode } from '@lexical/hashtag';
+import { AutoLinkNode, LinkNode } from '@lexical/link';
+import { ListItemNode, ListNode } from '@lexical/list';
+import { HeadingNode, QuoteNode } from '@lexical/rich-text';
+
+// import { AutocompleteNode } from './AutocompleteNode';
+import { KeywordNode } from './KeywordNode';
+
+export const BaseNodes: Array<Klass<LexicalNode>> = [
+  HeadingNode,
+  ListNode,
+  ListItemNode,
+  QuoteNode,
+  CodeNode,
+  HashtagNode,
+  CodeHighlightNode,
+  AutoLinkNode,
+  LinkNode,
+  // AutocompleteNode,
+  KeywordNode,
+];