---
title: CS3 Workshop 2021 - CodiMD in CERNBox
tags: presentation
slideOptions:
    theme: cern5
slideNumber: true

---

---

<!-- .slide: data-background="/byoa/codimd/uploads/upload_2c64ac8a0ea2140f2c1c4769989d8ee4.PNG" data-background-opacity=".25" -->

## CodiMD in CERNBox
#### **Leveraging the WOPI protocol to provide collaborative markdown editing**

<br />
<br />

**Giuseppe Lo Presti**, Michał Kolodziejski
CERN IT/ST, IT/CDA

<br />

#### CS3 Online Workshop 2021

---

### **Context and motivation**

* CERNBox is the central storage for user data at CERN and evolves as the Apps Hub
    * Collabora, DrawIO, MS Office, OnlyOffice, SWAN, ...

* Clear need for a proper Markdown editor in CERNBox, as well as for the **ScienceMesh** infrastructure
    * Quite a popular format, close to 1M `.md` files in CERNBox at CERN
        * Compares with 3.6M Office files and
          2.8M LaTeX files
    * CodiMD (HackMD.io's open source edition) already piloted at CERN and well received

---

### **The integration**

* Original idea developed in the context of the **CS3MESH4EOSC** EU project

* CodiMD provides a REST API (unofficial, but being expanded)
    * Good enough to push/pull content from an external storage system
    * Code base easy to extend

* CERNBox provides a **WOPI**(-like) endpoint
    * Vendor-neutral, http-based open protocol designed to ease the integration of Office-like applications

---

### **Why WOPI?**

* WOPI-enabled apps can benefit from a high-level API on top of what an EFSS system can offer
    * Native support for locking and collaborative editing

* WOPI was integrated in CERNBox since 2017
    * Microsoft Office Online, lately Collabora Online
      ([cf. talk on _OnlyOffice and Collabora Online at CERN_](https://indico.cern.ch/event/970232/contributions/4157936))

---

### **User experience: opening files, auto save**

* CodiMD patched to introduce an _Appliance mode_:
    * No _New_ or _Publish_ buttons, _Slide Mode_ in evidence
    * Visual feedback when files saved to the storage or in case of errors

![](/byoa/codimd/uploads/upload_c39cf1b5290db8c99805507d64dfb77e.PNG)<!-- .element style="border: 0; height: 20%; width: 20%;" --> . . ![](/byoa/codimd/uploads/upload_f2967d1888f6b6f4cbae23d32c29e6b5.PNG)<!-- .element style="border: 0; height: 20%; width: 20%;" -->

* Code available in the [CERN GitLab](https://gitlab.cern.ch/authoring/notes/codimd)
    * <span style="color: green">+210</span>/<span style="color: red">-60</span> LoC, no architectural modifications

* If a note contains pictures, it's saved back as a single `.zmd` (for _zipped markdown_) bundle

---

### **Behind the scene** - 1/2

* CodiMD backend extended with a webhook
    * Send a notification each time a file is modified, including some context metadata

<br/>
<br/>

* A _WOPI Bridge_ component added to connect to storage
    * Technically, a _WOPI client_
    * Stateless microservice, listening to those notifications
        * And throttling the WOPI `PutFile` operations
    * `/open` endpoint to `GetFile` from storage and push to CodiMD

---

### **Behind the scene** - 2/2

* Opportunistic use of the **WOPI Lock API** to store the **state**
    * Mapping `WOPISrc` URIs and access tokens to CodiMD's `noteid` hashes
    * Enables collaborative editing and save after close
    * Of course, files can be moved/modified externally
        * Conflict handling managed by the WOPI server

* Prototype code available in the [CS3Org GitHub repo](https://github.com/cs3org/wopibridge)
    * Generic, non-CodiMD-specific design
    * Applicable to other collaborative apps that do not support the WOPI protocol natively

---

### **Further deployments and next steps**

* This integration is also available within **ScienceMesh**, and being prototyped at several partner sites
    * Uni Münster was the first deployment outside CERN
    * Documentation available at [developer.sciencemesh.io](https://developer.sciencemesh.io/docs/integrations/codimd)

* Will move soon to production, pending the improved sharing model in CERNBox
    * CodiMD sharing is as easy as copy&paste of the URL

* The CodiMD patches are relatively self-contained
    * Can be merged upstream without altering a standalone setup

---

## <span style="color: white">That's all! Questions?</span>

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

![](/byoa/codimd/uploads/upload_b470fbb2c9de857003882bf81c0696b8.png)<!-- .element style="border: none; height: 25%; width: 25%;" -->

<span style="color: #D0D0D0"><small>CS3MESH4EOSC has received funding from the European Union's Horizon 2020
research and innovation programme under Grant Agreement no. 863353</small></span>