fix bubble menu, add extensions, fix default styles

Author: KonnorRogers

.changeset/long-snails-hunt.md

@@ -0,0 +1,5 @@
+---
+"rhino-editor": patch
+---
+
+Bug fix: bubble menu will now anchor the `<figcaption>` or an attachment.

.changeset/nine-deers-accept.md

@@ -0,0 +1,5 @@
+---
+"rhino-editor": patch
+---
+
+Style fix: attachments without previews no longer have weird empty border lines

.changeset/nine-turtles-teach.md

@@ -0,0 +1,5 @@
+---
+"rhino-editor": minor
+---
+
+Feature: Added the `determineNodeViewAnchor` to the bubble menu extension

docs/src/rhino-editor/exports/styles/trix.css

@@ -256,8 +256,6 @@ export class TipTapEditor extends TipTapEditorBase {
     setTimeout(() => {
       if (inputElement != null) inputElement.focus();
     });
-
-    console.log("showing");
   }
 
   get linkDialog(): Maybe<HTMLDivElement> {

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

@@ -756,12 +756,16 @@ export const Attachment = Node.create<AttachmentOptions>({
           </rhino-attachment-editor>
 
           ${when(
-            content && !isPreviewable,
+            content,
             /* This is really not great. This is how Trix does it, but it feels very unsafe.
                https://github.com/basecamp/trix/blob/fda14c5ae88a0821cf8999a53dcb3572b4172cf0/src/trix/views/attachment_view.js#L36
             */
             () => html`${unsafeHTML(content)}`,
-            () => html`
+            () => html``
+          )}
+
+          ${when(isPreviewable && !content,
+              () => html`
               <img
                 class=${loadingState === LOADING_STATES.error
                   ? "rhino-upload-error"
@@ -770,8 +774,8 @@ export const Attachment = Node.create<AttachmentOptions>({
                 height=${String(height)}
                 src=${ifDefined(imgSrc)}
                 contenteditable="false"
-              />
-            `,
+              />`,
+              () => html``
           )}
 
           <figcaption

src/exports/extensions/attachment.ts

@@ -56,6 +56,20 @@ export interface BubbleMenuPluginProps {
         to: number;
       }) => boolean)
     | null;
+
+  /**
+   * A function that determines what DOM Element to use as an anchor for a NodeView. Useful for things like attachments.
+   */
+  determineNodeViewAnchor?:
+    | ((props: {
+        editor: Editor;
+        view: EditorView;
+        state: EditorState;
+        oldState?: EditorState;
+        from: number;
+        to: number;
+      }) => HTMLElement | null)
+    | null;
 }
 
 export type BubbleMenuViewProps = BubbleMenuPluginProps & {
@@ -103,13 +117,39 @@ export class BubbleMenuView {
     return true;
   };
 
+  public determineNodeViewAnchor: Exclude<BubbleMenuPluginProps["determineNodeViewAnchor"], null> = ({
+    view,
+    from,
+  }) => {
+    let node = view.nodeDOM(from) as HTMLElement;
+
+    // Attachment node views are special, we dont want to show text editing operations.
+    // Perhaps in the future we may have a default bubble menu for attachment transforms??
+    if (this.editor.isActive("attachment-figure") || this.editor.isActive("previewable-attachment-figure")) {
+      const figcaption = node.querySelector("figcaption")
+      node = figcaption || node
+    }
+
+    let nodeViewWrapper = node.dataset.nodeViewWrapper
+      ? node
+      : node.querySelector("[data-node-view-wrapper]");
+
+    if (nodeViewWrapper) {
+      node = nodeViewWrapper.firstChild as HTMLElement;
+    }
+
+    return node
+  }
+
+
   constructor({
     editor,
     element,
     view,
     // tippyOptions = {},
     updateDelay = 250,
     shouldShow,
+    determineNodeViewAnchor,
   }: BubbleMenuViewProps) {
     this.editor = editor;
     this.element = element;
@@ -120,6 +160,10 @@ export class BubbleMenuView {
       this.shouldShow = shouldShow;
     }
 
+    if (determineNodeViewAnchor) {
+      this.determineNodeViewAnchor = determineNodeViewAnchor
+    }
+
     this.view.dom.addEventListener("dragstart", this.dragstartHandler);
     this.editor.on("focus", this.focusHandler);
     this.editor.on("blur", this.blurHandler);
@@ -223,15 +267,14 @@ export class BubbleMenuView {
     let clientRect: null | (() => DOMRect) = null;
 
     if (isNodeSelection(state.selection)) {
-      let node = view.nodeDOM(from) as HTMLElement;
-
-      const nodeViewWrapper = node.dataset.nodeViewWrapper
-        ? node
-        : node.querySelector("[data-node-view-wrapper]");
-
-      if (nodeViewWrapper) {
-        node = nodeViewWrapper.firstChild as HTMLElement;
-      }
+      const node = this.determineNodeViewAnchor?.({
+        editor: this.editor,
+        view,
+        state,
+        oldState,
+        from,
+        to,
+      }) || view.nodeDOM(from) as HTMLElement;
 
       if (node) {
         clientRect = () => node.getBoundingClientRect();
@@ -315,6 +358,7 @@ export const BubbleMenuExtension = Extension.create<BubbleMenuOptions>({
         element: this.options.element,
         updateDelay: this.options.updateDelay,
         shouldShow: this.options.shouldShow,
+        determineNodeViewAnchor: this.options.determineNodeViewAnchor
       }),
     ];
   },

src/exports/extensions/bubble-menu.ts

@@ -69,8 +69,14 @@
 
 /* Attachments */
 .trix-content:not([readonly])
-  figure:is(:focus-within, :focus, .has-focus)
-  :nth-child(2) {
+  .attachment--preview:is(:focus-within, :focus, .has-focus)
+  :is(img) {
+  outline: transparent;
+  box-shadow: var(--rhino-focus-ring);
+}
+
+.trix-content:not([readonly])
+  .attachment:not(.attachment--preview):is(:focus-within, :focus, .has-focus) {
   outline: transparent;
   box-shadow: var(--rhino-focus-ring);
 }

src/exports/styles/trix-core.css

@@ -70,8 +70,14 @@
 
 /* Attachments */
 .trix-content:not([readonly])
-  figure:is(:focus-within, :focus, .has-focus)
-  :nth-child(2) {
+  .attachment--preview:is(:focus-within, :focus, .has-focus)
+  :is(img) {
+  outline: transparent;
+  box-shadow: var(--rhino-focus-ring);
+}
+
+.trix-content:not([readonly])
+  .attachment:not(.attachment--preview):is(:focus-within, :focus, .has-focus) {
   outline: transparent;
   box-shadow: var(--rhino-focus-ring);
 }