mobile: choose between off, blocks and pages in editor settings

apps/mobile/app/screens/editor/tiptap/types.ts

@@ -58,7 +58,7 @@ export type Settings = {
   timeFormat: string;
   fontScale: number;
   markdownShortcuts: boolean;
-  virtualization?: boolean;
+  virtualization?: "off" | "blocks" | "pages";
   features: Record<any, any>;
   loggedIn: boolean;
   defaultLineHeight: number;

apps/mobile/app/screens/settings/components.tsx

@@ -34,6 +34,7 @@ import {
   DateFormatPicker,
   DayFormatPicker,
   WeekFormatPicker,
+  EditorVirtualizationPicker,
   FontPicker,
   HomePicker,
   ImageCompressionPicker,
@@ -64,6 +65,7 @@ export const components: { [name: string]: ReactElement } = {
   licenses: <Licenses />,
   "trash-interval-selector": <TrashIntervalPicker />,
   "font-selector": <FontPicker />,
+  "editor-virtualization-selector": <EditorVirtualizationPicker />,
   "title-format": <TitleFormat />,
   "date-format-selector": <DateFormatPicker />,
   "time-format-selector": <TimeFormatPicker />,

apps/mobile/app/screens/settings/picker/pickers.tsx

@@ -95,6 +95,34 @@ export const HomePicker = createSettingsPicker({
   isOptionAvailable: async () => true
 });
 
+type VirtualizationMode = NonNullable<Settings["editorVirtualization"]>;
+
+const VIRTUALIZATION_MODES: VirtualizationMode[] = ["off", "blocks", "pages"];
+
+export const EditorVirtualizationPicker = createSettingsPicker<
+  VirtualizationMode,
+  VirtualizationMode
+>({
+  getValue: () =>
+    useSettingStore.getState().settings.editorVirtualization || "off",
+  updateValue: async (item) => {
+    SettingsService.set({ editorVirtualization: item });
+  },
+  formatValue: (item) => {
+    const mode = (
+      typeof item === "object" ? "off" : item
+    ) as VirtualizationMode;
+    if (mode === "blocks") return strings.editorVirtualizationBlocks();
+    if (mode === "pages") return strings.editorVirtualizationPages();
+    return strings.editorVirtualizationOff();
+  },
+  getItemKey: (item) => item,
+  options: VIRTUALIZATION_MODES,
+  compareValue: (current, item) => current === item,
+  isFeatureAvailable: async () => true,
+  isOptionAvailable: async () => true
+});
+
 export const SidebarTabPicker = createSettingsPicker({
   getValue: () => useSettingStore.getState().settings.defaultSidebarTab,
   updateValue: async (item) => {
@@ -137,8 +165,8 @@ export const TrashIntervalPicker = createSettingsPicker({
     return item === -1
       ? strings.never()
       : item === 1
-        ? strings.reminderRecurringMode.day()
-        : strings.days(item);
+      ? strings.reminderRecurringMode.day()
+      : strings.days(item);
   },
   getItemKey: (item) => item.toString(),
   options: [-1, 1, 7, 30, 365] as TrashCleanupInterval[],
@@ -294,10 +322,10 @@ export const ApplockTimerPicker = createSettingsPicker({
     return item === -1
       ? strings.never()
       : item === 0 || item === undefined
-        ? strings.immediately()
-        : item === 1
-          ? strings.minutes(1)
-          : strings.minutes(item);
+      ? strings.immediately()
+      : item === 1
+      ? strings.minutes(1)
+      : strings.minutes(item);
   },
   getItemKey: (item) => item.toString(),
   options: [-1, 0, 1, 5, 15, 30],
@@ -321,8 +349,8 @@ export const VaultLockTimerPicker = createSettingsPicker({
     return item === -1
       ? strings.never()
       : item < 1000 * 60 * 60
-        ? strings.minutes(item / (1000 * 60))
-        : strings.hours(item / (1000 * 60 * 60));
+      ? strings.minutes(item / (1000 * 60))
+      : strings.hours(item / (1000 * 60 * 60));
   },
   getItemKey: (item) => item.toString(),
   options: [
@@ -349,8 +377,8 @@ export const ImageCompressionPicker = createSettingsPicker({
     return item === "ask-every-time"
       ? strings.askEveryTime()
       : item === "enabled"
-        ? strings.enableRecommended()
-        : strings.disable();
+      ? strings.enableRecommended()
+      : strings.disable();
   },
   getItemKey: (item) => item,
   options: [

apps/mobile/app/screens/settings/settings-data.tsx

@@ -1027,7 +1027,8 @@ export const settingsGroups: SettingSection[] = [
             id: "editor-virtualization",
             name: strings.editorVirtualization(),
             description: strings.editorVirtualizationDesc(),
-            type: "switch",
+            type: "component",
+            component: "editor-virtualization-selector",
             property: "editorVirtualization",
             icon: "page-next-outline"
           },

apps/mobile/app/stores/use-setting-store.ts

@@ -78,7 +78,7 @@ export type Settings = {
   sessionExpired: boolean;
   version: string | null;
   doubleSpacedLines?: boolean;
-  editorVirtualization?: boolean;
+  editorVirtualization?: "off" | "blocks" | "pages";
   disableAutoSync?: boolean;
   disableSync?: boolean;
   reminderNotifications?: boolean;
@@ -197,7 +197,7 @@ export const defaultSettings: SettingStore["settings"] = {
   sessionExpired: false,
   version: null,
   doubleSpacedLines: true,
-  editorVirtualization: false,
+  editorVirtualization: "off",
   reminderNotifications: true,
   defaultSnoozeTime: "5",
   corsProxy: "https://cors.notesnook.com",

packages/editor-mobile/src/components/editor.tsx

@@ -259,7 +259,7 @@ const Tiptap = ({
       timeFormat: settings.timeFormat as "12-hour" | "24-hour" | undefined,
       dayFormat: settings.dayFormat,
       enableInputRules: settings.markdownShortcuts,
-      virtualization: !!settings.virtualization
+      virtualization: settings.virtualization || "off"
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
@@ -963,7 +963,7 @@ const Tiptap = ({
           // once and only rebuilds its view afterwards, so extension options are
           // frozen at construction — toggling paging only takes effect when this
           // component remounts.
-          key={tick + tab.id + "-editor-" + !!settings.virtualization}
+          key={tick + tab.id + "-editor-" + (settings.virtualization || "off")}
           options={tiptapOptions}
           settings={settings}
           onEditorUpdate={(editor) => {

packages/editor-mobile/src/utils/index.ts

@@ -52,7 +52,7 @@ export type Settings = {
   dateFormat: string;
   fontScale: number;
   markdownShortcuts: boolean;
-  virtualization?: boolean;
+  virtualization?: "off" | "blocks" | "pages";
   features: Record<any, any>;
   loggedIn: boolean;
   defaultLineHeight: number;