nystudio107 / craft-code-field Goto Github PK

Describe the bug

The code editor does not work in Safari Version 16.2 (18614.3.7.1.5).
A plain texarea is displayed.

Console errors:

[Error] SyntaxError: Invalid regular expression: invalid group specifier name
	(anonymous function) (vendors.js:11)
[Error] ReferenceError: Can't find variable: makeMonacoEditor
	Global Code (pellentesque-sit-amet:1392)

To reproduce

1. Install and use the field on a page
2. Open the page in Safari, both the craft editing view and the entry page will give the error

Expected behaviour

No console errors and syntax highlighted code

Screenshots

Versions

• Plugin version: 4.0.12
• Craft version: 4.7.0

Describe the bug

Intermittent loading of syntax highlighting on the code editor. It seems like possibly the JS was loading at the wrong time or something else was conflicting.

To reproduce

Unsure, Followed the steps in the docs, editor shows on Front-end, but upon refreshing syntax highlighting will only show sometimes.

Expected behavior

Syntax highlighting works every time

Versions

• Plugin version: 4.0
• Craft version: 4.5.11.1

Resolution

Within a duped includeJS twig macro, we loaded the Monaco Js via js on ready, ideally this would be the default, or if there was a way to make it optional that would be great.

    {% js on ready %}
        makeMonacoEditor("{{ (fieldId)|namespaceInputId }}", "{{ fieldType }}", '{{ monacoOptions | json_encode | e('js') }}', '{{ codeEditorOptions | json_encode | e('js') }}', "{{ alias('@codeEditorEndpointUrl') }}");
    {% endjs %}

Describe the bug

When the "Show Language Dropdown with Field" is enabled, the field extends beyond the right edge of its container.

In the screenshot below, the first field (Head start) has the language dropdown enabled and the second field ((Head end) does not. The fields are otherwise identical.

Tested in Firefox and Chrome.

To reproduce

Steps to reproduce the behaviour:

1. Create a field with the "Show Language Dropdown with Field" setting enabled
2. Add the field to a section, global set, etc (in this case it has been added to a global set but was also tested with a section)
3. See the field extend beyond the right edge of its container

Expected behaviour

The field should stay within its container

Screenshots

Versions

• Plugin version: 4.0.6
• Craft version: 4.3.5

Describe the bug

With line numbers enabled, the line number gutter is too thin and results in digits overlapping when the number is equal to or greater than 10.

To reproduce

Steps to reproduce the behaviour:

1. Enable line numbers in the field settings.
2. Enter 10 lines of code or more.

Expected behaviour

The gutter should adjust in width for line numbers.

Screenshots

Versions

• Plugin version: 4.0.9
• Craft version: 4.4.14

Question

I'm using Code Field in a Matrix field with a switch statement and the raw rendering is fine, but it will only render the first instance with syntax highlighting.

Template code below. Screen shots attached showing the frontend output where you can see it is rendering fine, but the textarea with syntax highlighting only works for the first instance. I'm thinking it's because they all use the same ID 'myCodeEditor'. But, that is required for the script, to the best of my understanding.

Additional context

{% case 'code' %}

<div class="inner-bottom-xs">
    {{ block.codeSnippet | raw }}
</div>

<div id="accordion{{ block.codeId }}" class="panel-group inner-bottom-xs">
    <div class="panel panel-default">

        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="panel-toggle collapsed" href="#{{ block.codeId }}" data-toggle="collapse">
                    Show / Hide Code Snippet
                </a>
            </h4>
        </div>
        <!-- /.panel-heading -->

        <div id="{{ block.codeId }}" class="panel-collapse collapse" data-parent="#accordion{{ block.codeId }}">
            <div class="panel-body">
                <textarea id="myCodeEditor">{{ block.codeSnippet }}</textarea>
            </div>
            {{ codeEditor.includeJs("myCodeEditor", "Frontend Editor", {
            language: block.codeSnippet.language,
            theme: "vs-dark",
            "domReadOnly": true,
            "readOnly": true
            }) }}
        </div>
        <!-- /.panel-body -->
    </div>
    <!-- /.content -->
</div>
<!-- /.panel -->

Is your feature request related to a problem? Please describe.

Currently, all users, regardless of their role or experience level, have write access to the Code Field provided by the Craft CMS plugin. This can lead to issues where non-programmers or non-admin users unintentionally cause errors or make changes that could compromise the integrity of the codebase. It's challenging to maintain code quality and prevent accidental modifications without restricting edit permissions.

Describe the solution you would like

I would like the plugin to include a feature where the Code Field can be set to read-only for non-admin users. This setting should be easily configurable by an admin through the plugin's settings page. The read-only mode would allow non-admin users to view the code, benefit from the syntax highlighting and autocomplete features for learning or review purposes, but prevent them from making any changes. This ensures that only users with the appropriate permissions can modify the code, thereby reducing the risk of unintended alterations.

Describe the bug

When I look at a previous revision of a page that contains a code field, it just shows as a text area. Really a low priority, but wanted to report for clarity. Thanks!

To reproduce

1. Create a page with a code field on it. Save it.
2. Make a revision or a draft. Save it and publish it
3. Look back at a previous version in the CP.

Expected behaviour

The code field would display as code with formatting, instead of a text block. Drafts seem to function just fine

Screenshots

If applicable, add screenshots to help explain your problem.
Current revision:

Previous Revision:

Draft:

Versions

• Plugin version: 4.0.10
• Craft version: 4.5.6.1

It would be great to have a default code option so that new fields can be pre-populated. Thanks for your work :)

