document this 插件 mac_又一个折腰的 VSCode 插件

1

最近这两周周末都在折腾 VSCode 白板插件，其主要原理是将 Excalidraw^[1] 嵌入到 VSCode 的 WebView 中。如果所有功能正常，那么相比于在 Web 中使用，在 VSCode 中将会更方便。

截至目前，该插件的功能大概完成在 70% 左右。

基础的画图功能：

demo01.png

以及导出为 png/svg 格式：

demo02.mp4 ‍ ‍

2

将 Excalidraw 做为 VSCode 插件以后，一些原 Web 上如 command/ctrl + s 等事件，便不再需要。

如何在不改变源代码的前提下，拦截 keydown 事件中某一指定事件，这着实让笔者费了不少时间。

最后，在参考浏览器插件的实现原理后，笔者魔改了 addEventListener 事件：

const isDarwin = /Mac|iPod|iPhone|iPad/.test(window.navigator.platform);
const CTRL_OR_CMD = isDarwin ? 'metaKey' : 'ctrlKey';

function patchFn(originalFn) {
    return function (...args) {
        const [eventName, oldHandler] = args;
        if (eventName === 'keydown') {
            args[1] = e => {
                if (e.key === "s" && e[CTRL_OR_CMD]) {
                    return false;
                }
                return oldHandler(e);
            }
        }
        return originalFn.apply(this, args);
    }
}

document.addEventListener = patchFn(document.addEventListener);

当然，这种方法，不是万不得己，建议还是不要使用。

3

还有一些在 Web 中可以正常使用，但在插件中并没有实现的功能，比如共享协作。

Excalidraw 在使用 WebSocket 生成房间 ID 以及传输内容时，使用了浏览器自带的加密算法 API SubtleCrypto^[2]。而该 API 只能用于 HTTPS 协议，也就无法用于 VSCode WebView 中。在笔者尝试了 GitHub 上大部分的 polyfill 后，也仍然无济于事，stackoveflow^[3] 上也比较冷清。

因此，该功能只能遗憾止步于此。

关于该插件的更多细节，请参考 vscode-excalidraw^[4] 或点击阅读原文。

参考资料

[1]

Excalidraw: https://excalidraw.com/

[2]

SubtleCrypto: https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto

[3]

stackoveflow: https://stackoverflow.com/questions/62102767/how-to-use-window-crypto-subtle-in-vscode-webview

[4]

vscode-excalidraw: https://github.com/jkchao/vscode-excalidraw