prettier

src/exports/attachment-upload.ts

@@ -159,27 +159,27 @@ export class AttachmentUpload implements DirectUploadDelegate {
     });
 
     // TODO: This may create problems for non-images, could use something like an `<object src="<url>">` instead.
-    const template = document.createElement("template")
+    const template = document.createElement("template");
     const obj = document.createElement("object");
-    obj.toggleAttribute("hidden", true)
-    template.append(obj)
+    obj.toggleAttribute("hidden", true);
+    template.append(obj);
 
     obj.onload = () => {
-      template.remove()
+      template.remove();
       this.progress = 100;
       this.setUploadProgress();
       this.element.dispatchEvent(new AttachmentUploadSucceedEvent(this));
       this.element.dispatchEvent(new AttachmentUploadCompleteEvent(this));
     };
 
     obj.onerror = () => {
-      template.remove()
+      template.remove();
       this.handleError();
     };
 
     obj.data = blobUrl;
     // Needs to append to for onerror / onload to fire.
-    document.body.append(template)
+    document.body.append(template);
   }
 
   setUploadProgress() {

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

@@ -16,7 +16,11 @@ import {
   TemplateResult,
 } from "lit";
 
-import { AttachmentUpload, AttachmentUploadCompleteEvent, AttachmentUploadStartEvent } from "../attachment-upload.js";
+import {
+  AttachmentUpload,
+  AttachmentUploadCompleteEvent,
+  AttachmentUploadStartEvent,
+} from "../attachment-upload.js";
 import { AttachmentManager } from "../attachment-manager.js";
 
 import { normalize } from "../styles/normalize.js";
@@ -98,7 +102,7 @@ export class TipTapEditorBase extends BaseElement {
   /**
    * An array of "AttachmentUploads" added via direct upload. Check this for any attachment uploads that have not completed.
    */
-  pendingAttachments: AttachmentUpload[] = []
+  pendingAttachments: AttachmentUpload[] = [];
 
   /**
    * The hidden input to attach to
@@ -392,29 +396,35 @@ export class TipTapEditorBase extends BaseElement {
     this.registerDependencies();
     this.addEventListener(AddAttachmentEvent.eventName, this.handleAttachment);
 
-    this.__addPendingAttachment = this.__addPendingAttachment.bind(this)
-    this.__removePendingAttachment = this.__removePendingAttachment.bind(this)
+    this.__addPendingAttachment = this.__addPendingAttachment.bind(this);
+    this.__removePendingAttachment = this.__removePendingAttachment.bind(this);
 
-    this.addEventListener(AttachmentUploadStartEvent.eventName, this.__addPendingAttachment)
-    this.addEventListener(AttachmentUploadCompleteEvent.eventName, this.__removePendingAttachment)
+    this.addEventListener(
+      AttachmentUploadStartEvent.eventName,
+      this.__addPendingAttachment,
+    );
+    this.addEventListener(
+      AttachmentUploadCompleteEvent.eventName,
+      this.__removePendingAttachment,
+    );
 
     this.addEventListener("drop", this.handleNativeDrop);
     this.addEventListener("rhino-paste", this.handlePaste);
     this.addEventListener("rhino-file-accept", this.handleFileAccept);
   }
 
-  __addPendingAttachment (e: { attachmentUpload: AttachmentUpload }) {
-    this.pendingAttachments.push(e.attachmentUpload)
+  __addPendingAttachment(e: { attachmentUpload: AttachmentUpload }) {
+    this.pendingAttachments.push(e.attachmentUpload);
   }
 
-  __removePendingAttachment (e: { attachmentUpload: AttachmentUpload }) {
+  __removePendingAttachment(e: { attachmentUpload: AttachmentUpload }) {
     const index = this.pendingAttachments.findIndex((attachment) => {
-      return attachment === e.attachmentUpload
-    })
+      return attachment === e.attachmentUpload;
+    });
 
-    console.log("complete")
+    console.log("complete");
     if (index > -1) {
-      this.pendingAttachments.splice(index, 1)
+      this.pendingAttachments.splice(index, 1);
     }
   }
 

src/exports/extensions/attachment.ts

@@ -747,7 +747,13 @@ export const Attachment = Node.create<AttachmentOptions>({
             file-name=${fileName || ""}
             file-size=${String(fileSize || 0)}
             loading-state=${loadingState || LOADING_STATES.notStarted}
-            progress=${String(progress ? progress : (sgid || content || !fileSize ? 100 : progress))}
+            progress=${String(
+              progress
+                ? progress
+                : sgid || content || !fileSize
+                  ? 100
+                  : progress,
+            )}
             contenteditable="false"
             ?show-metadata=${isPreviewable}
             .fileUploadErrorMessage=${this.options.fileUploadErrorMessage}

src/exports/styles/editor.js

@@ -61,70 +61,70 @@ export const hostStyles = css`
 
 // TODO: Should these cursor styles be made a separate CSS files? I worry about having too many external stylesheets, but I know some users are not using `trix.css` and will miss out on these.
 export const cursorStyles = css`
-/**
+  /**
  * Cursor styles that are useful for providing a more "pleasant" editor experience.
  */
-/**
+  /**
 * https://github.com/curvenote/editor/blob/main/packages/prosemirror-codemark/src/codemark.css
 */
-@keyframes rhino-blink {
-  49% {
-    border-color: unset;
-  }
-  50% {
-    border-color: Canvas;
-  }
-  99% {
-    border-color: Canvas;
-  }
-}
-.rhino-editor .no-cursor {
-  caret-color: transparent;
-}
-
-:where(.rhino-editor) .fake-cursor {
-  margin: 0;
-  padding: 0;
-  margin-right: -1px;
-  border-left-width: 1px;
-  border-left-style: solid;
-  animation: rhino-blink 1s;
-  animation-iteration-count: infinite;
-  position: relative;
-  z-index: 1;
-}
-
-/** This is for actual "selection" which are highlighting more than 1 character. */
-:where(.rhino-editor .ProseMirror):not(:focus-within) .rhino-selection {
-  background: var(--rhino-fake-selection-color);
-}
-
-/** .fake-cursor-selection is for link "insertions" without selected text. */
-:where(.rhino-editor) .rhino-fake-cursor-selection {
-  display: none;
-  user-select: none;
-}
-
-/**
+  @keyframes rhino-blink {
+    49% {
+      border-color: unset;
+    }
+    50% {
+      border-color: Canvas;
+    }
+    99% {
+      border-color: Canvas;
+    }
+  }
+  .rhino-editor .no-cursor {
+    caret-color: transparent;
+  }
+
+  :where(.rhino-editor) .fake-cursor {
+    margin: 0;
+    padding: 0;
+    margin-right: -1px;
+    border-left-width: 1px;
+    border-left-style: solid;
+    animation: rhino-blink 1s;
+    animation-iteration-count: infinite;
+    position: relative;
+    z-index: 1;
+  }
+
+  /** This is for actual "selection" which are highlighting more than 1 character. */
+  :where(.rhino-editor .ProseMirror):not(:focus-within) .rhino-selection {
+    background: var(--rhino-fake-selection-color);
+  }
+
+  /** .fake-cursor-selection is for link "insertions" without selected text. */
+  :where(.rhino-editor) .rhino-fake-cursor-selection {
+    display: none;
+    user-select: none;
+  }
+
+  /**
 This is used for showing a fake cursor for selections like link insertions
 */
-:where(.rhino-editor)[link-dialog-expanded] .rhino-fake-cursor-selection {
-  margin: 0;
-  padding: 0;
-  margin-right: -1px;
-  margin-left: -2px;
-  border-left-width: 4px;
-  border-left-style: solid;
-  border-color: Highlight;
-  position: relative;
-  z-index: 1;
-  display: inline;
-}
-
-.ProseMirror-separator {
-  display: none !important;
-}
-`
+  :where(.rhino-editor)[link-dialog-expanded] .rhino-fake-cursor-selection {
+    margin: 0;
+    padding: 0;
+    margin-right: -1px;
+    margin-left: -2px;
+    border-left-width: 4px;
+    border-left-style: solid;
+    border-color: Highlight;
+    position: relative;
+    z-index: 1;
+    display: inline;
+  }
+
+  .ProseMirror-separator {
+    display: none !important;
+  }
+`;
 
 export const toolbarButtonStyles = css`
   .rhino-toolbar-button {