@manuscripts/manuscript-article-editor NPM

manuscripts-article-editor

This repository contains the editor package of Manuscripts app to be used in a react application.

Dependencies

Manuscripts is highly modular: it is composed out of a series of NPM published modules following a few different themes.

Data model

@manuscripts/manuscripts-json-schema (source code at gitlab.com/mpapp-public/manuscripts-json-schema): a JSON schema describing the application's data model used in this and other manuscripts.io based applications, plus browser, Node.js and Couchbase Sync Gateway executable validator functions.
@manuscripts/manuscripts-json-schema-utils (source at gitlab.com/mpapp-public/manuscripts-json-schema-utils/): a set of utility functions for working with Manuscripts JSON schema formatted data.

Data synchronisation

@manuscripts/manuscripts-sync (source at gitlab.com/mpapp-public/manuscripts-sync/): this repository contains a build script, a Dockerfile, and a sync function definition and associated tests for a Couchbase Sync Gateway instance configured to act as a realtime synchronisation backend, from the frontend application interacted with using RxDB / PouchDB. The Sync Gateway used is currently a mildly forked version tracking the stable versions of Sync Gateway.
@manuscripts/sync-client (source at gitlab.com/mpapp-public/manuscripts-sync-client): client-side business logic for merging Manuscripts data model revisions: implementations of conflict detection and merging strategies relevant for different model types in the schema.

Editor components

