Add Link button to brief and source editors; improve auto-linking (Markdown, URLs, www)

client/src/pages/TutorialTasks.tsx

@@ -115,17 +115,47 @@ const TutorialTasks: React.FC = () => {
   // Basic inline formatting helpers (bold/italic via simple markdown) for weeks 4–6
   const renderFormatted = (text: string) => {
     const escape = (s: string) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    // Auto-linker: supports [label](url), plain URLs, and www.*
     const html = escape(text)
       // Markdown-style links: [label](https://example.com)
       .replace(/\[([^\]]+?)\]\((https?:\/\/[^\s)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>')
-      // Plain URLs: https://example.com
+      // Plain URLs with protocol
       .replace(/(https?:\/\/[^\s<]+[^\s<\.)])/g, '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>')
+      // www.* domains (prepend https://)
+      .replace(/(^|\s)(www\.[^\s<]+[^\s<\.)])/g, (_, p1, p2) => `${p1}<a href="https://${p2}" target="_blank" rel="noopener noreferrer">${p2}</a>`)
       .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
       .replace(/\*(.+?)\*/g, '<em>$1</em>')
       .replace(/\n/g, '<br/>');
     return <span dangerouslySetInnerHTML={{ __html: html }} />;
   };
 
+  const applyLinkFormat = (
+    elementId: string,
+    current: string,
+    setValue: (v: string) => void
+  ) => {
+    const urlInput = window.prompt('Enter URL (e.g., https://example.com):');
+    if (!urlInput) return;
+    const url = /^https?:\/\//i.test(urlInput) ? urlInput : `https://${urlInput}`;
+    const el = document.getElementById(elementId) as HTMLTextAreaElement | null;
+    if (!el) {
+      setValue(`${current}[link](${url})`);
+      return;
+    }
+    const start = el.selectionStart ?? current.length;
+    const end = el.selectionEnd ?? current.length;
+    const before = current.slice(0, start);
+    const selection = current.slice(start, end) || 'link';
+    const after = current.slice(end);
+    setValue(`${before}[${selection}](${url})${after}`);
+    // Restore focus and selection
+    setTimeout(() => {
+      el.focus();
+      const newPos = before.length + selection.length + 4 + url.length + 2; // rough caret placement
+      try { el.setSelectionRange(newPos, newPos); } catch {}
+    }, 0);
+  };
+
   const applyInlineFormat = (
     elementId: string,
     current: string,
@@ -987,6 +1017,7 @@ const TutorialTasks: React.FC = () => {
                 <div className="flex items-center justify-end space-x-2 mb-2">
                   <button onClick={() => applyInlineFormat('tutorial-brief-input', editForm.translationBrief, v => setEditForm({ ...editForm, translationBrief: v }), '**')} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded">B</button>
                   <button onClick={() => applyInlineFormat('tutorial-brief-input', editForm.translationBrief, v => setEditForm({ ...editForm, translationBrief: v }), '*')} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded italic">I</button>
+                  <button onClick={() => applyLinkFormat('tutorial-brief-input', editForm.translationBrief || '', v => setEditForm({ ...editForm, translationBrief: v }))} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded">Link</button>
                 </div>
               <textarea id="tutorial-brief-input"
                 value={editForm.translationBrief}
@@ -1029,6 +1060,7 @@ const TutorialTasks: React.FC = () => {
                   <div className="flex items-center justify-end space-x-2">
                     <button onClick={() => applyInlineFormat('tutorial-brief-input', editForm.translationBrief, v => setEditForm({ ...editForm, translationBrief: v }), '**')} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded">B</button>
                     <button onClick={() => applyInlineFormat('tutorial-brief-input', editForm.translationBrief, v => setEditForm({ ...editForm, translationBrief: v }), '*')} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded italic">I</button>
+                    <button onClick={() => applyLinkFormat('tutorial-brief-input', editForm.translationBrief || '', v => setEditForm({ ...editForm, translationBrief: v }))} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded">Link</button>
                   </div>
                   <textarea
                     id="tutorial-brief-input"
@@ -1088,6 +1120,7 @@ const TutorialTasks: React.FC = () => {
                       <div className="flex items-center justify-end space-x-2 mb-2">
                         <button onClick={() => applyInlineFormat('tutorial-newtask-input', editForm.content, v => setEditForm({ ...editForm, content: v }), '**')} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded">B</button>
                         <button onClick={() => applyInlineFormat('tutorial-newtask-input', editForm.content, v => setEditForm({ ...editForm, content: v }), '*')} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded italic">I</button>
+                        <button onClick={() => applyLinkFormat('tutorial-newtask-input', editForm.content || '', v => setEditForm({ ...editForm, content: v }))} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded">Link</button>
                       </div>
                       <textarea
                         id="tutorial-newtask-input"
@@ -1441,6 +1474,7 @@ const TutorialTasks: React.FC = () => {
                         <div className="flex items-center justify-end space-x-2 mb-2">
                           <button onClick={() => applyInlineFormat('tutorial-newtask-input', editForm.content, v => setEditForm({ ...editForm, content: v }), '**')} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded">B</button>
                           <button onClick={() => applyInlineFormat('tutorial-newtask-input', editForm.content, v => setEditForm({ ...editForm, content: v }), '*')} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded italic">I</button>
+                          <button onClick={() => applyLinkFormat('tutorial-newtask-input', editForm.content || '', v => setEditForm({ ...editForm, content: v }))} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded">Link</button>
                         </div>
                         <textarea
                           id="tutorial-newtask-input"
@@ -1576,6 +1610,7 @@ const TutorialTasks: React.FC = () => {
                                     <div className="flex items-center justify-end space-x-2 mb-2">
                                       <button onClick={() => applyInlineFormat(`tutorial-translation-${task._id}`, translationText[task._id] || '', v => setTranslationText({ ...translationText, [task._id]: v }), '**')} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded">B</button>
                                       <button onClick={() => applyInlineFormat(`tutorial-translation-${task._id}`, translationText[task._id] || '', v => setTranslationText({ ...translationText, [task._id]: v }), '*')} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded italic">I</button>
+                                      <button onClick={() => applyLinkFormat(`tutorial-translation-${task._id}`, translationText[task._id] || '', v => setTranslationText({ ...translationText, [task._id]: v }))} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded">Link</button>
                                     </div>
                                       <textarea
                                         id={`tutorial-translation-${task._id}`}
@@ -1769,6 +1804,7 @@ const TutorialTasks: React.FC = () => {
                       <div className="flex items-center justify-end space-x-2 mb-2">
                         <button onClick={() => applyInlineFormat(`tutorial-translation-${task._id}`, translationText[task._id] || '', v => setTranslationText({ ...translationText, [task._id]: v }), '**')} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded">B</button>
                         <button onClick={() => applyInlineFormat(`tutorial-translation-${task._id}`, translationText[task._id] || '', v => setTranslationText({ ...translationText, [task._id]: v }), '*')} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded italic">I</button>
+                        <button onClick={() => applyLinkFormat(`tutorial-translation-${task._id}`, translationText[task._id] || '', v => setTranslationText({ ...translationText, [task._id]: v }))} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded">Link</button>
                       </div>
                       <textarea
                         id={`tutorial-translation-${task._id}`}