@atlaskit/adf-schema 49.0.6 → 50.0.0

package/dist/es2019/schema/nodes/inline-card.js

@@ -1,4 +1,5 @@
 import { inlineCard as inlineCardFactory } from '../../next-schema/generated/nodeTypes';
+import { uuid } from '../../utils/uuid';
 
 /**
  * @name inlineCard_node
@@ -44,4 +45,48 @@ export const inlineCard = inlineCardFactory({
       return ['a', attrs];
     }
   }
+});
+export const inlineCardWithLocalId = inlineCardFactory({
+  parseDOM: [{
+    tag: 'a[data-inline-card], span[data-inline-card]',
+    // bump priority higher than hyperlink
+    priority: 100,
+    getAttrs: dom => {
+      const anchor = dom;
+      const data = anchor.getAttribute('data-card-data');
+
+      /* Support attrs from Editor and Renderer */
+      return {
+        url: anchor.getAttribute('href') || anchor.getAttribute('data-card-url') || null,
+        data: data ? JSON.parse(data) : null
+      };
+    }
+  },
+  // for renderer
+  {
+    tag: 'div[data-inline-card]',
+    getAttrs: dom => {
+      const anchor = dom;
+      const data = anchor.getAttribute('data-card-data');
+      return {
+        url: anchor.getAttribute('data-card-url'),
+        data: data ? JSON.parse(data) : null,
+        localId: uuid.generate()
+      };
+    }
+  }],
+  toDOM(node) {
+    var _node$attrs;
+    const attrs = {
+      'data-inline-card': '',
+      href: node.attrs.url || '',
+      'data-card-data': node.attrs.data ? JSON.stringify(node.attrs.data) : '',
+      'data-local-id': (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.localId) || undefined
+    };
+    if (node.attrs.url) {
+      return ['a', attrs, node.attrs.url];
+    } else {
+      return ['a', attrs];
+    }
+  }
 });

package/dist/es2019/schema/nodes/layout-column.js

@@ -1,4 +1,5 @@
 import { layoutColumn as layoutColumnFactory } from '../../next-schema/generated/nodeTypes';
