113 lines
3.3 KiB
JavaScript
113 lines
3.3 KiB
JavaScript
// 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;
|