@thangph2146/lexical-editor 0.0.1

package/src/nodes/image-node.tsx

@@ -0,0 +1,328 @@
+import * as React from "react"
+import { JSX, Suspense } from "react"
+import type {
+  DOMConversionMap,
+  DOMConversionOutput,
+  DOMExportOutput,
+  EditorConfig,
+  EditorState,
+  LexicalEditor,
+  LexicalNode,
+  NodeKey,
+  SerializedEditor,
+  SerializedLexicalNode,
+  Spread,
+} from "lexical"
+import {
+  $applyNodeReplacement,
+  $getRoot,
+  createEditor,
+  DecoratorNode,
+  ParagraphNode,
+  RootNode,
+  TextNode,
+} from "lexical"
+
+const ImageComponent = React.lazy(() => import("../editor-ui/image-component"))
+
+const WHITESPACE_REGEX = /[\u200B\u00A0\s]+/g
+
+export interface ImagePayload {
+  altText: string
+  caption?: LexicalEditor
+  height?: number
+  key?: NodeKey
+  maxWidth?: number
+  showCaption?: boolean
+  src: string
+  width?: number
+  captionsEnabled?: boolean
+  fullWidth?: boolean
+}
+
+function editorStateHasContent(editorState: EditorState): boolean {
+  return editorState.read(() => {
+    const root = $getRoot()
+    const text = root.getTextContent().replace(WHITESPACE_REGEX, "")
+    return text.length > 0
+  })
+}
+
+function captionHasContent(editor: LexicalEditor): boolean {
+  return editorStateHasContent(editor.getEditorState())
+}
+
+function clearCaption(editor: LexicalEditor): void {
+  editor.update(() => {
+    const root = $getRoot()
+    root.clear()
+  })
+}
+
+function isGoogleDocCheckboxImg(img: HTMLImageElement): boolean {
+  return (
+    img.parentElement != null &&
+    img.parentElement.tagName === "LI" &&
+    img.previousSibling === null &&
+    img.getAttribute("aria-roledescription") === "checkbox"
+  )
+}
+
+function $convertImageElement(domNode: Node): null | DOMConversionOutput {
+  const img = domNode as HTMLImageElement
+  if (img.src.startsWith("file:///") || isGoogleDocCheckboxImg(img)) {
+    return null
+  }
+  const { alt: altText, src, width, height } = img
+  const node = $createImageNode({ altText, height, src, width })
+  return { node }
+}
+
+export type SerializedImageNode = Spread<
+  {
+    altText: string
+    caption: SerializedEditor
+    height?: number
+    maxWidth: number
+    showCaption: boolean
+    src: string
+    width?: number
+    fullWidth?: boolean
+  },
+  SerializedLexicalNode
+>
+
+export class ImageNode extends DecoratorNode<JSX.Element> {
+  __src: string
+  __altText: string
+  __width: "inherit" | number
+  __height: "inherit" | number
+  __maxWidth: number
+  __showCaption: boolean
+  __caption: LexicalEditor
+  // Captions cannot yet be used within editor cells
+  __captionsEnabled: boolean
+  __fullWidth: boolean
+
+  static getType(): string {
+    return "image"
+  }
+
+  static clone(node: ImageNode): ImageNode {
+    return new ImageNode(
+      node.__src,
+      node.__altText,
+      node.__maxWidth,
+      node.__width,
+      node.__height,
+      node.__showCaption,
+      node.__caption,
+      node.__captionsEnabled,
+      node.__fullWidth,
+      node.__key
+    )
+  }
+
+  static importJSON(serializedNode: SerializedImageNode): ImageNode {
+    const { altText, height, width, maxWidth, caption, src, showCaption, fullWidth } =
+      serializedNode
+
+    const node = $createImageNode({
+      altText,
+      height,
+      maxWidth,
+      showCaption: showCaption === true,
+      src,
+      width,
+      fullWidth,
+    })
+
+    if (showCaption === true && caption?.editorState) {
+      const parsedState = node.__caption.parseEditorState(caption.editorState)
+
+      if (editorStateHasContent(parsedState)) {
+        node.__caption.setEditorState(parsedState)
+        return node
+      }
+    }
+
+    node.__showCaption = false
+    clearCaption(node.__caption)
+    return node
+  }
+
+  exportDOM(): DOMExportOutput {
+    const element = document.createElement("img")
+    element.setAttribute("src", this.__src)
+    element.setAttribute("alt", this.__altText)
+    if (typeof this.__width === "number") {
+      element.setAttribute("width", this.__width.toString())
+    }
+    if (typeof this.__height === "number") {
+      element.setAttribute("height", this.__height.toString())
+    }
+    return { element }
+  }
+
+  static importDOM(): DOMConversionMap | null {
+    return {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      img: (node: Node) => ({
+        conversion: $convertImageElement,
+        priority: 0,
+      }),
+    }
+  }
+
+  constructor(
+    src: string,
+    altText: string,
+    maxWidth: number,
+    width?: "inherit" | number,
+    height?: "inherit" | number,
+    showCaption?: boolean,
+    caption?: LexicalEditor,
+    captionsEnabled?: boolean,
+    fullWidth?: boolean,
+    key?: NodeKey
+  ) {
+    super(key)
+    this.__src = src
+    this.__altText = altText
+    this.__maxWidth = maxWidth
+    this.__width = width || "inherit"
+    this.__height = height || "inherit"
+    this.__showCaption = showCaption || false
+    this.__caption =
+      caption ||
+      createEditor({
+        namespace: "ImageCaption",
+        nodes: [RootNode, TextNode, ParagraphNode],
+      })
+    this.__captionsEnabled = captionsEnabled || captionsEnabled === undefined
+    // Default image to full width if not specified for consistency with YouTube
+    this.__fullWidth = fullWidth === undefined ? true : !!fullWidth
+  }
+
+  exportJSON(): SerializedImageNode {
+    return {
+      altText: this.getAltText(),
+      caption: this.__caption.toJSON(),
+      height: this.__height === "inherit" ? 0 : this.__height,
+      maxWidth: this.__maxWidth,
+      showCaption: this.__showCaption && captionHasContent(this.__caption),
+      src: this.getSrc(),
+      type: "image",
+      version: 1,
+      width: this.__width === "inherit" ? 0 : this.__width,
+      fullWidth: this.__fullWidth || undefined,
+    }
+  }
+
+  setWidthAndHeight(
+    width: "inherit" | number,
+    height: "inherit" | number
+  ): void {
+    const writable = this.getWritable()
+    writable.__width = width
+    writable.__height = height
+  }
+
+  setSrc(src: string): void {
+    const writable = this.getWritable()
+    writable.__src = src
+  }
+
+  setAltText(altText: string): void {
+    const writable = this.getWritable()
+    writable.__altText = altText
+  }
+
+  setShowCaption(showCaption: boolean): void {
+    const writable = this.getWritable()
+    writable.__showCaption = showCaption
+  }
+
+  setFullWidth(fullWidth: boolean): void {
+    const writable = this.getWritable()
+    writable.__fullWidth = fullWidth
+  }
+
+  // View
+
+  createDOM(config: EditorConfig): HTMLElement {
+    const span = document.createElement("span")
+    const theme = config.theme
+    const className = theme.image
+    if (className !== undefined) {
+      span.className = className
+    }
+    return span
+  }
+
+  updateDOM(): false {
+    return false
+  }
+
+  getSrc(): string {
+    return this.__src
+  }
+
+  getAltText(): string {
+    return this.__altText
+  }
+
+  decorate(): JSX.Element {
+    return (
+      <Suspense fallback={null}>
+        <ImageComponent
+          src={this.__src}
+          altText={this.__altText}
+          width={this.__width}
+          height={this.__height}
+          maxWidth={this.__maxWidth}
+          nodeKey={this.getKey()}
+          showCaption={this.__showCaption}
+          caption={this.__caption}
+          captionsEnabled={this.__captionsEnabled}
+          fullWidth={this.__fullWidth}
+          resizable={true}
+        />
+      </Suspense>
+    )
+  }
+}
+
+export function $createImageNode({
+  altText,
+  height,
+  maxWidth = 500,
+  captionsEnabled,
+  src,
+  width,
+  showCaption,
+  caption,
+  fullWidth,
+  key,
+}: ImagePayload): ImageNode {
+  return $applyNodeReplacement(
+    new ImageNode(
+      src,
+      altText,
+      maxWidth,
+      width,
+      height,
+      showCaption,
+      caption,
+      captionsEnabled,
+      fullWidth,
+      key
+    )
+  )
+}
+
+export function $isImageNode(
+  node: LexicalNode | null | undefined
+): node is ImageNode {
+  return node instanceof ImageNode
+}

