[lexical] Feature: Add touch swipe indentation for list items by abhishekvishwakarma007 · Pull Request #8478 · facebook/lexical

abhishekvishwakarma007 · 2026-05-07T20:10:19Z

Description

Adds touch swipe indentation for list items on mobile devices — swipe right to indent, swipe left to outdent (similar to Apple Notes). Only triggers on bullet and numbered list items, not on paragraphs or other blocks.

Changes

TouchIndentationExtension — New extension in @lexical/extension with registerTouchIndentation() that registers touchstart/touchmove/touchend listeners and dispatches existing INDENT_CONTENT_COMMAND / OUTDENT_CONTENT_COMMAND
Playground — Extension added via App.tsx for demo/testing
Flow types — Added TouchIndentationConfig and TouchIndentationExtension declarations

Configuration

// Default: enabled with 50px swipe threshold
TouchIndentationExtension

// Custom swipe threshold
configExtension(TouchIndentationExtension, { swipeThreshold: 80 })

// Disable
configExtension(TouchIndentationExtension, { disabled: true })

Design decisions

Extension-only — No legacy React plugin; uses the extension API directly
List-only — Checks $isSelectionInListItem() at touchstart; swipe over non-list content does not block scrolling
Multi-touch guard — Ignores pinch-to-zoom (2+ finger gestures)
Read-only guard — Skips gestures when editor.isEditable() is false
Passive touchstart — Uses passive: true since it never calls preventDefault(), preserving scroll performance
Vertical guard — Requires |deltaY| < 30px to avoid triggering during vertical scroll
Signal-based threshold — Uses Signal<number> with .peek() for reactive swipe threshold

Closes #8268

Test plan

Before

TouchindentBefore.mov

Swiping on list items has no effect

After

TouchindentAfter.mov

Swiping right indents, swiping left outdents the list item

…ok#8268) Adds the ability to indent/outdent list items by swiping left or right on touch devices, similar to Apple Notes. The feature only triggers on bullet and numbered list items, not on paragraphs or other blocks. Includes a new TouchIndentationExtension and a React plugin wrapper (TouchIndentationPlugin). The swipe threshold is configurable and the feature can be disabled via config.

- Move list item check to touchstart to prevent blocking scroll on non-list content - Set touchstart listener to passive:true since it never calls preventDefault() - Add multi-touch guard to avoid triggering on pinch-to-zoom gestures - Add editor.isEditable() check to skip gestures in read-only mode - Complete Flow type declarations for LexicalTouchIndentationPlugin

vercel · 2026-05-07T20:10:25Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
lexical	Ready	Preview, Comment	May 14, 2026 2:20pm
lexical-playground	Ready	Preview, Comment	May 14, 2026 2:20pm

etrepum · 2026-05-07T20:31:03Z

Let’s get rid of the plugin, no reason to add new legacy code.

etrepum · 2026-05-08T00:42:30Z

  TabIndentationExtension,
 } from './TabIndentationExtension';
