5htp-core 0.4.8 → 0.4.9

package/src/client/components/inputv3/Rte/plugins/TablePlugin.tsx

@@ -0,0 +1,178 @@
+/**
+ * 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.
+ *
+ */
+
+// Core
+import Button from '@client/components/button';
+import Input from '@client/components/inputv3';
+
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import {
+    $createTableNodeWithDimensions,
+    INSERT_TABLE_COMMAND,
+    TableNode,
+} from '@lexical/table';
+import {
+    $insertNodes,
+    COMMAND_PRIORITY_EDITOR,
+    createCommand,
+    EditorThemeClasses,
+    Klass,
+    LexicalCommand,
+    LexicalEditor,
+    LexicalNode,
+} from 'lexical';
+import { createContext, useContext, useEffect, useMemo, useState } from 'react';
+import * as React from 'react';
+import invariant from '../shared/invariant';
+
+export type InsertTableCommandPayload = Readonly<{
+    columns: string;
+    rows: string;
+    includeHeaders?: boolean;
+}>;
+
+export type CellContextShape = {
+    cellEditorConfig: null | CellEditorConfig;
+    cellEditorPlugins: null | React.JSX.Element | Array<React.JSX.Element>;
+    set: (
+        cellEditorConfig: null | CellEditorConfig,
+        cellEditorPlugins: null | React.JSX.Element | Array<React.JSX.Element>,
+    ) => void;
+};
+
+export type CellEditorConfig = Readonly<{
+    namespace: string;
+    nodes?: ReadonlyArray<Klass<LexicalNode>>;
+    onError: (error: Error, editor: LexicalEditor) => void;
+    readOnly?: boolean;
+    theme?: EditorThemeClasses;
+}>;
+
+export const INSERT_NEW_TABLE_COMMAND: LexicalCommand<InsertTableCommandPayload> =
+    createCommand('INSERT_NEW_TABLE_COMMAND');
+
+export const CellContext = createContext<CellContextShape>({
+    cellEditorConfig: null,
+    cellEditorPlugins: null,
+    set: () => {
+        // Empty
+    },
+});
+
+export function TableContext({ children }: { children: React.JSX.Element }) {
+    const [contextValue, setContextValue] = useState<{
+        cellEditorConfig: null | CellEditorConfig;
+        cellEditorPlugins: null | React.JSX.Element | Array<React.JSX.Element>;
+    }>({
+        cellEditorConfig: null,
+        cellEditorPlugins: null,
+    });
+    return (
+        <CellContext.Provider
+            value={useMemo(
+                () => ({
+                    cellEditorConfig: contextValue.cellEditorConfig,
+                    cellEditorPlugins: contextValue.cellEditorPlugins,
+                    set: (cellEditorConfig, cellEditorPlugins) => {
+                        setContextValue({ cellEditorConfig, cellEditorPlugins });
+                    },
+                }),
+                [contextValue.cellEditorConfig, contextValue.cellEditorPlugins],
+            )}>
+            {children}
+        </CellContext.Provider>
+    );
+}
+
+export function InsertTableDialog({
+    editor,
+    close,
+}: {
+    editor: LexicalEditor;
+    close: () => void;
+}): React.JSX.Element {
+    const [rows, setRows] = useState('5');
+    const [columns, setColumns] = useState('5');
+    const [isDisabled, setIsDisabled] = useState(true);
+
+    useEffect(() => {
+        const row = Number(rows);
+        const column = Number(columns);
+        if (row && row > 0 && row <= 500 && column && column > 0 && column <= 50) {
+            setIsDisabled(false);
+        } else {
+            setIsDisabled(true);
+        }
+    }, [rows, columns]);
+
+    const onClick = () => {
+        editor.dispatchCommand(INSERT_TABLE_COMMAND, {
+            columns,
+            rows,
+        });
+
+        close();
+    };
+
+    return (
+        <>
+            <Input
+                placeholder={'# of rows (1-500)'}
+                title="Rows"
+                onChange={setRows}
+                value={rows}
+                type="number"
+            />
+            <Input
+                placeholder={'# of columns (1-50)'}
+                title="Columns"
+                onChange={setColumns}
+                value={columns}
+                type="number"
+            />
+            <Button type="primary" disabled={isDisabled} onClick={onClick}>
+                Confirm
+            </Button>
+        </>
+    );
+}
+
+export function TablePlugin({
+    cellEditorConfig,
+    children,
+}: {
+    cellEditorConfig: CellEditorConfig;
+    children: React.JSX.Element | Array<React.JSX.Element>;
+}): React.JSX.Element | null {
+    const [editor] = useLexicalComposerContext();
+    const cellContext = useContext(CellContext);
+
+    useEffect(() => {
+        if (!editor.hasNodes([TableNode])) {
+            invariant(false, 'TablePlugin: TableNode is not registered on editor');
+        }
+
+        cellContext.set(cellEditorConfig, children);
+
+        return editor.registerCommand<InsertTableCommandPayload>(
+            INSERT_NEW_TABLE_COMMAND,
+            ({ columns, rows, includeHeaders }) => {
+                const tableNode = $createTableNodeWithDimensions(
+                    Number(rows),
+                    Number(columns),
+                    includeHeaders,
+                );
+                $insertNodes([tableNode]);
+                return true;
+            },
+            COMMAND_PRIORITY_EDITOR,
+        );
+    }, [cellContext, cellEditorConfig, children, editor]);
+
+    return null;
+}

