• Stars
    star
    214
  • Rank 184,643 (Top 4 %)
  • Language
    TypeScript
  • Created about 1 year ago
  • Updated 4 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

simple markdown editor w inline comments, on latest automerge stack

tiny essay editor

This is a simple collaborative Markdown editor built in React, with inline format preview and inline commenting.

It's built on automerge and automerge-repo for CRDT-based storage and sync. It uses Codemirror for markdown editing UI, and automerge-codemirror to connect to Codemirror.

CleanShot 2023-11-08 at 14 15 49@2x

Status

This app is primarily intended for internal use at Ink & Switch for editing essays, so there are some features that are specialized towards that use case. We don't plan to develop it into a general-purpose editor that anyone can use for anything. But of course, it can edit any Markdown document too. If you want to actually use this editor in earnest, you might want to fork it to build your own ideas.

Hopefully the code serves as a useful sample for building apps based on automerge-repo, automerge-codemirror, and React.

Usage

  • If you visit the root domain the app will make a new doc. Or you can hit the New button.
  • Once you have a doc, the URL will update with a doc ID. If you share that URL to another browser/device, it should sync live. Hold on to the URL if you want to come back to that doc!

Feature set

  • Edit Markdown with inline format preview
  • Write inline comments + replies
  • Live sync through Automerge
  • Save out .md file with a Download button
  • Typeset similarly to Ink & Switch essays

Run it

Setup the automerge-repo submodule

git submodule init
git submodule update --init --remote

Check out the version-control-project branch in the vendored automerge-repo. By default git checks out a detached HEAD so we need to manually switch to the branch.

cd src/vendor/vendored-automerge-repo
git checkout chronicle

Install and build automerge-repo

pnpm install
pnpm build

Install dependencies for tiny-essay-editor and start the dev server

cd ../../..
yarn
yarn dev

To pull in subsequent updates for the submodule run:

git submodule update --remote --rebase

--remote ensures we are getting the latest changes
--rebase ensures that the changes are pulled into the checked out "version-control-branch" instead of checking out a detached HEAD

Dual deployment

This app is designed for normal webapp deployment as well as experimental deployment to an internal I&S platform. The code is almost entirely shared but there are two entry points:

  • src/main.tsx is the normal app entry point
  • src/index.ts is an experimental entry point which just exports some functions to a host environment

More Repositories

1

peritext

A CRDT for asynchronous rich-text collaboration, where authors can work independently and then merge their changes.
TypeScript
654
star
2

cambria-project

Schema evolution with bi-directional lenses.
TypeScript
616
star
3

farm

🌱 Grow delightful software
Elm
249
star
4

livebook

IPython notebook-compatible live coding experiment
Python
200
star
5

capstone

An experimental, tablet-based tool for developing your ideas
TypeScript
175
star
6

potluck

TypeScript
74
star
7

ksp-browser

Connect the things you already know in your browser.
TypeScript
71
star
8

backchannel

Local-first address book
TypeScript
67
star
9

ksp

Reference implementation of Knowledge Server Protocol (KSP)
Rust
48
star
10

backchat

A relationship-based digital identity system.
TypeScript
31
star
11

vscode-hypermerge

A VSCode plugin to edit Hypermerge documents
TypeScript
28
star
12

upwelling-code

The Upwelling research prototype.
TypeScript
23
star
13

interactive-shape-recognition

Implementaion of "A Simple Approach to Recognise Geometric Shapes Interactively" by Joaquim A. Jorge and Manuel J. Fonseca.
JavaScript
18
star
14

eup-experiment-pipes

JavaScript
16
star
15

flutter-hello

A sample flutter drawing app
Objective-C
16
star
16

cambria-automerge

TypeScript
16
star
17

here

resilient location sharing
TypeScript
12
star
18

inkling

archived prototype for sketching dynamic models
TypeScript
8
star
19

automerge-todomvc-http

An automerge TodoMVC interop demo
Rust
5
star
20

cambria-express

use cambria to migrate API requests as express middleware
TypeScript
5
star
21

farm-peer

A cloud peer for farm to keep data warm while your computer is sleeping.
TypeScript
4
star
22

discovery-cloud-client

TypeScript
4
star
23

Inkteractions

JavaScript
1
star