shadowdaoandClaude Opus 5.5
7e8812a752
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>
99 lines
2.6 KiB
TypeScript
99 lines
2.6 KiB
TypeScript
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;
|
|
hideOnDesktop?: boolean;
|
|
hideOnTablet?: boolean;
|
|
hideOnMobile?: boolean;
|
|
animation?: string;
|
|
animationDelay?: string;
|
|
}
|
|
|
|
export const TextBlock: UserComponent<TextBlockProps> = ({
|
|
text = 'Start typing here...',
|
|
html = '',
|
|
style = {},
|
|
}) => {
|
|
const {
|
|
connectors: { connect, drag },
|
|
selected,
|
|
actions: { setProp },
|
|
} = useNode((node) => ({
|
|
selected: node.events.selected,
|
|
}));
|
|
|
|
const { elRef, onBlur, onInput, onKeyDown } = useInlineEditable(text, html, selected, setProp);
|
|
|
|
return (
|
|
<p
|
|
ref={(ref: HTMLParagraphElement | null) => {
|
|
elRef.current = ref;
|
|
if (ref) connect(drag(ref));
|
|
}}
|
|
contentEditable={selected}
|
|
suppressContentEditableWarning
|
|
onBlur={onBlur}
|
|
onInput={onInput}
|
|
onKeyDown={onKeyDown}
|
|
style={{
|
|
outline: 'none',
|
|
cursor: selected ? 'text' : 'pointer',
|
|
minHeight: '1em',
|
|
...style,
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
/* ---------- Craft config ---------- */
|
|
|
|
TextBlock.craft = {
|
|
displayName: 'Text',
|
|
props: {
|
|
text: 'Start typing here...',
|
|
html: '',
|
|
style: {
|
|
fontSize: '16px',
|
|
lineHeight: '1.6',
|
|
color: '#3f3f46',
|
|
letterSpacing: '',
|
|
textTransform: '' as CSSProperties['textTransform'],
|
|
fontStyle: '' as CSSProperties['fontStyle'],
|
|
textDecoration: '',
|
|
marginTop: '', marginRight: '', marginBottom: '', marginLeft: '',
|
|
paddingTop: '', paddingRight: '', paddingBottom: '', paddingLeft: '',
|
|
border: 'none',
|
|
boxShadow: 'none',
|
|
opacity: '1',
|
|
},
|
|
animation: '',
|
|
animationDelay: '0',
|
|
hideOnDesktop: false,
|
|
hideOnTablet: false,
|
|
hideOnMobile: false,
|
|
},
|
|
rules: {
|
|
canDrag: () => true,
|
|
canMoveIn: () => false,
|
|
canMoveOut: () => true,
|
|
},
|
|
};
|
|
|
|
/* ---------- HTML export ---------- */
|
|
|
|
(TextBlock as any).toHtml = (props: TextBlockProps, _childrenHtml: string) => {
|
|
const styleStr = cssPropsToString(props.style);
|
|
const escapedText = resolveInlineHtml(props.text, props.html) ?? escapeHtml(props.text || '');
|
|
return { html: `<p${styleStr ? ` style="${styleStr}"` : ''}>${escapedText}</p>` };
|
|
};
|