@squiz/formatted-text-editor 1.69.0 → 1.71.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/demo/App.tsx +15 -0
  3. package/lib/Editor/Editor.d.ts +2 -1
  4. package/lib/Editor/Editor.js +11 -3
  5. package/lib/EditorToolbar/Toolbar.d.ts +2 -1
  6. package/lib/EditorToolbar/Toolbar.js +4 -2
  7. package/lib/EditorToolbar/Tools/Table/TableButton.d.ts +3 -0
  8. package/lib/EditorToolbar/Tools/Table/TableButton.js +22 -0
  9. package/lib/Extensions/Extensions.d.ts +2 -0
  10. package/lib/Extensions/Extensions.js +6 -0
  11. package/lib/index.css +296 -0
  12. package/lib/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.js +19 -4
  13. package/lib/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.js +23 -0
  14. package/package.json +2 -1
  15. package/src/Editor/Editor.tsx +13 -2
  16. package/src/Editor/_editor.scss +365 -0
  17. package/src/EditorToolbar/Toolbar.tsx +4 -1
  18. package/src/EditorToolbar/Tools/Table/TableButton.spec.tsx +25 -0
  19. package/src/EditorToolbar/Tools/Table/TableButton.tsx +32 -0
  20. package/src/Extensions/Extensions.ts +7 -0
  21. package/src/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.spec.ts +457 -0
  22. package/src/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.ts +24 -5
  23. package/src/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.spec.ts +210 -0
  24. package/src/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.ts +23 -0
  25. package/src/utils/getNodeNamesByGroup.spec.ts +5 -0
package/src/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.spec.ts CHANGED
@@ -665,4 +665,214 @@ describe('squizNodeToRemirrorNode', () => {
665
665
  const result = squizNodeToRemirrorNode(squizComponentJSON);
666
666
  expect(result).toEqual(expected);
667
667
  });
668
+
669
+ it('should handle tables', () => {
670
+ const squizJSON: FormattedText = [
671
+ {
672
+ type: 'tag',
673
+ tag: 'table',
674
+ children: [
675
+ {
676
+ type: 'tag',
677
+ tag: 'tr',
678
+ children: [
679
+ {
680
+ type: 'tag',
681
+ tag: 'th',
682
+ children: [],
683
+ attributes: {
684
+ colspan: '1',
685
+ rowspan: '1',
686
+ tableControllerCell: 'true',
687
+ },
688
+ },
689
+ {
690
+ type: 'tag',
691
+ tag: 'th',
692
+ children: [],
693
+ attributes: {
694
+ colspan: '1',
695
+ rowspan: '1',
696
+ tableControllerCell: 'true',
697
+ colwidth: '366',
698
+ },
699
+ },
700
+ {
701
+ type: 'tag',
702
+ tag: 'th',
703
+ children: [],
704
+ attributes: {
705
+ colspan: '1',
706
+ rowspan: '1',
707
+ tableControllerCell: 'true',
708
+ },
709
+ },
710
+ ],
711
+ },
712
+ {
713
+ type: 'tag',
714
+ tag: 'tr',
715
+ children: [
716
+ {
717
+ type: 'tag',
718
+ tag: 'th',
719
+ children: [],
720
+ attributes: {
721
+ colspan: '1',
722
+ rowspan: '1',
723
+ tableControllerCell: 'true',
724
+ },
725
+ },
726
+ {
727
+ type: 'tag',
728
+ tag: 'td',
729
+ children: [
730
+ {
731
+ type: 'tag',
732
+ tag: 'p',
733
+ children: [],
734
+ },
735
+ ],
736
+ attributes: {
737
+ colspan: '1',
738
+ rowspan: '1',
739
+ colwidth: '366',
740
+ },
741
+ },
742
+ {
743
+ type: 'tag',
744
+ tag: 'td',
745
+ children: [
746
+ {
747
+ type: 'tag',
748
+ tag: 'p',
749
+ children: [],
750
+ },
751
+ ],
752
+ attributes: {
753
+ colspan: '1',
754
+ rowspan: '1',
755
+ },
756
+ },
757
+ ],
758
+ },
759
+ ],
760
+ },
761
+ ];
762
+
763
+ const expected: RemirrorJSON = {
764
+ type: 'doc',
765
+ content: [
766
+ {
767
+ type: 'table',
768
+ attrs: {
769
+ isControllersInjected: true,
770
+ },
771
+ content: [
772
+ {
773
+ type: 'tableRow',
774
+ attrs: {
775
+ nodeIndent: null,
776
+ nodeLineHeight: null,
777
+ nodeTextAlignment: null,
778
+ style: '',
779
+ },
780
+ content: [
781
+ {
782
+ type: 'tableControllerCell',
783
+ attrs: {
784
+ colspan: 1,
785
+ rowspan: 1,
786
+ colwidth: null,
787
+ background: null,
788
+ },
789
+ },
790
+ {
791
+ type: 'tableControllerCell',
792
+ attrs: {
793
+ colspan: 1,
794
+ rowspan: 1,
795
+ colwidth: [366],
796
+ background: null,
797
+ },
798
+ },
799
+ {
800
+ type: 'tableControllerCell',
801
+ attrs: {
802
+ colspan: 1,
803
+ rowspan: 1,
804
+ colwidth: null,
805
+ background: null,
806
+ },
807
+ },
808
+ ],
809
+ },
810
+ {
811
+ type: 'tableRow',
812
+ attrs: {
813
+ nodeIndent: null,
814
+ nodeLineHeight: null,
815
+ nodeTextAlignment: null,
816
+ style: '',
817
+ },
818
+ content: [
819
+ {
820
+ type: 'tableControllerCell',
821
+ attrs: {
822
+ colspan: 1,
823
+ rowspan: 1,
824
+ colwidth: null,
825
+ background: null,
826
+ },
827
+ },
828
+ {
829
+ type: 'tableCell',
830
+ attrs: {
831
+ colspan: 1,
832
+ rowspan: 1,
833
+ colwidth: [366],
834
+ background: null,
835
+ },
836
+ content: [
837
+ {
838
+ type: 'paragraph',
839
+ attrs: {
840
+ nodeIndent: null,
841
+ nodeTextAlignment: null,
842
+ nodeLineHeight: null,
843
+ style: '',
844
+ },
845
+ },
846
+ ],
847
+ },
848
+ {
849
+ type: 'tableCell',
850
+ attrs: {
851
+ colspan: 1,
852
+ rowspan: 1,
853
+ colwidth: null,
854
+ background: null,
855
+ },
856
+ content: [
857
+ {
858
+ type: 'paragraph',
859
+ attrs: {
860
+ nodeIndent: null,
861
+ nodeTextAlignment: null,
862
+ nodeLineHeight: null,
863
+ style: '',
864
+ },
865
+ },
866
+ ],
867
+ },
868
+ ],
869
+ },
870
+ ],
871
+ },
872
+ ],
873
+ };
874
+
875
+ const result = squizNodeToRemirrorNode(squizJSON);
876
+ expect(result).toEqual(expected);
877
+ });
668
878
  });
package/src/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.ts CHANGED
@@ -28,6 +28,10 @@ const getNodeType = (node: FormattedNodes): string => {
28
28
  li: 'listItem',
29
29
  ul: 'bulletList',
30
30
  hr: 'horizontalRule',
31
+ table: 'table',
32
+ tr: 'tableRow',
33
+ th: 'tableHeaderCell',
34
+ td: 'tableCell',
31
35
  a: NodeName.Text,
32
36
  em: NodeName.Text,
33
37
  span: NodeName.Text,
@@ -41,6 +45,12 @@ const getNodeType = (node: FormattedNodes): string => {
41
45
  }
42
46
 
43
47
  if (node.type === 'tag' && tagMap[node.tag]) {
48
+ // This is a specific check case for tables as there are some <th> tags which need to be returned
49
+ // as table controller cells.
50
+ if (node.attributes?.tableControllerCell) {
51
+ return 'tableControllerCell';
52
+ }
53
+ // Return regular tag for everything else
44
54
  return tagMap[node.tag];
45
55
  }
46
56
 
@@ -53,6 +63,19 @@ const getNodeType = (node: FormattedNodes): string => {
53
63
  };
54
64
 
55
65
  const getNodeAttributes = (node: FormattedNodes): Attrs => {
66
+ if (node.type === 'tag' && node.tag === 'table') {
67
+ return {
68
+ isControllersInjected: true,
69
+ };
70
+ }
71
+ if (node.type === 'tag' && (node.tag === 'th' || node.tag === 'td')) {
72
+ return {
73
+ colspan: parseInt(node.attributes?.colspan ?? '1'),
74
+ rowspan: parseInt(node.attributes?.rowspan ?? '1'),
75
+ colwidth: node.attributes?.colwidth ? [parseInt(node.attributes.colwidth)] : null,
76
+ background: null,
77
+ };
78
+ }
56
79
  if (node.type === 'tag' && node.tag === 'img') {
57
80
  return {
58
81
  alt: node.attributes?.alt,
package/src/utils/getNodeNamesByGroup.spec.ts CHANGED
@@ -19,6 +19,7 @@ describe('getNodeNamesByGroup', () => {
19
19
  'assetImage',
20
20
  'doc',
21
21
  'text',
22
+ 'tableControllerCell',
22
23
  'codeBlock',
23
24
  'image',
24
25
  'unsupportedNode',
@@ -26,7 +27,11 @@ describe('getNodeNamesByGroup', () => {
26
27
  'listItem',
27
28
  'orderedList',
28
29
  'horizontalRule',
30
+ 'table',
29
31
  'hardBreak',
32
+ 'tableRow',
33
+ 'tableCell',
34
+ 'tableHeaderCell',
30
35
  ]);
31
36
  });
32
37
  });