@contentful/field-editor-markdown 1.2.0 → 1.3.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 (136) hide show
  1. package/dist/cjs/MarkdownActions.js +235 -0
  2. package/dist/cjs/MarkdownEditor.js +180 -0
  3. package/dist/cjs/__fixtures__/FakeSdk.js +183 -0
  4. package/dist/cjs/__fixtures__/asset/index.js +37 -0
  5. package/dist/cjs/__fixtures__/content-type/index.js +16 -0
  6. package/dist/cjs/__fixtures__/entry/index.js +33 -0
  7. package/dist/cjs/__fixtures__/fixtures.js +71 -0
  8. package/dist/cjs/__fixtures__/locale/index.js +40 -0
  9. package/dist/cjs/__fixtures__/space/index.js +16 -0
  10. package/dist/cjs/codemirrorImports.js +9 -0
  11. package/dist/cjs/components/HeadingSelector.js +66 -0
  12. package/dist/cjs/components/InsertLinkSelector.js +86 -0
  13. package/dist/cjs/components/MarkdownBottomBar.js +111 -0
  14. package/dist/cjs/components/MarkdownConstraints.js +79 -0
  15. package/dist/cjs/components/MarkdownPreview.js +249 -0
  16. package/dist/cjs/components/MarkdownTabs.js +128 -0
  17. package/dist/cjs/components/MarkdownTextarea/CodeMirrorWrapper.js +383 -0
  18. package/dist/cjs/components/MarkdownTextarea/MarkdownCommands.js +233 -0
  19. package/dist/cjs/components/MarkdownTextarea/MarkdownTextarea.js +190 -0
  20. package/dist/cjs/components/MarkdownTextarea/createMarkdownEditor.js +101 -0
  21. package/dist/cjs/components/MarkdownToolbar.js +367 -0
  22. package/dist/cjs/components/icons.js +193 -0
  23. package/dist/cjs/dialogs/CheatsheetModalDialog.js +239 -0
  24. package/dist/cjs/dialogs/ConfirmInsertAssetModalDialog.js +94 -0
  25. package/dist/cjs/dialogs/EmdebExternalContentDialog.js +202 -0
  26. package/dist/cjs/dialogs/InsertLinkModalDialog.js +149 -0
  27. package/dist/cjs/dialogs/InsertTableModalDialog.js +140 -0
  28. package/dist/cjs/dialogs/SpecialCharacterModalDialog.js +146 -0
  29. package/dist/cjs/dialogs/ZenModeModalDialog.js +257 -0
  30. package/dist/cjs/dialogs/openMarkdownDialog.js +121 -0
  31. package/dist/cjs/dialogs/renderMarkdownDialog.js +108 -0
  32. package/dist/cjs/index.js +29 -0
  33. package/dist/cjs/types.js +20 -0
  34. package/dist/cjs/utils/insertAssetLinks.js +122 -0
  35. package/dist/cjs/utils/insertAssetLinks.spec.js +22 -0
  36. package/dist/cjs/utils/isValidUrl.js +22 -0
  37. package/dist/cjs/utils/linkOrganizer.js +187 -0
  38. package/dist/cjs/utils/linkOrganizer.spec.js +96 -0
  39. package/dist/cjs/utils/replaceMailtoAmp.js +15 -0
  40. package/dist/cjs/utils/replaceMailtoAmp.spec.js +22 -0
  41. package/dist/cjs/utils/specialCharacters.js +228 -0
  42. package/dist/cjs/utils/userAgent.js +28 -0
  43. package/dist/esm/MarkdownActions.js +186 -0
  44. package/dist/esm/MarkdownEditor.js +118 -0
  45. package/dist/esm/__fixtures__/FakeSdk.js +173 -0
  46. package/dist/esm/__fixtures__/asset/index.js +6 -0
  47. package/dist/esm/__fixtures__/content-type/index.js +2 -0
  48. package/dist/esm/__fixtures__/entry/index.js +5 -0
  49. package/dist/esm/__fixtures__/fixtures.js +6 -0
  50. package/dist/esm/__fixtures__/locale/index.js +15 -0
  51. package/dist/esm/__fixtures__/space/index.js +2 -0
  52. package/dist/esm/codemirrorImports.js +5 -0
  53. package/dist/esm/components/HeadingSelector.js +17 -0
  54. package/dist/esm/components/InsertLinkSelector.js +37 -0
  55. package/dist/esm/components/MarkdownBottomBar.js +46 -0
  56. package/dist/esm/components/MarkdownConstraints.js +25 -0
  57. package/dist/esm/components/MarkdownPreview.js +195 -0
  58. package/dist/esm/components/MarkdownTabs.js +74 -0
  59. package/dist/esm/components/MarkdownTextarea/CodeMirrorWrapper.js +329 -0
  60. package/dist/esm/components/MarkdownTextarea/MarkdownCommands.js +218 -0
  61. package/dist/esm/components/MarkdownTextarea/MarkdownTextarea.js +136 -0
  62. package/dist/esm/components/MarkdownTextarea/createMarkdownEditor.js +52 -0
  63. package/dist/esm/components/MarkdownToolbar.js +302 -0
  64. package/dist/esm/components/icons.js +112 -0
  65. package/dist/esm/dialogs/CheatsheetModalDialog.js +177 -0
  66. package/dist/esm/dialogs/ConfirmInsertAssetModalDialog.js +37 -0
  67. package/dist/esm/dialogs/EmdebExternalContentDialog.js +140 -0
  68. package/dist/esm/dialogs/InsertLinkModalDialog.js +92 -0
  69. package/dist/esm/dialogs/InsertTableModalDialog.js +78 -0
  70. package/dist/esm/dialogs/SpecialCharacterModalDialog.js +84 -0
  71. package/dist/esm/dialogs/ZenModeModalDialog.js +195 -0
  72. package/dist/esm/dialogs/openMarkdownDialog.js +72 -0
  73. package/dist/esm/dialogs/renderMarkdownDialog.js +59 -0
  74. package/dist/esm/index.js +5 -0
  75. package/dist/esm/types.js +10 -0
  76. package/dist/esm/utils/insertAssetLinks.js +99 -0
  77. package/dist/esm/utils/insertAssetLinks.spec.js +18 -0
  78. package/dist/esm/utils/isValidUrl.js +4 -0
  79. package/dist/esm/utils/linkOrganizer.js +152 -0
  80. package/dist/esm/utils/linkOrganizer.spec.js +53 -0
  81. package/dist/esm/utils/replaceMailtoAmp.js +5 -0
  82. package/dist/esm/utils/replaceMailtoAmp.spec.js +18 -0
  83. package/dist/esm/utils/specialCharacters.js +218 -0
  84. package/dist/esm/utils/userAgent.js +13 -0
  85. package/dist/{MarkdownActions.d.ts → types/MarkdownActions.d.ts} +38 -38
  86. package/dist/{MarkdownEditor.d.ts → types/MarkdownEditor.d.ts} +22 -22
  87. package/dist/types/__fixtures__/FakeSdk.d.ts +8 -0
  88. package/dist/types/__fixtures__/asset/index.d.ts +6 -0
  89. package/dist/types/__fixtures__/content-type/index.d.ts +2 -0
  90. package/dist/types/__fixtures__/entry/index.d.ts +5 -0
  91. package/dist/types/__fixtures__/fixtures.d.ts +6 -0
  92. package/dist/types/__fixtures__/locale/index.d.ts +42 -0
  93. package/dist/types/__fixtures__/space/index.d.ts +2 -0
  94. package/dist/{codemirrorImports.d.ts → types/codemirrorImports.d.ts} +5 -5
  95. package/dist/{components → types/components}/HeadingSelector.d.ts +7 -7
  96. package/dist/{components → types/components}/InsertLinkSelector.d.ts +9 -9
  97. package/dist/{components → types/components}/MarkdownBottomBar.d.ts +11 -11
  98. package/dist/{components → types/components}/MarkdownConstraints.d.ts +6 -6
  99. package/dist/{components → types/components}/MarkdownPreview.d.ts +14 -14
  100. package/dist/{components → types/components}/MarkdownTabs.d.ts +8 -8
  101. package/dist/{components → types/components}/MarkdownTextarea/CodeMirrorWrapper.d.ts +58 -58
  102. package/dist/{components → types/components}/MarkdownTextarea/MarkdownCommands.d.ts +33 -33
  103. package/dist/{components → types/components}/MarkdownTextarea/MarkdownTextarea.d.ts +17 -17
  104. package/dist/{components → types/components}/MarkdownTextarea/createMarkdownEditor.d.ts +55 -55
  105. package/dist/{components → types/components}/MarkdownToolbar.d.ts +12 -12
  106. package/dist/types/components/icons.d.ts +18 -0
  107. package/dist/{dialogs → types/dialogs}/CheatsheetModalDialog.d.ts +4 -4
  108. package/dist/{dialogs → types/dialogs}/ConfirmInsertAssetModalDialog.d.ts +23 -23
  109. package/dist/{dialogs → types/dialogs}/EmdebExternalContentDialog.d.ts +9 -9
  110. package/dist/{dialogs → types/dialogs}/InsertLinkModalDialog.d.ts +17 -17
  111. package/dist/{dialogs → types/dialogs}/InsertTableModalDialog.d.ts +13 -13
  112. package/dist/{dialogs → types/dialogs}/SpecialCharacterModalDialog.d.ts +9 -9
  113. package/dist/{dialogs → types/dialogs}/ZenModeModalDialog.d.ts +24 -24
  114. package/dist/{dialogs → types/dialogs}/openMarkdownDialog.d.ts +5 -5
  115. package/dist/{dialogs → types/dialogs}/renderMarkdownDialog.d.ts +8 -8
  116. package/dist/{index.d.ts → types/index.d.ts} +5 -5
  117. package/dist/{types.d.ts → types/types.d.ts} +75 -75
  118. package/dist/{utils → types/utils}/insertAssetLinks.d.ts +29 -29
  119. package/dist/types/utils/insertAssetLinks.spec.d.ts +1 -0
  120. package/dist/{utils → types/utils}/isValidUrl.d.ts +2 -2
  121. package/dist/{utils → types/utils}/linkOrganizer.d.ts +6 -6
  122. package/dist/types/utils/linkOrganizer.spec.d.ts +1 -0
  123. package/dist/{utils → types/utils}/replaceMailtoAmp.d.ts +1 -1
  124. package/dist/types/utils/replaceMailtoAmp.spec.d.ts +1 -0
  125. package/dist/{utils → types/utils}/specialCharacters.d.ts +4 -4
  126. package/dist/{utils → types/utils}/userAgent.d.ts +1 -1
  127. package/package.json +25 -11
  128. package/CHANGELOG.md +0 -308
  129. package/dist/components/icons.d.ts +0 -18
  130. package/dist/field-editor-markdown.cjs.development.js +0 -3605
  131. package/dist/field-editor-markdown.cjs.development.js.map +0 -1
  132. package/dist/field-editor-markdown.cjs.production.min.js +0 -216
  133. package/dist/field-editor-markdown.cjs.production.min.js.map +0 -1
  134. package/dist/field-editor-markdown.esm.js +0 -3595
  135. package/dist/field-editor-markdown.esm.js.map +0 -1
  136. package/dist/index.js +0 -8
