Wrong active states on u, i, and can't cancel h2, h3 when used with Vue

[laosb]

Description

I tried to use this with Vue 2.0, it looks fine but have problems stated in the title.

• Underline and Italics won't become active on corresponding selections, making it impossible to cancel these effects. Strangely Bold works fine.
• After applying H2 or H3, we can only switch to H2 or H3, clicking on active H2/H3 won't cancel Heading style.

Reproduction

I have an self-written component for Vue2.0:

<template>
    <article v-html="value">{{valueData}}</article>
</template>
<style scoped>
    .medium-editor-placeholder:after {
        margin: 0;
        color: #555;
    }
</style>
<script>
    import MediumEditor from 'medium-editor';

    const options = {
        placeholder: {
            text: 'Write down your ideas...',
            hideOnClick: true,
        },
    };

    export default {
        props: {
            value: { type: String },
        },
        data(){
            return { valueData: this.value };
        },
        mounted() {
            const editorToDataSync = (data, editable) => {
                // this.valueData = editable.innerHTML;
                this.$emit('input', editable.innerHTML);
            };

            this.editor = new MediumEditor(this.$el, options);
            this.editor.subscribe('editableInput', editorToDataSync);
        },
        beforeDestroy() {
            this.editor.destroy();
        },
    };
</script>

and use it:

<medium-editor class="u-full-width" v-model="content"></medium-editor>

Hope you can reproduce with the traditional Webpack solution, but I'm actually using Akryum/meteor-vue-component with Meteor.

Versions

• medium-editor: 5.22.1
• browser: Chrome 54.0.2840.98 (64-bit)
• OS: macOS 10.12.3 Beta (16D17a)

[laosb]

@j0k3r Hope you are still maintaining this awesome project

[j0k3r]

@laosb I don't have the time I had few months ago. That's why I do the minimum to answer what I can.

[JelleScheer]

Did you set any styling for underline and italic in your CSS? If it overwrites the Medium styling, the buttons wont work. Atleast that was the issue in my case.

[laosb]

We've customized the underline and italic, true. But I guess that's not the problem? I don't quite get your meaning of "overwrites the Medium styling"?

[nmielnik]

MediumEditor relies on the browser's document.queryCommandState() method to indicate whether the selected text is underlined, italic, bold, etc. If there is any css on the page which changes the appearance of <i>/<em> or <u> tags it can break the browser's built-in detection of whether the text is italic or underlined. This can also vary from browser to browser.

For example, if you set the font-weight to be something like 800 for the text within the editor element, the editor will likely not be able to detect 'bold' properly, and probably won't be able to bold/unbold the text either.

Like @JelleScheer stated, every time I've seen issues with the editor detecting the style of text, or not being able to style the text, it's been because some css on the page affects the presentation of some of these tags (<strong>, <b>, <i>, etc.). I know a bunch of normalization stylesheets will often include selectors which style these basic tags.

[jaymanned]

What I see is that by default, selecting a text as H2/H3 also make the bold button active. And if you select a link, the underline button becomes active. This is not the expected behaviour (check the original Medium editor) and therefore confusing. Can't anything be done?

[paulocastellano]

Any update @laosb ?

[debugd]

I am having this issue as well, unable to de-select the H tags