Рубрики
Без рубрики

Ограничить редактируемую область в Редакторе Монако

Это приложение показывает, как мы можем ограничить редактирование определенных мест в редакторе Монако. Чтобы увидеть реп … Помечено JavaScript, VSCode, MonacoEditor.

Это приложение показывает, как мы можем ограничить редактирование определенных мест в редакторе Монако. Чтобы увидеть репозиторий кликните сюда

Оглавление

  • Фактический код
  • Почему этот фрагмент нужен?
  • Как это достигнуто?
  • Итак, что это делает?
  • Плюс
  • Господин
  • Случаи применения
  • См. Часть 2
  • Может решить это

Фактический код

require.config({
    paths: {
        vs: "./monaco-editor/min/vs"
    }
})
require(["vs/editor/editor.main"], initEditor)
const startPhrase = `// Start of editable area`
const endPhrase = `// End of editable area`
const editableArea = ((startPhrase,endPhrase) => {
    return {
        includes : function(changes,model){
            const fullRange = model.getFullModelRange();
            let { range : startRange } = model.findMatches(startPhrase,fullRange).shift() || {};
            let { range : endRange } = model.findMatches(endPhrase,fullRange).pop() || {};
            const {
                startLineNumber,
                endLineNumber,
                startColumn,
                endColumn
            } = fullRange;
            const isEmpty = text => text === ''; // ? refers to backspace and delete
            const isEnter = text => /\n/.test(text);
            if(startRange && endRange){
                startRange = startRange.setStartPosition(startLineNumber,startColumn);
                endRange = endRange.setEndPosition(endLineNumber,endColumn);
                return changes
                        .every(({ text,range }) => {
                            const specialCases = () => {
                                /*
                                 ? This is done for my use case
                                 ? This allows enter at the end of the start Range and 
                                 ? This allows the enter and backspace on the start of the end Range
                                 ? This is an optional case
                                 */
                                return ( 
                                    ( isEnter(text) || range.startLineNumber > startRange.endLineNumber) &&
                                    ( isEnter(text) || isEmpty(text) || range.endLineNumber < endRange.startLineNumber)
                                );
                            }
                            return  !startRange.strictContainsRange(range) && 
                                    !endRange.strictContainsRange(range) && 
                                    specialCases();

                        })
            }
            return false;
        }
    }
})(startPhrase,endPhrase);
function initEditor(){
    const sampleJs = `
/**
 * This place cannot be edited
 */
// Start of editable area
function editable(){
    console.log('This part can be edited and all stuff can be done here')
}
// End of editable area
/**
 * This place cannot be edited
 */`
    const jsModel = monaco.editor.createModel(sampleJs,"javascript");
    const editorDiv = document.querySelector('.editorDiv');
    const jsContainer = monaco.editor.create(editorDiv);
    jsContainer.setModel(jsModel);
    jsModel.onDidChangeContentFast(({ changes,isUndoing }) => {
        if(!isUndoing){
            if(!editableArea.includes(changes,jsModel)){
                /*
                 * This Promise.resolve() sends the code to the micro task queue 
                 * And it gets called before the event queue ( micro task queue has more priority than event queue)
                 * Thus, Promise.resolve() will be better than a setTimeout(fn,0) here
                 * If we do it synchronously, it affects some of monaco editor's functions
                 */
                Promise.resolve().then(() => jsContainer.trigger('someIdString','undo'))
            }
        }
    })
}

Почему этот фрагмент нужен?

Редактор Monaco является одним из лучших онлайн-редакторов JavaScript, но недавно seteditableerange Функциональность была удалена из нее. Обратитесь Это Отказ

Эта фрагменты пытается установить ограничение в редактируемой области

Как это достигнуто?

  • Этот фрагмент нуждается в начальных и концевых фразах, к которым необходимо реализовать редактируемое ограничение
  • ondidchangeContentfastfast Крючки наблюдаются за изменениями, и если это изменение не происходит в разрешенной области отменить будет срабатывать, что отключает содержимое, которое набрано/вставленный
  • Обещание. Resolve () – используется для перемещения уничтожение Функция на очередь MicroTask, этим редактором Monaco разрешено делать его вещи, и как только это завершено, это уничтожение функция срабатывает
  • Площадь выше начальной фразы и конечной фразы будет ограничена

Примечание : Очередь MicroTask имеет более приоритетное внимание, чем очередь событий, тем самым обещают. Продвигается становится лучшим вариантом, чем SettimeOut (FN, 0) в этом сценарии.

Итак, что это делает?

Этим мы можем создать Иллюзия Вроде, ничто не разрешено ввести в зону запрещенной зоны, но то, что на самом деле происходит, это все напечатанные значения, получают отмену, как только он набирается в зоне ограниченной

Плюс

  • Преимущество использования этого фрагмента – Там не будет никакого задержки пользовательского интерфейса во время отмены Ранее, ранее при использовании Settimeout, расстегнутая операция будет видна пользователю
  • Предложения AutoColletions из ограниченной зоны будут доступны

Господин

  • Это требует запуска и окончательной фразы
  • Я не проверил этот код с большим количеством склеивания текстов, поэтому он может сломаться на этом этапе. Это будет работать нормально для печати

Случаи применения

  • Если вы пытаетесь разработать онлайн-платформу кодирования интервью, используя редактор Monaco, и вы хотите позволить кандидатам редактировать только определенные места, Это может быть использовано

См. Часть 2

Ограничить редактируемую зону в редакторе Монако – часть 2

Pranom Vignesh · 20 августа20 · 2 мин читать

Может решить это

Это может стать решением этого Выпуск GitHub

Оригинал: “https://dev.to/pranomvignesh/restrict-editable-area-in-monaco-editor-4hac”