Add Text devtool to CodeMirror example

[chacha912]

What this PR does / why we need it?

I added a devtool to the CodeMirror example that allows monitoring of CRDT Text. This devtool is an adaptation of the text editor devtool work done by @easylogic, modified to align with the current Yorkie version.

How to Run:

$ npm run dev

Visit the URL: http://localhost:9000/codemirror-devtool.html

Features

• CodeMirror Editor
• Peer List Display

devtool1.mov

• View Mode
  • Offers 5 different views for text type:
    • Block View: text, structure data, structure text
    • Tree View: SplayTree, LLRBTree
  • Provides panzoom in the tree view.
  • Toggle the view on and off.
  • Option to hide deleted nodes.

dev1.mov

• Select Node
  • Selecting a node in text, structure data, or tree view highlights and focuses on the respective node.
  • Displays SplayTree information for the selected node.

devtool2.mov

In the previous PR, it included information to monitor how skewed the splay tree was. However, in this PR, I have removed this feature to prioritize the most basic functionality. We can consider adding it back when needed.

Any background context you want to provide?

The previous work by @easylogic in this PR: #467
Thanks to the devtool, CRDT Text has become much more user-friendly to understand and easier to debug. This is amazing and incredibly helpful! Thank you, @easylogic.

What are the relevant tickets?

Fixes #

Checklist

• Added relevant tests or not required
• Didn't break anything

[codecov]

Codecov Report

Patch coverage has no change and project coverage change: +0.04% 🎉

Comparison is base (1594345) 88.83% compared to head (c4e40ae) 88.88%.
Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #646      +/-   ##
==========================================
+ Coverage   88.83%   88.88%   +0.04%     
==========================================
  Files          80       80              
  Lines        8942     8958      +16     
  Branches      823      825       +2     
==========================================
+ Hits         7944     7962      +18     
+ Misses        689      688       -1     
+ Partials      309      308       -1     

see 2 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[hackerwins]

Thanks for your contribution.

devtools seems useful for understanding the state of data structure and this is a good start to implement internal devtool. I left a suggestion.

It appears that the styles and functions defined in devtools/text.js and devtools/text.css are globally defined. This could potentially lead to conflicts when adding other data structures. How about bundling them into a module like devtools.text to avoid potential conflicts?

[hackerwins]

Thanks for your contribution.