Попытка сделать и на экране Emoji клавиатура против расширения кода ⇐ Javascript

[Anonymous]

Я пытаюсь создать расширение, которое показывает клавиатуру на экране эмодзи в веб -представлении, поэтому, когда нажимается смай Работайте снова, и иногда это даже не добавляет.
Вот файл endension.json.const vscode = require("vscode");

function activate(context) {
// Create an output channel for logging emoji clicks
const outputChannel = vscode.window.createOutputChannel("Emoji Keyboard");

let disposable = vscode.commands.registerCommand("on-screen-emoji-keyboard.show", () => {
const panel = vscode.window.createWebviewPanel(
"emojiKeyboard", // Webview identifier
"Emoji Keyboard", // Panel title
vscode.ViewColumn.Active, // Open in the active editor's column
{ enableScripts: true } // Enable scripts for the webview
);

// Set HTML content for the emoji keyboard in the webview
panel.webview.html = getWebviewContent();

// Handle messages from the webview (emoji click)
panel.webview.onDidReceiveMessage(
(message) => {
if (message.emoji) {
// Insert the emoji at the cursor position
const editor = vscode.window.activeTextEditor;
if (editor) {
const selection = editor.selection;
const position = selection.active;

// Insert the emoji at the cursor position
editor.edit((editBuilder) => {
editBuilder.insert(position, message.emoji);
}).then(() => {
// Move the cursor to the next position after the inserted emoji
const newPosition = position.translate(0, message.emoji.length);
editor.selection = new vscode.Selection(newPosition, newPosition);
editor.revealRange(new vscode.Range(newPosition, newPosition));

// Log the emoji clicked in the Output panel
outputChannel.appendLine(`Emoji clicked: ${message.emoji}`);
outputChannel.show(); // Show the output panel
});
}
}
},
undefined,
context.subscriptions
);
});

context.subscriptions.push(disposable);
}

function getWebviewContent() {
return `




Emoji Keyboard

body { font-family: sans-serif; text-align: center; }
.keyboard { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 20px; }
.emoji { font-size: 24px; padding: 10px; cursor: pointer; border: 1px solid black; border-radius: 5px; }
.emoji:hover { background: lightgray; }



Click an Emoji to Insert












// When an emoji is clicked, send it to the extension
document.querySelectorAll(".emoji").forEach(button => {
button.addEventListener("click", (event) => {
event.preventDefault(); // Prevent the focus shift to the webview
const vscode = acquireVsCodeApi();
vscode.postMessage({ emoji: button.textContent });
});
});


`;
}

function deactivate() {}

module.exports = { activate, deactivate };


Подробнее здесь: https://stackoverflow.com/questions/794 ... -extension