Add a barebones implementation of the Code Mirror component

Related to #1231

Brief

This adds a new component CodeMirror, intended to be used for all code-viewing, code-editing, diff-viewing, and diff-editing purposes. In addition, a new route /demo is added to the app, for showcasing complex components.

Details

A new component CodeMirror is added, utilising CodeMirror 6, which proxies all of the supported options to CodeMirror, supports a two-way data binding for the edited document, allows modifying any of the options after the component was initially rendered on the fly, and many more.

All of the extensions from CodeMirror's basicSetup and the Core Extensions List are supported, with corresponding arguments for each.

The component currently includes all themes from react-codemirror. We can adjust and limit the list to decrease the bundle size later, after we pick all the preferred themes.

Screenshot

Added NPM packages

• codemirror
• @codemirror/language-data
• @codemirror/merge
• @uiw/codemirror-themes-all

Demo details

• Added a new route /demo for testing & showcasing complex components
• Added a new route /demo/code-mirror for the CodeMirror component
• Route demo.index automatically redirects to demo.code-mirror
• Navigation bar item "Demo" is shown if environment !== 'production'

Supported options

Document options:

• document:string — Document for the editor to render & edit
• onUpdate:function(controller, newValue){} — Function to call when document is edited inside the editor

Filename & Language:

• filename:string — Pass a filename to the editor
• language:string — Explicitly pass a language to the editor

Original document (enables showing the unified diff):

• originalDocument:string — Enable unified diff editor by passing the original document

String & Number options:

• indentUnit:string — Symbols to use for indentation with indentOnInput and indentWithTab (does NOT reformat document upon loading)
• lineSeparator:string — Line ending separator to use when Enter is pressed in editor (does NOT reformat document upon loading)
• placeholder:string — Placeholder text to show when document is empty or not passed
• tabSize:number — Number of spaces to use for representing the TAB character visually
• theme:string — Theme to use for the editor

Boolean options:

• allowMultipleSelections:boolean — Allow multiple selections by using CTRL/CMD key
• autocompletion:boolean — Enable auto-completion
• bracketMatching:boolean — Enable highlighting of matching brackets
• closeBrackets:boolean — Automatically close brackets when typing
• crosshairCursor:boolean — Use a crosshair cursor over the editor when ALT key is pressed
• drawSelection:boolean — Use a custom method for selection drawing instead of the browser's built-in, allows multiple selections and other goodies
• dropCursor:boolean — Draw a blinking edit cursor to indicate where pasting will occur when a file is dragged over the editor
• editable:boolean — Present the editor as an editable & focusable control, sets the DOM contenteditable attribute, do not confuse with readOnly
• foldGutter:boolean — Enable code folding & the fold gutter
• highlightActiveLine:boolean — Enable highlighting of active line
• highlightSelectionMatches:boolean — Enable highlighting of current selection matches in the document
• highlightSpecialChars:boolean — Enable highlighting of invisible characters, such as U+200E
• highlightTrailingWhitespace:boolean — Enable highlighting of trailing whitespace
• highlightWhitespace:boolean — Enable highlighting of whitespace
• history:boolean — Enable changes history and undo/redo keymap
• indentOnInput:boolean — Enable automatic indentation (in languages that support/require it)
• indentWithTab:boolean — Enable indentation of lines or selection using TAB and Shift+TAB keys, otherwise editor loses focus when TAB is pressed
• lineNumbers:boolean — Enable the line numbers gutter
• lineWrapping:boolean — Enable visual line wrapping for lines exceeding editor width
• mergeControls:boolean — Enable showing accept/reject buttons in the diff editor
• preserveHistory:boolean — Preserve changes history when parent component passes a new document to the component
• readOnly:boolean — Make the document in the editor read-only, disable commands and other mutating extensions, do not confuse with editable
• rectangularSelection:boolean — Allow drawing rectangular selections by using ALT key
• scrollPastEnd:boolean — Allow scrolling past the end of the document
• syntaxHighlighting:boolean — Enable syntax highlighting (using a theme enables syntax highlighting automatically)

Tests

Included tests are basic, but are triggering the component rendering with most of the options, ensuring nothing breaks in the process. Additional tests will come in a separate PR.

Each option has a real basic test for it, and a pending test to be solved in the future:

Checklist

