@blokkli/editor 2.0.0-alpha.36 → 2.0.0-alpha.38

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

@@ -0,0 +1,36 @@
+<template>
+  <button
+    v-if="config"
+    class="bk-blokkli-item-options-complex-type"
+    @click="onClick"
+  >
+    <Icon :name="config.editorIcon" />
+    <span>{{ $t(config.editorButtonLabel, config.editorButtonLabel) }}</span>
+  </button>
+</template>
+
+<script setup>
+import { useBlokkli } from "#imports";
+import { Icon } from "#blokkli/editor/components";
+import { COMPLEX_OPTION_TYPES } from "#blokkli-build/complex-option-types";
+const { eventBus, $t } = useBlokkli();
+const props = defineProps({
+  uuid: { type: String, required: true },
+  property: { type: String, required: true },
+  dataType: { type: String, required: true }
+});
+const config = COMPLEX_OPTION_TYPES[props.dataType];
+function onClick() {
+  eventBus.emit("option:edit-complex", {
+    uuid: props.uuid,
+    key: props.property,
+    dataType: props.dataType
+  });
+}
+</script>
+
+<script>
+export default {
+  name: "OptionsFormComplexType"
+};
+</script>

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

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

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

@@ -1,9 +1,10 @@
-import type { BlockOptionDefinition } from '#blokkli/types/blockOptions';
+import type { BlockOptionDefinitionBase } from './../../../../../global/types/blockOptions.js';
 type __VLS_Props = {
-    option: BlockOptionDefinition;
+    option: BlockOptionDefinitionBase;
     property: string;
     mutatedValue: any;
     isGrouped?: boolean;
+    uuid?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     update: (data: unknown) => any;

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

@@ -74,6 +74,12 @@
         :min="option.min"
         :max="option.max"
       />
+      <OptionComplexType
+        v-else-if="option.type === 'json' && option.dataType && uuid"
+        :uuid="uuid"
+        :property="property"
+        :data-type="option.dataType"
+      />
     </div>
   </div>
 </template>
@@ -88,14 +94,16 @@ import OptionColor from "./Color/index.vue";
 import OptionRange from "./Range/index.vue";
 import OptionNumber from "./Number/index.vue";
 import OptionDateTimeLocal from "./DateTimeLocal/index.vue";
+import OptionComplexType from "./ComplexType/index.vue";
 import { BK_VISIBLE_LANGUAGES } from "./../../../../../global/constants";
 const { state, $t: $blokkliText } = useBlokkli();
 const emit = defineEmits(["update"]);
 const props = defineProps({
-  option: { type: Object, required: true },
+  option: { type: null, required: true },
   property: { type: String, required: true },
   mutatedValue: { type: null, required: true },
-  isGrouped: { type: Boolean, required: false }
+  isGrouped: { type: Boolean, required: false },
+  uuid: { type: String, required: false }
 });
 const hoveredOption = ref("");
 const showLabel = computed(() => {

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

@@ -1,9 +1,10 @@
-import type { BlockOptionDefinition } from '#blokkli/types/blockOptions';
+import type { BlockOptionDefinitionBase } from './../../../../../global/types/blockOptions.js';
 type __VLS_Props = {
-    option: BlockOptionDefinition;
+    option: BlockOptionDefinitionBase;
     property: string;
     mutatedValue: any;
     isGrouped?: boolean;
+    uuid?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     update: (data: unknown) => any;

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() {

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/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/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/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,6 +193,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     isLoading?: boolean;
 }> & Readonly<{
     onUpdated?: (() => any) | undefined;
+    onToggle?: (() => any) | undefined;
 }>, {
     keyCode: string;
     size: {
@@ -194,6 +204,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     tourText: string;
     minWidth: number;
     region: SidebarRegion;
+    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;

package/dist/runtime/editor/plugins/Sidebar/index.vue.d.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,6 +193,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     isLoading?: boolean;
 }> & Readonly<{
     onUpdated?: (() => any) | undefined;
+    onToggle?: (() => any) | undefined;
 }>, {
     keyCode: string;
     size: {
@@ -194,6 +204,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     tourText: string;
     minWidth: number;
     region: SidebarRegion;
+    tooltipTitle: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     icon?: (props: {}) => any;
 } & {

package/dist/runtime/editor/providers/analyze.d.ts

@@ -0,0 +1,43 @@
+import { type Ref, type ComputedRef } from '#imports';
+import type { AdaptersProvider } from './adapters.js';
+import type { StateProvider } from './state.js';
+import type { UiProvider } from './ui.js';
+import type { AdapterContext } from '#blokkli/editor/adapter';
+import type { TextProvider } from './texts.js';
+import type { AnalyzeNode, AnalyzeResult, Analyzer, AnalyzerType } from '../features/analyze/analyzers/types.js';
+import { AnalyzerContext } from '../features/analyze/analyzers/helpers/Context.js';
+export type AnalyzeProvider = {
+    /**
+     * All available analyzers, fetched once from adapters.
+     * Empty array until initialized.
+     */
+    analyzers: Readonly<Ref<Analyzer[]>>;
+    /**
+     * Whether analyzers have been fetched and initialized.
+     */
+    isInitialized: Readonly<Ref<boolean>>;
+    /**
+     * Fetch analyzers and call init() on each one. Idempotent.
+     */
+    ensureInitialized: () => Promise<void>;
+    /**
+     * Create an AnalyzerContext scoped to the given element.
+     */
+    createContext: (element: HTMLElement, signal?: AbortSignal) => AnalyzerContext;
+    /**
+     * Run a single analyzer and return its results as a flat array.
+     */
+    runAnalyzer: (analyzer: Analyzer, context: AnalyzerContext) => Promise<AnalyzeResult[]>;
+    /**
+     * Run analyzeText on all analyzers that support it.
+     * Optionally filter by analyzer type.
+     * Returns nodes per analyzer per text.
+     */
+    runOnTexts: (texts: string[], analyzerType?: AnalyzerType) => Promise<Array<{
+        analyzerId: string;
+        analyzerLabel?: string;
+        text: string;
+        nodes: AnalyzeNode[];
+    }>>;
+};
+export default function analyzeProvider(adapters: AdaptersProvider, state: StateProvider, ui: UiProvider, context: ComputedRef<AdapterContext>, $t: TextProvider): AnalyzeProvider;