I have the error:

drag-and-drop-images $ npm run compile

> drag-and-drop-images@1.0.3 compile
> tsc -p ./

src/extension.ts:478:35 - error TS2339: Property 'document' does not exist on type 'NotebookRange'.

478     const newContent = activeCell.document.getText() + '\n' + markdownImageSyntax;
                                      ~~~~~~~~

src/extension.ts:479:29 - error TS2339: Property 'document' does not exist on type 'NotebookRange'.

479     edit.replace(activeCell.document.uri, new vscode.Range(0, 0, activeCell.document.lineCount, 0), newContent);
                                ~~~~~~~~

src/extension.ts:479:77 - error TS2339: Property 'document' does not exist on type 'NotebookRange'.

479     edit.replace(activeCell.document.uri, new vscode.Range(0, 0, activeCell.document.lineCount, 0), newContent);
                                                                                ~~~~~~~~


Found 3 errors in the same file, starting at: src/extension.ts:478

import * as vscode from 'vscode';
import * as path from 'path';
import * as fs from 'fs';

let outputChannel: vscode.OutputChannel;

export function activate(context: vscode.ExtensionContext) {
    outputChannel = vscode.window.createOutputChannel("Image Upload Extension");
    outputChannel.appendLine('Activating Notebook Image Drop Extension');

    // Register commands
    context.subscriptions.push(
        vscode.commands.registerCommand('notebook-image-drop.openPanel', (cell: vscode.NotebookCell, imageUri?: string) => {
            outputChannel.appendLine('Command executed: notebook-image-drop.openPanel');
            openImagePanel(cell, imageUri, context);
        })
    );

    context.subscriptions.push(
        vscode.commands.registerCommand('notebook-image-drop.resizeImage', (cell: vscode.NotebookCell) => {
            outputChannel.appendLine('Command executed: notebook-image-drop.resizeImage');
            resizeImageInCell(cell, context);
        })
    );

    // Register status bar items
    context.subscriptions.push(
        vscode.notebooks.registerNotebookCellStatusBarItemProvider('jupyter-notebook', {
            provideCellStatusBarItems: (cell: vscode.NotebookCell): vscode.NotebookCellStatusBarItem[] => {
                if (cell.kind === vscode.NotebookCellKind.Markup) {
                    const items: vscode.NotebookCellStatusBarItem[] = [];
                    const cellText = cell.document.getText();
                    const hasImage = /!\[.*\]\(.*\)|<img.*>/.test(cellText);
                    if (hasImage) {
                        const resizeItem = new vscode.NotebookCellStatusBarItem("Resize Image", vscode.NotebookCellStatusBarAlignment.Right);
                        resizeItem.command = { command: "notebook-image-drop.resizeImage", arguments: [cell], title: "Resize Image" };
                        items.push(resizeItem);
                    }
                    const uploadItem = new vscode.NotebookCellStatusBarItem("📷 Image", vscode.NotebookCellStatusBarAlignment.Right);
                    uploadItem.command = { command: "notebook-image-drop.openPanel", arguments: [cell], title: "Upload Image" };
                    items.push(uploadItem);
                    return items;
                }
                return [];
            }
        })
    );

    // Prevent the panel from opening automatically on activation
    vscode.window.registerWebviewPanelSerializer('imageUploadPanel', {
        async deserializeWebviewPanel(webviewPanel: vscode.WebviewPanel, state: any) {
            outputChannel.appendLine('Preventing panel restoration');
            webviewPanel.dispose();
        }
    });

    outputChannel.appendLine('Notebook Image Drop Extension is now active');
}

