@kubohiroya/turbowarp-plus-editor-git 0.0.0-stage → 0.7.0

package/src/repository.ts

@@ -0,0 +1,308 @@
+import * as git from 'isomorphic-git';
+import {createTwoFilesPatch} from 'diff';
+import {createReadOnlyFs, errorCode, GitPanelError, pathParts, readOptional, sameBytes} from './filesystem.js';
+import {runRemoteOperation} from './remote-operations.js';
+import type {GetRemoteSession, RemoteOperation} from './remote-operations.js';
+
+export {createReadOnlyFs, GitPanelError} from './filesystem.js';
+export type ChangeGroup = 'staged' | 'unstaged' | 'untracked' | 'commit';
+export interface FileChange {
+    path: string;
+    group: ChangeGroup;
+    before: string | null;
+    after: string | null;
+    worktree: boolean;
+    oldMode: number | null;
+    newMode: number | null;
+}
+export interface Commit {
+    oid: string;
+    message: string;
+    author: string;
+    timestamp: number;
+}
+interface Entry {oid: string; mode: number}
+type Metadata = Map<string, Uint8Array | null>;
+export interface Snapshot {
+    branch: string | undefined;
+    head: string | null;
+    branches: string[];
+    commits: Commit[];
+    changes: FileChange[];
+    scope: string;
+    metadata: Metadata;
+    /** Size and time fingerprint taken before the read. Compare it with `probe(scope)` to see later changes. */
+    probe: string;
+}
+export interface FileDiff {
+    binary: boolean;
+    patch: string;
+    /**
+     * Both versions as text, for views that read the content instead of the patch. A missing version is empty.
+     * Absent for binary content and above the text limit, except for project.source.json up to 16 MiB.
+     */
+    text?: {before: string; after: string};
+    beforeSize: number;
+    afterSize: number;
+    tooLarge: boolean;
+}
+const emptyTree = '4b825dc642cb6eb9a060e54bf8d69288fbee4904';
+const textLimit = 1024 * 1024;
+const inScope = (path: string, scope: string) => !scope || path === scope || path.startsWith(scope + '/');
+// Above this many work-tree files, probes only watch Git metadata. Edits then need a manual refresh.
+const probeLimit = 5000;
+const sameMetadata = (a: Metadata, b: Metadata) => a.size === b.size && [...a].every(([path, bytes]) => sameBytes(bytes, b.get(path) ?? null));
+
+export async function openRepository(root: FileSystemDirectoryHandle) {
+    // Linked worktrees and submodules may point outside the granted directory.
+    try {await root.getDirectoryHandle('.git');} catch (error) {
+        if (['NotFoundError', 'TypeMismatchError'].includes((error as DOMException).name)) throw new GitPanelError('invalid');
+        throw error;
+    }
+    const fs = createReadOnlyFs(root);
+    let tail = Promise.resolve();
+    const serial = <T>(operation: () => Promise<T>) => {
+        const result = tail.then(operation);
+        tail = result.then(() => {}, () => {});
+        return result;
+    };
+    const options = {fs, dir: '/', gitdir: '/.git'};
+    let cache = {};
+    let pushNeedsFetch = false;
+    const metadata = async (): Promise<Metadata> => {
+        const head = await readOptional(fs, '/.git/HEAD');
+        if (!head) throw new GitPanelError('invalid');
+        const text = new TextDecoder().decode(head).trim();
+        const paths = ['/.git/HEAD', '/.git/index', '/.git/packed-refs', '/.git/shallow', '/.git/config'];
+        if (text.startsWith('ref: refs/heads/')) {
+            const ref = text.slice(5);
+            pathParts(ref);
+            paths.push('/.git/' + ref);
+        } else if (!/^[0-9a-f]{40}$/.test(text)) throw new GitPanelError('invalid');
+        const result: Metadata = new Map();
+        for (const path of paths) {
+            if (await readOptional(fs, path + '.lock')) throw new GitPanelError('changed');
+            result.set(path, await readOptional(fs, path));
+        }
+        return result;
+    };
+    await metadata();
+
+    const fileAt = async (parts: string[]) => {
+        let directory = root;
+        for (const name of parts.slice(0, -1)) directory = await directory.getDirectoryHandle(name);
+        return (await directory.getFileHandle(parts[parts.length - 1])).getFile();
+    };
+    const optionalFile = async (path: string) => {
+        try {return await fileAt(pathParts(path));} catch (error) {
+            if (['NotFoundError', 'TypeMismatchError'].includes((error as DOMException).name)) return null;
+            throw error;
+        }
+    };
+    const stamp = (file: File | null) => file ? `${file.size}:${file.lastModified}` : '-';
+    /**
+     * Fingerprints Git metadata and the work tree in `scope` from sizes and modification times, without
+     * reading file contents other than HEAD. Returns 'locked' while Git holds a lock on that metadata.
+     */
+    const probe = async (scope = ''): Promise<string> => {
+        const parts = pathParts(scope);
+        const headFile = await optionalFile('.git/HEAD');
+        if (!headFile) return 'locked';
+        const head = (await headFile.text()).trim();
+        const paths = ['.git/HEAD', '.git/index', '.git/packed-refs', '.git/shallow', '.git/config'];
+        if (head.startsWith('ref: refs/heads/')) {
+            try {pathParts(head.slice(5));} catch {return 'locked';}
+            paths.push('.git/' + head.slice(5));
+        }
+        const lines: string[] = [];
+        for (const path of paths) {
+            if (await optionalFile(path + '.lock')) return 'locked';
+            lines.push(`${path} ${stamp(await optionalFile(path))}`);
+        }
+        let start: FileSystemDirectoryHandle | null = root;
+        try {for (const name of parts) start = await start.getDirectoryHandle(name);} catch {start = null;}
+        const files: string[] = [];
+        const visit = async (directory: FileSystemDirectoryHandle, prefix: string): Promise<boolean> => {
+            const entries = (directory as FileSystemDirectoryHandle & {values(): AsyncIterable<FileSystemHandle>}).values();
+            for await (const entry of entries) {
+                const path = prefix + entry.name;
+                if (path === '.git') continue;
+                if (entry.kind === 'directory') {
+                    if (!await visit(entry as FileSystemDirectoryHandle, path + '/')) return false;
+                } else {
+                    files.push(`${path} ${stamp(await (entry as FileSystemFileHandle).getFile())}`);
+                    if (files.length > probeLimit) return false;
+                }
+            }
+            return true;
+        };
+        const prefix = parts.length ? parts.join('/') + '/' : '';
+        const complete = start ? await visit(start, prefix) : true;
+        if (complete) lines.push(...files.sort());
+        else lines.push('work tree not watched');
+        return lines.join('\n');
+    };
+
+    const entries = async (ref: string | null, scope: string): Promise<Map<string, Entry>> => {
+        const tree = ref === null ? git.STAGE() : git.TREE({ref});
+        const result = await git.walk({
+            ...options, cache, trees: [tree],
+            map: async (path, [entry]) => {
+                if (path !== '.' && !inScope(path, scope) && !scope.startsWith(path + '/')) return null;
+                if (!entry || await entry.type() === 'tree') return;
+                const mode = await entry.mode();
+                if (mode === 0o160000 || mode === 0o120000) throw new GitPanelError('unsupported');
+                return {path, oid: await entry.oid(), mode};
+            }
+        }) as {path: string; oid: string; mode: number}[];
+        return new Map(result.map(({path, oid, mode}) => [path, {oid, mode}]));
+    };
+    const assertSnapshot = async (snapshot: Snapshot) => {
+        if (!sameMetadata(snapshot.metadata, await metadata())) throw new GitPanelError('changed');
+    };
+    const read = async (scope = ''): Promise<Snapshot> => {
+        scope = pathParts(scope).join('/');
+        fs.clearReads();
+        cache = {};
+        // Taken first, so a change during the read differs from the stored value and triggers another read.
+        const fingerprint = await probe(scope);
+        const before = await metadata();
+        let head: string | null;
+        try {head = await git.resolveRef({...options, ref: 'HEAD'});} catch (error) {
+            if (errorCode(error) !== 'NotFoundError') throw error;
+            head = null;
+        }
+        const branch = await git.currentBranch(options);
+        const branches = await git.listBranches(options);
+        const commits = head ? (await git.log({...options, cache, ref: head, depth: 50})).map(({oid, commit}) => ({
+            oid, message: commit.message, author: commit.author.name, timestamp: commit.author.timestamp
+        })) : [];
+        const matrix = await git.statusMatrix({...options, cache, refresh: false, filepaths: [scope || '.']});
+        const staged = await entries(null, scope);
+        const committed = await entries(head || emptyTree, scope);
+        const changes: FileChange[] = [];
+        for (const [path, headState, workState, stageState] of matrix) {
+            const previous = committed.get(path);
+            const next = staged.get(path);
+            if (headState !== stageState || previous?.mode !== next?.mode) {
+                changes.push({path, group: 'staged', before: previous?.oid ?? null, after: next?.oid ?? null,
+                    worktree: false, oldMode: previous?.mode ?? null, newMode: next?.mode ?? null});
+            }
+            if (workState !== stageState) {
+                const bytes = workState ? await fs.promises.readFile('/' + path) as Uint8Array : null;
+                const oid = bytes ? (await git.hashBlob({object: bytes})).oid : null;
+                changes.push({path, group: !next && bytes ? 'untracked' : 'unstaged',
+                    before: next?.oid ?? null, after: oid, worktree: true,
+                    oldMode: next?.mode ?? null, newMode: bytes ? (next?.mode ?? 0o100644) : null});
+            }
+        }
+        if (!sameMetadata(before, await metadata())) throw new GitPanelError('changed');
+        await fs.checkReads();
+        return {branch: branch || undefined, head, branches, commits, changes, scope, metadata: before, probe: fingerprint};
+    };
+    const historyChanges = async (snapshot: Snapshot, oid: string): Promise<FileChange[]> => {
+        fs.clearReads();
+        await assertSnapshot(snapshot);
+        const {commit} = await git.readCommit({...options, cache, oid});
+        const before = await entries(commit.parent[0] || emptyTree, snapshot.scope);
+        const after = await entries(oid, snapshot.scope);
+        const result: FileChange[] = [];
+        for (const path of [...new Set([...before.keys(), ...after.keys()])].sort()) {
+            const a = before.get(path), b = after.get(path);
+            if (a?.oid !== b?.oid || a?.mode !== b?.mode) result.push({
+                path, group: 'commit', before: a?.oid ?? null, after: b?.oid ?? null,
+                oldMode: a?.mode ?? null, newMode: b?.mode ?? null, worktree: false
+            });
+        }
+        await assertSnapshot(snapshot);
+        await fs.checkReads();
+        return result;
+    };
+    const readDiff = async (snapshot: Snapshot, change: FileChange): Promise<FileDiff> => {
+        fs.clearReads();
+        await assertSnapshot(snapshot);
+        pathParts(change.path);
+        const before = change.before ? (await git.readBlob({...options, cache, oid: change.before})).blob : new Uint8Array();
+        let after: Uint8Array = new Uint8Array();
+        if (change.after) {
+            if (change.worktree) {
+                const bytes = await readOptional(fs, '/' + change.path);
+                if (!bytes || (await git.hashBlob({object: bytes})).oid !== change.after) throw new GitPanelError('changed');
+                after = bytes;
+            } else after = (await git.readBlob({...options, cache, oid: change.after})).blob;
+        } else if (change.worktree && await readOptional(fs, '/' + change.path)) throw new GitPanelError('changed');
+        await assertSnapshot(snapshot);
+        await fs.checkReads();
+        const size = Math.max(before.byteLength, after.byteLength);
+        const tooLarge = size > textLimit;
+        const binary = before.includes(0) || after.includes(0);
+        const base = {beforeSize: before.byteLength, afterSize: after.byteLength, binary, tooLarge};
+        // Project sources are compared as blocks, which stays usable well past the text diff limit.
+        const sourceLimit = change.path.split('/').pop() === 'project.source.json' ? 16 * 1024 * 1024 : textLimit;
+        if (binary || size > sourceLimit) return {...base, patch: ''};
+        const decoder = new TextDecoder('utf-8', {fatal: true});
+        let oldText: string, newText: string;
+        try {oldText = decoder.decode(before); newText = decoder.decode(after);} catch {
+            return {...base, binary: true, patch: ''};
+        }
+        if (change.worktree && await git.getConfig({...options, path: 'core.autocrlf'}) === 'true') {
+            newText = newText.replace(/\r\n/g, '\n');
+        }
+        const text = {before: oldText, after: newText};
+        if (tooLarge) return {...base, patch: '', text};
+        // The path is rendered separately, so newline characters cannot alter patch headers.
+        const patch = createTwoFilesPatch(change.before ? 'a/file' : '/dev/null', change.after ? 'b/file' : '/dev/null',
+            oldText, newText, undefined, undefined, {context: 3, timeout: 1000});
+        return patch === undefined ? {...base, tooLarge: true, patch: '', text} :
+            {...base, patch: 'diff --git a/file b/file\n' + patch.replace(/^=+\n/, ''), text};
+    };
+    const directoryAt = async (path: string) => {
+        let directory = root;
+        for (const part of pathParts(path)) directory = await directory.getDirectoryHandle(part);
+        return directory;
+    };
+    const browse = async (path = '') => {
+        path = pathParts(path).join('/');
+        const directory = await directoryAt(path);
+        const children: string[] = [];
+        let isProject = false;
+        for await (const entry of (directory as FileSystemDirectoryHandle & {values(): AsyncIterable<FileSystemHandle>}).values()) {
+            if (entry.kind === 'directory' && entry.name !== '.git') children.push(entry.name);
+            if (entry.kind === 'file' && entry.name === 'project.source.json') isProject = true;
+        }
+        return {path, children: children.sort(), isProject};
+    };
+    const openProject = async (path: string) => {
+        const parts = pathParts(path);
+        let directory = root;
+        for (const part of parts) {
+            directory = await directory.getDirectoryHandle(part);
+            for await (const entry of (directory as FileSystemDirectoryHandle & {values(): AsyncIterable<FileSystemHandle>}).values()) {
+                if (entry.name === '.git') throw new GitPanelError('invalid');
+            }
+        }
+        const parentParts = await root.resolve(directory);
+        if (parentParts === null || parentParts.join('/') !== parts.join('/')) throw new GitPanelError('invalid');
+        await directory.getFileHandle('project.source.json');
+        return directory;
+    };
+    return {root, openProject, browse, probe,
+        readOrigin: () => serial(() => git.getConfig({...options, path: 'remote.origin.url'})),
+        remoteOperation: (operation: RemoteOperation, getSession: GetRemoteSession, guard: () => void, signal?: AbortSignal) =>
+            serial(async () => {
+                if (operation === 'push' && pushNeedsFetch) throw new GitPanelError('pushUnknown');
+                try {
+                    await runRemoteOperation(root, operation, getSession, guard, signal);
+                    if (operation === 'fetch') pushNeedsFetch = false;
+                } catch (error) {
+                    if (operation === 'push' && error instanceof GitPanelError &&
+                        (error.code === 'pushUnknown' || error.code === 'pushRefresh')) pushNeedsFetch = true;
+                    throw error;
+                }
+            }),
+        read: (scope?: string) => serial(() => read(scope)),
+        readDiff: (snapshot: Snapshot, change: FileChange) => serial(() => readDiff(snapshot, change)),
+        historyChanges: (snapshot: Snapshot, oid: string) => serial(() => historyChanges(snapshot, oid))
+    };
+}
+export type Repository = Awaited<ReturnType<typeof openRepository>>;

