using System.Linq;
using Umbraco.Cms.Core.Composing;
using Umbraco.Cms.Core.DependencyInjection;

public class MyComposer : IComposer
{
    public void Compose(IUmbracoBuilder builder)
    {
        //If the type is accessible (not internal) you can deregister it by the type:
        builder.PropertyValueConverters().Remove<MyCustom.StandardValueConnector>();

        //If the type is not accessible you will need to locate the instance and then remove it:
        var contentPickerValueConverter = builder.PropertyValueConverters().GetTypes().FirstOrDefault(x => x.Name == "ContentPickerValueConverter");
        if (contentPickerValueConverter != null)
        {
            builder.PropertyValueConverters().Remove(contentPickerValueConverter);
        }
    }
}

public class ContentPickerValueConverter : IPropertyValueConverter

public bool IsConverter(IPublishedPropertyType propertyType)
{
    return propertyType.EditorAlias.Equals(Constants.PropertyEditors.Aliases.ContentPicker);
}

public Type GetPropertyValueType(IPublishedPropertyType propertyType)
{
    return typeof(IPublishedContent);
}

public PropertyCacheLevel GetPropertyCacheLevel(IPublishedPropertyType propertyType)
{
    return PropertyCacheLevel.Elements;
}

public object ConvertSourceToIntermediate(IPublishedElement owner, IPublishedPropertyType propertyType, object source, bool preview)
{
    if (source == null) return null;

    var attemptConvertInt = source.TryConvertTo<int>();
    if (attemptConvertInt.Success)
        return attemptConvertInt.Result;

    var attemptConvertUdi = source.TryConvertTo<Udi>();
    if (attemptConvertUdi.Success)
        return attemptConvertUdi.Result;

    return null;
}

public object ConvertIntermediateToObject(IPublishedElement owner, IPublishedPropertyType propertyType, PropertyCacheLevel referenceCacheLevel, object inter, bool preview)
{
    if (inter == null)
        return null;

    if ((propertyType.Alias != null && PropertiesToExclude.Contains(propertyType.Alias.ToLower(CultureInfo.InvariantCulture))) == false)
    {
        IPublishedContent content;
        if (inter is int id)
        {
            content = _publishedSnapshotAccessor.PublishedSnapshot.Content.GetById(id);
            if (content != null)
                return content;
        }
        else
        {
            var udi = inter as GuidUdi;
            if (udi == null)
                return null;
            content = _publishedSnapshotAccessor.PublishedSnapshot.Content.GetById(udi.Guid);
            if (content != null && content.ContentType.ItemType == PublishedItemType.Content)
                return content;
        }
    }

    return inter;
}

public object ConvertIntermediateToXPath(IPublishedElement owner, IPublishedPropertyType propertyType, PropertyCacheLevel referenceCacheLevel, object inter, bool preview)
{
    if (inter == null) return null;
    return inter.ToString();
}

{
    labelKey: 'clipboard_labelForRemoveAllEntries',
    labelTokens: [],
    icon: 'trash',
    method: removeAllEntries,
    isDisabled: true
}

angular.module("umbraco").controller("My.MarkdownEditorController", function ($scope) {

function myActionExecutionMethod() {
    alert('My Custom Property Action Clicked');
    // Disable the action so it can not be re-run
    // You may have custom logic to enable or disable the action
    // Based on number of items selected etc...
    myAction.isDisabled = true;
};

var myAction = {
    labelKey: 'general_labelForMyAction',
    labelTokens: [],
    icon: 'action',
    method: myActionExecutionMethod,
    isDisabled: false
}

var propertyActions = [
    myAction
];

this.$onInit = function () {
    if ($scope.umbProperty) {
        $scope.umbProperty.setPropertyActions(propertyActions);
    }
};


});

angular.module('umbraco').component('myPropertyEditor', {
    controller: MyController,
    controllerAs: 'vm',
    require: {
        umbProperty: '?^umbProperty'
    }
    …
});

var myAction = {
    labelKey: 'general_labelForMyAction',
    labelTokens: [],
    icon: 'action',
    method: myActionExecutionMethod,
    isDisabled: false
}