function openImagePanel(cell: vscode.NotebookCell, imageUri: string | undefined, context: vscode.ExtensionContext) {
    const panel = vscode.window.createWebviewPanel(
        'imageUploadPanel',
        imageUri ? 'Resize Image' : 'Upload and Adjust Image',
        vscode.ViewColumn.Beside,  // Creates it beside the notebook
        {
            enableScripts: true,
            localResourceRoots: [
                context.extensionUri,
                vscode.Uri.file(path.dirname(cell.notebook.uri.fsPath))
            ]
        }
    );

    // Dynamically set the size of the panel's content via CSS
    panel.webview.html = getWebviewContent(panel.webview, context.extensionUri, imageUri);
    panel.webview.onDidReceiveMessage(async (message) => {
        if (message.command === 'insertImage') {
            const { imageSrc, fileName, width, height, scaleType, centerImage, roundCorners } = message;
            
            if (!imageSrc) {
                vscode.window.showErrorMessage('No image data received');
                return;
            }
    
            // Call handleImageUpload without passing the cell
            await handleImageUpload(imageSrc, fileName, width, height, scaleType, centerImage, roundCorners);
        }
    });
}

function getWebviewContent(webview: vscode.Webview, extensionUri: vscode.Uri, imageUri?: string): string {
    const imageWebviewUri = imageUri ? webview.asWebviewUri(vscode.Uri.file(imageUri)) : '';

    return `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Upload and Adjust Image</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #011627;
            color: #d4d7dd;
            margin: 0;
            padding: 20px;
            box-sizing: border-box;
            height: 100vh;
            overflow-y: auto;
        }
        .container {
            display: flex;
            flex-direction: column;
            gap: 20px;
            max-width: 400px;
            margin: 0 auto;
        }
        #drop-zone {
            border: 3px dashed #82aaff;
            border-radius: 12px;
            padding: 40px 20px;
            text-align: center;
            cursor: pointer;
            transition: background-color 0.3s ease, border-color 0.3s ease;
        }
        #drop-zone.dragover {
            background-color: rgba(130, 170, 255, 0.2);
            border-color: #4fbcff;
        }
        #file-input {
            display: none;
        }
        .file-button {
            background-color: #4fbcff;
            color: #011627;
            padding: 10px 15px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease;
            text-align: center;
            display: inline-block;
            width: auto;
            margin: 0 auto;
        }
        .file-button:hover {
            background-color: #82aaff;
            transform: translateY(-2px);
        }
        #image-preview {
            width: 100%;
            height: 200px;
            background-color: #022c43;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
        #preview {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        /* Adjusted preview placeholder size */
        #preview-placeholder {
            font-size: 60px; /* 30% of 200px height */
            text-align: center;
        }
        .options {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        input[type="number"] {
            width: 80px;
            padding: 8px;
            border: 1px solid #4fbcff;
            border-radius: 6px;
            background-color: #022c43;
            color: #d4d7dd;
        }
        button {
            background-color: #4fbcff;
            color: #011627;
            padding: 12px 20px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease;
            width: 100%;
        }
        button:hover {
            background-color: #82aaff;
            transform: translateY(-2px);
        }
    </style>
</head>
<body>
    <div class="container">
        <label for="file-input" class="file-button">Choose File</label>
        <input type="file" id="file-input" accept="image/*">
        
        <div id="drop-zone">
            <p>Drag, Press [SHIFT], & Drop </p>
            <p>your image here</p>
        </div>
        
        <button id="insert-button-top">Insert Image</button>
        
        <div class="options">
            <h3>Adjust Image Size:</h3>
            <label>
                <input type="radio" name="scaleType" value="auto" checked> Auto-resize
            </label>
            <label>
                <input type="radio" name="scaleType" value="custom"> Custom size
            </label>
            <div id="custom-size" style="display: none;">
                <label>Width: <input type="number" id="width" min="1"></label>
                <label>Height: <input type="number" id="height" min="1"></label>
                <label>
                    <input type="checkbox" id="scale-proportionally" checked> Scale proportionally
                </label>
            </div>
            <label>
                <input type="checkbox" id="center-image" checked> Center Image
            </label>
            <label>
                <input type="checkbox" id="round-corners" checked> Round Corners
            </label>
        </div>

        <div id="image-preview">
            <span class="placeholder" id="preview-placeholder">📷</span>
            <img id="preview" src="" alt="Preview" style="display: none;">
        </div>

        <button id="insert-button-bottom">Insert Image</button>
    </div>

<script>
(function() {
    const vscode = acquireVsCodeApi();
    const dropZone = document.getElementById('drop-zone');
    const fileInput = document.getElementById('file-input');
    const insertButtonTop = document.getElementById('insert-button-top');
    const insertButtonBottom = document.getElementById('insert-button-bottom');
    const previewPlaceholder = document.getElementById('preview-placeholder');
    const previewImage = document.getElementById('preview');
    const customSizeDiv = document.getElementById('custom-size');
    const scaleTypeRadios = document.querySelectorAll('input[name="scaleType"]');
    const widthInput = document.getElementById('width');
    const heightInput = document.getElementById('height');
    const scaleProportionallyCheckbox = document.getElementById('scale-proportionally');

    let selectedFileData = '';
    let originalWidth = 0, originalHeight = 0;
    let aspectRatio = 1;
    let selectedFileName = '';

    fileInput.addEventListener('change', handleFileSelect);
    dropZone.addEventListener('dragover', handleDragOver);
    dropZone.addEventListener('dragleave', handleDragLeave);
    dropZone.addEventListener('drop', handleDrop);
    insertButtonTop.addEventListener('click', handleInsert);
    insertButtonBottom.addEventListener('click', handleInsert);

    scaleTypeRadios.forEach((radio) => {
        radio.addEventListener('change', function() {
            if (radio.value === 'custom' && radio.checked) {
                customSizeDiv.style.display = 'block';
                // Update width and height inputs if image dimensions are known
                if (originalWidth && originalHeight) {
                    widthInput.value = originalWidth;
                    heightInput.value = originalHeight;
                }
            } else {
                customSizeDiv.style.display = 'none';
            }
        });
    });

    // Event listeners for proportional scaling
    widthInput.addEventListener('input', function() {
        if (scaleProportionallyCheckbox.checked && originalWidth && originalHeight) {
            const width = parseFloat(widthInput.value);
            if (width && !isNaN(width)) {
                const newHeight = Math.round(width / aspectRatio);
                heightInput.value = newHeight;
            }
        }
    });

    heightInput.addEventListener('input', function() {
        if (scaleProportionallyCheckbox.checked && originalWidth && originalHeight) {
            const height = parseFloat(heightInput.value);
            if (height && !isNaN(height)) {
                const newWidth = Math.round(height * aspectRatio);
                widthInput.value = newWidth;
            }
        }
    });

    function handleFileSelect(event) {
        const file = event.target.files[0];
        if (file) {
            selectedFileName = file.name;
            displayPreview(file);
        }
    }

    function handleDragOver(event) {
        event.preventDefault();
        event.stopPropagation();
        dropZone.classList.add('dragover');
    }

    function handleDragLeave(event) {
        event.preventDefault();
        event.stopPropagation();
        dropZone.classList.remove('dragover');
    }

    function handleDrop(event) {
        event.preventDefault();
        event.stopPropagation();
        dropZone.classList.remove('dragover');

        const file = event.dataTransfer.files[0];
        if (file) {
            selectedFileName = file.name;
            displayPreview(file);
        }
    }

    function displayPreview(file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            selectedFileData = e.target.result;
            previewPlaceholder.style.display = 'none';
            previewImage.style.display = 'block';
            previewImage.src = selectedFileData;

            const img = new Image();
            img.onload = function() {
                originalWidth = img.width;
                originalHeight = img.height;
                aspectRatio = originalWidth / originalHeight;

                // Update width and height inputs if custom size is selected
                if (document.querySelector('input[name="scaleType"][value="custom"]').checked) {
                    widthInput.value = originalWidth;
                    heightInput.value = originalHeight;
                }
            };
            img.src = selectedFileData;
        };
        reader.readAsDataURL(file);
    }

    function handleInsert() {
        if (!selectedFileData) {
            vscode.postMessage({
                command: 'showError',
                message: 'Please select an image first.'
            });
            return;
        }

        const scaleType = document.querySelector('input[name="scaleType"]:checked').value;
        let width, height;

        if (scaleType === 'custom') {
            width = widthInput.value || 'auto';
            height = heightInput.value || 'auto';
        } else {
            // Set default width to 340px and scale height accordingly
            width = 340;
            height = (originalHeight / originalWidth) * 340;
        }

        const centerImage = document.getElementById('center-image').checked;
        const roundCorners = document.getElementById('round-corners').checked;
        
        vscode.postMessage({
            command: 'insertImage',
            imageSrc: selectedFileData,
            fileName: selectedFileName,
            width: width,
            height: height,
            scaleType: scaleType,
            centerImage: centerImage,
            roundCorners: roundCorners
        });
    }
})();
</script>

</body>
</html>`;
}

