@blokkli/editor 2.0.0-alpha.16 → 2.0.0-alpha.17

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

@@ -1,185 +1,24 @@
 <template>
-  <PluginSidebar
-    v-if="debug.isEnabled.value"
-    id="debug"
-    title="Debug"
-    icon="bug"
-    weight="200"
-  >
-    <div class="bk bk-debug">
-      <section>
-        <h2>Keyboard</h2>
-        <div class="bk-debug-list">
-          <div>
-            <div>Space</div>
-            <div>{{ keyboard.isPressingSpace.value }}</div>
-          </div>
-          <div>
-            <div>Control</div>
-            <div>{{ keyboard.isPressingControl.value }}</div>
-          </div>
-        </div>
-      </section>
-
-      <section>
-        <h2>Selection</h2>
-        <div class="bk-debug-list">
-          <div>
-            <div>Count</div>
-            <div>{{ selection.uuids.value.length }}</div>
-          </div>
-          <div>
-            <div>isDragging</div>
-            <div>{{ selection.isDragging.value }}</div>
-          </div>
-          <div>
-            <div>isDraggingExisting</div>
-            <div>{{ selection.isDraggingExisting.value }}</div>
-          </div>
-          <div>
-            <div>Is multiselecting</div>
-            <div>{{ selection.isMultiSelecting.value }}</div>
-          </div>
-        </div>
-      </section>
-
-      <section>
-        <h2>Rendering</h2>
-        <div class="bk-debug-list">
-          <div v-for="overlay in debug.overlays.value" :key="overlay.id">
-            <FormToggle
-              :label="overlay.label"
-              :model-value="overlay.active"
-              @update:model-value="debug.toggleOverlay(overlay.id)"
-            />
-          </div>
-          <div>
-            <FormToggle
-              label="Set transforming"
-              :model-value="ui.isTransforming.value"
-              @update:model-value="toggleTransforming"
-            />
-          </div>
-
-          <div>
-            <FormToggle
-              label="Enable WebGL"
-              :model-value="animation.webglEnabled.value"
-              @update:model-value="toggleWebgl"
-            />
-          </div>
-        </div>
-      </section>
-
-      <section>
-        <h2>Icons</h2>
-        <div class="bk-debug-icons">
-          <div v-for="icon in iconItems" :key="icon">
-            <Icon :name="icon" />
-            <p>{{ icon }}</p>
-          </div>
-        </div>
-      </section>
-
-      <section>
-        <h2>Features</h2>
-        <div class="bk-debug-features">
-          <div v-for="feature in featuresList" :key="feature.id">
-            <div>
-              <span
-                class="bk-status-indicator"
-                :class="feature.mounted ? 'bk-is-success' : 'bk-is-danger'"
-              />
-            </div>
-            <div>
-              <h3>{{ feature.label }}</h3>
-              <div>{{ feature.id }}</div>
-              <p>{{ feature.description }}</p>
-            </div>
-          </div>
-        </div>
-      </section>
-    </div>
-  </PluginSidebar>
-
-  <PluginDebugOverlay id="viewport" title="Show viewport overlay">
-    <DebugViewport />
-  </PluginDebugOverlay>
-
-  <PluginDebugOverlay id="rects" title="Show field and block rects">
-    <DebugRects />
-  </PluginDebugOverlay>
+  <Renderer v-if="debug.isEnabled.value" :logger />
 </template>
 
 <script setup>
-import {
-  useBlokkli,
-  onMounted,
-  onBeforeUnmount,
-  defineBlokkliFeature,
-  computed
-} from "#imports";
-import { PluginSidebar, PluginDebugOverlay } from "#blokkli/plugins";
-import { Icon, FormToggle } from "#blokkli/components";
-import { icons } from "#blokkli-build/icons";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-import DebugViewport from "./Viewport/index.vue";
-import DebugRects from "./Rects/index.vue";
+import { defineBlokkliFeature, useBlokkli } from "#imports";
+import Renderer from "./Renderer.vue";
 const { logger } = defineBlokkliFeature({
   id: "debug",
   label: "Debug",
   icon: "bug",
   description: "Provides debugging functionality."
 });
