Building Buzz Editor

Developer Guide

Bahadir Balban

Buzz Founder

@buzzdevelopers

Buzz Editor based on ProseMirror

Buzz web editor is based on the ProseMirror Project.

Check out buzz-editor repo under buzz-nodejs:

cd buzz-nodejs
git clone git@github.com:buzz-software/buzz-editor.git

My Webpack config:

module.exports = {
entry: "./src/editor.js",
output: {
filename: "bundle.js"
},
mode: "development"
}

Check out prosemirror-schema-basic repo under node_modules:

cd buzz-editor
cod node_modules
rm -rf prosemirror-schema-basic
git clone ssh://git@github.com/buzz-software/prosemirror-schema-basic.git
cd prosemirror-schema-basic
npm install
# You must remove

Step #2:

# You must remove prosemirror-model from this directory for the editor to compile correctly:

rm -rf node_modules/prosemirror-model

prosemirror-schema-basic repo is now ready. If you make changes in the schema, you may run:

rollup -c rollup.config.js

to rebuild the schema. Make sure prosemirror-model is not present in prosemirror-schema-basic/node_modules

Rebuilding editor with webpack

./node_modules/.bin/webpack ; cp dist/bundle.js ../public/javascripts/prosemirror.js

This last step of copying bundle.js to ../public/javascripts/prosemirror.js copies the editor javascript bundle to the nodejs backend public directory, assuming the directory structure buzz-nodejs/buzz-editor/. Next time you run buzz-nodejs (as described here) you will see the updated editor.

Shortcut for re-building the schema and the editor altogether:

pushd node_modules/prosemirror-schema-basic ; rollup -c rollup.config.js ; popd ;  
./node_modules/.bin/webpack ; cp dist/bundle.js ../public/javascripts/prosemirror.js

Thanks for reading.




Join The Discussion

Deepak Gupta

@deepakgupta

Jul 12

cod node_modules, should be cd node_modules.