Editorjs binding for yjs

THIS IS A WORK-IN-PROGRESS: I'm currently exploring the idea; below is the vision, time will tell 😉 - Matt

Roadmap

• [x] Working binding
• [x] Add tooling (prettier and more)
• [x] Tested binding
• [x] Add tooling (suitable NPM package generation)
• [ ] Deem a stable(ish) beta release (+ version bump)
• [ ] Create first beta release on NPM
• [ ] Open up to public for community testing and feedback
• [ ] More testing/amends once initial bugs uncovered
• [ ] Use in a private product / gather community issues and update beta release
• [ ] Push stable release on NPM

There are no timelines for the moment, although I'm keen to quite quickly get this sorted over a period of weeks.

Why?

Looking to utilise collaboration in a product that uses Editor JS. hughfenghen/y-editorjs is a fantastic starting point but needs a little more love that includes breaking changes. Mad credit to hughfenghen for getting this on the road.

Decided not to create a pull request as we're in need of active development on this. Open to potentially merging in the future.

Use

BETA - This is still under active development

1. Import yjs-editorjs-binding package

| Package Manager | Command | | --------------- | ------------------------------- | | NPM | npm i yjs-editorjs-binding | | Yarn | yarn add yjs-editorjs-binding | | PNPM | pnpm i yjs-editorjs-binding |

2. Use in your code, like the example below:

import { Doc as YDoc } from "yjs"
import EditorJS from "@editorjs/editorjs"
import { YJSEditorJSBinding } from "yjs-editorjs-binding"

const yDoc = new YDoc()
const yArray = yDoc.getArray("docId")

const binding = new YJSEditorJSBinding(yArray)

const editor = new EditorJS({
    holder: document.querySelector<HTMLElement>("#editor-js"),

    // Hook in our binding listener into Editor JS
    onChange: (api, event: CustomEvent) => {
        binding.onBlockEventEditorJS(api, event)
    },
})

binding.bindEditor(editor)

How to run this repo

1. Clone this repo
2. pnpm i
3. pnpm run dev and pnpm run ws (runs client and WS server)
4. Open http://localhost:8080 in two browser tabs and play

Goals

• Release a stable solution for Editor JS binding.
• Encourage pull requests to continue the development of this yJS Editor JS Binding.

Community

Pull requests and issues are highly encouraged and will be responded to rather quickly.

Like any Open Source project; this doesn't pay the bills! Consideration of that is expected in all community comms. We're in this together. 🔥

FAQs

Where's dependabot?

It's coming! With PNPM becoming a first-class recommendation in many ecosystems, the Dependabot team are looking to release a solution soon - https://github.com/dependabot/dependabot-core/issues/1736#issuecomment-1507582193