@blokkli/editor 2.0.0-alpha.58 → 2.0.0-alpha.59

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

@@ -71,16 +71,16 @@ const label = computed(() => {
   } else {
     switch (itemType.value) {
       case "image":
-        base = $t("clipboardTypeImage", "Image");
+        base = $t("image", "Image");
         break;
       case "video":
-        base = $t("clipboardTypeVideo", "Video");
+        base = $t("video", "Video");
         break;
       case "file":
-        base = $t("clipboardTypeFile", "File");
+        base = $t("file", "File");
         break;
       case "text":
-        base = $t("clipboardTypeText", "Text");
+        base = $t("text", "Text");
         break;
     }
   }
@@ -96,154 +96,139 @@ const label = computed(() => {
 const icon = computed(() => getItemIcon(itemType.value));
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .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
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  border-radius: 4px;
+  border-style: var(--bk-tw-border-style);
+  border-width: 1px;
+  border-color: rgb(var(--bk-theme-mono-200) / 1);
+  background-color: white;
+  --bk-tw-shadow: 0 10px 15px -3px var(--bk-tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--bk-tw-shadow-color, rgb(0 0 0 / 0.1));
+  box-shadow: var(--bk-tw-inset-shadow), var(--bk-tw-inset-ring-shadow), var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow);
+  overflow: hidden;
+  width: 350px;
+  height: 200px;
+}
+:is(.bk .bk-clipboard-drop-element) .bk-clipboard-drop-element-header {
+  display: flex;
+  gap: 10px;
+  background-color: rgb(var(--bk-theme-mono-800) / 1);
+  padding: 15px;
+  --bk-tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
+  color: rgb(var(--bk-theme-mono-100) / 1);
+}
+:is(.bk .bk-clipboard-drop-element) .bk-clipboard-drop-element-preview {
+  display: flex;
+  overflow: hidden;
+  flex: 1;
+  min-height: 0;
+}
+:is(:is(.bk .bk-clipboard-drop-element) .bk-clipboard-drop-element-preview) .bk-clipboard-drop-element-item {
+  position: relative;
+  min-width: 0px;
+  flex: 1;
+  overflow: hidden;
+}
+:is(:is(.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: var(--text-xs, 12px);
+  line-height: var(--bk-tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
+  color: rgb(var(--bk-theme-mono-700) / 1);
+}
+:is(:is(.bk .bk-clipboard-drop-element) .bk-clipboard-drop-element-preview) img {
+  display: block;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
+:is(:is(.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;
+  background-color: rgb(var(--bk-theme-mono-100) / 1);
+}
+:is(:is(:is(.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);
+}
+:is(:is(.bk .bk-clipboard-drop-element) .bk-clipboard-drop-element-preview) .bk-clipboard-drop-element-item-label {
+  position: absolute;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: PB Inter, sans-serif;
+  font-size: var(--text-xs, 12px);
+  line-height: var(--bk-tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
+  --bk-tw-leading: 1;
+  line-height: 1;
+  color: white;
+  padding: 5px;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
+}
+:is(:is(.bk .bk-clipboard-drop-element) .bk-clipboard-drop-element-preview) .bk-clipboard-item-video {
+  font-size: var(--text-xs, 12px);
+  line-height: var(--bk-tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
+}
+.bk .bk-clipboard-item-video {
+  position: relative;
+  aspect-ratio: var(--aspect-video, 16 / 9);
+  overflow: hidden;
+  border-style: var(--bk-tw-border-style);
+  border-width: 1px;
+  border-color: rgb(var(--bk-theme-mono-300) / 1);
+  background-color: rgb(var(--bk-theme-mono-900) / 1);
+  color: rgb(var(--bk-theme-mono-50) / 1);
+}
+:is(.bk .bk-clipboard-item-video) img {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  display: block;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
+:is(.bk .bk-clipboard-item-video)  > div {
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  z-index: 30;
+  width: 100%;
+  padding: 10px;
+  --bk-tw-gradient-position: to bottom in oklab;
+  background-image: linear-gradient(var(--bk-tw-gradient-stops));
+  --bk-tw-gradient-from: color-mix(in oklab, rgb(var(--bk-theme-mono-900) / 1) 0%, transparent);
+  --bk-tw-gradient-to: rgb(var(--bk-theme-mono-900) / 1);
+  --bk-tw-gradient-stops: var(--bk-tw-gradient-via-stops, var(--bk-tw-gradient-position), var(--bk-tw-gradient-from) var(--bk-tw-gradient-from-position), var(--bk-tw-gradient-to) var(--bk-tw-gradient-to-position));
+}
+:is(:is(.bk .bk-clipboard-item-video) > div) svg {
+  width: 20px;
+  height: 20px;
+  fill: currentcolor;
+}
+:is(:is(.bk .bk-clipboard-item-video) > div) p {
+  font-size: var(--text-xs, 12px);
+  line-height: var(--bk-tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
+}
+:is(:is(.bk .bk-clipboard-item-video) > div)  > div {
+  display: flex;
+  gap: 5px;
+  --bk-tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
 }
 </style>

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

@@ -21,10 +21,8 @@ import {
   useTemplateRef,
   defineAsyncComponent
 } from "#imports";
-import { falsy, getFieldKey } from "#blokkli/helpers";
 import { generateUUID } from "#blokkli/editor/helpers/uuid";
 import { emitMessage } from "#blokkli/editor/events";
-import { fragmentBlockBundle, itemEntityType } from "#blokkli-build/config";
 import {
   defineDropHandler,
   defineItemDropdownAction,
@@ -32,6 +30,7 @@ import {
   onBlokkliEvent
 } from "#blokkli/editor/composables";
 import { buildMapBundleEvent, sanitizeHtml } from "./helpers";
+import { parseClipboardEnvelope } from "#blokkli/editor/types/clipboard";
 const DropElement = defineAsyncComponent(
   () => import("./DropElement/index.vue")
 );
@@ -52,13 +51,10 @@ const {
   adapter,
   state,
   ui,
-  types,
-  keyboard,
   blocks,
-  fields,
   eventBus,
   animation,
-  permissions
+  context
 } = useBlokkli();
 const selectionClipboard = ref([]);
 const isDirectDrop = ref(false);
@@ -195,6 +191,9 @@ function onDragOver(e) {
 }
 function onNativeDrop(e) {
   e.preventDefault();
+  if (ui.hasDialogOpen.value || ui.isApproving.value) {
+    return;
+  }
   if (isDragFromInput) {
     isDragFromInput = false;
     return;
@@ -350,127 +349,10 @@ function startCopyDrag(existingBlocks) {
   });
 }
 const handleSelectionPaste = (pastedUuids) => {
-  if (!adapter.pasteExistingBlocks) {
-    return;
-  }
-  if (!pastedUuids.length) {
-    return;
-  }
-  const existingBlocks = pastedUuids.map((uuid) => blocks.getBlock(uuid)).filter((block2) => !!block2);
-  if (!existingBlocks.length) {
-    return;
-  }
-  const deniedBundles = existingBlocks.map((b) => b.bundle).filter((bundle) => !permissions.checkBlockBundlePermission(bundle, "add"));
-  if (deniedBundles.length) {
-    return;
-  }
-  if (selection.uuids.value.length !== 1) {
-    startCopyDrag(existingBlocks);
-    return;
-  }
-  const block = selection.items.value[0];
-  if (!block) {
-    startCopyDrag(existingBlocks);
-    return;
-  }
-  let targetField = null;
-  let targetFieldElement = null;
-  let targetFieldKey = null;
-  let preceedingUuid = null;
-  if (!keyboard.isPressingShift.value) {
-    const pastedBundles = existingBlocks.map((b) => b.bundle).filter((bundle) => !!bundle);
-    const pastedFragments = existingBlocks.map((b) => {
-      if (b.bundle === fragmentBlockBundle && b.fragment?.name) {
-        return b.fragment.name;
-      }
-      return null;
-    }).filter(falsy);
-    if (pastedBundles.length) {
-      const nestedFields = types.fieldConfig.forEntityTypeAndBundle(
-        itemEntityType,
-        block.bundle
-      );
-      for (const fieldConfig of nestedFields) {
-        const fieldElement = fields.find(block.uuid, fieldConfig.name);
-        if (!fieldElement) {
-          continue;
-        }
-        const allowedPastedBundles = pastedBundles.filter(
-          (bundle) => fieldElement.allowedBundles.includes(bundle)
-        );
-        let fragmentsAllowed = true;
-        if (pastedFragments.length > 0 && fieldElement.allowedFragments.length > 0) {
-          fragmentsAllowed = pastedFragments.every(
-            (fragment) => fieldElement.allowedFragments.includes(fragment)
-          );
-        }
-        if (allowedPastedBundles.length > 0 && fragmentsAllowed) {
-          const nestedFieldKey = getFieldKey(block.uuid, fieldConfig.name);
-          const currentCount = state.getFieldBlockCount(nestedFieldKey);
-          if (fieldElement.cardinality === -1 || currentCount + allowedPastedBundles.length <= fieldElement.cardinality) {
-            targetField = {
-              entityType: itemEntityType,
-              entityUuid: block.uuid,
-              name: fieldConfig.name
-            };
-            targetFieldElement = fieldElement;
-            targetFieldKey = nestedFieldKey;
-            preceedingUuid = null;
-            break;
-          }
-        }
-      }
-    }
-  }
-  if (!targetField || !targetFieldElement || !targetFieldKey) {
-    const field = state.getMutatedField(block.host.uuid, block.host.fieldName);
-    if (field) {
-      const fieldElement = fields.find(field.entityUuid, field.name);
-      if (fieldElement) {
-        targetField = {
-          entityType: field.entityType,
-          entityUuid: field.entityUuid,
-          name: field.name
-        };
-        targetFieldElement = fieldElement;
-        targetFieldKey = getFieldKey(field.entityUuid, field.name);
-        preceedingUuid = selection.uuids.value[0] ?? null;
-      }
-    }
-  }
-  if (!targetField || !targetFieldElement || !targetFieldKey) {
-    startCopyDrag(existingBlocks);
-    return;
-  }
-  const pastedBlocks = existingBlocks.filter((b) => {
-    if (!targetFieldElement.allowedBundles.includes(b.bundle)) {
-      return false;
-    }
-    if (b.bundle === fragmentBlockBundle && b.fragment?.name && targetFieldElement.allowedFragments.length > 0) {
-      return targetFieldElement.allowedFragments.includes(b.fragment.name);
-    }
-    return true;
-  });
-  if (!pastedBlocks.length) {
-    startCopyDrag(existingBlocks);
-    return;
-  }
-  const count = state.getFieldBlockCount(targetFieldKey);
-  if (targetFieldElement.cardinality !== -1 && count + pastedBlocks.length > targetFieldElement.cardinality) {
-    startCopyDrag(existingBlocks);
-    return;
-  }
-  state.mutateWithLoadingState(
-    () => adapter.pasteExistingBlocks({
-      uuids: pastedBlocks.map((v) => v.uuid),
-      host: {
-        type: targetField.entityType,
-        uuid: targetField.entityUuid,
-        fieldName: targetField.name
-      },
-      preceedingUuid
-    })
-  );
+  if (!pastedUuids.length) return;
+  const existingBlocks = pastedUuids.map((uuid) => blocks.getBlock(uuid)).filter((block) => !!block);
+  if (!existingBlocks.length) return;
+  startCopyDrag(existingBlocks);
 };
 function onPaste(e) {
   logger.log("Paste Event", e);
@@ -496,10 +378,10 @@ function onPaste(e) {
   if (pastedData) {
     if (pastedData.startsWith("{")) {
       try {
-        const data = JSON.parse(pastedData);
-        if (typeof data === "object" && data.type && data.type === "selection") {
-          const uuids = data.uuids;
-          return handleSelectionPaste(uuids);
+        const payload = parseClipboardEnvelope(JSON.parse(pastedData));
+        if (payload) {
+          eventBus.emit("clipboard:paste", payload);
+          return;
         }
       } catch (_e) {
       }
@@ -763,25 +645,24 @@ defineDropHandler("clipboard", {
     });
   }
 });
-function setClipboard(text) {
-  const type = "text/plain";
-  const blob = new Blob([text], { type });
-  const data = [new ClipboardItem({ [type]: blob })];
-  try {
-    navigator.clipboard.write(data);
-  } catch (_e) {
-  }
-}
 function copyCurrentSelectionToClipboard() {
   if (!selection.items.value.length) {
     selectionClipboard.value = [];
     return;
   }
-  setClipboard(
-    JSON.stringify({ type: "selection", uuids: selection.uuids.value })
-  );
+  ui.setClipboardData({
+    type: "selection",
+    uuids: selection.uuids.value
+  });
   selectionClipboard.value = selection.uuids.value;
 }
+onBlokkliEvent("clipboard:paste", ({ meta, data }) => {
+  if (data.type !== "selection") return;
+  if (meta.hostUuid !== context.value.entityUuid) return;
+  if (!Array.isArray(data.uuids)) return;
+  const uuids = data.uuids.filter((u) => typeof u === "string");
+  handleSelectionPaste(uuids);
+});
 onBlokkliEvent("keyPressed", (e) => {
   if (e.code !== "c" || !e.meta || ui.hasDialogOpen.value || ui.hasNestedEditorOpen.value || !ui.canvasFocused.value) {
     return;

package/dist/runtime/editor/features/clipboard/types.d.ts

@@ -114,4 +114,13 @@ declare module '#blokkli/editor/types/draggable' {
         native_drop: DraggableNativeDropItem;
     }
 }
+export type ClipboardSelectionPayload = {
+    type: 'selection';
+    uuids: string[];
+};
+declare module '#blokkli/editor/types/clipboard' {
+    interface BlokkliClipboardTypes {
+        selection: ClipboardSelectionPayload;
+    }
+}
 export {};

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

@@ -1,7 +1,10 @@
 <template>
   <button
-    class="bk-command _bk_flex _bk_text-mono-300 _bk_pl-[12px] _bk_pr-10 _bk_w-full _bk_text-left _bk_gap-10 _bk_items-center _bk_border _bk_border-transparent"
-    :class="isFocused ? '_bk_bg-mono-700 _bk_border-mono-700 _bk_text-white' : ''"
+    class="bk-command _bk_flex _bk_pl-[12px] _bk_pr-10 _bk_w-full _bk_text-left _bk_gap-10 _bk_items-center _bk_border _bk_border-transparent"
+    :class="isFocused ? '_bk_bg-mono-800 _bk_text-white' : '_bk_text-mono-300'"
+    data-test="command-palette-item"
+    :data-test-command-id="item.id"
+    :data-test-focused="isFocused"
     @mouseenter="$emit('focus', index)"
     @click.prevent="$emit('select', item.id)"
   >
@@ -35,7 +38,7 @@ const getGroupLabel = (id) => {
   } else if (id === "add") {
     return $t("commandGroup.add", "Add new");
   } else if (id === "action") {
-    return $t("commandGroup.action", "Actions");
+    return $t("actions", "Actions");
   } else if (id === "selection") {
     return $t("commandGroup.selection", "Selection");
   }

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

@@ -2,9 +2,12 @@
   <SearchOverlay
     v-slot="{ focusedIndex, onMouseEnter }"
     v-model:text="text"
+    data-test="command-palette"
     :title="$t('commandPaletteTitle', 'Command Palette')"
     :total-items="visibleCommands.length"
-    :placeholder="$t('commandPalette.inputPlaceholder', 'Search commands...')"
+    :placeholder="
+  $t('commandPalette.inputPlaceholder', 'Search commands', { more: true })
+"
     @select="onSelectByIndex"
     @close="emit('close')"
   >

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

@@ -1,21 +1,22 @@
 <template>
   <ArtboardTooltip
     id="add-comment"
-    :title="$t('addCommentHeader', 'Add Comment')"
+    :title="$t('addComment', 'Add Comment')"
     class="bk-add-comment"
     @close="$emit('close')"
   >
-    <div class="bk-add-comment-inner" @keydown.capture.stop>
-      <CommentInput id="comment_body" v-model="comment" />
-      <footer>
-        <button
-          :disabled="!comment"
-          class="bk-button bk-is-warning"
-          @click.prevent="onAdd"
-        >
-          {{ $t("commentSave", "Submit comment") }}
-        </button>
-      </footer>
+    <div
+      class="bk-add-comment-inner _bk_w-full _bk_min-w-[400px] _bk_border-t _bk_border-t-yellow-dark"
+      data-test="comment-add-form"
+      @keydown.capture.stop
+    >
+      <CommentInput
+        id="comment_body"
+        :initial-value="comment"
+        :submit-label="$t('commentSave', 'Submit comment')"
+        @change="comment = $event"
+        @submit="onAdd"
+      />
     </div>
   </ArtboardTooltip>
 </template>
@@ -30,8 +31,8 @@ const comment = storage.useWithContextPrefix("commentAddText", "");
 const getComment = () => {
   return comment.value;
 };
-function onAdd() {
-  emit("add", comment.value);
+function onAdd(value) {
+  emit("add", value);
   comment.value = "";
 }
 defineExpose({ getComment });
@@ -42,3 +43,13 @@ onBeforeUnmount(() => {
   ui.removeSelectionColor("add-comment");
 });
 </script>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk.bk-add-comment {
+  --bk-bg: white;
+  --bk-header-bg: rgb(var(--bk-theme-yellow-normal) / 1);
+  --bk-header-text: rgb(var(--bk-theme-yellow-dark) / 1);
+  --bk-border: rgb(var(--bk-theme-yellow-normal) / 1);
+  --bk-header-hover: rgb(var(--bk-theme-yellow-dark) / 0.2);
+}
+</style>