@blokkli/editor 2.0.0-alpha.28 → 2.0.0-alpha.29

package/dist/runtime/components/Edit/Features/Artboard/Renderer.vue

@@ -1,320 +0,0 @@
-<template>
-  <Scrollbar :artboard="artboard" orientation="y" />
-  <PluginToolbarButton
-    id="artboard_reset_zoom"
-    :title="$t('artboardResetZoom', 'Reset zoom')"
-    :shortcut-group="$t('artboard', 'Artboard')"
-    :tour-text="
-  $t(
-    'artboardToolbarButtonTourText',
-    'Shows the current zoom factor. Click on it to reset the zoom back to 100%.'
-  )
-"
-    icon="magnifier"
-    meta
-    key-code="0"
-    region="view-options"
-    weight="100"
-    @click="resetZoom"
-  >
-    <div class="bk-feature-canvas-button">
-      <span>{{ zoomLevel }}</span>
-    </div>
-  </PluginToolbarButton>
-
-  <PluginViewOption
-    id="artboardOverview"
-    v-slot="{ isActive }"
-    :label="$t('artboardOverviewToggle', 'Toggle overview')"
-    :title-on="$t('artboardOverviewShow', 'Show overview')"
-    :title-off="$t('artboardOverviewHide', 'Hide overview')"
-    :tour-text="
-  $t(
-    'artboardOverviewTourText',
-    `Displays a top level overview of your content.`
-  )
-"
-    icon="eye"
-    key-code="O"
-    weight="90"
-  >
-    <Teleport
-      v-if="isActive && dom.isReady.value"
-      :to="ui.mainLayoutElement.value"
-    >
-      <Overview :artboard="artboard" />
-    </Teleport>
-  </PluginViewOption>
-</template>
-
-<script setup>
-import {
-  watch,
-  computed,
-  useBlokkli,
-  onMounted,
-  onBeforeUnmount
-} from "#imports";
-import {
-  asValidNumber,
-  isInsideRect,
-  subtractRectFromViewport
-} from "#blokkli/helpers";
-import { PluginToolbarButton, PluginViewOption } from "#blokkli/plugins";
-import Overview from "./Overview/index.vue";
-import Scrollbar from "./Scrollbar/index.vue";
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-import {
-  createArtboard,
-  touch,
-  wheel,
-  mouse,
-  dom as domPlugin
-} from "artboard-deluxe";
-import { addElementClasses } from "#blokkli/helpers/composables/addElementClasses";
-const props = defineProps({
-  persist: { type: Boolean, required: true },
-  momentum: { type: Boolean, required: true },
-  scrollSpeed: { type: Number, required: true }
-});
-addElementClasses(document.documentElement, "bk-is-artboard");
-const { context, storage, ui, animation, $t, dom, selection } = useBlokkli();
-const artboardElement = ui.artboardElement();
-const zoomLevel = computed(() => Math.round(ui.artboardScale.value * 100) + "%");
-const PADDING = 50;
-const options = computed(() => {
-  return {
-    maxScale: ui.isMobile.value ? 1 : 3,
-    direction: ui.isMobile.value ? "vertical" : "both",
-    minScale: 0.1,
-    overscrollBounds: {
-      top: ui.visibleViewport.value.y + PADDING,
-      left: ui.visibleViewport.value.x + PADDING,
-      right: ui.viewport.value.width - ui.visibleViewport.value.width - ui.visibleViewport.value.x + PADDING,
-      bottom: PADDING
-    },
-    getBlockingRects: () => {
-      const toolbarRects = subtractRectFromViewport(
-        ui.viewport.value,
-        ui.visibleViewport.value
-      );
-      return [...toolbarRects, ...ui.viewportBlockingRects.value];
-    }
-  };
-});
-watch(options, function(newOptions) {
-  artboard.setOptions(newOptions);
-});
-const storageKey = computed(
-  () => "artboard:" + context.value.entityUuid + (ui.isMobile.value ? "mobile" : "desktop")
-);
-const savedState = storage.use(storageKey, null);
-const saveState = () => {
-  if (!props.persist) {
-    return;
-  }
-  savedState.value = {
-    offset: artboard.getOffset(),
-    scale: artboard.getScale()
-  };
-};
-let pluginWheel = null;
-const wheelOptions = computed(() => {
-  return {
-    useMomentumZoom: props.momentum,
-    useMomentumScroll: props.momentum,
-    interceptWheel: true,
-    scrollSpeed: props.scrollSpeed,
-    wheelZoomFactor: props.scrollSpeed
-  };
-});
-watch(wheelOptions, function(newOptions) {
-  if (pluginWheel) {
-    pluginWheel.options.setAll(newOptions);
-  }
-});
-watch(selection.uuids, function() {
-  if (artboard.getMomentum()) {
-    artboard.cancelAnimation();
-  }
-});
-function getArtboard() {
-  pluginWheel = wheel(wheelOptions.value);
-  return createArtboard(
-    ui.rootElement(),
-    [
-      mouse(),
-      touch(),
-      pluginWheel,
-      domPlugin({
-        element: artboardElement,
-        precision: 1,
-        restoreStyles: true
-      })
-    ],
-    {
-      initTransform: savedState.value && props.persist ? {
-        x: asValidNumber(savedState.value.offset.x, 0),
-        y: asValidNumber(savedState.value.offset.y, 0),
-        scale: asValidNumber(savedState.value?.scale, 1)
-      } : void 0,
-      ...options.value
-    }
-  );
-}
-const artboard = getArtboard();
-watch(options, function(newOptions) {
-  artboard.setOptions(newOptions);
-});
-const AUTOSCROLL_EDGE_ZONE = 130;
-const AUTOSCROLL_SPEED = 12;
-let autoScrollSpeed = 1;
-let lastScrollDirection = 0;
-function edgeStep(distance) {
-  const ratio = distance / AUTOSCROLL_EDGE_ZONE;
-  return Math.pow(ratio, 3) * AUTOSCROLL_SPEED;
-}
-let hasLeftAddList = false;
-let hasLeftEdgeZone = false;
-onBlokkliEvent("dragging:end", () => {
-  hasLeftAddList = false;
-  hasLeftEdgeZone = false;
-  autoScrollSpeed = 1;
-  lastScrollDirection = 0;
-});
-function handleAutoScroll(mouseX, mouseY) {
-  if (selection.isDragging.value) {
-    if (!hasLeftAddList) {
-      if (isInsideRect(mouseX, mouseY, ui.visibleViewportPadded.value)) {
-        hasLeftAddList = true;
-      } else {
-        return;
-      }
-    }
-    const viewportHeight = ui.visibleViewport.value.height;
-    const currentOffset = artboard.getOffset();
-    const y = Math.min(
-      Math.max(mouseY - ui.visibleViewport.value.y, 0),
-      viewportHeight
-    );
-    const isInEdgeZone = y < AUTOSCROLL_EDGE_ZONE || y > viewportHeight - AUTOSCROLL_EDGE_ZONE;
-    if (!isInEdgeZone && !hasLeftEdgeZone) {
-      hasLeftEdgeZone = true;
-    }
-    let dy = 0;
-    let currentDirection = 0;
-    if (hasLeftEdgeZone && isInEdgeZone) {
-      if (y < AUTOSCROLL_EDGE_ZONE) {
-        const dist = AUTOSCROLL_EDGE_ZONE - y;
-        dy = edgeStep(dist);
-        currentDirection = 1;
-      } else if (y > viewportHeight - AUTOSCROLL_EDGE_ZONE) {
-        const dist = y - (viewportHeight - AUTOSCROLL_EDGE_ZONE);
-        dy = -edgeStep(dist);
-        currentDirection = -1;
-      }
-    }
-    if (currentDirection !== 0 && currentDirection !== lastScrollDirection) {
-      autoScrollSpeed = 1;
-      lastScrollDirection = currentDirection;
-    }
-    if (dy !== 0) {
-      artboard.setOffset(null, currentOffset.y + dy * autoScrollSpeed);
-      autoScrollSpeed = Math.min(autoScrollSpeed * 1.01, 2.25);
-    }
-  }
-}
-onBlokkliEvent("animationFrame:before", ({ time, mouseY, mouseX }) => {
-  handleAutoScroll(mouseX, mouseY);
-  artboard.loop(time);
-  const artboardSize = artboard.getArtboardSize();
-  if (artboardSize) {
-    ui.artboardSize.value.height = artboardSize.height;
-    ui.artboardSize.value.width = artboardSize.width;
-  }
-  const offset = artboard.getOffset();
-  ui.artboardOffset.value.x = asValidNumber(Math.ceil(offset.x), 0);
-  ui.artboardOffset.value.y = asValidNumber(Math.ceil(offset.y), 0);
-  ui.artboardScale.value = asValidNumber(artboard.getScale(), 1);
-  animation.requestDraw();
-});
-onMounted(() => {
-  window.addEventListener("beforeunload", saveState);
-});
-onBeforeUnmount(() => {
-  saveState();
-  artboard.destroy();
-  window.removeEventListener("beforeunload", saveState);
-});
-const resetZoom = () => {
-  artboard.resetZoom({
-    duration: 500
-  });
-  animation.requestDraw();
-};
-onBlokkliEvent("keyPressed", (e) => {
-  if (ui.hasDialogOpen.value) {
-    return;
-  }
-  if (e.code === "Home") {
-    e.originalEvent.preventDefault();
-    artboard.scrollToTop();
-    animation.requestDraw();
-  } else if (e.code === "End") {
-    e.originalEvent.preventDefault();
-    artboard.scrollToEnd();
-    animation.requestDraw();
-  } else if (e.code === "PageUp") {
-    e.originalEvent.preventDefault();
-    artboard.scrollPageUp();
-    animation.requestDraw();
-  } else if (e.code === "PageDown") {
-    e.originalEvent.preventDefault();
-    artboard.scrollPageDown();
-    animation.requestDraw();
-  } else if (e.code === "ArrowUp") {
-    e.originalEvent.preventDefault();
-    artboard.scrollUp();
-    animation.requestDraw();
-  } else if (e.code === "ArrowDown") {
-    e.originalEvent.preventDefault();
-    artboard.scrollDown();
-    animation.requestDraw();
-  } else if (e.code === "0" && e.meta) {
-    e.originalEvent.preventDefault();
-    resetZoom();
-  } else if (e.code === "1" && e.meta) {
-    e.originalEvent.preventDefault();
-    artboard.scaleToFit();
-    animation.requestDraw();
-  }
-});
-onBlokkliEvent("scrollIntoView", (e) => {
-  if ("uuid" in e) {
-    const rect = dom.getBlockRect(e.uuid);
-    if (!rect) {
-      return;
-    }
-    if (dom.isBlockVisible(e.uuid)) {
-      return;
-    }
-    artboard.scrollIntoView(rect, {
-      scale: "none",
-      axis: "y",
-      behavior: e.immediate ? "instant" : "auto"
-    });
-  } else {
-    if (artboardElement.contains(e.element)) {
-      artboard.scrollElementIntoView(e.element, {
-        scale: "none",
-        axis: "y",
-        behavior: e.immediate ? "instant" : "auto"
-      });
-    } else {
-      artboard.scrollToTop({
-        duration: 0
-      });
-    }
-  }
-});
-</script>