+import { uuid } from '../../utils/uuid';
 
 /**
  * @name layoutColumn_node
@@ -30,6 +31,43 @@ export const layoutColumn = layoutColumnFactory({
       attrs['data-column-width'] = `${width}`;
     }
 
+    // We need to apply a attribute to the inner most child to help
+    // ProseMirror identify its boundaries better.
+    const contentAttrs = {
+      'data-layout-content': 'true'
+    };
+    return ['div', attrs, ['div', contentAttrs, 0]];
+  }
+});
+export const layoutColumnWithLocalId = layoutColumnFactory({
+  parseDOM: [{
+    context: 'layoutColumn//',
+    tag: 'div[data-layout-column]',
+    skip: true
+  }, {
+    tag: 'div[data-layout-column]',
+    getAttrs: domNode => {
+      const dom = domNode;
+      return {
+        width: Number(dom.getAttribute('data-column-width')) || undefined,
+        localId: uuid.generate()
+      };
+    }
+  }],
+  toDOM(node) {
+    var _node$attrs;
+    const attrs = {
+      'data-layout-column': 'true',
+      'data-local-id': (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.localId) || undefined
+    };
+    const {
+      width
+    } = node.attrs;
+    if (width) {
+      attrs['style'] = `flex-basis: ${width}%`;
+      attrs['data-column-width'] = `${width}`;
+    }
+
     // We need to apply a attribute to the inner most child to help
     // ProseMirror identify its boundaries better.
     const contentAttrs = {

package/dist/es2019/schema/nodes/layout-section.js

@@ -1,5 +1,6 @@
 import { layoutSection as layoutSectionFactory, layoutSectionWithSingleColumnStage0 as layoutSectionWithSingleColumnStage0Factory } from '../../next-schema/generated/nodeTypes';
 import { layoutSectionFull as layoutSectionFullFactory } from '../../next-schema/generated/nodeTypes';
+import { uuid } from '../../utils/uuid';
 
 /**
  * @name layoutSection_node
@@ -74,4 +75,35 @@ export const layoutSectionWithSingleColumn = layoutSectionWithSingleColumnStage0
     };
     return ['div', attrs, 0];
   }
+});
+export const layoutSectionWithSingleColumnLocalId = layoutSectionWithSingleColumnStage0Factory({
+  parseDOM: [{
+    context: 'layoutSection//|layoutColumn//',
+    tag: 'div[data-layout-section]',
+    skip: true
+  }, {
+    tag: 'div[data-layout-section]',
+    getAttrs: dom => {
+      const columnRuleStyle = dom.getAttribute('data-column-rule-style');
+      const localId = uuid.generate();
+      return columnRuleStyle ? {
+        columnRuleStyle,
+        localId
+      } : {
+        localId
+      };
+    }
+  }],
+  toDOM(node) {
+    var _node$attrs;
+    const {
+      columnRuleStyle
+    } = node.attrs;
+    const attrs = {
+      'data-layout-section': 'true',
+      'data-column-rule-style': columnRuleStyle || undefined,
+      'data-local-id': (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.localId) || undefined
+    };
+    return ['div', attrs, 0];
+  }
 });

package/dist/es2019/schema/nodes/list-item.js

@@ -1,3 +1,4 @@
+import { uuid } from '../../utils';
 import { listItem as listItemFactory, listItemWithNestedDecisionStage0 as listItemWithNestedDecisionStage0Factory } from '../../next-schema/generated/nodeTypes';
 
 /**
@@ -12,6 +13,20 @@ export const listItem = listItemFactory({
     return ['li', 0];
   }
 });
+export const listItemWithLocalId = listItemFactory({
+  parseDOM: [{
+    tag: 'li',
+    getAttrs: () => ({
+      localId: uuid.generate()
+    })
+  }],
+  toDOM(node) {
+    var _node$attrs;
+    return ['li', {
+      'data-local-id': (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.localId) || undefined
+    }, 0];
+  }
+});
 
 /**
  * @name list_item_with_decision_stage0
@@ -24,4 +39,18 @@ export const listItemWithDecisionStage0 = listItemWithNestedDecisionStage0Factor
   toDOM() {
     return ['li', 0];
   }
+});
+export const listItemWithNestedDecisionAndLocalIdStage0 = listItemWithNestedDecisionStage0Factory({
+  parseDOM: [{
+    tag: 'li',
+    getAttrs: () => ({
+      localId: uuid.generate()
+    })
+  }],
+  toDOM(node) {
+    var _node$attrs2;
+    return ['li', {
+      'data-local-id': (node === null || node === void 0 ? void 0 : (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.localId) || undefined
+    }, 0];
+  }
 });

package/dist/es2019/schema/nodes/media-inline.js

@@ -1,8 +1,15 @@
 import { createMediaSpec } from './media';
+import { uuid } from '../../utils/uuid';
 import { mediaInline as mediaInlineFactory } from '../../next-schema/generated/nodeTypes';
 
 /**
  * @name mediaInline_node
  */
 
-export const mediaInline = createMediaSpec(mediaInlineFactory({}).attrs, true);
+export const mediaInline = createMediaSpec(mediaInlineFactory({}).attrs, true);
+export const mediaInlineWithLocalId = createMediaSpec({
+  ...mediaInlineFactory({}).attrs,
+  localId: {
+    default: uuid.generate()
+  }
+}, true, true);

package/dist/es2019/schema/nodes/media-single.js

@@ -1,6 +1,7 @@
 import { WidthType } from './types/rich-media-common';
 import { isDOMElement } from '../../utils/parseDOM';
 import { mediaSingle as mediaSingleFactory, mediaSingleCaption as mediaSingleCaptionFactory, mediaSingleFull as mediaSingleFullFactory, mediaSingleWidthType as mediaSingleWidthTypeFactory } from '../../next-schema/generated/nodeTypes';