package/src/nodes/keyword-node.tsx

@@ -0,0 +1,58 @@
+import type { EditorConfig, LexicalNode, SerializedTextNode } from "lexical"
+import { TextNode } from "lexical"
+
+export type SerializedKeywordNode = SerializedTextNode
+
+export class KeywordNode extends TextNode {
+  static getType(): string {
+    return "keyword"
+  }
+
+  static clone(node: KeywordNode): KeywordNode {
+    return new KeywordNode(node.__text, node.__key)
+  }
+
+  static importJSON(serializedNode: SerializedKeywordNode): KeywordNode {
+    const node = $createKeywordNode(serializedNode.text)
+    node.setFormat(serializedNode.format)
+    node.setDetail(serializedNode.detail)
+    node.setMode(serializedNode.mode)
+    node.setStyle(serializedNode.style)
+    return node
+  }
+
+  exportJSON(): SerializedKeywordNode {
+    return {
+      ...super.exportJSON(),
+      type: "keyword",
+      version: 1,
+    }
+  }
+
+  createDOM(config: EditorConfig): HTMLElement {
+    const dom = super.createDOM(config)
+    dom.style.cursor = "default"
+    dom.className = "keyword text-purple-900 font-bold"
+    return dom
+  }
+
+  canInsertTextBefore(): boolean {
+    return false
+  }
+
+  canInsertTextAfter(): boolean {
+    return false
+  }
+
+  isTextEntity(): true {
+    return true
+  }
+}
+
+export function $createKeywordNode(keyword: string): KeywordNode {
+  return new KeywordNode(keyword)
+}
+
+export function $isKeywordNode(node: LexicalNode | null | undefined): boolean {
+  return node instanceof KeywordNode
+}

