@blokkli/editor 2.0.0-alpha.54 → 2.0.0-alpha.56

package/dist/runtime/editor/features/changelog/changelog.json

@@ -1,4 +1,12 @@
 [
+  {
+    "version": "2.0.0-alpha.55",
+    "date": "2026-04-20",
+    "body": {
+      "en": "<h3>New Features</h3>\n<h4>Edit media fields directly</h4>\n<p>Media fields (images, videos, etc.) on blocks and on the page itself can now be\nedited directly in the editor. New media can be added from the media library,\nindividual entries can be removed or reordered by drag &amp; drop. Media can also be\ndragged out of a media field into the page to create a new block from it.</p>\n<h3>Improvements</h3>\n<h4>Edit a block directly with the Ctrl key</h4>\n<p>Holding the Ctrl key (or Cmd on macOS) while double-clicking a block skips the\nunderlying media or text field, so the block itself can be edited.</p>\n<h4>Revised import dialog</h4>\n<p>The dialog for importing existing content has been revised. Content can now be\nfound through an improved search. If there is only one importable field, the\nfield selection is hidden. On empty pages, the import dialog no longer opens\nautomatically, but it can still be opened manually. The previous behavior can be\nre-enabled in the settings.</p>\n<h4>Further improvements</h4>\n<ul>\n<li>The editor now loads significantly faster. Rarely used parts of the editor are\nonly loaded when needed.</li>\n<li>When the editor is loading, space is reserved so the content below no longer\njumps while the editor is loading.</li>\n</ul>\n<h3>Fixes</h3>\n<ul>\n<li>Detached sidebar panels could end up outside the visible area in certain\nsituations and were no longer reachable. Positions are now constrained to the\nvisible area.</li>\n<li>The icons in the responsive preview were not displayed correctly.</li>\n<li>The preview of fragment blocks in the selection list is displayed correctly\nagain.</li>\n</ul>\n",
+      "de": "<h3>Neue Funktionen</h3>\n<h4>Medienfelder direkt bearbeiten</h4>\n<p>Medienfelder (Bilder, Videos, etc.) auf Blöcken und auf der Seite selbst können\njetzt direkt im Editor bearbeitet werden. Neue Medien können aus der\nMedienbibliothek hinzugefügt werden, einzelne Einträge können entfernt oder per\nDrag &amp; Drop umsortiert werden. Medien können auch aus einem Medienfeld heraus in\ndie Seite gezogen werden, um daraus einen neuen Block zu erstellen.</p>\n<h3>Verbesserungen</h3>\n<h4>Block mit Ctrl-Taste direkt bearbeiten</h4>\n<p>Mit gedrückter Ctrl-Taste (oder Cmd auf macOS) wird bei Doppelklick auf einen\nBlock das darunterliegende Medien- oder Textfeld ignoriert, sodass der Block\nselbst bearbeitet werden kann.</p>\n<h4>Überarbeiteter Import-Dialog</h4>\n<p>Der Dialog zum Importieren bestehender Inhalte wurde überarbeitet. Inhalte\nkönnen jetzt über eine verbesserte Suche gefunden werden. Gibt es nur ein\nimportierbares Feld, wird die Feldauswahl neu ausgeblendet. Auf leeren Seiten\nwird der Import-Dialog nicht mehr automatisch geöffnet, kann aber weiterhin\nmanuell aufgerufen werden. Das bisherige Verhalten lässt sich in den\nEinstellungen wieder aktivieren.</p>\n<h4>Weitere Verbesserungen</h4>\n<ul>\n<li>Der Editor lädt nun deutlich schneller. Selten verwendete Teile des Editors\nwerden erst bei Bedarf geladen.</li>\n<li>Beim Laden des Editors wird Platz reserviert, sodass der Inhalt darunter nicht\nmehr springt, während der Editor geladen wird.</li>\n</ul>\n<h3>Fehlerbehebungen</h3>\n<ul>\n<li>Abgedockte Sidebar-Panels konnten in bestimmten Situationen ausserhalb des\nsichtbaren Bereichs landen und waren nicht mehr erreichbar. Die Positionen\nwerden jetzt auf den sichtbaren Bereich beschränkt.</li>\n<li>Die Symbole in der responsiven Vorschau wurden nicht korrekt angezeigt.</li>\n<li>Die Vorschau von Fragment-Blöcken in der Auswahlliste werden wieder korrekt\ndargestellt.</li>\n</ul>\n"
+    }
+  },
   {
     "version": "2.0.0-alpha.53",
     "date": "2026-04-07",

package/dist/runtime/editor/features/changelog/index.vue

@@ -7,11 +7,16 @@
 </template>
 
 <script setup>
-import { useBlokkli, defineBlokkliFeature, computed } from "#imports";
-import ChangelogDialog from "./Dialog/index.vue";
+import {
+  useBlokkli,
+  defineBlokkliFeature,
+  computed,
+  defineAsyncComponent
+} from "#imports";
+import { blokkliVersion } from "#blokkli-build/editor-config";
 import { BlokkliTransition } from "#blokkli/editor/components";
 import { defineMenuButton } from "#blokkli/editor/composables";
-import data from "./changelog.json";
+const ChangelogDialog = defineAsyncComponent(() => import("./Dialog/index.vue"));
 const { ui, storage, $t } = useBlokkli();
 defineBlokkliFeature({
   id: "changelog",
@@ -19,14 +24,11 @@ defineBlokkliFeature({
   icon: "bk_mdi_campaign",
   description: "Provides a menu button to display a changelog of what's new."
 });
-const latestVersion = data[0]?.version ?? "";
 const lastSeenVersion = storage.use("changelog:lastSeenVersion", "");
-const hasNew = computed(
-  () => !!latestVersion && lastSeenVersion.value !== latestVersion
-);
+const hasNew = computed(() => lastSeenVersion.value !== blokkliVersion);
 const showDialog = computed(() => ui.currentDialog.value?.id === "changelog");
 function onClick() {
-  lastSeenVersion.value = latestVersion;
+  lastSeenVersion.value = blokkliVersion;
   ui.openDialog({ id: "changelog", alignment: "center" });
 }
 function onClose() {

package/dist/runtime/editor/features/clipboard/DropElement/index.vue

@@ -95,3 +95,155 @@ const label = computed(() => {
 });
 const icon = computed(() => getItemIcon(itemType.value));
 </script>
+
+<style>
+.bk .bk-clipboard-drop-element {
+    pointer-events: none;
+    display: flex;
+    flex-direction: column;
+    border-radius: 8px;
+    border-width: 1px;
+    --bk-tw-border-opacity: 1;
+    border-color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-border-opacity, 1));
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
+    --bk-tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --bk-tw-shadow-colored: 0 10px 15px -3px var(--bk-tw-shadow-color), 0 4px 6px -4px var(--bk-tw-shadow-color);
+    box-shadow: var(--bk-tw-ring-offset-shadow, 0 0 #0000), var(--bk-tw-ring-shadow, 0 0 #0000), var(--bk-tw-shadow);
+    overflow: hidden;
+    width: 350px;
+    height: 200px
+}
+
+    .bk .bk-clipboard-drop-element .bk-clipboard-drop-element-header {
+    display: flex;
+    gap: 10px;
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-bg-opacity, 1));
+    padding: 15px;
+    font-weight: 600;
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-text-opacity, 1))
+}
+
+    .bk .bk-clipboard-drop-element .bk-clipboard-drop-element-preview {
+    display: flex;
+    overflow: hidden;
+      flex: 1;
+      min-height: 0
+}
+
+    .bk .bk-clipboard-drop-element .bk-clipboard-drop-element-preview .bk-clipboard-drop-element-item {
+    position: relative;
+    min-width: 0px;
+    flex: 1 1 0%;
+    overflow: hidden
+}
+
+    .bk .bk-clipboard-drop-element .bk-clipboard-drop-element-preview .bk-clipboard-drop-element-text {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 6;
+    height: 100%;
+    padding: 8px;
+    font-family: PB Inter, sans-serif;
+    font-size: 12px;
+    line-height: 16px;
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-text-opacity, 1))
+}
+
+    .bk .bk-clipboard-drop-element .bk-clipboard-drop-element-preview img {
+    display: block;
+    height: 100%;
+    width: 100%;
+    object-fit: cover
+}
+
+    .bk .bk-clipboard-drop-element .bk-clipboard-drop-element-preview .bk-clipboard-drop-element-file-icon {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1))
+}
+
+    .bk .bk-clipboard-drop-element .bk-clipboard-drop-element-preview .bk-clipboard-drop-element-file-icon svg {
+    width: 24px;
+    height: 24px;
+    fill: rgb(var(--bk-theme-mono-400) / 1)
+}
+
+    .bk .bk-clipboard-drop-element .bk-clipboard-drop-element-preview .bk-clipboard-drop-element-item-label {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-family: PB Inter, sans-serif;
+    font-size: 12px;
+    line-height: 16px;
+    line-height: 1;
+    --bk-tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
+    padding: 5px;
+        background: linear-gradient(transparent, rgba(0, 0, 0, 0.6))
+}
+
+    .bk .bk-clipboard-drop-element .bk-clipboard-drop-element-preview .bk-clipboard-item-video {
+    font-size: 12px;
+    line-height: 16px
+}
+  .bk .bk-clipboard-item-video {
+    position: relative;
+    aspect-ratio: 16 / 9;
+    overflow: hidden;
+    border-width: 1px;
+    --bk-tw-border-opacity: 1;
+    border-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-bg-opacity, 1));
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-mono-50) / var(--bk-tw-text-opacity, 1))
+}
+  .bk .bk-clipboard-item-video img {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    display: block;
+    height: 100%;
+    width: 100%;
+    object-fit: cover
+}
+  .bk .bk-clipboard-item-video > div {
+    position: absolute;
+    left: 0px;
+    bottom: 0px;
+    z-index: 30;
+    width: 100%;
+    padding: 10px;
+    background-image: linear-gradient(to bottom, var(--bk-tw-gradient-stops));
+    --bk-tw-gradient-from: rgb(var(--bk-theme-mono-900) / 0) var(--bk-tw-gradient-from-position);
+    --bk-tw-gradient-to: rgb(var(--bk-theme-mono-900) / 0) var(--bk-tw-gradient-to-position);
+    --bk-tw-gradient-stops: var(--bk-tw-gradient-from), var(--bk-tw-gradient-to);
+    --bk-tw-gradient-to: rgb(var(--bk-theme-mono-900) / 1) var(--bk-tw-gradient-to-position)
+}
+  .bk .bk-clipboard-item-video > div svg {
+    width: 20px;
+    height: 20px;
+    fill: currentColor
+}
+  .bk .bk-clipboard-item-video > div p {
+    font-size: 12px;
+    line-height: 16px
+}
+  .bk .bk-clipboard-item-video > div > div {
+    display: flex;
+    gap: 5px;
+    font-weight: 700
+}
+</style>

