Basics

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

Add the project in your gradle file:

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 version.

Display content

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

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

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:

@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.