fixing figcaption editing (#132)

* fixing figcaption editing

* fixing figcaption editing

* prettier

* fix previews

* fix previews

* prettier

* fix test suite

* fix some testing stuff

* prettier

* fix rhino-attachment-remove-event
gp

* prettier

* more fig caption fixes!!

* prettier

.changeset/kind-buses-kick.md

@@ -0,0 +1,15 @@
+---
+"rhino-editor": patch
+---
+
+- Fixed a bug when inserting text into figcaption causing extra `<p>` tags to appear.
+- Fixed a bug with `white-space: pre-wrap` when figures get rendered in ActionText.
+- Fixed the `<figcaption>` editor to behave more like Trix. On focus, if the caption is empty, it will automatically delete the caption and show the placeholder of "Add a caption".
+- Fixed a bug where the editor would not rebuild if you changed the translations.
+- Fixed a bug when `<figcaption>` had an empty caption you could not select the whole document with `ctrl+a`.
+- Fixed a bug where `<img>` would be inserted in non-previewable attachments.
+- `<figcaption>` now has a `white-space: normal` when rendered in ActionText.
+- Fixed a bug where non-previewable attachments were not able to be dragged.
+- Fixed a bug where stlying of `<figcaption>` placeholder text was not rendering in the correct spot.
+- non-previewable attachments are no longer nested inside of Attachment Galleries.
+- Added `captionPlaceholder` to the list of translations.

src/exports/attachment-manager.ts

@@ -1,6 +1,7 @@
 import { Maybe } from "../types.js";
 import { uuidv4 } from "../internal/uuidv4.js";
 import { EditorView } from "@tiptap/pm/view";
+import { LOADING_STATES } from "./elements/attachment-editor.js";
 import { toDefaultCaption } from "../internal/to-default-caption.js";
 
 export interface AttachmentManagerAttributes {
@@ -52,7 +53,11 @@ export class AttachmentManager implements AttachmentManagerAttributes {
 
   setUploadProgress(progress: number): void {
     if (this.content == null) {
-      this.setNodeMarkup({ progress });
+      this.setNodeMarkup({
+        progress,
+        loadingState:
+          progress >= 100 ? LOADING_STATES.success : LOADING_STATES.loading,
+      });
     }
   }
 
@@ -208,10 +213,26 @@ export class AttachmentManager implements AttachmentManagerAttributes {
     return this.attributes.width;
   }
 
-  get caption(): string {
-    return toDefaultCaption({
-      fileName: this.fileName,
-      fileSize: this.fileSize,
+  get isPreviewable() {
+    const isPreviewable = (
+      this.constructor as unknown as typeof AttachmentManager
+    ).isPreviewable;
+
+    const contentType = this.contentType;
+
+    return isPreviewable(contentType || "");
+  }
+
+  get caption() {
+    const defaultCaption = toDefaultCaption({
+      fileName: this.attributes.fileName,
+      fileSize: this.attributes.fileSize,
     });
+    // We want to set a real caption for non-previewable assets to prevent them from getting cleared out.
+    if (this.isPreviewable) {
+      return defaultCaption;
+    }
+
+    return this.attributes.caption || defaultCaption || "";
   }
 }

src/exports/attachment-upload.ts

@@ -1,6 +1,7 @@
 import { DirectUpload } from "@rails/activestorage";
 import type { Blob, DirectUploadDelegate } from "@rails/activestorage";
 import { AttachmentManager } from "./attachment-manager.js";
+import { LOADING_STATES } from "./elements/attachment-editor.js";
 
 /**
  * An extension of DirectUpload. This is what handles uploading to remote sources
@@ -46,7 +47,7 @@ export class AttachmentUpload implements DirectUploadDelegate {
       if (this.attachment.content == null) {
         this.attachment.setNodeMarkup({
           progress: 0,
-          loadingState: "error",
+          loadingState: LOADING_STATES.error,
         });
       }
 

src/exports/elements/attachment-editor.ts

@@ -22,6 +22,7 @@ export class AttachmentEditor extends BaseElement {
   fileName?: string;
   fileSize?: number;
   progress?: number;
+  showMetadata?: boolean;
   loadingState?: LoadingState;
   fileUploadErrorMessage?: TemplateResult | string;
 
@@ -45,6 +46,11 @@ export class AttachmentEditor extends BaseElement {
       class: { attribute: "class", type: String },
       loadingState: { attribute: "loading-state" },
       fileUploadErrorMessage: { state: true },
+      showMetadata: {
+        attribute: "show-metadata",
+        reflect: true,
+        type: Boolean,
+      },
     };
   }
 
@@ -209,7 +215,7 @@ export class AttachmentEditor extends BaseElement {
       <span
         part="file-metadata"
         class="file-metadata"
-        ?hidden=${!(this.fileName || this.toFileSize())}
+        ?hidden=${!this.showMetadata || !(this.fileName || this.toFileSize())}
       >
         <span class="file-name" part="file-name">${this.fileName}</span>
         <span class="file-size" part="file-size">${this.toFileSize()}</span>

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

@@ -174,7 +174,8 @@ export class TipTapEditorBase extends BaseElement {
   ): void {
     if (
       changedProperties.has("extensions") ||
-      changedProperties.has("starterKitOptions")
+      changedProperties.has("starterKitOptions") ||
+      changedProperties.has("translations")
     ) {
       this.rebuildEditor();
     }

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

@@ -135,13 +135,13 @@ export class TipTapEditor extends TipTapEditorBase {
   constructor() {
     super();
 
-    // Not sure why we need to call super here and not just this.starterKitOptions
     this.starterKitOptions = Object.assign(this.starterKitOptions, {
       rhinoPlaceholder: {
         placeholder: this.translations.placeholder,
       },
       rhinoAttachment: {
         fileUploadErrorMessage: this.translations.fileUploadErrorMessage,
+        captionPlaceholder: this.translations.captionPlaceholder,
       },
     }) as typeof this.starterKitOptions;