feat(site-builder): inline bold/italic/underline/links on Heading and Text

Select text inside a selected Heading or Text block and a floating
toolbar offers B / I / U / Link / Unlink (execCommand; mousedown is
prevented so the selection survives; mod+b/i/u handled on the editable).

Storage: new `html` prop holding sanitised inline HTML, with `text` kept
as the plain mirror for AI summaries, search and legacy content.
Unmarked edits store html '' so legacy nodes keep their shape. The
allowlist (b strong i em u a br span; style=color only, hex/rgb/
var(--wsb-*); href via DOMPurify URI check AND safeUrl, unsafe links
unwrapped; target only _blank with forced rel=noopener) runs on commit,
on canvas render and again at export. If `text` was changed without
`html` (Sitesmith update_props), the stale html is ignored.

Each edit commits once (blur, or deselect if no blur came first) as one
setProp = one undo step; the old blur+deselect double commit is gone.
Heading colour default now tokenRef('text'). Sitesmith canvas summary
skips `html`.

Refs #46

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

craft/src/components/basic/TextBlock.tsx

@@ -1,10 +1,14 @@
-import React, { CSSProperties, useCallback, useRef, useEffect } from 'react';
+import React, { CSSProperties } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
 import { escapeHtml } from '../../utils/escape';
+import { resolveInlineHtml } from '../../utils/inline-html';
+import { useInlineEditable } from './useInlineEditable';
 
 interface TextBlockProps {
   text?: string;
+  /** Sanitised inline rich text (#46); '' = plain `text` only. */
+  html?: string;
   style?: CSSProperties;
   cssId?: string;
   cssClass?: string;
@@ -17,6 +21,7 @@ interface TextBlockProps {
 
 export const TextBlock: UserComponent<TextBlockProps> = ({
   text = 'Start typing here...',
+  html = '',
   style = {},
 }) => {
   const {
@@ -27,31 +32,7 @@ export const TextBlock: UserComponent<TextBlockProps> = ({
     selected: node.events.selected,
   }));
 
-  const elRef = useRef<HTMLParagraphElement | null>(null);
-  const editedTextRef = useRef<string | null>(null);
-
-  const commitText = useCallback(() => {
-    if (elRef.current) {
-      const newText = elRef.current.innerText;
-      editedTextRef.current = newText;
-      setProp((p: TextBlockProps) => { p.text = newText; });
-    }
-  }, [setProp]);
-
-  const handleBlur = useCallback(() => { commitText(); }, [commitText]);
-
-  useEffect(() => {
-    if (!selected && editedTextRef.current !== null) {
-      setProp((p: TextBlockProps) => { p.text = editedTextRef.current!; });
-      editedTextRef.current = null;
-    }
-  }, [selected, setProp]);
-
-  useEffect(() => {
-    if (elRef.current && !selected && editedTextRef.current === null) {
-      elRef.current.innerText = text || '';
-    }
-  }, [text, selected]);
+  const { elRef, onBlur, onInput, onKeyDown } = useInlineEditable(text, html, selected, setProp);
 
   return (
     <p
@@ -61,8 +42,9 @@ export const TextBlock: UserComponent<TextBlockProps> = ({
       }}
       contentEditable={selected}
       suppressContentEditableWarning
-      onBlur={handleBlur}
-      onInput={() => { if (elRef.current) editedTextRef.current = elRef.current.innerText; }}
+      onBlur={onBlur}
+      onInput={onInput}
+      onKeyDown={onKeyDown}
       style={{
         outline: 'none',
         cursor: selected ? 'text' : 'pointer',
@@ -79,6 +61,7 @@ TextBlock.craft = {
   displayName: 'Text',
   props: {
     text: 'Start typing here...',
+    html: '',
     style: {
       fontSize: '16px',
       lineHeight: '1.6',
@@ -110,6 +93,6 @@ TextBlock.craft = {
 
 (TextBlock as any).toHtml = (props: TextBlockProps, _childrenHtml: string) => {
   const styleStr = cssPropsToString(props.style);
-  const escapedText = escapeHtml(props.text || '');
+  const escapedText = resolveInlineHtml(props.text, props.html) ?? escapeHtml(props.text || '');
   return { html: `<p${styleStr ? ` style="${styleStr}"` : ''}>${escapedText}</p>` };
 };