chore: Move formatting out of translation strings

app/components/Editor.js

@@ -102,7 +102,7 @@ function Editor(props: PropsWithRef) {
       deleteTable: t("Delete table"),
       em: t("Italic"),
       embedInvalidLink: t("Sorry, that link won’t work for this embed type"),
-      findOrCreateDoc: t("Find or create a doc…"),
+      findOrCreateDoc: `${t("Find or create a doc")}…`,
       h1: t("Big heading"),
       h2: t("Medium heading"),
       h3: t("Small heading"),
@@ -115,18 +115,18 @@ function Editor(props: PropsWithRef) {
       link: t("Link"),
       linkCopied: t("Link copied to clipboard"),
       mark: t("Highlight"),
-      newLineEmpty: t("Type '/' to insert…"),
+      newLineEmpty: `${t("Type '/' to insert")}…`,
-      newLineWithSlash: t("Keep typing to filter…"),
+      newLineWithSlash: `${t("Keep typing to filter")}…`,
       noResults: t("No results"),
       openLink: t("Open link"),
       orderedList: t("Ordered list"),
-      pasteLink: t("Paste a link…"),
+      pasteLink: `${t("Paste a link")}…`,
       pasteLinkWithTitle: (service: string) =>
         t("Paste a {{service}} link…", { service }),
       placeholder: t("Placeholder"),
       quote: t("Quote"),
       removeLink: t("Remove link"),
-      searchOrPasteLink: t("Search or paste a link…"),
+      searchOrPasteLink: `${t("Search or paste a link")}…`,
       strikethrough: t("Strikethrough"),
       strong: t("Bold"),
       subheading: t("Subheading"),

app/components/IconPicker.js

@@ -200,7 +200,7 @@ class IconPicker extends React.Component<Props> {
             })}
           </Icons>
           <Flex onClick={preventEventBubble}>
