peter/tvone
1
0
Fork 0
mirror of https://github.com/PeterMaquiran/tvone.git synced 2026-04-18 07:17:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

add tiny
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Peter Maquiran
2026-04-15 15:14:34 +01:00
parent 1aceeafd72
commit 006305ca3f
3 changed files with 85 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/create-news/page.tsx
+65 -22
View File
@@ -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">
package.json
+1
View File
@@ -10,6 +10,7 @@
},
"dependencies": {
"@react-oauth/google": "^0.13.5",
"@tinymce/tinymce-react": "^6.3.0",
"framer-motion": "^12.38.0",
"lucide-react": "^1.8.0",
"next": "16.2.1",
pnpm-lock.yaml
Generated
+19
View File
@@ -11,6 +11,9 @@ importers:
'@react-oauth/google':
specifier: ^0.13.5
version: 0.13.5(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
'@tinymce/tinymce-react':
specifier: ^6.3.0
version: 6.3.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
framer-motion:
specifier: ^12.38.0
version: 12.38.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -550,6 +553,16 @@ packages:
'@tailwindcss/postcss@4.2.2':
resolution: {integrity: sha512-n4goKQbW8RVXIbNKRB/45LzyUqN451deQK0nzIeauVEqjlI49slUlgKYJM2QyUzap/PcpnS7kzSUmPb1sCRvYQ==}
'@tinymce/tinymce-react@6.3.0':
resolution: {integrity: sha512-E++xnn0XzDzpKr40jno2Kj7umfAE6XfINZULEBBeNjTMvbACWzA6CjiR6V8eTDc9yVmdVhIPqVzV4PqD5TZ/4g==}
peerDependencies:
react: ^19.0.0 || ^18.0.0 || ^17.0.1 || ^16.7.0
react-dom: ^19.0.0 || ^18.0.0 || ^17.0.1 || ^16.7.0
tinymce: ^8.0.0 || ^7.0.0 || ^6.0.0 || ^5.5.1
peerDependenciesMeta:
tinymce:
optional: true
'@tybys/wasm-util@0.10.1':
resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
@@ -2455,6 +2468,12 @@ snapshots:
postcss: 8.5.8
tailwindcss: 4.2.2
'@tinymce/tinymce-react@6.3.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
dependencies:
prop-types: 15.8.1
react: 19.2.4
react-dom: 19.2.4(react@19.2.4)
'@tybys/wasm-util@0.10.1':
dependencies:
tslib: 2.8.1