feat: Code blocks can now optionally display line numbers (#4324)

* feat: Code blocks can now optionally display line numbers as a user preference

* Touch more breathing room

app/components/Editor.tsx

@@ -57,10 +57,12 @@ export type Props = Optional<
 
 function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
   const { id, shareId, onChange, onHeadingsChange } = props;
-  const { documents } = useStores();
+  const { documents, auth } = useStores();
   const { showToast } = useToasts();
   const dictionary = useDictionary();
   const embeds = useEmbeds(!shareId);
+  const preferences = auth.user?.preferences;
+
   const [
     activeLinkEvent,
     setActiveLinkEvent,
@@ -286,6 +288,7 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
           uploadFile={onUploadFile}
           onShowToast={showToast}
           embeds={embeds}
+          userPreferences={preferences}
           dictionary={dictionary}
           {...props}
           onHoverLink={handleLinkActive}

app/editor/index.tsx

@@ -28,9 +28,8 @@ import Node from "@shared/editor/nodes/Node";
 import ReactNode from "@shared/editor/nodes/ReactNode";
 import fullExtensionsPackage from "@shared/editor/packages/full";
 import { EventType } from "@shared/editor/types";
-import { IntegrationType } from "@shared/types";
+import { UserPreferences } from "@shared/types";
 import EventEmitter from "@shared/utils/events";
-import Integration from "~/models/Integration";
 import Flex from "~/components/Flex";
 import { Dictionary } from "~/hooks/useDictionary";
 import Logger from "~/utils/Logger";
@@ -105,14 +104,15 @@ export type Props = {
   onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
   /** Collection of embed types to render in the document */
   embeds: EmbedDescriptor[];
+  /** Display preferences for the logged in user, if any. */
+  userPreferences?: UserPreferences | null;
   /** Whether embeds should be rendered without an iframe */
   embedsDisabled?: boolean;
   /** Callback when a toast message is triggered (eg "link copied") */
   onShowToast: (message: string) => void;
   className?: string;
+  /** Optional style overrides */
   style?: React.CSSProperties;
-
-  embedIntegrations?: Integration<IntegrationType.Embed>[];
 };
 
 type State = {

app/scenes/Settings/Preferences.tsx

@@ -98,6 +98,18 @@ function Preferences() {
           onChange={handlePreferenceChange}
         />
       </SettingRow>
+      <SettingRow
+        name="codeBlockLineNumbers"
+        label={t("Show line numbers")}
+        description={t("Show line numbers on code blocks in documents.")}
+      >
+        <Switch
+          id="codeBlockLineNumbers"
+          name="codeBlockLineNumbers"
+          checked={user.getPreference(UserPreference.CodeBlockLineNumers, true)}
+          onChange={handlePreferenceChange}
+        />
+      </SettingRow>
       <SettingRow
         border={false}
         name="rememberLastPath"