documenting alt text

docs/frontend/javascript/src/lazy-loader.js

@@ -100,7 +100,13 @@ export default function lazyLoader() {
         register () {
           import("light-pen/exports/components/light-preview/light-preview-register.js")
         }
+      },
+      "light-code": {
+        register () {
+          import("light-pen/exports/components/light-code/light-code-register.js")
+        }
       }
+
     },
   }).start();
 }

docs/frontend/styles/overrides/light-pen.css

@@ -22,6 +22,7 @@ light-preview::part(base) {
 light-code::part(code) {
   font-size: 0.85rem;
   padding-top: 4px;
+  padding-bottom: 4px;
   border-top: 1px solid var(--divider-color);
 }
 

docs/src/_documentation/how_tos/17-adding-alt-text-to-images.md

@@ -0,0 +1,44 @@
+---
+title: Adding alt text to images
+permalink: /how-tos/adding-alt-text-to-images/
+---
+
+Adding alt text to "previewable attachments" is quite a challenge. Rhino Editor comes with support built in. It requires patching ActionText, so it is not part of the default experience.
+
+To start, lets configure ActionText to allow us to add the `"alt"` attribute to attachments.
+
+<%= render Alert.new(type: :warning) do %>
+ I have tried using attributes names such as "alt-text", "altText", and "alt_text" but ActionText / ActiveStorage seems to sanitize it away.
+<% end %>
+
+To do configure we can create a file at `config/initializers/actiontext_patch.rb` and add the following contents:
+
+```rb
+# config/initializers/actiontext_patch.rb
+
+attributes = ActionText::TrixAttachment::ATTRIBUTES + ["alt"]
+ActionText::TrixAttachment.const_set("ATTRIBUTES", attributes)
+
+attributes = ActionText::Attachment::ATTRIBUTES + ["alt"]
+ActionText::Attachment.const_set("ATTRIBUTES", attributes)
+```
+
+If this looks funky to you, thats because it is. I filed an issue with Rails about proper `mattr_accessor` support like other Rails modules.
+
+<https://github.com/rails/rails/discussions/54179>
+
+Moving on. Now that ActionText can accept the "alt" attribute, we have to configure our frontend to enable the experimental alt text editor.
+
+To do so we can do the following:
+
+<%- code = capture do -%>
+<rhino-editor experimental-alt-text-editor></rhino-editor>
+<%- end.html_safe -%>
+
+<light-code language="html">
+  <script slot="code" type="text/plain">
+    <%= code %>
+  </script>
+</light-code>
+
+<%= code %>

src/exports/elements/attachment-editor.ts

@@ -1,5 +1,4 @@
 import { css, html, PropertyValues, TemplateResult } from "lit";
-import { live } from "lit/directives/live.js"
 
 import { closeSvgPath, toSvg, warningSvgPath } from "../../internal/icons.js";
 import { toMemorySize } from "../../internal/to-memory-size.js";
@@ -37,7 +36,7 @@ export class AttachmentEditor extends BaseElement {
   /**
    * Whether or not to enable the alt text editor for images on attachments.
    */
-  editableAltText: boolean = true
+  altTextEditor: boolean = false
   altTextDialogOpen: boolean = false;
   altText: string = ""
   imgSrc: string = ""
@@ -455,7 +454,7 @@ export class AttachmentEditor extends BaseElement {
         ${this.closeIcon()}
       </button>
 
-      ${when(this.editableAltText,
+      ${when(this.altTextEditor,
           () => html`
             ${this.renderAltTextButton()}
             ${this.renderAltTextDialog()}

src/exports/elements/tip-tap-editor.ts

@@ -164,12 +164,22 @@ export class TipTapEditor extends TipTapEditorBase {
         reflect: true,
         attribute: "link-dialog-expanded",
       },
+      experimentalAltTextEditor: {
+        type: Boolean,
+        reflect: true,
+        attribute: "experimental-alt-text-editor",
+      },
       linkInputRef: { state: true },
       translations: { state: true },
       __invalidLink__: { state: true, type: Boolean },
     });
   }
 
+  /**
+   * Whether or not to enable the experimental alt text editor.
+   */
+  experimentalAltTextEditor = false;
+
   /**
    * Translations for various aspects of the editor.
    */
@@ -212,6 +222,21 @@ export class TipTapEditor extends TipTapEditorBase {
   }
 
   protected updated(changedProperties: PropertyValues<this>): void {
+    if (changedProperties.has("experimentalAltTextEditor")) {
+      if (this.starterKitOptions.rhinoAttachment !== false) {
+        this.starterKitOptions = {
+          ...this.starterKitOptions,
+          rhinoAttachment: {
+            ...this.starterKitOptions.rhinoAttachment,
+            experimental: {
+              ...(this.starterKitOptions?.rhinoAttachment?.experimental || {}),
+              altTextEditor: this.experimentalAltTextEditor
+            }
+          }
+        }
+      }
+    }
+
     if (!this.hasInitialized) {
       return super.updated(changedProperties);
     }

src/exports/extensions/attachment.ts

@@ -59,6 +59,14 @@ export interface AttachmentOptions {
   fileUploadErrorMessage: string;
   captionPlaceholder: string;
   previewable: boolean;
+
+  experimental: {
+    /**
+     * Whether or not to enable to the experimental alt text editor.
+     */
+    altTextEditor: boolean
+  }
+
   /**
    * A function for determining whether or not to have ProseMirror / TipTap handle an event.
    * return `true` to have ProseMirror ignore it, `false` to have ProseMirror handle it.
@@ -365,6 +373,9 @@ export const Attachment = Node.create<AttachmentOptions>({
       fileUploadErrorMessage: fileUploadErrorMessage,
       captionPlaceholder: captionPlaceholder,
       previewable: false,
+      experimental: {
+        altTextEditor: false
+      },
       shouldStopEvent: (event: Event) => {
           const composedPath = event.composedPath()
           const isInAttachmentEditor = composedPath.find((el) => (el as HTMLElement)?.tagName?.toLowerCase() === "rhino-attachment-editor")
@@ -452,7 +463,7 @@ export const Attachment = Node.create<AttachmentOptions>({
       sgid,
       url,
       src,
-      alt ,
+      alt,
     };
 
     const figure = [
@@ -469,7 +480,7 @@ export const Attachment = Node.create<AttachmentOptions>({
         "data-trix-attributes": JSON.stringify({
           caption,
           ...(canPreview(previewable, contentType)
-            ? { alt, presentation: "gallery" }
+            ? { presentation: "gallery" }
             : {}),
         }),
       }),
@@ -634,14 +645,14 @@ export const Attachment = Node.create<AttachmentOptions>({
         fileName,
         progress,
         fileSize,
-        alt,
         url,
         src,
         width,
         height,
         caption,
         previewable,
         loadingState,
+        alt,
         altTextDialogOpen,
       } = node.attrs as AttachmentAttrs;
 
@@ -650,6 +661,7 @@ export const Attachment = Node.create<AttachmentOptions>({
         content,
         filename: fileName,
         filesize: fileSize,
+        alt,
         height,
         width,
         sgid,
@@ -660,7 +672,7 @@ export const Attachment = Node.create<AttachmentOptions>({
       const isPreviewable = canPreview(previewable, contentType);
 
       const trixAttributes = JSON.stringify({
-        ...(isPreviewable ? { alt, presentation: "gallery" } : {}),
+        ...(isPreviewable ? { presentation: "gallery" } : {}),
         caption,
       });
 
@@ -721,7 +733,7 @@ export const Attachment = Node.create<AttachmentOptions>({
 
       // This is a very simple drag handler. This allows us to drag non-previewable nodes.
       // https://discuss.prosemirror.net/t/dragndrop-a-drag-handle-element/4563
-      const handleMouseDown = (e: MouseEvent) => {
+      const handleMouseDown = (_e: MouseEvent) => {
         // We need to give this a second just so we dont mess with "click" behavior.
         mouseTimeout = setTimeout(() => {
           mouseIsDown = true;
@@ -814,6 +826,7 @@ export const Attachment = Node.create<AttachmentOptions>({
             .removeFigure=${removeFigure}
             .setNodeAttributes=${setNodeAttributes}
             .altTextDialogOpen=${altTextDialogOpen}
+            .altTextEditor=${Boolean(this.options.experimental.altTextEditor)}
             alt-text=${alt}
           >
           </rhino-attachment-editor>

tests/rails/app/views/posts/_form.html.erb

@@ -30,6 +30,7 @@
         id="main-tip-tap-editor"
         data-blob-url-template="<%= rails_service_blob_url(":signed_id", ":filename") %>"
         data-direct-upload-url="<%= rails_direct_uploads_url %>"
+        experimental-alt-text-editor
       >
         <%# <button type="button" slot="bold-button" data-role="toolbar-item">Bold</button> %>
         <%# <button type="button" slot="italic-button" data-role="toolbar-item">Italics</button> %>
@@ -58,6 +59,7 @@
         <rhino-editor
           style="margin-top: 2rem;"
           input="trix-tip-tap-mirror"
+          experimental-alt-text-editor
           data-blob-url-template="<%= rails_service_blob_url(":signed_id", ":filename") %>"
           data-direct-upload-url="<%= rails_direct_uploads_url %>"
           data-controller="tip-tap-mirror"

tests/rails/config/initializers/actiontext_patch.rb

@@ -1,4 +1,6 @@
 # config/initializers/actiontext_patch.rb
+
+# For some reason, "alt_text", "altText", and "alt-text" all get stripped. So we just use "alt"
 attributes = ActionText::TrixAttachment::ATTRIBUTES + ["alt"]
 ActionText::TrixAttachment.const_set("ATTRIBUTES", attributes)