@blokkli/editor 2.0.0-alpha.35 → 2.0.0-alpha.37

package/dist/runtime/editor/features/options/Form/Number/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="bk-blokkli-item-options-number">
-    <button :disabled="numeric <= min" @click.stop.prevent="decrement">
+    <button :disabled="modelValue <= min" @click.stop.prevent="decrement">
       <Icon name="bk_mdi_remove" />
     </button>
     <input
@@ -13,7 +13,7 @@
 }"
     />
 
-    <button :disabled="numeric >= max" @click.stop.prevent="increment">
+    <button :disabled="modelValue >= max" @click.stop.prevent="increment">
       <Icon name="bk_mdi_add" />
     </button>
   </div>
@@ -24,7 +24,7 @@ import { computed } from "#imports";
 import { Icon } from "#blokkli/editor/components";
 const props = defineProps({
   label: { type: String, required: true },
-  modelValue: { type: String, required: false, default: "0" },
+  modelValue: { type: Number, required: false, default: 0 },
   min: { type: Number, required: true },
   max: { type: Number, required: true },
   type: { type: String, required: false, default: "text" }
@@ -33,27 +33,17 @@ const width = computed(() => props.max.toString().length * 30);
 const emit = defineEmits(["update:modelValue"]);
 const text = computed({
   get() {
-    return props.modelValue;
+    return String(props.modelValue);
   },
   set(v) {
-    emit("update:modelValue", (v === void 0 ? "" : v).toString());
+    emit("update:modelValue", Number(v) || 0);
   }
 });
-const numeric = computed(() => {
-  if (props.modelValue === void 0) {
-    return 0;
-  }
-  const v = Number.parseInt(props.modelValue);
-  if (Number.isNaN(v)) {
-    return 0;
-  }
-  return v;
-});
 function increment() {
-  text.value = (numeric.value + 1).toString();
+  emit("update:modelValue", props.modelValue + 1);
 }
 function decrement() {
-  text.value = (numeric.value - 1).toString();
+  emit("update:modelValue", props.modelValue - 1);
 }
 </script>
 

package/dist/runtime/editor/features/options/Form/Number/index.vue.d.ts

@@ -2,7 +2,7 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
     label: string;
-    modelValue?: string;
+    modelValue?: number;
     min: number;
     max: number;
     type?: string;
@@ -10,7 +10,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<{
     label: string;
-    modelValue?: string;
+    modelValue?: number;
     min: number;
     max: number;
     type?: string;
@@ -18,5 +18,5 @@ declare const __VLS_export: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
     type: string;
-    modelValue: string;
+    modelValue: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/features/options/Form/Range/index.d.vue.ts

@@ -2,7 +2,7 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
     label: string;
-    modelValue?: string;
+    modelValue?: number;
     min: number;
     max: number;
     step: number;
@@ -10,7 +10,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<{
     label: string;
-    modelValue?: string;
+    modelValue?: number;
     min: number;
     max: number;
     step: number;

package/dist/runtime/editor/features/options/Form/Range/index.vue

@@ -9,7 +9,7 @@
 import { computed } from "#imports";
 const props = defineProps({
   label: { type: String, required: true },
-  modelValue: { type: String, required: false },
+  modelValue: { type: Number, required: false },
   min: { type: Number, required: true },
   max: { type: Number, required: true },
   step: { type: Number, required: true }
@@ -17,14 +17,14 @@ const props = defineProps({
 const emit = defineEmits(["update:modelValue"]);
 const text = computed({
   get() {
-    return props.modelValue || "0";
+    return String(props.modelValue ?? 0);
   },
   set(v) {
-    emit("update:modelValue", (v === void 0 ? "" : v).toString());
+    emit("update:modelValue", Number(v) || 0);
   }
 });
 const formatted = computed(() => {
-  const numValue = typeof text.value === "string" ? Number.parseFloat(text.value) : text.value;
+  const numValue = props.modelValue ?? 0;
   const stepPrecision = (props.step.toString().split(".")[1] || "").length;
   return numValue.toFixed(stepPrecision);
 });

package/dist/runtime/editor/features/options/Form/Range/index.vue.d.ts

@@ -2,7 +2,7 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
     label: string;
-    modelValue?: string;
+    modelValue?: number;
     min: number;
     max: number;
     step: number;
@@ -10,7 +10,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<{
     label: string;
-    modelValue?: string;
+    modelValue?: number;
     min: number;
     max: number;
     step: number;

package/dist/runtime/editor/features/options/Form/index.vue

@@ -12,6 +12,7 @@
       :option="plugin.option"
       :property="plugin.property"
       :mutated-value="currentValues[plugin.property]"
+      :uuid="firstUuid"
       class="bk-blokkli-item-options-item"
       :class="{
   'bk-is-disabled': isDisabled(plugin)
@@ -33,6 +34,7 @@
         :option="plugin.option"
         :property="plugin.property"
         :mutated-value="currentValues[plugin.property]"
+        :uuid="firstUuid"
         class="bk-blokkli-item-options-item"
         :class="{
   'bk-is-disabled': isDisabled(plugin)
@@ -88,6 +90,9 @@ const props = defineProps({
   uuids: { type: [Array, String], required: true },
   definition: { type: null, required: true }
 });
+const firstUuid = computed(
+  () => Array.isArray(props.uuids) ? props.uuids[0] : void 0
+);
 let pointerTimeout = null;
 let mouseLeaveTimeout = null;
 function onMouseLeave() {
@@ -266,21 +271,26 @@ const optionGroups = computed(() => {
   );
 });
 function setOptionValue(key, value) {
+  const optionDef = availableOptions.value.find((o) => o.property === key);
+  const storable = optionDef ? optionValueToStorable(
+    optionDef.option,
+    value
+  ) : String(value);
   if (Array.isArray(props.uuids)) {
     props.uuids.forEach((uuid) => {
-      updated.set(uuid, key, value);
+      updated.set(uuid, key, storable);
       if (!state.mutatedOptions[uuid]) {
         state.mutatedOptions[uuid] = {};
       }
-      state.mutatedOptions[uuid][key] = value;
-      eventBus.emit("option:update", { uuid, key, value });
+      state.mutatedOptions[uuid][key] = storable;
+      eventBus.emit("option:update", { uuid, key, value: storable });
     });
   } else {
-    updated.set("HOST", key, value);
+    updated.set("HOST", key, storable);
     if (!state.mutatedOptions.HOST) {
       state.mutatedOptions.HOST = {};
     }
-    state.mutatedOptions.HOST[key] = value;
+    state.mutatedOptions.HOST[key] = storable;
   }
 }
 onMounted(() => {

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

@@ -45,7 +45,11 @@ import {
 import Overlay from "./Overlay/index.vue";
 import { BlokkliTransition } from "#blokkli/editor/components";
 import { PluginToolbarButton } from "#blokkli/editor/plugins";
-import { onBlokkliEvent, defineDropAreas } from "#blokkli/editor/composables";
+import {
+  onBlokkliEvent,
+  defineDropAreas,
+  defineDropHandler
+} from "#blokkli/editor/composables";
 import { falsy } from "#blokkli/helpers";
 import { itemEntityType } from "#blokkli-build/config";
 defineBlokkliFeature({
@@ -108,6 +112,26 @@ defineDropAreas((dragItems) => {
     };
   }).filter(falsy);
 });
+defineDropHandler("search_content", {
+  resolveBundles({ items, field }) {
+    const item = items[0];
+    return field.allowedBundles.filter((b) => item.itemBundles.includes(b));
+  },
+  async execute({ items, host, afterUuid, bundle }) {
+    if (!adapter.addContentSearchItem) {
+      throw new Error('Adapter does not implement "addContentSearchItem".');
+    }
+    const item = items[0];
+    await state.mutateWithLoadingState(
+      () => adapter.addContentSearchItem({
+        item: item.searchItem,
+        host,
+        bundle,
+        afterUuid
+      })
+    );
+  }
+});
 const isRendered = ref(false);
 const isVisible = ref(false);
 const overlay = useTemplateRef("overlay");

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

@@ -231,7 +231,7 @@ function selectInList(prev) {
   }
 }
 onBlokkliEvent("keyPressed", (e) => {
-  if (selection.isDragging.value || selection.isMultiSelecting.value || ui.hasDialogOpen.value || ui.hasTooltipOpen.value) {
+  if (selection.isDragging.value || selection.isMultiSelecting.value || ui.hasDialogOpen.value || ui.hasTooltipOpen.value || ui.hasNestedEditorOpen.value) {
     return;
   }
   if (e.code === "Escape") {
@@ -240,7 +240,7 @@ onBlokkliEvent("keyPressed", (e) => {
       eventBus.emit("select:host:unselect");
     }
   } else if (e.code === "Tab") {
-    if (tour.isTouring.value || ui.hasDialogOpen.value) {
+    if (tour.isTouring.value || ui.hasDialogOpen.value || ui.hasNestedEditorOpen.value) {
       return;
     }
     e.originalEvent.preventDefault();

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

@@ -40,13 +40,37 @@ import {
 import { PluginSidebar } from "#blokkli/editor/plugins";
 import { ScrollBoundary } from "#blokkli/editor/components";
 import List from "./List/index.vue";
+import { defineDropHandler } from "#blokkli/editor/composables";
 defineBlokkliFeature({
   id: "structure",
   icon: "bk_mdi_account_tree",
   label: "Structure",
   description: "Provides a sidebar button to render a structured list of all blocks on the current page."
 });
-const { $t, context } = useBlokkli();
+const { $t, context, adapter, state, dom, ui, eventBus } = useBlokkli();
+defineDropHandler("existing_structure", {
+  async execute({ items, host, afterUuid }) {
+    const uuids = items.map((v) => v.block.uuid);
+    await state.mutateWithLoadingState(
+      () => adapter.moveMultipleBlocks({
+        uuids,
+        afterUuid,
+        host
+      })
+    );
+    if (uuids.length >= 1 && uuids.length <= 10) {
+      for (let i = 0; i < uuids.length; i++) {
+        dom.refreshBlockRect(uuids[i]);
+      }
+    }
+    if (ui.isMobile.value && uuids.length) {
+      eventBus.emit("scrollIntoView", {
+        uuid: uuids[0],
+        center: true
+      });
+    }
+  }
+});
 const isLoaded = ref(false);
 const visibleFieldKeys = reactive({});
 const observer = new IntersectionObserver(function(entries) {

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

@@ -1,29 +1,39 @@
 <template>
-  <Overlay v-if="tour.isTouring.value" @close="close" />
-  <Popup v-if="showTourPopup" @close="close" @start="start" />
+  <Overlay v-if="tour.isTouring.value" @close="stopTour" />
+  <Popup
+    id="tour"
+    theme="warning"
+    position="top-left"
+    :title="$t('tourLabel', 'Take a tour')"
+    :text="
+  $t(
+    'tourIntro',
+    'Explore the most important features of the editor and learn how to get started using bl\xF6kkli.'
+  )
+"
+    :cta="$t('tourStartButton', 'Start the tour')"
+    @submit="startTour"
+  />
 </template>
 
 <script setup>
 import { defineBlokkliFeature, useBlokkli } from "#imports";
 import Overlay from "./Overlay/index.vue";
-import Popup from "./Popup/index.vue";
 import { defineMenuButton } from "#blokkli/editor/composables";
+import { Popup } from "#blokkli/editor/components";
 defineBlokkliFeature({
   id: "tour",
   label: "Tour",
   icon: "bk_mdi_school-fill",
   description: "Provides a tour overlay to get to know the editor."
 });
-const { tour, $t, storage } = useBlokkli();
-const showTourPopup = storage.use("showTourPopup", true);
-const start = () => {
-  showTourPopup.value = false;
+const { tour, $t } = useBlokkli();
+function startTour() {
   tour.isTouring.value = true;
-};
-const close = () => {
-  showTourPopup.value = false;
+}
+function stopTour() {
   tour.isTouring.value = false;
-};
+}
 defineMenuButton(() => {
   return {
     id: "tour",
@@ -32,7 +42,7 @@ defineMenuButton(() => {
     icon: "bk_mdi_school-fill",
     secondary: true,
     weight: -10,
-    callback: start
+    callback: startTour
   };
 });
 </script>

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

@@ -118,9 +118,7 @@ function cancelTransform() {
 }
 watch(selection.uuids, async () => {
   if (status.value === "idle") {
-    execute().then(() => {
-      console.log(plugins.value);
-    });
+    await execute();
   }
 });
 watch(selection.hasHostSelected, () => {

package/dist/runtime/editor/helpers/clipboardData/index.d.ts

@@ -0,0 +1,11 @@
+export declare class ClipboardData {
+    private html;
+    private text;
+    constructor(data: DataTransfer);
+    hasHtml(): boolean;
+    hasText(): boolean;
+    /** Returns markdown converted from HTML, falling back to plain text. */
+    toMarkdown(): string;
+    /** Returns the raw plain text. */
+    toText(): string;
+}

package/dist/runtime/editor/helpers/clipboardData/index.js

@@ -0,0 +1,157 @@
+function convertNode(node) {
+  if (node.nodeType === Node.TEXT_NODE) {
+    return node.textContent || "";
+  }
+  if (node.nodeType !== Node.ELEMENT_NODE) {
+    return "";
+  }
+  const el = node;
+  const tag = el.tagName.toLowerCase();
+  const children = Array.from(el.childNodes).map(convertNode).join("");
+  switch (tag) {
+    case "br":
+      return "\n";
+    case "p":
+    case "div":
+      return children + "\n\n";
+    case "strong":
+    case "b":
+      return `**${children}**`;
+    case "em":
+    case "i":
+      return `*${children}*`;
+    case "del":
+    case "s":
+      return `~~${children}~~`;
+    case "code":
+      if (el.parentElement?.tagName.toLowerCase() === "pre") {
+        return children;
+      }
+      return `\`${children}\``;
+    case "pre": {
+      const codeEl = el.querySelector("code");
+      const content = codeEl ? convertNode(codeEl) : children;
+      return `
+\`\`\`
+${content}
+\`\`\`
+`;
+    }
+    case "h1":
+      return `# ${children}
+
+`;
+    case "h2":
+      return `## ${children}
+
+`;
+    case "h3":
+      return `### ${children}
+
+`;
+    case "h4":
+      return `#### ${children}
+
+`;
+    case "h5":
+      return `##### ${children}
+
+`;
+    case "h6":
+      return `###### ${children}
+
+`;
+    case "a": {
+      const href = el.getAttribute("href");
+      return href ? `[${children}](${href})` : children;
+    }
+    case "ul":
+    case "ol":
+      return "\n" + children + "\n";
+    case "li": {
+      const parent = el.parentElement;
+      if (parent?.tagName.toLowerCase() === "ol") {
+        const index = Array.from(parent.children).indexOf(el) + 1;
+        return `${index}. ${children.trim()}
+`;
+      }
+      return `- ${children.trim()}
+`;
+    }
+    case "blockquote":
+      return children.trim().split("\n").map((line) => `> ${line}`).join("\n") + "\n";
+    case "table": {
+      const rows = [];
+      el.querySelectorAll("tr").forEach((tr) => {
+        const cells = [];
+        tr.querySelectorAll("td, th").forEach((cell) => {
+          cells.push(convertNode(cell).replace(/\n/g, " ").trim());
+        });
+        if (cells.length) {
+          rows.push(cells);
+        }
+      });
+      if (!rows.length) return "";
+      const colCount = Math.max(...rows.map((r) => r.length));
+      const colWidths = Array.from(
+        { length: colCount },
+        (_, i) => Math.max(3, ...rows.map((r) => (r[i] || "").length))
+      );
+      const formatRow = (cells) => "| " + colWidths.map((w, i) => (cells[i] || "").padEnd(w)).join(" | ") + " |";
+      const separator = "| " + colWidths.map((w) => "-".repeat(w)).join(" | ") + " |";
+      const [header, ...body] = rows;
+      if (!header) return "";
+      const lines = [formatRow(header), separator];
+      for (const row of body) {
+        lines.push(formatRow(row));
+      }
+      return "\n" + lines.join("\n") + "\n";
+    }
+    case "thead":
+    case "tbody":
+    case "tfoot":
+    case "colgroup":
+    case "col":
+    case "tr":
+    case "td":
+    case "th":
+    case "caption":
+      return children;
+    case "hr":
+      return "\n---\n";
+    case "style":
+    case "script":
+      return "";
+    default:
+      return children;
+  }
+}
+function htmlToMarkdown(html) {
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  return convertNode(doc.body).replace(/\n{3,}/g, "\n\n").trim();
+}
+export class ClipboardData {
+  html;
+  text;
+  constructor(data) {
+    this.html = data.getData("text/html");
+    this.text = data.getData("text/plain");
+  }
+  hasHtml() {
+    return !!this.html;
+  }
+  hasText() {
+    return !!this.text;
+  }
+  /** Returns markdown converted from HTML, falling back to plain text. */
+  toMarkdown() {
+    if (this.html) {
+      return htmlToMarkdown(this.html);
+    }
+    return this.text;
+  }
+  /** Returns the raw plain text. */
+  toText() {
+    return this.text;
+  }
+}

package/dist/runtime/editor/helpers/options/index.js

@@ -55,6 +55,11 @@ export function optionValueToStorable(definition, value) {
     if (typeof value === "string") {
       return value;
     }
+  } else if (definition.type === "json") {
+    if (typeof value === "string") {
+      return value;
+    }
+    return JSON.stringify(value);
   }
   return "";
 }

package/dist/runtime/editor/icons/svg/stars.svg

@@ -1 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19,1L17.74,3.75L15,5L17.74,6.26L19,9L20.25,6.26L23,5L20.25,3.75M9,4L6.5,9.5L1,12L6.5,14.5L9,20L11.5,14.5L17,12L11.5,9.5M19,15L17.74,17.74L15,19L17.74,20.25L19,23L20.25,20.25L23,19L20.25,17.74" /></svg>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M19 15L17.74 17.74L15 19L17.74 20.25L19 23L20.25 20.25L23 19L20.25 17.74" />
+  <path d="M9 4L6.5 9.5L1 12L6.5 14.5L9 20L11.5 14.5L17 12L11.5 9.5" />
+  <path d="M19 1L17.74 3.75L15 5L17.74 6.26L19 9L20.25 6.26L23 5L20.25 3.75" />
+</svg>

package/dist/runtime/editor/plugins/Sidebar/Detached/index.d.vue.ts

@@ -34,8 +34,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
         width: number;
         height: number;
     };
-    minHeight: number;
     minWidth: number;
+    minHeight: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/editor/plugins/Sidebar/Detached/index.vue.d.ts

@@ -34,8 +34,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
         width: number;
         height: number;
     };
-    minHeight: number;
     minWidth: number;
+    minHeight: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/editor/plugins/Sidebar/index.d.vue.ts

@@ -11,6 +11,10 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * The title displayed in the sidebar header.
      */
     title: string;
+    /**
+     * The title for the tooltip. Falls back to the title.
+     */
+    tooltipTitle?: string;
     /**
      * Optional text for the interactive tour.
      *
@@ -92,8 +96,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     isLoading?: boolean;
 }, {
     showSidebar: () => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    updated: () => any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    updated: () => void;
+    toggle: () => void;
 }, string, import("vue").PublicProps, Readonly<{
     /**
      * Unique identifier for this sidebar.
@@ -103,6 +108,10 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * The title displayed in the sidebar header.
      */
     title: string;
+    /**
+     * The title for the tooltip. Falls back to the title.
+     */
+    tooltipTitle?: string;
     /**
      * Optional text for the interactive tour.
      *
@@ -184,16 +193,18 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     isLoading?: boolean;
 }> & Readonly<{
     onUpdated?: (() => any) | undefined;
+    onToggle?: (() => any) | undefined;
 }>, {
     keyCode: string;
     size: {
         width: number;
         height: number;
     };
-    minHeight: number;
+    tourText: string;
     minWidth: number;
+    minHeight: number;
     region: SidebarRegion;
-    tourText: string;
+    tooltipTitle: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     icon?: (props: {}) => any;
 } & {

package/dist/runtime/editor/plugins/Sidebar/index.vue

@@ -17,7 +17,7 @@
       </slot>
       <slot name="badge" />
       <div class="bk-tooltip">
-        <span>{{ title }}</span>
+        <span>{{ tooltipTitle || title }}</span>
         <ShortcutIndicator
           v-if="keyCode"
           :meta
@@ -132,6 +132,7 @@ import {
 const props = defineProps({
   id: { type: String, required: true },
   title: { type: String, required: true },
+  tooltipTitle: { type: String, required: false, default: void 0 },
   tourText: { type: String, required: false, default: void 0 },
   editOnly: { type: Boolean, required: false },
   icon: { type: null, required: true },
@@ -148,7 +149,7 @@ const props = defineProps({
   beta: { type: Boolean, required: false },
   isLoading: { type: Boolean, required: false }
 });
-const emit = defineEmits(["updated"]);
+const emit = defineEmits(["updated", "toggle"]);
 const { storage, state, ui, $t } = useBlokkli();
 const tourElement = useTemplateRef("tourElement");
 const sidebarDetached = useTemplateRef("sidebarDetached");
@@ -197,6 +198,7 @@ const onAttachDetached = () => {
   emit("updated");
 };
 const toggleSidebar = () => {
+  emit("toggle");
   if (isDetached.value) {
     isDetached.value = false;
     return;