Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-75071

Deprecate Atto in favour of Tiny 6

XMLWordPrintable

      Atto was designed as a lightweight, accessible, in-house editor for Moodle. While it has arguably achieved all of these goals, it was written nearly a decade ago, uses deprecated technologies, and is difficult to maintain. In addition:

      • Moodle lacks the dedicated, in-house, knowledge to maintain a rich text editor
        Maintaining our own editor detracts from our core business goals of writing a kick-ass LMS to empower educators.
      • The JavaScript world has moved on, but because Atto is built upon the now-deprecated YUI framework, it is increasingly difficult for us to add new features using modern language features.
      • The library we use to normalise content selection (Rangy) was abandoned shortly after we started to use it, and has a number of known issues that detract from the experience of using Atto.
      • Many of the language features that Atto is based around were experimental at the time of its original writing and never made it to the browser specification. Their continued use is not advisable.
      • Atto is fine for editing short content, but when editing larger, or more complex, content it becomes more challenging. In particular, the undo/redo are problematic, and image handling is tricky.

      Possible solutions

      As with any problem, we have multiple solutions available - each has their own benefits and problems. To add to this, Moodle also has a number of restrictions which we place upon ourselves and which make any product selection more complex and/or prohibitive, in particular:

      • Our plugin structure does not support files being parachuted into place. We have a strict plugin architecture which must be followed for community plugins to work.
      • We do not use any server-side JS processing, such as WebPack. All of our JS is shipped with Moodle, or community Moodle plugins, as pre-compiled code ready for production. This prevents us from using any editor which tree-shakes code based on configuration, or whose APIs are mangled during their build process.
      • We use our own Translation system (AMOS)
      • We use our own dialogues, menu bars, and other UI features

      Rewrite Atto

      Perhaps the most obvious solution is to rewrite Atto as a series of ES Modules to match our other JavaScript content. In doing so we would also have to find an alternative to the rangy library, and to the deprecated Document.execCommand() browser API. In an ideal world we would also maintain backwards compatibility with existing Atto plugins, but this would be extremely difficult given the move from YUI to ESM, the necessary change of underlying API, and the replacement of Rangy. The complexity of this project would be high, and Moodle would still be maintaining its own text editor, which is a huge distraction from our core business.

      Replace Atto

      Atto is not the only rich text editor available, and many other Open Source editors exist. These include editors like CKEditor, Tiny, and Quill. Others do exist but are not included here as they are opinionated in their design and/or abandoned. However, replacing Atto is not a trivial task.

      Whilst this approach would work around the issues of finding alternatives to Rangy and the use of deprecated browser APIs, it would not solve the issues of breaking compatibility with all existing third-party plugins; however it can provide a wealth of existing functionality with years of dedicated research and development instead. In many cases the current Moodle plugins can be replaced with existing plugins, negating the need to develop them again for Moodle.

      CKEditor

      The limitations above immediately preclude the use of CKEditor 5, which requires WebPack, and tree shakes the entire platform. It would not be possible for third-party developers to write plugins for multiple versions of Moodle, and a new compilation step would be required, and could only run when all possible plugins are in place. Configuration would not be trivial.

      QuillJS

      QuillJS is an editor framework. Whilst it can provide an editor without any further configuration, to do anything more Moodle would need to create all interfaces using our own existing components and integrate these with the QuillJS APIs. This is closer to the Replace Atto approach, but with a well-supported underlying editor API. This approach would still require all of the current overheads of maintaining an editor, albeit without most of the more complex editor parts.

      Tiny

      Tiny is a full-featured editor, which comes with a number of standard plugins which replace many of Atto’s standard features - these include standard formatting, font and colour selection, alignment and justification, undo/redo, word count, source-code viewing, table support, links, emojis, copy, and paste. Many of these features will work as-is for Moodle.

      Some use the Tiny modal and form frameworks and we would have to decide whether to use these in Moodle, or to rewrite them using the standard Moodle interfaces. This decision would not have to be made immediately.

      Other options

      I looked at a number of other possible editors, but these were either opinionated in their choice of technology (for example jQuery, specific Bootstrap versions), or were abandoned.

      Important

      If you are aware of other editors which meet these criterion, and you feel we should include them in this consideration *now* is the time to mention them.

      Given the above analysis, we are currently looking at adopting Tiny version 6 as a replacement for Atto.

            Votes:
            19 Vote for this issue
            Watchers:
            63 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 week, 3 hours, 30 minutes
                1w 3h 30m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.