@modusoperandi/licit 1.6.1 → 1.6.2

package/TableNodesSpecs.js

@@ -5,9 +5,13 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import toCSSColor from './ui/toCSSColor.js';
+import { toCSSLengthOrNull as toCSSLength } from './ui/toCSSLength.js';
 import { Node } from 'prosemirror-model';
 import { tableNodes } from 'prosemirror-tables';
 var NO_VISIBLE_BORDER_WIDTH = new Set(['0pt', '0px']);
+function appendStyle(attrs, cssText) {
+  attrs.style = (attrs.style || '') + ";".concat(cssText, ";");
+}
 
 // https://github.com/ProseMirror/prosemirror-tables/blob/master/demo.js
 var TableNodesSpecs = tableNodes({
@@ -99,6 +103,83 @@ var TableNodesSpecs = tableNodes({
           attrs.style = (attrs.style || '') + ";background-color: ".concat(colorValue, ";");
         }
       }
+    },
+    cellWidth: {
+      "default": null,
+      getFromDOM: function getFromDOM(dom) {
+        return dom.style.width || dom.getAttribute('width') || null;
+      },
+      setDOMAttr: function setDOMAttr(value, attrs) {
+        var cssValue = toCSSLength(value);
+        if (cssValue) {
+          appendStyle(attrs, "width: ".concat(cssValue));
+        }
+      }
+    },
+    cellStyle: {
+      "default": null,
+      getFromDOM: function getFromDOM(dom) {
+        return dom.getAttribute('data-cell-style') || null;
+      },
+      setDOMAttr: function setDOMAttr(value, attrs) {
+        if (value === null || value === undefined) {
+          return;
+        }
+        var styleValue = String(value).trim();
+        if (!styleValue) {
+          return;
+        }
+        attrs['data-cell-style'] = styleValue;
+        attrs.style = (attrs.style || '') + ";".concat(styleValue);
+      }
+    },
+    fontSize: {
+      "default": null,
+      getFromDOM: function getFromDOM(dom) {
+        return dom.style.fontSize || null;
+      },
+      setDOMAttr: function setDOMAttr(value, attrs) {
+        var cssValue = toCSSLength(value);
+        if (cssValue) {
+          appendStyle(attrs, "font-size: ".concat(cssValue));
+        }
+      }
+    },
+    letterSpacing: {
+      "default": null,
+      getFromDOM: function getFromDOM(dom) {
+        return dom.style.letterSpacing || null;
+      },
+      setDOMAttr: function setDOMAttr(value, attrs) {
+        var cssValue = toCSSLength(value);
+        if (cssValue) {
+          appendStyle(attrs, "letter-spacing: ".concat(cssValue));
+        }
+      }
+    },
+    marginTop: {
+      "default": null,
+      getFromDOM: function getFromDOM(dom) {
+        return dom.style.marginTop || null;
+      },
+      setDOMAttr: function setDOMAttr(value, attrs) {
+        var cssValue = toCSSLength(value);
+        if (cssValue) {
+          appendStyle(attrs, "margin-top: ".concat(cssValue));
+        }
+      }
+    },
+    marginBottom: {
+      "default": null,
+      getFromDOM: function getFromDOM(dom) {
+        return dom.style.marginBottom || null;
+      },
+      setDOMAttr: function setDOMAttr(value, attrs) {
+        var cssValue = toCSSLength(value);
+        if (cssValue) {
+          appendStyle(attrs, "margin-bottom: ".concat(cssValue));
+        }
+      }
     }
   }
 });
