Merge pull request #529 from MohamedRejeb/1.x

Improve documentation
MohamedRejeb · Feb 17, 2025 · b7514ae · b7514ae
2 parents 1b1959e + f41df35
commit b7514ae
Show file tree

Hide file tree

Showing 13 changed files with 602 additions and 101 deletions.
diff --git a/README.md b/README.md
@@ -82,7 +82,7 @@ To get the current span style of the selection, use `RichTextState.currentSpanSt
 ```kotlin
 // Get the current span style.
 val currentSpanStyle = richTextState.currentSpanStyle
-val isBold = currentSpanStyle.fontWeight = FontWeight.Bold
+val isBold = currentSpanStyle.fontWeight == FontWeight.Bold
 ```
 
 #### Styling Paragraphs
@@ -99,7 +99,7 @@ To get the current paragraph style of the selection, use `RichTextState.currentP
 ```kotlin
 // Get the current paragraph style.
 val currentParagraphStyle = richTextState.currentParagraphStyle
-val isCentered = currentParagraphStyle.textAlign = TextAlign.Center
+val isCentered = currentParagraphStyle.textAlign == TextAlign.Center
 ```
 
 #### Add links
@@ -133,7 +133,10 @@ val myUriHandler by remember {
     })
 }
 CompositionLocalProvider(LocalUriHandler provides myUriHandler) {
-    RichText( ... )
+    RichText(
+        state = richTextState,
+        modifier = Modifier.fillMaxWidth()
+    )
 }
 ```
 

diff --git a/docs/code_blocks.md b/docs/code_blocks.md
@@ -1,4 +1,12 @@
-# Code Spans
+# Code Formatting
+
+## Code Spans
+
+Code spans are used to highlight inline code within text. They are perfect for referencing:
+- Variable names
+- Function names
+- Short code snippets
+- File names
 
 To add code spans, `RichTextState` provides `toggleCodeSpan` method:
 
@@ -12,4 +20,17 @@ To get if the current selection is a code span, use `RichTextState.isCodeSpan`:
 ```kotlin
 // Get if the current selection is a code span.
 val isCodeSpan = richTextState.isCodeSpan
