WIP: Supporting Umbraco v15

[Shazwazza]

This PR is a work in progress so that folks can see the diffs between the develop branch and getting v15 supported.
Anyone that wants to contribute to this should create a PR to target the feature/umb15 branch.
I've asked AI to do a ton of the conversions 🙈🙉🙊🐵 (RooCode + Claude Sonnet 4) - I have no idea if any of it is correct or works yet.

• Review all AI converted property editors and dashboards
• Review all AI converted URL generation
• Remove any old files not necessary
• Ensure everything works

---

What I did to get to this state:

Getting it to compile

• feature/umb13 branch updated to support only Umbraco 13 and it builds and works.
• created new branch off of this: feature/umb15, Updated to Umbraco 15 dependencies, fixed all compilation issues - but meant just commenting out entire files in some cases, see 8efd089.

AI attempts

I normally use RooCode and Claude Sonnet 4 (prev 3.7 was good too). But in the first attempt, I decided to again try Copilot in Agent mode, which I've never had a good experience with ... and it shows:

I also enabled the Fetch MCP tool.

Copilot /w Claude Sonnet 4

Prompt:

In the latest git commit I had to comment out a lot of lines of code referencing Url.GetUmbracoApiService. This is because the latest umbraco version 15 that we are targeting no longer supports this API. I'm unsure how to convert this. Are you able to help. Please look at the last commit for details. If you make updates, please create a new git commit to track it.

It tried to help but I had to keep telling it that it made mistakes and then had to manually fix up formatting, this is all it was able to do:

• 4873a12 - not great
• 0036432 - much of this is me manually adjust code

RooCode /w Claude Sonnet 4

Now that I reminded myself how bad Copilot is, I switched back to RooCode (highly recommend, make sure you read the docs). I normally enable auto-approve in RooCode for everything and just use 'Code' mode since I'll be editing code and just make sure it creates git commits along the way.

Prompt:

I had to comment out the code in the ArticulateMarkdownPropertyEditor file because it is no longer compatible with Umbraco 15. The original code was from Umbraco 13. Can you uncomment the code and update it to be compatible with Umbraco 15 APIs? Any changes you make, please create a git commit so we can easily track changes. Also, you can run dotnet build to build the solution to check for errors.

Result: c511bfc

Prompt:

try the same with ArticulateMarkdownPropertyEditor

Result: c4ae033

Prompt:

you can actually remove the ArticulateMarkdownPropertyEditor

Result: 89f9951

Prompt:

The tricky part is that we need to convert the old Umbraco property editors to the new Umbraco 15 format. The docs for creating property editors is here https://docs.umbraco.com/umbraco-cms/tutorials/creating-a-property-editor . The old files are in the App_Plugins/Articulate/PropertyEditors folder. There's plenty of references online about how to create umbraco 14/15 property editors but I've never done this before so maybe you can help?

Result: 9333dab

I won't post all the chatter that it responds with, but as an example of the summary that it output for the above work so far at this below. Note, that after each phase of it completing its steps that its come up with based on the prompt, it will produce a full report like below: 🙌

I have successfully converted the Articulate property editors from the old AngularJS format to the new Umbraco 15 format! Here's what was accomplished:

What Was Done

1. Updated C# Property Editors

• ThemePickerPropertyEditor: Enhanced with proper configuration editor and IIOHelper dependency
• ArticulateMarkdownPropertyEditor: Removed unnecessary class, kept only the value converter for custom markdown processing

2. Created Modern Web Components

• theme-picker.element.js: New Lit-based web component replacing the old AngularJS controller
  • Uses modern fetch API instead of AngularJS $http
  • Reactive properties for better state management
  • Proper CSS styling with focus states
  • Error handling and loading states

3. New Umbraco 15 Extension System

• manifests.js: Property editor manifest defining the UI component
• umbraco-package.json: Main package definition for Umbraco 15
• articulate.js: Bundle entry point that registers all manifests

4. Maintained Backward Compatibility

• API endpoints remain unchanged
• Data storage format is preserved
• Existing content continues to work
• Only the frontend UI was modernized

File Structure Created

App_Plugins/Articulate/
├── umbraco-package.json              # Umbraco 15 package definition
├── articulate.js                     # Main bundle entry point
└── PropertyEditors/
    └── theme-picker/
        ├── theme-picker.element.js   # Lit web component
        └── manifests.js              # Property editor manifest

Key Improvements

• ✅ Modern JavaScript: ES6 modules, async/await, fetch API
• ✅ Better Performance: Lit components are more efficient than AngularJS
• ✅ Future Proof: Follows web standards and modern practices
• ✅ Umbraco 15 Compatible: Uses the new extension manifest system
• ✅ Maintainable: Clean separation of concerns and modern architecture

Documentation

Created PROPERTY_EDITOR_MIGRATION.md with:

• Complete migration guide for future property editors
• Explanation of the new architecture
• Step-by-step instructions for converting other editors
• Benefits and backward compatibility information

Testing

• ✅ Build successful: Project builds without errors
• ✅ Git commits: All changes properly tracked with descriptive commit messages
• Ready for testing in Umbraco 15 environment
  The theme picker property editor is now fully converted to Umbraco 15 format and ready for use. The same pattern can be applied to convert any additional property editors you may have.

Prompt:

Ok, similarly, I had custom dashboards for the old Umbraco found in App_Plugins/Articulate/BackOffice/PackageOptions/package-options. There's docs you can fetch from here https://docs.umbraco.com/umbraco-cms/tutorials/creating-a-custom-dashboard and here https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-types/dashboard . Can you help me convert to the new format?

Result: 23ef6c9

You'll see that its also created 2 different files complete with details about how it migrated the property editors and dashboards 🎉

Prompt:

You've added some stuff that says "not implemented in this demo" - what is that?

Result: 990aec2

Prompt:

Did you take into account the custom styles from the src\Articulate\App_Plugins\Articulate\BackOffice\assets\themes.css that were applied to the original themes dashboard?

Result: 0bc2e36

Prompt:

Did you take into account the custom styles from the src\Articulate\App_Plugins\Articulate\BackOffice\assets\themes.css that were applied to the original themes dashboard?

Result: 0bc2e36

[gavinfaux]

I have fork/branch in progress, will sync and base my PR's off this.

Pretty much same state, much of back office UI+API progressed , also builds but work to do, e.g. some Doc Type changes needed for latest media types/pickers.

Should I drop Umbraco 14 (.net 8.0) support? I have been focusing on v15 but did have multi-targeting for 14 + test site (and 16).

Guess we can always come back to 14 if demand?

[Shazwazza]

v14 is EOL https://umbraco.com/products/knowledge-center/long-term-support-and-end-of-life/

[gavinfaux]

Status update:

• Backoffice Articulate extension has been reworked using TypeScript, @umbraco-cms/backoffice, UI library and openapi-ts and associated C# Management API controllers.

  • Duplicate Theme is functional, Import and Export are scaffolded pending testing. Theme Picker also working. Currently cleaning up and documenting before PR.

• The updated JS back office extensions are not functional, while Theme Picker is registered as an option and there is an entry in the settings dashboard for Articulate nothing else is displayed/working. Looking at the code compared to the TS version it appears to be more than wrong imports (Lit instead of Umbraco Lit). Potentially fixable but unsure of duplicating effort at this time (unless there's a major issue/blocker with the Bellissima TS version).

• The front end anew Markdown editor route I'm a little stuck with, I can't see how to enable a front end feature to authenticate with the back end before allowing a user to post? If we have to login to post, just use the Backoffice, it's responsive? Parking this unless further guidance available.