Maximum call stack size exceeded when rendering Editable with Element/Leaf props

[plitokpikin]

The code is basic:

<script>
let value = [{
    type: 'paragraph',
    children: [
        { text: 'This is editable ' },
        { text: 'rich', bold: true },
        { text: ' text, ' },
        { text: 'much', italic: true },
        { text: ' better than a ' },
        { text: '<textarea>', code: true },
        { text: '!' }
    ]
}];
</script>

...

<Slate {editor} bind:value>
    <Editable placeholder="Enter some text..." 
        {Element}
        {Leaf}      
    />
</Slate>

[nathanfaucett]

can you share the Element and Leaf components you are using? my guess is that this is using https://github.com/nathanfaucett/svelte-slate/blob/main/src/lib/components/Element.svelte and https://github.com/nathanfaucett/svelte-slate/blob/main/src/lib/components/Leaf.svelte which are the internal renderers for the elements, the Editable takes components like the ones here https://github.com/nathanfaucett/svelte-slate/blob/main/src/example/Element.svelte and https://github.com/nathanfaucett/svelte-slate/blob/main/src/example/Leaf.svelte, if this is the case it might make sense to rename those internal components

[plitokpikin]

True, I'm importing the src/lib components, as opposed to src/example ones. The thing is, only src/lib components are exposed in the package, the src/example folder is not included at all.

[nathanfaucett]

yeah I think I will change the names of the internal components for now, the examples are really just for reference so you can write your own

[nathanfaucett]

closing this issue as it is not a bug but an issue of poor naming, renamed in https://github.com/nathanfaucett/svelte-slate/commit/8db1c5aeb48bbd78e586dab094ce040803ac51d1