https://github.com/aslakhellesoy/automerge-codemirror

CodeMirror integration with Automerge
https://github.com/aslakhellesoy/automerge-codemirror

Last synced: about 1 month ago
JSON representation

CodeMirror integration with Automerge

• Host: GitHub
• URL: https://github.com/aslakhellesoy/automerge-codemirror
• Owner: aslakhellesoy
• License: mit
• Created: 2017-09-05T08:55:58.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T03:18:33.000Z (almost 2 years ago)
• Last Synced: 2024-10-03T06:54:26.562Z (3 months ago)
• Language: TypeScript
• Size: 5.72 MB
• Stars: 32
• Watchers: 3
• Forks: 2
• Open Issues: 25
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Automerge-CodeMirror

![Node.js CI](https://github.com/aslakhellesoy/automerge-codemirror/workflows/Node.js%20CI/badge.svg)

Automerge-CodeMirror brings collaborative editing to CodeMirror by linking it to

an `Automerge.Text` object.

You can have as many `Automerge.Text` objects as you want inside a single Automerge document, and link each of them to

a separate CodeMirror instance. This is useful for applications that render many editable text areas (such as a

Trello-like application with multiple cards).

It ships with a React component, but can also be used without React.

## Installation

    npm install automerge-codemirror

## Live Demo

[Check it out here](https://aslakhellesoy.github.io/automerge-codemirror)

To run it locally:

    yarn storybook

## General Usage

```typescript

import { connectAutomergeDoc } from 'automerge-codemirror'

// Create a connect function linked to an Automerge document

const connectCodeMirror = connectAutomergeDoc(watchableDoc)

// Connect a CodeMirror instance

const getText = (doc) => doc.text

const disconnectCodeMirror = connectCodeMirror(codeMirror, getText)

// Disconnect the CodeMirror instance

disconnectCodeMirror()

```

## React Usage

```typescript jsx

import { connectAutomergeDoc, AutomergeCodeMirror } from 'automerge-codemirror'

// Create a connect function linked to an Automerge document

const connectCodeMirror = connectAutomergeDoc(watchableDoc)

// Connect a CodeMirror instance

const getText = (doc) => doc.text

const acm = (

   CodeMirror(element)}

    connectCodeMirror={connectCodeMirror}

    getText={getText}

  />

)

```

## Synchronisation with other peers

Automerge-CodeMirror is agnostic of how you choose to synchronize the linked Automerge document

with other peers. Just register a handler with the `WatchableDoc` that does the synchronization.