cm_page_builder

CmPageBuilder::Rails

This gem's purpose is to allow easy integration between the Commutatus javascript library cm-page-builder and any Rails application that requires storing and editing content through Rails-rendered webpages.

Requirements

• Rails 6+
• Webpacker must be enabled in the project
• S3 as the image backend storage

Initial setup:

• Add the following lines to the gemfile:

  gem 'react-rails', '~> 2.6.0'
  gem 'cm_page_builder-rails'
  

  And then execute:

  $ bundle
  

• Follow all react-rails installation instructions (https://github.com/reactjs/react-rails) Important: ensure that the hello_world example successfully works

• Install the javascript packages with:

  yarn add cm-page-builder@1.3.0 -E
  yarn add babel-runtime@^6.26.0
  

  (the emoji-mart package, a dependency of cm-page-builder, sometimes bugs out during the webpack build process without the babel-runtime)

• Run rails cm_page_builder_rails:install:migrations

• Run rails generate cm_page_builder:rails:install to install the JSX component. This assumes your webpack folder is inside app/javascripts

• In config/routes.rb, mount the endpoint with the line mount CmPageBuilder::Rails::Engine => "/cm_page_builder"

Usage

This package comes with a concern, CmPageBuilder::Rails::HasCmContent include CmPageBuilder::Rails::HasCmContent To activate this module, add include CmPageBuilder::Rails::HasCmContent on top of any model file that should have an associated page builder record.

The page builder record will be accessible from the model as page (@model.page). The show path is accessible through the route cm_page_builder_rails.page_path(@page), and the edit path through the route cm_page_builder_rails.edit_page_path(@page)

To make the fragment read-only in the form, pass the value in status prop as Read. Example,

  = react_component('cm_content_manager/Content', { input: 'content-editor', components: @page.components, assetBaseUrl: ActiveStorage::Blob.service.bucket.url, status: 'Read'})

By default, the value of the status prop is set to Edit.

Setting up CORS for aws

Do this or the direct upload capabilities won't work https://keithpblog.org/post/active-storage-on-amazon-s3/

Building the gem

gem build cm_page_builder-rails.gemspec gem push cm_page_builder-rails-0.1.x.gem

Contributing

Contribution directions go here.

License

The gem is available as open source under the terms of the MIT License.