@crystallize/design-system 1.3.2 → 1.4.1

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

@@ -0,0 +1,398 @@
+/**
+ * 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 { Suspense } from 'react';
+import {
+  DecoratorNode,
+  type DOMConversionMap,
+  type DOMConversionOutput,
+  type DOMExportOutput,
+  type EditorConfig,
+  type LexicalEditor,
+  type LexicalNode,
+  type NodeKey,
+  type SerializedLexicalNode,
+  type Spread,
+} from 'lexical';
+
+export type Cell = {
+  colSpan: number;
+  json: string;
+  type: 'normal' | 'header';
+  id: string;
+  width: number | null;
+};
+
+export type Row = {
+  cells: Array<Cell>;
+  height: null | number;
+  id: string;
+};
+
+export type Rows = Array<Row>;
+
+export const cellHTMLCache: Map<string, string> = new Map();
+export const cellTextContentCache: Map<string, string> = new Map();
+
+const emptyEditorJSON =
+  '{"root":{"children":[{"children":[],"direction":null,"format":"","indent":0,"type":"paragraph","version":1}],"direction":null,"format":"","indent":0,"type":"root","version":1}}';
+
+const plainTextEditorJSON = (text: string) =>
+  text === ''
+    ? emptyEditorJSON
+    : `{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":${text},"type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1}],"direction":"ltr","format":"","indent":0,"type":"root","version":1}}`;
+
+const TableComponent = React.lazy(
+  // @ts-ignore
+  () => import('./TableComponent'),
+);
+
+export function createUID(): string {
+  return Math.random()
+    .toString(36)
+    .replace(/[^a-z]+/g, '')
+    .substr(0, 5);
+}
+
+function createCell(type: 'normal' | 'header'): Cell {
+  return {
+    colSpan: 1,
+    id: createUID(),
+    json: emptyEditorJSON,
+    type,
+    width: null,
+  };
+}
+
+export function createRow(): Row {
+  return {
+    cells: [],
+    height: null,
+    id: createUID(),
+  };
+}
+
+export type SerializedTableNode = Spread<
+  {
+    rows: Rows;
+    type: 'tablesheet';
+    version: 1;
+  },
+  SerializedLexicalNode
+>;
+
+export function extractRowsFromHTML(tableElem: HTMLTableElement): Rows {
+  const rowElems = tableElem.querySelectorAll('tr');
+  const rows: Rows = [];
+  for (let y = 0; y < rowElems.length; y++) {
+    const rowElem = rowElems[y];
+    const cellElems = rowElem.querySelectorAll('td,th');
+    if (!cellElems || cellElems.length === 0) {
+      continue;
+    }
+    const cells: Array<Cell> = [];
+    for (let x = 0; x < cellElems.length; x++) {
+      const cellElem = cellElems[x] as HTMLElement;
+      const isHeader = cellElem.nodeName === 'TH';
+      const cell = createCell(isHeader ? 'header' : 'normal');
+      cell.json = plainTextEditorJSON(JSON.stringify(cellElem.innerText.replace(/\n/g, ' ')));
+      cells.push(cell);
+    }
+    const row = createRow();
+    row.cells = cells;
+    rows.push(row);
+  }
+  return rows;
+}
+
+function convertTableElement(domNode: HTMLElement): null | DOMConversionOutput {
+  const rowElems = domNode.querySelectorAll('tr');
+  if (!rowElems || rowElems.length === 0) {
+    return null;
+  }
+  const rows: Rows = [];
+  for (let y = 0; y < rowElems.length; y++) {
+    const rowElem = rowElems[y];
+    const cellElems = rowElem.querySelectorAll('td,th');
+    if (!cellElems || cellElems.length === 0) {
+      continue;
+    }
+    const cells: Array<Cell> = [];
+    for (let x = 0; x < cellElems.length; x++) {
+      const cellElem = cellElems[x] as HTMLElement;
+      const isHeader = cellElem.nodeName === 'TH';
+      const cell = createCell(isHeader ? 'header' : 'normal');
+      cell.json = plainTextEditorJSON(JSON.stringify(cellElem.innerText.replace(/\n/g, ' ')));
+      cells.push(cell);
+    }
+    const row = createRow();
+    row.cells = cells;
+    rows.push(row);
+  }
+  return { node: $createTableNode(rows) };
+}
+
+export function exportTableCellsToHTML(
+  rows: Rows,
+  rect?: { startX: number; endX: number; startY: number; endY: number },
+): HTMLElement {
+  const table = document.createElement('table');
+  const colGroup = document.createElement('colgroup');
+  const tBody = document.createElement('tbody');
+  const firstRow = rows[0];
+
+  for (let x = rect != null ? rect.startX : 0; x < (rect != null ? rect.endX + 1 : firstRow.cells.length); x++) {
+    const col = document.createElement('col');
+    colGroup.append(col);
+  }
+
+  for (let y = rect != null ? rect.startY : 0; y < (rect != null ? rect.endY + 1 : rows.length); y++) {
+    const row = rows[y];
+    const cells = row.cells;
+    const rowElem = document.createElement('tr');
+
+    for (let x = rect != null ? rect.startX : 0; x < (rect != null ? rect.endX + 1 : cells.length); x++) {
+      const cell = cells[x];
+      const cellElem = document.createElement(cell.type === 'header' ? 'th' : 'td');
+      cellElem.innerHTML = cellHTMLCache.get(cell.json) || '';
+      rowElem.appendChild(cellElem);
+    }
+    tBody.appendChild(rowElem);
+  }
+
+  table.appendChild(colGroup);
+  table.appendChild(tBody);
+  return table;
+}
+
+export class TableNode extends DecoratorNode<JSX.Element> {
+  __rows: Rows;
+
+  static getType(): string {
+    return 'tablesheet';
+  }
+
+  static clone(node: TableNode): TableNode {
+    return new TableNode(Array.from(node.__rows), node.__key);
+  }
+
+  static importJSON(serializedNode: SerializedTableNode): TableNode {
+    return $createTableNode(serializedNode.rows);
+  }
+
+  exportJSON(): SerializedTableNode {
+    return {
+      rows: this.__rows,
+      type: 'tablesheet',
+      version: 1,
+    };
+  }
+
+  static importDOM(): DOMConversionMap | null {
+    return {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      table: (_node: Node) => ({
+        conversion: convertTableElement,
+        priority: 0,
+      }),
+    };
+  }
+
+  exportDOM(): DOMExportOutput {
+    return { element: exportTableCellsToHTML(this.__rows) };
+  }
+
+  constructor(rows?: Rows, key?: NodeKey) {
+    super(key);
+    this.__rows = rows || [];
+  }
+
+  createDOM(): HTMLElement {
+    return document.createElement('div');
+  }
+
+  updateDOM(): false {
+    return false;
+  }
+
+  mergeRows(startX: number, startY: number, mergeRows: Rows): void {
+    const self = this.getWritable();
+    const rows = self.__rows;
+    const endY = Math.min(rows.length, startY + mergeRows.length);
+    for (let y = startY; y < endY; y++) {
+      const row = rows[y];
+      const mergeRow = mergeRows[y - startY];
+      const cells = row.cells;
+      const cellsClone = Array.from(cells);
+      const rowClone = { ...row, cells: cellsClone };
+      const mergeCells = mergeRow.cells;
+      const endX = Math.min(cells.length, startX + mergeCells.length);
+      for (let x = startX; x < endX; x++) {
+        const cell = cells[x];
+        const mergeCell = mergeCells[x - startX];
+        const cellClone = { ...cell, json: mergeCell.json, type: mergeCell.type };
+        cellsClone[x] = cellClone;
+      }
+      rows[y] = rowClone;
+    }
+  }
+
+  updateCellJSON(x: number, y: number, json: string): void {
+    const self = this.getWritable();
+    const rows = self.__rows;
+    const row = rows[y];
+    const cells = row.cells;
+    const cell = cells[x];
+    const cellsClone = Array.from(cells);
+    const cellClone = { ...cell, json };
+    const rowClone = { ...row, cells: cellsClone };
+    cellsClone[x] = cellClone;
+    rows[y] = rowClone;
+  }
+
+  updateCellType(x: number, y: number, type: 'header' | 'normal'): void {
+    const self = this.getWritable();
+    const rows = self.__rows;
+    const row = rows[y];
+    const cells = row.cells;
+    const cell = cells[x];
+    const cellsClone = Array.from(cells);
+    const cellClone = { ...cell, type };
+    const rowClone = { ...row, cells: cellsClone };
+    cellsClone[x] = cellClone;
+    rows[y] = rowClone;
+  }
+
+  insertColumnAt(x: number): void {
+    const self = this.getWritable();
+    const rows = self.__rows;
+    for (let y = 0; y < rows.length; y++) {
+      const row = rows[y];
+      const cells = row.cells;
+      const cellsClone = Array.from(cells);
+      const rowClone = { ...row, cells: cellsClone };
+      const type = (cells[x] || cells[x - 1]).type;
+      cellsClone.splice(x, 0, createCell(type));
+      rows[y] = rowClone;
+    }
+  }
+
+  deleteColumnAt(x: number): void {
+    const self = this.getWritable();
+    const rows = self.__rows;
+    for (let y = 0; y < rows.length; y++) {
+      const row = rows[y];
+      const cells = row.cells;
+      const cellsClone = Array.from(cells);
+      const rowClone = { ...row, cells: cellsClone };
+      cellsClone.splice(x, 1);
+      rows[y] = rowClone;
+    }
+  }
+
+  addColumns(count: number): void {
+    const self = this.getWritable();
+    const rows = self.__rows;
+    for (let y = 0; y < rows.length; y++) {
+      const row = rows[y];
+      const cells = row.cells;
+      const cellsClone = Array.from(cells);
+      const rowClone = { ...row, cells: cellsClone };
+      const type = cells[cells.length - 1].type;
+      for (let x = 0; x < count; x++) {
+        cellsClone.push(createCell(type));
+      }
+      rows[y] = rowClone;
+    }
+  }
+
+  insertRowAt(y: number): void {
+    const self = this.getWritable();
+    const rows = self.__rows;
+    const prevRow = rows[y] || rows[y - 1];
+    const cellCount = prevRow.cells.length;
+    const row = createRow();
+    for (let x = 0; x < cellCount; x++) {
+      const cell = createCell(prevRow.cells[x].type);
+      row.cells.push(cell);
+    }
+    rows.splice(y, 0, row);
+  }
+
+  deleteRowAt(y: number): void {
+    const self = this.getWritable();
+    const rows = self.__rows;
+    rows.splice(y, 1);
+  }
+
+  addRows(count: number): void {
+    const self = this.getWritable();
+    const rows = self.__rows;
+    const prevRow = rows[rows.length - 1];
+    const cellCount = prevRow.cells.length;
+
+    for (let y = 0; y < count; y++) {
+      const row = createRow();
+      for (let x = 0; x < cellCount; x++) {
+        const cell = createCell(prevRow.cells[x].type);
+        row.cells.push(cell);
+      }
+      rows.push(row);
+    }
+  }
+
+  updateColumnWidth(x: number, width: number): void {
+    const self = this.getWritable();
+    const rows = self.__rows;
+    for (let y = 0; y < rows.length; y++) {
+      const row = rows[y];
+      const cells = row.cells;
+      const cellsClone = Array.from(cells);
+      const rowClone = { ...row, cells: cellsClone };
+      cellsClone[x].width = width;
+      rows[y] = rowClone;
+    }
+  }
+
+  decorate(_: LexicalEditor, config: EditorConfig): JSX.Element {
+    return (
+      <Suspense fallback="...">
+        <TableComponent nodeKey={this.__key} theme={config.theme} rows={this.__rows} />
+      </Suspense>
+    );
+  }
+
+  isInline(): false {
+    return false;
+  }
+}
+
+export function $isTableNode(node: LexicalNode | null | undefined): node is TableNode {
+  return node instanceof TableNode;
+}
+
+export function $createTableNode(rows: Rows): TableNode {
+  return new TableNode(rows);
+}
+
+export function $createTableNodeWithDimensions(
+  rowCount: number,
+  columnCount: number,
+  includeHeaders = true,
+): TableNode {
+  const rows: Rows = [];
+  for (let y = 0; y < columnCount; y++) {
+    const row: Row = createRow();
+    rows.push(row);
+    for (let x = 0; x < rowCount; x++) {
+      row.cells.push(createCell(includeHeaders === true && (y === 0 || x === 0) ? 'header' : 'normal'));
+    }
+  }
+  return new TableNode(rows);
+}

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

@@ -0,0 +1,83 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/**
+ * 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 { CLEAR_EDITOR_COMMAND, LexicalEditor } from 'lexical';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+
+import { ActionMenu } from '../../../action-menu';
+import { lexicalToCrystallizeRichText } from '../../model/lexical-to-crystallize';
+import type { CrystallizeRichTextActionMenuItem } from '../../types';
+
+async function exportFile(editor: LexicalEditor) {
+  const json = lexicalToCrystallizeRichText({ editorState: editor.getEditorState() });
+
+  const blob = new Blob([JSON.stringify(json, null, 1)], {
+    type: 'application/json',
+  });
+  const href = URL.createObjectURL(blob);
+
+  const link = document.createElement('a');
+  link.href = href;
+  link.download = 'crystallizeRichText.json';
+
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+
+  URL.revokeObjectURL(href);
+}
+
+export default function ActionsPlugin({
+  append,
+  prepend,
+}: {
+  append?: CrystallizeRichTextActionMenuItem[];
+  prepend?: CrystallizeRichTextActionMenuItem[];
+}): JSX.Element {
+  const [editor] = useLexicalComposerContext();
+  return (
+    <div className="z-50 flex items-center ">
+      <div></div>
+      <ActionMenu>
+        {!prepend
+          ? null
+          : prepend.map(actionItem => (
+              <ActionMenu.Item
+                key={actionItem.title}
+                onSelect={actionItem.action}
+                className={actionItem.type === 'danger' ? 'danger' : ''}
+              >
+                {actionItem.title}
+              </ActionMenu.Item>
+            ))}
+        <ActionMenu.Item onSelect={() => exportFile(editor)}>Export to JSON</ActionMenu.Item>
+        <ActionMenu.Item
+          className="danger"
+          onSelect={() => {
+            editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
+            editor.focus();
+          }}
+        >
+          Clear paragraph
+        </ActionMenu.Item>
+        {!append
+          ? null
+          : append.map(actionItem => (
+              <ActionMenu.Item
+                key={actionItem.title}
+                onSelect={actionItem.action}
+                className={actionItem.type === 'danger' ? 'danger' : ''}
+              >
+                {actionItem.title}
+              </ActionMenu.Item>
+            ))}
+      </ActionMenu>
+    </div>
+  );
+}

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

@@ -0,0 +1,47 @@
+/**
+ * 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 { AutoLinkPlugin } from '@lexical/react/LexicalAutoLinkPlugin';
+import * as React from 'react';
+
+const URL_MATCHER =
+  /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
+
+const EMAIL_MATCHER =
+  /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
+
+const MATCHERS = [
+  (text: string) => {
+    const match = URL_MATCHER.exec(text);
+    if (match === null) {
+      return null;
+    }
+    const fullMatch = match[0];
+    return {
+      index: match.index,
+      length: fullMatch.length,
+      text: fullMatch,
+      url: fullMatch.startsWith('http') ? fullMatch : `https://${fullMatch}`,
+    };
+  },
+  (text: string) => {
+    const match = EMAIL_MATCHER.exec(text);
+    return (
+      match && {
+        index: match.index,
+        length: match[0].length,
+        text: match[0],
+        url: `mailto:${match[0]}`,
+      }
+    );
+  },
+];
+
+export default function LexicalAutoLinkPlugin(): JSX.Element {
+  return <AutoLinkPlugin matchers={MATCHERS} />;
+}