Updated placeholders, minor editor tweaks

app/components/Heading.ts

@@ -3,6 +3,7 @@ import styled from "styled-components";
 const Heading = styled.h1<{ centered?: boolean }>`
   display: flex;
   align-items: center;
+  user-select: none;
   ${(props) => (props.centered ? "text-align: center;" : "")}
 
   svg {

app/editor/components/Styles.ts

@@ -1118,19 +1118,19 @@ const EditorStyles = styled.div<{
     background: none;
     position: absolute;
     transition: color 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
-      transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
       opacity 150ms ease-in-out;
     outline: none;
     border: 0;
     padding: 0;
     margin-top: 1px;
-    margin-${(props) => (props.rtl ? "right" : "left")}: -24px;
+    margin-${(props) => (props.rtl ? "right" : "left")}: -28px;
+    border-radius: 4px;
 
     &:hover,
     &:focus {
       cursor: pointer;
-      transform: scale(1.2);
       color: ${(props) => props.theme.text};
+      background: ${(props) => props.theme.secondaryBackground};
     }
   }
 

app/scenes/Document/components/EditableTitle.tsx

@@ -1,6 +1,5 @@
 import { observer } from "mobx-react";
 import * as React from "react";
-import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { MAX_TITLE_LENGTH } from "@shared/constants";
@@ -13,6 +12,7 @@ import { isModKey } from "~/utils/keyboard";
 
 type Props = {
   value: string;
+  placeholder: string;
   document: Document;
   /** Should the title be editable, policies will also be considered separately */
   readOnly?: boolean;
@@ -39,11 +39,11 @@ const EditableTitle = React.forwardRef(
       onSave,
       onGoToNextInput,
       starrable,
+      placeholder,
     }: Props,
     ref: React.RefObject<HTMLSpanElement>
   ) => {
     const { policies } = useStores();
-    const { t } = useTranslation();
     const can = policies.abilities(document.id);
     const normalizedTitle =
       !value && readOnly ? document.titleWithDefault : value;
@@ -131,11 +131,7 @@ const EditableTitle = React.forwardRef(
         onChange={onChange}
         onKeyDown={handleKeyDown}
         onPaste={handlePaste}
-        placeholder={
-          document.isTemplate
-            ? t("Start your template…")
-            : t("Start with a title…")
-        }
+        placeholder={placeholder}
         value={normalizedTitle}
         $emojiWidth={emojiWidth}
         $isStarred={document.isStarred}

app/scenes/Document/components/Editor.tsx

@@ -101,6 +101,9 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
         onGoToNextInput={handleGoToNextInput}
         onChange={onChangeTitle}
         starrable={!shareId}
+        placeholder={
+          document.isTemplate ? t("Name your template…") : t("Untitled")
+        }
       />
       {!shareId && (
         <DocumentMetaWithViews
@@ -121,7 +124,7 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
       <EditorComponent
         ref={ref}
         autoFocus={!!title && !props.defaultValue}
-        placeholder={t("…the rest is up to you")}
+        placeholder={t("Type '/' to insert, or start writing…")}
         onHoverLink={handleLinkActive}
         scrollTo={window.location.hash}
         readOnly={readOnly}