Custom tools in React

[fredriktre]

Hi,

This is probably something that's already been discussed to death here, but here we go... Me and my little team of email developers here are trying to set up this tool to speed up our own productionlines. And though it could be really useful, it seems a bit complicated to get running with custom tools. As we are using a 3rd party system for distribution of emails, there are certain things we need to have added to the buttons and such. So I tried to add custom tools in, but the documentation doesn't state how it's done in react, or anything about it's syntax, and the "documentation" that is there is for normal JS, not React. Which is actually different. I did manage to change the Image component's enabling, that was bout it. Heres the code:

import { useState, useRef, useEffect } from 'react' import './App.css' import EmailEditor from 'react-email-editor'; import { CircleLoader } from 'react-spinners';

function App() { const emailEditorRef = useRef(null); const screen = useRef(null); const [isLoading, setIsLoading] = useState(true); const [tooSmallScreenSize, setTooSmallScreenSize] = useState(false);

const exportHtml = () => { emailEditorRef.current.editor.exportHtml((data:any) => { const { design, html } = data; console.log('exportHtml', html); }); };

const onLoad = () => { // editor instance is created // you can load your template here; // const templateJson = {}; // emailEditorRef.current.editor.loadDesign(templateJson); }

const onReady = () => { // editor is ready console.log('onReady');

setIsLoading(false);

}; useEffect(() => { if (!screen.current) return

if (screen.current.offsetWidth < 1026) {
  setTooSmallScreenSize(true); 
} else {
  setTooSmallScreenSize(false); 
}

}, [])

return ( <div className='w-full h-screen flex flex-col gap-10 bg-black'> <nav className=''>

  </nav>

  <div className={`relative bg-gray-900 w-full ${tooSmallScreenSize ? "h-screen" : "h-fit"}`} ref={screen}>
    {
      tooSmallScreenSize ?
      <div className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
        ${isLoading ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"}`}>
          <h1 className='text-white'>Screen is too small!</h1>
      </div>
      :
      <>
        <div className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
        ${isLoading ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"}`}>
          <CircleLoader
            color={"#0891b2"}
            loading={isLoading}
            size={400}
            aria-label="Loading Spinner"
            data-testid="loader"
          />
        </div>

        <div className='w-full px-4 py-2'>
          <button 
            className={`text-white bg-cyan-700 px-4 py-2 rounded-md ${isLoading ? 
              "opacity-0 pointer-events-none" : "opacity-100 pointer-events-auto"}`}
            onClick={exportHtml}
            >Export HTML</button>
        </div>

        <EmailEditor
          style={{
            opacity: `${isLoading ? "0" : "1"}`
          }}
          ref={emailEditorRef}
          tools={{
            
          }}
          minHeight={"80vh"}
          onLoad={() => {
            if (!tooSmallScreenSize) {
              onLoad();
            }
          }}
          onReady={() => {
            if (!tooSmallScreenSize) {
              onReady();
            }
          }}
        />
      </>
    }
  </div>
</div>

) }

export default App

this is from the types.d.ts for the editor, just goes to show that there isn't anywhere to find this syntax... I just don't get what I should be doing.