-const { keyboard, selection, eventBus, features, debug, ui, animation } = useBlokkli();
-const iconItems = computed(() => Object.keys(icons));
-const featuresList = computed(() => {
-  return features.features.value.map((v) => {
-    const feature = features.mountedFeatures.value.find((f) => f.id === v.id);
-    return {
-      id: v.id,
-      label: v.label,
-      description: v.description,
-      dependencies: v.dependencies?.join(", "),
-      mounted: !!feature
-    };
-  });
-});
+const { debug } = useBlokkli();
 onBlokkliEvent("keyPressed", (e) => {
   if (e.code === "=" && e.meta) {
     e.originalEvent.preventDefault();
     debug.toggle();
   }
 });
-const onEvent = (name, data) => {
-  if (!debug.isEnabled.value) {
-    return;
-  }
-  if (name === "animationFrame" || name === "animationFrame:before" || name === "canvas:draw") {
-    return;
-  }
-  logger.log("Event: " + String(name), data);
-};
-function toggleTransforming() {
-  if (ui.isTransforming.value) {
-    ui.setTransform();
-  } else {
-    ui.setTransform("Transform plugin label");
-  }
-}
-function toggleWebgl() {
-  if (animation.webglEnabled.value) {
-    animation.webglEnabled.value = false;
-  } else {
-    animation.webglEnabled.value = true;
-  }
-}
-onMounted(() => {
-  eventBus.on("*", onEvent);
-});
-onBeforeUnmount(() => {
-  eventBus.off("*", onEvent);
-});
 </script>
 
 <script>

package/dist/runtime/components/Edit/Features/DraggingOverlay/DragItems/index.vue

@@ -7,7 +7,7 @@
     <BlokkliTransition name="drag-item">
       <div
         v-show="activeLabel"
-        class="bk-dragging-overlay-label"
+        class="bk bk-dragging-overlay-label"
         :style="{ backgroundColor: currentActiveColor }"
       >
         <Icon name="cursor-move" />

package/dist/runtime/components/Edit/Features/DraggingOverlay/DropTargets/index.vue

@@ -14,6 +14,7 @@ import {
   toShaderColor
 } from "#blokkli/helpers";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import defineRenderer from "#blokkli/helpers/composables/defineRenderer";
 import { ref, computed, useBlokkli, onBeforeUnmount } from "#imports";
 import {
   setBuffersAndAttributes,
@@ -626,6 +627,8 @@ function setHoveredFieldArea(box, mouse) {
     activeHoverField.value = candidate;
   }
 }
