page_section_form_controller.js

import { Controller } from "stimulus"

class PageSectionFormController extends Controller {

  initialize() {
    this.sectionID = parseInt(this.element.getAttribute("data-page-section-id"))
    this.preview = this.application.getControllerForElementAndIdentifier(
      document.querySelector(`[data-controller="rich-text-preview"][data-page-section-id="${this.sectionID}"]`),
      'rich-text-preview',
    );
  }

  updatePreview() {
    this.preview.update(this.getData());
  }

  saveChanges() {
    console.log('\nsaveChanges:')
    console.log(`=> data: ${JSON.stringify(this.getData())}`);
  }

  onChange() {
    this.updatePreview();
    this.saveChanges()
  }

  getData() {
    return {
      id: this.sectionID,
      content: this.getContent()
    };
  }
}

export default PageSectionFormController;

rich_text_form_controller.js

import PageSectionFormController from "./page_section_form_controller"

export default class extends PageSectionFormController {
  static targets = [ 'heading', 'text' ]
  
  getContent() {
    return {
      heading: this.headingTarget.value,
      text: this.textTarget.value,
    };
  }
}

rich_text_preview_controller.js

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = [ 'heading', 'text' ]

  update(data) {
    this.headingTarget.innerHTML = data.content.heading;
    this.textTarget.innerHTML = data.content.text;
  }
}

I love how there is no jQuery in this code 👍

Looks fun to work with