@blokkli/editor 2.0.0-alpha.2 → 2.0.0-alpha.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blokkli/editor",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0-alpha.20",
   "description": "Interactive page building experience for Nuxt",
   "repository": "blokkli/editor",
   "type": "module",
@@ -57,55 +57,72 @@
   "license": "MIT",
   "dependencies": {
     "@types/micromatch": "^4.0.9",
-    "artboard-deluxe": "^0.1.0",
-    "estree-walker-ts": "^1.0.1",
+    "artboard-deluxe": "^0.1.2",
+    "estree-walker-ts": "^1.1.0",
+    "flesch": "^2.0.1",
     "fzf": "^0.5.2",
     "get-video-id": "^4.1.7",
     "html-diff-ts": "^1.4.2",
+    "hyphen": "^1.10.6",
     "mitt": "^3.0.1",
-    "qrcode.vue": "^3.4.1",
-    "twgl.js": "^5.5.4"
+    "parse-latin": "^7.0.0",
+    "qrcode.vue": "^3.6.0",
+    "twgl.js": "^7.0.0"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-build-classic": "^43.1.0",
-    "@ckeditor/ckeditor5-vue": "^7.0.0",
+    "@ckeditor/ckeditor5-build-classic": "^44.3.0",
+    "@ckeditor/ckeditor5-vue": "^7.3.0",
+    "@lunarisapp/readability": "^1.0.2",
     "@nuxt/devtools": "latest",
-    "@nuxt/eslint-config": "^1.3.0",
-    "@nuxt/kit": "^3.16.2",
-    "@nuxt/module-builder": "^1.0.1",
-    "@nuxt/schema": "^3.16.2",
-    "@nuxt/test-utils": "^3.14.2",
-    "@nuxtjs/tailwindcss": "^6.12.1",
-    "@tailwindcss/forms": "^0.5.9",
-    "@tailwindcss/typography": "^0.5.15",
+    "@nuxt/eslint-config": "^1.9.0",
+    "@nuxt/kit": "^4.1.2",
+    "@nuxt/module-builder": "^1.0.2",
+    "@nuxt/schema": "^4.1.2",
+    "@nuxt/test-utils": "^3.19.2",
+    "@nuxtjs/tailwindcss": "^6.14.0",
+    "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/typography": "^0.5.16",
     "@thedutchcoder/postcss-rem-to-px": "^0.0.2",
-    "@types/gettext-parser": "^4.0.4",
-    "@types/node": "^22.5.4",
+    "@types/gettext-parser": "^8.0.0",
+    "@types/hyphen": "^1.6.7",
+    "@types/node": "^24.3.0",
     "@vue/test-utils": "^2.4.6",
-    "changelogen": "^0.5.5",
-    "cypress": "^13.14.2",
-    "eslint": "^9.24.0",
-    "eslint-plugin-sonarjs": "^3.0.2",
-    "eslint-plugin-tailwindcss": "^3.18.0",
+    "axe-core": "^4.10.3",
+    "changelogen": "^0.6.2",
+    "cypress": "^15.0.0",
+    "eslint": "^9.33.0",
+    "eslint-plugin-sonarjs": "^3.0.4",
+    "eslint-plugin-tailwindcss": "^3.18.2",
     "gettext-parser": "^8.0.0",
-    "happy-dom": "^15.7.4",
-    "nuxt": "^3.16.2",
-    "nuxt-graphql-middleware": "^5.0.0-alpha.18",
-    "nuxt-svg-icon-sprite": "^2.0.0-alpha.1",
-    "openai": "^4.59.0",
-    "playwright-core": "^1.47.0",
-    "postcss": "^8.4.45",
-    "postcss-cli": "^11.0.0",
-    "postcss-import": "^16.1.0",
-    "postcss-mixins": "^11.0.1",
+    "happy-dom": "^18.0.1",
+    "nuxt": "^4.1.2",
+    "nuxt-graphql-middleware": "^5.2.1",
+    "nuxt-svg-icon-sprite": "^2.0.2",
+    "openai": "^5.13.1",
+    "oxc-walker": "^0.5.2",
+    "playwright-core": "^1.55.0",
+    "postcss": "^8.5.6",
+    "postcss-cli": "^11.0.1",
+    "postcss-import": "^16.1.1",
+    "postcss-mixins": "^12.1.2",
     "postcss-nested-import": "^1.3.0",
     "postcss-replace": "^2.0.1",
     "postcss-url": "^10.1.3",
-    "prettier": "^3.3.3",
-    "prettier-plugin-glsl": "^0.2.0",
-    "tailwindcss": "^3.4.11",
-    "vite-plugin-glsl": "^1.3.0",
-    "vitepress": "^1.3.4",
-    "vitest": "^2.0.5"
+    "prettier": "^3.6.2",
+    "prettier-plugin-glsl": "^0.2.2",
+    "tailwindcss": "^3.4.17",
+    "unbuild": "^3.6.1",
+    "vite-plugin-glsl": "^1.5.1",
+    "vitepress": "^1.6.4",
+    "vitest": "^3.2.4",
+    "vue-tsc": "^2.2.12"
+  },
+  "peerDependencies": {
+    "@lunarisapp/readability": "^1.0.2"
+  },
+  "peerDependenciesMeta": {
+    "@lunarisapp/readability": {
+      "optional": true
+    }
   }
 }

