@blokkli/editor 2.0.0-alpha.22 → 2.0.0-alpha.24

package/dist/runtime/components/Edit/Features/AddList/Actions/Action.vue

@@ -0,0 +1,52 @@
+<template>
+  <AddListItem
+    :id="action.id"
+    ref="item"
+    :key="action.id"
+    context="add-list-actions"
+    :label="action.title"
+    :bundle="action.itemBundle"
+    :icon="action.icon"
+    :color="action.color"
+    :disabled
+    no-context-menu
+  />
+</template>
+
+<script setup>
+import { AddListItem } from "#blokkli/components";
+import defineTourItem from "#blokkli/helpers/composables/defineTourItem";
+import { computed, useTemplateRef, useBlokkli } from "#imports";
+const props = defineProps({
+  action: { type: Object, required: true },
+  selectableBundles: { type: Array, required: true }
+});
+const { selection } = useBlokkli();
+const item = useTemplateRef("item");
+const bundleDisabled = computed(() => {
+  if (props.action.itemBundle) {
+    return !props.selectableBundles.includes(props.action.itemBundle);
+  }
+  return false;
+});
+const disabled = computed(() => {
+  if (bundleDisabled.value) {
+    return true;
+  }
+  if (props.action.enabled && selection.item.value) {
+    return !props.action.enabled(selection.item.value);
+  }
+  return false;
+});
+defineTourItem(() => {
+  if (!props.action.description) {
+    return;
+  }
+  return {
+    id: "plugin:add_action:" + props.action.id,
+    title: props.action.title,
+    text: props.action.description,
+    element: () => item.value?.getElement()
+  };
+});
+</script>

package/dist/runtime/components/Edit/Features/AddList/Actions/Action.vue.d.ts

@@ -0,0 +1,7 @@
+import type { AddAction } from '#blokkli/types';
+type __VLS_Props = {
+    action: AddAction;
+    selectableBundles: string[];
+};
+declare const _default: 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>;
+export default _default;

package/dist/runtime/components/Edit/Features/AddList/Actions/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <Sortli id="blokkli-add-list-actions" :build-item="buildItemAction">
+    <ActionButton
+      v-for="action in actions"
+      :key="action.id"
+      :action="action"
+      :selectable-bundles
+    />
+  </Sortli>
+</template>
+
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import { Sortli } from "#blokkli/components";
+import ActionButton from "./Action.vue";
+defineProps({
+  selectableBundles: { type: Array, required: true }
+});
+const { plugins } = useBlokkli();
+const actions = computed(() => {
+  return plugins.get("addAction");
+});
+function buildItemAction(element) {
+  const actionType = element.dataset.sortliId;
+  if (!actionType) {
+    return;
+  }
+  const itemBundle = element.dataset.itemBundle;
+  const action = actions.value.find((v) => v.id === actionType);
+  if (!action) {
+    return;
+  }
+  return {
+    itemType: "action",
+    action,
+    actionType,
+    itemBundle,
+    element: () => element
+  };
+}
+</script>

package/dist/runtime/components/Edit/Features/{Selection/OverlayFallback → AddList/Actions}/index.vue.d.ts

@@ -1,5 +1,5 @@
 type __VLS_Props = {
-    uuids: string[];
+    selectableBundles: string[];
 };
 declare const _default: 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>;
 export default _default;

package/dist/runtime/components/Edit/Features/{BlockAddList → AddList/Blocks}/index.vue

@@ -1,142 +1,75 @@
 <template>
-  <Teleport
-    v-if="selectableBundles.length && shouldRender"
-    :key="renderKey"
-    to="#blokkli-add-list-blocks"
-  >
+  <Sortli v-if="shouldRender" id="blokkli-add-list-blocks" :build-item>
     <AddListItem
       v-for="(type, i) in sortedList"
       v-show="type.isVisible"
       :id="type.id"
       :key="i + (type.id || 'undefined') + renderKey"
+      context="add-list-blocks"
       :label="type.label"
       :bundle="type.id"
-      :orientation="ui.addListOrientation.value"
       :disabled="type.isDisabled"
       :color="type.isFavorite ? 'yellow' : 'default'"
       data-element-type="new"
       :data-item-bundle="type.id"
     />
-    <PluginTourItem
-      id="block-add-list"
-      :title="$t('blockAddListTourTitle', 'Favorite blocks')"
-      :text="
+  </Sortli>
+
+  <PluginTourItem
+    v-if="shouldRender"
+    id="block-add-list"
+    :title="$t('blockAddListTourTitle', 'Favorite blocks')"
+    :text="
   $t(
     'blockAddListTourText',
     'Right-click on a block to add or remove them from your favorites. Favorites are highlighted and always displayed at the top of the list.'
   )
 "
