Some editing tasks require the user to link several resources. For example, when inserting an image, the user must provide the URL of that image. The same scenario applies for links between XML document and DITA conrefs.

You can improve the user experience by implementing a custom URL chooser that allows choosing a resource in your CMS. This can be achieved by extending the sync.api.UrlChooser class.

The following code snippet implements a dummy UrlChooser that shows a prompt to the user that asks for the URL.

class DummyUrlChooser extends sync.api.UrlChooser {

  /** @override */
  supports( type) {
    // Only support image choosing
    return type == sync.api.UrlChooser.Type.IMAGE;
  };
 
   /** @override */
  chooseUrl(context, chosen) {
    if (context.getType() == sync.api.UrlChooser.Type.IMAGE) {
      let result = prompt("Please enter image URL");
      chosen(result);
    }
    return null;
  };
};

Then, you can register it using the following API call:

workspace.setUrlChooser(new DummyUrlChooser());

Other Use-cases

Allow user to choose an image by showing the file browser (url chooser):

  let urlChooser = workspace.getUrlChooser();
  
  if(urlChooser.supports(sync.api.UrlChooser.Type.IMAGE)) {
    let chooserContext = new sync.api.UrlChooser.Context(sync.api.UrlChooser.Type.IMAGE);

    urlChooser.chooseUrl(chooserContext,
      function (url) {
        if (url != null) {
          console.log(url);
        } else {
          console.log('dialog closed');
        }
      },
      sync.api.UrlChooser.Purpose.CHOOSE);
  }

To make a URL relative to edited document:

workspace.makeRelative(editor.getUrl(), theUrl);