@blokkli/editor 2.0.0-alpha.44 → 2.0.0-alpha.46

package/dist/module.d.mts

@@ -1,6 +1,6 @@
 import { NuxtModule } from 'nuxt/schema';
-import { M as ModuleOptions } from './shared/editor.BdBm1Z7C.mjs';
-export { a as ModuleHooks } from './shared/editor.BdBm1Z7C.mjs';
+import { M as ModuleOptions } from './shared/editor.BVregnEC.mjs';
+export { a as ModuleHooks } from './shared/editor.BVregnEC.mjs';
 import 'consola';
 import '../dist/global/types/definitions.js';
 import '../dist/global/types/theme.js';

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@blokkli/editor",
   "configKey": "blokkli",
-  "version": "2.0.0-alpha.44",
+  "version": "2.0.0-alpha.46",
   "compatibility": {
     "nuxt": ">=3.15.0"
   },

package/dist/module.mjs

@@ -18,7 +18,7 @@ import 'typescript';
 import 'oxc-walker';
 
 const name = "@blokkli/editor";
-const version = "2.0.0-alpha.44";
+const version = "2.0.0-alpha.46";
 
 function validateOption(optionKey, option, icons) {
   const errors = [];
@@ -1426,6 +1426,7 @@ const USED_MATERIAL_ICONS = [
   "bk_mdi_build-fill",
   "bk_mdi_calendar_clock",
   "bk_mdi_calendar_month",
+  "bk_mdi_campaign",
   "bk_mdi_chat",
   "bk_mdi_check",
   "bk_mdi_check_box",
@@ -2662,6 +2663,17 @@ export const forceDefaultLanguage = ${JSON.stringify(
     )}
 
 export const featureFragmentNames = ${JSON.stringify(featureFragmentNames)}
+
+export const textAutoReplace = ${(() => {
+      const opt = ctx.helper.options.textAutoReplace;
+      const all = opt === void 0 || opt === true;
+      const obj = typeof opt === "object" && opt !== null ? opt : null;
+      return JSON.stringify({
+        quotes: obj ? obj.quotes ?? true : all,
+        ellipsis: obj ? obj.ellipsis ?? true : all,
+        enDash: obj ? obj.enDash ?? true : all
+      });
+    })()}
 `;
   },
   (ctx) => {
@@ -2719,6 +2731,15 @@ export declare const forceDefaultLanguage: boolean
  * The fragment names provided by features.
  */
 export declare const featureFragmentNames: string[]
+
+/**
+ * Text auto-replace configuration.
+ */
+export declare const textAutoReplace: {
+  quotes: boolean
+  ellipsis: boolean
+  enDash: boolean
+}
 `;
   }
 );

package/dist/modules/agent/index.d.mts

@@ -1,4 +1,4 @@
-import { B as BlokkliModule } from '../../shared/editor.BdBm1Z7C.mjs';
+import { B as BlokkliModule } from '../../shared/editor.BVregnEC.mjs';
 import 'nuxt/schema';
 import 'consola';
 import '../../../dist/global/types/definitions.js';

package/dist/modules/charts/index.d.mts

@@ -1,4 +1,4 @@
-import { B as BlokkliModule } from '../../shared/editor.BdBm1Z7C.mjs';
+import { B as BlokkliModule } from '../../shared/editor.BVregnEC.mjs';
 import 'nuxt/schema';
 import 'consola';
 import '../../../dist/global/types/definitions.js';

package/dist/modules/drupal/graphql/mutations/add_file.graphql

