@blokkli/editor 2.0.0-alpha.2 → 2.0.0-alpha.21

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

@@ -0,0 +1,96 @@
+<template>
+  <PluginItemAction
+    id="block-scheduler"
+    :title="$t('manageSchedule', 'Manage schedule...')"
+    :disabled
+    multiple
+    edit-only
+    meta
+    :weight="1e3"
+    :class="{
+  'bk-has-schedule': selectionHasDates
+}"
+    @click="onClick"
+  >
+    <template #icon>
+      <div class="bk-schedule-action-icon">
+        <Icon name="calendar" class="bk-item-action-icon" />
+        <Icon
+          v-if="selectionHasDates"
+          name="check"
+          class="bk-schedule-action-icon-check"
+        />
+      </div>
+    </template>
+  </PluginItemAction>
+  <Teleport to="body">
+    <BlokkliTransition name="slide-up">
+      <SchedulerDialog
+        v-if="isVisible"
+        :uuids="selectedUuids"
+        :bundles-with-publish="bundlesWithPublish"
+        :bundles-with-unpublish="bundlesWithUnpublish"
+        @close="onClose"
+      />
+    </BlokkliTransition>
+  </Teleport>
+</template>
+
+<script setup>
+import { useBlokkli, defineBlokkliFeature, computed, ref } from "#imports";
+import { PluginItemAction } from "#blokkli/plugins";
+import { BlokkliTransition, Icon } from "#blokkli/components";
+import SchedulerDialog from "./Dialog/index.vue";
+defineBlokkliFeature({
+  id: "block-scheduler",
+  icon: "calendar",
+  label: "Block Scheduler",
+  description: "Adds support for scheduling blocks.",
+  requiredAdapterMethods: ["setBlockScheduleDate"]
+});
+const { $t, state, selection, types } = useBlokkli();
+const bundlesWithPublish = computed(
+  () => types.generallyAvailableBundles.filter((v) => v.hasPublishOn).map((v) => v.id)
+);
+const bundlesWithUnpublish = computed(
+  () => types.generallyAvailableBundles.filter((v) => v.hasUnpublishOn).map((v) => v.id)
+);
+const selectedUuids = ref([]);
+const isVisible = computed(() => {
+  return !!selectedUuids.value.length;
+});
+const selectionHasDates = computed(() => {
+  for (let i = 0; i < selection.uuids.value.length; i++) {
+    const uuid = selection.uuids.value[i];
+    if (!uuid) {
+      continue;
+    }
+    const block = state.getFieldListItem(uuid);
+    if (!block) {
+      continue;
+    }
+    if (block.editContext?.publishOn || block.editContext?.unpublishOn) {
+      return true;
+    }
+  }
+  return false;
+});
+const disabled = computed(() => {
+  const hasSupport = selection.bundles.value.some(
+    (bundle) => bundlesWithPublish.value.includes(bundle) || bundlesWithUnpublish.value.includes(bundle)
+  );
+  return !hasSupport;
+});
+function onClick() {
+  selectedUuids.value = [...selection.uuids.value];
+}
+function onClose() {
+  selectedUuids.value = [];
+}
+</script>
+
+<script>
+export default {
+  name: "BlockScheduler"
+};
+</script>

package/dist/runtime/components/Edit/Features/BlockScheduler/index.vue.d.ts

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

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

@@ -14,10 +14,10 @@
     icon="clipboard"
     weight="-30"
   >
-    <div class="bk-clipboard bk-control">
+    <div class="bk bk-clipboard bk-control">
       <div
         v-if="!pastedItems.length"
-        class="bk bk-clipboard-info bk-sidebar-padding"
+        class="bk-clipboard-info bk-sidebar-padding"
       >
         <h4>{{ $t("clipboardEmpty", "No items in the clipboard") }}</h4>
         <div
@@ -63,6 +63,16 @@
       </div>
     </div>
   </PluginSidebar>
+  <PluginItemDropdown
+    id="clipboard"
+    :title="$t('clipboard', 'Clipboard')"
+    :enabled="
+  !!selection.items.value.length && state.editMode.value === 'editing'
+"
+    :items="itemDropdownItems"
+    icon="clipboard"
+    @select="onSelectDropdownItem"
+  />
 </template>
 
 <script setup>
