@blue-patterns/richtext 0.0.0-stage → 0.7.18

package/src/markdownSpaceRuns.ts

@@ -0,0 +1,164 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file markdownSpaceRuns.ts
+ * @input Lexical nodes to export as Markdown, and the transformers to use
+ * @output $convertToMarkdownKeepingTimeLinear: Lexical's Markdown export, in
+ *   time linear in the text even when a text holds long runs of spaces
+ * @position Every Markdown export in this package goes through it
+ *   (markdownSource.ts, markdownTable.ts). Lexical's text-format export splits
+ *   each text into leading spaces, content, and trailing spaces with
+ *   `/^(\s*)(.*?)(\s*)$/s`, which retries from every character of a long run
+ *   of spaces inside the text, so its time grows with the square of the run.
+ *   Each such run is exported as private-use stand-ins, which that pattern
+ *   passes in one step each, and put back afterwards. Leading and trailing
+ *   spaces, which decide where marks attach, are left as they are.
+ */
+
+import type {ElementNode, LexicalNode} from 'lexical';
+import type {Transformer} from '@lexical/markdown';
+import {$isCodeNode} from '@lexical/code';
+import {$convertToMarkdownString} from '@lexical/markdown';
+import {$isElementNode, $isTextNode} from 'lexical';
+import {absentCharacters} from './markdownCharacterReferences';
+
+/**
+ * A run of spaces with other characters on both sides, long enough for
+ * Lexical's pattern to cost noticeably more than one step per space; shorter
+ * runs, as ordinary text has, export as they are.
+ */
+const INNER_SPACE_RUN = /(?<=\S)\s{64,}(?=\S)/g;
+
+/** Whether Lexical exports the text node's text as written, untouched. */
+function isLiteralText(node: LexicalNode): boolean {
+  return (
+    $isTextNode(node) &&
+    (node.hasFormat('code') || $isCodeNode(node.getParent()))
+  );
+}
+
+/**
+ * Lexical's `$convertToMarkdownString(transformers, root)`, with every long
+ * run of spaces inside a text exported as stand-ins and put back, so the
+ * export takes time linear in the text. The tree is read through views, never
+ * changed; a tree with no long run exports directly.
+ */
+export function $convertToMarkdownKeepingTimeLinear(
+  transformers: Array<Transformer>,
+  root: ElementNode,
+): string {
+  const spaces = new Set<string>();
+  const findRuns = (node: LexicalNode) => {
+    if ($isTextNode(node)) {
+      if (!isLiteralText(node)) {
+        for (const run of node.getTextContent().match(INNER_SPACE_RUN) ?? []) {
+          for (const space of run) {
+            spaces.add(space);
+          }
+        }
+      }
+    } else if ($isElementNode(node) && !$isCodeNode(node)) {
+      node.getChildren().forEach(findRuns);
+    }
+  };
+  root.getChildren().forEach(findRuns);
+  if (spaces.size === 0) {
+    return $convertToMarkdownString(transformers, root);
+  }
+  // Every string the export can write — texts, and the properties nodes
+  // serialize, such as a link's address and title — so a stand-in occurs
+  // nowhere else in the output.
+  const written: string[] = [];
+  const collect = (node: LexicalNode) => {
+    written.push(JSON.stringify(node.exportJSON()));
+    if ($isTextNode(node)) {
+      written.push(node.getTextContent());
+    } else if ($isElementNode(node)) {
+      node.getChildren().forEach(collect);
+    }
+  };
+  root.getChildren().forEach(collect);
+  const free = absentCharacters(written.join(''));
+  const standIns = new Map<string, string>();
+  for (const space of spaces) {
+    const standIn = free.next().value;
+    if (standIn == null) {
+      return $convertToMarkdownString(transformers, root);
+    }
+    standIns.set(space, standIn);
+  }
+  const placed = {count: 0};
+  const children = viewsOf(root.getChildren(), standIns, placed);
+  const view = Object.create(root) as typeof root;
+  view.getChildren = <T extends LexicalNode>() => children as Array<T>;
+  let markdown = $convertToMarkdownString(transformers, view);
+  // Every stand-in in the output must be one this export placed; otherwise
+  // the plain export, slower but exact, is the answer.
+  let found = 0;
+  for (const standIn of standIns.values()) {
+    found += markdown.split(standIn).length - 1;
+  }
+  if (found !== placed.count) {
+    return $convertToMarkdownString(transformers, root);
+  }
+  for (const [space, standIn] of standIns) {
+    markdown = markdown.split(standIn).join(space);
+  }
+  return markdown;
+}
+
+/**
+ * Views of `nodes` whose texts hold stand-ins for their inner runs of
+ * spaces; a node with no such run is itself. Each view's siblings are the
+ * views beside it, as Lexical's exporter reads neighbors to place marks.
+ */
+function viewsOf(
+  nodes: ReadonlyArray<LexicalNode>,
+  standIns: ReadonlyMap<string, string>,
+  placed: {count: number},
+): LexicalNode[] {
+  const views = nodes.map(node => viewOf(node, standIns, placed));
+  views.forEach((view, index) => {
+    if (view !== nodes[index]) {
+      view.getPreviousSibling = <T extends LexicalNode>() =>
+        (views[index - 1] ?? null) as T | null;
+      view.getNextSibling = <T extends LexicalNode>() =>
+        (views[index + 1] ?? null) as T | null;
+    }
+  });
+  return views;
+}
+
+function viewOf(
+  node: LexicalNode,
+  standIns: ReadonlyMap<string, string>,
+  placed: {count: number},
+): LexicalNode {
+  if ($isTextNode(node)) {
+    if (isLiteralText(node)) {
+      return node;
+    }
+    const text = node.getTextContent();
+    const stood = text.replace(INNER_SPACE_RUN, run => {
+      placed.count += run.length;
+      return Array.from(run, space => standIns.get(space) ?? space).join('');
+    });
+    if (stood === text) {
+      return node;
+    }
+    const view = Object.create(node) as typeof node;
+    view.getTextContent = () => stood;
+    return view;
+  }
+  if ($isElementNode(node) && !$isCodeNode(node)) {
+    const original = node.getChildren();
+    const children = viewsOf(original, standIns, placed);
+    if (children.every((child, index) => child === original[index])) {
+      return node;
+    }
+    const view = Object.create(node) as typeof node;
+    view.getChildren = <T extends LexicalNode>() => children as Array<T>;
+    return view;
+  }
+  return node;
+}

