import {Field, FieldHook} from 'payload/types';
import {LexicalRichTextField, LexicalRichTextCell, traverseLexicalField, populateLexicalRelationships2} from './LexicalRichText'
import {SerializedEditorState} from "lexical";

type LexicalRichTextFieldAfterReadFieldHook = FieldHook<any, SerializedEditorState, any>;

const populateLexicalRelationships: LexicalRichTextFieldAfterReadFieldHook = async ({value, req}): Promise<SerializedEditorState> =>  {
            if(value.root.children){
                const newChildren = [];
                for(let childNode of value.root.children){
                    newChildren.push(await traverseLexicalField(childNode, ""));
                }
                value.root.children = newChildren;
            }

            return value;
        };

function lexicalRichTextField(props: {name?: string, label?: string, plugins?}): Field {
    const {name, label, plugins} = props;
    return {
        name: name ? name : 'richText',
        type: 'richText',
        label: label ? label : 'Rich Text',
        hooks: {
            afterRead: [
                populateLexicalRelationships2,
            ],
        },
        admin: {
            components: {
                Field: LexicalRichTextField,
                Cell: LexicalRichTextCell
            }
        }
    }
}

export default lexicalRichTextField;

import React, { Suspense } from 'react';
import {$getRoot, EditorState, LexicalEditor, SerializedEditorState, SerializedLexicalNode} from 'lexical';
import { Props } from './types';
import { LexicalEditorComponent } from './LexicalEditorComponent';

import './index.scss';
import Loading from 'payload/dist/admin/components/elements/Loading'

const baseClass = 'lexicalRichTextEditor';

import { useField } from "payload/components/forms";
import PlaygroundNodes from "./nodes/PlaygroundNodes";
import PlaygroundEditorTheme from "./themes/PlaygroundEditorTheme";
import {createHeadlessEditor} from "@lexical/headless";
import {ExtraAttributes, RawImagePayload} from "./nodes/ImageNode";
import payload from "payload";
import {FieldHook} from "payload/types";

type LexicalRichTextFieldAfterReadFieldHook = FieldHook<any, SerializedEditorState, any>;

export const populateLexicalRelationships2: LexicalRichTextFieldAfterReadFieldHook = async ({value, req}): Promise<SerializedEditorState> =>  {
    if(value.root.children){
        const newChildren = [];
        for(let childNode of value.root.children){
            newChildren.push(await traverseLexicalField(childNode, ""));
        }
        value.root.children = newChildren;
    }

    return value;
};

export async function traverseLexicalField(node: SerializedLexicalNode, locale: string): Promise<SerializedLexicalNode> {
    ...
}
async function loadUploadData(rawImagePayload: RawImagePayload, locale: string) {
...
}

async function loadInternalLinkDocData(value: string, relationTo: string, locale: string) { //TODO: Adjustable depth
...
}

export const LexicalRichTextCell: React.FC<any> = (props) => {
    ...
};

export const LexicalRichTextField: React.FC<Props> = (props) => {
   ...
}
const LexicalRichText2: React.FC<Props> = (props: Props) => {
   ...
};

 afterRead: [
                populateLexicalRelationships2,
            ],

 afterRead: [
                populateLexicalRelationships,
            ],