@curvenote/editor

An interactive scientific editor built with ProseMirror, React and Redux - by Curvenote.

Goals

@curvenote/editor aims to bridge the gap between expressiveness and writing accessibility by developing a rich, WYSIWYG, collaborative editor with a focus on interactivity that integrates with LaTeX, various flavours of Markdown, and the Jupyter and Sphinx ecosystems.

Why

We think that creating beautiful reactive documents and explorable explanations should be easy. Writing technical documents is hard enough already, and choosing to make that writing interactive is beyond the reach or time-commitment of most communicators.

We aim to lower the barriers to writing computational narratives. Today, narrative is often moved out of computational notebooks into static document creation tools (Microsoft Word, Google Docs, LaTeX, Slides/PPT).

This is for two reasons:

1. The need for more expressive components, formatting or referencing.

   • CommonMark markdown does not support, for example, citations, cross-references, and even simple formatting like callouts (see various alternatives below).

2. To enable collaborators and reviewers who don't use these tools (e.g. when writing and reviewing papers & reports, slide decks, etc.)

   • Writing often requires collaborators that may not be comfortable with some combination of the tools required for computational narratives (e.g. git, md, notebooks, javascript, etc.).

Alternatives

There are many Markdown syntax variants and extensions (e.g. RMarkdown, MyST, idyll-lang, MDX) that add flavours (usually) on top of CommonMark to allow for more complex documents and various degrees of interactivity. These syntaxes or development environments are often beyond the reach of many contributors and collaborative editing and review is often not a priority.

Interactivity

We think the best explanations are explorable and promote active reading, and would love to see this style of writing more widely adopted in scientific teaching, writing and education. To us, that means deep integrations with the Jupyter ecosystem and providing ways to support traditional export as well.

Scope of Repository

A WYSIWYG editor for technical content and documents (papers, reports, documentation, etc.), and support computational into the narrative (c.f. explorable explanations).

Specifically

• A stand alone scientific editor that can be integrated into other applications, React will be supported first-class.

• Integration points for collaboration, citations, and interactivity/reactivity.

• Over time, and where appropriate, smaller tools will be broken off to standalone projects (e.g. see below for the first ones).

  • Likely some of the prosemirror plugins see here, comments, etc.

Related Projects

• @curvenote/schema - the schema for this editor, focused on interactive content, also deals with translation and export.

• sidenotes - Reactive placement of comments, with hooks for multiple inline references.

• @curvenote/article - CSS and styling components and document layout

• @curvenote/components - interactive widgets and web-components

• @curvenote/runtime - client-side reactivity built on redux

A collaborative, rich text editor for interactive technical & scientific content., implementing the MyST standard, and integrating with JupyterLab, JupyterBook and Sphinx. The project will enable a larger audience to create publication-quality, standards-friendly documents through Jupyter, without having to learn a new syntax.

Architecture

• Basic prosemirror, wrapped in a React component with some middleware in Redux.

• Chosen to have many "blocks" of the editor on a page at once. See the UI in Curvenote as to what we are supporting - inspired in part by Jupyter.

  • If you only need one editor on the page, the weird part will be integrating with Redux, and some unnecessary indexing. However, this is probably important anyways if you have comments or other places in the DOM that are instances of the editor.

• Typescript and fully typed.

• Styling of editor components with material-ui

• Reactivity powered by @curvenote/components and @curvenote/runtime, which are web components.

• Real-time collaboration is possible through middleware integrations. See prosemirror-collab.

  • We will (eventually) improve support for cursors and highlights. See Roadmap.

• See demo/index.tsx for an example setup.

Roadmap

We have recently (Feb 2021) spun this out of internal development at Curvenote where we have worked on it for the last year. Docs and testing aren't yet up to our open source standards 😬. We will improve these over time! In the mean time, star the repo, watch it, or send us an issue or email, or try out the editor on Curvenote!

Q1-Q2, 2021

• Improve math editor (look at prosemirror-math).

• Improve MyST and LaTeX export

• Improve collaboration experience (cursors and highlights)

  • Possibly move to yjs as the collaboration backend

• Improve/documentation integration demos

Other ideas and plans

• Integrate as a JupyterLab extension (would love help!!)

• Integrate with ipywidgets (would love help!!)

• Integrate with thebelab (would love help!!)

Getting Started

See the demo folder from more details on how to get started.

Made with love by Curvenote
Last updated August 24th, 2021