@cyberyozh/text-editor 0.3.1 → 0.3.2

package/dist/styles/index.css

@@ -563,6 +563,35 @@
   background: var(--ui-secondary-bg);
   color: var(--ui-text-primary);
 }
+.image-dialog-error {
+  position: relative;
+  margin-bottom: 16px;
+  padding: 8px 12px;
+  border: 1px solid var(--ui-error-border);
+  border-radius: 4px;
+  background-color: var(--ui-error-bg);
+  color: var(--ui-error-text);
+  font-size: 13px;
+}
+.image-dialog-error-clear-button {
+  display: flex;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+}
+.image-dialog-error-clear-button svg {
+  width: 14px;
+  height: 14px;
+  color: var(--ui-error-text);
+}
 
 /* src/styles/components.css */
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyberyozh/text-editor",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Rich text editor library based on Tiptap for CyberYozh",
   "author": "CyberYozh",
   "license": "MIT",

package/src/editor/dialogs/image-dialog/image-dialog.css

@@ -100,3 +100,35 @@
   background: var(--ui-secondary-bg);
   color: var(--ui-text-primary);
 }
+
+.image-dialog-error {
+  position: relative;
+  margin-bottom: 16px;
+  padding: 8px 12px;
+  border: 1px solid var(--ui-error-border);
+  border-radius: 4px;
+  background-color: var(--ui-error-bg);
+  color: var(--ui-error-text);
+  font-size: 13px;
+}
+
+.image-dialog-error-clear-button {
+  display: flex;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.image-dialog-error-clear-button svg {
+  width: 14px;
+  height: 14px;
+  color: var(--ui-error-text);
+}

package/src/editor/dialogs/image-dialog/image-dialog.tsx

@@ -90,13 +90,26 @@ export const ImageDialog = ({
     height: constrainedDimensions.height,
   });
 
+  const [fileUploadError, setFileUploadError] = useState<Error | null>(null);
+
   const handleSelectFile = (file: File | undefined) => {
+    setFileUploadError(null);
+
     if (!file) return;
 
+    if (!file.type.startsWith('image/')) {
+      setFileUploadError(new Error(translations.imageDialog.invalidFileType));
+      return;
+    }
+
     const imageUrl = URL.createObjectURL(file);
     const img = new Image();
     img.src = imageUrl;
 
+    img.onerror = () => {
+      setFileUploadError(new Error(translations.imageDialog.invalidFileType));
+    };
+
     img.onload = () => {
       const naturalWidth = img.width;
       const naturalHeight = img.height;
@@ -189,6 +202,7 @@ export const ImageDialog = ({
     if (!formState.file) return;
 
     setIsUploading(true);
+
     try {
       const result = await uploadHandler(formState.file);
 
@@ -204,6 +218,8 @@ export const ImageDialog = ({
       });
 
       handleClose();
+    } catch (error) {
+      setFileUploadError(error instanceof Error ? error : new Error(translations.imageDialog.unknownError));
     } finally {
       setIsUploading(false);
     }
@@ -223,7 +239,9 @@ export const ImageDialog = ({
     handleClose();
   };
 
-  const handleSave = mode === "edit" ? handleEditImage : handleAddImage;
+  const isEditMode = mode === "edit";
+  const canSave = isEditMode || Boolean(formState.file);
+  const handleSave = isEditMode ? handleEditImage : handleAddImage;
 
   const handleClose = () => {
     clearImageFormFields();
@@ -315,6 +333,19 @@ export const ImageDialog = ({
           )}
         </div>
       </div>
+      {fileUploadError && (
+        <div className="image-dialog-error">
+          {fileUploadError.message || translations.imageDialog.unknownError}
+          <button
+            type="button"
+            className="image-dialog-error-clear-button"
+            onClick={() => setFileUploadError(null)}
+            aria-label={translations.imageDialog.clearError}
+          >
+            <TiptapX />
+          </button>
+        </div>
+      )}
       <div className="image-dialog-actions">
         <Button
           type="button"
@@ -328,6 +359,7 @@ export const ImageDialog = ({
           isLoading={isUploading}
           type="button"
           onClick={handleSave}
+          disabled={!canSave}
         >
           {saveButtonText}
         </Button>

package/src/editor/handlers/insertion-handlers.ts

@@ -17,11 +17,10 @@ export function useInsertionHandlers(imageHandlers?: ImageHandlers) {
   }, [insertedImage, activeDialog]);
 
   function genericInsertionHandler(file: File | undefined, event: Event) {
-    if (!file || !file.type.startsWith("image/")) return;
-
     event.preventDefault();
     event.stopPropagation();
 
+    if (!file || !file.type.startsWith("image/")) return;
     if (!imageHandlers?.upload) return;
 
     setInsertedImage(file);

package/src/translations/en.json

@@ -112,7 +112,10 @@
     "captionLabel": "Image caption",
     "captionPlaceholder": "Description under image...",
     "save": "Save",
-    "add": "Add"
+    "add": "Add",
+    "invalidFileType": "File is not an image",
+    "unknownError": "Unknown error",
+    "clearError": "Clear error"
   },
   "videoUpload": {
     "title": "Add video",

package/src/translations/ru.json

@@ -112,7 +112,10 @@
     "captionLabel": "Подпись к изображению",
     "captionPlaceholder": "Описание под изображением...",
     "save": "Сохранить",
-    "add": "Добавить"
+    "add": "Добавить",
+    "invalidFileType": "Файл не является изображением",
+    "unknownError": "Неизвестная ошибка",
+    "clearError": "Сбросить ошибку"
   },
   "videoUpload": {
     "title": "Добавить видео",