Content Type Driven Editors

Overview

This page documents the approach used to facilitate the creation of concrete editors.

Concepts and Definitions

The following are important concepts used throughout the remainder of this document:

• Model - Some portion of the existing OLI content model. From the perspective of the course-editor, there are many different types of models, such as a course model or a workbook page model, or an organization model. A model is made up of various pieces of content.
• Content - A part of a model. For instance, a simple workbook page model is comprised of two pieces of content: a head and body.
• Content Type - The pieces of content that comprise a model have defined types. The type of content is used to determine how the system should allow a user to edit that content.
• Document - An instance of a model

So, a document is an instance of a model. The model is a composition of various content instances, each of which has a content type associated with it.

Components and Responsibilities

EditorManager.tsx

The EditorManager component is the top level React component that manages data access (initial retrieval and ongoing persistence), document locking, and factory-ing out concrete document editors instances.

Document editors

Document editors are React components designed to allow a user to edit instances of models.

Content editors

Content editors are React components designed to allow editing of singular pieces of content of a model. Document editors should be designed in a way that they delegate editing implementation to a collection of content editors.

Model wrappers

Model wrappers are immutable, type safe classes that provide access to the various document models. It is likely that these classes could eventually be generated from some external schema, but for now these are manually created and can be found in src/data/models.ts.

Content wrappers

Content wrappers are immutable, type safe classes that provide access to the various content types. Similar to document model wrappers, these likely will be generated in the future but up until this point they have been handcrafted.

Editor registry

Given a document retrieved from the backend, the EditorManager component determines which document editor to display via lookup into the editor registry. This registry, defined in src/editors/document/registry.ts and populated by the editor registrar in src/editors/document/registrar.ts, allows the course editor implementation to be completely data driven. As new content models are defined, new document editor implementations can be implemented and then simply integrated into the system via inclusion in the editor registry. The registry allows not only the specification of which editor component to use for which document model, but also which persistence strategy and which document listening approach the EditorManager should use for that content model.