wagtail-tinymce-table 0.2.1__py3-none-any.whl

wagtail_tinymce_table-0.2.1.dist-info/METADATA

@@ -0,0 +1,429 @@
+Metadata-Version: 2.4
+Name: wagtail-tinymce-table
+Version: 0.2.1
+Summary: TinyMCE-powered StreamField blocks for Wagtail, including a table block with Excel paste support.
+License: MIT
+Project-URL: Repository, https://github.com/ogcio/wagtail-tinymce-table
+Requires-Python: >=3.9
+Description-Content-Type: text/markdown
+Requires-Dist: wagtail>=4.0
+Requires-Dist: django-tinymce>=5.0
+Requires-Dist: bleach>=6.0
+Requires-Dist: beautifulsoup4>=4.12
+Requires-Dist: lxml>=4.9
+Requires-Dist: wagtail-localize>=1.5
+Provides-Extra: dev
+Requires-Dist: pytest; extra == "dev"
+Requires-Dist: pytest-django; extra == "dev"
+
+# wagtail-tinymce
+
+A set of [Wagtail](https://wagtail.org/) StreamField blocks that embed a [TinyMCE](https://www.tiny.cloud/) editor directly inside the page editor. The headline feature is `TinyMCETableBlock`: a fully-featured table block that lets editors paste tables straight from Excel or Google Sheets, create header-only or footer-only tables, and merge cells — all without needing Wagtail's built-in table block.
+
+---
+
+## Features
+
+- **Paste from Excel / Google Sheets** — TinyMCE's clipboard handling converts spreadsheet data to clean HTML tables automatically.
+- **Header rows (`<thead>`) and footer rows (`<tfoot>`)** — a custom *Footer Row* toolbar button toggles the selected row between `<tbody>` and `<tfoot>`. Header rows use TinyMCE's built-in *Row Header* button.
+- **Header-less tables** — nothing forces a header row; plain body tables work fine.
+- **Cell merging and splitting** — `colspan`/`rowspan` via the built-in *Merge Cells* and *Split Cell* buttons.
+- **`wagtail-localize` integration** — `TinyMCETableBlock` implements `get_translatable_segments` and `restore_translated_segments` so table content is fully translatable, including header cells (`<th>`), footer cells, empty cells, and merged cells.
+- **HTML sanitization** — all output is passed through [bleach](https://bleach.readthedocs.io/) with a strict allowlist before being stored.
+- **Customisable** — override `custom_mce_config`, `allowed_tags`, `allowed_attributes`, or pass `menubar_options` / `toolbar_options` per block instance.
+
+---
+
+## Requirements
+
+| Package | Minimum version |
+|---|---|
+| Python | 3.9 |
+| Django | 4.2 |
+| Wagtail | 4.0 |
+| django-tinymce | 5.0 |
+| bleach | 6.0 |
+| beautifulsoup4 | 4.12 |
+| lxml | 4.9 |
+
+`wagtail-localize` ≥ 1.5 is a **required** dependency and is installed automatically.
+
+---
+
+## Installation
+
+`wagtail-localize` is a **required** dependency — it is always installed automatically. No extra flags are needed.
+
+### From PyPI
+
+```bash
+pip install wagtail-tinymce
+```
+
+### From Git (`master` branch — TinyMCE 7, django-tinymce ≥ 5.0)
+
+```bash
+pip install git+https://github.com/ogcio/wagtail-tinymce-table.git@master
+```
+
+In a `requirements.txt` file (PEP 508):
+
+```text
+wagtail-tinymce @ git+https://github.com/ogcio/wagtail-tinymce-table.git@master
+```
+
+### Legacy version (TinyMCE 6, django-tinymce ≥ 3.5)
+
+If your project requires  (TinyMCE 6), install the  tag instead:
+
+```bash
+pip install git+https://github.com/ogcio/wagtail-tinymce-table.git@v0.1.0
+```
+
+In a `requirements.txt` file (PEP 508):
+
+```text
+wagtail-tinymce @ git+https://github.com/ogcio/wagtail-tinymce-table.git@v0.1.0
+```
+
+---
+
+Add `"wagtailtinymce"` and `"tinymce"` to `INSTALLED_APPS`:
+
+```python
+INSTALLED_APPS = [
+    ...
+    "tinymce",
+    "wagtailtinymce",
+]
+```
+
+Add a minimal TinyMCE configuration to your Django settings (required by `django-tinymce`):
+
+```python
+TINYMCE_DEFAULT_CONFIG = {}
+```
+
+Add `STATIC_URL` if it is not already set:
+
+```python
+STATIC_URL = "/static/"
+```
+
+Run `collectstatic` so the Wagtail telepath adapter script is served:
+
+```bash
+python manage.py collectstatic
+```
+
+---
+
+## Quick start
+
+### Complete working example
+
+The snippets below show every file you need to add or edit in a standard Wagtail project to get a table block working end-to-end.
+
+#### 1. `settings.py`
+
+```python
+INSTALLED_APPS = [
+    # --- Wagtail core ---
+    "wagtail.contrib.forms",
+    "wagtail.contrib.redirects",
+    "wagtail.embeds",
+    "wagtail.sites",
+    "wagtail.users",
+    "wagtail.snippets",
+    "wagtail.documents",
+    "wagtail.images",
+    "wagtail.search",
+    "wagtail.admin",
+    "wagtail",
+    # --- Django ---
+    "django.contrib.admin",
+    "django.contrib.auth",
+    "django.contrib.contenttypes",
+    "django.contrib.sessions",
+    "django.contrib.messages",
+    "django.contrib.staticfiles",
+    # --- Third-party ---
+    "tinymce",          # django-tinymce must come before wagtailtinymce
+    "wagtailtinymce",   # this package
+]
+
+# Required by django-tinymce (may be an empty dict if you rely on block-level config)
+TINYMCE_DEFAULT_CONFIG = {}
+```
+
+#### 2. `myapp/models.py`
+
+```python
+from wagtail.models import Page
+from wagtail.fields import StreamField
+from wagtail.admin.panels import FieldPanel
+
+from wagtailtinymce.core.table_block import TinyMCETableBlock
+
+
+class TableDemoPage(Page):
+    """A page that contains one or more TinyMCE table blocks."""
+
+    body = StreamField(
+        [
+            ("table", TinyMCETableBlock()),
+        ],
+        blank=True,
+        use_json_field=True,
+        verbose_name="Page body",
+    )
+
+    content_panels = Page.content_panels + [
+        FieldPanel("body"),
+    ]
+
+    class Meta:
+        verbose_name = "Table demo page"
+```
+
+#### 3. `myapp/templates/myapp/table_demo_page.html`
+
+```html
+{% extends "base.html" %}
+{% load wagtailcore_tags %}
+
+{% block content %}
+  <article>
+    <h1>{{ page.title }}</h1>
+
+    {% for block in page.body %}
+      {% if block.block_type == "table" %}
+        {# The block value is already sanitised HTML — render it directly #}
+        <div class="table-wrapper">
+          {{ block.value }}
+        </div>
+      {% endif %}
+    {% endfor %}
+  </article>
+{% endblock %}
+```
+
+> **Tip:** use `{% include_block page.body %}` instead of the manual loop if you do not need to wrap individual blocks in extra markup.
+
+#### 4. Optional: add basic table styles
+
+The block stores a plain `<table>` element. Add CSS so it displays nicely:
+
+```css
+/* static/css/content.css  (load this in your base template) */
+.table-wrapper {
+    overflow-x: auto;          /* horizontal scroll on small screens */
+}
+
+.table-wrapper table {
+    border-collapse: collapse;
+    width: 100%;
+}
+
+.table-wrapper th,
+.table-wrapper td {
+    border: 1px solid #d1d5db;
+    padding: 0.5rem 0.75rem;
+    text-align: left;
+    vertical-align: top;
+}
+
+.table-wrapper thead th {
+    background-color: #f3f4f6;
+    font-weight: 600;
+}
+
+.table-wrapper tfoot td {
+    background-color: #f9fafb;
+    font-style: italic;
+}
+```
+
+---
+
+### Table block (minimal)
+
+```python
+from wagtail.models import Page
+from wagtail.fields import StreamField
+from wagtail.admin.panels import FieldPanel
+from wagtailtinymce.core.table_block import TinyMCETableBlock
+
+class MyPage(Page):
+    body = StreamField(
+        [("table", TinyMCETableBlock())],
+        blank=True,
+        use_json_field=True,
+    )
+
+    content_panels = Page.content_panels + [
+        FieldPanel("body"),
+    ]
+```
+
+Render the block in a template as you would any other StreamField block:
+
+```html
+{% load wagtailcore_tags %}
+{% include_block page.body %}
+```
+
+### Generic TinyMCE block
+
+`TinyMCEBlock` is the base class. Use it directly when you need a full rich-text editor without the table-specific toolbar:
+
+```python
+from wagtailtinymce.blocks import TinyMCEBlock
+
+class MyPage(Page):
+    body = StreamField(
+        [("rich_text", TinyMCEBlock())],
+        blank=True,
+        use_json_field=True,
+    )
+```
+
+---
+
+## Customisation
+
+### Per-instance toolbar / menubar
+
+Pass `toolbar_options` or `menubar_options` when declaring the block:
+
+```python
+TinyMCETableBlock(
+    toolbar_options="bold italic | table tablemergecells",
+    menubar_options="",          # hide the menubar
+)
+```
+
+### Subclassing for a project-wide config
+
+```python
+from wagtailtinymce.core.table_block import TinyMCETableBlock
+
+class MyTableBlock(TinyMCETableBlock):
+    custom_mce_config = {
+        **TinyMCETableBlock.custom_mce_config,
+        "language": "ga",        # Irish
+        "content_css": "/static/css/editor.css",
+    }
+
+    allowed_tags = TinyMCETableBlock.allowed_tags + ["figure", "figcaption"]
+```
+
+### Disabling sanitization
+
+Set `sanitize_input=False` if you need to allow arbitrary HTML (only do this when the editor is trusted):
+
+```python
+TinyMCETableBlock(sanitize_input=False)
+```
+
+---
+
+## Toolbar reference
+
+The default `TinyMCETableBlock` toolbar groups are:
+
+| Group | Buttons |
+|---|---|
+| Formatting | `bold` `italic` `link` `unlink` |
+| Table structure | `table` `tablecaption` `tablecolheader` `tablerowheader` `tablefooterrow`* |
+| Cell operations | `tablecellprops` `tablemergecells` `tablesplitcells` |
+| Row operations | `tableinsertrowbefore` `tableinsertrowafter` `tabledeleterow` |
+| Column operations | `tableinsertcolbefore` `tableinsertcolafter` `tabledeletecol` |
+
+\* `tablefooterrow` is a custom button added by this package. Clicking it moves the selected row into `<tfoot>` (or back to `<tbody>` if it is already a footer row).
+
+---
+
+## `wagtail-localize` integration
+
+When `wagtail-localize` is installed, `TinyMCETableBlock` implements the segment protocol so translators see each non-empty cell as an individual string segment.
+
+**Behaviour:**
+- Empty cells are skipped and do not consume a segment index.
+- Duplicate cell values are extracted once and restored to all matching cells.
+- `<th>` (header) cells, `<tbody>` cells, and `<tfoot>` cells are all included.
+- Cells that contain a nested table are skipped entirely.
+- Merged cells (`colspan`/`rowspan`) are treated as a single cell.
+
+No configuration is needed. `wagtail-localize` is installed automatically with the package, and Wagtail Localize will pick up the segments automatically.
+
+---
+
+## Project structure
+
+```
+wagtailtinymce/
+├── __init__.py                        # version
+├── apps.py                            # Django AppConfig
+├── blocks.py                          # TinyMCEBlock (base class)
+├── widgets.py                         # WagtailTinyMCE widget + telepath adapter
+├── core/
+│   └── table_block.py                 # TinyMCETableBlock
+└── static/
+    └── wagtailtinymce/js/
+        └── tinymce-adapter.js         # Wagtail telepath registration
+```
+
+---
+
+## Running the tests
+
+```bash
+pip install "wagtail-tinymce[dev]"   # adds pytest + pytest-django
+pytest
+```
+
+The test suite has **75 tests** covering:
+
+- `_replace_cell_text` helper (simple and compound cell paths)
+- `TinyMCETableBlock` configuration (allowed tags, toolbar, TinyMCE `setup` callback)
+- `get_translatable_segments` (empty cells, duplicates, `<th>`, `<tfoot>`, merged cells, round-trip)
+- `restore_translated_segments` (index correctness, compound cells, `<tfoot>`, duplicates)
+- `TinyMCEBlock.sanitize` (XSS, allowed tags/attributes, inline formatting)
+- `TinyMCEBlock.value_from_form` (`SafeData`, bypass mode)
+- `WagtailTinyMCE` widget (config merging and overrides)
+- `WagtailTinyMCEAdapter` (telepath registration)
+
+---
+
+## Changelog
+
+### 0.2.1
+
+#### Bug fixes
+- **Header rows now produce `<th>` elements.** The default TinyMCE `table_header_type` value `"section"` moved rows into `<thead>` but kept `<td>` cells. Setting it to `"sectionCells"` correctly converts cells to `<th>` as well.
+- **Table `<caption>` text is now included in translatable segments.** The caption is extracted before row cells and restored in the same position, so it appears correctly in the Wagtail Localize translation UI.
+
+### 0.2.0
+
+#### Breaking changes
+- **Requires `django-tinymce >= 5.0`** (previously 3.5). This bundles **TinyMCE 7.8** instead of TinyMCE 6.x. If you cannot upgrade `django-tinymce`, pin to the `v0.1.0` git tag.
+- **`wagtail-localize >= 1.5` is now a required dependency** (previously optional).
+
+#### Packaging
+- Fixed build backend from `setuptools.backends.legacy:build` to `setuptools.build_meta` for compatibility with older setuptools versions.
+- Fixed `package-dir` mapping so `pip install git+…` correctly installs the `wagtailtinymce` module (previously the package was silently installed empty).
+
+### 0.1.0
+
+- Initial release.
+- `TinyMCEBlock` and `TinyMCETableBlock` StreamField blocks.
+- Excel / Google Sheets paste support via TinyMCE's clipboard plugin.
+- Custom *Footer Row* toolbar button for `<tfoot>` support.
+- `wagtail-localize` segment extraction and restoration, with fixes for empty cells, merged cells with rich content, and `<th>` cells.
+
+---
+
+## Licence
+
+MIT

wagtail_tinymce_table-0.2.1.dist-info/RECORD

@@ -0,0 +1,11 @@
+wagtailtinymce/__init__.py,sha256=ncxeznUBDHenWtbEyPJ4VenzNNIfq839P0jhX7wFIBM,87
+wagtailtinymce/apps.py,sha256=vr03BhRm6N3kPCWWGNVp_aSt9rpdpovRCYy38QkV04s,226
+wagtailtinymce/blocks.py,sha256=Eb6WdqqRga_3_xekD4AT6-qLtsDMDdmIoFRRUeqUEzk,1978
+wagtailtinymce/widgets.py,sha256=50meYYKzQesqEuRcr2DtTbyPWUrE2gHlXb2VRYr3Ubc,1038
+wagtailtinymce/core/__init__.py,sha256=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU,0
+wagtailtinymce/core/table_block.py,sha256=9f9c4LHNNaHWNgejXnoT-iJ-1hwFoyiEoY5TCpVf6uE,8754
+wagtailtinymce/static/wagtailtinymce/js/tinymce-adapter.js,sha256=dT8nfi8C6bjmzijktnRkhNxiP9FpZs46RtVmmuVAndI,3932
+wagtail_tinymce_table-0.2.1.dist-info/METADATA,sha256=cAUwxyE3c7LmqqdyUOX_bD-MQrVwLkNuhIG_VrJMNN0,12627
+wagtail_tinymce_table-0.2.1.dist-info/WHEEL,sha256=K260EYznzXsJYBQGqmI8VTxEdiZYNvDZwW9cBh9-_MA,91
+wagtail_tinymce_table-0.2.1.dist-info/top_level.txt,sha256=UX9zRg-30w36MuCz91wFbPLFdIGFybSGso0_zUUtdd4,15
+wagtail_tinymce_table-0.2.1.dist-info/RECORD,,

wagtail_tinymce_table-0.2.1.dist-info/WHEEL

@@ -0,0 +1,5 @@
+Wheel-Version: 1.0
+Generator: setuptools (83.0.0)
+Root-Is-Purelib: true
+Tag: py3-none-any
+

wagtail_tinymce_table-0.2.1.dist-info/top_level.txt

@@ -0,0 +1 @@
+wagtailtinymce

wagtailtinymce/__init__.py

@@ -0,0 +1,3 @@
+default_app_config = "wagtailtinymce.apps.WagtailTinyMCEConfig"
+
+__version__ = "0.2.1"

wagtailtinymce/apps.py

@@ -0,0 +1,8 @@
+from django.apps import AppConfig
+
+
+class WagtailTinyMCEConfig(AppConfig):
+    name = "wagtailtinymce"
+    label = "wagtailtinymce"
+    verbose_name = "Wagtail TinyMCE"
+    default_auto_field = "django.db.models.BigAutoField"

wagtailtinymce/blocks.py

@@ -0,0 +1,62 @@
+import bleach
+from django import forms
+from django.utils.safestring import mark_safe
+from wagtail.blocks import RawHTMLBlock
+
+from .widgets import WagtailTinyMCE
+
+
+class TinyMCEBlock(RawHTMLBlock):
+
+    # Set to override all or part of the default tinymce config
+    # from TINYMCE_DEFAULT_CONFIG
+    mce_config = None
+
+    # Set to override sanitization options passed to bleach
+    # when sanitize_input=True
+    allowed_tags = None
+    allowed_attributes = None
+    allowed_styles = None
+
+    def __init__(
+        self,
+        required=False,
+        help_text=None,
+        menubar_options=None,
+        toolbar_options=None,
+        sanitize_input=True,
+        validators=(),
+        **kwargs,
+    ):
+        # ``menubar_options`` and ``toolbar_options`` are provided as a means to
+        # customize those parts of the tinymce config for specific block instances
+        self.menubar_options = menubar_options
+        self.toolbar_options = toolbar_options
+        self.sanitize_input = sanitize_input
+
+        super().__init__(required=required, help_text=help_text, validators=validators, **kwargs)
+
+        # RawHTMLBlock initializes the field in the init function so we have
+        # to reinitialize as a WagtailTinyMCE widget.
+        # https://github.com/wagtail/wagtail/blob/main/wagtail/core/blocks/field_block.py#L706
+        self.field = forms.CharField(
+            widget=WagtailTinyMCE(
+                menubar_options=self.menubar_options,
+                toolbar_options=self.toolbar_options,
+                mce_config=self.custom_mce_config,
+            )
+        )
+
+    def sanitize(self, value):
+        return bleach.clean(
+            value,
+            attributes=self.allowed_attributes,
+            tags=self.allowed_tags,
+            strip=True,
+            strip_comments=True,
+        )
+
+    def value_from_form(self, value):
+        if self.sanitize_input:
+            value = self.sanitize(value)
+        return mark_safe(value)  # nosec

wagtailtinymce/core/table_block.py

@@ -0,0 +1,220 @@
+from wagtail_localize.segments import StringSegmentValue
+
+from bs4 import BeautifulSoup, NavigableString
+
+from wagtailtinymce.blocks import TinyMCEBlock
+
+__all__ = [
+    "TinyMCETableBlock",
+]
+
+# JavaScript function (serialised as a string) that registers a custom TinyMCE
+# toolbar button which toggles the currently selected row between <tbody> and
+# <tfoot>.  The JS adapter in tinymce-adapter.js evals any setup value that
+# contains a "(" character, so a plain arrow-function expression is sufficient.
+_TFOOT_SETUP = (
+    "(editor) => {"
+    "  editor.ui.registry.addButton('tablefooterrow', {"
+    "    text: 'Footer Row',"
+    "    tooltip: 'Toggle selected row as table footer',"
+    "    onAction: () => {"
+    "      const node = editor.selection.getNode();"
+    "      const row = editor.dom.getParent(node, 'tr');"
+    "      if (!row) return;"
+    "      const parent = row.parentNode;"
+    "      const table = editor.dom.getParent(row, 'table');"
+    "      if (!table) return;"
+    "      if (parent.tagName.toLowerCase() === 'tfoot') {"
+    "        let tbody = table.querySelector('tbody');"
+    "        if (!tbody) { tbody = editor.dom.create('tbody'); table.appendChild(tbody); }"
+    "        tbody.appendChild(row);"
+    "        if (!parent.hasChildNodes()) parent.remove();"
+    "      } else {"
+    "        let tfoot = table.querySelector('tfoot');"
+    "        if (!tfoot) { tfoot = editor.dom.create('tfoot'); table.appendChild(tfoot); }"
+    "        tfoot.appendChild(row);"
+    "        if (!parent.hasChildNodes()) parent.remove();"
+    "      }"
+    "    }"
+    "  });"
+    "}"
+)
+
+
+def _replace_cell_text(cell_tag, translated_text):
+    """Replace the visible text of a BeautifulSoup cell tag with *translated_text*.
+
+    Two cases:
+    - Simple cell: the tag has a single NavigableString child (``tag.string`` is
+      not None).  We call ``replace_with`` directly on that string.
+    - Compound cell: the tag contains child elements (e.g. ``<p>``, ``<strong>``).
+      ``tag.string`` is None for such tags in BeautifulSoup.  We clear the tag and
+      insert the translated plain text as a new NavigableString, which intentionally
+      drops inner formatting because the translation system operates on plain text.
+    """
+    if cell_tag.string is not None:
+        cell_tag.string.replace_with(translated_text)
+    else:
+        cell_tag.clear()
+        cell_tag.append(NavigableString(translated_text))
+
+
+class TinyMCETableBlock(TinyMCEBlock):
+    custom_mce_config = {
+        "plugins": "table link",
+        "menubar": "",
+        # tablefooterrow is a custom button registered via the setup callback below.
+        "toolbar": (
+            "bold italic link unlink"
+            " | table tablecaption tablecolheader tablerowheader tablefooterrow"
+            " | tablecellprops tablemergecells tablesplitcells"
+            " | tableinsertrowbefore tableinsertrowafter tabledeleterow"
+            " | tableinsertcolbefore tableinsertcolafter tabledeletecol"
+        ),
+        "table_appearance_options": False,
+        "table_default_attributes": {},
+        "table_default_styles": {"border-collapse": "collapse", "width": "100%"},
+        "table_sizing_mode": "relative",
+        "table_advtab": False,
+        "table_cell_advtab": False,
+        "table_row_advtab": False,
+        # "sectionCells" moves the row into <thead> AND converts <td> → <th>.
+        # The default "section" only moves the row but keeps <td> elements,
+        # which is why header rows appeared without <th> markup.
+        "table_header_type": "sectionCells",
+        "language": "en",
+        "license_key": "gpl",
+        "setup": _TFOOT_SETUP,
+    }
+
+    class Meta:
+        label = "Table"
+        icon = "table"
+
+    allowed_tags = [
+        "table",
+        "thead",
+        "tbody",
+        "tfoot",
+        "br",
+        "colgroup",
+        "col",
+        "caption",
+        "tr",
+        "th",
+        "td",
+        "p",
+        "strong",
+        "b",
+        "em",
+        "i",
+        "a",
+    ]
+
+    allowed_attributes = {
+        "table": ["class", "id", "style"],
+        "col": ["span", "class"],
+        "th": [
+            "align",
+            "valign",
+            "class",
+            "scope",
+            "abbr",
+            "colspan",
+            "rowspan",
+            "headers",
+        ],
+        "td": ["align", "valign", "class", "colspan", "rowspan", "headers"],
+        "a": ["class", "href", "target", "title"],
+    }
+
+    allowed_styles = ["width", "border-collapse"]
+
+    def get_translatable_segments(self, data, **kwargs):
+        duplicate_elements = []
+        segments = []
+        soup = BeautifulSoup(data, features="lxml")
+        tables = soup.find_all("table")
+        col = 0
+        for table in tables:
+            # <caption> is a direct child of <table>, not inside any <tr>, so it
+            # must be handled explicitly before the row loop.
+            caption = table.find("caption")
+            if caption is not None:
+                text = caption.get_text(separator=" ").strip()
+                if text and text not in duplicate_elements:
+                    segments.append(StringSegmentValue("", text, order=col))
+                    duplicate_elements.append(text)
+                col += 1
+
+            rows = table.find_all("tr")
+            for row in rows:
+                # Include both <td> (body/footer cells) and <th> (header cells).
+                cells = row.find_all(["td", "th"])
+                for elem in cells:
+                    text = elem.get_text(separator=" ").strip()
+                    # Skip empty cells and cells that contain nested tables.
+                    # The truthiness guard (bool(text)) ensures the first empty
+                    # cell is not mistakenly added as a segment, which would
+                    # shift every subsequent segment index by one during restore.
+                    if text and text not in duplicate_elements and not elem.find("table"):
+                        segments.append(StringSegmentValue("", text, order=col))
+                        duplicate_elements.append(text)
+                    col += 1
+
+        return segments
+
+    def sort_segment(self, segments) -> list:
+        seg_dict = {}
+        first_list = []
+        for s in segments:
+            seg_dict[s.order] = s
+            first_list.append(s.order)
+        first_list.sort()
+        return [seg_dict[elem] for elem in first_list]
+
+    def restore_translated_segments(self, block_value, segments):
+        duplicate_elements = {}
+        soup = BeautifulSoup(block_value, "html.parser")
+        tables = soup.find_all("table")
+        cell = 0
+        sorted_segment = self.sort_segment(segments)
+
+        if tables:
+            for table in tables:
+                # Restore caption before processing rows, mirroring extraction order.
+                caption = table.find("caption")
+                if caption is not None:
+                    text = caption.get_text(separator=" ").strip()
+                    if text:
+                        try:
+                            translated = sorted_segment[cell].string.data
+                            if text not in duplicate_elements and text not in duplicate_elements.values():
+                                duplicate_elements[text] = translated
+                                _replace_cell_text(caption, translated)
+                                cell += 1
+                            elif text not in duplicate_elements.values():
+                                _replace_cell_text(caption, duplicate_elements[text])
+                        except Exception as e:
+                            print(e)
+
+                rows = table.find_all("tr")
+                for row in rows:
+                    # Mirror the same cell selector used in get_translatable_segments.
+                    cells = row.find_all(["td", "th"])
+                    for ele in cells:
+                        text = ele.get_text(separator=" ").strip()
+                        if not text or ele.find("table"):
+                            continue
+                        try:
+                            translated = sorted_segment[cell].string.data
+                            if text not in duplicate_elements and text not in duplicate_elements.values():
+                                duplicate_elements[text] = translated
+                                _replace_cell_text(ele, translated)
+                                cell += 1
+                            elif text not in duplicate_elements.values():
+                                _replace_cell_text(ele, duplicate_elements[text])
+                        except Exception as e:
+                            print(e)
+
+            return str(soup)

wagtailtinymce/static/wagtailtinymce/js/tinymce-adapter.js

@@ -0,0 +1,99 @@
+/* eslint-disable func-names */
+(function() {
+    function initializeTinyMCE(el) {
+        // This function is copied from:
+        // https://github.com/jazzband/django-tinymce/blob/master/tinymce/static/django_tinymce/init_tinymce.js
+
+        // initTinyMCE is not reachable outside of django-tinymce.
+        // The alternative is to import admin/js/jquery.init.js. However, that breaks a lot more things in Wagtail editor.
+        // Relevant issue: https://github.com/jazzband/django-tinymce/issues/385
+        if (el.closest('.empty-form') === null) {  // Don't do empty inlines
+            const mce_conf = JSON.parse(el.dataset.mceConf);
+
+            // There is no way to pass a JavaScript function as an option
+            // because all options are serialized as JSON.
+            const fns = [
+                'color_picker_callback',
+                'file_browser_callback',
+                'file_picker_callback',
+                'images_dataimg_filter',
+                'images_upload_handler',
+                'paste_postprocess',
+                'paste_preprocess',
+                'setup',
+                'urlconverter_callback',
+            ];
+            fns.forEach((fn_name) => {
+                if (typeof mce_conf[fn_name] !== 'undefined') {
+                    if (mce_conf[fn_name].includes('(')) {
+                        // This is disabled since we are copying it from the django_tinymce package.
+                        // eslint-disable-next-line no-eval
+                        mce_conf[fn_name] = eval(`(${  mce_conf[fn_name]  })`);
+                    } else {
+                        mce_conf[fn_name] = window[mce_conf[fn_name]];
+                    }
+                }
+            });
+
+            const {id} = el;
+            if ('elements' in mce_conf && mce_conf.mode === 'exact') {
+                mce_conf.elements = id;
+            }
+            // The following eslint-disable-enxt-line no-undef
+            // are set because those variables are defined via the JS files added
+            // by the TinyMCE widget.
+            if (el.dataset.mceGzConf && typeof tinyMCE_GZ !== 'undefined') {
+                // eslint-disable-next-line no-undef
+                tinyMCE_GZ.init(JSON.parse(el.dataset.mceGzConf));
+            }
+            // eslint-disable-next-line no-undef
+            if (!tinyMCE.editors[id]) {
+               // eslint-disable-next-line no-undef
+               tinyMCE.init(mce_conf);
+            }
+        }
+    }
+
+    function WagtailTinyMCE(html, config) {
+        this.html = html;
+        this.baseConfig = config;
+    }
+
+    WagtailTinyMCE.prototype.render = function(placeholder, name, id, initialState) {
+        placeholder.outerHTML = this.html.replace(/__NAME__/g, name).replace(/__ID__/g, id);
+
+        const element = document.getElementById(id);
+        element.value = initialState;
+
+        initializeTinyMCE(element);
+
+        // define public API functions for the widget:
+        // https://docs.wagtail.io/en/latest/reference/streamfield/widget_api.html
+        return {
+            idForLabel: null,
+            getValue() {
+                return element.value;
+            },
+            getState() {
+                return element.value;
+            },
+            setState() {
+                throw new Error('WagtailTinyMCE.setState is not implemented');
+            },
+            getTextLabel(opts) {
+                if (!element.value) return '';
+                const maxLength = opts && opts.maxLength;
+                const result = element.value;
+                if (maxLength && result.length > maxLength) {
+                    return `${result.substring(0, maxLength - 1)  }…`;
+                }
+                return result;
+            },
+            focus() {
+                this.element.focus();
+            }
+        };
+    };
+
+    window.telepath.register('wagtailtinymce.widgets.WagtailTinyMCE', WagtailTinyMCE);
+})();

wagtailtinymce/widgets.py

@@ -0,0 +1,35 @@
+from tinymce.widgets import TinyMCE
+from wagtail.telepath import register
+from wagtail.utils.widgets import WidgetWithScript
+from wagtail.widget_adapters import WidgetAdapter
+
+
+class WagtailTinyMCE(WidgetWithScript, TinyMCE):
+    def __init__(
+        self,
+        content_language=None,
+        attrs=None,
+        menubar_options=None,
+        toolbar_options=None,
+        mce_config=None,
+    ):
+        mce_config = mce_config or {}
+        if menubar_options is not None:
+            mce_config["menubar"] = menubar_options
+        if toolbar_options is not None:
+            mce_config["toolbar"] = toolbar_options
+        super().__init__(content_language, attrs, mce_config)
+
+
+class WagtailTinyMCEAdapter(WidgetAdapter):
+    js_constructor = "wagtailtinymce.widgets.WagtailTinyMCE"
+
+    class Media:
+        js = [
+            # This is the JS file that will run every time an
+            # TinyMCEBlock is added.
+            "wagtailtinymce/js/tinymce-adapter.js",
+        ]
+
+
+register(WagtailTinyMCEAdapter(), WagtailTinyMCE)