follow start page and get error in vue

[jooler]

I have add blocksuite follow this page https://blocksuite.io/guide/quick-start.html And some CORS error here

Access to font at 'https://cdn.affine.pro/fonts/Inter-Light-BETA.woff' from origin 'http://localhost:9000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

there are too many...

[doodlewind]

Thanks for the feedback!

This should be the default font list used for rendering canvas text, we are moving towards making this configurable via the per-widget configs (see _specs.ts as the way composing widgets and blocks, there should be declarative APIs for customizing the font list config and etc.).

I suppose this will be handled by team member after the Lunar New Year holiday. Cheers! cc @Flrande

[Flrande]

This is because the canvas text in edgeless requires specific font files, which can be avoided by directly overriding loadFonts or handling the font file location yourself.

https://github.com/toeverything/AFFiNE/blob/9e7eb5629cd6cf35bdf127d9e7d502093dbacc4e/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs.ts#L15-L35

Usually, we don't need the functionality of edgeless, that is, we only need to use DocPageSpec. In this case, we should not import CanvasTextFonts. This is an area that needs improvement, and I will make changes later to avoid the dependency of doc mode on CanvasTextFonts. This way, you only need to avoid this error by replacing the spec (if you don't need edgeless)

[kyrylolvov]

@doodlewind @Flrande Are there any updates on this or some workaround?

[Flrande]

@doodlewind @Flrande Are there any updates on this or some workaround?

Look at my recent comment, you can workaround by overriding the spec

This is because the canvas text in edgeless requires specific font files, which can be avoided by directly overriding loadFonts or handling the font file location yourself.

https://github.com/toeverything/AFFiNE/blob/9e7eb5629cd6cf35bdf127d9e7d502093dbacc4e/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs.ts#L15-L35

[kyrylolvov]

@Flrande Are there any examples on how to override behaviour in the editors?

I am using const editor = new AffineEditorContainer();

[Flrande]

@Flrande Are there any examples on how to override behaviour in the editors?

I am using const editor = new AffineEditorContainer();

Create a new spec and pass it by docSpecs and edgelessSpecs in AffineEditorContainer

https://blocksuite.io/guide/working-with-block-tree.html#defining-new-blocks

https://github.com/toeverything/blocksuite/pull/5339

[kyrylolvov]

Thanks! Was able to disable font loading this way

import { DocEditorBlockSpecs, EdgelessEditorBlockSpecs, DocPageService, EdgelessPageService } from '@blocksuite/blocks';

class CustomDocPageService extends DocPageService {
  loadFonts() {}
}

class CustomEdgelessPageService extends EdgelessPageService {
  loadFonts() {}
}

export const getSpecs = () => {
  const docModeSpecs = DocEditorBlockSpecs.map((preset) => {
    if (preset.schema.model.flavour === 'affine:page') {
      return {
        ...preset,
        service: CustomDocPageService,
      };
    }

    return preset;
  });

  const edgelessModeSpecs = EdgelessEditorBlockSpecs.map((preset) => {
    if (preset.schema.model.flavour === 'affine:page') {
      return {
        ...preset,
        service: CustomEdgelessPageService,
      };
    }

    return preset;
  });

  return {
    docModeSpecs,
    edgelessModeSpecs,
  };
};

const editor = new AffineEditorContainer();
editor.docSpecs = presets.docModeSpecs;
editor.edgelessPreset = presets.edgelessModeSpecs;

[jooler]

Thanks! Was able to disable font loading this way

import { DocEditorBlockSpecs, EdgelessEditorBlockSpecs, DocPageService, EdgelessPageService } from '@blocksuite/blocks';

class CustomDocPageService extends DocPageService {
  loadFonts() {}
}

class CustomEdgelessPageService extends EdgelessPageService {
  loadFonts() {}
}

export const getSpecs = () => {
  const docModeSpecs = DocEditorBlockSpecs.map((preset) => {
    if (preset.schema.model.flavour === 'affine:page') {
      return {
        ...preset,
        service: CustomDocPageService,
      };
    }

    return preset;
  });

  const edgelessModeSpecs = EdgelessEditorBlockSpecs.map((preset) => {
    if (preset.schema.model.flavour === 'affine:page') {
      return {
        ...preset,
        service: CustomEdgelessPageService,
      };
    }

    return preset;
  });

  return {
    docModeSpecs,
    edgelessModeSpecs,
  };
};

const editor = new AffineEditorContainer();
editor.docSpecs = presets.docModeSpecs;
editor.edgelessPreset = presets.edgelessModeSpecs;

hwo to make it in vue? pls....thx...

[kyrylolvov]

@jooler So if you followed the quick-start guide on the website

import '@blocksuite/presets/themes/affine.css';

import { createEmptyPage, DocEditor } from '@blocksuite/presets';
import { Text } from '@blocksuite/store';

(async () => {
  // Init editor with default block tree
  const page = await createEmptyPage().init();
  const editor = new DocEditor();
  editor.page = page;
  document.body.appendChild(editor);

  // Update block node with some initial text content
  const paragraphs = page.getBlockByFlavour('affine:paragraph');
  const paragraph = paragraphs[0];
  page.updateBlock(paragraph, { text: new Text('Hello World!') });
})();

I assume you can just create the same getSpecs() function, just without edgelessMode and then pass it like editor.docSpecs = presets.docModeSpecs;

[jooler]

@kyrylolvov thank you, it works now...