Disable the TinyMCE context menu by default

Author: zerolab

CHANGELOG.md

@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [unreleased]
 
+## [0.2.2] - 2025-03-19
+
+### Changed
+
+- The TinyMCE contextual menu is disabled by default. ([#8](https://github.com/torchbox/wagtail-tinytableblock/pull/8))
+  Pass `enable_context_menu=True` to your block definition to enable the TinyMCE context menu.
+
 ## [0.2.2] - 2025-03-18
 
 ### Changed
@@ -36,7 +43,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 Initial release
 
 
-[unreleased]: https://github.com/torchbox/wagtail-tinytableblock/compare/v0.2.2...HEAD
+[unreleased]: https://github.com/torchbox/wagtail-tinytableblock/compare/v0.2.3...HEAD
+[0.2.3]: https://github.com/torchbox/wagtail-tinytableblock/compare/v0.2.2...v0.2.3
 [0.2.2]: https://github.com/torchbox/wagtail-tinytableblock/compare/v0.2.1...v0.2.2
 [0.2.1]: https://github.com/torchbox/wagtail-tinytableblock/compare/v0.2...v0.2.1
 [0.2]: https://github.com/torchbox/wagtail-tinytableblock/compare/v0.1...v0.2

README.md

@@ -73,6 +73,17 @@ class ContentBlocks(StreamBlock):
     table_block = TinyTableBlock(allow_links=True)
 ```
 
+By default, we disable the TinyMCE contextual menu to allow the browser native one. If you want to use TinyMCE one,
+pass `enable_context_menu=True`:
+
+```python
+from wagtail.blocks import StreamBlock
+from wagtail_tinytableblock.blocks import TinyTableBlock
+
+class ContentBlocks(StreamBlock):
+    table_block = TinyTableBlock(enable_context_menu=True)
+```
+
 
 ## Data representation
 

src/wagtail_tinytableblock/__version__.py

@@ -1 +1 @@
-__version__ = "0.2.2"
+__version__ = "0.2.3"

src/wagtail_tinytableblock/blocks.py

@@ -59,6 +59,7 @@ def js_args(self, block) -> list:
         the_args = super().js_args(block)
 
         the_args[2]["enableLinks"] = block.meta.allow_links
+        the_args[2]["enableContextMenu"] = block.meta.enable_context_menu
 
         return the_args
 
@@ -84,7 +85,9 @@ def __init__(self, *, local_blocks=None, search_index=True, **kwargs):
         super().__init__(local_blocks=local_blocks, search_index=search_index, **kwargs)
         # manually define the data block so we can pass on configuration kwargs
         block = TinyTableFieldBlock(
-            required=False, allow_links=kwargs.get("allow_links", False)
+            required=False,
+            allow_links=kwargs.get("allow_links", False),
+            enable_context_menu=kwargs.get("enable_context_menu", False),
         )
         block.set_name("data")
         self.child_blocks["data"] = block
@@ -93,3 +96,4 @@ class Meta:
         icon = "table"
         template = "wagtail_tinytableblock/table_block.html"
         allow_links = False
+        enable_context_menu = False

src/wagtail_tinytableblock/static/wagtail_tinytableblock/js/tiny-table-block.js

@@ -4,7 +4,7 @@ class TinyTableBlockDefinition extends window.wagtailStreamField.blocks.FieldBlo
     const block = super.render(placeholder, prefix, initialState, initialError);
 
     let plugins = "table autoresize";
-    let toolbar = "undo redo copy paste | tablerowheader tablecolheader tablemergecells tablesplitcells | tableinsertcolbefore tableinsertcolafter tableinsertrowbefore tableinsertrowafter";
+    let toolbar = "undo redo copy paste | tablerowheader tablecolheader tablemergecells tablesplitcells | tableinsertcolbefore tableinsertcolafter tableinsertrowbefore tableinsertrowafter tabledelete";
     let contextmenu = "copy paste table";
     let valid_elements = "br,table[border|width|height|align|summary],tr[align|valign],td[align|valign|width|colspan|rowspan],th[align|valign|width|colspan|rowspan|scope],thead,tbody";
     if (this.meta.enableLinks) {
@@ -14,6 +14,12 @@ class TinyTableBlockDefinition extends window.wagtailStreamField.blocks.FieldBlo
         valid_elements += ",a[href|target|rel]";
     }
 
+    let contextmenu_never_use_native = true;
+    if (!this.meta.enableContextMenu) {
+        contextmenu = false;
+        contextmenu_never_use_native = false;
+    }
+
     tinymce.init({
         selector: "#" + prefix,
         plugins: plugins,
@@ -29,7 +35,7 @@ class TinyTableBlockDefinition extends window.wagtailStreamField.blocks.FieldBlo
         table_sizing_mode: 'responsive',
         table_resize_bars: false,
         object_resizing: false,
-        contextmenu_never_use_native: true,
+        contextmenu_never_use_native: contextmenu_never_use_native,
         skin: (window.matchMedia("(prefers-color-scheme: dark)").matches ? "oxide-dark" : "oxide"),
         content_css: (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "default"),
         content_style: 'thead th, thead td { font-weight: 700; }',