From a9d44c9f818ab509bb1d2a1246bc79f73cc0db76 Mon Sep 17 00:00:00 2001 From: Ella Date: Sat, 8 Jun 2024 18:48:40 +0300 Subject: [PATCH] Remove cjs, other reorg --- README.md | 31 ++---- package-lock.json | 26 +++++ package.json | 2 + playwright.config.js | 11 +- src/js/components.jsx | 248 +++++++++++++++++++++--------------------- tests/mock.spec.js | 18 +-- vite.config.ts | 3 + 7 files changed, 170 insertions(+), 169 deletions(-) diff --git a/README.md b/README.md index 244b7d7..57cce6a 100644 --- a/README.md +++ b/README.md @@ -1,26 +1,13 @@ # Blocknotes -Uses [Capacitor](https://capacitorjs.com) to create the native apps from a PWA. -A modified version of `@capacitor/filesystem` is used to save files to your -iCloud folder and the file system for web (PWA). By default -`@capacitor/filesystem` saves to indexDB on the web, and a _local_ folder on -iOS, so this package is heavily adjusted and should probably be rewritten as a -custom Capacitor plugin. +After cloning the repository and `npm install`, you can run `npm start` to run a +local server with the dev files. -Builds into the `dist` directory: +Running the iOS and macOS apps is a bit slower, since it needs the `dist` files. +You can build the `dist` directory with `npm run build`, then `npx cap sync` to +sync the files to the `ios` directory. Open Xcode with `npx cap open ios`. -``` -npm run build -``` - -Syncs the the build to `ios`: - -``` -npx cap sync -``` - -Open Xcode: - -``` -npx cap open ios -``` +It uses [Capacitor](https://capacitorjs.com) to create the native apps from the +PWA. A modified version of `@capacitor/filesystem` is used to allow picking any +directory in the local filesystem. By default `@capacitor/filesystem` saves to +indexDB on the web, and a hidden app folder on iOS/macOS. diff --git a/package-lock.json b/package-lock.json index 76e8885..a55a166 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "@wordpress/components": "^28.0.0", "@wordpress/compose": "^7.0.0", "@wordpress/data": "^10.0.0", + "@wordpress/dataviews": "^2.0.0", "@wordpress/format-library": "^5.0.0", "@wordpress/i18n": "^5.0.0", "@wordpress/icons": "^10.0.0", @@ -5376,6 +5377,31 @@ "react": "^18.0.0" } }, + "node_modules/@wordpress/dataviews": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@wordpress/dataviews/-/dataviews-2.0.0.tgz", + "integrity": "sha512-8ueWXSjDuKp67fbPkIibX4a3Q2rBtT+iNT0Tk6hLLHvkK9RNF6GWddoGF2TUDhZAn6PFkrqEtovclfVqohKZOA==", + "dependencies": { + "@ariakit/react": "^0.3.12", + "@babel/runtime": "^7.16.0", + "@wordpress/components": "^28.0.0", + "@wordpress/compose": "^7.0.0", + "@wordpress/element": "^6.0.0", + "@wordpress/i18n": "^5.0.0", + "@wordpress/icons": "^10.0.0", + "@wordpress/primitives": "^4.0.0", + "@wordpress/private-apis": "^1.0.0", + "clsx": "^2.1.1", + "remove-accents": "^0.5.0" + }, + "engines": { + "node": ">=18.12.0", + "npm": ">=8.19.2" + }, + "peerDependencies": { + "react": "^18.0.0" + } + }, "node_modules/@wordpress/date": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/@wordpress/date/-/date-5.0.0.tgz", diff --git a/package.json b/package.json index 41a4f21..f9cb3b3 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "1.0.0", "description": "Blocknotes", "main": "index.js", + "type": "module", "scripts": { "start": "vite", "build": "vite build", @@ -26,6 +27,7 @@ "@wordpress/components": "^28.0.0", "@wordpress/compose": "^7.0.0", "@wordpress/data": "^10.0.0", + "@wordpress/dataviews": "^2.0.0", "@wordpress/format-library": "^5.0.0", "@wordpress/i18n": "^5.0.0", "@wordpress/icons": "^10.0.0", diff --git a/playwright.config.js b/playwright.config.js index 52a0374..5c20b8c 100644 --- a/playwright.config.js +++ b/playwright.config.js @@ -1,16 +1,9 @@ -// @ts-check -const { defineConfig, devices } = require('@playwright/test'); - -/** - * Read environment variables from file. - * https://github.com/motdotla/dotenv - */ -// require('dotenv').config(); +import { defineConfig, devices } from '@playwright/test'; /** * @see https://playwright.dev/docs/test-configuration */ -module.exports = defineConfig({ +export default defineConfig({ testDir: './tests', /* Run tests in files in parallel */ fullyParallel: true, diff --git a/src/js/components.jsx b/src/js/components.jsx index 934fff8..d8e6027 100644 --- a/src/js/components.jsx +++ b/src/js/components.jsx @@ -3,6 +3,7 @@ import { Filesystem, Encoding } from '@capacitor/filesystem'; import { getPaths } from './get-data.js'; import React, { useState, useEffect, useRef, useCallback } from 'react'; +import { createPortal } from 'react-dom'; import { registerCoreBlocks } from '@wordpress/block-library'; import { useStateWithHistory } from '@wordpress/compose'; import { @@ -176,7 +177,7 @@ function useUpdateFile({ selectedFolderURL, currentPath }) { }, 1000); } -function Editor({ state, setNote, notesSelect }) { +function Editor({ state, setNote }) { // To do: lift up and keep track of history for all notes. const { value, setValue, hasRedo, hasUndo, redo, undo } = useStateWithHistory(state); @@ -202,36 +203,30 @@ function Editor({ state, setNote, notesSelect }) { }, }} > -
- {notesSelect} - - undo()} - disabled={!hasUndo} - /> - redo()} - disabled={!hasRedo} - /> - - -
+ {createPortal( + <> + + undo()} + disabled={!hasUndo} + /> + redo()} + disabled={!hasRedo} + /> + + + , + document.getElementById('select') + )}
{ if ( (event.ctrlKey || event.metaKey) && @@ -270,16 +265,7 @@ padding: 1px 1em; ); } -function Note({ - note, - setNote, - paths, - setPaths, - currentPath, - setCurrentPath, - selectedFolderURL, - setSelectedFolderURL, -}) { +function Note({ note, setNote, currentPath, selectedFolderURL }) { let selection; if (!currentPath.path) { @@ -303,79 +289,6 @@ function Note({ } }, [updateFile, note]); - function _setCurrentPath(path) { - if (path === currentPath) { - return; - } - setCurrentPath(path); - setNote(); - } - const notesSelect = ( - - {({ onClose }) => ( - <> - - { - const newPath = {}; - setPaths([newPath, ...paths]); - _setCurrentPath(newPath); - onClose(); - }} - > - {__('New Note')} - - - - {paths.map((path) => ( - { - _setCurrentPath(path); - onClose(); - }} - className={ - path === currentPath ? 'is-active' : '' - } - > - {path === currentPath ? ( - getTitleFromBlocks(note) || ( - {__('Untitled')} - ) - ) : ( - - )} - </MenuItem> - ))} - </MenuGroup> - <MenuGroup> - <MenuItem - onClick={async () => { - setSelectedFolderURL(await pick()); - onClose(); - }} - > - {__('Pick Folder')} - </MenuItem> - <MenuItem - onClick={async () => { - setSelectedFolderURL(); - }} - > - {__('Forget Folder')} - </MenuItem> - </MenuGroup> - </> - )} - </DropdownMenu> - ); return ( <Editor key={getUniqueId(currentPath)} @@ -383,7 +296,6 @@ function Note({ setNote={setNote} currentPath={currentPath} selectedFolderURL={selectedFolderURL} - notesSelect={notesSelect} /> ); } @@ -413,20 +325,104 @@ function MaybeNote({ setNote([createBlock('core/paragraph')]); } }, [currentPath, selectedFolderURL]); - if (!note) { - return null; + function _setCurrentPath(path) { + if (path === currentPath) { + return; + } + setCurrentPath(path); + setNote(); } return ( - <Note - note={note} - setNote={setNote} - paths={paths} - setPaths={setPaths} - currentPath={currentPath} - setCurrentPath={setCurrentPath} - selectedFolderURL={selectedFolderURL} - setSelectedFolderURL={setSelectedFolderURL} - /> + <> + <div id="select" className="components-accessible-toolbar"> + <DropdownMenu + className="blocknotes-select" + icon={chevronDown} + label={__('Notes')} + toggleProps={{ + children: __('Notes'), + }} + > + {({ onClose }) => ( + <> + <MenuGroup> + <MenuItem + onClick={() => { + const newPath = {}; + setPaths([newPath, ...paths]); + _setCurrentPath(newPath); + onClose(); + }} + > + {__('New Note')} + </MenuItem> + </MenuGroup> + <MenuGroup> + {paths.map((path) => ( + <MenuItem + key={path.path} + onClick={() => { + _setCurrentPath(path); + onClose(); + }} + className={ + path === currentPath + ? 'is-active' + : '' + } + > + {path === currentPath ? ( + getTitleFromBlocks(note) || ( + <em>{__('Untitled')}</em> + ) + ) : ( + <Title path={path.path} /> + )} + </MenuItem> + ))} + </MenuGroup> + <MenuGroup> + <MenuItem + onClick={async () => { + setSelectedFolderURL(await pick()); + onClose(); + }} + > + {__('Pick Folder')} + </MenuItem> + <MenuItem + onClick={async () => { + setSelectedFolderURL(); + }} + > + {__('Forget Folder')} + </MenuItem> + </MenuGroup> + </> + )} + </DropdownMenu> + </div> + <div + id="editor" + style={{ + position: 'relative', + overflow: 'auto', + height: '100%', + width: '100%', + display: 'flex', + flexDirection: 'column', + }} + > + {note && ( + <Note + note={note} + setNote={setNote} + currentPath={currentPath} + selectedFolderURL={selectedFolderURL} + /> + )} + </div> + </> ); } diff --git a/tests/mock.spec.js b/tests/mock.spec.js index 6c88e06..94283b9 100644 --- a/tests/mock.spec.js +++ b/tests/mock.spec.js @@ -1,12 +1,6 @@ -const { - describe, - beforeEach, - afterEach, - test, - expect, -} = require('@playwright/test'); -const fs = require('fs'); -const path = require('path'); +import { test, expect } from '@playwright/test'; +import fs from 'fs'; +import path from 'path'; const fsaMockPath = path.resolve( 'node_modules', @@ -40,8 +34,8 @@ async function isFile(page, _path) { }, _path); } -describe('Blocknotes', () => { - beforeEach(async ({ page }) => { +test.describe('Blocknotes', () => { + test.beforeEach(async ({ page }) => { await page.addInitScript(fsaMockScript); await page.addInitScript(() => { const { mock } = window.fsaMock; @@ -56,7 +50,7 @@ describe('Blocknotes', () => { }); }); - afterEach(async ({ page }) => { + test.afterEach(async ({ page }) => { await page.evaluate(() => { const { mock } = window.fsaMock; mock.uninstall(); diff --git a/vite.config.ts b/vite.config.ts index 86787f5..bf82db9 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -8,4 +8,7 @@ export default defineConfig({ emptyOutDir: true, }, publicDir: '../public', + server: { + hmr: false, + }, });