prepare v2.0 release

README.md

@@ -1,77 +1,103 @@
-# Source Code Pro for tiny editor
+# Source Code Pro for TinyMCE Editor
 
-A plugin for the Moodle TinyMCE editor which replaces the basic source code editor shipped by TinyMCE6.
-This plugin leverages [codeMirror](https://codemirror.net/) version 6 to provide syntax highlight, autocompletion, block fold, etc.
+A Moodle plugin for the TinyMCE editor that enhances the built-in source code editor. 
+This plugin leverages [CodeMirror](https://codemirror.net/) version 6 to provide features such as syntax highlighting, 
+autocompletion, block folding, and more.
 
-### UI modes
+## Compatibility
 
-The code editor can be displayed in two different ways
+- **Moodle 4.1 – 4.3**: It replaces the default plain text source code editor.
+- **Moodle 4.4 and beyond**: It provides advanced features compared to the default HTML code editor.
 
-1. **Dialog**: Only one editor can be edited and changes must be confirmed or rejected.
-2. **Panel**: Several editors can be used simulataneously and changes are automatically applied.
+## Features
 
-An administrador option is used to decide which mode is used by default or it can allow the user to switch among both.
+- Syntax highlighting with line numbers
+- Search and replace functionality
+- Code formatting
+- Cursor position synchronization with TinyMCE (since v1.1.4)
+- Light and dark themes
+- Toggle fullscreen mode
+- **New in v2.0**:
+  - Dialog and panel UI modes
+  - Configurable font size
+  - Improved cursor synchronization
+  - Color picker
+  - VSCode-like minimap
 
-<img src="./pix/pict05.png" alt="UI in panel views" style="max-width:350px;">
+<img src="./pix/pict04.gif" alt="CodePro in action" style="max-width:350px;">
+
+## UI Modes
+
+The code editor can be displayed in two different modes:
+
+1. **Dialog Mode**: A single editor instance is displayed in a modal. Changes must be explicitly confirmed or rejected.
+2. **Panel Mode**: Multiple editor instances can be used simultaneously, with changes applied automatically.
+
+An administrator setting allows choosing the default mode or enabling users to switch between both modes.
+
+<img src="./pix/pict05.png" alt="UI in panel mode" style="max-width:350px;">
 
-### Features
 
-1. Color syntax and line numbers
-2. Search and replace
-3. Code formatting
-4. Cursor position synchronized with Tiny editor (since v1.1.4)
-5. Light and dark themes
-6. Toggle fullscreen mode
 
-### Key bindings
+## Key Bindings
 
-Please note that the key Alt corresponds to `Option` in mac computers.
+> Note: On macOS, `Alt` corresponds to the `Option` key.
 
-- Shift-Alt-m  Toggle minimap
-- Shift-Alt-w  Toggle line wrapping
-- Shift-Alt-t  Toggle theme (light/dark)
-- Shift-Alt-p  Format code
-- Shift-Alt-d  Save preferences as defaults
-- Shift-Alt-a  Accept changes
-- Shift-Alt-c  Cancel changes
+| Shortcut | Action |
+|----------|--------|
+| `Shift-Alt-M` | Toggle minimap |
+| `Shift-Alt-W` | Toggle line wrapping* |
+| `Shift-Alt-T` | Toggle theme (light/dark) |
+| `Shift-Alt-P` | Format code |
+| `Shift-Alt-D` | Save preferences as defaults |
+| `Shift-Alt-A` | Accept changes |
+| `Shift-Alt-C` | Cancel changes |
 
+*Please note that line wrapping is always enabled in panel mode.
 
-The installation is straightforward: simply go to Site Administration area (Plugins → Install plugins → Install plugin from ZIP file).
+## Installation
 
-Once the plugin is installed, the items named "Source Code" in the menu, will be replaced by "Source Code Pro". Also a button will be added in the first position of the toolbar.
+1. Navigate to **Site Administration** → **Plugins** → **Install plugins** → **Install plugin from ZIP file**.
+2. Once installed:
+   - The menu item "Source Code" will be replaced by "Source Code Pro."
+   - A new toolbar button will be added in the first position.
 
 <img src="./pix/pict01.png" alt="CodePro plugin button" style="max-width:350px;">
 
-The source code opens in a modal dialogue that can be expanded to fit the entire window. It accepts two themes (light and dark). You will also find a button to toggle line wrapping.
+The source code editor (in dialog mode) opens in a modal dialog that can expand to fit the full window. It supports both light and dark themes and includes a toggle for line wrapping.
 
 <img src="./pix/pict02.png" alt="CodePro light theme" style="max-width:350px;">
 
 <img src="./pix/pict03.png" alt="CodePro dark theme" style="max-width:350px;">
 
-Now, the code can be easily formatted thanks to [htmlfy](https://github.com/j4w8n/htmlfy#readme) library. The following animation shows the editor in action. Enjoy it!
-
-<img src="./pix/pict04.gif" alt="CodePro in action" style="max-width:350px;">
-
+The plugin also integrates with the [htmlfy](https://github.com/j4w8n/htmlfy#readme) library for automatic code formatting.
 
 
 ## Configuration
 
-This plugin include the following configuration settings.
+This plugin includes the following user configuration options:
 
-- 
+- **Default UI Mode**: Choose between "Dialog" and "Panel" mode.
+- **User Mode Switching**: Allow users to switch UI modes.
+- **Theme Selection**: Set a default theme or allow users to toggle between light and dark modes.
+- **Font Size Configuration**: Adjust font sizes for better readability.
 
-The capability 'tiny/codepro:viewplugin' allows to set the plugin visibility for any role.
+Additionally, the capability `tiny/codepro:viewplugin` controls visibility for specific roles.
 
+## Build & Development
 
-## Build
-### Generate AMD modules
+### Generate AMD Modules
 
-In order to generate the compiled code in `/amd/build` from sources in `/amd/src`, you need to execute the command
+To compile source files from `/amd/src` into `/amd/build`, run:
 
-```
+```sh
 npx grunt amd
 ```
 
-### Generate codemirror dependency with extra toppings
+### Build CodeMirror with custom features
+
+Refer to the documentation in `libs/codemirror` for details on modifying the CodeMirror dependency.
+
+---
 
-Please refer to the documentation in libs/codemirror.
+Enjoy coding with **Source Code Pro**!