package/dist/runtime/editor/features/clipboard/index.vue

@@ -18,12 +18,11 @@ import {
   onMounted,
   onUnmounted,
   computed,
-  useTemplateRef
+  useTemplateRef,
+  defineAsyncComponent
 } from "#imports";
 import { falsy, getFieldKey } from "#blokkli/helpers";
 import { generateUUID } from "#blokkli/editor/helpers/uuid";
-import getVideoId from "get-video-id";
-import DropElement, {} from "./DropElement/index.vue";
 import { emitMessage } from "#blokkli/editor/events";
 import { fragmentBlockBundle, itemEntityType } from "#blokkli-build/config";
 import {
@@ -33,6 +32,13 @@ import {
   onBlokkliEvent
 } from "#blokkli/editor/composables";
 import { buildMapBundleEvent, sanitizeHtml } from "./helpers";
+const DropElement = defineAsyncComponent(
+  () => import("./DropElement/index.vue")
+);
+async function getVideoId(url) {
+  const { default: fn } = await import("get-video-id");
+  return fn(url);
+}
 const { logger } = defineBlokkliFeature({
   id: "clipboard",
   label: "Clipboard",
@@ -501,11 +507,11 @@ function onPaste(e) {
     handlePastedText(pastedData);
   }
 }
-const handlePastedText = (text) => {
+const handlePastedText = async (text) => {
   if (!adapter.clipboardMapBundle) {
     return;
   }
-  const video = getVideoId(text);
+  const video = await getVideoId(text);
   if (video.id && video.service) {
     const itemBundles = normalizeBundles(
       adapter.clipboardMapBundle({
@@ -566,7 +572,7 @@ function extractBareUrl(text) {
   return null;
 }
 defineDropHandler("native_drop", {
-  resolveBundles({ items, field }) {
+  async resolveBundles({ items, field }) {
     const item = items[0];
     if (!adapter.addBlockFromClipboardItem) {
       return [];
@@ -611,7 +617,7 @@ defineDropHandler("native_drop", {
       return [];
     }
     if (adapter.clipboardMapBundle) {
-      const video = getVideoId(text);
+      const video = await getVideoId(text);
       if (video.id && video.service) {
         const mapped2 = normalizeBundles(
           adapter.clipboardMapBundle({
@@ -838,155 +844,3 @@ export default {
   name: "Clipboard"
 };
 </script>
-
-<style>
-.bk .bk-clipboard-drop-element {
-    pointer-events: none;
-    display: flex;
-    flex-direction: column;
-    border-radius: 8px;
-    border-width: 1px;
-    --bk-tw-border-opacity: 1;
-    border-color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-border-opacity, 1));
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
-    --bk-tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-    --bk-tw-shadow-colored: 0 10px 15px -3px var(--bk-tw-shadow-color), 0 4px 6px -4px var(--bk-tw-shadow-color);
-    box-shadow: var(--bk-tw-ring-offset-shadow, 0 0 #0000), var(--bk-tw-ring-shadow, 0 0 #0000), var(--bk-tw-shadow);
-    overflow: hidden;
-    width: 350px;
-    height: 200px
-}
-
-    .bk .bk-clipboard-drop-element .bk-clipboard-drop-element-header {
-    display: flex;
-    gap: 10px;
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-bg-opacity, 1));
-    padding: 15px;
-    font-weight: 600;
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-text-opacity, 1))
-}
-
-    .bk .bk-clipboard-drop-element .bk-clipboard-drop-element-preview {
-    display: flex;
-    overflow: hidden;
-      flex: 1;
-      min-height: 0
-}
-
-    .bk .bk-clipboard-drop-element .bk-clipboard-drop-element-preview .bk-clipboard-drop-element-item {
-    position: relative;
-    min-width: 0px;
-    flex: 1 1 0%;
-    overflow: hidden
-}
-
-    .bk .bk-clipboard-drop-element .bk-clipboard-drop-element-preview .bk-clipboard-drop-element-text {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 6;
-    height: 100%;
-    padding: 8px;
-    font-family: PB Inter, sans-serif;
-    font-size: 12px;
-    line-height: 16px;
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-text-opacity, 1))
-}
-
-    .bk .bk-clipboard-drop-element .bk-clipboard-drop-element-preview img {
-    display: block;
-    height: 100%;
-    width: 100%;
-    object-fit: cover
-}
-
-    .bk .bk-clipboard-drop-element .bk-clipboard-drop-element-preview .bk-clipboard-drop-element-file-icon {
-    display: flex;
-    height: 100%;
-    align-items: center;
-    justify-content: center;
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1))
-}
-
-    .bk .bk-clipboard-drop-element .bk-clipboard-drop-element-preview .bk-clipboard-drop-element-file-icon svg {
-    width: 24px;
-    height: 24px;
-    fill: rgb(var(--bk-theme-mono-400) / 1)
-}
-
-    .bk .bk-clipboard-drop-element .bk-clipboard-drop-element-preview .bk-clipboard-drop-element-item-label {
-    position: absolute;
-    bottom: 0px;
-    left: 0px;
-    right: 0px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-family: PB Inter, sans-serif;
-    font-size: 12px;
-    line-height: 16px;
-    line-height: 1;
-    --bk-tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
-    padding: 5px;
-        background: linear-gradient(transparent, rgba(0, 0, 0, 0.6))
-}
-
-    .bk .bk-clipboard-drop-element .bk-clipboard-drop-element-preview .bk-clipboard-item-video {
-    font-size: 12px;
-    line-height: 16px
-}
-  .bk .bk-clipboard-item-video {
-    position: relative;
-    aspect-ratio: 16 / 9;
-    overflow: hidden;
-    border-width: 1px;
-    --bk-tw-border-opacity: 1;
-    border-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-bg-opacity, 1));
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-50) / var(--bk-tw-text-opacity, 1))
-}
-  .bk .bk-clipboard-item-video img {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    display: block;
-    height: 100%;
-    width: 100%;
-    object-fit: cover
-}
-  .bk .bk-clipboard-item-video > div {
-    position: absolute;
-    left: 0px;
-    bottom: 0px;
-    z-index: 30;
-    width: 100%;
-    padding: 10px;
-    background-image: linear-gradient(to bottom, var(--bk-tw-gradient-stops));
-    --bk-tw-gradient-from: rgb(var(--bk-theme-mono-900) / 0) var(--bk-tw-gradient-from-position);
-    --bk-tw-gradient-to: rgb(var(--bk-theme-mono-900) / 0) var(--bk-tw-gradient-to-position);
-    --bk-tw-gradient-stops: var(--bk-tw-gradient-from), var(--bk-tw-gradient-to);
-    --bk-tw-gradient-to: rgb(var(--bk-theme-mono-900) / 1) var(--bk-tw-gradient-to-position)
-}
-  .bk .bk-clipboard-item-video > div svg {
-    width: 20px;
-    height: 20px;
-    fill: currentColor
-}
-  .bk .bk-clipboard-item-video > div p {
-    font-size: 12px;
-    line-height: 16px
-}
-  .bk .bk-clipboard-item-video > div > div {
-    display: flex;
-    gap: 5px;
-    font-weight: 700
-}
-</style>

package/dist/runtime/editor/features/command-palette/Palette/Item/index.vue

@@ -42,31 +42,3 @@ const getGroupLabel = (id) => {
   return $t("commandGroup.misc", "Miscellaneous");
 };
 </script>
-
-<style>
-.bk .bk-command {
-  height: var(--bk-command-palette-item-height);
-}
-
-  .bk .bk-command .bk-highlight em {
-  background-color: rgb(var(--bk-theme-yellow-normal) / 0.2);
-  font-weight: 600;
-  --bk-tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
-  outline-style: solid;
-  outline-width: 1px;
-  outline-color: rgb(var(--bk-theme-yellow-normal) / 0.5);
-}
-
-.bk .bk-command-icon .bk-blokkli-item-icon,
-  .bk .bk-command-icon .bk-icon {
-  height: 100%;
-  width: 100%;
-}
-
-.bk .bk-command-icon .bk-blokkli-item-icon svg, .bk .bk-command-icon .bk-icon svg {
-  height: 100%;
-  width: 100%;
-  fill: currentColor;
-}
-</style>

package/dist/runtime/editor/features/command-palette/Palette/index.vue

@@ -21,9 +21,16 @@
 </template>
 
 <script setup>
-import { computed, ref, useBlokkli, watch } from "#imports";
+import {
+  computed,
+  onMounted,
+  ref,
+  shallowRef,
+  useBlokkli,
+  watch
+} from "#imports";
 import { SearchOverlay } from "#blokkli/editor/components";
-import { Fzf } from "fzf";
+import { loadFzf } from "#blokkli/editor/libraries/fzf";
 import Item, {} from "./Item/index.vue";
 const emit = defineEmits(["close"]);
 const { commands, $t, selection, plugins, storage } = useBlokkli();
@@ -64,14 +71,18 @@ const items = computed(() => {
     return freqB - freqA;
   });
 });
-const fzf = new Fzf(items.value, {
-  selector: (item) => item.label
+const fzf = shallowRef(null);
+onMounted(async () => {
+  const { Fzf } = await loadFzf();
+  fzf.value = new Fzf(items.value, {
+    selector: (item) => item.label
+  });
 });
 const visibleIds = computed(() => {
-  if (!text.value) {
+  if (!text.value || !fzf.value) {
     return void 0;
   }
-  const results = fzf.find(text.value);
+  const results = fzf.value.find(text.value);
   return results.map((v) => {
     return {
       id: v.item._id,

package/dist/runtime/editor/features/command-palette/index.vue

@@ -26,11 +26,16 @@
 </template>
 
 <script setup>
-import { useBlokkli, defineBlokkliFeature, computed } from "#imports";
+import {
+  useBlokkli,
+  defineBlokkliFeature,
+  computed,
+  defineAsyncComponent
+} from "#imports";
 import { PluginToolbarButton } from "#blokkli/editor/plugins";
 import { BlokkliTransition } from "#blokkli/editor/components";
-import Palette from "./Palette/index.vue";
 import { onBlokkliEvent, useDialog } from "#blokkli/editor/composables";
+const Palette = defineAsyncComponent(() => import("./Palette/index.vue"));
 defineBlokkliFeature({
   id: "command-palette",
   icon: "bk_mdi_keyboard_command_key",

package/dist/runtime/editor/features/comments/index.vue

@@ -61,13 +61,16 @@ import {
   useBlokkli,
   defineBlokkliFeature,
   computed,
-  useTemplateRef
+  useTemplateRef,
+  defineAsyncComponent
 } from "#imports";
 import { PluginSidebar, PluginItemAction } from "#blokkli/editor/plugins";
 import { BlokkliTransition } from "#blokkli/editor/components";
 import Comment from "./Comment/index.vue";
-import CommentAddForm from "./AddForm/index.vue";
-import CommentsOverlay from "./Overlay/index.vue";
+const CommentsOverlay = defineAsyncComponent(
+  () => import("./Overlay/index.vue")
+);
+const CommentAddForm = defineAsyncComponent(() => import("./AddForm/index.vue"));
 const { adapter } = defineBlokkliFeature({
   id: "comments",
   icon: "bk_mdi_comment",