package/src/scratch-block-diff-renderer.ts

@@ -0,0 +1,213 @@
+import {isRecord} from './project-source-patch.js';
+import type {BlockChangeKind, BlockPart, BlockSide, BlockTable} from './project-source-patch.js';
+import {markBlockLocation} from './block-diff-location.js';
+import type {DiffSvgBlock} from './block-diff-location.js';
+
+interface BlockWorkspace {
+    dispose(): void;
+    markFocused(): void;
+    getBlocksBoundingBox(): {width: number; height: number};
+    getBlockById(id: string): DiffSvgBlock | null;
+    options?: {pathToMedia?: string};
+}
+export interface ScratchBlocksPort {
+    inject(container: HTMLElement, options: {readOnly: true; sounds: false; media?: string}): BlockWorkspace;
+    svgResize(workspace: BlockWorkspace): void;
+    getMainWorkspace(): BlockWorkspace | null;
+    mainWorkspace: BlockWorkspace | null;
+    Events: {disable(): void; enable(): void};
+    Blocks: Record<string, unknown>;
+    defineBlocksWithJsonArray?(definitions: Record<string, unknown>[]): void;
+    OUTPUT_SHAPE_ROUND?: number;
+    Xml: {textToDom(xml: string): Element; domToWorkspace(xml: Element, workspace: BlockWorkspace): unknown};
+}
+export interface ScratchBlockDiffRendererOptions {
+    getBlockly(): ScratchBlocksPort | Promise<ScratchBlocksPort>;
+    showUnregisteredBlocks?: boolean;
+    locale?: string;
+    deserializeBlocks(blocks: BlockTable): Record<string, {id: string; topLevel?: boolean}>;
+    createBlockContainer(): {
+        createBlock(block: {id: string}, deferProjectChanged: true): void;
+        blockToXML(id: string): string | undefined;
+    };
+}
+export interface ScriptBlockMark {
+    id: string;
+    kind: BlockChangeKind;
+    parts: readonly BlockPart[];
+}
+
+export type ProjectBlockRenderer = (args: BlockSide & {
+    container: HTMLElement; withContext: boolean; parts?: readonly BlockPart[]; marks?: readonly ScriptBlockMark[]; signal: AbortSignal;
+}) => Promise<(() => void) | undefined>;
+
+function scriptRoot({target, id}: BlockSide): string {
+    const visited = new Set<string>();
+    for (;;) {
+        const block = target.blocks[id];
+        if (!isRecord(block) || typeof block.parent !== 'string' || !Object.hasOwn(target.blocks, block.parent)) return id;
+        if (visited.has(id)) throw new Error('Cyclic block parents.');
+        visited.add(id);
+        id = block.parent;
+    }
+}
+
+function safeMutation(value: unknown, root: boolean, depth = 0): boolean {
+    if (!isRecord(value) || depth > 32 || value.tagName !== (root ? 'mutation' : 'arg') || !Array.isArray(value.children)) return false;
+    return Object.entries(value).every(([key, item]) => key === 'children' ||
+        (/^[a-zA-Z][\w-]*$/.test(key) && ['string', 'number', 'boolean'].includes(typeof item))) &&
+        value.children.every(child => safeMutation(child, false, depth + 1));
+}
+
+function selectBlocks({target, id}: BlockSide, root: string, withContext: boolean): BlockTable {
+    const selected: BlockTable = Object.create(null);
+    const visiting = new Set<string>();
+    let blockCount = 0;
+    function visit(blockId: string, followNext: boolean, depth: number) {
+        if (visiting.has(blockId) || depth > 128) throw new Error('Block preview exceeds its graph limit.');
+        if (Object.hasOwn(selected, blockId) || !Object.hasOwn(target.blocks, blockId)) return;
+        if (++blockCount > 800) throw new Error('Block preview exceeds its graph limit.');
+        if (blockId === '__proto__') throw new Error('Invalid block ID.');
+        const data = target.blocks[blockId];
+        if (Array.isArray(data)) {
+            selected[blockId] = data.length > 3 ? [...data.slice(0, 3), 20, 20] : [...data];
+            return;
+        }
+        if (!isRecord(data) || typeof data.opcode !== 'string') throw new Error('Invalid Scratch block.');
+        const block = structuredClone(data);
+        if (block.mutation && !safeMutation(block.mutation, true)) throw new Error('Unsupported block mutation.');
+        block.x = 20;
+        block.y = 20;
+        block.topLevel = blockId === root;
+        if (blockId === root) block.shadow = false;
+        delete block.comment;
+        if (!followNext) block.next = null;
+        selected[blockId] = block;
+        visiting.add(blockId);
+        if (isRecord(block.inputs)) {
+            for (const [name, input] of Object.entries(block.inputs)) {
+                if (!withContext && /^SUBSTACK\d*$/.test(name)) {
+                    delete block.inputs[name];
+                    continue;
+                }
+                if (!Array.isArray(input)) continue;
+                for (const child of input.slice(1, 3)) {
+                    if (typeof child === 'string') visit(child, withContext, depth + 1);
+                }
+            }
+        }
+        if (typeof block.next === 'string') visit(block.next, true, depth + 1);
+        visiting.delete(blockId);
+    }
+    visit(root, withContext, 0);
+    if (!Object.hasOwn(selected, id)) throw new Error('The changed block is not reachable.');
+    return selected;
+}
+
+const placeholderPrefix = 'twgit_review_placeholder_';
+let placeholderSerial = 0;
+
+function statementInput(element: Element) {
+    return element.localName === 'statement' || /^SUBSTACK\d*$/.test(element.getAttribute('name') ?? '');
+}
+
+function placeholderDefinition(element: Element, opcode: string, type: string, blockly: ScratchBlocksPort, locale: string) {
+    const text = (locale.startsWith('ja') ? '未登録: ' : 'Unregistered: ') + opcode.slice(0, 120);
+    const args: Record<string, unknown>[] = [{type: 'field_label', text}];
+    const branches: string[] = [];
+    for (const child of Array.from(element.children)) {
+        const name = child.getAttribute('name');
+        if (!name) continue;
+        if (child.localName === 'field') args.push({type: 'field_input', name, text: ''});
+        else if (statementInput(child)) branches.push(name);
+        else if (child.localName === 'value') args.push({type: 'input_value', name});
+    }
+    const parent = element.parentElement;
+    const reporter = parent?.localName === 'value' && !statementInput(parent);
+    const definition: Record<string, unknown> = {
+        type, message0: args.map((_, index) => '%' + (index + 1)).join(' '), args0: args, inputsInline: true,
+        colour: '#687488', colourSecondary: '#566274', colourTertiary: '#4b5564',
+        ...(reporter ? {output: null, outputShape: blockly.OUTPUT_SHAPE_ROUND} : {previousStatement: null, nextStatement: null})
+    };
+    for (const [index, name] of branches.entries()) {
+        definition['message' + (index + 1)] = '%1';
+        definition['args' + (index + 1)] = [{type: 'input_statement', name}];
+    }
+    return definition;
+}
+
+/** Use the host's Scratch VM serializer and Scratch Blocks definitions in an isolated workspace. */
+export function createScratchBlocksDiffRenderer(options: ScratchBlockDiffRendererOptions): ProjectBlockRenderer {
+    return async ({container, target, id, withContext, parts = [], marks, signal}) => {
+        const blockly = await options.getBlockly();
+        if (signal.aborted) return;
+        const root = withContext ? scriptRoot({target, id}) : id;
+        const selected = selectBlocks({target, id}, root, withContext);
+        const compactRoot = Array.isArray(selected[root]);
+        const blocks = options.deserializeBlocks(selected);
+        const serializedRoot = compactRoot ? Object.values(blocks).find(block => block.topLevel)?.id : root;
+        if (!serializedRoot) throw new Error('Missing Scratch block.');
+        const vmBlocks = options.createBlockContainer();
+        for (const block of Object.values(blocks)) vmBlocks.createBlock(block, true);
+        const xml = vmBlocks.blockToXML(serializedRoot);
+        if (!xml) throw new Error('Missing Scratch block XML.');
+        const dom = blockly.Xml.textToDom('<xml>' + xml + '</xml>');
+        const main = blockly.getMainWorkspace();
+        const surface = container.ownerDocument.createElement('div');
+        surface.className = 'twgit-block-diff-surface';
+        container.append(surface);
+        let workspace: BlockWorkspace | undefined;
+        const placeholders: string[] = [];
+        const dispose = () => {
+            const active = blockly.getMainWorkspace();
+            blockly.Events.disable();
+            try {
+                workspace?.dispose();
+            } finally {
+                if (active === workspace) blockly.mainWorkspace = main;
+                for (const type of placeholders) delete blockly.Blocks[type];
+                blockly.Events.enable();
+                surface.remove();
+            }
+        };
+        blockly.Events.disable();
+        try {
+            for (const element of Array.from(dom.querySelectorAll('block,shadow'))) {
+                const opcode = element.getAttribute('type') ?? '';
+                if (!opcode.startsWith(placeholderPrefix) && Object.hasOwn(blockly.Blocks, opcode)) continue;
+                if (!options.showUnregisteredBlocks || !blockly.defineBlocksWithJsonArray) throw new Error('Unregistered Scratch block.');
+                let alias: string;
+                do {alias = placeholderPrefix + ++placeholderSerial;} while (Object.hasOwn(blockly.Blocks, alias));
+                placeholders.push(alias);
+                blockly.defineBlocksWithJsonArray([placeholderDefinition(element, opcode, alias, blockly,
+                    options.locale ?? container.ownerDocument.documentElement.lang)]);
+                element.setAttribute('type', alias);
+            }
+            workspace = blockly.inject(surface, {readOnly: true, sounds: false, media: main?.options?.pathToMedia});
+            workspace.markFocused = () => {};
+            blockly.Xml.domToWorkspace(dom, workspace);
+            if (marks) {
+                for (const mark of marks) {
+                    const changed = workspace.getBlockById(mark.id === root ? serializedRoot : mark.id);
+                    if (!changed) continue;
+                    changed.getSvgRoot()?.classList.add('twgit-block-diff-' + mark.kind);
+                    markBlockLocation(changed, mark.parts);
+                }
+            } else {
+                const changed = workspace.getBlockById(id === root ? serializedRoot : id);
+                if (changed) markBlockLocation(changed, parts);
+            }
+            const bounds = workspace.getBlocksBoundingBox();
+            surface.style.width = Math.max(100, Math.ceil(bounds.width) + 48) + 'px';
+            surface.style.height = Math.max(64, Math.ceil(bounds.height) + 48) + 'px';
+            blockly.svgResize(workspace);
+        } catch (error) {
+            dispose();
+            throw error;
+        } finally {
+            blockly.mainWorkspace = main;
+            blockly.Events.enable();
+        }
+        return dispose;
+    };
+}