@revenexx/editor 0.1.0

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

@@ -0,0 +1,112 @@
+<template>
+  <div
+    class="_bk_relative"
+    @dragenter.stop.prevent="onDragEnter"
+    @dragleave.stop="onDragLeave"
+    @dragover.stop.prevent="onDragOver"
+    @drop.stop.prevent="onDrop"
+  >
+    <slot />
+    <Transition name="bk-file-drop" :duration="200">
+      <div
+        v-if="isDragOver"
+        class="_bk_absolute _bk_inset-0 _bk_pointer-events-none _bk_flex _bk_items-center _bk_justify-center"
+        :style="{ zIndex: 50 }"
+      >
+        <div
+          class="bk-file-drop-backdrop _bk_absolute _bk_inset-0 _bk_bg-mono-900/95 _bk_backdrop-blur-lg"
+        />
+        <div
+          class="bk-file-drop-content _bk_relative _bk_flex _bk_flex-col _bk_items-center _bk_gap-8 _bk_text-mono-100 _bk_font-semibold _bk_text-base"
+        >
+          <Icon :name="icon" class="_bk_size-50" />
+          <span>{{ label }}</span>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "#imports";
+import { Icon } from "#blokkli/editor/components";
+const props = defineProps({
+  icon: { type: null, required: true },
+  label: { type: String, required: true },
+  accept: { type: Function, required: false }
+});
+const emit = defineEmits(["drop"]);
+let dragCounter = 0;
+const isDragOver = ref(false);
+function hasAcceptableItems(dt, accept) {
+  for (const item of dt.items) {
+    if (item.kind !== "file") continue;
+    if (!accept || accept(item)) return true;
+  }
+  return false;
+}
+function onDragEnter(e) {
+  dragCounter++;
+  if (e.dataTransfer?.types.includes("Files") && hasAcceptableItems(e.dataTransfer, props.accept)) {
+    isDragOver.value = true;
+  }
+}
+function onDragLeave() {
+  dragCounter--;
+  if (dragCounter <= 0) {
+    dragCounter = 0;
+    isDragOver.value = false;
+  }
+}
+function onDragOver(e) {
+  if (e.dataTransfer) {
+    e.dataTransfer.dropEffect = "copy";
+  }
+}
+function onDrop(e) {
+  dragCounter = 0;
+  isDragOver.value = false;
+  const items = e.dataTransfer?.items;
+  if (!items?.length) return;
+  const files = [];
+  for (const item of items) {
+    if (item.kind !== "file") continue;
+    if (props.accept && !props.accept(item)) continue;
+    const file = item.getAsFile();
+    if (file) {
+      files.push(file);
+    }
+  }
+  if (files.length) {
+    emit("drop", files);
+  }
+}
+</script>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+:is(.bk-file-drop-enter-active,.bk-file-drop-leave-active) .bk-file-drop-content {
+  transition-property: all;
+  transition-timing-function: var(--bk-tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
+  transition-duration: var(--bk-tw-duration, var(--default-transition-duration, 150ms));
+  --bk-tw-duration: 300ms;
+  transition-duration: 300ms;
+  --bk-tw-ease: cubic-bezier(0.56, 0.04, 0.25, 1);
+  transition-timing-function: cubic-bezier(0.56, 0.04, 0.25, 1);
+}
+:is(.bk-file-drop-enter-active,.bk-file-drop-leave-active) .bk-file-drop-backdrop {
+  transition-property: opacity;
+  transition-timing-function: var(--bk-tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
+  transition-duration: var(--bk-tw-duration, var(--default-transition-duration, 150ms));
+  --bk-tw-duration: 200ms;
+  transition-duration: 200ms;
+  --bk-tw-ease: cubic-bezier(0.56, 0.04, 0.25, 1);
+  transition-timing-function: cubic-bezier(0.56, 0.04, 0.25, 1);
+}
+:is(.bk-file-drop-enter-from,.bk-file-drop-leave-to) .bk-file-drop-backdrop {
+  opacity: 0;
+}
+:is(.bk-file-drop-enter-from,.bk-file-drop-leave-to) .bk-file-drop-content {
+  opacity: 0;
+  transform: scale(0.8);
+}
+</style>

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

@@ -0,0 +1,23 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+type __VLS_Props = {
+    icon: BlokkliIcon;
+    label: string;
+    accept?: (item: DataTransferItem) => boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    drop: (files: File[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDrop?: ((files: File[]) => 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;
+    };
+};

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

@@ -0,0 +1,36 @@
+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;
+};
+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;
+    onBeforePaste: (data: ClipboardData) => boolean;
+}, {}, {}, {}, 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,324 @@
+<template>
+  <div
+    class="bk-flex-textarea _bk_relative"
+    :class="{
+  'bk-is-scrollable': isScrollable,
+  '_bk_overflow-hidden': !isScrollable
+}"
+    :style="{
+  height: height + 'px'
+}"
+  >
+    <textarea
+      ref="textarea"
+      v-bind="$attrs"
+      v-model="modelValue"
+      class="_bk_absolute _bk_top-0 _bk_left-0 _bk_size-full _bk_resize-none"
+      :class="{
+  'bk-form-input': textareaClass,
+  '_bk_overflow-y-auto': isScrollable,
+  '_bk_overflow-hidden': !isScrollable
+}"
+      @keydown.capture.stop="onKeydown"
+      @keyup.capture.stop
+      @pointerdown="onPointerDown"
+      @paste="onPaste"
+    />
+  </div>
+</template>
+
+<script setup>
+import {
+  useTemplateRef,
+  ref,
+  computed,
+  watch,
+  onMounted,
+  useBlokkli
+} from "#imports";
+import { useAnimationFrame } from "#blokkli/editor/composables";
+import { ClipboardData } from "#blokkli/editor/helpers/clipboardData";
+import { textAutoReplace } from "#blokkli-build/editor-config";
+const GUILLEMET_LANGUAGES = ["de", "fr"];
+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 },
+  onBeforePaste: { type: Function, required: false, default: void 0 },
+  textareaClass: { type: Boolean, required: false },
+  autofocus: { type: Boolean, required: false }
+});
+const emit = defineEmits(["submit", "keydown"]);
+const { ui } = useBlokkli();
+const shouldReplaceQuotes = computed(
+  () => textAutoReplace.quotes && GUILLEMET_LANGUAGES.includes(ui.interfaceLanguage.value)
+);
+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;
+});
+const IDLE_MS = 400;
+let history = [];
+let historyIndex = -1;
+let lastActionType = null;
+let idleTimer = null;
+let restoringSnapshot = false;
+function currentSnapshot() {
+  const el = textarea.value;
+  return {
+    text: modelValue.value,
+    cursor: el?.selectionStart ?? modelValue.value.length
+  };
+}
+function pushSnapshot(entry) {
+  const snap = entry ?? currentSnapshot();
+  if (history[historyIndex]?.text === snap.text) {
+    return;
+  }
+  history = history.slice(0, historyIndex + 1);
+  history.push(snap);
+  historyIndex = history.length - 1;
+}
+function pushUndoSnapshot() {
+  clearIdleTimer();
+  pushSnapshot();
+}
+function clearIdleTimer() {
+  if (idleTimer !== null) {
+    clearTimeout(idleTimer);
+    idleTimer = null;
+  }
+}
+function scheduleIdleSnapshot() {
+  clearIdleTimer();
+  idleTimer = setTimeout(() => {
+    pushSnapshot();
+  }, IDLE_MS);
+}
+function undo() {
+  if (historyIndex < 0) {
+    return;
+  }
+  if (historyIndex === history.length - 1) {
+    const snap = currentSnapshot();
+    if (history[historyIndex]?.text !== snap.text) {
+      pushSnapshot(snap);
+    }
+  }
+  if (historyIndex <= 0) {
+    return;
+  }
+  historyIndex--;
+  restoreSnapshot(history[historyIndex]);
+}
+function redo() {
+  if (historyIndex >= history.length - 1) {
+    return;
+  }
+  historyIndex++;
+  restoreSnapshot(history[historyIndex]);
+}
+function restoreSnapshot(entry) {
+  restoringSnapshot = true;
+  modelValue.value = entry.text;
+  requestAnimationFrame(() => {
+    textarea.value?.setSelectionRange(entry.cursor, entry.cursor);
+    restoringSnapshot = false;
+  });
+}
+function onInput() {
+  if (restoringSnapshot) {
+    return;
+  }
+  const el = textarea.value;
+  if (!el) {
+    return;
+  }
+  const text = el.value;
+  const prevText = history[historyIndex]?.text ?? "";
+  const actionType = text.length > prevText.length ? "insert" : text.length < prevText.length ? "delete" : "other";
+  if (lastActionType !== null && actionType !== lastActionType) {
+    pushSnapshot({
+      text: prevText,
+      cursor: history[historyIndex]?.cursor ?? el.selectionStart
+    });
+  }
+  lastActionType = actionType;
+  scheduleIdleSnapshot();
+}
+function tryReplaceQuotes() {
+  const el = textarea.value;
+  if (!el) {
+    return;
+  }
+  const cursorPos = el.selectionStart;
+  const text = modelValue.value;
+  const closePos = cursorPos - 1;
+  if (text[closePos] !== '"') {
+    return;
+  }
+  let quoteCount = 0;
+  for (let i = 0; i < closePos; i++) {
+    if (text[i] === '"') {
+      quoteCount++;
+    }
+  }
+  if (quoteCount % 2 === 0) {
+    return;
+  }
+  const openPos = text.lastIndexOf('"', closePos - 1);
+  if (openPos === -1 || closePos - openPos < 2) {
+    return;
+  }
+  const inner = text.slice(openPos + 1, closePos);
+  if (inner.startsWith(" ") || inner.endsWith(" ")) {
+    return;
+  }
+  pushUndoSnapshot();
+  modelValue.value = text.slice(0, openPos) + "\xAB" + inner + "\xBB" + text.slice(closePos + 1);
+  requestAnimationFrame(() => {
+    el.setSelectionRange(cursorPos, cursorPos);
+  });
+}
+function tryReplaceEllipsis() {
+  const el = textarea.value;
+  if (!el) {
+    return;
+  }
+  const cursorPos = el.selectionStart;
+  const text = modelValue.value;
+  if (cursorPos < 3) {
+    return;
+  }
+  if (text.slice(cursorPos - 3, cursorPos) !== "...") {
+    return;
+  }
+  pushUndoSnapshot();
+  const newCursor = cursorPos - 2;
+  modelValue.value = text.slice(0, cursorPos - 3) + "\u2026" + text.slice(cursorPos);
+  requestAnimationFrame(() => {
+    el.setSelectionRange(newCursor, newCursor);
+  });
+}
+function tryReplaceEnDash() {
+  const el = textarea.value;
+  if (!el) {
+    return;
+  }
+  const cursorPos = el.selectionStart;
+  const text = modelValue.value;
+  if (cursorPos < 2) {
+    return;
+  }
+  if (text.slice(cursorPos - 2, cursorPos) !== "--") {
+    return;
+  }
+  if (cursorPos >= 3 && text[cursorPos - 3] === "-") {
+    return;
+  }
+  pushUndoSnapshot();
+  const newCursor = cursorPos - 1;
+  modelValue.value = text.slice(0, cursorPos - 2) + "\u2013" + text.slice(cursorPos);
+  requestAnimationFrame(() => {
+    el.setSelectionRange(newCursor, newCursor);
+  });
+}
+onMounted(() => {
+  pushSnapshot({
+    text: modelValue.value,
+    cursor: modelValue.value.length
+  });
+  textarea.value?.addEventListener("input", onInput);
+  if (props.autofocus && textarea.value) {
+    textarea.value.focus();
+  }
+});
+watch(modelValue, () => {
+  if (restoringSnapshot) {
+    return;
+  }
+  if (!modelValue.value) {
+    height.value = props.minHeight;
+  }
+});
+function onPointerDown(e) {
+  if (e.target instanceof HTMLElement) {
+    e.target.setPointerCapture(e.pointerId);
+  }
+}
+function onKeydown(e) {
+  if ((e.ctrlKey || e.metaKey) && !e.altKey) {
+    if (e.key.toLowerCase() === "z" && !e.shiftKey) {
+      e.preventDefault();
+      undo();
+      return;
+    }
+    if (e.key.toLowerCase() === "z" && e.shiftKey || e.key === "y") {
+      e.preventDefault();
+      redo();
+      return;
+    }
+  }
+  if (shouldReplaceQuotes.value && e.key === '"') {
+    requestAnimationFrame(() => {
+      tryReplaceQuotes();
+    });
+  }
+  if (textAutoReplace.ellipsis && e.key === ".") {
+    requestAnimationFrame(() => {
+      tryReplaceEllipsis();
+    });
+  }
+  if (textAutoReplace.enDash && e.key === "-") {
+    requestAnimationFrame(() => {
+      tryReplaceEnDash();
+    });
+  }
+  emit("keydown", e);
+  if (props.submitOnEnter && e.key === "Enter" && !e.shiftKey) {
+    e.preventDefault();
+    emit("submit");
+  }
+}
+function onPaste(e) {
+  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();
+  pushSnapshot();
+  const markdown = data.toMarkdown();
+  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);
+    pushSnapshot();
+  });
+}
+useAnimationFrame(() => {
+  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,36 @@
+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;
+};
+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;
+    onBeforePaste: (data: ClipboardData) => boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,23 @@
+type __VLS_Props = {
+    id: string;
+    label?: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    required?: boolean;
+    disabled?: boolean;
+    description?: string;
+    inline?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue?: string[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <div v-if="label" class="bk-form-label">
+      {{ label }}<span v-if="required" class="bk-required-indicator">*</span>
+    </div>
+    <div
+      class="bk-checkboxes"
+      :class="{
+  'bk-is-inline': inline
+}"
+    >
+      <label v-for="option in options" :key="option.value" class="bk-checkbox">
+        <input
+          :checked="isChecked(option.value)"
+          type="checkbox"
+          :value="option.value"
+          :required
+          :disabled
+          @change="toggleValue(option.value)"
+        />
+        <span>{{ option.label }}</span>
+      </label>
+    </div>
+    <div v-if="description" class="bk-form-description">{{ description }}</div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  id: { type: String, required: true },
+  label: { type: String, required: false },
+  options: { type: Array, required: true },
+  required: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  description: { type: String, required: false },
+  inline: { type: Boolean, required: false }
+});
+const value = defineModel({ type: Array, ...{ default: [] } });
+function isChecked(optionValue) {
+  return value.value.includes(optionValue);
+}
+function toggleValue(optionValue) {
+  if (value.value.includes(optionValue)) {
+    value.value = value.value.filter((v) => v !== optionValue);
+  } else {
+    value.value = [...value.value, optionValue];
+  }
+}
+</script>

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

@@ -0,0 +1,23 @@
+type __VLS_Props = {
+    id: string;
+    label?: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    required?: boolean;
+    disabled?: boolean;
+    description?: string;
+    inline?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue?: string[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    min?: string;
+    max?: string;
+    disabled?: boolean;
+    error?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;