package/dist/modules/drupal/adapter/index.d.mts

@@ -1,6 +0,0 @@
-import * as _blokkli_adapter from '#blokkli/adapter';
-import { ParagraphsBlokkliEditStateFragment } from '#graphql-operations';
-
-declare const _default: _blokkli_adapter.BlokkliAdapterFactory<ParagraphsBlokkliEditStateFragment>;
-
-export { _default as default };

package/dist/runtime/components/Edit/DragInteractions/index.vue

@@ -1,364 +0,0 @@
-<template>
-  <div />
-</template>
-
-<script setup>
-import {
-  falsy,
-  getDistance,
-  getInteractionCoordinates,
-  isInsideRect
-} from "#blokkli/helpers";
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-import { watch, ref, useBlokkli, onMounted, onBeforeUnmount } from "#imports";
-const { dom, eventBus, selection, keyboard, ui, state } = useBlokkli();
-const rootEl = ui.rootElement();
-const rects = ref([]);
-function buildRects() {
-  const visible = dom.getVisibleBlocks();
-  rects.value = visible.map((uuid) => {
-    const rect = dom.getBlockRect(uuid);
-    if (!rect) {
-      return;
-    }
-    return { uuid, rect };
-  }).filter(falsy);
-}
-watch(dom.isReady, buildRects);
-let lastInteractedElement = null;
-let pointerDownElement = null;
-let mouseStartCoordinates = null;
-function getInteractedElement(e) {
-  const { x, y } = getInteractionCoordinates(e);
-  const elements = document.elementsFromPoint(x, y);
-  let editableFieldName = "";
-  let uuid = "";
-  for (let i = 0; i < elements.length; i++) {
-    let el = elements[i];
-    if (!(el instanceof HTMLElement)) {
-      continue;
-    }
-    if (el.dataset.blokkliEditableField) {
-      editableFieldName = el.dataset.blokkliEditableField;
-    }
-    if (el instanceof HTMLTableCellElement) {
-      const parent = el.parentElement;
-      if (parent instanceof HTMLTableRowElement) {
-        el = parent;
-      }
-    }
-    if (!(el instanceof HTMLElement)) {
-      continue;
-    }
-    if (!el.dataset.uuid) {
-      continue;
-    }
-    const block = dom.findBlock(el.dataset.uuid);
-    if (!block) {
-      continue;
-    }
-    const draggableEl = dom.getDragElement(block);
-    if (draggableEl && el !== draggableEl && !elements.includes(draggableEl)) {
-      continue;
-    }
-    uuid = el.dataset.uuid;
-    break;
-  }
-  if (editableFieldName || uuid) {
-    return { editableFieldName, uuid, timestamp: Date.now(), x, y };
-  }
-  const visibleUuids = dom.getVisibleBlocks();
-  for (let i = 0; i < visibleUuids.length; i++) {
-    const rect = dom.getBlockRect(visibleUuids[i]);
-    if (rect) {
-      const relativeRect = ui.getViewportRelativeRect(rect);
-      if (isInsideRect(x, y, relativeRect)) {
-        return {
-          uuid: visibleUuids[i],
-          timestamp: Date.now(),
-          x,
-          y
-        };
-      }
-    }
-  }
-  return null;
-}
-function onPointerMove(e) {
-  if (keyboard.isPressingSpace.value || state.editMode.value !== "editing") {
-    return;
-  }
-  e.preventDefault();
-  e.stopPropagation();
-  e.stopImmediatePropagation();
-  if (e.pointerType === "touch") {
-    return onTouchMove(e);
-  }
-  if (e.buttons !== 1) {
-    return;
-  }
-  if (!pointerDownElement || !mouseStartCoordinates || selection.isDragging.value || keyboard.isPressingSpace.value || selection.isMultiSelecting.value) {
-    return;
-  }
-  const diffX = Math.abs(mouseStartCoordinates.x - e.clientX);
-  const diffY = Math.abs(mouseStartCoordinates.y - e.clientY);
-  if (diffX < 6 && diffY < 6) {
-    return;
-  }
-  const interacted = getInteractedElement(e);
-  if (interacted && interacted.uuid) {
-    if (selection.uuids.value.includes(interacted.uuid)) {
-      eventBus.emit("dragging:start", {
-        items: [...selection.blocks.value],
-        coords: { x: e.clientX, y: e.clientY },
-        mode: "mouse"
-      });
-    } else {
-      const block = dom.findBlock(interacted.uuid);
-      if (block) {
-        eventBus.emit("dragging:start", {
-          items: [block],
-          coords: { x: e.clientX, y: e.clientY },
-          mode: "mouse"
-        });
-      }
-    }
-  }
-}
-let pointerDownTimestamp = 0;
-let pointerUpTimestamp = 0;
-function onPointerDown(e) {
-  if (!keyboard.isPressingSpace.value) {
-    e.preventDefault();
-    e.stopPropagation();
-    e.stopImmediatePropagation();
-  }
-  keyboard.setShortcutStateFromEvent(e);
-  rootEl.removeEventListener("pointermove", onPointerMove);
-  if (state.isLoading.value) {
-    return;
-  }
-  rootEl.addEventListener("pointermove", onPointerMove);
-  if (e.pointerType === "touch") {
-    return onTouchStart(e);
-  }
-  if (selection.isDragging.value) {
-    return;
-  }
-  const coords = { x: e.clientX, y: e.clientY };
-  if (!e.shiftKey && e.buttons !== 2) {
-    pointerDownTimestamp = Date.now();
-    mouseStartCoordinates = coords;
-    const interacted = getInteractedElement(e);
-    pointerDownElement = interacted;
-    if (interacted) {
-      return;
-    }
-  }
-  eventBus.emit("mouse:down", { ...coords, type: "mouse", distance: 0 });
-}
-function onPointerUp(e) {
-  rootEl.removeEventListener("pointermove", onPointerMove);
-  e.preventDefault();
-  e.stopPropagation();
-  e.stopImmediatePropagation();
-  const wasDragging = selection.isDragging.value;
-  const wasMultiSelecting = selection.isMultiSelecting.value;
-  pointerDownElement = null;
-  if (state.isLoading.value) {
-    return;
-  }
-  if (e.pointerType === "touch") {
-    return onTouchEnd(e);
-  }
-  const coords = getInteractionCoordinates(e);
-  const distance = mouseStartCoordinates ? getDistance(mouseStartCoordinates, coords) : 0;
-  eventBus.emit("mouse:up", {
-    x: e.clientX,
-    y: e.clientY,
-    type: "mouse",
-    distance,
-    duration: Date.now() - pointerDownTimestamp
-  });
-  if (wasDragging || wasMultiSelecting) {
-    eventBus.emit("dragging:end");
-    return;
-  }
-  if (keyboard.isPressingSpace.value) {
-    return;
-  }
-  if (selection.editableActive.value) {
-    eventBus.emit("window:clickAway");
-    lastInteractedElement = null;
-    return;
-  }
-  const clicked = getInteractedElement(e);
-  if (clicked && pointerUpTimestamp && lastInteractedElement && (clicked.uuid === lastInteractedElement.uuid || clicked.editableFieldName === lastInteractedElement.editableFieldName)) {
-    const deltaTime = Date.now() - pointerUpTimestamp;
-    const deltaX = Math.abs(lastInteractedElement.x - e.clientX);
-    const deltaY = Math.abs(lastInteractedElement.y - e.clientY);
-    if (deltaTime < 400 && deltaX < 3 && deltaY < 3) {
-      if (clicked.editableFieldName) {
-        eventBus.emit("editable:focus", {
-          fieldName: clicked.editableFieldName,
-          uuid: clicked.uuid
-        });
-        return;
-      }
-      if (lastInteractedElement.uuid) {
-        const block = dom.findBlock(lastInteractedElement.uuid);
-        if (!block) {
-          return;
-        }
-        eventBus.emit("item:doubleClick", block);
-      }
-    }
-  }
-  lastInteractedElement = clicked;
-  pointerUpTimestamp = Date.now();
-  if (clicked?.uuid) {
-    dom.refreshBlockRect(clicked.uuid);
-    if (keyboard.isPressingControl.value || selection.isMultiSelecting.value) {
-      eventBus.emit("select:toggle", clicked.uuid);
-    } else if (keyboard.isPressingShift.value) {
-      eventBus.emit("select:shiftToggle", clicked.uuid);
-    } else {
-      eventBus.emit("select", clicked.uuid);
-    }
-    return;
-  }
-  eventBus.emit("window:clickAway");
-}
-let longPressTimeout = null;
-let touchStartInteraction = null;
-let touchStartCoords = null;
-let longPressInteraction = null;
-let touchStartTimestamp = 0;
-function onTouchStart(e) {
-  if (e.isPrimary) {
-    touchStartTimestamp = Date.now();
-  }
-  longPressInteraction = null;
-  const coords = getInteractionCoordinates(e);
-  touchStartCoords = coords;
-  eventBus.emit("mouse:down", { ...coords, type: "touch", distance: 0 });
-  if (selection.isDragging.value) {
-    return;
-  }
-  clearTimeout(longPressTimeout);
-  const interacted = getInteractedElement(e);
-  if (!interacted?.uuid) {
-    return;
-  }
-  touchStartInteraction = interacted;
-  longPressTimeout = setTimeout(() => {
-    if (touchStartInteraction?.uuid) {
-      longPressInteraction = touchStartInteraction;
-      if (selection.uuids.value.includes(touchStartInteraction.uuid) && state.editMode.value === "editing") {
-        eventBus.emit("dragging:start", {
-          items: [...selection.blocks.value],
-          coords: {
-            x: touchStartInteraction.x,
-            y: touchStartInteraction.y
-          },
-          mode: "touch"
-        });
-        return;
-      }
-      eventBus.emit("select:start", {
-        uuids: [...selection.uuids.value, touchStartInteraction.uuid],
-        mode: "touch"
-      });
-    }
-  }, 500);
-}
-function onTouchMove(e) {
-  if (!longPressTimeout || !touchStartInteraction) {
-    return;
-  }
-  const coords = getInteractionCoordinates(e);
-  const deltaX = Math.abs(coords.x - touchStartInteraction.x);
-  const deltaY = Math.abs(coords.y - touchStartInteraction.y);
-  if (deltaX > 10 || deltaY > 10) {
-    clearTimeout(longPressTimeout);
-    longPressTimeout = null;
-  }
-}
-function onTouchEnd(e) {
-  const wasDragging = selection.isDragging.value;
-  const coords = getInteractionCoordinates(e);
-  const distance = touchStartCoords ? getDistance(touchStartCoords, coords) : 0;
-  if (e.isPrimary) {
-    eventBus.emit("mouse:up", {
-      ...coords,
-      type: "touch",
-      distance,
-      duration: Date.now() - touchStartTimestamp
-    });
-  }
-  clearTimeout(longPressTimeout);
-  longPressTimeout = null;
-  if (wasDragging) {
-    return;
-  }
-  if (!touchStartCoords) {
-    return;
-  }
-  if (distance > 7) {
-    return;
-  }
-  const interacted = getInteractedElement(e);
-  if (interacted?.uuid) {
-    if (longPressInteraction && longPressInteraction.uuid === interacted.uuid) {
-      return;
-    }
-    if (selection.isMultiSelecting.value) {
-      eventBus.emit("select:toggle", interacted.uuid);
-    } else {
-      eventBus.emit("select", interacted.uuid);
-    }
-  } else {
-    eventBus.emit("window:clickAway");
-  }
-  longPressInteraction = null;
-}
-onBlokkliEvent("dragging:start", (e) => {
-  mouseStartCoordinates = e.coords;
-});
-function onClick(e) {
-  e.preventDefault();
-  e.stopImmediatePropagation();
-  e.stopPropagation();
-}
-onMounted(() => {
-  const providerElement = ui.providerElement();
-  providerElement.addEventListener("click", onClick, {
-    capture: true
-  });
-  rootEl.addEventListener("click", onClick, {
-    capture: true
-  });
-  rootEl.addEventListener("pointerdown", onPointerDown, {
-    capture: true
-  });
-  rootEl.addEventListener("pointerup", onPointerUp, {
-    capture: true
-  });
-});
-onBeforeUnmount(() => {
-  const providerElement = ui.providerElement();
-  providerElement.removeEventListener("click", onClick, {
-    capture: true
-  });
-  rootEl.removeEventListener("click", onClick, {
-    capture: true
-  });
-  rootEl.removeEventListener("pointerdown", onPointerDown, {
-    capture: true
-  });
-  rootEl.removeEventListener("pointermove", onPointerMove);
-  rootEl.removeEventListener("pointerup", onPointerUp, {
-    capture: true
-  });
-});
-</script>

