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

package/dist/runtime/editor/components/Dropdown/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <div ref="container" class="bk-dropdown-menu">
+    <button
+      class="bk-dropdown-menu-trigger"
+      :disabled="disabled"
+      @click="showMenu = !showMenu"
+    >
+      <slot name="button" />
+    </button>
+    <BlokkliTransition name="drop-up">
+      <div
+        v-if="showMenu"
+        ref="contentEl"
+        class="bk-dropdown-menu-content"
+        :class="positionClass"
+        @keydown="onContentKeydown"
+      >
+        <slot :close="close" />
+      </div>
+    </BlokkliTransition>
+  </div>
+</template>
+
+<script setup>
+import {
+  ref,
+  computed,
+  watch,
+  nextTick,
+  onMounted,
+  onBeforeUnmount,
+  useTemplateRef,
+  useBlokkli
+} from "#imports";
+import { BlokkliTransition } from "#blokkli/editor/components";
+const props = defineProps({
+  position: { type: String, required: false, default: "bottom-left" },
+  disabled: { type: Boolean, required: false, default: false }
+});
+const { eventBus } = useBlokkli();
+const container = useTemplateRef("container");
+const contentEl = useTemplateRef("contentEl");
+const showMenu = ref(false);
+const positionClass = computed(() => `bk-is-${props.position}`);
+function getFocusableItems() {
+  if (!contentEl.value) return [];
+  return Array.from(
+    contentEl.value.querySelectorAll("button, input, [tabindex]")
+  );
+}
+function focusTrigger() {
+  const trigger = container.value?.querySelector(
+    ".bk-dropdown-menu-trigger"
+  );
+  trigger?.focus();
+}
+function close() {
+  if (!showMenu.value) return;
+  showMenu.value = false;
+  focusTrigger();
+}
+watch(showMenu, (open) => {
+  if (open) {
+    nextTick(() => {
+      const items = getFocusableItems();
+      items[0]?.focus();
+    });
+  }
+});
+function onContentKeydown(e) {
+  const { key } = e;
+  if (key === "Escape") {
+    e.preventDefault();
+    e.stopPropagation();
+    close();
+    return;
+  }
+  if (key === "ArrowDown" || key === "ArrowUp") {
+    e.preventDefault();
+    e.stopPropagation();
+    const items = getFocusableItems();
+    if (!items.length) return;
+    const current = items.indexOf(document.activeElement);
+    let next;
+    if (key === "ArrowDown") {
+      next = current < items.length - 1 ? current + 1 : 0;
+    } else {
+      next = current > 0 ? current - 1 : items.length - 1;
+    }
+    items[next]?.focus();
+    return;
+  }
+  e.stopPropagation();
+}
+function onDocumentClick(e) {
+  if (!container.value?.contains(e.target)) {
+    close();
+  }
+}
+eventBus.on("mouse:up", close);
+onMounted(() => document.addEventListener("click", onDocumentClick));
+onBeforeUnmount(() => {
+  document.removeEventListener("click", onDocumentClick);
+  eventBus.off("mouse:up", close);
+});
+defineExpose({ close });
+</script>

