@blokkli/editor 2.0.0-alpha.1 → 2.0.0-alpha.3

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "blokkli",
   "configKey": "blokkli",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.3",
   "compatibility": {
     "nuxt": "^3.15.0"
   },

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { resolveFiles, createResolver, addComponent, addImports, addTemplate, addTypeTemplate, resolveAlias, defineNuxtModule, addPlugin, addBuildPlugin } from '@nuxt/kit';
+import { resolveAlias, resolveFiles, createResolver, addComponent, addImports, addTemplate, addTypeTemplate, defineNuxtModule, addPlugin, addBuildPlugin } from '@nuxt/kit';
 import { createUnplugin } from 'unplugin';
 import MagicString from 'magic-string';
 import { walk } from 'estree-walker-ts';
@@ -13,7 +13,7 @@ import { BK_VISIBLE_LANGUAGES, BK_HIDDEN_GLOBALLY } from '../dist/runtime/helper
 import fs from 'node:fs';
 import { defu, createDefu } from 'defu';
 
-const version = "2.0.0-alpha.1";
+const version = "2.0.0-alpha.3";
 
 function sortObjectKeys(obj) {
   if (Array.isArray(obj)) {
@@ -275,8 +275,10 @@ class BlockCollector extends Collector {
     this.patterns = (helper.options.pattern || []).map((pattern) => {
       if (pattern.startsWith("/")) {
         return pattern;
+      } else if (pattern.startsWith(".")) {
+        return helper.resolvers.src.resolve(pattern);
       }
-      return helper.resolvers.src.resolve(pattern);
+      return resolveAlias(pattern);
     });
   }
   async init() {
@@ -566,7 +568,7 @@ class ModuleHelper {
     this.paths = {
       blokkliBuildDir: this.resolvers.build.resolve("blokkli"),
       srcDir: nuxt.options.srcDir,
-      editAdapter: this.findEditAdapterPath()
+      editAdapter: ""
     };
     this.relativePaths = {
       TYPES: relative(
@@ -615,6 +617,7 @@ class ModuleHelper {
       fieldListTypes: fieldListTypes.filter(onlyUnique),
       chunkNames: chunkNames.filter(onlyUnique)
     };
+    this.paths.editAdapter = this.findEditAdapterPath();
   }
   relativePaths;
   paths;
@@ -8056,7 +8059,6 @@ const module = defineNuxtModule({
     }
   },
   defaults: {
-    pattern: ["components/Blokkli/**/*.vue"],
     globalOptions: {
       [BK_VISIBLE_LANGUAGES]: {
         type: "checkboxes",
@@ -8070,8 +8072,7 @@ const module = defineNuxtModule({
         default: false
       }
     },
-    chunkNames: ["global"],
-    itemEntityType: "block"
+    chunkNames: ["global"]
   },
   async setup(moduleOptions, nuxt) {
     const blokkliModules = moduleOptions.modules || [];

package/dist/modules/drupal/graphql/base/fragment.blokkliProps.graphql

@@ -0,0 +1,8 @@
+fragment blokkliProps on ParagraphsBlokkliProps {
+  entityUuid
+  entityType
+  entityBundle
+  canEdit
+  editLabel
+  language
+}

package/dist/modules/drupal/graphql/base/fragment.paragraphsFieldItem.graphql

@@ -0,0 +1,6 @@
+fragment paragraphsFieldItem on Paragraph {
+  uuid
+  bundle: entityBundle
+  isNew
+  options: paragraphsBlokkliOptions
+}

package/dist/modules/drupal/index.mjs

@@ -1,4 +1,5 @@
 import { useLogger, createResolver } from '@nuxt/kit';
+import { fileURLToPath } from 'node:url';
 import { join } from 'pathe';
 import { isObjectType, isInterfaceType } from 'graphql';
 import { useGraphqlModuleContext } from 'nuxt-graphql-middleware/utils';
@@ -14,6 +15,12 @@ function defineBlokkliModule(init) {
 
 const logger = useLogger("@blokkli/editor");
 
+function toPascalCase(text) {
+  return text.replace(/(^\w|_\w)/g, clearAndUpper);
+}
+function clearAndUpper(text) {
+  return text.replace(/_/, "").toUpperCase();
+}
 const index = defineBlokkliModule({
   alterOptions(options) {
     if (!options.itemEntityType) {
@@ -23,10 +30,20 @@ const index = defineBlokkliModule({
       options.pattern = ["~/components/Paragraph/**/*.vue"];
     }
     if (!options.editAdapterPath) {
-      const resolver = createResolver(join(import.meta.url));
+      const resolver = createResolver(
+        fileURLToPath(new URL("./", import.meta.url))
+      );
       const filePath = resolver.resolve("./adapter/index.mjs");
       options.editAdapterPath = filePath;
     }
+    if (!options.getBundlePropsType) {
+      options.getBundlePropsType = function(bundle) {
+        return {
+          typeName: `Paragraph${toPascalCase(bundle)}Fragment`,
+          from: "#graphql-operations"
+        };
+      };
+    }
   },
   setup({ context }) {
     if (!useGraphqlModuleContext({ nullOnMissing: true })) {
@@ -47,7 +64,9 @@ const index = defineBlokkliModule({
     const queryFields = getTypeFields("Query");
     const editStateFields = getTypeFields("ParagraphsBlokkliEditState");
     const editMutationStateFields = getTypeFields("ParagraphsEditMutationState");
-    const resolver = createResolver(join(import.meta.url, "graphql"));
+    const resolver = createResolver(
+      join(fileURLToPath(new URL("./", import.meta.url)), "graphql")
+    );
     function addGraphqlDocument(fileName) {
       const filePath = resolver.resolve(fileName);
       graphql.addImportFile(filePath);
@@ -65,6 +84,8 @@ const index = defineBlokkliModule({
       "fragment.paragraphsBlokkliMutationItem.graphql",
       "fragment.paragraphsBlokkliMutationResult.graphql",
       "fragment.paragraphsBlokkliViolation.graphql",
+      "fragment.blokkliProps.graphql",
+      "fragment.paragraphsFieldItem.graphql",
       "query.pbConfig.graphql",
       "query.pbEditState.graphql"
     ];
@@ -141,9 +162,9 @@ const index = defineBlokkliModule({
       context.features.disableFeature("preview-grant");
     }
     if (editStateFields.has("publishOptions") && queryFields.has("pbSearchEditStates")) {
-      addGraphqlDocument("publishNew.graphql");
+      addGraphqlDocument("features/publishNew.graphql");
     } else {
-      addGraphqlDocument("publish.graphql");
+      addGraphqlDocument("features/publish.graphql");
     }
   }
 });

package/dist/runtime/blokkliPlugins/DroppableEdit/index.vue

@@ -11,7 +11,7 @@
         <slot />
         <template #footer>
           <button class="bk-button bk-is-primary" @click="onSubmit">
-            {{ $t('droppableEditFormSave', 'Save') }}
+            {{ $t("droppableEditFormSave", "Save") }}
           </button>
         </template>
       </FormOverlay>

package/dist/runtime/components/BlokkliEditable.vue

@@ -16,6 +16,7 @@ const props = defineProps({
   value: { type: String, required: true },
   tag: { type: String, required: false, default: "div" }
 });
+defineSlots();
 const valueOverride = ref("");
 const isEditing = inject(INJECT_IS_EDITING, false);
 const entity = inject(INJECT_ENTITY_CONTEXT);

package/dist/runtime/components/BlokkliEditable.vue.d.ts

@@ -3,25 +3,11 @@ type __VLS_Props = {
     value: string;
     tag?: string;
 };
-declare const renderedValue: import("vue").ComputedRef<string>;
-declare const attrs: import("vue").ComputedRef<{
-    'data-blokkli-editable-field': string;
-    'data-blokkli-editable-component': string;
-    'data-blokkli-editable-value': string;
-} | undefined>;
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_6: {
-    value: string;
+type __VLS_Slots = {
+    default(props: {
+        value: string;
+    }): any;
 };
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    default?: (props: typeof __VLS_6) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
-    renderedValue: typeof renderedValue;
-    attrs: typeof attrs;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    tag: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     tag: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/BlokkliField.vue

@@ -89,6 +89,7 @@ const attrs = useAttrs();
 defineOptions({
   inheritAttrs: false
 });
+defineSlots();
 const isEditing = inject(INJECT_IS_EDITING, false);
 const isGlobalProxyMode = inject(
   INJECT_GLOBAL_PROXY_MODE,

package/dist/runtime/components/BlokkliField.vue.d.ts

@@ -1,56 +1,14 @@
-import { type ComputedRef } from '#imports';
 import type { BlokkliFragmentName } from '#blokkli-build/definitions';
-import BlokkliItem from './BlokkliItem.vue.js';
-import type { FieldListItem, EntityContext, BlokkliProviderEntityContext } from '#blokkli/types';
+import type { FieldListItem } from '#blokkli/types';
 import type { ValidFieldListTypes, FieldListItemTyped } from '#blokkli-build/generated-types';
-declare const DraggableList: import("vue").DefineComponent<{
-    name: string;
-    fieldKey: string;
-    list: FieldListItem[];
-    entity: EntityContext;
-    language?: string;
-    tag?: string;
-    isNested: boolean;
-    fieldListType: string;
-    allowedFragments?: BlokkliFragmentName[];
-    dropAlignment?: "vertical" | "horizontal";
-    proxyMode?: boolean;
-    globalProxyMode?: boolean;
-    nestingLevel: number;
-    shouldRenderItem?: (item: FieldListItem | FieldListItemTyped) => boolean;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
-    name: string;
-    fieldKey: string;
-    list: FieldListItem[];
-    entity: EntityContext;
-    language?: string;
-    tag?: string;
-    isNested: boolean;
-    fieldListType: string;
-    allowedFragments?: BlokkliFragmentName[];
-    dropAlignment?: "vertical" | "horizontal";
-    proxyMode?: boolean;
-    globalProxyMode?: boolean;
-    nestingLevel: number;
-    shouldRenderItem?: (item: FieldListItem | FieldListItemTyped) => boolean;
-}> & Readonly<{}>, {
-    allowedFragments: BlokkliFragmentName[];
-    tag: string;
-    language: string;
-    dropAlignment: "vertical" | "horizontal";
-    shouldRenderItem: (item: FieldListItem | FieldListItemTyped) => boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any> | null;
-declare const attrs: {
-    [x: string]: unknown;
+type __VLS_Slots = {
+    default(props: {
+        items: FieldListItemTyped[];
+    }): any;
+    after(props: {
+        items: FieldListItemTyped[];
+    }): any;
 };
-declare const isEditing = false;
-declare const isGlobalProxyMode: ComputedRef<boolean> | null;
-declare const isInReusable = false;
-declare const isPreview: ComputedRef<boolean> | null;
-declare const isNested = false;
-declare const nestingLevel: number;
-declare const entity: EntityContext | undefined;
-declare const providerEntity: ComputedRef<BlokkliProviderEntityContext>;
 type __VLS_Props = {
     name: string;
     list?: Array<FieldListItem | null | undefined> | FieldListItem | null;
@@ -71,48 +29,6 @@ type __VLS_Props = {
      */
     shouldRenderItem?: (item: FieldListItem | FieldListItemTyped) => boolean;
 };
-declare const canEdit: import("vue").Ref<boolean, boolean>;
-declare const fieldKey: ComputedRef<string | undefined>;
-declare const fieldListType: ComputedRef<"default">;
-declare const filteredList: ComputedRef<FieldListItemTyped[]>;
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_1: {
-    items: FieldListItemTyped[];
-}, __VLS_14: {
-    items: FieldListItemTyped[];
-};
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    default?: (props: typeof __VLS_1) => any;
-} & {
-    after?: (props: typeof __VLS_14) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
-    BlokkliItem: typeof BlokkliItem;
-    DraggableList: typeof DraggableList;
-    attrs: typeof attrs;
-    isEditing: typeof isEditing;
-    isGlobalProxyMode: typeof isGlobalProxyMode;
-    isInReusable: typeof isInReusable;
-    isPreview: typeof isPreview;
-    isNested: typeof isNested;
-    nestingLevel: typeof nestingLevel;
-    entity: typeof entity;
-    providerEntity: typeof providerEntity;
-    canEdit: typeof canEdit;
-    fieldKey: typeof fieldKey;
-    fieldListType: typeof fieldListType;
-    filteredList: typeof filteredList;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    list: Array<FieldListItem | null | undefined> | FieldListItem | null;
-    fieldListType: ValidFieldListTypes;
-    allowedFragments: BlokkliFragmentName[];
-    tag: string;
-    dropAlignment: "vertical" | "horizontal";
-    shouldRenderItem: (item: FieldListItem | FieldListItemTyped) => boolean;
-    listClass: string;
-    editClass: string;
-    nonEmptyClass: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     list: Array<FieldListItem | null | undefined> | FieldListItem | null;
     fieldListType: ValidFieldListTypes;

package/dist/runtime/components/BlokkliProvider.vue

@@ -72,6 +72,7 @@ import {
   INJECT_ENTITY_CONTEXT,
   INJECT_PROVIDER_CONTEXT
 } from "../helpers/symbols";
+defineSlots();
 const PreviewProvider = defineAsyncComponent(
   () => import("./Edit/PreviewProvider.vue")
 );
@@ -106,7 +107,7 @@ const isEditing = computed(
   () => props.canEdit && !!props.entityUuid && route.query.blokkliEditing === props.entityUuid
 );
 const isPreviewing = computed(
-  () => props.entityUuid && route.query.blokkliPreview === props.entityUuid
+  () => !!props.entityUuid && route.query.blokkliPreview === props.entityUuid
 );
 const showIndicator = computed(
   () => props.canEdit && !route.query.blokkliEditing && !route.query.blokkliPreview

package/dist/runtime/components/BlokkliProvider.vue.d.ts

@@ -1,4 +1,4 @@
-declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+declare const _default: <T extends object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & {
         entity?: T;
         entityType: string;
@@ -17,28 +17,12 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {
-        default?: (((props: {
-            entity: any;
+        default(props: {
             isEditing: boolean;
             canEdit: boolean;
-            isPreview: true;
-        }) => any) & ((props: {
-            isEditing: true;
-            canEdit: boolean;
-            isPreview: false | "";
-            entity: any;
-        }) => any) & ((props: {
-            isEditing: boolean;
-            canEdit: boolean;
-            isPreview: boolean | "";
-            entity: [{
-                type: import("vue").PropType<__VLS_NonUndefinedable<T>>;
-                default: undefined;
-            }] extends [import("vue").Prop<infer V, infer D>] ? unknown extends V ? keyof V extends never ? import("@vue/shared").IfAny<V, V, D> : V : V : {
-                type: import("vue").PropType<__VLS_NonUndefinedable<T>>;
-                default: undefined;
-            };
-        }) => any)) | undefined;
+            isPreview: boolean;
+            entity?: T | undefined;
+        }): any;
     };
     emit: {};
 }>) => import("vue").VNode & {
@@ -48,4 +32,3 @@ export default _default;
 type __VLS_PrettifyLocal<T> = {
     [K in keyof T]: T[K];
 } & {};
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/dist/runtime/components/Edit/BlokkliErrorBoundary.vue

@@ -15,17 +15,17 @@
         <div class="bk-fatal-error-overlay-info">
           <Icon name="sad" />
           <div>
-            <h2>{{ $t('fatalErrorTitle', 'bl\xF6kkli has stopped working') }}</h2>
+            <h2>{{ $t("fatalErrorTitle", "bl\xF6kkli has stopped working") }}</h2>
             <p>
               {{
                 $t(
-  'fatalErrorText',
-  'Unfortunately bl\xF6kkli has encountered a fatal error which prevents it from working normally. You may be able to continue using it, but things may not work as expected.'
+  "fatalErrorText",
+  "Unfortunately bl\xF6kkli has encountered a fatal error which prevents it from working normally. You may be able to continue using it, but things may not work as expected."
 )
               }}
             </p>
             <button class="bk-button bk-is-danger" @click="errors = []">
-              {{ $t('fatalErrorButton', 'Continue anyway...') }}
+              {{ $t("fatalErrorButton", "Continue anyway...") }}
             </button>
           </div>
         </div>

package/dist/runtime/components/Edit/EditProvider.vue

@@ -12,14 +12,14 @@
       <div v-if="!state.stateAvailable.value" class="bk-state-unavailable">
         <h2>
           {{
-            $t('stateUnavailableTitle', 'The edit state could not be loaded.')
+            $t("stateUnavailableTitle", "The edit state could not be loaded.")
           }}
         </h2>
         <p>
           {{
             $t(
-  'stateUnavailableText',
-  'This could be due to missing permissions or a temporary problem. Please try again later.'
+  "stateUnavailableText",
+  "This could be due to missing permissions or a temporary problem. Please try again later."
 )
           }}
         </p>
@@ -102,6 +102,7 @@ const props = defineProps({
   language: { type: String, required: false, default: "en" },
   isolate: { type: Boolean, required: false }
 });
+defineSlots();
 const context = computed(() => {
   return {
     entityType: props.entityType,

package/dist/runtime/components/Edit/EditProvider.vue.d.ts

@@ -11,10 +11,10 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {
-        default?: ((props: {
+        default(props: {
+            mutatedEntity: T;
             key: string;
-            mutatedEntity: any;
-        }) => any) | undefined;
+        }): any;
     };
     emit: {};
 }>) => import("vue").VNode & {

package/dist/runtime/components/Edit/Features/Assistant/Overlay/index.vue

@@ -10,13 +10,13 @@
         <p class="bk-lead">
           {{
             $t(
-  \"assistantDialogLead\",
-  \"Please enter what you"d like the assistant to generate.\"
+  "assistantDialogLead",
+  "Please enter what you'd like the assistant to generate."
 )
           }}
         </p>
         <label class="bk-form-label" for="assistant_prompt">
-          {{ $t('assistantPromptLabel', 'Prompt') }}
+          {{ $t("assistantPromptLabel", "Prompt") }}
         </label>
         <div class="bk-assistant-form-textarea">
           <textarea
@@ -56,7 +56,7 @@
     </div>
     <template #footer>
       <button class="bk-button bk-is-primary" @click="onSubmit">
-        {{ $t('assistantDialogSubmit', 'Create blocks') }}
+        {{ $t("assistantDialogSubmit", "Create blocks") }}
       </button>
     </template>
   </FormOverlay>

package/dist/runtime/components/Edit/Features/Clipboard/index.vue

@@ -19,7 +19,7 @@
         v-if="!pastedItems.length"
         class="bk bk-clipboard-info bk-sidebar-padding"
       >
-        <h4>{{ $t('clipboardEmpty', 'No items in the clipboard') }}</h4>
+        <h4>{{ $t("clipboardEmpty", "No items in the clipboard") }}</h4>
         <div
           v-if="!ui.isMobile.value"
           v-html="

package/dist/runtime/components/Edit/Features/Comments/AddForm/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="bk-blokkli-item-actions-comment-dropdown" @keydown.capture.stop>
     <label for="comment_body" class="bk-form-label">{{
-      $t('commentBody', 'Comment')
+      $t("commentBody", "Comment")
     }}</label>
     <textarea
       id="comment_body"
@@ -12,7 +12,7 @@
       required
     />
     <button class="bk-button bk-is-primary" @click="$emit('add', comment)">
-      {{ $t('commentSave', 'Submit comment') }}
+      {{ $t("commentSave", "Submit comment") }}
     </button>
   </div>
 </template>

package/dist/runtime/components/Edit/Features/Comments/Comment/index.vue

@@ -14,7 +14,7 @@
       @click.capture.stop="$emit('resolve')"
     >
       <Icon name="check" />
-      <span>{{ $t('commentsMarkAsResolved', 'Resolve') }}</span>
+      <span>{{ $t("commentsMarkAsResolved", "Resolve") }}</span>
     </button>
   </div>
 </template>

package/dist/runtime/components/Edit/Features/Comments/Overlay/Item/index.vue

@@ -28,7 +28,7 @@
         <span
           >{{ comments.length }}
           {{
-            comments.length === 1 ? $t('singleComment', 'comment') : $t('comments', 'Comments')
+            comments.length === 1 ? $t("singleComment", "comment") : $t("comments", "Comments")
           }}</span
         >
       </div>
@@ -49,7 +49,7 @@
           class="bk-button bk-is-primary bk-is-small"
           @click="addComment"
         >
-          {{ $t('commentAdd', 'Add comment') }}
+          {{ $t("commentAdd", "Add comment") }}
         </button>
       </div>
     </div>

package/dist/runtime/components/Edit/Features/Diff/DiffView/index.vue

@@ -3,10 +3,10 @@
     <table class="bk-diff-table">
       <thead>
         <tr>
-          <th>{{ $t('diffTableChange', 'Change') }}</th>
-          <th>{{ $t('diffTableBundle', 'Type') }}</th>
-          <th>{{ $t('diffTableProperty', 'Property') }}</th>
-          <th>{{ $t('diffTableDiff', 'Diff') }}</th>
+          <th>{{ $t("diffTableChange", "Change") }}</th>
+          <th>{{ $t("diffTableBundle", "Type") }}</th>
+          <th>{{ $t("diffTableProperty", "Property") }}</th>
+          <th>{{ $t("diffTableDiff", "Diff") }}</th>
         </tr>
       </thead>
       <tbody>
@@ -20,16 +20,16 @@
                 v-if="item.status === 'added'"
                 class="bk-diff-status-label bk-is-added"
               >
-                {{ $t('diffStatusAdded', 'Added') }}
+                {{ $t("diffStatusAdded", "Added") }}
               </div>
               <div
                 v-else-if="item.status === 'removed'"
                 class="bk-diff-status-label bk-is-removed"
               >
-                {{ $t('diffStatusDeleted', 'Deleted') }}
+                {{ $t("diffStatusDeleted", "Deleted") }}
               </div>
               <div v-else class="bk-diff-status-label">
-                {{ $t('diffStatusEdited', 'Edited') }}
+                {{ $t("diffStatusEdited", "Edited") }}
               </div>
             </td>
             <td

package/dist/runtime/components/Edit/Features/EditableField/Overlay/index.vue

@@ -13,11 +13,11 @@
         </h3>
         <button @click.prevent="cancel">
           <Icon name="close" />
-          <span>{{ $t('cancel', 'Cancel') }}</span>
+          <span>{{ $t("cancel", "Cancel") }}</span>
         </button>
         <button :disabled="!hasChanged" type="submit" @click.prevent="save">
           <Icon name="save" />
-          <span>{{ $t('save', 'Save') }}</span>
+          <span>{{ $t("save", "Save") }}</span>
         </button>
       </div>
 

package/dist/runtime/components/Edit/Features/Fragments/Dialog/index.vue

@@ -9,8 +9,8 @@
       <p class="bk-lead">
         {{
           $t(
-  'fragmentsPlaceDialogLead',
-  'Select a block fragment to add to the page.'
+  "fragmentsPlaceDialogLead",
+  "Select a block fragment to add to the page."
 )
         }}
       </p>
@@ -18,7 +18,7 @@
         <div class="bk-form-group">
           <div>
             <label class="bk-form-label" for="library_search">
-              {{ $t('fragmentsPlaceDialogSearchLabel', 'Filter fragments') }}
+              {{ $t("fragmentsPlaceDialogSearchLabel", "Filter fragments") }}
             </label>
             <input
               id="fragments_search"
@@ -56,7 +56,7 @@
     </div>
     <template #footer>
       <button class="bk-button bk-is-primary" @click="onSubmit">
-        {{ $t('fragmentsPlaceDialogSubmitButton', 'Add selected fragment') }}
+        {{ $t("fragmentsPlaceDialogSubmitButton", "Add selected fragment") }}
       </button>
     </template>
   </FormOverlay>

package/dist/runtime/components/Edit/Features/Help/index.vue

@@ -14,11 +14,11 @@
           :disabled="tour.isTouring.value"
           @click="tour.isTouring.value = true"
         >
-          {{ $t('tourLabel', 'Take a tour') }}
+          {{ $t("tourLabel", "Take a tour") }}
         </button>
       </div>
       <div class="bk-help-section">
-        <h3>{{ $t('featureHelpShortcuts', 'Shortcuts') }}</h3>
+        <h3>{{ $t("featureHelpShortcuts", "Shortcuts") }}</h3>
         <Shortcuts />
       </div>
     </div>

package/dist/runtime/components/Edit/Features/History/List/index.vue

@@ -41,8 +41,8 @@
         <button class="bk-history-item-button" @click="showAmount += 100">
           <strong
             >{{
-              $t('historyShowMore', 'Show @count more').replace(
-  '@count',
+              $t("historyShowMore", "Show @count more").replace(
+  "@count",
   Math.min(totalMutations - showAmount, 100).toString()
 )
             }}
@@ -59,7 +59,7 @@
         <button class="bk-history-item-button" @click="setHistoryIndex(-1)">
           <div>
             <strong>{{
-              $t('historyCurrentRevision', 'Current revision')
+              $t("historyCurrentRevision", "Current revision")
             }}</strong>
           </div>
           <!-- @TODO: Pass in the timestamp of the entity's latest revision. -->
@@ -74,7 +74,7 @@
       </li>
     </ul>
     <div v-else class="bk-history-empty-message">
-      {{ $t('historyEmpty', 'There are now changes yet.') }}
+      {{ $t("historyEmpty", "There are now changes yet.") }}
     </div>
   </div>
 </template>

package/dist/runtime/components/Edit/Features/ImportExisting/Dialog/index.vue

@@ -19,8 +19,8 @@
         <h3 class="bk-form-label">
           {{
             $t(
-  'importExistingFieldsLabel',
-  'Which content would you like to import?'
+  "importExistingFieldsLabel",
+  "Which content would you like to import?"
 )
           }}
         </h3>
@@ -32,8 +32,8 @@
       <div class="bk-form-section">
         <label for="pb_search_term" class="bk-form-label">{{
           $t(
-  'importExistingPagesLabel',
-  'From which page would you like to import?'
+  "importExistingPagesLabel",
+  "From which page would you like to import?"
 )
         }}</label>
         <input
@@ -47,7 +47,7 @@
       </div>
       <div>
         {{
-          $t('importExistingResultsTitle', '@count of @total pages').replace('@count', entities.length.toString()).replace('@total', total.toString())
+          $t("importExistingResultsTitle", "@count of @total pages").replace("@count", entities.length.toString()).replace("@total", total.toString())
         }}
       </div>
       <div

package/dist/runtime/components/Edit/Features/Library/EditReusable/index.vue

@@ -5,13 +5,13 @@
       <header v-show="isLoaded" class="bk bk-library-edit-overlay-header">
         <h2>
           <span>{{
-            $t('libraryItemEditOverlayTitle', 'Edit reusable block')
+            $t("libraryItemEditOverlayTitle", "Edit reusable block")
           }}</span>
           <span v-if="label">&nbsp;{{ label }}</span>
         </h2>
         <button @click.prevent="closeOverlay">
           <Icon name="arrow-left" />
-          <span>{{ $t('libraryItemEditOverlayBack', 'Back to page') }}</span>
+          <span>{{ $t("libraryItemEditOverlayBack", "Back to page") }}</span>
         </button>
       </header>
     </Transition>

package/dist/runtime/components/Edit/Features/Library/LibraryDialog/index.vue

@@ -10,8 +10,8 @@
         <p class="bk-lead">
           {{
             $t(
-  'libraryPlaceDialogLead',
-  'Select a reusable block from the library to add it to your layout. You can detach the block later.'
+  "libraryPlaceDialogLead",
+  "Select a reusable block from the library to add it to your layout. You can detach the block later."
 )
           }}
         </p>
@@ -19,7 +19,7 @@
           <div class="bk-form-group">
             <div>
               <label class="bk-form-label" for="library_search">
-                {{ $t('libraryPlaceSearchLabel', 'Filter library items') }}
+                {{ $t("libraryPlaceSearchLabel", "Filter library items") }}
               </label>
               <input
                 id="library_search"
@@ -37,7 +37,7 @@
             </div>
             <div>
               <label class="bk-form-label" for="library_bundle">
-                {{ $t('libraryPlaceBundleSelectLabel', 'Bundle') }}
+                {{ $t("libraryPlaceBundleSelectLabel", "Bundle") }}
               </label>
               <select
                 id="library_bundle"
@@ -78,7 +78,7 @@
 
     <template #footer>
       <button class="bk-button bk-is-primary" @click="onSubmit">
-        {{ $t('libraryPlaceDialogSubmit', 'Add reusable block') }}
+        {{ $t("libraryPlaceDialogSubmit", "Add reusable block") }}
       </button>
     </template>
   </FormOverlay>

package/dist/runtime/components/Edit/Features/Library/ReusableDialog/index.vue

@@ -24,7 +24,7 @@
 "
       />
       <label for="reusable_label" class="bk-form-label">{{
-        $t('libraryDialogDescriptionLabel', 'Description')
+        $t("libraryDialogDescriptionLabel", "Description")
       }}</label>
       <input
         id="reusable_label"
@@ -38,7 +38,7 @@
       />
     </div>
     <div class="bk-form-label">
-      {{ $t('libraryPreviewLabel', 'Preview') }}
+      {{ $t("libraryPreviewLabel", "Preview") }}
     </div>
     <div
       class="bk-dialog-content-element"

package/dist/runtime/components/Edit/Features/MediaLibrary/Library/index.vue

@@ -66,7 +66,7 @@
 
     <div v-if="selected.length" class="bk-media-library-cancel">
       <button class="bk-button bk-is-primary" @click.prevent="selected = []">
-        {{ $t('cancelSelection', 'Cancel selection') }}
+        {{ $t("cancelSelection", "Cancel selection") }}
       </button>
     </div>
 

package/dist/runtime/components/Edit/Features/Options/Form/Radios/index.vue

@@ -42,7 +42,7 @@
 "
         >
           {{
-            typeof option.value === 'string' ? option.value : option.value.label
+            typeof option.value === "string" ? option.value : option.value.label
           }}
         </span>
       </div>

package/dist/runtime/components/Edit/Features/Ownership/index.vue

@@ -13,7 +13,7 @@
 "
       />
       <button class="bk-button bk-is-danger" @click="takeOwnership">
-        {{ $t('ownershipTakeOwnership', 'Assign to me') }}
+        {{ $t("ownershipTakeOwnership", "Assign to me") }}
       </button>
     </div>
   </Teleport>

package/dist/runtime/components/Edit/Features/PreviewGrant/QrCode/index.vue

@@ -2,7 +2,7 @@
   <div class="bk-qr-code">
     <QrCodeVue :value="fullUrl" :size="430" level="H" />
     <p>
-      {{ $t('previewQrCodeText', 'You can also copy the link and share it.') }}
+      {{ $t("previewQrCodeText", "You can also copy the link and share it.") }}
     </p>
     <input :value="fullUrl" class="bk-form-input" readonly @focus="onFocus" />
   </div>

package/dist/runtime/components/Edit/Features/Publish/index.vue

@@ -50,8 +50,8 @@ const { adapter, settings } = defineBlokkliFeature({
   }
 });
 const route = useRoute();
-const { state, $t, broadcast, context } = useBlokkli();
-const { mutations, canEdit } = state;
+const { state, $t, broadcast, context, eventBus } = useBlokkli();
+const { mutations, canEdit, mutateWithLoadingState } = state;
 const hasPublishOptions = !!adapter.getPublishOptions;
 const isPublished = computed(() => !!state.entity.value.status);
 const showDialog = ref(false);
@@ -82,6 +82,24 @@ const onMenuClick = async () => {
   await publishCurrent();
 };
 async function publishCurrent() {
+  const success = await mutateWithLoadingState(
+    () => adapter.publish({
+      hostEntityType: context.value.entityType,
+      hostEntityUuid: context.value.entityUuid,
+      closeAfterPublish: settings.value.closeAfterPublish
+    }),
+    $t("publishError", "Changes could not be published."),
+    $t("publishSuccess", "Changes published successfully.")
+  );
+  if (!success) {
+    const validations = state.violations.value;
+    if (validations.length) {
+      eventBus.emit("publish:failed");
+      eventBus.emit("sidebar:open", "violations");
+    }
+    return;
+  }
+  onSubmit();
 }
 function onSubmit() {
   broadcast.emit("published", { uuid: context.value.entityUuid });

package/dist/runtime/components/Edit/Features/Search/Overlay/Results/Content/index.vue

@@ -48,7 +48,7 @@
       class="bk-search-no-results"
     >
       <Icon name="sad" />
-      <span>{{ $t('searchBoxNoResultsFound', 'No results found') }}</span>
+      <span>{{ $t("searchBoxNoResultsFound", "No results found") }}</span>
     </div>
   </div>
 </template>

package/dist/runtime/components/Edit/Features/Search/index.vue

@@ -67,6 +67,6 @@ onBlokkliEvent("keyPressed", (e) => {
 
 <script>
 export default {
-  name: "Search"
+  name: "ContentSearch"
 };
 </script>

package/dist/runtime/components/Edit/Features/Tour/Overlay/index.vue

@@ -25,7 +25,7 @@
       <div class="bk-tour-buttons">
         <button @click.stop.prevent="prev">
           <Icon name="chevron-left" />
-          <span>{{ $t('tourPrev', 'Previous') }}</span>
+          <span>{{ $t("tourPrev", "Previous") }}</span>
           <div class="bk-tooltip">
             <span>Arrow Right</span>
             <ShortcutIndicator label="Prev Tour Item" key-code="ArrowLeft" />
@@ -37,7 +37,7 @@
           <span>{{ items.length }}</span>
         </div>
         <button @click.stop.prevent="next">
-          <span>{{ $t('tourNext', 'Next') }}</span>
+          <span>{{ $t("tourNext", "Next") }}</span>
           <Icon name="chevron-right" />
           <div class="bk-tooltip">
             <span>Arrow Left</span>

package/dist/runtime/components/Edit/Features/Tour/Popup/index.vue

@@ -2,7 +2,7 @@
   <Teleport to="body">
     <ViewportBlockingRect id="tour-popup" class="bk bk-tour-popup">
       <div class="bk-tour-popup-title">
-        <h2>{{ $t('tourLabel', 'Take a tour') }}</h2>
+        <h2>{{ $t("tourLabel", "Take a tour") }}</h2>
         <button class="bk-tour-popup-close" @click="$emit('close')">
           <Icon name="close" />
         </button>
@@ -12,14 +12,14 @@
         <p>
           {{
             $t(
-  'tourIntro',
-  'Explore the most important features of the editor and learn how to get started using bl\xF6kkli.'
+  "tourIntro",
+  "Explore the most important features of the editor and learn how to get started using bl\xF6kkli."
 )
           }}
         </p>
 
         <button class="bk-button" @click="$emit('start')">
-          {{ $t('tourStartButton', 'Start the tour') }}
+          {{ $t("tourStartButton", "Start the tour") }}
         </button>
       </div>
     </ViewportBlockingRect>

package/dist/runtime/components/Edit/Features/Translations/Banner/index.vue

@@ -3,7 +3,7 @@
     <Icon name="translate" />
     <p v-html="text" />
     <button class="bk-translations-banner-close" @click="onClick">
-      {{ $t('translationsBannerButton', 'Edit source language instead') }}
+      {{ $t("translationsBannerButton", "Edit source language instead") }}
       <Icon name="close" />
     </button>
   </div>

package/dist/runtime/components/Edit/Features/Validations/index.vue

@@ -22,7 +22,7 @@
         <figure>
           <Icon name="check" />
         </figure>
-        <h3>{{ $t('validationsNoneFound', 'No validation errors found.') }}</h3>
+        <h3>{{ $t("validationsNoneFound", "No validation errors found.") }}</h3>
       </div>
     </div>
 

package/dist/runtime/components/Edit/PreviewProvider.vue

@@ -32,6 +32,7 @@ const props = defineProps({
   entityBundle: { type: String, required: true },
   language: { type: String, required: true }
 });
+defineSlots();
 const context = computed(() => {
   return {
     entityType: props.entityType,

package/dist/runtime/components/Edit/PreviewProvider.vue.d.ts

@@ -10,9 +10,9 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {
-        default?: ((props: {
-            mutatedEntity: any;
-        }) => any) | undefined;
+        default(props: {
+            mutatedEntity: T;
+        }): any;
     };
     emit: {};
 }>) => import("vue").VNode & {

package/dist/runtime/components/Edit/SystemRequirements/index.vue

@@ -40,8 +40,8 @@
         <p>
           {{
             $t(
-  'systemRequirementsDialogText',
-  'bl\xF6kkli has been tested and optimized for the latest versions of Chrome, Firefox, Edge, and Safari. Features like WebGL are well supported, but they may sometimes be disabled for performance or security reasons.'
+  "systemRequirementsDialogText",
+  "bl\xF6kkli has been tested and optimized for the latest versions of Chrome, Firefox, Edge, and Safari. Features like WebGL are well supported, but they may sometimes be disabled for performance or security reasons."
 )
           }}
         </p>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blokkli/editor",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.3",
   "description": "Interactive page building experience for Nuxt",
   "repository": "blokkli/editor",
   "type": "module",
@@ -70,7 +70,7 @@
     "@ckeditor/ckeditor5-build-classic": "^43.1.0",
     "@ckeditor/ckeditor5-vue": "^7.0.0",
     "@nuxt/devtools": "latest",
-    "@nuxt/eslint-config": "^0.5.7",
+    "@nuxt/eslint-config": "^1.3.0",
     "@nuxt/kit": "^3.16.2",
     "@nuxt/module-builder": "^1.0.1",
     "@nuxt/schema": "^3.16.2",
@@ -84,9 +84,9 @@
     "@vue/test-utils": "^2.4.6",
     "changelogen": "^0.5.5",
     "cypress": "^13.14.2",
-    "eslint": "^8.57.0",
-    "eslint-plugin-sonarjs": "^2.0.2",
-    "eslint-plugin-tailwindcss": "^3.17.4",
+    "eslint": "^9.24.0",
+    "eslint-plugin-sonarjs": "^3.0.2",
+    "eslint-plugin-tailwindcss": "^3.18.0",
     "gettext-parser": "^8.0.0",
     "happy-dom": "^15.7.4",
     "nuxt": "^3.16.2",
@@ -107,8 +107,5 @@
     "vite-plugin-glsl": "^1.3.0",
     "vitepress": "^1.3.4",
     "vitest": "^2.0.5"
-  },
-  "overrides": {
-    "@parcel/watcher": "~2.1.0"
   }
 }