@nocobase/flow-engine 2.1.0-beta.27 → 2.1.0-beta.29

package/lib/components/variables/VariableHybridInput.d.ts

@@ -0,0 +1,27 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+import React from 'react';
+import type { MetaTreeNode } from '../../flowContext';
+export interface VariableHybridInputConverters {
+    formatPathToValue?: (item?: MetaTreeNode) => string | undefined;
+    parseValueToPath?: (value?: string) => string[] | undefined;
+    variableRegExp?: RegExp;
+}
+export interface VariableHybridInputProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    placeholder?: string;
+    addonBefore?: React.ReactNode;
+    metaTree?: MetaTreeNode[] | (() => MetaTreeNode[] | Promise<MetaTreeNode[]>);
+    converters?: VariableHybridInputConverters;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export declare const VariableHybridInput: React.NamedExoticComponent<VariableHybridInputProps>;

package/lib/components/variables/VariableHybridInput.js

@@ -0,0 +1,499 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var VariableHybridInput_exports = {};
+__export(VariableHybridInput_exports, {
+  VariableHybridInput: () => VariableHybridInput
+});
+module.exports = __toCommonJS(VariableHybridInput_exports);
+var import_css = require("@emotion/css");
+var import_antd = require("antd");
+var import_react = __toESM(require("react"));
+var import_FlowContextProvider = require("../../FlowContextProvider");
+var import_FlowContextSelector = require("../FlowContextSelector");
+var import_useResolvedMetaTree = require("./useResolvedMetaTree");
+var import_utils = require("./utils");
+const DEFAULT_VARIABLE_REGEXP = /\{\{\s*([^{}]+?)\s*\}\}/g;
+const TAG_CLASS = "nb-variable-tag";
+function reactNodeToPlainText(node) {
+  if (node == null || typeof node === "boolean") return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(reactNodeToPlainText).join("");
+  if ((0, import_react.isValidElement)(node)) return reactNodeToPlainText(node.props.children);
+  return "";
+}
+__name(reactNodeToPlainText, "reactNodeToPlainText");
+function escapeHtml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+__name(escapeHtml, "escapeHtml");
+function getDomValue(element) {
+  const out = [];
+  for (const node of Array.from(element.childNodes)) {
+    if (node instanceof HTMLElement && node.dataset.variable) {
+      out.push(node.dataset.variable);
+    } else {
+      out.push(node.textContent || "");
+    }
+  }
+  return out.join("");
+}
+__name(getDomValue, "getDomValue");
+function createTagHTML(variable, label) {
+  return `<span class="${TAG_CLASS}" contenteditable="false" data-variable="${escapeHtml(
+    variable
+  )}" title="${escapeHtml(label)}">${escapeHtml(label)}</span>`;
+}
+__name(createTagHTML, "createTagHTML");
+function normalizeVariableKey(value) {
+  return value.replace(/^\{\{\s*/, "").replace(/\s*\}\}$/, "").trim();
+}
+__name(normalizeVariableKey, "normalizeVariableKey");
+function renderHTML(value, labelMap, regExp) {
+  const re = new RegExp(regExp.source, regExp.flags.includes("g") ? regExp.flags : `${regExp.flags}g`);
+  return escapeHtml(value || "").replace(re, (matched) => {
+    const label = labelMap.get(normalizeVariableKey(matched)) || matched;
+    return createTagHTML(matched, label);
+  });
+}
+__name(renderHTML, "renderHTML");
+function buildLabelMap(nodes, ctxT, converters) {
+  const map = /* @__PURE__ */ new Map();
+  function walk(items = [], parentTitles = []) {
+    var _a;
+    for (const item of items) {
+      const titlePart = reactNodeToPlainText(item.title || item.name);
+      const titles = [...parentTitles, titlePart];
+      const value = ((_a = converters == null ? void 0 : converters.formatPathToValue) == null ? void 0 : _a.call(converters, item)) ?? (0, import_utils.formatPathToValue)(item);
+      if (value) {
+        map.set(normalizeVariableKey(value), titles.map(ctxT).join("/"));
+      }
+      if (Array.isArray(item.children)) {
+        walk(item.children, titles);
+      }
+    }
+  }
+  __name(walk, "walk");
+  walk(nodes);
+  return map;
+}
+__name(buildLabelMap, "buildLabelMap");
+function pasteHTML(container, html, indexes) {
+  var _a;
+  const selection = (_a = window.getSelection) == null ? void 0 : _a.call(window);
+  const range = (selection == null ? void 0 : selection.rangeCount) ? selection.getRangeAt(0) : null;
+  if (!range) return;
+  if (indexes) {
+    const children = Array.from(container.childNodes);
+    if (indexes[0] === -1) {
+      if (indexes[1] && children[indexes[1] - 1]) {
+        range.setStartAfter(children[indexes[1] - 1]);
+      } else {
+        range.setStart(container, 0);
+      }
+    } else {
+      range.setStart(children[indexes[0]], indexes[1]);
+    }
+    if (indexes[2] === -1) {
+      if (indexes[3] && children[indexes[3] - 1]) {
+        range.setEndAfter(children[indexes[3] - 1]);
+      } else {
+        range.setEnd(container, 0);
+      }
+    } else {
+      range.setEnd(children[indexes[2]], indexes[3]);
+    }
+  }
+  const wrapper = document.createElement("div");
+  wrapper.innerHTML = html;
+  const fragment = document.createDocumentFragment();
+  let lastNode = null;
+  while (wrapper.firstChild) {
+    lastNode = fragment.appendChild(wrapper.firstChild);
+  }
+  range.deleteContents();
+  range.insertNode(fragment);
+  if (lastNode) {
+    const next = new Range();
+    next.setStartAfter(lastNode);
+    next.collapse(true);
+    selection == null ? void 0 : selection.removeAllRanges();
+    selection == null ? void 0 : selection.addRange(next);
+  }
+}
+__name(pasteHTML, "pasteHTML");
+function getSingleEndRange(nodes, index, offset) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  if (index === -1) {
+    let realIndex2 = offset;
+    let collapseFlag = false;
+    if (realIndex2 && ((_a = nodes[realIndex2 - 1]) == null ? void 0 : _a.nodeName) === "#text" && ((_b = nodes[realIndex2]) == null ? void 0 : _b.nodeName) === "#text") {
+      collapseFlag = true;
+    }
+    let textOffset2 = 0;
+    for (let i = offset - 1; i >= 0; i -= 1) {
+      if (collapseFlag) {
+        if (((_c = nodes[i]) == null ? void 0 : _c.nodeName) === "#text") {
+          textOffset2 += ((_d = nodes[i].textContent) == null ? void 0 : _d.length) || 0;
+        } else {
+          collapseFlag = false;
+        }
+      }
+      if (((_e = nodes[i]) == null ? void 0 : _e.nodeName) === "#text" && ((_f = nodes[i + 1]) == null ? void 0 : _f.nodeName) === "#text") {
+        realIndex2 -= 1;
+      }
+    }
+    return textOffset2 ? [realIndex2, textOffset2] : [-1, realIndex2];
+  }
+  let realIndex = 0;
+  let textOffset = 0;
+  for (let i = 0; i < index + 1; i += 1) {
+    if (((_g = nodes[i]) == null ? void 0 : _g.nodeName) === "#text") {
+      if (i !== index && nodes[i + 1] && ((_h = nodes[i + 1]) == null ? void 0 : _h.nodeName) !== "#text") {
+        realIndex += 1;
+      }
+      textOffset += i === index ? offset : ((_i = nodes[i].textContent) == null ? void 0 : _i.length) || 0;
+    } else {
+      realIndex += 1;
+      textOffset = 0;
+    }
+  }
+  return [realIndex, textOffset];
+}
+__name(getSingleEndRange, "getSingleEndRange");
+function getCurrentRange(element) {
+  var _a;
+  const selection = (_a = window.getSelection) == null ? void 0 : _a.call(window);
+  const range = (selection == null ? void 0 : selection.rangeCount) ? selection.getRangeAt(0) : null;
+  if (!range || !element.contains(range.commonAncestorContainer)) {
+    return [-1, 0, -1, 0];
+  }
+  const nodes = Array.from(element.childNodes);
+  if (!nodes.length) return [-1, 0, -1, 0];
+  const startIndex = range.startContainer === element ? -1 : nodes.indexOf(range.startContainer);
+  const endIndex = range.endContainer === element ? -1 : nodes.indexOf(range.endContainer);
+  return [
+    ...getSingleEndRange(nodes, startIndex, range.startOffset),
+    ...getSingleEndRange(nodes, endIndex, range.endOffset)
+  ];
+}
+__name(getCurrentRange, "getCurrentRange");
+const VariableHybridInputComponent = /* @__PURE__ */ __name((props) => {
+  const { addonBefore, className, converters, disabled, metaTree, onChange, placeholder, style } = props;
+  const { token } = import_antd.theme.useToken();
+  const ctx = (0, import_FlowContextProvider.useFlowContext)();
+  const { resolvedMetaTree } = (0, import_useResolvedMetaTree.useResolvedMetaTree)(metaTree);
+  const inputRef = (0, import_react.useRef)(null);
+  const [isComposing, setIsComposing] = (0, import_react.useState)(false);
+  const [changed, setChanged] = (0, import_react.useState)(false);
+  const [range, setRange] = (0, import_react.useState)([-1, 0, -1, 0]);
+  const value = typeof props.value === "string" ? props.value : props.value == null ? "" : String(props.value);
+  const variableRegExp = (converters == null ? void 0 : converters.variableRegExp) ?? DEFAULT_VARIABLE_REGEXP;
+  const labelMap = (0, import_react.useMemo)(
+    () => buildLabelMap(resolvedMetaTree, ctx.t, converters),
+    [resolvedMetaTree, ctx, converters]
+  );
+  const [html, setHtml] = (0, import_react.useState)(() => renderHTML(value, labelMap, variableRegExp));
+  const emitChange = (0, import_react.useCallback)(
+    (target) => {
+      onChange == null ? void 0 : onChange(getDomValue(target).trim());
+    },
+    [onChange]
+  );
+  (0, import_react.useEffect)(() => {
+    setHtml(renderHTML(value, labelMap, variableRegExp));
+    if (!changed) {
+      setRange([-1, 0, -1, 0]);
+    }
+  }, [value, labelMap]);
+  (0, import_react.useEffect)(() => {
+    var _a;
+    const element = inputRef.current;
+    if (!element) return;
+    if (document.activeElement !== element) return;
+    const nextRange = new Range();
+    if (changed) {
+      if (range.join() === "-1,0,-1,0") return;
+      const selection = (_a = window.getSelection) == null ? void 0 : _a.call(window);
+      if (!selection) return;
+      try {
+        const children = Array.from(element.childNodes);
+        if (children.length) {
+          if (range[0] === -1) {
+            if (range[1]) nextRange.setStartAfter(children[range[1] - 1]);
+          } else {
+            nextRange.setStart(children[range[0]], range[1]);
+          }
+          if (range[2] === -1) {
+            if (range[3]) nextRange.setEndAfter(children[range[3] - 1]);
+          } else {
+            nextRange.setEnd(children[range[2]], range[3]);
+          }
+        }
+        nextRange.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(nextRange);
+      } catch {
+      }
+    } else {
+      const { lastChild } = element;
+      if (lastChild) {
+        nextRange.setStartAfter(lastChild);
+        nextRange.setEndAfter(lastChild);
+        const nodes = Array.from(element.childNodes);
+        const idx = nodes.indexOf(lastChild);
+        const startIndex = nextRange.startContainer === element ? -1 : idx;
+        const endIndex = nextRange.startContainer === element ? -1 : idx;
+        setRange([startIndex, nextRange.startOffset, endIndex, nextRange.endOffset]);
+      }
+    }
+  }, [changed, html, range]);
+  const insertVariable = (0, import_react.useCallback)(
+    (variable, meta) => {
+      const current = inputRef.current;
+      if (!current || !variable) return;
+      const label = labelMap.get(normalizeVariableKey(variable)) || (meta ? [...meta.parentTitles || [], reactNodeToPlainText(meta.title || meta.name)].map(ctx.t).join("/") : variable);
+      current.focus();
+      pasteHTML(current, createTagHTML(variable, label), range);
+      setChanged(true);
+      setRange(getCurrentRange(current));
+      emitChange(current);
+    },
+    [labelMap, range, emitChange, ctx]
+  );
+  const handleSelectorChange = (0, import_react.useCallback)(
+    (next, meta) => {
+      if (!next) return;
+      insertVariable(next, meta);
+    },
+    [insertVariable]
+  );
+  const handleInput = (0, import_react.useCallback)(
+    ({ currentTarget }) => {
+      if (isComposing) return;
+      setChanged(true);
+      setRange(getCurrentRange(currentTarget));
+      emitChange(currentTarget);
+    },
+    [emitChange, isComposing]
+  );
+  const handleBlur = (0, import_react.useCallback)(({ currentTarget }) => {
+    setRange(getCurrentRange(currentTarget));
+  }, []);
+  const handleKeyDown = (0, import_react.useCallback)((event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+    }
+  }, []);
+  const handlePaste = (0, import_react.useCallback)(
+    (event) => {
+      event.preventDefault();
+      const text = event.clipboardData.getData("text/plain").replace(/\n/g, " ");
+      if (!text) return;
+      setChanged(true);
+      pasteHTML(event.currentTarget, escapeHtml(text));
+      setRange(getCurrentRange(event.currentTarget));
+      emitChange(event.currentTarget);
+    },
+    [emitChange]
+  );
+  const handleCompositionStart = (0, import_react.useCallback)(() => setIsComposing(true), []);
+  const handleCompositionEnd = (0, import_react.useCallback)(
+    ({ currentTarget }) => {
+      setIsComposing(false);
+      setChanged(true);
+      setRange(getCurrentRange(currentTarget));
+      emitChange(currentTarget);
+    },
+    [emitChange]
+  );
+  const wrapperClassName = (0, import_react.useMemo)(
+    () => import_css.css`
+      display: flex;
+      width: 100%;
+      min-width: 0;
+
+      &.ant-space-compact {
+        display: flex;
+      }
+
+      /* The trigger button from FlowContextSelector sits at the right end.
+         Flatten its left corners so it shares the border with the editor. */
+      > .ant-btn {
+        flex-shrink: 0;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        margin-left: -${token.lineWidth}px;
+      }
+
+      > .ant-btn:hover,
+      > .ant-btn:focus {
+        z-index: 2;
+      }
+    `,
+    [token.lineWidth]
+  );
+  const addonClassName = (0, import_react.useMemo)(
+    () => import_css.css`
+      display: inline-flex;
+      align-items: center;
+      padding: 0 ${token.paddingSM}px;
+      background: ${token.colorFillTertiary};
+      border: ${token.lineWidth}px ${token.lineType} ${token.colorBorder};
+      border-right: 0;
+      border-radius: ${token.borderRadius}px 0 0 ${token.borderRadius}px;
+      color: ${token.colorText};
+      font-size: ${token.fontSize}px;
+      line-height: 1;
+      white-space: nowrap;
+    `,
+    [token]
+  );
+  const editorClassName = (0, import_react.useMemo)(() => {
+    const verticalPad = Math.max(
+      0,
+      (token.controlHeight - Math.round(token.lineHeight * token.fontSize)) / 2 - token.lineWidth
+    );
+    return import_css.css`
+      flex: 1 1 auto;
+      min-width: 0;
+      min-height: ${token.controlHeight}px;
+      padding: ${verticalPad}px ${token.paddingSM}px;
+      overflow: hidden;
+      white-space: pre-wrap;
+      word-break: break-word;
+      line-height: ${token.lineHeight};
+      font-size: ${token.fontSize}px;
+      color: ${token.colorText};
+      background: ${token.colorBgContainer};
+      border: ${token.lineWidth}px ${token.lineType} ${token.colorBorder};
+      /* Right corners are always flat because the X picker button is glued to the right side. */
+      border-radius: ${addonBefore ? "0" : `${token.borderRadius}px 0 0 ${token.borderRadius}px`};
+      cursor: text;
+      transition: all ${token.motionDurationMid};
+      outline: none;
+
+      &:hover {
+        border-color: ${token.colorPrimaryHover};
+        z-index: 1;
+      }
+
+      &:focus,
+      &:focus-visible {
+        border-color: ${token.colorPrimary};
+        box-shadow: 0 0 0 ${token.controlOutlineWidth}px ${token.controlOutline};
+        z-index: 1;
+      }
+
+      &[data-placeholder]:empty::before {
+        content: attr(data-placeholder);
+        color: ${token.colorTextPlaceholder};
+        pointer-events: none;
+      }
+
+      .${TAG_CLASS} {
+        /* inline lets long tag content wrap naturally across lines, mirroring v1. */
+        display: inline;
+        margin: 0 ${token.marginXXS}px;
+        padding: ${token.paddingXXS}px ${token.paddingXS}px;
+        font-size: ${token.fontSizeSM}px;
+        line-height: ${token.lineHeightSM};
+        color: ${token.colorPrimaryText};
+        background: ${token.colorPrimaryBg};
+        border: ${token.lineWidth}px ${token.lineType} ${token.colorPrimaryBorder};
+        border-radius: ${token.borderRadiusSM}px;
+        vertical-align: baseline;
+        user-select: none;
+        cursor: default;
+      }
+
+      &.is-disabled {
+        background: ${token.colorBgContainerDisabled};
+        color: ${token.colorTextDisabled};
+        border-color: ${token.colorBorder};
+        cursor: not-allowed;
+
+        &:hover {
+          border-color: ${token.colorBorder};
+        }
+
+        .${TAG_CLASS} {
+          color: ${token.colorTextDisabled};
+          background: ${token.colorFillTertiary};
+          border-color: ${token.colorBorder};
+        }
+      }
+    `;
+  }, [token, addonBefore]);
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_antd.Space.Compact, { className: (0, import_css.cx)("nb-variable-hybrid-input", wrapperClassName, className), style }, addonBefore != null && /* @__PURE__ */ import_react.default.createElement("span", { className: addonClassName }, addonBefore), /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ref: inputRef,
+      role: "textbox",
+      "aria-label": "textbox",
+      className: (0, import_css.cx)(editorClassName, {
+        "is-disabled": disabled
+      }),
+      contentEditable: !disabled,
+      "data-placeholder": placeholder,
+      onInput: handleInput,
+      onBlur: handleBlur,
+      onKeyDown: handleKeyDown,
+      onPaste: handlePaste,
+      onCompositionStart: handleCompositionStart,
+      onCompositionEnd: handleCompositionEnd,
+      dangerouslySetInnerHTML: { __html: html }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_FlowContextSelector.FlowContextSelector,
+    {
+      metaTree,
+      disabled,
+      parseValueToPath: (converters == null ? void 0 : converters.parseValueToPath) ?? import_utils.parseValueToPath,
+      formatPathToValue: (item) => {
+        var _a;
+        return ((_a = converters == null ? void 0 : converters.formatPathToValue) == null ? void 0 : _a.call(converters, item)) || (0, import_utils.formatPathToValue)(item);
+      },
+      onChange: handleSelectorChange
+    }
+  )));
+}, "VariableHybridInputComponent");
+const VariableHybridInput = import_react.default.memo(VariableHybridInputComponent);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  VariableHybridInput
+});

