Way to hide desktop/mobile preview

[vSkoryk]

Hi! Is there any way to hide Desktop/Mobile Preview from editor? I did't find such config and tried to define my own EmailEditor component without those tabs. But after this some functionality inside EditEmailPreview stopped working. For example, removing added blocks. Also I wasn't able to add your ToolsPanel for do/undo functionality because it's not exported by your package.

https://codesandbox.io/s/frosty-poitras-ds7spd?file=/src/index.tsx To reproduce issues: Add image block and then try to delete it

[simoco0781]

I think you have to rewrite a component, in the return() method, you will find the , and

For example :

import React, { useCallback, useMemo } from 'react'

import {
  ActiveTabKeys,
  DesktopEmailPreview,
  EASY_EMAIL_EDITOR_ID,
  EditEmailPreview,
  EventManager,
  FIXED_CONTAINER_ID,
  IconFont,
  MobileEmailPreview,
  Stack,
  useActiveTab,
  useEditorProps,
} from 'easy-email-editor'
import { createPortal } from 'react-dom'

import { ToolsPanel } from './components/ToolsPanel'
import { TabPane, Tabs } from './components/UI/Tabs'

window.global = window // react-codemirror

export const EmailEditor = () => {
  const { height: containerHeight } = useEditorProps()
  const { setActiveTab, activeTab } = useActiveTab()

  const fixedContainer = useMemo(() => {
    return createPortal(<div id={FIXED_CONTAINER_ID} />, document.body)
  }, [])

  const onBeforeChangeTab = useCallback((currentTab, nextTab) => {
    // return EventManager.exec(EventType.ACTIVE_TAB_CHANGE, {
    return EventManager.exec('activeTabChange', {
      currentTab,
      nextTab,
    })
  }, [])

  const onChangeTab = useCallback(
    nextTab => {
      setActiveTab(nextTab)
    },
    [setActiveTab]
  )

  return useMemo(
    () => (
      <div
        id={EASY_EMAIL_EDITOR_ID}
        style={{
          display: 'flex',
          flex: '1',
          overflow: 'hidden',
          justifyContent: 'center',
          minWidth: 640,
          height: containerHeight,
        }}
      >
        <Tabs
          activeTab={activeTab}
          onBeforeChange={onBeforeChangeTab}
          onChange={onChangeTab}
          style={{ height: '100%', width: '100%' }}
          tabBarExtraContent={<ToolsPanel />}
        >
          <TabPane
            style={{ height: 'calc(100% - 50px)' }}
            tab={
              <Stack spacing="tight">
                <IconFont iconName="icon-editor" />
              </Stack>
            }
            key={ActiveTabKeys.EDIT}
          >
            <EditEmailPreview />
          </TabPane>
          <TabPane
            style={{ height: 'calc(100% - 50px)' }}
            tab={
              <Stack spacing="tight">
                <IconFont iconName="icon-desktop" />
              </Stack>
            }
            key={ActiveTabKeys.PC}
          >
            <DesktopEmailPreview />
          </TabPane>
          <TabPane
            style={{ height: 'calc(100% - 50px)' }}
            tab={
              <Stack spacing="tight">
                <IconFont iconName="icon-mobile" />
              </Stack>
            }
            key={ActiveTabKeys.MOBILE}
          >
            <MobileEmailPreview />
          </TabPane>
        </Tabs>

        {fixedContainer}
      </div>
    ),
    [activeTab, containerHeight, fixedContainer, onBeforeChangeTab, onChangeTab]
  )
}

[vSkoryk]

Yeah, that's what I tried and as I mentioned above some functionality broke :( I tried to understand what's wrong, but no results for now(

[vSkoryk]

I fixed major issues by updating React to 17 version. I would appreciate, if you can add ToolsPanel component to export.

[m-Ryan]

Please make an PR to export ToolsPanel, I will check and agree.

[vSkoryk]

@m-Ryan Sure. Created PR