@revenexx/editor 0.1.0

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

@@ -0,0 +1,316 @@
+<template>
+  <DialogModal
+    id="translations-translate"
+    :title="$t('translationsTranslateDialogTitle', 'Automatic Translation')"
+    icon="bk_mdi_translate"
+    :width="1800"
+    mono
+    @cancel="$emit('close')"
+  >
+    <PanelSection
+      v-if="!isLoading && sourceValues.length"
+      :title="$t('filter', 'Filter')"
+      padded
+    >
+      <div class="_bk_flex _bk_items-center _bk_gap-20">
+        <FormToggle
+          v-model="onlyOutdated"
+          :label="
+  $t('translationsCsvOnlyOutdated', 'Only outdated translations')
+"
+        />
+        <FormToggle
+          v-model="onlyUntranslated"
+          :label="$t('translationsCsvOnlyMissing', 'Only missing translations')"
+        />
+      </div>
+    </PanelSection>
+
+    <PanelSection
+      :title="sourceValues.length ? fieldsTitle : void 0"
+    >
+      <div v-if="isLoading" class="_bk_flex _bk_items-center _bk_justify-center _bk_py-60">
+        <Loading />
+      </div>
+
+      <div
+        v-else-if="!sourceValues.length"
+        class="_bk_py-20 _bk_text-center _bk_text-mono-500"
+      >
+        {{
+          $t(
+  "translationsTranslateNoTexts",
+  "No translatable texts found on this page."
+)
+        }}
+      </div>
+
+      <SelectionTable
+        v-else
+        show-selection
+        :selected-count="selectedCount"
+        :total-count="filteredValues.length"
+        @toggle-all="toggleAll"
+      >
+        <template #header>
+          <th>{{ sourceLangName }}</th>
+          <th v-if="hasTranslated">
+            {{ targetLangName }}
+          </th>
+          <th v-else>
+            {{
+              $t(
+  "translationsTranslateCurrentColumn",
+  "Current translation (@language)"
+).replace("@language", targetLangName)
+            }}
+          </th>
+        </template>
+        <template #body>
+          <tr
+            v-for="item in filteredValues"
+            :key="item.key"
+          >
+            <td>
+              <div class="bk-checkbox">
+                <input
+                  type="checkbox"
+                  :checked="selected[item.key]"
+                  @change="selected[item.key] = !selected[item.key]"
+                />
+                <span class="_bk_!mt-0 _bk_before:!mt-0" />
+              </div>
+            </td>
+            <td v-text="stripHtml(item.value)" />
+            <td v-if="hasTranslated && translations.has(item.key)">
+              <DiffValue
+                :before="currentValues.get(item.key) || ''"
+                :after="translations.get(item.key) || ''"
+                :after-only="
+  !currentValues.get(item.key) || currentValues.get(item.key) === item.value
+"
+              />
+            </td>
+            <td v-else>
+              <span
+                v-if="
+  currentValues.get(item.key) && currentValues.get(item.key) !== item.value
+"
+                v-text="stripHtml(currentValues.get(item.key))"
+              />
+              <span v-else class="_bk_text-mono-400 _bk_italic">&mdash;</span>
+            </td>
+          </tr>
+        </template>
+      </SelectionTable>
+    </PanelSection>
+
+    <template v-if="errorMessage" #pre-footer>
+      <div class="_bk_text-red-normal _bk_text-sm" v-text="errorMessage" />
+    </template>
+
+    <template #footer>
+      <button
+        class="bk-button"
+        :disabled="!selectedCount || isTranslating"
+        @click="requestTranslations"
+      >
+        <template v-if="isTranslating">
+          {{
+            $t("translationsTranslateLoading", "Translating", { more: true })
+          }}
+        </template>
+        <template v-else>
+          {{
+            $t(
+  "translationsTranslateButton",
+  "Request @count translations"
+).replace("@count", selectedCount.toString())
+          }}
+        </template>
+      </button>
+      <button
+        class="bk-button bk-scheme-accent"
+        :disabled="!hasTranslated || !selectedCount || isApplying"
+        @click="applyTranslations"
+      >
+        {{
+          $t("translationsTranslateApply", "Apply @count translations").replace(
+  "@count",
+  selectedCount.toString()
+)
+        }}
+      </button>
+      <FormToggle
+        v-model="markUpToDate"
+        class="_bk_!h-auto"
+        :label="
+  $t('translationsMarkUpToDate', 'Mark translations as up to date')
+"
+      />
+    </template>
+  </DialogModal>
+</template>
+
+<script setup>
+import { ref, computed, useBlokkli, onMounted } from "#imports";
+import {
+  DialogModal,
+  DiffValue,
+  FormToggle,
+  Loading
+} from "#blokkli/editor/components";
+import PanelSection from "#blokkli/editor/components/Panel/Section/index.vue";
+import SelectionTable from "../SelectionTable/index.vue";
+const emit = defineEmits(["close"]);
+const { adapter, $t, state, context, blocks } = useBlokkli();
+const sourceValues = ref([]);
+const currentValues = ref(/* @__PURE__ */ new Map());
+const translations = ref(/* @__PURE__ */ new Map());
+const selected = ref({});
+const isLoading = ref(true);
+const isTranslating = ref(false);
+const isApplying = ref(false);
+const hasTranslated = ref(false);
+const markUpToDate = ref(false);
+const errorMessage = ref("");
+const onlyOutdated = ref(false);
+const onlyUntranslated = ref(false);
+const sourceLanguage = computed(
+  () => state.translation.value.sourceLanguage || "en"
+);
+const targetLanguage = computed(() => context.value.language);
+const outdatedUuids = computed(() => {
+  const lang = targetLanguage.value;
+  return new Set(
+    blocks.getAllBlocks().filter((b) => b.outdatedTranslations.includes(lang)).map((b) => b.uuid)
+  );
+});
+const filteredValues = computed(() => {
+  let items = sourceValues.value;
+  if (onlyOutdated.value) {
+    items = items.filter((item) => outdatedUuids.value.has(item.uuid));
+  }
+  if (onlyUntranslated.value) {
+    items = items.filter((item) => {
+      const current = currentValues.value.get(item.key);
+      return !current || current === item.value;
+    });
+  }
+  return items;
+});
+const selectedCount = computed(
+  () => filteredValues.value.filter((item) => selected.value[item.key]).length
+);
+const fieldsTitle = computed(
+  () => `${selectedCount.value}/${filteredValues.value.length} ` + $t("translationsTranslateFieldsLabel", "fields selected")
+);
+const sourceLangName = computed(() => {
+  const id = sourceLanguage.value;
+  return state.translation.value.availableLanguages?.find((l) => l.id === id)?.name ?? id;
+});
+const targetLangName = computed(() => {
+  const id = targetLanguage.value;
+  return state.translation.value.availableLanguages?.find((l) => l.id === id)?.name ?? id;
+});
+function toggleAll() {
+  const allSelected = filteredValues.value.length > 0 && selectedCount.value === filteredValues.value.length;
+  const newValue = !allSelected;
+  for (const item of filteredValues.value) {
+    selected.value[item.key] = newValue;
+  }
+}
+function stripHtml(text) {
+  const div = document.createElement("div");
+  div.innerHTML = text;
+  return div.textContent || "";
+}
+async function loadTexts() {
+  isLoading.value = true;
+  errorMessage.value = "";
+  try {
+    const source = await adapter.loadTextFieldValuesForLanguage(
+      sourceLanguage.value
+    );
+    sourceValues.value = source.map((v) => ({
+      ...v,
+      key: `${v.uuid}:${v.fieldName}`
+    }));
+    for (const item of sourceValues.value) {
+      selected.value[item.key] = true;
+    }
+    const current = await adapter.loadTextFieldValuesForLanguage(
+      targetLanguage.value
+    );
+    const map = /* @__PURE__ */ new Map();
+    for (const v of current) {
+      map.set(`${v.uuid}:${v.fieldName}`, v.value);
+    }
+    currentValues.value = map;
+  } catch (e) {
+    errorMessage.value = e?.message || "Failed to load texts.";
+  } finally {
+    isLoading.value = false;
+  }
+}
+async function requestTranslations() {
+  isTranslating.value = true;
+  errorMessage.value = "";
+  const items = filteredValues.value.filter((item) => selected.value[item.key]).map((item) => ({
+    key: item.key,
+    text: item.value,
+    isHtml: item.fieldType === "markup",
+    sourceLanguage: sourceLanguage.value,
+    targetLanguage: targetLanguage.value
+  }));
+  try {
+    const response = await adapter.requestTranslation(items);
+    if (!response.success) {
+      errorMessage.value = response.errors?.join(", ") || "Translation request failed.";
+      return;
+    }
+    const map = /* @__PURE__ */ new Map();
+    for (const result of response.data) {
+      map.set(result.key, result.translatedText);
+    }
+    translations.value = map;
+    hasTranslated.value = true;
+  } catch (e) {
+    errorMessage.value = e?.message || "Translation request failed.";
+  } finally {
+    isTranslating.value = false;
+  }
+}
+async function applyTranslations() {
+  isApplying.value = true;
+  errorMessage.value = "";
+  const items = filteredValues.value.filter(
+    (item) => selected.value[item.key] && translations.value.has(item.key)
+  ).map((item) => {
+    const separatorIndex = item.key.indexOf(":");
+    return {
+      langcode: targetLanguage.value,
+      uuid: item.key.substring(0, separatorIndex),
+      fieldName: item.key.substring(separatorIndex + 1),
+      fieldValue: translations.value.get(item.key)
+    };
+  });
+  if (!items.length) return;
+  try {
+    await state.mutateWithLoadingState(
+      () => adapter.importTranslationsBatched({
+        items,
+        markUpToDate: markUpToDate.value
+      })
+    );
+    emit("close");
+  } catch (e) {
+    errorMessage.value = e?.message || "Failed to apply translations.";
+  } finally {
+    isApplying.value = false;
+  }
+}
+onMounted(() => {
+  loadTexts();
+});
+</script>