-      selector="#blokkli-add-list-blocks"
-    />
-  </Teleport>
-  <Teleport
-    v-if="
-  ui.addListOrientation.value === 'sidebar' && types.generallyAvailableBundles.length > 10 && shouldRender
-"
-    :key="renderKey"
-    to="#blokkli-add-list-sidebar-before"
-  >
-    <div class="bk bk-list-sidebar-form">
-      <input
-        id="add_block_search"
-        v-model="searchText"
-        type="search"
-        class="bk-form-input"
-        :placeholder="$t('addListInputPlaceholder', 'Search available blocks')"
-        required
-      />
-    </div>
-  </Teleport>
+    selector="#blokkli-add-list-blocks"
+  />
 </template>
 
 <script setup>
-import {
-  ref,
-  computed,
-  useBlokkli,
-  defineBlokkliFeature,
-  nextTick
-} from "#imports";
-import { AddListItem } from "#blokkli/components";
+import { ref, computed, useBlokkli } from "#imports";
+import { AddListItem, Sortli } from "#blokkli/components";
 import defineCommands from "#blokkli/helpers/composables/defineCommands";
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 import { isInternalBundle } from "#blokkli/helpers/bundles";
 import { PluginTourItem } from "#blokkli/plugins";
-import { getFieldKey, onlyUnique } from "#blokkli/helpers";
-const { settings } = defineBlokkliFeature({
-  id: "block-add-list",
-  label: "Block Add List",
-  icon: "plus",
-  description: "Renders a list of block bundles that can be added to the current page.",
-  dependencies: ["add-list"],
-  screnshot: "feature-block-add-list.jpg",
-  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
-    }
-  }
+import { getFieldKey } from "#blokkli/helpers";
+import { itemEntityType } from "#blokkli-build/config";
+const props = defineProps({
+  hideDisabledBlocks: { type: Boolean, required: false },
+  selectableBundles: { type: Array, required: true },
+  generallyAvailableBundles: { type: Array, required: true }
 });
 const {
   selection,
   storage,
   types,
   context,
-  runtimeConfig,
   ui,
   eventBus,
   $t,
   state,
-  dom,
   definitions,
   blocks
 } = useBlokkli();
+function buildItem(element) {
+  const itemBundle = element.dataset.sortliId;
+  if (!itemBundle) {
+    return;
+  }
+  return {
+    itemType: "new",
+    itemBundle,
+    element: () => element
+  };
+}
 const shouldRender = computed(() => state.editMode.value === "editing");
 const searchText = ref("");
-const itemEntityType = runtimeConfig.itemEntityType;
 const favorites = storage.use("blockFavorites", []);
