# Basics

![Maven Central](https://img.shields.io/maven-central/v/io.writeopia/writeopia-core)

Note: You can check a sample project at: https://github.com/Writeopia/EditorSample

Add the project in your gradle file:

```kotlin
implementation("io.writeopia:writeopia-models:[version]")
// Add the core functionality
implementation("io.writeopia:writeopia-core:[version]")
// Add the UI for the editor
implementation("io.writeopia:writeopia-ui:[version]")
```

Check releases for [latest](https://github.com/leandroBorgesFerreira/writeopia/releases) version.


## Display content

The `Composable` responsible for drawing the text editor is `WriteopiaEditor`. It needs at least a map with Drawers, the`WriteopiaManager` and a `DrawState` to draw. 

It is necessary to initialize the WriteopiaStateManager, create the drawers of content and pass it to the WriteopiaEditor.

```kotlin
val stateManager = remember {
    WriteopiaStateManager.create(
        WriteopiaManager(),
        dispatcher = Dispatchers.IO,
    ).also {
        it.newDocument("documentId")
    }
}

val drawState by stateManager.toDraw.collectAsState(DrawState())

WriteopiaEditor(
    modifier = modifier.fillMaxSize(),
    storyState = drawState,
    drawers = DefaultDrawersAndroid.create(manager = stateManager)
)
```

## Full sample

You can create a simple editor following the code:

```kotlin
@Composable
fun Editor(modifier: Modifier = Modifier) {
    val stateManager = remember {
        WriteopiaStateManager.create(
            WriteopiaManager(),
            dispatcher = Dispatchers.IO,
        ).also {
            it.newDocument("documentId")
        }
    }

    val drawState by stateManager.toDraw.collectAsState(DrawState())

    Box {
        WriteopiaEditor(
            modifier = modifier.fillMaxSize(),
            storyState = drawState,
            drawers = DefaultDrawersAndroid.create(manager = stateManager)
        )

        Row(modifier = Modifier
            .align(Alignment.BottomCenter)
            .padding(bottom = 50.dp)) {
            Text(
                "B",
                fontSize = 20.sp,
                modifier = Modifier.clickable {
                    stateManager.toggleSpan(Span.BOLD)
                }.padding(10.dp)
            )

            Spacer(modifier = Modifier.width(8.dp))

            Text(
                "I",
                fontSize = 20.sp,
                modifier = Modifier.clickable {
                    stateManager.toggleSpan(Span.ITALIC)
                }.padding(10.dp)
            )

            Spacer(modifier = Modifier.width(8.dp))

            Text(
                "U",
                fontSize = 20.sp,
                modifier = Modifier.clickable {
                    stateManager.toggleSpan(Span.UNDERLINE)
                }.padding(10.dp)
            )
        }
    }
}
```

The above code should display a simple message on the screen and you should be able to interact with the text editor. 

![sample](../../../static/img/basics_sample.png)
