@codingame/monaco-editor-wrapper 4.0.0 → 5.0.0

package/dist/keybindings/vim.d.ts

@@ -1,3 +1,3 @@
 import { IDisposable } from 'monaco-editor';
 import * as monaco from 'monaco-editor';
-export declare function initVimMode(editor: monaco.editor.IStandaloneCodeEditor, statusBarElement: Element): IDisposable;
+export declare function initVimMode(editor: monaco.editor.ICodeEditor, statusBarElement: Element): IDisposable;

package/dist/main.js

@@ -6,5 +6,5 @@ export { getMonacoLanguage, loadLanguage } from './languages/index.js';
 export { updateEditorKeybindingsMode, updateKeybindings } from './keybindings/index.js';
 import './style.js';
 export { setUseGlobalPicker } from './services.js';
-export { collapseCodeSections, hideCodeWithoutDecoration, lockCodeWithoutDecoration } from './tools.js';
+export { addPlaceholder, collapseCodeSections, hideCodeWithoutDecoration, lockCodeWithoutDecoration, mapClipboard, preventAlwaysConsumeTouchEvent, registerTextDecorationProvider, runOnAllEditors } from './tools.js';
 export { getUserConfiguration, onUserConfigurationChange, updateUserConfiguration } from '@codingame/monaco-vscode-configuration-service-override';

package/dist/services.js

@@ -19,12 +19,7 @@ import getLogServiceOverride from '@codingame/monaco-vscode-log-service-override
 import getWorkingCopyServiceOverride from '@codingame/monaco-vscode-working-copy-service-override';
 import { initialize as initialize$1, StandaloneServices, ILogService, LogLevel } from 'vscode/services';
 import * as monaco from 'monaco-editor';
-import { initFile } from './node_modules/@codingame/monaco-vscode-files-service-override/files.js';
-import 'vscode/vscode/vs/platform/files/common/files';
-import 'vscode/vscode/vs/platform/files/browser/htmlFileSystemProvider';
-import 'vscode/vscode/vs/platform/files/common/inMemoryFilesystemProvider';
-import 'vscode/vscode/vs/base/browser/indexedDB';
-import './node_modules/@codingame/monaco-vscode-files-service-override/vscode/src/vs/platform/files/browser/indexedDBFileSystemProvider.js';
+import { initFile } from '@codingame/monaco-vscode-files-service-override';
 import EditorOpenHandlerRegistry from './tools/EditorOpenHandlerRegistry.js';
 import 'vscode/localExtensionHost';
 

package/dist/tools.d.ts

@@ -1,7 +1,19 @@
 import * as monaco from 'monaco-editor';
-export declare function lockCodeWithoutDecoration(editor: monaco.editor.IStandaloneCodeEditor, decorations: string[], allowChangeFromSources?: string[], errorMessage?: string): () => void;
-export declare function hideCodeWithoutDecoration(editor: monaco.editor.IStandaloneCodeEditor, decorations: string[]): () => void;
+export declare function lockCodeWithoutDecoration(editor: monaco.editor.ICodeEditor, decorationFilter: (decoration: monaco.editor.IModelDecoration) => boolean, allowChangeFromSources?: string[], errorMessage?: string): monaco.IDisposable;
+export declare function hideCodeWithoutDecoration(editor: monaco.editor.ICodeEditor, decorationFilter: (decoration: monaco.editor.IModelDecoration) => boolean): monaco.IDisposable;
 /**
  * Collapse everything between startToken and endToken
  */
-export declare function collapseCodeSections(editor: monaco.editor.IStandaloneCodeEditor, startToken: string, endToken: string, isRegex?: boolean): Promise<void>;
+export declare function collapseCodeSections(editor: monaco.editor.ICodeEditor, startToken: string, endToken: string, isRegex?: boolean): Promise<void>;
+interface IDecorationProvider {
+    provideDecorations(model: monaco.editor.ITextModel): monaco.editor.IModelDeltaDecoration[];
+}
+export declare function registerTextDecorationProvider(provider: IDecorationProvider): monaco.IDisposable;
+export declare function runOnAllEditors(cb: (editor: monaco.editor.ICodeEditor) => monaco.IDisposable): monaco.IDisposable;
+export declare function preventAlwaysConsumeTouchEvent(editor: monaco.editor.ICodeEditor): void;
+export declare function addPlaceholder(editor: monaco.editor.ICodeEditor, placeholder: string): monaco.IDisposable;
+export declare function mapClipboard(editor: monaco.editor.ICodeEditor, { toClipboard, fromClipboard }: {
+    toClipboard: (data: string) => string;
+    fromClipboard: (data: string) => string;
+}): monaco.IDisposable;
+export {};

