How can I handle custom defined blocks while converting to markdown?

[OpenBitSack]

Hi there,

I hope you are doing well and I believe you can help me with this matter.
Currently I am using blocksuite extensively by customizing it.
I defined a custom block and trying to export whole editor content to markdown.
But for the custom blocks, I can't get anything. I think in blocksuite, there is a option for support this case.
I used MarkdownAdapter to convert markdown.

Here is a full code of a custom block.

// External Dependencies
import { 
    BlockViewExtension, 
    ExtensionType, 
    FlavourExtension 
  } from '@blocksuite/block-std';
  import { 
    EmbedBlockComponent, 
    createEmbedBlockSchema, 
    defineEmbedModel 
  } from '@blocksuite/blocks';
  import { BlockModel } from '@blocksuite/store';
  import { literal } from 'lit/static-html.js';
  import { html } from 'lit';
  import { createRoot, type Root } from 'react-dom/client';
  import { useEffect, useState, useCallback, memo } from 'react';
  import { 
    Excalidraw, 
    exportToBlob,
  } from '@excalidraw/excalidraw';
  import { 
    AppState, 
    BinaryFiles, 
    ExcalidrawImperativeAPI
  } from '@excalidraw/excalidraw/types/types';
  import { ExcalidrawElement } from '@excalidraw/excalidraw/types/element/types';
  
  // Internal Dependencies
  import { EmbedContainer } from '../EmbedContainer';
  
  // Constants
  const EXPORT_DIMENSIONS = {
    width: 1280,
    height: 800
  } as const;
  
  const EXPORT_CONFIG = {
    quality: 1,
    mimeType: 'image/png'
  } as const;
  
  // Types and Interfaces
  interface ExcalidrawComponentProps {
    model: EmbedExcaliModel;
    state: string;
    element: EmbedBlockComponent;
    setState: (val: string) => void;
  }
  
  interface EmbedExcaliBlockProps {
    state: string;
  }
  
  interface ExcalidrawState {
    elements: ExcalidrawElement[];
    files: BinaryFiles;
  }
  
  // BlockSuite Model Extension
  declare global {
    namespace BlockSuite {
      interface BlockModels {
        'affine:embed-excali': EmbedExcaliModel;
      }
    }
  }
  
  // Model Definition
  export const EmbedExcaliBlockSchema = createEmbedBlockSchema({
    name: 'excali',
    version: 1,
    toModel: () => new EmbedExcaliModel(),
    props: (): EmbedExcaliBlockProps => ({ state: '' }),
  });
  
  class EmbedExcaliModel extends defineEmbedModel<EmbedExcaliBlockProps>(BlockModel) {}
  
  // Main Component
  const ExcalidrawComponent: React.FC<ExcalidrawComponentProps> = memo(({
    model, 
    state, 
    setState, 
    element
  }) => {
    const [excalidrawAPI, setExcalidrawAPI] = useState<ExcalidrawImperativeAPI | null>(null);
    const [error, setError] = useState<string | null>(null);
  
    const onDelete = useCallback(() => {
      model.doc.deleteBlock(model);
    }, [model]);
  
    const onExport = useCallback(async () => {
      try {
        if (!excalidrawAPI) {
          throw new Error('Excalidraw API not initialized');
        }
  
        const blob = await exportToBlob({
          elements: excalidrawAPI.getSceneElements(),
          files: excalidrawAPI.getFiles(),
          getDimensions: () => EXPORT_DIMENSIONS,
          ...EXPORT_CONFIG
        });
  
        return { 
          blob, 
          name: `draw-${model.id}.png` 
        };
      } catch (err) {
        const errorMessage = err instanceof Error ? err.message : 'Export failed';
        setError(errorMessage);
        throw err;
      }
    }, [excalidrawAPI, model.id]);
  
    const parseInitialData = useCallback((): ExcalidrawState => {
      if (!state) {
        return { elements: [], files: {} };
      }
  
      try {
        const parsedData = JSON.parse(state);
        return {
          elements: parsedData.elements || [],
          files: parsedData.files || {}
        };
      } catch (err) {
        console.error('Failed to parse initial data:', err);
        return { elements: [], files: {} };
      }
    }, [state]);
  
    const onDraw = useCallback((
      elements: readonly ExcalidrawElement[], 
      _: AppState, 
      files: BinaryFiles
    ) => {
      try {
        setState(JSON.stringify({ elements, files }));
      } catch (err) {
        console.error('Failed to save drawing state:', err);
        setError('Failed to save drawing state');
      }
    }, [setState]);
  
    const handleExcalidrawAPI = useCallback((api: ExcalidrawImperativeAPI) => {
      setExcalidrawAPI(api);
    }, []);
  
    const initialData = parseInitialData();
  
    return (
      <EmbedContainer 
        element={element} 
        loading={false} 
        onDelete={onDelete} 
        onExport={onExport}
      >
        <Excalidraw
          onChange={onDraw}
          initialData={initialData}
          excalidrawAPI={handleExcalidrawAPI}
        />
      </EmbedContainer>
    );
  });
  
  ExcalidrawComponent.displayName = 'ExcalidrawComponent';
  
  // Component Definition
  class EmbedExcaliComponent extends EmbedBlockComponent<EmbedExcaliModel> {
    private reactRoot: Root | null = null;
  
    override firstUpdated(): void {
      const container = this.querySelector('#excali-root');
      if (!container) {
        console.error('Excalidraw root container not found');
        return;
      }
  
      try {
        this.reactRoot = createRoot(container);
        this.reactRoot.render(
          <ExcalidrawComponent
            element={this}
            model={this.model}
            state={this.model.state}
            setState={this.handleStateUpdate}
          />
        );
      } catch (err) {
        console.error('Failed to initialize Excalidraw component:', err);
      }
    }
  
    private handleStateUpdate = (value: string): void => {
      this.model.state = value;
    };
  
    override disconnectedCallback(): void {
      if (this.reactRoot) {
        this.reactRoot.unmount();
        this.reactRoot = null;
      }
      super.disconnectedCallback();
    }
  
    override render() {
      return html`<div id="excali-root"></div>`;
    }
  }
  
  // Block Specification
  export const EmbedExcaliBlockSpec: ExtensionType[] = [
    FlavourExtension('embed-excali'),
    BlockViewExtension('affine:embed-excali', literal`embed-excali-block`),
  ];
  
  // Registration
  export function excaliBlockEffects(): void {
    if (!customElements.get('embed-excali-block')) {
      customElements.define('embed-excali-block', EmbedExcaliComponent);
    }
  }

Please help me 🆘
Thanks

[raintoway]

had u read this guide? walk the block-tree , capture the block u defined, which is very familiar to fe-engineer

[OpenBitSack]

Actually, what I want to do with this block is:
When converting the whole note to Markdown, I want to transform this block to behave like an image block. So, when the note is converted to md, the custom block will be displayed as an image link.