change: Give editor width setting own popup menu for easy switching

components/icon-button.tsx

@@ -42,6 +42,7 @@ export const ICONS = {
     Puzzle: PuzzleIcon,
     ChevronDoubleUp: ChevronDoubleUpIcon,
     Refresh: RefreshIcon,
+    WidthSize: (props: any) => <SelectorIcon style={{ transform: 'rotate(90deg)' }} {...props}/>
 };
 
 const IconButton = forwardRef<

components/layout/layout-main.tsx

@@ -17,6 +17,7 @@ import { NoteModel } from 'libs/shared/note';
 import PreviewModal from 'components/portal/preview-modal';
 import LinkToolbar from 'components/portal/link-toolbar/link-toolbar';
 import { ReactNodeLike } from 'prop-types';
+import EditorWidthSelect from 'components/portal/editor-width-select';
 
 const MainWrapper: FC<{ children: ReactNodeLike }> = ({ children }) => {
     const {
@@ -108,6 +109,7 @@ const LayoutMain: FC<{
                 <PreviewModal />
                 <LinkToolbar />
                 <SidebarMenu />
+                <EditorWidthSelect/>
             </NoteState.Provider>
         </NoteTreeState.Provider>
     );

components/note-nav.tsx

@@ -41,7 +41,7 @@ const NoteNav = () => {
     const { ua } = UIState.useContainer();
     const { getPaths, showItem, checkItemIsShown } =
         NoteTreeState.useContainer();
-    const { share, menu } = PortalState.useContainer();
+    const { share, menu, editorWidthSelect } = PortalState.useContainer();
 
     const handleClickShare = useCallback(
         (event: MouseEvent) => {
@@ -56,10 +56,19 @@ const NoteNav = () => {
         (event: MouseEvent) => {
             menu.setData(note);
             menu.setAnchor(event.target as Element);
+            // debugger;
             menu.open();
         },
         [note, menu]
     );
+    const handleClickEditorWidth = useCallback(
+        (event: MouseEvent) => {
+            editorWidthSelect.setData(note);
+            editorWidthSelect.setAnchor(event.target as Element);
+            editorWidthSelect.open();
+        },
+        [note, editorWidthSelect]
+    );
 
     const handleClickOpenInTree = useCallback(() => {
         if (!note) return;
@@ -153,6 +162,14 @@ const NoteNav = () => {
                     icon="Share"
                 />
             </HotkeyTooltip>
+            <HotkeyTooltip text={t('Editor width')}>
+                <IconButton
+                    icon="WidthSize"
+                    className="mr-2"
+                    onClick={handleClickEditorWidth}
+                >
+                </IconButton>
+            </HotkeyTooltip>
             <HotkeyTooltip text={t('Settings')}>
                 <IconButton
                     disabled={!note}

components/portal/editor-width-select.tsx

@@ -0,0 +1,63 @@
+import { FC } from 'react';
+import useI18n from 'libs/web/hooks/use-i18n';
+import PortalState from 'libs/web/state/portal';
+import { Menu, MenuItem } from '@material-ui/core';
+import { EDITOR_SIZE } from 'libs/shared/meta';
+import NoteState from 'libs/web/state/note';
+
+interface EditorWidthSelectItem {
+    text: string;
+    value: EDITOR_SIZE;
+}
+
+const EditorWidthSelect: FC = () => {
+    const { t } = useI18n();
+    const {
+        editorWidthSelect: { close, anchor, data, visible },
+    } = PortalState.useContainer();
+    const { mutateNote } = NoteState.useContainer();
+
+    const items: Array<EditorWidthSelectItem> = [
+        {
+            text: t("Small (default)"),
+            value: EDITOR_SIZE.SMALL,
+        },
+        {
+            text: t("Large"),
+            value: EDITOR_SIZE.LARGE
+        },
+        {
+            text: t("As wide as possible"),
+            value: EDITOR_SIZE.AS_WIDE_AS_POSSIBLE
+        }
+    ];
+
+    const setTo = (width: EDITOR_SIZE) => {
+        close();
+        if (data?.id) {
+            mutateNote(data.id, {
+                editorsize: width
+            })
+                .catch((v) => console.error("Error whilst switching editor size", v));
+        }
+    };
+
+    return (
+        <Menu
+            anchorEl={anchor}
+            open={visible}
+            onClose={close}
+            classes={{
+                paper: 'bg-gray-200 text-gray-800',
+            }}
+        >
+            {items.map((item) =>
+                <MenuItem key={item.value} onClick={() => setTo(item.value)}>
+                    <span className="text-xs">{item.text}</span>
+                </MenuItem>
+            )}
+        </Menu>
+    );
+};
+
+export default EditorWidthSelect;

components/portal/sidebar-menu/sidebar-menu.tsx

@@ -46,12 +46,12 @@ const SidebarMenu: FC = () => {
                     return item?.pinned === NOTE_PINNED.PINNED;
                 },
             },
-            {
+            // Replaced by dedicated window
-                text: t('Toggle width'), // TODO(i18n): Change this to 'Switch width'
+            /*{
-                // TODO: or SwitchHorizontal?
+                text: t('Toggle width'),
                 icon: <SelectorIcon style={{ transform: 'rotate(90deg)' }} />,
                 handler: MENU_HANDLER_NAME.SWITCH_EDITOR_WIDTH,
-            },
+            },*/
         ],
         [t]
     );

libs/web/state/portal.ts

@@ -44,6 +44,7 @@ const useModal = () => {
             href: string;
             view?: RichMarkdownEditor['view'];
         }>(),
+        editorWidthSelect: useAnchorInstance<NoteModel>()
     };
 };