Gist to add ACE Editor field in Laravel Backpack 5

ace_editor.blade.php

{{-- ace_editor field --}}
@php
    $field['value'] = old_empty_or_null($field['name'], '') ?? ($field['value'] ?? ($field['default'] ?? ''));
@endphp

@include('crud::fields.inc.wrapper_start')
<label>{!! $field['label'] !!}</label>
@include('crud::fields.inc.translatable_icon')

<textarea
    style="display: none;"
    name="{{ $field['name'] }}"
    data-init-function="bpFieldInitDummyFieldElement{{ $field['name'] }}"
    @include('crud::fields.inc.attributes')>
    {{ $field['value'] }}
</textarea>

<div id="codemirror_{{ $field['name'] }}"
     style="min-height: {{$field['height'] ?? '300px'}}"></div>

{{-- HINT --}}
@if (isset($field['hint']))
    <p class="help-block">{!! $field['hint'] !!}</p>
@endif
@include('crud::fields.inc.wrapper_end')

{{-- CUSTOM CSS --}}
@push('crud_fields_styles')
    {{-- How to load a CSS file? --}}
    {{-- How to add some CSS? --}}
    @loadOnce('ace_editor_style')
    <style>
    </style>
    @endLoadOnce
@endpush

{{-- CUSTOM JS --}}
@push('crud_fields_scripts')
    {{-- How to load a JS file? --}}
    @loadOnce('/packages/ace/ace.js')
    @loadOnce('/packages/ace/ext-language_tools.js')
    @loadOnce('/packages/ace/ext-searchbox.js')

    {{-- How to add some JS to the field? --}}
    @load('bpFieldInitDummyFieldElement')
    <script>
        function bpFieldInitDummyFieldElement{{ $field['name'] }}(element) {
            // this function will be called on pageload, because it's
            // present as data-init-function in the HTML above; the
            // element parameter here will be the jQuery wrapped
            // element where init function was defined
            const editor = ace.edit("codemirror_{{ $field['name'] }}");

            editor.setTheme("ace/theme/{{$field['theme'] ?? "chrome"}}");
            editor.session.setMode("ace/mode/{{$field['mode']}}");
            editor.session.setTabSize(4);
            editor.setOptions({
                enableBasicAutocompletion: true,
                enableSnippets: true,
                enableLiveAutocompletion: false
            });
            editor.session.setUseSoftTabs(true);
            editor.setValue(element.val())
            editor.session.on("change", function () {
                element.val(editor.getValue())
            });
            editor.clearSelection()
        }
    </script>
    @endLoad
@endpush