{!this.Document.mermaidCode &&

Click the red pen icon to flip onto the collection side and draw a diagram with ink

}

); } renderGpt(): React.ReactNode { return (

this.autoResize(e.target as HTMLTextAreaElement)} />
                        <div className="rightButtons">
                            <button className="generateButton" type="button" onClick={this.handleRenderClick}>
                                Generate
                            </button>
                            <button className="convertButton" type="button" onClick={this.handleConvertButton}>
                                Edit
                            </button>
                        </div>
                    </div>
                    {this.mermaidCode ? (
                        <div id={'dashDiv' + this.Document.title} className="diagramBox" />
                    ) : (
                        <div>{this.loading ? <div className="loading-circle" /> : <div>{this.errorMessage ? this.errorMessage : 'Insert prompt to generate diagram'}</div>}</div>
                    )}
                </div>
            </div>
        );
    }
    handleConvertButton = () => {
        this.Document.menuState = 'mermaidCode';
        if (typeof this.Document.gptMermaidCode === 'string') {
            this.createInputValue = this.removeFirstEmptyLine(this.Document.gptMermaidCode);
            console.log(this.Document.gptMermaidCode);
            this.renderMermaidAsync(this.Document.gptMermaidCode);
        }
    };
    removeFirstEmptyLine(input: string): string {
        const lines = input.split('\n');
        let emptyLineRemoved = false;
        const resultLines = lines.filter(line => {
            if (!emptyLineRemoved && line.trim() === '') {
                emptyLineRemoved = true;
                return false;
            }
            return true;
        });
        return resultLines.join('\n');
    }

renderMermaidCode(): React.ReactNode {
        return (
            <div ref={this._dragRef} className="DiagramBox-wrapper">
                <div className="contentCode">
                    <div className="search-bar">
                        <button className="backButton" type="button" onClick={this.optionButton}>
                            Back
                        </button>
                        <button className="exampleButton" type="button" onClick={this.exampleButton}>
                            Examples
                        </button>
                    </div>
                    {this.isExampleMenuOpen && (
                        <div className="exampleButtonContainer">
                            <button type="button" onClick={this.flowButton}>
                                Flow
                            </button>
                            <button type="button" onClick={this.pieButton}>
                                Pie
                            </button>
                            <button type="button" onClick={this.timelineButton}>
                                Timeline
                            </button>
                            <button type="button" onClick={this.classButton}>
                                Class
                            </button>
                            <button type="button" onClick={this.mindmapButton}>
                                Mindmap
                            </button>
                        </div>
                    )}
                    <textarea value={this.createInputValue} placeholder="Enter Mermaid Code" onChange={this.handleInputChangeEditor} />
                    <div id={'dashDiv' + this.Document.title} className="diagramBox" />
                </div>
            </div>
        );
    }
    exampleButton = () => {
        if (this.isExampleMenuOpen) {
            this.isExampleMenuOpen = false;
        } else {
            this.isExampleMenuOpen = true;
        }
    };
    flowButton = () => {
        this.createInputValue = `flowchart TD
        A[Christmas] -->|Get money| B(Go shopping)
        B --> C{Let me think}
        C -->|One| D[Laptop]
        C -->|Two| E[iPhone]
        C -->|Three| F[fa:fa-car Car]`;
        this.renderMermaidAsync(this.createInputValue);
    };
    pieButton = () => {
        this.createInputValue = `pie title Pets adopted by volunteers
        "Dogs" : 386
        "Cats" : 85
        "Rats" : 15`;
        this.renderMermaidAsync(this.createInputValue);
    };
    timelineButton = () => {
        this.createInputValue = `gantt
        title A Gantt Diagram
        dateFormat  YYYY-MM-DD
        section Section
        A task           :a1, 2014-01-01, 30d
        Another task     :after a1  , 20d
        section Another
        Task in sec      :2014-01-12  , 12d
        another task      : 24d`;
        this.renderMermaidAsync(this.createInputValue);
    };
    classButton = () => {
        this.createInputValue = `classDiagram
        Animal <|-- Duck
        Animal <|-- Fish
        Animal <|-- Zebra
        Animal : +int age
        Animal : +String gender
        Animal: +isMammal()
        Animal: +mate()
        class Duck{
            +String beakColor
            +swim()
            +quack()
        }
        class Fish{
            -int sizeInFeet
            -canEat()
        }
        class Zebra{
            +bool is_wild
            +run()
        }`;
        this.renderMermaidAsync(this.createInputValue);
    };
    mindmapButton = () => {
        this.createInputValue = `mindmap
        root((mindmap))
            Origins
            Long history
            ::icon(fa fa-book)
            Popularisation
                British popular psychology author Tony Buzan
            Research
            On effectivness<br/>and features
            On Automatic creation
                Uses
                    Creative techniques
                    Strategic planning
                    Argument mapping
            Tools
            Pen and paper
            Mermaid`;
        this.renderMermaidAsync(this.createInputValue);
    };
    handleInputChangeEditor = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
        if (typeof e.target.value === 'string') {
            this.createInputValue = e.target.value;
            this.renderMermaidAsync(e.target.value);
        }
    };
    removeWhitespace(str: string): string {
        return str.replace(/\s+/g, '');
    }
    autoResize(element: HTMLTextAreaElement): void {
        element.style.height = '5px';
        element.style.height = element.scrollHeight + 'px';
    }
    timeline = `gantt
    title College Timeline
    dateFormat  YYYY-MM-DD
    section Semester 1
    Orientation           :done,    des1, 2023-08-01, 2023-08-03
    Classes Start         :active,  des2, 2023-08-04, 2023-12-15
    Midterm Exams         :         des3, 2023-10-15, 2023-10-20
    End of Semester       :         des4, 2023-12-16, 2023-12-20
    section Semester 2
    Classes Start         :         des5, 2024-01-10, 2024-05-15
    Spring Break          :         des6, 2024-03-15, 2024-03-22
    Midterm Exams         :         des7, 2024-03-25, 2024-03-30
    Final Exams           :         des8, 2024-05-10, 2024-05-15
    section Summer Break
    Internship            :         des9, 2024-06-01, 2024-08-31
    section Semester 3
    Classes Start         :         des10, 2024-09-01, 2025-12-15
    Midterm Exams         :         des11, 2024-11-15, 2024-11-20
    End of Semester       :         des12, 2025-12-16, 2025-12-20
    section Semester 4
    Classes Start         :         des13, 2025-01-10, 2025-05-15
    Spring Break          :         des14, 2025-03-15, 2025-03-22
    Midterm Exams         :         des15, 2025-03-25, 2025-03-30
    Final Exams           :         des16, 2025-05-10, 2025-05-15
    Graduation            :         des17, 2025-05-20, 2025-05-21`;
    render() {
        this.switchRenderDiv();
        return (
            <div ref={this._ref} className="DiagramBox">
                {this.renderDiv}
            </div>
        );
    }
}

Docs.Prototypes.TemplateMap.set(DocumentType.DIAGRAM, {
    layout: { view: DiagramBox, dataField: 'dadta' },
    options: { _height: 700, _width: 700, _layout_fitWidth: false, _layout_nativeDimEditable: true, _layout_reflowVertical: true, waitForDoubleClickToClick: 'always', _layout_reflowHorizontal: true, systemIcon: 'BsGlobe' },
});