Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve documentation #529

Merged
merged 2 commits into from
Feb 17, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -133,7 +133,10 @@ val myUriHandler by remember {
})
}
CompositionLocalProvider(LocalUriHandler provides myUriHandler) {
RichText( ... )
RichText(
state = richTextState,
modifier = Modifier.fillMaxWidth()
)
}
```

Expand Down
25 changes: 23 additions & 2 deletions docs/code_blocks.md
Original file line number Diff line number Diff line change
@@ -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:

Expand All @@ -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!
2 changes: 1 addition & 1 deletion docs/code_of_conduct.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
56 changes: 53 additions & 3 deletions docs/faq.md
Original file line number Diff line number Diff line change
@@ -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`:

Expand Down Expand Up @@ -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)
```
17 changes: 12 additions & 5 deletions docs/getting_started.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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
Expand All @@ -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
Expand Down
73 changes: 67 additions & 6 deletions docs/html_import_export.md
Original file line number Diff line number Diff line change
@@ -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
5 changes: 4 additions & 1 deletion docs/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,10 @@ val myUriHandler by remember {
})
}
CompositionLocalProvider(LocalUriHandler provides myUriHandler) {
RichText( ... )
RichText(
state = richTextState,
modifier = Modifier.fillMaxWidth()
)
}
```

Expand Down
Loading
Loading