;
}
function ShortcutField({ value, onChange }) {
const [listening,setListening] = React.useState(false);
const label = listening ? 'Press a key...' : value;
return ;
}
// shared engine: auto-color rules inside any contentEditable root, with caret preservation
const csWordStyle = {
caretOffset(root) {
const sel = window.getSelection();
if (!sel || !sel.anchorNode || !root.contains(sel.anchorNode) || !sel.isCollapsed) return null;
const r = document.createRange(); r.selectNodeContents(root); r.setEnd(sel.anchorNode, sel.anchorOffset);
return r.toString().length;
},
restoreCaret(root, offset) {
if (offset == null) return;
const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
let n, acc = 0;
while (n = walker.nextNode()) {
const len = n.textContent.length;
if (acc + len >= offset) { const sel = window.getSelection(); const r = document.createRange();
r.setStart(n, offset - acc); r.collapse(true); sel.removeAllRanges(); sel.addRange(r); return; }
acc += len;
}
const sel = window.getSelection(); const r = document.createRange(); r.selectNodeContents(root); r.collapse(false);
sel.removeAllRanges(); sel.addRange(r);
},
applyRules(root, rules, ctx) {
ctx = ctx || {};
const active = rules.filter(r => r.enabled && r.term.trim() &&
(ctx.ignoreConditions || !r.collection || r.collection === 'Any collection' || r.collection === ctx.collection));
if (!active.length) return;
const caret = this.caretOffset(root);
const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
const nodes = []; let n; while (n = walker.nextNode()) nodes.push(n);
let changed = false;
nodes.forEach(node => {
const parent = node.parentElement;
if (!parent || parent.closest('[data-auto],[data-skip]')) return;
for (const r of active) {
if (!ctx.ignoreConditions && r.onlyBold) {
const w = parseInt(getComputedStyle(parent).fontWeight) || 400; if (w < 600) continue;
}
const re = new RegExp('(^|[^A-Za-z0-9])(' + r.term.replace(/[.*+?^\${}()|[\]\\]/g,'\\$&') + ')(?=$|[^A-Za-z0-9])','i');
const m = node.textContent.match(re);
if (m && m.index != null) {
const start = m.index + m[1].length;
const word = node.splitText(start); word.splitText(m[2].length);
const span = document.createElement('span');
span.setAttribute('data-auto','1'); span.style.color = r.color; if (r.bold) span.style.fontWeight = '700';
word.parentNode.replaceChild(span, word); span.appendChild(word);
changed = true; break;
}
}
});
if (changed) this.restoreCaret(root, caret);
},
handleUndoKey(e, shortcut) {
if (!matchesShortcut(e, shortcut)) return false;
const sel = window.getSelection(); if (!sel || !sel.anchorNode) return false;
let el = sel.anchorNode.nodeType === 3 ? sel.anchorNode.parentElement : sel.anchorNode;
let auto = el && el.closest && el.closest('[data-auto]');
if (!auto && sel.anchorNode.nodeType === 3 && sel.anchorOffset === 0) {
const prev = sel.anchorNode.previousSibling; if (prev && prev.nodeType === 1 && prev.getAttribute('data-auto')) auto = prev;
}
if (!auto && el) { const prev = el.previousElementSibling; if (prev && prev.getAttribute && prev.getAttribute('data-auto') && sel.anchorOffset === 0) auto = prev; }
if (!auto) return false;
e.preventDefault();
const plain = document.createElement('span'); plain.setAttribute('data-skip','1'); plain.textContent = auto.textContent;
auto.parentNode.replaceChild(plain, auto);
const s2 = window.getSelection(); const r = document.createRange(); r.selectNodeContents(plain); r.collapse(false);
s2.removeAllRanges(); s2.addRange(r);
return true;
}
};
function matchesShortcut(e, sc) {
const parts = sc.split(' + ');
const key = parts[parts.length-1];
const need = { ctrl:parts.includes('Ctrl'), meta:parts.includes('Cmd'), shift:parts.includes('Shift'), alt:parts.includes('Alt') };
if (e.ctrlKey!==need.ctrl || e.metaKey!==need.meta || e.shiftKey!==need.shift || e.altKey!==need.alt) return false;
return e.key===key || e.key.toUpperCase()===key || (key==='Backspace'&&e.key==='Backspace');
}
function TryItBox({ rules, shortcut }) {
const ref = React.useRef(null);
const onKeyUp2 = (e) => { if (e.key===' ' || [',','.','!','?',';',':','Enter'].includes(e.key)) csWordStyle.applyRules(ref.current, rules, {ignoreConditions:true}); };
const onKeyDown2 = (e) => { csWordStyle.handleUndoKey(e, shortcut); };
return
Type a sentence with one of your words in it. The color lands when you hit space or punctuation. Press {shortcut} right after to undo just the color. Rules with conditions follow them in the editor.
;
}
function SettingsCard({ title, sub, children }) {
return