@dxos/react-ui-editor 0.3.11-main.5cbcf4e → 0.3.11-main.5e05862

package/src/components/Toolbar/Toolbar.tsx

@@ -22,19 +22,22 @@ import { createContext } from '@radix-ui/react-context';
 import React, { type PropsWithChildren } from 'react';
 
 import { Button, type ButtonProps, DensityProvider, Select } from '@dxos/react-ui';
-import { getSize } from '@dxos/react-ui-theme';
+import { getSize, mx } from '@dxos/react-ui-theme';
+
+import { type Formatting } from '../../extensions/markdown';
 
 // TODO(burdon): Revert to string to make extensible?
 export type ActionType =
   | 'blockquote'
-  | 'bold'
+  | 'strong'
   | 'codeblock'
   | 'comment'
   | 'heading'
   | 'image'
-  | 'italic'
+  | 'emphasis'
+  | 'code'
   | 'link'
-  | 'list'
+  | 'list-bullet'
   | 'list-ordered'
   | 'list-tasks'
   | 'mention'
@@ -48,14 +51,15 @@ export type Action = {
 };
 
 export type ToolbarProps = PropsWithChildren<{
+  state: Formatting | null;
   onAction?: (action: Action) => void;
 }>;
 
 const [ToolbarContextProvider, useToolbarContext] = createContext<ToolbarProps>('Toolbar');
 