What is the default storage type and size/length for this field in the db?

Describe the bug

I added the code field to our content matrix (Type: Matrix) and every time I try and save the field with all code languages selected the field disregards all selected and saves the matrix field with none selected.

If I only add a few the field saves correctly and shows the dropdown to change the languages.

To reproduce

Steps to reproduce the behaviour:

1. Add the codeField in a Matrix
2. Under "Available Languages" select "All"
3. Save the matrix field
4. Navigate to one of your entries and add the code field
5. There should be no drop down available
6. Navigate back to the settings and edit the matrix field
7. Under "Available Languages" everything is deselected.

Expected behaviour

Selecting "All" should save correctly and show all the languages.

Screenshots

Versions

• Plugin version: 4.0.9
• Craft version: 4.4.14

Describe the bug

I get the following error:

Object of class nystudio107\codefield\models\CodeData could not be converted to string

Here's a screenshot: https://media.yep.digital/l3J4N3

I have a global set with a field for script tags, I'm outputting this in the base layout file with {{ meta.headScripts|raw }}. Nothing fancy going on.

The field settings are default except for:

• Code Field Theme: Visual Studio Light
• Code Field Default Language: HTML
• Show Language Dropdown with Field: Unchecked

This happens with and without content, also on a completely new field.

Versions

• Plugin version: Code Field 4.0.5
• Craft version: 4.3.5

Describe the bug

We converted some one of our previous text fields, which was used in a Neo block. After converting and attempting to utilize the field's data via GraphQL, we receive the following error:
Error: String cannot represent value: instance of nystudio107\codefield\models\CodeData

To reproduce

Steps to reproduce the behaviour:

1. Covert plain text field to Code field
2. Try to call field via GraphQL

Versions

• Plugin version: 4.0.2
• Craft version: 4.3.1

Describe the bug

Storing geoJSON code like screenshot attached.

Am changing/migrating existing field by changing the field type for the entry to use the code field as per docs.
I'm setting json or plain text - issue is consistently the same. Produces an error when trying to access.

It is fine for creating a new entry and adding the geoJSON data - it just doesn't like opening existing data.

To reproduce

Steps to reproduce the behaviour:

1. Open entry using code field that holds existing geoJSON data
2. Get the error
   Setting unknown property: nystudio107\codefield\models\CodeData::type

Expected behaviour

Open entry and display code

Versions

• Plugin version: 3.0.10
• Craft version: 3.8.16

There is plugin
Template selector.
https://plugins.craftcms.com/template-selector?craft4

is there any way to load like that template.. in Code field...
So we can edit template directly from craft..