package/lib/components/variables/index.d.ts

@@ -7,6 +7,8 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 export { VariableInput } from './VariableInput';
+export { VariableHybridInput } from './VariableHybridInput';
+export type { VariableHybridInputProps, VariableHybridInputConverters } from './VariableHybridInput';
 export { SlateVariableEditor } from './SlateVariableEditor';
 export { VariableTag } from './VariableTag';
 export { InlineVariableTag } from './InlineVariableTag';

package/lib/components/variables/index.js

@@ -29,12 +29,14 @@ var variables_exports = {};
 __export(variables_exports, {
   InlineVariableTag: () => import_InlineVariableTag.InlineVariableTag,
   SlateVariableEditor: () => import_SlateVariableEditor.SlateVariableEditor,
+  VariableHybridInput: () => import_VariableHybridInput.VariableHybridInput,
   VariableInput: () => import_VariableInput.VariableInput,
   VariableTag: () => import_VariableTag.VariableTag,
   useResolvedMetaTree: () => import_useResolvedMetaTree.useResolvedMetaTree
 });
 module.exports = __toCommonJS(variables_exports);
 var import_VariableInput = require("./VariableInput");
+var import_VariableHybridInput = require("./VariableHybridInput");
 var import_SlateVariableEditor = require("./SlateVariableEditor");
 var import_VariableTag = require("./VariableTag");
 var import_InlineVariableTag = require("./InlineVariableTag");
