From b9c7694b218f64d7c1cb7bda4713d5db41437490 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Fri, 18 Feb 2022 08:42:24 -0800
Subject: [PATCH] Updated placeholders, minor editor tweaks

---
 app/components/Heading.ts                        |  1 +
 app/editor/components/Styles.ts                  |  6 +++---
 app/scenes/Document/components/EditableTitle.tsx | 10 +++-------
 app/scenes/Document/components/Editor.tsx        |  5 ++++-
 shared/i18n/locales/en_US/translation.json       |  7 +++----
 5 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/app/components/Heading.ts b/app/components/Heading.ts
index 2137d4a8a..c87873e33 100644
--- a/app/components/Heading.ts
+++ b/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 {
diff --git a/app/editor/components/Styles.ts b/app/editor/components/Styles.ts
index 527c3b94c..c29781375 100644
--- a/app/editor/components/Styles.ts
+++ b/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};
     }
   }
 
diff --git a/app/scenes/Document/components/EditableTitle.tsx b/app/scenes/Document/components/EditableTitle.tsx
index 9e078b762..253f43274 100644
--- a/app/scenes/Document/components/EditableTitle.tsx
+++ b/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}
diff --git a/app/scenes/Document/components/Editor.tsx b/app/scenes/Document/components/Editor.tsx
index a09151e05..c106aea9e 100644
--- a/app/scenes/Document/components/Editor.tsx
+++ b/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}
diff --git a/shared/i18n/locales/en_US/translation.json b/shared/i18n/locales/en_US/translation.json
index 462593005..e74897c07 100644
--- a/shared/i18n/locales/en_US/translation.json
+++ b/shared/i18n/locales/en_US/translation.json
@@ -203,7 +203,7 @@
   "Link": "Link",
   "Link copied to clipboard": "Link copied to clipboard",
   "Highlight": "Highlight",
-  "Type '/' to insert": "Type '/' to insert",
+  "Type '/' to insert": "Type / to insert",
   "Keep typing to filter": "Keep typing to filter",
   "Open link": "Open link",
   "Go to link": "Go to link",
@@ -371,9 +371,8 @@
   "Deleted by {{userName}}": "Deleted by {{userName}}",
   "This template will be permanently deleted in <2></2> unless restored.": "This template will be permanently deleted in <2></2> unless restored.",
   "This document will be permanently deleted in <2></2> unless restored.": "This document will be permanently deleted in <2></2> unless restored.",
-  "Start your template…": "Start your template…",
-  "Start with a title…": "Start with a title…",
-  "…the rest is up to you": "…the rest is up to you",
+  "Name your template…": "Name your template…",
+  "Type '/' to insert, or start writing…": "Type '/' to insert, or start writing…",
   "Hide contents": "Hide contents",
   "Show contents": "Show contents",
   "Edit {{noun}}": "Edit {{noun}}",