add tiny

app/create-news/page.tsx

@@ -9,12 +9,54 @@ import {
 
 // Importe o componente que criámos (ajuste o caminho se necessário)
 import MultiAspectEditor from '../components/MultiAspectEditor'; 
+import { Editor } from '@tinymce/tinymce-react';
 
 const CreateNewsPage = () => {
+
+    // Configuração do Design do Editor para combinar com seu layout
+    const editorConfig = {
+        height: 500,
+        menubar: false,
+        plugins: [
+          'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
+          'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
+          'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
+        ],
+        // Adicionei 'blockquote' na toolbar
+        toolbar: 'undo redo | blocks | ' +
+          'bold italic forecolor | alignleft aligncenter ' +
+          'alignright alignjustify | bullist numlist | ' +
+          'blockquote link image | removeformat | help',
+        
+        // Customização do aspeto da citação dentro do editor
+        content_style: `
+          body { 
+            font-family: Inter, Helvetica, Arial, sans-serif; 
+            font-size: 14px; 
+            color: #334155; 
+            line-height: 1.6;
+          }
+          blockquote {
+            border-left: 4px solid #2563eb; /* Azul da TVone */
+            padding-left: 1.5rem;
+            color: #475569;
+            font-style: italic;
+            margin: 1.5rem 0;
+            background: #f8fafc;
+            padding: 1rem 1.5rem;
+            border-radius: 0 8px 8px 0;
+          }
+        `,
+        skin: 'oxide',
+        promotion: false, // Remove o botão "Upgrade" do Tiny
+        branding: false,  // Remove o "Powered by Tiny"
+      };
+
   // 1. Estados para o Crop
   const [tempImage, setTempImage] = useState<string | null>(null);
   const [isEditorOpen, setIsEditorOpen] = useState(false);
   const [finalCrops, setFinalCrops] = useState<any>(null); // Guarda os Base64 finais
+  const [content, setContent] = useState('');
   
   const fileInputRef = useRef<HTMLInputElement>(null);
 
@@ -118,28 +160,29 @@ const CreateNewsPage = () => {
           <div className="grid grid-cols-3 gap-8">
             {/* Coluna Principal */}
             <div className="col-span-2 space-y-6">
-              <section className="bg-white rounded-2xl p-6 border border-slate-200 shadow-sm">
-                <label className="block text-xs font-bold uppercase text-slate-400 mb-2">Título do Artigo</label>
-                <input 
-                  type="text" 
-                  placeholder="Insira o título principal da notícia..." 
-                  className="w-full text-xl font-bold border-none focus:ring-0 placeholder:text-slate-300 p-0"
-                />
-                <hr className="my-6 border-slate-100" />
-                <label className="block text-xs font-bold uppercase text-slate-400 mb-2 leading-8">Conteúdo Principal</label>
-                <div className="flex gap-4 mb-4 text-slate-400 border-b border-slate-50 pb-2">
-                  <Type size={18} className="cursor-pointer hover:text-blue-600 transition-colors" />
-                  <ImageIcon size={18} className="cursor-pointer hover:text-blue-600 transition-colors" />
-                  <div className="w-px h-5 bg-slate-200" />
-                  <span className="font-serif font-bold cursor-pointer hover:text-blue-600">B</span>
-                  <span className="italic cursor-pointer hover:text-blue-600">I</span>
-                </div>
-                <textarea 
-                  rows={12}
-                  placeholder="Comece a escrever a sua notícia aqui..."
-                  className="w-full border-none focus:ring-0 resize-none text-slate-700 leading-relaxed p-0"
-                />
-              </section>
+            <section className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
+          {/* Título */}
+          <div className="p-6 pb-0">
+            <label className="block text-xs font-bold uppercase text-slate-400 mb-2">Título do Artigo</label>
+            <input 
+              type="text" 
+              placeholder="Insira o título principal da notícia..." 
+              className="w-full text-xl font-bold border-none focus:ring-0 placeholder:text-slate-300 p-0"
+            />
+            <hr className="my-6 border-slate-100" />
+            <label className="block text-xs font-bold uppercase text-slate-400 mb-2">Conteúdo Principal</label>
+          </div>
+
+          {/* TinyMCE Editor */}
+          <div className="border-t border-slate-50">
+            <Editor
+              apiKey='dmg1hghyf25x09mtg04hik0034yeadt1h6ai2ou68zhdvw11' // Obtenha em tiny.cloud ou use 'no-api-key' para teste
+              init={editorConfig}
+              value={content}
+              onEditorChange={(newContent) => setContent(newContent)}
+            />
+          </div>
+        </section>
 
                 {/* Resumo (Lead) */}
                 <div className="bg-white rounded-2xl p-6 border border-slate-200 shadow-sm">