@thangph2146/lexical-editor 0.0.1

package/src/nodes/autocomplete-node.tsx

@@ -0,0 +1,94 @@
+import type {
+  DOMExportOutput,
+  EditorConfig,
+  LexicalEditor,
+  NodeKey,
+  SerializedTextNode,
+  Spread,
+} from "lexical"
+import { TextNode } from "lexical"
+
+import { uuid as UUID } from "../plugins/autocomplete-plugin"
+
+export type SerializedAutocompleteNode = Spread<
+  {
+    uuid: string
+  },
+  SerializedTextNode
+>
+
+export class AutocompleteNode extends TextNode {
+  /**
+   * 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/main/packages/lexical-playground/src/plugins/AutocompletePlugin/index.tsx
+   */
+  __uuid: string
+
+  static clone(node: AutocompleteNode): AutocompleteNode {
+    return new AutocompleteNode(node.__text, node.__uuid, node.__key)
+  }
+
+  static getType(): "autocomplete" {
+    return "autocomplete"
+  }
+
+  static importDOM() {
+    // Never import from DOM
+    return null
+  }
+
+  static importJSON(
+    serializedNode: SerializedAutocompleteNode
+  ): AutocompleteNode {
+    return $createAutocompleteNode(
+      serializedNode.text,
+      serializedNode.uuid
+    ).updateFromJSON(serializedNode)
+  }
+
+  exportJSON(): SerializedAutocompleteNode {
+    return {
+      ...super.exportJSON(),
+      uuid: this.__uuid,
+    }
+  }
+
+  constructor(text: string, uuid: string, key?: NodeKey) {
+    super(text, key)
+    this.__uuid = uuid
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  updateDOM(prevNode: this, dom: HTMLElement, config: EditorConfig): boolean {
+    return false
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Lexical exportDOM signature
+  exportDOM(_editor: LexicalEditor): DOMExportOutput {
+    return { element: null }
+  }
+
+  excludeFromCopy() {
+    return true
+  }
+
+  createDOM(config: EditorConfig): HTMLElement {
+    const dom = super.createDOM(config)
+    dom.classList.add(config.theme.autocomplete)
+    if (this.__uuid !== UUID) {
+      dom.style.display = "none"
+    }
+    return dom
+  }
+}
+
+export function $createAutocompleteNode(
+  text: string,
+  uuid: string
+): AutocompleteNode {
+  return new AutocompleteNode(text, uuid).setMode("token")
+}

package/src/nodes/embeds/tweet-node.tsx

@@ -0,0 +1,224 @@
+"use client"
+import * as React from "react"
+import { JSX, useCallback, useEffect, useRef, useState } from "react"
+import { BlockWithAlignableContents } from "@lexical/react/LexicalBlockWithAlignableContents"
+import {
+  DecoratorBlockNode,
+  SerializedDecoratorBlockNode,
+} from "@lexical/react/LexicalDecoratorBlockNode"
+import type {
+  DOMConversionMap,
+  DOMConversionOutput,
+  DOMExportOutput,
+  EditorConfig,
+  ElementFormatType,
+  LexicalEditor,
+  LexicalNode,
+  NodeKey,
+  Spread,
+} from "lexical"
+
+const WIDGET_SCRIPT_URL = "https://platform.twitter.com/widgets.js"
+
+type TweetComponentProps = Readonly<{
+  className: Readonly<{
+    base: string
+    focus: string
+  }>
+  format: ElementFormatType | null
+  loadingComponent?: JSX.Element | string
+  nodeKey: NodeKey
+  onError?: (error: string) => void
+  onLoad?: () => void
+  tweetID: string
+}>
+
+function $convertTweetElement(
+  domNode: HTMLDivElement
+): DOMConversionOutput | null {
+  const id = domNode.getAttribute("data-lexical-tweet-id")
+  if (id) {
+    const node = $createTweetNode(id)
+    return { node }
+  }
+  return null
+}
+
+let isTwitterScriptLoading = true
+
+function TweetComponent({
+  className,
+  format,
+  loadingComponent,
+  nodeKey,
+  onError,
+  onLoad,
+  tweetID,
+}: TweetComponentProps) {
+  const containerRef = useRef<HTMLDivElement | null>(null)
+
+  const previousTweetIDRef = useRef<string>("")
+  const [isTweetLoading, setIsTweetLoading] = useState(false)
+
+  const createTweet = useCallback(async () => {
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      await (window as any).twttr.widgets.createTweet(tweetID, containerRef.current)
+
+      setIsTweetLoading(false)
+      isTwitterScriptLoading = false
+
+      if (onLoad) {
+        onLoad()
+      }
+    } catch (error) {
+      if (onError) {
+        onError(String(error))
+      }
+    }
+  }, [onError, onLoad, tweetID])
+
+  useEffect(() => {
+    if (tweetID !== previousTweetIDRef.current) {
+      // Use setTimeout to avoid calling setState synchronously within effect
+      setTimeout(() => {
+        setIsTweetLoading(true)
+      }, 0)
+
+      if (isTwitterScriptLoading) {
+        const script = document.createElement("script")
+        script.src = WIDGET_SCRIPT_URL
+        script.async = true
+        document.body?.appendChild(script)
+        script.onload = createTweet
+        if (onError) {
+          script.onerror = onError as OnErrorEventHandler
+        }
+      } else {
+        // Use setTimeout to avoid calling setState synchronously within effect
+        setTimeout(() => {
+          createTweet()
+        }, 0)
+      }
+
+      if (previousTweetIDRef) {
+        previousTweetIDRef.current = tweetID
+      }
+    }
+  }, [createTweet, onError, tweetID])
+
+  return (
+    <BlockWithAlignableContents
+      className={className}
+      format={format}
+      nodeKey={nodeKey}
+    >
+      {isTweetLoading ? loadingComponent : null}
+      <div
+        className="editor-tweet-container"
+        ref={containerRef}
+      />
+    </BlockWithAlignableContents>
+  )
+}
+
+export type SerializedTweetNode = Spread<
+  {
+    id: string
+  },
+  SerializedDecoratorBlockNode
+>
+
+export class TweetNode extends DecoratorBlockNode {
+  __id: string
+
+  static getType(): string {
+    return "tweet"
+  }
+
+  static clone(node: TweetNode): TweetNode {
+    return new TweetNode(node.__id, node.__format, node.__key)
+  }
+
+  static importJSON(serializedNode: SerializedTweetNode): TweetNode {
+    const node = $createTweetNode(serializedNode.id)
+    node.setFormat(serializedNode.format)
+    return node
+  }
+
+  exportJSON(): SerializedTweetNode {
+    return {
+      ...super.exportJSON(),
+      id: this.getId(),
+      type: "tweet",
+      version: 1,
+    }
+  }
+
+  static importDOM(): DOMConversionMap<HTMLDivElement> | null {
+    return {
+      div: (domNode: HTMLDivElement) => {
+        if (!domNode.hasAttribute("data-lexical-tweet-id")) {
+          return null
+        }
+        return {
+          conversion: $convertTweetElement,
+          priority: 2,
+        }
+      },
+    }
+  }
+
+  exportDOM(): DOMExportOutput {
+    const element = document.createElement("div")
+    element.setAttribute("data-lexical-tweet-id", this.__id)
+    const text = document.createTextNode(this.getTextContent())
+    element.append(text)
+    return { element }
+  }
+
+  constructor(id: string, format?: ElementFormatType, key?: NodeKey) {
+    super(format, key)
+    this.__id = id
+  }
+
+  getId(): string {
+    return this.__id
+  }
+
+  getTextContent(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Lexical override signature
+    _includeInert?: boolean | undefined,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Lexical override signature
+    _includeDirectionless?: false | undefined
+  ): string {
+    return `https://x.com/i/web/status/${this.__id}`
+  }
+
+  decorate(editor: LexicalEditor, config: EditorConfig): JSX.Element {
+    const embedBlockTheme = config.theme.embedBlock || {}
+    const className = {
+      base: embedBlockTheme.base || "",
+      focus: embedBlockTheme.focus || "",
+    }
+    return (
+      <TweetComponent
+        className={className}
+        format={this.__format}
+        loadingComponent="Loading..."
+        nodeKey={this.getKey()}
+        tweetID={this.__id}
+      />
+    )
+  }
+}
+
+export function $createTweetNode(tweetID: string): TweetNode {
+  return new TweetNode(tweetID)
+}
+
+export function $isTweetNode(
+  node: TweetNode | LexicalNode | null | undefined
+): node is TweetNode {
+  return node instanceof TweetNode
+}