package/src/markdownTable.ts

@@ -0,0 +1,309 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file markdownTable.ts
+ * @input Uses @lexical/markdown (multiline element transformer, inline text
+ *   transformers) and the @lexical/table nodes.
+ * @output Exports TABLE, the GFM pipe-table transformer, and DEFAULT_TRANSFORMERS,
+ *   the editor's default Markdown transformers (Lexical's standard set plus TABLE).
+ * @position Internal to @blue-patterns/richtext. RichTextEditor.tsx (shortcuts,
+ *   getMarkdown) and markdownSerializers.ts (headless import/export) default to
+ *   DEFAULT_TRANSFORMERS so tables import, edit, and export the same way.
+ *
+ * SYNC: Table recognition mirrors core Markdown's parser (a line with a pipe
+ * followed by a delimiter row; body rows continue while they contain a pipe),
+ * so the same source is a table on both surfaces. Keep the two in step.
+ */
+
+import {
+  $convertFromMarkdownString,
+  CODE,
+  HEADING,
+  TEXT_FORMAT_TRANSFORMERS,
+  TEXT_MATCH_TRANSFORMERS,
+  LINK,
+  ORDERED_LIST,
+  QUOTE,
+  TRANSFORMERS,
+  type MultilineElementTransformer,
+  type Transformer,
+} from '@lexical/markdown';
+import {
+  $createTableCellNode,
+  $createTableNode,
+  $createTableRowNode,
+  $isTableCellNode,
+  $isTableNode,
+  $isTableRowNode,
+  TableCellHeaderStates,
+  TableCellNode,
+  TableNode,
+  TableRowNode,
+} from '@lexical/table';
+import type {ElementFormatType} from 'lexical';
+import {HARD_LINE_BREAK} from './markdownHardLineBreak';
+import {THEMATIC_BREAK} from './markdownThematicBreak';
+import {HEADING_MARKERS} from './markdownHeading';
+import {QUOTE_MARKERS} from './markdownQuote';
+import {LIST_EXPORT} from './markdownListExport';
+import {TASK_LIST} from './markdownTaskList';
+import {ORDERED_LIST_KEEPING_START} from './markdownOrderedList';
+import {LINK_KEEPING_DESTINATIONS} from './markdownLink';
+import {BACKTICK_CODE, TILDE_CODE} from './markdownCodeFence';
+import {$convertToMarkdownKeepingTimeLinear} from './markdownSpaceRuns';
+
+/**
+ * Cells hold inline Markdown only, so they are imported and exported with the
+ * inline transformers.
+ */
+const CELL_TRANSFORMERS: Array<Transformer> = [
+  ...TEXT_FORMAT_TRANSFORMERS,
+  ...TEXT_MATCH_TRANSFORMERS.map(transformer =>
+    transformer === LINK ? LINK_KEEPING_DESTINATIONS : transformer,
+  ),
+];
+
+type ColumnAlignment = 'left' | 'center' | 'right' | null;
+
+/**
+ * Splits a row into trimmed cell sources: the row's indentation, one leading
+ * pipe, trailing spaces, and one trailing pipe are dropped, and the rest
+ * splits on unescaped pipes. An escaped pipe stays escaped for the cell's
+ * inline import.
+ */
+function splitTableRow(line: string): Array<string> {
+  let start = 0;
+  let end = line.length;
+  while (start < end && (line[start] === ' ' || line[start] === '\t')) {
+    start++;
+  }
+  if (line[start] === '|') {
+    start++;
+    while (start < end && line[start] === ' ') {
+      start++;
+    }
+  }
+  while (end > start && line[end - 1] === ' ') {
+    end--;
+  }
+  if (end > start && line[end - 1] === '|') {
+    end--;
+  }
+  const content = line.slice(start, end);
+  const cells: Array<string> = [];
+  let current = '';
+  for (let index = 0; index < content.length; index++) {
+    const character = content[index];
+    if (character === '\\' && content[index + 1] === '|') {
+      current += '\\|';
+      index++;
+    } else if (character === '|') {
+      cells.push(current.trim());
+      current = '';
+    } else {
+      current += character;
+    }
+  }
+  cells.push(current.trim());
+  return cells;
+}
+
+/** A delimiter row: every non-empty cell is dashes with optional colons. */
+function isDelimiterRow(line: string | undefined): boolean {
+  if (line == null || !line.includes('|')) {
+    return false;
+  }
+  const cells = line
+    .split('|')
+    .map(cell => cell.trim())
+    .filter(cell => cell.length > 0);
+  return cells.length > 0 && cells.every(cell => /^:?-+:?$/.test(cell));
+}
+
+function columnAlignment(delimiterCell: string): ColumnAlignment {
+  const left = delimiterCell.startsWith(':');
+  const right = delimiterCell.endsWith(':');
+  if (left && right) {
+    return 'center';
+  }
+  return right ? 'right' : left ? 'left' : null;
+}
+
+/**
+ * Alignment is stored as the cell's element format. Left and right map to
+ * logical start and end, so an aligned column follows the reading direction
+ * the way core Markdown's table does.
+ */
+const ALIGNMENT_FORMAT: Record<
+  NonNullable<ColumnAlignment>,
+  ElementFormatType
+> = {left: 'start', center: 'center', right: 'end'};
+
+function delimiterFor(format: ElementFormatType): string {
+  switch (format) {
+    case 'left':
+    case 'start':
+      return ':---';
+    case 'center':
+      return ':---:';
+    case 'right':
+    case 'end':
+      return '---:';
+    default:
+      return '---';
+  }
+}
+
+function $createCell(
+  source: string,
+  isHeader: boolean,
+  alignment: ColumnAlignment,
+): TableCellNode {
+  const cell = $createTableCellNode(
+    isHeader ? TableCellHeaderStates.ROW : TableCellHeaderStates.NO_STATUS,
+  );
+  // The pipe was only escaped to keep it out of the row split.
+  $convertFromMarkdownString(
+    source.replace(/\\\|/g, '|'),
+    CELL_TRANSFORMERS,
+    cell,
+  );
+  if (alignment != null) {
+    cell.setFormat(ALIGNMENT_FORMAT[alignment]);
+  }
+  return cell;
+}
+
+function cellMarkdown(cell: TableCellNode): string {
+  // A cell is one line of Markdown, so paragraph breaks inside it become
+  // spaces, and literal pipes are escaped to stay inside the cell.
+  return oneLine($convertToMarkdownKeepingTimeLinear(CELL_TRANSFORMERS, cell))
+    .replace(/\|/g, '\\|')
+    .trim();
+}
+
+/**
+ * `markdown` with each run of spaces that holds a line break made one space.
+ * Read line by line: a pattern matching optional spaces around line breaks
+ * retries from every space in a long run without a line break, so its time
+ * grows with the square of the run.
+ */
+function oneLine(markdown: string): string {
+  if (!markdown.includes('\n')) {
+    return markdown;
+  }
+  const lines = markdown.split('\n');
+  let joined = lines[0].trimEnd();
+  for (let index = 1; index < lines.length; index++) {
+    const isLast = index === lines.length - 1;
+    const line = isLast ? lines[index].trimStart() : lines[index].trim();
+    // A blank line is part of the run of spaces around it.
+    if (line !== '' || isLast) {
+      joined += ` ${line}`;
+    }
+  }
+  return joined;
+}
+
+/**
+ * GFM pipe tables. The header row is the first row and renders as header
+ * cells; delimiter-row colons set each column's alignment; rows shorter than
+ * the widest row gain empty cells, so no cell is dropped. Export writes the
+ * canonical form: outer pipes, one space of padding, and three-dash delimiters.
+ */
+export const TABLE: MultilineElementTransformer = {
+  dependencies: [TableNode, TableRowNode, TableCellNode],
+  export(node) {
+    if (!$isTableNode(node)) {
+      return null;
+    }
+    const rows = node.getChildren().filter($isTableRowNode);
+    const lines: Array<string> = [];
+    rows.forEach((row, rowIndex) => {
+      const cells = row.getChildren().filter($isTableCellNode);
+      lines.push(`| ${cells.map(cellMarkdown).join(' | ')} |`);
+      if (rowIndex === 0) {
+        lines.push(
+          `| ${cells.map(cell => delimiterFor(cell.getFormatType())).join(' | ')} |`,
+        );
+      }
+    });
+    return lines.join('\n');
+  },
+  regExpStart: /\|/,
+  handleImportAfterStartMatch({lines, rootNode, startLineIndex}) {
+    if (!isDelimiterRow(lines[startLineIndex + 1])) {
+      return null;
+    }
+    const alignments = splitTableRow(lines[startLineIndex + 1]).map(
+      columnAlignment,
+    );
+    const rowSources: Array<Array<string>> = [
+      splitTableRow(lines[startLineIndex]),
+    ];
+    let lastLineIndex = startLineIndex + 1;
+    while (
+      lastLineIndex + 1 < lines.length &&
+      lines[lastLineIndex + 1].includes('|') &&
+      lines[lastLineIndex + 1].trim() !== ''
+    ) {
+      lastLineIndex++;
+      rowSources.push(splitTableRow(lines[lastLineIndex]));
+    }
+    const columnCount = Math.max(...rowSources.map(cells => cells.length));
+    const table = $createTableNode();
+    rowSources.forEach((cells, rowIndex) => {
+      const row = $createTableRowNode();
+      for (let column = 0; column < columnCount; column++) {
+        row.append(
+          $createCell(
+            cells[column] ?? '',
+            rowIndex === 0,
+            alignments[column] ?? null,
+          ),
+        );
+      }
+      table.append(row);
+    });
+    rootNode.append(table);
+    return [true, lastLineIndex];
+  },
+  replace() {
+    // Every table imports through handleImportAfterStartMatch.
+    return false;
+  },
+  type: 'multiline-element',
+};
+
+/**
+ * The editor's default Markdown transformers: thematic breaks, list export
+ * that nests to each parent's content column, GFM task list items, Lexical's
+ * standard set (with `~~~` fences beside its backtick ones, both reading the
+ * opening line's info string as core does, its ordered list keeping each
+ * nested list's start, and its
+ * link writing an unbalanced destination's parentheses escaped), hard line
+ * breaks for breaks typed in the editor, and GFM tables. Thematic breaks come first so a line such as `* * *` is a rule
+ * rather than a list item, and task items before bullets so `- [ ] text` is a
+ * task rather than a bullet that starts with `[ ]`.
+ */
+export const DEFAULT_TRANSFORMERS: ReadonlyArray<Transformer> = [
+  THEMATIC_BREAK,
+  LIST_EXPORT,
+  TASK_LIST,
+  TILDE_CODE,
+  ...TRANSFORMERS.map(transformer =>
+    transformer === ORDERED_LIST
+      ? ORDERED_LIST_KEEPING_START
+      : transformer === LINK
+        ? LINK_KEEPING_DESTINATIONS
+        : transformer === CODE
+          ? BACKTICK_CODE
+          : transformer === QUOTE
+            ? QUOTE_MARKERS
+            : transformer === HEADING
+              ? HEADING_MARKERS
+              : transformer,
+  ),
+  HARD_LINE_BREAK,
+  TABLE,
+];

