feat: redesign insert image modal with URL embed, caption, and link options

public/locales/en/upload-image-modal.json

@@ -1,16 +1,37 @@
 {
-  "title": "Upload Image",
+  "title": "Insert Image",
+  "imageSource": "Image source — upload a file or embed from URL",
   "dimensions": "Dimensions",
   "fileSize": "File Size",
   "altText": "Alt Text",
-  "altTextPlaceholder": "Enter the alt text for the image",
+  "altTextPlaceholder": "Enter a description of the image content",
   "cancel": "Cancel",
   "confirm": "Confirm",
-  "chooseFile": "Choose File",
+  "chooseFile": "Choose File to Upload",
   "imagePreview": "Image Preview",
-  "replaceImage": "Replace Image",
-  "required": "Required",
+  "removeImage": "Remove Image",
+  "optional": "(Optional)",
   "altTextRequired": "Alt text is required",
-  "modalDescription": "Upload an image to add it to your document. You can replace an existing image by uploading a new one.",
-  "fileSizeExceeds": "File size exceeds {{maxSize}} MB"
+  "dropTitle": "Drag & drop to upload",
+  "dropMeta": "Max size: {{maxSize}}MB  Recommended: 1200 x 800 px  Formats: jpg/jpeg, png",
+  "uploadFailed": "Image upload failed",
+  "uploadFailedHint": "Drop another file or embed from a URL",
+  "announceEmbedded": "Image embedded: {{url}}",
+  "announceUploadFailed": "Image upload failed. File size limit: {{maxSize}}MB. Supported formats: jpg/jpeg, png",
+  "announceEmbedFailed": "Image embed failed. Please check the URL",
+  "embedFromUrl": "Embed Image from URL",
+  "embedHint": "No file size limit. Recommended for large images.",
+  "embedUrlPlaceholder": "Enter image URL",
+  "embed": "Embed",
+  "embedLoadFailed": "Image failed to load",
+  "embedLoadFailedHint": "Check the URL or upload a file instead",
+  "caption": "Image Caption",
+  "captionPlaceholder": "Enter a caption to display below the image",
+  "externalLink": "External Link",
+  "noLink": "No Link",
+  "withLink": "With Link",
+  "targetUrl": "Link URL",
+  "targetUrlPlaceholder": "Enter the URL to open when clicking the image",
+  "targetUrlRequired": "Link URL is required",
+  "targetUrlInvalid": "Please enter a valid URL (e.g. https://example.com)"
 }

public/locales/zh-TW/upload-image-modal.json

@@ -1,17 +1,37 @@
 {
-  "title": "上傳圖片",
-  "dimensions": "尺寸",
+  "title": "插入圖片",
+  "imageSource": "圖片來源（選擇上傳檔案或嵌入連結）",
+  "dimensions": "檔案尺寸",
   "fileSize": "檔案大小",
   "altText": "替代文字",
-  "altTextPlaceholder": "輸入圖片的替代文字",
+  "altTextPlaceholder": "請輸入描述圖片內容的文字",
   "cancel": "取消",
   "confirm": "確認",
-  "chooseFile": "選擇檔案",
+  "chooseFile": "選擇檔案上傳",
   "imagePreview": "圖片預覽",
   "removeImage": "移除圖片",
-  "modalDescription": "在此上傳圖片並添加替代文字描述",
-  "replaceImage": "替換圖片",
-  "required": "必填",
+  "optional": "(選填)",
   "altTextRequired": "請輸入替代文字",
-  "fileSizeExceeds": "檔案大小超過 {{maxSize}} MB"
+  "dropTitle": "拖曳檔案上傳",
+  "dropMeta": "大小限制：{{maxSize}}MB　建議尺寸：1200 x 800 px　支援格式：jpg/jpeg, png",
+  "uploadFailed": "圖片上傳失敗",
+  "uploadFailedHint": "請重新拖曳上傳或改以連結嵌入",
+  "announceEmbedded": "已嵌入圖片：{{url}}",
+  "announceUploadFailed": "圖片上傳失敗。檔案大小限制：{{maxSize}}MB，支援格式：jpg/jpeg, png",
+  "announceEmbedFailed": "圖片嵌入失敗，請檢查嵌入連結",
+  "embedFromUrl": "從連結嵌入圖片",
+  "embedHint": "無檔案大小限制，如有大型圖檔建議使用連結嵌入",
+  "embedUrlPlaceholder": "請輸入圖片連結網址",
+  "embed": "嵌入",
+  "embedLoadFailed": "圖片嵌入失敗",
+  "embedLoadFailedHint": "請檢查連結或改以檔案上傳",
+  "caption": "圖片說明",
+  "captionPlaceholder": "請輸入顯示於圖片下方的上下文說明",
+  "externalLink": "圖片外連連結",
+  "noLink": "不含連結",
+  "withLink": "含連結",
+  "targetUrl": "外連網址",
+  "targetUrlPlaceholder": "請輸入點擊圖片後開啟的網址",
+  "targetUrlRequired": "外連網址為必填",
+  "targetUrlInvalid": "請輸入有效的網址（例如：https://example.com）"
 }

src/components/edit-icons-tab.js

@@ -52,15 +52,23 @@ const EditIconsTab = ({ insertLatex, addImageToExport }) => {
   );
 
   const handleImageConfirm = useCallback(
-    (file, altText) => {
-      const fileID = generateUniqueId();
+    ({ file, sourceUrl, altText, display, targetUrl }) => {
+      let source;
+      if (file) {
+        const fileID = generateUniqueId();
+        source = fileID;
+        const fileType = file.type.split('/')[1];
+        addImageToExport(fileID, fileType, file);
+      } else {
+        source = sourceUrl;
+      }
+      const displayPart = display ? `[[${display}]]` : '';
+      const targetPart = targetUrl ? `((${targetUrl}))` : '';
       insertLatex({
         id: 'insert_image_file',
-        latex: `![${altText}](${fileID})`,
+        latex: `![${altText}]${displayPart}(${source})${targetPart}`,
         offset: -1,
       });
-      const fileType = file.type.split('/')[1];
-      addImageToExport(fileID, fileType, file);
     },
     [insertLatex, addImageToExport]
   );