package/dist/runtime/components/Edit/Features/CommandPalette/Palette/Group/index.vue

@@ -1,51 +0,0 @@
-<template>
-  <div v-if="shouldRender" class="bk-command-palette-results-group">
-    <h2>{{ label }}</h2>
-    <div>
-      <button
-        v-for="item in mapped"
-        v-show="item.visible"
-        :key="item.id"
-        :data-command-id="item.id"
-        :data-command-visible="item.visible"
-        class="bk-command"
-        :class="{ 'bk-is-focused': focusedId === item.id }"
-        @mouseenter="$emit('focus', item.id)"
-        @click.prevent="$emit('select', item.id)"
-      >
-        <div class="bk-command-icon">
-          <Icon v-if="item.icon" :name="item.icon" />
-          <ItemIcon v-else :bundle="item.bundle" />
-        </div>
-        <Highlight :text="item.label" tag="span" :positions="item.positions" />
-      </button>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed } from "#imports";
-import { Icon, ItemIcon, Highlight } from "#blokkli/components";
-const props = defineProps({
-  label: { type: String, required: true },
-  commands: { type: Array, required: true },
-  visibleIds: { type: null, required: true },
-  focusedId: { type: String, required: true }
-});
-defineEmits(["close", "focus", "select"]);
-const mapped = computed(() => {
-  return props.commands.map((v) => {
-    const found = props.visibleIds?.find((w) => w.id === v._id);
-    return {
-      ...v,
-      visible: props.visibleIds === void 0 || !!found,
-      positions: found?.positions
-    };
-  }).sort((a, b) => {
-    const indexA = props.visibleIds?.findIndex((w) => w.id === a._id) || -1;
-    const indexB = props.visibleIds?.findIndex((w) => w.id === b._id) || -1;
-    return indexA - indexB;
-  });
-});
-const shouldRender = computed(() => mapped.value.some((v) => v.visible));
-</script>

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

