1273 lines
55 KiB
TypeScript
1273 lines
55 KiB
TypeScript
// @ts-nocheck
|
|
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
import { EditorContent, Extension, useEditor } from '@tiptap/react';
|
|
import StarterKit from '@tiptap/starter-kit';
|
|
import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
|
|
import Image from '@tiptap/extension-image';
|
|
import Link from '@tiptap/extension-link';
|
|
import Placeholder from '@tiptap/extension-placeholder';
|
|
import Underline from '@tiptap/extension-underline';
|
|
import Suggestion from '@tiptap/suggestion';
|
|
import { Node, mergeAttributes } from '@tiptap/core';
|
|
import { common, createLowlight } from 'lowlight';
|
|
import tippy from 'tippy.js';
|
|
import { buildBotFingerprint } from '../../lib/security/botFingerprint';
|
|
import TurnstileField from '../security/TurnstileField';
|
|
import Select from '../ui/Select';
|
|
|
|
type StoryType = {
|
|
slug: string;
|
|
name: string;
|
|
};
|
|
|
|
type Artwork = {
|
|
id: number;
|
|
title: string;
|
|
url: string;
|
|
thumb: string | null;
|
|
thumbs?: {
|
|
xs?: string | null;
|
|
sm?: string | null;
|
|
md?: string | null;
|
|
lg?: string | null;
|
|
xl?: string | null;
|
|
};
|
|
};
|
|
|
|
type StoryPayload = {
|
|
id?: number;
|
|
title: string;
|
|
excerpt: string;
|
|
cover_image: string;
|
|
story_type: string;
|
|
tags_csv: string;
|
|
meta_title: string;
|
|
meta_description: string;
|
|
canonical_url: string;
|
|
og_image: string;
|
|
status: string;
|
|
scheduled_for: string;
|
|
content: Record<string, unknown>;
|
|
};
|
|
|
|
type Endpoints = {
|
|
create: string;
|
|
update: string;
|
|
autosave: string;
|
|
uploadImage: string;
|
|
artworks: string;
|
|
previewBase: string;
|
|
analyticsBase: string;
|
|
};
|
|
|
|
type Props = {
|
|
mode: 'create' | 'edit';
|
|
initialStory: StoryPayload;
|
|
storyTypes: StoryType[];
|
|
endpoints: Endpoints;
|
|
csrfToken: string;
|
|
};
|
|
|
|
const EMPTY_DOC = {
|
|
type: 'doc',
|
|
content: [{ type: 'paragraph' }],
|
|
};
|
|
|
|
const lowlight = createLowlight(common);
|
|
|
|
const CODE_BLOCK_LANGUAGES = [
|
|
{ value: 'bash', label: 'Bash / Shell' },
|
|
{ value: 'plaintext', label: 'Plain text' },
|
|
{ value: 'php', label: 'PHP' },
|
|
{ value: 'javascript', label: 'JavaScript' },
|
|
{ value: 'typescript', label: 'TypeScript' },
|
|
{ value: 'json', label: 'JSON' },
|
|
{ value: 'html', label: 'HTML' },
|
|
{ value: 'css', label: 'CSS' },
|
|
{ value: 'sql', label: 'SQL' },
|
|
{ value: 'xml', label: 'XML / SVG' },
|
|
{ value: 'yaml', label: 'YAML' },
|
|
{ value: 'markdown', label: 'Markdown' },
|
|
];
|
|
|
|
const ArtworkBlock = Node.create({
|
|
name: 'artworkEmbed',
|
|
group: 'block',
|
|
atom: true,
|
|
|
|
addAttributes() {
|
|
return {
|
|
artworkId: { default: null },
|
|
title: { default: '' },
|
|
url: { default: '' },
|
|
thumb: { default: '' },
|
|
};
|
|
},
|
|
|
|
parseHTML() {
|
|
return [{ tag: 'figure[data-artwork-embed]' }];
|
|
},
|
|
|
|
renderHTML({ HTMLAttributes }) {
|
|
return [
|
|
'figure',
|
|
mergeAttributes(HTMLAttributes, {
|
|
'data-artwork-embed': 'true',
|
|
class: 'my-4 overflow-hidden rounded-xl border border-gray-700 bg-gray-800/70',
|
|
}),
|
|
[
|
|
'a',
|
|
{
|
|
href: HTMLAttributes.url || '#',
|
|
class: 'block',
|
|
rel: 'noopener noreferrer nofollow',
|
|
target: '_blank',
|
|
},
|
|
[
|
|
'img',
|
|
{
|
|
src: HTMLAttributes.thumb || '',
|
|
alt: HTMLAttributes.title || 'Artwork',
|
|
class: 'h-48 w-full object-cover',
|
|
loading: 'lazy',
|
|
},
|
|
],
|
|
[
|
|
'figcaption',
|
|
{ class: 'p-3 text-sm text-gray-200' },
|
|
`${HTMLAttributes.title || 'Artwork'} (#${HTMLAttributes.artworkId || 'n/a'})`,
|
|
],
|
|
],
|
|
];
|
|
},
|
|
});
|
|
|
|
const GalleryBlock = Node.create({
|
|
name: 'galleryBlock',
|
|
group: 'block',
|
|
atom: true,
|
|
|
|
addAttributes() {
|
|
return {
|
|
images: { default: [] },
|
|
};
|
|
},
|
|
|
|
parseHTML() {
|
|
return [{ tag: 'div[data-gallery-block]' }];
|
|
},
|
|
|
|
renderHTML({ HTMLAttributes }) {
|
|
const images = Array.isArray(HTMLAttributes.images) ? HTMLAttributes.images : [];
|
|
const children: Array<unknown> = images.slice(0, 6).map((src: string) => [
|
|
'img',
|
|
{ src, class: 'h-36 w-full rounded-lg object-cover', loading: 'lazy', alt: 'Gallery image' },
|
|
]);
|
|
|
|
if (children.length === 0) {
|
|
children.push(['div', { class: 'rounded-lg border border-dashed border-gray-600 p-4 text-xs text-gray-400' }, 'Empty gallery block']);
|
|
}
|
|
|
|
return [
|
|
'div',
|
|
mergeAttributes(HTMLAttributes, {
|
|
'data-gallery-block': 'true',
|
|
class: 'my-4 grid grid-cols-2 gap-3 rounded-xl border border-gray-700 bg-gray-800/50 p-3',
|
|
}),
|
|
...children,
|
|
];
|
|
},
|
|
});
|
|
|
|
const VideoEmbedBlock = Node.create({
|
|
name: 'videoEmbed',
|
|
group: 'block',
|
|
atom: true,
|
|
|
|
addAttributes() {
|
|
return {
|
|
src: { default: '' },
|
|
title: { default: 'Embedded video' },
|
|
};
|
|
},
|
|
|
|
parseHTML() {
|
|
return [{ tag: 'figure[data-video-embed]' }];
|
|
},
|
|
|
|
renderHTML({ HTMLAttributes }) {
|
|
return [
|
|
'figure',
|
|
mergeAttributes(HTMLAttributes, {
|
|
'data-video-embed': 'true',
|
|
class: 'my-4 overflow-hidden rounded-xl border border-gray-700 bg-gray-800/60',
|
|
}),
|
|
[
|
|
'iframe',
|
|
{
|
|
src: HTMLAttributes.src || '',
|
|
title: HTMLAttributes.title || 'Embedded video',
|
|
class: 'aspect-video w-full',
|
|
allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share',
|
|
allowfullscreen: 'true',
|
|
frameborder: '0',
|
|
referrerpolicy: 'strict-origin-when-cross-origin',
|
|
},
|
|
],
|
|
];
|
|
},
|
|
});
|
|
|
|
const DownloadAssetBlock = Node.create({
|
|
name: 'downloadAsset',
|
|
group: 'block',
|
|
atom: true,
|
|
|
|
addAttributes() {
|
|
return {
|
|
url: { default: '' },
|
|
label: { default: 'Download asset' },
|
|
};
|
|
},
|
|
|
|
parseHTML() {
|
|
return [{ tag: 'div[data-download-asset]' }];
|
|
},
|
|
|
|
renderHTML({ HTMLAttributes }) {
|
|
return [
|
|
'div',
|
|
mergeAttributes(HTMLAttributes, {
|
|
'data-download-asset': 'true',
|
|
class: 'my-4 rounded-xl border border-gray-700 bg-gray-800/60 p-4',
|
|
}),
|
|
[
|
|
'a',
|
|
{
|
|
href: HTMLAttributes.url || '#',
|
|
class: 'inline-flex items-center rounded-lg border border-sky-500/40 bg-sky-500/10 px-3 py-2 text-sm text-sky-200',
|
|
target: '_blank',
|
|
rel: 'noopener noreferrer nofollow',
|
|
download: 'true',
|
|
},
|
|
HTMLAttributes.label || 'Download asset',
|
|
],
|
|
];
|
|
},
|
|
});
|
|
|
|
function createSlashCommandExtension(insert: {
|
|
image: () => void;
|
|
uploadImage: () => void;
|
|
artwork: () => void;
|
|
code: () => void;
|
|
quote: () => void;
|
|
divider: () => void;
|
|
gallery: () => void;
|
|
video: () => void;
|
|
download: () => void;
|
|
}) {
|
|
return Extension.create({
|
|
name: 'slashCommands',
|
|
|
|
addOptions() {
|
|
return {
|
|
suggestion: {
|
|
char: '/',
|
|
startOfLine: true,
|
|
items: ({ query }: { query: string }) => {
|
|
const all = [
|
|
{ title: 'Upload Image', key: 'uploadImage' },
|
|
{ title: 'Image', key: 'image' },
|
|
{ title: 'Artwork', key: 'artwork' },
|
|
{ title: 'Code', key: 'code' },
|
|
{ title: 'Quote', key: 'quote' },
|
|
{ title: 'Divider', key: 'divider' },
|
|
{ title: 'Gallery', key: 'gallery' },
|
|
{ title: 'Video', key: 'video' },
|
|
{ title: 'Download', key: 'download' },
|
|
];
|
|
return all.filter((item) => item.key.startsWith(query.toLowerCase()));
|
|
},
|
|
command: ({ props }: { editor: any; props: { key: string } }) => {
|
|
if (props.key === 'uploadImage') insert.uploadImage();
|
|
if (props.key === 'image') insert.image();
|
|
if (props.key === 'artwork') insert.artwork();
|
|
if (props.key === 'code') insert.code();
|
|
if (props.key === 'quote') insert.quote();
|
|
if (props.key === 'divider') insert.divider();
|
|
if (props.key === 'gallery') insert.gallery();
|
|
if (props.key === 'video') insert.video();
|
|
if (props.key === 'download') insert.download();
|
|
},
|
|
render: () => {
|
|
let popup: any;
|
|
let root: HTMLDivElement | null = null;
|
|
let selected = 0;
|
|
let items: Array<{ title: string; key: string }> = [];
|
|
let command: ((item: { title: string; key: string }) => void) | null = null;
|
|
|
|
const draw = () => {
|
|
if (!root) return;
|
|
root.innerHTML = items
|
|
.map((item, index) => {
|
|
const active = index === selected ? 'bg-sky-500/20 text-sky-200' : 'text-gray-200';
|
|
return `<button data-index="${index}" class="block w-full rounded-md px-3 py-2 text-left text-sm ${active}">/${item.key} <span class="text-gray-400">${item.title}</span></button>`;
|
|
})
|
|
.join('');
|
|
|
|
root.querySelectorAll('button').forEach((button) => {
|
|
button.addEventListener('mousedown', (event) => {
|
|
event.preventDefault();
|
|
const idx = Number((event.currentTarget as HTMLButtonElement).dataset.index || 0);
|
|
const choice = items[idx];
|
|
if (choice && command) command(choice);
|
|
});
|
|
});
|
|
};
|
|
|
|
return {
|
|
onStart: (props: any) => {
|
|
items = props.items;
|
|
command = props.command;
|
|
selected = 0;
|
|
root = document.createElement('div');
|
|
root.className = 'w-52 rounded-lg border border-gray-700 bg-gray-900 p-1 shadow-xl';
|
|
draw();
|
|
|
|
popup = tippy('body', {
|
|
getReferenceClientRect: props.clientRect,
|
|
appendTo: () => document.body,
|
|
content: root,
|
|
showOnCreate: true,
|
|
interactive: true,
|
|
trigger: 'manual',
|
|
placement: 'bottom-start',
|
|
});
|
|
},
|
|
onUpdate: (props: any) => {
|
|
items = props.items;
|
|
command = props.command;
|
|
if (selected >= items.length) selected = 0;
|
|
draw();
|
|
popup?.[0]?.setProps({ getReferenceClientRect: props.clientRect });
|
|
},
|
|
onKeyDown: (props: any) => {
|
|
if (props.event.key === 'ArrowDown') {
|
|
selected = (selected + 1) % Math.max(items.length, 1);
|
|
draw();
|
|
return true;
|
|
}
|
|
if (props.event.key === 'ArrowUp') {
|
|
selected = (selected + Math.max(items.length, 1) - 1) % Math.max(items.length, 1);
|
|
draw();
|
|
return true;
|
|
}
|
|
if (props.event.key === 'Enter') {
|
|
const choice = items[selected];
|
|
if (choice && command) command(choice);
|
|
return true;
|
|
}
|
|
if (props.event.key === 'Escape') {
|
|
popup?.[0]?.hide();
|
|
return true;
|
|
}
|
|
return false;
|
|
},
|
|
onExit: () => {
|
|
popup?.[0]?.destroy();
|
|
popup = null;
|
|
root = null;
|
|
},
|
|
};
|
|
},
|
|
},
|
|
};
|
|
},
|
|
|
|
addProseMirrorPlugins() {
|
|
return [
|
|
Suggestion({
|
|
editor: this.editor,
|
|
...this.options.suggestion,
|
|
}),
|
|
];
|
|
},
|
|
});
|
|
}
|
|
|
|
async function botHeaders(extra: Record<string, string> = {}, captcha: { token?: string } = {}) {
|
|
const fingerprint = await buildBotFingerprint();
|
|
|
|
return {
|
|
...extra,
|
|
'X-Bot-Fingerprint': fingerprint,
|
|
...(captcha?.token ? { 'X-Captcha-Token': captcha.token } : {}),
|
|
};
|
|
}
|
|
|
|
async function requestJson<T>(url: string, method: string, body: unknown, csrfToken: string, captcha: { token?: string } = {}): Promise<T> {
|
|
const response = await fetch(url, {
|
|
method,
|
|
headers: await botHeaders({
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': csrfToken,
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
}, captcha),
|
|
body: JSON.stringify(body),
|
|
});
|
|
|
|
const payload = await response.json().catch(() => ({}));
|
|
|
|
if (!response.ok) {
|
|
const error = new Error((payload as any)?.message || `Request failed: ${response.status}`) as Error & { status?: number; payload?: unknown };
|
|
error.status = response.status;
|
|
error.payload = payload;
|
|
throw error;
|
|
}
|
|
|
|
return payload as T;
|
|
}
|
|
|
|
export default function StoryEditor({ mode, initialStory, storyTypes, endpoints, csrfToken }: Props) {
|
|
const [storyId, setStoryId] = useState<number | undefined>(initialStory.id);
|
|
const [title, setTitle] = useState(initialStory.title || '');
|
|
const [excerpt, setExcerpt] = useState(initialStory.excerpt || '');
|
|
const [coverImage, setCoverImage] = useState(initialStory.cover_image || '');
|
|
const [storyType, setStoryType] = useState(initialStory.story_type || 'creator_story');
|
|
const [tagsCsv, setTagsCsv] = useState(initialStory.tags_csv || '');
|
|
const [metaTitle, setMetaTitle] = useState(initialStory.meta_title || '');
|
|
const [metaDescription, setMetaDescription] = useState(initialStory.meta_description || '');
|
|
const [canonicalUrl, setCanonicalUrl] = useState(initialStory.canonical_url || '');
|
|
const [ogImage, setOgImage] = useState(initialStory.og_image || '');
|
|
const [status, setStatus] = useState(initialStory.status || 'draft');
|
|
const [scheduledFor, setScheduledFor] = useState(initialStory.scheduled_for || '');
|
|
const [saveStatus, setSaveStatus] = useState('Autosave idle');
|
|
const [artworkModalOpen, setArtworkModalOpen] = useState(false);
|
|
const [artworkResults, setArtworkResults] = useState<Artwork[]>([]);
|
|
const [artworkQuery, setArtworkQuery] = useState('');
|
|
const [showInsertMenu, setShowInsertMenu] = useState(false);
|
|
const [showLivePreview, setShowLivePreview] = useState(false);
|
|
const [livePreviewHtml, setLivePreviewHtml] = useState('');
|
|
const [inlineToolbar, setInlineToolbar] = useState({ visible: false, top: 0, left: 0 });
|
|
const [fieldErrors, setFieldErrors] = useState<Record<string, string[]>>({});
|
|
const [generalError, setGeneralError] = useState('');
|
|
const [wordCount, setWordCount] = useState(0);
|
|
const [readMinutes, setReadMinutes] = useState(1);
|
|
const [codeBlockLanguage, setCodeBlockLanguage] = useState('bash');
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [captchaState, setCaptchaState] = useState({
|
|
required: false,
|
|
token: '',
|
|
message: '',
|
|
nonce: 0,
|
|
provider: 'turnstile',
|
|
siteKey: '',
|
|
inputName: 'cf-turnstile-response',
|
|
scriptUrl: '',
|
|
});
|
|
const lastSavedRef = useRef('');
|
|
const editorRef = useRef<any>(null);
|
|
const bodyImageInputRef = useRef<HTMLInputElement | null>(null);
|
|
const coverImageInputRef = useRef<HTMLInputElement | null>(null);
|
|
|
|
const emitSaveEvent = useCallback((kind: 'autosave' | 'manual', id?: number) => {
|
|
window.dispatchEvent(new CustomEvent('story-editor:saved', {
|
|
detail: {
|
|
kind,
|
|
storyId: id,
|
|
savedAt: new Date().toISOString(),
|
|
},
|
|
}));
|
|
}, []);
|
|
|
|
const resetCaptchaState = useCallback(() => {
|
|
setCaptchaState((prev) => ({
|
|
...prev,
|
|
required: false,
|
|
token: '',
|
|
message: '',
|
|
nonce: prev.nonce + 1,
|
|
}));
|
|
}, []);
|
|
|
|
const captureCaptchaRequirement = useCallback((payload: any = {}) => {
|
|
const requiresCaptcha = !!(payload?.requires_captcha || payload?.requiresCaptcha);
|
|
if (!requiresCaptcha) {
|
|
return false;
|
|
}
|
|
|
|
const nextCaptcha = payload?.captcha || {};
|
|
const message = payload?.errors?.captcha?.[0] || payload?.message || 'Complete the captcha challenge to continue.';
|
|
|
|
setCaptchaState((prev) => ({
|
|
required: true,
|
|
token: '',
|
|
message,
|
|
nonce: prev.nonce + 1,
|
|
provider: nextCaptcha.provider || payload?.captcha_provider || prev.provider || 'turnstile',
|
|
siteKey: nextCaptcha.siteKey || payload?.captcha_site_key || prev.siteKey || '',
|
|
inputName: nextCaptcha.inputName || payload?.captcha_input || prev.inputName || 'cf-turnstile-response',
|
|
scriptUrl: nextCaptcha.scriptUrl || payload?.captcha_script_url || prev.scriptUrl || '',
|
|
}));
|
|
|
|
return true;
|
|
}, []);
|
|
|
|
const applyFailure = useCallback((error: any, fallback: string) => {
|
|
const payload = error?.payload || {};
|
|
const nextErrors = payload?.errors && typeof payload.errors === 'object' ? payload.errors : {};
|
|
setFieldErrors(nextErrors);
|
|
const requiresCaptcha = captureCaptchaRequirement(payload);
|
|
const message = nextErrors?.captcha?.[0]
|
|
|| nextErrors?.title?.[0]
|
|
|| nextErrors?.content?.[0]
|
|
|| payload?.message
|
|
|| fallback;
|
|
setGeneralError(message);
|
|
setSaveStatus(requiresCaptcha ? 'Captcha required' : message);
|
|
}, [captureCaptchaRequirement]);
|
|
|
|
const clearFeedback = useCallback(() => {
|
|
setGeneralError('');
|
|
setFieldErrors({});
|
|
}, []);
|
|
|
|
const openLinkPrompt = useCallback((editor: any) => {
|
|
const prev = editor.getAttributes('link').href;
|
|
const url = window.prompt('Link URL', prev || 'https://');
|
|
if (url === null) return;
|
|
if (url.trim() === '') {
|
|
editor.chain().focus().unsetLink().run();
|
|
return;
|
|
}
|
|
editor.chain().focus().setLink({ href: url.trim() }).run();
|
|
}, []);
|
|
|
|
const fetchArtworks = useCallback(async (query: string) => {
|
|
const q = encodeURIComponent(query);
|
|
const response = await fetch(`${endpoints.artworks}?q=${q}`, {
|
|
headers: {
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
},
|
|
});
|
|
if (!response.ok) return;
|
|
const data = await response.json();
|
|
setArtworkResults(Array.isArray(data.artworks) ? data.artworks : []);
|
|
}, [endpoints.artworks]);
|
|
|
|
const uploadImageFile = useCallback(async (file: File): Promise<string | null> => {
|
|
const formData = new FormData();
|
|
formData.append('image', file);
|
|
|
|
const response = await fetch(endpoints.uploadImage, {
|
|
method: 'POST',
|
|
headers: await botHeaders({
|
|
'X-CSRF-TOKEN': csrfToken,
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
}, captchaState),
|
|
body: formData,
|
|
});
|
|
|
|
const payload = await response.json().catch(() => ({}));
|
|
|
|
if (!response.ok) {
|
|
setFieldErrors(payload?.errors && typeof payload.errors === 'object' ? payload.errors : {});
|
|
captureCaptchaRequirement(payload);
|
|
setGeneralError(payload?.errors?.captcha?.[0] || payload?.message || 'Image upload failed');
|
|
return null;
|
|
}
|
|
|
|
clearFeedback();
|
|
if (captchaState.required && captchaState.token) {
|
|
resetCaptchaState();
|
|
}
|
|
|
|
const data = payload;
|
|
return data.medium_url || data.original_url || data.thumbnail_url || null;
|
|
}, [captchaState, captureCaptchaRequirement, clearFeedback, endpoints.uploadImage, csrfToken, resetCaptchaState]);
|
|
|
|
const applyCodeBlockLanguage = useCallback((language: string) => {
|
|
const nextLanguage = (language || 'plaintext').trim() || 'plaintext';
|
|
setCodeBlockLanguage(nextLanguage);
|
|
|
|
const currentEditor = editorRef.current;
|
|
if (!currentEditor || !currentEditor.isActive('codeBlock')) {
|
|
return;
|
|
}
|
|
|
|
currentEditor.chain().focus().updateAttributes('codeBlock', { language: nextLanguage }).run();
|
|
}, []);
|
|
|
|
const toggleCodeBlockWithLanguage = useCallback(() => {
|
|
const currentEditor = editorRef.current;
|
|
if (!currentEditor) return;
|
|
|
|
if (currentEditor.isActive('codeBlock')) {
|
|
currentEditor.chain().focus().toggleCodeBlock().run();
|
|
return;
|
|
}
|
|
|
|
currentEditor.chain().focus().setCodeBlock({ language: codeBlockLanguage }).run();
|
|
}, [codeBlockLanguage]);
|
|
|
|
const insertActions = useMemo(() => ({
|
|
image: () => {
|
|
const currentEditor = editorRef.current;
|
|
const url = window.prompt('Image URL', 'https://');
|
|
if (!url || !currentEditor) return;
|
|
currentEditor.chain().focus().setImage({ src: url }).run();
|
|
},
|
|
uploadImage: () => bodyImageInputRef.current?.click(),
|
|
artwork: () => setArtworkModalOpen(true),
|
|
code: () => {
|
|
toggleCodeBlockWithLanguage();
|
|
},
|
|
quote: () => {
|
|
const currentEditor = editorRef.current;
|
|
if (!currentEditor) return;
|
|
currentEditor.chain().focus().toggleBlockquote().run();
|
|
},
|
|
divider: () => {
|
|
const currentEditor = editorRef.current;
|
|
if (!currentEditor) return;
|
|
currentEditor.chain().focus().setHorizontalRule().run();
|
|
},
|
|
gallery: () => {
|
|
const currentEditor = editorRef.current;
|
|
if (!currentEditor) return;
|
|
const raw = window.prompt('Gallery image URLs (comma separated)', '');
|
|
const images = (raw || '').split(',').map((value) => value.trim()).filter(Boolean);
|
|
currentEditor.chain().focus().insertContent({ type: 'galleryBlock', attrs: { images } }).run();
|
|
},
|
|
video: () => {
|
|
const currentEditor = editorRef.current;
|
|
if (!currentEditor) return;
|
|
const src = window.prompt('Video embed URL (YouTube/Vimeo)', 'https://www.youtube.com/embed/');
|
|
if (!src) return;
|
|
currentEditor.chain().focus().insertContent({ type: 'videoEmbed', attrs: { src, title: 'Embedded video' } }).run();
|
|
},
|
|
download: () => {
|
|
const currentEditor = editorRef.current;
|
|
if (!currentEditor) return;
|
|
const url = window.prompt('Download URL', 'https://');
|
|
if (!url) return;
|
|
const label = window.prompt('Button label', 'Download asset') || 'Download asset';
|
|
currentEditor.chain().focus().insertContent({ type: 'downloadAsset', attrs: { url, label } }).run();
|
|
},
|
|
}), [toggleCodeBlockWithLanguage]);
|
|
|
|
const editor = useEditor({
|
|
extensions: [
|
|
StarterKit.configure({
|
|
codeBlock: false,
|
|
heading: { levels: [1, 2, 3] },
|
|
}),
|
|
CodeBlockLowlight.configure({
|
|
lowlight,
|
|
}),
|
|
Underline,
|
|
Image,
|
|
Link.configure({
|
|
openOnClick: false,
|
|
HTMLAttributes: {
|
|
class: 'text-sky-300 underline',
|
|
rel: 'noopener noreferrer nofollow',
|
|
target: '_blank',
|
|
},
|
|
}),
|
|
Placeholder.configure({
|
|
placeholder: 'Start writing your story...',
|
|
}),
|
|
ArtworkBlock,
|
|
GalleryBlock,
|
|
VideoEmbedBlock,
|
|
DownloadAssetBlock,
|
|
createSlashCommandExtension(insertActions),
|
|
],
|
|
content: initialStory.content || EMPTY_DOC,
|
|
editorProps: {
|
|
attributes: {
|
|
class: 'tiptap prose prose-invert prose-headings:tracking-tight prose-p:text-[1.04rem] prose-p:leading-8 prose-p:text-stone-200 prose-strong:text-white prose-a:text-sky-300 prose-blockquote:border-l-sky-400 prose-blockquote:text-stone-300 prose-code:text-sky-200 max-w-none min-h-[32rem] bg-transparent px-0 py-0 text-stone-200 focus:outline-none',
|
|
},
|
|
handleDrop: (_view, event) => {
|
|
const file = event.dataTransfer?.files?.[0];
|
|
if (!file || !file.type.startsWith('image/')) return false;
|
|
|
|
void (async () => {
|
|
setSaveStatus('Uploading image...');
|
|
const uploaded = await uploadImageFile(file);
|
|
if (uploaded && editor) {
|
|
editor.chain().focus().setImage({ src: uploaded }).run();
|
|
setSaveStatus('Image uploaded');
|
|
} else {
|
|
setSaveStatus('Image upload failed');
|
|
}
|
|
})();
|
|
|
|
return true;
|
|
},
|
|
handlePaste: (_view, event) => {
|
|
const file = event.clipboardData?.files?.[0];
|
|
if (!file || !file.type.startsWith('image/')) return false;
|
|
|
|
void (async () => {
|
|
setSaveStatus('Uploading image...');
|
|
const uploaded = await uploadImageFile(file);
|
|
if (uploaded && editor) {
|
|
editor.chain().focus().setImage({ src: uploaded }).run();
|
|
setSaveStatus('Image uploaded');
|
|
} else {
|
|
setSaveStatus('Image upload failed');
|
|
}
|
|
})();
|
|
|
|
return true;
|
|
},
|
|
},
|
|
});
|
|
|
|
editorRef.current = editor;
|
|
|
|
useEffect(() => {
|
|
if (!editor) return;
|
|
|
|
const updatePreview = () => {
|
|
setLivePreviewHtml(editor.getHTML());
|
|
const text = editor.getText().replace(/\s+/g, ' ').trim();
|
|
const words = text === '' ? 0 : text.split(' ').length;
|
|
setWordCount(words);
|
|
setReadMinutes(Math.max(1, Math.ceil(words / 200)));
|
|
};
|
|
|
|
updatePreview();
|
|
editor.on('update', updatePreview);
|
|
|
|
return () => {
|
|
editor.off('update', updatePreview);
|
|
};
|
|
}, [editor]);
|
|
|
|
useEffect(() => {
|
|
if (!editor) return;
|
|
|
|
const syncCodeBlockLanguage = () => {
|
|
if (!editor.isActive('codeBlock')) {
|
|
return;
|
|
}
|
|
|
|
const nextLanguage = String(editor.getAttributes('codeBlock').language || '').trim();
|
|
if (nextLanguage !== '') {
|
|
setCodeBlockLanguage(nextLanguage);
|
|
}
|
|
};
|
|
|
|
syncCodeBlockLanguage();
|
|
editor.on('selectionUpdate', syncCodeBlockLanguage);
|
|
editor.on('update', syncCodeBlockLanguage);
|
|
|
|
return () => {
|
|
editor.off('selectionUpdate', syncCodeBlockLanguage);
|
|
editor.off('update', syncCodeBlockLanguage);
|
|
};
|
|
}, [editor]);
|
|
|
|
useEffect(() => {
|
|
if (!artworkModalOpen) return;
|
|
void fetchArtworks(artworkQuery);
|
|
}, [artworkModalOpen, artworkQuery, fetchArtworks]);
|
|
|
|
useEffect(() => {
|
|
if (!editor) return;
|
|
|
|
const updateToolbar = () => {
|
|
const { from, to } = editor.state.selection;
|
|
if (from === to) {
|
|
setInlineToolbar({ visible: false, top: 0, left: 0 });
|
|
return;
|
|
}
|
|
|
|
const start = editor.view.coordsAtPos(from);
|
|
const end = editor.view.coordsAtPos(to);
|
|
setInlineToolbar({
|
|
visible: true,
|
|
top: Math.max(10, start.top + window.scrollY - 48),
|
|
left: Math.max(10, (start.left + end.right) / 2 + window.scrollX - 120),
|
|
});
|
|
};
|
|
|
|
editor.on('selectionUpdate', updateToolbar);
|
|
editor.on('blur', () => setInlineToolbar({ visible: false, top: 0, left: 0 }));
|
|
|
|
return () => {
|
|
editor.off('selectionUpdate', updateToolbar);
|
|
};
|
|
}, [editor]);
|
|
|
|
const payload = useCallback(() => ({
|
|
story_id: storyId,
|
|
title,
|
|
excerpt,
|
|
cover_image: coverImage,
|
|
story_type: storyType,
|
|
tags_csv: tagsCsv,
|
|
tags: tagsCsv.split(',').map((tag) => tag.trim()).filter(Boolean),
|
|
meta_title: metaTitle || title,
|
|
meta_description: metaDescription || excerpt,
|
|
canonical_url: canonicalUrl,
|
|
og_image: ogImage || coverImage,
|
|
status,
|
|
scheduled_for: scheduledFor || null,
|
|
content: editor?.getJSON() || EMPTY_DOC,
|
|
}), [storyId, title, excerpt, coverImage, storyType, tagsCsv, metaTitle, metaDescription, canonicalUrl, ogImage, status, scheduledFor, editor]);
|
|
|
|
useEffect(() => {
|
|
if (!editor) return;
|
|
|
|
const timer = window.setInterval(async () => {
|
|
if (isSubmitting) {
|
|
return;
|
|
}
|
|
|
|
const body = payload();
|
|
const snapshot = JSON.stringify(body);
|
|
if (snapshot === lastSavedRef.current) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
clearFeedback();
|
|
setSaveStatus('Saving...');
|
|
const data = await requestJson<{ story_id?: number; message?: string; edit_url?: string }>(
|
|
endpoints.autosave,
|
|
'POST',
|
|
captchaState.required && captchaState.inputName ? {
|
|
...body,
|
|
[captchaState.inputName]: captchaState.token || '',
|
|
} : body,
|
|
csrfToken,
|
|
captchaState,
|
|
);
|
|
if (data.story_id && !storyId) {
|
|
setStoryId(data.story_id);
|
|
}
|
|
if (data.edit_url && window.location.pathname.endsWith('/create')) {
|
|
window.history.replaceState({}, '', data.edit_url);
|
|
}
|
|
lastSavedRef.current = snapshot;
|
|
setSaveStatus(data.message || 'Saved just now');
|
|
if (captchaState.required && captchaState.token) {
|
|
resetCaptchaState();
|
|
}
|
|
emitSaveEvent('autosave', data.story_id || storyId);
|
|
} catch (error) {
|
|
applyFailure(error, 'Autosave failed');
|
|
}
|
|
}, 10000);
|
|
|
|
return () => window.clearInterval(timer);
|
|
}, [applyFailure, captchaState, clearFeedback, csrfToken, editor, emitSaveEvent, endpoints.autosave, isSubmitting, payload, resetCaptchaState, storyId]);
|
|
|
|
const persistStory = async (submitAction: 'save_draft' | 'submit_review' | 'publish_now' | 'schedule_publish') => {
|
|
const body = {
|
|
...payload(),
|
|
submit_action: submitAction,
|
|
status: submitAction === 'submit_review' ? 'pending_review' : submitAction === 'publish_now' ? 'published' : submitAction === 'schedule_publish' ? 'scheduled' : status,
|
|
scheduled_for: submitAction === 'schedule_publish' ? scheduledFor : null,
|
|
};
|
|
|
|
try {
|
|
clearFeedback();
|
|
setIsSubmitting(true);
|
|
setSaveStatus('Saving...');
|
|
const endpoint = storyId ? endpoints.update : endpoints.create;
|
|
const method = storyId ? 'PUT' : 'POST';
|
|
const data = await requestJson<{ story_id: number; message?: string; status?: string; edit_url?: string; public_url?: string }>(endpoint, method, captchaState.required && captchaState.inputName ? {
|
|
...body,
|
|
[captchaState.inputName]: captchaState.token || '',
|
|
} : body, csrfToken, captchaState);
|
|
if (data.story_id) {
|
|
setStoryId(data.story_id);
|
|
}
|
|
if (data.edit_url && window.location.pathname.endsWith('/create')) {
|
|
window.history.replaceState({}, '', data.edit_url);
|
|
}
|
|
lastSavedRef.current = JSON.stringify(payload());
|
|
setSaveStatus(data.message || 'Saved just now');
|
|
if (captchaState.required && captchaState.token) {
|
|
resetCaptchaState();
|
|
}
|
|
emitSaveEvent('manual', data.story_id || storyId);
|
|
if (submitAction === 'publish_now' && data.public_url) {
|
|
window.location.assign(data.public_url);
|
|
return;
|
|
}
|
|
} catch (error) {
|
|
applyFailure(error, submitAction === 'publish_now' ? 'Publish failed' : 'Save failed');
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const handleBodyImagePicked = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = event.target.files?.[0];
|
|
event.target.value = '';
|
|
if (!file) return;
|
|
|
|
setSaveStatus('Uploading image...');
|
|
const uploaded = await uploadImageFile(file);
|
|
if (!uploaded || !editor) {
|
|
setSaveStatus('Image upload failed');
|
|
return;
|
|
}
|
|
|
|
editor.chain().focus().setImage({ src: uploaded }).run();
|
|
setSaveStatus('Image uploaded');
|
|
};
|
|
|
|
const handleCoverImagePicked = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = event.target.files?.[0];
|
|
event.target.value = '';
|
|
if (!file) return;
|
|
|
|
setSaveStatus('Uploading cover...');
|
|
const uploaded = await uploadImageFile(file);
|
|
if (!uploaded) {
|
|
setSaveStatus('Cover upload failed');
|
|
return;
|
|
}
|
|
|
|
setCoverImage(uploaded);
|
|
setSaveStatus('Cover uploaded');
|
|
};
|
|
|
|
const readinessChecks = useMemo(() => ([
|
|
{ label: 'Title', ok: title.trim().length > 0, hint: 'Give the story a clear headline.' },
|
|
{ label: 'Body', ok: wordCount >= 50, hint: 'Aim for at least 50 words before publishing.' },
|
|
{ label: 'Story type', ok: storyType.trim().length > 0, hint: 'Choose the format that fits the post.' },
|
|
]), [storyType, title, wordCount]);
|
|
|
|
const titleError = fieldErrors?.title?.[0] || '';
|
|
const contentError = fieldErrors?.content?.[0] || '';
|
|
const excerptError = fieldErrors?.excerpt?.[0] || '';
|
|
const tagsError = fieldErrors?.tags_csv?.[0] || '';
|
|
|
|
const insertArtwork = (item: Artwork) => {
|
|
if (!editor) return;
|
|
editor.chain().focus().insertContent({
|
|
type: 'artworkEmbed',
|
|
attrs: {
|
|
artworkId: item.id,
|
|
title: item.title,
|
|
url: item.url,
|
|
thumb: item.thumbs?.md || item.thumbs?.sm || item.thumb || '',
|
|
},
|
|
}).run();
|
|
setArtworkModalOpen(false);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="sticky top-16 z-30 overflow-hidden rounded-[1.5rem] border border-white/10 bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.18),_transparent_28%),linear-gradient(135deg,rgba(12,18,28,0.96),rgba(10,14,22,0.92))] p-4 shadow-[0_20px_70px_rgba(3,7,18,0.26)] backdrop-blur-xl">
|
|
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
|
<div className="space-y-2">
|
|
<div className="flex flex-wrap items-center gap-2 text-xs uppercase tracking-[0.24em] text-white/45">
|
|
<span className="rounded-full border border-white/10 bg-white/[0.06] px-2.5 py-1 text-[11px] font-semibold text-white/70">{mode === 'create' ? 'New story' : 'Editing draft'}</span>
|
|
<span>{wordCount.toLocaleString()} words</span>
|
|
<span>{readMinutes} min read</span>
|
|
<span>{saveStatus}</span>
|
|
</div>
|
|
<p className="max-w-2xl text-sm text-white/62">Write in the main column, keep the sidebar for story settings, and only surface captcha when protection actually asks for it.</p>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<button type="button" onClick={() => setShowInsertMenu((current) => !current)} className="rounded-xl border border-white/10 bg-white/[0.05] px-3 py-2 text-sm text-white/78 transition hover:bg-white/[0.09]">Insert block</button>
|
|
<button type="button" onClick={() => setShowLivePreview((current) => !current)} className="rounded-xl border border-white/10 bg-white/[0.05] px-3 py-2 text-sm text-white/78 transition hover:bg-white/[0.09]">{showLivePreview ? 'Hide preview' : 'Preview'}</button>
|
|
<button type="button" onClick={() => persistStory('save_draft')} disabled={isSubmitting} className="rounded-xl border border-white/10 bg-white/[0.05] px-3 py-2 text-sm text-white transition hover:bg-white/[0.09] disabled:opacity-60">Save draft</button>
|
|
<button type="button" onClick={() => persistStory('submit_review')} disabled={isSubmitting} className="rounded-xl border border-amber-400/30 bg-amber-400/12 px-3 py-2 text-sm text-amber-100 transition hover:bg-amber-400/20 disabled:opacity-60">Submit review</button>
|
|
<button type="button" onClick={() => persistStory('publish_now')} disabled={isSubmitting} className="rounded-xl border border-emerald-400/30 bg-emerald-400/14 px-3 py-2 text-sm font-medium text-emerald-100 transition hover:bg-emerald-400/22 disabled:opacity-60">Publish now</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-6 xl:grid-cols-[minmax(0,1fr)_22rem]">
|
|
<div className="space-y-6">
|
|
<section className="overflow-hidden rounded-[2rem] border border-white/10 bg-[radial-gradient(circle_at_top_left,_rgba(251,191,36,0.12),_transparent_26%),linear-gradient(180deg,rgba(16,22,33,0.96),rgba(9,12,19,0.92))] shadow-[0_22px_80px_rgba(4,8,20,0.24)]">
|
|
{coverImage ? (
|
|
<div className="relative h-56 overflow-hidden border-b border-white/10">
|
|
<img src={coverImage} alt="Story cover" className="h-full w-full object-cover" />
|
|
<div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/25 to-transparent" />
|
|
<div className="absolute bottom-4 left-4 rounded-full border border-white/15 bg-black/35 px-3 py-1 text-xs uppercase tracking-[0.24em] text-white/75">Cover preview</div>
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="space-y-5 p-6 md:p-8">
|
|
<div className="flex flex-wrap items-center gap-3 text-xs uppercase tracking-[0.22em] text-white/42">
|
|
<span>{storyTypes.find((type) => type.slug === storyType)?.name || 'Story'}</span>
|
|
<span>{status.replace(/_/g, ' ')}</span>
|
|
{scheduledFor ? <span>Scheduled {scheduledFor}</span> : null}
|
|
</div>
|
|
|
|
<div>
|
|
<input
|
|
value={title}
|
|
onChange={(event) => setTitle(event.target.value)}
|
|
placeholder="Give the story a title worth opening"
|
|
className="w-full border-0 bg-transparent px-0 text-4xl font-semibold tracking-tight text-white placeholder:text-white/25 focus:outline-none md:text-5xl"
|
|
/>
|
|
{titleError ? <p className="mt-2 text-sm text-rose-300">{titleError}</p> : null}
|
|
</div>
|
|
|
|
<div>
|
|
<textarea
|
|
value={excerpt}
|
|
onChange={(event) => setExcerpt(event.target.value)}
|
|
placeholder="Write a short dek that explains why this story matters."
|
|
rows={3}
|
|
className="w-full resize-none border-0 bg-transparent px-0 text-base leading-7 text-white/70 placeholder:text-white/25 focus:outline-none"
|
|
/>
|
|
{excerptError ? <p className="mt-2 text-sm text-rose-300">{excerptError}</p> : null}
|
|
</div>
|
|
|
|
<div className="grid gap-3 sm:grid-cols-3">
|
|
<div className="rounded-2xl border border-white/10 bg-white/[0.04] p-4">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-white/38">Words</p>
|
|
<p className="mt-2 text-2xl font-semibold text-white">{wordCount.toLocaleString()}</p>
|
|
</div>
|
|
<div className="rounded-2xl border border-white/10 bg-white/[0.04] p-4">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-white/38">Reading time</p>
|
|
<p className="mt-2 text-2xl font-semibold text-white">{readMinutes} min</p>
|
|
</div>
|
|
<div className="rounded-2xl border border-white/10 bg-white/[0.04] p-4">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-white/38">Status</p>
|
|
<p className="mt-2 text-2xl font-semibold capitalize text-white">{status.replace(/_/g, ' ')}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="relative overflow-hidden rounded-[2rem] border border-white/10 bg-[linear-gradient(180deg,rgba(16,19,28,0.98),rgba(8,10,17,0.96))] shadow-[0_24px_90px_rgba(4,8,20,0.28)]">
|
|
<div className="border-b border-white/10 px-5 py-4">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
{editor ? (
|
|
<>
|
|
<button type="button" className={`rounded-xl px-3 py-2 text-sm ${editor.isActive('bold') ? 'bg-sky-400/20 text-sky-100' : 'bg-white/[0.05] text-white/75'}`} onClick={() => editor.chain().focus().toggleBold().run()}>Bold</button>
|
|
<button type="button" className={`rounded-xl px-3 py-2 text-sm ${editor.isActive('italic') ? 'bg-sky-400/20 text-sky-100' : 'bg-white/[0.05] text-white/75'}`} onClick={() => editor.chain().focus().toggleItalic().run()}>Italic</button>
|
|
<button type="button" className={`rounded-xl px-3 py-2 text-sm ${editor.isActive('underline') ? 'bg-sky-400/20 text-sky-100' : 'bg-white/[0.05] text-white/75'}`} onClick={() => editor.chain().focus().toggleUnderline().run()}>Underline</button>
|
|
<button type="button" className={`rounded-xl px-3 py-2 text-sm ${editor.isActive('heading', { level: 2 }) ? 'bg-sky-400/20 text-sky-100' : 'bg-white/[0.05] text-white/75'}`} onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}>H2</button>
|
|
<button type="button" className={`rounded-xl px-3 py-2 text-sm ${editor.isActive('heading', { level: 3 }) ? 'bg-sky-400/20 text-sky-100' : 'bg-white/[0.05] text-white/75'}`} onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}>H3</button>
|
|
<button type="button" className={`rounded-xl px-3 py-2 text-sm ${editor.isActive('bulletList') ? 'bg-sky-400/20 text-sky-100' : 'bg-white/[0.05] text-white/75'}`} onClick={() => editor.chain().focus().toggleBulletList().run()}>Bullets</button>
|
|
<button type="button" className={`rounded-xl px-3 py-2 text-sm ${editor.isActive('orderedList') ? 'bg-sky-400/20 text-sky-100' : 'bg-white/[0.05] text-white/75'}`} onClick={() => editor.chain().focus().toggleOrderedList().run()}>Numbers</button>
|
|
<button type="button" className={`rounded-xl px-3 py-2 text-sm ${editor.isActive('blockquote') ? 'bg-sky-400/20 text-sky-100' : 'bg-white/[0.05] text-white/75'}`} onClick={() => editor.chain().focus().toggleBlockquote().run()}>Quote</button>
|
|
<button type="button" className={`rounded-xl px-3 py-2 text-sm ${editor.isActive('codeBlock') ? 'bg-sky-400/20 text-sky-100' : 'bg-white/[0.05] text-white/75'}`} onClick={toggleCodeBlockWithLanguage}>Code block</button>
|
|
<div className="inline-flex items-center gap-2 rounded-xl bg-white/[0.05] px-3 py-2 text-sm text-white/75">
|
|
<span className="text-white/50">Lang</span>
|
|
<div className="min-w-[10rem]">
|
|
<Select
|
|
value={codeBlockLanguage}
|
|
onChange={(event) => applyCodeBlockLanguage(event.target.value)}
|
|
options={CODE_BLOCK_LANGUAGES}
|
|
size="sm"
|
|
className="border-white/10 bg-slate-950/90 py-1 text-sm text-white hover:border-white/20"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<button type="button" className="rounded-xl bg-white/[0.05] px-3 py-2 text-sm text-white/75" onClick={() => openLinkPrompt(editor)}>Link</button>
|
|
</>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
|
|
{showInsertMenu && (
|
|
<div className="border-b border-white/10 bg-white/[0.03] px-5 py-4">
|
|
<div className="grid grid-cols-2 gap-2 sm:grid-cols-3 xl:grid-cols-4">
|
|
<button type="button" className="rounded-xl border border-white/10 bg-white/[0.05] px-3 py-2 text-sm text-white/80" onClick={insertActions.uploadImage}>Upload image</button>
|
|
<button type="button" className="rounded-xl border border-white/10 bg-white/[0.05] px-3 py-2 text-sm text-white/80" onClick={insertActions.image}>Image URL</button>
|
|
<button type="button" className="rounded-xl border border-white/10 bg-white/[0.05] px-3 py-2 text-sm text-white/80" onClick={insertActions.artwork}>Embed artwork</button>
|
|
<button type="button" className="rounded-xl border border-white/10 bg-white/[0.05] px-3 py-2 text-sm text-white/80" onClick={insertActions.gallery}>Gallery</button>
|
|
<button type="button" className="rounded-xl border border-white/10 bg-white/[0.05] px-3 py-2 text-sm text-white/80" onClick={insertActions.video}>Video</button>
|
|
<button type="button" className="rounded-xl border border-white/10 bg-white/[0.05] px-3 py-2 text-sm text-white/80" onClick={insertActions.download}>Download</button>
|
|
<button type="button" className="rounded-xl border border-white/10 bg-white/[0.05] px-3 py-2 text-sm text-white/80" onClick={insertActions.quote}>Quote</button>
|
|
<button type="button" className="rounded-xl border border-white/10 bg-white/[0.05] px-3 py-2 text-sm text-white/80" onClick={insertActions.code}>Code block</button>
|
|
<div className="col-span-2 rounded-xl border border-white/10 bg-white/[0.05] px-3 py-2 sm:col-span-3 xl:col-span-2">
|
|
<div className="mb-2 text-sm text-white/45">Language</div>
|
|
<Select
|
|
value={codeBlockLanguage}
|
|
onChange={(event) => applyCodeBlockLanguage(event.target.value)}
|
|
options={CODE_BLOCK_LANGUAGES}
|
|
size="sm"
|
|
className="border-white/10 bg-slate-950/90 text-white hover:border-white/20"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{editor && inlineToolbar.visible && (
|
|
<div
|
|
className="fixed z-40 flex items-center gap-1 rounded-2xl border border-white/10 bg-slate-950/95 px-2 py-1 shadow-lg backdrop-blur"
|
|
style={{ top: `${inlineToolbar.top}px`, left: `${inlineToolbar.left}px` }}
|
|
>
|
|
<button type="button" className={`rounded px-2 py-1 text-xs ${editor.isActive('bold') ? 'bg-sky-500/30 text-sky-100' : 'text-gray-200'}`} onMouseDown={(event) => event.preventDefault()} onClick={() => editor.chain().focus().toggleBold().run()}>B</button>
|
|
<button type="button" className={`rounded px-2 py-1 text-xs ${editor.isActive('italic') ? 'bg-sky-500/30 text-sky-100' : 'text-gray-200'}`} onMouseDown={(event) => event.preventDefault()} onClick={() => editor.chain().focus().toggleItalic().run()}>I</button>
|
|
<button type="button" className={`rounded px-2 py-1 text-xs ${editor.isActive('underline') ? 'bg-sky-500/30 text-sky-100' : 'text-gray-200'}`} onMouseDown={(event) => event.preventDefault()} onClick={() => editor.chain().focus().toggleUnderline().run()}>U</button>
|
|
<button type="button" className={`rounded px-2 py-1 text-xs ${editor.isActive('code') ? 'bg-sky-500/30 text-sky-100' : 'text-gray-200'}`} onMouseDown={(event) => event.preventDefault()} onClick={() => editor.chain().focus().toggleCode().run()}>{'</>'}</button>
|
|
<button type="button" className="rounded px-2 py-1 text-xs text-gray-200" onMouseDown={(event) => event.preventDefault()} onClick={() => openLinkPrompt(editor)}>Link</button>
|
|
</div>
|
|
)}
|
|
|
|
<div className="px-6 py-8 md:px-10 md:py-10">
|
|
<EditorContent editor={editor} />
|
|
{contentError ? <p className="mt-4 text-sm text-rose-300">{contentError}</p> : null}
|
|
</div>
|
|
|
|
{showLivePreview && (
|
|
<div className="border-t border-white/10 bg-white/[0.02] px-6 py-6 md:px-10">
|
|
<div className="mb-3 text-xs font-semibold uppercase tracking-[0.22em] text-white/40">Live preview</div>
|
|
<div className="prose prose-invert max-w-none prose-pre:bg-slate-950 prose-p:text-stone-200" dangerouslySetInnerHTML={{ __html: livePreviewHtml }} />
|
|
</div>
|
|
)}
|
|
</section>
|
|
</div>
|
|
|
|
<aside className="space-y-4 xl:sticky xl:top-24 self-start">
|
|
{(generalError || captchaState.required) && (
|
|
<section className="rounded-[1.5rem] border border-amber-400/20 bg-amber-500/10 p-5">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.22em] text-amber-100/70">Action needed</p>
|
|
<p className="mt-3 text-sm text-amber-50">{generalError || captchaState.message || 'Complete the captcha challenge to continue.'}</p>
|
|
{captchaState.required && captchaState.siteKey ? (
|
|
<div className="mt-4 rounded-2xl border border-white/10 bg-black/20 p-3">
|
|
<TurnstileField
|
|
key={`story-editor-captcha-${captchaState.nonce}`}
|
|
provider={captchaState.provider}
|
|
siteKey={captchaState.siteKey}
|
|
scriptUrl={captchaState.scriptUrl}
|
|
onToken={(token) => setCaptchaState((prev) => ({ ...prev, token }))}
|
|
className="min-h-16"
|
|
/>
|
|
</div>
|
|
) : null}
|
|
</section>
|
|
)}
|
|
|
|
<section className="rounded-[1.5rem] border border-white/10 bg-white/[0.03] p-5">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.22em] text-white/38">Publish checklist</p>
|
|
<div className="mt-4 space-y-3">
|
|
{readinessChecks.map((item) => (
|
|
<div key={item.label} className="rounded-2xl border border-white/8 bg-black/10 px-4 py-3">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<span className="text-sm font-medium text-white">{item.label}</span>
|
|
<span className={`text-xs font-semibold uppercase tracking-[0.18em] ${item.ok ? 'text-emerald-300' : 'text-amber-200'}`}>{item.ok ? 'Ready' : 'Needs work'}</span>
|
|
</div>
|
|
<p className="mt-2 text-sm text-white/48">{item.hint}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="rounded-[1.5rem] border border-white/10 bg-white/[0.03] p-5">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.22em] text-white/38">Story settings</p>
|
|
<div className="mt-4 space-y-4">
|
|
<div>
|
|
<label className="mb-2 block text-sm font-medium text-white/80">Story type</label>
|
|
<select value={storyType} onChange={(event) => setStoryType(event.target.value)} className="w-full rounded-xl border border-white/10 bg-slate-950/80 px-3 py-2.5 text-sm text-white">
|
|
{storyTypes.map((type) => (
|
|
<option key={type.slug} value={type.slug}>{type.name}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="mb-2 block text-sm font-medium text-white/80">Tags</label>
|
|
<input value={tagsCsv} onChange={(event) => setTagsCsv(event.target.value)} placeholder="art direction, process, workflow" className="w-full rounded-xl border border-white/10 bg-slate-950/80 px-3 py-2.5 text-sm text-white placeholder:text-white/25" />
|
|
{tagsError ? <p className="mt-2 text-sm text-rose-300">{tagsError}</p> : <p className="mt-2 text-xs text-white/40">Comma-separated. New tags are created automatically.</p>}
|
|
</div>
|
|
|
|
<div>
|
|
<label className="mb-2 block text-sm font-medium text-white/80">Workflow status</label>
|
|
<select value={status} onChange={(event) => setStatus(event.target.value)} className="w-full rounded-xl border border-white/10 bg-slate-950/80 px-3 py-2.5 text-sm text-white">
|
|
<option value="draft">Draft</option>
|
|
<option value="pending_review">Pending Review</option>
|
|
<option value="published">Published</option>
|
|
<option value="scheduled">Scheduled</option>
|
|
<option value="archived">Archived</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="mb-2 block text-sm font-medium text-white/80">Schedule publish</label>
|
|
<input type="datetime-local" value={scheduledFor} onChange={(event) => setScheduledFor(event.target.value)} className="w-full rounded-xl border border-white/10 bg-slate-950/80 px-3 py-2.5 text-sm text-white" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="rounded-[1.5rem] border border-white/10 bg-white/[0.03] p-5">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.22em] text-white/38">Cover</p>
|
|
<button type="button" onClick={() => coverImageInputRef.current?.click()} className="rounded-xl border border-white/10 bg-white/[0.05] px-3 py-2 text-xs text-white/78">Upload</button>
|
|
</div>
|
|
<div className="mt-4 space-y-3">
|
|
<input value={coverImage} onChange={(event) => setCoverImage(event.target.value)} placeholder="https://..." className="w-full rounded-xl border border-white/10 bg-slate-950/80 px-3 py-2.5 text-sm text-white placeholder:text-white/25" />
|
|
{coverImage ? <img src={coverImage} alt="Cover preview" className="h-40 w-full rounded-2xl object-cover" /> : <div className="rounded-2xl border border-dashed border-white/10 px-4 py-8 text-center text-sm text-white/38">Add a cover image to give the story more presence in feeds.</div>}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="rounded-[1.5rem] border border-white/10 bg-white/[0.03] p-5">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.22em] text-white/38">SEO & social</p>
|
|
<div className="mt-4 space-y-3">
|
|
<input value={metaTitle} onChange={(event) => setMetaTitle(event.target.value)} placeholder="Meta title" className="w-full rounded-xl border border-white/10 bg-slate-950/80 px-3 py-2.5 text-sm text-white placeholder:text-white/25" />
|
|
<textarea value={metaDescription} onChange={(event) => setMetaDescription(event.target.value)} rows={3} placeholder="Meta description" className="w-full resize-none rounded-xl border border-white/10 bg-slate-950/80 px-3 py-2.5 text-sm text-white placeholder:text-white/25" />
|
|
<input value={canonicalUrl} onChange={(event) => setCanonicalUrl(event.target.value)} placeholder="Canonical URL" className="w-full rounded-xl border border-white/10 bg-slate-950/80 px-3 py-2.5 text-sm text-white placeholder:text-white/25" />
|
|
<input value={ogImage} onChange={(event) => setOgImage(event.target.value)} placeholder="OG image URL" className="w-full rounded-xl border border-white/10 bg-slate-950/80 px-3 py-2.5 text-sm text-white placeholder:text-white/25" />
|
|
</div>
|
|
</section>
|
|
</aside>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-3">
|
|
{storyId && (
|
|
<a href={`${endpoints.previewBase}/${storyId}/preview`} className="rounded-xl border border-sky-500/40 bg-sky-500/10 px-3 py-2 text-sm text-sky-200">Preview</a>
|
|
)}
|
|
{storyId && (
|
|
<a href={`${endpoints.analyticsBase}/${storyId}/analytics`} className="rounded-xl border border-violet-500/40 bg-violet-500/10 px-3 py-2 text-sm text-violet-200">Analytics</a>
|
|
)}
|
|
{mode === 'edit' && storyId && (
|
|
<form method="POST" action={`/creator/stories/${storyId}`} onSubmit={(event) => {
|
|
if (!window.confirm('Delete this story?')) {
|
|
event.preventDefault();
|
|
}
|
|
}}>
|
|
<input type="hidden" name="_token" value={csrfToken} />
|
|
<input type="hidden" name="_method" value="DELETE" />
|
|
<button type="submit" className="rounded-xl border border-rose-500/40 bg-rose-500/20 px-3 py-2 text-sm text-rose-200">Delete</button>
|
|
</form>
|
|
)}
|
|
</div>
|
|
|
|
<input ref={bodyImageInputRef} type="file" accept="image/*" className="hidden" onChange={handleBodyImagePicked} />
|
|
<input ref={coverImageInputRef} type="file" accept="image/*" className="hidden" onChange={handleCoverImagePicked} />
|
|
|
|
{artworkModalOpen && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4">
|
|
<div className="w-full max-w-3xl rounded-xl border border-gray-700 bg-gray-900 p-4 shadow-lg">
|
|
<div className="mb-3 flex items-center justify-between">
|
|
<h3 className="text-sm font-semibold text-white">Embed Artwork</h3>
|
|
<button type="button" onClick={() => setArtworkModalOpen(false)} className="rounded border border-gray-600 px-2 py-1 text-xs text-gray-200">Close</button>
|
|
</div>
|
|
<input value={artworkQuery} onChange={(event) => setArtworkQuery(event.target.value)} className="mb-3 w-full rounded-xl border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200" placeholder="Search artworks" />
|
|
<div className="grid max-h-80 gap-3 overflow-y-auto sm:grid-cols-2">
|
|
{artworkResults.map((item) => (
|
|
<button key={item.id} type="button" onClick={() => insertArtwork(item)} className="rounded-xl border border-gray-700 bg-gray-800 p-3 text-left hover:border-sky-400">
|
|
{(item.thumbs?.sm || item.thumb) && <img src={item.thumbs?.sm || item.thumb || ''} alt={item.title} className="h-28 w-full rounded-lg object-cover" />}
|
|
<div className="mt-2 text-sm font-semibold text-white">{item.title}</div>
|
|
<div className="text-xs text-gray-400">#{item.id}</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|