opentiny 6.9.21 → 6.9.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opentiny",
-  "version": "6.9.21",
+  "version": "6.9.23",
   "repository": {
     "type": "git",
     "url": "https://github.com/mild-blue/opentiny"

package/plugins/table/plugin.js

@@ -948,9 +948,9 @@
     var global$1 = tinymce.util.Tools.resolve('tinymce.Env');
 
     const defaultTableToolbar = 'tableprops tabledelete | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol';
-    const defaultTableCellInputs = 'width celltype scope halign valign class';
-    const defaultTableRowInputs = 'type align height class';
-    const defaultTableInputs = 'width height cellspacing cellpadding border caption align class';
+    const defaultTableCellInputs = 'width height celltype scope halign valign backgroundcolor class';
+    const defaultTableRowInputs = 'type align backgroundcolor class';
+    const defaultTableInputs = 'width height cellspacing cellpadding border backgroundcolor caption align class';
     const defaultCellBorderWidths = range(5, i => {
       const size = `${ i + 1 }px`;
       return {
@@ -1067,6 +1067,26 @@
         processor: 'string',
         default: defaultTableToolbar
       });
+      registerOption('table_contextmenu', {
+        processor: 'string[]',
+        default: []
+      });
+      registerOption('table_contextmenu_flatten', {
+        processor: 'boolean',
+        default: false
+      });
+      registerOption('table_row_contextmenu', {
+        processor: 'string[]',
+        default: []
+      });
+      registerOption('table_column_contextmenu', {
+        processor: 'string[]',
+        default: []
+      });
+      registerOption('table_cell_contextmenu', {
+        processor: 'string[]',
+        default: []
+      });
       registerOption('table_background_color_map', {
         processor: 'object[]',
         default: []
@@ -1091,6 +1111,11 @@
     const getRowClassList = option('table_row_class_list');
     const getTableClassList = option('table_class_list');
     const getToolbar = option('table_toolbar');
+    const getTableContextMenu = option('table_contextmenu');
+    const getTableContextMenuFlatten = option('table_contextmenu_flatten');
+    const getTableRowContextMenu = option('table_row_contextmenu');
+    const getTableColumnContextMenu = option('table_column_contextmenu');
+    const getTableCellContextMenu = option('table_cell_contextmenu');
     const getTableBackgroundColorMap = option('table_background_color_map');
     const getTableBorderColorMap = option('table_border_color_map');
     const isPixelsForced = editor => getTableSizingMode(editor) === 'fixed';
@@ -1105,6 +1130,11 @@
       const defaultAttributes = options.get('table_default_attributes');
       return options.isSet('table_default_attributes') ? defaultAttributes : determineDefaultAttributes(editor, defaultAttributes);
     };
+    const isTableContextMenuSet = editor => editor.options.isSet('table_contextmenu');
+    const isTableContextMenuFlatten = editor => getTableContextMenuFlatten(editor);
+    const isTableRowContextMenuSet = editor => editor.options.isSet('table_row_contextmenu');
+    const isTableColumnContextMenuSet = editor => editor.options.isSet('table_column_contextmenu');
+    const isTableCellContextMenuSet = editor => editor.options.isSet('table_cell_contextmenu');
 
     const isWithin = (bounds, detail) => {
       return detail.column >= bounds.startCol && detail.column + detail.colspan - 1 <= bounds.finishCol && detail.row >= bounds.startRow && detail.row + detail.rowspan - 1 <= bounds.finishRow;
@@ -1676,6 +1706,48 @@
         return isNotEmpty(item.value) ? [item] : [];
       }
     });
+    const filterContextMenu = (menu, allowed) => {
+      if (allowed.length === 0) {
+        return '';
+      }
+      const allowedSet = new Set(allowed);
+      const filteredGroups = menu.split('|').map(group => group.trim()).map(group => group.length === 0 ? [] : group.split(/\s+/).filter(item => allowedSet.has(item))).filter(items => items.length > 0).map(items => items.join(' '));
+      return filteredGroups.join(' | ');
+    };
+    const flattenContextMenu = (menu, replacements) => {
+      const groups = menu.split('|').map(group => group.trim()).filter(group => group.length > 0);
+      const flattened = [];
+      const addGroup = items => {
+        if (items.length > 0) {
+          flattened.push(items.join(' '));
+        }
+      };
+      each(groups, group => {
+        const tokens = group.split(/\s+/).filter(token => token.length > 0);
+        let current = [];
+        each(tokens, token => {
+          const replacement = replacements[token];
+          if (replacement === undefined) {
+            current.push(token);
+          } else if (replacement.length === 0) {
+            return;
+          } else {
+            const replacementGroups = replacement.split('|').map(repGroup => repGroup.trim()).filter(repGroup => repGroup.length > 0);
+            if (replacementGroups.length === 1) {
+              current = current.concat(replacementGroups[0].split(/\s+/).filter(item => item.length > 0));
+            } else {
+              addGroup(current);
+              current = [];
+              each(replacementGroups, repGroup => {
+                addGroup(repGroup.split(/\s+/).filter(item => item.length > 0));
+              });
+            }
+          }
+        });
+        addGroup(current);
+      });
+      return flattened.join(' | ');
+    };
     const generateMenuItemsCallback = (editor, items, format, onAction) => callback => callback(buildMenuItems(editor, items, format, onAction));
     const buildColorMenu = (editor, colorList, style) => {
       const colorMap = map(colorList, entry => ({
@@ -1720,6 +1792,18 @@
         label: 'Width',
         tooltip: 'Cell width in pixels or percentage (e.g., 50px or 10%).'
       },
+      {
+        name: 'height',
+        type: 'input',
+        label: 'Height',
+        tooltip: 'Row height in pixels (e.g., 20px). If the height change does not apply to the row, remove the table height in Table Properties and try again.'
+      },
+      {
+        name: 'backgroundcolor',
+        type: 'colorinput',
+        label: 'Background color',
+        tooltip: 'Background color of the cell.'
+      },
       {
         name: 'celltype',
         type: 'listbox',
@@ -1817,16 +1901,6 @@
         return `Color of the outer border of the ${ dialogName }.`;
       }
     };
-    const getBackgroundColourTooltip = dialogName => {
-      switch (dialogName) {
-      case 'table':
-        return 'Changes the background color of all cells in the table, except for those set individually through Cell Properties or Row Properties.';
-      case 'row':
-        return 'Changes the background color of all cells in the row, except for those set individually through Cell Properties.';
-      case 'cell':
-        return `Background color of the cell.`;
-      }
-    };
     const getBorderWidthTooltip = dialogName => {
       switch (dialogName) {
       case 'table':
@@ -1856,12 +1930,6 @@
           type: 'colorinput',
           label: 'Border color',
           tooltip: getBorderColorTooltip(dialogName)
-        },
-        {
-          name: 'backgroundcolor',
-          type: 'colorinput',
-          label: 'Background color',
-          tooltip: getBackgroundColourTooltip(dialogName)
         }
       ];
       const borderWidth = {
@@ -1872,7 +1940,7 @@
       };
       const items = dialogName === 'cell' ? [borderWidth].concat(advTabItems) : advTabItems;
       return {
-        title: 'Advanced',
+        title: 'Border',
         name: 'advanced',
         items
       };
@@ -2199,7 +2267,6 @@
     const extractDataFromRowElement = (editor, elm, hasAdvancedRowTab) => {
       const dom = editor.dom;
       return {
-        height: dom.getStyle(elm, 'height') || dom.getAttrib(elm, 'height'),
         class: dom.getAttrib(elm, 'class', ''),
         type: getRowType(elm),
         align: getHAlignment(editor, elm),
@@ -2209,9 +2276,11 @@
     const extractDataFromCellElement = (editor, cell, hasAdvancedCellTab, column) => {
       const dom = editor.dom;
       const colElm = column.getOr(cell);
+      const rowElm = cell.parentElement;
       const getStyle = (element, style) => dom.getStyle(element, style) || dom.getAttrib(element, style);
       return {
         width: getStyle(colElm, 'width'),
+        height: rowElm ? dom.getStyle(rowElm, 'height') || dom.getAttrib(rowElm, 'height') : '',
         scope: dom.getAttrib(cell, 'scope'),
         celltype: getNodeName(cell),
         class: dom.getAttrib(cell, 'class', ''),
@@ -2265,6 +2334,7 @@
     };
     const applyStyleData$1 = (editor, cells, data, wasChanged) => {
       const isSingleCell = cells.length === 1;
+      const rowsSeen = new Set();
       each(cells, item => {
         const cellElm = item.element;
         const shouldOverrideCurrentValue = isSingleCell ? always : wasChanged;
@@ -2274,6 +2344,16 @@
         if (hasAdvancedCellTab(editor)) {
           updateAdvancedProps$1(modifier, data, shouldOverrideCurrentValue);
         }
+        if (shouldOverrideCurrentValue('height')) {
+          const rowElm = cellElm.parentElement;
+          if (rowElm !== null && !rowsSeen.has(rowElm)) {
+            rowsSeen.add(rowElm);
+            editor.dom.setStyle(rowElm, 'height', addPxSuffix(data.height));
+            if (wasChanged('height')) {
+              Array.from(rowElm.cells).forEach(cell => editor.dom.setStyle(cell, 'height', null));
+            }
+          }
+        }
         if (wasChanged('halign')) {
           setAlign(editor, cellElm, data.halign);
         }
@@ -2419,10 +2499,10 @@
         ]
       },
       {
-        label: 'Height',
-        name: 'height',
-        type: 'input',
-        tooltip: 'Row height in pixels (e.g., 20px).'
+        name: 'backgroundcolor',
+        type: 'colorinput',
+        label: 'Background color',
+        tooltip: 'Changes the background color of all cells in the row, except for those set individually through Cell Properties.'
       }
     ];
     const getItems$1 = editor => {
@@ -2440,9 +2520,6 @@
       if (shouldUpdate('class') && data.class !== 'mce-no-match') {
         modifier.setAttrib('class', data.class);
       }
-      if (shouldUpdate('height')) {
-        modifier.setStyle('height', addPxSuffix(data.height));
-      }
     };
     const updateAdvancedProps = (modifier, data, shouldUpdate) => {
       if (shouldUpdate('backgroundcolor')) {
@@ -2459,17 +2536,11 @@
       const isSingleRow = rows.length === 1;
       const shouldOverrideCurrentValue = isSingleRow ? always : wasChanged;
       each(rows, rowElm => {
-        const rowCells = children$1(SugarElement.fromDom(rowElm), 'td,th');
         const modifier = DomModifier.normal(editor, rowElm);
         updateSimpleProps(modifier, data, shouldOverrideCurrentValue);
         if (hasAdvancedRowTab(editor)) {
           updateAdvancedProps(modifier, data, shouldOverrideCurrentValue);
         }
-        if (wasChanged('height')) {
-          each(rowCells, cell => {
-            editor.dom.setStyle(cell.dom, 'height', null);
-          });
-        }
         if (wasChanged('align')) {
           setAlign(editor, rowElm, data.align);
         }
@@ -2602,6 +2673,12 @@
           label: 'Border width',
           tooltip: 'Width of the border for the entire table and individual cells.'
         },
+        {
+          name: 'backgroundcolor',
+          type: 'colorinput',
+          label: 'Background color',
+          tooltip: 'Changes the background color of all cells in the table, except for those set individually through Cell Properties or Row Properties.'
+        },
         {
           type: 'label',
           label: 'Caption',
@@ -3023,12 +3100,40 @@
         editor.off('NodeChange', nodeChanged);
       };
     };
+    const getFilteredRowMenuItems = editor => {
+      const rowMenuItems = 'tableinsertrowbefore tableinsertrowafter tabledeleterow tablerowprops | tablecutrow tablecopyrow tablepasterowbefore tablepasterowafter';
+      return isTableRowContextMenuSet(editor) ? filterContextMenu(rowMenuItems, getTableRowContextMenu(editor)) : rowMenuItems;
+    };
+    const getFilteredColumnMenuItems = editor => {
+      const columnMenuItems = 'tableinsertcolumnbefore tableinsertcolumnafter tabledeletecolumn | tablecutcolumn tablecopycolumn tablepastecolumnbefore tablepastecolumnafter';
+      return isTableColumnContextMenuSet(editor) ? filterContextMenu(columnMenuItems, getTableColumnContextMenu(editor)) : columnMenuItems;
+    };
+    const getFilteredCellMenuItems = editor => {
+      const cellMenuItems = 'tablecellprops tablemergecells tablesplitcells';
+      return isTableCellContextMenuSet(editor) ? filterContextMenu(cellMenuItems, getTableCellContextMenu(editor)) : cellMenuItems;
+    };
+    const getTableMenuItems = editor => {
+      const menu = 'inserttable | cell row column | advtablesort | tableprops deletetable';
+      const filteredMenu = isTableContextMenuSet(editor) ? filterContextMenu(menu, [
+        'inserttable',
+        ...getTableContextMenu(editor)
+      ]) : menu;
+      if (isTableContextMenuFlatten(editor) && filteredMenu.length > 0) {
+        return flattenContextMenu(filteredMenu, {
+          cell: getFilteredCellMenuItems(editor),
+          row: getFilteredRowMenuItems(editor),
+          column: getFilteredColumnMenuItems(editor)
+        });
+      } else {
+        return filteredMenu;
+      }
+    };
     const addButtons = (editor, selectionTargets) => {
       editor.ui.registry.addMenuButton('table', {
         tooltip: 'Table',
         icon: 'table',
         onSetup: onSetupEditable$1(editor),
-        fetch: callback => callback('inserttable | cell row column | advtablesort | tableprops deletetable')
+        fetch: callback => callback(getTableMenuItems(editor))
       });
       const cmd = command => () => editor.execCommand(command);
       const addButtonIfRegistered = (name, spec) => {
@@ -3444,37 +3549,53 @@
         onSetup: selectionTargets.onSetupTable,
         command: 'mceTableDelete'
       });
-      if (contains(hasRowMenuItems, true)) {
+      const rowMenuItems = 'tableinsertrowbefore tableinsertrowafter tabledeleterow tablerowprops | tablecutrow tablecopyrow tablepasterowbefore tablepasterowafter';
+      const filteredRowMenuItems = isTableRowContextMenuSet(editor) ? filterContextMenu(rowMenuItems, getTableRowContextMenu(editor)) : rowMenuItems;
+      if (contains(hasRowMenuItems, true) && filteredRowMenuItems.length > 0) {
         editor.ui.registry.addNestedMenuItem('row', {
           type: 'nestedmenuitem',
           text: 'Row',
-          getSubmenuItems: constant('tableinsertrowbefore tableinsertrowafter tabledeleterow tablerowprops | tablecutrow tablecopyrow tablepasterowbefore tablepasterowafter')
+          getSubmenuItems: constant(filteredRowMenuItems)
         });
       }
-      if (contains(hasColumnMenuItems, true)) {
+      const columnMenuItems = 'tableinsertcolumnbefore tableinsertcolumnafter tabledeletecolumn | tablecutcolumn tablecopycolumn tablepastecolumnbefore tablepastecolumnafter';
+      const filteredColumnMenuItems = isTableColumnContextMenuSet(editor) ? filterContextMenu(columnMenuItems, getTableColumnContextMenu(editor)) : columnMenuItems;
+      if (contains(hasColumnMenuItems, true) && filteredColumnMenuItems.length > 0) {
         editor.ui.registry.addNestedMenuItem('column', {
           type: 'nestedmenuitem',
           text: 'Column',
-          getSubmenuItems: constant('tableinsertcolumnbefore tableinsertcolumnafter tabledeletecolumn | tablecutcolumn tablecopycolumn tablepastecolumnbefore tablepastecolumnafter')
+          getSubmenuItems: constant(filteredColumnMenuItems)
         });
       }
-      if (contains(hasCellMenuItems, true)) {
+      const cellMenuItems = 'tablecellprops tablemergecells tablesplitcells';
+      const filteredCellMenuItems = isTableCellContextMenuSet(editor) ? filterContextMenu(cellMenuItems, getTableCellContextMenu(editor)) : cellMenuItems;
+      if (contains(hasCellMenuItems, true) && filteredCellMenuItems.length > 0) {
         editor.ui.registry.addNestedMenuItem('cell', {
           type: 'nestedmenuitem',
           text: 'Cell',
-          getSubmenuItems: constant('tablecellprops tablemergecells tablesplitcells')
+          getSubmenuItems: constant(filteredCellMenuItems)
         });
       }
       editor.ui.registry.addContextMenu('table', {
         update: () => {
           selectionTargets.resetTargets();
-          return selectionTargets.targets().fold(constant(''), targets => {
+          const menu = selectionTargets.targets().fold(constant(''), targets => {
             if (name(targets.element) === 'caption') {
               return 'tableprops deletetable';
             } else {
               return 'cell row column | advtablesort | tableprops deletetable';
             }
           });
+          const filteredMenu = isTableContextMenuSet(editor) ? filterContextMenu(menu, getTableContextMenu(editor)) : menu;
+          if (isTableContextMenuFlatten(editor) && filteredMenu.length > 0) {
+            return flattenContextMenu(filteredMenu, {
+              cell: filteredCellMenuItems,
+              row: filteredRowMenuItems,
+              column: filteredColumnMenuItems
+            });
+          } else {
+            return filteredMenu;
+          }
         }
       });
       const tableClassList = filterNoneItem(getTableClassList(editor));