Getting started

This is a step-by-step guide to integrate Fonto Review in your editor. After you have completed this guide, you will have an editor set up with our reference configuration. You can then delve into the configuration APIs and tweak and tune it to your own needs.

Prerequisites

Step 1: Integrate the fontoxml-feedback add-on

Yes, you are correct. The product is called Fonto Review, but the add-on is called fontoxml-feedback. That is because our legacy review functionality already possesses  the technical package name "fontoxml-review". The new Fonto Review app uses the add-on fontoxml-feedback.
  • Run fdt editor upgrade to install the "Fonto Review [fontoxml-feedback]" add-on.
    Remove the old "Comments [fontoxml-annotations]" add-on.

Step 2: Checkout the Fonto Review reference configuration

This is our recommended configuration for Fonto Review. However, you are free to change this configuration to suit your needs.

  • Run the following command to from your packages directory to checkout the reference configuration from our GitHub:

    git clone https://github.com/FontoXML/fontoxml-review-reference-configuration.git --depth 1
  • Add the package to your config/fonto-manifest.json file.

    "fontoxml-review-reference-configuration": "packages/fontoxml-review-reference-configuration"
  • Add the following lines to your dev-cms/configureDevCms.js file (create the file if it doesn't exist):

    'use strict';
    
    const matchAnnotationToCurrentFilter = require('../packages/fontoxml-review-reference-configuration/src/matchAnnotationToCurrentFilter');
    
    module.exports = (router, config) => {
        return {
            reviewAnnotationFilter: matchAnnotationToCurrentFilter
            // This key could also be here to customize the dev-cms routes.
            // routes: myCustomRoutes
        };
    };
  • Add the proxy configuration and enable alwaysRegenerateSessionToken in the config.json or config.js file in your editor.
    Adapt your config file. Don't copy this example.

    {
        "scope": {
            // Omitted for clarity
        },
        "alwaysRegenerateSessionToken": true,
        "proxy": {
            "review": "http://localhost:6020/"
        }
    }

Step 3: Initialize the Dynamic Position Recovery

Fonto Review requires a backend to be present. This backend service runs a position recovery algorithm that recovers positions when they are lost (e.g. because the document was edited outside Fonto).

  • Create a review folder in the root of your editor application. Run the following command in that folder.
    The <version> should be filled in with the current version of Fonto, e.g. 7.8.0.

    fdt review init --version <version>

    Make sure to edit the generated .env file to remove the # sign before the Cms__ApiBaseUrl configuration setting. Adjust the port if your development server runs on another than 8080. If you are on a Linux machine, set the hostname to the IP address of your Docker network adapter. For more information on this variable see: Configuration

Step 4: Run Fonto Editor and the backend

As of now you should have everything configured to get Review running. Let's start the editor and the backend to take a look around.

  • Run the following command from the root of your editor:

    fdt editor run
  • Run this command from the folder you initialized the Dynamic Position Recovery in (Step 3)

    fdt review run

Congratulations! You are done!

You should now have a running instance of the Fonto Editor with Fonto Review integrated. You can verify this by opening the editor in your browser (http://localhost:8080) and see that it has a sidebar called "Comments". You should also be able to navigate to the review route by copying the URL and replacing "#/editor" with "#/review" and pasting the URL in a new window or tab.

The "#/editor" route should look something like this:

And the "#/review" route should look something like this:

The instance you're looking at right now is based on the reference review configuration. You can now customize the review configuration to fit your needs. Take a look at the README in fontoxml-review-reference-configuration to learn more about the available configuration options.