-```
+```
+
+Example of how code spans appear:
+Normal text with `inline code` within it.
+
+## Code Blocks
+
+Multiline code blocks are planned for a future release. They will support:
+- Syntax highlighting
+- Multiple lines of code
+- Language specification
+- Copy to clipboard functionality
+
+Stay tuned for updates!
diff --git a/docs/code_of_conduct.md b/docs/code_of_conduct.md
@@ -55,7 +55,7 @@ a project may be further defined and clarified by project maintainers.
 ## Enforcement
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting the project team at colin at colinwhite.me. All
+reported by contacting the project team through [GitHub Issues](https://github.com/MohamedRejeb/Compose-Rich-Editor/issues). All
 complaints will be reviewed and investigated and will result in a response that
 is deemed necessary and appropriate to the circumstances. The project team is
 obligated to maintain confidentiality with regard to the reporter of an incident.

diff --git a/docs/faq.md b/docs/faq.md
@@ -1,8 +1,12 @@
 # FAQ
 
-Have a question that isn't part of the FAQ? Open an issue here [Compose-Rich-Editor](https://github.com/MohamedRejeb/Compose-Rich-Editor/issues).
+Have a question that isn't part of the FAQ? Open an issue in our [GitHub repository][issues].
 
-## How do I get development snapshots?
+[issues]: https://github.com/MohamedRejeb/Compose-Rich-Editor/issues
+
+## Common Questions
+
+### How do I get development snapshots?
 
 Add the snapshots repository to your list of repositories in `build.gradle.kts`:
 
@@ -30,4 +34,50 @@ Use the snapshot version:
 implementation("com.mohamedrejeb.richeditor:richeditor-compose:1.0.0-SNAPSHOT")
 ```
 
->Note: Snapshots are deployed for each new commit on `main` that passes CI. They can potentially contain breaking changes or may be unstable. Use at your own risk.
+⚠️ **Warning**: Snapshots are deployed for each new commit on `main` that passes CI. They can potentially contain breaking changes or may be unstable. Use at your own risk.
+
+### How do I customize the appearance of links?
+
+You can customize link appearance using the `config` property of `RichTextState`:
+
+```kotlin
+richTextState.config.linkColor = Color.Blue
+richTextState.config.linkTextDecoration = TextDecoration.Underline
+```
+
+### How do I handle link clicks?
+
+By default, links are opened by your platform's `UriHandler`. To handle links yourself:
+
+```kotlin
+val myUriHandler = remember {
+    object : UriHandler {
+        override fun openUri(uri: String) {
+            // Your custom link handling logic
+        }
+    }
+}
+
+CompositionLocalProvider(LocalUriHandler provides myUriHandler) {
+    RichText(
+        state = richTextState,
+        modifier = Modifier.fillMaxWidth()
+    )
+}
+```
+
+### How do I save/restore editor content?
+
+You can convert the editor content to HTML or Markdown for storage:
+
+```kotlin
+// Save content
+val html = richTextState.toHtml()
+// or
+val markdown = richTextState.toMarkdown()
+
+// Restore content
+richTextState.setHtml(savedHtml)
+// or
+richTextState.setMarkdown(savedMarkdown)
+```
diff --git a/docs/getting_started.md b/docs/getting_started.md
@@ -41,7 +41,7 @@ To get the current span style of the selection, use `RichTextState.currentSpanSt
 ```kotlin
 // Get the current span style.
 val currentSpanStyle = richTextState.currentSpanStyle
-val isBold = currentSpanStyle.fontWeight = FontWeight.Bold
+val isBold = currentSpanStyle.fontWeight == FontWeight.Bold
 ```
 
 Check out [the full documentation](span_style.md) for more info.
@@ -60,15 +60,16 @@ To get the current paragraph style of the selection, use `RichTextState.currentP
 ```kotlin
 // Get the current paragraph style.
 val currentParagraphStyle = richTextState.currentParagraphStyle
-val isCentered = currentParagraphStyle.textAlign = TextAlign.Center
+val isCentered = currentParagraphStyle.textAlign == TextAlign.Center
 ```
 
-Check out [the full documentation](span_style.md) for more info.
+Check out [the full documentation](paragraph_style.md) for more info.
 
 ## Supported Styling Formats
 
-The styling format supported by Compose Rich Editor:
+The styling formats supported by Compose Rich Editor:
 
+### Text Formatting
 * Bold
 * Italic
 * Underline
@@ -77,13 +78,19 @@ The styling format supported by Compose Rich Editor:
 * Background color
 * Font size
 * Any custom style using `SpanStyle`
+
+### Paragraph Formatting
 * Text Align
 * Any custom style using `ParagraphStyle`
+
+### Lists and Blocks
 * Ordered List
 * Unordered List
-* Links
 * Code Blocks
 
+### Links
+* Hyperlinks
+
 There are some styling formats that are not supported yet, but I'm planning to add them in the future:
 
 * Images

diff --git a/docs/html_import_export.md b/docs/html_import_export.md
@@ -1,14 +1,75 @@
-# HTML import and export
+# HTML Import and Export
 
-To convert HTML to `RichTextState`, use `RichTextState.setHtml` method:
+The Rich Text Editor supports converting between HTML and rich text content. This allows you to:
+- Save editor content as HTML
+- Load content from HTML sources
+- Integrate with HTML-based systems
+
+## Importing HTML
+
+To convert HTML to `RichTextState`, use the `setHtml` method:
 
 ```kotlin
-val html = "<p><b>Compose Rich Editor</b></p>"
-richTextState.setHtml(html)
+// Basic formatting
+val simpleHtml = """
+    <p><b>Bold</b> and <i>italic</i> text with <u>underline</u></p>
+"""
+richTextState.setHtml(simpleHtml)
+
+// Complex structure
+val complexHtml = """
+    <div>
+        <h1>Title</h1>
+        <p>Paragraph with <strong>bold</strong> and <em>italic</em> text.</p>
+        <ul>
+            <li>Unordered list item 1</li>
+            <li>Unordered list item 2</li>
+        </ul>
+        <ol>
+            <li>Ordered list item 1</li>
+            <li>Ordered list item 2</li>
+        </ol>
+        <p>Link to <a href="https://example.com">Example</a></p>
+        <pre><code>Code block example</code></pre>
+    </div>
+"""
+richTextState.setHtml(complexHtml)
 ```
 
-To convert `RichTextState` to HTML, use `RichTextState.toHtml` method:
+## Exporting to HTML
+
+To convert `RichTextState` to HTML, use the `toHtml` method:
 
 ```kotlin
 val html = richTextState.toHtml()
-```
+println(html) // Outputs formatted HTML string
+```
+
+## Supported HTML Tags
+
+The following HTML tags are supported:
+
+### Text Formatting
+- `<b>`, `<strong>` - Bold text
+- `<i>`, `<em>` - Italic text
+- `<u>` - Underlined text
+- `<s>`, `<del>` - Strikethrough text
+- `<code>` - Code spans
+
+### Structure
+- `<p>` - Paragraphs
+- `<div>` - Divisions
+- `<br>` - Line breaks
+- `<ul>` - Unordered lists
+- `<ol>` - Ordered lists
+- `<li>` - List items
+
+### Links
+- `<a href="...">` - Hyperlinks
+
+## Notes
+
+- Unsupported HTML tags will be ignored during import
+- Nested lists are supported
+- Custom styles (using style attribute) are not currently supported
+- The HTML output is clean and properly formatted
diff --git a/docs/index.md b/docs/index.md
@@ -131,7 +131,10 @@ val myUriHandler by remember {
     })
 }
 CompositionLocalProvider(LocalUriHandler provides myUriHandler) {
-    RichText( ... )
+    RichText(
+        state = richTextState,
+        modifier = Modifier.fillMaxWidth()
+    )
 }
 ```