+import { uuid } from '../../utils/uuid';
 
 /**
  * @name mediaSingle_node
@@ -34,7 +35,8 @@ export const defaultAttrs = {
 };
 export const mediaSingleSpec = ({
   withCaption = false,
-  withExtendedWidthTypes = false
+  withExtendedWidthTypes = false,
+  generateLocalId = false
 }) => {
   const getAttrs = dom => {
     if (!isDOMElement(dom)) {
@@ -46,6 +48,14 @@ export const mediaSingleSpec = ({
     const layout = dom.getAttribute('data-layout') || 'center';
     const width = Number(dom.getAttribute('data-width')) || null;
     const widthType = dom.getAttribute('data-width-type');
+    if (generateLocalId) {
+      return {
+        layout,
+        width,
+        widthType,
+        localId: uuid.generate()
+      };
+    }
     if (withExtendedWidthTypes) {
       return {
         layout,
@@ -75,6 +85,10 @@ export const mediaSingleSpec = ({
       'data-layout': layout,
       'data-width': ''
     };
+    if (generateLocalId) {
+      var _node$attrs;
+      attrs['data-local-id'] = (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.localId) || undefined;
+    }
     if (width) {
       attrs['data-width'] = isFinite(width) && Math.floor(width) === width ? width : width.toFixed(2);
     }
@@ -148,6 +162,11 @@ export const mediaSingleFull = mediaSingleSpec({
   withCaption: true,
   withExtendedWidthTypes: true
 });
+export const mediaSingleFullWithLocalId = mediaSingleSpec({
+  withCaption: true,
+  withExtendedWidthTypes: true,
+  generateLocalId: true
+});
 export const toJSON = node => ({
   attrs: Object.keys(node.attrs).reduce((obj, key) => {
     if (node.attrs[key] !== null) {

package/dist/es2019/schema/nodes/media.js

@@ -1,13 +1,14 @@
 import { N30 } from '../../utils/colors';
 import { media as mediaFactory } from '../../next-schema/generated/nodeTypes';
 import { mediaInline as mediaInlineFactory } from '../../next-schema/generated/nodeTypes';
+import { uuid } from '../../utils/uuid';
 
 /**
  * @name media_node
  */
 
 export const defaultAttrs = mediaFactory({}).attrs;
