@squiz/formatted-text-editor 1.21.1-alpha.3 → 1.21.1-alpha.31

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 (168) hide show
  1. package/demo/App.tsx +45 -10
  2. package/demo/index.scss +11 -10
  3. package/jest.config.ts +0 -2
  4. package/lib/Editor/Editor.d.ts +1 -0
  5. package/lib/Editor/Editor.js +45 -7
  6. package/lib/Editor/EditorContext.d.ts +10 -0
  7. package/lib/Editor/EditorContext.js +15 -0
  8. package/lib/EditorToolbar/FloatingToolbar.d.ts +1 -0
  9. package/lib/EditorToolbar/FloatingToolbar.js +11 -5
  10. package/lib/EditorToolbar/Toolbar.d.ts +1 -0
  11. package/lib/EditorToolbar/Toolbar.js +3 -1
  12. package/lib/EditorToolbar/Tools/Bold/BoldButton.d.ts +1 -0
  13. package/lib/EditorToolbar/Tools/Bold/BoldButton.js +2 -2
  14. package/lib/EditorToolbar/Tools/Image/Form/ImageForm.d.ts +17 -0
  15. package/lib/EditorToolbar/Tools/Image/Form/ImageForm.js +82 -0
  16. package/lib/EditorToolbar/Tools/Image/ImageButton.d.ts +6 -0
  17. package/lib/EditorToolbar/Tools/Image/ImageButton.js +77 -0
  18. package/lib/EditorToolbar/Tools/Image/ImageModal.d.ts +9 -0
  19. package/lib/EditorToolbar/Tools/Image/ImageModal.js +16 -0
  20. package/lib/EditorToolbar/Tools/Italic/ItalicButton.d.ts +1 -0
  21. package/lib/EditorToolbar/Tools/Italic/ItalicButton.js +2 -2
  22. package/lib/EditorToolbar/Tools/Link/Form/LinkForm.d.ts +14 -5
  23. package/lib/EditorToolbar/Tools/Link/Form/LinkForm.js +67 -15
  24. package/lib/EditorToolbar/Tools/Link/LinkButton.d.ts +1 -0
  25. package/lib/EditorToolbar/Tools/Link/LinkButton.js +22 -14
  26. package/lib/EditorToolbar/Tools/Link/LinkModal.d.ts +1 -0
  27. package/lib/EditorToolbar/Tools/Link/LinkModal.js +12 -5
  28. package/lib/EditorToolbar/Tools/Link/RemoveLinkButton.d.ts +1 -0
  29. package/lib/EditorToolbar/Tools/Link/RemoveLinkButton.js +2 -9
  30. package/lib/EditorToolbar/Tools/Redo/RedoButton.d.ts +1 -0
  31. package/lib/EditorToolbar/Tools/Redo/RedoButton.js +2 -2
  32. package/lib/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.d.ts +1 -0
  33. package/lib/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.js +2 -2
  34. package/lib/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.d.ts +1 -0
  35. package/lib/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.js +2 -2
  36. package/lib/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.d.ts +1 -0
  37. package/lib/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.js +2 -2
  38. package/lib/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.d.ts +1 -0
  39. package/lib/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.js +2 -2
  40. package/lib/EditorToolbar/Tools/TextAlign/TextAlignButtons.d.ts +1 -0
  41. package/lib/EditorToolbar/Tools/TextType/Heading/HeadingButton.d.ts +1 -0
  42. package/lib/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.d.ts +1 -0
  43. package/lib/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.d.ts +1 -0
  44. package/lib/EditorToolbar/Tools/TextType/TextTypeDropdown.d.ts +1 -0
  45. package/lib/EditorToolbar/Tools/Underline/UnderlineButton.d.ts +1 -0
  46. package/lib/EditorToolbar/Tools/Underline/UnderlineButton.js +2 -2
  47. package/lib/EditorToolbar/Tools/Undo/UndoButton.d.ts +1 -0
  48. package/lib/EditorToolbar/Tools/Undo/UndoButton.js +2 -2
  49. package/lib/Extensions/CommandsExtension/CommandsExtension.d.ts +20 -0
  50. package/lib/Extensions/CommandsExtension/CommandsExtension.js +52 -0
  51. package/lib/Extensions/Extensions.d.ts +7 -4
  52. package/lib/Extensions/Extensions.js +32 -19
  53. package/lib/Extensions/ImageExtension/ImageExtension.d.ts +10 -0
  54. package/lib/Extensions/ImageExtension/ImageExtension.js +92 -0
  55. package/lib/Extensions/LinkExtension/AssetLinkExtension.d.ts +26 -0
  56. package/lib/Extensions/LinkExtension/AssetLinkExtension.js +102 -0
  57. package/lib/Extensions/LinkExtension/LinkExtension.d.ts +21 -12
  58. package/lib/Extensions/LinkExtension/LinkExtension.js +63 -65
  59. package/lib/Extensions/LinkExtension/common.d.ts +7 -0
  60. package/lib/Extensions/LinkExtension/common.js +14 -0
  61. package/lib/Extensions/PreformattedExtension/PreformattedExtension.d.ts +1 -1
  62. package/lib/hooks/index.d.ts +1 -0
  63. package/lib/hooks/index.js +1 -0
  64. package/lib/hooks/useExpandedSelection.d.ts +23 -0
  65. package/lib/hooks/useExpandedSelection.js +37 -0
  66. package/lib/index.css +159 -74
  67. package/lib/index.d.ts +5 -2
  68. package/lib/index.js +9 -3
  69. package/lib/types.d.ts +3 -0
  70. package/lib/types.js +2 -0
  71. package/lib/ui/Button/Button.d.ts +11 -0
  72. package/lib/ui/{ToolbarButton/ToolbarButton.js → Button/Button.js} +6 -3
  73. package/lib/ui/Fields/Input/Input.d.ts +5 -0
  74. package/lib/ui/{Inputs/Text/TextInput.js → Fields/Input/Input.js} +10 -5
  75. package/lib/ui/{Inputs → Fields}/Select/Select.d.ts +1 -0
  76. package/lib/ui/Modal/Modal.js +5 -3
  77. package/lib/ui/ToolbarDropdown/ToolbarDropdown.d.ts +1 -0
  78. package/lib/ui/ToolbarDropdownButton/ToolbarDropdownButton.d.ts +1 -0
  79. package/lib/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.d.ts +9 -0
  80. package/lib/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.js +165 -0
  81. package/lib/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.d.ts +9 -0
  82. package/lib/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.js +129 -0
  83. package/lib/utils/undefinedIfEmpty.d.ts +1 -0
  84. package/lib/utils/undefinedIfEmpty.js +7 -0
  85. package/package.json +11 -4
  86. package/src/Editor/Editor.spec.tsx +78 -18
  87. package/src/Editor/Editor.tsx +28 -9
  88. package/src/Editor/EditorContext.spec.tsx +26 -0
  89. package/src/Editor/EditorContext.ts +19 -0
  90. package/src/Editor/_editor.scss +20 -51
  91. package/src/EditorToolbar/FloatingToolbar.spec.tsx +2 -3
  92. package/src/EditorToolbar/FloatingToolbar.tsx +15 -6
  93. package/src/EditorToolbar/Toolbar.tsx +2 -0
  94. package/src/EditorToolbar/Tools/Bold/BoldButton.spec.tsx +1 -1
  95. package/src/EditorToolbar/Tools/Bold/BoldButton.tsx +2 -2
  96. package/src/EditorToolbar/Tools/Image/Form/ImageForm.spec.tsx +77 -0
  97. package/src/EditorToolbar/Tools/Image/Form/ImageForm.tsx +90 -0
  98. package/src/EditorToolbar/Tools/Image/ImageButton.spec.tsx +135 -0
  99. package/src/EditorToolbar/Tools/Image/ImageButton.tsx +72 -0
  100. package/src/EditorToolbar/Tools/Image/ImageModal.spec.tsx +83 -0
  101. package/src/EditorToolbar/Tools/Image/ImageModal.tsx +24 -0
  102. package/src/EditorToolbar/Tools/Italic/ItalicButton.spec.tsx +1 -1
  103. package/src/EditorToolbar/Tools/Italic/ItalicButton.tsx +2 -2
  104. package/src/EditorToolbar/Tools/Link/Form/LinkForm.spec.tsx +37 -9
  105. package/src/EditorToolbar/Tools/Link/Form/LinkForm.tsx +97 -27
  106. package/src/EditorToolbar/Tools/Link/LinkButton.spec.tsx +104 -26
  107. package/src/EditorToolbar/Tools/Link/LinkButton.tsx +30 -21
  108. package/src/EditorToolbar/Tools/Link/LinkModal.tsx +13 -6
  109. package/src/EditorToolbar/Tools/Link/RemoveLinkButton.spec.tsx +26 -26
  110. package/src/EditorToolbar/Tools/Link/RemoveLinkButton.tsx +4 -12
  111. package/src/EditorToolbar/Tools/Redo/RedoButton.tsx +2 -2
  112. package/src/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.tsx +2 -2
  113. package/src/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.tsx +2 -2
  114. package/src/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.tsx +2 -2
  115. package/src/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.tsx +2 -2
  116. package/src/EditorToolbar/Tools/Underline/Underline.spec.tsx +1 -1
  117. package/src/EditorToolbar/Tools/Underline/UnderlineButton.tsx +2 -2
  118. package/src/EditorToolbar/Tools/Undo/UndoButton.spec.tsx +22 -1
  119. package/src/EditorToolbar/Tools/Undo/UndoButton.tsx +2 -2
  120. package/src/EditorToolbar/_floating-toolbar.scss +5 -0
  121. package/src/EditorToolbar/_toolbar.scss +11 -5
  122. package/src/Extensions/CommandsExtension/CommandsExtension.ts +54 -0
  123. package/src/Extensions/Extensions.ts +32 -17
  124. package/src/Extensions/ImageExtension/ImageExtension.ts +112 -0
  125. package/src/Extensions/LinkExtension/AssetLinkExtension.spec.ts +104 -0
  126. package/src/Extensions/LinkExtension/AssetLinkExtension.ts +128 -0
  127. package/src/Extensions/LinkExtension/LinkExtension.spec.ts +68 -0
  128. package/src/Extensions/LinkExtension/LinkExtension.ts +88 -82
  129. package/src/Extensions/LinkExtension/common.ts +10 -0
  130. package/src/hooks/index.ts +1 -0
  131. package/src/hooks/useExpandedSelection.ts +44 -0
  132. package/src/index.scss +2 -2
  133. package/src/index.ts +5 -2
  134. package/src/types.ts +5 -0
  135. package/src/ui/Button/Button.spec.tsx +44 -0
  136. package/src/ui/Button/Button.tsx +29 -0
  137. package/src/ui/{_buttons.scss → Button/_button.scss} +19 -1
  138. package/src/ui/{Inputs/Text/TextInput.spec.tsx → Fields/Input/Input.spec.tsx} +8 -8
  139. package/src/ui/Fields/Input/Input.tsx +34 -0
  140. package/src/ui/Modal/Modal.spec.tsx +15 -0
  141. package/src/ui/Modal/Modal.tsx +8 -4
  142. package/src/ui/ToolbarDropdown/_toolbar-dropdown.scss +1 -1
  143. package/src/ui/_forms.scss +14 -0
  144. package/src/ui/_typography.scss +46 -0
  145. package/src/utils/converters/mocks/squizNodeJson.mock.ts +252 -0
  146. package/src/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.spec.ts +480 -0
  147. package/src/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.ts +202 -0
  148. package/src/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.spec.ts +329 -0
  149. package/src/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.ts +151 -0
  150. package/src/utils/undefinedIfEmpty.spec.ts +12 -0
  151. package/src/utils/undefinedIfEmpty.ts +3 -0
  152. package/tailwind.config.cjs +3 -0
  153. package/tests/renderWithEditor.tsx +28 -15
  154. package/tsconfig.json +1 -1
  155. package/lib/FormattedTextEditor.d.ts +0 -2
  156. package/lib/FormattedTextEditor.js +0 -7
  157. package/lib/ui/Inputs/Text/TextInput.d.ts +0 -4
  158. package/lib/ui/ToolbarButton/ToolbarButton.d.ts +0 -10
  159. package/src/Editor/Editor.mock.tsx +0 -43
  160. package/src/FormattedTextEditor.spec.tsx +0 -10
  161. package/src/FormattedTextEditor.tsx +0 -3
  162. package/src/ui/Inputs/Text/TextInput.tsx +0 -20
  163. package/src/ui/ToolbarButton/ToolbarButton.tsx +0 -26
  164. package/src/ui/ToolbarButton/_toolbar-button.scss +0 -17
  165. /package/lib/ui/{Inputs → Fields}/Select/Select.js +0 -0
  166. /package/src/ui/{Inputs → Fields}/Select/Select.spec.tsx +0 -0
  167. /package/src/ui/{Inputs → Fields}/Select/Select.tsx +0 -0
  168. /package/tests/{select.tsx → select.ts} +0 -0
