NeetoEditorNano

The neetoEditor nano consists of:

• neeto-editor-engine: A Ruby gem that manages the asset uploads in neetoEditor. Each uploaded asset will be associated with an organization. Besides managing assets it does a few other things too.
• @bigbinary/neeto-editor-frontend: The library that drives the rich text experience in the neeto products built at BigBinary.

Contents

1. Installation
   • Backend
   • Frontend
2. Usage
3. Instructions for development
4. Instructions for publishing
5. Documentation

Installation

Backend

1. Add the following line to your application's Gemfile:

source "NEETO_GEM_SERVER_URL" do
  # ..existing gems

  gem "neeto-editor-engine"
end

2. Execute the following command:

bundle install

3. Add the following line to config/routes.rb file to mount the engine at /neeto_editor route.

mount NeetoEditorEngine::Engine, at: "/neeto_editor"

4. Add the following line to models/organization.rb file.

has_many :neeto_editor_assets, class_name: "NeetoEditorEngine::Asset", dependent: :destroy

5. Execute the following command to generate the migration to generate the neeto_editor_engine_assets table.

rails g neeto_editor_engine:install:migrations

6. Run migrations.

rails db:migrate

Frontend

yarn add @bigbinary/neeto-editor-frontend

For setting up image upload refer https://neeto-editor.neeto.com/?path=/docs/examples-customize-options-addons--addons.

Usage

• Controllers

Utils

1. trim_empty_lines: This util is added to the String class. It will help you to remove leading and trailing empty lines.

   str = "<p></p><h1></h1><br><h1>Hello world</h1><h1></h1><span></span>"
   str.trim_empty_lines # <h1>Hello world</h1>
   

2. sanitize: Sanitizes editor HTML for safe server-side rendering. Uses Rails::HTML::PermitScrubber with an allowlist of tags and attributes matching the editor's output. Preserves CSS variables (--custom-property and var()) and validates iframe src domains (YouTube, Vimeo, Loom, NeetoRecord, SupaDemo).

   NeetoEditorEngine.sanitize(html)
   

Instructions for development

Install all the dependencies by executing the following command.

yarn

Running the yarn storybook command starts a storybook application. Use this application to test out changes.

When developing frontend packages, it's crucial to test changes in a live environment using a host application. There are two ways to do this:

1. Using yalc package manager: https://youtu.be/F4zZFnrNTq8

2. Directly updating the node_modules of the host application.

   1. Start the host application server.

   2. Inside the package, execute the command:

      yarn build --watch --app ../neeto-site-web
      

      Here replace ../neeto-site-web with path to the host project. Now, any changes made to the neetoEditor codebase will be instantly reflected in the UI.

   3. Run the following command in the host application to reset to the initial state.

      yarn install --check-files
      

Instructions for Publishing

Consult the building and releasing packages guide for details on how to publish.

Documentation

Read the frontend docs here: https://neeto-editor.neeto.com.