Closed jooler closed 7 months ago
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
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.
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)
@doodlewind @Flrande Are there any updates on this or some workaround?
@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.
@Flrande Are there any examples on how to override behaviour in the editors?
I am using const editor = new AffineEditorContainer();
@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
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;
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...
@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;
@kyrylolvov thank you, it works now...
I have add blocksuite follow this page
https://blocksuite.io/guide/quick-start.html
And some CORS error herethere are too many...