@blokkli/editor 2.0.0-alpha.28 → 2.0.0-alpha.29

package/dist/runtime/editor/features/add-list/index.vue

@@ -0,0 +1,148 @@
+<template>
+  <Teleport v-if="shouldRender" :to="ui.mainLayoutElement.value">
+    <div
+      ref="wrapper"
+      class="bk bk-add-list bk-control"
+      id="bk-add-list"
+      @wheel.capture.passive="onWheel"
+      @mouseenter="onMouseEnter"
+      @mouseleave="onMouseLeave"
+    >
+      <div
+        class="bk-add-list-inner"
+        :class="{
+  'bk-is-active': isActive
+}"
+      >
+        <AddListBlocks
+          :selectable-bundles
+          :generally-available-bundles
+          :hide-disabled-blocks="settings.hideDisabledBlocks"
+        />
+        <AddListActions :selectable-bundles />
+      </div>
+    </div>
+    <PluginTourItem
+      id="add-blocks"
+      :element="wrapper"
+      :title="sidebarTitle"
+      :text="tourText"
+    />
+  </Teleport>
+</template>
+
+<script setup>
+import {
+  ref,
+  computed,
+  useBlokkli,
+  defineBlokkliFeature,
+  useTemplateRef
+} from "#imports";
+import { PluginTourItem } from "#blokkli/editor/plugins";
+import AddListBlocks from "./Blocks/index.vue";
+import AddListActions from "./Actions/index.vue";
+import { itemEntityType } from "#blokkli-build/config";
+import { onlyUnique } from "#blokkli/helpers";
+const { settings } = defineBlokkliFeature({
+  id: "add-list",
+  icon: "bk_mdi_add",
+  label: "Add List",
+  description: "Provides the container to render a list of blocks to add or add actions.",
+  settings: {
+    hideDisabledBlocks: {
+      type: "checkbox",
+      label: "Hide blocks that can't be added",
+      description: `Hides blocks from the "Add List" if they can't be added to anywhere.`,
+      group: "appearance",
+      default: false
+    }
+  },
+  screenshot: "feature-add-list.jpg"
+});
+const { $t, ui, selection, state, tour, types, context, dom } = useBlokkli();
+const getAllowedTypesForSelected = (p) => {
+  if (types.itemBundlesWithNested.includes(p.bundle)) {
+    return types.fieldConfig.forEntityTypeAndBundle(itemEntityType, p.bundle).flatMap((v) => v.allowedBundles).filter(Boolean);
+  }
+  if (p.host.type === itemEntityType) {
+    return types.fieldConfig.forEntityTypeAndBundle(itemEntityType, p.host.bundle).flatMap((v) => v.allowedBundles).filter(Boolean);
+  } else {
+    return types.getFieldConfig(
+      context.value.entityType,
+      context.value.entityBundle,
+      p.host.fieldName
+    )?.allowedBundles || [];
+  }
+};
+const bundlesForRenderedFields = computed(() => {
+  return dom.registeredFieldTypes.value.flatMap((field) => {
+    return types.getFieldConfig(
+      field.entityType,
+      field.entityBundle,
+      field.fieldName
+    )?.allowedBundles || [];
+  }).filter(onlyUnique);
+});
+const generallyAvailableBundles = computed(
+  () => types.generallyAvailableBundles.filter(
+    (v) => (
+      // Exclude bundles for which no field is currently being rendered.
+      bundlesForRenderedFields.value.includes(v.id)
+    )
+  )
+);
+const selectableBundles = computed(() => {
+  if (selection.items.value.length) {
+    return selection.items.value.flatMap((v) => getAllowedTypesForSelected(v));
+  }
+  return generallyAvailableBundles.value.map((v) => v.id || "");
+});
+const shouldRender = computed(
+  () => state.canEdit.value && state.editMode.value === "editing"
+);
+const hasContextMenuOpen = computed(
+  () => ui.openContextMenu.value.startsWith("add_list_item_add-list-blocks")
+);
+const wrapper = useTemplateRef("wrapper");
+const isHovered = ref(false);
+let mouseTimeout = null;
+const isActive = computed(() => {
+  return (isHovered.value || hasContextMenuOpen.value || tour.isTouring.value) && !selection.isDragging.value;
+});
+function onMouseEnter() {
+  if (mouseTimeout) {
+    clearTimeout(mouseTimeout);
+    isHovered.value = true;
+    mouseTimeout = null;
+    return;
+  }
+  mouseTimeout = setTimeout(() => {
+    isHovered.value = true;
+    mouseTimeout = null;
+  }, 300);
+}
+function onMouseLeave() {
+  clearTimeout(mouseTimeout);
+  isHovered.value = false;
+}
+const onWheel = (e) => {
+  if (e.ctrlKey || e.metaKey) {
+    return;
+  }
+  e.stopPropagation();
+};
+const sidebarTitle = computed(() => $t("addListSidebarTitle", "Add blocks"));
+const tourText = computed(
+  () => $t(
+    "addListTourText",
+    "<p>This shows the list of available blocks that can be placed. Add a block by dragging the icon into the page.</p><p>When an existing block is selected, some blocks may be greyed out. This indicates which blocks can be placed inside or after the selected block.</p>"
+  )
+);
+</script>
+
+<script>
+export default {
+  name: "AddList"
+};
+</script>

