From e76e7d97a136ad2742aedcf074b08397163c5e7f Mon Sep 17 00:00:00 2001
From: pxpm <pxpm88@gmail.com>
Date: Sat, 17 Jan 2026 14:04:56 +0000
Subject: [PATCH 1/2] add docs for monaco and codemirror

---
 7.x/crud-columns.md | 30 ++++++++++++++++++++++++++
 7.x/crud-fields.md  | 51 +++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 81 insertions(+)

diff --git a/7.x/crud-columns.md b/7.x/crud-columns.md
index a06774b3..bf191825 100644
--- a/7.x/crud-columns.md
+++ b/7.x/crud-columns.md
@@ -1018,6 +1018,21 @@ Show a thumbnail image stored in the db column as `base64` image string.
 
 <hr>
 
+<a name="code_mirror_editor"></a>
+### Code Mirror (Code editor) <span class="badge badge-pill badge-info">PRO</span>
+
+Show a preview of the code stored in the database, with a "View" button to show the full code in accordeon style (hidden div).
+
+```php
+[
+    'name' => 'code',
+    'type' => 'code_mirror_editor',
+    'label' => 'Code',
+],
+```
+
+<hr>
+
 <a name="date_picker"></a>
 ### date_picker <span class="badge badge-pill badge-info">PRO</span>
 
@@ -1139,6 +1154,21 @@ Convert a markdown string to HTML, using ```Illuminate\Mail\Markdown```. Since M
 
 <hr>
 
+<a name="monaco_editor"></a>
+### Monaco Editor (code editor) <span class="badge badge-pill badge-info">PRO</span>
+
+Show a preview of the code stored in the database, with a "View" button to show the full code in a accordion like behavior (hidden div).
+
+```php
+[
+    'name' => 'code',
+    'type' => 'monaco_editor',
+    'label' => 'Code',
+],
+```
+
+<hr>
+
 <a name="relationship"></a>
 ### relationship <span class="badge badge-pill badge-info">PRO</span>
 
diff --git a/7.x/crud-fields.md b/7.x/crud-fields.md
index e169f498..4edabfc6 100644
--- a/7.x/crud-fields.md
+++ b/7.x/crud-fields.md
@@ -1210,6 +1210,31 @@ Input preview:
 
 <hr>
 
+<a name="code_mirror_editor"></a>
+### Code Mirror (Code Editor) <span class="badge badge-pill badge-info">PRO</span>
+
+Show a CodeMirror code editor. It supports syntax highlighting for multiple languages and themes.
+
+```php
+CRUD::field([
+    'name' => 'code',
+    'type' => 'code_mirror_editor',
+    'label' => 'Code',
+    // optional
+    'configuration' => [
+        'theme' => 'monokai', // options: monokai, dracula, material, eclipse, idea
+        'mode' => 'javascript', // options: javascript, xml, css, htmlmixed, php, sql, python
+        'height' => '300px',
+    ]
+]);
+```
+
+Input preview:
+
+![CRUD Field - code_mirror_editor](https://backpackforlaravel.com/uploads/docs-4-2/fields/code_mirror_editor.png)
+
+<hr>
+
 <a name="date-range"></a>
 ### date_range <span class="badge badge-pill badge-info">PRO</span>
 
@@ -1548,6 +1573,32 @@ Input preview:
 
 <hr>
 
+<a name="monaco_editor"></a>
+### Monaco Editor (Code editor) <span class="badge badge-pill badge-info">PRO</span>
+
+Show a Monaco Editor (VS Code editor). It provides a rich code editing experience.
+
+```php
+CRUD::field([
+    'name' => 'code',
+    'type' => 'monaco_editor',
+    'label' => 'Code',
+    // optional
+    'configuration' => [
+        'language' => 'javascript', // default: javascript
+        'theme' => 'vs-dark', // options: vs, vs-dark, hc-black
+        'minimap' => ['enabled' => true],
+        // other monaco options...
+    ]
+]);
+```
+
+Input preview:
+
+![CRUD Field - monaco_editor](https://backpackforlaravel.com/uploads/docs-4-2/fields/monaco_editor.png)
+
+<hr>
+
 <a name="phone"></a>
 ### phone <span class="badge badge-pill badge-info">PRO</span>
 

From dcc4212330896e12e942ed717332ec60a8a5e51b Mon Sep 17 00:00:00 2001
From: pxpm <pxpm88@gmail.com>
Date: Sun, 18 Jan 2026 10:49:44 +0000
Subject: [PATCH 2/2] removed monaco

---
 7.x/crud-columns.md | 15 ---------------
 7.x/crud-fields.md  | 26 --------------------------
 2 files changed, 41 deletions(-)

diff --git a/7.x/crud-columns.md b/7.x/crud-columns.md
index bf191825..bdafcddb 100644
--- a/7.x/crud-columns.md
+++ b/7.x/crud-columns.md
@@ -1154,21 +1154,6 @@ Convert a markdown string to HTML, using ```Illuminate\Mail\Markdown```. Since M
 
 <hr>
 
-<a name="monaco_editor"></a>
-### Monaco Editor (code editor) <span class="badge badge-pill badge-info">PRO</span>
-
-Show a preview of the code stored in the database, with a "View" button to show the full code in a accordion like behavior (hidden div).
-
-```php
-[
-    'name' => 'code',
-    'type' => 'monaco_editor',
-    'label' => 'Code',
-],
-```
-
-<hr>
-
 <a name="relationship"></a>
 ### relationship <span class="badge badge-pill badge-info">PRO</span>
 
diff --git a/7.x/crud-fields.md b/7.x/crud-fields.md
index 4edabfc6..65fc7742 100644
--- a/7.x/crud-fields.md
+++ b/7.x/crud-fields.md
@@ -1573,32 +1573,6 @@ Input preview:
 
 <hr>
 
-<a name="monaco_editor"></a>
-### Monaco Editor (Code editor) <span class="badge badge-pill badge-info">PRO</span>
-
-Show a Monaco Editor (VS Code editor). It provides a rich code editing experience.
-
-```php
-CRUD::field([
-    'name' => 'code',
-    'type' => 'monaco_editor',
-    'label' => 'Code',
-    // optional
-    'configuration' => [
-        'language' => 'javascript', // default: javascript
-        'theme' => 'vs-dark', // options: vs, vs-dark, hc-black
-        'minimap' => ['enabled' => true],
-        // other monaco options...
-    ]
-]);
-```
-
-Input preview:
-
-![CRUD Field - monaco_editor](https://backpackforlaravel.com/uploads/docs-4-2/fields/monaco_editor.png)
-
-<hr>
-
 <a name="phone"></a>
 ### phone <span class="badge badge-pill badge-info">PRO</span>