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

[Ravim-addweb]

Hello @dulnan @dasjo and @jonock !

I am trying the first instance of blokk.li with my fresh nuxt.js local setup and I am getting exceptions whenever I tap on the button to "Edit Blocks". Basically I've not invented any new functionalities, just trying to follow the doc so far.

Please find the versions and environment information below which may help you to diagnose the problem. Any help is much appreciated, the package looks really promising.

I am using: 18.14.2 node version on my Ubuntu 22.04 Chrome and Brave browsers.

Package.json:

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "blokkli-beta": "^0.0.1-beta.0",
    "nuxt": "^3.11.1",
    "vue": "^3.4.21",
    "vue-router": "^4.3.0"
  }
}

nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['blokkli-beta'],

  blokkli: {
    // Only required configuration.
    // Should match the entity type of your blocks.
    itemEntityType: 'block',
  },
})

app/blokkli.editAdapter.ts:

import { defineBlokkliEditAdapter } from '#blokkli/adapter'

type YourStateType = {
  page: {
    title: 'My page'
  }
  editState: {
    currentMutationIndex: number
    mutations: any[]
    mutatedFields: any[]
    violations: any[]
    // etc.
  }
}

const bundles: BlockBundleDefinition[] = [
    {
      id: 'card',
      label: 'Card',
      description:
        'A block that renders a card with a title, text and a link.',
      allowReusable: true,
      isTranslatable: true,
    },
    {
      id: 'horizontal_rule',
      label: 'Horizontal Rule',
      description:
        'A block that renders a simple horizontal rule to separate content.',
      allowReusable: false,
      isTranslatable: false,
    },
    // etc.
  ]

export default defineBlokkliEditAdapter<YourStateType>((ctx) => {
    const mapState = (yourState: YourStateType): MappedState => {
        return {
          currentIndex: yourState.editState.currentMutationIndex,
          mutations: yourState.editState.mutations.map(mapMutation),
          currentUserIsOwner: yourState.page.owner.id === user.value.id,
          ownerName: yourState.page.owner.name,
          mutatedState: {
            fields: yourState.editState.mutatedFields.map(mapMutatedFields),
          },
          // etc.
        }
    }

  return {
    loadState: async (): YourStateType => {
      const response = await $fetch(
        `/backend-api/edit/${ctx.value.entityUuid}/get-state`,
      )
      return response.data
    },
    mapState,
    getAllBundles: () => {
        return Promise.resolve(bundles)
    },
    getFieldConfig: () => {
        const fieldConfig: FieldConfig[] = [
          {
            // Same name as on <BlokkliField>.
            name: 'field_blocks',
  
            // Same type and bundle of the <BlokkliProvider> the field
            // belongs to.
            entityType: 'content',
            entityBundle: 'blog_post',
  
            // The label displayed in the editor.
            label: 'Blocks',
  
            // The maximum number of blocks in this field. -1 means unlimited.
            cardinality: -1,
  
            // Whether the current user is allowed to edit the field.
            canEdit: true,
  
            // The block bundles that are allowed in this field.
            allowedBundles: ['title', 'rich_text', 'link', 'horizontal_rule'],
          },
        ]
        return Promise.resolve(fieldConfig)
    },
    addNewBlock: (e) => {
        return $fetch(`/api/edit/${ctx.value.entityUuid}/add-new-block`, {
          method: 'post',
          body: {
            // The block bundle to add.
            bundle: e.type,
  
            // The parent entity type where the block is being added.
            // Could be the entity type of the <BlokkliProvider> or in case
            // of nested blocks, the entity type of the block.
            entityType: e.host.type,
            entityUuid: e.host.uuid,
  
            // The field name where the block is added.
            fieldName: e.host.fieldName,
  
            // The UUID of the block that should be before the new one.
            preceedingUuid: e.afterUuid,
          },
        })
    },
    moveBlock: (e) => {
        return $fetch(`/backend-api/edit/${ctx.value.entityUuid}/move-block`, {
          method: 'post',
          body: {
            // The block being moved.
            uuid: e.item.uuid,
  
            // The parent entity type where the block is being added.
            // Could be the entity type of the <BlokkliProvider> or in case of nested blocks, the entity type of the block.
            entityType: e.host.type,
            entityUuid: e.host.uuid,
  
            // The field name where the block is added.
            fieldName: e.host.fieldName,
  
            // The UUID of the block that should be before the new one.
            // If undefined, the block should be moved to index 0 of the field list.
            preceedingUuid: e.afterUuid,
          },
        })
    },
    moveMultipleBlocks: (e) => {
        return $fetch(
          `/backend-api/edit/${ctx.value.entityUuid}/move-multiple-blocks`,
          {
            method: 'post',
            body: {
              // The UUIDs of the blocks being moved.
              uuids: e.uuids,
  
              // The parent entity type where the block is being added.
              // Could be the entity type of the <BlokkliProvider> or in case of nested blocks, the entity type of the block.
              entityType: e.host.type,
              entityUuid: e.host.uuid,
  
              // The field name where the block is added.
              fieldName: e.host.fieldName,
  
              // The UUID of the block that should be before the new one.
              // If undefined, the block should be moved to index 0 of the field list.
              preceedingUuid: e.afterUuid,
            },
          },
        )
    },
  }
})

app.vue:

<template>
  <BlokkliProvider
    entity-type="content"
    entity-bundle="blog_post"
    entity-uuid="9485812c-0ecd-4699-85b2-3a031d47a0a1"
    can-edit
  >
    <BlokkliField :list="blocks" name="blocks" />
  </BlokkliProvider>
</template>

<script lang="ts" setup>
const blocks = [
  {
    uuid: '96f7fbda-04d9-4662-9a6c-6aa3bcf964f2',
    bundle: 'title',
    props: {
      title: 'Hello world',
    },
  },
  {
    uuid: '9485812c-0ecd-4699-85b2-3a031d47a0a1',
    bundle: 'rich_text',
    props: {
      text: '<p>Lorem ipsum dolor sit amet</p>',
    },
  },
  {
    uuid: '5407ef47-dfbc-456b-9900-8e2577185380',
    bundle: 'horizontal_rule',
  },
  {
    uuid: 'f91e046b-3bcc-48dd-bbd5-8a21115436b7',
    bundle: 'link',
    options: {
      linkType: 'button',
    },
    props: {
      label: 'Learn more',
      href: '/learn-more',
    },
  },
]
</script>

components/Blocks/Title.vue:

<template>
  <h2>{{ title }}</h2>
</template>

<script lang="ts" setup>
defineBlokkli({
  bundle: 'title',
})

defineProps<{
  title: string
}>()
</script>

Here's the output snapshot:

The error says:

uiProvider.mjs?v=e08a98ab:31 Uncaught (in promise) Error: Failed to locate artboard element.
    at artboardElement (uiProvider.mjs?v=e08a98ab:31:13)

Please let me know what I am missing, really looking forward to take this further. Thanks!