[v3] Better default context menu. Started dev guide.

v3/DEVELOPMENT.md

@@ -0,0 +1,48 @@
+# Development
+
+**This guide is a work in progress.**
+
+Thanks for wanting to help out with development of Wails! This guide will help you get started.
+
+## Getting Started
+
+- Git clone this repository. Checkout the `v3-alpha` branch.
+- Install the CLI: `cd v3/cmd/wails && go install`
+
+- Optional: If you are wanting to use the build system to build frontend code, you will need to install [npm](https://nodejs.org/en/download).
+
+## Building
+
+For simple programs, you can use the standard `go build` command. It's also possible to use `go run`.
+
+Wails also comes with a build system that can be used to build more complex projects. It utilises the awesome [Task](https://taskfile.dev) build system.
+For more information, check out the task homepage or run `wails task --help`. 
+
+## Project layout
+
+The project has the following structure:
+    
+    ```
+    v3
+    ├── cmd/wails                  // CLI
+    ├── examples                   // Examples of Wails apps 
+    ├── internal                   // Internal packages
+    ├── pkg
+    |   ├── application            // The core Wails library
+    |   └── events                 // The event definitions
+    |   └── mac                    // macOS specific code used by plugins
+    |   └── w32                    // Windows specific code
+    ├── plugins                    // Supported plugins
+    ├── tasks                      // General tasks
+    └── Taskfile.yaml              // Development tasks configuration
+    ```
+
+## Development
+
+### Updating the runtime
+
+When the runtime is updated, the following steps need to be taken:
+
+```shell
+wails task runtime:build
+```

v3/examples/contextmenus/assets/index.html

@@ -27,7 +27,11 @@
         <input type="text" placeholder="context menu shown here"/>
     </label>
     <br/>
+    <div>
     <p style="user-select: text">Context menu shown here only if you select text</p>
+    <p style="user-select: text">Context menu shown here only if you select text</p>
+    <p style="user-select: text">Context menu shown here only if you select text</p>
+    </div>
     <br/>
     <label>
         <textarea placeholder="context menu shown here"></textarea>

v3/internal/runtime/desktop/contextmenu.js

@@ -36,9 +36,9 @@ Anything nested under a tag with --default-contextmenu: hide will not show the c
 function processDefaultContextMenu(event) {
     // Process default context menu
     let element = event.target;
-    let defaultContextMenuAction = window.getComputedStyle(element).getPropertyValue("--default-contextmenu");
-    defaultContextMenuAction = defaultContextMenuAction ? defaultContextMenuAction.trim() : "";
-    switch(defaultContextMenuAction) {
+    const computedStyle = window.getComputedStyle(element);
+    let defaultContextMenuAction = computedStyle.getPropertyValue("--default-contextmenu").trim();
+    switch (defaultContextMenuAction) {
         case "show":
             return;
         case "hide":
@@ -46,21 +46,29 @@ function processDefaultContextMenu(event) {
             return;
         default:
             // Check if contentEditable is true
-            let contentEditable = element.getAttribute("contentEditable");
-            if (contentEditable && contentEditable.toLowerCase() === "true") {
+            if (element.isContentEditable) {
                 return;
             }
 
             // Check if text has been selected
             let selection = window.getSelection();
             if (selection && selection.toString().length > 0) {
-                return;
+                for (let i = 0; i < selection.rangeCount; i++) {
+                    let range = selection.getRangeAt(i);
+                    let rects = range.getClientRects();
+                    for (let j = 0; j < rects.length; j++) {
+                        let rect = rects[j];
+                        if (document.elementFromPoint(rect.left, rect.top) === element) {
+                            return;
+                        }
+                    }
+                }
             }
-
             // Check if tagname is input or textarea
-            let tagName = element.tagName.toLowerCase();
-            if (tagName === "input" || tagName === "textarea") {
-                return;
+            if (element.tagName === "INPUT" || element.tagName === "TEXTAREA") {
+                if (!element.readOnly && !element.disabled) {
+                    return;
+                }
             }
 
             // hide default context menu