scribe-plugin-toolbar not workin in an iframe

[axclever]

Hi guys. I've run into a problem with using 'scribe-plugin-toolbar' in an iframe. Toolbar with my buttons is always disabled.

command.queryEnabled() always returns false.

I'm using reactjs + webpack FRAME is 'react-frame-component' npm package 'scribe-editor'

My render function:

render(){
        return <Frame ref="iframeContainer">
            <div ref="toolbar" className="toolbar">
                <button data-command-name="bold" className="bold-btn">B</button>
                <button data-command-name="italic" className="italic-btn">I</button>
                <button data-command-name="underline">U</button>
            </div>

            <div className="wysiwyg-workspace" contentEditable="true" ref="scribe" />

            <div className="editor-buttons">
                <EditorButton handler={this.handleCancel} />
                <EditorButton type="red" handler={this.handleSave} />
            </div>

        </Frame>
    }

Scribe initialisation:

componentDidMount(){
        var scribeElement = this.refs.scribe.getDOMNode();
        var scribe = new Scribe(scribeElement);
        var toolbarElement = this.refs.toolbar.getDOMNode();
        scribe.use(scribePluginToolbar(toolbarElement));
    },

I'm not seeing errors and formatting with

works fine for me. But sadly no toolbar functionality :( Everything works fine outside of the iframe; however, implementing the editor inside an iframe causes most functions to stop working. As far as I can see only text formatting seems to work inside an iframe.

Can you please advise on best implementation inside an iframe.

thanks in advance

[rrees]

See the changes in #290 for what is required to make Scribe work in an iframe. This caused us regression issues so a variation on the solution may be required.