package/src/nodes/layout-container-node.tsx

@@ -0,0 +1,128 @@
+import { addClassNamesToElement } from "@lexical/utils"
+import type {
+  DOMConversionMap,
+  DOMConversionOutput,
+  DOMExportOutput,
+  EditorConfig,
+  LexicalNode,
+  NodeKey,
+  SerializedElementNode,
+  Spread,
+} from "lexical"
+import { ElementNode } from "lexical"
+
+export type SerializedLayoutContainerNode = Spread<
+  {
+    templateColumns: string
+  },
+  SerializedElementNode
+>
+
+function $convertLayoutContainerElement(
+  domNode: HTMLElement
+): DOMConversionOutput | null {
+  const styleAttributes = window.getComputedStyle(domNode)
+  const templateColumns = styleAttributes.getPropertyValue(
+    "grid-template-columns"
+  )
+  if (templateColumns) {
+    const node = $createLayoutContainerNode(templateColumns)
+    return { node }
+  }
+  return null
+}
+
+export class LayoutContainerNode extends ElementNode {
+  __templateColumns: string
+
+  constructor(templateColumns: string, key?: NodeKey) {
+    super(key)
+    this.__templateColumns = templateColumns
+  }
+
+  static getType(): string {
+    return "layout-container"
+  }
+
+  static clone(node: LayoutContainerNode): LayoutContainerNode {
+    return new LayoutContainerNode(node.__templateColumns, node.__key)
+  }
+
+  createDOM(config: EditorConfig): HTMLElement {
+    const dom = document.createElement("div")
+    dom.style.gridTemplateColumns = this.__templateColumns
+    if (typeof config.theme.layoutContainer === "string") {
+      addClassNamesToElement(dom, config.theme.layoutContainer)
+    }
+    return dom
+  }
+
+  exportDOM(): DOMExportOutput {
+    const element = document.createElement("div")
+    element.style.gridTemplateColumns = this.__templateColumns
+    element.setAttribute("data-lexical-layout-container", "true")
+    return { element }
+  }
+
+  updateDOM(prevNode: LayoutContainerNode, dom: HTMLElement): boolean {
+    if (prevNode.__templateColumns !== this.__templateColumns) {
+      dom.style.gridTemplateColumns = this.__templateColumns
+    }
+    return false
+  }
+
+  static importDOM(): DOMConversionMap | null {
+    return {
+      div: (domNode: HTMLElement) => {
+        if (!domNode.hasAttribute("data-lexical-layout-container")) {
+          return null
+        }
+        return {
+          conversion: $convertLayoutContainerElement,
+          priority: 2,
+        }
+      },
+    }
+  }
+
+  static importJSON(json: SerializedLayoutContainerNode): LayoutContainerNode {
+    return $createLayoutContainerNode(json.templateColumns)
+  }
+
+  isShadowRoot(): boolean {
+    return true
+  }
+
+  canBeEmpty(): boolean {
+    return false
+  }
+
+  exportJSON(): SerializedLayoutContainerNode {
+    return {
+      ...super.exportJSON(),
+      templateColumns: this.__templateColumns,
+      type: "layout-container",
+      version: 1,
+    }
+  }
+
+  getTemplateColumns(): string {
+    return this.getLatest().__templateColumns
+  }
+
+  setTemplateColumns(templateColumns: string) {
+    this.getWritable().__templateColumns = templateColumns
+  }
+}
+
+export function $createLayoutContainerNode(
+  templateColumns: string
+): LayoutContainerNode {
+  return new LayoutContainerNode(templateColumns)
+}
+
+export function $isLayoutContainerNode(
+  node: LexicalNode | null | undefined
+): node is LayoutContainerNode {
+  return node instanceof LayoutContainerNode
+}

