The Bold Editor is a Standard Notes derived editor that offers text formatting and FileSafe integration.
npm install sn-bold-editorbold-editor folder, edit the package.json file under devDependencies to use the local filesafe-embed:
json
"filesafe-embed": "~/folder_with_both_repositories/filesafe-embed",
`
4. Run npm i in both the bold-editor and filesafe-embed folders to install the required dependencies.
- If there are errors, delete the package-lock.json file and node_modules folder. Then run npm i again. (source)
5. Edit app/index.html for use locally:
- comment out lines under 'Production'
- uncomment lines under 'Development'
`html
`
6. Run npm run build to build the files.
6. Run npm i -g http-server to install a simple local server to host the extension.
7. Choose between webpack Watch Mode and webpack-dev-server for development and follow the corresponding instructions.
Development with webpack Watch Mode (recommended)
Start by following the instructions here: https://docs.standardnotes.org/extensions/local-setup. Included in the repository is an ext.json.sample file that can be used in the setup.
This will setup a local server from which the bold-editor can be imported via the desktop app or the web app. You should be able to use the bold-editor now.
However, this will not allow for easy development because the app will not automatically build to the dist folder. We will use webpack for this.
1. Use npm run watch to automatically build files.
- There should be an existing console open that is running http-server
- Open a new console for npm run watch
2. Disable the cache on the desktop app/web app.
- We want to ensure that the latest build is always loaded when the app is refreshed
- Open devtools (Ctrl+Shift+i) and go to Network
- Check Disable cache
- On some systems, devtools must be kept open for this to work
3. Make some changes to Editor.js, reload the desktop or web app, and your changes will show up.
Development with webpack-dev-server
Note that this method only actively builds app.min.js.
The steps are similar to the webpack Watch Mode, differences are listed below:
- The ext.json file belongs in the dist folder
- Update the url to http://localhost:8080
- npm run start to use the webpack-dev-server.
Disable the cache as in the webpack Watch Mode. Reload may be required to see changes in action.
Production
In production environments, check that the index.html file is configured as follows:
`html
`
dist.min.js is built via grunt.
The CSS is also built with grunt, so webpack-dev-server will not be able to reload it. You must run npm run build` anytime you change the CSS.