From 884f3c58968dafdec86a48cfbcb1edbaa425d672 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sat, 28 Oct 2023 13:12:30 -0400
Subject: [PATCH] fix: Emoji position when document is full-width

---
 .../Document/components/DocumentTitle.tsx     | 37 +++++++++++++++----
 app/scenes/Document/components/Editor.tsx     |  1 +
 .../Document/components/RevisionViewer.tsx    |  1 +
 3 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/app/scenes/Document/components/DocumentTitle.tsx b/app/scenes/Document/components/DocumentTitle.tsx
index d0375155c..8d7f4f807 100644
--- a/app/scenes/Document/components/DocumentTitle.tsx
+++ b/app/scenes/Document/components/DocumentTitle.tsx
@@ -4,7 +4,7 @@ import { Selection } from "prosemirror-state";
 import { __parseFromClipboard } from "prosemirror-view";
 import * as React from "react";
 import { mergeRefs } from "react-merge-refs";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import isMarkdown from "@shared/editor/lib/isMarkdown";
 import normalizePastedMarkdown from "@shared/editor/lib/markdown/normalize";
@@ -33,6 +33,8 @@ type Props = {
   title: string;
   /** Emoji to display */
   emoji?: string | null;
+  /** Position of the emoji relative to text */
+  emojiPosition: "side" | "top";
   /** Placeholder to display when the document has no title */
   placeholder?: string;
   /** Should the title be editable, policies will also be considered separately */
@@ -57,6 +59,7 @@ const DocumentTitle = React.forwardRef(function _DocumentTitle(
     documentId,
     title,
     emoji,
+    emojiPosition,
     readOnly,
     onChangeTitle,
     onChangeEmoji,
@@ -254,7 +257,12 @@ const DocumentTitle = React.forwardRef(function _DocumentTitle(
       ref={mergeRefs([ref, externalRef])}
     >
       {can.update && !readOnly ? (
-        <EmojiWrapper align="center" justify="center" dir={dir}>
+        <EmojiWrapper
+          align="center"
+          justify="center"
+          $position={emojiPosition}
+          dir={dir}
+        >
           <React.Suspense fallback={emojiIcon}>
             <StyledEmojiPicker
               value={emoji}
@@ -267,7 +275,12 @@ const DocumentTitle = React.forwardRef(function _DocumentTitle(
           </React.Suspense>
         </EmojiWrapper>
       ) : emoji ? (
-        <EmojiWrapper align="center" justify="center" dir={dir}>
+        <EmojiWrapper
+          align="center"
+          justify="center"
+          $position={emojiPosition}
+          dir={dir}
+        >
           {emojiIcon}
         </EmojiWrapper>
       ) : null}
@@ -279,12 +292,22 @@ const StyledEmojiPicker = styled(EmojiPicker)`
   ${extraArea(8)}
 `;
 
-const EmojiWrapper = styled(Flex)<{ dir?: string }>`
-  position: absolute;
-  top: 8px;
-  ${(props) => (props.dir === "rtl" ? "right: -40px" : "left: -40px")};
+const EmojiWrapper = styled(Flex)<{ $position: "top" | "side"; dir?: string }>`
   height: 32px;
   width: 32px;
+
+  ${(props) =>
+    props.$position === "top"
+      ? css`
+          position: relative;
+          top: -8px;
+        `
+      : css`
+          position: absolute;
+          top: 8px;
+          ${(props: { dir?: string }) =>
+            props.dir === "rtl" ? "right: -40px" : "left: -40px"};
+        `}
 `;
 
 type TitleProps = {
diff --git a/app/scenes/Document/components/Editor.tsx b/app/scenes/Document/components/Editor.tsx
index aac018f08..5bf069d59 100644
--- a/app/scenes/Document/components/Editor.tsx
+++ b/app/scenes/Document/components/Editor.tsx
@@ -164,6 +164,7 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
             : document.title
         }
         emoji={document.emoji}
+        emojiPosition={document.fullWidth ? "top" : "side"}
         onChangeTitle={onChangeTitle}
         onChangeEmoji={onChangeEmoji}
         onGoToNextInput={handleGoToNextInput}
diff --git a/app/scenes/Document/components/RevisionViewer.tsx b/app/scenes/Document/components/RevisionViewer.tsx
index 549e3c1ca..424a30b61 100644
--- a/app/scenes/Document/components/RevisionViewer.tsx
+++ b/app/scenes/Document/components/RevisionViewer.tsx
@@ -31,6 +31,7 @@ function RevisionViewer(props: Props) {
         documentId={revision.documentId}
         title={revision.title}
         emoji={revision.emoji}
+        emojiPosition={document.fullWidth ? "top" : "side"}
         readOnly
       />
       <DocumentMeta