"TypeError: Failed to construct 'HTMLElement': Illegal constructor" while trying to bootstrap a project using EdgelessEditor in Preset with Vue

[KhangGEH]

Hi,

I have an editor.ts file like this:

import { createEmptyDoc, EdgelessEditor } from "@blocksuite/presets";

export function initEditor() {
  const doc = createEmptyDoc().init();
  const editor = new EdgelessEditor();
  editor.doc = doc;
  return { editor };
}

and then I will try to call it and init it in the Container like so:

<template>
  <div class="editor-container" ref="editorContainerRef"></div>
</template>

<script setup lang="ts">
import { inject, onMounted, ref } from "vue";
import { initEditor } from "../editor.ts";

const { editor } = initEditor();
const editorContainerRef = ref<HTMLDivElement>();

onMounted(() => {
  editorContainerRef.value && editorContainerRef.value.appendChild(editor);
});
</script>

It will throw the above error like this:

I'm using the latest package from @BlockSuite:

{
 "dependencies": {
    "@blocksuite/affine": "^0.18.5",
    "@blocksuite/blocks": "^0.18.5",
    "@blocksuite/presets": "^0.18.5",
    "vue": "3.4.27"
  },
}

I was testing with the 0.15.0-canary version before, it works fine. But I can't bootstrap with 0.18.x

Can someone help?
The document is outdated and don't have any helpful guide on this.

[OpenBitSack]

import {effects as blocksEffects } from '@blocksuite/blocks/effects'
import {effects as presetsEffects} from '@blocksuite/presets/effects'

blocksEffects()
presetsEffects()

You should add this code before initializing editor

[KhangGEH]

Thanks, it works.

But in a bit further code digging. I found that the effects() function imported from @blocksuite/affine/effects call both of the block and presets effects:

// @blocksuite\affine\src\effects.ts

import { effects as blocksEffects } from '@blocksuite/blocks/effects';
import { effects as presetsEffects } from '@blocksuite/presets/effects';

export function effects() {
  blocksEffects();
  presetsEffects();
}

So if anyone encounter the same problem, can call this one only.

[KhangGEH]

but one more problem is even the editor is working now. The styling is lacking? I guess that is another initiator function need to be called?

[KhangGEH]

Found the fix for the missing style:

• Need to install the @toeverything/themes package.
• import "@toeverything/theme/style.css"; in your project

It feels weird that we need to install another package for a "preset" editor but I think they're still in rapid development so these QoL features are missing is understandable.

[mingfang]

Thanks for sharing the workaround.
I searched for hours before finding this.
IMO this is a bug and should be fixed in the framework; we should not have to apply this workaround.