@@ -106,6 +187,12 @@ var TableNodesSpecs = tableNodes({
 // Override the default table node spec to support custom attributes.
 var TableNodeSpec = Object.assign({}, TableNodesSpecs.table, {
   attrs: _objectSpread(_objectSpread({}, TableNodesSpecs.table.attrs), {}, {
+    noOfColumns: {
+      "default": null
+    },
+    tableheight: {
+      "default": null
+    },
     marginLeft: {
       "default": null
     },
@@ -121,14 +208,30 @@ var TableNodeSpec = Object.assign({}, TableNodesSpecs.table, {
     getAttrs: function getAttrs(dom) {
       var dirty = dom.getAttribute('dirty') || false;
       var coverPage = dom.getAttribute('data-cover-page') === 'true';
-      var marginLeft = dom.style.marginLeft;
+      var _dom$style2 = dom.style,
+        marginLeft = _dom$style2.marginLeft,
+        height = _dom$style2.height;
+      var noOfColumnsAttr = dom.getAttribute('data-no-of-columns') || dom.getAttribute('noOfColumns') || dom.getAttribute('no-of-columns');
       var attrs = {
         dirty: dirty,
         coverPage: coverPage
       };
-      if (marginLeft && /\d+px/.test(marginLeft)) {
+      if (marginLeft && /\d{1,1000}px/.test(marginLeft)) {
         attrs.marginLeft = parseFloat(marginLeft);
       }
+      if (height || dom.getAttribute('height')) {
+        attrs.tableheight = height || dom.getAttribute('height');
+      }
+      if (noOfColumnsAttr && /^\d{1,1000}$/.test(noOfColumnsAttr)) {
+        attrs.noOfColumns = parseInt(noOfColumnsAttr, 10);
+      }
+      if (!attrs.noOfColumns) {
+        var firstRow = dom.querySelector('tr');
+        var cells = firstRow ? firstRow.querySelectorAll('th, td').length : 0;
+        if (cells > 0) {
+          attrs.noOfColumns = cells;
+        }
+      }
       return attrs;
     }
   }],
@@ -138,12 +241,22 @@ var TableNodeSpec = Object.assign({}, TableNodesSpecs.table, {
     // table node and copies it, which triggers the "serialize to HTML" flow
     //  that calles this method.
     var _node$attrs = node.attrs,
+      noOfColumns = _node$attrs.noOfColumns,
+      tableheight = _node$attrs.tableheight,
       marginLeft = _node$attrs.marginLeft,
       dirty = _node$attrs.dirty,
       coverPage = _node$attrs.coverPage;
     var domAttrs = {};
-    if (marginLeft) {
-      domAttrs.style = "margin-left: ".concat(marginLeft, "px");
+    var styleChunks = [];
+    if (marginLeft !== null && marginLeft !== undefined) {
+      styleChunks.push("margin-left: ".concat(marginLeft, "px"));
+    }
+    var tableHeight = toCSSLength(tableheight);
+    if (tableHeight) {
+      styleChunks.push("height: ".concat(tableHeight));
+    }
+    if (styleChunks.length) {
+      domAttrs.style = styleChunks.join('; ');
     }
     if (dirty) {
       domAttrs.dirty = dirty;
@@ -151,10 +264,39 @@ var TableNodeSpec = Object.assign({}, TableNodesSpecs.table, {
     if (coverPage) {
       domAttrs['data-cover-page'] = 'true';
     }
+    if (typeof noOfColumns === 'number' && noOfColumns > 0) {
+      domAttrs['data-no-of-columns'] = String(noOfColumns);
+    }
     return ['table', domAttrs, 0];
   }
 });
+var TableRowNodeSpec = Object.assign({}, TableNodesSpecs.table_row, {
+  attrs: _objectSpread(_objectSpread({}, TableNodesSpecs.table_row.attrs), {}, {
+    rowHeight: {
+      "default": null
+    }
+  }),
+  parseDOM: [{
+    tag: 'tr',
+    getAttrs: function getAttrs(dom) {
+      var rowHeight = dom.style.height || dom.getAttribute('height') || null;
+      return rowHeight ? {
+        rowHeight: rowHeight
+      } : null;
+    }
+  }],
+  toDOM: function toDOM(node) {
+    var _node$attrs2;
+    var domAttrs = {};
+    var rowHeight = toCSSLength((_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.rowHeight);
+    if (rowHeight) {
+      domAttrs.style = "height: ".concat(rowHeight);
+    }
+    return ['tr', domAttrs, 0];
+  }
+});
 Object.assign(TableNodesSpecs, {
-  table: TableNodeSpec
+  table: TableNodeSpec,
+  table_row: TableRowNodeSpec
 });
 export default TableNodesSpecs;

package/TableNodesSpecs.js.flow

@@ -1,11 +1,16 @@
 // @flow
 
 import toCSSColor from './ui/toCSSColor.js';
+import { toCSSLengthOrNull as toCSSLength } from './ui/toCSSLength.js';
 import { Node } from 'prosemirror-model';
 import { tableNodes } from 'prosemirror-tables';
 
 const NO_VISIBLE_BORDER_WIDTH = new Set(['0pt', '0px']);
 
+function appendStyle(attrs: Object, cssText: string): void {
+  attrs.style = (attrs.style || '') + `;${cssText};`;
+}
+
 // https://github.com/ProseMirror/prosemirror-tables/blob/master/demo.js
 const TableNodesSpecs = tableNodes({
   tableGroup: 'block',
@@ -98,6 +103,83 @@ const TableNodesSpecs = tableNodes({
         }
       },
     },
+    cellWidth: {
+      default: null,
+      getFromDOM(dom) {
+        return dom.style.width || dom.getAttribute('width') || null;
+      },
+      setDOMAttr(value, attrs) {
+        const cssValue = toCSSLength(value);
+        if (cssValue) {
+          appendStyle(attrs, `width: ${cssValue}`);
+        }
+      },
+    },
+    cellStyle: {
+      default: null,
+      getFromDOM(dom) {
+        return dom.getAttribute('data-cell-style') || null;
+      },
+      setDOMAttr(value, attrs) {
+        if (value === null || value === undefined) {
+          return;
+        }
+        const styleValue = String(value).trim();
+        if (!styleValue) {
+          return;
+        }
+        attrs['data-cell-style'] = styleValue;
+        attrs.style = (attrs.style || '') + `;${styleValue}`;
+      },
+    },
+    fontSize: {
+      default: null,
+      getFromDOM(dom) {
+        return dom.style.fontSize || null;
+      },
+      setDOMAttr(value, attrs) {
+        const cssValue = toCSSLength(value);
+        if (cssValue) {
+          appendStyle(attrs, `font-size: ${cssValue}`);
+        }
+      },
+    },
+    letterSpacing: {
+      default: null,
+      getFromDOM(dom) {
+        return dom.style.letterSpacing || null;
+      },
+      setDOMAttr(value, attrs) {
+        const cssValue = toCSSLength(value);
+        if (cssValue) {
+          appendStyle(attrs, `letter-spacing: ${cssValue}`);
+        }
+      },
+    },
+    marginTop: {
+      default: null,
+      getFromDOM(dom) {
+        return dom.style.marginTop || null;
+      },
+      setDOMAttr(value, attrs) {
+        const cssValue = toCSSLength(value);
+        if (cssValue) {
+          appendStyle(attrs, `margin-top: ${cssValue}`);
+        }
+      },
+    },
+    marginBottom: {
+      default: null,
+      getFromDOM(dom) {
+        return dom.style.marginBottom || null;
+      },
+      setDOMAttr(value, attrs) {
+        const cssValue = toCSSLength(value);
+        if (cssValue) {
+          appendStyle(attrs, `margin-bottom: ${cssValue}`);
+        }
+      },
+    },
   },
 });
 
@@ -105,6 +187,8 @@ const TableNodesSpecs = tableNodes({
 const TableNodeSpec = Object.assign({}, TableNodesSpecs.table, {
   attrs: {
     ...TableNodesSpecs.table.attrs,
+    noOfColumns: { default: null },
+    tableheight: { default: null },
     marginLeft: { default: null },
     dirty: { default: false },
     coverPage: { default: false },
@@ -115,12 +199,31 @@ const TableNodeSpec = Object.assign({}, TableNodesSpecs.table, {
       getAttrs(dom: HTMLElement): ?Object {
         const dirty = dom.getAttribute('dirty') || false;
         const coverPage = dom.getAttribute('data-cover-page') === 'true';
-        const { marginLeft } = dom.style;
+        const { marginLeft, height } = dom.style;
+        const noOfColumnsAttr =
+          dom.getAttribute('data-no-of-columns') ||
+          dom.getAttribute('noOfColumns') ||
+          dom.getAttribute('no-of-columns');
         const attrs = { dirty, coverPage };
 
-        if (marginLeft && /\d+px/.test(marginLeft)) {
+        if (marginLeft && /\d{1,1000}px/.test(marginLeft)) {
           attrs.marginLeft = parseFloat(marginLeft);
         }
+        if (height || dom.getAttribute('height')) {
+          attrs.tableheight = height || dom.getAttribute('height');
+        }
+        if (noOfColumnsAttr && /^\d{1,1000}$/.test(noOfColumnsAttr)) {
+          attrs.noOfColumns = parseInt(noOfColumnsAttr, 10);
+        }
+        if (!attrs.noOfColumns) {
+          const firstRow = dom.querySelector('tr');
+          const cells = firstRow
+            ? firstRow.querySelectorAll('th, td').length
+            : 0;
+          if (cells > 0) {
+            attrs.noOfColumns = cells;
+          }
+        }
 
         return attrs;
       },
@@ -131,10 +234,19 @@ const TableNodeSpec = Object.assign({}, TableNodesSpecs.table, {
     // `TableNodeView`. This method is only called when user selects a
     // table node and copies it, which triggers the "serialize to HTML" flow
     //  that calles this method.
-    const { marginLeft, dirty, coverPage } = node.attrs;
+    const { noOfColumns, tableheight, marginLeft, dirty, coverPage } =
+      node.attrs;
     const domAttrs = {};
-    if (marginLeft) {
-      domAttrs.style = `margin-left: ${marginLeft}px`;
+    const styleChunks = [];
+    if (marginLeft !== null && marginLeft !== undefined) {
+      styleChunks.push(`margin-left: ${marginLeft}px`);
+    }
+    const tableHeight = toCSSLength(tableheight);
+    if (tableHeight) {
+      styleChunks.push(`height: ${tableHeight}`);
+    }
+    if (styleChunks.length) {
+      domAttrs.style = styleChunks.join('; ');
     }
     if (dirty) {
       domAttrs.dirty = dirty;
@@ -142,9 +254,41 @@ const TableNodeSpec = Object.assign({}, TableNodesSpecs.table, {
     if (coverPage) {
       domAttrs['data-cover-page'] = 'true';
     }
+    if (typeof noOfColumns === 'number' && noOfColumns > 0) {
+      domAttrs['data-no-of-columns'] = String(noOfColumns);
+    }
     return ['table', domAttrs, 0];
   },
 });
-Object.assign(TableNodesSpecs, { table: TableNodeSpec });
+
+const TableRowNodeSpec = Object.assign({}, TableNodesSpecs.table_row, {
+  attrs: {
+    ...TableNodesSpecs.table_row.attrs,
+    rowHeight: { default: null },
+  },
+  parseDOM: [
+    {
+      tag: 'tr',
+      getAttrs(dom: HTMLElement): ?Object {
+        const rowHeight =
+          dom.style.height || dom.getAttribute('height') || null;
+        return rowHeight ? { rowHeight } : null;
+      },
+    },
+  ],
+  toDOM(node: Node): Array<any> {
+    const domAttrs = {};
+    const rowHeight = toCSSLength(node.attrs?.rowHeight);
+    if (rowHeight) {
+      domAttrs.style = `height: ${rowHeight}`;
+    }
+    return ['tr', domAttrs, 0];
+  },
+});
+
+Object.assign(TableNodesSpecs, {
+  table: TableNodeSpec,
+  table_row: TableRowNodeSpec,
+});
 
 export default TableNodesSpecs;

package/TableNodesSpecs.test.js

@@ -0,0 +1,49 @@
+import { DOMParser as PMDOMParser, DOMSerializer } from 'prosemirror-model';
+import EditorSchema from './EditorSchema.js';
+describe('TableNodesSpecs custom attrs', function () {
+  it('parses table, row, and cell custom attributes from DOM', function () {
+    var root = document.createElement('div');
+    root.innerHTML = "\n      <table data-no-of-columns=\"3\" style=\"height: 240px; margin-left: 12px;\">\n        <tbody>\n          <tr style=\"height: 44px;\">\n            <td\n              data-cell-style=\"text-align: center\"\n              style=\"width: 96px; font-size: 14px; letter-spacing: 1px; margin-top: 2px; margin-bottom: 3px;\"\n            >\n              <p>Cell</p>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    ";
+    var doc = PMDOMParser.fromSchema(EditorSchema).parse(root);
+    var tableNode = doc.firstChild;
+    var rowNode = tableNode.firstChild;
+    var cellNode = rowNode.firstChild;
+    expect(tableNode.attrs.noOfColumns).toBe(3);
+    expect(tableNode.attrs.tableheight).toBe('240px');
+    expect(rowNode.attrs.rowHeight).toBe('44px');
+    expect(cellNode.attrs.cellWidth).toBe('96px');
+    expect(cellNode.attrs.cellStyle).toBe('text-align: center');
+    expect(cellNode.attrs.fontSize).toBe('14px');
+    expect(cellNode.attrs.letterSpacing).toBe('1px');
+    expect(cellNode.attrs.marginTop).toBe('2px');
+    expect(cellNode.attrs.marginBottom).toBe('3px');
+  });
+  it('serializes table, row, and cell custom attributes to DOM', function () {
+    var paragraph = EditorSchema.nodes.paragraph.create(null, EditorSchema.text('x'));
+    var cellNode = EditorSchema.nodes.table_cell.create({
+      cellWidth: 110,
+      cellStyle: 'text-align: center',
+      fontSize: 13,
+      letterSpacing: '0.8px',
+      marginTop: 4,
+      marginBottom: '5px'
+    }, paragraph);
+    var rowNode = EditorSchema.nodes.table_row.create({
+      rowHeight: 52
+    }, cellNode);
+    var tableNode = EditorSchema.nodes.table.create({
+      noOfColumns: 1,
+      tableheight: 300,
+      marginLeft: 20
+    }, rowNode);
+    var tableEl = DOMSerializer.fromSchema(EditorSchema).serializeNode(tableNode);
+    var rowEl = tableEl.querySelector('tr');
+    var cellEl = tableEl.querySelector('td');
+    expect(tableEl.getAttribute('data-no-of-columns')).toBe('1');
+    expect(tableEl.style.height).toBe('300px');
+    expect(rowEl.style.height).toBe('52px');
+    var cellStyleText = cellEl.getAttribute('style') || '';
+    expect(cellStyleText).toContain('font-size: 13px');
+    expect(cellEl.getAttribute('data-cell-style')).toBe('text-align: center');
+  });
+});

package/TableNodesSpecs.test.js.flow

@@ -0,0 +1,76 @@
+import { DOMParser as PMDOMParser, DOMSerializer } from 'prosemirror-model';
+import EditorSchema from './EditorSchema.js';
+
+describe('TableNodesSpecs custom attrs', () => {
+  it('parses table, row, and cell custom attributes from DOM', () => {
+    const root = document.createElement('div');
+    root.innerHTML = `
+      <table data-no-of-columns="3" style="height: 240px; margin-left: 12px;">
+        <tbody>
+          <tr style="height: 44px;">
+            <td
+              data-cell-style="text-align: center"
+              style="width: 96px; font-size: 14px; letter-spacing: 1px; margin-top: 2px; margin-bottom: 3px;"
+            >
+              <p>Cell</p>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    `;
+
+    const doc = PMDOMParser.fromSchema(EditorSchema).parse(root);
+    const tableNode = doc.firstChild;
+    const rowNode = tableNode.firstChild;
+    const cellNode = rowNode.firstChild;
+
+    expect(tableNode.attrs.noOfColumns).toBe(3);
+    expect(tableNode.attrs.tableheight).toBe('240px');
+    expect(rowNode.attrs.rowHeight).toBe('44px');
+    expect(cellNode.attrs.cellWidth).toBe('96px');
+    expect(cellNode.attrs.cellStyle).toBe('text-align: center');
+    expect(cellNode.attrs.fontSize).toBe('14px');
+    expect(cellNode.attrs.letterSpacing).toBe('1px');
+    expect(cellNode.attrs.marginTop).toBe('2px');
+    expect(cellNode.attrs.marginBottom).toBe('3px');
+  });
+
+  it('serializes table, row, and cell custom attributes to DOM', () => {
+    const paragraph = EditorSchema.nodes.paragraph.create(
+      null,
+      EditorSchema.text('x')
+    );
+    const cellNode = EditorSchema.nodes.table_cell.create(
+      {
+        cellWidth: 110,
+        cellStyle: 'text-align: center',
+        fontSize: 13,
+        letterSpacing: '0.8px',
+        marginTop: 4,
+        marginBottom: '5px',
+      },
+      paragraph
+    );
+    const rowNode = EditorSchema.nodes.table_row.create(
+      { rowHeight: 52 },
+      cellNode
+    );
+    const tableNode = EditorSchema.nodes.table.create(
+      { noOfColumns: 1, tableheight: 300, marginLeft: 20 },
+      rowNode
+    );
+
+    const tableEl = DOMSerializer.fromSchema(EditorSchema).serializeNode(
+      tableNode
+    );
+    const rowEl = tableEl.querySelector('tr');
+    const cellEl = tableEl.querySelector('td');
+
+    expect(tableEl.getAttribute('data-no-of-columns')).toBe('1');
+    expect(tableEl.style.height).toBe('300px');
+    expect(rowEl.style.height).toBe('52px');
+    const cellStyleText = cellEl.getAttribute('style') || '';
+    expect(cellStyleText).toContain('font-size: 13px');
+    expect(cellEl.getAttribute('data-cell-style')).toBe('text-align: center');
+  });
+});