@@ -71,15 +81,18 @@ import {
   ref,
   useBlokkli,
   onMounted,
-  onUnmounted
+  onUnmounted,
+  computed
 } from "#imports";
-import { PluginSidebar } from "#blokkli/plugins";
+import { PluginSidebar, PluginItemDropdown } from "#blokkli/plugins";
 import ClipboardList from "./List/index.vue";
-import { falsy, generateUUID, getFieldKey } from "#blokkli/helpers";
+import { generateUUID, getFieldKey } from "#blokkli/helpers";
 import { Icon } from "#blokkli/components";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 import defineShortcut from "#blokkli/helpers/composables/defineShortcut";
 import getVideoId from "get-video-id";
+import { emitMessage } from "#blokkli/helpers/eventBus";
+import { itemEntityType } from "#blokkli-build/config";
 const { settings, logger } = defineBlokkliFeature({
   id: "clipboard",
   label: "Clipboard",
@@ -96,8 +109,36 @@ const { settings, logger } = defineBlokkliFeature({
   },
   screenshot: "feature-clipboard.jpg"
 });
-const { selection, $t, adapter, dom, state, ui, types } = useBlokkli();
+const { selection, $t, adapter, state, ui, types, keyboard, blocks } = useBlokkli();
 const plugin = ref(null);
+const selectionClipboard = ref([]);
+const itemDropdownItems = computed(() => {
+  return [
+    {
+      id: "copy",
+      label: $t("copy", "Copy"),
+      icon: "copy",
+      description: $t("clipboardCopyShortcutHelp", "Copy selected blocks")
+    },
+    {
+      id: "paste",
+      label: $t("paste", "Paste"),
+      enabled: !!selectionClipboard.value.length,
+      icon: "clipboard",
+      description: $t(
+        "clipboardPasteDescription",
+        "Paste blocks from clipboard"
+      )
+    }
+  ];
+});
+function onSelectDropdownItem(item) {
+  if (item.id === "copy") {
+    copyCurrentSelectionToClipboard();
+  } else if (item.id === "paste" && selectionClipboard.value.length) {
+    handleSelectionPaste(selectionClipboard.value);
+  }
+}
 const ALLOWED_HTML_ATTRIBUTES = ["href"];
 const _MOCK = [
   {
@@ -230,50 +271,136 @@ const showClipboardSidebar = () => {
     plugin?.value?.showSidebar();
   }
 };
+function emitPasteError(message) {
+  const prefix = $t("clipboardPasteError", "Failed to paste:");
+  emitMessage(`${prefix} ${message}`, "error");
+}
 const handleSelectionPaste = (pastedUuids) => {
   if (!adapter.pasteExistingBlocks) {
     return;
   }
   if (selection.uuids.value.length !== 1) {
+    emitPasteError(
+      $t(
+        "clipboardPasteErrorOneField",
+        "Pasting is only possible into one field at a time."
+      )
+    );
     return;
   }
   if (!pastedUuids.length) {
     return;
   }
-  const block = selection.blocks.value[0];
+  const block = selection.items.value[0];
   if (!block) {
     return;
   }
-  const field = state.getMutatedField(block.hostUuid, block.hostFieldName);
-  if (!field) {
-    return;
+  let targetField = null;
+  let targetFieldConfig = null;
+  let targetFieldKey = null;
+  let preceedingUuid = void 0;
+  if (!keyboard.isPressingShift.value) {
+    const pastedBundles = pastedUuids.map((uuid) => blocks.getBlock(uuid)?.bundle).filter((bundle) => !!bundle);
+    if (pastedBundles.length) {
+      const nestedFields = types.fieldConfig.forEntityTypeAndBundle(
+        itemEntityType,
+        block.bundle
+      );
+      for (const fieldConfig of nestedFields) {
+        const allowedPastedBundles = pastedBundles.filter(
+          (bundle) => fieldConfig.allowedBundles.includes(bundle)
+        );
+        if (allowedPastedBundles.length > 0) {
+          const nestedFieldKey = getFieldKey(block.uuid, fieldConfig.name);
+          const currentCount = state.getFieldBlockCount(nestedFieldKey);
+          if (fieldConfig.cardinality === -1 || currentCount + allowedPastedBundles.length <= fieldConfig.cardinality) {
+            targetField = {
+              entityType: itemEntityType,
+              entityUuid: block.uuid,
+              name: fieldConfig.name
+            };
+            targetFieldConfig = fieldConfig;
+            targetFieldKey = nestedFieldKey;
+            preceedingUuid = void 0;
+            break;
+          }
+        }
+      }
+    }
   }
-  const fieldConfig = types.getFieldConfig(
-    field.entityType,
-    block.hostBundle,
-    field.name
-  );
-  if (!fieldConfig) {
-    return;
+  if (!targetField || !targetFieldConfig || !targetFieldKey) {
+    const field = state.getMutatedField(block.host.uuid, block.host.fieldName);
+    if (!field) {
+      return;
+    }
+    const fieldConfig = types.getFieldConfig(
+      field.entityType,
+      block.host.bundle,
+      field.name
+    );
+    if (!fieldConfig) {
+      return;
+    }
+    targetField = {
+      entityType: field.entityType,
+      entityUuid: field.entityUuid,
+      name: field.name
+    };
+    targetFieldConfig = fieldConfig;
+    targetFieldKey = getFieldKey(field.entityUuid, field.name);
+    preceedingUuid = selection.uuids.value[0];
+  }
+  const pastedBlocks = [];
+  const notAllowedBundles = [];
+  for (let i = 0; i < pastedUuids.length; i++) {
+    const uuid = pastedUuids[i];
+    if (!uuid) {
+      continue;
+    }
+    const block2 = blocks.getBlock(uuid);
+    if (!block2) {
+      continue;
+    }
+    const isAllowed = targetFieldConfig.allowedBundles.includes(block2.bundle);
+    if (!isAllowed) {
+      notAllowedBundles.push(block2.bundle);
+      continue;
+    }
+    pastedBlocks.push(block2);
   }
-  const fieldKey = getFieldKey(field.entityUuid, field.name);
-  const pastedBlocks = pastedUuids.map((uuid) => dom.findBlock(uuid)).filter(falsy).filter((block2) => fieldConfig.allowedBundles.includes(block2.itemBundle));
   if (!pastedBlocks.length) {
+    const blockTypes = notAllowedBundles.map((bundle) => {
+      return types.getBlockBundleDefinition(bundle)?.label ?? bundle;
+    });
+    const message = blockTypes.length === 1 ? $t(
+      "clipboardPasteErrorAllowedBundlesSingle",
+      'Block type "@types" is not allowed here.'
+    ) : $t(
+      "clipboardPasteErrorAllowedBundlesMultiple",
+      "Block types (@types) are not allowed here."
+    );
+    emitPasteError(message.replace("@types", blockTypes.join(", ")));
     return;
   }
-  const count = state.getFieldBlockCount(fieldKey);
-  if (fieldConfig.cardinality !== -1 && count + pastedBlocks.length > fieldConfig.cardinality) {
+  const count = state.getFieldBlockCount(targetFieldKey);
+  if (targetFieldConfig.cardinality !== -1 && count + pastedBlocks.length > targetFieldConfig.cardinality) {
+    emitPasteError(
+      $t(
+        "clipboardPasteErrorCardinality",
+        "This field only allows up to @count blocks."
+      ).replace("@count", targetFieldConfig.cardinality.toString())
+    );
     return;
   }
   state.mutateWithLoadingState(
     () => adapter.pasteExistingBlocks({
       uuids: pastedBlocks.map((v) => v.uuid),
       host: {
-        type: field.entityType,
-        uuid: field.entityUuid,
-        fieldName: field.name
+        type: targetField.entityType,
+        uuid: targetField.entityUuid,
+        fieldName: targetField.name
       },
-      preceedingUuid: selection.uuids.value[0]
+      preceedingUuid
     })
   );
 };
@@ -291,27 +418,26 @@ function onPaste(e, fromInput) {
     return;
   }
   const clipboardData = e.clipboardData;
-  if (clipboardData?.files.length) {
-    return handleFiles(clipboardData);
-  }
-  let pastedData = clipboardData?.getData("text/html");
-  if (!pastedData) {
-    pastedData = clipboardData?.getData("text");
-  }
-  if (!pastedData) {
+  if (!clipboardData) {
     return;
   }
-  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 pastedData = clipboardData.getData("text/html") || clipboardData.getData("text/plain") || clipboardData.getData("text");
+  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);
+        }
+      } catch (_e) {
       }
-    } catch (_e) {
     }
+    handlePastedText(pastedData);
+  }
+  if (clipboardData.files.length) {
+    return handleFiles(clipboardData);
   }
-  handlePastedText(pastedData);
 }
 const handlePastedText = (text) => {
   if (!adapter.clipboardMapBundle) {
@@ -372,16 +498,21 @@ function setClipboard(text) {
   } catch (_e) {
   }
 }
-onBlokkliEvent("keyPressed", (e) => {
-  if (!selection.blocks.value.length) {
-    return;
-  }
-  if (e.code !== "c" || !e.meta) {
+function copyCurrentSelectionToClipboard() {
+  if (!selection.items.value.length) {
+    selectionClipboard.value = [];
     return;
   }
   setClipboard(
     JSON.stringify({ type: "selection", uuids: selection.uuids.value })
   );
+  selectionClipboard.value = selection.uuids.value;
+}
+onBlokkliEvent("keyPressed", (e) => {
+  if (e.code !== "c" || !e.meta || ui.hasDialogOpen.value) {
+    return;
+  }
+  copyCurrentSelectionToClipboard();
 });
 defineShortcut([
   {

package/dist/runtime/components/Edit/Features/CommandPalette/Palette/Item/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <button
+    ref="buttonEl"
+    :data-command-id="item.id"
+    :data-command-visible="true"
+    class="bk-command"
+    :class="{ 'bk-is-focused': isFocused }"
+    @mouseenter="$emit('focus', index)"
+    @click.prevent="$emit('select', item.id)"
+  >
+    <div class="bk-command-icon">
+      <Icon v-if="item.icon" :name="item.icon" />
+      <ItemIcon v-else :bundle="item.bundle" />
+    </div>
+    <Highlight :text="item.label" tag="span" :positions="item.positions" />
+    <div class="bk-command-group">{{ getGroupLabel(item.group) }}</div>
+  </button>
+</template>
+
+<script setup>
+import { watch, useBlokkli, useTemplateRef } from "#imports";
+import { Icon, ItemIcon, Highlight } from "#blokkli/components";
+const props = defineProps({
+  item: { type: Object, required: true },
+  index: { type: Number, required: true },
+  isFocused: { type: Boolean, required: true }
+});
+defineEmits(["focus", "select"]);
+const { $t } = useBlokkli();
+const buttonEl = useTemplateRef("buttonEl");
+watch(
+  () => props.isFocused,
+  (focused) => {
+    if (focused && buttonEl.value) {
+      buttonEl.value.scrollIntoView({ block: "nearest", inline: "nearest" });
+    }
+  }
+);
+const getGroupLabel = (id) => {
+  if (id === "ui") {
+    return $t("commandGroup.ui", "Interface");
+  } else if (id === "add") {
+    return $t("commandGroup.add", "Add new");
+  } else if (id === "action") {
+    return $t("commandGroup.action", "Actions");
+  } else if (id === "selection") {
+    return $t("commandGroup.selection", "Selection");
+  }
+  return $t("commandGroup.misc", "Miscellaneous");
+};
+</script>

package/dist/runtime/components/Edit/Features/CommandPalette/Palette/Item/index.vue.d.ts

@@ -0,0 +1,17 @@
+import type { Command } from '#blokkli/types';
+type __VLS_Props = {
+    item: Command & {
+        _id: number;
+        positions?: number[];
+    };
+    index: number;
+    isFocused: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: (id: string) => any;
+    focus: (index: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((id: string) => any) | undefined;
+    onFocus?: ((index: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;