-            <React.Suspense fallback={<Loading>{t("Loading…")}</Loading>}>
+            <React.Suspense fallback={<Loading>{t("Loading")}…</Loading>}>
               <ColorPicker
                 color={this.props.color}
                 onChange={(color) =>

app/components/InputSearch.js

@@ -54,7 +54,7 @@ class InputSearch extends React.Component<Props> {
 
   render() {
     const { t } = this.props;
-    const { theme, placeholder = t("Search…") } = this.props;
+    const { theme, placeholder = `${t("Search")}…` } = this.props;
 
     return (
       <InputMaxWidth

app/components/Sidebar/components/Collections.js

@@ -72,7 +72,7 @@ class Collections extends React.Component<Props> {
           to="/collections"
           onClick={this.props.onCreateCollection}
           icon={<PlusIcon color="currentColor" />}
-          label={t("New collection…")}
+          label={`${t("New collection")}…`}
           exact
         />
       </>

app/menus/CollectionMenu.js

@@ -159,22 +159,22 @@ class CollectionMenu extends React.Component<Props> {
                 type: "separator",
               },
               {
-                title: t("Edit…"),
+                title: `${t("Edit")}…`,
                 visible: !!(collection && can.update),
                 onClick: this.handleEditCollectionOpen,
               },
               {
-                title: t("Permissions…"),
+                title: `${t("Permissions")}…`,
                 visible: !!(collection && can.update),
                 onClick: this.handleMembersModalOpen,
               },
               {
-                title: t("Export…"),
+                title: `${t("Export")}…`,
                 visible: !!(collection && can.export),
                 onClick: this.handleExportCollectionOpen,
               },
               {
-                title: t("Delete…"),
+                title: `${t("Delete")}…`,
                 visible: !!(collection && can.delete),
                 onClick: this.handleDeleteCollectionOpen,
               },

app/menus/DocumentMenu.js

@@ -200,7 +200,7 @@ class DocumentMenu extends React.Component<Props> {
                 onClick: this.handleRestore,
               },
               {
-                title: t("Restore…"),
+                title: `${t("Restore")}…`,
                 visible: !collection && !!can.restore,
                 style: {
                   left: -170,
@@ -251,7 +251,7 @@ class DocumentMenu extends React.Component<Props> {
                 visible: !document.isStarred && !!can.star,
               },
               {
-                title: t("Share link…"),
+                title: `${t("Share link")}…`,
                 onClick: this.handleShareLink,
                 visible: canShareDocuments,
               },
@@ -274,7 +274,7 @@ class DocumentMenu extends React.Component<Props> {
                 visible: !!can.createChildDocument,
               },
               {
-                title: t("Create template…"),
+                title: `${t("Create template")}…`,
                 onClick: this.handleOpenTemplateModal,
                 visible: !!can.update && !document.isTemplate,
               },
@@ -299,12 +299,12 @@ class DocumentMenu extends React.Component<Props> {
                 visible: !!can.archive,
               },
               {
-                title: t("Delete…"),
+                title: `${t("Delete")}…`,
                 onClick: this.handleDelete,
                 visible: !!can.delete,
               },
               {
-                title: t("Move…"),
+                title: `${t("Move")}…`,
                 onClick: this.handleMove,
                 visible: !!can.move,
               },

app/menus/GroupMenu.js

@@ -78,7 +78,7 @@ class GroupMenu extends React.Component<Props> {
           <DropdownMenuItems
             items={[
               {
-                title: t("Members…"),
+                title: `${t("Members")}…`,
                 onClick: this.props.onMembers,
                 visible: !!(group && can.read),
               },
@@ -86,12 +86,12 @@ class GroupMenu extends React.Component<Props> {
                 type: "separator",
               },
               {
-                title: t("Edit…"),
+                title: `${t("Edit")}…`,
                 onClick: this.onEdit,
                 visible: !!(group && can.update),
               },
               {
-                title: t("Delete…"),
+                title: `${t("Delete")}…`,
                 onClick: this.onDelete,
                 visible: !!(group && can.delete),
               },

app/menus/NewChildDocumentMenu.js

@@ -2,7 +2,7 @@
 import { observable } from "mobx";
 import { observer, inject } from "mobx-react";
 import * as React from "react";
-import { withTranslation, type TFunction } from "react-i18next";
+import { Trans, withTranslation, type TFunction } from "react-i18next";
 import { Redirect } from "react-router-dom";
 
 import CollectionsStore from "stores/CollectionsStore";
@@ -43,6 +43,7 @@ class NewChildDocumentMenu extends React.Component<Props> {
 
     const { label, document, collections, t } = this.props;
     const collection = collections.get(document.collectionId);
+    const collectionName = collection ? collection.name : t("collection");
 
     return (
       <DropdownMenu label={label}>
@@ -50,12 +51,9 @@ class NewChildDocumentMenu extends React.Component<Props> {
           items={[
             {
               title: (
-                <span>
+                <Trans>
-                  {t("New document in")}{" "}
+                  New document in <strong>{{ collectionName }}</strong>
-                  <strong>
+                </Trans>
-                    {collection ? collection.name : t("collection")}
-                  </strong>
-                </span>
               ),
               onClick: this.handleNewDocument,
             },

app/menus/NewTemplateMenu.js

@@ -45,7 +45,7 @@ class NewTemplateMenu extends React.Component<Props> {
         label={
           label || (
             <Button icon={<PlusIcon />} small>
-              {t("New template…")}
+              {t("New template")}…
             </Button>
           )
         }

app/menus/UserMenu.js

@@ -99,7 +99,7 @@ class UserMenu extends React.Component<Props> {
               type: "separator",
             },
             {
-              title: t("Revoke invite…"),
+              title: `${t("Revoke invite")}…`,
               onClick: this.handleRevoke,
               visible: user.isInvited,
             },
@@ -109,7 +109,7 @@ class UserMenu extends React.Component<Props> {
               visible: !user.isInvited && user.isSuspended,
             },
             {
-              title: t("Suspend account…"),
+              title: `${t("Suspend account")}…`,
               onClick: this.handleSuspend,
               visible: !user.isInvited && !user.isSuspended,
             },

app/scenes/Collection.js

@@ -144,7 +144,7 @@ class CollectionScene extends React.Component<Props> {
             <Action>
               <InputSearch
                 source="collection"
-                placeholder={t("Search in collection…")}
+                placeholder={`${t("Search in collection")}…`}
                 collectionId={match.params.id}
               />
             </Action>
@@ -207,7 +207,7 @@ class CollectionScene extends React.Component<Props> {
                   &nbsp;&nbsp;
                   {collection.private && (
                     <Button onClick={this.onPermissions} neutral>
-                      {t("Manage members…")}
+                      {t("Manage members")}…
                     </Button>
                   )}
                 </Wrapper>

app/scenes/CollectionEdit.js

@@ -120,7 +120,7 @@ class CollectionEdit extends React.Component<Props> {
             type="submit"
             disabled={this.isSaving || !this.props.collection.name}
           >
-            {this.isSaving ? t("Saving…") : t("Save")}
+            {this.isSaving ? `${t("Saving")}…` : t("Save")}
           </Button>
         </form>
       </Flex>

app/scenes/CollectionMembers/AddGroupsToCollection.js

@@ -92,7 +92,7 @@ class AddGroupsToCollection extends React.Component<Props> {
 
         <Input
           type="search"
-          placeholder={t("Search by group name…")}
+          placeholder={`${t("Search by group name")}…`}
           value={this.query}
           onChange={this.handleFilter}
           label={t("Search groups")}

app/scenes/CollectionMembers/AddPeopleToCollection.js

@@ -86,7 +86,7 @@ class AddPeopleToCollection extends React.Component<Props> {
 
         <Input
           type="search"
-          placeholder={t("Search by name…")}
+          placeholder={`${t("Search by name")}…`}
           value={this.query}
           onChange={this.handleFilter}
           label={t("Search people")}

app/scenes/CollectionMembers/components/CollectionGroupMemberListItem.js

@@ -52,7 +52,7 @@ const MemberListItem = ({
           <ButtonWrap>
             <DropdownMenu>
               <DropdownMenuItem onClick={openMembersModal}>
-                {t("Members…")}
+                {t("Members")}…
               </DropdownMenuItem>
               <hr />
               <DropdownMenuItem onClick={onRemove}>

app/scenes/CollectionNew.js

@@ -148,7 +148,7 @@ class CollectionNew extends React.Component<Props> {
         </HelpText>
 
         <Button type="submit" disabled={this.isSaving || !this.name}>
-          {this.isSaving ? t("Creating…") : t("Create")}
+          {this.isSaving ? `${t("Creating")}…` : t("Create")}
         </Button>
       </form>
     );

app/scenes/Document/components/Header.js

@@ -203,7 +203,7 @@ class Header extends React.Component<Props> {
         <Wrapper align="center" justify="flex-end">
           {isSaving && !isPublishing && (
             <Action>
-              <Status>{t("Saving…")}</Status>
+              <Status>{t("Saving")}…</Status>
             </Action>
           )}
           &nbsp;
@@ -331,7 +331,7 @@ class Header extends React.Component<Props> {
                   disabled={publishingIsDisabled}
                   small
                 >
-                  {isPublishing ? t("Publishing…") : t("Publish")}
+                  {isPublishing ? `${t("Publishing")}…` : t("Publish")}
                 </Button>
               </Tooltip>
             </Action>

app/scenes/GroupMembers/AddPeopleToGroup.js

@@ -88,7 +88,7 @@ class AddPeopleToGroup extends React.Component<Props> {
 
         <Input
           type="search"
-          placeholder={t("Search by name…")}
+          placeholder={`${t("Search by name")}…`}
           value={this.query}
           onChange={this.handleFilter}
           label={t("Search people")}

app/scenes/GroupMembers/GroupMembers.js

@@ -82,7 +82,7 @@ class GroupMembers extends React.Component<Props> {
                 icon={<PlusIcon />}
                 neutral
               >
-                {t("Add people…")}
+                {t("Add people")}…
               </Button>
             </span>
           </>

app/scenes/Search/Search.js

@@ -270,7 +270,7 @@ class Search extends React.Component<Props> {
         )}
         <ResultsWrapper pinToTop={this.pinToTop} column auto>
           <SearchField
-            placeholder={t("Search…")}
+            placeholder={`${t("Search")}…`}
             onKeyDown={this.handleKeyDown}
             onChange={this.updateLocation}
             defaultValue={this.query}

app/scenes/Settings/Profile.js

@@ -146,7 +146,7 @@ class Profile extends React.Component<Props> {
             .
           </HelpText>
           <Button type="submit" disabled={isSaving || !this.isValid}>
-            {isSaving ? t("Saving…") : t("Save")}
+            {isSaving ? `${t("Saving")}…` : t("Save")}
           </Button>
         </form>
 

shared/i18n/locales/en_US/translation.json

@@ -43,7 +43,7 @@
   "Delete table": "Delete table",
   "Italic": "Italic",
   "Sorry, that link won’t work for this embed type": "Sorry, that link won’t work for this embed type",
-  "Find or create a doc…": "Find or create a doc…",
+  "Find or create a doc": "Find or create a doc",
   "Big heading": "Big heading",
   "Medium heading": "Medium heading",
   "Small heading": "Small heading",
@@ -56,17 +56,17 @@
   "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…",
+  "Keep typing to filter": "Keep typing to filter",
   "No results": "No results",
   "Open link": "Open link",
   "Ordered list": "Ordered list",
-  "Paste a link…": "Paste a link…",
+  "Paste a link": "Paste a link",
   "Paste a {{service}} link…": "Paste a {{service}} link…",
   "Placeholder": "Placeholder",
   "Quote": "Quote",
   "Remove link": "Remove link",
-  "Search or paste a link…": "Search or paste a link…",
+  "Search or paste a link": "Search or paste a link",
   "Strikethrough": "Strikethrough",
   "Bold": "Bold",
   "Subheading": "Subheading",
@@ -76,17 +76,16 @@
   "Warning": "Warning",
   "Warning notice": "Warning notice",
   "Icon": "Icon",
-  "Loading…": "Loading…",
+  "Loading": "Loading",
-  "Search…": "Search…",
+  "Search": "Search",
   "Outline is available in your language {{optionLabel}}, would you like to change?": "Outline is available in your language {{optionLabel}}, would you like to change?",
   "Change Language": "Change Language",
   "Dismiss": "Dismiss",
   "Keyboard shortcuts": "Keyboard shortcuts",
-  "New collection…": "New collection…",
+  "New collection": "New collection",
   "Collections": "Collections",
   "Untitled": "Untitled",
   "Home": "Home",
-  "Search": "Search",
   "Starred": "Starred",
   "Invite people…": "Invite people…",
   "Invite people": "Invite people",
@@ -116,10 +115,10 @@
   "Collection permissions": "Collection permissions",
   "New document": "New document",
   "Import document": "Import document",
-  "Edit…": "Edit…",
+  "Edit": "Edit",
-  "Permissions…": "Permissions…",
+  "Permissions": "Permissions",
-  "Export…": "Export…",
+  "Export": "Export",
-  "Delete…": "Delete…",
+  "Delete": "Delete",
   "Edit collection": "Edit collection",
   "Delete collection": "Delete collection",
   "Export collection": "Export collection",
@@ -128,33 +127,30 @@
   "Document restored": "Document restored",
   "Document unpublished": "Document unpublished",
   "Restore": "Restore",
-  "Restore…": "Restore…",
   "Choose a collection": "Choose a collection",
   "Unpin": "Unpin",
   "Pin to collection": "Pin to collection",
   "Unstar": "Unstar",
   "Star": "Star",
-  "Share link…": "Share link…",
+  "Share link": "Share link",
   "Enable embeds": "Enable embeds",
   "Disable embeds": "Disable embeds",
   "New nested document": "New nested document",
-  "Create template…": "Create template…",
+  "Create template": "Create template",
-  "Edit": "Edit",
   "Duplicate": "Duplicate",
   "Unpublish": "Unpublish",
-  "Move…": "Move…",
+  "Move": "Move",
   "History": "History",
   "Download": "Download",
   "Print": "Print",
   "Delete {{ documentName }}": "Delete {{ documentName }}",
-  "Create template": "Create template",
   "Share document": "Share document",
   "Edit group": "Edit group",
   "Delete group": "Delete group",
-  "Members…": "Members…",
+  "Members": "Members",
-  "New document in": "New document in",
   "collection": "collection",
-  "New template…": "New template…",
+  "New document in <1>{{collectionName}}</1>": "New document in <1>{{collectionName}}</1>",
+  "New template": "New template",
   "Link copied": "Link copied",
   "Restore version": "Restore version",
   "Copy link": "Copy link",
@@ -168,16 +164,16 @@
   "Are you sure you want to suspend this account? Suspended users will be prevented from logging in.": "Are you sure you want to suspend this account? Suspended users will be prevented from logging in.",
   "Make {{ userName }} a member…": "Make {{ userName }} a member…",
   "Make {{ userName }} an admin…": "Make {{ userName }} an admin…",
-  "Revoke invite…": "Revoke invite…",
+  "Revoke invite": "Revoke invite",
   "Activate account": "Activate account",
-  "Suspend account…": "Suspend account…",
+  "Suspend account": "Suspend account",
   "Documents": "Documents",
   "The document archive is empty at the moment.": "The document archive is empty at the moment.",
-  "Search in collection…": "Search in collection…",
+  "Search in collection": "Search in collection",
   "<0>{{collectionName}}</0> doesn’t contain any documents yet.": "<0>{{collectionName}}</0> doesn’t contain any documents yet.",
   "Get started by creating a new one!": "Get started by creating a new one!",
   "Create a document": "Create a document",
-  "Manage members…": "Manage members…",
+  "Manage members": "Manage members",
   "Pinned": "Pinned",
   "Recently updated": "Recently updated",
   "Recently published": "Recently published",
@@ -190,13 +186,13 @@
   "More details about this collection…": "More details about this collection…",
   "Private collection": "Private collection",
   "A private collection will only be visible to invited team members.": "A private collection will only be visible to invited team members.",
-  "Saving…": "Saving…",
+  "Saving": "Saving",
   "Save": "Save",
   "{{ groupName }} was added to the collection": "{{ groupName }} was added to the collection",
   "Could not add user": "Could not add user",
   "Can’t find the group you’re looking for?": "Can’t find the group you’re looking for?",
   "Create a group": "Create a group",
-  "Search by group name…": "Search by group name…",
+  "Search by group name": "Search by group name",
   "Search groups": "Search groups",
   "No groups matching your search": "No groups matching your search",
   "No groups left to add": "No groups left to add",
@@ -204,20 +200,19 @@
   "{{ userName }} was added to the collection": "{{ userName }} was added to the collection",
   "Need to add someone who’s not yet on the team yet?": "Need to add someone who’s not yet on the team yet?",
   "Invite people to {{ teamName }}": "Invite people to {{ teamName }}",
-  "Search by name…": "Search by name…",
+  "Search by name": "Search by name",
   "Search people": "Search people",
   "No people matching your search": "No people matching your search",
   "No people left to add": "No people left to add",
   "Read only": "Read only",
   "Read & Edit": "Read & Edit",
-  "Permissions": "Permissions",
   "Remove": "Remove",
   "Active <1></1> ago": "Active <1></1> ago",
   "Never signed in": "Never signed in",
   "Invited": "Invited",
   "Admin": "Admin",
   "Collections are for grouping your knowledge base. They work best when organized around a topic or internal team — Product or Engineering for example.": "Collections are for grouping your knowledge base. They work best when organized around a topic or internal team — Product or Engineering for example.",
-  "Creating…": "Creating…",
+  "Creating": "Creating",
   "Create": "Create",
   "Recently viewed": "Recently viewed",
   "Created by me": "Created by me",
@@ -232,7 +227,7 @@
   "New from template": "New from template",
   "Publish": "Publish",
   "Publish document": "Publish document",
-  "Publishing…": "Publishing…",
+  "Publishing": "Publishing",
   "No documents found for your filters.": "No documents found for your filters.",
   "You’ve not got any drafts at the moment.": "You’ve not got any drafts at the moment.",
   "Not found": "Not found",
@@ -246,7 +241,7 @@
   "Invite them to {{teamName}}": "Invite them to {{teamName}}",
   "{{userName}} was removed from the group": "{{userName}} was removed from the group",
   "Could not remove user": "Could not remove user",
-  "Add people…": "Add people…",
+  "Add people": "Add people",
   "This group has no members.": "This group has no members.",
   "Outline is designed to be fast and easy to use. All of your usual keyboard shortcuts work here, and there’s Markdown too.": "Outline is designed to be fast and easy to use. All of your usual keyboard shortcuts work here, and there’s Markdown too.",
   "Navigation": "Navigation",