Giter Club home page Giter Club logo

editor's Introduction

@curvenote/editor

@curvenote/editor on npm MIT License CI demo

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

@curvenote/editor in curvenote.com

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).

We think 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.).

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.

Overlap with Curvenote

@curvenote/editor is the editor that is used in Curvenote, a scientific writing platform that connects to Jupyter.

Alternatives

There are many Markdown syntax variants and extensions (e.g. RMarkdown, MyST Markdown, 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 difficult.

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.
  • Prosemirror plugins for technical writing, comments, etc.

Monorepo

The editor package is a monorepo that is built with turborepo. Included in this repository are:

Related packages

A collaborative, rich text editor for interactive technical & scientific content., implementing the MyST Markdown, 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.

Roadmap

We use this editor at Curvenote where we have worked on it for the last few years. We will continue to spin out useful plugins like prosemirror-autocomplete and prosemirror-codemark. If you would like to see something specific, open an issue or email, or try out the editor on Curvenote!

2022

  • Improve Markdown, Word and LaTeX export
  • Improve collaboration experience (cursors and highlights)
    • Possibly move to yjs as the collaboration backend
  • Improve configuration/extensibility
  • Improve/documentation integration demos
  • Improve math editor, adding a WYSIWYG math editor (likely as plugin)

Other ideas and plans

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

Getting Started

git clone [email protected]:curvenote/editor.git
cd editor
npm install
npm run start

editor's People

Contributors

ahixon-atlassian avatar atl-nathanf avatar d4rkr00t avatar dependabot[bot] avatar douwem avatar eshvedai avatar fghilini avatar fwkoch avatar ghanshyam-1805 avatar jakecoppinger avatar nathf avatar nokola avatar paulirwin avatar ratox avatar rfgamaral avatar richardscottoz avatar rowanc1 avatar stevejpurves avatar torifat avatar twig-atl avatar yxwww avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

editor's Issues

Improve options panel.

Right now the iframe, image and link each have their own toolbar:

image

The link is the one that is pretty solid:

image

This is done through a Widget rather than as a NodeView. This means that there is only one of them and it doesn't have to be in the dom of the editor (which is more efficient). It is also not clear how to specify between toolbars that should be shown. For example, a link or inline equation (that might have an alt text?) would be difficult to show instead of a callout panel option. Only one of these should be seen at a time.

We should centralize the toolbar pieces into a toolbar view. This also has the added benefit of not requiring react in the editor dom almost at all? As well as the toolbar is not contained in the editor experience (which is auto scrolled, and means we need to pop it out for images). I also think that this will be easier to customize these toolbars outside of this package.

Bring back labels

We had to remove labels for some simplicity, I think it is worth bringing these back. It allows us to have a fall back when the ID doesn't work. This could be the case where you are rearranging the content manually - and make sure to update the label, but we won't ever expose the ID in a UI.

ff2ae69

Should some commands be deterministic?

For people who are typing fast, the fuzzy search may not catch up to them or change when they hit enter to select a command. This could be minimized for specific commands like /cite /eq and /ref which have analogues in latex land.

Better export of text:

A of <time>, --> As of , .

This is also the case for displayed variables. This makes copying to text fields difficult.

  • Dates
  • Variables
  • Citations

Double Click handler in Code

Double-clicking within a code block does not trigger a locked block to open into draft mode.

This should trigger the same function as in the dbl click in prosemirror.

Nodes are deleted on enter

Peek 2021-07-19 20-48

When citations are created they are by default selected, they shouldn't be.

Hitting enter just removes it. Have to do undo to get it back
This also happens when editing in-line equations in lists, hence $....$ - doing some edits, hitting enter, and the entire equation is gone
and a new bullet is created instead

Originally reported by @prisae

Strikethrough should be less sensitive

These are often used for "approximately" in numbers, and only very rarely are people looking to actually strike text.

From ~20 to ~30. -- here in github markdown, that isn't even recognized. Perhaps no leading space on the second one could be a decent trigger as well as a length cutoff as a fallback.

Escape inside of Codeblocks

With the new code blocks - to exit you it escape. With other features like a callout panel you hit escape to select the feature. Enter twice at the end will exit you from the call out panel. I don’t mind either but need to be consistent. Is there a way to select an entire code block (blue outline) similar to the call out panel or image then drag the block to where you want it within the content block?

Table `Merge Cell` & `Split Cell` should only be enabled when their conditions are met

Currently, "Merge Cell" and "Split Cells" buttons are enabled by default. It makes more sense to toggle their funcionality based on the selection state:

  • for "Merge Cells", it should only be enabled when multiple cells are selected
  • for "Split Cells", it should only be enabled when either of the the cell colSpan or mergeSpan value is greater than 1.

Slack discussion context: https://curvenote.slack.com/archives/C01CFLELFCM/p1632331767020400

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.