Skip to content

Add data-* attribute configuration #76

@GregJohnStewart

Description

@GregJohnStewart

Hello,

First of all, pretty slick setup! Indeed, most other libs are a bit on the heavy side, it's nice to see a simpler and more straightforward setup.

My only suggestion would be to a bit more flexible on the setup... currently, by default, one has to do all the setup through the new OverType(...) calls. This works obviously, but has the downside of needing some nuance; one can't have a customized per-input setup when going the "setup all in one call" route, and it's a bit tedious to need to individually call/ know upfront the setup of each input to go the one-at-a-time route.

I would like to submit an idea to support data attributes to infer most if not all settings for the input, in combination with the options from the js init. This would allow for much more flexible all-at-once initializations.

Example; Using data-ot-* for the prefix of all options:

<div class="markdown-input"
    data-ot-value="the previous value"
    data-ot-textareaProps-id="idForMyInput"
></div>
<script>
    const editors = OverType.init('.markdown-editor', { // data overrides these (if collides), probably
        toolbar: true,
        theme: 'cave',
        fontSize: '16px'
    }); //resulting editor(s) setup with their respective values, id's, etc
</script>

I think this is likely doable, without too much addition to the codebase.

If the convention for data-ot-* was kept to match the keys of the input option array, you could simply iterate over each option key, looking for a data value for each, and updating the option data array as needed.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions