136 lines
3.8 KiB
JavaScript
136 lines
3.8 KiB
JavaScript
// 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;
|