shadowdao
fad1882117
Replace divergent, buggy local esc/escapeHtml helpers across 26 files with imports from src/utils/escape (escapeHtml/escapeAttr). Attribute call sites use escapeAttr, text-content sites use escapeHtml. Several toHtml outputs now correctly escape & where old local escapers omitted it. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
323 lines
12 KiB
TypeScript
323 lines
12 KiB
TypeScript
import React, { CSSProperties } from 'react';
|
|
import { useNode, UserComponent } from '@craftjs/core';
|
|
import { cssPropsToString } from '../../utils/style-helpers';
|
|
import { escapeHtml, escapeAttr } from '../../utils/escape';
|
|
|
|
interface GalleryImage {
|
|
src: string;
|
|
alt: string;
|
|
caption?: string;
|
|
}
|
|
|
|
interface GalleryProps {
|
|
images?: GalleryImage[];
|
|
columns?: number;
|
|
gap?: string;
|
|
style?: CSSProperties;
|
|
lightbox?: boolean;
|
|
}
|
|
|
|
const placeholderSvg = (index: number) => {
|
|
const colors = ['#3b82f6', '#8b5cf6', '#10b981', '#f59e0b', '#ef4444', '#ec4899'];
|
|
const color = colors[index % colors.length];
|
|
return `data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300"><rect fill="${color}" width="400" height="300" opacity="0.15"/><rect fill="${color}" x="150" y="100" width="100" height="100" rx="12" opacity="0.3"/><text x="200" y="160" text-anchor="middle" font-family="sans-serif" font-size="24" fill="${color}" opacity="0.6">${index + 1}</text></svg>`)}`;
|
|
};
|
|
|
|
const defaultImages: GalleryImage[] = [
|
|
{ src: placeholderSvg(0), alt: 'Gallery image 1', caption: 'First image' },
|
|
{ src: placeholderSvg(1), alt: 'Gallery image 2', caption: 'Second image' },
|
|
{ src: placeholderSvg(2), alt: 'Gallery image 3', caption: 'Third image' },
|
|
{ src: placeholderSvg(3), alt: 'Gallery image 4', caption: 'Fourth image' },
|
|
{ src: placeholderSvg(4), alt: 'Gallery image 5', caption: 'Fifth image' },
|
|
{ src: placeholderSvg(5), alt: 'Gallery image 6', caption: 'Sixth image' },
|
|
];
|
|
|
|
export const Gallery: UserComponent<GalleryProps> = ({
|
|
images = defaultImages,
|
|
columns = 3,
|
|
gap = '16px',
|
|
style = {},
|
|
lightbox = false,
|
|
}) => {
|
|
const {
|
|
connectors: { connect, drag },
|
|
selected,
|
|
} = useNode((node) => ({
|
|
selected: node.events.selected,
|
|
}));
|
|
|
|
return (
|
|
<section
|
|
ref={(ref: HTMLElement | null): void => { if (ref) connect(drag(ref)); }}
|
|
style={{
|
|
padding: '60px 20px',
|
|
backgroundColor: '#ffffff',
|
|
outline: selected ? '2px solid #3b82f6' : 'none',
|
|
...style,
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
maxWidth: '1100px',
|
|
margin: '0 auto',
|
|
display: 'grid',
|
|
gridTemplateColumns: `repeat(${columns}, 1fr)`,
|
|
gap: gap,
|
|
}}
|
|
>
|
|
{images.map((img, i) => (
|
|
<div key={i} style={{ position: 'relative', overflow: 'hidden', borderRadius: '8px' }}>
|
|
<img
|
|
src={img.src}
|
|
alt={img.alt}
|
|
style={{
|
|
width: '100%',
|
|
height: '200px',
|
|
objectFit: 'cover',
|
|
display: 'block',
|
|
borderRadius: '8px',
|
|
backgroundColor: '#f1f5f9',
|
|
}}
|
|
/>
|
|
{img.caption && (
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
bottom: '0',
|
|
left: '0',
|
|
right: '0',
|
|
padding: '8px 12px',
|
|
background: 'linear-gradient(transparent, rgba(0,0,0,0.7))',
|
|
color: '#ffffff',
|
|
fontSize: '12px',
|
|
borderBottomLeftRadius: '8px',
|
|
borderBottomRightRadius: '8px',
|
|
}}
|
|
>
|
|
{img.caption}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
/* ---------- Settings panel ---------- */
|
|
|
|
const GallerySettings: React.FC = () => {
|
|
const { actions: { setProp }, props } = useNode((node) => ({
|
|
props: node.data.props as GalleryProps,
|
|
}));
|
|
|
|
const images = props.images || defaultImages;
|
|
|
|
const inputStyle: CSSProperties = {
|
|
width: '100%', padding: '3px 6px', background: '#27272a', color: '#e4e4e7',
|
|
border: '1px solid #3f3f46', borderRadius: 4, fontSize: 11,
|
|
};
|
|
|
|
const labelStyle: CSSProperties = { fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 };
|
|
|
|
const updateImage = (index: number, field: keyof GalleryImage, value: string) => {
|
|
setProp((p: GalleryProps) => {
|
|
const updated = [...(p.images || defaultImages)];
|
|
updated[index] = { ...updated[index], [field]: value };
|
|
p.images = updated;
|
|
});
|
|
};
|
|
|
|
const addImage = () => {
|
|
setProp((p: GalleryProps) => {
|
|
const current = p.images || defaultImages;
|
|
p.images = [...current, { src: placeholderSvg(current.length), alt: `Gallery image ${current.length + 1}`, caption: '' }];
|
|
});
|
|
};
|
|
|
|
const removeImage = (index: number) => {
|
|
setProp((p: GalleryProps) => {
|
|
const updated = [...(p.images || defaultImages)];
|
|
updated.splice(index, 1);
|
|
p.images = updated;
|
|
});
|
|
};
|
|
|
|
const columnOptions = [2, 3, 4, 5, 6];
|
|
const gapOptions = ['8px', '12px', '16px', '24px', '32px'];
|
|
|
|
return (
|
|
<div style={{ padding: '12px', display: 'flex', flexDirection: 'column', gap: '14px' }}>
|
|
<div>
|
|
<label style={labelStyle}>Background</label>
|
|
<div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
|
|
{['#ffffff', '#f8fafc', '#f1f5f9', '#18181b', '#0f172a'].map((c) => (
|
|
<button
|
|
key={c}
|
|
onClick={() => setProp((p: GalleryProps) => { p.style = { ...p.style, backgroundColor: c }; })}
|
|
style={{
|
|
width: 24, height: 24, borderRadius: 4, border: '1px solid #3f3f46',
|
|
backgroundColor: c, cursor: 'pointer',
|
|
outline: props.style?.backgroundColor === c ? '2px solid #3b82f6' : 'none',
|
|
outlineOffset: 1,
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label style={labelStyle}>Columns</label>
|
|
<div style={{ display: 'flex', gap: 4 }}>
|
|
{columnOptions.map((n) => (
|
|
<button
|
|
key={n}
|
|
onClick={() => setProp((p: GalleryProps) => { p.columns = n; })}
|
|
style={{
|
|
padding: '4px 10px', fontSize: 11, borderRadius: 4, cursor: 'pointer',
|
|
border: '1px solid #3f3f46',
|
|
background: props.columns === n ? '#3b82f6' : '#27272a',
|
|
color: props.columns === n ? '#fff' : '#e4e4e7',
|
|
}}
|
|
>
|
|
{n}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label style={labelStyle}>Gap</label>
|
|
<div style={{ display: 'flex', gap: 4 }}>
|
|
{gapOptions.map((g) => (
|
|
<button
|
|
key={g}
|
|
onClick={() => setProp((p: GalleryProps) => { p.gap = g; })}
|
|
style={{
|
|
padding: '4px 8px', fontSize: 11, borderRadius: 4, cursor: 'pointer',
|
|
border: '1px solid #3f3f46',
|
|
background: props.gap === g ? '#3b82f6' : '#27272a',
|
|
color: props.gap === g ? '#fff' : '#e4e4e7',
|
|
}}
|
|
>
|
|
{g}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label style={{ ...labelStyle, display: 'flex', alignItems: 'center', gap: 6 }}>
|
|
<input
|
|
type="checkbox"
|
|
checked={props.lightbox || false}
|
|
onChange={(e) => setProp((p: GalleryProps) => { p.lightbox = e.target.checked; })}
|
|
/>
|
|
Lightbox (click to enlarge in exported HTML)
|
|
</label>
|
|
</div>
|
|
|
|
<div>
|
|
<label style={labelStyle}>Images</label>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
|
{images.map((img, i) => (
|
|
<div key={i} style={{ background: '#1e1e22', borderRadius: 6, padding: 8, display: 'flex', flexDirection: 'column', gap: 4 }}>
|
|
<div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
|
|
<img
|
|
src={img.src}
|
|
alt=""
|
|
style={{ width: 32, height: 32, objectFit: 'cover', borderRadius: 4, flexShrink: 0, backgroundColor: '#27272a' }}
|
|
/>
|
|
<input type="text" value={img.src} onChange={(e) => updateImage(i, 'src', e.target.value)} placeholder="Image URL" style={{ ...inputStyle, flex: 1 }} />
|
|
<button
|
|
onClick={() => removeImage(i)}
|
|
style={{ padding: '2px 6px', fontSize: 11, background: '#ef4444', color: '#fff', border: 'none', borderRadius: 4, cursor: 'pointer' }}
|
|
>
|
|
X
|
|
</button>
|
|
</div>
|
|
<div style={{ display: 'flex', gap: 4 }}>
|
|
<input type="text" value={img.alt} onChange={(e) => updateImage(i, 'alt', e.target.value)} placeholder="Alt text" style={{ ...inputStyle, flex: 1 }} />
|
|
<input type="text" value={img.caption || ''} onChange={(e) => updateImage(i, 'caption', e.target.value)} placeholder="Caption" style={{ ...inputStyle, flex: 1 }} />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<button
|
|
onClick={addImage}
|
|
style={{ marginTop: 6, width: '100%', padding: '6px', fontSize: 11, background: '#27272a', color: '#e4e4e7', border: '1px solid #3f3f46', borderRadius: 4, cursor: 'pointer' }}
|
|
>
|
|
+ Add Image
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
/* ---------- Craft config ---------- */
|
|
|
|
Gallery.craft = {
|
|
displayName: 'Gallery',
|
|
props: {
|
|
images: defaultImages,
|
|
columns: 3,
|
|
gap: '16px',
|
|
style: { backgroundColor: '#ffffff' },
|
|
lightbox: false,
|
|
},
|
|
rules: {
|
|
canDrag: () => true,
|
|
canMoveIn: () => false,
|
|
canMoveOut: () => true,
|
|
},
|
|
related: {
|
|
settings: GallerySettings,
|
|
},
|
|
};
|
|
|
|
/* ---------- HTML export ---------- */
|
|
|
|
(Gallery as any).toHtml = (props: GalleryProps, _childrenHtml: string) => {
|
|
const sectionStyle = cssPropsToString({
|
|
padding: '60px 20px',
|
|
...props.style,
|
|
});
|
|
const images = props.images || defaultImages;
|
|
const columns = props.columns || 3;
|
|
const gap = props.gap || '16px';
|
|
const lightbox = props.lightbox || false;
|
|
|
|
const galleryId = 'gallery_' + Math.random().toString(36).slice(2, 8);
|
|
|
|
const items = images.map((img) => {
|
|
const caption = img.caption
|
|
? `<div style="position:absolute;bottom:0;left:0;right:0;padding:8px 12px;background:linear-gradient(transparent,rgba(0,0,0,0.7));color:#ffffff;font-size:12px;border-bottom-left-radius:8px;border-bottom-right-radius:8px">${escapeHtml(img.caption)}</div>`
|
|
: '';
|
|
const clickAttr = lightbox ? ` onclick="${galleryId}_open('${escapeAttr(img.src)}')" style="cursor:pointer;position:relative;overflow:hidden;border-radius:8px"` : ' style="position:relative;overflow:hidden;border-radius:8px"';
|
|
return `<div${clickAttr}>
|
|
<img src="${escapeAttr(img.src)}" alt="${escapeAttr(img.alt)}" style="width:100%;height:200px;object-fit:cover;display:block;border-radius:8px;background-color:#f1f5f9" />
|
|
${caption}
|
|
</div>`;
|
|
}).join('\n ');
|
|
|
|
let lightboxHtml = '';
|
|
if (lightbox) {
|
|
lightboxHtml = `
|
|
<div id="${galleryId}_overlay" onclick="${galleryId}_close()" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);z-index:9999;justify-content:center;align-items:center;cursor:pointer">
|
|
<img id="${galleryId}_img" src="" alt="" style="max-width:90%;max-height:90%;object-fit:contain;border-radius:8px" />
|
|
</div>
|
|
<script>
|
|
function ${galleryId}_open(src){var o=document.getElementById('${galleryId}_overlay');document.getElementById('${galleryId}_img').src=src;o.style.display='flex';}
|
|
function ${galleryId}_close(){document.getElementById('${galleryId}_overlay').style.display='none';}
|
|
</script>`;
|
|
}
|
|
|
|
return {
|
|
html: `<section${sectionStyle ? ` style="${sectionStyle}"` : ''}>
|
|
<div style="max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(${columns},1fr);gap:${gap}">
|
|
${items}
|
|
</div>${lightboxHtml}
|
|
</section>`,
|
|
};
|
|
};
|