How to save and display the Monaco Editor's code?

I have an admin page in which there is a Monaco Editor to write code.

If the form is submitted, the code inside the editor will be saved and be displayed again on the editor so that the user can edit it.

It's pretty much like Codesandbox.

The problem I'm having now is if user writes simple code like <iframe> it is fine. Once they write more complex / long lines of code, Laravel seems not able to handle the line breaks/new lines/carriage return which breaks the editor. I'm still not able to handle those things

this is what's inside blade:

<label for="">Custom Script</label>
<div class="monaco-editor-container" style="height: 250px; border: 1px solid rgb(238, 238, 238);"></div>
<textarea name="custom_script" id="monaco_editor_textarea" style="display: none; white-space: pre-line"></textarea>

<script>
require(["vs/editor/editor.main"], function () {
    const monacoEditor = monaco.editor.create(document.querySelector('.monaco-editor-container'), {
        value: `{!! $monacoValue !!}`, // <-- this is the main issue lies
        language: 'html',
        base: 'vs',
        fontSize: "14px",
        minimap: { enabled: false },
    });

    $('#monaco_editor_textarea').val(monacoEditor.getModel().getValue())

    monacoEditor.onKeyDown(debounce(e => {
        $('#monaco_editor_textarea').val(monacoEditor.getModel().getValue())
    }, 500))
});
</script>

Pay attention to the $monacoValue

The value received by Laravel comes from the textarea.

The code inside the controller:

// comes from the textarea
$code = preg_replace('/\r\n|\r|\n/', '\n', request()->custom_script); 

$this->storeToMySQL($code);

I'm still getting error on this

What is the best practice to do this?

Snapey

4 years ago

Level 122

You are actually wanting to run the code? Are you nuts?

Anyway, if displaying back in the editor, you should not need to mess with the line breaks.

NOT a Laravel issue

mending33

4 years ago

Level 1

@Snapey never in my mind intended to run the code.

It would be helpful if you explain what's wrong on my question.

btw, do you have any reference like example repo of this?

Snapey

4 years ago

Level 122

@mending33 So if the code is not executed, and what you want in the textarea when editing is the same as before then you shouldn't need to mess with the line endings.

However, you have one major issue. In order to pass the previous content into the text area you must use raw echo {!! !!} which makes your site vulnerable to XSS attacks

mending33

4 years ago

Best Answer

Level 1

I think I solved this issue. the problem I've had the whole time is because the value prop of the object is not able to render <script> tag

this is the update code of controller which sort out this issue:

$code = preg_replace('/<\/script>/', '<\/script>', request()-> custom_script);

$this->storeToMySQL($code);

It's now able to handle more complex code like HTML, JS, XML which I tried

Please or to participate in this conversation.