Feature: Code Editor

[bjarnef]

Description

Added property editor UI using the existing code editor. The implementation in the current backoffice wasn't accepted https://github.com/umbraco/Umbraco-CMS/pull/15314 so focusing on the new backoffice.

Resolves https://github.com/umbraco/Umbraco.CMS.Backoffice/issues/1134

Types of changes

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)
• [ ] Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Motivation and context

How to test?

Screenshots (if appropriate)

Checklist

• [ ] If my change requires a change to the documentation, I have updated the documentation in this pull request.
• [x] I have read the CONTRIBUTING document.
• [ ] I have added tests to cover my changes.

[bjarnef]

@iOvergaard @leekelleher before continuing with this PR, is it correct we need a input-code-editor and not just the umb-code-editor directly? It seems most property editors UIs has an input version or the editor.

Here I just started with a copy of the one from markdown.

[leekelleher]

@bjarnef When an editor could be reused elsewhere, (e.g. workspaces, modals, etc), then it'd be put into its own input- component. So yes, for the Code Editor, it would make sense to separate it out to its own input-code-editor for any future use-cases. 👍

[bjarnef]

@leekelleher okay makes sense 😀 I was a bit confused about some name conventions though like "Text Area", but named Textarea .. e.g. UmbPropertyEditorUITextareaElement.

In this case with markdown it is called "Markdown Editor", but input is just input-markdown inside input-markdown-editor folder.

Regarding code editor it didn't seem right to name it input-code 🤷‍♂️

Feel free to make any suggestions and commit to this PR.

[leekelleher]

@bjarnef Yup, "Naming things is hard!" 😅

For some of the editors, the -editor suffix can be too verbose. In the case of input-markdown, we know it's an editor because it's prefixed with input-, so the suffix seems overkill. In the case of input-code, I have the same feeling, it feels odd. Personally, I'd go with input-code-editor as that feels appropriate for the feature.

re: "Text Area", good spot - I agree that it's inconsistent, we should align the naming/labelling. 👍

[bjarnef]

@leekelleher yeah, maybe ES lint can enforce some naming where possible. Otherwise some guidelines in the readme / contributing guidelines would be useful 😁 Besides that also singular vs plural form https://github.com/umbraco/Umbraco.CMS.Backoffice/pull/968 ... some of this probably can't be changed without a breaking change, but worth mentioning for new features being added.

Maybe the readme could also describe a bit of the concepts, e.g. property editor UI, input editors, contexts, repository etc. just to outline the different parts of the new backoffice.

[bjarnef]

Oh, I noticed there's actually something mentioned about terminology here: https://ambitious-stone-0033b3603.1.azurestaticapps.net/?path=/docs/guides-getting-started--docs

[bjarnef]

@leekelleher @iOvergaard we can probably re-use the umb-input-code-editor and the umb-markdown-editor can extend this or both extend from a umb-input-base-code-editor?

I noticed a few things:

• It seems language only works if passed in as lowerbase, e.g. html instead of HTML. https://github.com/umbraco/Umbraco.CMS.Backoffice/blob/023a1edb2ab57a0538860e14b00de61b6b30bd51/src/packages/templating/code-editor/code-editor.model.ts#L1

• The programming language/mode was based on dropdown and mode property from Richtext Editor, but doesn't seem to be correct as empty values are shown. https://github.com/umbraco/Umbraco.CMS.Backoffice/issues/1235

• Any reason we are using keypress event? https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event instead of keyup event? https://developer.mozilla.org/en-US/docs/Web/API/Element/keyup_event

[iOvergaard]

Hi @bjarnef Just want to keep this going; we haven't forgotten about it. At this stage, we do not want to include new property editors in 14.0, but ideally, we would like a code property editor down the line after release. We'll look further into it later.

[bjarnef]

@iOvergaard @leekelleher do we plan to include this in a specific minor version of v14?

Can I help with anything to close this?

[leekelleher]

@bjarnef I've had a discussion with @iOvergaard about it. We still would like to include it in core backoffice. 👍

Whilst reviewing it, we noticed how we could optimise the loading of the internal <umb-code-editor> component, so once that is done, would you be happy for me to refactor the parts of this PR to align with the core codebase?

[bjarnef]

@leekelleher sure :) Feel free to make any updates to this PR that you you makes sense. I also include a few configuration options, but perhaps there are more options we want to make configurable.

[iOvergaard]

I have done quite a few things here, so let me check if I remember all of it:

• Moved the code-editor to its own isolated package, so we can bundle the property editor UI up along with it
• Updated the manifest for the property editor UI so it now uses Umbraco.Plain.String to save its data
• Fixed the options for "language" so they have a name and a value suitable for the dropdown ui
• Added a "height" option to configure the height of the editor
• Removed the middleware "umb-input-code-editor" as that seemed to confuse things a bit - took some of the things into the code-editor, but have no good solution for the magic stuff it tried to do with adding a dash - on the next line when you hit enter (we might look into that later, it's only relevant for markdown anyway, so may be something useful for the markdown editor)
• Added a defaultValue to the numeric editors so we can set a default height of "400" (why didn't we have this before??)
• Added Vite bundling to the package
• Exported the components so they are reachable to packages
• Added some localizations
• Converted the story from Story to StoryObj

[iOvergaard]

@leekelleher Will you review what I have done, please, and think about what other features we should add to the property editor before releasing it?