@@ -1,22 +0,0 @@
-<template>
-  <div v-show="!selection.isDragging.value" class="bk">
-    <div
-      v-for="area in areas"
-      :key="area.key"
-      class="bk-field-area"
-      :style="area.style"
-      :class="{ 'bk-is-active': area.key === selection.activeFieldKey.value }"
-      @click="eventBus.emit('setActiveFieldKey', area.key)"
-    >
-      <div>
-        <span>{{ area.label }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, useBlokkli } from "#imports";
-const { eventBus, selection } = useBlokkli();
-const areas = ref([]);
-</script>

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

@@ -1,41 +0,0 @@
-<template>
-  <PluginViewOption
-    id="fieldAreas"
-    v-slot="{ isActive }"
-    :label="$t('fieldAreasToggle', 'Toggle block fields')"
-    :title-on="$t('fieldAreasShow', 'Show block fields')"
-    :title-off="$t('fieldAreasHide', 'Hide block fields')"
-    :tour-text="
-  $t(
-    'fieldAreasTourText',
-    'Toggle between showing or hiding the areas where blocks can be placed.'
-  )
-"
-    icon="area"
-    key-code="I"
-  >
-    <Teleport v-if="isActive" to="body">
-      <Overlay />
-    </Teleport>
-  </PluginViewOption>
-</template>
-
-<script setup>
-import { useBlokkli, defineBlokkliFeature } from "#imports";
-import Overlay from "./Overlay/index.vue";
-import { PluginViewOption } from "#blokkli/plugins";
-defineBlokkliFeature({
-  id: "field-areas",
-  label: "Field Areas",
-  icon: "area",
-  description: "Provides a view option to render the field areas with labels.",
-  viewports: ["desktop"]
-});
-const { $t } = useBlokkli();
-</script>
-
-<script>
-export default {
-  name: "FieldAreas"
-};
-</script>

package/dist/runtime/plugins/blokkliEditable.js

@@ -1,31 +0,0 @@
-import { defineNuxtPlugin } from "#imports";
-export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.vueApp.directive("blokkli-editable", {
-    created(el, binding) {
-      if (import.meta.client) {
-        if (!window.location.search.includes("blokkliEditing")) {
-          return;
-        }
-        const fieldName = binding.value?.name || binding.arg;
-        if (!fieldName) {
-          return;
-        }
-        el.dataset.blokkliEditableField = fieldName;
-      }
-    }
-  });
-  nuxtApp.vueApp.directive("blokkli-droppable", {
-    created(el, binding) {
-      if (import.meta.client) {
-        if (!window.location.search.includes("blokkliEditing")) {
-          return;
-        }
-        const fieldName = binding.value?.name || binding.arg;
-        if (!fieldName) {
-          return;
-        }
-        el.dataset.blokkliDroppableField = fieldName;
-      }
-    }
-  });
-});