@astryxdesign/core 0.7.1-canary.ff40b78 → 0.7.1

package/src/Markdown/Markdown.test.tsx

@@ -326,6 +326,44 @@ describe('Markdown', () => {
     expect(pre).toBeInTheDocument();
   });
 
+  it('renders a diff-<lang> fence as a diff over that language, and diff over plaintext', () => {
+    const {container, rerender} = render(
+      <Markdown>{'```diff-js\n-const x = 1;\n+const x = 2;\n```'}</Markdown>,
+    );
+    expect(container.querySelector('[data-diff="removed"]')).not.toBeNull();
+    expect(container.querySelector('[data-diff="added"]')).not.toBeNull();
+    // `const` keeps its js highlighting past the glyph.
+    expect(
+      container.querySelector('[data-diff="added"] .astryx-token-keyword'),
+    ).not.toBeNull();
+    rerender(<Markdown>{'```diff\n-old\n+new\n```'}</Markdown>);
+    expect(container.querySelectorAll('[data-diff]')).toHaveLength(2);
+    expect(container.querySelector('.astryx-token-keyword')).toBeNull();
+    rerender(<Markdown>{'```js\n-const x = 1;\n```'}</Markdown>);
+    expect(container.querySelector('[data-diff]')).toBeNull();
+  });
+
+  it('hands a custom code renderer the leading word as today and nothing new', () => {
+    type CodeProps = {code: string; language?: string};
+    const seen: CodeProps[] = [];
+    const Code = (props: CodeProps) => {
+      seen.push(props);
+      return <pre data-testid="custom">{props.code}</pre>;
+    };
+    render(
+      <Markdown components={{code: Code}}>
+        {
+          '```diff-tsx\n-a\n+b\n```\n\n```diff\n-a\n```\n\n```tsx\nconst x = 1;\n```'
+        }
+      </Markdown>,
+    );
+    // The leading word characters, as today: a diff-tsx fence is `diff`.
+    expect(seen.map(p => p.language)).toEqual(['diff', 'diff', 'tsx']);
+    for (const props of seen) {
+      expect(Object.keys(props).sort()).toEqual(['code', 'language']);
+    }
+  });
+
   it('renders links with correct href', () => {
     render(<Markdown>{'[click](https://example.com)'}</Markdown>);
     const link = screen.getByText('click');

package/src/Markdown/Markdown.tsx

@@ -27,6 +27,7 @@ import {
 } from '../theme/tokens.stylex';
 import type {TextDisplay} from '../theme/types';
 import {CodeBlock, Code} from '../CodeBlock';
+import {parseFenceLanguage} from '../CodeBlock/tokenizer';
 import {CheckboxList} from '../CheckboxList/CheckboxList';
 import {CheckboxListItem} from '../CheckboxList/CheckboxListItem';
 import {Blockquote} from '../Blockquote/Blockquote';
@@ -1475,7 +1476,20 @@ function renderBlock(
     case 'code': {
       // Track codeblock content in cursor for accurate character counting
       cursor.offset += node.value.length;
-      const language = getMarkdownAstLegacyCodeLanguage(node) ?? 'plaintext';
+      // `diff-<lang>` fences are the diff layer over <lang>; `diff` is the
+      // layer over plaintext. The legacy language is the info
+      // string's leading word characters, which stops at the hyphen, so the
+      // diff mapping reads the whole first word and then applies the same
+      // word rule to the language it names.
+      const legacyLanguage =
+        getMarkdownAstLegacyCodeLanguage(node) ?? 'plaintext';
+      const fence = parseFenceLanguage(node.lang ?? legacyLanguage);
+      const isDiff = fence.isDiff;
+      // The language under the diff layer; the default CodeBlock renders it.
+      const diffLanguage = isDiff
+        ? fence.language.match(/^\w*/)?.[0] || 'plaintext'
+        : undefined;
+      const language = diffLanguage ?? legacyLanguage;
       // A semantic-fence proposal claims its fence before the host's code
       // renderer (spec:AST-036 FR17). The host renderer, or the default Code
       // block without one, draws every unclaimed fence and is the fallback
@@ -1485,7 +1499,10 @@ function renderBlock(
         <CodeBlockComp
           key={index}
           code={node.value}
-          language={language}
+          // A supplied renderer's contract is unchanged: it keeps receiving
+          // the leading word characters (`diff` for a `diff-tsx` fence, as
+          // today) and nothing new; only the default path maps the layer.
+          language={legacyLanguage}
           {...lineProp}
         />
       ) : (
@@ -1504,7 +1521,12 @@ function renderBlock(
           <CodeBlock
             code={node.value}
             language={language}
+            isDiff={isDiff}
             isCollapsible
+            // Long lines wrap rather than scroll sideways, as they do in
+            // RichText, so a reader sees whole lines and the read/edit switch
+            // moves no block (spec:AST-061 FR5, DEC-9).
+            isWrapped
             xstyle={[
               contentWidthValue != null
                 ? dynamicStyles.blockWidth(contentWidthValue)

package/src/Markdown/plugins/semanticFence.test.tsx

@@ -412,9 +412,10 @@ describe('createMarkdownFenceTransform', () => {
     expect(createNode).not.toHaveBeenCalled();
     expect(document.querySelector('pre')).toHaveTextContent('plain source');
     expect(screen.getByRole('button', {name: 'Copy code'})).toBeInTheDocument();
+    // CodeBlock's named viewport; its tab stop follows overflow (none in jsdom).
     expect(screen.getByRole('group', {name: 'text'})).toHaveAttribute(
-      'tabindex',
-      '0',
+      'data-scroll-axis',
+      'both',
     );
 
     rerender(

package/src/MobileNav/MobileNav.tsx

@@ -25,6 +25,13 @@
  * closes. The native `cancel` event still handles the dismissals the browser
  * starts itself, such as the Android back gesture.
  *
+ * Focus RESTORATION is not delegated to the browser. The drawer captures the
+ * element that opened it and refocuses it once the native dialog has closed,
+ * mirroring Dialog: the implicit `<dialog>` restore has been observed dropping
+ * focus to `<body>`. The close itself is deferred past the slide-out, and the
+ * restore has to follow it. Until close() runs the rest of the document is
+ * inert and focus() on the opener is silently dropped.
+ *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/MobileNav/index.ts (exports if types change)
  * - /packages/core/src/Layer/useLayerDismissal.ts (dismissal stack)
@@ -40,6 +47,7 @@ import {
   useRef,
   useState,
   type ReactNode,
+  type RefObject,
 } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {
@@ -317,6 +325,34 @@ function resolveCloseDelay(dialog: HTMLDialogElement): number {
   return hold <= 0 ? 0 : Math.min(cap, hold * CLOSE_WITHIN_HOLD);
 }
 
+/**
+ * Close the native dialog, then return focus to the element that opened it.
+ *
+ * Browsers are supposed to restore focus themselves when a modal <dialog>
+ * closes, but that has been observed to fail (focus lands on <body>), so the
+ * drawer does it explicitly, as Dialog does. The order is load-bearing: while
+ * the modal dialog holds the top layer the rest of the document is inert and
+ * focus() on the opener is silently dropped. So the restore rides on the close
+ * itself, wherever that happens (the delayed timer, or the unmount teardown),
+ * not on the `isOpen` flip that only schedules it.
+ *
+ * Focus is left alone when there was no real opener (activeElement was <body>)
+ * or the opener has since left the DOM: focusing <body> would blur whatever a
+ * router moved focus to, and a detached node cannot take focus.
+ */
+function closeAndRestoreFocus(
+  dialog: HTMLDialogElement,
+  openerRef: RefObject<HTMLElement | null>,
+): void {
+  dialog.close();
+  const opener = openerRef.current;
+  openerRef.current = null;
+  if (!opener || opener === document.body || !opener.isConnected) {
+    return;
+  }
+  opener.focus();
+}
+
 // =============================================================================
 // Types
 // =============================================================================
@@ -449,6 +485,9 @@ export function MobileNav({
 
   const dialogRef = useRef<HTMLDialogElement>(null);
   const closeTimeoutRef = useRef<ReturnType<typeof setTimeout>>(null);
+  // Element that was focused when the drawer opened; focus goes back to it
+  // once the native dialog has closed (see closeAndRestoreFocus).
+  const triggerElementRef = useRef<HTMLElement | null>(null);
   const gutterRef = useRef<ScrollbarGutterHold | null>(null);
 
   // Gives back the gutter held open in place of the hidden scrollbar.
@@ -505,6 +544,12 @@ export function MobileNav({
       gutterRef.current ??= holdScrollbarGutter(document.documentElement);
 
       if (!dialog.open) {
+        // Capture the opener before showModal() pulls focus into the top
+        // layer. Only on the transition into open: a reopen while the delayed
+        // close is still pending finds the dialog open, and must keep the
+        // original opener rather than whatever is focused inside the drawer.
+        triggerElementRef.current =
+          document.activeElement as HTMLElement | null;
         dialog.showModal();
       }
       // Prevent background scrolling and iOS pull-to-refresh.
@@ -517,7 +562,7 @@ export function MobileNav({
       releaseGutter();
 
       closeTimeoutRef.current = setTimeout(() => {
-        dialog.close();
+        closeAndRestoreFocus(dialog, triggerElementRef);
       }, resolveCloseDelay(dialog));
     }
 
@@ -541,11 +586,14 @@ export function MobileNav({
   // This must be a separate unmount-only effect: putting it in the open/close
   // effect above would close the dialog on every isOpen flip and cut off the
   // delayed slide-out close.
+  //
+  // Inside AppShell this teardown is the only close the drawer ever gets, so
+  // it is also where focus goes back to the toggle.
   useEffect(() => {
     const dialog = dialogRef.current;
     return () => {
       if (dialog?.open) {
-        dialog.close();
+        closeAndRestoreFocus(dialog, triggerElementRef);
       }
     };
   }, []);