Most of CryptPad's collaborative applications work in a similar way, only differing in the ways that data is displayed. Therefore, a large part of their code can be shared. There is already a lot of code common to several parts of CryptPad, but in the case of collaborative applications, this goes even further.
Each application is composed of several files:
inner.html, the HTML starting point of the iframe
app-xxxx.less, for the style of the application
In the case of collaborative applications, no special access is needed and they all have access to the same database information, that is why the
main.js file does not exist and is replaced by the
wwww/common/sframe-app-outer.js file which has exactly the same role but is common to all collaborative applications.
Inside the iframe, each application needs its own code to display the data of the collaborative document. The
inner.js file always exists and loads libraries and tools such as CodeMirror (code, slide, polls), jKanban (kanban) or CkEditor (rich text). However, a large part of the code represents elements common to all these applications:
Loading the decrypted history to be able to rebuild the document
Loading "ChainPad" to create the document and manage real-time editing via patches
Management of disconnections/reconnections
Management of all the specific tools present in the toolbar: history, export, user list, chat, etc.
All these elements are included in
wwww/common/sframe-app-framework.js which simplifies the creation of a new application by taking care of all these elements directly and providing simple APIs for
inner.js file for a complete application looks something like:
All style elements common to the different collaborative applications can be loaded into
app-xxxx.less via a single call. The LESS framework
customize.dist/src/less2/include/framework.less will load the style of the toolbar, the chat, the different menus, the buttons and the modals.
Two mixins are available in this file,
.framework_min_main(). The minimal "min" version is used for non-collaborative applications (drive, preferences, profile, support, etc.) that reuse most of the style elements. The full version adds the chat style, mentions (for comments), pad creation screen and styles for users' cursors.