Table cell popup options not appearing (Stencil Web Component)

[lefort-g-mgdis]

When inserting a table and focusing on a cell, no popup menu appears with table-specific options (e.g., insert row, delete row, insert column, delete column, etc.).

table-cell-popup-options-not-appearing.mp4

Expected behavior: When focusing on a table cell, a popup should appear with table manipulation options.

Actual behavior: No popup appears when focusing on table cells, even though all table-related plugins are imported (table, select-cells, resize-cells, table-keyboard-navigation).

Questions:

• Is there a separate plugin required for table cell editing popups? I've added the inline-popup plugin but it seems to be more related to text selection. Is there a different plugin that handles table-specific popups that needs to be imported?
• Am I missing or have I configured incorrectly an option that would prevent or enable table cell popups? I've tried various configurations (toolbarInline, toolbarInlineForSelection, tableAllowCellSelection, inlinePopup.show, controls for td/th) but none have worked.
• Is there a recommended approach for integrating Jodit into web components with Shadow DOM?

Context

I'm integrating Jodit editor (version 4.7.9) into a web component built with Stencil (version 4.38.0). The component uses Shadow DOM (shadow: true), which creates an isolated DOM tree.

Technical setup

• Framework: Stencil.js 4.38.0
• Jodit Version: 4.7.9
• Environment: Shadow DOM enabled web component
• Browser: Modern browsers (Chrome, Firefox, Safari, Edge)

Current configuration

I've configured Jodit with the following options to support Shadow DOM:

import { Jodit } from 'jodit';
import type { IJodit, ButtonsOption } from 'jodit/esm/types';
// Import plugins
import 'jodit/esm/plugins/select/select.js';
import 'jodit/esm/plugins/resizer/resizer.js';
import 'jodit/esm/plugins/table/table.js';
import 'jodit/esm/plugins/select-cells/select-cells.js';
import 'jodit/esm/plugins/resize-cells/resize-cells.js';
import 'jodit/esm/plugins/table-keyboard-navigation/table-keyboard-navigation.js';
import 'jodit/esm/plugins/inline-popup/inline-popup.js';
import 'jodit/esm/plugins/clean-html/clean-html.js';
import 'jodit/esm/plugins/file/file.js';
import 'jodit/esm/plugins/print/print.js';
import 'jodit/esm/plugins/source/source.js';

const shadowRoot = wrapperElement.getRootNode() instanceof ShadowRoot ? (wrapperElement.getRootNode() as ShadowRoot) : null;
const ownerDocument = shadowRoot !== null ? shadowRoot.ownerDocument : document;
const ownerWindow = window;

const joditConfig = {
  buttons: modules || [
    'bold', 'italic', 'underline', 'strikethrough', 'eraser', '|',
    'ul', 'ol', '|',
    'font', 'fontsize', 'superscript', 'subscript', '|',
    'brush', '|',
    'link', 'image', 'file', '|',
    'table', '|',
    'undo', 'redo', '|',
    'print', '|',
    'source',
  ],
  sourceEditor: 'area',
  shadowRoot: shadowRoot, // Shadow root reference
  ownerDocument: ownerDocument, // Document from shadow root or global document
  ownerWindow: ownerWindow, // Window reference
  globalFullSize: false, // Prevent fullscreen from breaking shadow root isolation
  // Resizer configuration
  allowResizeTags: new Set(['img', 'table']),
  resizer: {
    showSize: true,
    hideSizeTimeout: 1000,
    useAspectRatio: new Set(['img']),
    forImageChangeAttributes: true,
    min_width: 10,
    min_height: 10,
  },
  // Inline toolbar configuration
    toolbarInline: true,
    tableAllowCellSelection: true,
    popup: {
      a: Jodit.atom(['link', 'unlink', 'delete']),
    },
};

Additional information

• The editor is initialized in the componentDidLoad lifecycle hook of Stencil.
• The wrapper element is created inside the Shadow DOM.
• I'm using shadowRoot, ownerDocument, and ownerWindow to ensure Jodit uses the correct document context.
• The globalFullSize option is set to false to prevent fullscreen from breaking Shadow DOM isolation.

Thank you for your time and assistance! I'm happy to provide additional information or test specific configurations if needed.