async function handleImageUpload(
    imageData: string,
    fileName: string,
    width: number | string,
    height: number | string,
    scaleType: string,
    centerImage: boolean,
    roundCorners: boolean
) {
    // Get the active cell at the time of insertion
    const activeEditor = vscode.window.activeNotebookEditor;
    if (!activeEditor) {
        vscode.window.showErrorMessage('No active notebook editor found');
        return;
    }

    const selection = activeEditor.selection;
    if (!selection) {
        vscode.window.showErrorMessage('No active cell selected');
        return;
    }

    // Get the active cell from the selection
    const activeCell = activeEditor.document.cellAt(selection.start);
    if (!activeCell) {
        vscode.window.showErrorMessage('Unable to retrieve the active cell');
        return;
    }

    const workspaceFolder = vscode.workspace.workspaceFolders?.[0];
    if (!workspaceFolder) {
        throw new Error('No workspace folder found');
    }

    const imagesFolder = path.join(workspaceFolder.uri.fsPath, 'images');
    if (!fs.existsSync(imagesFolder)) {
        fs.mkdirSync(imagesFolder);
    }

    // Generate a unique filename
    let fileIndex = 0;
    let newFilePath: string;
    const fileExt = path.extname(fileName);
    const fileNameWithoutExt = path.basename(fileName, fileExt);
    do {
        if (fileIndex === 0) {
            newFilePath = path.join(imagesFolder, fileName);
        } else {
            newFilePath = path.join(imagesFolder, `${fileNameWithoutExt}_${fileIndex}${fileExt}`);
        }
        fileIndex++;
    } while (fs.existsSync(newFilePath));

    const finalFileName = path.basename(newFilePath);

    const base64Data = imageData.replace(/^data:image\/\w+;base64,/, "");
    const buffer = Buffer.from(base64Data, 'base64');

    fs.writeFileSync(newFilePath, buffer);

    const relativePath = path.relative(workspaceFolder.uri.fsPath, newFilePath).replace(/\\/g, '/');

    // Build the style string based on options
    let styleAttributes = `width="${width}" height="${height}"`;

    let styleString = '';
    if (centerImage) {
        styleString += 'display: block; margin-left: auto; margin-right: auto;';
    }
    if (roundCorners) {
        styleString += ' border-radius: 8px;';
    }
    if (styleString) {
        styleAttributes += ` style="${styleString.trim()}"`;
    }

    // Always use the <img> tag with width and height
    const markdownImageSyntax = `<img src="${relativePath}" ${styleAttributes} />`;

    const edit = new vscode.WorkspaceEdit();
    const newContent = activeCell.document.getText() + '\n' + markdownImageSyntax;
    edit.replace(activeCell.document.uri, new vscode.Range(0, 0, activeCell.document.lineCount, 0), newContent);

    await vscode.workspace.applyEdit(edit);

    vscode.window.showInformationMessage(`Image uploaded and inserted as ${finalFileName} successfully!`);
}

