diff --git a/apps/mobile/app/components/dialog/dialog-header.tsx b/apps/mobile/app/components/dialog/dialog-header.tsx index c189b650e..d4323353c 100644 --- a/apps/mobile/app/components/dialog/dialog-header.tsx +++ b/apps/mobile/app/components/dialog/dialog-header.tsx @@ -104,7 +104,7 @@ const DialogHeader = ({ title={button.title} icon={button.icon} type={button.type || "secondary"} - height={25} + height={30} /> ) : null} diff --git a/apps/mobile/app/components/dialogs/vault/index.js b/apps/mobile/app/components/dialogs/vault/index.js index 5e00a5f32..184f5b824 100644 --- a/apps/mobile/app/components/dialogs/vault/index.js +++ b/apps/mobile/app/components/dialogs/vault/index.js @@ -394,9 +394,10 @@ export class VaultDialog extends Component { return; } else { await db.vault.add(this.state.note.id); - if (this.state.note.id === editorController.current?.note?.id) { - eSendEvent(eClearEditor); - } + + // if (this.state.note.id === editorController.current?.note?.id) { + // eSendEvent(eClearEditor, ); + // } this.close(); ToastManager.show({ message: "Note locked successfully", @@ -501,9 +502,10 @@ export class VaultDialog extends Component { } if (this.state.note?.id) { await db.vault.add(this.state.note.id); - if (this.state.note.id === editorController.current?.note?.id) { - eSendEvent(eClearEditor); - } + // TODO + // if (this.state.note.id === editorController.current?.note?.id) { + // eSendEvent(eClearEditor); + // } this.setState({ loading: false }); diff --git a/apps/mobile/app/components/list-items/note/index.tsx b/apps/mobile/app/components/list-items/note/index.tsx index 32c164056..180f25bef 100644 --- a/apps/mobile/app/components/list-items/note/index.tsx +++ b/apps/mobile/app/components/list-items/note/index.tsx @@ -33,11 +33,12 @@ import { notesnook } from "../../../../e2e/test.ids"; import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled"; import NotebookScreen from "../../../screens/notebook"; import { TaggedNotes } from "../../../screens/notes/tagged"; -import { useEditorStore } from "../../../stores/use-editor-store"; import useNavigationStore from "../../../stores/use-navigation-store"; import { useRelationStore } from "../../../stores/use-relation-store"; import { SIZE } from "../../../utils/size"; +import { useTabStore } from "../../../screens/editor/tiptap/use-tab-store"; +import { NotebooksWithDateEdited, TagsWithDateEdited } from "@notesnook/common"; import { Properties } from "../../properties"; import { Button } from "../../ui/button"; import { IconButton } from "../../ui/icon-button"; @@ -45,7 +46,6 @@ import { ReminderTime } from "../../ui/reminder-time"; import { TimeSince } from "../../ui/time-since"; import Heading from "../../ui/typography/heading"; import Paragraph from "../../ui/typography/paragraph"; -import { NotebooksWithDateEdited, TagsWithDateEdited } from "@notesnook/common"; type NoteItemProps = { item: Note | BaseTrashItem; @@ -73,8 +73,9 @@ const NoteItem = ({ locked, noOpen = false }: NoteItemProps) => { - const isEditingNote = useEditorStore( - (state) => state.currentEditingNote === item.id + const isEditingNote = useTabStore( + (state) => + state.tabs.find((t) => t.id === state.currentTab)?.noteId === item.id ); const { colors } = useThemeColors(); const compactMode = useIsCompactModeEnabled( diff --git a/apps/mobile/app/components/list-items/note/wrapper.tsx b/apps/mobile/app/components/list-items/note/wrapper.tsx index 8f29191e3..9b99f7cf6 100644 --- a/apps/mobile/app/components/list-items/note/wrapper.tsx +++ b/apps/mobile/app/components/list-items/note/wrapper.tsx @@ -29,7 +29,6 @@ import { openVault, presentSheet } from "../../../services/event-manager"; -import { useEditorStore } from "../../../stores/use-editor-store"; import { useSelectionStore } from "../../../stores/use-selection-store"; import { eOnLoadNote, eShowMergeDialog } from "../../../utils/events"; import { tabBarRef } from "../../../utils/global-refs"; @@ -91,9 +90,6 @@ export const openNote = async ( ) }); } else { - if (note?.readonly) { - useEditorStore.getState().setReadonly(note?.readonly); - } eSendEvent(eOnLoadNote, { item: note }); diff --git a/apps/mobile/app/components/list-items/selection-wrapper/back-fill.tsx b/apps/mobile/app/components/list-items/selection-wrapper/back-fill.tsx index 440702cb6..5a1d3bc31 100644 --- a/apps/mobile/app/components/list-items/selection-wrapper/back-fill.tsx +++ b/apps/mobile/app/components/list-items/selection-wrapper/back-fill.tsx @@ -17,17 +17,18 @@ You should have received a copy of the GNU General Public License along with this program. If not, see . */ +import { Item } from "@notesnook/core"; import { useThemeColors } from "@notesnook/theme"; import React from "react"; import { View } from "react-native"; import useIsSelected from "../../../hooks/use-selected"; -import { useEditorStore } from "../../../stores/use-editor-store"; -import { Item } from "@notesnook/core"; +import { useTabStore } from "../../../screens/editor/tiptap/use-tab-store"; export const Filler = ({ item, color }: { item: Item; color?: string }) => { const { colors } = useThemeColors(); - const isEditingNote = useEditorStore( - (state) => state.currentEditingNote === item.id + const isEditingNote = useTabStore( + (state) => + state.tabs.find((t) => t.id === state.currentTab)?.noteId === item.id ); const [selected] = useIsSelected(item); @@ -41,8 +42,8 @@ export const Filler = ({ item, color }: { item: Item; color?: string }) => { backgroundColor: colors.selected.background, borderLeftWidth: 5, borderLeftColor: isEditingNote - ? item.color - ? colors.static[item.color] + ? color + ? color : colors.selected.accent : "transparent" }} diff --git a/apps/mobile/app/components/merge-conflicts/index.js b/apps/mobile/app/components/merge-conflicts/index.js index 28161113a..28585ad2c 100644 --- a/apps/mobile/app/components/merge-conflicts/index.js +++ b/apps/mobile/app/components/merge-conflicts/index.js @@ -47,6 +47,7 @@ import { Button } from "../ui/button"; import { IconButton } from "../ui/icon-button"; import Seperator from "../ui/seperator"; import Paragraph from "../ui/typography/paragraph"; +import { useTabStore } from "../../screens/editor/tiptap/use-tab-store"; const MergeConflicts = () => { const { colors } = useThemeColors(); @@ -88,10 +89,11 @@ const MergeConflicts = () => { }); } Navigation.queueRoutesForUpdate(); - if (editorController.current?.note?.id === note.id) { + + if (useTabStore.getState().getCurrentNoteId() === note.id) { // reload the note in editor eSendEvent(eOnLoadNote, { - item: editorController.current?.note, + item: editorController.current.note.current[note.id], forced: true }); } diff --git a/apps/mobile/app/components/note-history/preview.js b/apps/mobile/app/components/note-history/preview.js index 186652686..7bcf04c5e 100644 --- a/apps/mobile/app/components/note-history/preview.js +++ b/apps/mobile/app/components/note-history/preview.js @@ -22,10 +22,10 @@ import React, { useEffect, useState } from "react"; import { View } from "react-native"; import { db } from "../../common/database"; import Editor from "../../screens/editor"; +import { useTabStore } from "../../screens/editor/tiptap/use-tab-store"; import { editorController } from "../../screens/editor/tiptap/utils"; import { eSendEvent, ToastManager } from "../../services/event-manager"; import Navigation from "../../services/navigation"; -import { useEditorStore } from "../../stores/use-editor-store"; import { useSelectionStore } from "../../stores/use-selection-store"; import { useTrashStore } from "../../stores/use-trash-store"; import { eCloseSheet, eOnLoadNote } from "../../utils/events"; @@ -58,10 +58,11 @@ export default function NotePreview({ session, content, note }) { return; } await db.noteHistory.restore(session.id); - if (useEditorStore.getState()?.currentEditingNote === session?.noteId) { - if (editorController.current?.note) { + if (useTabStore.getState().hasTabForNote(session?.noteId)) { + const note = editorController.current.note.current[session?.noteId]; + if (note) { eSendEvent(eOnLoadNote, { - item: editorController.current?.note, + item: note, forced: true }); } diff --git a/apps/mobile/app/components/sheets/editor-tabs/index.tsx b/apps/mobile/app/components/sheets/editor-tabs/index.tsx new file mode 100644 index 000000000..7697d99ec --- /dev/null +++ b/apps/mobile/app/components/sheets/editor-tabs/index.tsx @@ -0,0 +1,154 @@ +/* +This file is part of the Notesnook project (https://notesnook.com/) + +Copyright (C) 2023 Streetwriters (Private) Limited + +This program is free software: you can redistribute it and/or modify +it under the terms of the GNU General Public License as published by +the Free Software Foundation, either version 3 of the License, or +(at your option) any later version. + +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +GNU General Public License for more details. + +You should have received a copy of the GNU General Public License +along with this program. If not, see . +*/ +import { useThemeColors } from "@notesnook/theme"; +import React from "react"; +import { View } from "react-native"; +import { useDBItem } from "../../../hooks/use-db-item"; +import { presentSheet } from "../../../services/event-manager"; +import { SIZE } from "../../../utils/size"; +import { Button } from "../../ui/button"; +import { IconButton } from "../../ui/icon-button"; +import { PressableButton } from "../../ui/pressable"; +import Paragraph from "../../ui/typography/paragraph"; +import Heading from "../../ui/typography/heading"; +import { useTabStore } from "../../../screens/editor/tiptap/use-tab-store"; + +type TabItem = { + id: number; + noteId?: string; +}; + +const TabItemComponent = (props: { + tab: TabItem; + isFocused: boolean; + close?: (ctx?: string | undefined) => void; +}) => { + const { colors } = useThemeColors(); + const [item] = useDBItem(props.tab.noteId, "note"); + + return ( + { + if (!props.isFocused) { + useTabStore.getState().focusTab(props.tab.id); + } + }} + > + + + {item?.title || "New note"} + + + + { + useTabStore.getState().removeTab(props.tab.id); + }} + top={0} + left={0} + right={20} + bottom={0} + /> + + ); +}; + +export default function EditorTabs({ + close +}: { + close?: (ctx?: string | undefined) => void; +}) { + const [tabs, currentTab] = useTabStore((state) => [ + state.tabs, + state.currentTab + ]); + + return ( + + + Tabs + + +