+export {
+  registerTouchIndentation,


Suggested change

registerTouchIndentation,

The only extensions that export their internals are doing so to support legacy plugins. No reason to do that here.

etrepum · 2026-05-08T00:42:45Z

+  return listItem != null;
+}
+
+export function registerTouchIndentation(


Suggested change

export function registerTouchIndentation(

function registerTouchIndentation(

etrepum · 2026-05-08T00:43:35Z

+
+export function registerTouchIndentation(
+  editor: LexicalEditor,
+  swipeThreshold: number = DEFAULT_SWIPE_THRESHOLD,


This can use a signal and doesn't need to support defaults for legacy code

Suggested change

swipeThreshold: number = DEFAULT_SWIPE_THRESHOLD,

swipeThreshold: Signal<number>,

etrepum · 2026-05-08T00:44:11Z

+          const deltaX = touch.clientX - startX;
+          const deltaY = touch.clientY - startY;
+          if (
+            Math.abs(deltaX) > swipeThreshold &&


Suggested change

Math.abs(deltaX) > swipeThreshold &&

Math.abs(deltaX) > swipeThreshold.peek() &&

etrepum · 2026-05-08T00:44:24Z

+          const deltaX = touch.clientX - startX;
+          const deltaY = touch.clientY - startY;
+          if (
+            Math.abs(deltaX) > swipeThreshold &&


Suggested change

Math.abs(deltaX) > swipeThreshold &&

Math.abs(deltaX) > swipeThreshold.peek() &&

etrepum · 2026-05-08T00:47:51Z

        "types": "./LexicalTablePlugin.d.ts",
        "development": "./LexicalTablePlugin.dev.js",
        "production": "./LexicalTablePlugin.prod.js",
        "default": "./LexicalTablePlugin.js"


this file doesn't need to change

etrepum · 2026-05-08T00:47:59Z

 module.name_mapper='^@lexical/react/LexicalPlainTextPlugin$' -> '<PROJECT_ROOT>/packages/lexical-react/flow/LexicalPlainTextPlugin.js.flow'
 module.name_mapper='^@lexical/react/LexicalRichTextPlugin$' -> '<PROJECT_ROOT>/packages/lexical-react/flow/LexicalRichTextPlugin.js.flow'
 module.name_mapper='^@lexical/react/LexicalSelectionAlwaysOnDisplay$' -> '<PROJECT_ROOT>/packages/lexical-react/flow/LexicalSelectionAlwaysOnDisplay.js.flow'
 module.name_mapper='^@lexical/react/LexicalTabIndentationPlugin$' -> '<PROJECT_ROOT>/packages/lexical-react/flow/LexicalTabIndentationPlugin.js.flow'


also doesn't need to change

etrepum · 2026-05-08T00:48:27Z

      "@lexical/react/LexicalTablePlugin": [
        "./packages/lexical-react/src/LexicalTablePlugin.ts"
      ],
+      "@lexical/react/LexicalTouchIndentationPlugin": [


doesn't need to change

etrepum · 2026-05-08T00:48:33Z

      "@lexical/react/LexicalTablePlugin": [
        "./packages/lexical-react/src/LexicalTablePlugin.ts"
      ],
+      "@lexical/react/LexicalTouchIndentationPlugin": [


doesn't need to change

etrepum · 2026-05-08T00:49:21Z

+  type TouchIndentationConfig,
+  TouchIndentationExtension,


These could have flow type coverage

Per etrepum's review: - Delete React plugin (LexicalTouchIndentationPlugin) and Flow types - Make registerTouchIndentation private (not exported) - Use Signal<number> for swipeThreshold instead of plain number with defaults - Use swipeThreshold.peek() in event handlers - Simplify indent/outdent dispatch to ternary - Pass signal directly to registerTouchIndentation - Add TouchIndentationExtension to playground via App.tsx instead of plugin - Revert auto-generated changes to .flowconfig, tsconfig, package.json

…ild.json - Add Flow type declarations for TouchIndentationConfig and TouchIndentationExtension - Revert stray tsconfig.build.json change (__bench__ exclusion)

etrepum

Since this extension only applies to lists it should probably be in @lexical/list and documented as such.

etrepum · 2026-05-17T04:52:41Z

+function setupEditorWithList() {
+  const root = document.createElement('div');
+  root.contentEditable = 'true';
+  document.body.appendChild(root);
+
+  const editor = buildEditorFromExtensions(
+    TouchIndentationExtension,
+    defineExtension({name: 'test-nodes', nodes: [ListNode, ListItemNode]}),
+  );
+  editor.setRootElement(root);
+
+  editor.update(
+    () => {
+      const list = $createListNode('bullet');
+      const item = $createListItemNode();
+      item.append($createTextNode('Hello'));
+      list.append(item);
+      $getRoot().append(list);
+      item.selectEnd();
+    },
+    {discrete: true},
+  );
+
+  return {editor, root};
+}
+
+function setupEditorWithParagraph() {
+  const root = document.createElement('div');
+  root.contentEditable = 'true';
+  document.body.appendChild(root);
+
+  const editor = buildEditorFromExtensions(
+    TouchIndentationExtension,
+    defineExtension({name: 'test-nodes', nodes: [ListNode, ListItemNode]}),
+  );
+  editor.setRootElement(root);
+
+  editor.update(
+    () => {
+      const paragraph = $createParagraphNode();
+      paragraph.append($createTextNode('Hello'));
+      $getRoot().append(paragraph);
+      paragraph.selectEnd();
+    },
+    {discrete: true},
+  );
+
+  return {editor, root};
+}


The only difference between these two are the update to initialize it, which can also be done with $initialEditorState.

It will be simpler to only return editor, you can retrieve the root with editor.getRootElement(). This way you can also easily use using editor = … rather than defining a custom dispose or another variable.

etrepum · 2026-05-17T04:57:12Z

+          startX = touch.clientX;
+          startY = touch.clientY;
+          isSwiping = false;
+          isInListItem = editor.read(() => $isSelectionInListItem());


Suggested change

isInListItem = editor.read(() => $isSelectionInListItem());

isInListItem = editor.read($isSelectionInListItem);

potatowagon

Review — Touch Swipe Indentation for List Items

Assessment: Looks good to land ✅

What I verified:

Feature scope: Adds a TouchIndentationExtension that lets mobile users swipe left/right on list items to indent/outdent. Uses touch events (touchstart/touchmove/touchend) with configurable swipe threshold.
Implementation quality:
- Only activates on list items ($isSelectionInListItem() guard)
- Vertical guard (30px) prevents accidental triggers during scrolling
- Multi-touch ignored (single finger only)
- Dispatches standard INDENT_CONTENT_COMMAND/OUTDENT_CONTENT_COMMAND so existing listeners work
- Uses the signal/effect pattern consistent with other extensions
- Properly cleans up event listeners on root change
CI status: Full CI suite green (40 checks pass).
Risk: Opt-in extension, no changes to existing behavior. Uses established patterns.

— via Navi on behalf of potatowagon

abhishekvishwakarma007 added 2 commits May 8, 2026 00:28

abhishekvishwakarma007 requested review from acywatson, etrepum, fantactuka, ivailop7, potatowagon, takuyakanbr and zurfyx as code owners May 7, 2026 20:10

meta-cla Bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label May 7, 2026

vercel Bot deployed to Preview – lexical-playground May 7, 2026 20:11 View deployment

vercel Bot deployed to Preview – lexical May 7, 2026 20:11 View deployment

abhishekvishwakarma007 mentioned this pull request May 7, 2026

Feature: Indentation list via touch right/left #8268

Open

etrepum added the extended-tests Run extended e2e tests on a PR label May 7, 2026

etrepum reviewed May 8, 2026

View reviewed changes

etrepum marked this pull request as draft May 10, 2026 18:20

vercel Bot deployed to Preview – lexical May 14, 2026 06:15 View deployment

vercel Bot deployed to Preview – lexical-playground May 14, 2026 06:15 View deployment

[lexical] Address review feedback: add flow types, revert tsconfig.bu…

cf28328

…ild.json - Add Flow type declarations for TouchIndentationConfig and TouchIndentationExtension - Revert stray tsconfig.build.json change (__bench__ exclusion)

vercel Bot deployed to Preview – lexical-playground May 14, 2026 14:20 View deployment

vercel Bot deployed to Preview – lexical May 14, 2026 14:20 View deployment

etrepum reviewed May 17, 2026

View reviewed changes

potatowagon reviewed Jun 5, 2026

View reviewed changes

	export function registerTouchIndentation(
	function registerTouchIndentation(

	swipeThreshold: number = DEFAULT_SWIPE_THRESHOLD,
	swipeThreshold: Signal<number>,

	Math.abs(deltaX) > swipeThreshold &&
	Math.abs(deltaX) > swipeThreshold.peek() &&

	isInListItem = editor.read(() => $isSelectionInListItem());
	isInListItem = editor.read($isSelectionInListItem);

Conversation

abhishekvishwakarma007 commented May 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changes

Configuration

Design decisions

Test plan

Before

After

Uh oh!

vercel Bot commented May 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

etrepum commented May 7, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

etrepum left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

potatowagon left a comment

Choose a reason for hiding this comment

Review — Touch Swipe Indentation for List Items

What I verified:

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

abhishekvishwakarma007 commented May 7, 2026 •

edited

Loading

vercel Bot commented May 7, 2026 •

edited

Loading