-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 || "");
-});
 function determineVisibility(bundle, label) {
-  if (ui.isMobile.value && !selectableBundles.value.includes(bundle)) {
+  if (ui.isMobile.value && !props.selectableBundles.includes(bundle)) {
     return false;
   }
   if (searchText.value && !label.toLowerCase().includes(searchText.value.toLowerCase())) {
@@ -150,13 +83,13 @@ function determineVisibility(bundle, label) {
   return true;
 }
 const sortedList = computed(() => {
-  return [...generallyAvailableBundles.value].filter((v) => !isInternalBundle(v.id)).map((v) => {
+  return [...props.generallyAvailableBundles].filter((v) => !isInternalBundle(v.id)).map((v) => {
     const isVisible = determineVisibility(v.id, v.label);
-    const isDisabled = !v.id || !selectableBundles.value.includes(v.id);
+    const isDisabled = !v.id || !props.selectableBundles.includes(v.id);
     return {
       ...v,
       isDisabled,
-      isVisible: isVisible && (!settings.value.hideDisabledBlocks || !isDisabled),
+      isVisible: isVisible && (!props.hideDisabledBlocks || !isDisabled),
       isFavorite: favorites.value.includes(v.id)
     };
   }).sort((a, b) => {
@@ -283,7 +216,7 @@ const getInsertCommands = (block) => {
       });
     }
   );
-  if (block.host.type === runtimeConfig.itemEntityType) {
+  if (block.host.type === itemEntityType) {
     const parentBlock = blocks.getBlock(block.host.uuid);
     if (parentBlock) {
       getInsertCommands(parentBlock).forEach((parentCommand) => {
@@ -333,15 +266,10 @@ defineCommands(() => {
     ...getAppendEndCommands()
   ];
 });
-onBlokkliEvent("add-list:change", () => {
-  nextTick(() => {
-    renderKey.value = Math.round(Math.random() * 1e9).toString();
-  });
-});
 </script>
 
 <script>
 export default {
-  name: "BlockAddList"
+  name: "AddListBlocks"
 };
 </script>

package/dist/runtime/components/Edit/Features/{Hover/Overlay → AddList/Blocks}/index.vue.d.ts

@@ -1,6 +1,11 @@
+import type { BlockBundleDefinition } from '#blokkli/types';
 declare const _default: import("vue").DefineComponent<{
-    gl: WebGLRenderingContext;
+    hideDisabledBlocks?: boolean;
+    selectableBundles: string[];
+    generallyAvailableBundles: BlockBundleDefinition[];
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
-    gl: WebGLRenderingContext;
+    hideDisabledBlocks?: boolean;
+    selectableBundles: string[];
+    generallyAvailableBundles: BlockBundleDefinition[];
 }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/Edit/Features/AddList/index.vue

@@ -1,43 +1,25 @@
 <template>
-  <PluginSidebar
-    v-if="isSidebar && shouldRender"
-    id="add_list"
-    :title="sidebarTitle"
-    :tour-text="tourText"
-    render-always
-    icon="plus"
-    weight="-10"
-    @updated="eventBus.emit('add-list:change')"
-  >
-    <div>
-      <div id="blokkli-add-list-sidebar-before" />
-      <Sortli class="bk bk-list-sidebar">
-        <div id="blokkli-add-list-blocks" />
-        <div id="blokkli-add-list-actions" />
-      </Sortli>
-    </div>
-  </PluginSidebar>
-  <Teleport v-else-if="shouldRender" to="body">
+  <Teleport v-if="shouldRender" :to="ui.mainLayoutElement.value">
     <div
       ref="wrapper"
       class="bk bk-add-list bk-control"
-      :class="[
-  { 'bk-is-active': isActive || hasContextMenuOpen },
-  'bk-is-' + ui.addListOrientation.value
-]"
-      :style="style"
       @wheel.capture.passive="onWheel"
       @mouseenter="onMouseEnter"
       @mouseleave="onMouseLeave"
     >
-      <Sortli class="bk-list">
-        <div id="blokkli-add-list-blocks" />
-        <div id="blokkli-add-list-actions" />
-      </Sortli>
+      <div
+        class="bk-add-list-inner"
+        :class="{
+  'bk-is-active': isActive
+}"
+      >
+        <AddListBlocks :selectable-bundles :generally-available-bundles />
+        <AddListActions :selectable-bundles />
+      </div>
     </div>
     <PluginTourItem
       id="add-blocks"
-      selector=".bk-list"
+      :element="wrapper"
       :title="sidebarTitle"
       :text="tourText"
     />
@@ -45,99 +27,97 @@
 </template>
 
 <script setup>
-import {
-  watch,
-  ref,
-  computed,
-  useBlokkli,
-  nextTick,
-  defineBlokkliFeature
-} from "#imports";
-import { Sortli } from "#blokkli/components";
-import { PluginSidebar, PluginTourItem } from "#blokkli/plugins";
-import { addElementClasses } from "#blokkli/helpers/addElementClasses";
-const { settings } = defineBlokkliFeature({
+import { ref, computed, useBlokkli, defineBlokkliFeature } from "#imports";
+import { PluginTourItem } from "#blokkli/plugins";
+import AddListBlocks from "./Blocks/index.vue";
+import AddListActions from "./Actions/index.vue";
+import { itemEntityType } from "#blokkli-build/config";
+import { onlyUnique } from "#blokkli/helpers";
+defineBlokkliFeature({
   id: "add-list",
   icon: "plus",
   label: "Add List",
   description: "Provides the container to render a list of blocks to add or add actions.",
   settings: {
-    orientation: {
-      type: "radios",
-      label: "Add List",
-      default: "vertical",
+    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",
-      viewports: ["desktop"],
-      options: {
-        vertical: {
-          label: "Vertical",
-          icon: "ui-list-vertical"
-        },
-        horizontal: {
-          label: "Horizontal",
-          icon: "ui-list-horizontal"
-        },
-        sidebar: {
-          label: "Sidebar",
-          icon: "ui-list-sidebar"
-        }
-      }
+      default: false
     }
   },
   screenshot: "feature-add-list.jpg"
 });
-const { state, $t, eventBus, ui, element } = useBlokkli();
-const hasContextMenuOpen = computed(
-  () => ui.openContextMenu.value.startsWith("add_list_item_")
+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 isSidebar = computed(() => ui.addListOrientation.value === "sidebar");
-const shouldRender = computed(() => state.editMode.value === "editing");
-watch(ui.addListOrientation, () => {
-  nextTick(() => {
-    eventBus.emit("add-list:change");
-  });
+const selectableBundles = computed(() => {
+  if (selection.items.value.length) {
+    return selection.items.value.flatMap((v) => getAllowedTypesForSelected(v));
+  }
+  return generallyAvailableBundles.value.map((v) => v.id || "");
 });
-const CLASS_LEFT = "bk-has-add-list-left";
-const CLASS_BOTTOM = "bk-has-add-list-bottom";
+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 = ref(null);
-const isActive = ref(false);
+const isHovered = ref(false);
 let mouseTimeout = null;
-const style = computed(() => {
-  if (settings.value.orientation === "vertical" && (isActive.value || hasContextMenuOpen.value) && wrapper.value) {
-    const widths = element.queryAll(
-      wrapper.value,
-      ".bk-list-item-label span",
-      "AddList vertical sidebar style",
-      (el) => el.offsetWidth
-    );
-    const largestWidth = Math.max(...widths);
-    return {
-      "--bk-add-list-width": largestWidth + 90
-    };
-  }
-  return void 0;
+const isActive = computed(() => {
+  return (isHovered.value || hasContextMenuOpen.value || tour.isTouring.value) && !selection.isDragging.value;
 });
 function onMouseEnter() {
-  clearTimeout(mouseTimeout);
+  if (mouseTimeout) {
+    clearTimeout(mouseTimeout);
+    isHovered.value = true;
+    return;
+  }
   mouseTimeout = setTimeout(() => {
-    isActive.value = true;
+    isHovered.value = true;
   }, 200);
 }
 function onMouseLeave() {
   clearTimeout(mouseTimeout);
-  isActive.value = false;
+  isHovered.value = false;
 }
 const onWheel = (e) => {
   if (e.ctrlKey || e.metaKey) {
     return;
   }
-  if (ui.addListOrientation.value === "horizontal" && e.deltaX) {
-    e.stopPropagation();
-    return;
-  }
-  if (ui.addListOrientation.value === "vertical" && e.deltaY) {
-    e.stopPropagation();
-  }
+  e.stopPropagation();
 };
 const sidebarTitle = computed(() => $t("addListSidebarTitle", "Add blocks"));
 const tourText = computed(
@@ -146,20 +126,6 @@ const tourText = computed(
     "<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>"
   )
 );
-addElementClasses(
-  document.documentElement,
-  CLASS_BOTTOM,
-  computed(
-    () => ui.addListOrientation.value === "horizontal" && shouldRender.value
-  )
-);
-addElementClasses(
-  document.documentElement,
-  CLASS_LEFT,
-  computed(
-    () => ui.addListOrientation.value === "vertical" && shouldRender.value
-  )
-);
 </script>
 
 <script>

package/dist/runtime/components/Edit/Features/Analyze/{Renderer.vue → Main.vue}

@@ -39,12 +39,9 @@
       <Results :results="resultsFiltered" />
     </div>
   </div>
-  <Overlay
-    v-if="
-  resultsFiltered.length && gl && animation.webglEnabled.value && !isStale
-"
+  <Renderer
+    v-if="resultsFiltered.length && !isStale"
     :results="resultsFiltered"
-    :gl="gl"
   />
 </template>
 
@@ -52,7 +49,7 @@
 import { computed, useBlokkli, useState, ref } from "#imports";
 import Results from "./Results/Results.vue";
 import AnalyzeSummary from "./Summary/index.vue";
-import Overlay from "./Overlay/index.vue";
+import Renderer from "./Renderer/index.vue";
 import { useAnalyzeHelper } from "./helper";
 import { FormSelect, RelativeTime } from "#blokkli/components";
 import { AnalyzerContext } from "./analyzers/helpers/Context";
@@ -64,9 +61,8 @@ const props = defineProps({
   analyzers: { type: Array, required: true }
 });
 const ALL = "ALL";
-const { $t, ui, state, animation } = useBlokkli();
+const { $t, ui, state } = useBlokkli();
 const { getCategoryLabel } = useAnalyzeHelper();
-const gl = animation.gl();
 const currentPlugin = ref("readability");
 const hasRunOnce = useState(() => false);
 const results = useState("blokkli:analyze", () => []);

package/dist/runtime/components/Edit/Features/Analyze/{Overlay → Renderer}/fragment.glsl

@@ -1,10 +1,14 @@
+#version 300 es
+
 precision highp float;
 
-varying vec4 v_quad;
-varying float v_rect_type;
-varying vec3 v_color;
-varying vec2 v_rect_size;
-varying vec2 v_rect_center;
+in vec4 v_quad;
+in float v_rect_type;
+in vec3 v_color;
+in vec2 v_rect_size;
+in vec2 v_rect_center;
+
+out vec4 fragColor;
 
 uniform float u_dpi;
 
@@ -54,5 +58,5 @@ void main() {
   // Mix with border
   vec4 finalColor = mix(res_with_fill, border, borderAlpha * border.a);
 
-  gl_FragColor = finalColor;
+  fragColor = finalColor;
 }