Tiptap improvements

[falkodev]

Table improvements

Content

• add header <th></th> on a row or a column with new buttons "Toggle Table Header Row" and "Toggle Table Header Column"
• highlight selected cells: previously, when selecting cells to merge them for example, they were not highlighted, leading to visual confusion
• merge cells fix: cells next to merged cells were aligned on the wrong column, under the merged cells. Now, original alignment is respected.

How to test

• git clone git@github.com:apostrophecms/apostrophe-boilerplate.git && git checkout tiptap-improvements && npm i
• in apostrophe-tiptap-rich-text-widgets folder, npm link

(every other step => in apostrophe-boilerplate)

• npm link apostrophe-tiptap-rich-text-widgets
• in app.js:

modules: {
  ...
  'apostrophe-tiptap-rich-text-widgets': {},
}

• in lib/modules/apostrophe-pages/views/pages/home.html:

{{
      apos.area(data.page, 'richText', {
        widgets: {
          'apostrophe-rich-text': {
            toolbar: [ 'bold', 'italic', 'link', 'table', 'import', 'undo', 'redo' ],
            styles: [
              {
                tag: 'p',
                label: 'Paragraph'
              },
              {
                tag: 'h3',
                label: 'Heading'
              },
              {
                tag: 'h3',
                'class': 'right',
                label: 'Heading (Right)'
              }
            ]
          }
        }
      })
    }}

• create a user, npm start, login: in homepage, fill the rich-text area