package/src/markdownTaskList.ts

@@ -0,0 +1,222 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file markdownTaskList.ts
+ * @input Uses lexical (node state), @lexical/list, and @lexical/markdown
+ *   (ElementTransformer).
+ * @output Exports TASK_LIST, the transformer that imports GFM task list
+ *   items; $getTaskState / $setTaskState, which read and set whether a list
+ *   item is a task and whether it is checked; and registerTaskListEditing,
+ *   the editor's Enter and Mod+Enter behavior for task items.
+ * @position Part of DEFAULT_TRANSFORMERS (markdownTable.ts), ahead of
+ *   Lexical's bullet transformer. It reads exactly the task items core
+ *   Markdown reads (spec:AST-061 FR5): a `-`, `*`, or `+` bullet, one space,
+ *   `[ ]`, `[x]`, or `[X]`, and a space. Lexical's own CHECK_LIST also takes a
+ *   line with no bullet, `[]`, and missing spaces, and reads `[X]` as
+ *   unchecked; those stay a paragraph or an ordinary bullet here.
+ *
+ *   A task is a property of an item, not of its list: GFM lets task and
+ *   plain items share one list, and Lexical keeps a checked state only in its
+ *   all-checkbox lists. So task items live in ordinary bullet lists, beside
+ *   plain items, and carry their state as node state; LIST_EXPORT writes
+ *   `[ ]` or `[x]` for each task item. TaskCheckboxPlugin draws them, and
+ *   registers registerTaskListEditing in the editor.
+ */
+
+import {
+  $createListItemNode,
+  $createListNode,
+  $isListItemNode,
+  $isListNode,
+  ListItemNode,
+  ListNode,
+} from '@lexical/list';
+import type {ElementTransformer} from '@lexical/markdown';
+import {$findMatchingParent, mergeRegister} from '@lexical/utils';
+import {
+  $getSelection,
+  $getState,
+  $isRangeSelection,
+  $setState,
+  COMMAND_PRIORITY_LOW,
+  createState,
+  INSERT_PARAGRAPH_COMMAND,
+  KEY_ENTER_COMMAND,
+  type LexicalEditor,
+} from 'lexical';
+
+export type TaskState = 'checked' | 'unchecked';
+
+// Whether an item is a task. A copy keeps it, so the item Enter makes after
+// a task is a task too.
+const taskKind = createState('astryxTask', {
+  parse: (value: unknown): boolean => value === true,
+});
+
+// Whether a task is checked.
+const taskChecked = createState('astryxTaskChecked', {
+  parse: (value: unknown): boolean => value === true,
+});
+
+/**
+ * Whether `item` is a task and whether it is checked; null for a plain item.
+ * An item in one of Lexical's own checkbox lists is a task too.
+ */
+export function $getTaskState(item: ListItemNode): TaskState | null {
+  if ($getState(item, taskKind)) {
+    return $getState(item, taskChecked) ? 'checked' : 'unchecked';
+  }
+  const list = item.getParent();
+  if ($isListNode(list) && list.getListType() === 'check') {
+    return item.getChecked() === true ? 'checked' : 'unchecked';
+  }
+  return null;
+}
+
+/** Makes `item` a task in the given state, or a plain item for null. */
+export function $setTaskState(
+  item: ListItemNode,
+  state: TaskState | null,
+): void {
+  const list = item.getParent();
+  if ($isListNode(list) && list.getListType() === 'check') {
+    item.setChecked(state === 'checked');
+    return;
+  }
+  $setState(item, taskKind, state != null);
+  $setState(item, taskChecked, state === 'checked');
+}
+
+const TASK_ITEM = /^(\s*)([-*+])\s\[([ xX])\]\s/;
+
+/** Nesting depth from leading whitespace, counted as Lexical's lists do. */
+function indentOf(whitespace: string): number {
+  const tabs = whitespace.match(/\t/g)?.length ?? 0;
+  const spaces = whitespace.match(/ /g)?.length ?? 0;
+  return tabs + Math.floor(spaces / 4);
+}
+
+export const TASK_LIST: ElementTransformer = {
+  dependencies: [ListNode, ListItemNode],
+  // LIST_EXPORT writes every list, task items included.
+  export: () => null,
+  regExp: TASK_ITEM,
+  replace: (parentNode, children, match, isImport) => {
+    const item = $createListItemNode();
+    $setState(item, taskKind, true);
+    $setState(item, taskChecked, match[3] !== ' ');
+    // A task item joins the bullet list beside it, as a plain item does.
+    const previous = parentNode.getPreviousSibling();
+    const next = parentNode.getNextSibling();
+    if ($isListNode(next) && next.getListType() === 'bullet') {
+      const first = next.getFirstChild();
+      if (first == null) {
+        next.append(item);
+      } else {
+        first.insertBefore(item);
+      }
+      parentNode.remove();
+    } else if ($isListNode(previous) && previous.getListType() === 'bullet') {
+      previous.append(item);
+      parentNode.remove();
+    } else {
+      const list = $createListNode('bullet');
+      list.append(item);
+      parentNode.replace(list);
+    }
+    item.append(...children);
+    if (!isImport) {
+      item.select(0, 0);
+    }
+    const indent = indentOf(match[1]);
+    if (indent > 0) {
+      item.setIndent(indent);
+    }
+  },
+  type: 'element',
+};
+
+/** The task item holding the selection's anchor, if any. */
+function $selectedTaskItem(): ListItemNode | null {
+  const selection = $getSelection();
+  if (!$isRangeSelection(selection)) {
+    return null;
+  }
+  return $findMatchingParent(
+    selection.anchor.getNode(),
+    (node): node is ListItemNode =>
+      $isListItemNode(node) && $getTaskState(node) != null,
+  );
+}
+
+/**
+ * Task editing in an editor:
+ *
+ * - Enter in a task makes the new item a task, unchecked, as Lexical's own
+ *   checkbox items do. Lexical copies the item to make the new one, state and
+ *   all, so the new item's state is set here, where Enter makes it — never
+ *   inferred later from content, which would uncheck a written `- [x]` with
+ *   no text. Enter at the start of a task leaves its text, and its state, on
+ *   the item that holds it, and puts the new, unchecked item before it. Enter
+ *   in an empty task is left to the list, which ends the list there.
+ * - Mod+Enter checks or unchecks the task holding the caret.
+ */
+export function registerTaskListEditing(editor: LexicalEditor): () => void {
+  return mergeRegister(
+    editor.registerCommand(
+      INSERT_PARAGRAPH_COMMAND,
+      () => {
+        const selection = $getSelection();
+        const item = $selectedTaskItem();
+        if (
+          item == null ||
+          !$isRangeSelection(selection) ||
+          item.getTextContent().trim() === ''
+        ) {
+          return false;
+        }
+        const state = $getTaskState(item);
+        const isAtStart =
+          selection.isCollapsed() &&
+          selection.anchor.offset === 0 &&
+          (selection.anchor.getNode().is(item) ||
+            selection.anchor.getNode().is(item.getFirstDescendant()));
+        const created = selection.insertParagraph();
+        if (!$isListItemNode(created) || $getTaskState(created) == null) {
+          return true;
+        }
+        if (isAtStart) {
+          // The text moved to the new item: it keeps its state, and the item
+          // left empty before it is the new, unchecked one.
+          $setTaskState(created, state);
+          $setTaskState(item, 'unchecked');
+        } else {
+          $setTaskState(created, 'unchecked');
+        }
+        return true;
+      },
+      COMMAND_PRIORITY_LOW,
+    ),
+    editor.registerCommand(
+      KEY_ENTER_COMMAND,
+      event => {
+        const isModified =
+          event != null &&
+          (event.metaKey || event.ctrlKey) &&
+          !event.shiftKey &&
+          !event.altKey;
+        const item = isModified ? $selectedTaskItem() : null;
+        if (item == null) {
+          return false;
+        }
+        event?.preventDefault();
+        $setTaskState(
+          item,
+          $getTaskState(item) === 'checked' ? 'unchecked' : 'checked',
+        );
+        return true;
+      },
+      COMMAND_PRIORITY_LOW,
+    ),
+  );
+}