FEATURE: rich editor image toolbar for scale/alt text/delete

renato · renato · commit dd5349765ef4 · 2025-06-27T15:31:01.000-03:00
diff --git a/app/assets/javascripts/discourse/app/static/prosemirror/components/image-node-view.gjs b/app/assets/javascripts/discourse/app/static/prosemirror/components/image-node-view.gjs
@@ -299,6 +299,7 @@ export default class ImageNodeView extends Component {
   selectNode() {
     this.nodeView.dom.classList.add("ProseMirror-selectednode");
     this.showMenu();
+    this.editAltText();
   }
 
   deselectNode() {
diff --git a/app/assets/javascripts/discourse/app/static/prosemirror/components/prosemirror-editor.gjs b/app/assets/javascripts/discourse/app/static/prosemirror/components/prosemirror-editor.gjs
@@ -59,6 +59,13 @@ const AUTOCOMPLETE_KEY_DOWN_SUPPRESS = ["Enter", "Tab"];
  * @property {ProsemirrorEditorArgs} Args
  */
 
+/**
+ * @typedef {Object} GlimmerNodeViewDef
+ * @property {HTMLElement} element The DOM element where the node view will be rendered
+ * @property {any} component The Glimmer component class
+ * @property {Record<string, unknown>} data Data to pass to the component
+ */
+
 /**
  * @extends {Component<ProsemirrorEditorSignature>}
  */
@@ -73,6 +80,7 @@ export default class ProsemirrorEditor extends Component {
   schema = createSchema(this.extensions, this.args.includeDefault);
   view;
 
+  /** @type {TrackedArray<GlimmerNodeViewDef>} */
   glimmerNodeViews = new TrackedArray();
   #lastSerialized;
   /** @type {undefined | (() => void)} */
diff --git a/app/assets/stylesheets/common/rich-editor/rich-editor.scss b/app/assets/stylesheets/common/rich-editor/rich-editor.scss
@@ -269,7 +269,7 @@
 
 .fk-d-menu[data-identifier="composer-image-alt-text"] {
   min-width: calc(100% - 1rem);
-  background-color: rgba(var(--primary-rgb), 0.2);
+  background-color: rgb(var(--primary-rgb), 0.2);
   backdrop-filter: blur(8px);
   color: var(--secondary);
   isolation: auto;
@@ -309,11 +309,6 @@
   display: flex;
   position: relative;
 
-  &.--expanded {
-    display: flex;
-    align-items: center;
-  }
-
   &__field {
     height: 1.5em;
     flex: 1;
@@ -481,10 +476,3 @@ span:focus .fake-cursor {
   position: relative;
   z-index: 1;
 }
-
-.image-alt-text-input {
-  &.--expanded {
-    display: flex;
-    align-items: center;
-  }
-}
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
@@ -2880,6 +2880,12 @@ en:
         aria_label: Alt text for image
         title: "Add image description"
 
+      image_toolbar:
+        alt_text: "Add image description"
+        zoom_out: "Decrease image size"
+        zoom_in: "Increase image size"
+        remove: "Remove image"
+
       image_scale_button: "Scale image to %{percent}%"
       delete_image_button: Delete Image
       toggle_image_grid: Toggle image grid
@@ -3308,7 +3314,7 @@ en:
         hot: "There are no hot topics."
         filter: "There are no topics."
         education:
-          topic_tracking_preferences: "You can view and change your new topic tracking settings in <a href=\"%{basePath}/my/preferences/tracking\">your preferences</a>."
+          topic_tracking_preferences: 'You can view and change your new topic tracking settings in <a href="%{basePath}/my/preferences/tracking">your preferences</a>.'
           unread: "Nothing left unread...impressive!"
           new_new: "Nothing new at the moment...check back soon!"
           new: "Nothing new at the moment...check back soon!"
diff --git a/lib/freedom_patches/propshaft_patches.rb b/lib/freedom_patches/propshaft_patches.rb
@@ -12,20 +12,18 @@ def already_digested?
   Module.new do
     def compute_asset_path(path, options = {})
       attempts = 0
-      begin
-        super
-      rescue Propshaft::MissingAssetError => e
-        if Rails.env.development?
-          # Ember-cli might've replaced the assets
-          Rails.application.assets.load_path.send(:clear_cache)
-          attempts += 1
-          retry if attempts < 3
-        elsif Rails.env.test?
-          # Assets might not be compiled in test mode. Just return a fake path
-          "/assets/#{path.sub(".", "-aaaaaaaa.")}"
-        else
-          raise e
-        end
+      super
+    rescue Propshaft::MissingAssetError => e
+      if Rails.env.development?
+        # Ember-cli might've replaced the assets
+        Rails.application.assets.load_path.send(:clear_cache)
+        attempts += 1
+        retry if attempts < 3
+      elsif Rails.env.test?
+        # Assets might not be compiled in test mode. Just return a fake path
+        "/assets/#{path.sub(".", "-aaaaaaaa.")}"
+      else
+        raise e
       end
     end
   end,

Original file line number	Diff line number	Diff line change
`@@ -299,6 +299,7 @@ export default class ImageNodeView extends Component {`
`299`	`299`	`selectNode() {`
`300`	`300`	`this.nodeView.dom.classList.add("ProseMirror-selectednode");`
`301`	`301`	`this.showMenu();`
	`302`	`+ this.editAltText();`
`302`	`303`	`}`
`303`	`304`
`304`	`305`	`deselectNode() {`