import { useLexicalComposerContext } from "./LexicalComposerContext";
import { createEffect, createMemo, createSignal, onCleanup, Show, splitProps, } from "solid-js";
import { ContentEditableElement } from "./shared/LexicalContentEditableElement";
import { useCanShowPlaceholder } from "./shared/useCanShowPlaceholder";
export function ContentEditable(props) {
    const [, rest] = splitProps(props, ["placeholder"]);
    const [editor] = useLexicalComposerContext();
    return (<>
      <ContentEditableElement editor={editor} {...rest} ref={props.ref}/>
      {props.placeholder != null && (<Placeholder editor={editor} content={props.placeholder}/>)}
    </>);
}
function Placeholder(props) {
    const showPlaceholder = useCanShowPlaceholder(props.editor);
    const [isEditable, setEditable] = createSignal(props.editor.isEditable());
    createEffect(() => {
        setEditable(props.editor.isEditable());
        onCleanup(props.editor.registerEditableListener((currentIsEditable) => {
            setEditable(currentIsEditable);
        }));
    });
    const placeholder = createMemo(() => props.content(isEditable()));
    if (placeholder === null) {
        return null;
    }
    return (<Show when={showPlaceholder() && placeholder()}>
      <div aria-hidden={true}>{placeholder()}</div>
    </Show>);
}