Skip to content

Refactor: Do not include Tiptap Editor class in Vue reactivity

What does this MR do?

This Merge Request contains a series of refactoring changes that have as end goal removing the Tiptap’s Editor class instance from the Vue’s component reactive state.

Why are we doing this?

The Vue documentation strongly recommends not including ES6 class instances or objects created with constructor functions in the Component‘s reactive state created using data(). However, Tiptap’s documentation adopts this anti-pattern to react to changes in the document and the document’s selection.

This refactoring implements a solution that allows us to react to changes in the Editor’s document without breaking Vue’s rules.

What exactly does this MR contain?

  • Injecting the Tiptap Editor class instance to all toolbar controls instead of passing the instance as a property. We don’t need to declare properties because we are not relying on Vue reactivity anymore.
  • Creates a editor_state_observer renderless component that interfaces with the Tiptap’s Editor class instance events to allow Vue components to update their state based on these events.
  • Refactors toolbar controls to use the editor_state_observer renderless component.

Screenshots or Screencasts (strongly suggested)

This MR does not introduce user-facing changes.

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Security

Does this MR contain changes to processing or storing of credentials or tokens, authorization and authentication methods or other items described in the security review guidelines? If not, then delete this Security section.

  • Label as security and @ mention @gitlab-com/gl-security/appsec
  • The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
  • Security reports checked/validated by a reviewer from the AppSec team
Edited by Enrique Alcántara

Merge request reports