@thangph2146/lexical-editor 0.0.1

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

@@ -0,0 +1,519 @@
+import * as React from "react"
+import { JSX } from "react"
+import { BlockWithAlignableContents } from "@lexical/react/LexicalBlockWithAlignableContents"
+import { useLexicalEditable } from "@lexical/react/useLexicalEditable"
+import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection"
+import { mergeRegister } from "@lexical/utils"
+import { ImageResizer } from "../../editor-ui/image-resizer"
+import { getContainerWidth } from "../../editor-ui/image-sizing"
+import { useEditorContainer } from "../../context/editor-container-context"
+import { cn } from "../../lib/utils"
+import {
+  DecoratorBlockNode,
+  SerializedDecoratorBlockNode,
+} from "@lexical/react/LexicalDecoratorBlockNode"
+import type {
+  DOMConversionMap,
+  DOMConversionOutput,
+  DOMExportOutput,
+  EditorConfig,
+  ElementFormatType,
+  LexicalEditor,
+  LexicalNode,
+  NodeKey,
+  Spread,
+} from "lexical"
+import { $getNodeByKey, CLICK_COMMAND, COMMAND_PRIORITY_LOW } from "lexical"
+
+type YouTubeComponentProps = Readonly<{
+  className: Readonly<{
+    base: string
+    focus: string
+  }>
+  format: ElementFormatType | null
+  nodeKey: NodeKey
+  videoID: string
+  width: "inherit" | number
+  height: "inherit" | number
+  maxWidth: number
+  fullWidth: boolean
+  editor: LexicalEditor
+}>
+
+function YouTubeComponent({
+  className,
+  format,
+  nodeKey,
+  videoID,
+  width,
+  height,
+  maxWidth,
+  fullWidth,
+  editor,
+}: YouTubeComponentProps) {
+  const isEditable = useLexicalEditable()
+  const [isSelected, setSelected, clearSelection] =
+    useLexicalNodeSelection(nodeKey)
+  const [isResizing, setIsResizing] = React.useState(false)
+  const wrapperRef = React.useRef<HTMLDivElement | null>(null)
+  const [wrapperElement, setWrapperElement] =
+    React.useState<HTMLDivElement | null>(null)
+  const buttonRef = React.useRef<HTMLButtonElement | null>(null)
+  const [containerWidth, setContainerWidth] = React.useState<number>(maxWidth)
+  const editorContainer = useEditorContainer()
+  const editorHardWidthLimit = editorContainer?.maxWidth
+  const updateNode = React.useCallback(
+    (updater: (node: YouTubeNode) => void) => {
+      editor.update(() => {
+        const node = $getNodeByKey(nodeKey)
+        if (node instanceof YouTubeNode) {
+          updater(node)
+        }
+      })
+    },
+    [editor, nodeKey]
+  )
+  // YouTube videos have 16:9 aspect ratio (width:height)
+  const aspectRatio = 16 / 9
+  const clampToContainer = React.useCallback(
+    (value: number) => {
+      const limit =
+        typeof editorHardWidthLimit === "number" && editorHardWidthLimit > 0
+          ? editorHardWidthLimit
+          : containerWidth || value
+      return Math.min(value, limit)
+    },
+    [containerWidth, editorHardWidthLimit]
+  )
+  React.useEffect(() => {
+    if (!wrapperElement) {
+      return
+    }
+    const editorRoot = editor.getRootElement()
+    const parentElement = wrapperElement.parentElement
+    const fieldContentElement = wrapperElement.closest(
+      "[data-slot='field-content']"
+    ) as HTMLElement | null
+    const getMeasurementTarget = () => parentElement ?? wrapperElement
+    const updateAvailableWidth = () => {
+      const measurementTarget = getMeasurementTarget()
+      const widthValue =
+        getContainerWidth(
+          measurementTarget,
+          editorRoot,
+          editorHardWidthLimit
+        ) || maxWidth
+      if (widthValue > 0) {
+        setContainerWidth((prev) => (prev === widthValue ? prev : widthValue))
+      }
+    }
+    updateAvailableWidth()
+    const hasResizeObserver =
+      typeof window !== "undefined" && typeof ResizeObserver !== "undefined"
+    let observer: ResizeObserver | null = null
+    if (hasResizeObserver) {
+      observer = new ResizeObserver(updateAvailableWidth)
+      const elementsToObserve = new Set<HTMLElement>()
+      elementsToObserve.add(wrapperElement)
+      if (parentElement && parentElement !== wrapperElement) {
+        elementsToObserve.add(parentElement)
+      }
+      if (fieldContentElement) {
+        elementsToObserve.add(fieldContentElement)
+      }
+      if (
+        editorRoot &&
+        editorRoot instanceof HTMLElement &&
+        editorRoot !== parentElement &&
+        editorRoot !== wrapperElement
+      ) {
+        elementsToObserve.add(editorRoot)
+      }
+      elementsToObserve.forEach((element) => observer?.observe(element))
+      return () => observer?.disconnect()
+    }
+    if (typeof window !== "undefined") {
+      window.addEventListener("resize", updateAvailableWidth)
+      return () => window.removeEventListener("resize", updateAvailableWidth)
+    }
+  }, [editor, editorHardWidthLimit, maxWidth, wrapperElement])
+  React.useEffect(() => {
+    if (!containerWidth) {
+      return
+    }
+    if (
+      editorHardWidthLimit &&
+      containerWidth > editorHardWidthLimit
+    ) {
+      setContainerWidth(editorHardWidthLimit)
+      return
+    }
+    updateNode((node) => {
+      if (node.getMaxWidth() !== containerWidth) {
+        node.setMaxWidth(containerWidth)
+      }
+    })
+  }, [containerWidth, editorHardWidthLimit, updateNode])
+  const availableWidth = Math.min(
+    containerWidth || maxWidth,
+    editorHardWidthLimit || containerWidth || maxWidth
+  )
+  const targetWidth =
+    typeof width === "number" ? width : availableWidth
+  const boundedWidth =
+    typeof targetWidth === "number"
+      ? Math.min(targetWidth, availableWidth)
+      : availableWidth
+  const renderedWidth = fullWidth ? availableWidth : boundedWidth
+  const safeRenderedWidth = editorHardWidthLimit
+    ? Math.min(renderedWidth, editorHardWidthLimit)
+    : renderedWidth
+  // CSS aspect-ratio expects width/height, not height/width
+  const cssAspectRatio =
+    typeof width === "number" && typeof height === "number" && height > 0
+      ? width / height
+      : aspectRatio
+  const isFocused = (isSelected || isResizing) && isEditable
+  const disablePlaybackInteractions = isEditable
+  const iframeWidth = safeRenderedWidth
+  const iframeHeight = Math.round(iframeWidth / aspectRatio)
+  const handleWrapperRef = React.useCallback((node: HTMLDivElement | null) => {
+    wrapperRef.current = node
+    setWrapperElement(node)
+  }, [])
+  React.useEffect(() => {
+    if (!isEditable) {
+      return
+    }
+    return mergeRegister(
+      editor.registerCommand<MouseEvent>(
+        CLICK_COMMAND,
+        (event) => {
+          const wrapper = wrapperRef.current
+          if (!wrapper || !(event.target instanceof Node)) {
+            return false
+          }
+          if (!wrapper.contains(event.target)) {
+            return false
+          }
+          if (isResizing) {
+            return true
+          }
+          if (event.shiftKey) {
+            setSelected(!isSelected)
+          } else {
+            clearSelection()
+            setSelected(true)
+          }
+          event.preventDefault()
+          return true
+        },
+        COMMAND_PRIORITY_LOW
+      )
+    )
+  }, [clearSelection, editor, isEditable, isResizing, isSelected, setSelected])
+  React.useEffect(() => {
+    if (
+      !containerWidth ||
+      typeof width !== "number" ||
+      fullWidth ||
+      width <= containerWidth
+    ) {
+      return
+    }
+    updateNode((node) => {
+      const nextWidth = clampToContainer(width)
+      const nextHeight = Math.round(nextWidth / aspectRatio)
+      node.setWidthAndHeight(nextWidth, nextHeight)
+    })
+  }, [
+    aspectRatio,
+    clampToContainer,
+    containerWidth,
+    editorHardWidthLimit,
+    fullWidth,
+    updateNode,
+    width,
+  ])
+
+  return (
+    <BlockWithAlignableContents
+      className={className}
+      format={format}
+      nodeKey={nodeKey}
+    >
+      <div
+        style={{
+          width: fullWidth
+            ? "100%"
+            : `${Math.max(safeRenderedWidth, 0)}px`,
+          aspectRatio: cssAspectRatio,
+          maxWidth: "100%",
+          height: "auto",
+        }}
+        className={cn(
+          "editor-embed-frame relative inline-block",
+          fullWidth ? "editor-embed-frame--full" : "editor-embed-frame--inline"
+        )}
+        data-editor-embed-fullwidth={fullWidth ? "true" : "false"}
+        ref={handleWrapperRef}
+      >
+        <iframe
+          width={iframeWidth}
+          height={iframeHeight}
+          src={`https://www.youtube-nocookie.com/embed/${videoID}`}
+          frameBorder="0"
+          allow={
+            disablePlaybackInteractions
+              ? "accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              : "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          }
+          allowFullScreen={true}
+          title="YouTube video"
+          className={`block absolute inset-0 h-full w-full ${
+            disablePlaybackInteractions ? "pointer-events-none" : ""
+          }`}
+          tabIndex={disablePlaybackInteractions ? -1 : undefined}
+          aria-label={
+            disablePlaybackInteractions
+              ? "YouTube video preview disabled while editing"
+              : "YouTube video"
+          }
+        />
+        {isFocused && (
+          <ImageResizer
+            editor={editor}
+            buttonRef={buttonRef}
+            mediaRef={wrapperRef}
+            onResizeStart={() => {
+              setIsResizing(true)
+              updateNode((node) => node.setFullWidth(false))
+            }}
+            onResizeEnd={(nextWidth, nextHeight) => {
+              setTimeout(() => setIsResizing(false), 200)
+              const finalWidth =
+                typeof nextWidth === "number"
+                  ? clampToContainer(nextWidth)
+                  : nextWidth
+              const finalHeight =
+                typeof finalWidth === "number"
+                  ? Math.round(finalWidth / aspectRatio)
+                  : nextHeight
+              updateNode((node) =>
+                node.setWidthAndHeight(finalWidth, finalHeight)
+              )
+            }}
+            onSetFullWidth={() => {
+              updateNode((node) => node.setFullWidth(true))
+            }}
+          />
+        )}
+      </div>
+    </BlockWithAlignableContents>
+  )
+}
+
+export type SerializedYouTubeNode = Spread<
+  {
+    videoID: string
+    width?: number
+    height?: number
+    maxWidth?: number
+    fullWidth?: boolean
+  },
+  SerializedDecoratorBlockNode
+>
+
+function $convertYoutubeElement(
+  domNode: HTMLElement
+): null | DOMConversionOutput {
+  const videoID = domNode.getAttribute("data-lexical-youtube")
+  if (videoID) {
+    const node = $createYouTubeNode(videoID)
+    return { node }
+  }
+  return null
+}
+
+export class YouTubeNode extends DecoratorBlockNode {
+  __id: string
+  __width: "inherit" | number
+  __height: "inherit" | number
+  __maxWidth: number
+  __fullWidth: boolean
+
+  static getType(): string {
+    return "youtube"
+  }
+
+  static clone(node: YouTubeNode): YouTubeNode {
+    return new YouTubeNode(
+      node.__id,
+      node.__format,
+      node.__width,
+      node.__height,
+      node.__maxWidth,
+      node.__fullWidth,
+      node.__key
+    )
+  }
+
+  static importJSON(serializedNode: SerializedYouTubeNode): YouTubeNode {
+    const node = $createYouTubeNode(
+      serializedNode.videoID,
+      serializedNode.width,
+      serializedNode.height,
+      serializedNode.maxWidth ?? 640,
+      serializedNode.fullWidth
+    )
+    node.setFormat(serializedNode.format)
+    return node
+  }
+
+  exportJSON(): SerializedYouTubeNode {
+    return {
+      ...super.exportJSON(),
+      type: "youtube",
+      version: 1,
+      videoID: this.__id,
+      width: this.__width === "inherit" ? undefined : (this.__width as number),
+      height:
+        this.__height === "inherit" ? undefined : (this.__height as number),
+      maxWidth: this.__maxWidth,
+      fullWidth: this.__fullWidth,
+    }
+  }
+
+  constructor(
+    id: string,
+    format?: ElementFormatType,
+    width?: "inherit" | number,
+    height?: "inherit" | number,
+    maxWidth: number = 640,
+    fullWidth?: boolean,
+    key?: NodeKey
+  ) {
+    super(format, key)
+    this.__id = id
+    this.__width = width ?? "inherit"
+    this.__height = height ?? "inherit"
+    this.__maxWidth = maxWidth
+    // Default to not full width so align controls remain effective
+    this.__fullWidth = fullWidth ?? false
+  }
+
+  exportDOM(): DOMExportOutput {
+    const element = document.createElement("iframe")
+    element.setAttribute("data-lexical-youtube", this.__id)
+    if (typeof this.__width === "number") {
+      element.setAttribute("width", String(this.__width))
+    }
+    if (typeof this.__height === "number") {
+      element.setAttribute("height", String(this.__height))
+    }
+    element.setAttribute(
+      "src",
+      `https://www.youtube-nocookie.com/embed/${this.__id}`
+    )
+    element.setAttribute("frameborder", "0")
+    element.setAttribute("loading", "lazy")
+    element.setAttribute(
+      "allow",
+      "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+    )
+    element.setAttribute("allowfullscreen", "true")
+    element.setAttribute("title", "YouTube video")
+    return { element }
+  }
+
+  static importDOM(): DOMConversionMap | null {
+    return {
+      iframe: (domNode: HTMLElement) => {
+        if (!domNode.hasAttribute("data-lexical-youtube")) {
+          return null
+        }
+        return {
+          conversion: $convertYoutubeElement,
+          priority: 1,
+        }
+      },
+    }
+  }
+
+  updateDOM(): false {
+    return false
+  }
+
+  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://www.youtube.com/watch?v=${this.__id}`
+  }
+
+  decorate(editor: LexicalEditor, config: EditorConfig): JSX.Element {
+    const embedBlockTheme = config.theme.embedBlock || {}
+    const className = {
+      base: embedBlockTheme.base || "",
+      focus: embedBlockTheme.focus || "",
+    }
+    return (
+      <YouTubeComponent
+        className={className}
+        format={this.__format}
+        nodeKey={this.getKey()}
+        videoID={this.__id}
+        width={this.__width}
+        height={this.__height}
+        maxWidth={this.__maxWidth}
+        fullWidth={this.__fullWidth}
+        editor={editor}
+      />
+    )
+  }
+
+  setWidthAndHeight(width: "inherit" | number, height: "inherit" | number) {
+    const writable = this.getWritable()
+    writable.__width = width
+    writable.__height = height
+  }
+  getMaxWidth(): number {
+    return this.__maxWidth
+  }
+
+  setMaxWidth(maxWidth: number) {
+    const writable = this.getWritable()
+    writable.__maxWidth = maxWidth
+  }
+
+  isFullWidth(): boolean {
+    return this.__fullWidth
+  }
+
+  setFullWidth(fullWidth: boolean) {
+    const writable = this.getWritable()
+    writable.__fullWidth = fullWidth
+  }
+}
+
+export function $createYouTubeNode(
+  videoID: string,
+  width?: number,
+  height?: number,
+  maxWidth?: number,
+  fullWidth?: boolean
+): YouTubeNode {
+  return new YouTubeNode(videoID, undefined, width, height, maxWidth, fullWidth)
+}
+
+export function $isYouTubeNode(
+  node: YouTubeNode | LexicalNode | null | undefined
+): node is YouTubeNode {
+  return node instanceof YouTubeNode
+}

package/src/nodes/emoji-node.tsx

@@ -0,0 +1,83 @@
+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: this, 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 {
+    return $createEmojiNode(
+      serializedNode.className,
+      serializedNode.text
+    ).updateFromJSON(serializedNode)
+  }
+
+  exportJSON(): SerializedEmojiNode {
+    return {
+      ...super.exportJSON(),
+      className: this.getClassName(),
+    }
+  }
+
+  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)
+}