@@ -2,6 +2,8 @@ import '@testing-library/jest-dom';
2
2
  import { render, screen, fireEvent } from '@testing-library/react';
3
3
  import React from 'react';
4
4
  import Modal from './Modal';
5
+ import { Select } from '../Fields/Select/Select';
6
+ import { Input } from '../Fields/Input/Input';
5
7
 
6
8
  describe('Modal', () => {
7
9
  const mockOnCancel = jest.fn();
@@ -110,4 +112,17 @@ describe('Modal', () => {
110
112
 
111
113
  expect(screen.getByLabelText('My input')).toHaveFocus();
112
114
  });
115
+
116
+ it('Auto-focuses on the first select field on mount', () => {
117
+ render(
118
+ <Modal title="Modal title" onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
119
+ <>
120
+ <Select label="Dropdown" name="select" options={{}} />
121
+ <Input label="Input" name="input" />
122
+ </>
123
+ </Modal>,
124
+ );
125
+
126
+ expect(screen.getByLabelText('Dropdown')).toHaveFocus();
127
+ });
113
128
  });
@@ -1,7 +1,8 @@
1
- import React, { ForwardedRef, forwardRef, ReactElement, useEffect, useMemo } from 'react';
1
+ import React, { ForwardedRef, forwardRef, ReactElement, useEffect, useMemo, useRef } from 'react';
2
2
  import { createPortal } from 'react-dom';
