development/vscode
development/vscode
1
0
Fork 0
mirror of https://github.com/Microsoft/vscode synced 2024-09-19 18:48:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Reduce markdown render passes from N+2 to N for N interactive playground cells.

Browse source 
Fixes #108310.
This commit is contained in:
Jackson Kearl 2020-10-27 16:28:45 -07:00
parent 7b173fac62
commit f80e33278f
3 changed files with 28 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/vs/workbench/contrib/welcome/walkThrough/browser/walkThroughInput.ts
View file

@ -103,12 +103,12 @@ export class WalkThroughInput extends EditorInput {
let i = 0;
const renderer = new marked.Renderer();
renderer.code = (code, lang) => {
const resource = this.options.resource.with({ scheme: Schemas.walkThroughSnippet, fragment: `${i++}.${lang}` });
i++;
const resource = this.options.resource.with({ scheme: Schemas.walkThroughSnippet, fragment: `${i}.${lang}` });
snippets.push(this.textModelResolverService.createModelReference(resource));
return '';
return `<div id="snippet-${resource.fragment}" class="walkThroughEditorContainer" ></div>`;
};
marked(content, { renderer });
content = marked(content, { renderer });
return Promise.all(snippets)
.then(refs => new WalkThroughModel(content, refs));

9
src/vs/workbench/contrib/welcome/walkThrough/browser/walkThroughPart.ts
View file

@ -15,7 +15,6 @@ import { EditorPane } from 'vs/workbench/browser/parts/editor/editorPane';
import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
import { WalkThroughInput } from 'vs/workbench/contrib/welcome/walkThrough/browser/walkThroughInput';
import { IOpenerService } from 'vs/platform/opener/common/opener';
import * as marked from 'vs/base/common/marked/marked';
import { IModelService } from 'vs/editor/common/services/modelService';
import { CodeEditorWidget } from 'vs/editor/browser/widget/codeEditorWidget';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
@ -299,16 +298,10 @@ export class WalkThroughPart extends EditorPane {
return;
}
let i = 0;
const renderer = new marked.Renderer();
renderer.code = (code, lang) => {
const id = `snippet-${model.snippets[i++].textEditorModel.uri.fragment}`;
return `<div id="${id}" class="walkThroughEditorContainer" ></div>`;
};
const innerContent = document.createElement('div');
innerContent.classList.add('walkThroughContent'); // only for markdown files
const markdown = this.expandMacros(content);
safeInnerHtml(innerContent, marked(markdown, { renderer }));
safeInnerHtml(innerContent, markdown);
this.content.appendChild(innerContent);
model.snippets.forEach((snippet, i) => {

42
src/vs/workbench/contrib/welcome/walkThrough/common/walkThroughContentProvider.ts
View file

@ -6,13 +6,14 @@
import { URI } from 'vs/base/common/uri';
import { ITextModelService, ITextModelContentProvider } from 'vs/editor/common/services/resolverService';
import { IModelService } from 'vs/editor/common/services/modelService';
import { ITextModel, DefaultEndOfLine, EndOfLinePreference } from 'vs/editor/common/model';
import { ITextModel, DefaultEndOfLine, EndOfLinePreference, ITextBufferFactory } from 'vs/editor/common/model';
import { IModeService } from 'vs/editor/common/services/modeService';
import { IWorkbenchContribution } from 'vs/workbench/common/contributions';
import * as marked from 'vs/base/common/marked/marked';
import { Schemas } from 'vs/base/common/network';
import { Range } from 'vs/editor/common/core/range';
import { createTextBufferFactory } from 'vs/editor/common/model/textModel';
import { assertIsDefined } from 'vs/base/common/types';
export function requireToContent(resource: URI): Promise<string> {
if (!resource.query) {
@ -38,6 +39,7 @@ export function requireToContent(resource: URI): Promise<string> {
}
export class WalkThroughSnippetContentProvider implements ITextModelContentProvider, IWorkbenchContribution {
private loads = new Map<string, Promise<ITextBufferFactory>>();
constructor(
@ITextModelService private readonly textModelResolverService: ITextModelService,
@ -47,38 +49,40 @@ export class WalkThroughSnippetContentProvider implements ITextModelContentProvi
this.textModelResolverService.registerTextModelContentProvider(Schemas.walkThroughSnippet, this);
}
public async provideTextContent(resource: URI): Promise<ITextModel> {
const factory = createTextBufferFactory(await requireToContent(resource));
private async textBufferFactoryFromResource(resource: URI): Promise<ITextBufferFactory> {
let ongoing = this.loads.get(resource.toString());
if (!ongoing) {
ongoing = new Promise(async c => {
c(createTextBufferFactory(await requireToContent(resource)));
this.loads.delete(resource.toString());
});
this.loads.set(resource.toString(), ongoing);
}
return ongoing;
}
public async provideTextContent(resource: URI): Promise<ITextModel> {
const factory = await this.textBufferFactoryFromResource(resource.with({ fragment: '' }));
let codeEditorModel = this.modelService.getModel(resource);
if (!codeEditorModel) {
const j = parseInt(resource.fragment);
let codeSnippet = '';
let languageName = '';
let i = 0;
const renderer = new marked.Renderer();
renderer.code = (code, lang) => {
if (i++ === j) {
codeSnippet = code;
languageName = lang;
}
i++;
const languageId = this.modeService.getModeIdForLanguageName(lang) || '';
const languageSelection = this.modeService.create(languageId);
// Create all models for this resource in one go... we'll need them all and we don't want to re-parse markdown each time
const model = this.modelService.createModel(code, languageSelection, resource.with({ fragment: `${i}.${lang}` }));
if (i === j) { codeEditorModel = model; }
return '';
};
const textBuffer = factory.create(DefaultEndOfLine.LF);
const lineCount = textBuffer.getLineCount();
const range = new Range(1, 1, lineCount, textBuffer.getLineLength(lineCount) + 1);
const markdown = textBuffer.getValueInRange(range, EndOfLinePreference.TextDefined);
marked(markdown, { renderer });
const languageId = this.modeService.getModeIdForLanguageName(languageName) || '';
const languageSelection = this.modeService.create(languageId);
codeEditorModel = this.modelService.createModel(codeSnippet, languageSelection, resource);
} else {
this.modelService.updateModel(codeEditorModel, factory);
}
return codeEditorModel;
return assertIsDefined(codeEditorModel);
}
}