diff --git a/package-lock.json b/package-lock.json index a59d0a1..4266aa1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,17 +16,21 @@ "@types/node": "^12.20.33", "@types/react": "^17.0.30", "@types/react-dom": "^17.0.9", + "classnames": "^2.3.1", + "history": "^5.1.0", "lodash": "^4.17.21", "nanoid": "^3.1.30", "react": "^17.0.2", "react-dom": "^17.0.2", "react-flip-toolkit": "^7.0.13", + "react-router-dom": "^6.0.2", "react-scripts": "4.0.3", "styled-components": "^5.3.1", "typescript": "^4.4.4", "web-vitals": "^1.1.2" }, "devDependencies": { + "@types/styled-components": "^5.1.15", "autoprefixer": "^9.8.8", "postcss": "^7.0.39", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17" @@ -3455,6 +3459,16 @@ "@types/node": "*" } }, + "node_modules/@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "dev": true, + "dependencies": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "node_modules/@types/html-minifier-terser": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz", @@ -3581,6 +3595,17 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz", "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==" }, + "node_modules/@types/styled-components": { + "version": "5.1.15", + "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.15.tgz", + "integrity": "sha512-4evch8BRI3AKgb0GAZ/sn+mSeB+Dq7meYtMi7J/0Mg98Dt1+r8fySOek7Sjw1W+Wskyjc93565o5xWAT/FdY0Q==", + "dev": true, + "dependencies": { + "@types/hoist-non-react-statics": "*", + "@types/react": "*", + "csstype": "^3.0.2" + } + }, "node_modules/@types/tapable": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz", @@ -5859,6 +5884,11 @@ "node": ">=0.10.0" } }, + "node_modules/classnames": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", + "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" + }, "node_modules/clean-css": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz", @@ -9834,6 +9864,14 @@ "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==" }, + "node_modules/history": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.1.0.tgz", + "integrity": "sha512-zPuQgPacm2vH2xdORvGGz1wQMuHSIB56yNAy5FnLuwOwgSYyPKptJtcMm6Ev+hRGeS+GzhbmRacHzvlESbFwDg==", + "dependencies": { + "@babel/runtime": "^7.7.6" + } + }, "node_modules/hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -16463,6 +16501,30 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.0.2.tgz", + "integrity": "sha512-8/Wm3Ed8t7TuedXjAvV39+c8j0vwrI5qVsYqjFr5WkJjsJpEvNSoLRUbtqSEYzqaTUj1IV+sbPJxvO+accvU0Q==", + "dependencies": { + "history": "^5.1.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.0.2.tgz", + "integrity": "sha512-cOpJ4B6raFutr0EG8O/M2fEoyQmwvZWomf1c6W2YXBZuFBx8oTk/zqjXghwScyhfrtnt0lANXV2182NQblRxFA==", + "dependencies": { + "history": "^5.1.0", + "react-router": "6.0.2" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.3.tgz", @@ -24388,6 +24450,16 @@ "@types/node": "*" } }, + "@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "dev": true, + "requires": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "@types/html-minifier-terser": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz", @@ -24514,6 +24586,17 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz", "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==" }, + "@types/styled-components": { + "version": "5.1.15", + "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.15.tgz", + "integrity": "sha512-4evch8BRI3AKgb0GAZ/sn+mSeB+Dq7meYtMi7J/0Mg98Dt1+r8fySOek7Sjw1W+Wskyjc93565o5xWAT/FdY0Q==", + "dev": true, + "requires": { + "@types/hoist-non-react-statics": "*", + "@types/react": "*", + "csstype": "^3.0.2" + } + }, "@types/tapable": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz", @@ -26323,6 +26406,11 @@ } } }, + "classnames": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", + "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" + }, "clean-css": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz", @@ -29368,6 +29456,14 @@ "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==" }, + "history": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.1.0.tgz", + "integrity": "sha512-zPuQgPacm2vH2xdORvGGz1wQMuHSIB56yNAy5FnLuwOwgSYyPKptJtcMm6Ev+hRGeS+GzhbmRacHzvlESbFwDg==", + "requires": { + "@babel/runtime": "^7.7.6" + } + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -34474,6 +34570,23 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==" }, + "react-router": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.0.2.tgz", + "integrity": "sha512-8/Wm3Ed8t7TuedXjAvV39+c8j0vwrI5qVsYqjFr5WkJjsJpEvNSoLRUbtqSEYzqaTUj1IV+sbPJxvO+accvU0Q==", + "requires": { + "history": "^5.1.0" + } + }, + "react-router-dom": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.0.2.tgz", + "integrity": "sha512-cOpJ4B6raFutr0EG8O/M2fEoyQmwvZWomf1c6W2YXBZuFBx8oTk/zqjXghwScyhfrtnt0lANXV2182NQblRxFA==", + "requires": { + "history": "^5.1.0", + "react-router": "6.0.2" + } + }, "react-scripts": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.3.tgz", diff --git a/package.json b/package.json index f2de810..7cefc0a 100644 --- a/package.json +++ b/package.json @@ -12,18 +12,21 @@ "@types/node": "^12.20.33", "@types/react": "^17.0.30", "@types/react-dom": "^17.0.9", + "classnames": "^2.3.1", + "history": "^5.1.0", "lodash": "^4.17.21", "nanoid": "^3.1.30", "react": "^17.0.2", "react-dom": "^17.0.2", "react-flip-toolkit": "^7.0.13", + "react-router-dom": "^6.0.2", "react-scripts": "4.0.3", "styled-components": "^5.3.1", "typescript": "^4.4.4", "web-vitals": "^1.1.2" }, "scripts": { - "start": "craco start", + "start": "TAILWIND_MODE=watch craco start", "build": "craco build", "test": "craco test", "eject": "react-scripts eject" @@ -47,6 +50,7 @@ ] }, "devDependencies": { + "@types/styled-components": "^5.1.15", "autoprefixer": "^9.8.8", "postcss": "^7.0.39", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17" diff --git a/public/index.html b/public/index.html index ef5a8e3..5fca2a1 100644 --- a/public/index.html +++ b/public/index.html @@ -5,10 +5,7 @@ - + - React App + notes app diff --git a/src/App.tsx b/src/App.tsx index c424059..4da7402 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,13 +1,12 @@ import { useEffect, useState } from "react"; -import { Flipper } from "react-flip-toolkit"; -import ContentEditable from "./components/ContentEditable"; -import NotesComponent from "./components/NotesComponent"; +import { BrowserRouter, Routes, Route } from "react-router-dom"; +import NotesPage from "./components/NotesPage"; import { NotesModel } from "./noteModel/NotesModel"; import { SubscribableStore } from "./noteModel/SubscribableStore"; import { loadNotes, saveNotes } from "./utils/autoSaveSingleton"; export default function App() { - const [refresh, setRefresh] = useState(0); + const [, setRefresh] = useState(0); const [notesModel, setNotesModel] = useState(null as NotesModel | null); useEffect(() => { @@ -44,52 +43,15 @@ export default function App() { return null; } - const rootNote = notesModel.getOne("ROOT")!; - return ( - <> -
- notesModel.updateNoteText(rootNote._id, value)} - onEnter={() => {}} - onDelete={() => {}} - onFocusTriggered={() => {}} - onIndent={() => {}} - onOutdent={() => {}} - onSelectPrevious={() => {}} - onSelectNext={() => {}} - onExpand={() => {}} - onCollapse={() => {}} + + + } /> + } /> -
-
- - - -
- + + ); } diff --git a/src/components/BackButton.tsx b/src/components/BackButton.tsx new file mode 100644 index 0000000..f76ca8c --- /dev/null +++ b/src/components/BackButton.tsx @@ -0,0 +1,32 @@ +import { useNavigate } from "react-router-dom"; +import classNames from "classnames"; + +export default function BackButton() { + const navigate = useNavigate(); + return ( + + ); +} diff --git a/src/components/ExpandButton.tsx b/src/components/ExpandButton.tsx index f2827c7..433ef2e 100644 --- a/src/components/ExpandButton.tsx +++ b/src/components/ExpandButton.tsx @@ -20,6 +20,7 @@ export default function ExpandIcon({ viewBox="0 0 24 24" stroke="currentColor" > + Collapse + Expand + +
+ {mainNote._id !== "ROOT" && } + + notesModel.updateNoteText(mainNote._id, value) + } + onEnter={() => { + notesModel.addNoteBelow(mainNote._id, true); + }} + onDelete={() => {}} + onFocusTriggered={() => {}} + onIndent={() => {}} + onOutdent={() => {}} + onSelectPrevious={() => {}} + onSelectNext={() => {}} + onExpand={() => {}} + onCollapse={() => {}} + /> +
+
+ + ); +} diff --git a/src/components/NoteMenu.tsx b/src/components/NoteMenu.tsx new file mode 100644 index 0000000..3a0d108 --- /dev/null +++ b/src/components/NoteMenu.tsx @@ -0,0 +1,52 @@ +import styled from "styled-components"; + +interface NoteMenuProps { + isPage: boolean; + onToggleIsPage: () => void; +} + +export default function NoteMenu({ isPage, onToggleIsPage }: NoteMenuProps) { + console.log("render NoteMenu"); + return ( + + {isPage ? ( + + Turn Note into Page + + + ) : ( + + Turn Page into Note + + + )} + + ); +} + +const StyledButton = styled.button` + position: absolute; + left: -54px; + z-index: 1; +`; diff --git a/src/components/NotesComponent.tsx b/src/components/NotesComponent.tsx index 289b8e1..74fc019 100644 --- a/src/components/NotesComponent.tsx +++ b/src/components/NotesComponent.tsx @@ -2,74 +2,69 @@ import { NotesModel } from "../noteModel/NotesModel"; import { Flipped } from "react-flip-toolkit"; import ContentEditable from "./ContentEditable"; import ExpandIcon from "./ExpandButton"; +import PageLink from "./PageLink"; +import NoteMenu from "./NoteMenu"; interface NoteProps { notesModel: NotesModel; id: string; - onUpdateNote: (id: string, value: string) => void; - onAddNote: (id: string) => void; - onDeleteNote: (id: string) => void; - onFocusTriggered: (id: string) => void; - onIndentNote: (id: string) => void; - onOutdentNote: (id: string) => void; - onSelectPreviousNote: (id: string) => void; - onSelectNextNote: (id: string) => void; - onExpandNote: (id: string) => void; - onCollapseNote: (id: string) => void; } -export default function NotesComponent({ - notesModel, - id, - onUpdateNote, - onAddNote, - onDeleteNote, - onFocusTriggered, - onIndentNote, - onOutdentNote, - onSelectPreviousNote, - onSelectNextNote, - onExpandNote, - onCollapseNote, -}: NoteProps) { +export default function NotesComponent({ notesModel, id }: NoteProps) { const note = notesModel.getOne(id); if (!note) { console.error("Note not found", id); return null; } - return (
  • - + { + element.animate([{ opacity: 0 }, { opacity: 1 }], { + duration: 500, + fill: "forwards", + }); + }} + >
    0 ? "border-l-4 border-blue-700 dark:border-green-600" : "") } > + notesModel.toggleIsPage(note._id)} + /> + {note.isPage ? ( + + ) : ( +
    + )} onUpdateNote(note._id, value)} - onEnter={() => onAddNote(note._id)} - onDelete={() => onDeleteNote(note._id)} - onFocusTriggered={() => onFocusTriggered(note._id)} - onIndent={() => onIndentNote(note._id)} - onOutdent={() => onOutdentNote(note._id)} - onSelectPrevious={() => onSelectPreviousNote(note._id)} - onSelectNext={() => onSelectNextNote(note._id)} - onExpand={() => onExpandNote(note._id)} - onCollapse={() => onCollapseNote(note._id)} + onNewValue={(value) => notesModel.updateNoteText(note._id, value)} + onEnter={() => notesModel.addNoteBelow(note._id, false)} + onDelete={() => notesModel.deleteNote(note._id)} + onFocusTriggered={() => notesModel.removeNeedsFocus(note._id)} + onIndent={() => notesModel.indentNote(note._id)} + onOutdent={() => notesModel.outdentNote(note._id)} + onSelectPrevious={() => notesModel.selectPrevious(note._id)} + onSelectNext={() => notesModel.selectNext(note._id)} + onExpand={() => notesModel.expandNote(note._id)} + onCollapse={() => notesModel.collapseNote(note._id)} /> {note.childrenIds.length > 0 && ( onExpandNote(note._id)} - onCollapse={() => onCollapseNote(note._id)} + onExpand={() => notesModel.expandNote(note._id)} + onCollapse={() => notesModel.collapseNote(note._id)} /> )}
    @@ -81,16 +76,6 @@ export default function NotesComponent({ key={childId} notesModel={notesModel} id={childId} - onUpdateNote={onUpdateNote} - onAddNote={onAddNote} - onDeleteNote={onDeleteNote} - onFocusTriggered={onFocusTriggered} - onIndentNote={onIndentNote} - onOutdentNote={onOutdentNote} - onSelectPreviousNote={onSelectPreviousNote} - onSelectNextNote={onSelectNextNote} - onExpandNote={onExpandNote} - onCollapseNote={onCollapseNote} /> ))} diff --git a/src/components/NotesPage.tsx b/src/components/NotesPage.tsx new file mode 100644 index 0000000..ed70e00 --- /dev/null +++ b/src/components/NotesPage.tsx @@ -0,0 +1,41 @@ +import classNames from "classnames"; +import { useEffect } from "react"; +import { Flipper } from "react-flip-toolkit"; +import { useLocation, useParams } from "react-router-dom"; +import { NotesModel } from "../noteModel/NotesModel"; +import { Header } from "./Header"; +import NotesComponent from "./NotesComponent"; + +interface NotesPageProps { + notesModel: NotesModel; +} + +export default function NotesPage({ notesModel }: NotesPageProps) { + const { pathname } = useLocation(); + useEffect(() => { + window.scrollTo(0, 0); + }, [pathname]); + + let { mainNoteId } = useParams(); + if (!mainNoteId) { + mainNoteId = "ROOT"; + } + const mainNote = notesModel.getOne(mainNoteId); + + if (!mainNote) { + return
    Not found
    ; + } + + return ( + +
    +
    +
      + {mainNote.childrenIds.map((id) => ( + + ))} +
    +
    + + ); +} diff --git a/src/components/PageLink.tsx b/src/components/PageLink.tsx new file mode 100644 index 0000000..56bed89 --- /dev/null +++ b/src/components/PageLink.tsx @@ -0,0 +1,28 @@ +import { Link } from "react-router-dom"; + +interface PageLinkProps { + to: string; +} + +export default function PageLink({ to }: PageLinkProps) { + return ( + + + Open as Page + + + + ); +} diff --git a/src/index.tsx b/src/index.tsx index ef2edf8..ad9cbbb 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,14 +1,14 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; +import React from "react"; +import ReactDOM from "react-dom"; +import "./index.css"; +import App from "./App"; +import reportWebVitals from "./reportWebVitals"; ReactDOM.render( , - document.getElementById('root') + document.getElementById("root") ); // If you want to start measuring performance in your app, pass a function diff --git a/src/noteModel/NotesModel.ts b/src/noteModel/NotesModel.ts index 2655673..8985539 100644 --- a/src/noteModel/NotesModel.ts +++ b/src/noteModel/NotesModel.ts @@ -124,7 +124,7 @@ export class NotesModel { }); } - addNoteBelow(sponsoringNoteId: string) { + addNoteBelow(sponsoringNoteId: string, alwaysAsChild: boolean) { this.transactionManager.runTransaction((transaction) => { const sponsoringNote = transaction.getOne(sponsoringNoteId); if (!sponsoringNote) { @@ -143,7 +143,10 @@ export class NotesModel { transaction.addOne(newNote); // if the sponsoring note has expanded children, add new note to the top of the children - if (sponsoringNote.isExpanded && sponsoringNote.childrenIds.length > 0) { + if ( + alwaysAsChild || + (sponsoringNote.isExpanded && sponsoringNote.childrenIds.length > 0) + ) { transaction.patchOne(sponsoringNoteId, { childrenIds: [newNote._id, ...sponsoringNote.childrenIds], }); @@ -333,4 +336,12 @@ export class NotesModel { }); }); } + + toggleIsPage(id: string) { + this.transactionManager.runTransaction((transaction) => { + transaction.patchOne(id, (note) => ({ + isPage: !note.isPage, + })); + }); + } } diff --git a/src/noteModel/initialNotes.ts b/src/noteModel/initialNotes.ts index fdef72f..9a3a5c4 100644 --- a/src/noteModel/initialNotes.ts +++ b/src/noteModel/initialNotes.ts @@ -4,7 +4,13 @@ export const initialNotes: Note[] = [ { _id: "ROOT", text: "I am Groot!", - childrenIds: ["2", "3", "5"], + childrenIds: [ + "2", + "3", + "5", + "e7Gh8g7hXE9-jDnPKYTPQ", + "wh7GpX3LY2p_dsagiCo-L", + ], isExpanded: true, }, { @@ -15,25 +21,78 @@ export const initialNotes: Note[] = [ }, { _id: "2", - text: "This is a note", + text: "Hello,", childrenIds: [], isExpanded: true, + isPage: false, }, { _id: "3", - text: "This is another note", - childrenIds: ["4"], + text: "Welcome to a new way of note taking ", + childrenIds: ["4", "XhuyzNJtehlngZbsKe8vp", "qGsn9pjYGVRSUsQ7pGxhU"], isExpanded: true, + isPage: false, }, { _id: "4", - text: "This is another note", + text: "This doesn't do much now", childrenIds: [], isExpanded: true, }, { _id: "5", - text: "This is another note what???", + text: "Enjoy the app...", + childrenIds: [], + isExpanded: true, + }, + { + _id: "XhuyzNJtehlngZbsKe8vp", + text: "But maybe, it will one day", + childrenIds: [], + isExpanded: true, + }, + { + _id: "qGsn9pjYGVRSUsQ7pGxhU", + text: "Behind this are hidden notes", + childrenIds: ["F23J4bS6dmM46VxaKTA6_", "fzYIQVGPfCG0_PepGu9yt"], + isExpanded: false, + isPage: true, + }, + { + _id: "F23J4bS6dmM46VxaKTA6_", + text: "Isn't this fun?", + childrenIds: ["jAwojYlHuHWT6StVeq-Ab"], + isExpanded: true, + isPage: true, + }, + { + _id: "jAwojYlHuHWT6StVeq-Ab", + text: "yes it is 🕺", + childrenIds: [], + isExpanded: true, + }, + { + _id: "fzYIQVGPfCG0_PepGu9yt", + text: "some more hidden notes hiding here...", + childrenIds: ["YtrXgja7v61bwTDffPS3k"], + isExpanded: false, + isPage: false, + }, + { + _id: "e7Gh8g7hXE9-jDnPKYTPQ", + text: "Your words here...", + childrenIds: [], + isExpanded: true, + }, + { + _id: "wh7GpX3LY2p_dsagiCo-L", + text: "", + childrenIds: [], + isExpanded: true, + }, + { + _id: "YtrXgja7v61bwTDffPS3k", + text: "I am a big secret", childrenIds: [], isExpanded: true, }, diff --git a/src/noteModel/types.ts b/src/noteModel/types.ts index 57d053f..df73bee 100644 --- a/src/noteModel/types.ts +++ b/src/noteModel/types.ts @@ -4,4 +4,5 @@ export interface Note { childrenIds: string[]; isExpanded: boolean; needsFocus?: true; + isPage?: boolean; } diff --git a/tailwind.config.js b/tailwind.config.js index 53f8afd..61e0fed 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,5 +1,6 @@ module.exports = { - purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"], + mode: "jit", + purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/**/*.html"], darkMode: "media", // or 'media' or 'class' theme: { extend: {},