software-mansion · pkaramon · Apr 13, 2026 · Apr 13, 2026 · Apr 13, 2026 · Apr 14, 2026
diff --git a/.playwright/helpers/clipboard.ts b/.playwright/helpers/clipboard.ts
@@ -0,0 +1,21 @@
+import type { Locator } from '@playwright/test';
+
+export async function copySelectionFrom(locator: Locator): Promise<void> {
+  await locator.click();
+  await locator.click({ clickCount: 3 });
+  await locator.page().keyboard.press('ControlOrMeta+C');
+}
+
+export async function pasteInto(locator: Locator): Promise<void> {
+  await locator.click();
+  await locator.click({ clickCount: 3 });
+  await locator.page().keyboard.press('ControlOrMeta+V');
+}
+
+export async function copyAndPasteBetween(
+  source: Locator,
+  dest: Locator
+): Promise<void> {
+  await copySelectionFrom(source);
+  await pasteInto(dest);
+}
diff --git a/.playwright/helpers/toolbar.ts b/.playwright/helpers/toolbar.ts
@@ -0,0 +1,5 @@
+import type { Page } from '@playwright/test';
+
+export function toolbarButton(page: Page, id: string) {
+  return page.locator(`[data-testid="toolbar-button-${id}"]`);
+}
diff --git a/.playwright/helpers/visual-regression.ts b/.playwright/helpers/visual-regression.ts
@@ -0,0 +1,45 @@
+import { expect, type Locator, type Page } from '@playwright/test';
+
+export const visualRegressionSelectors = {
+  editor: '[data-testid="visual-regression-editor"]',
+  editorInner: '[data-testid="visual-regression-editor"] .eti-editor',
+  htmlInput: '[data-testid="visual-regression-html-input"]',
+  setValueButton: '[data-testid="visual-regression-set-value-button"]',
+  editorHtmlOutput: '[data-testid="visual-regression-editor-html-output"]',
+  htmlStyleOverride: '[data-testid="visual-regression-html-style-override"]',
+} as const;
+
+export function editorLocator(page: Page): Locator {
+  return page.locator(visualRegressionSelectors.editorInner);
+}
+
+export async function gotoVisualRegression(page: Page): Promise<void> {
+  await page.goto('/visual-regression');
+  await page.waitForSelector(visualRegressionSelectors.editorInner);
+}
+
+export async function getSerializedHtml(page: Page): Promise<string> {
+  return (
+    (await page
+      .locator(visualRegressionSelectors.editorHtmlOutput)
+      .textContent()) ?? ''
+  );
+}
+
+export async function setEditorHtml(page: Page, html: string): Promise<void> {
+  await page.fill(visualRegressionSelectors.htmlInput, html);
+  await page.click(visualRegressionSelectors.setValueButton);
+  await expect
+    .poll(async () => {
+      const t = await getSerializedHtml(page);
+      return t.startsWith('<html>');
+    })
+    .toBe(true);
+}
+
+export async function setHtmlStyleOverride(
+  page: Page,
+  json: string
+): Promise<void> {
+  await page.fill(visualRegressionSelectors.htmlStyleOverride, json);
+}
diff --git a/.playwright/screenshots/codeblock-inline-styles-paste-stripped.png b/.playwright/screenshots/codeblock-inline-styles-paste-stripped.png
diff --git a/.playwright/screenshots/codeblock-inline-styles-setvalue-stripped.png b/.playwright/screenshots/codeblock-inline-styles-setvalue-stripped.png
diff --git a/.playwright/screenshots/inline-styles.png b/.playwright/screenshots/inline-styles.png
diff --git a/.playwright/screenshots/paragraph-styles-visual-blockquote.png b/.playwright/screenshots/paragraph-styles-visual-blockquote.png
diff --git a/.playwright/screenshots/paragraph-styles-visual-codeblock.png b/.playwright/screenshots/paragraph-styles-visual-codeblock.png
diff --git a/.playwright/screenshots/paragraph-styles-visual-headings.png b/.playwright/screenshots/paragraph-styles-visual-headings.png
diff --git a/.playwright/screenshots/wrapped-block-keyboard-backspace-after-lift-blockquote.png b/.playwright/screenshots/wrapped-block-keyboard-backspace-after-lift-blockquote.png
diff --git a/.playwright/screenshots/wrapped-block-keyboard-backspace-after-lift-codeblock.png b/.playwright/screenshots/wrapped-block-keyboard-backspace-after-lift-codeblock.png
diff --git a/...ywright/screenshots/wrapped-block-keyboard-backspace-after-merge-blockquote.png b/...ywright/screenshots/wrapped-block-keyboard-backspace-after-merge-blockquote.png
diff --git a/.playwright/screenshots/wrapped-block-keyboard-backspace-after-merge-codeblock.png b/.playwright/screenshots/wrapped-block-keyboard-backspace-after-merge-codeblock.png
diff --git a/.playwright/screenshots/wrapped-block-keyboard-enter-blockquote.png b/.playwright/screenshots/wrapped-block-keyboard-enter-blockquote.png
diff --git a/.playwright/screenshots/wrapped-block-keyboard-enter-codeblock.png b/.playwright/screenshots/wrapped-block-keyboard-enter-codeblock.png
diff --git a/.playwright/tests/codeblockInlineStyles.spec.ts b/.playwright/tests/codeblockInlineStyles.spec.ts
@@ -0,0 +1,79 @@
+import { test, expect } from '@playwright/test';
+
+import { copyAndPasteBetween } from '../helpers/clipboard';
+import {
+  editorLocator,
+  getSerializedHtml,
+  gotoVisualRegression,
+  setEditorHtml,
+} from '../helpers/visual-regression';
+import { toolbarButton } from '../helpers/toolbar';
+
+const INLINE_MARK_TAG = /<\s*(b|i|u|s|code)\b/i;
+
+function htmlInsideCodeblock(serialized: string): string {
+  const m = serialized.match(/<codeblock[^>]*>([\s\S]*?)<\/codeblock>/i);
+  return m ? m[1] : '';
+}
+
+test.describe('codeblock inline styles', () => {
+  test.beforeEach(async ({ page }) => {
+    await gotoVisualRegression(page);
+  });
+
+  test('inline toolbar controls are disabled inside code block', async ({
+    page,
+  }) => {
+    await setEditorHtml(
+      page,
+      '<html><codeblock><p>Inside code</p></codeblock></html>'
+    );
+
+    await page.locator('.eti-editor codeblock p').click();
+
+    for (const key of [
+      'bold',
+      'italic',
+      'underline',
+      'strikeThrough',
+      'inlineCode',
+    ] as const) {
+      await expect(toolbarButton(page, key)).toBeDisabled();
+    }
+  });
+
+  test('setValue strips inline styles inside code block', async ({ page }) => {
+    await setEditorHtml(
+      page,
+      '<html><codeblock><p><b>bold</b> <i>italic</i> <u>underline</u> <s>strike</s> <code>inline</code></p></codeblock></html>'
+    );
+
+    const html = await getSerializedHtml(page);
+    expect(htmlInsideCodeblock(html)).not.toMatch(INLINE_MARK_TAG);
+
+    await expect(editorLocator(page)).toHaveScreenshot(
+      'codeblock-inline-styles-setvalue-stripped.png'
+    );
+  });
+
+  test('paste into code block strips copied inline styles', async ({
+    page,
+  }) => {
+    await setEditorHtml(
+      page,
+      '<html><p><b>pasteMe</b></p><codeblock><p>placeholder</p></codeblock></html>'
+    );
+
+    await copyAndPasteBetween(
+      page.locator('.eti-editor p').first(),
+      page.locator('.eti-editor codeblock p')
+    );
+
+    const htmlAfterPaste = await getSerializedHtml(page);
+    expect(htmlInsideCodeblock(htmlAfterPaste)).not.toMatch(INLINE_MARK_TAG);
+
+    await expect(editorLocator(page)).toHaveScreenshot(
+      'codeblock-inline-styles-paste-stripped.png'
+    );
+  });
+});
diff --git a/.playwright/tests/conflictingBlockStyles.spec.ts b/.playwright/tests/conflictingBlockStyles.spec.ts
@@ -0,0 +1,137 @@
+import { test, expect, type Page } from '@playwright/test';
+
+import { toolbarButton } from '../helpers/toolbar';
+import {
+  getSerializedHtml,
+  gotoVisualRegression,
+  setEditorHtml,
+} from '../helpers/visual-regression';
+
+function hasOpeningTag(html: string, tag: string): boolean {
+  return new RegExp(`<${tag}(?:\\s|>)`, 'i').test(html);
+}
+
+async function waitForOpeningTagInSerializedHtml(
+  page: Page,
+  tag: string
+): Promise<void> {
+  await expect
+    .poll(async () => hasOpeningTag(await getSerializedHtml(page), tag))
+    .toBe(true);
+}
+
+type ToolbarKey = 'h1' | 'h2' | 'h3' | 'blockQuote' | 'codeBlock';
+
+const CASES: readonly {
+  name: string;
+  html: string;
+  focusSelector: string;
+  click: ToolbarKey;
+  expectTag: string;
+  notTags: readonly string[];
+  expectText: string;
+}[] = [
+  {
+    name: 'h1 → blockquote',
+    html: '<html><h1>Heading</h1></html>',
+    focusSelector: '.eti-editor h1',
+    click: 'blockQuote',
+    expectTag: 'blockquote',
+    notTags: ['h1'],
+    expectText: 'Heading',
+  },
+  {
+    name: 'h1 → codeblock',
+    html: '<html><h1>Heading</h1></html>',
+    focusSelector: '.eti-editor h1',
+    click: 'codeBlock',
+    expectTag: 'codeblock',
+    notTags: ['h1'],
+    expectText: 'Heading',
+  },
+  {
+    name: 'h2 → blockquote',
+    html: '<html><h2>Heading</h2></html>',
+    focusSelector: '.eti-editor h2',
+    click: 'blockQuote',
+    expectTag: 'blockquote',
+    notTags: ['h2'],
+    expectText: 'Heading',
+  },
+  {
+    name: 'blockquote → h1',
+    html: '<html><blockquote><p>Quote</p></blockquote></html>',
+    focusSelector: '.eti-editor blockquote p',
+    click: 'h1',
+    expectTag: 'h1',
+    notTags: ['blockquote'],
+    expectText: 'Quote',
+  },
+  {
+    name: 'codeblock → blockquote',
+    html: '<html><codeblock><p>Code</p></codeblock></html>',
+    focusSelector: '.eti-editor codeblock p',
+    click: 'blockQuote',
+    expectTag: 'blockquote',
+    notTags: ['codeblock'],
+    expectText: 'Code',
+  },
+  {
+    name: 'blockquote → codeblock',
+    html: '<html><blockquote><p>Quote</p></blockquote></html>',
+    focusSelector: '.eti-editor blockquote p',
+    click: 'codeBlock',
+    expectTag: 'codeblock',
+    notTags: ['blockquote'],
+    expectText: 'Quote',
+  },
+  {
+    name: 'h1 → h2 (heading swap)',
+    html: '<html><h1>Heading</h1></html>',
+    focusSelector: '.eti-editor h1',
+    click: 'h2',
+    expectTag: 'h2',
+    notTags: ['h1'],
+    expectText: 'Heading',
+  },
+  {
+    name: 'h3 → blockquote',
+    html: '<html><h3>Heading</h3></html>',
+    focusSelector: '.eti-editor h3',
+    click: 'blockQuote',
+    expectTag: 'blockquote',
+    notTags: ['h3'],
+    expectText: 'Heading',
+  },
+];
+
+test.describe('conflicting block styles (toolbar replaces active block)', () => {
+  test.beforeEach(async ({ page }) => {
+    await gotoVisualRegression(page);
+  });
+
+  for (const {
+    name,
+    html,
+    focusSelector,
+    click: toolbarKey,
+    expectTag,
+    notTags,
+    expectText,
+  } of CASES) {
+    test(name, async ({ page }) => {
+      await setEditorHtml(page, html);
+
+      await page.locator(focusSelector).click();
+      await toolbarButton(page, toolbarKey).click();
+
+      await waitForOpeningTagInSerializedHtml(page, expectTag);
+
+      const out = await getSerializedHtml(page);
+      for (const t of notTags) {
+        expect(hasOpeningTag(out, t)).toBe(false);
+      }
+      expect(out).toContain(expectText);
+    });
+  }
+});