nystudio107 / craft-code-field Goto Github PK
View Code? Open in Web Editor NEWProvides a Code Field that has a full-featured code editor with syntax highlighting & autocomplete
License: MIT License
Provides a Code Field that has a full-featured code editor with syntax highlighting & autocomplete
License: MIT License
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)
No console errors and syntax highlighted code
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.
Unsure, Followed the steps in the docs, editor shows on Front-end, but upon refreshing syntax highlighting will only show sometimes.
Syntax highlighting works every time
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 %}
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.
Steps to reproduce the behaviour:
The field should stay within its container
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.
Steps to reproduce the behaviour:
The gutter should adjust in width for line numbers.
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.
{% 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 -->
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.
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.
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!
The code field would display as code with formatting, instead of a text block. Drafts seem to function just fine
If applicable, add screenshots to help explain your problem.
Current revision:
Previous Revision:
Draft:
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?
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.
Steps to reproduce the behaviour:
Selecting "All" should save correctly and show all the languages.
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:
This happens with and without content, also on a completely new field.
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
Steps to reproduce the behaviour:
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.
Steps to reproduce the behaviour:
Setting unknown property: nystudio107\codefield\models\CodeData::type
Open entry and display code
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..
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.