@blokkli/editor 2.0.0-alpha.51 → 2.0.0-alpha.53

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

@@ -29,6 +29,7 @@
           <label
             v-for="item in items"
             :key="item.id"
+            class="_bk_group/tooltip"
             :class="{ 'bk-is-muted': !item.translation?.exists }"
           >
             <div>
@@ -40,7 +41,7 @@
                 @click.stop.prevent="onClick(item, $event)"
               />
               <span>{{ item.code }}</span>
-              <div :class="{ 'bk-tooltip': !isDropdown }">{{ item.label }}</div>
+              <Tooltip v-show="!isOpen" :label="item.label" class="_bk_w-full" />
             </div>
           </label>
         </div>
@@ -49,7 +50,49 @@
   </Teleport>
 
   <Teleport to="#bk-banner-list">
-    <Banner v-if="isTranslating" :active-language />
+    <Banner
+      v-if="isTranslating"
+      :active-language
+      :show-csv="
+  !!adapter.loadTextFieldValuesForLanguage && !!adapter.importTranslationsBatched
+"
+      :show-translate="
+  !!adapter.requestTranslation && !!adapter.loadTextFieldValuesForLanguage && !!adapter.importTranslationsBatched
+"
+      :dialog-open="showCsvDialog"
+      @mark-all-up-to-date="onMarkUpToDate"
+      @open-csv="showCsvDialog = true"
+      @open-translate="showTranslateDialog = true"
+      @import-file="onImportFile"
+    />
+  </Teleport>
+
+  <PluginItemAction
+    v-if="isTranslating && adapter.markTranslationUpToDate"
+    id="mark-translation-up-to-date"
+    :disabled="markUpToDateDisabledReason"
+    disabled-reason-success
+    multiple
+    :title="$t('translationsMarkUpToDate', 'Mark translation as up-to-date')"
+    icon="bk_mdi_check_circle"
+    :weight="-100"
+    @click="onMarkUpToDate"
+  />
+
+  <Teleport :to="ui.mainLayoutElement.value">
+    <BlokkliTransition name="slide-up">
+      <CsvDialog
+        v-if="showCsvDialog"
+        :initial-files="pendingImportFiles"
+        @close="onCsvDialogClose"
+      />
+    </BlokkliTransition>
+    <BlokkliTransition name="slide-up">
+      <TranslateDialog
+        v-if="showTranslateDialog"
+        @close="showTranslateDialog = false"
+      />
+    </BlokkliTransition>
   </Teleport>
 
   <PluginItemAction
@@ -58,7 +101,7 @@
     :disabled="translateDisabledReason"
     :title="$t('translationsItemAction', 'Translate')"
     icon="bk_mdi_translate"
-    :weight="-100"
+    :weight="-90"
     @click="onTranslate"
   />
 </template>
