RunicGateway/website
3
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Activity

Add rich-text alignment controls (left/center/right)

Browse Source 
Shared RichTextEditor gains @tiptap/extension-text-align for heading and
paragraph nodes, serializing alignment as inline text-align on the block
node so it round-trips through save/reload. Fixed once at the shared
component so it also flows into the upcoming rich_text and two_column
page blocks.

Server sanitize allowlist now permits `style` on p/h1-h6, constrained by
allowedStyles to text-align (left/right/center/justify) only; all other
CSS properties and values are stripped.

Step 1 of the CMS Page Builder spec.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
claude
2026-07-09 20:21:17 -05:00
parent d7fc2dccb7
commit 6180e8a071
4 changed files with 60 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
client/src/components/RichTextEditor.jsx
View File

@@ -3,6 +3,7 @@ import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import Link from '@tiptap/extension-link'
import Image from '@tiptap/extension-image'
import TextAlign from '@tiptap/extension-text-align'
import { api } from '../api/client.js'
// Toolbar button.
@@ -25,6 +26,22 @@ function escapeHtml(s) {
return String(s).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c])
}
// Alignment glyph: three lines justified to the given side.
function AlignIcon({ align }) {
const rows = {
left: [[2, 14], [2, 10], [2, 12]],
center: [[2, 14], [4, 12], [3, 13]],
right: [[2, 14], [6, 14], [4, 14]],
}[align]
return (
<svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
{rows.map(([x1, x2], i) => (
<line key={i} x1={x1} y1={4 + i * 4} x2={x2} y2={4 + i * 4} />
))}
</svg>
)
}
// Toolbar variants:
// 'full' — every control, incl. the internal wiki-page link picker (wiki use).
// 'post' — full minus the wiki-page picker (no page-list context in posts).
@@ -42,6 +59,11 @@ export default function RichTextEditor({ value, onChange, pages = [], variant =
StarterKit.configure({ heading: { levels: [2, 3] } }),
Link.configure({ openOnClick: false, autolink: true }),
Image.configure({ inline: false }),
// Alignment stored as `text-align` on the block node (heading/paragraph),
// so it round-trips through save/reload as inline style. Shared here means
// every consumer — post editor, and the future rich_text / two_column
// blocks — gets it for free.
TextAlign.configure({ types: ['heading', 'paragraph'] }),
],
content: value || '',
onUpdate: ({ editor }) => onChange(editor.getHTML()),
@@ -131,6 +153,16 @@ export default function RichTextEditor({ value, onChange, pages = [], variant =
—
</Btn>
<span className="rte-sep" />
<Btn title="Align left" active={editor.isActive({ textAlign: 'left' })} onClick={() => editor.chain().focus().setTextAlign('left').run()}>
<AlignIcon align="left" />
</Btn>
<Btn title="Align center" active={editor.isActive({ textAlign: 'center' })} onClick={() => editor.chain().focus().setTextAlign('center').run()}>
<AlignIcon align="center" />
</Btn>
<Btn title="Align right" active={editor.isActive({ textAlign: 'right' })} onClick={() => editor.chain().focus().setTextAlign('right').run()}>
<AlignIcon align="right" />
</Btn>
<span className="rte-sep" />
<Btn title="Link" active={editor.isActive('link')} onClick={setLink}>
🔗
</Btn>