Skip to content

Rich Text Editor: Add TipTap and ProseMirror dependencies to GitLab UI

Proposal

Add ProseMirror and TipTap dependencies to GitLab UI. The editor team will use these dependencies to implement a Rich Text Editor component.

License compatibility

TipTap and ProseMirror have compatible licenses with GitLab. See gitlab#231725 (comment 413595037) for more information.

Requirements

We have to include the Rich Text Editor 3rd party dependencies in the GitLab application while meeting the following expectations

Performance

  • We want to load these dependencies asynchronously.
  • If the dependencies are not updated, we want to maintain them in the web browser’s cache. To meet this expectation, the bundle where the dependencies is distributed should be independent from the bundle where the Rich Text Editor is located. The reason is that we will update the Rich Text Editor more often than its dependencies.

Smooth transition to TipTap v2

The methodology we use to load the dependencies should not become a hindrance for the transition from TipTap 1 to TipTap 2 (currently in private development).

To meet this expectation. We should be aware of the differences between TipTap 1 and TipTap 2 distribution. TipTap 1 groups all its dependencies and core components in two packages: tiptap and tiptap-extensions.

<script>
import { Editor, EditorContent } from 'tiptap';
import { Bold } from 'tiptap-extensions';

export default {
  components: {
    EditorContent,
  },
  data() {
    return {
      editor: new Editor({
        content: '<p>Initial editor content</p>',
        extensions: [
          new Bold(),
        ],
      })
    }
  },
  beforeDestroy() {
    this.editor.destroy()
  },
}
</script>
<template>
  <editor-content :editor="editor" />
</template>

TipTap 2 distributes extensions and Vue components in different packages.

import { Editor } from '@tiptap/core'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'

new Editor({
  element: document.querySelector('.element'),
  extensions: [
    Document,
    Paragraph,
    Text,
  ],
  content: '<p>Example Text</p>',
  autofocus: true,
  editable: true,
  injectCSS: false,
})

Implementation guide

  • Encapsulate the responsibility of loading tiptap packages in a single factory function. The advantage of putting all import calls in a single place is that we will only have to replace TipTap 1 packages with TipTap 2 packages in that location.
  • Put all tiptap packages in the same bundle using webpack module methods

image

Context

See for a big picture of the Rich Text Editor development: gitlab#321442 (closed)

Edited by Enrique Alcántara