Update prettier version and fix formatting bug.

Prettier currently has a bug that causes it's formatWithCursor() to be extremely slow in some cases. In Heynote, whenever you pasted a large JSON chunk and auto formatted it, with the cursor at the beginning or the start of the block, this would trigger that bug. This commit introduces a work around by using format() if the cursor is at the beginning or the end of the block.

Update to latest version of Prettier.

package-lock.json

@@ -43,7 +43,7 @@
         "electron-store": "^8.1.0",
         "electron-updater": "^6.1.7",
         "fs-jetpack": "^5.1.0",
-        "prettier": "^2.8.4",
+        "prettier": "^3.1.1",
         "rollup-plugin-license": "^3.0.1",
         "sass": "^1.57.1",
         "typescript": "^4.9.4",
@@ -4909,15 +4909,15 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.8.8",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
-      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.1.1.tgz",
+      "integrity": "sha512-22UbSzg8luF4UuZtzgiUOfcGM8s4tjBv6dJRT7j275NXsy2jb4aJa4NNveul5x4eqlF1wuhuR2RElK71RvmVaw==",
       "dev": true,
       "bin": {
-        "prettier": "bin-prettier.js"
+        "prettier": "bin/prettier.cjs"
       },
       "engines": {
-        "node": ">=10.13.0"
+        "node": ">=14"
       },
       "funding": {
         "url": "https://github.com/prettier/prettier?sponsor=1"

package.json

@@ -58,7 +58,7 @@
     "electron-store": "^8.1.0",
     "electron-updater": "^6.1.7",
     "fs-jetpack": "^5.1.0",
-    "prettier": "^2.8.4",
+    "prettier": "^3.1.1",
     "rollup-plugin-license": "^3.0.1",
     "sass": "^1.57.1",
     "typescript": "^4.9.4",

src/editor/block/format-code.js

@@ -1,24 +1,25 @@
 import { EditorSelection } from "@codemirror/state"
 
-import { formatWithCursor, getSupportInfo } from "prettier"
-import babelParser from "prettier/esm/parser-babel.mjs"
+import * as prettier from "prettier/standalone"
+import babelParser from "prettier/plugins/babel.mjs"
 import htmlParser from "prettier/esm/parser-html.mjs"
 import cssParser from "prettier/esm/parser-postcss.mjs"
 import markdownParser from "prettier/esm/parser-markdown.mjs"
+import * as prettierPluginEstree from "prettier/plugins/estree.mjs";
 
 import { getActiveNoteBlock } from "./block.js"
 
 
 const PARSER_MAP = {
-    "json": {parser:"json-stringify", plugins: [babelParser]},
-    "javascript": {parser:"babel", plugins: [babelParser]},
+    "json": {parser:"json-stringify", plugins: [babelParser, prettierPluginEstree]},
+    "javascript": {parser:"babel", plugins: [babelParser, prettierPluginEstree]},
     "html": {parser:"html", plugins: [htmlParser]},
     "css": {parser:"css", plugins: [cssParser]},
     "markdown": {parser:"markdown", plugins: [markdownParser]},
 }
 
 
-export const formatBlockContent = ({ state, dispatch }) => {
+export const formatBlockContent = async ({ state, dispatch }) => {
     if (state.readOnly)
         return false
     const block = getActiveNoteBlock(state)
@@ -34,14 +35,34 @@ export const formatBlockContent = ({ state, dispatch }) => {
 
     //console.log("prettier supports:", getSupportInfo())
 
+    // There is a performance bug in prettier causing formatWithCursor() to be extremely slow in some cases (https://github.com/prettier/prettier/issues/4801)
+    // To work around this we use format() when the cursor is in the beginning or the end of the block.
+    // This is not a perfect solution, and once the following PR is merged and released, we should be abe to remove this workaround:
+    // https://github.com/prettier/prettier/pull/15709
+    let useFormat = false
+    if (cursorPos == block.content.from || cursorPos == block.content.to) {
+        useFormat = true
+    }
+
     let formattedContent
     try {
-        formattedContent = formatWithCursor(content, {
+        if (useFormat) {
+            formattedContent = {
+                formatted: await prettier.format(content, {
+                    parser: PARSER_MAP[langName].parser,
+                    plugins: PARSER_MAP[langName].plugins,
+                    tabWidth: state.tabSize,
+                }),
+                cursorOffset: cursorPos == block.content.from ? 0 : content.length,
+            }
+        } else {
+            formattedContent = await prettier.formatWithCursor(content, {
                 cursorOffset: cursorPos - block.content.from,
                 parser: PARSER_MAP[langName].parser,
                 plugins: PARSER_MAP[langName].plugins,
                 tabWidth: state.tabSize,
             })
+        }
     } catch (e) {
         const hyphens = "----------------------------------------------------------------------------"
         console.log(`Error when trying to format block:\n${hyphens}\n${e.message}\n${hyphens}`)
@@ -54,7 +75,7 @@ export const formatBlockContent = ({ state, dispatch }) => {
             to: block.content.to,
             insert: formattedContent.formatted,
         },
-        selection: EditorSelection.cursor(block.content.from + formattedContent.cursorOffset)
+        selection: EditorSelection.cursor(block.content.from + formattedContent.cursorOffset),
     }, {
         userEvent: "input",
         scrollIntoView: true,