@tabler/core 1.0.0-beta20 → 1.0.0-beta21

package/dist/libs/tinymce/plugins/table/plugin.js

@@ -1,5 +1,5 @@
 /**
- * TinyMCE version 6.4.2 (2023-04-26)
+ * TinyMCE version 7.3.0 (2024-08-07)
  */
 
 (function () {
@@ -199,6 +199,14 @@
     };
     const has = (obj, key) => hasOwnProperty.call(obj, key);
     const hasNonNullableKey = (obj, key) => has(obj, key) && obj[key] !== undefined && obj[key] !== null;
+    const isEmpty$1 = r => {
+      for (const x in r) {
+        if (hasOwnProperty.call(r, x)) {
+          return false;
+        }
+      }
+      return true;
+    };
 
     const nativeIndexOf = Array.prototype.indexOf;
     const nativePush = Array.prototype.push;
@@ -449,8 +457,7 @@
     const firstChild = element => child$3(element, 0);
 
     const isShadowRoot = dos => isDocumentFragment(dos) && isNonNullable(dos.dom.host);
-    const supported = isFunction(Element.prototype.attachShadow) && isFunction(Node.prototype.getRootNode);
-    const getRootNode = supported ? e => SugarElement.fromDom(e.dom.getRootNode()) : documentOrOwner;
+    const getRootNode = e => SugarElement.fromDom(e.dom.getRootNode());
     const getShadowRoot = e => {
       const r = getRootNode(e);
       return isShadowRoot(r) ? Optional.some(r) : Optional.none();
@@ -1495,8 +1502,8 @@
       return hexColour(value);
     };
 
-    const rgbRegex = /^\s*rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)\s*$/i;
-    const rgbaRegex = /^\s*rgba\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d?(?:\.\d+)?)\s*\)\s*$/i;
+    const rgbRegex = /^\s*rgb\s*\(\s*(\d+)\s*[,\s]\s*(\d+)\s*[,\s]\s*(\d+)\s*\)\s*$/i;
+    const rgbaRegex = /^\s*rgba\s*\(\s*(\d+)\s*[,\s]\s*(\d+)\s*[,\s]\s*(\d+)\s*[,\s]\s*((?:\d?\.\d+|\d+)%?)\s*\)\s*$/i;
     const rgbaColour = (red, green, blue, alpha) => ({
       red,
       green,
@@ -1511,9 +1518,6 @@
       return rgbaColour(r, g, b, a);
     };
     const fromString = rgbaString => {
-      if (rgbaString === 'transparent') {
-        return Optional.some(rgbaColour(0, 0, 0, 0));
-      }
       const rgbMatch = rgbRegex.exec(rgbaString);
       if (rgbMatch !== null) {
         return Optional.some(fromStringValues(rgbMatch[1], rgbMatch[2], rgbMatch[3], '1'));
@@ -1613,6 +1617,18 @@
         };
       }
     });
