@blokkli/editor 2.0.0-alpha.32 → 2.0.0-alpha.34

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

@@ -0,0 +1,31 @@
+type __VLS_Props = {
+    maxHeight?: number;
+    minHeight?: number;
+    submitOnEnter?: boolean;
+    /** When true, convert pasted HTML to markdown */
+    pasteMarkdown?: boolean;
+    textareaClass?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    focus: () => void | undefined;
+    blur: () => void | undefined;
+    element: Readonly<import("vue").ShallowRef<HTMLTextAreaElement | null, HTMLTextAreaElement | null>>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+} & {
+    keydown: (event: KeyboardEvent) => any;
+    submit: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onKeydown?: ((event: KeyboardEvent) => any) | undefined;
+    onSubmit?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    maxHeight: number;
+    minHeight: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,179 @@
+<template>
+  <div
+    class="bk-flex-textarea"
+    :class="{ 'bk-is-scrollable': isScrollable }"
+    :style="{
+  height: height + 'px'
+}"
+  >
+    <textarea
+      ref="textarea"
+      v-bind="$attrs"
+      v-model="modelValue"
+      :class="{
+  'bk-form-input': textareaClass
+}"
+      @keydown.capture.stop="onKeydown"
+      @keyup.capture.stop
+      @paste="onPaste"
+    />
+  </div>
+</template>
+
+<script setup>
+import { useTemplateRef, ref, computed, watch } from "#imports";
+import { onBlokkliEvent } from "#blokkli/editor/composables";
+defineOptions({
+  inheritAttrs: false
+});
+const props = defineProps({
+  maxHeight: { type: Number, required: false, default: void 0 },
+  minHeight: { type: Number, required: false, default: 70 },
+  submitOnEnter: { type: Boolean, required: false },
+  pasteMarkdown: { type: Boolean, required: false },
+  textareaClass: { type: Boolean, required: false }
+});
+const emit = defineEmits(["submit", "keydown"]);
+const modelValue = defineModel({ type: String, ...{ required: true } });
+const textarea = useTemplateRef("textarea");
+const height = ref(props.minHeight);
+const isScrollable = computed(() => {
+  if (!props.maxHeight) return false;
+  return height.value >= props.maxHeight;
+});
+function onKeydown(e) {
+  emit("keydown", e);
+  if (props.submitOnEnter && e.key === "Enter" && !e.shiftKey) {
+    e.preventDefault();
+    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;
+  e.preventDefault();
+  const markdown = htmlToMarkdown(html);
+  const el = textarea.value;
+  if (!el) return;
+  const start = el.selectionStart;
+  const end = el.selectionEnd;
+  const before = modelValue.value.slice(0, start);
+  const after = modelValue.value.slice(end);
+  modelValue.value = before + markdown + after;
+  const newPos = start + markdown.length;
+  requestAnimationFrame(() => {
+    el.setSelectionRange(newPos, newPos);
+  });
+}
+watch(modelValue, (newValue) => {
+  if (!newValue) {
+    height.value = props.minHeight;
+  }
+});
+onBlokkliEvent("animationFrame", () => {
+  const scrollHeight = textarea.value?.scrollHeight ?? props.minHeight;
+  const newHeight = Math.max(scrollHeight, props.minHeight);
+  height.value = props.maxHeight ? Math.min(newHeight, props.maxHeight) : newHeight;
+});
+defineExpose({
+  focus: () => textarea.value?.focus(),
+  blur: () => textarea.value?.blur(),
+  element: textarea
+});
+</script>

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

@@ -0,0 +1,31 @@
+type __VLS_Props = {
+    maxHeight?: number;
+    minHeight?: number;
+    submitOnEnter?: boolean;
+    /** When true, convert pasted HTML to markdown */
+    pasteMarkdown?: boolean;
+    textareaClass?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    focus: () => void | undefined;
+    blur: () => void | undefined;
+    element: Readonly<import("vue").ShallowRef<HTMLTextAreaElement | null, HTMLTextAreaElement | null>>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+} & {
+    keydown: (event: KeyboardEvent) => any;
+    submit: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onKeydown?: ((event: KeyboardEvent) => any) | undefined;
+    onSubmit?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    maxHeight: number;
+    minHeight: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -3,22 +3,33 @@
     <label class="bk-form-label" :for="id">
       {{ label }}<span v-if="required" class="bk-required-indicator">*</span>
     </label>
-    <input
-      :id
-      v-model.lazy="value"
-      type="text"
-      class="bk-form-input"
-      :placeholder
-      :required
-      :disabled
-      :minlength
-      :maxlength
-    />
+    <div class="bk-form-text">
+      <input
+        :id
+        v-model.lazy="value"
+        type="text"
+        class="bk-form-input"
+        :placeholder
+        :required
+        :disabled
+        :minlength
+        :maxlength
+      />
+      <button
+        type="button"
+        :title="$t('clearInput', 'Clear input')"
+        @click.prevent="value = ''"
+      >
+        <Icon name="bk_mdi_close" />
+      </button>
+    </div>
     <div v-if="description" class="bk-form-description">{{ description }}</div>
   </div>
 </template>
 
 <script setup>
+import { Icon } from "#blokkli/editor/components";
+import { useBlokkli } from "#imports";
 defineProps({
   id: { type: String, required: true },
   label: { type: String, required: true },
@@ -31,4 +42,5 @@ defineProps({
   type: { type: String, required: false }
 });
 const value = defineModel({ type: String });
+const { $t } = useBlokkli();
 </script>

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

@@ -2,6 +2,7 @@ type __VLS_Props = {
     label?: string;
     description?: string;
     disabled?: boolean;
+    disabledReason?: string | null;
 };
 type __VLS_ModelProps = {
     modelValue?: boolean;

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

@@ -4,10 +4,13 @@
     <input v-model="value" type="checkbox" class="peer" :disabled />
     <div class="bk-checkbox-toggle-toggle" />
     <div v-if="label || description" class="bk-checkbox-toggle-label">
-      <div v-if="label">{{ label }}</div>
-      <div v-if="description">
+      <div v-if="label" class="bk-checkbox-toggle-label-label">{{ label }}</div>
+      <div v-if="description" class="bk-checkbox-toggle-label-description">
         {{ description }}
       </div>
+      <div v-if="disabledReason" class="bk-form-disabled-reason">
+        {{ disabledReason }}
+      </div>
     </div>
   </label>
 </template>
@@ -16,7 +19,8 @@
 defineProps({
   label: { type: String, required: false },
   description: { type: String, required: false },
-  disabled: { type: Boolean, required: false }
+  disabled: { type: Boolean, required: false },
+  disabledReason: { type: [String, null], required: false }
 });
 const value = defineModel({ type: Boolean });
 </script>

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

@@ -2,6 +2,7 @@ type __VLS_Props = {
     label?: string;
     description?: string;
     disabled?: boolean;
+    disabledReason?: string | null;
 };
 type __VLS_ModelProps = {
     modelValue?: boolean;

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

@@ -20,7 +20,9 @@ const props = defineProps({
   name: { type: null, required: true }
 });
 const app = useBlokkli(true);
-const iconMarkup = computed(() => app?.icons.icons.value[props.name] ?? "");
+const iconMarkup = computed(
+  () => app?.icons.icons.value[props.name] ?? ""
+);
 const markup = computed(
   () => iconMarkup.value ? iconMarkup.value.replace('width="48"', "").replace('height="48"', "") : null
 );

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

@@ -97,19 +97,29 @@ onBlokkliEvent("view-option:toggle", () => {
 onBlokkliEvent("state:reloaded", () => {
   prevRects.clear();
 });
+function highlightElement(element) {
+  if (artboardElement.contains(element)) {
+    highlighted.value = ui.getAbsoluteElementRect(element);
+  } else {
+    highlighted.value = {
+      x: 0,
+      y: 0,
+      width: ui.artboardSize.value.width,
+      height: ui.artboardSize.value.height
+    };
+  }
+}
 onBlokkliEvent("scrollIntoView", (e) => {
   if ("element" in e && e.highlight) {
-    if (artboardElement.contains(e.element)) {
-      highlighted.value = ui.getAbsoluteElementRect(e.element);
-    } else {
-      highlighted.value = {
-        x: 0,
-        y: 0,
-        width: ui.artboardSize.value.width,
-        height: ui.artboardSize.value.height
-      };
-    }
+    highlightElement(e.element);
+  }
+});
+onBlokkliEvent("highlight", (element) => {
+  if (!element) {
+    highlighted.value = null;
+    return;
   }
+  highlightElement(element);
 });
 onBlokkliEvent("window:clickAway", function() {
   highlighted.value = null;

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

@@ -1,7 +1,10 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
     bundle?: string;
+    icon?: BlokkliIcon;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     bundle?: string;
+    icon?: BlokkliIcon;
 }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

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

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

@@ -1,7 +1,10 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
     bundle?: string;
+    icon?: BlokkliIcon;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     bundle?: string;
+    icon?: BlokkliIcon;
 }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -15,7 +15,10 @@
 </template>
 
 <script setup>
-import { fragmentBlockBundle, fromLibraryBlockBundle } from "#blokkli-build/config";
+import {
+  fragmentBlockBundle,
+  fromLibraryBlockBundle
+} from "#blokkli-build/config";
 import { ItemIcon, Icon } from "#blokkli/editor/components";
 import { computed } from "#imports";
 const props = defineProps({

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

@@ -1,10 +1,12 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
 export type NestedEditorOverlayProps = {
     url: string;
     uuid: string;
     title: string;
+    theme: 'lime' | 'red';
+    icon: BlokkliIcon;
     blockUuid?: string;
     element?: HTMLElement | null;
-    label?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<NestedEditorOverlayProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (...args: any[]) => void;