io-sanita-theme 2.31.3 → 2.32.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [2.32.0](https://github.com/RedTurtle/io-sanita-theme/compare/2.31.3...2.32.0) (2026-06-12)
+
+### Features
+
+* aggiunta ricertca per comune/distretto su blocco searchmap ([#152](https://github.com/RedTurtle/io-sanita-theme/issues/152)) ([1aff10f](https://github.com/RedTurtle/io-sanita-theme/commit/1aff10f00963987a00a4acd6aafb754e50d72108))
+
+### Bug Fixes
+
+* bottoni categorie searchmap ([#151](https://github.com/RedTurtle/io-sanita-theme/issues/151)) ([058aa59](https://github.com/RedTurtle/io-sanita-theme/commit/058aa59acb0f5d721d653458e38be43f0adf0653))
+* prevent the submit of the form when adding a row o column from the toolbar ([#153](https://github.com/RedTurtle/io-sanita-theme/issues/153)) ([cf723b2](https://github.com/RedTurtle/io-sanita-theme/commit/cf723b2dfd0974d470b40ab54ce3f683f7a558a0))
+
+### Maintenance
+
+* prettier ([11b8f22](https://github.com/RedTurtle/io-sanita-theme/commit/11b8f222e8c6d4eb5f93d52069ec3ff2517970b7))
+
 ## [2.31.3](https://github.com/RedTurtle/io-sanita-theme/compare/2.31.2...2.31.3) (2026-06-11)
 
 ### Bug Fixes

package/RELEASE.md

@@ -41,6 +41,12 @@
 - ...
  -->
 
+## Versione 2.32.0 (12/06/2026)
+
+### Migliorie
+
+- Aggiunta filtri di ricerca per comune e distretto nel blocco "Cerca strutture".
+
 ## Versione 2.31.3 (11/06/2026)
 
 ### Fix

package/locales/de/LC_MESSAGES/volto.po

@@ -3202,6 +3202,16 @@ msgstr ""
 msgid "search_map_Search path"
 msgstr ""
 
+#. Default: "Mostra il filtro per comune"
+#: components/Blocks/SearchMap/schema
+msgid "search_map_Show city"
+msgstr ""
+
+#. Default: "Mostra il filtro per distretto"
+#: components/Blocks/SearchMap/schema
+msgid "search_map_Show distretto"
+msgstr ""
+
 #. Default: "Mostra la barra di ricerca"
 #: components/Blocks/SearchMap/schema
 msgid "search_map_Show search bar"
@@ -3222,6 +3232,16 @@ msgstr ""
 msgid "search_map_ct"
 msgstr ""
 
+#. Default: "Comune"
+#: components/Blocks/SearchMap/Body
+msgid "search_map_label_city"
+msgstr ""
+
+#. Default: "Distretto"
+#: components/Blocks/SearchMap/Body
+msgid "search_map_label_distretto"
+msgstr ""
+
 #. Default: "Cerca"
 #: components/Widgets/SearchBar/SearchBar
 msgid "search_map_searchable_text_button"
@@ -3247,6 +3267,16 @@ msgstr ""
 msgid "search_map_title"
 msgstr ""
 
+#. Default: "Tutti i comuni"
+#: components/Blocks/SearchMap/Body
+msgid "search_mapall_cities"
+msgstr ""
+
+#. Default: "Tutti i distretti"
+#: components/Blocks/SearchMap/Body
+msgid "search_mapall_distretti"
+msgstr ""
+
 #. Default: "Tutti"
 #: components/Blocks/SearchMap/Body
 msgid "search_mapall_subjects"

package/locales/en/LC_MESSAGES/volto.po

@@ -3197,6 +3197,16 @@ msgstr "Users"
 msgid "search_map_Search path"
 msgstr ""
 
+#. Default: "Mostra il filtro per comune"
+#: components/Blocks/SearchMap/schema
+msgid "search_map_Show city"
+msgstr ""
+
+#. Default: "Mostra il filtro per distretto"
+#: components/Blocks/SearchMap/schema
+msgid "search_map_Show distretto"
+msgstr ""
+
 #. Default: "Mostra la barra di ricerca"
 #: components/Blocks/SearchMap/schema
 msgid "search_map_Show search bar"
@@ -3217,6 +3227,16 @@ msgstr ""
 msgid "search_map_ct"
 msgstr ""
 
+#. Default: "Comune"
+#: components/Blocks/SearchMap/Body
+msgid "search_map_label_city"
+msgstr "Municipality"
+
+#. Default: "Distretto"
+#: components/Blocks/SearchMap/Body
+msgid "search_map_label_distretto"
+msgstr "District"
+
 #. Default: "Cerca"
 #: components/Widgets/SearchBar/SearchBar
 msgid "search_map_searchable_text_button"
@@ -3242,6 +3262,16 @@ msgstr "Search for facilities near you"
 msgid "search_map_title"
 msgstr ""
 
+#. Default: "Tutti i comuni"
+#: components/Blocks/SearchMap/Body
+msgid "search_mapall_cities"
+msgstr "All municipalities"
+
+#. Default: "Tutti i distretti"
+#: components/Blocks/SearchMap/Body
+msgid "search_mapall_distretti"
+msgstr "All districts"
+
 #. Default: "Tutti"
 #: components/Blocks/SearchMap/Body
 msgid "search_mapall_subjects"

package/locales/es/LC_MESSAGES/volto.po

@@ -3204,6 +3204,16 @@ msgstr ""
 msgid "search_map_Search path"
 msgstr ""
 
+#. Default: "Mostra il filtro per comune"
+#: components/Blocks/SearchMap/schema
+msgid "search_map_Show city"
+msgstr ""
+
+#. Default: "Mostra il filtro per distretto"
+#: components/Blocks/SearchMap/schema
+msgid "search_map_Show distretto"
+msgstr ""
+
 #. Default: "Mostra la barra di ricerca"
 #: components/Blocks/SearchMap/schema
 msgid "search_map_Show search bar"
@@ -3224,6 +3234,16 @@ msgstr ""
 msgid "search_map_ct"
 msgstr ""
 
+#. Default: "Comune"
+#: components/Blocks/SearchMap/Body
+msgid "search_map_label_city"
+msgstr ""
+
+#. Default: "Distretto"
+#: components/Blocks/SearchMap/Body
+msgid "search_map_label_distretto"
+msgstr ""
+
 #. Default: "Cerca"
 #: components/Widgets/SearchBar/SearchBar
 msgid "search_map_searchable_text_button"
@@ -3249,6 +3269,16 @@ msgstr ""
 msgid "search_map_title"
 msgstr ""
 
+#. Default: "Tutti i comuni"
+#: components/Blocks/SearchMap/Body
+msgid "search_mapall_cities"
+msgstr ""
+
+#. Default: "Tutti i distretti"
+#: components/Blocks/SearchMap/Body
+msgid "search_mapall_distretti"
+msgstr ""
+
 #. Default: "Tutti"
 #: components/Blocks/SearchMap/Body
 msgid "search_mapall_subjects"

package/locales/fr/LC_MESSAGES/volto.po

@@ -3204,6 +3204,16 @@ msgstr ""
 msgid "search_map_Search path"
 msgstr ""
 
+#. Default: "Mostra il filtro per comune"
+#: components/Blocks/SearchMap/schema
+msgid "search_map_Show city"
+msgstr ""
+
+#. Default: "Mostra il filtro per distretto"
+#: components/Blocks/SearchMap/schema
+msgid "search_map_Show distretto"
+msgstr ""
+
 #. Default: "Mostra la barra di ricerca"
 #: components/Blocks/SearchMap/schema
 msgid "search_map_Show search bar"
@@ -3224,6 +3234,16 @@ msgstr ""
 msgid "search_map_ct"
 msgstr ""
 
+#. Default: "Comune"
+#: components/Blocks/SearchMap/Body
+msgid "search_map_label_city"
+msgstr ""
+
+#. Default: "Distretto"
+#: components/Blocks/SearchMap/Body
+msgid "search_map_label_distretto"
+msgstr ""
+
 #. Default: "Cerca"
 #: components/Widgets/SearchBar/SearchBar
 msgid "search_map_searchable_text_button"
@@ -3249,6 +3269,16 @@ msgstr ""
 msgid "search_map_title"
 msgstr ""
 
+#. Default: "Tutti i comuni"
+#: components/Blocks/SearchMap/Body
+msgid "search_mapall_cities"
+msgstr ""
+
+#. Default: "Tutti i distretti"
+#: components/Blocks/SearchMap/Body
+msgid "search_mapall_distretti"
+msgstr ""
+
 #. Default: "Tutti"
 #: components/Blocks/SearchMap/Body
 msgid "search_mapall_subjects"

package/locales/it/LC_MESSAGES/volto.po

@@ -3197,6 +3197,16 @@ msgstr ""
 msgid "search_map_Search path"
 msgstr ""
 
+#. Default: "Mostra il filtro per comune"
+#: components/Blocks/SearchMap/schema
+msgid "search_map_Show city"
+msgstr ""
+
+#. Default: "Mostra il filtro per distretto"
+#: components/Blocks/SearchMap/schema
+msgid "search_map_Show distretto"
+msgstr ""
+
 #. Default: "Mostra la barra di ricerca"
 #: components/Blocks/SearchMap/schema
 msgid "search_map_Show search bar"
@@ -3217,6 +3227,16 @@ msgstr ""
 msgid "search_map_ct"
 msgstr ""
 
+#. Default: "Comune"
+#: components/Blocks/SearchMap/Body
+msgid "search_map_label_city"
+msgstr ""
+
+#. Default: "Distretto"
+#: components/Blocks/SearchMap/Body
+msgid "search_map_label_distretto"
+msgstr ""
+
 #. Default: "Cerca"
 #: components/Widgets/SearchBar/SearchBar
 msgid "search_map_searchable_text_button"
@@ -3242,6 +3262,16 @@ msgstr ""
 msgid "search_map_title"
 msgstr ""
 
+#. Default: "Tutti i comuni"
+#: components/Blocks/SearchMap/Body
+msgid "search_mapall_cities"
+msgstr ""
+
+#. Default: "Tutti i distretti"
+#: components/Blocks/SearchMap/Body
+msgid "search_mapall_distretti"
+msgstr ""
+
 #. Default: "Tutti"
 #: components/Blocks/SearchMap/Body
 msgid "search_mapall_subjects"

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2026-06-11T07:39:40.656Z\n"
+"POT-Creation-Date: 2026-06-12T14:38:11.948Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Content-Type: text/plain; charset=utf-8\n"
@@ -3199,6 +3199,16 @@ msgstr ""
 msgid "search_map_Search path"
 msgstr ""
 
+#. Default: "Mostra il filtro per comune"
+#: components/Blocks/SearchMap/schema
+msgid "search_map_Show city"
+msgstr ""
+
+#. Default: "Mostra il filtro per distretto"
+#: components/Blocks/SearchMap/schema
+msgid "search_map_Show distretto"
+msgstr ""
+
 #. Default: "Mostra la barra di ricerca"
 #: components/Blocks/SearchMap/schema
 msgid "search_map_Show search bar"
@@ -3219,6 +3229,16 @@ msgstr ""
 msgid "search_map_ct"
 msgstr ""
 
+#. Default: "Comune"
+#: components/Blocks/SearchMap/Body
+msgid "search_map_label_city"
+msgstr ""
+
+#. Default: "Distretto"
+#: components/Blocks/SearchMap/Body
+msgid "search_map_label_distretto"
+msgstr ""
+
 #. Default: "Cerca"
 #: components/Widgets/SearchBar/SearchBar
 msgid "search_map_searchable_text_button"
@@ -3244,6 +3264,16 @@ msgstr ""
 msgid "search_map_title"
 msgstr ""
 
+#. Default: "Tutti i comuni"
+#: components/Blocks/SearchMap/Body
+msgid "search_mapall_cities"
+msgstr ""
+
+#. Default: "Tutti i distretti"
+#: components/Blocks/SearchMap/Body
+msgid "search_mapall_distretti"
+msgstr ""
+
 #. Default: "Tutti"
 #: components/Blocks/SearchMap/Body
 msgid "search_mapall_subjects"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "io-sanita-theme",
-  "version": "2.31.3",
+  "version": "2.32.0",
   "description": "io-sanita-theme: Volto add-on",
   "main": "src/index.js",
   "license": "MIT",

package/src/components/Blocks/SearchMap/Body.jsx

@@ -70,6 +70,22 @@ const messages = defineMessages({
     id: 'search_mapremove_all_subjects',
     defaultMessage: 'Mostra tutte le categorie',
   },
+  all_cities: {
+    id: 'search_mapall_cities',
+    defaultMessage: 'Tutti i comuni',
+  },
+  all_distretti: {
+    id: 'search_mapall_distretti',
+    defaultMessage: 'Tutti i distretti',
+  },
+  label_city: {
+    id: 'search_map_label_city',
+    defaultMessage: 'Comune',
+  },
+  label_distretto: {
+    id: 'search_map_label_distretto',
+    defaultMessage: 'Distretto',
+  },
 });
 
 const LeafIcon = (options, item) => {
@@ -128,9 +144,13 @@ const SearchMapBody = ({ data, id, path, properties, block, inEditMode }) => {
   const [filters, setFilters] = useState({
     searchableText: '',
     subjects: new Set(),
+    city: '',
+    distretto: '',
   });
   const [markers, setMarkers] = useState([]);
   const [subjects, setSubjects] = useState(new Set());
+  const [cities, setCities] = useState(new Set());
+  const [distretti, setDistretti] = useState(new Set());
   const [rendered_items, setRenderedItems] = useState([]);
 
   const querystringResults = useSelector((state) => {
@@ -146,6 +166,8 @@ const SearchMapBody = ({ data, id, path, properties, block, inEditMode }) => {
   const doSearch = () => {
     //default filtes
     setSubjects(new Set());
+    setCities(new Set());
+    setDistretti(new Set());
     setCurrentPage(1);
 
     let query = [
@@ -195,6 +217,22 @@ const SearchMapBody = ({ data, id, path, properties, block, inEditMode }) => {
       });
     }
 
+    if (filters.city) {
+      query.push({
+        i: 'city',
+        o: 'plone.app.querystring.operation.selection.is',
+        v: [filters.city],
+      });
+    }
+
+    if (filters.distretto) {
+      query.push({
+        i: 'distretto',
+        o: 'plone.app.querystring.operation.selection.is',
+        v: [filters.distretto],
+      });
+    }
+
     dispatch(
       getQueryStringResults(
         subsite ? flattenToAppURL(subsite['@id']) : '',
@@ -204,6 +242,8 @@ const SearchMapBody = ({ data, id, path, properties, block, inEditMode }) => {
             'struttura_ricevimento',
             'struttura_in_cui_opera',
             'incarico_metadata',
+            'city',
+            'distretto',
           ], //'_all',
           query: query,
           b_size: b_size,
@@ -284,6 +324,26 @@ const SearchMapBody = ({ data, id, path, properties, block, inEditMode }) => {
     }
   };
 
+  const calculateCities = () => {
+    if (cities.size === 0) {
+      let vals = new Set();
+      items.forEach((item) => {
+        if (item.city) vals.add(item.city);
+      });
+      setCities(vals);
+    }
+  };
+
+  const calculateDistretti = () => {
+    if (distretti.size === 0) {
+      let vals = new Set();
+      items.forEach((item) => {
+        if (item.distretto) vals.add(item.distretto);
+      });
+      setDistretti(vals);
+    }
+  };
+
   useEffect(() => {
     setItems(resultsReducer(resultItems));
   }, [resultItems]);
@@ -291,6 +351,8 @@ const SearchMapBody = ({ data, id, path, properties, block, inEditMode }) => {
   useEffect(() => {
     calculateMarkers();
     calculateSubjects();
+    calculateCities();
+    calculateDistretti();
   }, [items]);
 
   useEffect(() => {
@@ -372,6 +434,71 @@ const SearchMapBody = ({ data, id, path, properties, block, inEditMode }) => {
                     </Col>
                   </Row>
                 )}
+                {((data.show_city && cities.size > 0) ||
+                  (data.show_distretto && distretti.size > 0)) && (
+                  <Row className="pb-3 g-2">
+                    {data.show_city && cities.size > 0 && (
+                      <Col xs="auto">
+                        <label
+                          htmlFor={block_id + '-city-select'}
+                          className="form-label"
+                        >
+                          {intl.formatMessage(messages.label_city)}
+                        </label>
+                        <select
+                          id={block_id + '-city-select'}
+                          className="form-select"
+                          value={filters.city}
+                          aria-controls={results_region_id}
+                          onChange={(e) =>
+                            setFilters({ ...filters, city: e.target.value })
+                          }
+                        >
+                          <option value="">
+                            {intl.formatMessage(messages.all_cities)}
+                          </option>
+                          {[...cities].sort().map((c) => (
+                            <option key={c} value={c}>
+                              {c}
+                            </option>
+                          ))}
+                        </select>
+                      </Col>
+                    )}
+                    {data.show_distretto && distretti.size > 0 && (
+                      <Col xs="auto">
+                        <label
+                          htmlFor={block_id + '-distretto-select'}
+                          className="form-label"
+                        >
+                          {intl.formatMessage(messages.label_distretto)}
+                        </label>
+                        <select
+                          id={block_id + '-distretto-select'}
+                          className="form-select"
+                          value={filters.distretto}
+                          aria-controls={results_region_id}
+                          onChange={(e) =>
+                            setFilters({
+                              ...filters,
+                              distretto: e.target.value,
+                            })
+                          }
+                        >
+                          <option value="">
+                            {intl.formatMessage(messages.all_distretti)}
+                          </option>
+                          {[...distretti].sort().map((d) => (
+                            <option key={d} value={d}>
+                              {d}
+                            </option>
+                          ))}
+                        </select>
+                      </Col>
+                    )}
+                  </Row>
+                )}
+
                 {data.show_types && subjects.size > 0 && (
                   <div className="subjects pb-3">
                     {/*Chip 'tutti'*/}

package/src/components/Blocks/SearchMap/schema.js

@@ -17,6 +17,14 @@ const messages = defineMessages({
     id: 'search_map_Show types',
     defaultMessage: 'Mostra i filtri per tipologia',
   },
+  show_city: {
+    id: 'search_map_Show city',
+    defaultMessage: 'Mostra il filtro per comune',
+  },
+  show_distretto: {
+    id: 'search_map_Show distretto',
+    defaultMessage: 'Mostra il filtro per distretto',
+  },
   portal_type: {
     id: 'search_map_ct',
     defaultMessage: 'Tipo di contenuto',
@@ -39,7 +47,9 @@ export function SearchMapSchema({ formData, intl }) {
           'path',
           'portal_type',
           'show_search_bar',
-          ...(formData.portal_type === 'Struttura' ? ['show_types'] : []),
+          ...(formData.portal_type === 'Struttura'
+            ? ['show_types', 'show_city', 'show_distretto']
+            : []),
         ],
       },
     ],
@@ -71,6 +81,14 @@ export function SearchMapSchema({ formData, intl }) {
         title: intl.formatMessage(messages.show_types),
         type: 'boolean',
       },
+      show_city: {
+        title: intl.formatMessage(messages.show_city),
+        type: 'boolean',
+      },
+      show_distretto: {
+        title: intl.formatMessage(messages.show_distretto),
+        type: 'boolean',
+      },
     },
     required: [],
   };

package/src/components/Blocks/SearchMap/search-map.scss

@@ -9,6 +9,7 @@
     .subjects {
       display: flex;
       overflow: scroll;
+      flex-wrap: wrap;
       button {
         flex: 0 0 auto;
       }

package/src/customizations/@plone/volto-slate/blocks/Table/TableBlockEdit.jsx

@@ -0,0 +1,548 @@
+/**
+ * Slate Table block editor.
+ * @module volto-slate/blocks/Table/Edit
+ */
+
+// Customizations:
+// prevent the submit of the form when adding a row o column from the toolbar
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import isEmpty from 'lodash/isEmpty';
+import map from 'lodash/map';
+import remove from 'lodash/remove';
+import { Button, Table } from 'semantic-ui-react';
+import cx from 'classnames';
+import { defineMessages, injectIntl } from 'react-intl';
+
+import Cell from '@plone/volto-slate/blocks/Table/Cell.jsx';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
+import TableSchema from '@plone/volto-slate/blocks/Table//schema.js';
+
+import rowBeforeSVG from '@plone/volto/icons/row-before.svg';
+import rowAfterSVG from '@plone/volto/icons/row-after.svg';
+import colBeforeSVG from '@plone/volto/icons/column-before.svg';
+import colAfterSVG from '@plone/volto/icons/column-after.svg';
+import rowDeleteSVG from '@plone/volto/icons/row-delete.svg';
+import colDeleteSVG from '@plone/volto/icons/column-delete.svg';
+
+const getId = () => Math.floor(Math.random() * Math.pow(2, 24)).toString(32);
+
+function getEmptyParagraph() {
+  return [{ type: 'p', children: [{ text: '' }] }];
+}
+
+const emptyCell = (type = 'data') => ({
+  key: getId(),
+  type: type,
+  value: getEmptyParagraph(),
+});
+
+const emptyRow = (cells) => ({
+  key: getId(),
+  cells: map(cells, () => emptyCell()),
+});
+
+const initialTable = {
+  hideHeaders: false,
+  fixed: true,
+  compact: false,
+  basic: false,
+  celled: true,
+  inverted: false,
+  striped: false,
+  rows: [
+    {
+      key: getId(),
+      cells: [
+        { key: getId(), type: 'header', value: getEmptyParagraph() },
+        { key: getId(), type: 'header', value: getEmptyParagraph() },
+      ],
+    },
+    {
+      key: getId(),
+      cells: [
+        { key: getId(), type: 'data', value: getEmptyParagraph() },
+        { key: getId(), type: 'data', value: getEmptyParagraph() },
+      ],
+    },
+  ],
+};
+
+const messages = defineMessages({
+  insertRowBefore: {
+    id: 'Insert row before',
+    defaultMessage: 'Insert row before',
+  },
+  insertRowAfter: {
+    id: 'Insert row after',
+    defaultMessage: 'Insert row after',
+  },
+  deleteRow: {
+    id: 'Delete row',
+    defaultMessage: 'Delete row',
+  },
+  insertColBefore: {
+    id: 'Insert col before',
+    defaultMessage: 'Insert col before',
+  },
+  insertColAfter: {
+    id: 'Insert col after',
+    defaultMessage: 'Insert col after',
+  },
+  deleteCol: {
+    id: 'Delete col',
+    defaultMessage: 'Delete col',
+  },
+  left: { id: 'Left', defaultMessage: 'Left' },
+  center: { id: 'Center', defaultMessage: 'Center' },
+  right: { id: 'Right', defaultMessage: 'Right' },
+  bottom: { id: 'Bottom', defaultMessage: 'Bottom' },
+  middle: { id: 'Middle', defaultMessage: 'Middle' },
+  top: { id: 'Top', defaultMessage: 'Top' },
+});
+
+class Edit extends Component {
+  static propTypes = {
+    data: PropTypes.objectOf(PropTypes.any).isRequired,
+    detached: PropTypes.bool,
+    index: PropTypes.number.isRequired,
+    selected: PropTypes.bool.isRequired,
+    block: PropTypes.string.isRequired,
+    onAddBlock: PropTypes.func.isRequired,
+    onChangeBlock: PropTypes.func.isRequired,
+    onDeleteBlock: PropTypes.func.isRequired,
+    onInsertBlock: PropTypes.func.isRequired,
+    onMutateBlock: PropTypes.func.isRequired,
+    onFocusPreviousBlock: PropTypes.func.isRequired,
+    onFocusNextBlock: PropTypes.func.isRequired,
+    onSelectBlock: PropTypes.func.isRequired,
+  };
+
+  static defaultProps = {
+    detached: false,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      headers: [],
+      rows: {},
+      selected: { row: 0, cell: 0 },
+      isClient: false,
+    };
+    this.onChange = this.onChange.bind(this);
+    this.onSelectCell = this.onSelectCell.bind(this);
+    this.onInsertRowBefore = this.onInsertRowBefore.bind(this);
+    this.onInsertRowAfter = this.onInsertRowAfter.bind(this);
+    this.onInsertColBefore = this.onInsertColBefore.bind(this);
+    this.onInsertColAfter = this.onInsertColAfter.bind(this);
+    this.onDeleteRow = this.onDeleteRow.bind(this);
+    this.onDeleteCol = this.onDeleteCol.bind(this);
+    this.onChangeCell = this.onChangeCell.bind(this);
+    this.toggleCellType = this.toggleCellType.bind(this);
+  }
+
+  componentDidMount() {
+    if (!this.props.data.table || isEmpty(this.props.data.table)) {
+      this.props.onChangeBlock(this.props.block, {
+        ...this.props.data,
+        table: initialTable,
+      });
+    }
+    this.setState({ isClient: true });
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (!nextProps.data.table || isEmpty(nextProps.data.table)) {
+      this.props.onChangeBlock(nextProps.block, {
+        ...nextProps.data,
+        table: initialTable,
+      });
+    }
+  }
+
+  onChange(id, value) {
+    const table = this.props.data.table;
+    this.props.onChangeBlock(this.props.block, {
+      ...this.props.data,
+      table: { ...table, [id]: value },
+    });
+  }
+
+  onSelectCell(row, cell) {
+    this.setState({ selected: { row, cell } });
+  }
+
+  onChangeCell(row, cell, slateValue) {
+    const table = JSON.parse(JSON.stringify(this.props.data.table));
+    table.rows[row].cells[cell] = {
+      ...table.rows[row].cells[cell],
+      value: JSON.parse(JSON.stringify(slateValue)),
+    };
+    this.props.onChangeBlock(this.props.block, {
+      ...this.props.data,
+      table,
+    });
+  }
+
+  toggleCellType() {
+    const table = { ...this.props.data.table };
+    let type =
+      table.rows[this.state.selected.row].cells[this.state.selected.cell].type;
+    table.rows[this.state.selected.row].cells[this.state.selected.cell].type =
+      type === 'header' ? 'data' : 'header';
+    this.props.onChangeBlock(this.props.block, {
+      ...this.props.data,
+      table,
+    });
+  }
+
+  onInsertRowBefore(ev) {
+    ev.preventDefault();
+    ev.stopPropagation();
+    const table = this.props.data.table;
+    this.props.onChangeBlock(this.props.block, {
+      ...this.props.data,
+      table: {
+        ...table,
+        rows: [
+          ...table.rows.slice(0, this.state.selected.row),
+          emptyRow(table.rows[0].cells),
+          ...table.rows.slice(this.state.selected.row),
+        ],
+      },
+    });
+    this.setState({
+      selected: {
+        row: this.state.selected.row + 1,
+        cell: this.state.selected.cell,
+      },
+    });
+  }
+
+  onInsertRowAfter(ev) {
+    ev.preventDefault();
+    ev.stopPropagation();
+    const table = this.props.data.table;
+    this.props.onChangeBlock(this.props.block, {
+      ...this.props.data,
+      table: {
+        ...table,
+        rows: [
+          ...table.rows.slice(0, this.state.selected.row + 1),
+          emptyRow(table.rows[0].cells),
+          ...table.rows.slice(this.state.selected.row + 1),
+        ],
+      },
+    });
+  }
+
+  onInsertColBefore(ev) {
+    ev.preventDefault();
+    ev.stopPropagation();
+    const table = this.props.data.table;
+    this.props.onChangeBlock(this.props.block, {
+      ...this.props.data,
+      table: {
+        ...table,
+        rows: map(table.rows, (row, index) => ({
+          ...row,
+          cells: [
+            ...row.cells.slice(0, this.state.selected.cell),
+            emptyCell(table.rows[index].cells[this.state.selected.cell].type),
+            ...row.cells.slice(this.state.selected.cell),
+          ],
+        })),
+      },
+    });
+    this.setState({
+      selected: {
+        row: this.state.selected.row,
+        cell: this.state.selected.cell + 1,
+      },
+    });
+  }
+
+  onInsertColAfter(ev) {
+    ev.preventDefault();
+    ev.stopPropagation();
+    const table = this.props.data.table;
+    this.props.onChangeBlock(this.props.block, {
+      ...this.props.data,
+      table: {
+        ...table,
+        rows: map(table.rows, (row, index) => ({
+          ...row,
+          cells: [
+            ...row.cells.slice(0, this.state.selected.cell + 1),
+            emptyCell(table.rows[index].cells[this.state.selected.cell].type),
+            ...row.cells.slice(this.state.selected.cell + 1),
+          ],
+        })),
+      },
+    });
+  }
+
+  onDeleteCol(ev) {
+    ev.preventDefault();
+    ev.stopPropagation();
+    const table = this.props.data.table;
+
+    if (this.state.selected.cell === table.rows[0].cells.length - 1) {
+      this.setState({
+        selected: {
+          row: this.state.selected.row,
+          cell: this.state.selected.cell - 1,
+        },
+      });
+    }
+
+    this.props.onChangeBlock(this.props.block, {
+      ...this.props.data,
+      table: {
+        ...table,
+        rows: map(table.rows, (row) => ({
+          ...row,
+          cells: remove(
+            row.cells,
+            (cell, index) => index !== this.state.selected.cell,
+          ),
+        })),
+      },
+    });
+  }
+
+  onDeleteRow(ev) {
+    ev.preventDefault();
+    ev.stopPropagation();
+    const table = this.props.data.table;
+
+    if (this.state.selected.row === table.rows.length - 1) {
+      this.setState({
+        selected: {
+          row: this.state.selected.row - 1,
+          cell: this.state.selected.cell,
+        },
+      });
+    }
+
+    this.props.onChangeBlock(this.props.block, {
+      ...this.props.data,
+      table: {
+        ...table,
+        rows: remove(
+          table.rows,
+          (row, index) => index !== this.state.selected.row,
+        ),
+      },
+    });
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.selected && !this.props.selected) {
+      this.setState({ selected: null });
+    }
+  }
+
+  render() {
+    const headers = this.props.data.table?.rows?.[0]?.cells || [];
+    const rows =
+      this.props.data.table?.rows?.filter((_, index) => index > 0) || [];
+    const schema = TableSchema(this.props);
+
+    return (
+      <div className={cx('block table', { selected: this.props.selected })}>
+        {this.props.selected && (
+          <div className="toolbar">
+            <Button.Group>
+              <Button
+                icon
+                basic
+                onClick={this.onInsertRowBefore}
+                title={this.props.intl.formatMessage(messages.insertRowBefore)}
+                aria-label={this.props.intl.formatMessage(
+                  messages.insertRowBefore,
+                )}
+              >
+                <Icon name={rowBeforeSVG} size="24px" />
+              </Button>
+            </Button.Group>
+            <Button.Group>
+              <Button
+                icon
+                basic
+                onClick={this.onInsertRowAfter}
+                title={this.props.intl.formatMessage(messages.insertRowAfter)}
+                aria-label={this.props.intl.formatMessage(
+                  messages.insertRowAfter,
+                )}
+              >
+                <Icon name={rowAfterSVG} size="24px" />
+              </Button>
+            </Button.Group>
+            <Button.Group>
+              <Button
+                icon
+                basic
+                onClick={this.onDeleteRow}
+                disabled={this.props.data.table?.rows?.length === 1}
+                title={this.props.intl.formatMessage(messages.deleteRow)}
+                aria-label={this.props.intl.formatMessage(messages.deleteRow)}
+              >
+                <Icon name={rowDeleteSVG} size="24px" />
+              </Button>
+            </Button.Group>
+            <Button.Group>
+              <Button
+                icon
+                basic
+                onClick={this.onInsertColBefore}
+                title={this.props.intl.formatMessage(messages.insertColBefore)}
+                aria-label={this.props.intl.formatMessage(
+                  messages.insertColBefore,
+                )}
+              >
+                <Icon name={colBeforeSVG} size="24px" />
+              </Button>
+            </Button.Group>
+            <Button.Group>
+              <Button
+                icon
+                basic
+                onClick={this.onInsertColAfter}
+                title={this.props.intl.formatMessage(messages.insertColAfter)}
+                aria-label={this.props.intl.formatMessage(
+                  messages.insertColAfter,
+                )}
+              >
+                <Icon name={colAfterSVG} size="24px" />
+              </Button>
+            </Button.Group>
+            <Button.Group>
+              <Button
+                icon
+                basic
+                onClick={this.onDeleteCol}
+                disabled={this.props.data.table?.rows?.[0].cells.length === 1}
+                title={this.props.intl.formatMessage(messages.deleteCol)}
+                aria-label={this.props.intl.formatMessage(messages.deleteCol)}
+              >
+                <Icon name={colDeleteSVG} size="24px" />
+              </Button>
+            </Button.Group>
+          </div>
+        )}
+        {this.props.data.table && (
+          <Table
+            fixed={this.props.data.table.fixed}
+            compact={this.props.data.table.compact}
+            basic={this.props.data.table.basic ? 'very' : false}
+            celled={this.props.data.table.celled}
+            inverted={this.props.data.table.inverted}
+            striped={this.props.data.table.striped}
+            className="slate-table-block"
+          >
+            {!this.props.data.table.hideHeaders ? (
+              <Table.Header>
+                <Table.Row textAlign="left">
+                  {headers.map((cell, cellIndex) => (
+                    <Table.HeaderCell
+                      key={cell.key}
+                      textAlign="left"
+                      verticalAlign="middle"
+                    >
+                      <Cell
+                        value={cell.value}
+                        row={0}
+                        cell={cellIndex}
+                        onSelectCell={this.onSelectCell}
+                        selected={
+                          this.props.selected &&
+                          this.state.selected &&
+                          0 === this.state.selected.row &&
+                          cellIndex === this.state.selected.cell
+                        }
+                        selectedCell={this.state.selected}
+                        isTableBlockSelected={this.props.selected}
+                        onAddBlock={this.props.onAddBlock}
+                        onSelectBlock={this.props.onSelectBlock}
+                        onChange={this.onChangeCell}
+                        index={this.props.index}
+                      />
+                    </Table.HeaderCell>
+                  ))}
+                </Table.Row>
+              </Table.Header>
+            ) : (
+              ''
+            )}
+            <Table.Body>
+              {map(rows, (row, rowIndex) => (
+                <Table.Row key={row.key}>
+                  {map(row.cells, (cell, cellIndex) => (
+                    <Table.Cell
+                      key={cell.key}
+                      textAlign="left"
+                      verticalAlign="middle"
+                      className={
+                        this.props.selected &&
+                        this.state.selected &&
+                        rowIndex + 1 === this.state.selected.row &&
+                        cellIndex === this.state.selected.cell &&
+                        this.props.selected
+                          ? 'selected'
+                          : ''
+                      }
+                    >
+                      <Cell
+                        value={cell.value}
+                        row={rowIndex + 1}
+                        cell={cellIndex}
+                        onSelectCell={this.onSelectCell}
+                        selected={
+                          this.props.selected &&
+                          this.state.selected &&
+                          rowIndex + 1 === this.state.selected.row &&
+                          cellIndex === this.state.selected.cell
+                        }
+                        selectedCell={this.state.selected}
+                        isTableBlockSelected={this.props.selected}
+                        onAddBlock={this.props.onAddBlock}
+                        onSelectBlock={this.props.onSelectBlock}
+                        onChange={this.onChangeCell}
+                        index={this.props.index}
+                      />
+                    </Table.Cell>
+                  ))}
+                </Table.Row>
+              ))}
+            </Table.Body>
+          </Table>
+        )}
+        {this.props.selected && this.state.selected && this.state.isClient && (
+          <SidebarPortal selected={this.props.selected}>
+            <BlockDataForm
+              schema={schema}
+              title={schema.title}
+              onChangeField={(id, value) => {
+                this.props.onChangeBlock(this.props.block, {
+                  ...this.props.data,
+                  [id]: value,
+                });
+              }}
+              onChangeBlock={this.props.onChangeBlock}
+              formData={this.props.data}
+              block={this.props.block}
+              blocksConfig={this.props.blocksConfig}
+            />
+          </SidebarPortal>
+        )}
+      </div>
+    );
+  }
+}
+
+export default injectIntl(Edit);