@@ -45,6 +47,7 @@ __reExport(variables_exports, require("./utils"), module.exports);
 0 && (module.exports = {
   InlineVariableTag,
   SlateVariableEditor,
+  VariableHybridInput,
   VariableInput,
   VariableTag,
   useResolvedMetaTree,

package/lib/views/ViewNavigation.js

@@ -43,6 +43,10 @@ function encodeFilterByTk(val) {
   return encodeURIComponent(String(val));
 }
 __name(encodeFilterByTk, "encodeFilterByTk");
+function hasUsableSourceId(sourceId) {
+  return sourceId !== void 0 && sourceId !== null && String(sourceId) !== "";
+}
+__name(hasUsableSourceId, "hasUsableSourceId");
 function generatePathnameFromViewParams(viewParams) {
   if (!viewParams || viewParams.length === 0) {
     return "/admin";
@@ -62,8 +66,8 @@ function generatePathnameFromViewParams(viewParams) {
         segments.push("filterbytk", encoded);
       }
     }
-    if (viewParam.sourceId) {
-      segments.push("sourceid", viewParam.sourceId);
+    if (hasUsableSourceId(viewParam.sourceId)) {
+      segments.push("sourceid", String(viewParam.sourceId));
     }
   });
   return "/" + segments.join("/");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/flow-engine",
-  "version": "2.1.0-beta.27",
+  "version": "2.1.0-beta.29",
   "private": false,
   "description": "A standalone flow engine for NocoBase, managing workflows, models, and actions.",
   "main": "lib/index.js",
@@ -8,8 +8,8 @@
   "dependencies": {
     "@formily/antd-v5": "1.x",
     "@formily/reactive": "2.x",
-    "@nocobase/sdk": "2.1.0-beta.27",
-    "@nocobase/shared": "2.1.0-beta.27",
+    "@nocobase/sdk": "2.1.0-beta.29",
+    "@nocobase/shared": "2.1.0-beta.29",
     "ahooks": "^3.7.2",
     "axios": "^1.7.0",
     "dayjs": "^1.11.9",
@@ -37,5 +37,5 @@
   ],
   "author": "NocoBase Team",
   "license": "Apache-2.0",
-  "gitHead": "6d9e2d4ac3c6bf40951c8eb252860e47aa3a3c37"
+  "gitHead": "86c41be29dcbcac6fd6aa46b4a137ef07a27c1d0"
 }

package/src/components/variables/VariableHybridInput.tsx

@@ -0,0 +1,531 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { css, cx } from '@emotion/css';
+import { Space, theme } from 'antd';
+import React, { isValidElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { MetaTreeNode } from '../../flowContext';
+import { useFlowContext } from '../../FlowContextProvider';
+import { FlowContextSelector } from '../FlowContextSelector';
+import { useResolvedMetaTree } from './useResolvedMetaTree';
+import { formatPathToValue as defaultFormatPathToValue, parseValueToPath as defaultParseValueToPath } from './utils';
+
+type RangeIndexes = [number, number, number, number];
+
+const DEFAULT_VARIABLE_REGEXP = /\{\{\s*([^{}]+?)\s*\}\}/g;
+const TAG_CLASS = 'nb-variable-tag';
+
+export interface VariableHybridInputConverters {
+  formatPathToValue?: (item?: MetaTreeNode) => string | undefined;
+  parseValueToPath?: (value?: string) => string[] | undefined;
+  variableRegExp?: RegExp;
+}
+
+export interface VariableHybridInputProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  disabled?: boolean;
+  placeholder?: string;
+  addonBefore?: React.ReactNode;
+  metaTree?: MetaTreeNode[] | (() => MetaTreeNode[] | Promise<MetaTreeNode[]>);
+  converters?: VariableHybridInputConverters;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+function reactNodeToPlainText(node: React.ReactNode): string {
+  if (node == null || typeof node === 'boolean') return '';
+  if (typeof node === 'string' || typeof node === 'number') return String(node);
+  if (Array.isArray(node)) return node.map(reactNodeToPlainText).join('');
+  if (isValidElement(node)) return reactNodeToPlainText(node.props.children);
+  return '';
+}
+
+function escapeHtml(value: string) {
+  return value
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}
+
+function getDomValue(element: HTMLElement) {
+  const out: string[] = [];
+  for (const node of Array.from(element.childNodes)) {
+    if (node instanceof HTMLElement && node.dataset.variable) {
+      out.push(node.dataset.variable);
+    } else {
+      out.push(node.textContent || '');
+    }
+  }
+  return out.join('');
+}
+
+function createTagHTML(variable: string, label: string) {
+  return `<span class="${TAG_CLASS}" contenteditable="false" data-variable="${escapeHtml(
+    variable,
+  )}" title="${escapeHtml(label)}">${escapeHtml(label)}</span>`;
+}
+
+// Strip outer `{{ }}` and trim, so values like `{{ $env.x }}` and `{{$env.x}}`
+// share the same lookup key.
+function normalizeVariableKey(value: string): string {
+  return value
+    .replace(/^\{\{\s*/, '')
+    .replace(/\s*\}\}$/, '')
+    .trim();
+}
+
+function renderHTML(value: string, labelMap: Map<string, string>, regExp: RegExp) {
+  const re = new RegExp(regExp.source, regExp.flags.includes('g') ? regExp.flags : `${regExp.flags}g`);
+  return escapeHtml(value || '').replace(re, (matched) => {
+    const label = labelMap.get(normalizeVariableKey(matched)) || matched;
+    return createTagHTML(matched, label);
+  });
+}
+
+function buildLabelMap(
+  nodes: MetaTreeNode[] | undefined,
+  ctxT: (text: string) => string,
+  converters?: VariableHybridInputConverters,
+) {
+  const map = new Map<string, string>();
+
+  function walk(items: MetaTreeNode[] = [], parentTitles: string[] = []) {
+    for (const item of items) {
+      const titlePart = reactNodeToPlainText(item.title || item.name);
+      const titles = [...parentTitles, titlePart];
+      const value = converters?.formatPathToValue?.(item) ?? defaultFormatPathToValue(item);
+      if (value) {
+        map.set(normalizeVariableKey(value), titles.map(ctxT).join('/'));
+      }
+      if (Array.isArray(item.children)) {
+        walk(item.children as MetaTreeNode[], titles);
+      }
+    }
+  }
+
+  walk(nodes);
+  return map;
+}
+
+function pasteHTML(container: HTMLElement, html: string, indexes?: RangeIndexes) {
+  const selection = window.getSelection?.();
+  const range = selection?.rangeCount ? selection.getRangeAt(0) : null;
+  if (!range) return;
+
+  if (indexes) {
+    const children = Array.from(container.childNodes);
+    if (indexes[0] === -1) {
+      if (indexes[1] && children[indexes[1] - 1]) {
+        range.setStartAfter(children[indexes[1] - 1]);
+      } else {
+        range.setStart(container, 0);
+      }
+    } else {
+      range.setStart(children[indexes[0]], indexes[1]);
+    }
+
+    if (indexes[2] === -1) {
+      if (indexes[3] && children[indexes[3] - 1]) {
+        range.setEndAfter(children[indexes[3] - 1]);
+      } else {
+        range.setEnd(container, 0);
+      }
+    } else {
+      range.setEnd(children[indexes[2]], indexes[3]);
+    }
+  }
+
+  const wrapper = document.createElement('div');
+  wrapper.innerHTML = html;
+  const fragment = document.createDocumentFragment();
+  let lastNode: ChildNode | null = null;
+  while (wrapper.firstChild) {
+    lastNode = fragment.appendChild(wrapper.firstChild);
+  }
+  range.deleteContents();
+  range.insertNode(fragment);
+
+  if (lastNode) {
+    const next = new Range();
+    next.setStartAfter(lastNode);
+    next.collapse(true);
+    selection?.removeAllRanges();
+    selection?.addRange(next);
+  }
+}
+
+function getSingleEndRange(nodes: ChildNode[], index: number, offset: number): [number, number] {
+  if (index === -1) {
+    let realIndex = offset;
+    let collapseFlag = false;
+    if (realIndex && nodes[realIndex - 1]?.nodeName === '#text' && nodes[realIndex]?.nodeName === '#text') {
+      collapseFlag = true;
+    }
+    let textOffset = 0;
+    for (let i = offset - 1; i >= 0; i -= 1) {
+      if (collapseFlag) {
+        if (nodes[i]?.nodeName === '#text') {
+          textOffset += nodes[i].textContent?.length || 0;
+        } else {
+          collapseFlag = false;
+        }
+      }
+      if (nodes[i]?.nodeName === '#text' && nodes[i + 1]?.nodeName === '#text') {
+        realIndex -= 1;
+      }
+    }
+    return textOffset ? [realIndex, textOffset] : [-1, realIndex];
+  }
+
+  let realIndex = 0;
+  let textOffset = 0;
+  for (let i = 0; i < index + 1; i += 1) {
+    if (nodes[i]?.nodeName === '#text') {
+      if (i !== index && nodes[i + 1] && nodes[i + 1]?.nodeName !== '#text') {
+        realIndex += 1;
+      }
+      textOffset += i === index ? offset : nodes[i].textContent?.length || 0;
+    } else {
+      realIndex += 1;
+      textOffset = 0;
+    }
+  }
+  return [realIndex, textOffset];
+}
+
+function getCurrentRange(element: HTMLElement): RangeIndexes {
+  const selection = window.getSelection?.();
+  const range = selection?.rangeCount ? selection.getRangeAt(0) : null;
+  if (!range || !element.contains(range.commonAncestorContainer)) {
+    return [-1, 0, -1, 0];
+  }
+
+  const nodes = Array.from(element.childNodes);
+  if (!nodes.length) return [-1, 0, -1, 0];
+
+  const startIndex = range.startContainer === element ? -1 : nodes.indexOf(range.startContainer as HTMLElement);
+  const endIndex = range.endContainer === element ? -1 : nodes.indexOf(range.endContainer as HTMLElement);
+
+  return [
+    ...getSingleEndRange(nodes, startIndex, range.startOffset),
+    ...getSingleEndRange(nodes, endIndex, range.endOffset),
+  ];
+}
+
+const VariableHybridInputComponent: React.FC<VariableHybridInputProps> = (props) => {
+  const { addonBefore, className, converters, disabled, metaTree, onChange, placeholder, style } = props;
+  const { token } = theme.useToken();
+  const ctx = useFlowContext();
+  const { resolvedMetaTree } = useResolvedMetaTree(metaTree);
+  const inputRef = useRef<HTMLDivElement>(null);
+  const [isComposing, setIsComposing] = useState(false);
+  const [changed, setChanged] = useState(false);
+  const [range, setRange] = useState<RangeIndexes>([-1, 0, -1, 0]);
+
+  const value = typeof props.value === 'string' ? props.value : props.value == null ? '' : String(props.value);
+  const variableRegExp = converters?.variableRegExp ?? DEFAULT_VARIABLE_REGEXP;
+
+  const labelMap = useMemo(
+    () => buildLabelMap(resolvedMetaTree as MetaTreeNode[] | undefined, ctx.t, converters),
+    [resolvedMetaTree, ctx, converters],
+  );
+
+  const [html, setHtml] = useState(() => renderHTML(value, labelMap, variableRegExp));
+
+  const emitChange = useCallback(
+    (target: HTMLElement) => {
+      onChange?.(getDomValue(target).trim());
+    },
+    [onChange],
+  );
+
+  useEffect(() => {
+    setHtml(renderHTML(value, labelMap, variableRegExp));
+    if (!changed) {
+      setRange([-1, 0, -1, 0]);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value, labelMap]);
+
+  // Restore caret position after html update
+  useEffect(() => {
+    const element = inputRef.current;
+    if (!element) return;
+    if (document.activeElement !== element) return;
+
+    const nextRange = new Range();
+    if (changed) {
+      if (range.join() === '-1,0,-1,0') return;
+      const selection = window.getSelection?.();
+      if (!selection) return;
+      try {
+        const children = Array.from(element.childNodes) as HTMLElement[];
+        if (children.length) {
+          if (range[0] === -1) {
+            if (range[1]) nextRange.setStartAfter(children[range[1] - 1]);
+          } else {
+            nextRange.setStart(children[range[0]], range[1]);
+          }
+          if (range[2] === -1) {
+            if (range[3]) nextRange.setEndAfter(children[range[3] - 1]);
+          } else {
+            nextRange.setEnd(children[range[2]], range[3]);
+          }
+        }
+        nextRange.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(nextRange);
+      } catch {
+        /* ignore */
+      }
+    } else {
+      const { lastChild } = element;
+      if (lastChild) {
+        nextRange.setStartAfter(lastChild);
+        nextRange.setEndAfter(lastChild);
+        const nodes = Array.from(element.childNodes);
+        const idx = nodes.indexOf(lastChild);
+        const startIndex = nextRange.startContainer === element ? -1 : idx;
+        const endIndex = nextRange.startContainer === element ? -1 : idx;
+        setRange([startIndex, nextRange.startOffset, endIndex, nextRange.endOffset]);
+      }
+    }
+  }, [changed, html, range]);
+
+  const insertVariable = useCallback(
+    (variable: string, meta?: MetaTreeNode) => {
+      const current = inputRef.current;
+      if (!current || !variable) return;
+
+      const label =
+        labelMap.get(normalizeVariableKey(variable)) ||
+        (meta
+          ? [...(meta.parentTitles || []), reactNodeToPlainText(meta.title || meta.name)].map(ctx.t).join('/')
+          : variable);
+
+      current.focus();
+      pasteHTML(current, createTagHTML(variable, label), range);
+      setChanged(true);
+      setRange(getCurrentRange(current));
+      emitChange(current);
+    },
+    [labelMap, range, emitChange, ctx],
+  );
+
+  const handleSelectorChange = useCallback(
+    (next: string, meta?: MetaTreeNode) => {
+      if (!next) return;
+      insertVariable(next, meta);
+    },
+    [insertVariable],
+  );
+
+  const handleInput = useCallback(
+    ({ currentTarget }: React.FormEvent<HTMLDivElement>) => {
+      if (isComposing) return;
+      setChanged(true);
+      setRange(getCurrentRange(currentTarget));
+      emitChange(currentTarget);
+    },
+    [emitChange, isComposing],
+  );
+
+  const handleBlur = useCallback(({ currentTarget }: React.FocusEvent<HTMLDivElement>) => {
+    setRange(getCurrentRange(currentTarget));
+  }, []);
+
+  const handleKeyDown = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+    }
+  }, []);
+
+  const handlePaste = useCallback(
+    (event: React.ClipboardEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      // Paste as plain text only; variable tags must be inserted via the picker.
+      const text = event.clipboardData.getData('text/plain').replace(/\n/g, ' ');
+      if (!text) return;
+      setChanged(true);
+      pasteHTML(event.currentTarget, escapeHtml(text));
+      setRange(getCurrentRange(event.currentTarget));
+      emitChange(event.currentTarget);
+    },
+    [emitChange],
+  );
+
+  const handleCompositionStart = useCallback(() => setIsComposing(true), []);
+  const handleCompositionEnd = useCallback(
+    ({ currentTarget }: React.CompositionEvent<HTMLDivElement>) => {
+      setIsComposing(false);
+      setChanged(true);
+      setRange(getCurrentRange(currentTarget));
+      emitChange(currentTarget);
+    },
+    [emitChange],
+  );
+
+  const wrapperClassName = useMemo(
+    () => css`
+      display: flex;
+      width: 100%;
+      min-width: 0;
+
+      &.ant-space-compact {
+        display: flex;
+      }
+
+      /* The trigger button from FlowContextSelector sits at the right end.
+         Flatten its left corners so it shares the border with the editor. */
+      > .ant-btn {
+        flex-shrink: 0;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        margin-left: -${token.lineWidth}px;
+      }
+
+      > .ant-btn:hover,
+      > .ant-btn:focus {
+        z-index: 2;
+      }
+    `,
+    [token.lineWidth],
+  );
+
+  const addonClassName = useMemo(
+    () => css`
+      display: inline-flex;
+      align-items: center;
+      padding: 0 ${token.paddingSM}px;
+      background: ${token.colorFillTertiary};
+      border: ${token.lineWidth}px ${token.lineType} ${token.colorBorder};
+      border-right: 0;
+      border-radius: ${token.borderRadius}px 0 0 ${token.borderRadius}px;
+      color: ${token.colorText};
+      font-size: ${token.fontSize}px;
+      line-height: 1;
+      white-space: nowrap;
+    `,
+    [token],
+  );
+
+  const editorClassName = useMemo(() => {
+    const verticalPad = Math.max(
+      0,
+      (token.controlHeight - Math.round(token.lineHeight * token.fontSize)) / 2 - token.lineWidth,
+    );
+    return css`
+      flex: 1 1 auto;
+      min-width: 0;
+      min-height: ${token.controlHeight}px;
+      padding: ${verticalPad}px ${token.paddingSM}px;
+      overflow: hidden;
+      white-space: pre-wrap;
+      word-break: break-word;
+      line-height: ${token.lineHeight};
+      font-size: ${token.fontSize}px;
+      color: ${token.colorText};
+      background: ${token.colorBgContainer};
+      border: ${token.lineWidth}px ${token.lineType} ${token.colorBorder};
+      /* Right corners are always flat because the X picker button is glued to the right side. */
+      border-radius: ${addonBefore ? '0' : `${token.borderRadius}px 0 0 ${token.borderRadius}px`};
+      cursor: text;
+      transition: all ${token.motionDurationMid};
+      outline: none;
+
+      &:hover {
+        border-color: ${token.colorPrimaryHover};
+        z-index: 1;
+      }
+
+      &:focus,
+      &:focus-visible {
+        border-color: ${token.colorPrimary};
+        box-shadow: 0 0 0 ${token.controlOutlineWidth}px ${token.controlOutline};
+        z-index: 1;
+      }
+
+      &[data-placeholder]:empty::before {
+        content: attr(data-placeholder);
+        color: ${token.colorTextPlaceholder};
+        pointer-events: none;
+      }
+
+      .${TAG_CLASS} {
+        /* inline lets long tag content wrap naturally across lines, mirroring v1. */
+        display: inline;
+        margin: 0 ${token.marginXXS}px;
+        padding: ${token.paddingXXS}px ${token.paddingXS}px;
+        font-size: ${token.fontSizeSM}px;
+        line-height: ${token.lineHeightSM};
+        color: ${token.colorPrimaryText};
+        background: ${token.colorPrimaryBg};
+        border: ${token.lineWidth}px ${token.lineType} ${token.colorPrimaryBorder};
+        border-radius: ${token.borderRadiusSM}px;
+        vertical-align: baseline;
+        user-select: none;
+        cursor: default;
+      }
+
+      &.is-disabled {
+        background: ${token.colorBgContainerDisabled};
+        color: ${token.colorTextDisabled};
+        border-color: ${token.colorBorder};
+        cursor: not-allowed;
+
+        &:hover {
+          border-color: ${token.colorBorder};
+        }
+
+        .${TAG_CLASS} {
+          color: ${token.colorTextDisabled};
+          background: ${token.colorFillTertiary};
+          border-color: ${token.colorBorder};
+        }
+      }
+    `;
+  }, [token, addonBefore]);
+
+  return (
+    <>
+      <Space.Compact className={cx('nb-variable-hybrid-input', wrapperClassName, className)} style={style}>
+        {addonBefore != null && <span className={addonClassName}>{addonBefore}</span>}
+        <div
+          ref={inputRef}
+          role="textbox"
+          aria-label="textbox"
+          className={cx(editorClassName, {
+            'is-disabled': disabled,
+          })}
+          contentEditable={!disabled}
+          data-placeholder={placeholder}
+          onInput={handleInput}
+          onBlur={handleBlur}
+          onKeyDown={handleKeyDown}
+          onPaste={handlePaste}
+          onCompositionStart={handleCompositionStart}
+          onCompositionEnd={handleCompositionEnd}
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+        <FlowContextSelector
+          metaTree={metaTree}
+          disabled={disabled}
+          parseValueToPath={converters?.parseValueToPath ?? defaultParseValueToPath}
+          formatPathToValue={(item) => converters?.formatPathToValue?.(item) || defaultFormatPathToValue(item)}
+          onChange={handleSelectorChange}
+        />
+      </Space.Compact>
+    </>
+  );
+};
+
+export const VariableHybridInput = React.memo(VariableHybridInputComponent);

