How to easily update component authoring behaviour?

[wildone]

Is your feature request related to a problem? Please describe. Some components need to have new buttons added to the edit toolbar and have ability to refresh page or component when interacting within edit ui.

Need to be able to add new items specifying icon, text and URL to open.

How to do this easily?

Describe the solution you'd like Would be great to specify this at component level in a dedicated file same as dialog config component/edit/content.json. Similar functionality exist in AEM eg cq:listeners and cq:actionConfigs. You can see possible dialog configs here https://experienceleague.adobe.com/docs/experience-manager-65/developing/components/components-basics.html?lang=en#cq-actionconfigs-classic-ui-only

Implementing these will allow more separation of concern so that we don't have to override everything.

Describe alternatives you've considered Overriding existing JS but its source but that is yuck and just going to be messy long term.

[paweljozwicki]

We are working on the documentation related to extending the page editor. It should be ready in a few days.

[wildone]

@paweljozwicki will you cover how to extend Dialog fields as well? I am trying to add isDisabled to Text and other form components.

[wildone]

@paweljozwicki I am trying to add a simple Link component to dialog, but it does not seem to work.

I have created Link.js:

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import { Link as Button } from "/apps/websight-atlaskit-esm/web-resources/@atlaskit/button.js";
import React from "/apps/websight-atlaskit-esm/web-resources/react.js";
export default class Link extends React.Component {
  render() {
    // eslint-disable-next-line react/jsx-props-no-spreading
    return /*#__PURE__*/React.createElement(Button, _extends({
      autocomplete: "off"
    }, this.props));
  }

}

and link.json.html

{
    "type": "/apps/typerefinery/components/dialog/link/Link.js",
    "props": {
        "name": "${properties.name}",
        "label": "${properties.label}",
        "description": "${properties.description}",
        "removeIfEmpty": "${properties.removeIfEmpty || false}",
        "appearance": "${properties.appearance || 'link'}",
        <sly data-sly-test="${properties.disblaed}">"isDisabled": ${properties.disabled || false},</sly>
        <sly data-sly-test="${properties.spacing}">"spacing": ${properties.spacing || ''},</sly>
        <sly data-sly-test="${properties.href}">"href": ${properties.href || ''},</sly>
        <sly data-sly-test="${properties.target}">"target": ${properties.target || ''},</sly>
        <sly data-sly-test="${properties.type}">"type": ${properties.type || ''},</sly>
        "defaultValue": ""
    }
}

and then added it to my dialog

      "editflow2": {
        "sling:resourceType": "typerefinery/components/dialog/link",
        "name": "flowapi_editurll",
        "label": "Edit"
      }

[wildone]

@paweljozwicki I am trying to add a simple Link component to dialog, but it does not seem to work.

....

Anyways I've figured out how to do this :D

[wildone]

@paweljozwicki Have you overwritten window.open in React? I am trying to do window.open with target "_blank" and it opens in same tab 😢

[paweljozwicki]

We didn't overwrite window.open. On what browser do you have a problem? For verifying an issue I added a button to our assetreference field with

        this.openLink = () => {
            const { value } = this.props;
            window.open(value, '_blank');
        }; 

and it works fine on Chrome (Version 109.0.5414.119), Firefox (Version 109.0.1), and Safari (Version 15.6.1)

[wildone]

We didn't overwrite window.open. On what browser do you have a problem? For verifying an issue I added a button to our assetreference field with

        this.openLink = () => {
            const { value } = this.props;
            window.open(value, '_blank');
        }; 

and it works fine on Chrome (Version 109.0.5414.119), Firefox (Version 109.0.1), and Safari (Version 15.6.1)

I was on brave. I've changed the button to appearance=link and it work fine. :D

[wildone]

@paweljozwicki I am still keen to see how to add a button to the edit controls of a component. :D

[paweljozwicki]

We remember that, but still working on documentation. If it's urgent then you can use a WebAction (here is an example) but we would like to introduce new solution and not sure if WebActions will be supported in the future.