Merge branch 'develop' of github.com:outline/outline into develop

app/scenes/Document/components/Editor.js

@@ -12,6 +12,7 @@ import DocumentMetaWithViews from "components/DocumentMetaWithViews";
 import Editor from "components/Editor";
 import Flex from "components/Flex";
 import HoverPreview from "components/HoverPreview";
+import Star, { AnimatedStar } from "components/Star";
 import { isMetaKey } from "utils/keyboard";
 import { documentHistoryUrl } from "utils/routeHelpers";
 
@@ -98,23 +99,35 @@ class DocumentEditor extends React.Component<Props> {
       readOnly,
       innerRef,
     } = this.props;
+
     const { emoji } = parseTitle(title);
     const startsWithEmojiAndSpace = !!(emoji && title.startsWith(`${emoji} `));
+    const normalizedTitle =
+      !title && readOnly ? document.titleWithDefault : title;
 
     return (
       <Flex auto column>
-        <Title
-          type="text"
-          onChange={onChangeTitle}
-          onKeyDown={this.handleTitleKeyDown}
-          placeholder={document.placeholder}
-          value={!title && readOnly ? document.titleWithDefault : title}
-          style={startsWithEmojiAndSpace ? { marginLeft: "-1.2em" } : undefined}
-          readOnly={readOnly}
-          disabled={readOnly}
-          autoFocus={!title}
-          maxLength={MAX_TITLE_LENGTH}
-        />
+        {readOnly ? (
+          <Title
+            as="div"
+            $startsWithEmojiAndSpace={startsWithEmojiAndSpace}
+            $isStarred={document.isStarred}
+          >
+            <span>{normalizedTitle}</span>{" "}
+            {!isShare && <StarButton document={document} size={32} />}
+          </Title>
+        ) : (
+          <Title
+            type="text"
+            onChange={onChangeTitle}
+            onKeyDown={this.handleTitleKeyDown}
+            placeholder={document.placeholder}
+            value={normalizedTitle}
+            $startsWithEmojiAndSpace={startsWithEmojiAndSpace}
+            autoFocus={!title}
+            maxLength={MAX_TITLE_LENGTH}
+          />
+        )}
         <DocumentMetaWithViews
           isDraft={isDraft}
           document={document}
@@ -142,11 +155,17 @@ class DocumentEditor extends React.Component<Props> {
   }
 }
 
+const StarButton = styled(Star)`
+  position: relative;
+  top: 4px;
+`;
+
 const Title = styled(Textarea)`
   z-index: 1;
   line-height: 1.25;
   margin-top: 1em;
   margin-bottom: 0.5em;
+  margin-left: ${(props) => (props.$startsWithEmojiAndSpace ? "-1.2em" : 0)};
   background: ${(props) => props.theme.background};
   transition: ${(props) => props.theme.backgroundTransition};
   color: ${(props) => props.theme.text};
@@ -162,6 +181,20 @@ const Title = styled(Textarea)`
     color: ${(props) => props.theme.placeholder};
     -webkit-text-fill-color: ${(props) => props.theme.placeholder};
   }
+
+  ${AnimatedStar} {
+    opacity: ${(props) => (props.$isStarred ? "1 !important" : 0)};
+  }
+
+  &:hover {
+    ${AnimatedStar} {
+      opacity: 0.5;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
 `;
 
 export default DocumentEditor;