• [x] I've thoroughly self-reviewed my changes
• [x] I've added tests for my changes, unless they affect admin-only areas (or are otherwise not worth testing)
• [x] I've verified any visual changes using Percy (add a commit with [percy] in the message to trigger)

Summary by CodeRabbit

• New Features

  • Introduced a code-mirror component for rich text editing with dynamic configuration options.
  • Added a 'Demo' link in the header for non-production environments.
  • Created new routes and templates for a demo page showcasing the CodeMirror component.
  • Integrated new CodeMirror-related dependencies for enhanced text editing and syntax highlighting.

• Bug Fixes

  • N/A

• Documentation

  • N/A

• Refactor

  • N/A

• Style

  • N/A

• Tests

  • Updated and added new tests for the demo page and CodeMirror component functionalities.

• Chores

  • N/A

• Revert

  • N/A

Walkthrough

The recent changes bring forth a new code-mirror component for enriched text editing, featuring autocompletion and syntax highlighting. A demo section showcases the component's capabilities. Updates encompass new routes, controllers, templates, and tests to bolster the demo, alongside essential dependencies in the package.json.

Changes

File/Directory	Change Summary
app/components/code-mirror.hbs	Introduces the code-mirror component with dynamic option bindings.
app/components/code-mirror.js	Adds CodeMirrorComponent with methods for editor options and rendering.
app/components/header.ts	Adds a conditional 'Demo' link based on the environment.
app/controllers/demo.ts	Introduces DemoController with a RouterService property.
app/controllers/demo/code-mirror.ts	Adds DemoCodeMirrorController for managing CodeMirror settings and functionality.
app/router.ts	Declares new routes for 'demo' and nested 'code-mirror'.
app/routes/demo.ts	Introduces DemoRoute class extending Route.
app/routes/demo/code-mirror.ts	Introduces DemoCodeMirrorRoute class extending Route.
app/routes/demo/index.ts	Adds DemoIndexRoute class with a redirect method to demo.code-mirror.
app/templates/demo.hbs	Introduces a template for the demo page with title, description, and navigation links.
app/templates/demo/code-mirror.hbs	Adds a template for configuring CodeMirror editor options.
package.json	Includes dependencies for CodeMirror and related features.
tests/acceptance/view-demo-page-test.js	Adds tests for visiting the demo page and checking the CodeMirror component.
tests/integration/components/code-mirror-test.js	Includes tests for code-mirror component rendering and options.
tests/unit/controllers/demo-test.ts	Sets up a unit test for the demo controller.
tests/unit/controllers/demo/code-mirror-test.ts	Sets up unit tests for the demo/code-mirror controller.
tests/unit/routes/demo-test.ts	Sets up a unit test for the demo route.
tests/unit/routes/demo/code-mirror-test.ts	Sets up a unit test for the demo/code-mirror route.
tests/unit/routes/demo/index-test.ts	Sets up a unit test for the demo/index route.

In the land of code and mirrors bright, A rabbit hops with pure delight. New features bloom, like springtime flowers, Enhancing editors with magic powers. Through routes and tests, the journey's clear, CodeMirror shines, let’s give a cheer! 🎉🐇

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

• X
• Mastodon
• Reddit
• LinkedIn

Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai generate interesting stats about this repository and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

Codecov Report

Attention: Patch coverage is 83.33333% with 23 lines in your changes are missing coverage. Please review.

:white_check_mark: All tests successful. No failed tests found.

Files	Patch %	Lines
app/controllers/demo/code-mirror.ts	79.16%	15 Missing :warning:
app/components/code-mirror.ts	88.52%	2 Missing and 5 partials :warning:
app/components/header.ts	50.00%	0 Missing and 1 partial :warning:

Additional details and impacted files

:loudspeaker: Thoughts on this report? Let us know!

Test Results

  1 files  ± 0    1 suites  ±0   4m 40s :stopwatch: - 1m 7s 515 tests +79  480 :white_check_mark: +46  35 :zzz: +34  0 :x: ±0  530 runs  +79  495 :white_check_mark: +47  35 :zzz: +34  0 :x:  - 1 

Results for commit 15b59958. ± Comparison against base commit 6317aed6.

:recycle: This comment has been updated with latest results.

Bundle Report

Changes will increase total bundle size by 1.71MB :arrow_up:

Bundle name	Size	Change
client-array-push	26.23MB	1.71MB :arrow_up: