T1113606: Fix table attributors keyNames collision.

attributors/attributor.js

@@ -0,0 +1,31 @@
+import { Attributor } from 'parchment';
+import { decorateCanAdd, decorateKeys, decorateMethodWithKeyName } from './decorators';
+import { KeyNameType } from './utils';
+
+export default class OverriddenAttributor extends Attributor {
+  constructor(attrName, keyName, options = { allowedTags: [] }) {
+    super(attrName, keyName, options);
+
+    this.allowedTags = options.allowedTags ?? [];
+  }
+
+  static keys(node) {
+    return decorateKeys(super.keys, node, KeyNameType.attribute);
+  }
+
+  add(node, value) {
+    return decorateMethodWithKeyName.call(this, super.add, node, value);
+  }
+
+  remove(node) {
+    return decorateMethodWithKeyName.call(this, super.remove, node);
+  }
+
+  value(node) {
+    return decorateMethodWithKeyName.call(this, super.value, node);
+  }
+
+  canAdd(node, value) {
+    return decorateCanAdd.call(this, super.canAdd, node, value);
+  }
+}

attributors/decorators.js

@@ -0,0 +1,24 @@
+import {
+  getKeyNameWithCustomPrefix,
+  removeCustomPrefixFromKeyName,
+} from './utils';
+
+export function decorateMethodWithKeyName(method, ...args) {
+  const originalKeyName = this.keyName;
+  this.keyName = removeCustomPrefixFromKeyName(this.keyName);
+
+  const result = method.call(this, ...args);
+
+  this.keyName = originalKeyName;
+  return result;
+}
+
+export function decorateCanAdd(originCanAdd, node, value) {
+  const isNodeAllowed = this.allowedTags.indexOf(node.tagName) > -1;
+  return isNodeAllowed && originCanAdd.call(this, node, value);
+}
+
+export function decorateKeys(originKeys, node, keyType) {
+  return originKeys(node)
+    .map((keyName) => getKeyNameWithCustomPrefix(node.tagName, keyName, keyType));
+}

attributors/style_attributor.js

@@ -0,0 +1,31 @@
+import { StyleAttributor } from 'parchment';
+import { decorateCanAdd, decorateKeys, decorateMethodWithKeyName } from './decorators';
+import { KeyNameType } from './utils';
+
+export default class OverriddenStyleAttributor extends StyleAttributor {
+  constructor(attrName, keyName, options = { allowedTags: [] }) {
+    super(attrName, keyName, options);
+
+    this.allowedTags = options.allowedTags ?? [];
+  }
+
+  static keys(node) {
+    return decorateKeys(super.keys, node, KeyNameType.style);
+  }
+
+  add(node, value) {
+    return decorateMethodWithKeyName.call(this, super.add, node, value);
+  }
+
+  remove(node) {
+    return decorateMethodWithKeyName.call(this, super.remove, node);
+  }
+
+  value(node) {
+    return decorateMethodWithKeyName.call(this, super.value, node);
+  }
+
+  canAdd(node, value) {
+    return decorateCanAdd.call(this, super.canAdd, node, value);
+  }
+}

attributors/utils.js

@@ -0,0 +1,38 @@
+import { TABLE_KEY_NAME_SET, tableConfig } from '../formats/table/attributors/table_config';
+import { cellConfig, TABLE_CELL_KEY_NAME_SET } from '../formats/table/attributors/cell_config';
+
+export const KeyNameType = {
+  attribute: 'attr',
+  style: 'style',
+};
+
+const OVERRIDDEN_ATTRIBUTORS_TAG_INFO = {
+  ...tableConfig.allowedTags.reduce((result, tag) => {
+    result[tag] = {
+      name: tableConfig.name,
+      keyNamesSet: TABLE_KEY_NAME_SET,
+    };
+    return result;
+  }, {}),
+  ...cellConfig.allowedTags.reduce((result, tag) => {
+    result[tag] = {
+      name: cellConfig.name,
+      keyNamesSet: TABLE_CELL_KEY_NAME_SET,
+    };
+    return result;
+  }, {}),
+};
+
+export function getKeyNameWithCustomPrefix(tagName, keyName, keyType) {
+  const tagInfo = OVERRIDDEN_ATTRIBUTORS_TAG_INFO[tagName];
+
+  if (!tagInfo) {
+    return keyName;
+  }
+
+  return tagInfo.keyNamesSet.has(keyName) ? `${keyType}${tagInfo.name}_${keyName}` : keyName;
+}
+
+export function removeCustomPrefixFromKeyName(keyNameWithPrefix) {
+  return keyNameWithPrefix.replace(/([^]*_)/, '');
+}

