@sendbird/actionbook-core 0.9.1 → 0.9.3

package/dist/ui/index.js

@@ -456,6 +456,205 @@ function createPluginArray(plugins) {
 // src/ui/components/ActionbookRenderer.tsx
 import React from "react";
 
+// src/jinja/conditionHighlighter.ts
+var KEYWORDS = {
+  and: "AND",
+  or: "OR",
+  not: "NOT",
+  in: "IN",
+  is: "IS",
+  True: "BOOL",
+  False: "BOOL",
+  true: "BOOL",
+  false: "BOOL",
+  None: "NONE",
+  null: "NONE"
+};
+var CATEGORY_BY_TYPE = {
+  STRING: "value",
+  NUMBER: "value",
+  BOOL: "value",
+  NONE: "value",
+  IDENT: "variable",
+  AND: "operator",
+  OR: "operator",
+  NOT: "operator",
+  IN: "operator",
+  IS: "operator",
+  EQ: "operator",
+  NEQ: "operator",
+  LT: "operator",
+  GT: "operator",
+  LTE: "operator",
+  GTE: "operator",
+  LPAREN: "punctuation",
+  RPAREN: "punctuation"
+};
+var NEGATIVE_NUMBER_PRECEDERS = /* @__PURE__ */ new Set([
+  "AND",
+  "OR",
+  "NOT",
+  "IN",
+  "IS",
+  "EQ",
+  "NEQ",
+  "LT",
+  "GT",
+  "LTE",
+  "GTE",
+  "LPAREN"
+]);
+function canStartNegativeNumber(tokens) {
+  if (tokens.length === 0) {
+    return true;
+  }
+  const previous = tokens[tokens.length - 1];
+  return NEGATIVE_NUMBER_PRECEDERS.has(previous.type);
+}
+function finalizeTokens(input, rawTokens) {
+  const highlighted = [];
+  for (let i = 0; i < rawTokens.length; i++) {
+    const token = rawTokens[i];
+    const next = rawTokens[i + 1];
+    if (token.type === "IS" && next?.type === "NOT") {
+      highlighted.push({
+        text: input.slice(token.start, next.end),
+        start: token.start,
+        end: next.end,
+        category: "operator"
+      });
+      i++;
+      continue;
+    }
+    highlighted.push({
+      text: token.text,
+      start: token.start,
+      end: token.end,
+      category: CATEGORY_BY_TYPE[token.type]
+    });
+  }
+  return highlighted;
+}
+function tokenizeCondition(input) {
+  const rawTokens = [];
+  let i = 0;
+  while (i < input.length) {
+    const char = input[i];
+    if (/\s/.test(char)) {
+      i++;
+      continue;
+    }
+    if (char === '"' || char === "'") {
+      const start = i;
+      const quote = char;
+      i++;
+      while (i < input.length) {
+        if (input[i] === "\\" && i + 1 < input.length) {
+          i += 2;
+          continue;
+        }
+        if (input[i] === quote) {
+          i++;
+          rawTokens.push({
+            type: "STRING",
+            text: input.slice(start, i),
+            start,
+            end: i
+          });
+          break;
+        }
+        i++;
+      }
+      if (rawTokens[rawTokens.length - 1]?.start !== start) {
+        return finalizeTokens(input, rawTokens);
+      }
+      continue;
+    }
+    if (/[0-9]/.test(char) || char === "-" && i + 1 < input.length && /[0-9]/.test(input[i + 1]) && canStartNegativeNumber(rawTokens)) {
+      const start = i;
+      if (input[i] === "-") {
+        i++;
+      }
+      while (i < input.length && /[0-9]/.test(input[i])) {
+        i++;
+      }
+      if (i < input.length && input[i] === ".") {
+        i++;
+        while (i < input.length && /[0-9]/.test(input[i])) {
+          i++;
+        }
+      }
+      rawTokens.push({
+        type: "NUMBER",
+        text: input.slice(start, i),
+        start,
+        end: i
+      });
+      continue;
+    }
+    if (/[a-zA-Z_]/.test(char)) {
+      const start = i;
+      i++;
+      while (i < input.length && /[a-zA-Z0-9_.]/.test(input[i])) {
+        i++;
+      }
+      const text2 = input.slice(start, i);
+      rawTokens.push({
+        type: KEYWORDS[text2] ?? "IDENT",
+        text: text2,
+        start,
+        end: i
+      });
+      continue;
+    }
+    if (i + 1 < input.length) {
+      const twoChar = input.slice(i, i + 2);
+      if (twoChar === "==") {
+        rawTokens.push({ type: "EQ", text: twoChar, start: i, end: i + 2 });
+        i += 2;
+        continue;
+      }
+      if (twoChar === "!=") {
+        rawTokens.push({ type: "NEQ", text: twoChar, start: i, end: i + 2 });
+        i += 2;
+        continue;
+      }
+      if (twoChar === "<=") {
+        rawTokens.push({ type: "LTE", text: twoChar, start: i, end: i + 2 });
+        i += 2;
+        continue;
+      }
+      if (twoChar === ">=") {
+        rawTokens.push({ type: "GTE", text: twoChar, start: i, end: i + 2 });
+        i += 2;
+        continue;
+      }
+    }
+    if (char === "<") {
+      rawTokens.push({ type: "LT", text: char, start: i, end: i + 1 });
+      i++;
+      continue;
+    }
+    if (char === ">") {
+      rawTokens.push({ type: "GT", text: char, start: i, end: i + 1 });
+      i++;
+      continue;
+    }
+    if (char === "(") {
+      rawTokens.push({ type: "LPAREN", text: char, start: i, end: i + 1 });
+      i++;
+      continue;
+    }
+    if (char === ")") {
+      rawTokens.push({ type: "RPAREN", text: char, start: i, end: i + 1 });
+      i++;
+      continue;
+    }
+    return finalizeTokens(input, rawTokens);
+  }
+  return finalizeTokens(input, rawTokens);
+}
+
 // src/ui/components/icons.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 function IconTool({ size = 16, fill = "currentColor", style }) {
@@ -740,8 +939,174 @@ function renderInline(node, key2, renderNode) {
   if (renderNode) return renderNode(node, defaultRender);
   return defaultRender();
 }
-function renderInlineContent(content, keyPrefix, renderNode) {
-  return content.map((node, i) => renderInline(node, `${keyPrefix}-${i}`, renderNode));
+function renderInlineContent(content, keyPrefix, renderNode) {
+  return content.map((node, i) => renderInline(node, `${keyPrefix}-${i}`, renderNode));
+}
+var JINJA_RENDERER_STYLE_ID = "ab-renderer-jinja-styles";
+var JINJA_RENDERER_STYLES = `
+.ab-r-jinja-block {
+  margin: 8px 0;
+}
+
+.ab-r-jinja-branch {
+  position: relative;
+}
+
+.ab-r-jinja-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px;
+  border: 1px solid #E0E0E0;
+  border-radius: 4px;
+  background: #FFFFFF;
+}
+
+.ab-r-jinja-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  padding: 0 8px;
+  border-radius: 4px;
+  font-family: "Roboto Mono", monospace;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 20px;
+  letter-spacing: -0.3px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.ab-r-jinja-badge-if,
+.ab-r-jinja-badge-elif {
+  background: #E7F1FF;
+  color: #0D0D0D;
+}
+
+.ab-r-jinja-badge-else {
+  background: #F7F7F7;
+  color: #424242;
+}
+
+.ab-r-jinja-condition {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  font-family: "Roboto Mono", monospace;
+  font-size: 13px;
+  line-height: 20px;
+  letter-spacing: -0.3px;
+  color: #0D0D0D;
+}
+
+.ab-r-jinja-otherwise {
+  flex: 1;
+  color: #858585;
+  font-family: "Roboto Mono", monospace;
+  font-size: 13px;
+  line-height: 20px;
+  letter-spacing: -0.3px;
+}
+
+.ab-r-jinja-body {
+  display: flex;
+  gap: 12px;
+  padding: 0 8px;
+  min-height: 32px;
+}
+
+.ab-r-jinja-divider-col {
+  width: 32px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+}
+
+.ab-r-jinja-divider {
+  width: 1px;
+  background: #E0E0E0;
+}
+
+.ab-r-jinja-branch-last .ab-r-jinja-divider-col {
+  align-items: flex-start;
+  padding-left: 16px;
+}
+
+.ab-r-jinja-branch-last .ab-r-jinja-divider {
+  width: 16px;
+  height: 28px;
+  background: none;
+  border-left: 1px solid #E0E0E0;
+  border-bottom: 1px solid #E0E0E0;
+  border-bottom-left-radius: 8px;
+}
+
+.ab-r-jinja-content {
+  flex: 1;
+  min-width: 0;
+  padding: 12px 0;
+}
+
+.ab-r-jinja-token-variable { color: #4141B2; }
+.ab-r-jinja-token-operator { color: #858585; }
+.ab-r-jinja-token-value { color: #0D0D0D; }
+.ab-r-jinja-token-punctuation { color: #858585; }
+`;
+var jinjaRendererStyleRefCount = 0;
+var jinjaRendererStyleEl = null;
+function ensureJinjaRendererStyles() {
+  if (jinjaRendererStyleRefCount++ > 0) return;
+  if (typeof document === "undefined") return;
+  const existing = document.getElementById(JINJA_RENDERER_STYLE_ID);
+  if (existing instanceof HTMLStyleElement) {
+    jinjaRendererStyleEl = existing;
+    return;
+  }
+  jinjaRendererStyleEl = document.createElement("style");
+  jinjaRendererStyleEl.id = JINJA_RENDERER_STYLE_ID;
+  jinjaRendererStyleEl.textContent = JINJA_RENDERER_STYLES;
+  document.head.appendChild(jinjaRendererStyleEl);
+}
+function renderConditionTokens(condition) {
+  const tokens = tokenizeCondition(condition);
+  return tokens.map((token, i) => /* @__PURE__ */ jsx2("span", { className: `ab-r-jinja-token-${token.category}`, children: token.text }, `t-${i}-${token.start}`));
+}
+function renderJinjaBranch(branch, key2, isLast, renderNode) {
+  const branchType = branch.branchType;
+  const badgeLabel = branchType === "elif" ? "ELSE IF" : branchType.toUpperCase();
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: `ab-r-jinja-branch${isLast ? " ab-r-jinja-branch-last" : ""}`,
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: "ab-r-jinja-header", children: [
+          /* @__PURE__ */ jsx2("span", { className: `ab-r-jinja-badge ab-r-jinja-badge-${branchType}`, children: badgeLabel }),
+          branchType === "else" ? /* @__PURE__ */ jsx2("span", { className: "ab-r-jinja-otherwise", children: "otherwise" }) : /* @__PURE__ */ jsx2("span", { className: "ab-r-jinja-condition", children: branch.condition ? renderConditionTokens(branch.condition) : null })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "ab-r-jinja-body", children: [
+          /* @__PURE__ */ jsx2("div", { className: "ab-r-jinja-divider-col", children: /* @__PURE__ */ jsx2("div", { className: "ab-r-jinja-divider" }) }),
+          /* @__PURE__ */ jsx2("div", { className: "ab-r-jinja-content", children: branch.content.map((child, i) => renderBlock(child, `${key2}-c${i}`, renderNode)) })
+        ] })
+      ]
+    },
+    key2
+  );
+}
+function renderJinjaIfBlock(node, key2, renderNode) {
+  ensureJinjaRendererStyles();
+  return /* @__PURE__ */ jsx2("div", { className: "ab-r-jinja-block", children: node.branches.map(
+    (branch, i) => renderJinjaBranch(
+      branch,
+      `${key2}-b${i}`,
+      i === node.branches.length - 1,
+      renderNode
+    )
+  ) }, key2);
 }
 function renderBlock(node, key2, renderNode) {
   const defaultRender = () => {
@@ -774,6 +1139,8 @@ function renderBlock(node, key2, renderNode) {
         return /* @__PURE__ */ jsx2("li", { children: node.content.map((child, i) => renderBlock(child, `${key2}-${i}`, renderNode)) }, key2);
       case "blockquote":
         return /* @__PURE__ */ jsx2("blockquote", { children: node.content.map((child, i) => renderBlock(child, `${key2}-${i}`, renderNode)) }, key2);
+      case "jinjaIfBlock":
+        return renderJinjaIfBlock(node, key2, renderNode);
       case "horizontalRule":
         return /* @__PURE__ */ jsx2("hr", {}, key2);
       case "table":
@@ -4336,205 +4703,6 @@ function analyzeJinjaBlocks(doc2) {
   });
 }
 
-// src/jinja/conditionHighlighter.ts
-var KEYWORDS = {
-  and: "AND",
-  or: "OR",
-  not: "NOT",
-  in: "IN",
-  is: "IS",
-  True: "BOOL",
-  False: "BOOL",
-  true: "BOOL",
-  false: "BOOL",
-  None: "NONE",
-  null: "NONE"
-};
-var CATEGORY_BY_TYPE = {
-  STRING: "value",
-  NUMBER: "value",
-  BOOL: "value",
-  NONE: "value",
-  IDENT: "variable",
-  AND: "operator",
-  OR: "operator",
-  NOT: "operator",
-  IN: "operator",
-  IS: "operator",
-  EQ: "operator",
-  NEQ: "operator",
-  LT: "operator",
-  GT: "operator",
-  LTE: "operator",
-  GTE: "operator",
-  LPAREN: "punctuation",
-  RPAREN: "punctuation"
-};
-var NEGATIVE_NUMBER_PRECEDERS = /* @__PURE__ */ new Set([
-  "AND",
-  "OR",
-  "NOT",
-  "IN",
-  "IS",
-  "EQ",
-  "NEQ",
-  "LT",
-  "GT",
-  "LTE",
-  "GTE",
-  "LPAREN"
-]);
-function canStartNegativeNumber(tokens) {
-  if (tokens.length === 0) {
-    return true;
-  }
-  const previous = tokens[tokens.length - 1];
-  return NEGATIVE_NUMBER_PRECEDERS.has(previous.type);
-}
-function finalizeTokens(input, rawTokens) {
-  const highlighted = [];
-  for (let i = 0; i < rawTokens.length; i++) {
-    const token = rawTokens[i];
-    const next = rawTokens[i + 1];
-    if (token.type === "IS" && next?.type === "NOT") {
-      highlighted.push({
-        text: input.slice(token.start, next.end),
-        start: token.start,
-        end: next.end,
-        category: "operator"
-      });
-      i++;
-      continue;
-    }
-    highlighted.push({
-      text: token.text,
-      start: token.start,
-      end: token.end,
-      category: CATEGORY_BY_TYPE[token.type]
-    });
-  }
-  return highlighted;
-}
-function tokenizeCondition(input) {
-  const rawTokens = [];
-  let i = 0;
-  while (i < input.length) {
-    const char = input[i];
-    if (/\s/.test(char)) {
-      i++;
-      continue;
-    }
-    if (char === '"' || char === "'") {
-      const start = i;
-      const quote = char;
-      i++;
-      while (i < input.length) {
-        if (input[i] === "\\" && i + 1 < input.length) {
-          i += 2;
-          continue;
-        }
-        if (input[i] === quote) {
-          i++;
-          rawTokens.push({
-            type: "STRING",
-            text: input.slice(start, i),
-            start,
-            end: i
-          });
-          break;
-        }
-        i++;
-      }
-      if (rawTokens[rawTokens.length - 1]?.start !== start) {
-        return finalizeTokens(input, rawTokens);
-      }
-      continue;
-    }
-    if (/[0-9]/.test(char) || char === "-" && i + 1 < input.length && /[0-9]/.test(input[i + 1]) && canStartNegativeNumber(rawTokens)) {
-      const start = i;
-      if (input[i] === "-") {
-        i++;
-      }
-      while (i < input.length && /[0-9]/.test(input[i])) {
-        i++;
-      }
-      if (i < input.length && input[i] === ".") {
-        i++;
-        while (i < input.length && /[0-9]/.test(input[i])) {
-          i++;
-        }
-      }
-      rawTokens.push({
-        type: "NUMBER",
-        text: input.slice(start, i),
-        start,
-        end: i
-      });
-      continue;
-    }
-    if (/[a-zA-Z_]/.test(char)) {
-      const start = i;
-      i++;
-      while (i < input.length && /[a-zA-Z0-9_.]/.test(input[i])) {
-        i++;
-      }
-      const text2 = input.slice(start, i);
-      rawTokens.push({
-        type: KEYWORDS[text2] ?? "IDENT",
-        text: text2,
-        start,
-        end: i
-      });
-      continue;
-    }
-    if (i + 1 < input.length) {
-      const twoChar = input.slice(i, i + 2);
-      if (twoChar === "==") {
-        rawTokens.push({ type: "EQ", text: twoChar, start: i, end: i + 2 });
-        i += 2;
-        continue;
-      }
-      if (twoChar === "!=") {
-        rawTokens.push({ type: "NEQ", text: twoChar, start: i, end: i + 2 });
-        i += 2;
-        continue;
-      }
-      if (twoChar === "<=") {
-        rawTokens.push({ type: "LTE", text: twoChar, start: i, end: i + 2 });
-        i += 2;
-        continue;
-      }
-      if (twoChar === ">=") {
-        rawTokens.push({ type: "GTE", text: twoChar, start: i, end: i + 2 });
-        i += 2;
-        continue;
-      }
-    }
-    if (char === "<") {
-      rawTokens.push({ type: "LT", text: char, start: i, end: i + 1 });
-      i++;
-      continue;
-    }
-    if (char === ">") {
-      rawTokens.push({ type: "GT", text: char, start: i, end: i + 1 });
-      i++;
-      continue;
-    }
-    if (char === "(") {
-      rawTokens.push({ type: "LPAREN", text: char, start: i, end: i + 1 });
-      i++;
-      continue;
-    }
-    if (char === ")") {
-      rawTokens.push({ type: "RPAREN", text: char, start: i, end: i + 1 });
-      i++;
-      continue;
-    }
-    return finalizeTokens(input, rawTokens);
-  }
-  return finalizeTokens(input, rawTokens);
-}
-
 // src/tree/documentTree.ts
 var MAX_DEPTH6 = 128;
 function extractInlineItems(content, blockIndex) {
@@ -7185,6 +7353,7 @@ function createTodoNodeViewPlugin() {
 }
 
 // src/ui/plugin/noteBlockPlugin.tsx
+import { Selection } from "prosemirror-state";
 var NoteBlockView = class {
   dom;
   contentDOM;
@@ -7192,41 +7361,109 @@ var NoteBlockView = class {
     this.dom = document.createElement("div");
     this.dom.setAttribute("data-note-block", "");
     this.dom.className = "ab-note-block";
-    this.dom.style.cssText = `
-      position: relative;
-      margin: 8px 0;
-      padding: 12px 16px 12px 16px;
-      background: rgba(0, 0, 0, 0.015);
-      border-top: 1px solid rgba(0, 0, 0, 0.08);
-      color: #999;
-      font-style: italic;
-    `;
+    this.dom.style.cssText = [
+      "position: relative",
+      "margin: 8px 0",
+      "padding: 16px 24px",
+      "background: #fff",
+      "border: 1px dashed #ccc",
+      "border-radius: 4px",
+      "display: flex",
+      "flex-direction: column",
+      "gap: 4px"
+    ].join(";");
     const label = document.createElement("span");
     label.contentEditable = "false";
     label.textContent = "Note";
-    label.style.cssText = `
-      display: inline-block;
-      font-size: 11px;
-      font-weight: 600;
-      font-style: normal;
-      color: #aaa;
-      background: rgba(0, 0, 0, 0.03);
-      border: 1px solid rgba(0, 0, 0, 0.1);
-      border-radius: 3px;
-      padding: 1px 6px;
-      margin-bottom: 6px;
-      user-select: none;
-      line-height: 1.4;
-    `;
+    label.style.cssText = [
+      "display: inline-flex",
+      "align-items: center",
+      "justify-content: center",
+      "align-self: flex-start",
+      "font-size: 12px",
+      "font-weight: 400",
+      "font-style: normal",
+      "line-height: 16px",
+      "color: #858585",
+      "background: #f7f7f7",
+      "border: 1px solid #e0e0e0",
+      "border-radius: 4px",
+      "padding: 2px 4px",
+      "user-select: none"
+    ].join(";");
     this.dom.appendChild(label);
     this.contentDOM = document.createElement("div");
     this.contentDOM.className = "ab-note-block-content";
+    this.contentDOM.style.cssText = [
+      "font-size: 14px",
+      "font-style: italic",
+      "font-weight: 400",
+      "line-height: 20px",
+      "letter-spacing: -0.1px",
+      "color: #858585"
+    ].join(";");
     this.dom.appendChild(this.contentDOM);
   }
 };
+var emptyEnterCount = 0;
+var lastEnterTime = 0;
+var exitNoteBlockOnEnter = (state, dispatch) => {
+  const { $from } = state.selection;
+  let noteBlockDepth = -1;
+  for (let d = $from.depth; d > 0; d--) {
+    if ($from.node(d).type.name === "noteBlock") {
+      noteBlockDepth = d;
+      break;
+    }
+  }
+  if (noteBlockDepth < 0) {
+    emptyEnterCount = 0;
+    return false;
+  }
+  const parentNode = $from.parent;
+  if (parentNode.type.name !== "paragraph" || parentNode.content.size !== 0) {
+    emptyEnterCount = 0;
+    return false;
+  }
+  const now = Date.now();
+  if (now - lastEnterTime > 2e3) {
+    emptyEnterCount = 0;
+  }
+  lastEnterTime = now;
+  emptyEnterCount++;
+  if (emptyEnterCount < 2) {
+    return false;
+  }
+  emptyEnterCount = 0;
+  if (!dispatch) return true;
+  const paragraphStart = $from.before($from.depth);
+  const paragraphEnd = $from.after($from.depth);
+  const tr = state.tr.delete(paragraphStart, paragraphEnd);
+  const mappedFrom = tr.mapping.map($from.before($from.depth));
+  const $mapped = tr.doc.resolve(Math.min(mappedFrom, tr.doc.content.size));
+  for (let d = $mapped.depth; d > 0; d--) {
+    if ($mapped.node(d).type.name === "noteBlock") {
+      const lastChild = $mapped.node(d).lastChild;
+      if (lastChild && lastChild.type.name === "paragraph" && lastChild.content.size === 0) {
+        const lastChildPos = $mapped.end(d) - lastChild.nodeSize;
+        tr.delete(lastChildPos, lastChildPos + lastChild.nodeSize);
+      }
+      break;
+    }
+  }
+  const noteBlockEnd = tr.mapping.map($from.after(noteBlockDepth));
+  const newParagraph = state.schema.nodes.paragraph.create();
+  tr.insert(noteBlockEnd, newParagraph);
+  tr.setSelection(Selection.near(tr.doc.resolve(noteBlockEnd + 1)));
+  dispatch(tr.scrollIntoView());
+  return true;
+};
 function createNoteBlockPlugin() {
   return {
     name: "noteBlockNodeView",
+    keymap: () => ({
+      Enter: exitNoteBlockOnEnter
+    }),
     nodeViews: () => ({
       noteBlock: (node, view, getPos) => new NoteBlockView(node, view, getPos)
     })