Редактор Monaco: используйте собственное (системное) контекстное меню

Есть ли способ заставить Монако использовать системное меню для контекстного меню?

Я встроил Монако в WKWebView на macOS. Контекстное меню (вызываемое правой кнопкой мыши) отображается внутри веб-представления, а не как собственное системное меню. (Но VSCode действительно показывает собственное контекстное меню.)

Как я могу заставить это работать?


Это то, что я хочу: (Что я вижу в VS Code)

введите описание изображения здесь

Но я получаю следующее: (То, что я получаю во встроенном WKWebView)

введите описание изображения здесь


редактировать 2:

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

введите описание изображения здесь


person nielsbot    schedule 26.03.2018    source источник
comment
Что именно вы имеете в виду под системным контекстным меню? Вы имеете в виду, что хотите полностью отключить контекстное меню monaco (включая его параметры) или хотите, чтобы оно отображалось по-другому? Возможно, помогут скриншоты (текущие и желаемые).   -  person MSeifert    schedule 27.03.2018
comment
Извините, я имею в виду меню, которое появляется, когда я щелкаю правой кнопкой мыши по тексту («Перейти к определению ...», «Форматировать текст») и т. Д. В VS Code меню отображается как собственное меню Mac. В Монако я получаю «меню», отображаемое внутри веб-представления.   -  person nielsbot    schedule 28.03.2018
comment
да. Снимок экрана - отличная идея.   -  person nielsbot    schedule 28.03.2018
comment
Вы забыли включить в вопрос снимок экрана с фактическим и желаемым? Похоже, вам понравилась идея.   -  person MSeifert    schedule 30.03.2018
comment
да. Я их прикрепил.   -  person nielsbot    schedule 30.03.2018
comment
Для ясности: вы просто хотите, чтобы оно выглядело как собственное контекстное меню, или вы хотите, чтобы оно содержало команды собственного контекстного меню?   -  person MSeifert    schedule 02.04.2018
comment
@MSeifert Я хочу, чтобы он отображался с помощью системного контекстного меню ... Я не пытаюсь изменить содержимое. Спасибо.   -  person nielsbot    schedule 02.04.2018
comment
@TarunLalwani Там нет ничего об изменении рендеринга контекстного меню, только как его отключить ... Это не помогает.   -  person nielsbot    schedule 02.04.2018
comment
Меню, которое вы видите в vscode, не является родным, его внешний вид и стиль CSS являются нативными. Таким образом, вы можете получить естественный вид и почувствовать, только я верю   -  person Tarun Lalwani    schedule 03.04.2018
comment
Нет, это вообще-то родное меню. Я обновил свой вопрос.   -  person nielsbot    schedule 03.04.2018
comment
@nielsbot, так он работает и в Chrome, и в электронном браузере. Проверка того, что делает VScode, чтобы заставить его работать   -  person Tarun Lalwani    schedule 08.04.2018
comment
Источник @TarunLalwani VSCode нигде недоступен, верно?   -  person nielsbot    schedule 09.04.2018


Ответы (1)


Итак, покопавшись во всем этом. Этот ответ даст вам указание на то, как этого добиться. Если вы посмотрите на ContextMenu, отображаемый MonaEditor в любом браузере, он всегда обрезан областью просмотра.

Электронный браузер

Браузер Chrome

Теперь это потому, что контекстное меню основано на HTML, который ограничен пределами области просмотра.

Так почему же VSCode может отображать меню вне ViewPort?

Контекстное меню VSCode

Это потому, что у Electron есть возможность отображать собственные меню. VSCode отключает собственное меню Монако и создает собственное меню при щелчке правой кнопкой мыши. Вы можете увидеть ниже модуль npm, который показывает, как

https://github.com/mixmaxhq/electron-editor-context-menu

Теперь, когда вы используете WKWebView, вы не можете использовать электронные функции, поэтому это означает, что вам нужно будет встроить обработчик контекста в свой код Swift. Ниже приведены некоторые темы SO, которые укажут вам правильное направление.

Как контекст изменить или переопределить меню в WKWebView на Mac?

Поймать событие Javascript в iOS WKWebview с помощью Swift

Я создал приложение Какао с приведенным ниже кодом, чтобы просто убедиться, что подход будет работать.

//
//  ViewController.swift
//  WebViewTEst
//
//  Created by Tarun Lalwani on 4/8/18.
//  Copyright © 2018 Tarun Lalwani. All rights reserved.
//

import Cocoa
import WebKit

class ViewController: NSViewController {

    @IBOutlet weak var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()


        let url = "https://microsoft.github.io/monaco-editor/"

        let prefs = self.webView.configuration.preferences
        prefs.javaScriptEnabled = true
        prefs.plugInsEnabled = true
        self.webView.customUserAgent = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/604.3.5 (KHTML, like Gecko) Version/11.0.1 Safari/604.3.5"
        self.webView.configuration.preferences.setValue(true, forKey: "developerExtrasEnabled")
        self.webView.load(URLRequest(url: URL(string: url)!))


        // Do any additional setup after loading the view.
    }

    override var representedObject: Any? {
        didSet {
        // Update the view, if already loaded.
        }
    }


}

А затем отключил контекстное меню по умолчанию monaco, запустив editor.updateOptions({contextmenu: false}), и после этого контекстное меню, показанное в редакторе, стало родным. Теперь это то, что вам нужно настроить из собственного кода.

Нативное контекстное меню

person Tarun Lalwani    schedule 08.04.2018
comment
Хорошо, это выглядит многообещающе. Спасибо. То есть вы в основном говорите, что я должен создать собственное контекстное меню для того, что происходит при нажатии? - person nielsbot; 09.04.2018
comment
да. И vscode - это редактор с открытым исходным кодом. Доступно на github.com/Microsoft/vscode - person Tarun Lalwani; 09.04.2018
comment
Срок моей награды истек, но я назначу другую. - person nielsbot; 10.04.2018