ikbhal / tailwind-editor

notion like tailwindcss editor built with svelte

Tailwind Editor

Svelte component to generate tailwindcss html from a notion like wysiwyg editor.

This component is under development, don't use it in production yet!

Installation

$npm i tailwind-editor

Import to use in a svelte project, you need also tailwind installed (or imported) in order for this to work

<script>
    import Editor from 'tailwind-editor'
    let html = ''
</script>

<div class="flex">
    <Editor bind:html={html} />
    <div>
        {html}
    </div>
</div>

Add initial HTML

If you want to add custom html when you load the component you can pass an array of elements like the following

this is not recommended if the code is not previously generated by the editor

<script>
    import Editor from 'tailwind-editor'
    let arr_html = [
        {html: 'Hello <span class="font-bold">world!</span>', klass: 'p-2 text-3xl'}
    ]
    let html = ''
</script>

<Editor bind:html={html} {arr_html} editable />

TODO

1. embed media (image, video)
2. add lists
3. drag and drop positions
4. code highlighter with tailwindcss

Contribution

All contribution are welcome!

About

Fouita : UI framework for svelte + tailwind components