(null);
// Keep the editor in sync when the value changes from outside (template
// applied, step switched, reset) without clobbering the user's caret on
// their own edits.
React.useEffect(() => {
if (!editor) return;
+ // While the source view is open it owns the value, so its own echo is
+ // ignored. A template applied over it is not an echo, and adopting it
+ // is the only way the textarea does not silently discard it.
+ if (source !== null) {
+ if (html !== emittedSource.current) {
+ emittedSource.current = html;
+ setSource(prettyHTML(html || ""));
+ }
+ return;
+ }
const current = editor.getHTML();
const incoming = upgradeVariableTokens(html || "");
if (incoming !== current) {
editor.commands.setContent(incoming, { emitUpdate: false });
}
- }, [html, editor]);
+ }, [html, editor, source]);
+
+ // Leaving the source view hands the markup back to the schema, which keeps
+ // only what it can represent. Anything it would drop is named first, while
+ // undoing the switch is still one click.
+ const toggleSource = () => {
+ if (!editor) return;
+ if (source === null) {
+ emittedSource.current = html;
+ setSource(prettyHTML(editor.getHTML()));
+ return;
+ }
+ const apply = () => {
+ editor.commands.setContent(upgradeVariableTokens(source), { emitUpdate: true });
+ emittedSource.current = null;
+ setSource(null);
+ };
+ const dropped = unsupportedTags(source);
+ if (dropped.length > 0) {
+ confirm.show(
+ `The visual editor cannot hold ${dropped.map((t) => `<${t}>`).join(", ")}. ` +
+ "Switching back removes those tags and keeps the text inside them. Stay in HTML to keep them.",
+ apply,
+ );
+ return;
+ }
+ apply();
+ };
if (!editor) return null;
@@ -166,26 +281,104 @@ export default function RichTextEditor({
return (
-
-
-
- {placeholder && editor.isEmpty && (
-
- {placeholder}
-
- )}
-
- {/* Select text → floating "Edit with AI" pill over the selection. */}
-
- {/* Collapsed caret → sparkle companion + ⌘J to write with AI. */}
-
- {/* Type `{{` → variable type-ahead at the caret. */}
-
+
+ {source !== null ? (
+
{
+ emittedSource.current = value;
+ setSource(value);
+ onChange(value);
+ }}
+ />
+ ) : (
+
+
+ {placeholder && editor.isEmpty && (
+
+ {placeholder}
+
+ )}
+
+