@@ -74,7 +117,16 @@ import {
 import { falsy } from "#blokkli/helpers";
 import { PluginItemAction, PluginTourItem } from "#blokkli/editor/plugins";
 import Banner from "./Banner/index.vue";
-import { defineMenuButton, onBlokkliEvent } from "#blokkli/editor/composables";
+import CsvDialog from "./CsvDialog/index.vue";
+import TranslateDialog from "./TranslateDialog/index.vue";
+import {
+  defineMenuButton,
+  defineHighlight,
+  defineItemDropdownAction,
+  onBlokkliEvent,
+  useDialog
+} from "#blokkli/editor/composables";
+import { BlokkliTransition, Tooltip } from "#blokkli/editor/components";
 const { adapter } = defineBlokkliFeature({
   id: "translations",
   label: "Translations",
@@ -82,8 +134,95 @@ const { adapter } = defineBlokkliFeature({
   requiredAdapterMethods: ["changeLanguage"],
   description: "Adds support for block translations."
 });
-const { eventBus, state, context, $t, ui, selection, types, definitions } = useBlokkli();
+const {
+  eventBus,
+  state,
+  context,
+  $t,
+  ui,
+  selection,
+  types,
+  definitions,
+  blocks
+} = useBlokkli();
+const showCsvDialog = useDialog("translations-csv", "center");
+const showTranslateDialog = useDialog("translations-translate", "center");
+const pendingImportFiles = ref(null);
 const isTranslating = computed(() => state.editMode.value === "translating");
+function onImportFile(files) {
+  pendingImportFiles.value = files;
+  showCsvDialog.value = true;
+}
+function onCsvDialogClose() {
+  showCsvDialog.value = false;
+  pendingImportFiles.value = null;
+}
+defineHighlight(() => {
+  if (!isTranslating.value) {
+    return;
+  }
+  const lang = context.value.language;
+  return blocks.getAllBlocks().filter((block) => block.outdatedTranslations.includes(lang)).map((block) => ({
+    uuid: block.uuid,
+    color: "yellow",
+    icon: "bk_mdi_translate",
+    label: $t("outdatedTranslation", "Outdated translation"),
+    description: $t(
+      "outdatedTranslationDescription",
+      "Mark translation as up-to-date"
+    ),
+    onClick: () => onMarkUpToDate([block])
+  }));
+});
+const autoTranslateLabel = computed(() => {
+  return $t("translationsAutoTranslate", "Auto-translate");
+});
+defineItemDropdownAction(() => {
+  if (!isTranslating.value || !adapter.requestTranslation || !adapter.loadTextFieldValuesForLanguage || !adapter.importTranslationsBatched) {
+    return;
+  }
+  const selectedUuids = selection.uuids.value;
+  if (!selectedUuids.length) return;
+  return {
+    id: "auto-translate",
+    label: autoTranslateLabel.value,
+    icon: "bk_mdi_translate",
+    group: "translate",
+    weight: -80,
+    callback: () => autoTranslateSelected()
+  };
+});
+async function autoTranslateSelected() {
+  ui.setTransform(autoTranslateLabel.value);
+  const sourceLanguage = state.translation.value.sourceLanguage || "en";
+  const targetLanguage = context.value.language;
+  const selectedUuids = new Set(selection.uuids.value);
+  const sourceValues = await adapter.loadTextFieldValuesForLanguage(sourceLanguage);
+  const items2 = sourceValues.filter((v) => selectedUuids.has(v.uuid)).map((v) => ({
+    key: `${v.uuid}:${v.fieldName}`,
+    text: v.value,
+    isHtml: v.fieldType === "markup",
+    sourceLanguage,
+    targetLanguage
+  }));
+  if (items2.length) {
+    const response = await adapter.requestTranslation(items2);
+    if (!response.success || !response.data.length) return;
+    const importItems = response.data.map((result) => {
+      const separatorIndex = result.key.indexOf(":");
+      return {
+        langcode: targetLanguage,
+        uuid: result.key.substring(0, separatorIndex),
+        fieldName: result.key.substring(separatorIndex + 1),
+        fieldValue: result.translatedText
+      };
+    });
+    await state.mutateWithLoadingState(
+      () => adapter.importTranslationsBatched({ items: importItems })
+    );
+  }
+  ui.setTransform(null);
+}
 const isOpen = ref(false);
 const isDropdown = computed(() => {
   if (ui.isMobile.value) {
@@ -157,6 +296,18 @@ function onClick(item, event) {
     eventBus.emit("translateEntity", item.translation);
   }
 }
+const markUpToDateDisabledReason = computed(() => {
+  const lang = context.value.language;
+  if (selection.items.value.some(
+    (item) => item.outdatedTranslations.includes(lang)
+  )) {
+    return false;
+  }
+  return $t(
+    "translationsMarkUpToDateDisabled",
+    "No selected blocks have an outdated translation."
+  );
+});
 function onTranslate(items2) {
   const item = items2[0];
   if (item) {
@@ -166,6 +317,25 @@ function onTranslate(items2) {
     });
   }
 }
+function onMarkUpToDate(items2) {
+  if (!adapter.markTranslationUpToDate) return;
+  const lang = context.value.language;
+  const uuids = items2.map((item) => {
+    if (typeof item === "string") {
+      return item;
+    }
+    if (item.outdatedTranslations.includes(lang)) {
+      return item.uuid;
+    }
+    return null;
+  }).filter(falsy);
+  if (!uuids.length) {
+    return;
+  }
+  state.mutateWithLoadingState(
+    () => adapter.markTranslationUpToDate(uuids, context.value.language)
+  );
+}
 onBlokkliEvent("item:doubleClick", function(block) {
   if (isTranslating.value && !translateDisabledReason.value) {
     onTranslate([block]);
@@ -204,7 +374,11 @@ defineMenuButton(() => {
     disabled: !isTranslating.value,
     weight: 60,
     callback: () => {
-      eventBus.emit("batchTranslate");
+      if (adapter.requestTranslation && adapter.loadTextFieldValuesForLanguage && adapter.importTranslationsBatched) {
+        showTranslateDialog.value = true;
+      } else {
+        eventBus.emit("batchTranslate");
+      }
     }
   };
 });
@@ -215,3 +389,99 @@ export default {
   name: "Translations"
 };
 </script>
+
+<style>
+.bk .bk-translations {
+    position: relative;
+    font-size: 12px;
+    line-height: 16px
+}
+@media (min-width: 1024px) {
+    .bk .bk-translations {
+        font-size: 14px;
+        line-height: 20px
+    }
+}
+@media (min-width: 1280px) {
+    .bk .bk-translations {
+        font-size: 16px;
+        line-height: 24px
+    }
+}
+    .bk .bk-translations .bk-toolbar-button {
+    height: 100%;
+    font-weight: 600;
+    text-transform: uppercase
+}
+    .bk .bk-translations .bk-toolbar-button.bk-is-active {
+    --bk-tw-bg-opacity: 1 !important;
+    background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1)) !important;
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-text-opacity, 1))
+}
+    .bk .bk-translations .bk-translations-dropdown {
+    position: absolute;
+    top: 100%;
+    right: 0px;
+    z-index: calc(var(--bk-z-index-base) + 230000) /* "toolbar-dropdown" */;
+    max-width: 300px;
+    --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)
+}
+    @media (min-width: 1024px) {
+    .bk .bk-translations .bk-translations-dropdown {
+        right: auto;
+        left: 0px
+    }
+}
+    .bk .bk-translations .bk-translations-dropdown label {
+    position: relative;
+    display: block;
+    cursor: pointer;
+    white-space: nowrap;
+    padding-left: 15px;
+    padding-right: 15px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    font-size: 14px;
+    line-height: 20px
+}
+    @media (min-width: 1024px) {
+    .bk .bk-translations .bk-translations-dropdown label:hover {
+        --bk-tw-bg-opacity: 1;
+        background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1))
+    }
+}
+    .bk .bk-translations .bk-translations-dropdown label.bk-is-muted {
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-text-opacity, 1))
+}
+    .bk .bk-translations .bk-translations-dropdown label > div {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px
+}
+    @media (min-width: 768px) {
+    .bk .bk-translations .bk-translations-dropdown label > div {
+        gap: 20px
+    }
+}
+    .bk .bk-translations .bk-translations-dropdown label > div span {
+    order: 9999;
+    font-weight: 600
+}
+    .bk .bk-translations .bk-translations-dropdown input {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    height: 100%;
+    width: 100%;
+    cursor: pointer;
+    appearance: none;
+    opacity: 0
+}
+</style>

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

