SOURCE

const { log, dir, table, clear, warn, error } = console; clear();

const input = document.querySelector('input')
const textarea = document.querySelector('textarea')
const p = document.querySelector('p')
const btn1 = document.querySelector('.btn1')
const btn2 = document.querySelector('.btn2')

// 只支持唯一订阅
class Signal {
    constructor(initialValue) {
        this.value = initialValue
        this.subscriber = null
    }
    get() {
        return this.value
    }
    set(newValue) {
        if (this.value !== newValue) {
            this.value = newValue
            if (this.subscriber) {
                this.subscriber(newValue)
            }
        }
    }
    subscribe(callback) {
        if (this.subscriber) {
            console.warn('已有订阅者，自动替换为新订阅者')
            this.unsubscribe()
        }
        this.subscriber = callback
    }
    unsubscribe() {
        this.subscriber = null
    }
}

// ==========================================================

const signal = new Signal('hello world')
signal.subscribe(update)
signal.set('hello')

input.onkeyup = () => signal.set(input.value)
textarea.onkeyup = () => signal.set(textarea.value)
btn1.addEventListener('click', () => { signal.unsubscribe() })
btn2.addEventListener('click', () => { signal.subscribe(update) })

function update(value) {
    input.value = value
    textarea.value = value
    p.innerText = value
}

// ==========================================================

const textEl = document.querySelector('.text')
const sg2 = new Signal('hi there!')
let count = 0

sg2.subscribe(val=>textEl.innerText=val)

setInterval(()=>{
  sg2.set(++count)
}, 1000)

<div class="container">
    <p></p>
    <input id="elm1" type="text">
    <textarea id="elm2" name="" cols="" rows=""></textarea>
    <button class="btn1">取消订阅（取消后数据不再同步）</button>
    <button class="btn2">重新订阅</button>
    <hr>
    <p class="text"></p>
</div>

:root {
    --tiny-width: 70%;
}
html, body {
    height: 100%;
    margin: 0;
    padding: 10px;
    background: #f2f5f7;
}
.hide {
    visibility: hidden;
    pointer-events: none;
    right: calc(-1 * var(--tiny-width)) !important;
}
.CodeMirror {
    flex: 1;
}
.popup {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: var(--tiny-width);
    min-width: 300px;
    height: 100%;
    top: 0;
    right: 0px;
    padding: 20px;
    z-index: 99999;
    background: #ffffffdd;
    backdrop-filter: blur(5px);
    transition: .3s;
    box-shadow: 0 0 8px #00000033;
}