README
Bold Editor
The Bold Editor is a Standard Notes derived editor that offers text formatting and FileSafe integration.
Local Installation
Get a full working copy of the editor (with FileSafe) for development.
Clone the bold-editor and filesafe-embed repositories from GitHub.
Ensure that either the Standard Notes desktop app is available for use or the web app is accessible. Use both locally or with an Extended account (or the extension will not load).
In the
bold-editor
folder, edit thepackage.json
file underdevDependencies
to use the localfilesafe-embed
:"filesafe-embed": "~/folder_with_both_repositories/filesafe-embed",
Run
npm i
in both thebold-editor
andfilesafe-embed
folders to install the required dependencies.- If there are errors, delete the
package-lock.json
file andnode_modules
folder. Then runnpm i
again. (source)
- If there are errors, delete the
Edit
app/index.html
for use locally:- comment out lines under 'Production'
- uncomment lines under 'Development'
<!-- Development --> <script type="text/javascript" src="redactor.min.js"></script> <script type="text/javascript" src="app.min.js"></script> <!-- Production --> <!--<script type="text/javascript" src="dist.min.js"></script>-->
Run
npm run build
to build the files.Run
npm i -g http-server
to install a simple local server to host the extension.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.
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
- There should be an existing console open that is running
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 toNetwork
- Check
Disable cache
- On some systems, devtools must be kept open for this to work
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 thedist
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:
<!-- Development -->
<!-- <script type="text/javascript" src="redactor.min.js"></script>
<script type="text/javascript" src="app.min.js"></script> -->
<!-- Production -->
<script type="text/javascript" src="dist.min.js"></script>
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.
Support
Please open a new issue and the Standard Notes team will take a look as soon as we can. For more information on editors, refer to the following link:
- Standard Notes Help: What are editors?
Known issue: ordered lists, unordered lists, and tables seem to ignore any font preference you apply to it.