feat: allow user to set TOC display preference (#6943)

Co-authored-by: Tom Moor <tom.moor@gmail.com>

shared/constants.ts

@@ -1,4 +1,5 @@
 import {
+  TOCPosition,
   TeamPreference,
   TeamPreferences,
   UserPreference,
@@ -22,6 +23,7 @@ export const TeamPreferenceDefaults: TeamPreferences = {
   [TeamPreference.PublicBranding]: false,
   [TeamPreference.Commenting]: true,
   [TeamPreference.CustomTheme]: undefined,
+  [TeamPreference.TocPosition]: TOCPosition.Left,
 };
 
 export const UserPreferenceDefaults: UserPreferences = {

shared/editor/styles/EditorStyleHelper.ts

@@ -36,4 +36,7 @@ export class EditorStyleHelper {
 
   /** Minimum padding around editor */
   static readonly padding = 32;
+
+  /** Table of contents width */
+  static readonly tocWidth = 256;
 }

shared/i18n/locales/en_US/translation.json

@@ -823,6 +823,10 @@
   "Accent text color": "Accent text color",
   "Public branding": "Public branding",
   "Show your team’s logo on public pages like login and shared documents.": "Show your team’s logo on public pages like login and shared documents.",
+  "Table of contents position": "Table of contents position",
+  "The side to display the table of contents in relation to the main content.": "The side to display the table of contents in relation to the main content.",
+  "Left": "Left",
+  "Right": "Right",
   "Behavior": "Behavior",
   "Subdomain": "Subdomain",
   "Your workspace will be accessible at": "Your workspace will be accessible at",

shared/styles/depths.ts

@@ -1,4 +1,5 @@
 const depths = {
+  toc: 100,
   header: 800,
   sidebar: 900,
   editorToolbar: 925,

shared/types.ts

@@ -184,6 +184,11 @@ export type PublicTeam = {
   customTheme: Partial<CustomTheme>;
 };
 
+export enum TOCPosition {
+  Left = "left",
+  Right = "right",
+}
+
 export enum TeamPreference {
   /** Whether documents have a separate edit mode instead of always editing. */
   SeamlessEdit = "seamlessEdit",
@@ -199,6 +204,8 @@ export enum TeamPreference {
   Commenting = "commenting",
   /** The custom theme for the team. */
   CustomTheme = "customTheme",
+  /** Side to display the document's table of contents in relation to the main content. */
+  TocPosition = "tocPosition",
 }
 
 export type TeamPreferences = {
@@ -209,6 +216,7 @@ export type TeamPreferences = {
   [TeamPreference.MembersCanCreateApiKey]?: boolean;
   [TeamPreference.Commenting]?: boolean;
   [TeamPreference.CustomTheme]?: Partial<CustomTheme>;
+  [TeamPreference.TocPosition]?: TOCPosition;
 };
 
 export enum NavigationNodeType {