@@ -1,3605 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
6
-
7
- require('codemirror/mode/markdown/markdown');
8
- require('codemirror/mode/xml/xml');
9
- require('codemirror/addon/edit/continuelist');
10
- require('codemirror/addon/mode/overlay');
11
- require('codemirror/addon/display/autorefresh');
12
- var React = require('react');
13
- var React__default = _interopDefault(React);
14
- var tokens = _interopDefault(require('@contentful/f36-tokens'));
15
- var fieldEditorShared = require('@contentful/field-editor-shared');
16
- var emotion = require('emotion');
17
- var f36Components = require('@contentful/f36-components');
18
- var DOMPurify = _interopDefault(require('dompurify'));
19
- var Markdown = _interopDefault(require('markdown-to-jsx'));
20
- var CodeMirror = _interopDefault(require('codemirror'));
21
- require('codemirror/addon/edit/matchbrackets');
22
- var throttle = _interopDefault(require('lodash/throttle'));
23
- var transform = _interopDefault(require('lodash/transform'));
24
- var get = _interopDefault(require('lodash/get'));
25
- var max = _interopDefault(require('lodash/max'));
26
- var min = _interopDefault(require('lodash/min'));
27
- var range = _interopDefault(require('lodash/range'));
28
- var times = _interopDefault(require('lodash/times'));
29
- var repeat = _interopDefault(require('lodash/repeat'));
30
- var f36Icons = require('@contentful/f36-icons');
31
- var inRange = _interopDefault(require('lodash/inRange'));
32
- var isObject = _interopDefault(require('lodash/isObject'));
33
- var extend = _interopDefault(require('lodash/extend'));
34
- var isString = _interopDefault(require('lodash/isString'));
35
- var isFinite = _interopDefault(require('lodash/isFinite'));
36
- var forEach = _interopDefault(require('lodash/forEach'));
37
-
38
- const styles = {
39
- root: /*#__PURE__*/emotion.css({
40
- display: 'flex',
41
- justifyContent: 'space-between',
42
- background: tokens.gray100,
43
- border: `1px solid ${tokens.gray400}`,
44
- borderBottomLeftRadius: tokens.borderRadiusSmall,
45
- borderBottomRightRadius: tokens.borderRadiusSmall,
46
- padding: `${tokens.spacingXs} ${tokens.spacingS}`
47
- }),
48
- help: /*#__PURE__*/emotion.css({
49
- color: tokens.gray700,
50
- fontSize: tokens.fontSizeS,
51
- button: {
52
- fontSize: tokens.fontSizeS,
53
- lineHeight: 'inherit'
54
- }
55
- })
56
- };
57
- function MarkdownHelp(props) {
58
- return React__default.createElement(f36Components.Paragraph, {
59
- marginBottom: "none",
60
- className: styles.help
61
- }, "Format your text like a pro with the", ' ', React__default.createElement(f36Components.TextLink, {
62
- as: "button",
63
- testId: "open-markdown-cheatsheet-button",
64
- onClick: () => {
65
- props.onClick();
66
- }
67
- }, "markdown cheatsheet"), ".");
68
- }
69
- function MarkdownBottomBar(props) {
70
- return React__default.createElement("div", {
71
- className: styles.root
72
- }, props.children);
73
- }
74
-
75
- const styles$1 = {
76
- root: /*#__PURE__*/emotion.css({
77
- display: 'flex',
78
- justifyContent: 'space-between',
79
- fontSize: tokens.fontSizeM,
80
- marginTop: tokens.spacingXs,
81
- color: tokens.gray700
82
- })
83
- };
84
- function MarkdownConstraints(props) {
85
- const constraints = fieldEditorShared.ConstraintsUtils.fromFieldValidations(props.sdk.field.validations, props.sdk.field.type);
86
- const checkConstraint = fieldEditorShared.ConstraintsUtils.makeChecker(constraints);
87
- return React__default.createElement("div", {
88
- className: styles$1.root
89
- }, React__default.createElement(fieldEditorShared.CharCounter, {
90
- value: props.value,
91
- checkConstraint: checkConstraint
92
- }), React__default.createElement(fieldEditorShared.CharValidation, {
93
- constraints: constraints
94
- }));
95
- }
96
-
97
- // This code will replace '&' with '&' only inside the href attribute of the mailto link.
98
- // Otherwise the mailto link will not work correctly
99
- const replaceMailtoAmp = string => {
100
- return string.replace(/href="mailto:[^"]*&/g, function (match) {
101
- return match.replace(/&/g, '&');
102
- });
103
- };
104
-
105
- const styles$2 = {
106
- root: emotion.css`
107
- border: 1px solid ${tokens.gray400};
108
- border-width: 0 1px;
109
- word-wrap: break-word;
110
- overflow-wrap: break-word;
111
- min-height: 300px;
112
- padding: ${tokens.spacingL};
113
- font-size: ${tokens.fontSizeM};
114
- font-family: ${tokens.fontStackPrimary};
115
- line-height: ${tokens.lineHeightDefault};
116
- color: ${tokens.gray700};
117
- white-space: pre-line;
118
-
119
- h1,
120
- h2,
121
- h3,
122
- h4,
123
- h5,
124
- h6 {
125
- margin-top: ${tokens.spacingL};
126
- margin-bottom: ${tokens.spacingM};
127
- color: ${tokens.gray900};
128
- }
129
-
130
- h1:first-child,
131
- h2:first-child,
132
- h3:first-child,
133
- h4:first-child,
134
- h5:first-child,
135
- h6:first-child {
136
- margin-top: 0;
137
- }
138
-
139
- h1 {
140
- font-size: 1.9em;
141
- }
142
- h2 {
143
- font-size: 1.75em;
144
- }
145
- h3 {
146
- font-size: 1.6em;
147
- }
148
- h4 {
149
- font-size: 1.45em;
150
- }
151
- h5 {
152
- font-size: 1.3em;
153
- }
154
- h6 {
155
- font-size: 1.15em;
156
- }
157
-
158
- p {
159
- margin-top: 0;
160
- margin-bottom: ${tokens.spacingM};
161
- }
162
-
163
- ul,
164
- ol {
165
- margin: ${tokens.spacingS} 0;
166
- padding-left: ${tokens.spacingM};
167
- }
168
- ul > li {
169
- list-style-type: disc;
170
- margin-bottom: 0;
171
- }
172
-
173
- ol > li {
174
- list-style-type: decimal;
175
- margin-bottom: 0;
176
- }
177
-
178
- table {
179
- table-layout: fixed;
180
- border-right-width: 0;
181
- border-bottom-width: 0;
182
- width: 80%;
183
- margin: ${tokens.spacingM} auto;
184
- border-spacing: 0;
185
- border-collapse: collapse;
186
- border: 1px solid ${tokens.gray300};
187
- }
188
-
189
- table th,
190
- table td {
191
- padding: 5px;
192
- border-left-width: 0;
193
- border-top-width: 0;
194
- }
195
-
196
- table th {
197
- background: ${tokens.gray200};
198
- }
199
-
200
- table td {
201
- border: 1px solid ${tokens.gray300};
202
- }
203
-
204
- a {
205
- color: ${tokens.blue500};
206
- }
207
-
208
- hr {
209
- margin-top: ${tokens.spacingL};
210
- margin-bottom: ${tokens.spacingL};
211
- height: 1px;
212
- background-color: ${tokens.gray300};
213
- border: none;
214
- }
215
-
216
- blockquote {
217
- border-left: 4px solid ${tokens.gray200};
218
- padding-left: ${tokens.spacingL};
219
- margin: 0;
220
- margin-top: ${tokens.spacingM};
221
- font-style: italic;
222
- }
223
-
224
- img {
225
- margin: ${tokens.spacingM} auto;
226
- display: block;
227
- max-width: 80%;
228
- max-height: 250px;
229
- }
230
-
231
- pre code {
232
- font-size: ${tokens.fontSizeS};
233
- font-family: ${tokens.fontStackMonospace};
234
- }
235
-
236
- .embedly-card {
237
- margin: ${tokens.spacingM} auto;
238
- display: block;
239
- }
240
- `,
241
- framed: /*#__PURE__*/emotion.css({
242
- height: '100%',
243
- maxHeight: '500px',
244
- overflowY: 'auto'
245
- }),
246
- zen: /*#__PURE__*/emotion.css({
247
- maxWidth: '650px',
248
- margin: '0 auto',
249
- border: 'none !important'
250
- }),
251
- rtl: /*#__PURE__*/emotion.css({
252
- direction: 'rtl'
253
- })
254
- };
255
-
256
- function MarkdownLink(props) {
257
- const {
258
- Embedly,
259
- children,
260
- ...rest
261
- } = props;
262
-
263
- if (props.className === 'embedly-card' && Embedly) {
264
- return React__default.createElement(Embedly, {
265
- url: props.href
266
- });
267
- }
268
-
269
- return React__default.createElement("a", { ...rest,
270
- target: "_blank",
271
- rel: "noopener noreferrer"
272
- }, children);
273
- }
274
-
275
- const MarkdownPreview = /*#__PURE__*/React__default.memo(props => {
276
- var _props$previewCompone;
277
-
278
- const className = emotion.cx(styles$2.root, props.minHeight !== undefined ? emotion.css({
279
- minHeight: props.minHeight
280
- }) : undefined, props.mode === 'default' ? styles$2.framed : styles$2.zen, props.direction === 'rtl' ? styles$2.rtl : undefined); // See the list of allowed Tags here:
281
- // https://github.com/cure53/DOMPurify/blob/main/src/tags.js#L3-L121
282
-
283
- const cleanHTML = React__default.useMemo(() => {
284
- return replaceMailtoAmp(DOMPurify.sanitize(props.value));
285
- }, [props.value]);
286
- return React__default.createElement("div", {
287
- className: className,
288
- "data-test-id": "markdown-preview"
289
- }, React__default.createElement(Markdown, {
290
- options: {
291
- overrides: {
292
- a: {
293
- // eslint-disable-next-line -- TODO: describe this disable @typescript-eslint/no-explicit-any
294
- component: MarkdownLink,
295
- props: {
296
- Embedly: (_props$previewCompone = props.previewComponents) == null ? void 0 : _props$previewCompone.embedly
297
- }
298
- }
299
- }
300
- }
301
- }, cleanHTML));
302
- });
303
- MarkdownPreview.displayName = 'MarkdownPreview';
304
-
305
- const styles$3 = {
306
- root: /*#__PURE__*/emotion.css({
307
- display: 'flex',
308
- zIndex: 10,
309
- flexDirection: 'row',
310
- justifyContent: 'flex-end',
311
- overflow: 'hidden',
312
- marginBottom: '-1px',
313
- fontSize: tokens.fontSizeM
314
- }),
315
- tab: /*#__PURE__*/emotion.css({
316
- cursor: 'pointer',
317
- color: tokens.gray700,
318
- padding: tokens.spacingXs,
319
- minWidth: '70px',
320
- border: `1px solid ${tokens.gray400}`,
321
- borderTopLeftRadius: tokens.borderRadiusSmall,
322
- borderTopRightRadius: tokens.borderRadiusSmall,
323
- marginLeft: tokens.spacingXs,
324
- textAlign: 'center',
325
- backgroundColor: tokens.gray100,
326
- borderBottomColor: tokens.gray100,
327
- outline: 'none',
328
- '&:focus': {
329
- boxShadow: tokens.boxShadowHeavy
330
- },
331
- transition: `all ${tokens.transitionEasingDefault} ${tokens.transitionDurationShort}`
332
- }),
333
- inactiveTab: /*#__PURE__*/emotion.css({
334
- background: tokens.gray200,
335
- borderBottomColor: tokens.gray400,
336
- '&:hover': {
337
- background: tokens.gray300
338
- }
339
- })
340
- };
341
-
342
- function MarkdownTabItem(props) {
343
- return React__default.createElement("div", {
344
- className: emotion.cx(styles$3.tab, {
345
- [styles$3.inactiveTab]: props.isActive === false
346
- }),
347
- onClick: () => {
348
- props.onSelect(props.name);
349
- },
350
- onKeyDown: e => {
351
- if (e.keyCode === 13) {
352
- props.onSelect(props.name);
353
- }
354
- },
355
- tabIndex: 0,
356
- role: "tab",
357
- "aria-controls": props.name,
358
- "aria-selected": props.isActive === true,
359
- "data-test-id": props.testId
360
- }, props.children);
361
- }
362
-
363
- function MarkdownTabs(props) {
364
- return React__default.createElement("div", {
365
- className: styles$3.root
366
- }, React__default.createElement(MarkdownTabItem, {
367
- name: "editor",
368
- onSelect: props.onSelect,
369
- isActive: props.active === 'editor',
370
- testId: "markdown-tab-md"
371
- }, "Editor"), React__default.createElement(MarkdownTabItem, {
372
- name: "preview",
373
- onSelect: props.onSelect,
374
- isActive: props.active === 'preview',
375
- testId: "markdown-tab-preview"
376
- }, "Preview"));
377
- }
378
-
379
- const userAgent = /*#__PURE__*/get(window, 'navigator.userAgent', '');
380
- const platform = /*#__PURE__*/get(window, 'navigator.platform', '');
381
- let ctrlKey = 'Ctrl';
382
- const tests = {
383
- // eslint-disable-next-line -- TODO: describe this disable @typescript-eslint/ban-ts-comment
384
- // @ts-ignore ignore missing MSStream
385
- ios: /*#__PURE__*/ /(iphone os|ipad|iphone|ipod)/i.test(userAgent) && !window.MSStream
386
- };
387
-
388
- if (tests.ios || /mac(68k|ppc|intel)/i.test(platform)) {
389
- ctrlKey = 'Cmd';
390
- }
391
-
392
- function getCtrlKey() {
393
- return ctrlKey;
394
- }
395
-
396
- /* eslint-disable @typescript-eslint/no-use-before-define, @typescript-eslint/no-explicit-any */
397
-
398
- function stripUnit(value) {
399
- if (typeof value !== 'string') return value;
400
- const cssRegex = /^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/;
401
- const matchedValue = value.match(cssRegex);
402
-
403
- if (!matchedValue) {
404
- throw new Error("Couldn't match unit in given string");
405
- }
406
-
407
- return parseFloat(value);
408
- }
409
-
410
- function create(host, options) {
411
- const {
412
- direction,
413
- fixedHeight,
414
- height,
415
- readOnly
416
- } = options || {}; // Set to true if `setValue()` has been called. This is to prevent
417
- // undoing the initial content.
418
-
419
- let initializedWithValue = false;
420
- const LF = '\n';
421
- const EDITOR_SIZE = {
422
- min: height ? stripUnit(height) : 300,
423
- max: 500,
424
- shift: 50
425
- };
426
- const cm = CodeMirror(host, {
427
- direction,
428
- readOnly,
429
- mode: 'markdown',
430
- lineNumbers: false,
431
- undoDepth: 200,
432
- matchBrackets: true,
433
- lineWrapping: true,
434
- // When `lineSeparator === null` the document will be split
435
- // on CRLFs as well as lone CRs and LFs. A single LF will
436
- // be used as line separator in all output
437
- lineSeparator: null,
438
- theme: 'elegant',
439
- tabSize: 2,
440
- indentWithTabs: false,
441
- indentUnit: 2,
442
- autoRefresh: true,
443
- spellcheck: true,
444
- inputStyle: 'contenteditable'
445
- });
446
- cm.setSize('100%', EDITOR_SIZE.min);
447
-
448
- if (!fixedHeight) {
449
- cm.on('change', throttle(assureHeight, 150));
450
- }
451
-
452
- cm.setOption('extraKeys', {
453
- Tab: function () {
454
- replaceSelectedText(getIndentation());
455
- },
456
- Enter: 'newlineAndIndentContinueMarkdownList',
457
- Esc: () => {
458
- cm.getInputField().blur();
459
- }
460
- });
461
- /**
462
- * @description
463
- * Custom API for a CodeMirror instance.
464
- *
465
- * An instance wraps a CodeMirror instance and provides a custom interface
466
- * on top of CodeMirror.
467
- */
468
-
469
- return {
470
- destroy,
471
- disable,
472
- enable,
473
- attachEvent,
474
- addKeyShortcuts,
475
- setValue,
476
- cmd,
477
- moveToLineBeginning,
478
- moveIfNotEmpty,
479
- restoreCursor,
480
- moveToLineEnd,
481
- usePrimarySelection,
482
- focus,
483
- select,
484
- selectBackwards,
485
- selectAll: () => cm.execCommand('selectAll'),
486
- extendSelectionBy,
487
- insertAtCursor,
488
- insertAtLineBeginning,
489
- wrapSelection,
490
- removeFromLineBeginning,
491
- removeSelectedText,
492
- replaceSelectedText,
493
- getCursor,
494
- setCursor,
495
- getSelection,
496
- getLine,
497
- isLineEmpty,
498
- getSelectedText,
499
- getSelectionLength,
500
- getCurrentLine,
501
- getCurrentLineNumber,
502
- getCurrentCharacter,
503
- getCurrentLineLength,
504
- lineStartsWith,
505
- getIndentation,
506
- getNl,
507
- getValue,
508
- getLinesCount,
509
- getHistorySize,
510
- setReadOnly: value => cm.setOption('readOnly', value),
511
- getHistory: () => cm.getHistory(),
512
- setHistory: history => cm.setHistory(history),
513
- setFullsize: () => {
514
- cm.setSize('100%', '100%');
515
- cm.refresh();
516
- },
517
- refresh: () => cm.refresh()
518
- };
519
-
520
- function destroy() {
521
- // @ts-expect-error
522
- cm.toTextArea();
523
- }
524
-
525
- function disable() {
526
- cm.setOption('readOnly', 'nocursor');
527
- }
528
-
529
- function enable() {
530
- cm.setOption('readOnly', false);
531
- }
532
-
533
- function assureHeight() {
534
- const current = cm.heightAtLine(cm.lastLine(), 'local') + EDITOR_SIZE.shift;
535
- let next = current;
536
-
537
- if (current < EDITOR_SIZE.min) {
538
- next = EDITOR_SIZE.min;
539
- }
540
-
541
- if (current > EDITOR_SIZE.max) {
542
- next = EDITOR_SIZE.max;
543
- }
544
-
545
- cm.setSize('100%', next);
546
- }
547
-
548
- function attachEvent(name, fn, throttleInterval) {
549
- if (throttleInterval) {
550
- fn = throttle(fn, throttleInterval);
551
- }
552
-
553
- cm.on(name, fn);
554
- }
555
-
556
- function addKeyShortcuts(map) {
557
- const ctrlKey = getCtrlKey();
558
- cm.addKeyMap(transform(map, (acc, value, key) => {
559
- // eslint-disable-next-line -- TODO: describe this disable
560
- // @ts-ignore
561
- acc[ctrlKey + '-' + key] = value;
562
- }, {}));
563
- }
564
- /**
565
- * low-level editor manipulation functions
566
- */
567
-
568
- /**
569
- * @description
570
- * Sets the content of the editor while preserving the cursor
571
- * position.
572
- *
573
- * If called for the first time it will not record the change in
574
- * the history.
575
- */
576
-
577
-
578
- function setValue(value) {
579
- value = value || '';
580
-
581
- if (getValue() === value) {
582
- return;
583
- } // set value, but save cursor position first
584
- // position will be restored, but w/o focus (third arg)
585
-
586
-
587
- const line = getCurrentLineNumber();
588
- const ch = getCurrentCharacter();
589
- cm.setValue(value);
590
- restoreCursor(ch, line, true); // We do not want to record the initial population in the
591
- // history. Otherwise it would always be possible to revert to
592
- // the empty string.
593
-
594
- if (!initializedWithValue) {
595
- cm.clearHistory();
596
- initializedWithValue = true;
597
- }
598
- }
599
-
600
- function cmd(name) {
601
- cm.execCommand(name);
602
- cm.focus();
603
- }
604
-
605
- function moveToLineBeginning(lineNumber) {
606
- cm.setCursor({
607
- line: defaultToCurrentLineNumber(lineNumber),
608
- ch: 0
609
- });
610
- cm.focus();
611
- }
612
- /**
613
- * @description
614
- * Insert a new line below the cursor and move to the beginning of
615
- * that line.
616
- *
617
- * Only do this if the editor has content and we are not already on
618
- * the last line.
619
- *
620
- * TODO rename this
621
- */
622
-
623
-
624
- function moveIfNotEmpty() {
625
- if (getCurrentLineLength() < 1) {
626
- return;
627
- }
628
-
629
- const next = getCurrentLineNumber() + 1;
630
-
631
- if (cm.lastLine() < next) {
632
- moveToLineEnd();
633
- insertAtCursor(getNl());
634
- }
635
-
636
- moveToLineBeginning(next);
637
- }
638
-
639
- function restoreCursor(character, lineNumber, noFocus) {
640
- cm.setCursor(defaultToCurrentLineNumber(lineNumber), character, {
641
- scroll: !noFocus
642
- });
643
-
644
- if (!noFocus) {
645
- cm.focus();
646
- }
647
- }
648
-
649
- function moveToLineEnd(lineNumber) {
650
- cm.setCursor({
651
- line: defaultToCurrentLineNumber(lineNumber),
652
- ch: getCurrentLineLength()
653
- });
654
- cm.focus();
655
- }
656
-
657
- function defaultToCurrentLineNumber(lineNumber) {
658
- if (lineNumber === 0 || lineNumber !== undefined && lineNumber > 0) {
659
- return lineNumber;
660
- }
661
-
662
- return getCurrentLineNumber();
663
- }
664
-
665
- function usePrimarySelection() {
666
- cmd('singleSelection');
667
- }
668
-
669
- function focus() {
670
- cm.focus();
671
- }
672
-
673
- function select(from, to) {
674
- cm.setSelection(from, to);
675
- cm.focus();
676
- }
677
-
678
- function selectBackwards(skip, len) {
679
- select(getPos(-skip - len), getPos(-skip));
680
-
681
- function getPos(modifier) {
682
- return {
683
- line: getCurrentLineNumber(),
684
- ch: getCurrentCharacter() + modifier
685
- };
686
- }
687
- }
688
-
689
- function extendSelectionBy(modifier) {
690
- select(getPos('anchor', 0), getPos('head', modifier));
691
-
692
- function getPos(prop, modifier) {
693
- const selection = getSelection();
694
-
695
- if (!selection) {
696
- return {
697
- line: 0,
698
- ch: 0
699
- };
700
- }
701
-
702
- return {
703
- line: selection[prop].line,
704
- ch: selection[prop].ch + modifier
705
- };
706
- }
707
- }
708
-
709
- function insertAtCursor(text) {
710
- cm.replaceRange(text, cm.getCursor());
711
- cm.focus();
712
- }
713
-
714
- function insertAtLineBeginning(text) {
715
- const initialCh = getCurrentCharacter();
716
- moveToLineBeginning();
717
- insertAtCursor(text);
718
- restoreCursor(initialCh + text.length);
719
- cm.focus();
720
- }
721
-
722
- function wrapSelection(wrapper) {
723
- const replacement = wrapper + getSelectedText() + wrapper;
724
- const selection = getSelection();
725
-
726
- if (selection) {
727
- cm.replaceRange(replacement, selection.anchor, selection == null ? void 0 : selection.head);
728
- cm.focus();
729
- }
730
- }
731
-
732
- function removeFromLineBeginning(charCount) {
733
- const lineNumber = getCurrentLineNumber();
734
- cm.replaceRange('', {
735
- line: lineNumber,
736
- ch: 0
737
- }, {
738
- line: lineNumber,
739
- ch: charCount
740
- });
741
- cm.focus();
742
- }
743
-
744
- function removeSelectedText() {
745
- cm.replaceSelection('');
746
- cm.focus();
747
- }
748
- /**
749
- * @description
750
- * Replace the selected text with the given string.
751
- *
752
- * If nothing is selected it will insert the text at the current
753
- * cursor position
754
- *
755
- * The optional `select` parameter controls what will be selected
756
- * afters wards. By default the cursor will be at the end of the
757
- * inserted text. You can pass 'around' to select the inserted
758
- * text.
759
- */
760
-
761
-
762
- function replaceSelectedText(replacement, select) {
763
- cm.replaceSelection(replacement, select);
764
- cm.focus();
765
- }
766
- /**
767
- * low-level editor get/check functions
768
- */
769
-
770
-
771
- function getCursor() {
772
- return cm.getCursor();
773
- }
774
-
775
- function setCursor(cursor) {
776
- cm.setCursor(cursor);
777
- }
778
-
779
- function getSelection() {
780
- const selections = cm.listSelections();
781
-
782
- if (!cm.somethingSelected() || !selections || selections.length < 1) {
783
- return null;
784
- }
785
-
786
- return selections[0];
787
- }
788
-
789
- function getLine(lineNumber) {
790
- return cm.getLine(lineNumber) || '';
791
- }
792
-
793
- function isLineEmpty(lineNumber) {
794
- const n = defaultToCurrentLineNumber(lineNumber);
795
- return n > -1 && getLine(n).length < 1 && n < cm.lineCount();
796
- }
797
-
798
- function getLinesCount() {
799
- return cm.lineCount();
800
- }
801
-
802
- function getSelectedText() {
803
- return getSelection() ? cm.getSelection() : '';
804
- }
805
-
806
- function getSelectionLength() {
807
- return getSelectedText().length;
808
- }
809
-
810
- function getCurrentLine() {
811
- return getLine(getCurrentLineNumber());
812
- }
813
-
814
- function getCurrentLineNumber() {
815
- return cm.getCursor().line;
816
- }
817
-
818
- function getCurrentCharacter() {
819
- return cm.getCursor().ch;
820
- }
821
-
822
- function getCurrentLineLength() {
823
- return getCurrentLine().length;
824
- }
825
-
826
- function lineStartsWith(text) {
827
- return getCurrentLine().startsWith(text);
828
- }
829
-
830
- function getIndentation() {
831
- return repeat(' ', cm.getOption('indentUnit') ?? 0);
832
- }
833
-
834
- function getNl(n = 1) {
835
- if (n < 1) {
836
- return '';
837
- }
838
-
839
- return repeat(LF, n);
840
- }
841
-
842
- function getValue() {
843
- return cm.getValue() || '';
844
- }
845
-
846
- function getHistorySize(which) {
847
- const history = cm.historySize();
848
- return which ? history[which] : history;
849
- }
850
-
851
- function repeat(what, n) {
852
- return new Array(n + 1).join(what);
853
- }
854
- }
855
-
856
- /* eslint-disable @typescript-eslint/no-use-before-define */
857
-
858
- function createPrefixToggleFn(prefix) {
859
- return editor => {
860
- if (editor.lineStartsWith(prefix)) {
861
- editor.removeFromLineBeginning(prefix.length);
862
- } else {
863
- editor.insertAtLineBeginning(prefix);
864
- }
865
- };
866
- }
867
- /**
868
- * Wraps the current selection with a marker.
869
- *
870
- * If nothing is selected it inserts the given text wrapped in the
871
- * marker and selects the inner text
872
- *
873
- * Used b the `bold`, `italic`, and `strike` commands.
874
- */
875
-
876
-
877
- function wrapSelection(editor, marker, emptyText) {
878
- return () => {
879
- editor.usePrimarySelection(); // there's a selection - wrap it with inline marker
880
-
881
- if (editor.getSelection()) {
882
- const selectedText = editor.getSelectedText();
883
-
884
- if (selectedText.startsWith(marker) && selectedText.endsWith(marker)) {
885
- const markerLength = marker.length;
886
- const textWithoutMarker = selectedText.slice(markerLength, selectedText.length - markerLength);
887
- editor.replaceSelectedText(textWithoutMarker);
888
- } else {
889
- editor.wrapSelection(marker);
890
- }
891
- } else {
892
- // no selection - insert sample text and select it
893
- editor.insertAtCursor(marker + emptyText + marker);
894
- editor.selectBackwards(marker.length, emptyText.length);
895
- }
896
- };
897
- }
898
-
899
- const HEADER_CHAR = '#';
900
- const quoteToggleFn = /*#__PURE__*/createPrefixToggleFn('> ');
901
- const codeToggleFn = /*#__PURE__*/createPrefixToggleFn(' ');
902
- /**
903
- * @description
904
- * A collection of commands used by the user bound to a
905
- * CodeMirrorWrapper instance.
906
- *
907
- * The command collection only depends on the wrapper instance and is
908
- * used by UI from code mirror stuff.
909
- */
910
-
911
- function create$1(editor) {
912
- return {
913
- bold: wrapSelection(editor, '__', 'text in bold'),
914
- italic: wrapSelection(editor, '*', 'text in italic'),
915
- strike: wrapSelection(editor, '~~', 'striked out'),
916
- quote: modifySelection(editor, quoteToggleFn),
917
- code: modifySelection(editor, codeToggleFn),
918
- link,
919
- h1: toggleHeader(editor, 1),
920
- h2: toggleHeader(editor, 2),
921
- h3: toggleHeader(editor, 3),
922
- ul: modifySelection(editor, ulToggleFn, true),
923
- ol: modifySelection(editor, olToggleFn, true),
924
- undo: function () {
925
- editor.cmd('undo');
926
- },
927
- redo: function () {
928
- editor.cmd('redo');
929
- },
930
- hr,
931
- indent,
932
- dedent,
933
- table
934
- };
935
- /**
936
- * @description
937
- * Insert a line with `---` below the cursor.
938
- */
939
-
940
- function hr() {
941
- editor.moveIfNotEmpty();
942
- const nl = editor.getNl();
943
- const markup = nl + '---' + nl + nl;
944
- editor.insertAtCursor(markup);
945
- }
946
- /**
947
- * @description
948
- * Indent the current line.
949
- */
950
-
951
-
952
- function indent() {
953
- editor.insertAtLineBeginning(editor.getIndentation());
954
- }
955
- /**
956
- * @description
957
- * Dedent the current line.
958
- */
959
-
960
-
961
- function dedent() {
962
- const indentation = editor.getIndentation();
963
-
964
- if (editor.lineStartsWith(indentation)) {
965
- editor.removeFromLineBeginning(indentation.length);
966
- }
967
- }
968
- /**
969
- * @description
970
- * Insert a markdown table template in a new line.
971
- */
972
-
973
-
974
- function table(config) {
975
- const nl = editor.getNl();
976
- editor.moveIfNotEmpty();
977
- editor.insertAtCursor(nl);
978
- const line = editor.getCurrentLineNumber();
979
- editor.insertAtCursor(tableTemplate(config.rows, config.cols).join(nl));
980
- editor.insertAtCursor(nl + nl);
981
- editor.restoreCursor(2, line);
982
- }
983
- /**
984
- * @description
985
- * Inserts or replaces the current selection with a markdown link
986
- */
987
-
988
-
989
- function link(url, text, title) {
990
- editor.usePrimarySelection();
991
- const linkTitle = title ? ' "' + title + '"' : '';
992
- const link = text ? '[' + text + '](' + url + linkTitle + ')' : '<' + url + '>';
993
- editor.replaceSelectedText(link, 'around');
994
- }
995
- }
996
- /**
997
- * For each line in the selection move to that line and call
998
- * `toggleFn` with the 1-based index of the line in the selection.
999
- *
1000
- * If there is no selection we just call `toggleFn(editor)`.
1001
- */
1002
-
1003
- function modifySelection(editor, toggleFn, isList) {
1004
- return () => {
1005
- editor.usePrimarySelection();
1006
- const selection = editor.getSelection();
1007
-
1008
- if (selection) {
1009
- // there's a selection - toggle list bullet for each line
1010
- // listNumber is 1, 2, 3... and can be used as ol bullet
1011
- forLineIn(selection, (lineNumber, listNumber) => {
1012
- // TODO move this into forLineIn
1013
- editor.moveToLineBeginning(lineNumber);
1014
- toggleFn(editor, listNumber);
1015
- });
1016
- editor.moveToLineEnd();
1017
- } else {
1018
- // there's no selection - just toggle line prefix
1019
- // but if adding list, add whitespace before and after list
1020
- if (isList && !getListNumber(editor) && !editor.lineStartsWith('- ')) {
1021
- prepareListWhitespace(editor);
1022
- }
1023
-
1024
- toggleFn(editor);
1025
- }
1026
- };
1027
- }
1028
- /**
1029
- * Calls callback for each line number that is in the selection
1030
- *
1031
- * The second argument is the 1-based index of the iteration.
1032
- *
1033
- * @param {CodeMirror.Selection} selection
1034
- * param {function(number)} cb
1035
- */
1036
-
1037
-
1038
- function forLineIn(selection, cb) {
1039
- // anchor/head depend on selection direction, so min & max have to be used
1040
- const lines = [selection.anchor.line, selection.head.line];
1041
- const maxNumber = max(lines);
1042
- const minNumber = min(lines);
1043
- const lineRange = range(minNumber || 0, maxNumber !== undefined ? maxNumber + 1 : undefined);
1044
- lineRange.forEach((lineNumber, i) => {
1045
- cb(lineNumber, i + 1);
1046
- });
1047
- }
1048
-
1049
- function prepareListWhitespace(editor) {
1050
- const line = editor.getCurrentLineNumber();
1051
- const isCurrentLineEmpty = editor.isLineEmpty(line);
1052
- const isPrevLineEmpty = line > 0 ? editor.isLineEmpty(line - 1) : false;
1053
- const isNextLineEmpty = line < editor.getLinesCount() - 1 ? editor.isLineEmpty(line + 1) : true;
1054
- let linesToInsert = isCurrentLineEmpty ? 2 : 4;
1055
-
1056
- if (isPrevLineEmpty) {
1057
- linesToInsert = linesToInsert - 1;
1058
- }
1059
-
1060
- if (isNextLineEmpty) {
1061
- linesToInsert = linesToInsert - 1;
1062
- }
1063
-
1064
- editor.moveToLineEnd();
1065
- editor.insertAtCursor(editor.getNl(linesToInsert));
1066
- editor.restoreCursor(0, isCurrentLineEmpty ? line : line + 2);
1067
- }
1068
-
1069
- function getListNumber(editor) {
1070
- const result = editor.getCurrentLine().match(/^(\d+\. )/);
1071
- return result ? result[1] : null;
1072
- }
1073
-
1074
- function ulToggleFn(editor) {
1075
- if (editor.lineStartsWith('- ')) {
1076
- editor.removeFromLineBeginning(2);
1077
- } else {
1078
- const listNumber = getListNumber(editor);
1079
-
1080
- if (listNumber) {
1081
- editor.removeFromLineBeginning(listNumber.length);
1082
- }
1083
-
1084
- editor.insertAtLineBeginning('- ');
1085
- }
1086
- }
1087
-
1088
- function olToggleFn(editor, n) {
1089
- const listNumber = getListNumber(editor);
1090
-
1091
- if (listNumber) {
1092
- editor.removeFromLineBeginning(listNumber.length);
1093
- } else {
1094
- if (editor.lineStartsWith('- ')) {
1095
- editor.removeFromLineBeginning(2);
1096
- }
1097
-
1098
- editor.insertAtLineBeginning((n || 1) + '. ');
1099
- }
1100
- }
1101
- /**
1102
- * From a table layout specification build a Markdown table template.
1103
- *
1104
- * Returns the lines as an array.
1105
- * Used by the `table()` command
1106
- *
1107
- * @param {object} config
1108
- * @param {number} rows
1109
- * @param {number} cols
1110
- * @returns {string[]}
1111
- */
1112
-
1113
-
1114
- function tableTemplate(nrows, ncols) {
1115
- const cellWidth = new Array(11);
1116
- const cell = ' ' + cellWidth.join(' ') + ' |';
1117
- const separatorCell = ' ' + cellWidth.join('-') + ' |';
1118
- let baseRow = '|';
1119
- let separatorRow = '|';
1120
- times(ncols, () => {
1121
- baseRow += cell;
1122
- separatorRow += separatorCell;
1123
- });
1124
- const bodyRows = range(nrows).map(() => baseRow.replace(/\| {5}/g, '| Cell'));
1125
- const headerRow = baseRow.replace(/\| {7}/g, '| Header');
1126
- return [headerRow, separatorRow].concat(bodyRows);
1127
- }
1128
- /**
1129
- * Toggles the header prefix for a given level on the current line.
1130
- *
1131
- * - Removes a header when one of the same level is
1132
- * - Replaces the header if there is one of a different level
1133
- * - Otherwise inserts the header
1134
- */
1135
-
1136
-
1137
- function toggleHeader(editor, level) {
1138
- return () => {
1139
- const initialCh = editor.getCurrentCharacter();
1140
- const currentHeader = selectHeader(editor);
1141
- const prefix = repeat(HEADER_CHAR, level); // there's no header at the current line - create one
1142
-
1143
- if (!currentHeader) {
1144
- editor.moveToLineBeginning();
1145
- editor.insertAtCursor(prefix + ' ');
1146
- editor.restoreCursor(initialCh + prefix.length + 1);
1147
- return;
1148
- } // there's exactly the same header - remove one
1149
-
1150
-
1151
- if (editor.getSelectedText() === prefix) {
1152
- editor.extendSelectionBy(1);
1153
- const removedCh = editor.getSelectionLength();
1154
- editor.removeSelectedText();
1155
- editor.restoreCursor(initialCh - removedCh);
1156
- return;
1157
- } // there's another header at the current line - replace
1158
-
1159
-
1160
- const diff = prefix.length - editor.getSelectionLength();
1161
- editor.replaceSelectedText(prefix);
1162
- editor.restoreCursor(initialCh + diff);
1163
- };
1164
- }
1165
- /**
1166
- * On the current line select a Markdown header prefix. That is the
1167
- * string at the beginning of the line that consists of up to six `#`.
1168
- *
1169
- * If the selection was successful return the selected string.
1170
- */
1171
-
1172
-
1173
- function selectHeader(editor) {
1174
- const result = editor.getCurrentLine().match(/^( {0,3})(#{1,6}) /);
1175
-
1176
- if (!result) {
1177
- return null;
1178
- }
1179
-
1180
- const indentation = result[1];
1181
- const header = result[2];
1182
- editor.select(getPos(0), getPos(header.length));
1183
- return editor.getSelection();
1184
-
1185
- function getPos(modifier) {
1186
- return {
1187
- line: editor.getCurrentLineNumber(),
1188
- ch: indentation.length + modifier
1189
- };
1190
- }
1191
- }
1192
-
1193
- /* eslint-disable @typescript-eslint/no-explicit-any */
1194
- function createMarkdownEditor(host, options) {
1195
- const editor = create(host, options);
1196
-
1197
- function wrapChange(fn) {
1198
- return (e, ch) => {
1199
- fn(editor.getValue(), e, ch);
1200
- };
1201
- }
1202
-
1203
- const api = {
1204
- actions: create$1(editor),
1205
- history: {
1206
- hasUndo: function () {
1207
- return editor.getHistorySize('undo') > 0;
1208
- },
1209
- hasRedo: function () {
1210
- return editor.getHistorySize('redo') > 0;
1211
- }
1212
- },
1213
- events: {
1214
- onScroll: function (fn) {
1215
- editor.attachEvent('scroll', fn, 150);
1216
- },
1217
- onChange: function (fn) {
1218
- editor.attachEvent('change', wrapChange(fn), 0);
1219
- },
1220
- onPaste: function (fn) {
1221
- editor.attachEvent('paste', fn, 0);
1222
- }
1223
- },
1224
- insert: editor.insertAtCursor,
1225
- focus: editor.focus,
1226
- getContent: editor.getValue,
1227
- destroy: editor.destroy,
1228
- setContent: editor.setValue,
1229
- getSelectedText: editor.getSelectedText,
1230
- usePrimarySelection: editor.usePrimarySelection,
1231
- setReadOnly: editor.setReadOnly,
1232
- selectBackwards: editor.selectBackwards,
1233
- getCursor: editor.getCursor,
1234
- setCursor: editor.setCursor,
1235
- clear: () => editor.setValue(''),
1236
- selectAll: editor.selectAll,
1237
- setFullsize: editor.setFullsize,
1238
- refresh: editor.refresh
1239
- };
1240
- editor.addKeyShortcuts({
1241
- B: api.actions.bold,
1242
- I: api.actions.italic
1243
- });
1244
- return api;
1245
- }
1246
-
1247
- const styles$4 = {
1248
- root: emotion.css`
1249
- border: 1px solid ${tokens.gray400};
1250
- border-width: 0 1px;
1251
- overflow-y: auto;
1252
- height: auto;
1253
- min-height: 300px;
1254
-
1255
- .CodeMirror {
1256
- height: auto;
1257
- line-height: ${tokens.lineHeightDefault};
1258
- }
1259
- .CodeMirror-lines {
1260
- color: ${tokens.gray700};
1261
- padding: ${tokens.spacingL};
1262
- }
1263
- .CodeMirror-code {
1264
- font-family: ${tokens.fontStackMonospace};
1265
- font-size: ${tokens.fontSizeM};
1266
- }
1267
- .CodeMirror-scroll {
1268
- min-height: '6rem';
1269
- }
1270
-
1271
- .cm-header {
1272
- color: ${tokens.gray900};
1273
- }
1274
- span.cm-variable-2 {
1275
- color: ${tokens.gray700};
1276
- }
1277
- .cm-header-1 {
1278
- font-size: 1.9em;
1279
- }
1280
- .cm-header-2 {
1281
- font-size: 1.75em;
1282
- }
1283
- .cm-header-3 {
1284
- font-size: 1.6em;
1285
- }
1286
- .cm-header-4 {
1287
- font-size: 1.45em;
1288
- }
1289
- .cm-header-5 {
1290
- font-size: 1.3em;
1291
- }
1292
- .cm-header-6 {
1293
- font-size: 1.15em;
1294
- }
1295
-
1296
- span.cm-tag,
1297
- span.cm-string,
1298
- span.cm-attribute {
1299
- color: ${tokens.red600};
1300
- }
1301
- span.cm-string {
1302
- text-decoration: none !important;
1303
- }
1304
- span.cm-quote,
1305
- span.cm-comment {
1306
- color: ${tokens.gray600};
1307
- }
1308
- span.cm-link,
1309
- span.cm-url {
1310
- color: ${tokens.blue500} !important;
1311
- }
1312
- span.cm-link {
1313
- text-decoration: underline;
1314
- }
1315
- `,
1316
- framed: /*#__PURE__*/emotion.css({
1317
- '.CodeMirror': {
1318
- maxHeight: '500px'
1319
- }
1320
- }),
1321
- zen: /*#__PURE__*/emotion.css({
1322
- border: 'none !important',
1323
- '.CodeMirror-lines': {
1324
- maxWidth: '650px',
1325
- margin: '0 auto'
1326
- }
1327
- }),
1328
- disabled: emotion.css`
1329
- .CodeMirror {
1330
- background: ${tokens.gray100};
1331
- cursor: 'not-allowed';
1332
- }
1333
- .CodeMirror-cursors {
1334
- visibility: hidden !important;
1335
- }
1336
- .CodeMirror-scroll,
1337
- .CodeMirror-sizer,
1338
- .CodeMirror-lines {
1339
- cursor: not-allowed;
1340
- }
1341
- `
1342
- };
1343
- const MarkdownTextarea = /*#__PURE__*/React__default.memo(props => {
1344
- const hostRef = React.useRef(null);
1345
- const [editor, setEditor] = React.useState(null);
1346
- React.useEffect(() => {
1347
- if (hostRef.current) {
1348
- setEditor(createMarkdownEditor(hostRef.current, Object.assign({}, {
1349
- direction: props.direction,
1350
- readOnly: true
1351
- }, props.mode === 'zen' ? {
1352
- fixedHeight: true,
1353
- height: '100%'
1354
- } : {}, props.minHeight !== undefined ? {
1355
- height: props.minHeight
1356
- } : {})));
1357
- } // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
1358
-
1359
- }, []);
1360
- React.useEffect(() => {
1361
- if (editor) {
1362
- props.onReady(editor);
1363
- } // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
1364
-
1365
- }, [editor]);
1366
- const className = emotion.cx(styles$4.root, props.minHeight !== undefined ? emotion.css({
1367
- minHeight: props.minHeight
1368
- }) : undefined, props.mode === 'default' ? styles$4.framed : styles$4.zen, props.disabled && styles$4.disabled);
1369
- return React__default.createElement("div", {
1370
- className: className,
1371
- ref: hostRef,
1372
- "data-test-id": "markdown-textarea",
1373
- style: {
1374
- display: props.visible ? 'block' : 'none'
1375
- }
1376
- });
1377
- });
1378
- MarkdownTextarea.displayName = 'MarkdownTextarea';
1379
-
1380
- const HeadingSelector = props => {
1381
- const handleMenuClick = heading => {
1382
- props.onSelect(heading);
1383
- };
1384
-
1385
- return React__default.createElement(f36Components.Menu, null, React__default.createElement(f36Components.Menu.Trigger, null, props.children), React__default.createElement(f36Components.Menu.List, null, React__default.createElement(f36Components.Menu.Item, {
1386
- testId: "markdown-action-button-heading-h1",
1387
- onClick: () => handleMenuClick('h1')
1388
- }, "Heading 1"), React__default.createElement(f36Components.Menu.Item, {
1389
- testId: "markdown-action-button-heading-h2",
1390
- onClick: () => handleMenuClick('h2')
1391
- }, "Heading 2"), React__default.createElement(f36Components.Menu.Item, {
1392
- testId: "markdown-action-button-heading-h3",
1393
- onClick: () => handleMenuClick('h3')
1394
- }, "Heading 3")));
1395
- };
1396
-
1397
- const srOnly = /*#__PURE__*/emotion.css({
1398
- position: 'absolute',
1399
- width: '1px',
1400
- height: '1px',
1401
- padding: '0',
1402
- margin: '-1px',
1403
- overflow: 'hidden',
1404
- clip: 'rect(0, 0, 0, 0)',
1405
- border: '0'
1406
- });
1407
- const Zen = ({
1408
- label,
1409
- ...rest
1410
- }) => React__default.createElement("svg", {
1411
- width: 14,
1412
- height: 14,
1413
- viewBox: "0 0 1792 1792",
1414
- ...rest
1415
- }, React__default.createElement("path", {
1416
- d: "M1411 541l-355 355 355 355 144-144q29-31 70-14 39 17 39 59v448q0 26-19 45t-45 19h-448q-42 0-59-40-17-39 14-69l144-144-355-355-355 355 144 144q31 30 14 69-17 40-59 40H192q-26 0-45-19t-19-45v-448q0-42 40-59 39-17 69 14l144 144 355-355-355-355-144 144q-19 19-45 19-12 0-24-5-40-17-40-59V192q0-26 19-45t45-19h448q42 0 59 40 17 39-14 69L541 381l355 355 355-355-144-144q-31-30-14-69 17-40 59-40h448q26 0 45 19t19 45v448q0 42-39 59-13 5-25 5-26 0-45-19z"
1417
- }), React__default.createElement("span", {
1418
- className: srOnly
1419
- }, label));
1420
- const Strikethrough = ({
1421
- label,
1422
- ...rest
1423
- }) => React__default.createElement("svg", {
1424
- width: 14,
1425
- height: 14,
1426
- viewBox: "0 0 1792 1792",
1427
- ...rest
1428
- }, React__default.createElement("path", {
1429
- d: "M1760 896q14 0 23 9t9 23v64q0 14-9 23t-23 9H32q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h1728zM483 832q-28-35-51-80-48-98-48-188 0-181 134-309 133-127 393-127 50 0 167 19 66 12 177 48 10 38 21 118 14 123 14 183 0 18-5 45l-12 3-84-6-14-2q-50-149-103-205-88-91-210-91-114 0-182 59-67 58-67 146 0 73 66 140t279 129q69 20 173 66 58 28 95 52H483zm507 256h411q7 39 7 92 0 111-41 212-23 56-71 104-37 35-109 81-80 48-153 66-80 21-203 21-114 0-195-23l-140-40q-57-16-72-28-8-8-8-22v-13q0-108-2-156-1-30 0-68l2-37v-44l102-2q15 34 30 71t22.5 56 12.5 27q35 57 80 94 43 36 105 57 59 22 132 22 64 0 139-27 77-26 122-86 47-61 47-129 0-84-81-157-34-29-137-71z"
1430
- }), React__default.createElement("span", {
1431
- className: srOnly
1432
- }, label));
1433
- const Indent = ({
1434
- label,
1435
- ...rest
1436
- }) => React__default.createElement("svg", {
1437
- width: 14,
1438
- height: 14,
1439
- viewBox: "0 0 1792 1792",
1440
- ...rest
1441
- }, React__default.createElement("path", {
1442
- d: "M352 832q0 14-9 23L55 1143q-9 9-23 9-13 0-22.5-9.5T0 1120V544q0-13 9.5-22.5T32 512q14 0 23 9l288 288q9 9 9 23zm1440 480v192q0 13-9.5 22.5t-22.5 9.5H32q-13 0-22.5-9.5T0 1504v-192q0-13 9.5-22.5T32 1280h1728q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5t-22.5 9.5H672q-13 0-22.5-9.5T640 1120V928q0-13 9.5-22.5T672 896h1088q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5T1760 768H672q-13 0-22.5-9.5T640 736V544q0-13 9.5-22.5T672 512h1088q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5T1760 384H32q-13 0-22.5-9.5T0 352V160q0-13 9.5-22.5T32 128h1728q13 0 22.5 9.5t9.5 22.5z"
1443
- }), React__default.createElement("span", {
1444
- className: srOnly
1445
- }, label));
1446
- const Dedent = ({
1447
- label,
1448
- ...rest
1449
- }) => React__default.createElement("svg", {
1450
- width: 14,
1451
- height: 14,
1452
- viewBox: "0 0 1792 1792",
1453
- ...rest
1454
- }, React__default.createElement("path", {
1455
- d: "M384 544v576q0 13-9.5 22.5T352 1152q-14 0-23-9L41 855q-9-9-9-23t9-23l288-288q9-9 23-9 13 0 22.5 9.5T384 544zm1408 768v192q0 13-9.5 22.5t-22.5 9.5H32q-13 0-22.5-9.5T0 1504v-192q0-13 9.5-22.5T32 1280h1728q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5t-22.5 9.5H672q-13 0-22.5-9.5T640 1120V928q0-13 9.5-22.5T672 896h1088q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5T1760 768H672q-13 0-22.5-9.5T640 736V544q0-13 9.5-22.5T672 512h1088q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5T1760 384H32q-13 0-22.5-9.5T0 352V160q0-13 9.5-22.5T32 128h1728q13 0 22.5 9.5t9.5 22.5z"
1456
- }), React__default.createElement("span", {
1457
- className: srOnly
1458
- }, label));
1459
- const Cubes = ({
1460
- label,
1461
- ...rest
1462
- }) => React__default.createElement("svg", {
1463
- width: 18,
1464
- height: 14,
1465
- viewBox: "0 0 2304 1792",
1466
- ...rest
1467
- }, React__default.createElement("path", {
1468
- d: "M640 1632l384-192v-314l-384 164v342zm-64-454l404-173-404-173-404 173zm1088 454l384-192v-314l-384 164v342zm-64-454l404-173-404-173-404 173zm-448-293l384-165V454l-384 164v267zm-64-379l441-189-441-189-441 189zm1088 518v416q0 36-19 67t-52 47l-448 224q-25 14-57 14t-57-14l-448-224q-4-2-7-4-2 2-7 4l-448 224q-25 14-57 14t-57-14L71 1554q-33-16-52-47t-19-67v-416q0-38 21.5-70T78 906l434-186V320q0-38 21.5-70t56.5-48l448-192q23-10 50-10t50 10l448 192q35 16 56.5 48t21.5 70v400l434 186q36 16 57 48t21 70z"
1469
- }), React__default.createElement("span", {
1470
- className: srOnly
1471
- }, label));
1472
- const Table = ({
1473
- label,
1474
- ...rest
1475
- }) => React__default.createElement("svg", {
1476
- width: 14,
1477
- height: 14,
1478
- viewBox: "0 0 1792 1792",
1479
- ...rest
1480
- }, React__default.createElement("path", {
1481
- d: "M576 1376v-192q0-14-9-23t-23-9H224q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm0-384V800q0-14-9-23t-23-9H224q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm512 384v-192q0-14-9-23t-23-9H736q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zM576 608V416q0-14-9-23t-23-9H224q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm512 384V800q0-14-9-23t-23-9H736q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm512 384v-192q0-14-9-23t-23-9h-320q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm-512-768V416q0-14-9-23t-23-9H736q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm512 384V800q0-14-9-23t-23-9h-320q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm0-384V416q0-14-9-23t-23-9h-320q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm128-320v1088q0 66-47 113t-113 47H224q-66 0-113-47t-47-113V288q0-66 47-113t113-47h1344q66 0 113 47t47 113z"
1482
- }), React__default.createElement("span", {
1483
- className: srOnly
1484
- }, label));
1485
- const SpecialChar = ({
1486
- label,
1487
- ...rest
1488
- }) => React__default.createElement("svg", {
1489
- width: 14,
1490
- height: 14,
1491
- viewBox: "0 0 1792 1792",
1492
- ...rest
1493
- }, React__default.createElement("path", {
1494
- d: "M1360 1307l35 159q3 12-3 22.5t-17 14.5l-5 1q-4 2-10.5 3.5t-16 4.5-21.5 5.5-25.5 5-30 5-33.5 4.5-36.5 3-38.5 1q-234 0-409-130.5T511 1054h-95q-13 0-22.5-9.5T384 1022V909q0-13 9.5-22.5T416 877h66q-2-57 1-105h-67q-14 0-23-9t-9-23V626q0-14 9-23t23-9h98q67-210 243.5-338T1158 128q102 0 194 23 11 3 20 15 6 11 3 24l-43 159q-3 13-14 19.5t-24 2.5l-4-1q-4-1-11.5-2.5L1261 364l-22.5-3.5-26-3-29-2.5-29.5-1q-126 0-226 64T778 594h468q16 0 25 12 10 12 7 26l-24 114q-5 26-32 26H734q-3 37 0 105h459q15 0 25 12 9 12 6 27l-24 112q-2 11-11 18.5t-20 7.5H782q48 117 149.5 185.5T1160 1308q18 0 36-1.5t33.5-3.5 29.5-4.5 24.5-5 18.5-4.5l12-3 5-2q13-5 26 2 12 7 15 21z"
1495
- }), React__default.createElement("span", {
1496
- className: srOnly
1497
- }, label));
1498
- const OrgLinks = ({
1499
- label,
1500
- ...rest
1501
- }) => React__default.createElement("svg", {
1502
- width: 14,
1503
- height: 14,
1504
- viewBox: "0 0 1792 1792",
1505
- ...rest
1506
- }, React__default.createElement("path", {
1507
- d: "M1792 1248v320q0 40-28 68t-68 28h-320q-40 0-68-28t-28-68v-320q0-40 28-68t68-28h96V960H960v192h96q40 0 68 28t28 68v320q0 40-28 68t-68 28H736q-40 0-68-28t-28-68v-320q0-40 28-68t68-28h96V960H320v192h96q40 0 68 28t28 68v320q0 40-28 68t-68 28H96q-40 0-68-28t-28-68v-320q0-40 28-68t68-28h96V960q0-52 38-90t90-38h512V640h-96q-40 0-68-28t-28-68V224q0-40 28-68t68-28h320q40 0 68 28t28 68v320q0 40-28 68t-68 28h-96v192h512q52 0 90 38t38 90v192h96q40 0 68 28t28 68z"
1508
- }), React__default.createElement("span", {
1509
- className: srOnly
1510
- }, label));
1511
- const Undo = ({
1512
- label,
1513
- ...rest
1514
- }) => React__default.createElement("svg", {
1515
- width: 14,
1516
- height: 14,
1517
- viewBox: "0 0 1792 1792",
1518
- ...rest
1519
- }, React__default.createElement("path", {
1520
- d: "M1664 896q0 156-61 298t-164 245-245 164-298 61q-172 0-327-72.5T305 1387q-7-10-6.5-22.5t8.5-20.5l137-138q10-9 25-9 16 2 23 12 73 95 179 147t225 52q104 0 198.5-40.5T1258 1258t109.5-163.5T1408 896t-40.5-198.5T1258 534t-163.5-109.5T896 384q-98 0-188 35.5T548 521l137 138q31 30 14 69-17 40-59 40H192q-26 0-45-19t-19-45V256q0-42 40-59 39-17 69 14l130 129q107-101 244.5-156.5T896 128q156 0 298 61t245 164 164 245 61 298z"
1521
- }), React__default.createElement("span", {
1522
- className: srOnly
1523
- }, label));
1524
- const Redo = ({
1525
- label,
1526
- ...rest
1527
- }) => React__default.createElement("svg", {
1528
- width: 14,
1529
- height: 14,
1530
- viewBox: "0 0 1792 1792",
1531
- ...rest
1532
- }, React__default.createElement("path", {
1533
- d: "M1664 256v448q0 26-19 45t-45 19h-448q-42 0-59-40-17-39 14-69l138-138q-148-137-349-137-104 0-198.5 40.5T534 534 424.5 697.5 384 896t40.5 198.5T534 1258t163.5 109.5T896 1408q119 0 225-52t179-147q7-10 23-12 15 0 25 9l137 138q9 8 9.5 20.5t-7.5 22.5q-109 132-264 204.5T896 1664q-156 0-298-61t-245-164-164-245-61-298 61-298 164-245 245-164 298-61q147 0 284.5 55.5T1425 340l130-129q29-31 70-14 39 17 39 59z"
1534
- }), React__default.createElement("span", {
1535
- className: srOnly
1536
- }, label));
1537
-
1538
- const InsertLinkSelector = props => {
1539
- if (props.canAddNew) {
1540
- return React__default.createElement(MultipleMediaContextMenu, { ...props
1541
- });
1542
- } else {
1543
- return React__default.createElement(f36Components.Button, {
1544
- isDisabled: props.disabled,
1545
- startIcon: React__default.createElement(f36Icons.AssetIcon, null),
1546
- testId: "markdownEditor.linkExistingAssets",
1547
- size: "small",
1548
- variant: "secondary",
1549
- onClick: () => {
1550
- props.onSelectExisting();
1551
- }
1552
- }, "Insert media");
1553
- }
1554
- };
1555
-
1556
- const MultipleMediaContextMenu = props => {
1557
- return React__default.createElement(f36Components.Menu, {
1558
- placement: "bottom-end"
1559
- }, React__default.createElement(f36Components.Menu.Trigger, null, React__default.createElement(f36Components.Button, {
1560
- endIcon: React__default.createElement(f36Icons.ChevronDownIcon, null),
1561
- isDisabled: props.disabled,
1562
- startIcon: React__default.createElement(f36Icons.AssetIcon, null),
1563
- testId: "markdownEditor.insertMediaDropdownTrigger",
1564
- size: "small",
1565
- variant: "secondary"
1566
- }, "Insert media")), React__default.createElement(f36Components.Menu.List, null, React__default.createElement(f36Components.Menu.Item, {
1567
- testId: "markdownEditor.uploadAssetsAndLink",
1568
- onClick: () => props.onAddNew()
1569
- }, "Add new media and link"), React__default.createElement(f36Components.Menu.Item, {
1570
- testId: "markdownEditor.linkExistingAssets",
1571
- onClick: () => props.onSelectExisting()
1572
- }, "Link existing media")));
1573
- };
1574
-
1575
- /* eslint-disable react/prop-types */
1576
- const styles$5 = {
1577
- root: /*#__PURE__*/emotion.css({
1578
- position: 'relative',
1579
- zIndex: /*#__PURE__*/Number(tokens.zIndexWorkbenchHeader),
1580
- border: `1px solid ${tokens.gray400}`,
1581
- backgroundColor: tokens.gray100,
1582
- padding: tokens.spacingXs,
1583
- borderTopLeftRadius: tokens.borderRadiusSmall
1584
- }),
1585
- button: /*#__PURE__*/emotion.css({
1586
- height: '30px',
1587
- width: '36px',
1588
- marginLeft: tokens.spacing2Xs,
1589
- marginRight: tokens.spacing2Xs
1590
- }),
1591
- icon: /*#__PURE__*/emotion.css({
1592
- fill: tokens.gray700,
1593
- verticalAlign: 'middle'
1594
- }),
1595
- zenButton: /*#__PURE__*/emotion.css({
1596
- marginLeft: tokens.spacingXs
1597
- }),
1598
- zenButtonPressed: /*#__PURE__*/emotion.css({
1599
- backgroundColor: tokens.gray400
1600
- }),
1601
- tooltip: /*#__PURE__*/emotion.css({
1602
- zIndex: /*#__PURE__*/Number(tokens.zIndexTooltip)
1603
- })
1604
- };
1605
- const ToolbarButton = /*#__PURE__*/React__default.forwardRef((props, ref) => {
1606
- const {
1607
- tooltip,
1608
- onClick,
1609
- children,
1610
- className,
1611
- variant = 'transparent',
1612
- tooltipPlace = 'top',
1613
- isDisabled = false,
1614
- ...otherProps
1615
- } = props;
1616
- return React__default.createElement(f36Components.Tooltip, {
1617
- className: styles$5.tooltip,
1618
- placement: tooltipPlace,
1619
- content: tooltip
1620
- }, React__default.createElement(f36Components.IconButton, { ...otherProps,
1621
- ref: ref,
1622
- className: emotion.cx(styles$5.button, className),
1623
- isDisabled: isDisabled,
1624
- onClick: onClick,
1625
- variant: variant,
1626
- size: "small",
1627
- icon: children,
1628
- "aria-label": tooltip
1629
- }));
1630
- });
1631
- ToolbarButton.displayName = 'ToolbarButton';
1632
-
1633
- function MainButtons(props) {
1634
- const tooltipPlace = props.mode === 'zen' ? 'bottom' : 'top';
1635
- return React__default.createElement(React__default.Fragment, null, React__default.createElement(HeadingSelector, {
1636
- onSelect: heading => {
1637
- if (heading && props.actions.headings[heading]) {
1638
- props.actions.headings[heading]();
1639
- }
1640
- }
1641
- }, React__default.createElement(ToolbarButton, {
1642
- isDisabled: props.disabled,
1643
- testId: "markdown-action-button-heading",
1644
- tooltip: "Headings",
1645
- tooltipPlace: tooltipPlace
1646
- }, React__default.createElement(f36Icons.HeadingIcon, {
1647
- "aria-label": "Headings",
1648
- className: styles$5.icon
1649
- }))), React__default.createElement(ToolbarButton, {
1650
- isDisabled: props.disabled,
1651
- testId: "markdown-action-button-bold",
1652
- tooltip: "Bold",
1653
- tooltipPlace: tooltipPlace,
1654
- onClick: props.actions.simple.bold
1655
- }, React__default.createElement(f36Icons.FormatBoldIcon, {
1656
- "aria-label": "Bold",
1657
- className: styles$5.icon
1658
- })), React__default.createElement(ToolbarButton, {
1659
- isDisabled: props.disabled,
1660
- testId: "markdown-action-button-italic",
1661
- tooltip: "Italic",
1662
- tooltipPlace: tooltipPlace,
1663
- onClick: props.actions.simple.italic
1664
- }, React__default.createElement(f36Icons.FormatItalicIcon, {
1665
- "aria-label": "Italic",
1666
- className: styles$5.icon
1667
- })), React__default.createElement(ToolbarButton, {
1668
- isDisabled: props.disabled,
1669
- testId: "markdown-action-button-quote",
1670
- tooltip: "Quote",
1671
- tooltipPlace: tooltipPlace,
1672
- onClick: props.actions.simple.quote
1673
- }, React__default.createElement(f36Icons.QuoteIcon, {
1674
- "aria-label": "Quote",
1675
- className: styles$5.icon
1676
- })), React__default.createElement(ToolbarButton, {
1677
- isDisabled: props.disabled,
1678
- testId: "markdown-action-button-ul",
1679
- tooltip: "Unordered list",
1680
- tooltipPlace: tooltipPlace,
1681
- onClick: props.actions.simple.ul
1682
- }, React__default.createElement(f36Icons.ListBulletedIcon, {
1683
- "aria-label": "Unordered list",
1684
- className: styles$5.icon
1685
- })), React__default.createElement(ToolbarButton, {
1686
- isDisabled: props.disabled,
1687
- testId: "markdown-action-button-ol",
1688
- tooltip: "Ordered list",
1689
- tooltipPlace: tooltipPlace,
1690
- onClick: props.actions.simple.ol
1691
- }, React__default.createElement(f36Icons.ListNumberedIcon, {
1692
- "aria-label": "Ordered list",
1693
- className: styles$5.icon
1694
- })), React__default.createElement(ToolbarButton, {
1695
- isDisabled: props.disabled,
1696
- testId: "markdown-action-button-link",
1697
- tooltip: "Link",
1698
- tooltipPlace: tooltipPlace,
1699
- onClick: props.actions.insertLink
1700
- }, React__default.createElement(f36Icons.LinkIcon, {
1701
- "aria-label": "Link",
1702
- className: styles$5.icon
1703
- })));
1704
- }
1705
-
1706
- function AdditionalButtons(props) {
1707
- const tooltipPlace = props.mode === 'zen' ? 'bottom' : 'top';
1708
- return React__default.createElement(React__default.Fragment, null, React__default.createElement(ToolbarButton, {
1709
- isDisabled: props.disabled,
1710
- testId: "markdown-action-button-strike",
1711
- tooltip: "Strike out",
1712
- tooltipPlace: tooltipPlace,
1713
- onClick: props.actions.simple.strike
1714
- }, React__default.createElement(Strikethrough, {
1715
- label: "Strike out",
1716
- className: styles$5.icon
1717
- })), React__default.createElement(ToolbarButton, {
1718
- isDisabled: props.disabled,
1719
- testId: "markdown-action-button-code",
1720
- tooltip: "Code block",
1721
- tooltipPlace: tooltipPlace,
1722
- onClick: props.actions.simple.code
1723
- }, React__default.createElement(f36Icons.CodeIcon, {
1724
- "aria-label": "Code block",
1725
- className: styles$5.icon
1726
- })), React__default.createElement(ToolbarButton, {
1727
- isDisabled: props.disabled,
1728
- testId: "markdown-action-button-hr",
1729
- tooltip: "Horizontal rule",
1730
- tooltipPlace: tooltipPlace,
1731
- onClick: props.actions.simple.hr
1732
- }, React__default.createElement(f36Icons.HorizontalRuleIcon, {
1733
- "aria-label": "Horizontal rule",
1734
- className: styles$5.icon
1735
- })), React__default.createElement(ToolbarButton, {
1736
- isDisabled: props.disabled,
1737
- testId: "markdown-action-button-indent",
1738
- tooltip: "Increase indentation",
1739
- tooltipPlace: tooltipPlace,
1740
- onClick: props.actions.simple.indent
1741
- }, React__default.createElement(Indent, {
1742
- label: "Increase indentation",
1743
- className: styles$5.icon
1744
- })), React__default.createElement(ToolbarButton, {
1745
- isDisabled: props.disabled,
1746
- testId: "markdown-action-button-dedent",
1747
- tooltip: "Decrease indentation",
1748
- tooltipPlace: tooltipPlace,
1749
- onClick: props.actions.simple.dedent
1750
- }, React__default.createElement(Dedent, {
1751
- label: "Decrease indentation",
1752
- className: styles$5.icon
1753
- })), React__default.createElement(ToolbarButton, {
1754
- isDisabled: props.disabled,
1755
- testId: "markdown-action-button-embed",
1756
- tooltip: "Embed external content",
1757
- tooltipPlace: tooltipPlace,
1758
- onClick: props.actions.embedExternalContent
1759
- }, React__default.createElement(Cubes, {
1760
- label: "Embed external content",
1761
- className: styles$5.icon
1762
- })), React__default.createElement(ToolbarButton, {
1763
- isDisabled: props.disabled,
1764
- testId: "markdown-action-button-table",
1765
- tooltip: "Insert table",
1766
- tooltipPlace: tooltipPlace,
1767
- onClick: props.actions.insertTable
1768
- }, React__default.createElement(Table, {
1769
- label: "Insert table",
1770
- className: styles$5.icon
1771
- })), React__default.createElement(ToolbarButton, {
1772
- isDisabled: props.disabled,
1773
- testId: "markdown-action-button-special",
1774
- tooltip: "Insert special character",
1775
- tooltipPlace: tooltipPlace,
1776
- onClick: props.actions.insertSpecialCharacter
1777
- }, React__default.createElement(SpecialChar, {
1778
- label: "Insert special character",
1779
- className: styles$5.icon
1780
- })), React__default.createElement(ToolbarButton, {
1781
- isDisabled: props.disabled,
1782
- testId: "markdown-action-button-organizeLinks",
1783
- tooltip: "Organize links",
1784
- tooltipPlace: tooltipPlace,
1785
- onClick: props.actions.organizeLinks
1786
- }, React__default.createElement(OrgLinks, {
1787
- label: "Organize links",
1788
- className: styles$5.icon
1789
- })), React__default.createElement(ToolbarButton, {
1790
- isDisabled: props.disabled,
1791
- testId: "markdown-action-button-undo",
1792
- tooltip: "Undo",
1793
- tooltipPlace: tooltipPlace,
1794
- onClick: props.actions.history.undo
1795
- }, React__default.createElement(Undo, {
1796
- label: "Undo",
1797
- className: styles$5.icon
1798
- })), React__default.createElement(ToolbarButton, {
1799
- isDisabled: props.disabled,
1800
- testId: "markdown-action-button-redo",
1801
- tooltip: "Redo",
1802
- tooltipPlace: tooltipPlace,
1803
- onClick: props.actions.history.redo
1804
- }, React__default.createElement(Redo, {
1805
- label: "Redo",
1806
- className: styles$5.icon
1807
- })));
1808
- }
1809
-
1810
- function DefaultMarkdownToolbar(props) {
1811
- const [showAdditional, setShowAdditional] = React__default.useState(false);
1812
- return React__default.createElement("div", {
1813
- className: styles$5.root
1814
- }, React__default.createElement(f36Components.Flex, {
1815
- justifyContent: "space-between"
1816
- }, React__default.createElement(f36Components.Flex, null, React__default.createElement(MainButtons, { ...props
1817
- }), React__default.createElement(ToolbarButton, {
1818
- isDisabled: props.disabled,
1819
- testId: "markdown-action-button-toggle-additional",
1820
- tooltip: showAdditional ? 'Hide additional actions' : 'More actions',
1821
- onClick: () => {
1822
- setShowAdditional(!showAdditional);
1823
- }
1824
- }, React__default.createElement(f36Icons.MoreHorizontalIcon, {
1825
- className: styles$5.icon
1826
- }))), React__default.createElement(f36Components.Flex, null, React__default.createElement(InsertLinkSelector, {
1827
- disabled: props.disabled,
1828
- onSelectExisting: props.actions.linkExistingMedia,
1829
- onAddNew: props.actions.addNewMedia,
1830
- canAddNew: props.canUploadAssets
1831
- }), React__default.createElement(ToolbarButton, {
1832
- isDisabled: props.disabled,
1833
- testId: "markdown-action-button-zen",
1834
- variant: "secondary",
1835
- onClick: props.actions.openZenMode,
1836
- className: styles$5.zenButton,
1837
- tooltip: "Expand"
1838
- }, React__default.createElement(Zen, {
1839
- label: "Expand",
1840
- className: styles$5.icon
1841
- })))), showAdditional && React__default.createElement(f36Components.Flex, {
1842
- justifyContent: "space-between",
1843
- marginTop: "spacingXs"
1844
- }, React__default.createElement(f36Components.Flex, null, React__default.createElement(AdditionalButtons, { ...props
1845
- }))));
1846
- }
1847
- function ZenMarkdownToolbar(props) {
1848
- return React__default.createElement("div", {
1849
- className: styles$5.root
1850
- }, React__default.createElement(f36Components.Flex, {
1851
- justifyContent: "space-between"
1852
- }, React__default.createElement(f36Components.Flex, null, React__default.createElement(MainButtons, { ...props
1853
- }), React__default.createElement(AdditionalButtons, { ...props
1854
- })), React__default.createElement(f36Components.Flex, null, React__default.createElement(InsertLinkSelector, {
1855
- disabled: props.disabled,
1856
- onSelectExisting: props.actions.linkExistingMedia,
1857
- onAddNew: props.actions.addNewMedia,
1858
- canAddNew: props.canUploadAssets
1859
- }), React__default.createElement(f36Components.IconButton, {
1860
- testId: "markdown-action-button-zen-close",
1861
- variant: "secondary",
1862
- size: "small",
1863
- className: emotion.cx(styles$5.zenButton, styles$5.zenButtonPressed),
1864
- onClick: () => {
1865
- props.actions.closeZenMode();
1866
- },
1867
- icon: React__default.createElement(Zen, {
1868
- label: "Collapse",
1869
- className: styles$5.icon
1870
- }),
1871
- "aria-label": "Collapse"
1872
- }))));
1873
- }
1874
- const MarkdownToolbar = /*#__PURE__*/React__default.memo(props => {
1875
- if (props.mode === 'zen') {
1876
- return React__default.createElement(ZenMarkdownToolbar, { ...props
1877
- });
1878
- }
1879
-
1880
- return React__default.createElement(DefaultMarkdownToolbar, { ...props
1881
- });
1882
- });
1883
- MarkdownToolbar.displayName = 'MarkdownToolbar';
1884
-
1885
- var MarkdownDialogType;
1886
-
1887
- (function (MarkdownDialogType) {
1888
- MarkdownDialogType["cheatsheet"] = "markdown-cheatsheet";
1889
- MarkdownDialogType["insertLink"] = "markdown-insertLink";
1890
- MarkdownDialogType["insertSpecialCharacter"] = "markdown-insertSpecialCharacter";
1891
- MarkdownDialogType["insertTable"] = "markdown-insertTable";
1892
- MarkdownDialogType["embedExternalContent"] = "markdown-embedExternalContent";
1893
- MarkdownDialogType["confirmInsertAsset"] = "markdown-confirmInsertAsset";
1894
- MarkdownDialogType["zenMode"] = "markdown-zenMode";
1895
- })(MarkdownDialogType || (MarkdownDialogType = {}));
1896
-
1897
- const styles$6 = {
1898
- flexColumnContainer: /*#__PURE__*/emotion.css({
1899
- display: 'flex',
1900
- flexWrap: 'nowrap'
1901
- }),
1902
- flexColumn: /*#__PURE__*/emotion.css({
1903
- flexGrow: 1
1904
- }),
1905
- verticalDivider: /*#__PURE__*/emotion.css({
1906
- borderRight: `1px solid ${tokens.gray500}`,
1907
- paddingRight: tokens.spacing3Xl,
1908
- marginRight: tokens.spacing2Xl
1909
- }),
1910
- preview: /*#__PURE__*/emotion.css({
1911
- display: 'inline-block',
1912
- paddingRight: tokens.spacingL,
1913
- width: '50%'
1914
- }),
1915
- unOrderedListPreview: /*#__PURE__*/emotion.css({
1916
- listStyleType: 'disc',
1917
- marginLeft: tokens.spacingS
1918
- }),
1919
- orderedListPreview: /*#__PURE__*/emotion.css({
1920
- listStyleType: 'decimal',
1921
- marginLeft: tokens.spacingS
1922
- }),
1923
- markup: /*#__PURE__*/emotion.css({
1924
- display: 'inline-block',
1925
- color: tokens.gray600,
1926
- paddingLeft: tokens.spacingL,
1927
- width: '50%'
1928
- }),
1929
- h1: /*#__PURE__*/emotion.css({
1930
- fontSize: tokens.fontSize2Xl
1931
- }),
1932
- h2: /*#__PURE__*/emotion.css({
1933
- fontSize: tokens.fontSizeXl
1934
- }),
1935
- h3: /*#__PURE__*/emotion.css({
1936
- fontSize: tokens.fontSizeL
1937
- }),
1938
- helpItem: /*#__PURE__*/emotion.css({
1939
- marginBottom: tokens.spacingS,
1940
- display: 'flex',
1941
- alignItems: 'flex-end',
1942
- height: tokens.spacingXl
1943
- }),
1944
- helpLink: /*#__PURE__*/emotion.css({
1945
- margin: 'auto'
1946
- }),
1947
- flexRowContainer: /*#__PURE__*/emotion.css({
1948
- display: 'flex',
1949
- width: '100%',
1950
- justifyContent: 'center',
1951
- marginTop: tokens.spacingXl
1952
- })
1953
- };
1954
- const CheatsheetModalDialog = () => {
1955
- return React__default.createElement(f36Components.ModalContent, {
1956
- testId: "markdown-cheatsheet-dialog-content"
1957
- }, React__default.createElement("div", {
1958
- className: styles$6.flexColumnContainer
1959
- }, React__default.createElement("div", {
1960
- className: emotion.cx(styles$6.flexColumn, styles$6.verticalDivider)
1961
- }, React__default.createElement("div", {
1962
- className: styles$6.helpItem
1963
- }, React__default.createElement(f36Components.Heading, {
1964
- marginBottom: "none",
1965
- as: "h1",
1966
- className: emotion.cx(styles$6.preview, styles$6.h1)
1967
- }, "H1"), React__default.createElement("div", {
1968
- className: styles$6.markup
1969
- }, "# heading")), React__default.createElement("div", {
1970
- className: styles$6.helpItem
1971
- }, React__default.createElement(f36Components.Heading, {
1972
- marginBottom: "none",
1973
- as: "h2",
1974
- className: emotion.cx(styles$6.preview, styles$6.h2)
1975
- }, "H2"), React__default.createElement("div", {
1976
- className: styles$6.markup
1977
- }, "## heading")), React__default.createElement("div", {
1978
- className: styles$6.helpItem
1979
- }, React__default.createElement(f36Components.Heading, {
1980
- marginBottom: "none",
1981
- as: "h3",
1982
- className: emotion.cx(styles$6.preview, styles$6.h3)
1983
- }, "H3"), React__default.createElement("div", {
1984
- className: styles$6.markup
1985
- }, "### heading")), React__default.createElement("div", {
1986
- className: styles$6.helpItem
1987
- }, React__default.createElement("strong", {
1988
- className: styles$6.preview
1989
- }, "bold"), React__default.createElement("div", {
1990
- className: styles$6.markup
1991
- }, "__text__")), React__default.createElement("div", {
1992
- className: styles$6.helpItem
1993
- }, React__default.createElement("em", {
1994
- className: styles$6.preview
1995
- }, "italic"), React__default.createElement("div", {
1996
- className: styles$6.markup
1997
- }, "*text*")), React__default.createElement("div", {
1998
- className: styles$6.helpItem
1999
- }, React__default.createElement("div", {
2000
- className: styles$6.preview
2001
- }, "strikethrough"), React__default.createElement("div", {
2002
- className: styles$6.markup
2003
- }, "~~text~~")), React__default.createElement("div", {
2004
- className: styles$6.helpItem
2005
- }, React__default.createElement(f36Components.TextLink, {
2006
- as: "button",
2007
- className: styles$6.preview
2008
- }, "Link"), React__default.createElement("div", {
2009
- className: styles$6.markup
2010
- }, "[text](url)"))), React__default.createElement("div", {
2011
- className: styles$6.flexColumn
2012
- }, React__default.createElement("div", {
2013
- className: styles$6.helpItem
2014
- }, React__default.createElement("div", {
2015
- className: styles$6.preview
2016
- }, "Image"), React__default.createElement("div", {
2017
- className: styles$6.markup
2018
- }, "![alt-text](url)")), React__default.createElement("div", {
2019
- className: styles$6.helpItem
2020
- }, React__default.createElement("div", {
2021
- className: styles$6.preview
2022
- }, "Unordered list"), React__default.createElement("div", {
2023
- className: styles$6.markup
2024
- }, "* list item")), React__default.createElement("div", {
2025
- className: styles$6.helpItem
2026
- }, React__default.createElement("div", {
2027
- className: styles$6.preview
2028
- }, React__default.createElement("div", null, "Ordered list")), React__default.createElement("div", {
2029
- className: styles$6.markup
2030
- }, "1. list item")), React__default.createElement("div", {
2031
- className: styles$6.helpItem
2032
- }, React__default.createElement("div", {
2033
- className: styles$6.preview
2034
- }, React__default.createElement("div", null, "Blockquote")), React__default.createElement("div", {
2035
- className: styles$6.markup
2036
- }, "> quote")), React__default.createElement("div", {
2037
- className: styles$6.helpItem
2038
- }, React__default.createElement("div", {
2039
- className: styles$6.preview
2040
- }, "code span"), React__default.createElement("div", {
2041
- className: styles$6.markup
2042
- }, "`code here`")), React__default.createElement("div", {
2043
- className: styles$6.helpItem
2044
- }, React__default.createElement("div", {
2045
- className: styles$6.preview
2046
- }, "code block"), React__default.createElement("div", {
2047
- className: styles$6.markup
2048
- }, "```code here```")))), React__default.createElement("div", {
2049
- className: styles$6.flexRowContainer
2050
- }, React__default.createElement(f36Components.TextLink, {
2051
- className: styles$6.helpLink,
2052
- href: "https://help.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax",
2053
- target: "_blank",
2054
- rel: "noopener noreferrer"
2055
- }, "View the full GitHub-flavored Markdown syntax help (opens in a new window)")));
2056
- };
2057
- const openCheatsheetModal = dialogs => {
2058
- return dialogs.openCurrent({
2059
- title: 'Markdown formatting help',
2060
- width: 'large',
2061
- minHeight: '415px',
2062
- shouldCloseOnEscapePress: true,
2063
- shouldCloseOnOverlayClick: true,
2064
- parameters: {
2065
- type: MarkdownDialogType.cheatsheet
2066
- }
2067
- });
2068
- };
2069
-
2070
- const ConfirmInsertAssetModalDialog = ({
2071
- onClose,
2072
- assets,
2073
- locale
2074
- }) => {
2075
- const localesNumber = assets.length;
2076
- return React__default.createElement(React__default.Fragment, null, React__default.createElement(f36Components.ModalContent, {
2077
- testId: "confirm-insert-asset"
2078
- }, React__default.createElement(f36Components.Paragraph, null, localesNumber === 1 ? `Link asset with missing file for locale ${locale}` : `Link assets with missing files for locale ${locale}`), React__default.createElement(f36Components.Paragraph, null, localesNumber === 1 ? 'Do you want to link to the file in its fallback locale?' : 'Do you want to link to the files in their fallback locales?'), React__default.createElement(f36Components.EntityList, null, assets.map(({
2079
- title,
2080
- description,
2081
- thumbnailUrl,
2082
- thumbnailAltText
2083
- }) => React__default.createElement(f36Components.EntityList.Item, {
2084
- key: thumbnailUrl,
2085
- title: title,
2086
- thumbnailUrl: `${thumbnailUrl}?w=46&h=46&fit=thumb`,
2087
- thumbnailAltText: thumbnailAltText,
2088
- description: description
2089
- })))), React__default.createElement(f36Components.ModalControls, null, React__default.createElement(f36Components.Button, {
2090
- onClick: () => onClose(false),
2091
- variant: "secondary",
2092
- size: "small"
2093
- }, "Cancel"), React__default.createElement(f36Components.Button, {
2094
- testId: "confirm-insert-asset",
2095
- onClick: () => onClose(true),
2096
- variant: "positive",
2097
- size: "small"
2098
- }, "Confirm")));
2099
- };
2100
- const openConfirmInsertAsset = (dialogs, options) => {
2101
- return dialogs.openCurrent({
2102
- title: 'Confirm using fallback assets',
2103
- width: 'medium',
2104
- minHeight: '270px',
2105
- shouldCloseOnEscapePress: true,
2106
- shouldCloseOnOverlayClick: true,
2107
- parameters: {
2108
- type: MarkdownDialogType.confirmInsertAsset,
2109
- ...options
2110
- }
2111
- });
2112
- };
2113
-
2114
- const urlRegex = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?$/;
2115
- function isValidUrl(value) {
2116
- return urlRegex.test(value);
2117
- }
2118
-
2119
- const styles$7 = {
2120
- widthFiledGroup: /*#__PURE__*/emotion.css({
2121
- display: 'flex',
2122
- flexWrap: 'nowrap',
2123
- alignItems: 'flex-start'
2124
- }),
2125
- radioButtonGroup: /*#__PURE__*/emotion.css({
2126
- display: 'inline-flex',
2127
- alignItems: 'flex-start',
2128
- paddingTop: tokens.spacingXl
2129
- }),
2130
- radioButton: /*#__PURE__*/emotion.css({
2131
- marginLeft: tokens.spacingM
2132
- })
2133
- };
2134
-
2135
- const makeEmbedlyLink = ({
2136
- url,
2137
- width,
2138
- selectedUnit,
2139
- attachSocial
2140
- }) => {
2141
- const s = {
2142
- percent: '%',
2143
- px: 'px'
2144
- };
2145
- return ['<a href="' + url + '" class="embedly-card" ', 'data-card-width="' + width + s[selectedUnit] + '" ', 'data-card-controls="' + (attachSocial ? '1' : '0') + '"', '>Embedded content: ' + url + '</a>'].join('');
2146
- };
2147
-
2148
- const isWidthValid = (width, unit) => unit === 'percent' ? width <= 100 : true;
2149
-
2150
- const EmbedExternalContentModal = ({
2151
- onClose
2152
- }) => {
2153
- const mainInputRef = React.useRef(null);
2154
- const [url, setUrl] = React.useState('https://');
2155
- const [selectedUnit, setUnit] = React.useState('percent');
2156
- const [urlIsValid, setUrlValidity] = React.useState(true);
2157
- const [width, setWidth] = React.useState('100');
2158
- const [attachSocial, setAttachSocial] = React.useState(false);
2159
- React.useEffect(() => {
2160
- var _mainInputRef$current;
2161
-
2162
- if ((_mainInputRef$current = mainInputRef.current) != null && _mainInputRef$current.focus) {
2163
- mainInputRef.current.focus();
2164
- }
2165
- }, [mainInputRef]);
2166
- return React__default.createElement(React__default.Fragment, null, React__default.createElement(f36Components.ModalContent, {
2167
- testId: "embed-external-dialog"
2168
- }, React__default.createElement(f36Components.Form, null, React__default.createElement(f36Components.FormControl, {
2169
- id: "external-link-url-field",
2170
- isRequired: true,
2171
- isInvalid: !urlIsValid
2172
- }, React__default.createElement(f36Components.FormControl.Label, null, "Content URL"), React__default.createElement(f36Components.TextInput, {
2173
- name: "external-link-url",
2174
- value: url,
2175
- onChange: e => {
2176
- const value = e.target.value;
2177
- setUrl(value);
2178
- setUrlValidity(isValidUrl(value));
2179
- },
2180
- testId: "external-link-url-field",
2181
- placeholder: "https://example.com",
2182
- ref: mainInputRef
2183
- }), React__default.createElement(f36Components.FormControl.HelpText, null, "Include protocol (e.g. https://)"), !urlIsValid && React__default.createElement(f36Components.FormControl.ValidationMessage, null, "URL is invalid")), React__default.createElement(f36Components.TextLink, {
2184
- href: "http://embed.ly/providers",
2185
- target: "_blank",
2186
- rel: "noopener noreferrer"
2187
- }, "Supported sources"), React__default.createElement("div", {
2188
- className: styles$7.widthFiledGroup
2189
- }, React__default.createElement(f36Components.FormControl, {
2190
- id: "embedded-content-width",
2191
- isRequired: true,
2192
- isInvalid: !isWidthValid(Number(width), selectedUnit)
2193
- }, React__default.createElement(f36Components.FormControl.Label, null, "Width"), React__default.createElement(f36Components.TextInput, {
2194
- value: width,
2195
- name: "embedded-content-width",
2196
- testId: "embedded-content-width",
2197
- type: "number",
2198
- width: "small",
2199
- onChange: e => setWidth(e.target.value)
2200
- }), !isWidthValid(Number(width), selectedUnit) && React__default.createElement(f36Components.FormControl.ValidationMessage, null, "Should be equal or less then 100")), React__default.createElement("div", {
2201
- className: styles$7.radioButtonGroup
2202
- }, React__default.createElement(f36Components.Radio, {
2203
- id: "unit-option-percent",
2204
- value: "percent",
2205
- isChecked: selectedUnit === 'percent',
2206
- onChange: () => setUnit('percent'),
2207
- className: styles$7.radioButton
2208
- }, "percent"), React__default.createElement(f36Components.Radio, {
2209
- id: "unit-option-pixels",
2210
- value: "pixels",
2211
- isChecked: selectedUnit === 'px',
2212
- onChange: () => setUnit('px'),
2213
- className: styles$7.radioButton
2214
- }, "pixels"))), React__default.createElement(f36Components.Checkbox, {
2215
- id: "attach-social-checkbox",
2216
- name: "attach-social-checkbox",
2217
- value: "Yes",
2218
- isChecked: attachSocial,
2219
- onChange: () => setAttachSocial(!attachSocial),
2220
- testId: "attach-social-checkbox"
2221
- }, "Attach social sharing links to this element"), React__default.createElement(f36Components.Text, {
2222
- as: "p",
2223
- fontColor: "gray500",
2224
- marginTop: "spacingXs"
2225
- }, "To enable this embedded content in your application make sure to add the\u00A0", React__default.createElement(f36Components.TextLink, {
2226
- href: "http://embed.ly/docs/products/cards",
2227
- target: "_blank",
2228
- rel: "noopener noreferrer"
2229
- }, "Embedly's platform.js"), "\u00A0on your development environment"))), React__default.createElement(f36Components.ModalControls, null, React__default.createElement(f36Components.Button, {
2230
- testId: "emded-external-cancel",
2231
- onClick: () => onClose(false),
2232
- variant: "secondary",
2233
- size: "small"
2234
- }, "Cancel"), React__default.createElement(f36Components.Button, {
2235
- testId: "embed-external-confirm",
2236
- onClick: () => onClose(makeEmbedlyLink({
2237
- url,
2238
- width: Number(width),
2239
- selectedUnit,
2240
- attachSocial
2241
- })),
2242
- variant: "positive",
2243
- size: "small"
2244
- }, "Insert")));
2245
- };
2246
- const openEmbedExternalContentDialog = dialogs => {
2247
- return dialogs.openCurrent({
2248
- title: 'Embed external content',
2249
- width: 'large',
2250
- minHeight: '435px',
2251
- shouldCloseOnEscapePress: true,
2252
- shouldCloseOnOverlayClick: true,
2253
- parameters: {
2254
- type: MarkdownDialogType.embedExternalContent
2255
- }
2256
- });
2257
- };
2258
-
2259
- const InsertLinkModal = ({
2260
- selectedText,
2261
- onClose
2262
- }) => {
2263
- const mainInputRef = React.useRef(null);
2264
- const [text, setText] = React.useState(selectedText || '');
2265
- const [url, setUrl] = React.useState('');
2266
- const [touched, setTouched] = React.useState(false);
2267
- const [title, setTitle] = React.useState('');
2268
-
2269
- const onInsert = values => onClose(values);
2270
-
2271
- const urlIsValid = isValidUrl(url);
2272
- React.useEffect(() => {
2273
- var _mainInputRef$current;
2274
-
2275
- if (mainInputRef != null && (_mainInputRef$current = mainInputRef.current) != null && _mainInputRef$current.focus) {
2276
- mainInputRef.current.focus();
2277
- }
2278
- }, [mainInputRef]);
2279
- return React__default.createElement(React__default.Fragment, null, React__default.createElement(f36Components.ModalContent, {
2280
- testId: "insert-link-modal"
2281
- }, React__default.createElement(f36Components.Form, {
2282
- onSubmit: () => onInsert({
2283
- url,
2284
- text,
2285
- title
2286
- })
2287
- }, React__default.createElement(f36Components.FormControl, {
2288
- id: "link-text-field",
2289
- isDisabled: Boolean(selectedText)
2290
- }, React__default.createElement(f36Components.FormControl.Label, null, "Link text"), React__default.createElement(f36Components.TextInput, {
2291
- name: "link-text",
2292
- value: text,
2293
- onChange: e => {
2294
- setText(e.target.value);
2295
- },
2296
- testId: "link-text-field"
2297
- })), React__default.createElement(f36Components.FormControl, {
2298
- id: "target-url-field",
2299
- isInvalid: touched && !urlIsValid
2300
- }, React__default.createElement(f36Components.FormControl.Label, null, "Target URL"), React__default.createElement(f36Components.TextInput, {
2301
- name: "target-url",
2302
- value: url,
2303
- onChange: e => {
2304
- setUrl(e.target.value);
2305
- setTouched(true);
2306
- },
2307
- placeholder: "https://",
2308
- maxLength: 2100,
2309
- testId: "target-url-field",
2310
- ref: mainInputRef
2311
- }), React__default.createElement(f36Components.FormControl.HelpText, null, "Include protocol (e.g. https://)"), touched && !urlIsValid && React__default.createElement(f36Components.FormControl.ValidationMessage, null, "Invalid URL")), React__default.createElement(f36Components.FormControl, {
2312
- id: "link-title-field"
2313
- }, React__default.createElement(f36Components.FormControl.Label, null, "Link title"), React__default.createElement(f36Components.TextInput, {
2314
- name: "link-title",
2315
- value: title,
2316
- onChange: e => {
2317
- setTitle(e.target.value);
2318
- },
2319
- testId: "link-title-field"
2320
- }), React__default.createElement(f36Components.FormControl.HelpText, null, "Extra link information, usually shown as a tooltip on mouse hover")))), React__default.createElement(f36Components.ModalControls, null, React__default.createElement(f36Components.Button, {
2321
- testId: "insert-link-cancel",
2322
- onClick: () => onClose(false),
2323
- variant: "secondary",
2324
- size: "small"
2325
- }, "Cancel"), React__default.createElement(f36Components.Button, {
2326
- testId: "insert-link-confirm",
2327
- onClick: () => {
2328
- onInsert({
2329
- url,
2330
- text,
2331
- title
2332
- });
2333
- },
2334
- isDisabled: !urlIsValid,
2335
- variant: "positive",
2336
- size: "small"
2337
- }, "Insert")));
2338
- };
2339
- const openInsertLinkDialog = (dialogs, params) => {
2340
- return dialogs.openCurrent({
2341
- title: 'Insert link',
2342
- width: 'large',
2343
- minHeight: '410px',
2344
- shouldCloseOnEscapePress: true,
2345
- shouldCloseOnOverlayClick: true,
2346
- parameters: {
2347
- type: MarkdownDialogType.insertLink,
2348
- ...params
2349
- }
2350
- });
2351
- };
2352
-
2353
- const InsertTableModal = ({
2354
- onClose
2355
- }) => {
2356
- const mainInputRef = React.useRef(null);
2357
- const [rows, setRows] = React.useState(2);
2358
- const [cols, setColumns] = React.useState(1);
2359
- const rowsAreValid = inRange(rows, 2, 100);
2360
- const colsAreValid = inRange(cols, 1, 100);
2361
- React.useEffect(() => {
2362
- var _mainInputRef$current;
2363
-
2364
- if ((_mainInputRef$current = mainInputRef.current) != null && _mainInputRef$current.focus) {
2365
- mainInputRef.current.focus();
2366
- }
2367
- }, [mainInputRef]);
2368
- return React__default.createElement(React__default.Fragment, null, React__default.createElement(f36Components.ModalContent, {
2369
- testId: "insert-table-modal"
2370
- }, React__default.createElement(f36Components.Form, null, React__default.createElement(f36Components.FormControl, {
2371
- id: "insert-table-rows-number-field",
2372
- isRequired: true,
2373
- isInvalid: !rowsAreValid
2374
- }, React__default.createElement(f36Components.FormControl.Label, null, "Number of rows"), React__default.createElement(f36Components.TextInput, {
2375
- name: "rows",
2376
- value: rows.toString(),
2377
- onChange: e => setRows(Number(e.target.value)),
2378
- testId: "insert-table-rows-number-field",
2379
- min: 2,
2380
- max: 100,
2381
- pattern: "[1-9][0-9]*",
2382
- type: "number",
2383
- width: "small",
2384
- autoComplete: "off",
2385
- ref: mainInputRef
2386
- }), !rowsAreValid && React__default.createElement(f36Components.FormControl.ValidationMessage, null, "Should be between 2 and 100")), React__default.createElement(f36Components.FormControl, {
2387
- id: "insert-table-columns-number-field",
2388
- isRequired: true,
2389
- isInvalid: !colsAreValid
2390
- }, React__default.createElement(f36Components.FormControl.Label, null, "Number of columns"), React__default.createElement(f36Components.TextInput, {
2391
- name: "columns",
2392
- value: cols.toString(),
2393
- onChange: e => setColumns(Number(e.target.value)),
2394
- testId: "insert-table-columns-number-field",
2395
- min: 1,
2396
- max: 100,
2397
- pattern: "[1-9][0-9]*",
2398
- type: "number",
2399
- width: "small",
2400
- autoComplete: "off"
2401
- }), !colsAreValid && React__default.createElement(f36Components.FormControl.ValidationMessage, null, "Should be between 1 and 100")))), React__default.createElement(f36Components.ModalControls, null, React__default.createElement(f36Components.Button, {
2402
- testId: "insert-table-cancel",
2403
- onClick: () => onClose(false),
2404
- variant: "secondary",
2405
- size: "small"
2406
- }, "Cancel"), React__default.createElement(f36Components.Button, {
2407
- testId: "insert-table-confirm",
2408
- onClick: () => onClose({
2409
- rows,
2410
- cols
2411
- }),
2412
- variant: "positive",
2413
- size: "small",
2414
- isDisabled: !rowsAreValid || !colsAreValid
2415
- }, "Insert")));
2416
- };
2417
- const openInsertTableDialog = dialogs => {
2418
- return dialogs.openCurrent({
2419
- title: 'Insert table',
2420
- width: 'medium',
2421
- minHeight: '260px',
2422
- shouldCloseOnEscapePress: true,
2423
- shouldCloseOnOverlayClick: true,
2424
- parameters: {
2425
- type: MarkdownDialogType.insertTable
2426
- }
2427
- });
2428
- };
2429
-
2430
- const specialCharacters = [{
2431
- code: 180,
2432
- desc: 'acute accent'
2433
- }, {
2434
- code: 38,
2435
- desc: 'ampersand'
2436
- }, {
2437
- code: 166,
2438
- desc: 'broken vertical bar'
2439
- }, {
2440
- code: 8226,
2441
- desc: 'bullet'
2442
- }, {
2443
- code: 184,
2444
- desc: 'cedilla'
2445
- }, {
2446
- code: 162,
2447
- desc: 'cent'
2448
- }, {
2449
- code: 169,
2450
- desc: 'copyright'
2451
- }, {
2452
- code: 176,
2453
- desc: 'degree'
2454
- }, {
2455
- code: 247,
2456
- desc: 'division'
2457
- }, {
2458
- code: 189,
2459
- desc: 'fraction half'
2460
- }, {
2461
- code: 188,
2462
- desc: 'fraction quarter'
2463
- }, {
2464
- code: 190,
2465
- desc: 'fraction three quarters'
2466
- }, {
2467
- code: 62,
2468
- desc: 'greater than'
2469
- }, {
2470
- code: 161,
2471
- desc: 'inverted exclamation mark'
2472
- }, {
2473
- code: 191,
2474
- desc: 'inverted question mark'
2475
- }, {
2476
- code: 171,
2477
- desc: 'left-pointing double angle quotation mark'
2478
- }, {
2479
- code: 60,
2480
- desc: 'less than'
2481
- }, {
2482
- code: 175,
2483
- desc: 'macron'
2484
- }, {
2485
- code: 181,
2486
- desc: 'micro'
2487
- }, {
2488
- code: 160,
2489
- desc: 'non-breaking space'
2490
- }, {
2491
- code: 172,
2492
- desc: 'not'
2493
- }, {
2494
- code: 182,
2495
- desc: 'paragraph'
2496
- }, {
2497
- code: 177,
2498
- desc: 'plus-minus'
2499
- }, {
2500
- code: 34,
2501
- desc: 'quotation mark'
2502
- }, {
2503
- code: 174,
2504
- desc: 'registered'
2505
- }, {
2506
- code: 187,
2507
- desc: 'right-pointing double angle quotation mark'
2508
- }, {
2509
- code: 167,
2510
- desc: 'section'
2511
- }, {
2512
- code: 168,
2513
- desc: 'umlaut/diaeresis'
2514
- }, {
2515
- code: 215,
2516
- desc: 'multiplication'
2517
- }, {
2518
- code: 8482,
2519
- desc: 'trade mark'
2520
- }, {
2521
- code: 8364,
2522
- desc: 'euro'
2523
- }, {
2524
- code: 163,
2525
- desc: 'pound'
2526
- }, {
2527
- code: 165,
2528
- desc: 'yen'
2529
- }, {
2530
- code: 8222,
2531
- desc: 'double low-9 quotation mark'
2532
- }, {
2533
- code: 710,
2534
- desc: 'modifier circumflex accent'
2535
- }, {
2536
- code: 8224,
2537
- desc: 'dagger'
2538
- }, {
2539
- code: 8225,
2540
- desc: 'double dagger'
2541
- }, {
2542
- code: 8230,
2543
- desc: 'horizontal ellipsis'
2544
- }, {
2545
- code: 8220,
2546
- desc: 'left double quotation mark'
2547
- }, {
2548
- code: 8249,
2549
- desc: 'single left-pointing angle quotation mark'
2550
- }, {
2551
- code: 8216,
2552
- desc: 'left single quotation mark'
2553
- }, {
2554
- code: 183,
2555
- desc: 'middle dot'
2556
- }, {
2557
- code: 8212,
2558
- desc: 'em dash'
2559
- }, {
2560
- code: 8211,
2561
- desc: 'en dash'
2562
- }, {
2563
- code: 8240,
2564
- desc: 'per mille'
2565
- }, {
2566
- code: 8250,
2567
- desc: 'single right-pointing angle quotation mark'
2568
- }, {
2569
- code: 8217,
2570
- desc: 'right single quotation mark'
2571
- }, {
2572
- code: 8218,
2573
- desc: 'single low-9 quotation mark'
2574
- }, {
2575
- code: 170,
2576
- desc: 'feminine ordinal indicator'
2577
- }, {
2578
- code: 186,
2579
- desc: 'masculine ordinal indicator'
2580
- }, {
2581
- code: 8221,
2582
- desc: 'right double quotation mark'
2583
- }, {
2584
- code: 732,
2585
- desc: 'small tilde'
2586
- }, {
2587
- code: 9829,
2588
- desc: 'black heart'
2589
- }, {
2590
- code: 9830,
2591
- desc: 'diamond'
2592
- }];
2593
-
2594
- const styles$8 = {
2595
- buttonPanel: /*#__PURE__*/emotion.css({
2596
- display: 'flex',
2597
- flexWrap: 'wrap'
2598
- }),
2599
- charButton: /*#__PURE__*/emotion.css({
2600
- border: `1px solid ${tokens.gray500}`,
2601
- width: '4.1rem',
2602
- height: '4.1rem',
2603
- fontSize: tokens.fontSizeXl,
2604
- marginTop: tokens.spacing2Xs,
2605
- marginRight: tokens.spacing2Xs
2606
- }),
2607
- selectedCharButton: /*#__PURE__*/emotion.css({
2608
- backgroundColor: tokens.gray100
2609
- }),
2610
- tooltip: /*#__PURE__*/emotion.css({
2611
- zIndex: 1000
2612
- }),
2613
- button: /*#__PURE__*/emotion.css({
2614
- marginTop: tokens.spacingM,
2615
- marginRight: tokens.spacingS
2616
- })
2617
- };
2618
- const SpecialCharacterModalDialog = ({
2619
- onClose
2620
- }) => {
2621
- const [selectedCharacter, setSelectedCharacter] = React.useState(specialCharacters[0]);
2622
- return React__default.createElement(React__default.Fragment, null, React__default.createElement(f36Components.ModalContent, {
2623
- testId: "insert-special-character-modal"
2624
- }, React__default.createElement(f36Components.Flex, {
2625
- flexDirection: "column",
2626
- alignItems: "center"
2627
- }, React__default.createElement(f36Components.Text, {
2628
- as: "div",
2629
- lineHeight: "lineHeight3Xl",
2630
- fontSize: "fontSize3Xl",
2631
- marginBottom: "spacingS"
2632
- }, String.fromCharCode(selectedCharacter.code)), React__default.createElement(f36Components.Text, {
2633
- as: "div",
2634
- marginBottom: "spacingS"
2635
- }, selectedCharacter.desc)), React__default.createElement("div", {
2636
- className: styles$8.buttonPanel
2637
- }, specialCharacters.map(char => React__default.createElement("div", {
2638
- key: char.code
2639
- }, React__default.createElement(f36Components.Tooltip, {
2640
- className: styles$8.tooltip,
2641
- content: char.desc
2642
- }, React__default.createElement(f36Components.Button, {
2643
- testId: "special-character-button",
2644
- isActive: char.code === selectedCharacter.code,
2645
- className: styles$8.charButton,
2646
- variant: "transparent",
2647
- onClick: () => setSelectedCharacter(char)
2648
- }, String.fromCharCode(char.code))))))), React__default.createElement(f36Components.ModalControls, null, React__default.createElement(f36Components.Button, {
2649
- testId: "insert-character-cancel",
2650
- className: styles$8.button,
2651
- onClick: () => onClose(false),
2652
- variant: "secondary",
2653
- size: "small"
2654
- }, "Cancel"), React__default.createElement(f36Components.Button, {
2655
- className: styles$8.button,
2656
- testId: "insert-character-confirm",
2657
- onClick: () => onClose(String.fromCharCode(selectedCharacter.code)),
2658
- variant: "positive",
2659
- size: "small"
2660
- }, "Insert selected")));
2661
- };
2662
- const openInsertSpecialCharacter = dialogs => {
2663
- return dialogs.openCurrent({
2664
- title: 'Insert special character',
2665
- width: 'large',
2666
- minHeight: '600px',
2667
- shouldCloseOnEscapePress: true,
2668
- shouldCloseOnOverlayClick: true,
2669
- parameters: {
2670
- type: MarkdownDialogType.insertSpecialCharacter
2671
- }
2672
- });
2673
- };
2674
-
2675
- const styles$9 = {
2676
- root: /*#__PURE__*/emotion.css({
2677
- position: 'fixed',
2678
- left: 0,
2679
- right: 0,
2680
- top: 0,
2681
- bottom: 0
2682
- }),
2683
- topSplit: /*#__PURE__*/emotion.css({
2684
- position: 'fixed',
2685
- top: 0,
2686
- height: '48px',
2687
- left: 0,
2688
- right: 0
2689
- }),
2690
- bottomSplit: /*#__PURE__*/emotion.css({
2691
- position: 'fixed',
2692
- bottom: 0,
2693
- left: 0,
2694
- right: 0,
2695
- height: '36px'
2696
- }),
2697
- editorSplit: /*#__PURE__*/emotion.css({
2698
- width: '50%',
2699
- position: 'fixed',
2700
- top: '48px',
2701
- left: 0,
2702
- bottom: '36px',
2703
- overflowX: 'hidden',
2704
- overflowY: 'scroll'
2705
- }),
2706
- editorSplitFullscreen: /*#__PURE__*/emotion.css({
2707
- left: 0,
2708
- right: 0,
2709
- width: '100%'
2710
- }),
2711
- previewSplit: /*#__PURE__*/emotion.css({
2712
- width: '50%',
2713
- position: 'fixed',
2714
- top: '48px',
2715
- right: 0,
2716
- bottom: '36px',
2717
- overflowX: 'hidden',
2718
- overflowY: 'scroll'
2719
- }),
2720
- separator: /*#__PURE__*/emotion.css({
2721
- position: 'fixed',
2722
- top: '48px',
2723
- bottom: '36px',
2724
- width: '1px',
2725
- background: tokens.gray400,
2726
- left: '50%'
2727
- }),
2728
- button: /*#__PURE__*/emotion.css({
2729
- position: 'fixed',
2730
- cursor: 'pointer',
2731
- zIndex: 105,
2732
- top: '49%',
2733
- height: '30px',
2734
- backgroundColor: tokens.gray100,
2735
- border: `1px solid ${tokens.gray400}`,
2736
- padding: 0
2737
- }),
2738
- hideButton: /*#__PURE__*/emotion.css({
2739
- left: '50%'
2740
- }),
2741
- showButton: /*#__PURE__*/emotion.css({
2742
- right: 0,
2743
- borderRightWidth: 0
2744
- }),
2745
- icon: /*#__PURE__*/emotion.css({
2746
- verticalAlign: 'middle'
2747
- })
2748
- };
2749
- const ZenModeModalDialog = props => {
2750
- const [currentValue, setCurrentValue] = React__default.useState(props.initialValue ?? '');
2751
- const [showPreview, setShowPreview] = React__default.useState(true);
2752
- const [editor, setEditor] = React__default.useState(null);
2753
- React__default.useEffect(() => {
2754
- var _props$sdk, _props$sdk$window;
2755
-
2756
- // eslint-disable-next-line -- TODO: describe this disable @typescript-eslint/no-explicit-any
2757
- (_props$sdk = props.sdk) == null ? void 0 : (_props$sdk$window = _props$sdk.window) == null ? void 0 : _props$sdk$window.updateHeight('100%'); // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
2758
- }, []); // refresh editor right after dialog is opened to avoid disappearing effect
2759
-
2760
- React__default.useEffect(() => {
2761
- setTimeout(() => {
2762
- editor == null ? void 0 : editor.setFullsize();
2763
- editor == null ? void 0 : editor.refresh();
2764
- }, 150);
2765
- }, [editor]);
2766
- const actions = React__default.useMemo(() => {
2767
- return createMarkdownActions({
2768
- sdk: props.sdk,
2769
- editor,
2770
- locale: props.locale
2771
- }); // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
2772
- }, [editor]);
2773
-
2774
- actions.closeZenMode = () => {
2775
- props.onClose({
2776
- value: currentValue,
2777
- cursor: editor == null ? void 0 : editor.getCursor()
2778
- });
2779
- };
2780
-
2781
- const direction = props.sdk.locales.direction[props.locale] ?? 'ltr';
2782
- return React__default.createElement("div", {
2783
- className: styles$9.root,
2784
- "data-test-id": "zen-mode-markdown-editor"
2785
- }, React__default.createElement("div", {
2786
- className: styles$9.topSplit
2787
- }, React__default.createElement(MarkdownToolbar, {
2788
- mode: "zen",
2789
- disabled: false,
2790
- canUploadAssets: false,
2791
- actions: actions
2792
- })), React__default.createElement("div", {
2793
- className: emotion.cx(styles$9.editorSplit, {
2794
- [styles$9.editorSplitFullscreen]: showPreview === false
2795
- })
2796
- }, React__default.createElement(MarkdownTextarea, {
2797
- mode: "zen",
2798
- visible: true,
2799
- disabled: false,
2800
- direction: direction,
2801
- onReady: editor => {
2802
- editor.setContent(props.initialValue ?? '');
2803
- editor.setReadOnly(false);
2804
- setEditor(editor);
2805
- editor.focus();
2806
- editor.events.onChange(value => {
2807
- setCurrentValue(value);
2808
- props.saveValueToSDK(value);
2809
- });
2810
- }
2811
- })), showPreview && React__default.createElement("div", {
2812
- className: styles$9.previewSplit
2813
- }, React__default.createElement(MarkdownPreview, {
2814
- direction: direction,
2815
- mode: "zen",
2816
- value: currentValue,
2817
- previewComponents: props.previewComponents
2818
- })), showPreview && React__default.createElement("div", {
2819
- className: styles$9.separator
2820
- }), showPreview && React__default.createElement("button", {
2821
- className: emotion.cx(styles$9.button, styles$9.hideButton),
2822
- "aria-label": "Hide preview",
2823
- onClick: () => {
2824
- setShowPreview(false);
2825
- }
2826
- }, React__default.createElement(f36Icons.ChevronRightIcon, {
2827
- variant: "muted",
2828
- size: "tiny",
2829
- className: styles$9.icon
2830
- })), !showPreview && React__default.createElement("button", {
2831
- className: emotion.cx(styles$9.button, styles$9.showButton),
2832
- "aria-label": "Show preview",
2833
- onClick: () => {
2834
- setShowPreview(true);
2835
- }
2836
- }, React__default.createElement(f36Icons.ChevronLeftIcon, {
2837
- variant: "muted",
2838
- size: "tiny",
2839
- className: styles$9.icon
2840
- })), React__default.createElement("div", {
2841
- className: styles$9.bottomSplit
2842
- }, React__default.createElement(MarkdownBottomBar, null, React__default.createElement(MarkdownHelp, {
2843
- onClick: () => {
2844
- openCheatsheetModal(props.sdk.dialogs);
2845
- }
2846
- }))));
2847
- };
2848
- const openZenMode = (dialogs, options) => {
2849
- return dialogs.openCurrent({
2850
- width: 'zen',
2851
- shouldCloseOnEscapePress: false,
2852
- minHeight: '100vh',
2853
- shouldCloseOnOverlayClick: false,
2854
- parameters: {
2855
- type: MarkdownDialogType.zenMode,
2856
- initialValue: options.initialValue,
2857
- locale: options.locale
2858
- }
2859
- });
2860
- };
2861
-
2862
- function normalizeWhiteSpace(str) {
2863
- if (str) {
2864
- return str.trim().replace(/\s{2,}/g, ' ');
2865
- } else {
2866
- return str;
2867
- }
2868
- }
2869
-
2870
- function removeExtension(str) {
2871
- return str.replace(/\.\w+$/g, '');
2872
- }
2873
-
2874
- function fileNameToTitle(str) {
2875
- return normalizeWhiteSpace(removeExtension(str).replace(/_/g, ' '));
2876
- }
2877
-
2878
- function replaceAssetDomain(fileUrl) {
2879
- const assetDomainMap = {
2880
- images: 'images.ctfassets.net',
2881
- assets: 'assets.ctfassets.net',
2882
- downloads: 'downloads.ctfassets.net',
2883
- videos: 'videos.ctfassets.net'
2884
- };
2885
- return fileUrl.replace(/(images|assets|downloads|videos).contentful.com/, (_, p1) => {
2886
- return assetDomainMap[p1];
2887
- });
2888
- }
2889
-
2890
- function makeAssetLink(asset, {
2891
- localeCode,
2892
- fallbackCode,
2893
- defaultLocaleCode
2894
- }) {
2895
- const localizedFile = get(asset, ['fields', 'file', localeCode]);
2896
- const fallbackFile = fallbackCode ? get(asset, ['fields', 'file', fallbackCode]) : null;
2897
- const defaultFile = get(asset, ['fields', 'file', defaultLocaleCode]);
2898
- const file = localizedFile || fallbackFile || defaultFile;
2899
-
2900
- if (isObject(file) && file.url) {
2901
- const title = get(asset, ['fields', 'title', localeCode]) || get(asset, ['fields', 'title', fallbackCode || '']) || get(asset, ['fields', 'title', defaultLocaleCode]) || fileNameToTitle(file.fileName);
2902
- const fileUrl = replaceAssetDomain(file.url);
2903
- return {
2904
- title,
2905
- asset,
2906
- url: fileUrl,
2907
- // is normally localized and we should not warn about this file
2908
- isLocalized: Boolean(localizedFile),
2909
- // was fallback value used
2910
- // if it was not localized normally, and we did not used a fallback
2911
- // it means we used a default locale - we filter empty values
2912
- isFallback: Boolean(fallbackFile),
2913
- // todo: tranform using fromHostname
2914
- asMarkdown: `![${title}](${fileUrl})`
2915
- };
2916
- } else {
2917
- return null;
2918
- }
2919
- }
2920
-
2921
- async function insertAssetLinks(assets, locales) {
2922
- // check whether do we have some assets, which don't have
2923
- // a version in this field's locale
2924
- const otherLocales = assets.filter(asset => {
2925
- return !get(asset, ['fields', 'file', locales.localeCode]);
2926
- });
2927
- const linksWithMeta = assets.map(asset => makeAssetLink(asset, locales)) // remove empty links
2928
- .filter(asset => asset !== null); // if there have values from fallback/default locales, we need to
2929
- // provide user a warning so we show him modal
2930
-
2931
- if (otherLocales.length > 0) {
2932
- const fallbackAssets = linksWithMeta // we don't want to warn about normally localized files
2933
- .filter(({
2934
- isLocalized
2935
- }) => !isLocalized).map(({
2936
- title,
2937
- isFallback,
2938
- asset
2939
- }) => {
2940
- const code = isFallback ? locales.fallbackCode : locales.defaultLocaleCode;
2941
- return {
2942
- title,
2943
- thumbnailUrl: asset.fields.file[code].url,
2944
- thumbnailAltText: title,
2945
- description: isFallback ? `Fallback locale (${code})` : `Default locale (${code})`,
2946
- asset: asset
2947
- };
2948
- });
2949
- return {
2950
- fallbacks: fallbackAssets,
2951
- links: linksWithMeta
2952
- };
2953
- }
2954
-
2955
- return {
2956
- links: linksWithMeta
2957
- };
2958
- }
2959
-
2960
- /* eslint-disable @typescript-eslint/no-use-before-define, @typescript-eslint/no-explicit-any */
2961
-
2962
- function extractTitle(title) {
2963
- title = title || '';
2964
- title = title.replace(/^ *('|"|\()*/, '');
2965
- title = title.replace(/('|"|\))* *$/, '');
2966
- return title;
2967
- }
2968
-
2969
- function head(text) {
2970
- return text.split(' ').shift();
2971
- }
2972
-
2973
- function tail(text) {
2974
- const segments = text.split(' ');
2975
- segments.shift();
2976
- return segments.join(' ');
2977
- }
2978
-
2979
- const PROCESSORS = {
2980
- inline: function (match) {
2981
- return {
2982
- match: match[0],
2983
- text: match[1],
2984
- href: head(match[2]),
2985
- title: extractTitle(tail(match[2]))
2986
- };
2987
- },
2988
- ref: function (match) {
2989
- return {
2990
- match: match[0],
2991
- text: match[1],
2992
- id: match[2]
2993
- };
2994
- },
2995
- label: function (match) {
2996
- return {
2997
- match: match[0],
2998
- id: match[1],
2999
- href: head(match[2]),
3000
- title: extractTitle(tail(match[2]))
3001
- };
3002
- }
3003
- };
3004
- const REGEXS = {
3005
- inline: /\[([^\r\n[\]]+)]\(([^\r\n)]+)\)/,
3006
- ref: /\[([^\r\n[\]]+)] ?\[([^\r\n[\]]+)]/,
3007
- label: /^ {0,3}\[([^\r\n[\]]+)]:\s+(.+)$/
3008
- };
3009
- const findInline = /*#__PURE__*/makeFinder('inline');
3010
- const findRefs = /*#__PURE__*/makeFinder('ref');
3011
- const findLabels = /*#__PURE__*/makeFinder('label');
3012
- function convertInlineToRef(text) {
3013
- let id = findMaxLabelId(text);
3014
- forEach(findInline(text), inline => {
3015
- id += 1;
3016
- text = text.replace(inline.match, buildRef(inline, id));
3017
- text += '\n' + buildLabel(inline, id);
3018
- });
3019
- return text;
3020
- }
3021
-
3022
- function mergeLabels(text) {
3023
- const byHref = {};
3024
- const byOldId = {};
3025
- forEach(findLabels(text), label => {
3026
- const alreadyAdded = byHref[label.href];
3027
- const current = extend({}, label);
3028
-
3029
- if (!alreadyAdded) {
3030
- byHref[current.href] = current;
3031
- } else if (hasTitle(current) && !hasTitle(alreadyAdded)) {
3032
- alreadyAdded.title = current.title;
3033
- }
3034
-
3035
- byOldId[current.id] = alreadyAdded || current;
3036
- });
3037
- return {
3038
- byHref: byHref,
3039
- byOldId: byOldId
3040
- };
3041
- }
3042
-
3043
- function rewriteRefs(text) {
3044
- const merged = mergeLabels(text);
3045
- const hrefToRefId = {};
3046
- const labels = [];
3047
- const rewrites = [];
3048
- let i = 1; // 1. compose list of labels with new ids, in order
3049
-
3050
- forEach(findRefs(text), ref => {
3051
- const oldLabel = merged.byOldId[ref.id];
3052
-
3053
- if (!oldLabel) {
3054
- return;
3055
- }
3056
-
3057
- const href = oldLabel.href;
3058
- let newRefId = hrefToRefId[href];
3059
-
3060
- if (!newRefId) {
3061
- hrefToRefId[href] = newRefId = i;
3062
- i += 1;
3063
- labels.push(extend({
3064
- newId: newRefId
3065
- }, oldLabel));
3066
- } // 1b. prepare rewrites to be applied, with new label ids
3067
-
3068
-
3069
- rewrites.push(extend({
3070
- newId: newRefId
3071
- }, ref));
3072
- }); // 2. remove all labels!
3073
-
3074
- forEach(findLabels(text), label => {
3075
- text = text.replace(label.match, '');
3076
- }); // 3. remove whitespace from the end of text
3077
-
3078
- text = text.replace(/[\r\n\s]*$/, '');
3079
- text += '\n\n'; // 4. apply rewrites
3080
-
3081
- forEach(rewrites, ref => {
3082
- text = text.replace(ref.match, buildRef(ref, ref.newId));
3083
- }); // 5. print new labels at the end of text
3084
-
3085
- forEach(labels, label => {
3086
- text += '\n' + buildLabel(label, label.newId);
3087
- });
3088
- return text;
3089
- }
3090
- /**
3091
- * Finding stuff
3092
- */
3093
-
3094
- function makeFinder(type) {
3095
- return text => findAll(text, type).map(PROCESSORS[type]);
3096
- }
3097
-
3098
- function findMaxLabelId(textOrLabels) {
3099
- if (isString(textOrLabels)) {
3100
- textOrLabels = findLabels(textOrLabels);
3101
- }
3102
-
3103
- const ids = textOrLabels.map(x => x.id).map(x => parseInt(x, 10)).filter(x => isFinite(x) && x > 0);
3104
- return ids.length > 0 ? max(ids) || 0 : 0;
3105
- }
3106
-
3107
- function findAll(text, type) {
3108
- const flags = 'g' + (type === 'label' ? 'm' : '');
3109
- const matches = [];
3110
- const re = new RegExp(REGEXS[type].source, flags);
3111
- let found = re.exec(text);
3112
-
3113
- while (found) {
3114
- matches.push(found);
3115
- re.lastIndex = found.index + found[0].length;
3116
- found = re.exec(text);
3117
- }
3118
-
3119
- return matches;
3120
- }
3121
- /**
3122
- * Other utilities
3123
- */
3124
-
3125
-
3126
- function hasTitle(link) {
3127
- return isObject(link) && isString(link.title) && link.title.length > 0;
3128
- }
3129
-
3130
- function buildLabel(link, id) {
3131
- let markup = '[' + id + ']: ' + link.href;
3132
-
3133
- if (hasTitle(link)) {
3134
- markup += ' "' + link.title + '"';
3135
- }
3136
-
3137
- return markup;
3138
- }
3139
-
3140
- function buildRef(link, id) {
3141
- return '[' + link.text + '][' + id + ']';
3142
- }
3143
-
3144
- function createMarkdownActions(props) {
3145
- const {
3146
- sdk,
3147
- editor,
3148
- locale
3149
- } = props; // eslint-disable-next-line -- TODO: describe this disable @typescript-eslint/ban-types
3150
-
3151
- const insertAssetsWithConfirmation = async assets => {
3152
- if (assets) {
3153
- const {
3154
- links,
3155
- fallbacks
3156
- } = await insertAssetLinks(assets, {
3157
- localeCode: locale,
3158
- defaultLocaleCode: sdk.locales.default,
3159
- fallbackCode: sdk.locales.fallbacks[locale]
3160
- });
3161
-
3162
- if (links && links.length > 0) {
3163
- if (fallbacks) {
3164
- const insertAnyway = await openConfirmInsertAsset(sdk.dialogs, {
3165
- locale: locale,
3166
- assets: fallbacks
3167
- });
3168
-
3169
- if (!insertAnyway) {
3170
- throw Error('User decided to not use fallbacks');
3171
- }
3172
- }
3173
-
3174
- return links.map(link => link.asMarkdown).join('\n\n');
3175
- }
3176
- }
3177
-
3178
- return '';
3179
- };
3180
-
3181
- return {
3182
- headings: {
3183
- h1: () => {
3184
- editor == null ? void 0 : editor.actions.h1();
3185
- },
3186
- h2: () => {
3187
- editor == null ? void 0 : editor.actions.h2();
3188
- },
3189
- h3: () => {
3190
- editor == null ? void 0 : editor.actions.h3();
3191
- }
3192
- },
3193
- simple: {
3194
- italic: () => {
3195
- editor == null ? void 0 : editor.actions.italic();
3196
- },
3197
- bold: () => {
3198
- editor == null ? void 0 : editor.actions.bold();
3199
- },
3200
- quote: () => {
3201
- editor == null ? void 0 : editor.actions.quote();
3202
- },
3203
- ol: () => {
3204
- editor == null ? void 0 : editor.actions.ol();
3205
- },
3206
- ul: () => {
3207
- editor == null ? void 0 : editor.actions.ul();
3208
- },
3209
- strike: () => {
3210
- editor == null ? void 0 : editor.actions.strike();
3211
- },
3212
- code: () => {
3213
- editor == null ? void 0 : editor.actions.code();
3214
- },
3215
- hr: () => {
3216
- editor == null ? void 0 : editor.actions.hr();
3217
- },
3218
- indent: () => {
3219
- editor == null ? void 0 : editor.actions.indent();
3220
- },
3221
- dedent: () => {
3222
- editor == null ? void 0 : editor.actions.dedent();
3223
- }
3224
- },
3225
- history: {
3226
- undo: () => {
3227
- editor == null ? void 0 : editor.actions.undo();
3228
- },
3229
- redo: () => {
3230
- editor == null ? void 0 : editor.actions.redo();
3231
- }
3232
- },
3233
- insertLink: async () => {
3234
- if (!editor) {
3235
- return;
3236
- }
3237
-
3238
- editor.usePrimarySelection();
3239
- const selectedText = editor.getSelectedText();
3240
- const result = await openInsertLinkDialog(sdk.dialogs, {
3241
- selectedText
3242
- });
3243
-
3244
- if (result) {
3245
- editor.actions.link(result.url, selectedText || result.text, result.title);
3246
- }
3247
- },
3248
- insertSpecialCharacter: async () => {
3249
- if (!editor) {
3250
- return;
3251
- }
3252
-
3253
- const result = await openInsertSpecialCharacter(sdk.dialogs);
3254
-
3255
- if (result) {
3256
- editor.insert(result);
3257
- }
3258
- },
3259
- insertTable: async () => {
3260
- if (!editor) {
3261
- return;
3262
- }
3263
-
3264
- const result = await openInsertTableDialog(sdk.dialogs);
3265
-
3266
- if (result) {
3267
- editor.actions.table(result);
3268
- }
3269
- },
3270
- organizeLinks: () => {
3271
- if (!editor) {
3272
- return;
3273
- }
3274
-
3275
- let text = editor.getContent();
3276
-
3277
- if (!text) {
3278
- return;
3279
- }
3280
-
3281
- text = convertInlineToRef(text);
3282
- text = rewriteRefs(text);
3283
- editor.setContent(text);
3284
- sdk.notifier.success('All your links are now references at the bottom of your document.');
3285
- },
3286
- embedExternalContent: async () => {
3287
- if (!editor) {
3288
- return;
3289
- }
3290
-
3291
- const result = await openEmbedExternalContentDialog(sdk.dialogs);
3292
-
3293
- if (result) {
3294
- editor.insert(result);
3295
- }
3296
- },
3297
- addNewMedia: async () => {
3298
- if (!editor) {
3299
- return;
3300
- }
3301
-
3302
- try {
3303
- const {
3304
- entity: asset
3305
- } = await sdk.navigator.openNewAsset({
3306
- slideIn: {
3307
- waitForClose: true
3308
- }
3309
- }); // eslint-disable-line -- TODO: describe this disable @typescript-eslint/no-explicit-any
3310
-
3311
- const markdownLinks = await insertAssetsWithConfirmation([asset]);
3312
- editor.insert(markdownLinks);
3313
- } finally {
3314
- editor.focus();
3315
- }
3316
- },
3317
- linkExistingMedia: async () => {
3318
- if (!editor) {
3319
- return;
3320
- }
3321
-
3322
- try {
3323
- const assets = await sdk.dialogs.selectMultipleAssets({
3324
- locale: locale
3325
- });
3326
- const markdownLinks = await insertAssetsWithConfirmation(assets);
3327
- editor.insert(markdownLinks);
3328
- } finally {
3329
- editor.focus();
3330
- }
3331
- },
3332
- openZenMode: async () => {
3333
- if (!editor) {
3334
- return;
3335
- }
3336
-
3337
- const result = await openZenMode(sdk.dialogs, {
3338
- initialValue: editor.getContent(),
3339
- locale: props.locale
3340
- });
3341
- editor.setContent(result.value);
3342
-
3343
- if (result.cursor) {
3344
- editor.setCursor(result.cursor);
3345
- }
3346
-
3347
- editor.focus();
3348
- },
3349
- closeZenMode: () => {// do nothing
3350
- // this method is overwritten in dialog app
3351
- }
3352
- };
3353
- }
3354
-
3355
- const styles$a = {
3356
- container: /*#__PURE__*/emotion.css({
3357
- display: 'flex',
3358
- flexDirection: 'column',
3359
- fontFamily: tokens.fontStackPrimary
3360
- })
3361
- };
3362
- function MarkdownEditor(props) {
3363
- const [currentValue, setCurrentValue] = React__default.useState(props.initialValue ?? '');
3364
- const [selectedTab, setSelectedTab] = React__default.useState('editor');
3365
- const [editor, setEditor] = React__default.useState(null);
3366
- const [canUploadAssets, setCanUploadAssets] = React__default.useState(false);
3367
- React__default.useEffect(() => {
3368
- if (editor && props.onReady) {
3369
- props.onReady(editor); // fix: http://codemirror.977696.n3.nabble.com/codemirror-content-not-visible-in-bootstrap-modal-td4026988.html
3370
-
3371
- setTimeout(() => {
3372
- editor.refresh();
3373
- }, 1);
3374
- } // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
3375
-
3376
- }, [editor]);
3377
- React__default.useEffect(() => {
3378
- props.sdk.access.can('create', 'Asset').then(value => {
3379
- setCanUploadAssets(value);
3380
- }); // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
3381
- }, []);
3382
- React__default.useEffect(() => {
3383
- if (editor) {
3384
- editor.setReadOnly(props.disabled);
3385
- }
3386
- }, [editor, props.disabled]);
3387
- const isActionDisabled = editor === null || props.disabled || selectedTab !== 'editor';
3388
- const direction = props.sdk.locales.direction[props.sdk.field.locale] ?? 'ltr';
3389
- const actions = React__default.useMemo(() => {
3390
- return createMarkdownActions({
3391
- sdk: props.sdk,
3392
- editor,
3393
- locale: props.sdk.field.locale
3394
- }); // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
3395
- }, [editor]);
3396
- const openMarkdownHelp = React__default.useCallback(() => {
3397
- openCheatsheetModal(props.sdk.dialogs); // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
3398
- }, []);
3399
- return React__default.createElement("div", {
3400
- className: styles$a.container,
3401
- "data-test-id": "markdown-editor"
3402
- }, React__default.createElement(MarkdownTabs, {
3403
- active: selectedTab,
3404
- onSelect: tab => {
3405
- setSelectedTab(tab);
3406
- }
3407
- }), React__default.createElement(MarkdownToolbar, {
3408
- mode: "default",
3409
- disabled: isActionDisabled,
3410
- canUploadAssets: canUploadAssets,
3411
- actions: actions
3412
- }), React__default.createElement(MarkdownTextarea, {
3413
- minHeight: props.minHeight,
3414
- mode: "default",
3415
- visible: selectedTab === 'editor',
3416
- disabled: isActionDisabled,
3417
- direction: direction,
3418
- onReady: editor => {
3419
- editor.setContent(props.initialValue ?? '');
3420
- editor.setReadOnly(props.disabled);
3421
- setEditor(editor);
3422
- editor.events.onChange(value => {
3423
- // Trim empty lines
3424
- const trimmedValue = value.replace(/^\s+$/gm, '');
3425
- props.saveValueToSDK(trimmedValue);
3426
- setCurrentValue(value);
3427
- });
3428
- }
3429
- }), selectedTab === 'preview' && React__default.createElement(MarkdownPreview, {
3430
- direction: direction,
3431
- minHeight: props.minHeight,
3432
- mode: "default",
3433
- value: currentValue,
3434
- previewComponents: props.previewComponents
3435
- }), React__default.createElement(MarkdownBottomBar, null, React__default.createElement(MarkdownHelp, {
3436
- onClick: openMarkdownHelp
3437
- })), React__default.createElement(MarkdownConstraints, {
3438
- sdk: props.sdk,
3439
- value: currentValue
3440
- }));
3441
- }
3442
- function MarkdownEditorConnected(props) {
3443
- return React__default.createElement(fieldEditorShared.FieldConnector, {
3444
- throttle: 300,
3445
- field: props.sdk.field,
3446
- isInitiallyDisabled: props.isInitiallyDisabled
3447
- }, ({
3448
- value,
3449
- disabled,
3450
- setValue,
3451
- externalReset
3452
- }) => {
3453
- // on external change reset component completely and init with initial value again
3454
- return React__default.createElement(MarkdownEditor, { ...props,
3455
- key: `markdown-editor-${externalReset}`,
3456
- initialValue: value,
3457
- disabled: disabled,
3458
- saveValueToSDK: setValue
3459
- });
3460
- });
3461
- }
3462
-
3463
- const openMarkdownDialog = (sdk, previewComponents) => options => {
3464
- var _options$parameters, _options$parameters2, _options$parameters3, _options$parameters4, _options$parameters5, _options$parameters6, _options$parameters7;
3465
-
3466
- if (((_options$parameters = options.parameters) == null ? void 0 : _options$parameters.type) === MarkdownDialogType.cheatsheet) {
3467
- return fieldEditorShared.ModalDialogLauncher.openDialog(options, () => {
3468
- return React__default.createElement(CheatsheetModalDialog, null);
3469
- });
3470
- } else if (((_options$parameters2 = options.parameters) == null ? void 0 : _options$parameters2.type) === MarkdownDialogType.insertLink) {
3471
- const selectedText = options.parameters.selectedText;
3472
- return fieldEditorShared.ModalDialogLauncher.openDialog(options, ({
3473
- onClose
3474
- }) => {
3475
- return React__default.createElement(InsertLinkModal, {
3476
- selectedText: selectedText,
3477
- onClose: onClose
3478
- });
3479
- });
3480
- } else if (((_options$parameters3 = options.parameters) == null ? void 0 : _options$parameters3.type) === MarkdownDialogType.insertSpecialCharacter) {
3481
- return fieldEditorShared.ModalDialogLauncher.openDialog(options, ({
3482
- onClose
3483
- }) => {
3484
- return React__default.createElement(SpecialCharacterModalDialog, {
3485
- onClose: onClose
3486
- });
3487
- });
3488
- } else if (((_options$parameters4 = options.parameters) == null ? void 0 : _options$parameters4.type) === MarkdownDialogType.insertTable) {
3489
- return fieldEditorShared.ModalDialogLauncher.openDialog(options, ({
3490
- onClose
3491
- }) => {
3492
- return React__default.createElement(InsertTableModal, {
3493
- onClose: onClose
3494
- });
3495
- });
3496
- } else if (((_options$parameters5 = options.parameters) == null ? void 0 : _options$parameters5.type) === MarkdownDialogType.embedExternalContent) {
3497
- return fieldEditorShared.ModalDialogLauncher.openDialog(options, ({
3498
- onClose
3499
- }) => {
3500
- return React__default.createElement(EmbedExternalContentModal, {
3501
- onClose: onClose
3502
- });
3503
- });
3504
- } else if (((_options$parameters6 = options.parameters) == null ? void 0 : _options$parameters6.type) === MarkdownDialogType.confirmInsertAsset) {
3505
- const locale = options.parameters.locale;
3506
- const assets = options.parameters.assets;
3507
- return fieldEditorShared.ModalDialogLauncher.openDialog(options, ({
3508
- onClose
3509
- }) => {
3510
- return React__default.createElement(ConfirmInsertAssetModalDialog, {
3511
- onClose: onClose,
3512
- locale: locale,
3513
- assets: assets
3514
- });
3515
- });
3516
- } else if (((_options$parameters7 = options.parameters) == null ? void 0 : _options$parameters7.type) === MarkdownDialogType.zenMode) {
3517
- const initialValue = options.parameters.initialValue;
3518
- const locale = options.parameters.locale;
3519
- return fieldEditorShared.ModalDialogLauncher.openDialog(options, ({
3520
- onClose
3521
- }) => {
3522
- return React__default.createElement(ZenModeModalDialog, {
3523
- saveValueToSDK: value => {
3524
- var _sdk$field2;
3525
-
3526
- if (value) {
3527
- var _sdk$field;
3528
-
3529
- return sdk == null ? void 0 : (_sdk$field = sdk.field) == null ? void 0 : _sdk$field.setValue(value);
3530
- }
3531
-
3532
- return sdk == null ? void 0 : (_sdk$field2 = sdk.field) == null ? void 0 : _sdk$field2.removeValue();
3533
- },
3534
- onClose: onClose,
3535
- initialValue: initialValue,
3536
- locale: locale,
3537
- sdk: sdk,
3538
- previewComponents: previewComponents
3539
- });
3540
- });
3541
- }
3542
-
3543
- return Promise.reject();
3544
- };
3545
-
3546
- const renderMarkdownDialog = sdk => {
3547
- const parameters = sdk.parameters.invocation;
3548
-
3549
- if (parameters.type === MarkdownDialogType.cheatsheet) {
3550
- sdk.window.startAutoResizer();
3551
- return React__default.createElement(CheatsheetModalDialog, null);
3552
- } else if (parameters.type === MarkdownDialogType.insertLink) {
3553
- const selectedText = parameters.selectedText;
3554
- sdk.window.startAutoResizer();
3555
- return React__default.createElement(InsertLinkModal, {
3556
- selectedText: selectedText,
3557
- onClose: sdk.close
3558
- });
3559
- } else if (parameters.type === MarkdownDialogType.insertSpecialCharacter) {
3560
- sdk.window.startAutoResizer();
3561
- return React__default.createElement(SpecialCharacterModalDialog, {
3562
- onClose: sdk.close
3563
- });
3564
- } else if (parameters.type === MarkdownDialogType.insertTable) {
3565
- sdk.window.startAutoResizer();
3566
- return React__default.createElement(InsertTableModal, {
3567
- onClose: sdk.close
3568
- });
3569
- } else if (parameters.type === MarkdownDialogType.embedExternalContent) {
3570
- sdk.window.startAutoResizer();
3571
- return React__default.createElement(EmbedExternalContentModal, {
3572
- onClose: sdk.close
3573
- });
3574
- } else if (parameters.type === MarkdownDialogType.confirmInsertAsset) {
3575
- const locale = parameters.locale;
3576
- const assets = parameters.assets;
3577
- sdk.window.startAutoResizer();
3578
- return React__default.createElement(ConfirmInsertAssetModalDialog, {
3579
- onClose: sdk.close,
3580
- locale: locale,
3581
- assets: assets
3582
- });
3583
- } else if (parameters.type === MarkdownDialogType.zenMode) {
3584
- const locale = parameters.locale;
3585
- const initialValue = parameters.initialValue; // eslint-disable-next-line -- TODO: describe this disable @typescript-eslint/no-explicit-any
3586
-
3587
- sdk.window.updateHeight('100%');
3588
- return React__default.createElement(ZenModeModalDialog, {
3589
- onClose: sdk.close,
3590
- saveValueToSDK: () => {// don't save changes in dialog mode
3591
- },
3592
- initialValue: initialValue,
3593
- locale: locale,
3594
- sdk: sdk
3595
- });
3596
- }
3597
-
3598
- return React__default.createElement("div", null);
3599
- };
3600
-
3601
- exports.MarkdownEditor = MarkdownEditorConnected;
3602
- exports.MarkdownPreview = MarkdownPreview;
3603
- exports.openMarkdownDialog = openMarkdownDialog;
3604
- exports.renderMarkdownDialog = renderMarkdownDialog;
3605
- //# sourceMappingURL=field-editor-markdown.cjs.development.js.map