package/dist/tools.js

@@ -1,9 +1,11 @@
 import * as monaco from 'monaco-editor';
+import { DisposableStore, KeybindingsRegistry, ContextKeyExpr } from 'vscode/monaco';
 
 function isPasteAction(handlerId, payload) {
     return handlerId === 'paste';
 }
-function lockCodeWithoutDecoration(editor, decorations, allowChangeFromSources = [], errorMessage) {
+function lockCodeWithoutDecoration(editor, decorationFilter, allowChangeFromSources = [], errorMessage) {
+    const disposableStore = new DisposableStore();
     function displayLockedCodeError(position) {
         if (errorMessage == null) {
             return;
@@ -14,8 +16,14 @@ function lockCodeWithoutDecoration(editor, decorations, allowChangeFromSources =
     function canEditRange(range) {
         const model = editor.getModel();
         if (model != null) {
-            const editableRanges = decorations.map(decoration => model.getDecorationRange(decoration));
-            return editableRanges.some(editableRange => editableRange?.containsRange(range) ?? false);
+            const editableRanges = model
+                .getAllDecorations()
+                .filter(decorationFilter)
+                .map((decoration) => decoration.range);
+            if (editableRanges.length === 0) {
+                return true;
+            }
+            return editableRanges.some((editableRange) => editableRange.containsRange(range));
         }
         return false;
     }
@@ -34,7 +42,12 @@ function lockCodeWithoutDecoration(editor, decorations, allowChangeFromSources =
     const originalTrigger = editor.trigger;
     editor.trigger = function (source, handlerId, payload) {
         // Try to transform whole file pasting into a paste in the editable area only
-        const lastEditableRange = decorations.length > 0 ? editor.getModel()?.getDecorationRange(decorations[decorations.length - 1]) : null;
+        const editableRanges = editor
+            .getModel()
+            .getAllDecorations()
+            .filter(decorationFilter)
+            .map((decoration) => decoration.range);
+        const lastEditableRange = editableRanges.length > 0 ? editableRanges[editableRanges.length - 1] : undefined;
         if (isPasteAction(handlerId) && lastEditableRange != null) {
             const selections = editor.getSelections();
             const model = editor.getModel();
@@ -47,7 +60,8 @@ function lockCodeWithoutDecoration(editor, decorations, allowChangeFromSources =
                     const before = model.getOffsetAt(lastEditableRange.getStartPosition());
                     const after = currentEditorValue.length - model.getOffsetAt(lastEditableRange.getEndPosition());
                     if (currentEditorValue.slice(0, before) === payload.text.slice(0, before) &&
-                        currentEditorValue.slice(currentEditorValue.length - after) === payload.text.slice(payload.text.length - after)) {
+                        currentEditorValue.slice(currentEditorValue.length - after) ===
+                            payload.text.slice(payload.text.length - after)) {
                         editor.setSelection(lastEditableRange);
                         const newPayload = {
                             ...payload,
@@ -60,7 +74,7 @@ function lockCodeWithoutDecoration(editor, decorations, allowChangeFromSources =
         }
         if (['type', 'paste', 'cut'].includes(handlerId)) {
             const selections = editor.getSelections();
-            if (selections != null && selections.some(range => !canEditRange(range))) {
+            if (selections != null && selections.some((range) => !canEditRange(range))) {
                 displayLockedCodeError(editor.getPosition());
                 return;
             }
@@ -90,8 +104,7 @@ function lockCodeWithoutDecoration(editor, decorations, allowChangeFromSources =
             if (currentEditSource != null && allowChangeFromSources.includes(currentEditSource)) {
                 return originalApplyEdit.call(model, operations, computeUndoEdits);
             }
-            const filteredOperations = operations
-                .filter(operation => canEditRange(operation.range));
+            const filteredOperations = operations.filter((operation) => canEditRange(operation.range));
             if (filteredOperations.length === 0 && operations.length > 0) {
                 const firstRange = operations[0].range;
                 displayLockedCodeError(new monaco.Position(firstRange.startLineNumber, firstRange.startColumn));
@@ -102,10 +115,10 @@ function lockCodeWithoutDecoration(editor, decorations, allowChangeFromSources =
             model.applyEdits = originalApplyEdit;
         };
     }
-    const editorChangeModelDisposable = editor.onDidChangeModel(lockModel);
+    disposableStore.add(editor.onDidChangeModel(lockModel));
     lockModel();
     // Handle selection of the last line of an editable range
-    const selectionDisposable = editor.onDidChangeCursorSelection(e => {
+    disposableStore.add(editor.onDidChangeCursorSelection((e) => {
         if (canEditRange(e.selection)) {
             return;
         }
@@ -117,23 +130,31 @@ function lockCodeWithoutDecoration(editor, decorations, allowChangeFromSources =
         if (canEditRange(shiftedRange)) {
             editor.setSelection(shiftedRange);
         }
+    }));
+    disposableStore.add({
+        dispose() {
+            restoreModelApplyEdit();
+            editor.executeEdits = originalExecuteEdit;
+            editor.executeCommands = originalExecuteCommands;
+            editor.trigger = originalTrigger;
+        }
     });
-    return () => {
-        selectionDisposable.dispose();
-        restoreModelApplyEdit();
-        editorChangeModelDisposable.dispose();
-        editor.executeEdits = originalExecuteEdit;
-        editor.executeCommands = originalExecuteCommands;
-        editor.trigger = originalTrigger;
-    };
+    return disposableStore;
 }
-function hideCodeWithoutDecoration(editor, decorations) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let otherHiddenAreas = editor._getViewModel()._lines.getHiddenAreas();
+function hideCodeWithoutDecoration(editor, decorationFilter) {
+    let otherHiddenAreas = editor._getViewModel()?.getHiddenAreas() ?? [];
     function getHiddenAreas() {
         const model = editor.getModel();
+        if (model == null) {
+            return [];
+        }
+        const decorations = model.getAllDecorations()
+            .filter(decorationFilter);
+        if (decorations.length === 0) {
+            return otherHiddenAreas;
+        }
         const ranges = decorations
-            .map(decoration => model.getDecorationRange(decoration))
+            .map(decoration => decoration.range)
             .sort((a, b) => a.startLineNumber - b.startLineNumber)
             // merge ranges
             .reduce((acc, range) => {
@@ -180,11 +201,22 @@ function hideCodeWithoutDecoration(editor, decorations) {
         otherHiddenAreas = ranges;
         updateHiddenAreas();
     };
+    const disposableStore = new DisposableStore();
+    disposableStore.add(editor.onDidChangeModel(() => {
+        otherHiddenAreas = editor._getViewModel()?.getHiddenAreas() ?? [];
+        updateHiddenAreas();
+    }));
+    disposableStore.add(editor.onDidChangeModelDecorations(() => {
+        updateHiddenAreas();
+    }));
     updateHiddenAreas();
-    return () => {
-        editor.setHiddenAreas = originalSetHiddenAreas;
-        editor.setHiddenAreas(otherHiddenAreas);
-    };
+    disposableStore.add({
+        dispose() {
+            editor.setHiddenAreas = originalSetHiddenAreas;
+            editor.setHiddenAreas(otherHiddenAreas);
+        }
+    });
+    return disposableStore;
 }
 /**
  * Collapse everything between startToken and endToken
@@ -231,5 +263,232 @@ async function collapseCodeSections(editor, startToken, endToken, isRegex = fals
         }
     }
 }
+function registerTextDecorationProvider(provider) {
+    const disposableStore = new DisposableStore();
+    const watchEditor = (editor) => {
+        const disposableStore = new DisposableStore();
+        const decorationCollection = editor.createDecorationsCollection();
+        const checkEditor = () => {
+            const model = editor.getModel();
+            if (model != null) {
+                decorationCollection.set(provider.provideDecorations(model));
+            }
+            else {
+                decorationCollection.clear();
+            }
+        };
+        disposableStore.add(editor.onDidChangeModel(checkEditor));
+        disposableStore.add(editor.onDidChangeModelContent(checkEditor));
+        disposableStore.add({
+            dispose() {
+                decorationCollection.clear();
+            }
+        });
+        checkEditor();
+        return disposableStore;
+    };
+    monaco.editor.getEditors().forEach(editor => disposableStore.add(watchEditor(editor)));
+    disposableStore.add(monaco.editor.onDidCreateEditor(editor => disposableStore.add(watchEditor(editor))));
+    return disposableStore;
+}
+function runOnAllEditors(cb) {
+    const disposableStore = new DisposableStore();
+    const handleEditor = (editor) => {
+        const disposable = cb(editor);
+        disposableStore.add(disposable);
+        const disposeEventDisposable = editor.onDidDispose(() => {
+            disposableStore.delete(disposable);
+            disposableStore.delete(disposeEventDisposable);
+        });
+        disposableStore.add(disposeEventDisposable);
+    };
+    monaco.editor.getEditors().forEach(handleEditor);
+    disposableStore.add(monaco.editor.onDidCreateEditor(handleEditor));
+    return disposableStore;
+}
+function preventAlwaysConsumeTouchEvent(editor) {
+    let firstX = 0;
+    let firstY = 0;
+    let atTop = false;
+    let atBottom = false;
+    let atLeft = false;
+    let atRight = false;
+    let useBrowserBehavior = null;
+    editor.onDidChangeModel(() => {
+        const domNode = editor.getDomNode();
+        if (domNode == null) {
+            return;
+        }
+        domNode.addEventListener('touchstart', (e) => {
+            const firstTouch = e.targetTouches.item(0);
+            if (firstTouch == null) {
+                return;
+            }
+            // Prevent monaco-editor from trying to call preventDefault on the touchstart event
+            // so we'll be able to use the default behavior of the touchmove event
+            e.preventDefault = () => { };
+            firstX = firstTouch.clientX;
+            firstY = firstTouch.clientY;
+            const layoutInfo = editor.getLayoutInfo();
+            atTop = editor.getScrollTop() <= 0;
+            atBottom = editor.getScrollTop() >= editor.getContentHeight() - layoutInfo.height;
+            atLeft = editor.getScrollLeft() <= 0;
+            atRight = editor.getScrollLeft() >= editor.getContentWidth() - layoutInfo.width;
+            useBrowserBehavior = null;
+        });
+        domNode.addEventListener('touchmove', (e) => {
+            const firstTouch = e.changedTouches.item(0);
+            if (firstTouch == null) {
+                return;
+            }
+            if (useBrowserBehavior == null) {
+                const dx = firstTouch.clientX - firstX;
+                const dy = firstTouch.clientY - firstY;
+                if (Math.abs(dx) > Math.abs(dy)) {
+                    // It's an horizontal scroll
+                    useBrowserBehavior = (dx < 0 && atRight) || (dx > 0 && atLeft);
+                }
+                else {
+                    // It's a vertical scroll
+                    useBrowserBehavior = (dy < 0 && atBottom) || (dy > 0 && atTop);
+                }
+            }
+            if (useBrowserBehavior) {
+                // Stop the event before monaco tries to preventDefault on it
+                e.stopPropagation();
+            }
+        });
+        domNode.addEventListener('touchend', (e) => {
+            if (useBrowserBehavior ?? false) {
+                // Prevent monaco from trying to open its context menu
+                // It thinks it's a long press because it didn't receive the move events
+                e.stopPropagation();
+            }
+        });
+    });
+}
+// https://github.com/microsoft/monaco-editor/issues/568
+class PlaceholderContentWidget {
+    constructor(editor, placeholder) {
+        this.editor = editor;
+        this.placeholder = placeholder;
+    }
+    getId() {
+        return PlaceholderContentWidget.ID;
+    }
+    getDomNode() {
+        if (this.domNode == null) {
+            this.domNode = document.createElement('pre');
+            this.domNode.style.width = 'max-content';
+            this.domNode.textContent = this.placeholder;
+            this.domNode.style.pointerEvents = 'none';
+            this.domNode.style.color = '#aaa';
+            this.domNode.style.margin = '0';
+            this.editor.applyFontInfo(this.domNode);
+        }
+        return this.domNode;
+    }
+    getPosition() {
+        return {
+            position: { lineNumber: 1, column: 1 },
+            preference: [monaco.editor.ContentWidgetPositionPreference.EXACT]
+        };
+    }
+}
+PlaceholderContentWidget.ID = 'editor.widget.placeholderHint';
+function addPlaceholder(editor, placeholder) {
+    const widget = new PlaceholderContentWidget(editor, placeholder);
+    function onDidChangeModelContent() {
+        if (editor.getValue() === '') {
+            editor.addContentWidget(widget);
+        }
+        else {
+            editor.removeContentWidget(widget);
+        }
+    }
+    onDidChangeModelContent();
+    const changeDisposable = editor.onDidChangeModelContent(() => onDidChangeModelContent());
+    return {
+        dispose() {
+            changeDisposable.dispose();
+            editor.removeContentWidget(widget);
+        }
+    };
+}
+function mapClipboard(editor, { toClipboard, fromClipboard }) {
+    const disposableStore = new DisposableStore();
+    let copiedText = '';
+    disposableStore.add(KeybindingsRegistry.registerCommandAndKeybindingRule({
+        id: 'customCopy',
+        weight: 1000,
+        handler: () => {
+            copiedText = editor.getModel().getValueInRange(editor.getSelection());
+            document.execCommand('copy');
+        },
+        when: ContextKeyExpr.equals('editorId', editor.getId()),
+        primary: monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyC
+    }));
+    disposableStore.add(KeybindingsRegistry.registerCommandAndKeybindingRule({
+        id: 'customCut',
+        weight: 1000,
+        handler: () => {
+            copiedText = editor.getModel().getValueInRange(editor.getSelection());
+            document.execCommand('copy');
+        },
+        when: ContextKeyExpr.equals('editorId', editor.getId()),
+        primary: monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyX
+    }));
+    const originalTrigger = editor.trigger;
+    editor.trigger = function (source, handlerId, payload) {
+        if (handlerId === 'editor.action.clipboardCopyAction') {
+            copiedText = editor.getModel().getValueInRange(editor.getSelection());
+        }
+        else if (handlerId === 'editor.action.clipboardCutAction') {
+            copiedText = editor.getModel().getValueInRange(editor.getSelection());
+        }
+        else if (handlerId === 'paste') {
+            const newText = fromClipboard(payload.text);
+            if (newText !== payload.text) {
+                payload = {
+                    ...payload,
+                    text: newText
+                };
+            }
+        }
+        originalTrigger.call(this, source, handlerId, payload);
+    };
+    disposableStore.add({
+        dispose() {
+            editor.trigger = originalTrigger;
+        }
+    });
+    function mapCopy(event) {
+        const clipdata = event.clipboardData ?? window.clipboardData;
+        let content = clipdata.getData('Text');
+        if (content.length === 0) {
+            content = copiedText;
+        }
+        const transformed = toClipboard(content);
+        if (transformed !== content) {
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            if (clipdata.types != null) {
+                clipdata.types.forEach(type => clipdata.setData(type, toClipboard(content)));
+            }
+            else {
+                clipdata.setData('text/plain', toClipboard(content));
+            }
+        }
+    }
+    const editorDomNode = editor.getContainerDomNode();
+    editorDomNode.addEventListener('copy', mapCopy);
+    editorDomNode.addEventListener('cut', mapCopy);
+    disposableStore.add({
+        dispose() {
+            editorDomNode.removeEventListener('copy', mapCopy);
+            editorDomNode.removeEventListener('cut', mapCopy);
+        }
+    });
+    return disposableStore;
+}
 
-export { collapseCodeSections, hideCodeWithoutDecoration, lockCodeWithoutDecoration };
+export { addPlaceholder, collapseCodeSections, hideCodeWithoutDecoration, lockCodeWithoutDecoration, mapClipboard, preventAlwaysConsumeTouchEvent, registerTextDecorationProvider, runOnAllEditors };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codingame/monaco-editor-wrapper",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "private": false,
   "description": "Enhanced Monaco editor with TextMate grammars and more",
   "scripts": {
@@ -82,6 +82,7 @@
     "@codingame/monaco-vscode-diff-default-extension": "~2.0.0",
     "@codingame/monaco-vscode-editor-service-override": "~2.0.0",
     "@codingame/monaco-vscode-extensions-service-override": "~2.0.0",
+    "@codingame/monaco-vscode-files-service-override": "~2.0.2",
     "@codingame/monaco-vscode-fsharp-default-extension": "~2.0.0",
     "@codingame/monaco-vscode-go-default-extension": "~2.0.0",
     "@codingame/monaco-vscode-groovy-default-extension": "~2.0.0",