// Resizing functions remain unchanged since resizing targets a specific image in a specific cell
async function handleImageResize(
    width: number,
    height: number,
    imageUri: string,
    centerImage: boolean,
    roundCorners: boolean,
    cell: vscode.NotebookCell
) {
    outputChannel.appendLine(`Handling image resize: ${imageUri}, ${width}x${height}, Center: ${centerImage}, Round: ${roundCorners}`);

    const workspaceFolder = vscode.workspace.workspaceFolders?.[0];
    if (!workspaceFolder) {
        throw new Error('No workspace folder found');
    }

    const imagePath = vscode.Uri.parse(imageUri).fsPath;

    // Check if the imagePath is a file
    if (!fs.existsSync(imagePath)) {
        throw new Error(`Image file does not exist: ${imagePath}`);
    }

    const stat = fs.statSync(imagePath);
    if (!stat.isFile()) {
        throw new Error(`Path is not a file: ${imagePath}`);
    }

    const relativePath = path.relative(workspaceFolder.uri.fsPath, imagePath).replace(/\\/g, '/');

    // Build the style string based on options
    let styleAttributes = `width="${width}" height="${height}"`;
    let styleString = '';
    if (centerImage) {
        styleString += 'display: block; margin-left: auto; margin-right: auto;';
    }
    if (roundCorners) {
        styleString += ' border-radius: 8px;';
    }
    if (styleString) {
        styleAttributes += ` style="${styleString.trim()}"`;
    }

    const markdownImageSyntax = `<img src="${relativePath}" ${styleAttributes} />`;

    outputChannel.appendLine(`Updating markdown with resized image: ${markdownImageSyntax}`);

    const cellText = cell.document.getText();
    const imageRegex = new RegExp(`(!\\[.*?\\]\\(${escapeRegExp(relativePath)}\\))|(<img[^>]*src=["']${escapeRegExp(relativePath)}["'][^>]*>)`, 'g');

    const newCellText = cellText.replace(imageRegex, markdownImageSyntax);

    const edit = new vscode.WorkspaceEdit();
    edit.replace(cell.document.uri, new vscode.Range(0, 0, cell.document.lineCount, 0), newCellText);

    await vscode.workspace.applyEdit(edit);

    vscode.window.showInformationMessage('Image resized successfully!');
}

