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 (
+
+ );
+};
+
+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()
};
};