vscode: Markdown base64 not displayed entirely in the documentation panel

Description

We are developing the ‘AL language’ extension in VS Code and we are using MarkupContent in order to display our intellisense/on hover documentation as specified on the Language Server Protocol specifications.

As part of our documentation, we also display some images. We are using Markdown and base64 images (ex: ![MyImage](data:image/png;base64,myImageValueInBase64)). This works, but, the size of the documentation panel is not correct when displaying the image the first time (when visiting the second time, this is fixed).

image

Version

  • VS Code Version: 1.31.0-insider (system setup)
  • Commit: 8f56013e8f66650c1b0b65cc5c502691e307db21
  • Date: 2019-02-01T18:34:04.940Z
  • Electron: 3.1.2
  • Chrome: 66.0.3359.181
  • Node.js: 10.2.0
  • V8: 6.6.346.32
  • OS: Windows_NT x64 10.0.17763

Steps to Reproduce:

  1. Download the ‘AL Language’ extension from the marketplace.

Name: AL Language Id: ms-dynamics-smb.al Description: AL development tools for Dynamics 365 Business Central Version: 2.1.79379 Publisher: Microsoft VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=ms-dynamics-smb.al

  1. Create a new AL project.
  • Ctrl + Shift + P - to open the command bar
  • Select ‘AL:Go’ - to create a new AL project
  1. When asked to choose a server or do enter user credentials, just skip it, this is not needed in order to reproduce the issue.

  2. Open the HelloWorld.al that was auto-generated, and replace it by the following code: (the character ^ represent the cursor location for the next step).

page 50120 MyPage
{
    actions
    {
        area(Processing)
        {
            action(ActionName)
            {
                Image = ^
            }
        }
    }
}
  1. Remove ^ and trigger intellisense at this location.

Expected: The image (sent as base64 image) should appear. Actual: The image is only partially displayed as the display window is too small. This gets fixed the second time the image is displayed (see gif above).

Does this issue occur when all extensions are disabled?: I have no other extension installed than the AL one.

Related issue in our repository: Image preview of action Image property not fully visible

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 15 (11 by maintainers)

Commits related to this issue

Most upvoted comments

All thanks to @tamuratak!

I can confirm it all works as expected now! Thank you 👍

ImageRenderingWorks

I think the timing of getting clientHeight is too early. You have to wait for images to be loaded. For example, with the following patch, it works anyway.

diff --git a/src/vs/editor/contrib/suggest/suggestWidgetDetails.ts b/src/vs/editor/contrib/suggest/suggestWidgetDetails.ts
index 08b9c064ed..23734fa86f 100644
--- a/src/vs/editor/contrib/suggest/suggestWidgetDetails.ts
+++ b/src/vs/editor/contrib/suggest/suggestWidgetDetails.ts
@@ -192,6 +192,11 @@ export class SuggestDetailsWidget {
                this._body.scrollTop = 0;
 
                this.layout(this._size.width, this._type.clientHeight + this._docs.clientHeight);
+
+               for (const elm of this._docs.getElementsByTagName('img')) {
+                       elm.addEventListener('load', () => this.layout(this._size.width, this._type.clientHeight + this._docs.clientHeight) );
+               }
+
                this._onDidChangeContents.fire(this);
        }