Remaining styles

Author: binary-koan

app/javascript/components/RichTextEditor.tsx

@@ -281,7 +281,7 @@ export const useRichTextEditor = ({
     editable,
     editorProps: {
       attributes: {
-        ...(className ? { class: classNames("min-h-full rounded-t-none", className) } : {}),
+        class: classNames("min-h-full whitespace-break-spaces rounded-t-none focus-within:outline-none", className),
         ...(ariaLabel ? { "aria-label": ariaLabel } : {}),
         ...(id ? { id } : {}),
       },

app/javascript/components/TiptapExtensions/Image.tsx

@@ -7,6 +7,7 @@ import * as React from "react";
 import { cast } from "ts-safe-cast";
 
 import { assertDefined } from "$app/utils/assert";
+import { classNames } from "$app/utils/classNames";
 import FileUtils from "$app/utils/file";
 
 import { LoadingSpinner } from "$app/components/LoadingSpinner";
@@ -102,6 +103,11 @@ const ImageNodeView = ({ node, editor, getPos }: NodeViewProps) => {
   const imageMarkup = (
     <img
       {...{ ...attrs, uploading: undefined }}
+      className={classNames(
+        "selection:bg-muted",
+        editor.isEditable && "cursor-pointer",
+        hasFocus && "outline-2 outline-accent",
+      )}
       onLoad={() => setIsImageLoaded(true)}
       onClick={handleImageClick}
       data-drag-handle
@@ -111,11 +117,7 @@ const ImageNodeView = ({ node, editor, getPos }: NodeViewProps) => {
 
   return (
     <NodeViewWrapper>
-      <figure
-        ref={nodeRef}
-        data-has-focus={hasFocus || undefined}
-        style={isUploading ? { position: "relative" } : undefined}
-      >
+      <figure ref={nodeRef} style={isUploading ? { position: "relative" } : undefined}>
         {attrs.link ? (
           <a href={cast(attrs.link)} target="_blank" rel="noopener noreferrer nofollow">
             {imageMarkup}

app/javascript/stylesheets/_rich_text.scss

@@ -133,11 +133,6 @@
     }
   }
 
-
-  .react-renderer[draggable] {
-    cursor: unset;
-  }
-
   .embed {
     border: $border;
     border-radius: border-radius(1);
@@ -202,41 +197,3 @@
     }
   }
 }
-
-.ProseMirror[contenteditable="true"] {
-  white-space: break-spaces;
-
-  &:focus-within {
-    outline: none;
-  }
-
-  figure {
-    & > img {
-      cursor: pointer;
-    }
-
-    // Chrome-specific workaround to prevent highlighting the br
-    br::selection {
-      background: none;
-    }
-
-    img::selection {
-      background: gray(3);
-    }
-
-    &[data-has-focus] img {
-      outline: $outline;
-    }
-  }
-}
-
-
-// Placeholder plugin
-.ProseMirror p.is-editor-empty:first-child::before,
-.ProseMirror .node-image.is-empty .figcaption::before {
-  content: attr(data-placeholder);
-  pointer-events: none;
-  float: left;
-  height: 0;
-  @include text-muted;
-}

app/javascript/stylesheets/tailwind.css

@@ -121,3 +121,20 @@
     transform: translateX(-50%);
   }
 }
+
+/* Reset Tiptap's default grab cursor on draggable React node views */
+.ProseMirror .react-renderer[draggable] {
+  @apply cursor-auto;
+}
+
+/* Chrome-specific workaround to prevent highlighting the br ProseMirror creates in empty figure captions */
+.ProseMirror[contenteditable="true"] figure br::selection {
+  @apply bg-transparent;
+}
+
+/* Tiptap placeholder plugin */
+.ProseMirror p.is-editor-empty:first-child::before,
+.ProseMirror .node-image.is-empty .figcaption::before {
+  content: attr(data-placeholder);
+  @apply pointer-events-none float-left h-0 text-muted;
+}