How to use this inside iframe ?

[ooops4]

How to use selection.js in an iframe.

i have a webpage and inside it i have an WYSIWYG editor as iframe to edit html files.
Am not able to use this.

the iframe tag is as follows

<iframe id="content_ifr" style="background-color: rgb(255, 255, 255); width: 100%; height: calc(100vh - 185px); margin-top: 0px; overflow: auto; display: block; pointer-events: auto;"> check below picture.

my code is

 <script src="../../../selection.min.js"></script>

    <script>

    const selection = new SelectionArea({

        // All elements in this container can be selected
        selectables: ['.content_ifr'],



        // The container is also the boundary in this case
        boundaries: ['.content_ifr'],


        // Query selectors for elements from where a selection can be started from.
        startareas: ['.content_ifr'],

        // Query selectors for elements which will be used as boundaries for the selection.
        boundaries: ['.content_ifr'],

        // px, how many pixels the point should move before starting the selection (combined distance).
        // Or specifiy the threshold for each axis by passing an object like {x: <number>, y: <number>}.
        startThreshold: 10,

        // Enable / disable touch support
        allowTouch: true,

        // On which point an element should be selected.
        // Available modes are cover (cover the entire element), center (touch the center) or
        // the default mode is touch (just touching it).
        intersect: 'touch',

        // Specifies what should be done if already selected elements get selected again.
        //   invert: Invert selection for elements which were already selected
        //   keep: Make stored elements (by keepSelectio()) 'fix'
        //   drop: Remove stored elements after they have been touched
        overlap: 'invert',

        // Configuration in case a selectable gets just clicked.
        singleTap: {

            // Enable single-click selection (Also disables range-selection via shift + ctrl).
            allow: true,

            // 'native' (element was mouse-event target) or 'touch' (element visually touched).
            intersect: 'native'
        },

        // Scroll configuration.
        <!-- scrolling: { -->

            <!-- // On scrollable areas the number on px per frame is devided by this amount. -->
            <!-- // Default is 10 to provide a enjoyable scroll experience. -->
            <!-- speedDivider: 10, -->

            <!-- // Browsers handle mouse-wheel events differently, this number will be used as  -->
            <!-- // numerator to calculate the mount of px while scrolling manually: manualScrollSpeed / scrollSpeedDivider. -->
            <!-- manualSpeed: 750 -->
        <!-- } -->
        }).on('start', ({store, event}) => {
            console.log('start', event);

    // Remove class if the user isn't pressing the control key or ⌘ key
    if (!event.ctrlKey && !event.metaKey) {

        // Unselect all elements
        for (const el of store.stored) {
            el.classList.remove('selected');
        }

    // Clear previous selection
    selection.clearSelection();
    }

    }).on('move', ({store: {changed: {added, removed}}}) => {
        console.log('move', event);

    // Add a custom class to the elements that where selected.
    for (const el of added) {
        el.classList.add('selected');
		<!-- console.log(el of added); -->
		console.log(el.classList);
    }

        // Remove the class from elements that where removed
        // since the last selection
    for (const el of removed) {
        el.classList.remove('selected');
    }

    }).on('stop', () => {
 console.log('stop', event);
    selection.keepSelection();
    });
    </script>

    <style>
        .selection-area {
            background: rgba(46, 115, 252, 0.11);
            border: 2px solid rgba(98, 155, 255, 0.81);
            border-radius: 0.1em;
        }

        .selected {
            background: rgba(255, 0, 0, 1);
        }
    </style>

i tested the above code in normal html file. it works in html without iframe.
when calling class="container" from html in script, it works.
but when calling id="xyz" from html in script , it doesn't works.

how to call and use in iframe ? by id or class ?
please help me.

[GOwnby]

Looking for an answer to this as well.
var frame = document.getElementById("frame").contentWindow.document; ... document: frame,

doesnt seem to work.