function escapeRegExp(string: string) {
    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

function sanitizeFileName(fileName: string): string {
    return fileName.replace(/[^a-z0-9\.\-_]/gi, '_').toLowerCase();
}

async function resizeImageInCell(cell: vscode.NotebookCell, context: vscode.ExtensionContext) {
    const cellText = cell.document.getText();
    const imageRegex = /!\[.*?\]\((.*?)\)|<img[^>]*src=["'](.*?)["'][^>]*>/g;
    const images: string[] = [];
    let match;
    while ((match = imageRegex.exec(cellText)) !== null) {
        images.push(match[1] || match[2]);
    }

    if (images.length === 0) {
        vscode.window.showInformationMessage('No images found in this cell.');
        return;
    }

    let imageToResize = images[0];
    if (images.length > 1) {
        const selected = await vscode.window.showQuickPick(images, { placeHolder: 'Select an image to resize' });
        if (!selected) {
            return;
        }
        imageToResize = selected;
    }

    const workspaceFolder = vscode.workspace.workspaceFolders?.[0];
    if (!workspaceFolder) {
        vscode.window.showErrorMessage('No workspace folder found');
        return;
    }

    const imagePath = path.join(workspaceFolder.uri.fsPath, imageToResize);

    // Check if imagePath is a file
    if (!fs.existsSync(imagePath)) {
        vscode.window.showErrorMessage(`Image file does not exist: ${imageToResize}`);
        return;
    }

    const stat = fs.statSync(imagePath);
    if (!stat.isFile()) {
        vscode.window.showErrorMessage(`Path is not a file: ${imageToResize}`);
        return;
    }

    openImagePanel(cell, imagePath, context);
}

export function deactivate() {
    outputChannel.appendLine('Deactivating Notebook Image Drop Extension');
}