Upgraded Regex Replace Node
This commit is contained in:
parent
651a5ce92b
commit
8d043f6a77
@ -2,30 +2,20 @@
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { Handle, Position, useReactFlow, useStore } from "reactflow";
|
||||
|
||||
// Shared memory bus setup
|
||||
if (!window.BorealisValueBus) window.BorealisValueBus = {};
|
||||
if (!window.BorealisUpdateRate) window.BorealisUpdateRate = 100;
|
||||
|
||||
// -- Modern Regex Replace Node -- //
|
||||
const RegexReplaceNode = ({ id, data }) => {
|
||||
const edges = useStore((state) => state.edges);
|
||||
const { setNodes } = useReactFlow();
|
||||
|
||||
const [pattern, setPattern] = useState(data?.pattern || "");
|
||||
const [replacement, setReplacement] = useState(data?.replacement || "");
|
||||
const [flags, setFlags] = useState(data?.flags || "g");
|
||||
const [enabled, setEnabled] = useState(data?.enabled ?? true);
|
||||
// Maintain output live value
|
||||
const [result, setResult] = useState("");
|
||||
const [original, setOriginal] = useState("");
|
||||
|
||||
const valueRef = useRef("");
|
||||
|
||||
const updateNodeData = (key, val) => {
|
||||
setNodes(nds =>
|
||||
nds.map(n =>
|
||||
n.id === id ? { ...n, data: { ...n.data, [key]: val } } : n
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
let intervalId = null;
|
||||
let currentRate = window.BorealisUpdateRate;
|
||||
@ -39,11 +29,11 @@ const RegexReplaceNode = ({ id, data }) => {
|
||||
setOriginal(inputValue);
|
||||
|
||||
let newVal = inputValue;
|
||||
|
||||
try {
|
||||
if (enabled && pattern) {
|
||||
const regex = new RegExp(pattern, flags);
|
||||
let safeReplacement = replacement.trim();
|
||||
if ((data?.enabled ?? true) && data?.pattern) {
|
||||
const regex = new RegExp(data.pattern, data.flags || "g");
|
||||
let safeReplacement = (data.replacement ?? "").trim();
|
||||
// Remove quotes if user adds them
|
||||
if (
|
||||
safeReplacement.startsWith('"') &&
|
||||
safeReplacement.endsWith('"')
|
||||
@ -65,6 +55,7 @@ const RegexReplaceNode = ({ id, data }) => {
|
||||
|
||||
intervalId = setInterval(runNodeLogic, currentRate);
|
||||
|
||||
// Monitor update rate changes
|
||||
const monitor = setInterval(() => {
|
||||
const newRate = window.BorealisUpdateRate;
|
||||
if (newRate !== currentRate) {
|
||||
@ -78,84 +69,57 @@ const RegexReplaceNode = ({ id, data }) => {
|
||||
clearInterval(intervalId);
|
||||
clearInterval(monitor);
|
||||
};
|
||||
}, [id, edges, pattern, replacement, flags, enabled]);
|
||||
}, [id, edges, data?.pattern, data?.replacement, data?.flags, data?.enabled]);
|
||||
|
||||
return (
|
||||
<div className="borealis-node">
|
||||
<Handle type="target" position={Position.Left} className="borealis-handle" />
|
||||
|
||||
<div className="borealis-node-header">Regex Replace</div>
|
||||
<div className="borealis-node-header">
|
||||
{data?.label || "Regex Replace"}
|
||||
</div>
|
||||
|
||||
<div className="borealis-node-content">
|
||||
<div style={{ marginBottom: "6px", fontSize: "9px", color: "#ccc" }}>
|
||||
Perform regex replacement on upstream string
|
||||
Performs live regex-based find/replace on incoming string value.
|
||||
</div>
|
||||
|
||||
<label>Regex Pattern:</label>
|
||||
<input
|
||||
type="text"
|
||||
value={pattern}
|
||||
onChange={(e) => {
|
||||
setPattern(e.target.value);
|
||||
updateNodeData("pattern", e.target.value);
|
||||
}}
|
||||
placeholder="e.g. \\d+"
|
||||
style={inputStyle}
|
||||
/>
|
||||
|
||||
<label>Replacement:</label>
|
||||
<input
|
||||
type="text"
|
||||
value={replacement}
|
||||
onChange={(e) => {
|
||||
setReplacement(e.target.value);
|
||||
updateNodeData("replacement", e.target.value);
|
||||
}}
|
||||
placeholder="e.g. $1"
|
||||
style={inputStyle}
|
||||
/>
|
||||
|
||||
<label>Regex Flags:</label>
|
||||
<input
|
||||
type="text"
|
||||
value={flags}
|
||||
onChange={(e) => {
|
||||
setFlags(e.target.value);
|
||||
updateNodeData("flags", e.target.value);
|
||||
}}
|
||||
placeholder="e.g. gi"
|
||||
style={inputStyle}
|
||||
/>
|
||||
|
||||
<div style={{ margin: "6px 0" }}>
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={enabled}
|
||||
onChange={(e) => {
|
||||
setEnabled(e.target.checked);
|
||||
updateNodeData("enabled", e.target.checked);
|
||||
}}
|
||||
style={{ marginRight: "6px" }}
|
||||
/>
|
||||
Enable Replacement
|
||||
</label>
|
||||
<div style={{ fontSize: "9px", color: "#ccc", marginBottom: 2 }}>
|
||||
<b>Pattern:</b> {data?.pattern || <i>(not set)</i>}<br />
|
||||
<b>Flags:</b> {data?.flags || "g"}<br />
|
||||
<b>Enabled:</b> {(data?.enabled ?? true) ? "Yes" : "No"}
|
||||
</div>
|
||||
|
||||
<label>Original Input:</label>
|
||||
<label style={{ fontSize: "8px", color: "#888" }}>Original:</label>
|
||||
<textarea
|
||||
readOnly
|
||||
value={original}
|
||||
rows={2}
|
||||
style={textAreaStyle}
|
||||
style={{
|
||||
width: "100%",
|
||||
fontSize: "9px",
|
||||
background: "#222",
|
||||
color: "#ccc",
|
||||
border: "1px solid #444",
|
||||
borderRadius: "2px",
|
||||
padding: "3px",
|
||||
resize: "vertical",
|
||||
marginBottom: "6px"
|
||||
}}
|
||||
/>
|
||||
|
||||
<label>Output:</label>
|
||||
<label style={{ fontSize: "8px", color: "#888" }}>Output:</label>
|
||||
<textarea
|
||||
readOnly
|
||||
value={result}
|
||||
rows={2}
|
||||
style={textAreaStyle}
|
||||
style={{
|
||||
width: "100%",
|
||||
fontSize: "9px",
|
||||
background: "#2a2a2a",
|
||||
color: "#ccc",
|
||||
border: "1px solid #444",
|
||||
borderRadius: "2px",
|
||||
padding: "3px",
|
||||
resize: "vertical"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -164,38 +128,84 @@ const RegexReplaceNode = ({ id, data }) => {
|
||||
);
|
||||
};
|
||||
|
||||
const inputStyle = {
|
||||
width: "100%",
|
||||
fontSize: "9px",
|
||||
background: "#1e1e1e",
|
||||
color: "#ccc",
|
||||
border: "1px solid #444",
|
||||
borderRadius: "2px",
|
||||
padding: "3px",
|
||||
marginBottom: "6px"
|
||||
};
|
||||
|
||||
const textAreaStyle = {
|
||||
width: "100%",
|
||||
fontSize: "9px",
|
||||
background: "#2a2a2a",
|
||||
color: "#ccc",
|
||||
border: "1px solid #444",
|
||||
borderRadius: "2px",
|
||||
padding: "3px",
|
||||
resize: "vertical",
|
||||
marginBottom: "6px"
|
||||
};
|
||||
|
||||
// Modern Node Export: Sidebar config, usage docs, sensible defaults
|
||||
export default {
|
||||
type: "RegexReplace",
|
||||
label: "Regex Replacer",
|
||||
label: "Regex Replace",
|
||||
description: `
|
||||
Enhanced Regex Replacer:
|
||||
- Add regex flags (g, i, m, etc)
|
||||
- Live preview of input vs output
|
||||
- Optional enable toggle for replacement logic
|
||||
Live regex-based string find/replace node.
|
||||
|
||||
- Runs a JavaScript regular expression on every input update.
|
||||
- Useful for cleanup, format fixes, redacting, token extraction.
|
||||
- Configurable flags, replacement text, and enable toggle.
|
||||
- Handles errors gracefully, shows live preview in the sidebar.
|
||||
`.trim(),
|
||||
content: "Perform regex replacement on upstream string",
|
||||
component: RegexReplaceNode
|
||||
content: "Perform regex replacement on incoming string",
|
||||
component: RegexReplaceNode,
|
||||
config: [
|
||||
{
|
||||
key: "pattern",
|
||||
label: "Regex Pattern",
|
||||
type: "text",
|
||||
defaultValue: "\\d+"
|
||||
},
|
||||
{
|
||||
key: "replacement",
|
||||
label: "Replacement",
|
||||
type: "text",
|
||||
defaultValue: ""
|
||||
},
|
||||
{
|
||||
key: "flags",
|
||||
label: "Regex Flags",
|
||||
type: "text",
|
||||
defaultValue: "g"
|
||||
},
|
||||
{
|
||||
key: "enabled",
|
||||
label: "Enable Replacement",
|
||||
type: "select",
|
||||
options: ["true", "false"],
|
||||
defaultValue: "true"
|
||||
}
|
||||
],
|
||||
usage_documentation: `
|
||||
### Regex Replace Node
|
||||
|
||||
**Purpose:**
|
||||
Perform flexible find-and-replace on strings using JavaScript-style regular expressions.
|
||||
|
||||
#### Typical Use Cases
|
||||
- Clean up text, numbers, or IDs in a data stream
|
||||
- Mask or redact sensitive info (emails, credit cards, etc)
|
||||
- Extract tokens, words, or reformat content
|
||||
|
||||
#### Configuration (see "Config" tab):
|
||||
- **Regex Pattern**: The search pattern (supports capture groups)
|
||||
- **Replacement**: The replacement string. You can use \`$1, $2\` for capture groups.
|
||||
- **Regex Flags**: Default \`g\` (global). Add \`i\` (case-insensitive), \`m\` (multiline), etc.
|
||||
- **Enable Replacement**: On/Off toggle (for easy debugging)
|
||||
|
||||
#### Behavior
|
||||
- Upstream value is live-updated.
|
||||
- When enabled, node applies the regex and emits the result downstream.
|
||||
- Shows both input and output in the sidebar for debugging.
|
||||
- If the regex is invalid, error is displayed as output.
|
||||
|
||||
#### Output
|
||||
- Emits the transformed string to all downstream nodes.
|
||||
- Updates in real time at the global Borealis update rate.
|
||||
|
||||
#### Example
|
||||
Pattern: \`(\\d+)\`
|
||||
Replacement: \`[number:$1]\`
|
||||
Input: \`abc 123 def 456\`
|
||||
Output: \`abc [number:123] def [number:456]\`
|
||||
|
||||
---
|
||||
**Tips:**
|
||||
- Use double backslashes (\\) in patterns when needed (e.g. \`\\\\d+\`).
|
||||
- Flags can be any combination (e.g. \`gi\`).
|
||||
|
||||
`.trim()
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user