package/src/components/variables/index.ts

@@ -8,6 +8,8 @@
  */
 
 export { VariableInput } from './VariableInput';
+export { VariableHybridInput } from './VariableHybridInput';
+export type { VariableHybridInputProps, VariableHybridInputConverters } from './VariableHybridInput';
 export { SlateVariableEditor } from './SlateVariableEditor';
 export { VariableTag } from './VariableTag';
 export { InlineVariableTag } from './InlineVariableTag';

package/src/views/ViewNavigation.ts

@@ -26,6 +26,10 @@ function encodeFilterByTk(val: SharedViewParam['filterByTk']): string {
   return encodeURIComponent(String(val));
 }
 
+function hasUsableSourceId(sourceId: unknown): sourceId is string | number {
+  return sourceId !== undefined && sourceId !== null && String(sourceId) !== '';
+}
+
 /**
  * 将 ViewParam 数组转换为 pathname
  *
@@ -65,8 +69,8 @@ export function generatePathnameFromViewParams(viewParams: ViewParams[]): string
         segments.push('filterbytk', encoded);
       }
     }
-    if (viewParam.sourceId) {
-      segments.push('sourceid', viewParam.sourceId);
+    if (hasUsableSourceId(viewParam.sourceId)) {
+      segments.push('sourceid', String(viewParam.sourceId));
     }
   });