package/src/client/components/inputv3/Rte/plugins/TestRecorderPlugin/index.tsx

@@ -0,0 +1,468 @@
+/**
+ * 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 {BaseSelection, LexicalEditor} from 'lexical';
+
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {$createParagraphNode, $createTextNode, $getRoot} from 'lexical';
+import * as React from 'react';
+import {useCallback, useEffect, useRef, useState} from 'react';
+import {IS_APPLE} from '../../shared/environment';
+import useLayoutEffect from '../../shared/useLayoutEffect';
+
+const copy = (text: string | null) => {
+  const textArea = document.createElement('textarea');
+  textArea.value = text || '';
+  textArea.style.position = 'absolute';
+  textArea.style.opacity = '0';
+  document.body?.appendChild(textArea);
+  textArea.focus();
+  textArea.select();
+  try {
+    const result = document.execCommand('copy');
+    // eslint-disable-next-line no-console
+    console.log(result);
+  } catch (error) {
+    console.error(error);
+  }
+  document.body?.removeChild(textArea);
+};
+
+const download = (filename: string, text: string | null) => {
+  const a = document.createElement('a');
+  a.setAttribute(
+    'href',
+    'data:text/plain;charset=utf-8,' + encodeURIComponent(text || ''),
+  );
+  a.setAttribute('download', filename);
+  a.style.display = 'none';
+  document.body?.appendChild(a);
+  a.click();
+  document.body?.removeChild(a);
+};
+
+const formatStep = (step: Step) => {
+  const formatOneStep = (name: string, value: Step['value']) => {
+    switch (name) {
+      case 'click': {
+        return `      await page.mouse.click(${value.x}, ${value.y});`;
+      }
+      case 'press': {
+        return `      await page.keyboard.press('${value}');`;
+      }
+      case 'keydown': {
+        return `      await page.keyboard.keydown('${value}');`;
+      }
+      case 'keyup': {
+        return `      await page.keyboard.keyup('${value}');`;
+      }
+      case 'type': {
+        return `      await page.keyboard.type('${value}');`;
+      }
+      case 'selectAll': {
+        return `      await selectAll(page);`;
+      }
+      case 'snapshot': {
+        return `      await assertHTMLSnapshot(page);
+      await assertSelection(page, {
+        anchorPath: [${value.anchorPath.toString()}],
+        anchorOffset: ${value.anchorOffset},
+        focusPath: [${value.focusPath.toString()}],
+        focusOffset: ${value.focusOffset},
+      });
+`;
+      }
+      default:
+        return ``;
+    }
+  };
+  const formattedStep = formatOneStep(step.name, step.value);
+  switch (step.count) {
+    case 1:
+      return formattedStep;
+    case 2:
+      return [formattedStep, formattedStep].join(`\n`);
+    default:
+      return `      await repeat(${step.count}, async () => {
+  ${formattedStep}
+      );`;
+  }
+};
+
+export function isSelectAll(event: KeyboardEvent): boolean {
+  return (
+    event.key.toLowerCase() === 'a' &&
+    (IS_APPLE ? event.metaKey : event.ctrlKey)
+  );
+}
+
+// stolen from LexicalSelection-test
+function sanitizeSelection(selection: Selection) {
+  const {anchorNode, focusNode} = selection;
+  let {anchorOffset, focusOffset} = selection;
+  if (anchorOffset !== 0) {
+    anchorOffset--;
+  }
+  if (focusOffset !== 0) {
+    focusOffset--;
+  }
+  return {anchorNode, anchorOffset, focusNode, focusOffset};
+}
+
+function getPathFromNodeToEditor(node: Node, rootElement: HTMLElement | null) {
+  let currentNode: Node | null | undefined = node;
+  const path = [];
+  while (currentNode !== rootElement) {
+    if (currentNode !== null && currentNode !== undefined) {
+      path.unshift(
+        Array.from(currentNode?.parentNode?.childNodes ?? []).indexOf(
+          currentNode as ChildNode,
+        ),
+      );
+    }
+    currentNode = currentNode?.parentNode;
+  }
+  return path;
+}
+
+const keyPresses = new Set([
+  'Enter',
+  'Backspace',
+  'Delete',
+  'Escape',
+  'ArrowLeft',
+  'ArrowRight',
+  'ArrowUp',
+  'ArrowDown',
+]);
+
+type Step = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  value: any;
+  count: number;
+  name: string;
+};
+
+type Steps = Step[];
+
+function useTestRecorder(
+  editor: LexicalEditor,
+): [JSX.Element, JSX.Element | null] {
+  const [steps, setSteps] = useState<Steps>([]);
+  const [isRecording, setIsRecording] = useState(false);
+  const [, setCurrentInnerHTML] = useState('');
+  const [templatedTest, setTemplatedTest] = useState('');
+  const previousSelectionRef = useRef<BaseSelection | null>(null);
+  const skipNextSelectionChangeRef = useRef(false);
+  const preRef = useRef<HTMLPreElement>(null);
+
+  const getCurrentEditor = useCallback(() => {
+    return editor;
+  }, [editor]);
+
+  const generateTestContent = useCallback(() => {
+    const rootElement = editor.getRootElement();
+    const browserSelection = window.getSelection();
+
+    if (
+      rootElement == null ||
+      browserSelection == null ||
+      browserSelection.anchorNode == null ||
+      browserSelection.focusNode == null ||
+      !rootElement.contains(browserSelection.anchorNode) ||
+      !rootElement.contains(browserSelection.focusNode)
+    ) {
+      return null;
+    }
+
+    return `
+/**
+ * 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 {
+  initializeE2E,
+  assertHTMLSnapshot,
+  assertSelection,
+  repeat,
+} from '../utils';
+import {selectAll} from '../keyboardShortcuts';
+import { RangeSelection } from 'lexical';
+import { NodeSelection } from 'lexical';
+
+describe('Test case', () => {
+  initializeE2E((e2e) => {
+    it('Should pass this test', async () => {
+      const {page} = e2e;
+
+      await page.focus('div[contenteditable="true"]');
+${steps.map(formatStep).join(`\n`)}
+    });
+});
+    `;
+  }, [editor, steps]);
+
+  // just a wrapper around inserting new actions so that we can
+  // coalesce some actions like insertText/moveNativeSelection
+  const pushStep = useCallback(
+    (name: string, value: Step['value']) => {
+      setSteps((currentSteps) => {
+        // trying to group steps
+        const currentIndex = steps.length - 1;
+        const lastStep = steps[currentIndex];
+        if (lastStep) {
+          if (lastStep.name === name) {
+            if (name === 'type') {
+              // for typing events we just append the text
+              return [
+                ...steps.slice(0, currentIndex),
+                {...lastStep, value: lastStep.value + value},
+              ];
+            } else {
+              // for other events we bump the counter if their values are the same
+              if (lastStep.value === value) {
+                return [
+                  ...steps.slice(0, currentIndex),
+                  {...lastStep, count: lastStep.count + 1},
+                ];
+              }
+            }
+          }
+        }
+        // could not group, just append a new one
+        return [...currentSteps, {count: 1, name, value}];
+      });
+    },
+    [steps, setSteps],
+  );
+
+  useLayoutEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (!isRecording) {
+        return;
+      }
+      const key = event.key;
+      if (isSelectAll(event)) {
+        pushStep('selectAll', '');
+      } else if (keyPresses.has(key)) {
+        pushStep('press', event.key);
+      } else if ([...key].length > 1) {
+        pushStep('keydown', event.key);
+      } else {
+        pushStep('type', event.key);
+      }
+    };
+
+    const onKeyUp = (event: KeyboardEvent) => {
+      if (!isRecording) {
+        return;
+      }
+      const key = event.key;
+      if (!keyPresses.has(key) && [...key].length > 1) {
+        pushStep('keyup', event.key);
+      }
+    };
+
+    return editor.registerRootListener(
+      (
+        rootElement: null | HTMLElement,
+        prevRootElement: null | HTMLElement,
+      ) => {
+        if (prevRootElement !== null) {
+          prevRootElement.removeEventListener('keydown', onKeyDown);
+          prevRootElement.removeEventListener('keyup', onKeyUp);
+        }
+        if (rootElement !== null) {
+          rootElement.addEventListener('keydown', onKeyDown);
+          rootElement.addEventListener('keyup', onKeyUp);
+        }
+      },
+    );
+  }, [editor, isRecording, pushStep]);
+
+  useLayoutEffect(() => {
+    if (preRef.current) {
+      preRef.current.scrollTo(0, preRef.current.scrollHeight);
+    }
+  }, [generateTestContent]);
+
+  useEffect(() => {
+    if (steps) {
+      const testContent = generateTestContent();
+      if (testContent !== null) {
+        setTemplatedTest(testContent);
+      }
+      if (preRef.current) {
+        preRef.current.scrollTo(0, preRef.current.scrollHeight);
+      }
+    }
+  }, [generateTestContent, steps]);
+
+  useEffect(() => {
+    const removeUpdateListener = editor.registerUpdateListener(
+      ({editorState, dirtyLeaves, dirtyElements}) => {
+        if (!isRecording) {
+          return;
+        }
+        const currentSelection = editorState._selection;
+        const previousSelection = previousSelectionRef.current;
+        const skipNextSelectionChange = skipNextSelectionChangeRef.current;
+        if (previousSelection !== currentSelection) {
+          if (
+            dirtyLeaves.size === 0 &&
+            dirtyElements.size === 0 &&
+            !skipNextSelectionChange
+          ) {
+            const browserSelection = window.getSelection();
+            if (
+              browserSelection &&
+              (browserSelection.anchorNode == null ||
+                browserSelection.focusNode == null)
+            ) {
+              return;
+            }
+          }
+          previousSelectionRef.current = currentSelection;
+        }
+        skipNextSelectionChangeRef.current = false;
+        const testContent = generateTestContent();
+        if (testContent !== null) {
+          setTemplatedTest(testContent);
+        }
+      },
+    );
+    return removeUpdateListener;
+  }, [editor, generateTestContent, isRecording, pushStep]);
+
+  // save innerHTML
+  useEffect(() => {
+    if (!isRecording) {
+      return;
+    }
+    const removeUpdateListener = editor.registerUpdateListener(() => {
+      const rootElement = editor.getRootElement();
+      if (rootElement !== null) {
+        setCurrentInnerHTML(rootElement?.innerHTML);
+      }
+    });
+    return removeUpdateListener;
+  }, [editor, isRecording]);
+
+  // clear editor and start recording
+  const toggleEditorSelection = useCallback(
+    (currentEditor: LexicalEditor) => {
+      if (!isRecording) {
+        currentEditor.update(() => {
+          const root = $getRoot();
+          root.clear();
+          const text = $createTextNode();
+          root.append($createParagraphNode().append(text));
+          text.select();
+        });
+        setSteps([]);
+      }
+      setIsRecording((currentIsRecording) => !currentIsRecording);
+    },
+    [isRecording],
+  );
+
+  const onSnapshotClick = useCallback(() => {
+    if (!isRecording) {
+      return;
+    }
+    const browserSelection = window.getSelection();
+    if (
+      browserSelection === null ||
+      browserSelection.anchorNode == null ||
+      browserSelection.focusNode == null
+    ) {
+      return;
+    }
+    const {anchorNode, anchorOffset, focusNode, focusOffset} =
+      sanitizeSelection(browserSelection);
+    const rootElement = getCurrentEditor().getRootElement();
+    let anchorPath;
+    if (anchorNode !== null) {
+      anchorPath = getPathFromNodeToEditor(anchorNode, rootElement);
+    }
+    let focusPath;
+    if (focusNode !== null) {
+      focusPath = getPathFromNodeToEditor(focusNode, rootElement);
+    }
+    pushStep('snapshot', {
+      anchorNode,
+      anchorOffset,
+      anchorPath,
+      focusNode,
+      focusOffset,
+      focusPath,
+    });
+  }, [pushStep, isRecording, getCurrentEditor]);
+
+  const onCopyClick = useCallback(() => {
+    copy(generateTestContent());
+  }, [generateTestContent]);
+
+  const onDownloadClick = useCallback(() => {
+    download('test.js', generateTestContent());
+  }, [generateTestContent]);
+
+  const button = (
+    <button
+      id="test-recorder-button"
+      className={`editor-dev-button ${isRecording ? 'active' : ''}`}
+      onClick={() => toggleEditorSelection(getCurrentEditor())}
+      title={isRecording ? 'Disable test recorder' : 'Enable test recorder'}
+    />
+  );
+  const output = isRecording ? (
+    <div className="test-recorder-output">
+      <div className="test-recorder-toolbar">
+        <button
+          className="test-recorder-button"
+          id="test-recorder-button-snapshot"
+          title="Insert snapshot"
+          onClick={onSnapshotClick}
+        />
+        <button
+          className="test-recorder-button"
+          id="test-recorder-button-copy"
+          title="Copy to clipboard"
+          onClick={onCopyClick}
+        />
+        <button
+          className="test-recorder-button"
+          id="test-recorder-button-download"
+          title="Download as a file"
+          onClick={onDownloadClick}
+        />
+      </div>
+      <pre id="test-recorder" ref={preRef}>
+        {templatedTest}
+      </pre>
+    </div>
+  ) : null;
+
+  return [button, output];
+}
+
+export default function TestRecorderPlugin(): JSX.Element {
+  const [editor] = useLexicalComposerContext();
+  const [testRecorderButton, testRecorderOutput] = useTestRecorder(editor);
+
+  return (
+    <>
+      {testRecorderButton}
+      {testRecorderOutput}
+    </>
+  );
+}

package/src/client/components/inputv3/Rte/plugins/TreeViewPlugin/index.tsx

@@ -0,0 +1,26 @@
+/**
+ * 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 {TreeView} from '@lexical/react/LexicalTreeView';
+import * as React from 'react';
+
+export default function TreeViewPlugin(): JSX.Element {
+  const [editor] = useLexicalComposerContext();
+  return (
+    <TreeView
+      viewClassName="tree-view-output"
+      treeTypeButtonClassName="debug-treetype-button"
+      timeTravelPanelClassName="debug-timetravel-panel"
+      timeTravelButtonClassName="debug-timetravel-button"
+      timeTravelPanelSliderClassName="debug-timetravel-panel-slider"
+      timeTravelPanelButtonClassName="debug-timetravel-panel-button"
+      editor={editor}
+    />
+  );
+}

package/src/client/components/inputv3/Rte/plugins/TwitterPlugin/index.ts

@@ -0,0 +1,41 @@
+/**
+ * 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 {$insertNodeToNearestRoot} from '@lexical/utils';
+import {COMMAND_PRIORITY_EDITOR, createCommand, LexicalCommand} from 'lexical';
+import {useEffect} from 'react';
+
+import {$createTweetNode, TweetNode} from '../../nodes/TweetNode';
+
+export const INSERT_TWEET_COMMAND: LexicalCommand<string> = createCommand(
+  'INSERT_TWEET_COMMAND',
+);
+
+export default function TwitterPlugin(): JSX.Element | null {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    if (!editor.hasNodes([TweetNode])) {
+      throw new Error('TwitterPlugin: TweetNode not registered on editor');
+    }
+
+    return editor.registerCommand<string>(
+      INSERT_TWEET_COMMAND,
+      (payload) => {
+        const tweetNode = $createTweetNode(payload);
+        $insertNodeToNearestRoot(tweetNode);
+
+        return true;
+      },
+      COMMAND_PRIORITY_EDITOR,
+    );
+  }, [editor]);
+
+  return null;
+}