5htp-core 0.4.8 → 0.4.9

package/src/client/components/inputv3/Rte/nodes/AutocompleteNode.tsx

@@ -0,0 +1,119 @@
+/**
+ * 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,
+  EditorThemeClassName,
+  LexicalEditor,
+  NodeKey,
+  SerializedLexicalNode,
+  Spread,
+} from 'lexical';
+
+import {DecoratorNode} 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<
+  {
+    uuid: string;
+  },
+  SerializedLexicalNode
+>;
+
+export class AutocompleteNode extends DecoratorNode<JSX.Element | null> {
+  /**
+   * A unique uuid is generated for each session and assigned to the instance.
+   * This helps to:
+   * - Ensures max one Autocomplete node per session.
+   * - Ensure that when collaboration is enabled, this node is not shown in
+   *   other sessions.
+   * See https://github.com/facebook/lexical/blob/master/packages/lexical-playground/src/plugins/AutocompletePlugin/index.tsx#L39
+   */
+  __uuid: string;
+
+  static clone(node: AutocompleteNode): AutocompleteNode {
+    return new AutocompleteNode(node.__uuid, 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(editor: LexicalEditor, config: EditorConfig): JSX.Element | null {
+    if (this.__uuid !== UUID) {
+      return null;
+    }
+    return <AutocompleteComponent className={config.theme.autocomplete} />;
+  }
+}
+
+export function $createAutocompleteNode(uuid: string): AutocompleteNode {
+  return new AutocompleteNode(uuid);
+}
+
+function AutocompleteComponent({
+  className,
+}: {
+  className: EditorThemeClassName;
+}): JSX.Element {
+  const [suggestion] = useSharedAutocompleteContext();
+  const userAgentData = window.navigator.userAgentData;
+  const isMobile =
+    userAgentData !== undefined
+      ? userAgentData.mobile
+      : window.innerWidth <= 800 && window.innerHeight <= 600;
+  return (
+    <span className={className} spellCheck="false">
+      {suggestion} {isMobile ? '(SWIPE \u2B95)' : '(TAB)'}
+    </span>
+  );
+}

package/src/client/components/inputv3/Rte/nodes/EmojiNode.tsx

@@ -0,0 +1,102 @@
+/**
+ * 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,
+  NodeKey,
+  SerializedTextNode,
+  Spread,
+} from 'lexical';
+
+import {$applyNodeReplacement, TextNode} from 'lexical';
+
+export type SerializedEmojiNode = Spread<
+  {
+    className: string;
+  },
+  SerializedTextNode
+>;
+
+export class EmojiNode extends TextNode {
+  __className: string;
+
+  static getType(): string {
+    return 'emoji';
+  }
+
+  static clone(node: EmojiNode): EmojiNode {
+    return new EmojiNode(node.__className, node.__text, node.__key);
+  }
+
+  constructor(className: string, text: string, key?: NodeKey) {
+    super(text, key);
+    this.__className = className;
+  }
+
+  createDOM(config: EditorConfig): HTMLElement {
+    const dom = document.createElement('span');
+    const inner = super.createDOM(config);
+    dom.className = this.__className;
+    inner.className = 'emoji-inner';
+    dom.appendChild(inner);
+    return dom;
+  }
+
+  updateDOM(
+    prevNode: TextNode,
+    dom: HTMLElement,
+    config: EditorConfig,
+  ): boolean {
+    const inner = dom.firstChild;
+    if (inner === null) {
+      return true;
+    }
+    super.updateDOM(prevNode, inner as HTMLElement, config);
+    return false;
+  }
+
+  static importJSON(serializedNode: SerializedEmojiNode): EmojiNode {
+    const node = $createEmojiNode(
+      serializedNode.className,
+      serializedNode.text,
+    );
+    node.setFormat(serializedNode.format);
+    node.setDetail(serializedNode.detail);
+    node.setMode(serializedNode.mode);
+    node.setStyle(serializedNode.style);
+    return node;
+  }
+
+  exportJSON(): SerializedEmojiNode {
+    return {
+      ...super.exportJSON(),
+      className: this.getClassName(),
+      type: 'emoji',
+    };
+  }
+
+  getClassName(): string {
+    const self = this.getLatest();
+    return self.__className;
+  }
+}
+
+export function $isEmojiNode(
+  node: LexicalNode | null | undefined,
+): node is EmojiNode {
+  return node instanceof EmojiNode;
+}
+
+export function $createEmojiNode(
+  className: string,
+  emojiText: string,
+): EmojiNode {
+  const node = new EmojiNode(className, emojiText).setMode('token');
+  return $applyNodeReplacement(node);
+}

package/src/client/components/inputv3/Rte/nodes/EquationComponent.tsx

@@ -0,0 +1,141 @@
+/**
+ * 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 {useLexicalEditable} from '@lexical/react/useLexicalEditable';
+import {mergeRegister} from '@lexical/utils';
+import {
+  $getNodeByKey,
+  $getSelection,
+  $isNodeSelection,
+  COMMAND_PRIORITY_HIGH,
+  KEY_ESCAPE_COMMAND,
+  NodeKey,
+  SELECTION_CHANGE_COMMAND,
+} from 'lexical';
+import * as React from 'react';
+import {useCallback, useEffect, useRef, useState} from 'react';
+import {ErrorBoundary} from 'react-error-boundary';
+
+import EquationEditor from '../ui/EquationEditor';
+import KatexRenderer from '../ui/KatexRenderer';
+import {$isEquationNode} from './EquationNode';
+
+type EquationComponentProps = {
+  equation: string;
+  inline: boolean;
+  nodeKey: NodeKey;
+};
+
+export default function EquationComponent({
+  equation,
+  inline,
+  nodeKey,
+}: EquationComponentProps): JSX.Element {
+  const [editor] = useLexicalComposerContext();
+  const isEditable = useLexicalEditable();
+  const [equationValue, setEquationValue] = useState(equation);
+  const [showEquationEditor, setShowEquationEditor] = useState<boolean>(false);
+  const inputRef = useRef(null);
+
+  const onHide = useCallback(
+    (restoreSelection?: boolean) => {
+      setShowEquationEditor(false);
+      editor.update(() => {
+        const node = $getNodeByKey(nodeKey);
+        if ($isEquationNode(node)) {
+          node.setEquation(equationValue);
+          if (restoreSelection) {
+            node.selectNext(0, 0);
+          }
+        }
+      });
+    },
+    [editor, equationValue, nodeKey],
+  );
+
+  useEffect(() => {
+    if (!showEquationEditor && equationValue !== equation) {
+      setEquationValue(equation);
+    }
+  }, [showEquationEditor, equation, equationValue]);
+
+  useEffect(() => {
+    if (!isEditable) {
+      return;
+    }
+    if (showEquationEditor) {
+      return mergeRegister(
+        editor.registerCommand(
+          SELECTION_CHANGE_COMMAND,
+          (payload) => {
+            const activeElement = document.activeElement;
+            const inputElem = inputRef.current;
+            if (inputElem !== activeElement) {
+              onHide();
+            }
+            return false;
+          },
+          COMMAND_PRIORITY_HIGH,
+        ),
+        editor.registerCommand(
+          KEY_ESCAPE_COMMAND,
+          (payload) => {
+            const activeElement = document.activeElement;
+            const inputElem = inputRef.current;
+            if (inputElem === activeElement) {
+              onHide(true);
+              return true;
+            }
+            return false;
+          },
+          COMMAND_PRIORITY_HIGH,
+        ),
+      );
+    } else {
+      return editor.registerUpdateListener(({editorState}) => {
+        const isSelected = editorState.read(() => {
+          const selection = $getSelection();
+          return (
+            $isNodeSelection(selection) &&
+            selection.has(nodeKey) &&
+            selection.getNodes().length === 1
+          );
+        });
+        if (isSelected) {
+          setShowEquationEditor(true);
+        }
+      });
+    }
+  }, [editor, nodeKey, onHide, showEquationEditor, isEditable]);
+
+  return (
+    <>
+      {showEquationEditor && isEditable ? (
+        <EquationEditor
+          equation={equationValue}
+          setEquation={setEquationValue}
+          inline={inline}
+          ref={inputRef}
+        />
+      ) : (
+        <ErrorBoundary onError={(e) => editor._onError(e)} fallback={null}>
+          <KatexRenderer
+            equation={equationValue}
+            inline={inline}
+            onDoubleClick={() => {
+              if (isEditable) {
+                setShowEquationEditor(true);
+              }
+            }}
+          />
+        </ErrorBoundary>
+      )}
+    </>
+  );
+}

package/src/client/components/inputv3/Rte/nodes/EquationNode.tsx

@@ -0,0 +1,174 @@
+/**
+ * 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 {
+  DOMConversionMap,
+  DOMConversionOutput,
+  EditorConfig,
+  LexicalNode,
+  NodeKey,
+  SerializedLexicalNode,
+  Spread,
+} from 'lexical';
+
+import katex from 'katex';
+import {$applyNodeReplacement, DecoratorNode, DOMExportOutput} from 'lexical';
+import * as React from 'react';
+import {Suspense} from 'react';
+
+const EquationComponent = React.lazy(() => import('./EquationComponent'));
+
+export type SerializedEquationNode = Spread<
+  {
+    equation: string;
+    inline: boolean;
+  },
+  SerializedLexicalNode
+>;
+
+function $convertEquationElement(
+  domNode: HTMLElement,
+): null | DOMConversionOutput {
+  let equation = domNode.getAttribute('data-lexical-equation');
+  const inline = domNode.getAttribute('data-lexical-inline') === 'true';
+  // Decode the equation from base64
+  equation = atob(equation || '');
+  if (equation) {
+    const node = $createEquationNode(equation, inline);
+    return {node};
+  }
+
+  return null;
+}
+
+export class EquationNode extends DecoratorNode<JSX.Element> {
+  __equation: string;
+  __inline: boolean;
+
+  static getType(): string {
+    return 'equation';
+  }
+
+  static clone(node: EquationNode): EquationNode {
+    return new EquationNode(node.__equation, node.__inline, node.__key);
+  }
+
+  constructor(equation: string, inline?: boolean, key?: NodeKey) {
+    super(key);
+    this.__equation = equation;
+    this.__inline = inline ?? false;
+  }
+
+  static importJSON(serializedNode: SerializedEquationNode): EquationNode {
+    const node = $createEquationNode(
+      serializedNode.equation,
+      serializedNode.inline,
+    );
+    return node;
+  }
+
+  exportJSON(): SerializedEquationNode {
+    return {
+      equation: this.getEquation(),
+      inline: this.__inline,
+      type: 'equation',
+      version: 1,
+    };
+  }
+
+  createDOM(_config: EditorConfig): HTMLElement {
+    const element = document.createElement(this.__inline ? 'span' : 'div');
+    // EquationNodes should implement `user-action:none` in their CSS to avoid issues with deletion on Android.
+    element.className = 'editor-equation';
+    return element;
+  }
+
+  exportDOM(): DOMExportOutput {
+    const element = document.createElement(this.__inline ? 'span' : 'div');
+    // Encode the equation as base64 to avoid issues with special characters
+    const equation = btoa(this.__equation);
+    element.setAttribute('data-lexical-equation', equation);
+    element.setAttribute('data-lexical-inline', `${this.__inline}`);
+    katex.render(this.__equation, element, {
+      displayMode: !this.__inline, // true === block display //
+      errorColor: '#cc0000',
+      output: 'html',
+      strict: 'warn',
+      throwOnError: false,
+      trust: false,
+    });
+    return {element};
+  }
+
+  static importDOM(): DOMConversionMap | null {
+    return {
+      div: (domNode: HTMLElement) => {
+        if (!domNode.hasAttribute('data-lexical-equation')) {
+          return null;
+        }
+        return {
+          conversion: $convertEquationElement,
+          priority: 2,
+        };
+      },
+      span: (domNode: HTMLElement) => {
+        if (!domNode.hasAttribute('data-lexical-equation')) {
+          return null;
+        }
+        return {
+          conversion: $convertEquationElement,
+          priority: 1,
+        };
+      },
+    };
+  }
+
+  updateDOM(prevNode: EquationNode): boolean {
+    // If the inline property changes, replace the element
+    return this.__inline !== prevNode.__inline;
+  }
+
+  getTextContent(): string {
+    return this.__equation;
+  }
+
+  getEquation(): string {
+    return this.__equation;
+  }
+
+  setEquation(equation: string): void {
+    const writable = this.getWritable();
+    writable.__equation = equation;
+  }
+
+  decorate(): JSX.Element {
+    return (
+      <Suspense fallback={null}>
+        <EquationComponent
+          equation={this.__equation}
+          inline={this.__inline}
+          nodeKey={this.__key}
+        />
+      </Suspense>
+    );
+  }
+}
+
+export function $createEquationNode(
+  equation = '',
+  inline = false,
+): EquationNode {
+  const equationNode = new EquationNode(equation, inline);
+  return $applyNodeReplacement(equationNode);
+}
+
+export function $isEquationNode(
+  node: LexicalNode | null | undefined,
+): node is EquationNode {
+  return node instanceof EquationNode;
+}

package/src/client/components/inputv3/Rte/nodes/FigmaNode.tsx

@@ -0,0 +1,135 @@
+/**
+ * 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,
+  ElementFormatType,
+  LexicalEditor,
+  LexicalNode,
+  NodeKey,
+  Spread,
+} from 'lexical';
+
+import {BlockWithAlignableContents} from '@lexical/react/LexicalBlockWithAlignableContents';
+import {
+  DecoratorBlockNode,
+  SerializedDecoratorBlockNode,
+} from '@lexical/react/LexicalDecoratorBlockNode';
+import * as React from 'react';
+
+type FigmaComponentProps = Readonly<{
+  className: Readonly<{
+    base: string;
+    focus: string;
+  }>;
+  format: ElementFormatType | null;
+  nodeKey: NodeKey;
+  documentID: string;
+}>;
+
+function FigmaComponent({
+  className,
+  format,
+  nodeKey,
+  documentID,
+}: FigmaComponentProps) {
+  return (
+    <BlockWithAlignableContents
+      className={className}
+      format={format}
+      nodeKey={nodeKey}>
+      <iframe
+        width="560"
+        height="315"
+        src={`https://www.figma.com/embed?embed_host=lexical&url=\
+        https://www.figma.com/file/${documentID}`}
+        allowFullScreen={true}
+      />
+    </BlockWithAlignableContents>
+  );
+}
+
+export type SerializedFigmaNode = Spread<
+  {
+    documentID: string;
+  },
+  SerializedDecoratorBlockNode
+>;
+
+export class FigmaNode extends DecoratorBlockNode {
+  __id: string;
+
+  static getType(): string {
+    return 'figma';
+  }
+
+  static clone(node: FigmaNode): FigmaNode {
+    return new FigmaNode(node.__id, node.__format, node.__key);
+  }
+
+  static importJSON(serializedNode: SerializedFigmaNode): FigmaNode {
+    const node = $createFigmaNode(serializedNode.documentID);
+    node.setFormat(serializedNode.format);
+    return node;
+  }
+
+  exportJSON(): SerializedFigmaNode {
+    return {
+      ...super.exportJSON(),
+      documentID: this.__id,
+      type: 'figma',
+      version: 1,
+    };
+  }
+
+  constructor(id: string, format?: ElementFormatType, key?: NodeKey) {
+    super(format, key);
+    this.__id = id;
+  }
+
+  updateDOM(): false {
+    return false;
+  }
+
+  getId(): string {
+    return this.__id;
+  }
+
+  getTextContent(
+    _includeInert?: boolean | undefined,
+    _includeDirectionless?: false | undefined,
+  ): string {
+    return `https://www.figma.com/file/${this.__id}`;
+  }
+
+  decorate(_editor: LexicalEditor, config: EditorConfig): JSX.Element {
+    const embedBlockTheme = config.theme.embedBlock || {};
+    const className = {
+      base: embedBlockTheme.base || '',
+      focus: embedBlockTheme.focus || '',
+    };
+    return (
+      <FigmaComponent
+        className={className}
+        format={this.__format}
+        nodeKey={this.getKey()}
+        documentID={this.__id}
+      />
+    );
+  }
+}
+
+export function $createFigmaNode(documentID: string): FigmaNode {
+  return new FigmaNode(documentID);
+}
+
+export function $isFigmaNode(
+  node: FigmaNode | LexicalNode | null | undefined,
+): node is FigmaNode {
+  return node instanceof FigmaNode;
+}