Function EmailEditorInner

src/EmailEditor.tsx:16–109

(
  props: EmailEditorProps<TDisplayMode>,
  ref: React.Ref<EditorRef<TDisplayMode>>,
)

win.__unlayer_lastEditorId = win.__unlayer_lastEditorId || 0;

function EmailEditorInner<TDisplayMode extends DisplayMode | undefined = 'email'>(
  props: EmailEditorProps<TDisplayMode>,
  ref: React.Ref<EditorRef<TDisplayMode>>,
) {
    const { onLoad, onReady, scriptUrl, minHeight = 500, style = {} } = props;

    const [editor, setEditor] = useState<UnlayerEditor<TDisplayMode> | null>(null);

    const [hasLoadedEmbedScript, setHasLoadedEmbedScript] = useState(false);

    const editorId = useMemo(
      () => props.editorId || `editor-${++win.__unlayer_lastEditorId}`,
      [props.editorId]
    );

    const options = {
      ...(props.options || {}),
      appearance: props.appearance ?? props.options?.appearance,
      displayMode: props?.displayMode || props.options?.displayMode || 'email' as const,
      locale: props.locale ?? props.options?.locale,
      projectId: props.projectId ?? props.options?.projectId,
      tools: props.tools ?? props.options?.tools,

      id: editorId,
      source: {
        name: pkg.name,
        version: pkg.version,
      },
    };

    useImperativeHandle(
      ref,
      () => ({
        editor,
      }),
      [editor]
    );

    useEffect(() => {
      return () => {
        editor?.destroy();
      };
    }, []);

    useEffect(() => {
      setHasLoadedEmbedScript(false);
      loadScript(() => setHasLoadedEmbedScript(true), scriptUrl);
    }, [scriptUrl]);

    useEffect(() => {
      if (!hasLoadedEmbedScript) return;
      editor?.destroy();
      setEditor(unlayer.createEditor(options));
    }, [JSON.stringify(options), hasLoadedEmbedScript]);

    const methodProps = Object.keys(props).filter((propName) =>
      /^on/.test(propName)
    );