package/dist/runtime/editor/features/add-list/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/add-list/types.d.ts

@@ -0,0 +1,19 @@
+import type { AddAction } from '#blokkli/editor/types/actions';
+export interface DraggableActionItem {
+    itemType: 'action';
+    actionType: string;
+    action: AddAction;
+    itemBundle?: string;
+    element: () => HTMLElement;
+}
+export interface DraggableNewItem {
+    itemType: 'new';
+    element: () => HTMLElement;
+    itemBundle: string;
+}
+declare module '#blokkli/editor/types/draggable' {
+    interface DraggableItemTypes {
+        new: DraggableNewItem;
+        action: DraggableActionItem;
+    }
+}

package/dist/runtime/editor/features/analyze/Icon.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    isRunning: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/analyze/Icon.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    isRunning: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/analyze/Main.d.vue.ts

@@ -0,0 +1,16 @@
+import type { Analyzer } from './analyzers/types.js';
+type __VLS_Props = {
+    langcode: string;
+    analyzers: Analyzer[];
+};
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/analyze/Main.vue

@@ -0,0 +1,385 @@
+<template>
+  <div class="bk bk-analyze">
+    <div class="bk-analyze-button">
+      <button
+        v-if="hasManualAnalyzers"
+        class="bk-button bk-is-primary"
+        :disabled="buttonDisabled"
+        @click.prevent="onClick"
+      >
+        {{ $t("analyzeButtonLabel", "Analyze Page") }}
+      </button>
+
+      <p v-if="lastRun" class="bk-analyze-last-run">
+        <RelativeTime v-slot="{ formatted }" :timestamp="lastRun">
+          {{
+            $t("analyzeLastRun", "Last run: @time").replace("@time", formatted)
+          }}
+        </RelativeTime>
+      </p>
+
+      <div v-if="analyzerStatuses.length > 1" class="bk-analyze-statuses">
+        <div
+          v-for="analyzer in analyzerStatuses"
+          :key="analyzer.id"
+          class="bk-analyze-status-item"
+        >
+          <span class="bk-analyze-status-title">{{ analyzer.title }}</span>
+          <span
+            class="bk-analyze-status-label"
+            :class="{ 'bk-is-stale': analyzer.isStale }"
+          >
+            {{ analyzer.status }}
+          </span>
+        </div>
+      </div>
+
+      <p v-if="staleMessage" class="bk-message-info">
+        {{ staleMessage }}
+      </p>
+    </div>
+
+    <div v-if="results.length" class="bk-analyze-wrapper">
+      <div v-if="categoryOptions.length > 2" class="bk-analyze-form">
+        <FormSelect
+          id="category"
+          v-model="selectedCategory"
+          :label="$t('analyzeCategory', 'Category')"
+          :options="categoryOptions"
+        />
+      </div>
+      <AnalyzeSummary :results="results" />
+      <Results v-model="activeId" :results="results" />
+    </div>
+  </div>
+  <Renderer
+    v-if="results.length"
+    v-model="activeId"
+    :results
+    :is-stale
+    :manual-analyzer-ids
+    :is-running
+  />
+</template>
+
+<script setup>
+import {
+  computed,
+  useBlokkli,
+  useState,
+  onMounted,
+  onUnmounted,
+  watch
+} from "#imports";
+import Results from "./Results/Results.vue";
+import AnalyzeSummary from "./Summary/index.vue";
+import Renderer from "./Renderer/index.vue";
+import { useAnalyzeHelper } from "./helper";
+import { FormSelect, RelativeTime } from "#blokkli/editor/components";
+import { AnalyzerContext } from "./analyzers/helpers/Context";
+import { normalizeToArray } from "./analyzers/helpers/normalizeArray";
+import { renderCycle } from "#blokkli/editor/helpers/vue";
+const props = defineProps({
+  langcode: { type: String, required: true },
+  analyzers: { type: Array, required: true }
+});
+const ALL = "ALL";
+const { $t, ui, state, directive, dom } = useBlokkli();
+const { getCategoryLabel } = useAnalyzeHelper();
+const refreshKey = computed(() => {
+  return `dom:${dom.settleKey.value}_directive:${directive.settleKey.value}_state:${state.refreshKey.value}`;
+});
+const isRunning = defineModel({ type: Boolean, ...{ default: false } });
+let currentAbortController = null;
+const hasRunOnce = useState(() => false);
+const continuousResults = useState(
+  "blokkli:analyze:continuous",
+  () => []
+);
+const manualResults = useState(
+  "blokkli:analyze:manual",
+  () => []
+);
+const activeId = useState(() => "");
+const lastRun = useState(() => 0);
+const lastRunKey = useState(() => "");
+const selectedCategory = useState(() => ALL);
+const hasInitialized = useState(() => false);
+const providerRootElement = ui.providerElement;
+const continuousAnalyzers = computed(
+  () => props.analyzers.filter((a) => a.continuous)
+);
+const manualAnalyzers = computed(
+  () => props.analyzers.filter((a) => !a.continuous)
+);
+const hasContinuousAnalyzers = computed(
+  () => continuousAnalyzers.value.length > 0
+);
+const hasManualAnalyzers = computed(() => manualAnalyzers.value.length > 0);
+const allResults = computed(() => {
+  const merged = [...continuousResults.value, ...manualResults.value];
+  const mappedResults = [];
+  let currentIndex = 0;
+  for (let i = 0; i < merged.length; i++) {
+    const result = merged[i];
+    if (!result) {
+      continue;
+    }
+    const nodes = Array.isArray(result.nodes) ? result.nodes : [result.nodes];
+    const mappedNodes = [];
+    for (let j = 0; j < nodes.length; j++) {
+      const node = nodes[j];
+      if (!node) {
+        continue;
+      }
+      const targets = Array.isArray(node.targets) ? node.targets : [node.targets];
+      const mappedTargets = [];
+      for (let k = 0; k < targets.length; k++) {
+        const target = targets[k];
+        if (!target) {
+          continue;
+        }
+        mappedTargets.push({ target, globalIndex: currentIndex });
+        currentIndex++;
+      }
+      mappedNodes.push({
+        ...node,
+        targets: mappedTargets
+      });
+    }
+    mappedResults.push({
+      ...result,
+      plugin: result.pluginId,
+      nodes: mappedNodes
+    });
+  }
+  return mappedResults;
+});
+const results = computed(() => {
+  if (selectedCategory.value === ALL) {
+    return allResults.value;
+  }
+  return allResults.value.filter((v) => v.category === selectedCategory.value);
+});
+const isStale = computed(() => lastRunKey.value !== state.refreshKey.value);
+const buttonDisabled = computed(() => {
+  if (isRunning.value) {
+    return true;
+  }
+  if (!isStale.value) {
+    return false;
+  }
+  return false;
+});
+const staleMessage = computed(() => {
+  if (hasManualAnalyzers.value && manualResults.value.length === 0) {
+    return $t(
+      "analyzeClickButton",
+      "Click the button above to run the analysis."
+    );
+  }
+  if (hasManualAnalyzers.value && isStale.value) {
+    return $t(
+      "analyzeResultsOutdated",
+      "Results are outdated. Click the button to update."
+    );
+  }
+  return "";
+});
+const analyzerStatuses = computed(() => {
+  if (!hasRunOnce.value) {
+    return [];
+  }
+  return props.analyzers.map((analyzer) => {
+    const status = analyzer.continuous ? $t("analyzeStatusUpToDate", "Up-to-date") : isStale.value ? $t("analyzeStatusStale", "Stale") : $t("analyzeStatusUpToDate", "Up-to-date");
+    const title = typeof analyzer.label === "function" ? analyzer.label(ui.interfaceLanguage.value) : analyzer.label;
+    return {
+      id: analyzer.id,
+      title: title ?? analyzer.id,
+      status,
+      isStale: !analyzer.continuous && isStale.value
+    };
+  });
+});
+const manualAnalyzerIds = computed(
+  () => new Set(manualAnalyzers.value.map((a) => a.id))
+);
+let refreshTimeout = null;
+watch(refreshKey, () => {
+  if (!hasContinuousAnalyzers.value) {
+    return;
+  }
+  if (currentAbortController) {
+    currentAbortController.abort("refreshKey updated");
+  }
+  if (refreshTimeout) {
+    window.clearTimeout(refreshTimeout);
+  }
+  isRunning.value = true;
+  refreshTimeout = window.setTimeout(() => {
+    runContinuous();
+  }, 100);
+});
+onUnmounted(() => {
+  if (currentAbortController) {
+    currentAbortController.abort("refreshKey updated");
+    currentAbortController = null;
+  }
+});
+function getContext(signal) {
+  return new AnalyzerContext(
+    props.langcode,
+    ui.interfaceLanguage.value,
+    providerRootElement,
+    state,
+    $t,
+    signal
+  );
+}
+async function runContinuous() {
+  if (!continuousAnalyzers.value.length) {
+    return;
+  }
+  if (currentAbortController) {
+    currentAbortController.abort("refreshKey updated");
+  }
+  const abortController = new AbortController();
+  currentAbortController = abortController;
+  isRunning.value = true;
+  let wasAborted = false;
+  try {
+    const context = getContext(abortController.signal);
+    if (!hasInitialized.value) {
+      await Promise.all(
+        props.analyzers.map(async (analyzer) => {
+          if (analyzer.init) {
+            await analyzer.init(context);
+          }
+        })
+      );
+      hasInitialized.value = true;
+    }
+    if (abortController.signal.aborted) {
+      wasAborted = true;
+      return;
+    }
+    const newResults = [];
+    for (let i = 0; i < continuousAnalyzers.value.length; i++) {
+      if (abortController.signal.aborted) {
+        wasAborted = true;
+        return;
+      }
+      const analyzer = continuousAnalyzers.value[i];
+      const result = (await normalizeToArray(analyzer.run(context))).map(
+        (v) => {
+          return {
+            ...v,
+            pluginId: analyzer.id
+          };
+        }
+      );
+      newResults.push(...result);
+    }
+    if (abortController.signal.aborted) {
+      wasAborted = true;
+      return;
+    }
+    continuousResults.value = newResults;
+    hasRunOnce.value = true;
+    lastRun.value = Date.now() / 1e3;
+  } catch (error) {
+    if (error instanceof Error && error.name === "AbortError") {
+      wasAborted = true;
+      return;
+    }
+    throw error;
+  } finally {
+    if (currentAbortController === abortController) {
+      currentAbortController = null;
+      if (!wasAborted) {
+        isRunning.value = false;
+      }
+    }
+  }
+}
+async function onClick() {
+  if (isRunning.value) {
+    return;
+  }
+  const requiresRawPage = manualAnalyzers.value.some(
+    (analyzer) => analyzer.requireRawPage
+  );
+  if (requiresRawPage) {
+    ui.isAnalyzing.value = true;
+  }
+  isRunning.value = true;
+  await renderCycle();
+  const currentRefreshKey = state.refreshKey.value;
+  try {
+    const context = getContext();
+    if (!hasInitialized.value) {
+      await Promise.all(
+        props.analyzers.map(async (analyzer) => {
+          if (analyzer.init) {
+            await analyzer.init(context);
+          }
+        })
+      );
+    }
+    hasInitialized.value = true;
+    const newManualResults = [];
+    for (let i = 0; i < manualAnalyzers.value.length; i++) {
+      const analyzer = manualAnalyzers.value[i];
+      const result = (await normalizeToArray(analyzer.run(context))).map(
+        (v) => {
+          return {
+            ...v,
+            pluginId: analyzer.id
+          };
+        }
+      );
+      newManualResults.push(...result);
+    }
+    manualResults.value = newManualResults;
+    hasRunOnce.value = true;
+    lastRun.value = Date.now() / 1e3;
+    if (state.refreshKey.value === currentRefreshKey) {
+      lastRunKey.value = currentRefreshKey;
+    }
+  } catch (error) {
+    if (error instanceof Error && error.name === "AbortError") {
+      return;
+    }
+    throw error;
+  } finally {
+    isRunning.value = false;
+    if (requiresRawPage) {
+      ui.isAnalyzing.value = false;
+    }
+  }
+}
+const categoryOptions = computed(() => {
+  const set = allResults.value.reduce((acc, v) => {
+    acc.add(v.category);
+    return acc;
+  }, /* @__PURE__ */ new Set());
+  const categories = [...set.values()].map((value) => {
+    return {
+      value,
+      label: getCategoryLabel(value)
+    };
+  });
+  return [
+    {
+      value: ALL,
+      label: $t("all", "All")
+    },
+    ...categories
+  ];
+});
+onMounted(async () => {
+  if (hasContinuousAnalyzers.value) {
+    await runContinuous();
+  }
+});
+</script>

package/dist/runtime/editor/features/analyze/Main.vue.d.ts

@@ -0,0 +1,16 @@
+import type { Analyzer } from './analyzers/types.js';
+type __VLS_Props = {
+    langcode: string;
+    analyzers: Analyzer[];
+};
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/analyze/Renderer/index.d.vue.ts

@@ -0,0 +1,22 @@
+import type { AnalyzeResultMapped } from '#blokkli/analyzer/types';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    results: AnalyzeResultMapped[];
+    isStale: boolean;
+    isRunning: boolean;
+    manualAnalyzerIds: Set<string>;
+} & {
+    modelValue?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    results: AnalyzeResultMapped[];
+    isStale: boolean;
+    isRunning: boolean;
+    manualAnalyzerIds: Set<string>;
+} & {
+    modelValue?: string;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;