+let bufferInfo = null;
+let bufferChanged = false;
 onBlokkliEvent("canvas:draw", () => {
   const scale = ui.artboardScale.value;
   const offset = { ...ui.artboardOffset.value };
@@ -636,11 +639,9 @@ onBlokkliEvent("canvas:draw", () => {
     height: props.box.height / scale
   };
   const mouseAbsolute = toCanvasSpaceCoordinates(props.mouseX, props.mouseY);
-  if (gl && programInfo) {
-    gl.useProgram(programInfo.program);
-    animation.setSharedUniforms(gl, programInfo);
-  }
-  const { info, hasChanged } = collector.getBufferInfo();
+  const result = collector.getBufferInfo();
+  bufferInfo = result.info;
+  bufferChanged = result.hasChanged;
   if (!props.isTouch) {
     if (cursorIsInsideClipped()) {
       const closest = collector.getClosestIntersectingRect(
@@ -652,43 +653,46 @@ onBlokkliEvent("canvas:draw", () => {
       active.value = null;
     }
   }
-  if (programInfo && gl) {
-    setHoveredFieldArea(dragBox.value, mouseAbsolute);
-    setUniforms(programInfo, uniforms.value);
-    if (info) {
-      if (hasChanged && gl && programInfo) {
-        setBuffersAndAttributes(gl, programInfo, info);
-      }
-      if (gl) {
-        drawBufferInfo(gl, info, gl.TRIANGLES);
+  setHoveredFieldArea(dragBox.value, mouseAbsolute);
+  if (!gl && ctx) {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    const rects = Object.values(collector.rects);
+    for (let i = 0; i < rects.length; i++) {
+      const rect = rects[i];
+      if (active.value?.id === rect.id) {
+        ctx.fillStyle = rect.color;
+      } else {
+        ctx.fillStyle = rect.colorAlpha;
       }
+      ctx.fillRect(
+        (rect.x * scale + offset.x) * animation.dpi.value,
+        (rect.y * scale + offset.y) * animation.dpi.value,
+        rect.width * animation.dpi.value * scale,
+        rect.height * animation.dpi.value * scale
+      );
     }
-    return;
-  }
-  if (!ctx) {
-    return;
-  }
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  const rects = Object.values(collector.rects);
-  for (let i = 0; i < rects.length; i++) {
-    const rect = rects[i];
-    if (active.value?.id === rect.id) {
-      ctx.fillStyle = rect.color;
-    } else {
-      ctx.fillStyle = rect.colorAlpha;
-    }
-    ctx.fillRect(
-      (rect.x * scale + offset.x) * animation.dpi.value,
-      (rect.y * scale + offset.y) * animation.dpi.value,
-      rect.width * animation.dpi.value * scale,
-      rect.height * animation.dpi.value * scale
-    );
   }
 });
+if (gl && programInfo) {
+  defineRenderer("drop-targets", {
+    zIndex: 400,
+    only: true,
+    cursor: () => "grabbing",
+    render: () => {
+      gl.useProgram(programInfo.program);
+      animation.setSharedUniforms(gl, programInfo);
+      setUniforms(programInfo, uniforms.value);
+      if (!bufferInfo) {
+        return;
+      }
+      if (bufferChanged) {
+        setBuffersAndAttributes(gl, programInfo, bufferInfo);
+      }
+      drawBufferInfo(gl, bufferInfo, gl.TRIANGLES);
+    }
+  });
+}
 onBeforeUnmount(() => {
-  if (gl) {
-    gl.clear(gl.COLOR_BUFFER_BIT);
-  }
   if (ctx) {
     ctx.clearRect(0, 0, canvas.width, canvas.height);
   }

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

@@ -2,7 +2,7 @@
   <PluginItemAction
     v-if="isEditing"
     id="edit"
-    :title="$t('edit', 'Edit')"
+    :title="$t('edit', 'Edit...')"
     :disabled="!canEdit"
     meta
     key-code="E"

package/dist/runtime/components/Edit/Features/EditableField/Overlay/Frame/index.vue

@@ -4,13 +4,23 @@
       ref="iframe"
       :style="{ height: Math.max(height, 150) + 'px' }"
       :src="url"
+      @load="onIframeLoad"
     />
   </div>
 </template>
 
 <script setup>
-import { useBlokkli, ref, computed, onMounted, onBeforeUnmount } from "#imports";
-const { adapter } = useBlokkli();
+import {
+  useBlokkli,
+  ref,
+  computed,
+  onMounted,
+  onBeforeUnmount,
+  useTemplateRef
+} from "#imports";
+const { adapter, ui } = useBlokkli();
+const PROPAGATE_WHEEL = false;
+const rootElement = ui.rootElement();
 const props = defineProps({
   modelValue: { type: String, required: true },
   type: { type: String, required: true },
@@ -18,6 +28,56 @@ const props = defineProps({
   host: { type: Object, required: true },
   initialHeight: { type: Number, required: true }
 });
+const iframe = useTemplateRef("iframe");
+function onIframeLoad() {
+  if (!iframe.value || !PROPAGATE_WHEEL) {
+    return;
+  }
+  const iframeDoc = iframe.value.contentDocument;
+  if (!iframeDoc) {
+    return;
+  }
+  let ckEditor = null;
+  iframe.value.contentDocument.addEventListener("wheel", (e) => {
+    if (!ckEditor) {
+      const el = iframeDoc.querySelector(".ck-editor__editable");
+      if (el) {
+        ckEditor = el;
+      }
+    }
+    if (!ckEditor) {
+      return;
+    }
+    const scrollTop = ckEditor.scrollTop;
+    const scrollHeight = ckEditor.scrollHeight;
+    const clientHeight = ckEditor.clientHeight;
+    const isScrolledToTop = scrollTop === 0;
+    const isScrolledToBottom = scrollTop + clientHeight >= scrollHeight - 1;
+    const isScrollingDown = e.deltaY > 0;
+    const isScrollingUp = e.deltaY < 0;
+    const shouldPropagate = isScrollingUp && isScrolledToTop || isScrollingDown && isScrolledToBottom;
+    if (!shouldPropagate) {
+      return;
+    }
+    const wheelEvent = new WheelEvent("wheel", {
+      deltaX: e.deltaX,
+      deltaY: e.deltaY,
+      deltaZ: e.deltaZ,
+      deltaMode: e.deltaMode,
+      clientX: e.clientX,
+      clientY: e.clientY,
+      screenX: e.screenX,
+      screenY: e.screenY,
+      bubbles: true,
+      cancelable: true,
+      ctrlKey: e.ctrlKey,
+      shiftKey: e.shiftKey,
+      altKey: e.altKey,
+      metaKey: e.metaKey
+    });
+    rootElement?.dispatchEvent(wheelEvent);
+  });
+}
 const height = ref(props.initialHeight);
 const url = computed(() => {
   if ("itemBundle" in props.host) {
@@ -43,7 +103,7 @@ const onMessage = (e) => {
 };
 onMounted(() => {
   original.value = props.modelValue;
-  height.value = props.initialHeight + 48;
+  height.value = props.initialHeight;
   window.addEventListener("message", onMessage);
 });
 onBeforeUnmount(() => {

package/dist/runtime/components/Edit/Features/EditableField/Overlay/Plaintext/index.vue

@@ -1,11 +1,16 @@
 <template>
-  <div class="bk bk-editable-field-textarea">
+  <div
+    class="bk bk-editable-field-textarea"
+    :style="{
+  height: height + 'px'
+}"
+  >
     <textarea
+      id="bk-editable-field-textarea"
       ref="input"
       :value="modelValue"
       enterkeyhint="done"
       rows="2"
-      :style="inputStyle"
       v-bind="inputAttributes"
       @keydown.stop.capture="onKeyDown"
       @blur="onBlur"
@@ -13,12 +18,12 @@
   $emit('update:modelValue', $event.target.value)
 "
     />
-    <div :style="inputStyle" class="bk-textarea" v-html="modelValue" />
   </div>
 </template>
 
 <script setup>
-import { useBlokkli, computed } from "#imports";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import { useBlokkli, computed, useTemplateRef, ref } from "#imports";
 const { ui, selection } = useBlokkli();
 const props = defineProps({
   element: { type: null, required: true },
@@ -27,6 +32,8 @@ const props = defineProps({
   modelValue: { type: String, required: true }
 });
 const emit = defineEmits(["close", "save", "update:modelValue"]);
+const input = useTemplateRef("input");
+const height = ref(20);
 const onKeyDown = (e) => {
   if (e.code === "Escape") {
     e.preventDefault();
@@ -61,10 +68,7 @@ const onBlur = (e) => {
     emit("save");
   }, 100);
 };
-const inputStyle = computed(() => {
-  const computedStyle = window.getComputedStyle(props.element);
-  return {
-    textAlign: computedStyle.textAlign
-  };
+onBlokkliEvent("animationFrame", () => {
+  height.value = Math.max(input.value?.scrollHeight ?? 20, 20);
 });
 </script>

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

@@ -1,26 +1,15 @@
 <template>
-  <div
+  <ArtboardTooltip
     v-if="loaded"
-    ref="root"
-    :style="style"
-    class="bk-editable-field bk-control"
+    id="editable"
+    :title
+    :anchor-el="element"
+    placement-y="top"
+    class="bk-editable-field"
+    close-icon="check"
+    @close="save"
   >
     <form ref="form" class="bk-editable-field-input" @submit.prevent="close">
-      <div class="bk bk-editable-field-buttons">
-        <h3>
-          <ItemIcon :bundle="itemBundle" />
-          <span>{{ title }}</span>
-        </h3>
-        <button @click.prevent="cancel">
-          <Icon name="close" />
-          <span>{{ $t("cancel", "Cancel") }}</span>
-        </button>
-        <button :disabled="!hasChanged" type="submit" @click.prevent="save">
-          <Icon name="save" />
-          <span>{{ $t("save", "Save") }}</span>
-        </button>
-      </div>
-
       <div ref="input">
         <InputContenteditable
           v-if="config.type === 'markup'"
@@ -50,21 +39,24 @@
         />
       </div>
 
-      <div v-if="!isMarkup" class="bk bk-editable-field-info">
+      <div class="bk bk-editable-field-info">
+        <button :disabled="!hasChanged" @click.prevent="cancel">
+          {{ $t("editableFieldDiscard", "Discard") }}
+        </button>
         <div v-if="errorText" class="bk-editable-field-info-error">
           {{ errorText }}
         </div>
-        <div class="bk-editable-field-info-count">
+        <div v-if="!isMarkup" class="bk-editable-field-info-count">
           <span>{{ count }}</span>
           <span v-if="maxlength >= 1">&nbsp;/&nbsp;{{ maxlength }}</span>
         </div>
       </div>
     </form>
-  </div>
+  </ArtboardTooltip>
 </template>
 
 <script setup>
-import { Icon, ItemIcon } from "#blokkli/components";
+import { ArtboardTooltip } from "#blokkli/components";
 import {
   computed,
   ref,
@@ -74,12 +66,12 @@ import {
   useBlokkli,
   nextTick
 } from "#imports";
-import { falsy, findIdealRectPosition } from "#blokkli/helpers";
+import { falsy } from "#blokkli/helpers";
 import InputPlaintext from "./Plaintext/index.vue";
 import InputContenteditable from "./Contenteditable/index.vue";
 import InputFrame from "./Frame/index.vue";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-const { eventBus, ui, selection, state, adapter, $t, types } = useBlokkli();
+const { eventBus, selection, state, adapter, $t, types } = useBlokkli();
 const props = defineProps({
   fieldName: { type: String, required: true },
   host: { type: Object, required: true },
@@ -102,41 +94,13 @@ const save = () => {
 };
 onBlokkliEvent("window:clickAway", save);
 const getElement = () => props.element;
-const alignment = computed(() => {
-  if (props.element) {
-    const style2 = window.getComputedStyle(props.element);
-    if (style2.textAlign === "left" || style2.textAlign === "center" || style2.textAlign === "right") {
-      return style2.textAlign;
-    } else if (style2.textAlign === "start") {
-      return "left";
-    } else if (style2.textAlign === "end") {
-      return "right";
-    }
-  }
-  return "center";
-});
 const scrollHeight = ref(0);
 const loaded = ref(false);
 const originalText = ref(props.value || "");
 const modelValue = ref("");
-const width = ref(320);
 const inputStyle = ref({});
 const form = ref(null);
-const root = ref(null);
 const input = ref(null);
-const x = ref(0);
-const y = ref(0);
-const style = computed(() => {
-  if (ui.isMobile.value) {
-    return {};
-  } else {
-    return {
-      width: width.value + "px",
-      top: y.value + "px",
-      left: x.value + "px"
-    };
-  }
-});
 const hasChanged = computed(() => modelValue.value !== originalText.value);
 const itemBundle = computed(() => {
   if ("itemBundle" in props.host) {
@@ -238,29 +202,6 @@ const focusInput = (el) => {
     focusInput(iframe.contentDocument);
   }
 };
-const onAnimationFrame = () => {
-  if (ui.isMobile.value) {
-    return;
-  }
-  const elementRect = props.element.getBoundingClientRect();
-  const height = form.value?.scrollHeight || 100;
-  const newWidth = Math.min(Math.max(elementRect.width, 360), 1e3);
-  const ideal = findIdealRectPosition(
-    ui.viewportBlockingRects.value,
-    {
-      x: alignment.value === "left" ? elementRect.x : elementRect.x + (Math.max(elementRect.width, 360) - newWidth) / 2,
-      y: elementRect.y - height - 20,
-      height,
-      width: newWidth
-    },
-    ui.visibleViewportPadded.value
-  );
-  x.value = ideal.x;
-  y.value = ideal.y + height;
-  width.value = newWidth;
-};
-onAnimationFrame();
-onBlokkliEvent("animationFrame", onAnimationFrame);
 onMounted(() => {
   const el = getElement();
   if (props.isComponent) {

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

@@ -1,6 +1,6 @@
 <template>
   <Teleport to="body">
-    <BlokkliTransition name="editable" :enabled="hasTransition">
+    <BlokkliTransition name="caret-tooltip" :enabled="hasTransition">
       <Overlay v-if="editable" v-bind="editable" :key="key" @close="close" />
     </BlokkliTransition>
   </Teleport>

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

@@ -3,6 +3,7 @@
     id="history"
     v-slot="{ scrolledToEnd }"
     :title="$t('history', 'History')"
+    edit-only
     :tour-text="
   $t(
     'historyTourText',
@@ -74,9 +75,11 @@ const { state, $t, ui, selection, eventBus } = useBlokkli();
 const { mutations, currentMutationIndex, mutateWithLoadingState } = state;
 const mutationsCount = computed(() => mutations.value.length);
 const useMouseForHistory = computed(() => settings.value.useMouseButtons);
-const canUndo = computed(() => currentMutationIndex.value >= 0);
+const canUndo = computed(
+  () => currentMutationIndex.value >= 0 && state.canEdit.value
+);
 const canRedo = computed(
-  () => currentMutationIndex.value < mutationsCount.value - 1
+  () => currentMutationIndex.value < mutationsCount.value - 1 && state.canEdit.value
 );
 const selectionAtHistoryIndex = /* @__PURE__ */ new Map();
 function updateCurrentHistorySelection() {