package/src/nodes/layout-item-node.tsx

@@ -0,0 +1,118 @@
+import { addClassNamesToElement } from "@lexical/utils"
+import type {
+  DOMConversionMap,
+  EditorConfig,
+  LexicalNode,
+  SerializedElementNode,
+} from "lexical"
+import { ElementNode } from "lexical"
+
+export type SerializedLayoutItemNode = SerializedElementNode & {
+  style?: string
+}
+
+function withPaddingFallback(style: string): string {
+  const normalizedStyle = style.trim()
+  if (/padding\s*:/i.test(normalizedStyle)) {
+    return normalizedStyle
+  }
+  if (!normalizedStyle) {
+    return "padding: 12px;"
+  }
+  return `${normalizedStyle.replace(/;?$/, ";")} padding: 12px;`
+}
+
+function applyLayoutItemStyle(dom: HTMLElement, style: string): void {
+  dom.style.cssText = style
+  const padding = dom.style.padding || "12px"
+  dom.style.setProperty("padding", padding, "important")
+}
+
+function applyLayoutItemAttributes(dom: HTMLElement): void {
+  dom.setAttribute("data-lexical-layout-item", "true")
+}
+
+function getLayoutItemThemeClass(config: EditorConfig): string {
+  return typeof config.theme.layoutItem === "string"
+    ? config.theme.layoutItem
+    : "border border-dashed"
+}
+
+export class LayoutItemNode extends ElementNode {
+  static getType(): string {
+    return "layout-item"
+  }
+
+  static clone(node: LayoutItemNode): LayoutItemNode {
+    return new LayoutItemNode(node.__key)
+  }
+
+  createDOM(config: EditorConfig): HTMLElement {
+    const dom = document.createElement("div")
+    addClassNamesToElement(dom, getLayoutItemThemeClass(config))
+    applyLayoutItemAttributes(dom)
+    applyLayoutItemStyle(dom, withPaddingFallback(this.getStyle()))
+    return dom
+  }
+
+  updateDOM(prevNode: LayoutItemNode, dom: HTMLElement, config: EditorConfig): boolean {
+    const expectedClass = getLayoutItemThemeClass(config)
+    if (dom.className !== expectedClass) {
+      dom.className = ""
+      addClassNamesToElement(dom, expectedClass)
+    }
+    applyLayoutItemAttributes(dom)
+
+    const prevStyle = withPaddingFallback(prevNode.getStyle())
+    const nextStyle = withPaddingFallback(this.getStyle())
+    if (prevStyle !== nextStyle) {
+      applyLayoutItemStyle(dom, nextStyle)
+    }
+    return false
+  }
+
+  static importDOM(): DOMConversionMap | null {
+    return {}
+  }
+
+  static importJSON(json: SerializedLayoutItemNode): LayoutItemNode {
+    const node = $createLayoutItemNode()
+    if (json.format) {
+      node.setFormat(json.format)
+    }
+    if (json.indent) {
+      node.setIndent(json.indent)
+    }
+    if ("direction" in json && json.direction !== null) {
+      node.setDirection(json.direction)
+    }
+    if ("style" in json && typeof json.style === "string") {
+      node.setStyle(json.style)
+    }
+    return node
+  }
+
+  isShadowRoot(): boolean {
+    return true
+  }
+
+  exportJSON(): SerializedLayoutItemNode {
+    const style = this.getStyle()
+    return {
+      ...super.exportJSON(),
+      ...(style ? { style } : {}),
+      type: "layout-item",
+      version: 1,
+    }
+  }
+}
+
+export function $createLayoutItemNode(): LayoutItemNode {
+  return new LayoutItemNode()
+}
+
+export function $isLayoutItemNode(
+  node: LexicalNode | null | undefined
+): node is LayoutItemNode {
+  return node instanceof LayoutItemNode
+}