oppi.li
+44
-4
tests/e2e/markdown-editor.test.e2e.ts
+44
-4
tests/e2e/markdown-editor.test.e2e.ts
···
39
39
await save_visual(page);
40
40
});
41
41
42
-
test('markdown indentation', async ({page}) => {
42
+
test('Markdown indentation', async ({page}) => {
43
43
const initText = `* first\n* second\n* third\n* last`;
44
44
45
45
const response = await page.goto('/user2/repo1/issues/new');
···
109
109
await expect(textarea).toHaveValue(initText);
110
110
});
111
111
112
-
test('markdown list continuation', async ({page}) => {
112
+
test('Markdown list continuation', async ({page}) => {
113
113
const initText = `* first\n* second`;
114
114
115
115
const response = await page.goto('/user2/repo1/issues/new');
···
202
202
}
203
203
});
204
204
205
-
test('markdown insert table', async ({page}) => {
205
+
test('Markdown insert table', async ({page}) => {
206
206
const response = await page.goto('/user2/repo1/issues/new');
207
207
expect(response?.status()).toBe(200);
208
208
···
225
225
await save_visual(page);
226
226
});
227
227
228
-
test('markdown insert link', async ({page}) => {
228
+
test('Markdown insert link', async ({page}) => {
229
229
const response = await page.goto('/user2/repo1/issues/new');
230
230
expect(response?.status()).toBe(200);
231
231
···
277
277
await textarea.press('Enter');
278
278
await expect(textarea).toHaveValue(`* first\n* 😸\n* @user2 \n* `);
279
279
});
280
+
281
+
test('Combo Markdown: preview mode switch', async ({page}) => {
282
+
// Load page with editor
283
+
const response = await page.goto('/user2/repo1/issues/new');
284
+
expect(response?.status()).toBe(200);
285
+
286
+
const toolbarItem = page.locator('md-header');
287
+
const editorPanel = page.locator('[data-tab-panel="markdown-writer"]');
288
+
const previewPanel = page.locator('[data-tab-panel="markdown-previewer"]');
289
+
290
+
// Verify correct visibility of related UI elements
291
+
await expect(toolbarItem).toBeVisible();
292
+
await expect(editorPanel).toBeVisible();
293
+
await expect(previewPanel).toBeHidden();
294
+
295
+
// Fill some content
296
+
const textarea = page.locator('textarea.markdown-text-editor');
297
+
await textarea.fill('**Content** :100: _100_');
298
+
299
+
// Switch to preview mode
300
+
await page.locator('a[data-tab-for="markdown-previewer"]').click();
301
+
302
+
// Verify that the related UI elements were switched correctly
303
+
await expect(toolbarItem).toBeHidden();
304
+
await expect(editorPanel).toBeHidden();
305
+
await expect(previewPanel).toBeVisible();
306
+
await save_visual(page);
307
+
308
+
// Verify that some content rendered
309
+
await expect(page.locator('[data-tab-panel="markdown-previewer"] .emoji[data-alias="100"]')).toBeVisible();
310
+
311
+
// Switch back to edit mode
312
+
await page.locator('a[data-tab-for="markdown-writer"]').click();
313
+
314
+
// Verify that the related UI elements were switched back correctly
315
+
await expect(toolbarItem).toBeVisible();
316
+
await expect(editorPanel).toBeVisible();
317
+
await expect(previewPanel).toBeHidden();
318
+
await save_visual(page);
319
+
});
+8
web_src/css/editor/combomarkdowneditor.css
+8
web_src/css/editor/combomarkdowneditor.css
+4
-1
web_src/js/features/comp/ComboMarkdownEditor.js
+4
-1
web_src/js/features/comp/ComboMarkdownEditor.js
···
151
151
152
152
setupTab() {
153
153
const $container = $(this.container);
154
-
const tabs = $container[0].querySelectorAll('.tabular.menu > .item');
154
+
const tabs = $container[0].querySelectorAll('.switch > .item');
155
155
156
156
// Fomantic Tab requires the "data-tab" to be globally unique.
157
157
// So here it uses our defined "data-tab-for" and "data-tab-panel" to generate the "data-tab" attribute for Fomantic.
···
159
159
const tabPreviewer = Array.from(tabs).find((tab) => tab.getAttribute('data-tab-for') === 'markdown-previewer');
160
160
tabEditor.setAttribute('data-tab', `markdown-writer-${elementIdCounter}`);
161
161
tabPreviewer.setAttribute('data-tab', `markdown-previewer-${elementIdCounter}`);
162
+
const toolbar = $container[0].querySelector('markdown-toolbar');
162
163
const panelEditor = $container[0].querySelector('.ui.tab[data-tab-panel="markdown-writer"]');
163
164
const panelPreviewer = $container[0].querySelector('.ui.tab[data-tab-panel="markdown-previewer"]');
164
165
panelEditor.setAttribute('data-tab', `markdown-writer-${elementIdCounter}`);
165
166
panelPreviewer.setAttribute('data-tab', `markdown-previewer-${elementIdCounter}`);
166
167
167
168
tabEditor.addEventListener('click', () => {
169
+
toolbar.classList.remove('markdown-toolbar-hidden');
168
170
requestAnimationFrame(() => {
169
171
this.focus();
170
172
});
···
177
179
this.previewMode = this.options.previewMode ?? 'comment';
178
180
this.previewWiki = this.options.previewWiki ?? false;
179
181
tabPreviewer.addEventListener('click', async () => {
182
+
toolbar.classList.add('markdown-toolbar-hidden');
180
183
const formData = new FormData();
181
184
formData.append('mode', this.previewMode);
182
185
formData.append('context', this.previewContext);
+1
-1
web_src/js/features/repo-legacy.js
+1
-1
web_src/js/features/repo-legacy.js
···
469
469
editContentZone.querySelector('button[data-button-name="cancel-edit"]').addEventListener('click', cancelAndReset);
470
470
editContentZone.querySelector('button[data-button-name="save-edit"]').addEventListener('click', saveAndRefresh);
471
471
} else {
472
-
const tabEditor = editContentZone.querySelector('.combo-markdown-editor').querySelector('.tabular.menu > a[data-tab-for=markdown-writer]');
472
+
const tabEditor = editContentZone.querySelector('.combo-markdown-editor').querySelector('.switch > a[data-tab-for=markdown-writer]');
473
473
tabEditor?.click();
474
474
}
475
475