-const ToolbarRoot = ({ children, onAction }: ToolbarProps) => {
+const ToolbarRoot = ({ children, onAction, state }: ToolbarProps) => {
   return (
-    <ToolbarContextProvider onAction={onAction}>
+    <ToolbarContextProvider onAction={onAction} state={state}>
       <DensityProvider density='fine'>
         <div role='toolbar' className='flex w-full shrink-0 p-2 gap-4 items-center whitespace-nowrap overflow-hidden'>
           {children}
@@ -67,20 +71,31 @@ const ToolbarRoot = ({ children, onAction }: ToolbarProps) => {
 
 type ToolbarButtonProps = {
   Icon: Icon;
-  onClick: () => Action | undefined;
+  onClick: (state: Formatting | null) => Action | undefined;
+  getState?: (state: Formatting) => boolean;
+  disable?: (state: Formatting) => boolean;
 } & NonNullable<Pick<ButtonProps, 'title'>>;
 
-const ToolbarButton = ({ Icon, onClick, title }: ToolbarButtonProps) => {
-  const { onAction } = useToolbarContext('ToolbarButton');
-  const handleClick = () => {
-    const action = onClick();
+const ToolbarButton = ({ Icon, onClick, title, getState, disable }: ToolbarButtonProps) => {
+  const { onAction, state } = useToolbarContext('ToolbarButton');
+  const handleClick = (event: React.MouseEvent) => {
+    const action = onClick(state);
     if (action) {
       onAction?.(action);
+      event.preventDefault();
     }
   };
+  const active = getState && state ? getState(state) : false;
+  const disabled = disable && state ? disable(state) : false;
 
   return (
-    <Button variant='ghost' classNames='p-2' onClick={handleClick} title={title}>
+    <Button
+      variant='ghost'
+      classNames={mx('p-2', active && 'ring')}
+      onMouseDown={handleClick}
+      title={title}
+      disabled={disabled}
+    >
       <Icon className={getSize(5)} />
     </Button>
   );
@@ -89,9 +104,16 @@ const ToolbarButton = ({ Icon, onClick, title }: ToolbarButtonProps) => {
 const ToolbarSeparator = () => <div className='grow' />;
 
 const MarkdownHeading = () => {
-  const { onAction } = useToolbarContext('MarkdownFormatting');
+  const { onAction, state } = useToolbarContext('MarkdownFormatting');
+  const blockType = state ? state.blockType : 'paragraph';
+  const header = blockType && /heading(\d)/.exec(blockType);
+  const value = header ? header[1] : blockType === 'paragraph' || !blockType ? '0' : null;
   return (
-    <Select.Root defaultValue='0' onValueChange={(value) => onAction?.({ type: 'heading', data: parseInt(value) })}>
+    <Select.Root
+      disabled={value === null}
+      value={value ?? '0'}
+      onValueChange={(value) => onAction?.({ type: 'heading', data: parseInt(value) })}
+    >
       <Select.TriggerButton classNames='w-[8rem]' />
       <Select.Portal>
         <Select.Content>
@@ -111,31 +133,86 @@ const MarkdownHeading = () => {
 
 const MarkdownStyles = () => (
   <div role='none'>
-    <ToolbarButton Icon={TextB} title='Bold' onClick={() => ({ type: 'bold' })} />
-    <ToolbarButton Icon={TextItalic} title='Italic' onClick={() => ({ type: 'italic' })} />
-    <ToolbarButton Icon={TextStrikethrough} title='Strike-through' onClick={() => ({ type: 'strikethrough' })} />
+    <ToolbarButton
+      Icon={TextB}
+      title='String'
+      onClick={(s) => ({ type: 'strong', data: s ? !s.strong : null })}
+      getState={(s) => s.strong}
+      disable={(s) => s.blockType === 'codeblock'}
+    />
+    <ToolbarButton
+      Icon={TextItalic}
+      title='Emphasis'
+      onClick={(s) => ({ type: 'emphasis', data: s ? !s.emphasis : null })}
+      getState={(s) => s.emphasis}
+      disable={(s) => s.blockType === 'codeblock'}
+    />
+    <ToolbarButton
+      Icon={TextStrikethrough}
+      title='Strike-through'
+      onClick={(s) => ({ type: 'strikethrough', data: s ? !s.strikethrough : null })}
+      getState={(s) => s.strikethrough}
+      disable={(s) => s.blockType === 'codeblock'}
+    />
+    <ToolbarButton
+      Icon={Code}
+      title='Inline code'
+      onClick={(s) => ({ type: 'code', data: s ? !s.code : null })}
+      getState={(s) => s.code}
+      disable={(s) => s.blockType === 'codeblock'}
+    />
   </div>
 );
 
 const MarkdownLists = () => (
   <div role='none'>
-    <ToolbarButton Icon={ListBullets} title='Bullet list' onClick={() => ({ type: 'list' })} />
-    <ToolbarButton Icon={ListNumbers} title='Numbered list' onClick={() => ({ type: 'list-ordered' })} />
-    <ToolbarButton Icon={ListChecks} title='Task list' onClick={() => ({ type: 'list-tasks' })} />
+    <ToolbarButton
+      Icon={ListBullets}
+      title='Bullet list'
+      onClick={(s) => ({ type: 'list-bullet', data: s ? s.listStyle !== 'bullet' : null })}
+      getState={(s) => s.listStyle === 'bullet'}
+    />
+    <ToolbarButton
+      Icon={ListNumbers}
+      title='Numbered list'
+      onClick={(s) => ({ type: 'list-ordered', data: s ? s.listStyle !== 'ordered' : null })}
+      getState={(s) => s.listStyle === 'ordered'}
+    />
+    <ToolbarButton
+      Icon={ListChecks}
+      title='Task list'
+      onClick={(s) => ({ type: 'list-tasks', data: s ? s.listStyle !== 'task' : null })}
+      getState={(s) => s.listStyle === 'task'}
+    />
   </div>
 );
 
 const MarkdownBlocks = () => (
   <div role='none'>
-    <ToolbarButton Icon={CaretRight} title='Block quite' onClick={() => ({ type: 'blockquote' })} />
-    <ToolbarButton Icon={Code} title='Code block' onClick={() => ({ type: 'codeblock' })} />
+    <ToolbarButton
+      Icon={CaretRight}
+      title='Block quote'
+      onClick={(s) => ({ type: 'blockquote', data: s ? !s.blockquote : null })}
+      getState={(s) => s.blockquote}
+    />
+    <ToolbarButton
+      Icon={Code}
+      title='Code block'
+      onClick={(s) => ({ type: 'codeblock', data: s ? s.blockType !== 'codeblock' : null })}
+      getState={(s) => s.blockType === 'codeblock'}
+    />
     <ToolbarButton Icon={Table} title='Table' onClick={() => ({ type: 'table' })} />
   </div>
 );
 
 const MarkdownLinks = () => (
   <div role='none'>
-    <ToolbarButton Icon={Link} title='Link' onClick={() => ({ type: 'link' })} />
+    <ToolbarButton
+      Icon={Link}
+      title='Link'
+      onClick={(s) => ({ type: 'link', data: s ? !s.link : null })}
+      getState={(s) => s.link}
+    />
     <ToolbarButton Icon={At} title='Mention' onClick={() => ({ type: 'mention' })} />
     <ToolbarButton Icon={Image} title='Image' onClick={() => ({ type: 'image' })} />
   </div>

package/src/extensions/markdown/formatting.test.ts

@@ -0,0 +1,481 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { markdownLanguage } from '@codemirror/lang-markdown';
+import { EditorState, type StateCommand } from '@codemirror/state';
+import { expect } from 'chai';
+
+import { describe, test } from '@dxos/test';
+
+import {
+  setHeading,
+  addStyle,
+  removeStyle,
+  addLink,
+  removeLink,
+  addList,
+  removeList,
+  addBlockquote,
+  removeBlockquote,
+  addCodeblock,
+  removeCodeblock,
+  Inline,
+  List,
+  getFormatting,
+  type Formatting,
+} from './formatting';
+
+export const emptyFormatting: Formatting = {
+  blockType: 'paragraph',
+  strong: false,
+  emphasis: false,
+  strikethrough: false,
+  code: false,
+  link: false,
+  listStyle: null,
+  blockquote: false,
+};
+
+const createState = (doc: string) => {
+  const selStart = doc.indexOf('{');
+  const selEnd = doc.indexOf('}') - 1;
+  return EditorState.create({
+    doc: doc.replace(/[{}]/g, ''),
+    selection: { anchor: selStart, head: selEnd },
+    extensions: markdownLanguage,
+  });
+};
+
+const testCommand = (name: string, doc: string, command: StateCommand, result: string | null) => {
+  test(name, () => {
+    let state = createState(doc);
+    const status = command({ state, dispatch: (tr) => (state = tr.state) });
+    if (!status || result === null) {
+      expect(status).to.equal(result !== null);
+    } else {
+      let resultSel = null;
+      if (result.includes('{')) {
+        const resultState = createState(result);
+        result = resultState.doc.toString();
+        resultSel = resultState.selection.main;
+      }
+      expect(state.doc.toString()).to.equal(result);
+      if (resultSel) {
+        expect([state.selection.main.from, state.selection.main.to]).to.deep.equal([resultSel.from, resultSel.to]);
+      }
+    }
+  });
+};
+
+describe('setHeading', () => {
+  testCommand('can create a heading', 'Hello {}', setHeading(1), '# Hello ');
+
+  testCommand('can create a level 2 heading', 'One\n\nTw{o}', setHeading(2), 'One\n\n## Two');
+
+  testCommand('can increase the depth of a heading', '# One{}', setHeading(3), '### One');
+
+  testCommand('can decrease the depth of a heading', '## One{}', setHeading(1), '# One');
+
+  testCommand('can remove a heading', '### A{}', setHeading(0), 'A');
+
+  testCommand(
+    'can make multiple blocks a heading',
+    '{One\n\nTwo}\n\nThree',
+    setHeading(3),
+    '### One\n\n### Two\n\nThree',
+  );
+
+  testCommand(
+    "doesn't affect code blocks",
+    '{One\n\n```\nTwo\n```\nThree}',
+    setHeading(1),
+    '# One\n\n```\nTwo\n```\n# Three',
+  );
+
+  testCommand('can remove a setext heading', 'One{}\n===', setHeading(0), 'One');
+
+  testCommand('can change a setext heading to ATX', 'One{}\n---', setHeading(1), '# One');
+
+  testCommand('can add a heading inside block markup', '> - {one\n> - two}\n', setHeading(1), '> - # one\n> - # two\n');
+
+  testCommand('can remove a heading inside block markup', '1. # one{}', setHeading(0), '1. one');
+});
+
+describe('addStyle', () => {
+  const em = addStyle(Inline.Emphasis);
+  const str = addStyle(Inline.Strong);
+  const code = addStyle(Inline.Code);
+
+  testCommand('can add emphasis', 'one {two}', em, 'one *{two}*');
+
+  testCommand('can add emphasis around cursor', 'one {}', em, 'one *{}*');
+
+  testCommand('can add strong style', '{one\n\ntwo}', str, '**{one**\n\n**two}**');
+
+  testCommand('can add strikethrough', '{hey}', addStyle(Inline.Strikethrough), '~~{hey}~~');
+
+  testCommand('can add code style', 'a {variable}', code, 'a `{variable}`');
+
+  testCommand('clears styles inside added code', '{some **bold** text}', code, '`some bold text`');
+
+  testCommand(
+    'clears styles partially inside added code',
+    '**some {bold** and *emphasized} text*',
+    code,
+    '**some** `bold and emphasized` *text*',
+  );
+
+  testCommand(
+    'inserts markers at same position in the right order',
+    '{some **bold,}text**',
+    code,
+    '`some bold,`**text**',
+  );
+
+  testCommand('remove existing markers inside', '{one *two* three}', em, '*{one two three}*');
+
+  testCommand(
+    'removes existing markers overlapping boundaries',
+    '*one {two* *three} four*',
+    em,
+    '*one {two three} four*',
+  );
+
+  testCommand(
+    'can style headers',
+    '{one\n\n# two\n\nthree\n---\n\nfour} five',
+    str,
+    '**{one**\n\n# **two**\n\n**three**\n---\n\n**four}** five',
+  );
+
+  testCommand('moves the insert position out of markup', 'one ~{~two~}~ three', em, 'one ~~*two*~~ three');
+
+  testCommand(
+    'moves the range to cover partially covered links and images',
+    '[one {two](x) ![three} four](y) five',
+    em,
+    '*[one {two](x) ![three} four](y)* five',
+  );
+});
+
+describe('removeStyle', () => {
+  const em = removeStyle(Inline.Emphasis);
+  const str = removeStyle(Inline.Strong);
+  const code = removeStyle(Inline.Code);
+  const strike = removeStyle(Inline.Strikethrough);
+
+  testCommand('can remove emphasis', 'one *{two}*', em, 'one {two}');
+
+  testCommand('can remove emphasis around cursor', 'one *{}*', em, 'one {}');
+
+  testCommand('can remove strong style', '{**one**\n\n**two**}', str, '{one\n\ntwo}');
+
+  testCommand('can remove strikethrough', '~~{hey}~~', strike, '{hey}');
+
+  testCommand('can remove strikethrough around cursor', 'one ~~{}~~', strike, 'one {}');
+
+  testCommand('can remove strikethrough around cursor with inner emphasis', 'one ~~*{}*~~', strike, 'one *{}*');
+
+  testCommand('can remove code style', 'a `{variable}`', code, 'a {variable}');
+
+  testCommand(
+    'can remove emphasis across multiple blocks',
+    '{*one*\n\n# *two*\n\n> 1. *three} four*\n',
+    em,
+    '{one\n\n# two\n\n> 1. three} *four*\n',
+  );
+
+  testCommand('can shrink existing styles', '*one {two three} four*', em, '*one* {two three} *four*');
+});
+
+describe('addLink', () => {
+  testCommand('adds a link', '{}', addLink, '[]({})');
+
+  testCommand('adds a link around text', 'hello {world}', addLink, 'hello [world]({})');
+
+  testCommand('clears existing links', '[hello {world}](foo)', addLink, 'hello [world]({})');
+
+  testCommand('does nothing across blocks', '{one\n\ntwo}', addLink, null);
+
+  testCommand('does nothing in code blocks', '```\n{one}\n```', addLink, null);
+
+  testCommand('patches up overlapping styles before', '*foo {bar* baz}', addLink, '*foo* [*bar* baz]({})');
+
+  testCommand(
+    'patches up overlapping styles after',
+    'one {two ~~three} four~~',
+    addLink,
+    'one [two ~~three~~]({}) ~~four~~',
+  );
+});
+
+describe('removeLink', () => {
+  testCommand('removes a link', '[hi{}](x)', removeLink, 'hi{}');
+
+  testCommand('removes multiple links', '{[hi](x)\n\none [two](y)}', removeLink, '{hi\n\none two}');
+
+  testCommand('removes label links', '[hi{}][hi]', removeLink, 'hi{}');
+
+  testCommand('removes titles in links', '[hi{}](a "title" )', removeLink, 'hi{}');
+});
+
+describe('addList', () => {
+  const bullet = addList(List.Bullet);
+  const ordered = addList(List.Ordered);
+
+  testCommand('can add a bullet list', 'Hi{}', bullet, '- Hi');
+
+  testCommand('can add an ordered list', 'Hi{}', ordered, '1. Hi');
+
+  testCommand('can add a task list', 'Hi{}', addList(List.Task), '- [ ] Hi');
+
+  testCommand(
+    'can wrap multiple blocks in a bullet list',
+    '{One\n\n# Two\n\nThree}',
+    bullet,
+    '- One\n\n- # Two\n\n- Three',
+  );
+
+  testCommand('continues an existing numbered list', '1. Hello\n\nHi{}', ordered, '1. Hello\n\n2. Hi');
+
+  testCommand(
+    'can wrap multi-line blocks',
+    'Hello this\nis a three-line\nparagraph.{}',
+    bullet,
+    '- Hello this\n  is a three-line\n  paragraph.',
+  );
+
+  testCommand(
+    'can wrap fenced code blocks',
+    '```javascript\ntrue{}\n```',
+    ordered,
+    '1. ```javascript\n   true\n   ```',
+  );
+
+  testCommand(
+    'can wrap blocks inside markup',
+    '> 1. Hello\n     {World\n>\n> Again}',
+    bullet,
+    '> 1. - Hello\n       World\n>\n> - Again',
+  );
+
+  testCommand('restarts numbering on outer block markup boundaries', '> {one\n\ntwo}', ordered, '> 1. one\n\n1. two');
+
+  testCommand('aligns with above bullet list', '  - one\n\ntwo{}', bullet, '  - one\n\n  - two');
+
+  testCommand('aligns with above ordered list', '  1. One\n\nTwo{}', ordered, '  1. One\n\n  2. Two');
+
+  testCommand('compensates for number size when aligning', '  9. One\n\nTwo{}', ordered, '  9. One\n\n 10. Two');
+
+  testCommand(
+    'anticipates number size of other items',
+    '{a\n\nb\n\nc\n\nd\n\ne\n\nf\n\ng\n\nh\n\ni\n\nj}',
+    ordered,
+    ' 1. a\n\n 2. b\n\n 3. c\n\n 4. d\n\n 5. e\n\n 6. f\n\n 7. g\n\n 8. h\n\n 9. i\n\n10. j',
+  );
+
+  testCommand(
+    'renumbers lists after the selection',
+    'one{}\n\n1. two\n\n2. three',
+    ordered,
+    '1. one\n\n2. two\n\n3. three',
+  );
+
+  testCommand("doesn't renumber lists with a different parent", '> one{}\n\n1. two', ordered, '> 1. one\n\n1. two');
+});
+
+describe('removeList', () => {
+  const bullet = removeList(List.Bullet);
+  const ordered = removeList(List.Ordered);
+
+  testCommand('can remove a bullet list', ' - Hi{}', bullet, 'Hi');
+
+  testCommand('can remove an ordered list', '1. Hi{}', ordered, 'Hi');
+
+  testCommand('can remove a task list', '- [x] Hi{}', removeList(List.Task), 'Hi');
+
+  testCommand(
+    'can remove a bullet list from multiple blocks',
+    '- {One\n\n- # Two\n\n- Three}',
+    bullet,
+    'One\n\n# Two\n\nThree',
+  );
+
+  testCommand(
+    'can unwrap multi-line blocks',
+    '1. Hello this\n   is a three-line\nparagraph.{}',
+    ordered,
+    'Hello this\nis a three-line\nparagraph.',
+  );
+
+  testCommand('can unwrap fenced code blocks', '- ```javascript\n  true{}\n  ```', bullet, '```javascript\ntrue\n```');
+
+  testCommand(
+    'can unwrap blocks inside markup',
+    '> 1. - Hello\n       {World\n>\n> - Again}',
+    bullet,
+    '> 1. Hello\n     World\n>\n> Again',
+  );
+
+  testCommand("doesn't unwrap other types of lists", '1. foo{}', bullet, null);
+
+  testCommand(
+    'renumbers lists after the selection',
+    '1. one\n\n2. {two\n\n3. three}\n\n4. four\n\n5. five',
+    ordered,
+    '1. one\n\ntwo\n\nthree\n\n1. four\n\n2. five',
+  );
+});
+
+describe('addBlockquote', () => {
+  testCommand('can add a blockquote', 'Hi{}', addBlockquote, '> Hi');
+
+  testCommand(
+    'can add a blockquote to multi-line paragraph',
+    'One\ntwo\nthree{}',
+    addBlockquote,
+    '> One\n> two\n> three',
+  );
+
+  testCommand(
+    'can add a blockquote to multiple blocks',
+    '{one\ntwo\n\n# three\n}\nfour',
+    addBlockquote,
+    '> one\n> two\n>\n> # three\n\nfour',
+  );
+});
+
+describe('removeBlockquote', () => {
+  testCommand('can remove a blockquote', '> Hi{}', removeBlockquote, 'Hi');
+
+  testCommand('can remove a blockquote from a multi-line paragraph', '> A\n> B\n> C{}', removeBlockquote, 'A\nB\nC');
+
+  testCommand('can remove a nested blockquote', '>> A\n>> B\n>> C{}', removeBlockquote, '> A\n> B\n> C');
+
+  testCommand(
+    'removes markers from adjacent blank lines',
+    '> one\n>\n> two{}\n>\n> three',
+    removeBlockquote,
+    '> one\n\ntwo\n\n> three',
+  );
+
+  testCommand(
+    'can remove quotes nested in lists',
+    ' - 1. > foo\n      > {bar\n - > baz}',
+    removeBlockquote,
+    ' - 1. foo\n      bar\n - baz',
+  );
+});
+
+describe('addCodeblock', () => {
+  testCommand('add a code block to a blank line', '{}', addCodeblock, '```{lang}\n\n```');
+
+  testCommand(
+    'can turn a paragraph into a code block',
+    'one\ntwo{}\nthree',
+    addCodeblock,
+    '```\none\ntwo{}\nthree\n```',
+  );
+
+  testCommand(
+    'can turn an indented paragraph into a code block',
+    '1. one\n   two{}',
+    addCodeblock,
+    '1. ```\n   one\n   two{}\n   ```',
+  );
+
+  testCommand(
+    'can turn multiple paragraphs into a code block',
+    "{10 print 'hello'\n\n20 goto 10}",
+    addCodeblock,
+    "```\n10 print 'hello'\n\n20 goto 10\n```",
+  );
+});
+
+describe('removeCodeblock', () => {
+  testCommand('removes fenced code blocks', '```\ncode{}\n```', removeCodeblock, 'code{}');
+
+  testCommand('removes indented code blocks', '    code{}', removeCodeblock, 'code{}');
+
+  testCommand('does nothing on regular text', 'not code{}', removeCodeblock, null);
+
+  testCommand('can remove multiple code block', '{```\none\n```\n\n    two}', removeCodeblock, 'one\n\ntwo');
+
+  testCommand(
+    'can remove code in other block markup',
+    '> 1. ```\n>    {one\n>    ```\n>\n> 2.     two}',
+    removeCodeblock,
+    '> 1. one\n>\n> 2. two',
+  );
+});
+
+describe('getFormatting', () => {
+  const t = (name: string, doc: string, result: Partial<Formatting>) => {
+    test(name, () => {
+      const formatting = getFormatting(createState(doc));
+      const expected = Object.assign({}, emptyFormatting, result);
+      expect(formatting).to.deep.equal(expected);
+    });
+  };
+
+  t('returns nothing special for regular content', 'hello {world}', {});
+
+  t('can see emphasis', 'hello *{world}*', { emphasis: true });
+
+  t('can see strong emphasis', 'hello **{world}**', { strong: true });
+
+  t('can see strikethrough', 'hello ~~{world}~~', { strikethrough: true });
+
+  t('can see inline code', 'hello `{world}`', { code: true });
+
+  t("doesn't enable inline styles when only part of selection is styled", 'he{llo **wor}ld**', {});
+
+  t('can handle adjacent styled spans', '**he{llo**\n**wor}ld**', { strong: true });
+
+  t('ignores markers for inline style purposes', '{***o***}', { strong: true, emphasis: true });
+
+  t('handles multi-paragraph inline styles', '~~*fo{o*~~\n\n~~ba}r~~', { strikethrough: true });
+
+  t('activates for cursor selections', '~~*fo{}o*~~', { strikethrough: true, emphasis: true });
+
+  t('spots a heading', '# Hello{}', { blockType: 'heading1' });
+
+  t('spots a heading', '# Hello{}', { blockType: 'heading1' });
+
+  t('spots a setext heading', 'Hello{}\n---', { blockType: 'heading2' });
+
+  t('spots a code block', '    {code}', { blockType: 'codeblock' });
+
+  t('spots a fenced code block', '```\n{code}\n```', { blockType: 'codeblock' });
+
+  t('reports null for mixed block types', '# on{e\n\ntwo}', { blockType: null });
+
+  t('reports heading for multiple selected headings', '# on{e\n\n# two}', { blockType: 'heading1' });
+
+  t('notices blockquotes', '> {one}', { blockquote: true });
+
+  t('notices multi-block blockquotes', '> {one\n>\n> two}', { blockquote: true });
+
+  t('disables blockquote when not all blocks are quoted', '{one\n\n> two}', {});
+
+  t('notices ordered lists', ' 1. Hi{}', { listStyle: 'ordered' });
+
+  t('notices bullet lists', ' - Hi{}', { listStyle: 'bullet' });
+
+  t('notices task lists', ' - [x] {Hi}', { listStyle: 'task' });
+
+  t('uses the innermost list style', ' - 1. Ok{}', { listStyle: 'ordered' });
+
+  t('notices multi-block lists', '1. {one\n2. two}', { listStyle: 'ordered' });
+
+  t("disables list style when a block isn't a list", '1. {one\n\ntwo}', {});
+
+  t('sees markup directly around cursor even if not valid', 'q **{}**', { strong: true });
+
+  t('sees multiple types of markup directly around cursor', 'q ~~***{}***~~', {
+    strong: true,
+    emphasis: true,
+    strikethrough: true,
+  });
+});