Editor Component

Full Mode (format="full") Property Description

Core Properties

| Property | Type | Required | Description | |------|------|------|------| | data | Block[] | No | Editor data content | | blockTypes | BlockType[] | Yes | Available block type definition | | onChange | (data: Block[]) => void | No | Data change callback function | | title | string | No | Editor Title | | cardinality | number | No | Block quantity limit, default is -1 indicating no limit | | addBlockDisplayFormat | 'select' | 'button' | No | Add block button display format, default is 'select' | | storage | EditorState['storage'] | No | Editor storage configuration | | editorTheme | Theme | No | Editor theme configuration | | isFullScreen | boolean | No | Whether in full screen mode | | previewSrc | string | No | Preview iframe source address | | previewWidth | 'sm' | 'md' | 'lg' | 'xl' | 'full' | No | Preview area width | | allowedOrigins | string[] | No | Allow preview iframe source domain name list |

Event Callback

| Callback Method | Type | Description | |---------|------|------| | onFullScreen | () => void | Enter full screen trigger | | onFullScreenExit | () => void | Exit full screen trigger | | onPreviewIframeLoad | (iframe: HTMLIFrameElement) => void | Preview iframe load complete trigger | | onPreviewInstanceLoad | (preview: PreviewInstance) => void | Preview instance load complete trigger | | onAction | (action: { type: string; payload: any }) => void | Editor operation event trigger callback |

Custom Component

| Property | Type | Description | |------|------|------| | previewWrapperComponent | React.ElementType | Custom preview area wrapper component |

Usage Example

Basic Preview Mode

<Editor
  format="full"
  value={code}
  language="javascript"
  previewSrc="https://preview.example.com"
  previewWidth="md"
  allowedOrigins={['example.com']}
/>

Full Screen Mode Control

<Editor
  format="full"
  isFullScreen={isFullScreen}
  onFullScreen={() => {
    console.log('Trigger full screen event');
    setIsFullScreen(true);
  }}
  onFullScreenExit={() => {
    console.log('Trigger exit full screen event');
    setIsFullScreen(false);
  }}
/>

Preview Load Event Handling

<Editor
  format="full"
  onPreviewIframeLoad={(iframe) => {
    console.log('preview iframe loaded', iframe);
  }}
  onPreviewInstanceLoad={(preview) => {
    console.log('preview instance loaded', preview);
  }}
/>

Custom Preview Wrapper Component

const CustomPreviewWrapper = ({ children }) => (
  <div className="custom-preview-container">
    {children}
  </div>
);

<Editor
  format="full"
  previewWrapperComponent={CustomPreviewWrapper}
/>

Operation Event Listening

<Editor
  format="full"
  onAction={({ type, payload }) => {
    switch (type) {
      case 'save':
        console.log('save operation', payload);
        break;
      case 'format':
        console.log('format operation', payload);
        break;
    }
  }}
/>

Preview Width Description

Preview area width (previewWidth) correspondence:

• sm: 375px
• md: 1024px
• lg: 1280px
• xl: 1536px
• full: 100%

Security Description

Use the allowedOrigins property to restrict the source domain name of the preview iframe, increasing security:

<Editor
  format="full"
  previewSrc="https://preview.example.com"
  allowedOrigins={[
    'preview.example.com',
    'test.example.com'
  ]}
/>

Notes

1. When using the full mode, ensure that the previewSrc points to a valid preview service
2. When switching to full screen mode, it is recommended to synchronize the other UI state of the application
3. After the preview instance is loaded, you can obtain the instance through the onPreviewInstanceLoad callback for further interaction
4. When customizing the preview wrapper component, ensure that the child component is correctly passed

Editor Formats

Editor supports three display formats:

1. Full Format (format="full")

<Editor
  format="full"
  blockTypes={blockTypes}
  data={data}
  onChange={handleChange}
  title="My Editor"
/>

2. Sidebar Format (format="sidebar")

<Editor
  format="sidebar"
  blockTypes={blockTypes}
  data={data}
  onChange={handleChange}
  onBack={() => {/*  return event */}}
/>

3. Inline Format (format="inline")

<Editor
  format="inline"
  blockTypes={blockTypes}
  data={data}
  onChange={handleChange}
/>

Block Types

blockTypes defines the available block types, example:

const blockTypes: BlockType[] = [
  {
    type: 'text',
    title: 'Text Block',
  }
];

Cardinality

cardinality property is used to limit the number of blocks:

- -1: No limit (default)
- 0: No blocks allowed
- n: Maximum of n blocks allowed

Full example of Editor Component

<Editor
  onFullScreen={() => {
    document.documentElement.requestFullscreen();
  }}
  onFullScreenExit={() => {
    document.exitFullscreen();
  }}
  format="full"
  data={data}
  allowedOrigins={[env.wordpressUrl, window.location.origin]}
  blockTypes={blockTypes}
  previewSrc={`${window.location.origin}/${locale}/editor/wordpress/preview`}
  onAction={(action) => {
    const { type, payload } = action;
    switch (type) {
      case "editor/jwtToken":
        configStorage.init({ token: payload });
        objectStorage.init({ token: payload });
      case "editor/page/categoryId":
        // How to mock the payload?
        // window.postMessage({type:"editor/page/categoryId", payload: "15"})
        // window.previewPayload = payload;
        break;
    }
  }}
  storage={{
    object: objectStorage,
    config: configStorage,
  }}
  onChange={(newData) => {
    if (isDev && !isInIframe) {
      window.clearTimeout(timeoutId);
      setData(newData);
      timeoutId = window.setTimeout(() => {
        localStorage.setItem(storageKey, JSON.stringify(newData));
      }, 300);
    }
  }}
/>