Package detail

Editor Component

Full Mode (format="full") Property Description

Core Properties

Event Callback

Custom 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);
    }
  }}
/>