-export const createMediaSpec = (attributes, inline = false) => {
+export const createMediaSpec = (attributes, inline = false, generateLocalId = false) => {
   const domNodeType = inline ? 'span' : 'div';
   const nodeName = inline ? 'mediaInline' : 'media';
   const parseDOM = [{
@@ -45,6 +46,7 @@ export const createMediaSpec = (attributes, inline = false) => {
     ignore: true
   }];
   const toDOM = node => {
+    var _node$attrs;
     const attrs = {
       'data-id': node.attrs.id,
       'data-node-type': `${nodeName}`,
@@ -61,7 +63,8 @@ export const createMediaSpec = (attributes, inline = false) => {
       title: 'Attachment',
       // Manually kept in sync with the style of media cards. The goal is to render a plain gray
       // rectangle that provides an affordance for media.
-      style: `display: inline-block; border-radius: 3px; background: ${N30}; box-shadow: 0 1px 1px rgba(9, 30, 66, 0.2), 0 0 1px 0 rgba(9, 30, 66, 0.24);`
+      style: `display: inline-block; border-radius: 3px; background: ${N30}; box-shadow: 0 1px 1px rgba(9, 30, 66, 0.2), 0 0 1px 0 rgba(9, 30, 66, 0.24);`,
+      'data-local-id': (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.localId) || undefined
     };
     copyPrivateAttributes(node.attrs, attrs, key => `data-${camelCaseToKebabCase(key.slice(2))}`);
     return [`${domNodeType}`, attrs];
@@ -79,17 +82,27 @@ export const createMediaSpec = (attributes, inline = false) => {
       // https://product-fabric.atlassian.net/browse/EDM-2996
       tag: 'img:not(.smart-link-icon)',
       getAttrs: dom => {
-        return {
+        const attrs = {
           type: 'external',
           url: dom.getAttribute('src') || '',
           alt: dom.getAttribute('alt') || ''
         };
+        if (generateLocalId) {
+          attrs.localId = uuid.generate();
+        }
+        return attrs;
       }
     }],
     toDOM
   });
 };
-export const media = createMediaSpec(defaultAttrs, false);
+export const media = createMediaSpec(defaultAttrs, false, false);
+export const mediaWithLocalId = createMediaSpec({
+  ...defaultAttrs,
+  localId: {
+    default: uuid.generate()
+  }
+}, false, true);
 export const camelCaseToKebabCase = str => str.replace(/([^A-Z]+)([A-Z])/g, (_, x, y) => `${x}-${y.toLowerCase()}`);
 export const copyPrivateAttributes = (from, to, map) => {
   if (media.attrs) {

package/dist/es2019/schema/nodes/nested-expand.js

@@ -1,4 +1,5 @@
 import { nestedExpand as nestedExpandFactory } from '../../next-schema/generated/nodeTypes';
+import { uuid } from '../../utils/uuid';
 
 /**
  * @name nestedExpand_content
@@ -14,18 +15,19 @@ import { nestedExpand as nestedExpandFactory } from '../../next-schema/generated
  * @name nestedExpand_with_no_marks_node
  */
 
-function getExpandAttrs(domNode) {
+function getExpandAttrs(domNode, generateLocalId) {
   const dom = domNode;
   return {
     title: dom.getAttribute('data-title'),
-    __expanded: true
+    __expanded: true,
+    localId: generateLocalId ? uuid.generate() : undefined
   };
 }
 const nestedExpandFactoryOptions = {
   parseDOM: [{
     context: 'nestedExpand//',
     tag: '[data-node-type="nestedExpand"]',
-    getAttrs: getExpandAttrs
+    getAttrs: domNode => getExpandAttrs(domNode, false)
   }, {
     tag: '[data-node-type="nestedExpand"] button',
     ignore: true
@@ -34,13 +36,15 @@ const nestedExpandFactoryOptions = {
     ignore: true
   }, {
     tag: 'div[data-node-type="nestedExpand"]',
-    getAttrs: getExpandAttrs
+    getAttrs: domNode => getExpandAttrs(domNode, false)
   }],
   toDOM(node) {
+    var _node$attrs;
     const attrs = {
       'data-node-type': 'nestedExpand',
       'data-title': node.attrs.title,
-      'data-expanded': node.attrs.__expanded
+      'data-expanded': node.attrs.__expanded,
+      'data-local-id': (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.localId) || undefined
     };
     return ['div', attrs, 0];
   }
@@ -50,4 +54,15 @@ const nestedExpandFactoryOptions = {
  * @name nestedExpand
  * @description an expand that can be nested (eg. inside table, layout).
  */
-export const nestedExpand = nestedExpandFactory(nestedExpandFactoryOptions);
+export const nestedExpand = nestedExpandFactory(nestedExpandFactoryOptions);
+export const nestedExpandWithLocalId = nestedExpandFactory({
+  ...nestedExpandFactoryOptions,
+  parseDOM: [...nestedExpandFactoryOptions.parseDOM, {
+    context: 'nestedExpand//',
+    tag: '[data-node-type="nestedExpand"]',
+    getAttrs: domNode => getExpandAttrs(domNode, true)
+  }, {
+    tag: '[data-node-type="nestedExpand"]',
+    getAttrs: domNode => getExpandAttrs(domNode, true)
+  }]
+});

package/dist/es2019/schema/nodes/ordered-list.js

@@ -1,3 +1,4 @@
+import { uuid } from '../../utils';
 import { orderedList as orderedListFactory } from '../../next-schema/generated/nodeTypes';
 export const orderedListSelector = '.ak-ol';
 export const orderedList = orderedListFactory({
@@ -11,6 +12,22 @@ export const orderedList = orderedListFactory({
     return ['ol', attrs, 0];
   }
 });
+export const orderedListWithLocalId = orderedListFactory({
+  parseDOM: [{
+    tag: 'ol',
+    getAttrs: () => ({
+      localId: uuid.generate()
+    })
+  }],
+  toDOM(node) {
+    var _node$attrs;
+    const attrs = {
+      class: orderedListSelector.substr(1),
+      'data-local-id': (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.localId) || undefined
+    };
+    return ['ol', attrs, 0];
+  }
+});
 
 // resolve "start" to a safe, 0+ integer, otherwise return undefined
 // Note: Any changes to this function should also be made to "resolveOrder"
@@ -43,12 +60,44 @@ export const orderedListWithOrder = orderedListFactory({
     }
   }],
   toDOM(node) {
-    var _node$attrs;
-    const start = resolveStart(node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.order);
+    var _node$attrs2;
+    const start = resolveStart(node === null || node === void 0 ? void 0 : (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.order);
     const attrs = {
       start: typeof start === 'number' ? String(start) : undefined,
       class: orderedListSelector.substr(1)
     };
     return ['ol', attrs, 0];
   }
+});
+export const orderedListWithOrderAndLocalId = orderedListFactory({
+  parseDOM: [{
+    tag: 'ol',
+    getAttrs: domNode => {
+      const dom = domNode;
+      const startDOMAttr = dom.getAttribute('start');
+      const localId = uuid.generate();
+      if (startDOMAttr) {
+        const start = resolveStart(startDOMAttr);
+        if (typeof start === 'number') {
+          return {
+            order: start,
+            localId
+          };
+        }
+      }
+      return {
+        localId
+      };
+    }
+  }],
+  toDOM(node) {
+    var _node$attrs3, _node$attrs4;
+    const start = resolveStart(node === null || node === void 0 ? void 0 : (_node$attrs3 = node.attrs) === null || _node$attrs3 === void 0 ? void 0 : _node$attrs3.order);
+    const attrs = {
+      start: typeof start === 'number' ? String(start) : undefined,
+      class: orderedListSelector.substr(1),
+      'data-local-id': (node === null || node === void 0 ? void 0 : (_node$attrs4 = node.attrs) === null || _node$attrs4 === void 0 ? void 0 : _node$attrs4.localId) || undefined
+    };
+    return ['ol', attrs, 0];
+  }
 });

package/dist/es2019/schema/nodes/panel.js

@@ -1,4 +1,5 @@
 import { panel as panelFactory } from '../../next-schema/generated/nodeTypes';
+import { uuid } from '../../utils/uuid';
 export let PanelType = /*#__PURE__*/function (PanelType) {
   PanelType["INFO"] = "info";
   PanelType["NOTE"] = "note";
@@ -20,14 +21,18 @@ const getDomAttrs = nodeAttrs => {
     'data-panel-icon': nodeAttrs.panelIcon,
     'data-panel-icon-id': nodeAttrs.panelIconId,
     'data-panel-icon-text': nodeAttrs.panelIconText,
-    'data-panel-color': nodeAttrs.panelColor
+    'data-panel-color': nodeAttrs.panelColor,
+    'data-local-id': (nodeAttrs === null || nodeAttrs === void 0 ? void 0 : nodeAttrs.localId) || undefined
   };
   return attrs;
 };
-const getParseDOMAttrs = (allowCustomPanel, dom) => {
+const getParseDOMAttrs = (allowCustomPanel, dom, generateLocalId) => {
   let parseDOMAttrs = {
     panelType: dom.getAttribute('data-panel-type')
   };
+  if (generateLocalId) {
+    parseDOMAttrs.localId = uuid.generate();
+  }
   if (allowCustomPanel) {
     parseDOMAttrs = {
       ...parseDOMAttrs,
@@ -41,10 +46,10 @@ const getParseDOMAttrs = (allowCustomPanel, dom) => {
   }
   return parseDOMAttrs;
 };
-const createPanelNodeSpecOptions = allowCustomPanel => ({
+const createPanelNodeSpecOptions = (allowCustomPanel, generateLocalId) => ({
   parseDOM: [{
     tag: 'div[data-panel-type]',
-    getAttrs: dom => getParseDOMAttrs(allowCustomPanel, dom)
+    getAttrs: dom => getParseDOMAttrs(allowCustomPanel, dom, generateLocalId)
   }],
   toDOM(node) {
     const attrs = getDomAttrs(node.attrs);
@@ -61,4 +66,5 @@ const createPanelNodeSpecOptions = allowCustomPanel => ({
  * Specifically, it allows Media, action, code-block, rule and decision nodes in
  * addition to content allowed inside panel
  */
-export const extendedPanel = allowCustomPanel => panelFactory(createPanelNodeSpecOptions(allowCustomPanel));
+export const extendedPanel = allowCustomPanel => panelFactory(createPanelNodeSpecOptions(allowCustomPanel));
+export const extendedPanelWithLocalId = allowCustomPanel => panelFactory(createPanelNodeSpecOptions(allowCustomPanel, true));

package/dist/es2019/schema/nodes/placeholder.js

@@ -1,4 +1,5 @@
 import { placeholder as placeholderFactory } from '../../next-schema/generated/nodeTypes';
+import { uuid } from '../../utils/uuid';
 
 /**
  * @name placeholder_node
@@ -22,4 +23,26 @@ export const placeholder = placeholderFactory({
     };
     return ['span', attrs, text];
   }
+});
+export const placeholderWithLocalId = placeholderFactory({
+  parseDOM: [{
+    tag: 'span[data-placeholder]',
+    getAttrs: dom => ({
+      text: dom.getAttribute('data-placeholder') || placeholder.attrs.text.default,
+      localId: uuid.generate()
+    })
+  }],
+  toDOM(node) {
+    var _node$attrs;
+    const {
+      text
+    } = node.attrs;
+    const attrs = {
+      'data-placeholder': text,
+      // Needs to be edtiable for mobile to not close keyboard
+      contenteditable: 'true',
+      'data-local-id': (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.localId) || undefined
+    };
+    return ['span', attrs, text];
+  }
 });

package/dist/es2019/schema/nodes/rule.js

@@ -1,4 +1,5 @@
 import { rule as ruleFactory } from '../../next-schema/generated/nodeTypes';
+import { uuid } from '../../utils/uuid';
 
 /**
  * @name rule_node
@@ -12,4 +13,18 @@ export const rule = ruleFactory({
   toDOM() {
     return hrDOM;
   }
+});
+export const ruleWithLocalId = ruleFactory({
+  parseDOM: [{
+    tag: 'hr',
+    getAttrs: () => ({
+      localId: uuid.generate()
+    })
+  }],
+  toDOM(node) {
+    var _node$attrs;
+    return ['hr', {
+      'data-local-id': (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.localId) || undefined
+    }];
+  }
 });

package/dist/es2019/schema/nodes/tableNodes.js

@@ -39,11 +39,15 @@ export const getCellAttrs = (dom, defaultValues = {}) => {
     }
   }
   const backgroundHexCode = dataCellBackgroundHexCode || (backgroundColor && backgroundColor !== defaultValues['background'] ? backgroundColor : null);
+  const localId = dom.getAttribute('data-local-id') || defaultValues.localId;
   return {
     colspan,
     rowspan: Number(dom.getAttribute('rowspan') || 1),
     colwidth: width && width.length === colspan ? width : null,
-    background: backgroundHexCode
+    background: backgroundHexCode,
+    ...(localId && {
+      localId
+    })
   };
 };
 // these are for test only
@@ -76,6 +80,7 @@ const cssVariablePattern = /^var\(--.*\)$/;
  * @returns CellDomAttrs
  */
 export const getCellDomAttrs = node => {
+  var _node$attrs;
   const attrs = {};
   const nodeType = node.type.name;
   if (node.attrs.colspan !== 1) {
@@ -166,6 +171,9 @@ export const getCellDomAttrs = node => {
   } else {
     attrs.class = tableCellSelector;
   }
+  if (node !== null && node !== void 0 && (_node$attrs = node.attrs) !== null && _node$attrs !== void 0 && _node$attrs.localId) {
+    attrs['data-local-id'] = node.attrs.localId;
+  }
   return attrs;
 };
 export const tableBackgroundColorPalette = new Map();
@@ -271,6 +279,10 @@ const cellAttrs = {
   },
   background: {
     default: null
+  },
+  localId: {
+    default: null,
+    optional: true
   }
 };
 const tableCellNodeSpecOptions = {
@@ -288,7 +300,8 @@ const tableCellNodeSpecOptions = {
 export const tableCell = tableCellFactory(tableCellNodeSpecOptions);
 export const toJSONTableCell = node => ({
   attrs: Object.keys(node.attrs).reduce((obj, key) => {
-    if (cellAttrs[key].default !== node.attrs[key]) {
+    // Only process keys that are defined in cellAttrs
+    if (cellAttrs[key] && cellAttrs[key].default !== node.attrs[key]) {
       obj[key] = node.attrs[key];
     }
     return obj;
@@ -310,4 +323,47 @@ export const toJSONTableHeader = toJSONTableCell;
 export const tableWithNestedTable = tableWithNestedTableFactory(tableNodeSpecOptions);
 export const tableRowWithNestedTable = tableRowWithNestedTableFactory(tableRowNodeSpecOptions);
 export const tableCellWithNestedTable = tableCellWithNestedTableFactory(tableCellNodeSpecOptions);
-export const tableHeaderWithNestedTable = tableHeaderWithNestedTableFactory(tableHeaderNodeSpecOptions);
+export const tableHeaderWithNestedTable = tableHeaderWithNestedTableFactory(tableHeaderNodeSpecOptions);
+
+// table nodes with localId support
+const tableRowNodeSpecOptionsWithLocalId = {
+  parseDOM: [{
+    tag: 'tr',
+    getAttrs: () => ({
+      localId: uuid.generate()
+    })
+  }],
+  toDOM(node) {
+    var _node$attrs2;
+    return ['tr', {
+      'data-local-id': (node === null || node === void 0 ? void 0 : (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.localId) || undefined
+    }, 0];
+  }
+};
+export const tableRowWithLocalId = tableRowFactory(tableRowNodeSpecOptionsWithLocalId);
+const tableCellNodeSpecOptionsWithLocalId = {
+  parseDOM: [{
+    tag: 'td',
+    getAttrs: () => ({
+      localId: uuid.generate()
+    })
+  }],
+  toDOM(node) {
+    var _node$attrs3;
+    return ['td', {
+      'data-local-id': (node === null || node === void 0 ? void 0 : (_node$attrs3 = node.attrs) === null || _node$attrs3 === void 0 ? void 0 : _node$attrs3.localId) || undefined
+    }, 0];
+  }
+};
+export const tableCellWithLocalId = tableCellFactory(tableCellNodeSpecOptionsWithLocalId);
+const tableHeaderNodeSpecOptionsWithLocalId = {
+  parseDOM: [{
+    tag: 'th',
+    getAttrs: dom => getCellAttrs(dom, {
+      background: DEFAULT_TABLE_HEADER_CELL_BACKGROUND,
+      localId: uuid.generate()
+    })
+  }],
+  toDOM: node => ['th', getCellDomAttrs(node), 0]
+};
+export const tableHeaderWithLocalId = tableHeaderFactory(tableHeaderNodeSpecOptionsWithLocalId);