@@ -8,6 +8,7 @@ mutation pbAddFile(
   $hostUuid: String!
   $hostFieldName: String!
   $afterUuid: String
+  $paragraphBundle: String!
 ) {
   state: paragraphsEditMutationState(
     entityType: $entityType
@@ -20,6 +21,7 @@ mutation pbAddFile(
       hostType: $hostType
       hostUuid: $hostUuid
       hostFieldName: $hostFieldName
+      paragraphBundle: $paragraphBundle
     ) {
       ...paragraphsBlokkliMutationResult
     }

package/dist/modules/drupal/graphql/mutations/add_image.graphql

@@ -8,6 +8,7 @@ mutation pbAddImage(
   $hostUuid: String!
   $hostFieldName: String!
   $afterUuid: String
+  $paragraphBundle: String!
 ) {
   state: paragraphsEditMutationState(
     entityType: $entityType
@@ -20,6 +21,7 @@ mutation pbAddImage(
       hostType: $hostType
       hostUuid: $hostUuid
       hostFieldName: $hostFieldName
+      paragraphBundle: $paragraphBundle
     ) {
       ...paragraphsBlokkliMutationResult
     }

package/dist/modules/drupal/graphql/mutations/add_video_remote.graphql

@@ -7,6 +7,7 @@ mutation pbAddVideoRemote(
   $hostUuid: String!
   $hostFieldName: String!
   $afterUuid: String
+  $paragraphBundle: String!
 ) {
   state: paragraphsEditMutationState(
     entityType: $entityType
@@ -18,6 +19,7 @@ mutation pbAddVideoRemote(
       hostType: $hostType
       hostUuid: $hostUuid
       hostFieldName: $hostFieldName
+      paragraphBundle: $paragraphBundle
     ) {
       ...paragraphsBlokkliMutationResult
     }

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

@@ -1,4 +1,4 @@
-import { B as BlokkliModule } from '../../shared/editor.BdBm1Z7C.mjs';
+import { B as BlokkliModule } from '../../shared/editor.BVregnEC.mjs';
 import 'nuxt/schema';
 import 'consola';
 import '../../../dist/global/types/definitions.js';

package/dist/modules/drupal/runtime/adapter/index.js

@@ -887,7 +887,8 @@ export default defineBlokkliEditAdapter(
           hostType: e.host.type,
           hostUuid: e.host.uuid,
           hostFieldName: e.host.fieldName,
-          afterUuid: e.afterUuid
+          afterUuid: e.afterUuid,
+          paragraphBundle: e.blockBundle
         }).then(mapMutation);
       } else if (e.item.type === "file" && hasMutation("pbAddFile")) {
         return useGraphqlMutation("pbAddFile", {
@@ -897,7 +898,8 @@ export default defineBlokkliEditAdapter(
           hostType: e.host.type,
           hostUuid: e.host.uuid,
           hostFieldName: e.host.fieldName,
-          afterUuid: e.afterUuid
+          afterUuid: e.afterUuid,
+          paragraphBundle: e.blockBundle
         }).then(mapMutation);
       } else if (e.item.type === "video" && hasMutation("pbAddVideoRemote")) {
         return useGraphqlMutation("pbAddVideoRemote", {
@@ -906,7 +908,8 @@ export default defineBlokkliEditAdapter(
           hostType: e.host.type,
           hostUuid: e.host.uuid,
           hostFieldName: e.host.fieldName,
-          afterUuid: e.afterUuid
+          afterUuid: e.afterUuid,
+          paragraphBundle: e.blockBundle
         }).then(mapMutation);
       }
     };

package/dist/modules/table-of-contents/index.d.mts

@@ -1,4 +1,4 @@
-import { B as BlokkliModule } from '../../shared/editor.BdBm1Z7C.mjs';
+import { B as BlokkliModule } from '../../shared/editor.BVregnEC.mjs';
 import 'nuxt/schema';
 import 'consola';
 import '../../../dist/global/types/definitions.js';

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

@@ -22,9 +22,11 @@
 </template>
 
 <script setup>
-import { useTemplateRef, ref, computed, watch, onMounted } from "#imports";
+import { useTemplateRef, ref, computed, watch, onMounted, useBlokkli } from "#imports";
 import { onBlokkliEvent } 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
 });
@@ -38,6 +40,10 @@ const props = defineProps({
   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);
@@ -45,12 +51,223 @@ 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();
@@ -66,6 +283,7 @@ function onPaste(e) {
   }
   if (!props.pasteMarkdown || !data.hasHtml()) return;
   e.preventDefault();
+  pushSnapshot();
   const markdown = data.toMarkdown();
   const el = textarea.value;
   if (!el) return;
@@ -77,23 +295,14 @@ function onPaste(e) {
   const newPos = start + markdown.length;
   requestAnimationFrame(() => {
     el.setSelectionRange(newPos, newPos);
+    pushSnapshot();
   });
 }
-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;
 });
-onMounted(() => {
-  if (props.autofocus && textarea.value) {
-    textarea.value.focus();
-  }
-});
 defineExpose({
   focus: () => textarea.value?.focus(),
   blur: () => textarea.value?.blur(),