Basic setup returns error: "Failed to locate artboard element." about editor

[dulnan]

Ah, this is something that's completely missing from the docs I just realised. Sorry for that!

What you need is to have a single HTML element somewhere in your app with the class bk-main-canvas. I always put it in my root element in app.vue:

<template>
  <div class="bk-main-canvas">
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

Bascially what this does is tell blökkli which element should be used for the "artboard". Inside the editor, this element will be made position: fixed, it receives a drop shadow and is made zoomable/draggable. In most cases the root element of the app is where this makes most sense, but it could also be in the layout or in your page component.

[Ravim-addweb]

Thanks @dulnan that makes sense, I have checked the playground of the editor and that just worked.

Side question: I have noticed in the live demo that, I can use Text and YouTube videos on the clipboard. But when I try to drop the image pasted on the clipboard into the editor, it doesn't work. YouTube and Text are being dropped on the editor but not the image. Is that something already on the cards?