package/dist/runtime/editor/features/translations/TranslateDialog/index.vue.d.ts

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

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

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,278 @@
+<template>
+  <Teleport to="#bk-toolbar-after-title">
+    <LanguageSwitcher :active-language />
+  </Teleport>
+
+  <Teleport to="#bk-banner-list">
+    <Banner
+      v-if="isTranslating"
+      v-show="!ui.isApproving.value"
+      :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 as up-to-date')"
+    :description="
+  $t(
+    'translationsMarkUpToDateDescription',
+    'Marks all text translations of this block 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
+    v-if="isTranslating"
+    id="translate"
+    :disabled="translateDisabledReason"
+    :title="$t('editTranslation', 'Edit translation') + '...'"
+    :description="
+  $t('editTranslationDescription', 'Manually add or edit the translations.')
+"
+    icon="bk_mdi_translate"
+    :weight="-90"
+    @click="onTranslate"
+  />
+
+  <AutoTranslate />
+</template>
+
+<script setup>
+import {
+  ref,
+  computed,
+  useBlokkli,
+  defineBlokkliFeature,
+  onMounted,
+  defineAsyncComponent
+} from "#imports";
+import { falsy } from "#blokkli/helpers";
+import { PluginItemAction } from "#blokkli/editor/plugins";
+import {
+  defineMenuButton,
+  defineHighlight,
+  onBlokkliEvent,
+  useDialog
+} from "#blokkli/editor/composables";
+import { BlokkliTransition } from "#blokkli/editor/components";
+import LanguageSwitcher from "./LanguageSwitcher/index.vue";
+const CsvDialog = defineAsyncComponent(() => import("./CsvDialog/index.vue"));
+const TranslateDialog = defineAsyncComponent(
+  () => import("./TranslateDialog/index.vue")
+);
+const Banner = defineAsyncComponent(() => import("./Banner/index.vue"));
+const AutoTranslate = defineAsyncComponent(
+  () => import("./AutoTranslate/index.vue")
+);
+const { adapter } = defineBlokkliFeature({
+  id: "translations",
+  label: "Translations",
+  icon: "bk_mdi_translate",
+  requiredAdapterMethods: ["changeLanguage"],
+  description: "Adds support for block translations."
+});
+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 activeLangcode = computed(() => context.value.language);
+const activeLanguage = computed(() => {
+  return state.translation.value.availableLanguages?.find(
+    (v) => v.id === activeLangcode.value
+  ) || {
+    id: activeLangcode.value,
+    name: activeLangcode.value
+  };
+});
+const translateDisabledReason = computed(() => {
+  const block = selection.item.value;
+  if (!block) {
+    return false;
+  }
+  if (block.library?.libraryItemUuid) {
+    return $t(
+      "translateLibraryBlock",
+      "Reusable blocks cannot be translated here."
+    );
+  }
+  const definition = definitions.getBlockDefinition(
+    block.bundle,
+    block.fieldListType,
+    block.parentBlockBundle
+  );
+  if (definition?.editor?.disableEdit) {
+    return $t("editingDisabled", "Editing is disabled for this block type.");
+  }
+  const type = types.getBlockBundleDefinition(block.bundle);
+  if (!type || !type.isTranslatable) {
+    return $t(
+      "translateNotTranslatable",
+      "This block type is not translatable."
+    );
+  }
+  return false;
+});
+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(items) {
+  const item = items[0];
+  if (item) {
+    eventBus.emit("item:edit", {
+      uuid: item.uuid,
+      bundle: item.bundle
+    });
+  }
+}
+function onMarkUpToDate(items) {
+  if (!adapter.markTranslationUpToDate) return;
+  const lang = context.value.language;
+  const uuids = items.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]);
+  }
+});
+onBlokkliEvent("entity:translated", (langcode) => {
+  const targetTranslation = state.translation.value.translations?.find(
+    (v) => v.id === langcode
+  );
+  if (targetTranslation) {
+    adapter.changeLanguage(targetTranslation);
+  }
+});
+onMounted(() => {
+  const translationExists = !!state.translation.value.translations?.find(
+    (v) => v.id === context.value.language
+  );
+  if (!translationExists) {
+    const sourceTranslation = state.translation.value.translations?.find(
+      (v) => v.id === state.translation.value.sourceLanguage
+    );
+    if (sourceTranslation) {
+      return adapter.changeLanguage(sourceTranslation);
+    }
+  }
+});
+defineMenuButton(() => {
+  return {
+    id: "translations",
+    title: $t("translate", "Translate", { more: true }),
+    description: $t(
+      "translationsBatchTranslateMenuDescription",
+      "Translate all blocks"
+    ),
+    icon: "bk_mdi_translate",
+    disabled: !isTranslating.value,
+    weight: 60,
+    callback: () => {
+      if (adapter.requestTranslation && adapter.loadTextFieldValuesForLanguage && adapter.importTranslationsBatched) {
+        showTranslateDialog.value = true;
+      } else {
+        eventBus.emit("batchTranslate");
+      }
+    }
+  };
+});
+</script>
+
+<script>
+export default {
+  name: "Translations"
+};
+</script>

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

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,63 @@
+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' {
+    interface EventbusEvents {
+        translateEntity: EntityTranslation;
+        'entity:translated': string;
+        batchTranslate: undefined;
+    }
+}

package/dist/runtime/editor/features/workspace/Overlay/Item.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<any, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, any, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;