var propertyActions = [
    myAction
];

this.$onInit = function () {
    if (this.umbProperty) {
        this.umbProperty.setPropertyActions(propertyActions);
    }
};

using System;
using Umbraco.Cms.Core;
using Umbraco.Cms.Core.Models.PublishedContent;
using Umbraco.Cms.Core.PropertyEditors;
using Umbraco.Cms.Core.PublishedCache;
using Umbraco.Extensions;

namespace MyConverters;

public class ContentPickerPropertyConverter : IPropertyValueConverter
{
    private readonly IPublishedSnapshotAccessor _publishedSnapshotAccessor;

    //Injecting the PublishedSnapshotAccessor for fetching content
    public ContentPickerPropertyConverter(IPublishedSnapshotAccessor publishedSnapshotAccessor)
    {
        _publishedSnapshotAccessor = publishedSnapshotAccessor;
    }

    public bool IsConverter(IPublishedPropertyType propertyType)
    {
        return propertyType.EditorAlias.Equals("Umbraco.ContentPicker");
    }

    public bool? IsValue(object value, PropertyValueLevel level)
    {
        switch (level)
        {
            case PropertyValueLevel.Source:
                return value != null && (!(value is string) || string.IsNullOrWhiteSpace((string) value) == false);
            default:
                throw new NotSupportedException($"Invalid level: {level}.");
        }
    }

    public Type GetPropertyValueType(IPublishedPropertyType propertyType)
    {
        return typeof(IPublishedContent);
    }

    public PropertyCacheLevel GetPropertyCacheLevel(IPublishedPropertyType propertyType)
    {
        return PropertyCacheLevel.Elements;
    }

    public object ConvertSourceToIntermediate(IPublishedElement owner, IPublishedPropertyType propertyType, object source, bool preview)
    {
        if (source == null) return null;

        var attemptConvertInt = source.TryConvertTo<int>();
        if (attemptConvertInt.Success)
            return attemptConvertInt.Result;

        var attemptConvertUdi = source.TryConvertTo<Udi>();
        if (attemptConvertUdi.Success)
            return attemptConvertUdi.Result;

        return null;
    }

    public object ConvertIntermediateToObject(IPublishedElement owner, IPublishedPropertyType propertyType, PropertyCacheLevel referenceCacheLevel, object inter, bool preview)
    {
        if (inter == null)
            return null;

        if ((propertyType.Alias != null) == false)
        {
            IPublishedContent content;
            if (inter is int id)
            {
                content = _publishedSnapshotAccessor.PublishedSnapshot.Content.GetById(id);
                if (content != null)
                    return content;
            }
            else
            {
                var udi = inter as GuidUdi;
                if (udi == null)
                    return null;
                content = _publishedSnapshotAccessor.PublishedSnapshot.Content.GetById(udi.Guid);
                if (content != null && content.ContentType.ItemType == PublishedItemType.Content)
                    return content;
            }
        }

        return inter;
    }

    public object ConvertIntermediateToXPath(IPublishedElement owner, IPublishedPropertyType propertyType, PropertyCacheLevel referenceCacheLevel, object inter, bool preview)
    {
        if (inter == null) return null;
        return inter.ToString();
    }
}

<div data-gb-custom-block data-tag="hint" data-style='warning'>

