Updated readme format

Author: cp-divyesh-v

README.md

@@ -4,15 +4,11 @@
 # RichEditorSwiftUI
 [![Swift](https://img.shields.io/badge/Swift-5.9-orange?style=flat-square)](https://img.shields.io/badge/Swift-5.9-Orange?style=flat-square)
 [![Platforms](https://img.shields.io/badge/Platforms-macOS_iOS_tvOS_watchOS_visionOS-yellowgreen?style=flat-square)](https://img.shields.io/badge/Platforms-macOS_iOS_tvOS_watchOS_vision_OS_-Green?style=flat-square)
-[![CocoaPods Compatible](https://img.shields.io/cocoapods/v/Alamofire.svg?style=flat-square)](https://img.shields.io/cocoapods/v/Alamofire.svg)
+[![CocoaPods Compatible](https://img.shields.io/cocoapods/v/RichEditorSwiftUI.svg?style=flat-square)](https://img.shields.io/cocoapods/v/RichEditorSwiftUI.svg)
 [![Swift Package Manager](https://img.shields.io/badge/Swift_Package_Manager-compatible-orange?style=flat-square)](https://img.shields.io/badge/Swift_Package_Manager-compatible-orange?style=flat-square)
 
 ![RichEditorSwiftUI (1)](https://github.com/canopas/rich-editor-swiftui/assets/73588408/8c3013ae-8a27-4ebc-a511-51e726825c4b)
 
-## A swift-based  library to make rich text editing very easy with SwiftUI.
-
-<img src="./docs/sample.gif" height="640" />    <img src="./docs/dark_mode_sample.gif" height="640" />
-
 ## Features
 
 The editor offers the following <b>options</b>:
@@ -29,6 +25,59 @@ The editor offers the following <b>options</b>:
 - [x] Background color
 - [x] Export with .txt, .rtf, .pdf, .json
 
+## Screenshots
+
+<table>
+  <tr>
+    <th width="33%" >Editor light</th>
+    <th  width="33%" >Editor dark</th>
+  </tr>
+  <tr>
+    <td><img src="docs/editor_iphone_light.png" /></td>
+    <td> <img src="docs/editor_iphone_dark.png" /> </td>
+  </tr>
+</table>
+
+<table>
+  <tr>
+    <th width="33%" >Toolbar dark</th>
+    <th  width="33%" >Toolbar light</th>
+  </tr>
+  <tr align="center">
+    <td><img src="docs/editor_toolbar_iphone_dark.png" /></td>
+    <td> <img src="docs/editor_toolbar_iphone_light.png" /> </td>
+  </tr>
+</table>
+
+<table>
+  <tr>
+    <th width="100%" >mac Editor light</th>
+  </tr>
+  <tr align="center">
+    <td><img src="docs/editor_mac_light.png"  width="70%" /></td>
+  </tr>
+</table>
+
+<table>
+  <tr>
+    <th  width="100%" >mac Editor dark</th>
+  </tr>
+  <tr align="center">
+    <td> <img src="docs/editor_mac_dark.png"  width="70%" /> </td>
+  </tr>
+</table>
+
+## mac Editor video
+
+<div align="center">
+  <video src="https://github.com/user-attachments/assets/844d8843-41e9-44c2-8a0c-afedaa55c5cb" />
+</div>
+
+## Editor video
+<div align="center">
+  <video src="https://github.com/user-attachments/assets/f99804fb-8612-4e46-b172-66567d1acf91" />
+</div>
+
 ## Installation
 
 ### Swift Package Manager
@@ -66,10 +115,36 @@ Add the dependency
 ```
 struct EditorView: View {
     @ObservedObject var state: RichEditorState = .init(input: "Hello World")
-    
+
     var body: some View {
-        RichEditor(state: _state)
-            .padding(10)
+        VStack {
+            #if os(macOS)
+                RichTextFormat.Toolbar(context: state)
+            #endif
+
+            RichTextEditor(
+                context: _state,
+                viewConfiguration: { _ in
+
+                }
+            )
+            .cornerRadius(10)
+
+            #if os(iOS)
+                RichTextKeyboardToolbar(
+                    context: state,
+                    leadingButtons: { $0 },
+                    trailingButtons: { $0 },
+                    formatSheet: { $0 }
+                )
+            #endif
+        }
+        .inspector(isPresented: $isInspectorPresented) {
+            RichTextFormat.Sidebar(context: state)
+                #if os(macOS)
+                    .inspectorColumnWidth(min: 200, ideal: 200, max: 315)
+                #endif
+        }
     }
 }
 ```