@@ -1,10 +1,57 @@
 import type { EntityTranslation } from '#blokkli/editor/types/state';
+import type { TextFieldValue } from '#blokkli/editor/providers/fieldValue';
 declare module '#blokkli/editor/adapter' {
     interface BlokkliAdapter<T> {
         /**
          * Change the language.
          */
         changeLanguage?: (translation: EntityTranslation) => Promise<any>;
+        /**
+         * Mark the translation of a block as up-to-date, removing the langcode
+         * from the block's outdatedTranslations list.
+         */
+        markTranslationUpToDate?: (uuids: string[], langcode: string) => Promise<MutationResponseLike<T>>;
+        /**
+         * Load all text field values for a given language.
+         *
+         * Used by the CSV export to fetch source language values when the editor
+         * is viewing a translation.
+         */
+        loadTextFieldValuesForLanguage?: (langcode: string) => Promise<TextFieldValue[]>;
+        /**
+         * Import translations for multiple languages at once.
+         *
+         * Each item includes the target language, block UUID, field name, and
+         * the new field value. Applied as a single mutation so it can be undone
+         * in one step.
+         */
+        importTranslationsBatched?: (arg: {
+            items: {
+                langcode: string;
+                uuid: string;
+                fieldName: string;
+                fieldValue: string;
+            }[];
+            markUpToDate?: boolean;
+        }) => Promise<MutationResponseLike<T>>;
+        /**
+         * Request automatic translations for a batch of text fields.
+         *
+         * Each item includes a key (uuid:fieldName), the source text, and the
+         * source/target language codes. Returns the translated texts keyed by
+         * the same key. This is a pure query with no side effects - applying
+         * the results uses importTranslationsBatched.
+         */
+        requestTranslation?: (items: {
+            key: string;
+            text: string;
+            isHtml: boolean;
+            sourceLanguage: string;
+            targetLanguage: string;
+        }[]) => Promise<GenericAdapterResponse<{
+            key: string;
+            translatedText: string;
+        }[]>>;
     }
 }
 declare module '#blokkli/editor/events' {

package/dist/runtime/editor/features/validations/Overlay/index.vue

@@ -40,3 +40,133 @@ const items = computed(
   })
 );
 </script>
