# TipTap + Hocuspocus for Markdown editing
---

# Documentation is here:
https://tiptap.dev/hocuspocus/introduction

# Simple example server runs with
npx @hocuspocus/cli --port 8081

## Infrastructure
https://tiptap.dev/hocuspocus/server/configuration
https://tiptap.dev/hocuspocus/guides/persistence
TASK

## Authorization for a room
permissions to access a room should match permissions to edit an entity.
TASK

# Client:

## Example

const ydoc = new Y.Doc();

const provider = new HocuspocusProvider({
  url: "ws://127.0.0.1 ..... ",
  name: "ROOM ID .... ",
  document: ydoc,
});

new Editor({
  element: document.querySelector(".element"),
  extensions: [
    StarterKit.configure({
      history: false,    // Disable history, hocuspocus handles it
    }),
    Collaboration.configure({
      document: ydoc,
    }),
    CollaborationCursor.configure({
      provider,
     // We need a color for our users?    TASK
     // Username is set here and will go to hocuspocus from the client. can we trust?
      user: { name: "John Doe", color: "#ffcc00" },     
    }),
  ],
});

## RoomIds:
For now only existing entities (that already have an Id), no editing while creating.

Example: `callouts/%calloutId%`
(have in mind that we may have multiple markdown editors for the same entity (context?), so maybe we need something like `hub/%hubId%/vision`, `hub/%hubId%/impact`...

- Where do we want to be able to enable collaborative editing?
- On Cards? on Callouts descriptions? on ....

## Keep track of users connected to the same document:
https://tiptap.dev/hocuspocus/guides/awareness
Done

## Access directly to the database from the Hocuspocus Server (TASK)
Because if not, clients duplicate the content:
- The first user that connects to a room, creates the room (with an empty document).
- Then tiptap reads the value (that is comming from graphql) and sets the room contents. Then the user can edit that content and the document changes in the room (not in the database)
- The problem comes when a second user connects to the room. Tiptap is again reading the value coming from graphql and ADDING it to the document in the room. So the content gets corrupted (duplicated if didn't change, mixed if it did change).
- The way to fix this could be one of these two:
- check if I am the first user in the room or not
- not read the value from graphql at all, read it IN THE SERVER, when a user connects to a room, that document is read from the database.
- Maybe (**PROBABLY**) instead of doing what I've done, we sould have a FormikMarkdown editor to edit a document "the formik way", passing value, onChange, etc... and a "CollaborativeMarkdownEditor", to do things "the hocuspocus way". It's just separating the components, a lot can be reused.

## Pull Request
https://github.com/alkem-io/client-web/pull/4171

To run this PR you need a hocuspocus server running, on a websocket port 8081, you can follow the examples in the documentation to quickly start one: https://tiptap.dev/hocuspocus/server/examples

But creating the PR I have noticed the latest version doesn't start, not sure why. Version 2.1.0 looks to have a bug with `meow` and throws an exception.
Use version 2.0.6 until they fix it:
`npx @hocuspocus/cli@2.0.6 --port 8081`

In this PR I have added multi-editing functionality to the markdown editor of the callouts descriptions (but only if the callout exists already).