shardegger/storycove
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance Richtext editor

Browse Source
This commit is contained in:
Stefan Hardegger
2025-07-24 13:15:31 +02:00
parent 131e2e8c25
commit aae6091ef4
2 changed files with 51 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
backend/src/main/resources/html-sanitization-config.json
View File

@@ -5,7 +5,8 @@
"sup", "sub", "small", "big", "mark", "pre", "code", "kbd", "samp", "var",
"ul", "ol", "li", "dl", "dt", "dd",
"a", "table", "thead", "tbody", "tfoot", "tr", "th", "td", "caption", "colgroup", "col",
"blockquote", "cite", "q", "hr", "details", "summary"
"blockquote", "cite", "q", "hr", "details", "summary",
"section", "article", "font", "center", "abbr", "dfn", "tt"
],
"allowedAttributes": {
"p": ["class", "style"],
@@ -32,12 +33,44 @@
"pre": ["class", "style"],
"code": ["class", "style"],
"details": ["class", "style"],
"summary": ["class", "style"]
"summary": ["class", "style"],
"section": ["class", "style"],
"article": ["class", "style"],
"font": ["class", "style", "color", "size", "face"],
"center": ["class", "style"],
"abbr": ["class", "style", "title"],
"dfn": ["class", "style"],
"tt": ["class", "style"],
"b": ["class", "style"],
"strong": ["class", "style"],
"i": ["class", "style"],
"em": ["class", "style"],
"u": ["class", "style"],
"s": ["class", "style"],
"small": ["class", "style"],
"big": ["class", "style"],
"mark": ["class", "style"],
"sup": ["class", "style"],
"sub": ["class", "style"],
"del": ["class", "style"],
"ins": ["class", "style"],
"strike": ["class", "style"],
"kbd": ["class", "style"],
"samp": ["class", "style"],
"var": ["class", "style"]
},
"allowedCssProperties": [
"color", "background-color", "font-size", "font-weight",
"font-style", "text-align", "text-decoration", "margin",
"padding", "text-indent", "line-height"
"padding", "text-indent", "line-height",
"border", "border-color", "border-width", "border-style",
"font-family", "font-variant", "font-variant-ligatures",
"font-variant-caps", "font-variant-numeric", "font-variant-east-asian",
"font-variant-alternates", "font-variant-position", "font-variant-emoji",
"font-stretch", "letter-spacing", "word-spacing",
"text-transform", "text-shadow", "white-space",
"vertical-align", "display", "float", "clear",
"width", "height", "min-width", "min-height", "max-width", "max-height"
],
"removedAttributes": {
"a": ["href", "target"]

18
frontend/src/components/stories/RichTextEditor.tsx
View File

@@ -3,7 +3,7 @@
import { useState, useRef, useEffect } from 'react';
import { Textarea } from '../ui/Input';
import Button from '../ui/Button';
import { sanitizeHtmlSync, preloadSanitizationConfig } from '../../lib/sanitization';
import { sanitizeHtmlSync } from '../../lib/sanitization';
interface RichTextEditorProps {
value: string;
@@ -25,7 +25,11 @@ export default function RichTextEditor({
// Preload sanitization config
useEffect(() => {
preloadSanitizationConfig().catch(console.error);
// Clear cache and reload config to get latest sanitization rules
import('../../lib/sanitization').then(({ clearSanitizationCache, preloadSanitizationConfig }) => {
clearSanitizationCache();
preloadSanitizationConfig().catch(console.error);
});
}, []);
const handleVisualChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -109,7 +113,15 @@ export default function RichTextEditor({
console.log('Raw HTML:', htmlContent.substring(0, 500));
const sanitizedHtml = sanitizeHtmlSync(htmlContent);
console.log('Sanitized HTML:', sanitizedHtml.substring(0, 500));
console.log('Sanitized HTML length:', sanitizedHtml.length);
console.log('Sanitized HTML preview:', sanitizedHtml.substring(0, 500));
// Check if sanitization removed too much content
const ratio = sanitizedHtml.length / htmlContent.length;
console.log('Sanitization ratio (kept/original):', ratio.toFixed(3));
if (ratio < 0.1) {
console.warn('Sanitization removed >90% of content - this might be too aggressive');
}
// Insert at cursor position instead of just appending
const textarea = visualTextareaRef.current;