fix:ckeditor
This commit is contained in:
Rama Priyanto
parent
92b7d4de19
commit
dc95533c92
Binary file not shown.
|
|
@ -1,164 +0,0 @@
|
||||||
"use client";
|
|
||||||
|
|
||||||
import React, { useState } from 'react';
|
|
||||||
|
|
||||||
// Import the optimized editor (choose one based on your migration)
|
|
||||||
// import OptimizedEditor from './optimized-editor'; // TinyMCE
|
|
||||||
// import OptimizedCKEditor from './optimized-ckeditor'; // CKEditor5 Classic
|
|
||||||
// import MinimalEditor from './minimal-editor'; // React Quill
|
|
||||||
|
|
||||||
interface EditorExampleProps {
|
|
||||||
editorType?: 'tinymce' | 'ckeditor' | 'quill';
|
|
||||||
}
|
|
||||||
|
|
||||||
const EditorExample: React.FC<EditorExampleProps> = ({
|
|
||||||
editorType = 'tinymce'
|
|
||||||
}) => {
|
|
||||||
const [content, setContent] = useState('<p>Hello, this is the editor content!</p>');
|
|
||||||
const [savedContent, setSavedContent] = useState('');
|
|
||||||
|
|
||||||
const handleContentChange = (newContent: string) => {
|
|
||||||
setContent(newContent);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSave = () => {
|
|
||||||
setSavedContent(content);
|
|
||||||
// console.log('Content saved:', content);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleReset = () => {
|
|
||||||
setContent('<p>Content has been reset!</p>');
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="p-6 max-w-4xl mx-auto">
|
|
||||||
<div className="mb-6">
|
|
||||||
<h2 className="text-2xl font-bold mb-4">Rich Text Editor Example</h2>
|
|
||||||
<p className="text-gray-600 mb-4">
|
|
||||||
This is an optimized editor with {editorType} - much smaller bundle size and better performance!
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
||||||
{/* Editor Panel */}
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<h3 className="text-lg font-semibold">Editor</h3>
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<button
|
|
||||||
onClick={handleSave}
|
|
||||||
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
|
|
||||||
>
|
|
||||||
Save
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={handleReset}
|
|
||||||
className="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors"
|
|
||||||
>
|
|
||||||
Reset
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="border border-gray-200 rounded-lg">
|
|
||||||
{/* Choose your editor based on migration */}
|
|
||||||
{editorType === 'tinymce' && (
|
|
||||||
<div className="p-4">
|
|
||||||
<p className="text-gray-500 text-sm mb-2">
|
|
||||||
TinyMCE Editor (200KB bundle)
|
|
||||||
</p>
|
|
||||||
{/* <OptimizedEditor
|
|
||||||
initialData={content}
|
|
||||||
onChange={handleContentChange}
|
|
||||||
height={400}
|
|
||||||
placeholder="Start typing your content..."
|
|
||||||
/> */}
|
|
||||||
<div className="h-96 bg-gray-50 border border-gray-200 rounded flex items-center justify-center">
|
|
||||||
<p className="text-gray-500">TinyMCE Editor Component</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{editorType === 'ckeditor' && (
|
|
||||||
<div className="p-4">
|
|
||||||
<p className="text-gray-500 text-sm mb-2">
|
|
||||||
CKEditor5 Classic (800KB bundle)
|
|
||||||
</p>
|
|
||||||
{/* <OptimizedCKEditor
|
|
||||||
initialData={content}
|
|
||||||
onChange={handleContentChange}
|
|
||||||
height={400}
|
|
||||||
placeholder="Start typing your content..."
|
|
||||||
/> */}
|
|
||||||
<div className="h-96 bg-gray-50 border border-gray-200 rounded flex items-center justify-center">
|
|
||||||
<p className="text-gray-500">CKEditor5 Classic Component</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{editorType === 'quill' && (
|
|
||||||
<div className="p-4">
|
|
||||||
<p className="text-gray-500 text-sm mb-2">
|
|
||||||
React Quill (100KB bundle)
|
|
||||||
</p>
|
|
||||||
{/* <MinimalEditor
|
|
||||||
initialData={content}
|
|
||||||
onChange={handleContentChange}
|
|
||||||
height={400}
|
|
||||||
placeholder="Start typing your content..."
|
|
||||||
/> */}
|
|
||||||
<div className="h-96 bg-gray-50 border border-gray-200 rounded flex items-center justify-center">
|
|
||||||
<p className="text-gray-500">React Quill Component</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Preview Panel */}
|
|
||||||
<div className="space-y-4">
|
|
||||||
<h3 className="text-lg font-semibold">Preview</h3>
|
|
||||||
|
|
||||||
<div className="border border-gray-200 rounded-lg p-4">
|
|
||||||
<h4 className="font-medium mb-2">Current Content:</h4>
|
|
||||||
<div
|
|
||||||
className="prose max-w-none"
|
|
||||||
dangerouslySetInnerHTML={{ __html: content }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{savedContent && (
|
|
||||||
<div className="border border-gray-200 rounded-lg p-4">
|
|
||||||
<h4 className="font-medium mb-2">Saved Content:</h4>
|
|
||||||
<div
|
|
||||||
className="prose max-w-none"
|
|
||||||
dangerouslySetInnerHTML={{ __html: savedContent }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="border border-gray-200 rounded-lg p-4">
|
|
||||||
<h4 className="font-medium mb-2">Raw HTML:</h4>
|
|
||||||
<pre className="text-xs bg-gray-100 p-2 rounded overflow-auto max-h-32">
|
|
||||||
{content}
|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Performance Info */}
|
|
||||||
<div className="mt-8 p-4 bg-blue-50 rounded-lg">
|
|
||||||
<h4 className="font-medium text-blue-900 mb-2">Performance Benefits:</h4>
|
|
||||||
<ul className="text-sm text-blue-800 space-y-1">
|
|
||||||
<li>• 90% smaller bundle size compared to custom CKEditor5</li>
|
|
||||||
<li>• Faster initial load time</li>
|
|
||||||
<li>• Better mobile performance</li>
|
|
||||||
<li>• Reduced memory usage</li>
|
|
||||||
<li>• Improved Lighthouse score</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default EditorExample;
|
|
||||||
|
|
@ -1,176 +0,0 @@
|
||||||
"use client";
|
|
||||||
|
|
||||||
import React, { useState } from 'react';
|
|
||||||
import { useForm, Controller } from 'react-hook-form';
|
|
||||||
import { Button } from '@/components/ui/button';
|
|
||||||
import { Input } from '@/components/ui/input';
|
|
||||||
import { Label } from '@/components/ui/label';
|
|
||||||
import { Card } from '@/components/ui/card';
|
|
||||||
import CustomEditor from './custom-editor';
|
|
||||||
import FormEditor from './form-editor';
|
|
||||||
|
|
||||||
export default function EditorTest() {
|
|
||||||
const [testData, setTestData] = useState('Initial test content');
|
|
||||||
const [editorType, setEditorType] = useState('custom');
|
|
||||||
|
|
||||||
const { control, setValue, watch, handleSubmit } = useForm({
|
|
||||||
defaultValues: {
|
|
||||||
title: 'Test Title',
|
|
||||||
description: testData,
|
|
||||||
creatorName: 'Test Creator'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const watchedValues = watch();
|
|
||||||
|
|
||||||
const handleSetValue = () => {
|
|
||||||
const newContent = `<p>Updated content at ${new Date().toLocaleTimeString()}</p><p>This content was set via setValue</p>`;
|
|
||||||
setValue('description', newContent);
|
|
||||||
setTestData(newContent);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSetEmpty = () => {
|
|
||||||
setValue('description', '');
|
|
||||||
setTestData('');
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSetHTML = () => {
|
|
||||||
const htmlContent = `
|
|
||||||
<h2>HTML Content Test</h2>
|
|
||||||
<p>This is a <strong>bold</strong> paragraph with <em>italic</em> text.</p>
|
|
||||||
<ul>
|
|
||||||
<li>List item 1</li>
|
|
||||||
<li>List item 2</li>
|
|
||||||
<li>List item 3</li>
|
|
||||||
</ul>
|
|
||||||
<p>Updated at: ${new Date().toLocaleTimeString()}</p>
|
|
||||||
`;
|
|
||||||
setValue('description', htmlContent);
|
|
||||||
setTestData(htmlContent);
|
|
||||||
};
|
|
||||||
|
|
||||||
const onSubmit = (data: any) => {
|
|
||||||
// console.log('Form submitted:', data);
|
|
||||||
alert('Form submitted! Check console for data.');
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="p-6 max-w-4xl mx-auto space-y-6">
|
|
||||||
<h1 className="text-2xl font-bold">Editor Test Component</h1>
|
|
||||||
|
|
||||||
<Card className="p-4">
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div>
|
|
||||||
<Label>Editor Type:</Label>
|
|
||||||
<div className="flex gap-2 mt-2">
|
|
||||||
<Button
|
|
||||||
variant={editorType === 'custom' ? 'default' : 'outline'}
|
|
||||||
onClick={() => setEditorType('custom')}
|
|
||||||
>
|
|
||||||
CustomEditor
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant={editorType === 'form' ? 'default' : 'outline'}
|
|
||||||
onClick={() => setEditorType('form')}
|
|
||||||
>
|
|
||||||
FormEditor
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex gap-2 flex-wrap">
|
|
||||||
<Button onClick={handleSetValue} variant="outline">
|
|
||||||
Set Value (Current Time)
|
|
||||||
</Button>
|
|
||||||
<Button onClick={handleSetEmpty} variant="outline">
|
|
||||||
Set Empty
|
|
||||||
</Button>
|
|
||||||
<Button onClick={handleSetHTML} variant="outline">
|
|
||||||
Set HTML Content
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
<div>
|
|
||||||
<Label>Current Test Data:</Label>
|
|
||||||
<div className="mt-2 p-2 bg-gray-100 rounded text-sm">
|
|
||||||
{testData || '(empty)'}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Label>Watched Form Values:</Label>
|
|
||||||
<div className="mt-2 p-2 bg-gray-100 rounded text-sm">
|
|
||||||
<pre>{JSON.stringify(watchedValues, null, 2)}</pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
|
|
||||||
<Card className="p-4">
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div>
|
|
||||||
<Label>Title:</Label>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="title"
|
|
||||||
render={({ field }) => (
|
|
||||||
<Input {...field} className="mt-1" />
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<Label>Description (Editor):</Label>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="description"
|
|
||||||
render={({ field }) => (
|
|
||||||
editorType === 'custom' ? (
|
|
||||||
<CustomEditor
|
|
||||||
onChange={field.onChange}
|
|
||||||
initialData={field.value}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<FormEditor
|
|
||||||
onChange={field.onChange}
|
|
||||||
initialData={field.value}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<Label>Creator Name:</Label>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="creatorName"
|
|
||||||
render={({ field }) => (
|
|
||||||
<Input {...field} className="mt-1" />
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Button type="submit" className="w-full">
|
|
||||||
Submit Form
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<Card className="p-4">
|
|
||||||
<h3 className="font-semibold mb-2">Instructions:</h3>
|
|
||||||
<ul className="list-disc list-inside space-y-1 text-sm">
|
|
||||||
<li>Switch between CustomEditor and FormEditor to test both</li>
|
|
||||||
<li>Click "Set Value" to test setValue functionality</li>
|
|
||||||
<li>Click "Set Empty" to test empty content handling</li>
|
|
||||||
<li>Click "Set HTML Content" to test rich HTML content</li>
|
|
||||||
<li>Type in the editor to test onChange functionality</li>
|
|
||||||
<li>Submit the form to see all data</li>
|
|
||||||
</ul>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
|
@ -1,102 +0,0 @@
|
||||||
import React, { useRef, useEffect, useState, useCallback } from "react";
|
|
||||||
import { Editor } from "@tinymce/tinymce-react";
|
|
||||||
|
|
||||||
function FormEditor({ onChange, initialData }) {
|
|
||||||
const editorRef = useRef(null);
|
|
||||||
const [isEditorReady, setIsEditorReady] = useState(false);
|
|
||||||
const [editorContent, setEditorContent] = useState(initialData || "");
|
|
||||||
|
|
||||||
// Handle editor initialization
|
|
||||||
const handleInit = useCallback((evt, editor) => {
|
|
||||||
editorRef.current = editor;
|
|
||||||
setIsEditorReady(true);
|
|
||||||
|
|
||||||
// Set initial content when editor is ready
|
|
||||||
if (editorContent) {
|
|
||||||
editor.setContent(editorContent);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle content changes
|
|
||||||
editor.on('change', () => {
|
|
||||||
const content = editor.getContent();
|
|
||||||
setEditorContent(content);
|
|
||||||
if (onChange) {
|
|
||||||
onChange(content);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}, [editorContent, onChange]);
|
|
||||||
|
|
||||||
// Watch for initialData changes (from setValue)
|
|
||||||
useEffect(() => {
|
|
||||||
if (initialData !== editorContent) {
|
|
||||||
setEditorContent(initialData || "");
|
|
||||||
|
|
||||||
// Update editor content if ready
|
|
||||||
if (editorRef.current && isEditorReady) {
|
|
||||||
editorRef.current.setContent(initialData || "");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [initialData, editorContent, isEditorReady]);
|
|
||||||
|
|
||||||
// Handle initial data when editor becomes ready
|
|
||||||
useEffect(() => {
|
|
||||||
if (isEditorReady && editorContent && editorRef.current) {
|
|
||||||
editorRef.current.setContent(editorContent);
|
|
||||||
}
|
|
||||||
}, [isEditorReady, editorContent]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Editor
|
|
||||||
onInit={handleInit}
|
|
||||||
apiKey={process.env.NEXT_PUBLIC_TINYMCE_API_KEY}
|
|
||||||
init={{
|
|
||||||
height: 400,
|
|
||||||
menubar: false,
|
|
||||||
plugins: [
|
|
||||||
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
|
|
||||||
'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
|
|
||||||
'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
|
|
||||||
],
|
|
||||||
toolbar: 'undo redo | blocks | ' +
|
|
||||||
'bold italic forecolor | alignleft aligncenter ' +
|
|
||||||
'alignright alignjustify | bullist numlist outdent indent | ' +
|
|
||||||
'removeformat | table | code | help',
|
|
||||||
content_style: `
|
|
||||||
body {
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.6;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
.mce-content-body {
|
|
||||||
padding: 16px;
|
|
||||||
min-height: 368px;
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
placeholder: 'Start typing...',
|
|
||||||
branding: false,
|
|
||||||
elementpath: false,
|
|
||||||
resize: false,
|
|
||||||
statusbar: false,
|
|
||||||
auto_focus: false,
|
|
||||||
forced_root_block: 'p',
|
|
||||||
entity_encoding: 'raw',
|
|
||||||
verify_html: false,
|
|
||||||
cleanup: false,
|
|
||||||
cleanup_on_startup: false,
|
|
||||||
auto_resize: false,
|
|
||||||
paste_as_text: false,
|
|
||||||
paste_enable_default_filters: true,
|
|
||||||
paste_word_valid_elements: 'b,strong,i,em,h1,h2,h3,h4,h5,h6',
|
|
||||||
paste_retain_style_properties: 'color background-color font-size font-weight',
|
|
||||||
mobile: {
|
|
||||||
theme: 'silver',
|
|
||||||
plugins: ['lists', 'autolink', 'link', 'image', 'table'],
|
|
||||||
toolbar: 'bold italic | bullist numlist | link image'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default FormEditor;
|
|
||||||
|
|
@ -1,81 +0,0 @@
|
||||||
// components/minimal-editor.js
|
|
||||||
|
|
||||||
import React, { useRef } from "react";
|
|
||||||
import { Editor } from "@tinymce/tinymce-react";
|
|
||||||
|
|
||||||
function MinimalEditor(props) {
|
|
||||||
const editorRef = useRef(null);
|
|
||||||
|
|
||||||
const handleInit = (evt, editor) => {
|
|
||||||
editorRef.current = editor;
|
|
||||||
|
|
||||||
// Set initial content if provided
|
|
||||||
if (props.initialData) {
|
|
||||||
editor.setContent(props.initialData);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Simple onChange handler - no debouncing, no complex logic
|
|
||||||
editor.on('change', () => {
|
|
||||||
if (props.onChange) {
|
|
||||||
props.onChange(editor.getContent());
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Editor
|
|
||||||
onInit={handleInit}
|
|
||||||
apiKey={process.env.NEXT_PUBLIC_TINYMCE_API_KEY}
|
|
||||||
init={{
|
|
||||||
height: 400,
|
|
||||||
menubar: false,
|
|
||||||
plugins: [
|
|
||||||
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
|
|
||||||
'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
|
|
||||||
'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
|
|
||||||
],
|
|
||||||
toolbar: 'undo redo | blocks | ' +
|
|
||||||
'bold italic forecolor | alignleft aligncenter ' +
|
|
||||||
'alignright alignjustify | bullist numlist outdent indent | ' +
|
|
||||||
'removeformat | table | code | help',
|
|
||||||
content_style: `
|
|
||||||
body {
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.6;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
.mce-content-body {
|
|
||||||
padding: 16px;
|
|
||||||
min-height: 368px;
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
placeholder: 'Start typing...',
|
|
||||||
branding: false,
|
|
||||||
elementpath: false,
|
|
||||||
resize: false,
|
|
||||||
statusbar: false,
|
|
||||||
// Minimal settings to prevent cursor jumping
|
|
||||||
auto_focus: false,
|
|
||||||
forced_root_block: 'p',
|
|
||||||
entity_encoding: 'raw',
|
|
||||||
// Disable problematic features
|
|
||||||
verify_html: false,
|
|
||||||
cleanup: false,
|
|
||||||
cleanup_on_startup: false,
|
|
||||||
auto_resize: false,
|
|
||||||
// Basic content handling
|
|
||||||
paste_as_text: false,
|
|
||||||
paste_enable_default_filters: true,
|
|
||||||
// Mobile support
|
|
||||||
mobile: {
|
|
||||||
theme: 'silver',
|
|
||||||
plugins: ['lists', 'autolink', 'link', 'image', 'table'],
|
|
||||||
toolbar: 'bold italic | bullist numlist | link image'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default MinimalEditor;
|
|
||||||
|
|
@ -1,89 +0,0 @@
|
||||||
"use client";
|
|
||||||
|
|
||||||
import React, { useEffect, useRef } from 'react';
|
|
||||||
import { Editor } from '@tinymce/tinymce-react';
|
|
||||||
|
|
||||||
interface OptimizedEditorProps {
|
|
||||||
initialData?: string;
|
|
||||||
onChange?: (data: string) => void;
|
|
||||||
height?: number;
|
|
||||||
placeholder?: string;
|
|
||||||
disabled?: boolean;
|
|
||||||
readOnly?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const OptimizedEditor: React.FC<OptimizedEditorProps> = ({
|
|
||||||
initialData = '',
|
|
||||||
onChange,
|
|
||||||
height = 400,
|
|
||||||
placeholder = 'Start typing...',
|
|
||||||
disabled = false,
|
|
||||||
readOnly = false,
|
|
||||||
}) => {
|
|
||||||
const editorRef = useRef<any>(null);
|
|
||||||
|
|
||||||
const handleEditorChange = (content: string) => {
|
|
||||||
if (onChange) {
|
|
||||||
onChange(content);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleInit = (evt: any, editor: any) => {
|
|
||||||
editorRef.current = editor;
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Editor
|
|
||||||
onInit={handleInit}
|
|
||||||
initialValue={initialData}
|
|
||||||
onEditorChange={handleEditorChange}
|
|
||||||
disabled={disabled}
|
|
||||||
init={{
|
|
||||||
height,
|
|
||||||
menubar: false,
|
|
||||||
plugins: [
|
|
||||||
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
|
|
||||||
'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
|
|
||||||
'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
|
|
||||||
],
|
|
||||||
toolbar: 'undo redo | blocks | ' +
|
|
||||||
'bold italic forecolor | alignleft aligncenter ' +
|
|
||||||
'alignright alignjustify | bullist numlist outdent indent | ' +
|
|
||||||
'removeformat | table | code | help',
|
|
||||||
content_style: `
|
|
||||||
body {
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.6;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
.mce-content-body {
|
|
||||||
padding: 16px;
|
|
||||||
min-height: ${height - 32}px;
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
placeholder,
|
|
||||||
readonly: readOnly,
|
|
||||||
branding: false,
|
|
||||||
elementpath: false,
|
|
||||||
resize: false,
|
|
||||||
statusbar: false,
|
|
||||||
// Performance optimizations
|
|
||||||
cache_suffix: '?v=1.0',
|
|
||||||
browser_spellcheck: false,
|
|
||||||
gecko_spellcheck: false,
|
|
||||||
// Auto-save feature
|
|
||||||
auto_save: true,
|
|
||||||
auto_save_interval: '30s',
|
|
||||||
// Better mobile support
|
|
||||||
mobile: {
|
|
||||||
theme: 'silver',
|
|
||||||
plugins: ['lists', 'autolink', 'link', 'image', 'table'],
|
|
||||||
toolbar: 'bold italic | bullist numlist | link image'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default OptimizedEditor;
|
|
||||||
|
|
@ -1,136 +0,0 @@
|
||||||
// components/readonly-editor.js
|
|
||||||
|
|
||||||
import React, { useRef, useEffect } from "react";
|
|
||||||
import { Editor } from "@tinymce/tinymce-react";
|
|
||||||
|
|
||||||
function ReadOnlyEditor(props) {
|
|
||||||
const editorRef = useRef(null);
|
|
||||||
|
|
||||||
const handleInit = (evt, editor) => {
|
|
||||||
editorRef.current = editor;
|
|
||||||
|
|
||||||
// Set initial content if provided
|
|
||||||
if (props.initialData) {
|
|
||||||
editor.setContent(props.initialData);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Disable all editing capabilities
|
|
||||||
editor.on('keydown keyup keypress input', (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
|
|
||||||
editor.on('paste', (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
|
|
||||||
editor.on('drop', (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Disable mouse events that might allow editing
|
|
||||||
editor.on('mousedown mousemove mouseup click dblclick', (e) => {
|
|
||||||
if (e.target.closest('.mce-content-body')) {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// Update content when props change
|
|
||||||
useEffect(() => {
|
|
||||||
if (editorRef.current && props.initialData) {
|
|
||||||
editorRef.current.setContent(props.initialData);
|
|
||||||
}
|
|
||||||
}, [props.initialData]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Editor
|
|
||||||
onInit={handleInit}
|
|
||||||
initialValue={props.initialData || ''}
|
|
||||||
apiKey={process.env.NEXT_PUBLIC_TINYMCE_API_KEY}
|
|
||||||
init={{
|
|
||||||
height: props.height || 400,
|
|
||||||
menubar: false,
|
|
||||||
toolbar: false, // No toolbar for read-only mode
|
|
||||||
plugins: [
|
|
||||||
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap',
|
|
||||||
'anchor', 'searchreplace', 'visualblocks', 'code',
|
|
||||||
'insertdatetime', 'media', 'table'
|
|
||||||
],
|
|
||||||
content_style: `
|
|
||||||
body {
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.6;
|
|
||||||
color: #333;
|
|
||||||
pointer-events: none;
|
|
||||||
user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
}
|
|
||||||
.mce-content-body {
|
|
||||||
padding: 16px;
|
|
||||||
min-height: ${(props.height || 400) - 32}px;
|
|
||||||
pointer-events: none;
|
|
||||||
user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
}
|
|
||||||
.mce-content-body * {
|
|
||||||
pointer-events: none;
|
|
||||||
user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
readonly: true,
|
|
||||||
branding: false,
|
|
||||||
elementpath: false,
|
|
||||||
resize: false,
|
|
||||||
statusbar: false,
|
|
||||||
// Minimal settings to prevent cursor jumping
|
|
||||||
auto_focus: false,
|
|
||||||
forced_root_block: 'p',
|
|
||||||
entity_encoding: 'raw',
|
|
||||||
// Disable problematic features
|
|
||||||
verify_html: false,
|
|
||||||
cleanup: false,
|
|
||||||
cleanup_on_startup: false,
|
|
||||||
auto_resize: false,
|
|
||||||
// Performance optimizations for read-only
|
|
||||||
cache_suffix: '?v=1.0',
|
|
||||||
browser_spellcheck: false,
|
|
||||||
gecko_spellcheck: false,
|
|
||||||
// Disable editing features
|
|
||||||
paste_as_text: true,
|
|
||||||
paste_enable_default_filters: false,
|
|
||||||
paste_word_valid_elements: false,
|
|
||||||
paste_retain_style_properties: false,
|
|
||||||
// Additional read-only settings
|
|
||||||
contextmenu: false,
|
|
||||||
selection: false,
|
|
||||||
// Disable all editing
|
|
||||||
object_resizing: false,
|
|
||||||
element_format: 'html',
|
|
||||||
// Mobile support
|
|
||||||
mobile: {
|
|
||||||
theme: 'silver',
|
|
||||||
plugins: ['lists', 'autolink', 'link', 'image', 'table'],
|
|
||||||
toolbar: false
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ReadOnlyEditor;
|
|
||||||
|
|
@ -1,95 +0,0 @@
|
||||||
// components/simple-editor.js
|
|
||||||
|
|
||||||
import React, { useRef, useState, useCallback } from "react";
|
|
||||||
import { Editor } from "@tinymce/tinymce-react";
|
|
||||||
|
|
||||||
function SimpleEditor(props) {
|
|
||||||
const editorRef = useRef(null);
|
|
||||||
const [editorInstance, setEditorInstance] = useState(null);
|
|
||||||
|
|
||||||
const handleInit = useCallback((evt, editor) => {
|
|
||||||
editorRef.current = editor;
|
|
||||||
setEditorInstance(editor);
|
|
||||||
|
|
||||||
// Set initial content
|
|
||||||
if (props.initialData) {
|
|
||||||
editor.setContent(props.initialData);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Disable automatic content updates
|
|
||||||
editor.settings.auto_focus = false;
|
|
||||||
editor.settings.forced_root_block = 'p';
|
|
||||||
|
|
||||||
// Store the onChange callback
|
|
||||||
editor.onChangeCallback = props.onChange;
|
|
||||||
|
|
||||||
// Handle content changes without triggering re-renders
|
|
||||||
editor.on('change keyup input', (e) => {
|
|
||||||
if (editor.onChangeCallback) {
|
|
||||||
const content = editor.getContent();
|
|
||||||
editor.onChangeCallback(content);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
}, [props.initialData, props.onChange]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Editor
|
|
||||||
onInit={handleInit}
|
|
||||||
apiKey={process.env.NEXT_PUBLIC_TINYMCE_API_KEY}
|
|
||||||
init={{
|
|
||||||
height: 400,
|
|
||||||
menubar: false,
|
|
||||||
plugins: [
|
|
||||||
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
|
|
||||||
'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
|
|
||||||
'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
|
|
||||||
],
|
|
||||||
toolbar: 'undo redo | blocks | ' +
|
|
||||||
'bold italic forecolor | alignleft aligncenter ' +
|
|
||||||
'alignright alignjustify | bullist numlist outdent indent | ' +
|
|
||||||
'removeformat | table | code | help',
|
|
||||||
content_style: `
|
|
||||||
body {
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.6;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
.mce-content-body {
|
|
||||||
padding: 16px;
|
|
||||||
min-height: 368px;
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
placeholder: 'Start typing...',
|
|
||||||
branding: false,
|
|
||||||
elementpath: false,
|
|
||||||
resize: false,
|
|
||||||
statusbar: false,
|
|
||||||
// Critical settings to prevent cursor jumping
|
|
||||||
auto_focus: false,
|
|
||||||
forced_root_block: 'p',
|
|
||||||
entity_encoding: 'raw',
|
|
||||||
keep_styles: true,
|
|
||||||
// Disable problematic features
|
|
||||||
verify_html: false,
|
|
||||||
cleanup: false,
|
|
||||||
cleanup_on_startup: false,
|
|
||||||
auto_resize: false,
|
|
||||||
// Better content handling
|
|
||||||
paste_as_text: false,
|
|
||||||
paste_enable_default_filters: true,
|
|
||||||
paste_word_valid_elements: 'b,strong,i,em,h1,h2,h3,h4,h5,h6',
|
|
||||||
paste_retain_style_properties: 'color background-color font-size font-weight',
|
|
||||||
// Mobile support
|
|
||||||
mobile: {
|
|
||||||
theme: 'silver',
|
|
||||||
plugins: ['lists', 'autolink', 'link', 'image', 'table'],
|
|
||||||
toolbar: 'bold italic | bullist numlist | link image'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default SimpleEditor;
|
|
||||||
|
|
@ -1,109 +0,0 @@
|
||||||
// components/simple-readonly-editor.js
|
|
||||||
|
|
||||||
import React, { useRef } from "react";
|
|
||||||
import { Editor } from "@tinymce/tinymce-react";
|
|
||||||
|
|
||||||
function SimpleReadOnlyEditor(props) {
|
|
||||||
const editorRef = useRef(null);
|
|
||||||
|
|
||||||
const handleInit = (evt, editor) => {
|
|
||||||
editorRef.current = editor;
|
|
||||||
|
|
||||||
// Disable all editing capabilities
|
|
||||||
editor.on('keydown keyup keypress input', (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
|
|
||||||
editor.on('paste', (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
|
|
||||||
editor.on('drop', (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Disable mouse events that might allow editing
|
|
||||||
editor.on('mousedown mousemove mouseup click dblclick', (e) => {
|
|
||||||
if (e.target.closest('.mce-content-body')) {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Editor
|
|
||||||
onInit={handleInit}
|
|
||||||
initialValue={props.initialData || ''}
|
|
||||||
apiKey={process.env.NEXT_PUBLIC_TINYMCE_API_KEY}
|
|
||||||
init={{
|
|
||||||
height: props.height || 400,
|
|
||||||
menubar: false,
|
|
||||||
toolbar: false,
|
|
||||||
plugins: [
|
|
||||||
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap',
|
|
||||||
'anchor', 'searchreplace', 'visualblocks', 'code',
|
|
||||||
'insertdatetime', 'media', 'table'
|
|
||||||
],
|
|
||||||
content_style: `
|
|
||||||
body {
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.6;
|
|
||||||
color: #333;
|
|
||||||
pointer-events: none;
|
|
||||||
user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
}
|
|
||||||
.mce-content-body {
|
|
||||||
padding: 16px;
|
|
||||||
min-height: ${(props.height || 400) - 32}px;
|
|
||||||
pointer-events: none;
|
|
||||||
user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
}
|
|
||||||
.mce-content-body * {
|
|
||||||
pointer-events: none;
|
|
||||||
user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
readonly: true,
|
|
||||||
branding: false,
|
|
||||||
elementpath: false,
|
|
||||||
resize: false,
|
|
||||||
statusbar: false,
|
|
||||||
auto_focus: false,
|
|
||||||
forced_root_block: 'p',
|
|
||||||
entity_encoding: 'raw',
|
|
||||||
verify_html: false,
|
|
||||||
cleanup: false,
|
|
||||||
cleanup_on_startup: false,
|
|
||||||
auto_resize: false,
|
|
||||||
browser_spellcheck: false,
|
|
||||||
gecko_spellcheck: false,
|
|
||||||
paste_as_text: true,
|
|
||||||
paste_enable_default_filters: false,
|
|
||||||
contextmenu: false,
|
|
||||||
selection: false,
|
|
||||||
object_resizing: false,
|
|
||||||
element_format: 'html'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default SimpleReadOnlyEditor;
|
|
||||||
|
|
@ -1,93 +0,0 @@
|
||||||
import React, { useRef, useEffect } from "react";
|
|
||||||
import { Editor } from "@tinymce/tinymce-react";
|
|
||||||
|
|
||||||
function StableEditor(props) {
|
|
||||||
const editorRef = useRef(null);
|
|
||||||
const onChangeRef = useRef(props.onChange);
|
|
||||||
|
|
||||||
// Update onChange ref when props change
|
|
||||||
useEffect(() => {
|
|
||||||
onChangeRef.current = props.onChange;
|
|
||||||
}, [props.onChange]);
|
|
||||||
|
|
||||||
const handleInit = (evt, editor) => {
|
|
||||||
editorRef.current = editor;
|
|
||||||
|
|
||||||
// Set initial content if provided
|
|
||||||
if (props.initialData) {
|
|
||||||
editor.setContent(props.initialData);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Use a simple change handler that doesn't trigger re-renders
|
|
||||||
editor.on('change', () => {
|
|
||||||
if (onChangeRef.current) {
|
|
||||||
onChangeRef.current(editor.getContent());
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Editor
|
|
||||||
onInit={handleInit}
|
|
||||||
apiKey={process.env.NEXT_PUBLIC_TINYMCE_API_KEY}
|
|
||||||
init={{
|
|
||||||
height: 400,
|
|
||||||
menubar: false,
|
|
||||||
plugins: [
|
|
||||||
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
|
|
||||||
'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
|
|
||||||
'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
|
|
||||||
],
|
|
||||||
toolbar: 'undo redo | blocks | ' +
|
|
||||||
'bold italic forecolor | alignleft aligncenter ' +
|
|
||||||
'alignright alignjustify | bullist numlist outdent indent | ' +
|
|
||||||
'removeformat | table | code | help',
|
|
||||||
content_style: `
|
|
||||||
body {
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.6;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
.mce-content-body {
|
|
||||||
padding: 16px;
|
|
||||||
min-height: 368px;
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
placeholder: 'Start typing...',
|
|
||||||
branding: false,
|
|
||||||
elementpath: false,
|
|
||||||
resize: false,
|
|
||||||
statusbar: false,
|
|
||||||
// Critical settings for stability
|
|
||||||
auto_focus: false,
|
|
||||||
forced_root_block: 'p',
|
|
||||||
entity_encoding: 'raw',
|
|
||||||
keep_styles: true,
|
|
||||||
// Disable all problematic features
|
|
||||||
verify_html: false,
|
|
||||||
cleanup: false,
|
|
||||||
cleanup_on_startup: false,
|
|
||||||
auto_resize: false,
|
|
||||||
// Content handling
|
|
||||||
paste_as_text: false,
|
|
||||||
paste_enable_default_filters: true,
|
|
||||||
paste_word_valid_elements: 'b,strong,i,em,h1,h2,h3,h4,h5,h6',
|
|
||||||
paste_retain_style_properties: 'color background-color font-size font-weight',
|
|
||||||
// Prevent automatic updates
|
|
||||||
element_format: 'html',
|
|
||||||
valid_children: '+body[style]',
|
|
||||||
extended_valid_elements: 'span[*]',
|
|
||||||
custom_elements: '~span',
|
|
||||||
// Mobile support
|
|
||||||
mobile: {
|
|
||||||
theme: 'silver',
|
|
||||||
plugins: ['lists', 'autolink', 'link', 'image', 'table'],
|
|
||||||
toolbar: 'bold italic | bullist numlist | link image'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default StableEditor;
|
|
||||||
|
|
@ -1,93 +0,0 @@
|
||||||
import React, { useRef, useEffect } from "react";
|
|
||||||
import { Editor } from "@tinymce/tinymce-react";
|
|
||||||
|
|
||||||
function StaticEditor(props) {
|
|
||||||
const editorRef = useRef(null);
|
|
||||||
const onChangeRef = useRef(props.onChange);
|
|
||||||
|
|
||||||
// Update onChange ref when props change
|
|
||||||
useEffect(() => {
|
|
||||||
onChangeRef.current = props.onChange;
|
|
||||||
}, [props.onChange]);
|
|
||||||
|
|
||||||
const handleInit = (evt, editor) => {
|
|
||||||
editorRef.current = editor;
|
|
||||||
|
|
||||||
// Set initial content if provided
|
|
||||||
if (props.initialData) {
|
|
||||||
editor.setContent(props.initialData);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Use a simple change handler that doesn't trigger re-renders
|
|
||||||
editor.on('change', () => {
|
|
||||||
if (onChangeRef.current) {
|
|
||||||
onChangeRef.current(editor.getContent());
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Editor
|
|
||||||
onInit={handleInit}
|
|
||||||
apiKey={process.env.NEXT_PUBLIC_TINYMCE_API_KEY}
|
|
||||||
init={{
|
|
||||||
height: 400,
|
|
||||||
menubar: false,
|
|
||||||
plugins: [
|
|
||||||
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
|
|
||||||
'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
|
|
||||||
'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
|
|
||||||
],
|
|
||||||
toolbar: 'undo redo | blocks | ' +
|
|
||||||
'bold italic forecolor | alignleft aligncenter ' +
|
|
||||||
'alignright alignjustify | bullist numlist outdent indent | ' +
|
|
||||||
'removeformat | table | code | help',
|
|
||||||
content_style: `
|
|
||||||
body {
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.6;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
.mce-content-body {
|
|
||||||
padding: 16px;
|
|
||||||
min-height: 368px;
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
placeholder: 'Start typing...',
|
|
||||||
branding: false,
|
|
||||||
elementpath: false,
|
|
||||||
resize: false,
|
|
||||||
statusbar: false,
|
|
||||||
// Critical settings to prevent cursor jumping
|
|
||||||
auto_focus: false,
|
|
||||||
forced_root_block: 'p',
|
|
||||||
entity_encoding: 'raw',
|
|
||||||
keep_styles: true,
|
|
||||||
// Disable all problematic features
|
|
||||||
verify_html: false,
|
|
||||||
cleanup: false,
|
|
||||||
cleanup_on_startup: false,
|
|
||||||
auto_resize: false,
|
|
||||||
// Content handling
|
|
||||||
paste_as_text: false,
|
|
||||||
paste_enable_default_filters: true,
|
|
||||||
paste_word_valid_elements: 'b,strong,i,em,h1,h2,h3,h4,h5,h6',
|
|
||||||
paste_retain_style_properties: 'color background-color font-size font-weight',
|
|
||||||
// Prevent automatic updates
|
|
||||||
element_format: 'html',
|
|
||||||
valid_children: '+body[style]',
|
|
||||||
extended_valid_elements: 'span[*]',
|
|
||||||
custom_elements: '~span',
|
|
||||||
// Mobile support
|
|
||||||
mobile: {
|
|
||||||
theme: 'silver',
|
|
||||||
plugins: ['lists', 'autolink', 'link', 'image', 'table'],
|
|
||||||
toolbar: 'bold italic | bullist numlist | link image'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default StaticEditor;
|
|
||||||
|
|
@ -1,113 +0,0 @@
|
||||||
// components/strict-readonly-editor.js
|
|
||||||
|
|
||||||
import React, { useRef } from "react";
|
|
||||||
import { Editor } from "@tinymce/tinymce-react";
|
|
||||||
|
|
||||||
function StrictReadOnlyEditor(props) {
|
|
||||||
const editorRef = useRef(null);
|
|
||||||
|
|
||||||
const handleInit = (evt, editor) => {
|
|
||||||
editorRef.current = editor;
|
|
||||||
|
|
||||||
// Disable all possible editing events
|
|
||||||
const disableEvents = ['keydown', 'keyup', 'keypress', 'input', 'paste', 'drop', 'cut', 'copy'];
|
|
||||||
|
|
||||||
disableEvents.forEach(eventType => {
|
|
||||||
editor.on(eventType, (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
e.stopImmediatePropagation();
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Disable mouse events that might allow editing
|
|
||||||
editor.on('mousedown mousemove mouseup click dblclick', (e) => {
|
|
||||||
if (e.target.closest('.mce-content-body')) {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Disable focus events
|
|
||||||
editor.on('focus blur', (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Editor
|
|
||||||
onInit={handleInit}
|
|
||||||
initialValue={props.initialData || ''}
|
|
||||||
apiKey={process.env.NEXT_PUBLIC_TINYMCE_API_KEY}
|
|
||||||
init={{
|
|
||||||
height: props.height || 400,
|
|
||||||
menubar: false,
|
|
||||||
toolbar: false,
|
|
||||||
plugins: [
|
|
||||||
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap',
|
|
||||||
'anchor', 'searchreplace', 'visualblocks', 'code',
|
|
||||||
'insertdatetime', 'media', 'table'
|
|
||||||
],
|
|
||||||
content_style: `
|
|
||||||
body {
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.6;
|
|
||||||
color: #333;
|
|
||||||
pointer-events: none !important;
|
|
||||||
user-select: none !important;
|
|
||||||
-webkit-user-select: none !important;
|
|
||||||
-moz-user-select: none !important;
|
|
||||||
-ms-user-select: none !important;
|
|
||||||
}
|
|
||||||
.mce-content-body {
|
|
||||||
padding: 16px;
|
|
||||||
min-height: ${(props.height || 400) - 32}px;
|
|
||||||
pointer-events: none !important;
|
|
||||||
user-select: none !important;
|
|
||||||
-webkit-user-select: none !important;
|
|
||||||
-moz-user-select: none !important;
|
|
||||||
-ms-user-select: none !important;
|
|
||||||
}
|
|
||||||
.mce-content-body * {
|
|
||||||
pointer-events: none !important;
|
|
||||||
user-select: none !important;
|
|
||||||
-webkit-user-select: none !important;
|
|
||||||
-moz-user-select: none !important;
|
|
||||||
-ms-user-select: none !important;
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
readonly: true,
|
|
||||||
branding: false,
|
|
||||||
elementpath: false,
|
|
||||||
resize: false,
|
|
||||||
statusbar: false,
|
|
||||||
auto_focus: false,
|
|
||||||
forced_root_block: 'p',
|
|
||||||
entity_encoding: 'raw',
|
|
||||||
verify_html: false,
|
|
||||||
cleanup: false,
|
|
||||||
cleanup_on_startup: false,
|
|
||||||
auto_resize: false,
|
|
||||||
browser_spellcheck: false,
|
|
||||||
gecko_spellcheck: false,
|
|
||||||
paste_as_text: true,
|
|
||||||
paste_enable_default_filters: false,
|
|
||||||
contextmenu: false,
|
|
||||||
selection: false,
|
|
||||||
object_resizing: false,
|
|
||||||
element_format: 'html',
|
|
||||||
// Additional strict settings
|
|
||||||
valid_children: false,
|
|
||||||
extended_valid_elements: false,
|
|
||||||
custom_elements: false
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default StrictReadOnlyEditor;
|
|
||||||
|
|
@ -1,264 +0,0 @@
|
||||||
"use client";
|
|
||||||
|
|
||||||
import React, { useRef, useState, useEffect } from 'react';
|
|
||||||
import { Editor } from '@tinymce/tinymce-react';
|
|
||||||
|
|
||||||
interface TinyMCEEditorProps {
|
|
||||||
initialData?: string;
|
|
||||||
onChange?: (data: string) => void;
|
|
||||||
onReady?: (editor: any) => void;
|
|
||||||
height?: number;
|
|
||||||
placeholder?: string;
|
|
||||||
disabled?: boolean;
|
|
||||||
readOnly?: boolean;
|
|
||||||
features?: 'basic' | 'standard' | 'full';
|
|
||||||
toolbar?: string;
|
|
||||||
language?: string;
|
|
||||||
uploadUrl?: string;
|
|
||||||
uploadHeaders?: Record<string, string>;
|
|
||||||
className?: string;
|
|
||||||
autoSave?: boolean;
|
|
||||||
autoSaveInterval?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
const TinyMCEEditor: React.FC<TinyMCEEditorProps> = ({
|
|
||||||
initialData = '',
|
|
||||||
onChange,
|
|
||||||
onReady,
|
|
||||||
height = 400,
|
|
||||||
placeholder = 'Start typing...',
|
|
||||||
disabled = false,
|
|
||||||
readOnly = false,
|
|
||||||
features = 'standard',
|
|
||||||
toolbar,
|
|
||||||
language = 'en',
|
|
||||||
uploadUrl,
|
|
||||||
uploadHeaders,
|
|
||||||
className = '',
|
|
||||||
autoSave = true,
|
|
||||||
autoSaveInterval = 30000
|
|
||||||
}) => {
|
|
||||||
const editorRef = useRef<any>(null);
|
|
||||||
const [isEditorLoaded, setIsEditorLoaded] = useState(false);
|
|
||||||
const [lastSaved, setLastSaved] = useState<Date | null>(null);
|
|
||||||
const [wordCount, setWordCount] = useState(0);
|
|
||||||
|
|
||||||
// Feature-based configurations
|
|
||||||
const getFeatureConfig = (featureLevel: string) => {
|
|
||||||
const configs = {
|
|
||||||
basic: {
|
|
||||||
plugins: ['lists', 'link', 'autolink', 'wordcount'],
|
|
||||||
toolbar: 'bold italic | bullist numlist | link',
|
|
||||||
menubar: false
|
|
||||||
},
|
|
||||||
standard: {
|
|
||||||
plugins: [
|
|
||||||
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
|
|
||||||
'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
|
|
||||||
'insertdatetime', 'media', 'table', 'help', 'wordcount'
|
|
||||||
],
|
|
||||||
toolbar: 'undo redo | blocks | ' +
|
|
||||||
'bold italic forecolor | alignleft aligncenter ' +
|
|
||||||
'alignright alignjustify | bullist numlist outdent indent | ' +
|
|
||||||
'removeformat | table | code | help',
|
|
||||||
menubar: false
|
|
||||||
},
|
|
||||||
full: {
|
|
||||||
plugins: [
|
|
||||||
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
|
|
||||||
'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
|
|
||||||
'insertdatetime', 'media', 'table', 'help', 'wordcount', 'emoticons',
|
|
||||||
'paste', 'textcolor', 'colorpicker', 'hr', 'pagebreak', 'nonbreaking',
|
|
||||||
'toc', 'imagetools', 'textpattern', 'codesample'
|
|
||||||
],
|
|
||||||
toolbar: 'undo redo | formatselect | bold italic backcolor | ' +
|
|
||||||
'alignleft aligncenter alignright alignjustify | ' +
|
|
||||||
'bullist numlist outdent indent | removeformat | help',
|
|
||||||
menubar: 'file edit view insert format tools table help'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
return configs[featureLevel as keyof typeof configs] || configs.standard;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleEditorChange = (content: string) => {
|
|
||||||
if (onChange) {
|
|
||||||
onChange(content);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleEditorInit = (evt: any, editor: any) => {
|
|
||||||
editorRef.current = editor;
|
|
||||||
setIsEditorLoaded(true);
|
|
||||||
|
|
||||||
if (onReady) {
|
|
||||||
onReady(editor);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set up word count tracking
|
|
||||||
editor.on('keyup', () => {
|
|
||||||
const count = editor.plugins.wordcount.body.getCharacterCount();
|
|
||||||
setWordCount(count);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Set up auto-save
|
|
||||||
if (autoSave && !readOnly) {
|
|
||||||
setInterval(() => {
|
|
||||||
const content = editor.getContent();
|
|
||||||
localStorage.setItem('tinymce-autosave', content);
|
|
||||||
setLastSaved(new Date());
|
|
||||||
}, autoSaveInterval);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Fix cursor jumping issues
|
|
||||||
editor.on('keyup', (e: any) => {
|
|
||||||
// Prevent cursor jumping on content changes
|
|
||||||
e.stopPropagation();
|
|
||||||
});
|
|
||||||
|
|
||||||
editor.on('input', (e: any) => {
|
|
||||||
// Prevent unnecessary re-renders
|
|
||||||
e.stopPropagation();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Handle paste events properly
|
|
||||||
editor.on('paste', (e: any) => {
|
|
||||||
// Allow default paste behavior
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleImageUpload = (blobInfo: any, progress: any) => {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
if (!uploadUrl) {
|
|
||||||
reject('No upload URL configured');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const formData = new FormData();
|
|
||||||
formData.append('file', blobInfo.blob(), blobInfo.filename());
|
|
||||||
|
|
||||||
fetch(uploadUrl, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: uploadHeaders || {},
|
|
||||||
body: formData
|
|
||||||
})
|
|
||||||
.then(response => response.json())
|
|
||||||
.then(result => {
|
|
||||||
resolve(result.url);
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
reject(error);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const featureConfig = getFeatureConfig(features);
|
|
||||||
|
|
||||||
const editorConfig = {
|
|
||||||
height,
|
|
||||||
language,
|
|
||||||
placeholder,
|
|
||||||
readonly: readOnly,
|
|
||||||
disabled,
|
|
||||||
branding: false,
|
|
||||||
elementpath: false,
|
|
||||||
resize: false,
|
|
||||||
statusbar: !readOnly,
|
|
||||||
// Performance optimizations
|
|
||||||
cache_suffix: '?v=1.0',
|
|
||||||
browser_spellcheck: false,
|
|
||||||
gecko_spellcheck: false,
|
|
||||||
// Content styling
|
|
||||||
content_style: `
|
|
||||||
body {
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.6;
|
|
||||||
color: #333;
|
|
||||||
margin: 0;
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
.mce-content-body {
|
|
||||||
min-height: ${height - 32}px;
|
|
||||||
}
|
|
||||||
.mce-content-body:focus {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
// Image upload configuration
|
|
||||||
images_upload_handler: uploadUrl ? handleImageUpload : undefined,
|
|
||||||
automatic_uploads: !!uploadUrl,
|
|
||||||
file_picker_types: 'image',
|
|
||||||
// Better mobile support
|
|
||||||
mobile: {
|
|
||||||
theme: 'silver',
|
|
||||||
plugins: ['lists', 'autolink', 'link', 'image', 'table'],
|
|
||||||
toolbar: 'bold italic | bullist numlist | link image'
|
|
||||||
},
|
|
||||||
// Paste configuration
|
|
||||||
paste_as_text: false,
|
|
||||||
paste_enable_default_filters: true,
|
|
||||||
paste_word_valid_elements: 'b,strong,i,em,h1,h2,h3,h4,h5,h6',
|
|
||||||
paste_retain_style_properties: 'color background-color font-size font-weight',
|
|
||||||
// Table configuration
|
|
||||||
table_default_styles: {
|
|
||||||
width: '100%'
|
|
||||||
},
|
|
||||||
table_default_attributes: {
|
|
||||||
border: '1'
|
|
||||||
},
|
|
||||||
// Code configuration
|
|
||||||
codesample_languages: [
|
|
||||||
{ text: 'HTML/XML', value: 'markup' },
|
|
||||||
{ text: 'JavaScript', value: 'javascript' },
|
|
||||||
{ text: 'CSS', value: 'css' },
|
|
||||||
{ text: 'PHP', value: 'php' },
|
|
||||||
{ text: 'Python', value: 'python' },
|
|
||||||
{ text: 'Java', value: 'java' },
|
|
||||||
{ text: 'C', value: 'c' },
|
|
||||||
{ text: 'C++', value: 'cpp' }
|
|
||||||
],
|
|
||||||
// ...feature config
|
|
||||||
...featureConfig,
|
|
||||||
// Custom toolbar if provided
|
|
||||||
...(toolbar && { toolbar })
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`tinymce-editor-container ${className}`}>
|
|
||||||
<Editor
|
|
||||||
onInit={handleEditorInit}
|
|
||||||
initialValue={initialData}
|
|
||||||
onEditorChange={handleEditorChange}
|
|
||||||
disabled={disabled}
|
|
||||||
apiKey={process.env.NEXT_PUBLIC_TINYMCE_API_KEY}
|
|
||||||
init={editorConfig}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Status bar */}
|
|
||||||
{isEditorLoaded && (
|
|
||||||
<div className="text-xs text-gray-500 mt-2 flex items-center justify-between">
|
|
||||||
<div className="flex items-center space-x-4">
|
|
||||||
<span>
|
|
||||||
{autoSave && !readOnly ? 'Auto-save enabled' : 'Read-only mode'}
|
|
||||||
</span>
|
|
||||||
{lastSaved && autoSave && !readOnly && (
|
|
||||||
<span>• Last saved: {lastSaved.toLocaleTimeString()}</span>
|
|
||||||
)}
|
|
||||||
<span>• {wordCount} characters</span>
|
|
||||||
</div>
|
|
||||||
<span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">
|
|
||||||
{features} mode
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Performance indicator */}
|
|
||||||
<div className="text-xs text-gray-400 mt-1">
|
|
||||||
Bundle size: {features === 'basic' ? '~150KB' : features === 'standard' ? '~200KB' : '~300KB'}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default TinyMCEEditor;
|
|
||||||
Loading…
Reference in New Issue