The current implementation of XPath is suboptimal, marked as obsolete, and scheduled for removal in Umbraco 14. The replacement for ContentXPath is [IContentLastChanceFinder](../../implementation/custom-routing/README.md#last-chance-icontentfinder).

</div>

using Umbraco.Cms.Core;
using Umbraco.Cms.Core.PropertyEditors;
using Umbraco.Cms.Core.WebAssets;
using Umbraco.Cms.Infrastructure.WebAssets;

namespace MyNamespace;

[DataEditor(
    "MyOwn.UnicornBlocksEditor",
    "Unicorn Blocks",
    "unicornblocks",
    ValueType = ValueTypes.Json,
    Group = Constants.PropertyEditors.Groups.Lists,
    Icon = "icon-thumbnail-list")]
[PropertyEditorAsset(AssetType.Javascript, "/App_Plugins/UnicornBlocks/UnicornBlocks.controller.js")]
public class UnicornBlocksPropertyEditor : BlockEditorPropertyEditor
{
    public UnicornBlocksPropertyEditor(IDataValueEditorFactory dataValueEditorFactory, PropertyEditorCollection propertyEditors)
        : base(dataValueEditorFactory, propertyEditors)
    {
    }
}

{
  "layout": {
    "MyOwn.UnicornBlocksEditor": [
      {
        "contentUdi": "umb://element/fffba547615b4e9ab4ab2a7674845bc9"
      },
      {
        "contentUdi": "umb://element/e7dba547615b4e9ab4ab2a7674845bc9",
        "settingsUdi": "umb://element/a47667bcba54845b15b4e9ab4ab2a7c8"
      }
    ]
  },
  "contentData": [
    {
      "udi": "umb://element/fffba547615b4e9ab4ab2a7674845bc9",
      "contentTypeKey": "09876595489865786897",
      "__yourPropertyAlias__": "Hello world"
    },
    {
      "udi": "umb://element/e7dba547615b4e9ab4ab2a7674845bc9",
      "contentTypeKey": "123456789097654323456",
      "__yourPropertyAlias1__": "Hello world",
      "__yourPropertyAlias2__": "Hello world",
      "__yourPropertyAlias3__": "Hello world"
    }
  ],
  "settingsData": [
    {
      "udi": "umb://element/a47667bcba54845b15b4e9ab4ab2a7c8",
      "contentTypeKey": "09876595489865786897",
      "__yourPropertyAlias__": "Hello world"
    }
  ]
}

// We must get a scope that exists in all the lifetime of this data. Across variants and split-view.
var scopeOfExistence = $scope;
// Setup your component to require umbVariantContentEditors and vm.umbElementEditorContent. If one of them is avaiable use the method getScope to retrieve a shared scope for multiple editors of this content.
if(vm.umbVariantContentEditors && vm.umbVariantContentEditors.getScope) {
    scopeOfExistence = vm.umbVariantContentEditors.getScope();
} else if(vm.umbElementEditorContent && vm.umbElementEditorContent.getScope) {
    scopeOfExistence = vm.umbElementEditorContent.getScope();
}
// Define variables for layout and modelObject as you will be using these throughout your property editor.
vm.layout;
var modelObject;

// When we are ready we can instantiate the Model Object and load any dependencies.
vm.$onInit = function() {
  modelObject = blockEditorService.createModelObject(vm.model.value, vm.model.editor, vm.model.config.blocks, scopeOfExistence);
  modelObject.load().then(onLoaded);
}
function onLoaded() {
  // Define the default layout, this is used when there is no data stored for this property.
  var defaultLayout = [];
  // We store a reference to layout as we have to maintain this.
  // The getLayout method gives us a reference to the layout-object based on the property-editor alias. The defaultLayout will be initialized if it does not exist.
  vm.layout = modelObject.getLayout(defaultLayout);
}

// continuing from previous example.

// Creates a block and returns a layout entry. The layout entry is not part of layout yet as its not managed by the Model Object.
var layoutEntry = modelObject.create(contentTypeKey);
if (layoutEntry === null) {
  // The creation was not successful, therefore exit and without appending anything to our 'layout' object.
  return false;
}
// If we reach this line, we are good to add the layoutEntry to layout model.
// In this example our layout is an array and we would like to append the new block as the last entry.
vm.layout.push(layoutEntry);

// continuing from the basic setup example.

if (vm.layout.length > 0) {
  // Get first entry of from the layout, which is an array in this example.
  var firstLayoutEntry = vm.layout[0];

  // Create a Block Object for that entry.
  var block = modelObject.getBlockObject(firstLayoutEntry);

  // Check if the Block Object creation went well. (If a block is supported by the configuration of the Property Editor)
  if (block !== null) {
    console.log(block.label);
  }
}

// continuing from the basic setup example.

if (vm.layout.length > 0) {
  // Get first entry of from the layout, which is an array in this example.
  var firstLayoutEntry = vm.layout[0];

  // Create a Block Object for that entry.
  var block = modelObject.getBlockObject(firstLayoutEntry);

  // Check if the Block Object creation went well. (If a block is supported by the configuration of the Property Editor)
  if (block !== null) {

    // This line edits the value of 'myProp' directly, available by 'block.data':
    block.data.myProp = "Hello world";

    // Alternatively you can use this line, which edits the data throught the Element Type data model avaiable in 'block.content':
    block.content.variants[0].tabs[0].properties[0].value = "Hello world"; // This value will automatically be synced to the Property Editors Data Model, ´block.data.myProp´
  }
}

// continuing from the basic setup example.

if (vm.layout.length > 0) {
  // Get first entry of from the layout, which is an array in this sample.
  var firstLayoutEntry = vm.layout[0];

  // Create a Block Object for that entry.
  var block = modelObject.getBlockObject(firstLayoutEntry);

  // Check if the Block Object creation went well. (If a block isnt supported by the configuration of the Property Editor)
  if(block !== null) {

    modelObject.removeDataAndDestroyModel(block);// Removing the data of our block and destroying the Block Object for performance reasons.

    // We need to maintain the 'layout' object, so therefor its up to our code to remove the block from the 'layout' object.
    const index = array.indexOf(5);
    if (index > -1) {
      vm.layout.splice(index, 1);
    }
  }
}

// continuing from the basic setup example.

var invalidLayoutItems = [];

// Append the blockObjects to our layout.
vm.layout.forEach(entry => {

// As we might have the same property-editor displayed multiple times on screen (splitview) we only need to initialize a BlockObject if its not already in place.

    // $block must have the 'data' property to be a valid BlockObject, if not it is considered a destroyed blockObject.
    if (entry.$block === undefined || entry.$block === null || entry.$block.data === undefined) {
        var block = modelObject.getBlockObject(entry);

        // If this entry was not supported by our property-editor it would return 'null'.
        if (block !== null) {
            entry.$block = block;
        } else {
          // We didnt succeed initializing this Block, therefore we need to filter this out of 'layout'. This only happens if the content data of the block couldn't be found.
            invalidLayoutItems.push(entry);
        }
    }
});

// remove the ones that are invalid
invalidLayoutItems.forEach(entry => {
    var index = vm.layout.findIndex(x => x === entry);
    if (index >= 0) {
        vm.layout.splice(index, 1);
    }
});

<div ng-repeat="layoutEntry in vm.layout track by layoutEntry.$block.key">

    <h3 ng-bind="layout.$block.data.udi"></h3>

</div>

using System;
using System.Collections.Generic;
using Umbraco.Cms.Core;
using Umbraco.Cms.Core.Composing;
using Umbraco.Cms.Core.DependencyInjection;
using Umbraco.Cms.Core.Models;
using Umbraco.Cms.Core.Models.Editors;
using Umbraco.Cms.Core.PropertyEditors;
using Umbraco.Extensions;

namespace Umbraco.Web.PropertyEditors;

public class ExampleComposer : IComposer
{
    public void Compose(IUmbracoBuilder builder)
    {
        builder.DataValueReferenceFactories().Append<TrackingExample>();
    }
}

public class TrackingExample : IDataValueReferenceFactory, IDataValueReference
{
    public IDataValueReference GetDataValueReference() => this;

    // Which Data Editor (Data Type) does this apply to - in this example it is the built in content picker of Umbraco
    public bool IsForEditor(IDataEditor dataEditor) => dataEditor.Alias.InvariantEquals(Constants.PropertyEditors.Aliases.ContentPicker);


    public IEnumerable<UmbracoEntityReference> GetReferences(object value)
    {
        // Value contains the raw data that is being saved for a property editor
        // You can then analyse this data be it a complex JSON structure or something more trivial
        // To add the chosen entities as references (as any UDI type including custom ones)

        // A very simple example
        // This will always ADD a specific media reference to the collection list
        // When it's a ContentPicker datatype
        var references = new List<UmbracoEntityReference>();
        var udiType = ObjectTypes.GetUdiType(UmbracoObjectTypes.Media);
        var udi = Udi.Create(udiType, Guid.Parse("fbbaa38d-bd93-48b9-b1d5-724c46b6693e"));
        var entityRef = new UmbracoEntityReference(udi);
        references.Add(entityRef);
        return references;
    }
}

{
    "propertyEditors": [
        {
            "alias": "Sir.Trevor",
            "name": "Sir Trevor",
            "editor": {
                "view": "/App_Plugins/SirTrevor/SirTrevor.html",
                "hideLabel": true,
                "valueType": "JSON"
            }
        }
    ],
    "javascript": [
        "/App_Plugins/SirTrevor/SirTrevor.controller.js"
    ]
}

{
  "propertyEditors": [
    {
      "alias": "Sir.Trevor",
      "name": "Sir Trevor",
      "editor": {
        "view": "/App_Plugins/SirTrevor/SirTrevor.html",
        "hideLabel": true,
        "valueType": "JSON"
      },
      "prevalues": {
        "fields": [
          {
            "label": "Maximum number of blocks",
            "description": "The total maximum number of blocks (of any type) that can be displayed (0 = infinite).",
            "key": "blockLimit",
            "view": "requiredfield",
            "validation": [
              {
                "type": "Required"
              }
            ]
          },
          {
            "label": "Align editor centered",
            "description": "If the editor doesn't span the entire width of the content editing area, center it. Otherwise left aligned.",
            "key": "editorAlignCentered",
            "view": "boolean"
          },
          {
            "label": "Editor width",
            "description": "The width the Sir Trevor editor will expand to, most likely 100%.",
            "key": "editorWidth",
            "view": "requiredfield",
            "validation": [
              {
                "type": "Required"
              }
            ]
          },
          {
            "label": "Maximum editor width",
            "description": "The maximum width the Sir Trevor editor will expand to, i.e. 500px or 80%.",
            "key": "editorMaxWidth",
            "view": "requiredfield",
            "validation": [
              {
                "type": "Required"
              }
            ]
          },
          {
            "label": "Block types",
            "description": "Configure the block types available to the user.",
            "key": "blocktypes",
            "view": "~/App_Plugins/SirTrevor/settings/blocktypes.html"
          }
        ]
      }
    }
  ],
  "javascript": [
    "/App_Plugins/SirTrevor/SirTrevor.controller.js",
    "/App_Plugins/SirTrevor/settings/settings.blocktypes.controller.min.js",
    "/App_Plugins/SirTrevor/settings/settings.resource.min.js"
  ]
}

using Umbraco.Cms.Core.PropertyEditors;
using Umbraco.Cms.Core.WebAssets;
using Umbraco.Cms.Infrastructure.WebAssets;

namespace UmbracoEightExamples.PropertyEditors;

[DataEditor(
    "Sir.Trevor",
    EditorType.PropertyValue,
    "Sir Trevor",
    "/App_Plugins/SirTrevor/SirTrevor.html",
    ValueType = ValueTypes.Json,
    HideLabel = true)]
[PropertyEditorAsset(AssetType.Javascript, "/App_Plugins/SirTrevor/SirTrevor.controller.js")]
public class SirTrevorEditor : DataEditor
{
    public SirTrevorEditor(
        IDataValueEditorFactory dataValueEditorFactory,
        EditorType type = EditorType.PropertyValue)
        : base(dataValueEditorFactory, type)
    {
    }
}

using Umbraco.Cms.Core.PropertyEditors;
using Umbraco.Cms.Core.WebAssets;
using Umbraco.Cms.Infrastructure.WebAssets;

namespace UmbracoEightExamples.PropertyEditors;

[DataEditor(
    "Sir.Trevor",
    EditorType.PropertyValue,
    "Sir Trevor",
    "/App_Plugins/SirTrevor/SirTrevor.html",
    ValueType = ValueTypes.Json,
    HideLabel = true)]
[PropertyEditorAsset(AssetType.Javascript, "/App_Plugins/SirTrevor/SirTrevor.controller.js")]
public class SirTrevorEditor : DataEditor
{
    public SirTrevorEditor(
        IDataValueEditorFactory dataValueEditorFactory,
        EditorType type = EditorType.PropertyValue)
        : base(dataValueEditorFactory, type)
    {
    }

    protected override IConfigurationEditor CreateConfigurationEditor() => new SirTrevorConfigurationEditor();

}

using Umbraco.Cms.Core.IO;
using Umbraco.Cms.Core.PropertyEditors;
using Umbraco.Cms.Core.Services;

namespace UmbracoEightExamples.PropertyEditors;

public class SirTrevorConfigurationEditor : ConfigurationEditor<SirTrevorConfiguration>
{
    public SirTrevorConfigurationEditor(IIOHelper ioHelper, IEditorConfigurationParser editorConfigurationParser) : base(ioHelper, editorConfigurationParser)
    {
    }
}

using Umbraco.Cms.Core.PropertyEditors;

namespace UmbracoEightExamples.PropertyEditors;

public class SirTrevorConfiguration
{
    [ConfigurationField("blockLimit", "Maximum number of blocks", "requiredfield",
        Description = "The total maximum number of blocks (of any type) that can be displayed (0 = infinite).")]
    public int BlockLimit { get; set; }

    [ConfigurationField("editorAlignCentered", "Align editor centered", "boolean",
        Description =
            "If the editor doesn't span the entire width of the content editing area, center it. Otherwise left aligned.")]
    public bool EditorAlignCentered { get; set; }

    [ConfigurationField("editorWidth", "Editor width", "requiredfield",
        Description = "The width the Sir Trevor editor will expand to, most likely 100%.")]
    public int EditorWidth { get; set; }

    [ConfigurationField("editorMaxWidth", "Maximum editor width", "requiredfield",
        Description = "The maximum width the Sir Trevor editor will expand to, i.e. 500px or 80%.")]
    public int EditorMaxWidth { get; set; }

    [ConfigurationField("blocktypes", "Block types", "/App_Plugins/SirTrevor/settings/blocktypes.html",
        Description = "Configure the block types available to the user.")]
    public object BlockTypes { get; set; }
}

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;
@using Umbraco.Cms.Core.Services
@using UmbracoEightExamples.PropertyEditors
@inject IDataTypeService DataTypeService

@{
    var dt = DataTypeService.GetDataType(1234);

    if (dt is not null)
    {
        <pre>@dt.Name</pre>

        <pre>@(dt.Configuration as SirTrevorConfiguration)</pre>

        <pre>@(dt.ConfigurationAs<SirTrevorConfiguration>())</pre>
    }
}

using Umbraco.Cms.Core.IO;
using Umbraco.Cms.Core.Services;

namespace Umbraco.Cms.Core.PropertyEditors;

/// <summary>
///     Represents the configuration for the multinode picker value editor.
/// </summary>
public class MultiNodePickerConfigurationEditor : ConfigurationEditor<MultiNodePickerConfiguration>
{
    public MultiNodePickerConfigurationEditor(IIOHelper ioHelper, IEditorConfigurationParser editorConfigurationParser)
        : base(ioHelper, editorConfigurationParser) =>
        Field(nameof(MultiNodePickerConfiguration.TreeSource))
            .Config = new Dictionary<string, object> { { "idType", "udi" } };

    /// <inheritdoc />
    public override Dictionary<string, object> ToConfigurationEditor(MultiNodePickerConfiguration? configuration)
    {
        // sanitize configuration
        Dictionary<string, object> output = base.ToConfigurationEditor(configuration);

        output["multiPicker"] = configuration?.MaxNumber > 1;

        return output;
    }

    /// <inheritdoc />
    public override IDictionary<string, object> ToValueEditor(object? configuration)
    {
        IDictionary<string, object> d = base.ToValueEditor(configuration);
        d["multiPicker"] = true;
        d["showEditButton"] = false;
        d["showPathOnHover"] = false;
        d["idType"] = "udi";
        return d;
    }
}