@manuscripts/manuscript-editor (source at gitlab.com/mpapp-public/manuscripts-manuscript-editor): the article body editor as a React component – this is where the great majority of this frontend application's logic is actually found from.
@manuscripts/title-editor (source at gitlab.com/mpapp-public/manuscripts-title-editor: a React editor component for headings, titles and other title-like short stretches of text. In practice, the title editor component is mostly a ProseMirror schema.
@manuscripts/comment-editor (source at gitlab.com/mpapp-public/manuscripts-comment-editor): a React editor component for editing and viewing manuscript comments. Like the title editor component, the abstract editor is mostly a wrapper for a ProseMirror schema.
@manuscripts/abstract-editor (source at gitlab.com/mpapp-public/manuscripts-abstract-editor): a React editor component for editing and viewing abstracts. Like the title editor component, the abstract editor is mostly a wrapper for a ProseMirror schema.

ProseMirror specifics

@manuscripts/prosemirror-recreate-steps (source at gitlab.com/mpapp-public/prosemirror-recreate-steps): an extension to the ProseMirror word processing library that the Manuscripts editor is based on, used to find and merge changes between two documents without access to the precise history of steps.
@manuscripts/manuscript-transform (source at gitlab.com/mpapp-public/manuscripts-manuscript-transform: the definition of the ProseMirror schema used by @manuscripts/manuscript-editor, plus modules for converting to and from the Manuscripts data model and exporting to HTML or JATS XML.

Export

@manuscripts/sachs (source at gitlab.com/mpapp-public/sachs): command-line utility for Manuscripts format conversion, used by the Pressroom web service, in particular at the time of writing, JATS XML conversions. A thin wrapper for the actual conversion code in @manuscripts/manuscript-transform.
Pressroom: a web service for importing and exporting Manuscripts formatted data, wrapping sachs and other open source document transformation tools and libraries into a REST web service. Source at gitlab.com/mpapp-public/pressroom, documentation at pressroom.manuscripts.io/v1/docs?html.

Reusable UI components

@manuscripts/style-guide (source at gitlab.com/mpapp-public/manuscripts-style-guide): a set of reusable UI controls and theme definitions used by this application and other Manuscripts based applications.
@manuscripts/resizer (source at gitlab.com/mpapp-public/manuscripts-resizer): a React component providing a resize handle for panels, based on an AtlasKit component.
@manuscripts/assets (source at gitlab.com/mpapp-private/manuscripts-gfx-assets/): shared graphical assets used across Manuscripts projects in bitmap image, SVG and PDF vector form as well as React components built into the NPM package, based on Sketch originals.

Datasets

@manuscripts/data (source at gitlab.com/mpapp-public/manuscripts-data): source data such as document templates for use by Manuscripts client applications, plus scripts for building and deploying the data to npm.
@manuscripts/examples (source at gitlab.com/mpapp-public/manuscripts-examples): example Manuscripts documents for reference and test purposes.

Utilities

@manuscripts/eslint-config (source at gitlab.com/mpapp-public/manuscripts-eslint-config): as the name suggests, the ESLint configuration used by other Manuscripts TypeScript repositories.
@manuscripts/publish (source at gitlab.com/mpapp-public/manuscripts-publish): a command-line utility to assist publishing other Manuscripts NPM packages to an NPM registry (publishes a package if the current version hasn't already been published).

Installation

Run yarn install @manuscripts/article-editor in your application.

Build (for production)

The variables listed in .env.example must all be defined as environment variables in your project.

Run yarn build to build the app to the dist folder.

Deploy the files to S3 with scripts/deploy.sh.

Running the client in development mode

cp .env.example .env. The variables listed in .env.example have appropriate default values for running in a mode where the backend API server is running locally (this is optional, and you can complete local development tasks in the absence of the backend services). See steps below under "Running the backend API in Docker" for steps to launch the API server locally.
Run docker volume create --name=yarn-cache to create a yarn cache for the backend services that you will launch in the next step. This step is only needed once.
docker-compose up jupyter to start the services needed for development.
yarn start to start the app in development mode (using webpack-dev-server and react-hot-loader).
To avoid signing up an account, open http://localhost:8080/developer to create a dummy user profile. Now you're good to go.

Running the backend API in Docker

Add any environment variables needed for the API server in docker/server/.env.
docker login registry.gitlab.com to log in to GitLab’s Container Registry using your GitLab username and password (or a deploy token for read-only access to the registry images).
Run docker-compose pull to pull the latest server Docker images.
first run Initialize the backend services: scripts/api/initialize.sh. If running on Windows or MacOS, it may be necessary to increase the RAM allocated to Docker. (This can be done through Docker Desktop > Preferences > Resources > Advanced > Memory.)
subsequent runs Start the backend services: docker-compose up api
Run docker-compose up jupyter to start the additional services.
Open chrome://flags/#cookies-without-same-site-must-be-secure and set to Disabled.
Run yarn start to start the frontend.
Open Chrome, and enter http://localhost:8080/signup to create a user account. Confirmation emails generally won't be sent from a locally-running API, but you can ignore that message (see APP_SKIP_ACCOUNT_VERIFICATION in docker/server/defaults.env)
To stop the service, run docker-compose down. Add an optional -v flag to delete the data volumes.

Running the Manuscripts stack in Kubernetes via Docker Desktop

Make sure kubectl is using the appropriate context:
1. Run kubectl config current-context to show the current context.
2. Run kubectl config get-contexts to list the available contexts.
3. Run kubectl config set-context docker-desktop to set the context.
To build the client image, run docker-compose build client
To start the services, run docker stack deploy --compose-file <(docker-compose config) manuscripts
To stop the services, run docker stack rm manuscripts

Template publishing

Make sure you are using the test environment. (@manuscripts/data fetch published templates from the test environment: https://gitlab.com/mpapp-public/manuscripts-data/-/blob/master/scripts/fetch-published-templates.js#L6)
Make sure you are logged in as a user who is allowed to publish templates (APP_COUCHBASE_ALLOWED_OWNERS) or you are using (have access to) one of the projects which is allowed to publish templates (APP_COUCHBASE_ALLOWED_PROJECTS).
Create a manuscript, edit the title (will be used as the template title), and specify requirements. Then publish the template (This can be done through Project menu > Publish Template).
Release new version of manuscripts-data. (The build process will fetch published, user-generated template data from a manuscripts-api endpoint and adds it to the data published as @manuscripts/data)
Release new version of manuscripts-requirements after updating the @manuscripts/data dependency version. (Essential for the validation process and building the quality report.)
Upgrade pressroom-js after updating @manuscripts/data and @manuscripts/requirements dependencies.
Update fusion-kubernetes-env with the new pressroom-js image tag.
Upgrade this repository dependencies (@manuscripts/data and @manuscripts/requirements).

Testing

Unit tests

Run yarn test to run the unit tests in Jest.

Running tests with Cypress

Run yarn run cypress:open to launch the Cypress runner.
From the Cypress runner, select an individual test to run or select Run all specs

Development

See the manuscripts-frontend wiki for more information.

Developing manuscripts-api

If needed, initialize the backend services: scripts/api/initialize.sh
Start the other backend services in Docker: docker-compose up sync-gateway jupyter
Start the API: scripts/api/start-local.sh

Developing @manuscripts/style-guide

Clone @manuscripts/style-guide to a folder alongside this one, run yarn install to install its dependencies, run yarn link to make it available as a local dependency, then run yarn dev in that folder to start building it.
In this folder, run yarn link @manuscripts/style-guide to use the linked module as a local dependency.

Analysis

Run yarn stats to generate a stats.json file, then yarn analyze to open webpack-bundle-analyzer's visualization of the webpack bundle.

Configuration

The service is configured using environment variables, .env.example file placed at the root of the repository.

@absinthe/socket @absinthe/socket-apollo-link @apollo/react-hooks @babel/core @babel/plugin-proposal-class-properties @babel/plugin-proposal-nullish-coalescing-operator @babel/plugin-proposal-optional-chaining @babel/plugin-proposal-unicode-property-regex @babel/plugin-syntax-dynamic-import @babel/preset-env @babel/preset-react @babel/preset-typescript @babel/runtime @formatjs/intl-relativetimeformat @formatjs/intl-utils @manuscripts/assets @manuscripts/comment-editor @manuscripts/csl-locales @manuscripts/data @manuscripts/library @manuscripts/manuscript-editor @manuscripts/manuscript-transform @manuscripts/manuscripts-json-schema @manuscripts/manuscripts-json-schema-utils @manuscripts/pouchdb-adapter-http @manuscripts/pouchdb-adapter-idb @manuscripts/requirements @manuscripts/resizer @manuscripts/rxdb @manuscripts/style-guide @manuscripts/sync-client @manuscripts/title-editor @manuscripts/track-changes @reach/tabs @sentry/browser @types/apollo-upload-client @types/codemirror @types/copy-webpack-plugin @types/deep-freeze @types/dompurify @types/extract-text-webpack-plugin @types/file-saver @types/google.analytics @types/html-webpack-plugin @types/jszip @types/jwt-decode @types/lodash @types/lodash-es @types/mousetrap @types/node @types/path-parse @types/pretty-bytes @types/qs @types/react @types/react-avatar-editor @types/react-beautiful-dnd @types/react-color @types/react-datepicker @types/react-dom @types/react-dropzone @types/react-helmet @types/react-modal @types/react-router-dom @types/react-select @types/react-window @types/string-hash @types/styled-components @types/uuid @types/webpack-merge @types/webpack-subresource-integrity @types/webpackbar @types/workbox-webpack-plugin @types/yup apollo-cache-inmemory apollo-client apollo-link apollo-link-context apollo-link-error apollo-link-http apollo-link-ws apollo-upload-client apollo-utilities autotrack axios babel-core babel-loader babel-plugin-react-intl babel-plugin-styled-components blob-to-buffer broadcast-channel bundlesize clean-webpack-plugin clipboard-copy comlink copy-webpack-plugin core-js css-loader csstype date-fns deep-freeze dompurify extract-text-webpack-plugin favicons favicons-webpack-plugin file-loader file-saver formik fuzzysort graphql graphql-tag history html-webpack-plugin http-status-codes intl-pluralrules jszip jwt-decode lodash-es mime mousetrap path-parse phoenix popper.js pouchdb-generate-replication-id pouchdb-replication pretty-bytes prop-types qs raw-loader react react-avatar-editor react-beautiful-dnd react-color react-datepicker react-datetime-picker react-dnd react-dnd-html5-backend react-dom react-dropzone react-helmet react-hot-loader react-intl react-is react-modal react-modern-calendar-datepicker react-popper react-router react-router-dom react-select react-sizeme react-spring react-tooltip react-useinterval react-virtualized-auto-sizer react-window rxjs rxjs-compat style-loader styled-components subscriptions-transport-ws ts-node typeface-lato typeface-pt-sans typeface-pt-serif typescript uglifyjs-webpack-plugin uuid webpack webpack-cli webpack-merge webpack-subresource-integrity webpackbar workbox-webpack-plugin workbox-window worker-plugin yup

0.1.7

2 years ago

0.1.5

2 years ago