web: add toggle to disable/enable editor margins

apps/web/src/components/editor/index.tsx

@@ -329,6 +329,7 @@ function EditorChrome(props: PropsWithChildren<EditorProps>) {
       focusMode: false,
       isMobile: false
     };
+  const editorMargins = useStore((store) => store.editorMargins);
 
   if (headless) return <>{children}</>;
 
@@ -344,7 +345,7 @@ function EditorChrome(props: PropsWithChildren<EditorProps>) {
           className="editor"
           sx={{
             alignSelf: ["stretch", focusMode ? "center" : "stretch", "center"],
-            maxWidth: "min(100%, 850px)",
+            maxWidth: editorMargins ? "min(100%, 850px)" : "auto",
             width: "100%"
           }}
           px={6}

apps/web/src/components/editor/toolbar.js

@@ -40,11 +40,14 @@ function Toolbar() {
   const toggleFocusMode = useAppStore((store) => store.toggleFocusMode);
   const setTitle = useStore((store) => store.setTitle);
   const toggleProperties = useStore((store) => store.toggleProperties);
+  const toggleEditorMargins = useStore((store) => store.toggleEditorMargins);
+  const editorMargins = useStore((store) => store.editorMargins);
   const clearSession = useStore((store) => store.clearSession);
   const title = useStore((store) => store.session.title);
   const theme = useThemeStore((store) => store.theme);
   const toggleNightMode = useThemeStore((store) => store.toggleNightMode);
   const [isTitleVisible, setIsTitleVisible] = useState(false);
+
   const monographs = useMonographStore((store) => store.monographs);
   const { canRedo, canUndo, redo, undo } = useHistory();
   const { toggleSearch } = useSearch();
@@ -88,6 +91,14 @@ function Toolbar() {
 
   const inlineTools = useMemo(
     () => [
+      {
+        title: editorMargins
+          ? "Disable editor margins"
+          : "Enable editor margins",
+        icon: editorMargins ? Icon.EditorNormalWidth : Icon.EditorFullWidth,
+        enabled: true,
+        onClick: () => toggleEditorMargins()
+      },
       {
         title: theme === "dark" ? "Light mode" : "Dark mode",
         icon: Icon.ThemeIcon,
@@ -97,7 +108,7 @@ function Toolbar() {
       },
       {
         title: isFocusMode ? "Normal mode" : "Focus mode",
-        icon: isFocusMode ? Icon.NormalMode : Icon.FocusMode,
+        icon: isFocusMode ? Icon.FocusMode : Icon.NormalMode,
         enabled: true,
         hideOnMobile: true,
         onClick: () => {
@@ -154,6 +165,8 @@ function Toolbar() {
       }
     ],
     [
+      editorMargins,
+      toggleEditorMargins,
       editor,
       undo,
       redo,

apps/web/src/components/icons/index.tsx

@@ -461,3 +461,10 @@ export const Silent = createIcon(mdiBellOffOutline);
 export const Vibrate = createIcon(mdiVibrate);
 export const Loud = createIcon(mdiBellRingOutline);
 export const CustomToolbar = createIcon(mdiGestureTapButton);
+
+export const EditorNormalWidth = createIcon(
+  `M4 20q-.825 0-1.412-.587Q2 18.825 2 18V6q0-.825.588-1.412Q3.175 4 4 4h16q.825 0 1.413.588Q22 5.175 22 6v12q0 .825-.587 1.413Q20.825 20 20 20Zm0-2h2V6H4v12Zm4 0h8V6H8Zm10 0h2V6h-2ZM8 6v12Z`
+);
+export const EditorFullWidth = createIcon(
+  `M4 20q-.825 0-1.412-.587Q2 18.825 2 18V6q0-.825.588-1.412Q3.175 4 4 4h16q.825 0 1.413.588Q22 5.175 22 6v12q0 .825-.587 1.413Q20.825 20 20 20Zm0-2h1V6H4v12Zm3 0h10V6H7Zm12 0h1V6h-1ZM7 6v12Z`
+);

apps/web/src/stores/editor-store.js

@@ -27,6 +27,7 @@ import BaseStore from ".";
 import { EV, EVENTS } from "@notesnook/core/common";
 import { hashNavigate } from "../navigation";
 import { logger } from "../utils/logger";
+import Config from "../utils/config";
 
 const SESSION_STATES = {
   stale: "stale",
@@ -63,6 +64,7 @@ export const getDefaultSession = (sessionId = Date.now()) => {
 class EditorStore extends BaseStore {
   session = getDefaultSession();
   arePropertiesVisible = false;
+  editorMargins = Config.get("editor:margins", true);
 
   init = () => {
     EV.subscribe(EVENTS.userLoggedOut, () => {
@@ -294,6 +296,14 @@ class EditorStore extends BaseStore {
     );
   };
 
+  toggleEditorMargins = (toggleState) => {
+    this.set((state) => {
+      state.editorMargins =
+        toggleState !== undefined ? toggleState : !state.editorMargins;
+      Config.set("editor:margins", state.editorMargins);
+    });
+  };
+
   /**
    * @private internal
    * @param {Boolean} isLocked