A Simple Extension

This simple extension adds bookmarking functionality to Content Studio. It adds two options, Bookmark and Remove bookmark to the Tools menu. Clicking on Bookmark adds the current editor to a list of bookmarks, clicking on Remove bookmark removes the current editor from the list of bookmarks. For each bookmarked editor, a menu item is added to the Tools menu. Clicking on a bookmark menu item opens the corresponding bookmarked editor.

Create a text file called main.js in C:\Users\your-name\cs-extensions (for example) and open it for editing, then add the code described below.

The extension Javascript code

Use require to create the necessary Content Studio objects:

var notifier = require('notifier');
var actions = require('actions');
var CS = require('content-studio');

Create the Bookmark and Remove bookmark actions, and disable them - they will only be enabled when appropriate:

var bookmarkAction = actions.createAction('Bookmark', 'shortcut D');
var unbookmarkAction = actions.createAction('Remove bookmark', 'shortcut shift D');
bookmarkAction.enabled(false);
removeBookmarkAction.enabled(false);

Create the other variables you will need - an array to hold the bookmarks, two variables to keep track of the current editor's URI and title, and an array to keep track the number of bookmarks:

var currentURI = null;
var currentName = null;
var allBookmarks = {};

Add the actions you have created to the Tools menu:

actions.addAction(bookmarkAction, 'tools');
actions.addAction(removeBookmarkAction, 'tools');

The Bookmark and Remove bookmark actions should only be enabled if an editor is open. In addition, the Bookmark action should only be enabled if the current editor is not bookmarked, and the Remove bookmark action should only be enabled if the current editor is bookmarked. So you need add a call to a function that will perform these checks and initialize the menu items correctly:

enableDisableActions();

Then, of course, you need to actually define this enableDisableActions function. The following function first checks to see if an editor is actually open by checking the currentURI variable and disabling both actions if it is null. If not, it checks whether or not the current editor is in the allBookmarks array and enables/disables the actions accordingly.

function enableDisableActions() {
  if (currentURI == null) {
    bookmarkAction.enabled(false);
    removeBookmarkAction.enabled(false);
    return;
  }
  if (allBookmarks[currentURI]) {
    removeBookmarkAction.enabled(true);
    bookmarkAction.enabled(false);
  }
  else {
    removeBookmarkAction.enabled(false);
    bookmarkAction.enabled(true);
  }
}

Now you can add the actual bookmarking code that needs to be executed when the user clicks on one of your menu entries. Here is the code for the Bookmark action:

bookmarkAction.on('action', function() {
  if (currentURI == null) {
    return;
  }
  if (allBookmarks[currentURI]) {
    notifier.notify('Already bookmarked...');
    return;
  }
  var uri = currentURI;
  var bookmark = actions.createAction(currentName);
  actions.addAction(bookmark, 'tools');
  bookmark.on('action', function() {
    CS.openEditor(uri);
  });
  allBookmarks[uri] = bookmark;
  enableDisableActions();
});

What is happening here? First of all currentURI is checked: if there is no current editor to bookmark, then the function exits. Then if the current editor is already bookmarked, the function displays a message and exits. If these checks are passed, then the function:

• Creates a new action with the name of the current editor (currentName)

• Adds this action to the Tools menu

• Defines the event code for the new action

• Adds the editor's URI to the allBookmarks array

• Calls enableDisableActions to update the state of the Bookmark and Remove Bookmark menu items.

Here is the corresponding code for the Remove Bookmark action:

removeBookmarkAction.on('action', function() {
  if (currentURI == null) {
    return;
  }
  if (! allBookmarks[currentURI]) {
    return;
  }
  var bookmark = allBookmarks[currentURI];
  delete allBookmarks[currentURI];
  actions.removeAction(bookmark);
  enableDisableActions();
});

As you can see, it's more or less a mirror of the Bookmark action code.

Finally, you need to add some code to react to changes in the current editor. This code needs to set the currentURI and currentName variables used in the functions described above. Here is the missing event code:

function editorActive(editorControl) {
  console.log('Editor activated: ' + editorControl.uri);
  currentURI = editorControl.uri;
  currentName = editorControl.displayName;
  enableDisableActions();
}

function editorInactive(editorControl) {
  console.log('Editor deactivated: ' + editorControl.uri);
  currentURI = null;
  currentName = null;
  enableDisableActions();
}

CS.on('editor-active', editorActive);
CS.on('editor-inactive', editorInactive);

Save main.js.

The extension package file

In the same folder create a text file called package.json. Open it for editing and add the following code:

{ 
  "main" : "main.js",
  "name": "bookmarks", 
  "version" : "1" 
}

Save package.json.

Testing the extension

Open a command terminal and start Content Studio by entering the following command:

javaws http://content-engine-host/studio/Studio.jnlp?com.escenic.script.root=C:\Users\your-name\cs-extensions

Select View from the menu bar while holding down the Ctrl key, then select Debug > Developer Mode. Your Tools menu should now contain the Bookmark and Remove bookmark options you have defined. If you open a content item in an editor and click on the Bookmark option then a new option with the name of the content item should be added to the Tools menu. If you close the content item editor and click on this new option, then the content item should be reopened for editing.