Hide character sequences when displaying a document (e.g., through decorators)

[raedle]

• VSCode Version: 1.5.0

It would be good to have the option to hide sequences of characters when displaying a document but keep them in the original document. An example would be as follows:

Original Document:

<div some-attribute="value1" __wid="sk93-s3d" some-other-attribute="value2"><div>

Display Document:

<div some-attribute="value1" some-other-attribute="value2"><div>

I have used decorators to achieve this and "hide" attributes such as __wid="..." (see code below). However, it results in weird behavior when the cursor is positioned or moved because the characters still exist in the displayed document.

Any ideas on how to implement this nicely?

// create a decorator type that we use to decorate large numbers
var largeNumberDecorationType = vscode.window.createTextEditorDecorationType({
  color: 'rgba(0,0,0,0)',
  letterSpacing: '-50px',
});

var timeout = null;
let triggerUpdateDecorations = () => {
  if (timeout) {
    clearTimeout(timeout);
  }
  timeout = setTimeout(updateDecorations, 500);
}

let updateDecorations = () => {
  if (!activeEditor) {
    return;
  }
  var regEx = / __wid="[\w- ]*"/g;
  var text = activeEditor.document.getText();
  var largeNumbers: vscode.DecorationOptions[] = [];
  var match;
  while (match = regEx.exec(text)) {
    var startPos = activeEditor.document.positionAt(match.index);
    var endPos = activeEditor.document.positionAt(match.index + match[0].length);
    var decoration = { range: new vscode.Range(startPos, endPos), hoverMessage: match[0] };
    largeNumbers.push(decoration);
  }

  if (this.toggleWidState) {
    activeEditor.setDecorations(largeNumberDecorationType, largeNumbers);
  }
  else {
    activeEditor.setDecorations(largeNumberDecorationType, []);
  }
}

var activeEditor = vscode.window.activeTextEditor;
if (activeEditor) {
  triggerUpdateDecorations();
}

vscode.window.onDidChangeActiveTextEditor(editor => {
  activeEditor = editor;
  if (editor) {
    triggerUpdateDecorations();
  }
}, null, context.subscriptions);

vscode.workspace.onDidChangeTextDocument(event => {
  if (activeEditor && event.document === activeEditor.document) {
    triggerUpdateDecorations();
  }
}, null, context.subscriptions);

[siegebell]

This would be a useful feature for pretify-symbols-mode (#2402)...

@raedle to get the cursor to move around the group of characters, I hooked onDidChangeTextEditorSelection and adjusted the cursor position whenever I saw it enter the group. With okay_ish_ results.

And rather than setting the color to black to hide the text, I applied this _unsupported_ decoration:
{ textDecoration: 'none; font-size: 0.001em', }. For the decoration attachment, I set the font size to 1000em to counteract the shrunken size of its hidden parent. (Beware that there are bugs when the font size gets too small; #9078.)

code:
https://github.com/siegebell/vsc-prettify-symbols-mode/blob/master/src/document.ts#L404
https://github.com/siegebell/vsc-prettify-symbols-mode/blob/master/src/position.ts#L4

[raedle]

Hi @siegebell

Great to hear that others have similar needs. Your code looks like a promising and even better "workaround." I'll give it a try soon and report back.

In the meantime, I hope vscode is catching up on this as well 👍 . I really like the editor and very much prefer it over others.

[alexdima]

This feature request will not be considered in the next 6-12 months roadmap and as such will be closed to keep the number of issues we have to maintain actionable. Thanks for understanding and happy coding!