+    const buildClassList = classList => {
+      if (!classList.length) {
+        return Optional.none();
+      }
+      return Optional.some(buildListItems([
+        {
+          text: 'Select...',
+          value: 'mce-no-match'
+        },
+        ...classList
+      ]));
+    };
     const buildMenuItems = (editor, items, format, onAction) => map(items, item => {
       const text = item.text || item.title;
       if (isListGroup(item)) {
@@ -1674,29 +1690,18 @@
       editor.execCommand('mceTableColType', false, { type: newType });
     };
 
-    const getClassList$1 = editor => {
-      const classes = buildListItems(getCellClassList(editor));
-      if (classes.length > 0) {
-        return Optional.some({
-          name: 'class',
-          type: 'listbox',
-          label: 'Class',
-          items: classes
-        });
-      }
-      return Optional.none();
-    };
+    const getClassList$1 = editor => buildClassList(getCellClassList(editor)).map(items => ({
+      name: 'class',
+      type: 'listbox',
+      label: 'Class',
+      items
+    }));
     const children = [
       {
         name: 'width',
         type: 'input',
         label: 'Width'
       },
-      {
-        name: 'height',
-        type: 'input',
-        label: 'Height'
-      },
       {
         name: 'celltype',
         type: 'listbox',
@@ -2032,7 +2037,7 @@
             const comparisonValue = baseData[key];
             if (comparisonValue !== '' && key === itemKey) {
               if (comparisonValue !== itemValue) {
-                baseData[key] = '';
+                baseData[key] = key === 'class' ? 'mce-no-match' : '';
               }
             }
           });
@@ -2138,7 +2143,6 @@
       const getStyle = (element, style) => dom.getStyle(element, style) || dom.getAttrib(element, style);
       return {
         width: getStyle(colElm, 'width'),
-        height: getStyle(cell, 'height'),
         scope: dom.getAttrib(cell, 'scope'),
         celltype: getNodeName(cell),
         class: dom.getAttrib(cell, 'class', ''),
@@ -2161,12 +2165,9 @@
       if (shouldUpdate('scope')) {
         modifier.setAttrib('scope', data.scope);
       }
-      if (shouldUpdate('class')) {
+      if (shouldUpdate('class') && data.class !== 'mce-no-match') {
         modifier.setAttrib('class', data.class);
       }
-      if (shouldUpdate('height')) {
-        modifier.setStyle('height', addPxSuffix(data.height));
-      }
       if (shouldUpdate('width')) {
         colModifier.setStyle('width', addPxSuffix(data.width));
       }
@@ -2289,18 +2290,12 @@
       });
     };
 
-    const getClassList = editor => {
-      const classes = buildListItems(getRowClassList(editor));
-      if (classes.length > 0) {
-        return Optional.some({
-          name: 'class',
-          type: 'listbox',
-          label: 'Class',
-          items: classes
-        });
-      }
-      return Optional.none();
-    };
+    const getClassList = editor => buildClassList(getRowClassList(editor)).map(items => ({
+      name: 'class',
+      type: 'listbox',
+      label: 'Class',
+      items
+    }));
     const formChildren = [
       {
         type: 'listbox',
@@ -2353,7 +2348,7 @@
     const getItems$1 = editor => formChildren.concat(getClassList(editor).toArray());
 
     const updateSimpleProps = (modifier, data, shouldUpdate) => {
-      if (shouldUpdate('class')) {
+      if (shouldUpdate('class') && data.class !== 'mce-no-match') {
         modifier.setAttrib('class', data.class);
       }
       if (shouldUpdate('height')) {
@@ -2375,11 +2370,17 @@
       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);
         }
@@ -2543,8 +2544,8 @@
           ]
         }];
       const classListItem = classes.length > 0 ? [{
-          type: 'listbox',
           name: 'class',
+          type: 'listbox',
           label: 'Class',
           items: classes
         }] : [];
@@ -2566,45 +2567,62 @@
         }
       }
     };