3
3
  import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
4
4
  import { FocusTrap } from '@mui/base';
5
+ import clsx from 'clsx';
5
6
 
6
7
  export type ModalProps = {
7
8
  title: string;
@@ -15,6 +16,7 @@ const Modal = (
15
16
  { children, title, onCancel, onSubmit, className }: ModalProps,
16
17
  ref: ForwardedRef<HTMLDivElement>,
17
18
  ): ReactElement => {
19
+ const content = useRef<HTMLDivElement>(null);
18
20
  const container = useMemo(() => {
19
21
  const element = document.createElement('div');
20
22
  element.classList.add('squiz-fte-scope');
@@ -37,7 +39,7 @@ const Modal = (
37
39
 
38
40
  // add/remove the modal container from the DOM and focus on the first input
39
41
  useEffect(() => {
40
- const firstInput = container.querySelector('input:not([type=hidden])') as HTMLInputElement;
42
+ const firstInput = content.current?.querySelector('input:not([type=hidden]), button') as HTMLElement;
41
43
 
42
44
  document.body.appendChild(container);
43
45
  firstInput?.focus();
@@ -50,7 +52,7 @@ const Modal = (
50
52
  return createPortal(
51
53
  <>
52
54
  <FocusTrap open>
53
- <div ref={ref} className={`squiz-fte-modal-wrapper ${className ? className : ''}`} tabIndex={-1}>
55
+ <div ref={ref} className={clsx('squiz-fte-modal-wrapper', className)} tabIndex={-1}>
54
56
  <div className="w-modal-sm my-6 mx-auto">
55
57
  <div className="squiz-fte-modal">
56
58
  <div className="squiz-fte-modal-header p-6 pb-2">
@@ -64,7 +66,9 @@ const Modal = (
64
66
  <CloseRoundedIcon />
65
67
  </button>
66
68
  </div>
67
- <div className="squiz-fte-modal-content">{children}</div>
69
+ <div className="squiz-fte-modal-content" ref={content}>
70
+ {children}
71
+ </div>
68
72
  <div className="squiz-fte-modal-footer p-6 pt-3">
69
73
  <button
70
74
  className="squiz-fte-modal-footer__button bg-gray-200 text-gray-700 mr-2 hover:bg-gray-300"
@@ -1,6 +1,6 @@
1
1
  .toolbar-dropdown {
2
2
  &__button {
3
- @apply flex items-center font-base text-md font-semibold text-gray-600;
3
+ @apply flex items-center font-base text-md font-semibold text-gray-600 rounded;
4
4
  align-self: center;
5
5
 
6
6
  height: 2rem;
@@ -13,4 +13,18 @@
13
13
  box-shadow: none;
14
14
  }
15
15
  }
16
+ &-invalid-form-field {
17
+ .squiz-fte-form-control {
18
+ @apply border-red-300 bg-no-repeat;
19
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHdpZHRoPSIyNCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0ibm9uZSIvPjxnIGNsYXNzPSJjdXJyZW50TGF5ZXIiPjxwYXRoIGQ9Ik00LjQ3IDIxaDE1LjA2YzEuNTQgMCAyLjUtMS42NyAxLjczLTNMMTMuNzMgNC45OWMtLjc3LTEuMzMtMi42OS0xLjMzLTMuNDYgMEwyLjc0IDE4Yy0uNzcgMS4zMy4xOSAzIDEuNzMgM3pNMTIgMTRjLS41NSAwLTEtLjQ1LTEtMXYtMmMwLS41NS40NS0xIDEtMXMxIC40NSAxIDF2MmMwIC41NS0uNDUgMS0xIDF6bTEgNGgtMnYtMmgydjJ6IiBjbGFzcz0ic2VsZWN0ZWQiIGZpbGw9IiNkNzIzMjEiLz48L2c+PC9zdmc+');
20
+ background-position: top 0.25rem right 0.25rem;
21
+ background-size: 1.5rem;
22
+ }
23
+ }
24
+ &-form-error {
25
+ @apply text-red-300;
26
+ font-size: 13px;
27
+ line-height: 1.23;
28
+ padding-top: 0.25rem;
29
+ }
16
30
  }
@@ -0,0 +1,46 @@
1
+ a {
2
+ @apply text-blue-300;
3
+ text-decoration: underline;
4
+ }
5
+
6
+ h1 {
7
+ font-size: 1.625rem;
8
+ font-weight: 600;
9
+ letter-spacing: -0.2px;
10
+ line-height: 2rem;
11
+ }
12
+
13
+ h2 {
14
+ font-size: 1.25rem;
15
+ font-weight: 600;
16
+ letter-spacing: -0.5px;
17
+ line-height: 1.5rem;
18
+ }
19
+
20
+ h3 {
21
+ font-size: 1.125rem;
22
+ font-weight: 600;
23
+ letter-spacing: -0.2px;
24
+ line-height: 1.375rem;
25
+ }
26
+
27
+ h4 {
28
+ font-size: 1rem;
29
+ font-weight: 700;
30
+ letter-spacing: -0.2px;
31
+ line-height: 1.25rem;
32
+ }
33
+
34
+ h5 {
35
+ font-size: 1rem;
36
+ font-weight: 600;
37
+ letter-spacing: -0.2px;
38
+ line-height: 1.25rem;
39
+ }
40
+
41
+ h6 {
42
+ font-size: 0.875rem;
43
+ font-weight: 600;
44
+ letter-spacing: -0.2px;
45
+ line-height: 1.25rem;
46
+ }
@@ -0,0 +1,252 @@
1
+ import { FORMATTED_TEXT_MODELS as FormattedTextModels } from '@squiz/dx-json-schema-lib';
2
+ import { RemirrorJSON } from '@remirror/core';
3
+
4
+ export const mockSquizNodeJson: FormattedTextModels.v1.FormattedText = [
5
+ {
6
+ children: [
7
+ {
8
+ type: 'text',
9
+ value: 'Hello ',
10
+ },
11
+ {
12
+ children: [
13
+ {
14
+ type: 'text',
15
+ value: 'Mr Bean',
16
+ },
17
+ ],
18
+ attributes: {
19
+ href: 'https://www.google.com',
20
+ },
21
+ font: {
22
+ bold: true,
23
+ },
24
+ type: 'tag',
25
+ tag: 'a',
26
+ },
27
+ {
28
+ type: 'text',
29
+ value: ', nice to ',
30
+ },
31
+ {
32
+ children: [
33
+ {
34
+ type: 'text',
35
+ value: 'meet you',
36
+ },
37
+ ],
38
+ attributes: {
39
+ href: 'https://www.google.com',
40
+ },
41
+ type: 'tag',
42
+ tag: 'a',
43
+ },
44
+ {
45
+ type: 'text',
46
+ value: '.',
47
+ },
48
+ {
49
+ children: [],
50
+ attributes: {
51
+ alt: 'Test',
52
+ height: '150',
53
+ width: '200',
54
+ src: 'https://media2.giphy.com/media/3o6ozsIxg5legYvggo/giphy.gif',
55
+ title: '',
56
+ resizable: 'false',
57
+ },
58
+ type: 'tag',
59
+ tag: 'img',
60
+ },
61
+ ],
62
+ type: 'tag',
63
+ tag: 'p',
64
+ },
65
+ ];
66
+
67
+ export const mockSquizNodeTextJson: FormattedTextModels.v1.FormattedText = [
68
+ {
69
+ value: 'Hello world!',
70
+ type: 'text',
71
+ },
72
+ {
73
+ value: 'Another one...',
74
+ type: 'text',
75
+ },
76
+ ];
77
+
78
+ type NodeExample = {
79
+ description: string;
80
+ remirrorNode: RemirrorJSON;
81
+ squizNode: FormattedTextModels.v1.FormattedText;
82
+ };
83
+
84
+ export const sharedNodeExamples: NodeExample[] = [
85
+ {
86
+ description: 'Asset link',
87
+ remirrorNode: {
88
+ type: 'text',
89
+ text: 'Hello',
90
+ marks: [
91
+ {
92
+ type: 'assetLink',
93
+ attrs: {
94
+ target: '_blank',
95
+ matrixAssetId: '123',
96
+ matrixDomain: 'https://my-matrix.squiz.net',
97
+ matrixIdentifier: 'matrix-api-identifier',
98
+ },
99
+ },
100
+ ],
101
+ },
102
+ squizNode: [
103
+ {
104
+ type: 'link-to-matrix-asset',
105
+ target: '_blank',
106
+ matrixAssetId: '123',
107
+ matrixDomain: 'https://my-matrix.squiz.net',
108
+ matrixIdentifier: 'matrix-api-identifier',
109
+ children: [{ type: 'text', value: 'Hello' }],
110
+ },
111
+ ],
112
+ },
113
+ {
114
+ description: 'Asset link with formatting applied inside of the link',
115
+ remirrorNode: {
116
+ type: 'text',
117
+ text: 'Hello',
118
+ marks: [
119
+ { type: 'bold' },
120
+ {
121
+ type: 'assetLink',
122
+ attrs: {
123
+ target: '_blank',
124
+ matrixAssetId: '123',
125
+ matrixDomain: 'https://my-matrix.squiz.net',
126
+ matrixIdentifier: 'matrix-api-identifier',
127
+ },
128
+ },
129
+ ],
130
+ },
131
+ squizNode: [
132
+ {
133
+ type: 'link-to-matrix-asset',
134
+ target: '_blank',
135
+ matrixAssetId: '123',
136
+ matrixDomain: 'https://my-matrix.squiz.net',
137
+ matrixIdentifier: 'matrix-api-identifier',
138
+ children: [
139
+ {
140
+ type: 'tag',
141
+ tag: 'span',
142
+ font: { bold: true },
143
+ children: [{ type: 'text', value: 'Hello' }],
144
+ },
145
+ ],
146
+ },
147
+ ],
148
+ },
149
+ ];
150
+
151
+ export const squizOnlyNodeExamples: NodeExample[] = [
152
+ {
153
+ description: 'Asset link with formatting applied inside, outside and with multiple levels of nesting',
154
+ squizNode: [
155
+ {
156
+ type: 'tag',
157
+ tag: 'span',
158
+ font: { bold: true },
159
+ children: [
160
+ {
161
+ type: 'link-to-matrix-asset',
162
+ target: '_blank',
163
+ matrixAssetId: '123',
164
+ matrixDomain: 'https://my-matrix.squiz.net',
165
+ matrixIdentifier: 'matrix-api-identifier',
166
+ children: [
167
+ {
168
+ type: 'tag',
169
+ tag: 'span',
170
+ font: { italics: true },
171
+ children: [
172
+ {
173
+ type: 'tag',
174
+ tag: 'span',
175
+ font: { underline: true },
176
+ children: [{ type: 'text', value: 'Hello' }],
177
+ },
178
+ ],
179
+ },
180
+ ],
181
+ },
182
+ ],
183
+ },
184
+ ],
185
+ remirrorNode: {
186
+ // reverse operation covered by "Asset link with formatting applied inside of the link".
187
+ type: 'text',
188
+ text: 'Hello',
189
+ marks: [
190
+ { type: 'underline' },
191
+ { type: 'italic' },
192
+ {
193
+ type: 'assetLink',
194
+ attrs: {
195
+ target: '_blank',
196
+ matrixAssetId: '123',
197
+ matrixDomain: 'https://my-matrix.squiz.net',
198
+ matrixIdentifier: 'matrix-api-identifier',
199
+ },
200
+ },
201
+ { type: 'bold' },
202
+ ],
203
+ },
204
+ },
205
+ {
206
+ description: 'Asset link with multiple levels of un-necessary nesting',
207
+ squizNode: [
208
+ {
209
+ type: 'tag',
210
+ tag: 'span',
211
+ children: [
212
+ {
213
+ type: 'link-to-matrix-asset',
214
+ target: '_blank',
215
+ matrixAssetId: '123',
216
+ matrixDomain: 'https://my-matrix.squiz.net',
217
+ matrixIdentifier: 'matrix-api-identifier',
218
+ children: [
219
+ {
220
+ type: 'tag',
221
+ tag: 'span',
222
+ children: [
223
+ {
224
+ type: 'tag',
225
+ tag: 'span',
226
+ children: [{ type: 'text', value: 'Hello' }],
227
+ },
228
+ ],
229
+ },
230
+ ],
231
+ },
232
+ ],
233
+ },
234
+ ],
235
+ remirrorNode: {
236
+ // reverse operation covered by "Asset link".
237
+ type: 'text',
238
+ text: 'Hello',
239
+ marks: [
240
+ {
241
+ type: 'assetLink',
242
+ attrs: {
243
+ target: '_blank',
244
+ matrixAssetId: '123',
245
+ matrixDomain: 'https://my-matrix.squiz.net',
246
+ matrixIdentifier: 'matrix-api-identifier',
247
+ },
248
+ },
249
+ ],
250
+ },
251
+ },
252
+ ];