package/dist/runtime/components/Edit/Features/Artboard/Renderer.vue.d.ts

@@ -1,7 +0,0 @@
-type __VLS_Props = {
-    persist: boolean;
-    momentum: boolean;
-    scrollSpeed: number;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/runtime/components/Edit/Features/Artboard/Scrollbar/index.vue.d.ts

@@ -1,7 +0,0 @@
-import { type Artboard } from 'artboard-deluxe';
-type __VLS_Props = {
-    artboard: Artboard;
-    orientation: 'x' | 'y';
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/runtime/components/Edit/Features/Artboard/index.vue

@@ -1,92 +0,0 @@
-<template>
-  <Renderer
-    v-if="renderArtboard"
-    :persist="settings.persist"
-    :momentum="settings.momentum"
-    :scroll-speed="settings.scrollSpeed"
-  />
-</template>
-
-<script setup>
-import { computed, useBlokkli, defineBlokkliFeature } from "#imports";
-import defineShortcut from "#blokkli/helpers/composables/defineShortcut";
-import Renderer from "./Renderer.vue";
-const { settings } = defineBlokkliFeature({
-  id: "artboard",
-  label: "Artboard",
-  icon: "artboard",
-  description: "Wraps the entire page in an artboard that can be zoomed and moved using the mouse.",
-  settings: {
-    persist: {
-      type: "checkbox",
-      default: true,
-      label: "Persist position and zoom",
-      description: "Stores and restores the last position and zoom factor of the artboard.",
-      group: "artboard",
-      viewports: ["desktop"]
-    },
-    momentum: {
-      type: "checkbox",
-      default: true,
-      label: "Use smooth scrolling",
-      description: "Applies smooth animations when scrolling or zooming the artboard.",
-      group: "artboard",
-      viewports: ["desktop"]
-    },
-    scrollSpeed: {
-      type: "slider",
-      default: 1,
-      label: "Artboard scroll speed",
-      group: "artboard",
-      viewports: ["desktop"],
-      min: 0.5,
-      max: 1.5,
-      step: 0.05
-    }
-  },
-  screenshot: "feature-artboard.jpg"
-});
-const { ui, $t } = useBlokkli();
-const renderArtboard = computed(() => !ui.isAnalyzing.value);
-defineShortcut(
-  [
-    {
-      code: "Home",
-      label: $t("artboardScrollToTop", "Scroll to top")
-    },
-    {
-      code: "End",
-      label: $t("artboardScrollToEnd", "Scroll to end")
-    },
-    {
-      code: "PageUp",
-      label: $t("artboardScrollOnePageUp", "Scroll one page up")
-    },
-    {
-      code: "PageDown",
-      label: $t("artboardScrollOnePageDown", "Scroll one page down")
-    },
-    {
-      code: "ArrowUp",
-      label: $t("artboardScrollUp", "Scroll up")
-    },
-    {
-      code: "ArrowDown",
-      label: $t("artboardScrollDown", "Scroll down")
-    },
-    {
-      code: "1",
-      label: $t("artboardScaleToFit", "Scale to fit"),
-      meta: true
-    }
-  ].map((v) => {
-    return { ...v, group: $t("artboard", "Artboard") };
-  })
-);
-</script>
-
-<script>
-export default {
-  name: "Artboard"
-};
-</script>

package/dist/runtime/components/Edit/Features/Artboard/index.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/runtime/components/Edit/Features/Assistant/Overlay/ResultMarkup/index.vue.d.ts

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

package/dist/runtime/components/Edit/Features/Assistant/Overlay/index.vue

@@ -1,108 +0,0 @@
-<template>
-  <FormOverlay
-    id="assistant"
-    :title="$t('assistantDialogTitle', 'Generate content with AI assistant')"
-    icon="robot"
-    @close="onClose"
-  >
-    <div class="bk-assistant-form">
-      <div class="bk">
-        <p class="bk-lead">
-          {{
-            $t(
-  "assistantDialogLead",
-  "Please enter what you'd like the assistant to generate."
-)
-          }}
-        </p>
-        <label class="bk-form-label" for="assistant_prompt">
-          {{ $t("assistantPromptLabel", "Prompt") }}
-        </label>
-        <div class="bk-assistant-form-textarea">
-          <textarea
-            id="assistant_prompt"
-            v-model="prompt"
-            type="text"
-            class="bk-form-input"
-            rows="10"
-            :placeholder="
-  $t(
-    'assistantPromptPlaceholder',
-    'Generate content for a page about how taxes work in Switzerland'
-  )
-"
-            required
-          />
-          <button
-            class="bk-button bk-is-small"
-            :class="{ 'bk-is-loading': isGenerating }"
-            @click.prevent="onGenerate"
-          >
-            Generate
-          </button>
-        </div>
-      </div>
-      <div class="bk-assistant-form-result">
-        <div class="bk-form-label">Result</div>
-        <div>
-          <template v-if="result">
-            <ResultMarkup
-              v-if="result.type === 'markup'"
-              :markup="result.content"
-            />
-          </template>
-        </div>
-      </div>
-    </div>
-    <template #footer>
-      <button class="bk-button bk-is-primary" @click="onSubmit">
-        {{ $t("assistantDialogSubmit", "Create blocks") }}
-      </button>
-    </template>
-  </FormOverlay>
-</template>
-
-<script setup>
-import { FormOverlay } from "#blokkli/components";
-import { useBlokkli, ref } from "#imports";
-import ResultMarkup from "./ResultMarkup/index.vue";
-const { $t, adapter } = useBlokkli();
-const emit = defineEmits(["close", "submit"]);
-const prompt = ref("");
-const isGenerating = ref(false);
-const result = ref({
-  type: "markup",
-  content: ""
-});
-const onSubmit = () => {
-  if (!result.value) {
-    emit("close");
-    return;
-  }
-  emit("submit", result.value);
-};
-const onClose = () => {
-  emit("close");
-};
-const onGenerate = async () => {
-  if (isGenerating.value) {
-    return;
-  }
-  isGenerating.value = true;
-  try {
-    const fetched = await adapter.assistantGetResults({
-      type: "create",
-      prompt: prompt.value
-    });
-    result.value = fetched || null;
-  } catch (_e) {
-  }
-  isGenerating.value = false;
-};
-</script>
-
-<script>
-export default {
-  name: "AssistantOverlay"
-};
-</script>

package/dist/runtime/components/Edit/Features/Assistant/Overlay/index.vue.d.ts

@@ -1,8 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    close: () => any;
-    submit: (result: import("#blokkli/types").AssistantResultMarkup) => any;
-}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
-    onClose?: (() => any) | undefined;
-    onSubmit?: ((result: import("#blokkli/types").AssistantResultMarkup) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/runtime/components/Edit/Features/Assistant/index.vue

@@ -1,65 +0,0 @@
-<template>
-  <Teleport :to="ui.mainLayoutElement.value">
-    <BlokkliTransition name="slide-in">
-      <Overlay v-if="placedAction" @close="onClose" @submit="onSubmit" />
-    </BlokkliTransition>
-  </Teleport>
-</template>
-
-<script setup>
-import { useBlokkli, defineBlokkliFeature, ref } from "#imports";
-import defineAddAction from "#blokkli/helpers/composables/defineAddAction";
-import { BlokkliTransition } from "#blokkli/components";
-import Overlay from "./Overlay/index.vue";
-const { adapter } = defineBlokkliFeature({
-  id: "assistant",
-  icon: "robot",
-  label: "Assistant",
-  description: "Provides a dynamic add block action to add one or more blocks generated by an AI assistant.",
-  requiredAdapterMethods: [
-    "assistantGetResults",
-    "assistantAddBlockFromResult"
-  ],
-  screenshot: "feature-assistant.jpg",
-  dependencies: ["add-list"]
-});
-const { state, $t, ui } = useBlokkli();
-const placedAction = ref(null);
-const onClose = () => {
-  placedAction.value = null;
-};
-const onSubmit = async (result) => {
-  if (adapter.assistantAddBlockFromResult && placedAction.value) {
-    await state.mutateWithLoadingState(
-      () => adapter.assistantAddBlockFromResult({
-        result,
-        host: placedAction.value.host,
-        preceedingUuid: placedAction.value.preceedingUuid
-      }),
-      $t("assistantAddResultError", "Failed to add block from assistant.")
-    );
-  }
-  onClose();
-};
-defineAddAction(() => {
-  return {
-    id: "assistant",
-    title: $t("assistantAddAction", "Add with AI Assistant"),
-    description: $t(
-      "assistantAddActionDescription",
-      "Add content using an AI assistant."
-    ),
-    icon: "robot",
-    color: "rose",
-    callback: (data) => {
-      placedAction.value = data;
-    }
-  };
-});
-</script>
-
-<script>
-export default {
-  name: "Assistant"
-};
-</script>

package/dist/runtime/components/Edit/Features/Assistant/index.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;