-    const applyDataToElement = (editor, tableElm, data) => {
+    const applyDataToElement = (editor, tableElm, data, shouldApplyOnCell) => {
       const dom = editor.dom;
       const attrs = {};
       const styles = {};
-      if (!isUndefined(data.class)) {
+      const shouldStyleWithCss$1 = shouldStyleWithCss(editor);
+      const hasAdvancedTableTab$1 = hasAdvancedTableTab(editor);
+      const borderIsZero = parseFloat(data.border) === 0;
+      if (!isUndefined(data.class) && data.class !== 'mce-no-match') {
         attrs.class = data.class;
       }
       styles.height = addPxSuffix(data.height);
-      if (shouldStyleWithCss(editor)) {
+      if (shouldStyleWithCss$1) {
         styles.width = addPxSuffix(data.width);
       } else if (dom.getAttrib(tableElm, 'width')) {
         attrs.width = removePxSuffix(data.width);
       }
-      if (shouldStyleWithCss(editor)) {
-        styles['border-width'] = addPxSuffix(data.border);
+      if (shouldStyleWithCss$1) {
+        if (borderIsZero) {
+          attrs.border = 0;
+          styles['border-width'] = '';
+        } else {
+          styles['border-width'] = addPxSuffix(data.border);
+          attrs.border = 1;
+        }
         styles['border-spacing'] = addPxSuffix(data.cellspacing);
       } else {
-        attrs.border = data.border;
+        attrs.border = borderIsZero ? 0 : data.border;
         attrs.cellpadding = data.cellpadding;
         attrs.cellspacing = data.cellspacing;
       }
-      if (shouldStyleWithCss(editor) && tableElm.children) {
-        for (let i = 0; i < tableElm.children.length; i++) {
-          styleTDTH(dom, tableElm.children[i], {
-            'border-width': addPxSuffix(data.border),
-            'padding': addPxSuffix(data.cellpadding)
-          });
-          if (hasAdvancedTableTab(editor)) {
-            styleTDTH(dom, tableElm.children[i], { 'border-color': data.bordercolor });
+      if (shouldStyleWithCss$1 && tableElm.children) {
+        const cellStyles = {};
+        if (borderIsZero) {
+          cellStyles['border-width'] = '';
+        } else if (shouldApplyOnCell.border) {
+          cellStyles['border-width'] = addPxSuffix(data.border);
+        }
+        if (shouldApplyOnCell.cellpadding) {
+          cellStyles.padding = addPxSuffix(data.cellpadding);
+        }
+        if (hasAdvancedTableTab$1 && shouldApplyOnCell.bordercolor) {
+          cellStyles['border-color'] = data.bordercolor;
+        }
+        if (!isEmpty$1(cellStyles)) {
+          for (let i = 0; i < tableElm.children.length; i++) {
+            styleTDTH(dom, tableElm.children[i], cellStyles);
           }
         }
       }
-      if (hasAdvancedTableTab(editor)) {
+      if (hasAdvancedTableTab$1) {
         const advData = data;
         styles['background-color'] = advData.backgroundcolor;
         styles['border-color'] = advData.bordercolor;
         styles['border-style'] = advData.borderstyle;
       }
-      attrs.style = dom.serializeStyle({
+      dom.setStyles(tableElm, {
         ...getDefaultStyles(editor),
         ...styles
       });
@@ -2618,9 +2636,6 @@
       const data = api.getData();
       const modifiedData = filter$1(data, (value, key) => oldData[key] !== value);
       api.close();
-      if (data.class === '') {
-        delete data.class;
-      }
       editor.undoManager.transact(() => {
         if (!tableElm) {
           const cols = toInt(data.cols).getOr(1);
@@ -2632,7 +2647,12 @@
           tableElm = getSelectionCell(getSelectionStart(editor), getIsRoot(editor)).bind(cell => table(cell, getIsRoot(editor))).map(table => table.dom).getOrDie();
         }
         if (size(modifiedData) > 0) {
-          applyDataToElement(editor, tableElm, data);
+          const applicableCellProperties = {
+            border: has(modifiedData, 'border'),
+            bordercolor: has(modifiedData, 'bordercolor'),
+            cellpadding: has(modifiedData, 'cellpadding')
+          };
+          applyDataToElement(editor, tableElm, data, applicableCellProperties);
           const captionElm = dom.select('caption', tableElm)[0];
           if (captionElm && !data.caption || !captionElm && data.caption) {
             editor.execCommand('mceTableToggleCaption');
@@ -2675,8 +2695,8 @@
           }
         }
       }
-      const classes = buildListItems(getTableClassList(editor));
-      if (classes.length > 0) {
+      const classes = buildClassList(getTableClassList(editor));
+      if (classes.isSome()) {
         if (data.class) {
           data.class = data.class.replace(/\s*mce\-item\-table\s*/g, '');
         }
@@ -2684,7 +2704,7 @@
       const generalPanel = {
         type: 'grid',
         columns: 2,
-        items: getItems(editor, classes, insertNewTable)
+        items: getItems(editor, classes.getOr([]), insertNewTable)
       };
       const nonAdvancedForm = () => ({
         type: 'panel',
@@ -2830,13 +2850,13 @@
       const onSetup = (api, isDisabled) => setupHandler(() => targets.get().fold(() => {
         api.setEnabled(false);
       }, targets => {
-        api.setEnabled(!isDisabled(targets));
+        api.setEnabled(!isDisabled(targets) && editor.selection.isEditable());
       }));
       const onSetupWithToggle = (api, isDisabled, isActive) => setupHandler(() => targets.get().fold(() => {
         api.setEnabled(false);
         api.setActive(false);
       }, targets => {
-        api.setEnabled(!isDisabled(targets));
+        api.setEnabled(!isDisabled(targets) && editor.selection.isEditable());
         api.setActive(isActive(targets));
       }));
       const isDisabledFromLocked = lockedDisable => selectionDetails.exists(details => details.locked[lockedDisable]);
@@ -2888,10 +2908,21 @@
     const getRows = () => getData(tableTypeRow);
     const getColumns = () => getData(tableTypeColumn);
 
+    const onSetupEditable$1 = editor => api => {
+      const nodeChanged = () => {
+        api.setEnabled(editor.selection.isEditable());
+      };
+      editor.on('NodeChange', nodeChanged);
+      nodeChanged();
+      return () => {
+        editor.off('NodeChange', nodeChanged);
+      };
+    };
     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')
       });
       const cmd = command => () => editor.execCommand(command);
@@ -3034,7 +3065,8 @@
       addButtonIfRegistered('tableinsertdialog', {
         tooltip: 'Insert table',
         command: 'mceInsertTableDialog',
-        icon: 'table'
+        icon: 'table',
+        onSetup: onSetupEditable$1(editor)
       });
       const tableClassList = filterNoneItem(getTableClassList(editor));
       if (tableClassList.length !== 0 && editor.queryCommandSupported('mceTableToggleClass')) {
@@ -3108,11 +3140,11 @@
       });
     };
     const addToolbars = editor => {
-      const isTable = table => editor.dom.is(table, 'table') && editor.getBody().contains(table);
+      const isEditableTable = table => editor.dom.is(table, 'table') && editor.getBody().contains(table) && editor.dom.isEditable(table.parentNode);
       const toolbar = getToolbar(editor);
       if (toolbar.length > 0) {
         editor.ui.registry.addContextToolbar('table', {
-          predicate: isTable,
+          predicate: isEditableTable,
           items: toolbar,
           scope: 'node',
           position: 'node'
@@ -3120,6 +3152,16 @@
       }
     };
 
+    const onSetupEditable = editor => api => {
+      const nodeChanged = () => {
+        api.setEnabled(editor.selection.isEditable());
+      };
+      editor.on('NodeChange', nodeChanged);
+      nodeChanged();
+      return () => {
+        editor.off('NodeChange', nodeChanged);
+      };
+    };
     const addMenuItems = (editor, selectionTargets) => {
       const cmd = command => () => editor.execCommand(command);
       const addMenuIfRegistered = (name, spec) => {
@@ -3265,7 +3307,8 @@
         editor.ui.registry.addMenuItem('inserttable', {
           text: 'Table',
           icon: 'table',
-          onAction: cmd('mceInsertTableDialog')
+          onAction: cmd('mceInsertTableDialog'),
+          onSetup: onSetupEditable(editor)
         });
       } else {
         editor.ui.registry.addNestedMenuItem('inserttable', {
@@ -3275,13 +3318,15 @@
               type: 'fancymenuitem',
               fancytype: 'inserttable',
               onAction: insertTableAction
-            }]
+            }],
+          onSetup: onSetupEditable(editor)
         });
       }
       editor.ui.registry.addMenuItem('inserttabledialog', {
         text: 'Insert table',
         icon: 'table',
-        onAction: cmd('mceInsertTableDialog')
+        onAction: cmd('mceInsertTableDialog'),
+        onSetup: onSetupEditable(editor)
       });
       addMenuIfRegistered('tableprops', {
         text: 'Table properties',