fixing attachment galleries (#136)

* fixing attachment galleries

* working on att

* working on fixing

* finishing touches on attachments

* prettier

* prettier

* add changeset

.changeset/three-dolls-flash.md

@@ -0,0 +1,12 @@
+---
+"rhino-editor": patch
+---
+
+- `previewable` attribute is now more consistently applied and checked on attachments.
+- Fixed a bug where attachments were not rendering properly when the raw action-text HTML passed to the editor.
+- Fixed a bug where all attachments were not being properly rendered.
+- Figcaption now jumps to the end of the block when you click on the `figure`
+- `"Add a caption"` will no longer show up on custom attachments.
+- Added a note about custom attachments need an actual content-type unlike Trix.
+- Added a small amount of `margin-top` to `figcaption` to match Trix.
+- `toMemorySize` now does not return decimales for KB / MB sizes. This is to align with Trix.

docs/src/_documentation/references/01-why-rhino-editor.md

@@ -3,7 +3,7 @@ title: Why Rhino Editor?
 permalink: /references/why-rhino-editor/
 ---
 
-Rhino Editor is intended to be a drop-in replacement for Trix.
+Rhino Editor is intended to be a (mostly) drop-in replacement for Trix.
 The current standard WYSIWYG editor for Rails.
 
 Trix provides a solid foundation to get started with WYSIWYG editing in Rails.

docs/src/_documentation/references/05-differences-from-trix.md

@@ -0,0 +1,47 @@
+---
+title: Differences from Trix
+permalink: /references/differences-from-trix/
+---
+
+<%= render Alert.new(type: "primary") do %>
+  This section is still in progress and incomplete. This will be a running list of differences, features,
+  where Rhino has diverged, etc, from Trix.
+<% end %>
+
+
+## Custom Attachments
+
+Custom Attachments in Rhino Editor must have a `content-type` set on them. To do this, go into the Model you are rendering and do the following:
+
+```rb
+class Mention < ApplicationRecord
+  def attachable_content_type
+    "application/vnd.active_record.mention"
+  end
+end
+```
+
+Or using an `ActiveModel::Model`
+
+```rb
+class Mention
+  include ActiveModel::Model
+  include ActiveModel::Attributes
+  include GlobalID::Identification
+  include ActionText::Attachable
+
+  def attachable_content_type
+    "application/vnd.active_record.mention"
+  end
+end
+```
+
+The reason for this is because sometimes you may want to render an ActiveStorage attachment from your server into
+Rhino Editor, but don't want it to go through the default image processing, for example, Mentions.
+
+This is an active choice to break backwards compatibility, but it's intended to allow for more powerful
+interactions with custom extensions on TipTap.
+
+For more context, check out this issue:
+
+<https://github.com/KonnorRogers/rhino-editor/pull/112>

src/exports/attachment-manager.ts

@@ -20,6 +20,7 @@ export interface AttachmentManagerAttributes {
   url?: Maybe<string>;
   width?: Maybe<number>;
   height?: Maybe<number>;
+  previewable?: Maybe<boolean>;
 }
 
 /**
@@ -49,6 +50,8 @@ export class AttachmentManager implements AttachmentManagerAttributes {
       url: null,
       ...obj,
     };
+
+    this.attributes.previewable = this.isPreviewable;
   }
 
   setUploadProgress(progress: number): void {
@@ -71,6 +74,7 @@ export class AttachmentManager implements AttachmentManagerAttributes {
       this.setNodeMarkup({
         sgid: this.attributes.sgid,
         content: this.attributes.content,
+        previewable: this.isPreviewable,
       });
 
       return;
@@ -82,14 +86,7 @@ export class AttachmentManager implements AttachmentManagerAttributes {
     if (!obj.url) {
       return;
     }
-
-    const isPreviewable = (
-      this.constructor as unknown as typeof AttachmentManager
-    ).isPreviewable;
-
-    const contentType = this.contentType;
-
-    if (contentType && isPreviewable(contentType)) {
+    if (this.isPreviewable) {
       /** This preloads the image so we don't show a big flash. */
       const image = new Image();
 
@@ -107,6 +104,7 @@ export class AttachmentManager implements AttachmentManagerAttributes {
           width: this.attributes.width,
           height: this.attributes.height,
           contentType: this.contentType,
+          previewable: this.isPreviewable,
         });
         image.remove();
       };
@@ -120,6 +118,7 @@ export class AttachmentManager implements AttachmentManagerAttributes {
       sgid: this.attributes.sgid,
       url: this.attributes.url,
       contentType: this.contentType,
+      previewable: this.isPreviewable,
     });
   }
 

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

@@ -502,11 +502,15 @@ export class TipTapEditorBase extends BaseElement {
       }
     });
 
-    doc.querySelectorAll("figure .attachment__name").forEach((el) => {
-      if (el.textContent?.includes(" · ") === false) return;
-
-      el.insertAdjacentText("beforeend", " · ");
-    });
+    doc
+      .querySelectorAll(
+        "figure :not(.attachment__caption--edited) .attachment__name",
+      )
+      .forEach((el) => {
+        if (el.textContent?.includes(" · ") === false) return;
+
+        el.insertAdjacentText("beforeend", " · ");
+      });
 
     const body = doc.querySelector("body");