blots/block.js

@@ -9,6 +9,9 @@ import {
 import Break from './break';
 import Inline from './inline';
 import TextBlot from './text';
+import { overrideParchment } from '../parchment/override';
+
+overrideParchment();
 
 const NEWLINE_LENGTH = 1;
 

formats/table/attributors/cell.js

@@ -1,125 +1,22 @@
 import prepareAttributor from './prepare_attributor';
 import prepareStyleAttributor from './prepare_style_attributor';
+import { cellConfig, TABLE_CELL_ATTRIBUTES, TABLE_CELL_STYLES } from './cell_config';
 
-const cellConfig = {
-  name: 'cell',
-  allowedTags: ['TH', 'TD'],
-};
+export const TABLE_CELL_ATTR_ATTRIBUTORS = TABLE_CELL_ATTRIBUTES
+  .map((attrName) => prepareAttributor(cellConfig, attrName));
 
-const CellHeightAttribute = prepareAttributor(cellConfig, 'height');
-const CellWidthAttribute = prepareAttributor(cellConfig, 'width');
-const CellHeightStyle = prepareStyleAttributor(cellConfig, 'height');
-const CellWidthStyle = prepareStyleAttributor(cellConfig, 'width');
+export const TABLE_CELL_STYLE_ATTRIBUTORS = TABLE_CELL_STYLES
+  .map((styleName) => prepareStyleAttributor(cellConfig, styleName));
 
-const CellVerticalAlignStyle = prepareStyleAttributor(
-  cellConfig,
-  'vertical',
-  'align',
-);
-
-const CellTextAlignStyle = prepareStyleAttributor(cellConfig, 'text', 'align');
-
-const CellBackgroundColorStyle = prepareStyleAttributor(
-  cellConfig,
-  'background',
-  'color',
-);
-
-const CellBorderStyle = prepareStyleAttributor(cellConfig, 'border');
-const CellBorderStyleStyle = prepareStyleAttributor(
-  cellConfig,
-  'border',
-  'style',
-);
-const CellBorderWidthStyle = prepareStyleAttributor(
-  cellConfig,
-  'border',
-  'width',
-);
-const CellBorderColorStyle = prepareStyleAttributor(
-  cellConfig,
-  'border',
-  'color',
-);
-
-const CellPaddingStyle = prepareStyleAttributor(cellConfig, 'padding');
-const CellPaddingTopStyle = prepareStyleAttributor(
-  cellConfig,
-  'padding',
-  'top',
-);
-const CellPaddingBottomStyle = prepareStyleAttributor(
-  cellConfig,
-  'padding',
-  'bottom',
-);
-const CellPaddingLeftStyle = prepareStyleAttributor(
-  cellConfig,
-  'padding',
-  'left',
-);
-const CellPaddingRightStyle = prepareStyleAttributor(
-  cellConfig,
-  'padding',
-  'right',
-);
-
-const CELL_FORMATS = {
-  cellBorder: CellBorderStyle,
-  cellBorderStyle: CellBorderStyleStyle,
-  cellBorderWidth: CellBorderWidthStyle,
-  cellBorderColor: CellBorderColorStyle,
-  cellBackgroundColor: CellBackgroundColorStyle,
-  cellPadding: CellPaddingStyle,
-  cellPaddingTop: CellPaddingTopStyle,
-  cellPaddingBottom: CellPaddingBottomStyle,
-  cellPaddingLeft: CellPaddingLeftStyle,
-  cellPaddingRight: CellPaddingRightStyle,
-  cellVerticalAlign: CellVerticalAlignStyle,
-  cellTextAlign: CellTextAlignStyle,
-  cellWidth: CellWidthStyle,
-  cellHeight: CellHeightStyle,
-};
-
-const CELL_ATTRIBUTORS = [
-  CellBackgroundColorStyle,
-  CellBorderColorStyle,
-  CellBorderStyle,
-  CellBorderStyleStyle,
-  CellBorderWidthStyle,
-  CellPaddingBottomStyle,
-  CellPaddingLeftStyle,
-  CellPaddingRightStyle,
-  CellPaddingStyle,
-  CellPaddingTopStyle,
-  CellVerticalAlignStyle,
-  CellTextAlignStyle,
-  CellHeightStyle,
-  CellWidthStyle,
-  CellWidthAttribute,
-  CellHeightAttribute,
-].reduce((memo, attr) => {
-  memo[attr.keyName] = attr;
-  return memo;
+export const CELL_FORMATS = TABLE_CELL_STYLE_ATTRIBUTORS.reduce((result, attributor) => {
+  result[attributor.attrName] = attributor;
+  return result;
 }, {});
 
-export {
-  CellVerticalAlignStyle,
-  CellTextAlignStyle,
-  CellBackgroundColorStyle,
-  CellBorderStyle,
-  CellBorderStyleStyle,
-  CellBorderWidthStyle,
-  CellBorderColorStyle,
-  CellPaddingStyle,
-  CellPaddingTopStyle,
-  CellPaddingBottomStyle,
-  CellPaddingLeftStyle,
-  CellPaddingRightStyle,
-  CellHeightStyle,
-  CellWidthStyle,
-  CellHeightAttribute,
-  CellWidthAttribute,
-  CELL_FORMATS,
-  CELL_ATTRIBUTORS,
-};
+export const CELL_ATTRIBUTORS = [
+  ...TABLE_CELL_ATTR_ATTRIBUTORS,
+  ...TABLE_CELL_STYLE_ATTRIBUTORS,
+].reduce((result, attributor) => {
+  result[attributor.keyName] = attributor;
+  return result;
+}, {});

formats/table/attributors/cell_config.js

@@ -0,0 +1,31 @@
+export const cellConfig = {
+  name: 'cell',
+  allowedTags: ['TH', 'TD'],
+};
+
+export const TABLE_CELL_ATTRIBUTES = [
+  'height',
+  'width',
+];
+
+export const TABLE_CELL_STYLES = [
+  'height',
+  'width',
+  'vertical-align',
+  'text-align',
+  'background-color',
+  'border',
+  'border-style',
+  'border-width',
+  'border-color',
+  'padding',
+  'padding-top',
+  'padding-right',
+  'padding-bottom',
+  'padding-left',
+];
+
+export const TABLE_CELL_KEY_NAME_SET = new Set([
+  ...TABLE_CELL_ATTRIBUTES,
+  ...TABLE_CELL_STYLES,
+]);

formats/table/attributors/prepare_attributor.js

@@ -1,13 +1,13 @@
-import ElementAttributor from '../../../attributors/element_attributor';
+import OverriddenAttributor from '../../../attributors/attributor';
 import capitalize from '../../../utils/capitalize';
+import { KeyNameType } from '../../../attributors/utils';
 
 export default function prepareAttributor(
   { name, ...elementConfig },
-  attrName,
+  domAttrName,
 ) {
-  return new ElementAttributor(
-    `${name}${capitalize(attrName)}`,
-    attrName,
-    elementConfig,
-  );
+  const attrName = `${name}${capitalize(domAttrName)}`;
+  const keyName = `${KeyNameType.attribute}${name}_${domAttrName}`;
+
+  return new OverriddenAttributor(attrName, keyName, elementConfig);
 }