feat(editor): DP-181154 replacing 0 width tables with full width (#1145)

Author: anarravula-dialpad

packages/dialtone-vue/components/rich_text_editor/extensions/table/table.js

@@ -10,14 +10,29 @@ const createAttribute = (name) => ({
   },
 });
 
+const createTableStyleAttribute = () => {
+  let attribute = createAttribute('style');
+  attribute.renderHTML = (attributes) => {
+    if (!attributes['style']) return {};
+    return { ['style']: replaceZeroWidth(attributes['style']) };
+  }
+  return attribute;
+};
+
+function replaceZeroWidth(style) {
+  return style.replace(/(?<![a-z-])width\s*:\s*([^;]+);?/gi, (match, value) => {
+    return /^\s*0\s*[a-z%]*\s*(!important)?\s*$/i.test(value) ? 'width: 100%;' : match;
+  });
+}
+
 export const CustomTable = Table.extend({
   addAttributes () {
     return {
       ...this.parent?.(),
       border: createAttribute('border'),
       cellpadding: createAttribute('cellpadding'),
       cellspacing: createAttribute('cellspacing'),
-      style: createAttribute('style'),
+      style: createTableStyleAttribute(),
     };
   },