@sendbird/actionbook-core 0.9.8 → 0.10.0

package/dist/ui/index.js

@@ -2649,6 +2649,18 @@ function useEditorView(config) {
       viewInstanceRef.current = null;
     };
   }, []);
+  const prevEditableRef = useRef(config.editable);
+  useEffect(() => {
+    if (prevEditableRef.current !== config.editable) {
+      prevEditableRef.current = config.editable;
+      const view = viewInstanceRef.current;
+      if (view) {
+        const tr = view.state.tr;
+        tr.setMeta("editableChanged", true);
+        view.dispatch(tr);
+      }
+    }
+  }, [config.editable]);
   const viewRef = useCallback((container) => {
     if (container === containerRef.current) return;
     if (viewInstanceRef.current) {
@@ -2886,14 +2898,6 @@ function createInputRulesPlugin() {
       rules.push(
         new InputRule(JUMP_POINT_RE2, (state, match, start, end) => {
           const id = match[1];
-          let exists = false;
-          state.doc.descendants((node) => {
-            if (node.type === jumpPointType && node.attrs.id === id) {
-              exists = true;
-              return false;
-            }
-          });
-          if (exists) return null;
           const tr = state.tr.delete(start, end).insert(start, jumpPointType.create({ id }));
           const afterAtom = start + 1;
           tr.insertText(" ", afterAtom);
@@ -5407,18 +5411,10 @@ function createJumpPointEditPlugin() {
           const [, id] = match;
           const jumpPointType = newState.schema.nodes.jumpPoint;
           if (jumpPointType) {
-            let duplicate = false;
-            newState.doc.descendants((node, pos) => {
-              if (node.type === jumpPointType && node.attrs.id === id) {
-                if (pos < safeFrom || pos >= safeTo) duplicate = true;
-              }
-            });
-            if (!duplicate) {
-              reconvertTr.replaceWith(safeFrom, safeTo, jumpPointType.create({ id }));
-              const mappedCursor = reconvertTr.mapping.map(cursor);
-              const clampedCursor = Math.min(mappedCursor, reconvertTr.doc.content.size);
-              reconvertTr.setSelection(TextSelection3.near(reconvertTr.doc.resolve(clampedCursor)));
-            }
+            reconvertTr.replaceWith(safeFrom, safeTo, jumpPointType.create({ id }));
+            const mappedCursor = reconvertTr.mapping.map(cursor);
+            const clampedCursor = Math.min(mappedCursor, reconvertTr.doc.content.size);
+            reconvertTr.setSelection(TextSelection3.near(reconvertTr.doc.resolve(clampedCursor)));
           }
         }
       }
@@ -5934,7 +5930,7 @@ function createJinjaDecorationPlugin() {
 // src/ui/plugin/jinjaIfBlockPlugin.tsx
 import { useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
 import { createRoot as createRoot2 } from "react-dom/client";
-import { TextSelection as TextSelection4 } from "prosemirror-state";
+import { Plugin as Plugin5, TextSelection as TextSelection4 } from "prosemirror-state";
 import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var PLACEHOLDER_TEXT = "Describe what AI agent should do when this condition is met";
 var CONDITION_PLACEHOLDER = "Write a condition in natural language";
@@ -6319,15 +6315,6 @@ function getElseBranch(view, nodePos) {
   }
   return false;
 }
-function deleteBlock(view, blockPos) {
-  const blockNode = view.state.doc.nodeAt(blockPos);
-  if (blockNode?.type.name !== "jinjaIfBlock") {
-    return false;
-  }
-  view.dispatch(view.state.tr.delete(blockPos, blockPos + blockNode.nodeSize).scrollIntoView());
-  view.focus();
-  return true;
-}
 function insertNewBranch(view, nodePos, branchType, condition = "") {
   const context = getBranchContext(view, nodePos);
   if (!context) return false;
@@ -6353,14 +6340,36 @@ function insertNewBranch(view, nodePos, branchType, condition = "") {
 function deleteBranch(view, nodePos, branchType) {
   const context = getBranchContext(view, nodePos);
   if (!context) return false;
+  const { branchNode, branchPos, branchIndex, blockNode, blockPos } = context;
+  const branchContent = branchNode.content;
   if (branchType === "if") {
-    if (context.blockNode.childCount === 1) {
-      return deleteBlock(view, context.blockPos);
+    if (blockNode.childCount === 1) {
+      const tr2 = view.state.tr;
+      if (isBranchBodyEmpty(branchNode)) {
+        tr2.replaceWith(blockPos, blockPos + blockNode.nodeSize, view.state.schema.nodes.paragraph.create());
+        tr2.setSelection(TextSelection4.near(tr2.doc.resolve(blockPos)));
+      } else {
+        tr2.replaceWith(blockPos, blockPos + blockNode.nodeSize, branchContent);
+        tr2.setSelection(TextSelection4.near(tr2.doc.resolve(blockPos)));
+      }
+      view.dispatch(tr2.scrollIntoView());
+      view.focus();
+      return true;
     }
-    const nextBranch = context.blockNode.child(context.branchIndex + 1);
+    const nextBranch = blockNode.child(branchIndex + 1);
     const promotedCondition = typeof nextBranch.attrs.condition === "string" ? nextBranch.attrs.condition : "";
-    const tr = view.state.tr.delete(context.branchPos, context.branchPos + context.branchNode.nodeSize);
-    tr.setNodeMarkup(context.branchPos, void 0, {
+    const tr = view.state.tr;
+    if (!isBranchBodyEmpty(branchNode)) {
+      const nextBranchPos = branchPos + branchNode.nodeSize;
+      const nextBranchContentStart = nextBranchPos + 1;
+      for (let i = branchContent.childCount - 1; i >= 0; i--) {
+        tr.insert(nextBranchContentStart, branchContent.child(i));
+      }
+    }
+    const mappedBranchPos = tr.mapping.map(branchPos);
+    const mappedBranchEnd = tr.mapping.map(branchPos + branchNode.nodeSize);
+    tr.delete(mappedBranchPos, mappedBranchEnd);
+    tr.setNodeMarkup(mappedBranchPos, void 0, {
       ...nextBranch.attrs,
       branchType: "if",
       condition: promotedCondition
@@ -6369,7 +6378,23 @@ function deleteBranch(view, nodePos, branchType) {
     view.focus();
     return true;
   }
-  view.dispatch(view.state.tr.delete(context.branchPos, context.branchPos + context.branchNode.nodeSize).scrollIntoView());
+  if (!isBranchBodyEmpty(branchNode) && branchIndex > 0) {
+    const prevBranch = blockNode.child(branchIndex - 1);
+    const prevBranchPos = branchPos - prevBranch.nodeSize;
+    const prevBranchContentEnd = prevBranchPos + prevBranch.nodeSize - 1;
+    const tr = view.state.tr;
+    for (let i = 0; i < branchContent.childCount; i++) {
+      tr.insert(prevBranchContentEnd + i, branchContent.child(i));
+    }
+    const mappedBranchPos = tr.mapping.map(branchPos);
+    const mappedBranchEnd = tr.mapping.map(branchPos + branchNode.nodeSize);
+    tr.delete(mappedBranchPos, mappedBranchEnd);
+    tr.setSelection(TextSelection4.near(tr.doc.resolve(tr.mapping.map(prevBranchContentEnd)), -1));
+    view.dispatch(tr.scrollIntoView());
+    view.focus();
+    return true;
+  }
+  view.dispatch(view.state.tr.delete(branchPos, branchPos + branchNode.nodeSize).scrollIntoView());
   view.focus();
   return true;
 }
@@ -6388,7 +6413,8 @@ function ConditionDisplay({
   branchType,
   condition,
   editable = true,
-  onConditionChange
+  onConditionChange,
+  onBackspaceEmpty
 }) {
   const [isEditing, setIsEditing] = useState3(false);
   const [draftValue, setDraftValue] = useState3(condition);
@@ -6443,6 +6469,10 @@ function ConditionDisplay({
             event.preventDefault();
             cancel();
           }
+          if (event.key === "Backspace" && draftValue === "" && onBackspaceEmpty) {
+            event.preventDefault();
+            onBackspaceEmpty();
+          }
         }
       }
     );
@@ -6562,7 +6592,8 @@ function JinjaBranchHeader({
           branchType,
           condition,
           editable,
-          onConditionChange
+          onConditionChange,
+          onBackspaceEmpty: onDelete
         }
       ),
       editable ? /* @__PURE__ */ jsxs5("div", { className: "jinja-branch-actions", ref: kebabRef, children: [
@@ -6692,10 +6723,13 @@ var JinjaIfBranchView = class {
     this.root = createRoot2(this.headerContainer);
     this._onSiblingsChanged = () => this.render();
     this.dom.addEventListener("jinja-siblings-changed", this._onSiblingsChanged);
+    this._onEditableChanged = () => this.render();
+    this.dom.addEventListener("jinja-editable-changed", this._onEditableChanged);
     this.syncDOM();
     this.render();
   }
   _onSiblingsChanged = null;
+  _onEditableChanged = null;
   syncDOM() {
     const branchType = this.node.attrs.branchType;
     this.dom.className = `jinja-branch jinja-branch-${branchType}`;
@@ -6781,13 +6815,37 @@ var JinjaIfBranchView = class {
     if (this._onSiblingsChanged) {
       this.dom.removeEventListener("jinja-siblings-changed", this._onSiblingsChanged);
     }
+    if (this._onEditableChanged) {
+      this.dom.removeEventListener("jinja-editable-changed", this._onEditableChanged);
+    }
     StyleManager.release();
     setTimeout(() => this.root.unmount(), 0);
   }
 };
+function createEditableWatcherPlugin() {
+  let lastEditable = null;
+  return new Plugin5({
+    view(editorView) {
+      lastEditable = editorView.editable;
+      return {
+        update(view) {
+          const currentEditable = view.editable;
+          if (lastEditable !== null && lastEditable !== currentEditable) {
+            const event = new Event("jinja-editable-changed", { bubbles: true });
+            view.dom.querySelectorAll("[data-jinja-branch]").forEach((el) => {
+              el.dispatchEvent(event);
+            });
+          }
+          lastEditable = currentEditable;
+        }
+      };
+    }
+  });
+}
 function createJinjaIfBlockPlugin() {
   return {
     name: "jinjaIfBlock",
+    plugins: () => [createEditableWatcherPlugin()],
     nodeViews: () => ({
       jinjaIfBlock: (() => new JinjaIfBlockView()),
       jinjaIfBranch: ((node, view, getPos) => new JinjaIfBranchView(node, view, getPos))
@@ -6797,7 +6855,7 @@ function createJinjaIfBlockPlugin() {
 
 // src/ui/plugin/linkPlugin.ts
 import { InputRule as InputRule2, inputRules as inputRules2 } from "prosemirror-inputrules";
-import { Plugin as Plugin5, PluginKey as PluginKey5, TextSelection as TextSelection5 } from "prosemirror-state";
+import { Plugin as Plugin6, PluginKey as PluginKey5, TextSelection as TextSelection5 } from "prosemirror-state";
 var LINK_INPUT_RE = /\\?\[([^\]]*?)\\?\]\(([^)\s]*?)(?:\s+"([^"]*)")?\)$/;
 var LINK_FULL_RE = /^\\?\[([^\]]*?)\\?\]\(([^)\s]*?)(?:\s+"([^"]*)")?\)$/;
 var linkEditKey = new PluginKey5("linkEdit");
@@ -6848,7 +6906,7 @@ function explodeLinkToRaw(state) {
   return tr;
 }
 function createLinkEditPlugin() {
-  return new Plugin5({
+  return new Plugin6({
     key: linkEditKey,
     state: {
       init: () => ({ rawRange: null }),
@@ -6918,7 +6976,7 @@ function createLinkInputRule() {
   );
 }
 function createLinkClickPlugin() {
-  return new Plugin5({
+  return new Plugin6({
     key: new PluginKey5("linkClick"),
     props: {
       handleDOMEvents: {
@@ -6971,7 +7029,7 @@ function createLinkPlugin() {
 }
 
 // src/ui/plugin/dragHandlePlugin.ts
-import { Plugin as Plugin6, PluginKey as PluginKey6 } from "prosemirror-state";
+import { Plugin as Plugin7, PluginKey as PluginKey6 } from "prosemirror-state";
 var PLUGIN_KEY = new PluginKey6("dragHandle");
 var GRIP_SVG = `<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
   <circle cx="4" cy="2.5" r="1.2"/><circle cx="8" cy="2.5" r="1.2"/>
@@ -7779,7 +7837,7 @@ function createDragHandlePlugin() {
     plugins: () => {
       let controller = null;
       return [
-        new Plugin6({
+        new Plugin7({
           key: PLUGIN_KEY,
           view(editorView) {
             controller = new DragHandleController(editorView);
@@ -7902,7 +7960,7 @@ function createTodoNodeViewPlugin() {
 }
 
 // src/ui/plugin/placeholderPlugin.ts
-import { Plugin as Plugin7, PluginKey as PluginKey7 } from "prosemirror-state";
+import { Plugin as Plugin8, PluginKey as PluginKey7 } from "prosemirror-state";
 import { Decoration as Decoration4, DecorationSet as DecorationSet4 } from "prosemirror-view";
 var PLACEHOLDER_TEXT2 = "Type to start writing, or press  /  to insert an action.";
 var pluginKey2 = new PluginKey7("placeholder");
@@ -7931,7 +7989,7 @@ function createPlaceholderPlugin() {
   return {
     name: "placeholder",
     plugins: () => [
-      new Plugin7({
+      new Plugin8({
         key: pluginKey2,
         state: {
           init(_, state) {
@@ -7955,7 +8013,7 @@ function createPlaceholderPlugin() {
 }
 
 // src/ui/plugin/slashCommandPlugin.ts
-import { Plugin as Plugin8, PluginKey as PluginKey8 } from "prosemirror-state";
+import { Plugin as Plugin9, PluginKey as PluginKey8 } from "prosemirror-state";
 var slashCommandKey = new PluginKey8("slashCommand");
 var TRIGGER_RE = /(?:^|\s)(\/[^\s]*)$/;
 function deriveState(state, dismissedFrom) {
@@ -7983,7 +8041,7 @@ function deriveState(state, dismissedFrom) {
   };
 }
 function createSlashCommandPlugin() {
-  const plugin = new Plugin8({
+  const plugin = new Plugin9({
     key: slashCommandKey,
     state: {
       init(_, state) {
@@ -9738,7 +9796,7 @@ function FloatingMenu({ view, editorState }) {
 }
 
 // src/ui/plugin/inlineSuggestPlugin.ts
-import { Plugin as Plugin9, PluginKey as PluginKey9 } from "prosemirror-state";
+import { Plugin as Plugin10, PluginKey as PluginKey9 } from "prosemirror-state";
 import { Decoration as Decoration5, DecorationSet as DecorationSet5 } from "prosemirror-view";
 var inlineSuggestKey = new PluginKey9("inlineSuggest");
 var DEBOUNCE_MS = 600;
@@ -9747,7 +9805,7 @@ function createInlineSuggestPlugin(provider, endpoint, options) {
   return {
     name: "inlineSuggest",
     plugins: () => [
-      new Plugin9({
+      new Plugin10({
         key: inlineSuggestKey,
         state: {
           init: () => ({ suggestion: null, anchorPos: null }),