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

[khalwat]

This PR is for Craft CMS v4

This PR adds integration with craft-twigfield to provide a Twig editor for fields in Craft CMS that are rendered as Twig object templates.

Description

Autocomplete is provided for:

• Twig syntax
• Twig filters, functions, and tags
• The Craft API, and any installed plugins
• Section layout shorthand syntax (e.g.: {title}

It is provided in 3 places:

Editing Sections

In the Site Settings table field:

Screen.Recording.2022-10-13.at.2.57.28.PM.mov

Editing Entry Types

In the Title Format field:

Screen.Recording.2022-10-13.at.2.55.49.PM.mov

Assets field settings

In the Default Upload Location, ** Asset Location**, & Allow Sub-folders fields:

Untitled.mov

[khalwat]

I realize that since this is in the CP, P&T may have stringent requirements about the look & feel. @engram-design for example pointed out that he didn't like the Twig logo in the field, for example.

I do think that there should be some kind of visual indicator baked into the field to let people know "hey, you can put any Twig here you want!". The current Craft CP is a little ambiguous in its description of these fields, leading some people to believe that only shorthand {title} type expressions are allowed.

My thought process was that I should use the actual Twig logo, even though I don't like how it looks. To me, it looks like creepy blades of grass, but it is their official logo. If I was listing Craft CMS on a web page, even if I didn't like the Craft CMS logo, probably I use should that rather than inventing my own logo.

However, the idea of a less obtrusive {{}} or {{ for a field indicator or such is something I'm perfectly open to. I just want it to look the same everywhere a Twigfield is used, so people know what to expect from that field. I think using just {} isn't really an indicator that it's Twig, and may confuse people into thinking it's only for the shorthand {title} syntax.

Also, things like the font size, field background, etc. are all customizable via Twigfield on a per-field basis, so wouldn't require any core changes to do them.

[lindseydiloreto]

I agree with @khalwat in the comment above. 👍

The Twig logo looks pretty weird in that format, but certainly there should be some indication that the field has special behaviors. I would agree that a simple {} is all that's necessary to convey that message.

[khalwat]

Twigfield has been deprecated, and replaced by Code Editor, which is a general-purpose code editor that also does Twig & autocomplete.

I pushed the changes necessary to convert this PR over to use it here (it's mostly just renaming the namespaces, along with some minor API changes):

https://github.com/khalwat/cms/tree/feature/v4-twigfield-integration

Code Editor:

• The JavaScript portion has been rewritten in TypeScript
• The tab handler mentioned above has been addressed
• In addition to Twig, it supports any language that the Monaco editor supports; examples: JavaScript, CSS

I've already PR'd it into SEOmatic, Sprig, Preparse, CP CSS, and CP JS.

The only remaining issue is translation, which I leave to you to handle.