shjiang/bodylight-editor

Optional interactive Markdown editor with enhanced support of Bodylight web components and live preview. Use this to build web simulators using bodylight components v2.0.

Bodylight Editor

Web editor to facilitate creation of web simulators. Employs ACE editor using markdown/xml mode and generates preview using markdown-it and bodylight web components.

Development

This project is bootstrapped by aurelia-cli.

• Run dev app - npm start, then open http://localhost:8080
• Build for production - npm run build, or the old way au build --env prod.
• Unit tests - npm run test or au test (or au jest).

Publish release

Use np from https://www.npmjs.com/package/np as follows:

np 1.0.0 --no-publish

This won't publish to NPM, but will create release, check git repo, run tests, create release tags and draft in github.

Publish GH pages

using scripts in bin/ directory

au build; cd bin; ./publishsite.sh

will deploy the dist folder into Github Pages.

Usage

1. Create new project OR load existing project using Project menu.
2. Create new file OR upload existing files
   • MD file - contains document with Bodylight components
   • ZIP file - it is expected to be output of FMU Compiler - JS with WebAssembly and FMU, modelDescription.XML),
   • JS file - it is expected to be Adobe Animate project exported to CreateJS,EaselJS library
   • other file (PNG,GIF,JPG) - it is expected as static or animated images
3. Edit text in middle pane (Editor). Use toolbar to add bodylight components or standard tags. See preview in the right panel.
   • component-name inserts component into the cursor position of editor
   • shows help for particular component
   • undo the operation of addin the item
   • redo the operation of addin the item
   • H1 H2 ... - adds bold,italic, header 1, header 2, ...
   • Preview is rendered when
     • creating new line by pressing Enter
     • deleting line by Delete or BackSpace
4. Save project or export project (HTML with bodylight.bundle.js) using Project menu.

Other tools

• Bodylight web components
  • Aurelia plugin
  • Web Components Bundle
• Bodylight FMU Compiler
• Bodylight Composer does not support web components yet

Sample web simulators

• Bodylight Scenarios
  • Bodylight Scenarios source codes in MD