Add parts to attachment editor, fix blank alt text (#251)

* add parts * remove bug of empty alt text * add additional parts to alt text editor * prettier
KonnorRogers · Jan 30, 2025 · 4c19e0f · 4c19e0f
1 parent 2c8afbe
commit 4c19e0f
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 15 deletions.
diff --git a/.changeset/red-clocks-help.md b/.changeset/red-clocks-help.md
@@ -0,0 +1,5 @@
+---
+"rhino-editor": patch
+---
+
+Fix a bug with alt text editor where you could not change it to empty.
diff --git a/.changeset/stupid-icons-glow.md b/.changeset/stupid-icons-glow.md
@@ -0,0 +1,5 @@
+---
+"rhino-editor": patch
+---
+
+Add additional parts onto alt text editor elements
diff --git a/src/exports/elements/attachment-editor.ts b/src/exports/elements/attachment-editor.ts
@@ -420,6 +420,24 @@ export class AttachmentEditor extends BaseElement {
         outline: 2px solid var(--rhino-button-active-border-color);
         outline-offset: 3px;
       }
+
+      [part~="dialog-heading"] {
+        font-size: 1.5rem;
+        margin: 0;
+      }
+
+      [part~="dialog-heading-wrapper"] {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        margin-bottom: 8px;
+      }
+
+      [part~="alt-text-editor-label"] {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+      }
     `;
   }
 
@@ -536,10 +554,8 @@ export class AttachmentEditor extends BaseElement {
           }
         }}
       >
-        <div
-          style="display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px;"
-        >
-          <h2 style="font-size: 1.5rem; margin: 0;">Add alt text</h2>
+        <div part="dialog-heading-wrapper">
+          <h2 part="dialog-heading">Add alt text</h2>
           <button
             part="button dialog-close-button"
             @mousedown=${(e: Event) => e.preventDefault()}
@@ -565,13 +581,9 @@ export class AttachmentEditor extends BaseElement {
           }}
         />
 
-        <label
-          part="alt-text-editor-label"
-          for="alt-text-editor"
-          style="display: flex; justify-content: space-between; align-items: baseline;"
-        >
-          <span> Descriptive alt text </span>
-          <span
+        <label part="alt-text-editor-label" for="alt-text-editor">
+          <span part="alt-text-editor-label-text"> Descriptive alt text </span>
+          <span part="alt-text-editor-label-counter"
             >${this.editorValue?.length || 0} / ${this.altTextMaxLength}</span
           >
         </label>
@@ -613,10 +625,9 @@ export class AttachmentEditor extends BaseElement {
               altTextDialogOpen: this.altTextDialogOpen,
             });
           }}
-          aria-disabled=${this.altText ===
-            this.shadowRoot?.querySelector("textarea")?.value ||
-          (this.editorValue?.length || 0) > this.altTextMaxLength ||
-          (this.editorValue?.length || 0) < this.altTextMinLength}
+          aria-disabled="${(this.editorValue?.length || 0) >
+            this.altTextMaxLength ||
+          (this.editorValue?.length || 0) < this.altTextMinLength}}"
         >
           Save
         </button>

diff --git a/tests/rails/app/views/home/index.html.erb b/tests/rails/app/views/home/index.html.erb
@@ -14,6 +14,7 @@
   <input id="y" type="hidden" name="content">
   <rhino-editor
     input="y"
+    alt-text-editor
     data-blob-url-template="<%= rails_service_blob_path(":signed_id", ":filename") %>"
     data-direct-upload-url="<%= rails_direct_uploads_url %>"
   >