package/dist/runtime/editor/components/Dropdown/index.vue.d.ts

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    position?: 'bottom-left' | 'top-left' | 'top-right';
+    disabled?: boolean;
+};
+declare function close(): void;
+declare var __VLS_1: {}, __VLS_9: {
+    close: typeof close;
+};
+type __VLS_Slots = {} & {
+    button?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    close: typeof close;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    disabled: boolean;
+    position: "bottom-left" | "top-left" | "top-right";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/{modules/agent/runtime/app/features/agent/Panel/Input/Actions → runtime/editor/components}/DropdownItem/index.d.vue.ts

@@ -2,6 +2,7 @@ import type { BlokkliIcon } from '#blokkli-build/icons';
 type __VLS_Props = {
     icon: BlokkliIcon;
     text: string;
+    disabled?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: () => any;

package/dist/{modules/agent/runtime/app/features/agent/Panel/Input/Actions → runtime/editor/components}/DropdownItem/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <button @click="$emit('click')">
+  <button class="bk-dropdown-menu-item" :disabled @click="$emit('click')">
     <Icon :name="icon" />
     <span>{{ text }}</span>
   </button>
@@ -9,7 +9,8 @@
 import { Icon } from "#blokkli/editor/components";
 defineProps({
   icon: { type: null, required: true },
-  text: { type: String, required: true }
+  text: { type: String, required: true },
+  disabled: { type: Boolean, required: false }
 });
 defineEmits(["click"]);
 </script>

package/dist/{modules/agent/runtime/app/features/agent/Panel/Input/Actions → runtime/editor/components}/DropdownItem/index.vue.d.ts

@@ -2,6 +2,7 @@ import type { BlokkliIcon } from '#blokkli-build/icons';
 type __VLS_Props = {
     icon: BlokkliIcon;
     text: string;
+    disabled?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: () => any;

package/dist/runtime/editor/components/EditProvider.d.vue.ts

@@ -1,5 +1,6 @@
 import '#blokkli-build/styles.css';
 import type { EditPermission } from '#blokkli/types/provider';
+import type { ValidProviderTypes } from '#blokkli-build/generated-types';
 declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<{
         entity?: T;
@@ -10,6 +11,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         isolate?: boolean;
         permissions: Array<EditPermission | null>;
         providerEl: HTMLElement;
+        providerType: ValidProviderTypes;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});

package/dist/runtime/editor/components/EditProvider.vue

@@ -100,7 +100,6 @@ import commandsProvider from "#blokkli/editor/providers/commands";
 import tourProvider from "#blokkli/editor/providers/tour";
 import debugProvider from "#blokkli/editor/providers/debug";
 import definitionProvider from "#blokkli/editor/providers/definition";
-import dropAreasProvider from "#blokkli/editor/providers/dropArea";
 import blocksProvider from "#blokkli/editor/providers/blocks";
 import indicatorsProvider from "#blokkli/editor/providers/indicators";
 import pluginProvider from "#blokkli/editor/providers/plugin";
@@ -109,6 +108,8 @@ import fieldsProvider from "#blokkli/editor/providers/fields";
 import iconsProvider from "#blokkli/editor/providers/icons";
 import permissionsProvider from "#blokkli/editor/providers/permissions";
 import adaptersProvider from "#blokkli/editor/providers/adapters";
+import analyzeProviderFn from "#blokkli/editor/providers/analyze";
+import dragdropProvider from "#blokkli/editor/providers/dragdrop";
 import { eventBus } from "#blokkli/editor/events";
 import "#blokkli-build/styles.css";
 import getAdapter from "#blokkli-build/edit-adapter";
@@ -139,7 +140,8 @@ const props = defineProps({
   language: { type: String, required: false, default: "en" },
   isolate: { type: Boolean, required: false },
   permissions: { type: Array, required: true },
-  providerEl: { type: null, required: true }
+  providerEl: { type: null, required: true },
+  providerType: { type: null, required: true }
 });
 defineSlots();
 const mainLayoutElement = useTemplateRef("mainLayoutElement");
@@ -166,7 +168,7 @@ const route = useRoute();
 const toolbarLoaded = ref(false);
 const featuresLoaded = ref(false);
 const isInitializing = ref(true);
-const definitions = definitionProvider();
+const definitions = definitionProvider(props.providerType);
 const $t = textProvider(context);
 const state = await editStateProvider(
   eventBus,
@@ -185,7 +187,6 @@ const element = elementProvider(debug);
 const features = featuresProvider(storage);
 const commands = commandsProvider();
 const tour = tourProvider();
-const dropAreas = dropAreasProvider();
 const broadcast = broadcastProvider();
 const icons = iconsProvider();
 const ui = uiProvider(
@@ -213,8 +214,10 @@ const animation = animationProvider(
 const types = await typesProvider(adapter, selection, context);
 const indicators = indicatorsProvider();
 const directive = directiveProvider(debug, ui);
-const fields = fieldsProvider(dom, types);
+const fields = fieldsProvider(dom, types, state);
 const permissionsInstance = await permissionsProvider(adapter);
+const analyze = analyzeProviderFn(adapters, state, ui, context, $t);
+const dragdrop = dragdropProvider();
 const mutatedEntityProps = computed(() => state.mutatedItemProps.HOST);
 const mutatedEntity = computed(() => {
   return {
@@ -282,7 +285,6 @@ const app = {
   debug,
   definitions,
   dom,
-  dropAreas,
   element,
   eventBus,
   directive,
@@ -300,7 +302,9 @@ const app = {
   ui,
   fields,
   icons,
-  permissions: permissionsInstance
+  permissions: permissionsInstance,
+  analyze,
+  dragdrop
 };
 provide(INJECT_APP, app);
 function textWithHighlight(title, text) {

package/dist/runtime/editor/components/EditProvider.vue.d.ts

@@ -1,5 +1,6 @@
 import '#blokkli-build/styles.css';
 import type { EditPermission } from '#blokkli/types/provider';
+import type { ValidProviderTypes } from '#blokkli-build/generated-types';
 declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<{
         entity?: T;
@@ -10,6 +11,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         isolate?: boolean;
         permissions: Array<EditPermission | null>;
         providerEl: HTMLElement;
+        providerType: ValidProviderTypes;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});

package/dist/runtime/editor/components/FlexTextarea/index.d.vue.ts

@@ -1,10 +1,14 @@
+import { ClipboardData } from '#blokkli/editor/helpers/clipboardData';
 type __VLS_Props = {
     maxHeight?: number;
     minHeight?: number;
     submitOnEnter?: boolean;
     /** When true, convert pasted HTML to markdown */
     pasteMarkdown?: boolean;
+    /** Called before the built-in paste handling. Return true to skip it. */
+    onBeforePaste?: (data: ClipboardData) => boolean;
     textareaClass?: boolean;
+    autofocus?: boolean;
 };
 type __VLS_ModelProps = {
     modelValue: string;
@@ -24,8 +28,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     onSubmit?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
-    maxHeight: number;
     minHeight: number;
+    maxHeight: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/editor/components/FlexTextarea/index.vue

@@ -15,14 +15,16 @@
 }"
       @keydown.capture.stop="onKeydown"
       @keyup.capture.stop
+      @pointerdown="onPointerDown"
       @paste="onPaste"
     />
   </div>
 </template>
 
 <script setup>
-import { useTemplateRef, ref, computed, watch } from "#imports";
+import { useTemplateRef, ref, computed, watch, onMounted } from "#imports";
 import { onBlokkliEvent } from "#blokkli/editor/composables";
+import { ClipboardData } from "#blokkli/editor/helpers/clipboardData";
 defineOptions({
   inheritAttrs: false
 });
@@ -31,7 +33,9 @@ const props = defineProps({
   minHeight: { type: Number, required: false, default: 70 },
   submitOnEnter: { type: Boolean, required: false },
   pasteMarkdown: { type: Boolean, required: false },
-  textareaClass: { type: Boolean, required: false }
+  onBeforePaste: { type: Function, required: false },
+  textareaClass: { type: Boolean, required: false },
+  autofocus: { type: Boolean, required: false }
 });
 const emit = defineEmits(["submit", "keydown"]);
 const modelValue = defineModel({ type: String, ...{ required: true } });
@@ -41,6 +45,11 @@ const isScrollable = computed(() => {
   if (!props.maxHeight) return false;
   return height.value >= props.maxHeight;
 });
+function onPointerDown(e) {
+  if (e.target instanceof HTMLElement) {
+    e.target.setPointerCapture(e.pointerId);
+  }
+}
 function onKeydown(e) {
   emit("keydown", e);
   if (props.submitOnEnter && e.key === "Enter" && !e.shiftKey) {
@@ -48,107 +57,16 @@ function onKeydown(e) {
     emit("submit");
   }
 }
-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 "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();
-}
 function onPaste(e) {
-  if (!props.pasteMarkdown) return;
-  const html = e.clipboardData?.getData("text/html");
-  if (!html) return;
+  if (!e.clipboardData) return;
+  const data = new ClipboardData(e.clipboardData);
+  if (props.onBeforePaste?.(data)) {
+    e.preventDefault();
+    return;
+  }
+  if (!props.pasteMarkdown || !data.hasHtml()) return;
   e.preventDefault();
-  const markdown = htmlToMarkdown(html);
+  const markdown = data.toMarkdown();
   const el = textarea.value;
   if (!el) return;
   const start = el.selectionStart;
@@ -171,6 +89,11 @@ onBlokkliEvent("animationFrame", () => {
   const newHeight = Math.max(scrollHeight, props.minHeight);
   height.value = props.maxHeight ? Math.min(newHeight, props.maxHeight) : newHeight;
 });
+onMounted(() => {
+  if (props.autofocus && textarea.value) {
+    textarea.value.focus();
+  }
+});
 defineExpose({
   focus: () => textarea.value?.focus(),
   blur: () => textarea.value?.blur(),

package/dist/runtime/editor/components/FlexTextarea/index.vue.d.ts

@@ -1,10 +1,14 @@
+import { ClipboardData } from '#blokkli/editor/helpers/clipboardData';
 type __VLS_Props = {
     maxHeight?: number;
     minHeight?: number;
     submitOnEnter?: boolean;
     /** When true, convert pasted HTML to markdown */
     pasteMarkdown?: boolean;
+    /** Called before the built-in paste handling. Return true to skip it. */
+    onBeforePaste?: (data: ClipboardData) => boolean;
     textareaClass?: boolean;
+    autofocus?: boolean;
 };
 type __VLS_ModelProps = {
     modelValue: string;
@@ -24,8 +28,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     onSubmit?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
-    maxHeight: number;
     minHeight: number;
+    maxHeight: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/editor/components/Form/Radio/index.d.vue.ts

@@ -8,6 +8,7 @@ type __VLS_Props = {
     required?: boolean;
     disabled?: boolean;
     description?: string;
+    inline?: boolean;
 };
 type __VLS_ModelProps = {
     modelValue?: string;

package/dist/runtime/editor/components/Form/Radio/index.vue

@@ -3,7 +3,7 @@
     <div class="bk-form-label">
       {{ label }}<span v-if="required" class="bk-required-indicator">*</span>
     </div>
-    <div>
+    <div :class="{ 'bk-radio-inline': inline }">
       <label v-for="option in options" :key="option.value" class="bk-radio">
         <input
           v-model="value"
@@ -27,7 +27,8 @@ defineProps({
   options: { type: Array, required: true },
   required: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
-  description: { type: String, required: false }
+  description: { type: String, required: false },
+  inline: { type: Boolean, required: false }
 });
 const value = defineModel({ type: String });
 </script>

package/dist/runtime/editor/components/Form/Radio/index.vue.d.ts

@@ -8,6 +8,7 @@ type __VLS_Props = {
     required?: boolean;
     disabled?: boolean;
     description?: string;
+    inline?: boolean;
 };
 type __VLS_ModelProps = {
     modelValue?: string;

package/dist/runtime/editor/components/ItemIcon/index.vue

@@ -8,7 +8,10 @@
 <script setup>
 import { computed, useBlokkli } from "#imports";
 import { Icon } from "#blokkli/editor/components";
-import { fromLibraryBlockBundle } from "#blokkli-build/config";
+import {
+  fragmentBlockBundle,
+  fromLibraryBlockBundle
+} from "#blokkli-build/config";
 const props = defineProps({
   bundle: { type: String, required: false },
   icon: { type: null, required: false }
@@ -26,7 +29,12 @@ const iconName = computed(() => {
       return name;
     }
   }
-  return props.icon ?? "bk_mdi_question_mark";
+  if (props.icon) {
+    return props.icon;
+  } else if (props.bundle === fragmentBlockBundle) {
+    return "bk_mdi_newspaper";
+  }
+  return "bk_mdi_question_mark";
 });
 </script>
 

package/dist/runtime/editor/components/NestedEditorOverlay/index.d.vue.ts

@@ -1,19 +1,29 @@
 import type { BlokkliIcon } from '#blokkli-build/icons';
 export type NestedEditorOverlayProps = {
-    url: string;
+    url?: string;
     uuid: string;
     title: string;
-    theme: 'lime' | 'red';
+    theme: 'lime' | 'red' | 'accent';
     icon: BlokkliIcon;
     blockUuid?: string;
     element?: HTMLElement | null;
 };
-declare const __VLS_export: import("vue").DefineComponent<NestedEditorOverlayProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare var __VLS_38: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_38) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<NestedEditorOverlayProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (...args: any[]) => void;
     submit: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<NestedEditorOverlayProps> & Readonly<{
     onClose?: ((...args: any[]) => any) | undefined;
     onSubmit?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};