// 参考 https://lexical.dev/docs/api/modules/lexical_html#generatehtmlfromnodes
import { $generateHtmlFromNodes } from '@lexical/html';

const htmlString = $generateHtmlFromNodes(editor, selection | null);
// 第二个参数用于设置所需转换的内容区域
// 可以是 `selection` 选区
// 或是 `null` 表示转换所有内容

exportDOM(editor: LexicalEditor): DOMExportOutput

// 其中 DOMExportOutput 对象的 element 属性就是转换生成的 HTMLElement
// 但是 element 属性值也可以是 null，这样该节点在序列化为 HTML 时就会「丢失」不见了
export type DOMExportOutput = {
  after?: (generatedElement: ?HTMLElement) => ?HTMLElement,
  element?: HTMLElement | null,
};

import { $getRoot，$insertNodes } from 'lexical'
import { $generateNodesFromDOM } from '@lexical/html';

// ⚠️ 更新编辑器内容的操作需要在方法 editor.update(callback) 的回调函数中进行
editor.update(() => {
  // 基于给定的编辑器 editor（所采用的数据模型）将 DOM 实例转换为相应的一系列节点
  // 返回的是一个节点列表
  const nodes = $generateNodesFromDOM(editor, dom);

  // 使用 $getRoot() 方法获取根节点
  // 并将其选中（其实就是全选编辑器的所有内容），这会生成一个选区
  $getRoot().select();

  // 使用 $insertNodes(nodes) 方法（默认行为）将节点插入到选区的最后
  // 💡 这不会覆盖编辑器原有的内容
  $insertNodes(nodes);
})

static importDOM(): DOMConversionMap | null;

type NodeName = string;
export type DOMConversionMap<T extends HTMLElement = HTMLElement> = Record<
  NodeName,
  (node: T) => DOMConversion<T> | null
>;

export type DOMConversion = {
  conversion: DOMConversionFn, // 转换函数
  priority: 0 | 1 | 2 | 3 | 4, // 转换优先级别
};

// 转换函数
export type DOMConversionFn<T extends HTMLElement = HTMLElement> = (
  element: T,
  parent?: Node,
  // 预格式化标志，类似于 <pre> 标签
  // 表示内容是否已经经过了格式化
  // 如果为 true 则保留节点内容中的换行符、空格符等
  preformatted?: boolean,
) => DOMConversionOutput | null;

export type DOMConversionOutput = {
  // after 方法在转换生成节点后执行一次
  // 它接受所有子节点 `childLexicalNodes` 作为入参
  after?: (childLexicalNodes: Array<LexicalNode>) => Array<LexicalNode>;
  // forChildren 方法会在转换生成节点后，分别对各后代节点（包含内嵌的子孙节点）执行
  forChild?: DOMChildConversion;
  node: LexicalNode | null; // 转换生成的 Lexical 节点
  preformatted?: boolean;
};

// 对后代节点执行的函数
// 入参是当前所遍历的后代节点，以及它的父节点
// 最后返回一个节点或 null
export type DOMChildConversion = (
  lexicalNode: LexicalNode,
  parentLexicalNode: LexicalNode | null | undefined,
) => LexicalNode | null;

/**
 *
 * 将编辑器的当前状态对象序列化
 *
 */
// 方法一：调用 editorState（编辑器状态对象）的方法 toJSON()
// 获取编辑器的当前状态可序列化为 JSON 格式的形式，一个 `SerializedLexicalNode` 对象
const editorState = editor.getEditorState();
editorState.toJSON();

// 方法二：直接使用 JSON.stringify() 方法，将编辑器的当前状态对象序列化为字符串
const JSONstring = JSON.stringify(editor.getEditorState());

export type SerializedHeadingNode = Spread<
  {
    tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
  },
  SerializedElementNode
>;

exportJSON(): SerializedHeadingNode {
  return {
    ...super.exportJSON(),
    tag: this.getTag(),
    type: 'heading',
    version: 1,
  };
}

/**
 *
 * 从远端服务器获取数据
 * 再应用到编辑器上
 *
 */
// 创建一个 editor 实例
const editor = createEditor();
// 异步获取数据
const initialEditorState = await loadContent();
// 返回的是序列化的 editor state （JSON string 的形式）
// 将字符串解析为 editor state 编辑器状态对象
const editorState = editor.parseEditorState(editorStateJSONString);
// 并设置成为编辑器的当前状态
// ⚠️ 这会覆盖编辑器原有的内容
editor.setEditorState(editorState);

export type SerializedLexicalNode = {
  type: string; // 根据该字段来匹配节点类型
  version: number;
};

// 接受一个相应的 JSON string 数据
// 生成一个 LexicalNode 节点实例
importJSON(jsonNode: SerializedLexicalNode): LexicalNode

static importJSON(serializedNode: SerializedHeadingNode): HeadingNode {
  const node = $createHeadingNode(serializedNode.tag);
  node.setFormat(serializedNode.format);
  node.setIndent(serializedNode.indent);
  node.setDirection(serializedNode.direction);
  return node;
}