feat: v3 - Add Twigfield integration for fields that render as object temp…

composer.json

@@ -45,6 +45,7 @@
     "league/flysystem": "^1.1.4",
     "league/oauth2-client": "^2.6.0",
     "mikehaertl/php-shellcommand": "^1.6.3",
+    "nystudio107/craft-twigfield": "^1.0.13",
     "pixelandtonic/imagine": "~1.2.4.1",
     "seld/cli-prompt": "^1.0.4",
     "symfony/yaml": "^5.2.1",

src/templates/_components/fieldtypes/Assets/settings.html

@@ -2,11 +2,14 @@
 
 {% import "_includes/forms" as forms %}
 
+{% import "twigfield/twigfield" as twigfield %}
+
 {% set fileKindOptions = field.getFileKindOptions() %}
 {% set isMatrix = 'craft\\fields\\Matrix' in craft.app.view.getNamespace() %}
 
 {% macro uploadLocationField(config) %}
     {% embed '_includes/forms/field' with config %}
+        {% import "twigfield/twigfield" as twigfield %}
         {% block input %}
             {% import '_includes/forms' as forms %}
             <div class="flex">
@@ -19,12 +22,17 @@
                     }) }}
                 </div>
                 <div class="flex-grow">
-                    {{ forms.text({
+                    {{ twigfield.text({
+                        id: config.id,
                         class: 'ltr',
                         name: "#{config.name}Subpath",
                         value: config.subpathValue,
                         placeholder: "path/to/subfolder"|t('app'),
                         describedBy: describedBy,
+                    }, "Twigfield", "monaco-editor-background-frame", {
+                        'fontSize': 13,
+                    }, {
+                        'SectionShorthandFields': 0,
                     }) }}
                 </div>
             </div>
@@ -57,6 +65,7 @@
         {{ block('sourcesField') }}
 
         {{ _self.uploadLocationField({
+            id: 'defaultUploadLocation',
             label: 'Default Asset Location'|t('app'),
             instructions: 'Where assets should be stored when they are uploaded directly to the field, or via a front-end form.'|t('app') ~' '~ uploadLocationNote,
             name: 'defaultUploadLocation',
@@ -69,6 +78,7 @@
 
     <div id="single-folder-settings"{% if not field.useSingleFolder %} class="hidden"{% endif %}>
         {{ _self.uploadLocationField({
+            id: 'singleUploadLocation',
             label: 'Asset Location'|t('app'),
             instructions: 'Where selected assets should be stored.'|t('app') ~' '~ uploadLocationNote,
             name: 'singleUploadLocation',

src/templates/_includes/forms/editableTable.html

@@ -14,6 +14,8 @@
     {{ hiddenInput(name, '') }}
 {% endif %}
 
+{% import "twigfield/twigfield" as twigfield %}
+
 {% macro cellClass(fullWidth, col, class) %}
     {{- (class is iterable ? class : [class])|merge([
         "#{col.type}-cell",
@@ -92,7 +94,7 @@
                         {% set headingId = "#{id}-heading-#{loop.index}" %}
                         {% set hasErrors = cell.hasErrors ?? false %}
                         {% set cellName = name~'['~rowId~']['~colId~']' %}
-                        {% set isCode = (col.code ?? false) or col.type == 'color' %}
+                        {% set isCode = ((col.code ?? false) or col.type == 'color') and not col.type == 'twigfield' %}
                         <td class="{{ _self.cellClass(fullWidth, col, col.class ?? []) }} {% if isCode %}code{% endif %} {% if hasErrors %}error{% endif %}"{% if col.width ?? false %} width="{{ col.width }}"{% endif %}>
                             {% block tablecell %}
                                 {%- switch col.type -%}
@@ -173,6 +175,20 @@
                                             labelledBy: headingId,
                                             describedBy: describedBy,
                                         } only %}
+                                    {%- case 'twigfield' -%}
+                                        {% set fieldId = "#{id}-twigfield-#{rowNumber}-#{loop.index}" %}
+                                        {{ twigfield.text({
+                                            id: fieldId,
+                                            name: "{{ cellName }}",
+                                            value: value,
+                                            labelledBy: headingId,
+                                            describedBy: describedBy,
+                                            placeholder: col.placeholder ?? '',
+                                        }, "Twigfield", "monaco-editor-inline-frame", {
+                                            'fontSize': 13,
+                                        }, {
+                                            'SectionShorthandFields': section.id,
+                                        }) }}
                                     {%- default -%}
                                         {% if static %}
                                             <pre class="disabled">{{ value }}</pre>

src/templates/settings/sections/_edit.html

@@ -100,8 +100,8 @@
                     value: (section.type == 'single' and siteSettings and siteSettings.uriFormat == '__home__')
                 },
                 singleUri: {
-                   value: (section.type == 'single' and siteSettings and siteSettings.uriFormat != '__home__') ? siteSettings.uriFormat,
-                   hasErrors: (section.type == 'single' and siteSettings ? siteSettings.hasErrors('uriFormat'))
+                    value: (section.type == 'single' and siteSettings and siteSettings.uriFormat != '__home__') ? siteSettings.uriFormat,
+                    hasErrors: (section.type == 'single' and siteSettings ? siteSettings.hasErrors('uriFormat'))
                 },
                 uriFormat: {
                     value: siteSettings ? siteSettings.uriFormat,
@@ -151,19 +151,20 @@
                 class: ['single-uri', 'type-single', section.type != 'single' ? 'hidden']|filter
             },
             uriFormat: {
-                type: 'singleline',
+                type: 'twigfield',
                 heading: "Entry URI Format"|t('app'),
                 info: "What entry URIs should look like for the site. Leave blank if entries don’t have URLs."|t('app'),
                 placeholder: 'Leave blank if entries don’t have URLs'|t('app'),
                 code: true,
-                width: headlessMode ? 500,
+                width: headlessMode ? 500 : '40%',
                 class: ['type-channel', 'type-structure', section.type == 'single' ? ' hidden']|filter
             },
             template: not headlessMode ? {
                 type: 'template',
                 heading: "Template"|t('app'),
                 info: "Which template should be loaded when an entry’s URL is requested."|t('app'),
-                code: true
+                code: true,
+                width: '40%',
             },
             enabledByDefault: {
                 type: 'lightswitch',
@@ -175,6 +176,7 @@
         rows: siteRows,
         fullWidth: true,
         staticRows: true,
+        section: section,
         errors: siteErrors|unique
     }) }}
 

src/templates/settings/sections/_entrytypes/edit.html

@@ -11,6 +11,7 @@
 
 {% import "_includes/forms" as forms %}
 
+{% import "twigfield/twigfield" as twigfield %}
 
 {% block content %}
     {{ actionInput('sections/save-entry-type') }}
@@ -99,7 +100,7 @@
     {% endif %}
 
     <div id="titleFormat-container"{% if entryType.hasTitleField %} class="hidden"{% endif %}>
-        {{ forms.textField({
+        {{ twigfield.textField({
             label: "Title Format"|t('app'),
             instructions: "What the auto-generated entry titles should look like. You can include tags that output entry properties, such as {ex}."|t('app', { ex: '<code>{myCustomField}</code>' }),
             id: 'titleFormat',
@@ -108,6 +109,10 @@
             value: entryType.titleFormat,
             errors: entryType.getErrors('titleFormat'),
             required: true
+        }, "Twigfield", "monaco-editor-background-frame", {
+            'fontSize': 13,
+        }, {
+            'SectionShorthandFields': section.id,
         }) }}
     </div>