+
+<style>
+.bk.bk-validations-overlay {
+
+    pointer-events: none;
+
+    position: absolute;
+
+    top: 0px;
+
+    left: 0px;
+
+    height: 100%;
+
+    width: 100%
+}
+
+  .bk.bk-validations-overlay > div {
+
+    position: absolute;
+
+    top: 0px;
+
+    left: 0px;
+
+    box-sizing: border-box;
+
+    border-width: 3px;
+
+    --bk-tw-border-opacity: 1;
+
+    border-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-border-opacity, 1));
+
+    background-color: rgb(var(--bk-theme-red-normal) / 0.1)
+}
+
+  .bk.bk-validations-overlay > div > div {
+
+    --bk-tw-bg-opacity: 1;
+
+    background-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-bg-opacity, 1));
+
+    padding-left: 10px;
+
+    padding-right: 10px;
+
+    padding-top: 5px;
+
+    padding-bottom: 5px;
+
+    --bk-tw-text-opacity: 1;
+
+    color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
+
+    position: absolute;
+
+    left: -2px;
+
+    right: -2px;
+
+    font-weight: 700;
+
+    bottom: 100%
+}
+
+.bk .bk-validation-item {
+
+    width: 100%;
+
+    padding: 15px;
+
+    font-size: 16px;
+
+    line-height: 24px;
+
+    --bk-tw-text-opacity: 1;
+
+    color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-text-opacity, 1))
+}
+
+.bk .bk-validation-item:hover {
+
+    --bk-tw-bg-opacity: 1;
+
+    background-color: rgb(var(--bk-theme-mono-50) / var(--bk-tw-bg-opacity, 1))
+}
+
+.bk .bk-validation-item {
+
+    border-bottom-width: 1px;
+
+    --bk-tw-border-opacity: 1;
+
+    border-bottom-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1))
+}
+
+.bk .bk-validation-item .bk-blokkli-item-icon {
+
+    width: 25px;
+
+    height: 25px;
+
+    border-radius: 4px;
+
+    border-width: 1px;
+
+    --bk-tw-border-opacity: 1;
+
+    border-color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-border-opacity, 1));
+
+    --bk-tw-bg-opacity: 1;
+
+    background-color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-bg-opacity, 1));
+
+    padding: 3px
+}
+
+.bk .bk-validation-item .bk-validation-item-header {
+
+    margin-bottom: 10px;
+
+    display: flex;
+
+    align-items: center;
+
+    gap: 5px;
+
+    font-weight: 500
+}
+</style>

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

@@ -67,3 +67,44 @@ export default {
   name: "Validations"
 };
 </script>
+
+<style>
+.bk.bk-errors .bk-errors-success {
+
+    display: flex;
+
+    flex-direction: column;
+
+    align-items: center;
+
+    padding-top: 30px;
+
+    text-align: center
+}
+
+    .bk.bk-errors .bk-errors-success figure {
+
+    margin-bottom: 20px;
+
+    height: 100px;
+
+    width: 100px;
+
+    border-radius: 9999px;
+
+    --bk-tw-bg-opacity: 1;
+
+    background-color: rgb(var(--bk-theme-lime-light) / var(--bk-tw-bg-opacity, 1));
+
+    padding: 20px;
+
+    --bk-tw-text-opacity: 1;
+
+    color: rgb(var(--bk-theme-lime-dark) / var(--bk-tw-text-opacity, 1))
+}
+
+    .bk.bk-errors .bk-errors-success figure svg {
+
+    fill: currentColor
+}
+</style>

package/dist/runtime/editor/features/{assistant → workspace}/Overlay/index.d.vue.ts

@@ -1,9 +1,7 @@
-declare const _default: typeof __VLS_export;
-export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     close: () => any;
-    submit: (result: import("../types.js").AssistantResultMarkup) => any;
 }, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
     onClose?: (() => any) | undefined;
-    onSubmit?: ((result: import("../types.js").AssistantResultMarkup) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;