# How to map cursor position after formatting code

**URL:** <https://discuss.codemirror.net/t/how-to-map-cursor-position-after-formatting-code/6267>\
**Category:** v6\
**Created:** [April 14, 2023, 3:51am UTC](https://discuss.codemirror.net/t/how-to-map-cursor-position-after-formatting-code/6267 "2023-04-14T03:51:02Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![AKclown](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/akclown/32/2378_2.png) [@AKclown](https://discuss.codemirror.net/u/AKclown)\
**Post date:** [April 15, 2023, 2:22am UTC](https://discuss.codemirror.net/t/how-to-map-cursor-position-after-formatting-code/6267/3 "2023-04-15T02:22:04Z")

</div>

hi, marijn. This is how I format my code, I don’t replace the whole document，I use the Diff package to compare the differences。  
usage1：(prettier API by Node server)

```ts
// code represents the old document data, result.code represents the new document data。
const items = diffChars(code, result.code);
    console.log('items: ', items);
    if (items.length > 1) {
      const transaction: Array<TransactionSpec> = [];
      let allCount = 0;
      items.forEach((item) => {
        if (item.removed) {
          const end = allCount + (item.count ?? 0);
          const trans = insertCompletionText(state, '', allCount, end);
          transaction.push(trans);
          allCount = end;
        } else if (item.added) {
          const trans = insertCompletionText(
            state,
            item.value,
            allCount,
            allCount,
          );
          transaction.push(trans);
        } else {
          allCount = allCount + (item.count ?? 0);
        }
      });
      view.dispatch(...transaction);

```

usage2：(language-server-protocol)

```ts
      result = await lspClient.textDocumentFormatting({
          textDocument: { uri: `file://${rootUri}/${openedPath}` },
          options: {
            tabSize: state.tabSize,
            insertSpaces,
          },
        });

if (result && result.result?.length) {
  const items = result.result;
  // $ 先存储更改数据，再一次性插入
  const transaction: Array<TransactionSpec> = [];
  items.forEach((item) => {
    const from = posToOffset(state.doc, item.range.start);
    // to为undefined表示在原有的基础上新增加了一行
    const to = posToOffset(state.doc, item.range.end) ?? state.doc.length;
    if (from !== undefined && to !== undefined) {
      const trans = insertCompletionText(state, item.newText, from, to);
      transaction.push(trans);
    }
  });
 view.dispatch(...transaction);
}

```

You are right, codemirror does have a built-in selection map, but it does not meet my needs(Not quite consistent with vscode)

The effect of not doing any processing on the cursor is as follows：  
 ![codemirror-cursor](https://discuss.codemirror.net/uploads/default/original/2X/1/18aefb94cc30a8485009afd9295cf2c548757332.gif)  
This cursor should be focused in front of the display in the first d42-visible, not the second（Maybe I’m using it wrong?）

---

_[View the full topic](https://discuss.codemirror.net/t/how-to-map-cursor-position-after-formatting-code/6267)._