ngx-pm-editor
v0.0.0-development
Published
Customized editor based on prosemirror, angular and material
Downloads
5
Maintainers
Readme
ngx-pm-editor
- A customized editor based on ProseMirror, Angular, Material etc.
This project will generate Angular libraries that are AOT/JIT compatible and that use external SCSS-styles and HTML-templates.
This project also contains a demo application to test the usage of the generated library.
This project is seeded from angular-library-seed
Read more about architectural challenges and solutions used in the seed project from @trekhleb.
Documents
Purposes of the project
- A playground for different tools and techniques used in open source project
- Use this project as a seed project to split my own large project into small projects
Main Features
Module
- AOT/JIT compatible library build via Angular Compiler (ngc).
- UMD build via Webpack that allows you to use your library for browser builds.
Developement Workflow
Package
- Webpack
- NPM
- Yarn
Watch Mode
- Watch modes for building and testing procedures that makes developing process easier.
Lint
Testing
- Testing with Karma and Jasmine.
- Test coverage report via Istanbul.
- Code coverage badge via Codecov as a reminder to cover code with tests.
Debug
- Exploring your build via Sourcemap Explorer that shows you a treemap visualization to help you debug where all the code is coming from.
Continuous Integraton
- Continuous integration with Travis CI.
Documentation
- Documentation generation via Compodoc. Take a look at documentation example.
- Documentation hosting via GitHub Pages.
Quick Start
# Clone the repository
git clone https://github.com/johnking/ngx-pm-editor.git
# Go to repository folder
cd ngx-pm-editor
# Install all dependencies
yarn install
# Build the library
yarn build
File Structure
TODO: change it based on the latest version of the repository
ngx-pm-editor
├─ demo * Folder for demo applications (MAY BE DELETED if not required)
| ├─ esm * AOT/JIT demo project
| ├─ umd * UMD demo project
| └─ ... * More details about this folder may be found in demo folder README file.
|
├─ src * Library sources home folder (THE PLACE FOR YOUR LIBRARY SOURCES)
| ├─ components * Example of library components with tests
| ├─ services * Example of library services with tests
| ├─ index.ts * Library entry point that is used by builders
| └─ tick-tock.module.ts * Example of library module
|
├─ .editorconfig * Common IDE configuration
├─ .gitignore * List of files that are ignored while publishing to git repo
├─ .npmignore * List of files that are ignored while publishing to npm
├─ .travis.yml * Travic CI configuration
├─ LICENSE * License details
├─ README.md * README for you library
├─ gulpfile.js * Gulp helper scripts
├─ karma-test-entry.ts * Entry script for Karma tests
├─ karma.conf.ts * Karma configuration for our unit tests
├─ package.json * NPM dependencies, scripts and package configuration
├─ tsconfig-aot.json * TypeScript configuration for AOT build
├─ tsconfig.json * TypeScript configuration for UMD and Test builds
├─ tslint.json * TypeScript linting configuration
├─ webpack-test.config.ts * Webpack configuration for building test version of the library
├─ webpack-umd.config.ts * Webpack configuration for building UMD bundle
└─ yarn.lock * Yarn lock file that locks dependency versions
Getting Started
Dependencies
Node/NPM
Install latest Node and NPM following the instructions. Make sure you have Node version ≥ 7.0 and NPM ≥ 4.
brew install node
for Mac.
Yarn
Yarn package manager is optional but highly recommended. If you prefer to work with npm
directly you may ignore this step.
Yarn installs library dependencies faster and also locks theirs versions. It has more advantages but these two are already pretty attractive.
Install Yarn by following the instructions.
brew install yarn
for Mac.
Installing
fork
this repository.clone
your fork to your local environment.yarn install
to install required dependencies (ornpm i
).
Build the library
yarn build
for building the library once (both ESM and AOT versions).yarn build:watch
for building the library (both ESM and AOT versions) and watch for file changes.
You may also build UMD bundle and ESM files separately:
yarn build:esm
- for building AOT/JIT compatible versions of files.yarn build:esm:watch
- the same as previous command but in watch-mode.yarn build:umd
- for building UMD bundle only.yarn build:umd:watch
- the same as previous command but in watch-mode.
Other commands
Lint the code
yarn lint
for performing static code analysis.
Test the library
yarn test
for running all your*.spec.ts
tests once. Generated code coverage report may be found incoverage
folder.yarn test:watch
for running all you*.spec.ts
and watch for file changes.
Generate documentation
yarn docs
for generating documentation locally.yarn gh-pages
for generating documentation and uploading it to GitHub Pages. Documentation example.
Explore the bundle
yarn explorer
to find out where all your code in bundle is coming from.
Bump library version
npm version patch
to increase library version. More on bumping.
preversion
script in this case will automatically run project testing and linting in prior in order to check that the library is ready for publishing.
Publish library to NPM
npm publish
to publish your library sources on npmjs.com. Once the library is published it will be available for usage in npm packages.
prepublishOnly
script in this case will automatically run project testing and linting in prior in order to check that the library is ready for publishing.
Cleaning
yarn clean:tmp
command will clean up all temporary files likedocs
,dist
,coverage
etc.yarn clean:all
command will clean up all temporary files along withnode_modules
folder.