Untitled

import type {
  DOMConversionMap,
  DOMConversionOutput,
  DOMExportOutput,
  EditorConfig,
  LexicalNode,
  NodeKey,
  SerializedElementNode,
  Spread
} from "lexical"

import { addClassNamesToElement } from "@lexical/utils"
import { ElementNode } from "lexical"

type SerializedLayoutContainerNode = Spread<
  {
    templateColumns: string
  },
  SerializedElementNode
>

export function $createLayoutContainerNode(
  templateColumns: string
): LayoutContainerNode {
  console.log("создаем ноду")
  return new LayoutContainerNode(templateColumns)
}

function $convertLayoutContainerElement({
  style
}: HTMLElement): DOMConversionOutput | null {
  const templateColumns = style.gridTemplateColumns

  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 {
    console.log("get type")
    return "layout-container"
  }

  static clone(node: LayoutContainerNode): LayoutContainerNode {
    console.log("clone ")
    return new LayoutContainerNode(node.__templateColumns, node.__key)
  }

  createDOM(config: EditorConfig): HTMLElement {
    console.log("create dom")
    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 {
    console.log("export dom ")
    const element = document.createElement("div")
    element.style.gridTemplateColumns = this.__templateColumns
    element.setAttribute("data-lexical-layout-container", "true")
    element.className = "editorLayoutContainer"
    return { element }
  }

  updateDOM(prevNode: LayoutContainerNode, dom: HTMLElement): boolean {
    console.log("update dom")
    if (prevNode.__templateColumns !== this.__templateColumns) {
      dom.style.gridTemplateColumns = this.__templateColumns
    }
    return false
  }

  static importDOM(): DOMConversionMap | null {
    console.log("import dom")
    return {
      div: (domNode: HTMLElement) => {
        if (!domNode.hasAttribute("data-lexical-layout-container")) {
          return null
        }

        return {
          conversion: $convertLayoutContainerElement,
          priority: 2
        }
      }
    }
  }

  static importJSON(json: SerializedLayoutContainerNode): LayoutContainerNode {
    console.log("import json")
    return $createLayoutContainerNode(json.templateColumns)
  }

  isShadowRoot(): boolean {
    console.log("is shadow root")
    return true
  }

  canBeEmpty(): boolean {
    console.log("can be empty")
    return false
  }

  exportJSON(): SerializedLayoutContainerNode {
    console.log("export json")
    return {
      ...super.exportJSON(),
      templateColumns: this.__templateColumns,
      type: "layout-container",
      version: 1
    }
  }

  getTemplateColumns(): string {
    console.log("get template columns")
    return this.getLatest().__templateColumns
  }

  setTemplateColumns(templateColumns: string): void {
    console.log("set template columns")
    this.getWritable().__templateColumns = templateColumns
  }
}

export function $isLayoutContainerNode(
  node: LexicalNode | null | undefined
): node is LayoutContainerNode {
  console.log("is layout container node")
  return node instanceof LayoutContainerNode
}