Update RichTextEditor.tsx
This commit is contained in:
@@ -76,11 +76,11 @@ const RichTextEditor: React.FC<Props> = ({ value, onChange, placeholder, classNa
|
|||||||
e.preventDefault(); // Prevent default button behavior
|
e.preventDefault(); // Prevent default button behavior
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
|
|
||||||
const varName = prompt("Enter variable name (without brackets):", "variable_name");
|
const varName = prompt("Inserisci nome variabile (senza parentesi):", "nome_variabile");
|
||||||
|
|
||||||
if (varName) {
|
if (varName) {
|
||||||
if (isSourceMode) {
|
if (isSourceMode) {
|
||||||
alert("Switch to Visual mode to use the inserter, or type {{name}} manually.");
|
alert("Passa alla modalità Visuale per usare l'inseritore, oppure scrivi {{nome}} manualmente.");
|
||||||
} else {
|
} else {
|
||||||
restoreSelection();
|
restoreSelection();
|
||||||
const text = `{{${varName}}}`;
|
const text = `{{${varName}}}`;
|
||||||
@@ -136,24 +136,24 @@ const RichTextEditor: React.FC<Props> = ({ value, onChange, placeholder, classNa
|
|||||||
onClick={() => setIsSourceMode(!isSourceMode)}
|
onClick={() => setIsSourceMode(!isSourceMode)}
|
||||||
className={`flex items-center gap-1 px-2 py-1.5 rounded text-xs font-medium transition-colors ${isSourceMode ? 'bg-slate-800 text-white' : 'hover:bg-slate-200 text-slate-600'}`}
|
className={`flex items-center gap-1 px-2 py-1.5 rounded text-xs font-medium transition-colors ${isSourceMode ? 'bg-slate-800 text-white' : 'hover:bg-slate-200 text-slate-600'}`}
|
||||||
>
|
>
|
||||||
{isSourceMode ? <><Type size={14} /> Visual</> : <><Code size={14} /> Source</>}
|
{isSourceMode ? <><Type size={14} /> Visuale</> : <><Code size={14} /> Sorgente</>}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{!isSourceMode && (
|
{!isSourceMode && (
|
||||||
<>
|
<>
|
||||||
<ToolbarButton icon={Bold} command="bold" title="Bold" />
|
<ToolbarButton icon={Bold} command="bold" title="Grassetto" />
|
||||||
<ToolbarButton icon={Italic} command="italic" title="Italic" />
|
<ToolbarButton icon={Italic} command="italic" title="Corsivo" />
|
||||||
<ToolbarButton icon={Underline} command="underline" title="Underline" />
|
<ToolbarButton icon={Underline} command="underline" title="Sottolineato" />
|
||||||
<div className="w-px h-4 bg-slate-300 mx-1" />
|
<div className="w-px h-4 bg-slate-300 mx-1" />
|
||||||
<ToolbarButton icon={AlignLeft} command="justifyLeft" title="Align Left" />
|
<ToolbarButton icon={AlignLeft} command="justifyLeft" title="Allinea Sinistra" />
|
||||||
<ToolbarButton icon={AlignCenter} command="justifyCenter" title="Align Center" />
|
<ToolbarButton icon={AlignCenter} command="justifyCenter" title="Allinea Centro" />
|
||||||
<ToolbarButton icon={AlignRight} command="justifyRight" title="Align Right" />
|
<ToolbarButton icon={AlignRight} command="justifyRight" title="Allinea Destra" />
|
||||||
<div className="w-px h-4 bg-slate-300 mx-1" />
|
<div className="w-px h-4 bg-slate-300 mx-1" />
|
||||||
<ToolbarButton icon={List} command="insertUnorderedList" title="Bullet List" />
|
<ToolbarButton icon={List} command="insertUnorderedList" title="Elenco Puntato" />
|
||||||
<ToolbarButton icon={ListOrdered} command="insertOrderedList" title="Numbered List" />
|
<ToolbarButton icon={ListOrdered} command="insertOrderedList" title="Elenco Numerato" />
|
||||||
<div className="w-px h-4 bg-slate-300 mx-1" />
|
<div className="w-px h-4 bg-slate-300 mx-1" />
|
||||||
<ToolbarButton icon={Eraser} command="removeFormat" title="Clear Formatting" />
|
<ToolbarButton icon={Eraser} command="removeFormat" title="Rimuovi Formattazione" />
|
||||||
|
|
||||||
<div className="flex-1" />
|
<div className="flex-1" />
|
||||||
|
|
||||||
@@ -161,10 +161,10 @@ const RichTextEditor: React.FC<Props> = ({ value, onChange, placeholder, classNa
|
|||||||
type="button"
|
type="button"
|
||||||
onClick={insertVariable}
|
onClick={insertVariable}
|
||||||
className="flex items-center gap-1 px-2 py-1.5 rounded bg-brand-50 text-brand-600 hover:bg-brand-100 text-xs font-medium border border-brand-200"
|
className="flex items-center gap-1 px-2 py-1.5 rounded bg-brand-50 text-brand-600 hover:bg-brand-100 text-xs font-medium border border-brand-200"
|
||||||
title="Insert Variable Placeholder"
|
title="Inserisci Variabile"
|
||||||
>
|
>
|
||||||
<Braces size={14} />
|
<Braces size={14} />
|
||||||
Variable
|
Variabile
|
||||||
</button>
|
</button>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
@@ -195,7 +195,7 @@ const RichTextEditor: React.FC<Props> = ({ value, onChange, placeholder, classNa
|
|||||||
|
|
||||||
{!value && !isSourceMode && (
|
{!value && !isSourceMode && (
|
||||||
<div className="absolute top-4 left-4 text-slate-400 pointer-events-none select-none">
|
<div className="absolute top-4 left-4 text-slate-400 pointer-events-none select-none">
|
||||||
{placeholder || "Start typing..."}
|
{placeholder || "Inizia a scrivere..."}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user