@visns-studio/visns-components 6.34.0 → 6.35.0

package/src/components/emailCampaigns/BlockEditor.jsx

@@ -0,0 +1,486 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+    AlignCenter,
+    AlignLeft,
+    AlignRight,
+    ArrowDown,
+    ArrowUp,
+    Bold,
+    ImageUp,
+    Italic,
+    Link2,
+    List,
+    Trash2,
+} from 'lucide-react';
+
+import styles from '../styles/EmailCampaigns.module.scss';
+import { api, BLOCK_TYPES, newBlock } from './emailCampaignApi';
+
+/**
+ * The campaign's content, as an ordered list of blocks.
+ *
+ * Each block is a card with its own fields and the same three controls: move
+ * up, move down, remove. The server turns the blocks into the email
+ * (EmailCampaignRenderer) and cleans the rich text again on the way, so nothing
+ * here is trusted for safety; it is only an editor.
+ *
+ * Merge tags are typed as `{first_name}` and friends. The "Insert" menu puts one
+ * at the cursor so nobody has to remember the spelling.
+ */
+const TAG_LABELS = {
+    first_name: 'First name',
+    last_name: 'Last name',
+    name: 'Full name',
+    company: 'Company',
+    email: 'Email',
+};
+
+const BlockEditor = ({ blocks, onChange, routes, disabled, tags = Object.keys(TAG_LABELS) }) => {
+    const update = (index, patch) =>
+        onChange(blocks.map((block, at) => (at === index ? { ...block, ...patch } : block)));
+
+    const move = (index, by) => {
+        const target = index + by;
+
+        if (target < 0 || target >= blocks.length) return;
+
+        const next = [...blocks];
+        [next[index], next[target]] = [next[target], next[index]];
+        onChange(next);
+    };
+
+    const remove = (index) => onChange(blocks.filter((block, at) => at !== index));
+
+    return (
+        <div className={styles.blocks}>
+            {blocks.length === 0 && (
+                <p className={styles.quiet}>No content yet. Add a heading or some text below.</p>
+            )}
+
+            {blocks.map((block, index) => (
+                <div className={styles.block} key={index}>
+                    <div className={styles.blockHead}>
+                        <span className={styles.blockType}>
+                            {BLOCK_TYPES.find((entry) => entry.type === block.type)?.label || block.type}
+                        </span>
+                        <span className={styles.blockTools}>
+                            <IconButton
+                                title="Move this block up"
+                                disabled={disabled || index === 0}
+                                onClick={() => move(index, -1)}
+                            >
+                                <ArrowUp size={14} aria-hidden="true" />
+                            </IconButton>
+                            <IconButton
+                                title="Move this block down"
+                                disabled={disabled || index === blocks.length - 1}
+                                onClick={() => move(index, 1)}
+                            >
+                                <ArrowDown size={14} aria-hidden="true" />
+                            </IconButton>
+                            <IconButton
+                                title="Remove this block"
+                                danger
+                                disabled={disabled}
+                                onClick={() => remove(index)}
+                            >
+                                <Trash2 size={14} aria-hidden="true" />
+                            </IconButton>
+                        </span>
+                    </div>
+
+                    <BlockFields
+                        block={block}
+                        disabled={disabled}
+                        tags={tags}
+                        routes={routes}
+                        onChange={(patch) => update(index, patch)}
+                    />
+                </div>
+            ))}
+
+            {!disabled && (
+                <div className={styles.addRow}>
+                    <span className={styles.addLabel}>Add</span>
+                    {BLOCK_TYPES.map((entry) => (
+                        <button
+                            key={entry.type}
+                            type="button"
+                            className={styles.addButton}
+                            title={`Add a ${entry.label.toLowerCase()} block at the end`}
+                            onClick={() => onChange([...blocks, newBlock(entry.type)])}
+                        >
+                            {entry.label}
+                        </button>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};
+
+const BlockFields = ({ block, onChange, disabled, tags, routes }) => {
+    switch (block.type) {
+        case 'heading':
+            return (
+                <div className={styles.fieldRow}>
+                    <TextWithTags
+                        value={block.text || ''}
+                        placeholder="Heading"
+                        disabled={disabled}
+                        tags={tags}
+                        onChange={(text) => onChange({ text })}
+                    />
+                    <select
+                        className={styles.select}
+                        value={block.level === 2 ? 2 : 1}
+                        disabled={disabled}
+                        title="Heading size"
+                        onChange={(event) => onChange({ level: Number(event.target.value) })}
+                    >
+                        <option value={1}>Large</option>
+                        <option value={2}>Small</option>
+                    </select>
+                    <AlignPicker value={block.align} disabled={disabled} onChange={(align) => onChange({ align })} />
+                </div>
+            );
+
+        case 'text':
+            return (
+                <RichText
+                    value={block.html || ''}
+                    disabled={disabled}
+                    tags={tags}
+                    onChange={(html) => onChange({ html })}
+                />
+            );
+
+        case 'columns':
+            return (
+                <div className={styles.columnsEdit}>
+                    <RichText value={block.left || ''} disabled={disabled} tags={tags} onChange={(left) => onChange({ left })} />
+                    <RichText value={block.right || ''} disabled={disabled} tags={tags} onChange={(right) => onChange({ right })} />
+                </div>
+            );
+
+        case 'button':
+            return (
+                <div className={styles.fieldRow}>
+                    <TextWithTags
+                        value={block.label || ''}
+                        placeholder="Button label"
+                        disabled={disabled}
+                        tags={tags}
+                        onChange={(label) => onChange({ label })}
+                    />
+                    <input
+                        type="url"
+                        className={styles.input}
+                        value={block.url || ''}
+                        placeholder="https://"
+                        disabled={disabled}
+                        title="Where the button goes"
+                        onChange={(event) => onChange({ url: event.target.value })}
+                    />
+                    <AlignPicker value={block.align} disabled={disabled} onChange={(align) => onChange({ align })} />
+                </div>
+            );
+
+        case 'image':
+            return <ImageFields block={block} disabled={disabled} routes={routes} onChange={onChange} />;
+
+        case 'spacer':
+            return (
+                <label className={styles.inline}>
+                    Height
+                    <input
+                        type="range"
+                        min={8}
+                        max={80}
+                        step={4}
+                        value={block.height || 24}
+                        disabled={disabled}
+                        onChange={(event) => onChange({ height: Number(event.target.value) })}
+                    />
+                    <span className={styles.quiet}>{block.height || 24}px</span>
+                </label>
+            );
+
+        case 'divider':
+            return <p className={styles.quiet}>A thin line across the email.</p>;
+
+        default:
+            return null;
+    }
+};
+
+const ImageFields = ({ block, onChange, disabled, routes }) => {
+    const [uploading, setUploading] = useState(false);
+    const [error, setError] = useState('');
+    const file = useRef(null);
+
+    const upload = async (picked) => {
+        if (!picked) return;
+
+        const body = new FormData();
+        body.append('image', picked);
+        setUploading(true);
+        setError('');
+
+        const result = await api(routes.images, 'POST', body);
+
+        setUploading(false);
+
+        if (result.ok && result.data?.url) {
+            onChange({ url: result.data.url, alt: block.alt || picked.name.replace(/\.[a-z0-9]+$/i, '') });
+        } else {
+            setError(result.message || 'The image could not be uploaded.');
+        }
+    };
+
+    return (
+        <div className={styles.imageEdit}>
+            {block.url ? (
+                <img src={block.url} alt="" className={styles.imageThumb} />
+            ) : (
+                <div className={styles.imageEmpty}>No image yet</div>
+            )}
+
+            <div className={styles.imageFields}>
+                <div className={styles.fieldRow}>
+                    <button
+                        type="button"
+                        className={styles.button}
+                        disabled={disabled || uploading}
+                        title="Upload a JPEG, PNG, GIF or WebP from this computer"
+                        onClick={() => file.current?.click()}
+                    >
+                        <ImageUp size={14} aria-hidden="true" />
+                        {uploading ? 'Uploading…' : 'Upload image'}
+                    </button>
+                    <input
+                        ref={file}
+                        type="file"
+                        accept="image/jpeg,image/png,image/gif,image/webp"
+                        hidden
+                        onChange={(event) => upload(event.target.files?.[0])}
+                    />
+                    <input
+                        type="url"
+                        className={styles.input}
+                        value={block.url || ''}
+                        placeholder="or paste an image address (https://…)"
+                        disabled={disabled}
+                        onChange={(event) => onChange({ url: event.target.value })}
+                    />
+                </div>
+                <div className={styles.fieldRow}>
+                    <input
+                        type="text"
+                        className={styles.input}
+                        value={block.alt || ''}
+                        placeholder="Describe the image (shown if it does not load)"
+                        disabled={disabled}
+                        onChange={(event) => onChange({ alt: event.target.value })}
+                    />
+                    <input
+                        type="url"
+                        className={styles.input}
+                        value={block.href || ''}
+                        placeholder="Link when clicked (optional)"
+                        disabled={disabled}
+                        onChange={(event) => onChange({ href: event.target.value })}
+                    />
+                </div>
+                <label className={styles.inline}>
+                    Width
+                    <input
+                        type="range"
+                        min={20}
+                        max={100}
+                        step={5}
+                        value={block.width || 100}
+                        disabled={disabled}
+                        onChange={(event) => onChange({ width: Number(event.target.value) })}
+                    />
+                    <span className={styles.quiet}>{block.width || 100}%</span>
+                    <AlignPicker value={block.align || 'center'} disabled={disabled} onChange={(align) => onChange({ align })} />
+                </label>
+                {error && <p className={styles.fieldError}>{error}</p>}
+            </div>
+        </div>
+    );
+};
+
+/** A single-line field with a merge-tag menu beside it. */
+const TextWithTags = ({ value, onChange, placeholder, disabled, tags }) => {
+    const input = useRef(null);
+
+    const insert = (tag) => {
+        const element = input.current;
+        const token = `{${tag}}`;
+
+        if (!element) {
+            onChange(`${value}${token}`);
+
+            return;
+        }
+
+        const start = element.selectionStart ?? value.length;
+        const end = element.selectionEnd ?? value.length;
+        onChange(value.slice(0, start) + token + value.slice(end));
+    };
+
+    return (
+        <span className={styles.withTags}>
+            <input
+                ref={input}
+                type="text"
+                className={styles.input}
+                value={value}
+                placeholder={placeholder}
+                disabled={disabled}
+                onChange={(event) => onChange(event.target.value)}
+            />
+            <TagMenu tags={tags} disabled={disabled} onPick={insert} />
+        </span>
+    );
+};
+
+const TagMenu = ({ tags, onPick, disabled }) => (
+    <select
+        className={styles.tagSelect}
+        value=""
+        disabled={disabled}
+        title="Insert a personal detail, filled in for each recipient"
+        aria-label="Insert a personal detail"
+        onChange={(event) => {
+            if (event.target.value) onPick(event.target.value);
+        }}
+    >
+        <option value="">Insert…</option>
+        {tags.map((tag) => (
+            <option key={tag} value={tag}>
+                {TAG_LABELS[tag] || tag}
+            </option>
+        ))}
+    </select>
+);
+
+/**
+ * A small rich-text box: bold, italic, link, bullet list, and a merge tag.
+ *
+ * `contentEditable` with `execCommand`: deprecated on paper and supported by
+ * every browser in practice, and a whole editor library for five buttons would
+ * be a bundle every reader of every page pays for. The HTML it produces is
+ * cleaned on the server before it goes anywhere.
+ *
+ * The box is written to only when the value changes from OUTSIDE (a template
+ * loaded, a reset) — writing on every keystroke would throw the cursor to the
+ * start of the box.
+ */
+const RichText = ({ value, onChange, disabled, tags }) => {
+    const box = useRef(null);
+    const last = useRef(value);
+
+    useEffect(() => {
+        if (box.current && value !== last.current) {
+            box.current.innerHTML = value;
+            last.current = value;
+        }
+    }, [value]);
+
+    useEffect(() => {
+        if (box.current) box.current.innerHTML = value;
+        // First paint only; later outside changes go through the effect above.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const emit = () => {
+        const html = box.current?.innerHTML ?? '';
+        last.current = html;
+        onChange(html);
+    };
+
+    const run = (command, argument = null) => {
+        box.current?.focus();
+        document.execCommand(command, false, argument);
+        emit();
+    };
+
+    const link = () => {
+        const url = window.prompt('Link address (https://…)');
+
+        if (url && /^(https?:\/\/|mailto:)/i.test(url.trim())) {
+            run('createLink', url.trim());
+        }
+    };
+
+    return (
+        <div className={styles.rich}>
+            <div className={styles.richBar}>
+                <IconButton title="Bold" disabled={disabled} onClick={() => run('bold')}>
+                    <Bold size={14} aria-hidden="true" />
+                </IconButton>
+                <IconButton title="Italic" disabled={disabled} onClick={() => run('italic')}>
+                    <Italic size={14} aria-hidden="true" />
+                </IconButton>
+                <IconButton title="Link the selected words" disabled={disabled} onClick={link}>
+                    <Link2 size={14} aria-hidden="true" />
+                </IconButton>
+                <IconButton title="Bulleted list" disabled={disabled} onClick={() => run('insertUnorderedList')}>
+                    <List size={14} aria-hidden="true" />
+                </IconButton>
+                <TagMenu tags={tags} disabled={disabled} onPick={(tag) => run('insertText', `{${tag}}`)} />
+            </div>
+            <div
+                ref={box}
+                className={styles.richBox}
+                contentEditable={!disabled}
+                suppressContentEditableWarning
+                role="textbox"
+                aria-multiline="true"
+                onInput={emit}
+                onBlur={emit}
+            />
+        </div>
+    );
+};
+
+const AlignPicker = ({ value = 'left', onChange, disabled }) => (
+    <span className={styles.alignPicker} role="group" aria-label="Alignment">
+        {[
+            ['left', AlignLeft],
+            ['center', AlignCenter],
+            ['right', AlignRight],
+        ].map(([key, Icon]) => (
+            <IconButton
+                key={key}
+                title={`Align ${key}`}
+                pressed={value === key}
+                disabled={disabled}
+                onClick={() => onChange(key)}
+            >
+                <Icon size={14} aria-hidden="true" />
+            </IconButton>
+        ))}
+    </span>
+);
+
+const IconButton = ({ title, onClick, disabled, danger, pressed, children }) => (
+    <button
+        type="button"
+        className={[styles.iconButton, danger ? styles.iconDanger : '', pressed ? styles.iconOn : '']
+            .filter(Boolean)
+            .join(' ')}
+        title={title}
+        aria-label={title}
+        aria-pressed={pressed === undefined ? undefined : pressed}
+        disabled={disabled}
+        onClick={onClick}
+    >
+        {children}
+    </button>
+);
+
+export default BlockEditor;