JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <div>
    <textarea id="input" rows="25" cols="100"></textarea>
  </div>
  <div>
    <button id="btn">轉換</button>
  </div>
  <div style="margin-top: 30px">
    <textarea id="output" rows="25" cols="100"></textarea>
  </div>
</div>

<script>
$(function() { 
    $("#btn").click(function() { 
        $("#output").val(flexMessageConvertPHP($("#input").val()));
    });
}); 
</script>

JavaScript

var flexMessageConvertPHP = (function() {

    //---------- Container 轉換器 ----------

    function bubbleContainerBuilder(obj, blank) {
        var prop = {
            direction: containerDirection,
            size: bubleContainerSize,
            header: boxComponentBuilder,
            hero: imageComponentBuilder,
            body: boxComponentBuilder,
            footer: boxComponentBuilder,
            styles: blockStyleBuilder
        };
        this.getResult = function () {
            var result = "BubbleContainerBuilder::builder()\n";
            result += getPropResult(prop, obj, blank);
            return result;
        };
    }

    function carouselContainerBuilder(obj, blank) {
        this.getResult = function () {
            var result = "CarouselContainerBuilder::builder()\n";
            result += getContentsResult(bubbleContainerList, obj.contents, blank);
            return result;
        };
    }

    function bubbleStylesBuilder(obj, blank) {
        var prop = {
            header: blockStyleBuilder,
            hero: blockStyleBuilder,
            body: blockStyleBuilder,
            footer: blockStyleBuilder
        };
        this.getResult = function () {
            var result = "BubbleStylesBuilder::builder()\n";
            result += getPropResult(prop, obj, blank);
            return result;
        };
    }

    function blockStyleBuilder(obj, blank) {
        var prop = {
            separator: value,
            separatorColor: text,
            backgroundColor: text
        };
        var order = ["separator", "separatorColor", "backgroundColor"];
        this.getResult = function () {
            var result = "new BlockStyleBuilder(";
            result += getActionPropResult(prop, obj, order, blank);
            result += ")";
            return result;
        };
    }

    //---------- Container 轉換器 ----------

    //---------- Component 轉換器 ----------

    function boxComponentBuilder(obj, blank) {
        var prop =...