diff --git a/components/icon-button.tsx b/components/icon-button.tsx index 00102cf..73962b1 100644 --- a/components/icon-button.tsx +++ b/components/icon-button.tsx @@ -42,6 +42,7 @@ export const ICONS = { Puzzle: PuzzleIcon, ChevronDoubleUp: ChevronDoubleUpIcon, Refresh: RefreshIcon, + WidthSize: (props: any) => }; const IconButton = forwardRef< diff --git a/components/layout/layout-main.tsx b/components/layout/layout-main.tsx index d8380a5..b49edbc 100644 --- a/components/layout/layout-main.tsx +++ b/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<{ + ); diff --git a/components/note-nav.tsx b/components/note-nav.tsx index 296dc5f..721484e 100644 --- a/components/note-nav.tsx +++ b/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" /> + + + + { + const { t } = useI18n(); + const { + editorWidthSelect: { close, anchor, data, visible }, + } = PortalState.useContainer(); + const { mutateNote } = NoteState.useContainer(); + + const items: Array = [ + { + 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 ( + + {items.map((item) => + setTo(item.value)}> + {item.text} + + )} + + ); +}; + +export default EditorWidthSelect; \ No newline at end of file diff --git a/components/portal/sidebar-menu/sidebar-menu.tsx b/components/portal/sidebar-menu/sidebar-menu.tsx index bdcd4cf..a2a72db 100644 --- a/components/portal/sidebar-menu/sidebar-menu.tsx +++ b/components/portal/sidebar-menu/sidebar-menu.tsx @@ -46,12 +46,12 @@ const SidebarMenu: FC = () => { return item?.pinned === NOTE_PINNED.PINNED; }, }, - { - text: t('Toggle width'), // TODO(i18n): Change this to 'Switch width' - // TODO: or SwitchHorizontal? + // Replaced by dedicated window + /*{ + text: t('Toggle width'), icon: , handler: MENU_HANDLER_NAME.SWITCH_EDITOR_WIDTH, - }, + },*/ ], [t] ); diff --git a/libs/web/state/portal.ts b/libs/web/state/portal.ts index 7d23bad..31bc320 100644 --- a/libs/web/state/portal.ts +++ b/libs/web/state/portal.ts @@ -44,6 +44,7 @@ const useModal = () => { href: string; view?: RichMarkdownEditor['view']; }>(), + editorWidthSelect: useAnchorInstance() }; };