mediahub-fe/config/tinymce.ts

122 lines
3.6 KiB
TypeScript

// config/tinymce.ts
export const TINYMCE_CONFIG = {
// API Key - Get from https://www.tiny.cloud/auth/signup/
API_KEY: process.env.NEXT_PUBLIC_TINYMCE_API_KEY || '',
// Default configuration
DEFAULT_CONFIG: {
height: 400,
menubar: false,
branding: false,
elementpath: false,
resize: false,
statusbar: true,
// 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: 368px;
}
.mce-content-body:focus {
outline: none;
}
`,
// 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'
}
},
// Feature-based configurations
FEATURES: {
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'
}
},
// Code sample languages
CODE_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' },
{ text: 'TypeScript', value: 'typescript' },
{ text: 'React JSX', value: 'jsx' }
]
};
// Helper function to get complete configuration
export const getTinyMCEConfig = (featureLevel: 'basic' | 'standard' | 'full' = 'standard', customConfig = {}) => {
return {
...TINYMCE_CONFIG.DEFAULT_CONFIG,
...TINYMCE_CONFIG.FEATURES[featureLevel],
...customConfig
};
};
// Helper function to check if API key is configured
export const isTinyMCEConfigured = () => {
return !!TINYMCE_CONFIG.API_KEY;
};