devtools-mcp-seminar/.claude/skills/ms-teams-multiline-typing/SKILL.md

name, description

name	description
ms-teams-multiline-typing	Use when typing a multiline message into the MS Teams chat compose box via Chrome DevTools MCP. Covers the Shift+Enter newline pattern and why literal \n fails. Use ONLY when the user asks to type or compose a multi-paragraph message in MS Teams.

MS Teams multiline typing

How to insert line breaks when composing a message in Microsoft Teams via Chrome DevTools MCP. Verified empirically against the live Teams web app.

The input element

• <div role="textbox" contenteditable="true"> — a CKEditor instance wrapped in FluentUI. State lives in CKEditor's model, not the DOM.
• Exposed in the a11y snapshot as textbox "Type a message" multiline.

Plain text (single line)

chrome-devtools_type_text  text: "Hello"

Works as expected — text is inserted into the current <p>.

Multiline text — REQUIRED pattern

CKEditor rejects raw \n characters. A single type_text call with an embedded newline silently drops the entire input (not just the newline); the editor stays empty. Confirmed empirically:

Input method	Result
type_text "A\nB\nC"	editor empty, nothing inserted
type_text "A" then Shift+Enter then type_text "B"	two <p> blocks inserted

Therefore multiline messages MUST be built by alternating type_text and Shift+Enter:

chrome-devtools_type_text  text: "Line 1"
chrome-devtools_press_key  key: "Shift+Enter"
chrome-devtools_type_text  text: "Line 2"
chrome-devtools_press_key  key: "Shift+Enter"
chrome-devtools_type_text  text: "Line 3"

Each Shift+Enter dispatches a real KeyboardEvent('keydown', {key: 'Enter', shiftKey: true}), which CKEditor's keydown handler intercepts to execute enterShift and insert a new <p> into the model.

Why \n fails (mechanism)

CKEditor routes text insertion through its model via beforeinput/input events. A raw \n does not map to any inputType (insertParagraph and insertLineBreak are the valid ones, both triggered by keystrokes, not by literal newline chars). When the handler can't route the input, the entire insert is rejected — not partially applied.

Verifying the draft

() => {
  const e = document.querySelector('[role="textbox"]');
  return { innerText: e.innerText, pCount: e.querySelectorAll('p').length };
}

Do NOT

• Do not use chrome-devtools_fill with \n on the Teams editor — it fails silently for the same reason as type_text with \n.
• Do not mutate innerHTML directly — Teams enforces TrustedHTML policy and the assignment throws.

Generalizing to other chat apps

Same type_text + Shift+Enter pattern works for Slack, WhatsApp Web, and Gosuslugi chat. Always probe the element type first: a true <textarea> accepts \n in fill directly; a contenteditable requires the keystroke approach.