Add offscreen block skeletons

.github/workflows/pr.yml

@@ -6,17 +6,13 @@ jobs:
   build:
     runs-on: ubuntu-latest
 
-    strategy:
-      matrix:
-        node-version: [16.x, 18.x, 20.x]
-
     steps:
-      - uses: actions/checkout@v1
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+      - uses: actions/checkout@v6
+      - uses: pnpm/action-setup@v6
+      - uses: actions/setup-node@v6
         with:
-          node-version: ${{ matrix.node-version }}
-      - run: pnpm i
-      - run: pnpm lint
+          node-version: 24
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
       - run: pnpm build
       - run: pnpm test-ci

package.json

@@ -1,152 +1,148 @@
 {
-  "name": "@descript/draft-js",
-  "description": "A React framework for building text editors.",
-  "version": "0.11.6-descript.34",
-  "keywords": [
-    "draftjs",
-    "editor",
-    "react",
-    "richtext"
-  ],
-  "homepage": "http://draftjs.org/",
-  "bugs": "https://github.com/facebook/draft-js/issues",
-  "files": [
-    "dist/",
-    "lib/",
-    "LICENSE"
-  ],
-  "main": "./lib/cjs/Draft.js",
-  "module": "./lib/esm/Draft.js",
-  "types": "./lib/types/Draft.d.ts",
-  "style": "./dist/Draft.css",
-  "exports": {
-    ".": {
-      "types": "./lib/types/Draft.d.ts",
-      "import": "./lib/esm/Draft.js",
-      "require": "./lib/cjs/Draft.js"
+    "name": "@descript/draft-js",
+    "description": "A React framework for building text editors.",
+    "version": "0.11.6-descript.40",
+    "packageManager": "pnpm@10.28.1",
+    "keywords": [
+        "draftjs",
+        "editor",
+        "react",
+        "richtext"
+    ],
+    "homepage": "http://draftjs.org/",
+    "bugs": "https://github.com/facebook/draft-js/issues",
+    "files": [
+        "dist/",
+        "lib/",
+        "LICENSE"
+    ],
+    "main": "./lib/cjs/Draft.js",
+    "module": "./lib/esm/Draft.js",
+    "types": "./lib/types/Draft.d.ts",
+    "style": "./dist/Draft.css",
+    "exports": {
+        ".": {
+            "types": "./lib/types/Draft.d.ts",
+            "import": "./lib/esm/Draft.js",
+            "require": "./lib/cjs/Draft.js"
+        },
+        "./dist/Draft.css": "./dist/Draft.css"
     },
-    "./dist/Draft.css": "./dist/Draft.css"
-  },
-  "repository": "facebook/draft-js",
-  "license": "MIT",
-  "scripts": {
-    "prepublish": "npm run build",
-    "pretest": "node node_modules/fbjs-scripts/node/check-dev-engines.js package.json",
-    "build": "npm run clean && npm run build:lib && npm run build:umd && npm run build:css",
-    "build:lib": "vite build",
-    "build:umd": "vite build --config vite.config.umd.ts",
-    "build:css": "vite build --config vite.config.css.ts && rm -f dist/dummy.js",
-    "build:watch": "vite build --watch",
-    "clean": "rm -rf lib dist",
-    "dev": "vite build --watch",
-    "typecheck": "tsc --noEmit",
-    "examples": "pnpm --filter @descript/draft-js-examples dev",
-    "examples:build": "pnpm --filter @descript/draft-js-examples build",
-    "examples:preview": "pnpm --filter @descript/draft-js-examples preview",
-    "lint": "eslint src/.",
-    "lint-docs": "alex . && pnpm format-docs:diff",
-    "format": "eslint . --fix",
-    "format-docs": "prettier --config prettier.config.js --write \"docs/**/*.md\"",
-    "format-docs:diff": "prettier --config prettier.config.js --list-different \"docs/**/*.md\"",
-    "test": "cross-env NODE_ENV=test jest",
-    "test-ci": "cross-env NODE_ENV=test npm run lint && npm run test"
-  },
-  "dependencies": {
-    "fast-deep-equal": "^3.1.3",
-    "fbjs": "^1.0.0",
-    "memoize-one": "^5.1.1",
-    "object-assign": "^4.1.1"
-  },
-  "peerDependencies": {
-    "react": ">=16.0.0",
-    "react-dom": ">=16.0.0"
-  },
-  "peerDependenciesMeta": {
-    "@types/react": {
-      "optional": true
+    "repository": "facebook/draft-js",
+    "license": "MIT",
+    "scripts": {
+        "prepublish": "pnpm run build",
+        "build": "pnpm run clean && pnpm run build:lib && pnpm run build:umd && pnpm run build:css",
+        "build:lib": "vite build",
+        "build:umd": "vite build --config vite.config.umd.ts",
+        "build:css": "vite build --config vite.config.css.ts && rm -f dist/dummy.js",
+        "build:watch": "vite build --watch",
+        "clean": "rm -rf lib dist",
+        "dev": "vite build --watch",
+        "typecheck": "tsc --noEmit",
+        "examples": "pnpm --filter @descript/draft-js-examples dev",
+        "examples:build": "pnpm --filter @descript/draft-js-examples build",
+        "examples:preview": "pnpm --filter @descript/draft-js-examples preview",
+        "lint": "eslint src/.",
+        "lint-docs": "alex . && pnpm format-docs:diff",
+        "format": "eslint . --fix",
+        "format-docs": "prettier --config prettier.config.js --write \"docs/**/*.md\"",
+        "format-docs:diff": "prettier --config prettier.config.js --list-different \"docs/**/*.md\"",
+        "test": "cross-env NODE_ENV=test jest",
+        "test-ci": "cross-env NODE_ENV=test pnpm run lint && pnpm run test"
     },
-    "@types/react-dom": {
-      "optional": true
-    }
-  },
-  "devDependencies": {
-    "@babel/core": "^7.6.4",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.4.4",
-    "@babel/plugin-proposal-optional-chaining": "^7.9.0",
-    "@types/jest": "^29.5.4",
-    "@types/react": "^18.3.24",
-    "@types/react-dom": "^18.3.7",
-    "@typescript-eslint/eslint-plugin": "^8.44.1",
-    "@typescript-eslint/parser": "^8.44.1",
-    "@vitejs/plugin-react": "^4.3.3",
-    "alex": "^8.0.0",
-    "babel-eslint": "^10.1.0",
-    "babel-preset-fbjs": "^3.3.0",
-    "cross-env": "^7.0.2",
-    "es6-shim": "^0.35.5",
-    "eslint": "^8.49.0",
-    "eslint-config-fbjs": "^4.0.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-babel": "^5.3.1",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-react": "^7.33.2",
-    "fbjs-scripts": "^1.2.0",
-    "jest": "^29.6.4",
-    "jest-environment-jsdom": "^29.6.4",
-    "postcss": "^8.4.49",
-    "prettier": "1.19.1",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "react-test-renderer": "^18.3.1",
-    "rollup-plugin-visualizer": "^5.12.0",
-    "ts-jest": "^29.1.1",
-    "typescript": "^5.9.2",
-    "vite": "^5.4.11",
-    "vite-plugin-dts": "^4.3.0"
-  },
-  "devEngines": {
-    "node": "14.x || 16.x || 18.x || 20.x",
-    "npm": "2.x || 3.x || 5.x || 6.x || 7.x || 8.x || 9.x || 10.x"
-  },
-  "jest": {
-    "preset": "ts-jest",
-    "testEnvironment": "jsdom",
-    "globals": {
-      "__DEV__": true,
-      "ts-jest": {
-        "diagnostics": {
-          "warnOnly": true
+    "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fbjs": "^1.0.0",
+        "memoize-one": "^5.1.1",
+        "object-assign": "^4.1.1"
+    },
+    "peerDependencies": {
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+    },
+    "peerDependenciesMeta": {
+        "@types/react": {
+            "optional": true
+        },
+        "@types/react-dom": {
+            "optional": true
         }
-      }
     },
-    "rootDir": "./",
-    "roots": [
-      "<rootDir>/src/"
-    ],
-    "setupFiles": [
-      "<rootDir>/scripts/jest/shims.js"
-    ],
-    "setupFilesAfterEnv": [
-      "<rootDir>/scripts/jest/setupAfterEnv.ts"
-    ],
-    "haste": {
-      "hasteImplModulePath": "<rootDir>/scripts/jest/hasteImpl.js"
+    "devDependencies": {
+        "@babel/core": "^7.6.4",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.4.4",
+        "@babel/plugin-proposal-optional-chaining": "^7.9.0",
+        "@types/jest": "^29.5.4",
+        "@types/react": "^18.3.24",
+        "@types/react-dom": "^18.3.7",
+        "@typescript-eslint/eslint-plugin": "^8.44.1",
+        "@typescript-eslint/parser": "^8.44.1",
+        "@vitejs/plugin-react": "^4.3.3",
+        "alex": "^8.0.0",
+        "babel-eslint": "^10.1.0",
+        "babel-preset-fbjs": "^3.3.0",
+        "cross-env": "^7.0.2",
+        "es6-shim": "^0.35.5",
+        "eslint": "^8.49.0",
+        "eslint-config-fbjs": "^4.0.0",
+        "eslint-config-prettier": "^9.0.0",
+        "eslint-plugin-babel": "^5.3.1",
+        "eslint-plugin-jsx-a11y": "^6.7.1",
+        "eslint-plugin-react": "^7.33.2",
+        "fbjs-scripts": "^1.2.0",
+        "jest": "^29.6.4",
+        "jest-environment-jsdom": "^29.6.4",
+        "postcss": "^8.4.49",
+        "prettier": "1.19.1",
+        "react": "^19.1.1",
+        "react-dom": "^19.1.1",
+        "react-test-renderer": "^18.3.1",
+        "rollup-plugin-visualizer": "^5.12.0",
+        "ts-jest": "^29.1.1",
+        "typescript": "^5.9.2",
+        "vite": "^5.4.11",
+        "vite-plugin-dts": "^4.3.0"
     },
-    "modulePathIgnorePatterns": [
-      "<rootDir>/lib/",
-      "<rootDir>/node_modules/"
-    ],
-    "transformIgnorePatterns": [
-      "<rootDir>/node_modules/"
-    ],
-    "unmockedModulePathPatterns": [
-      "<rootDir>/node_modules/fbjs/node_modules/",
-      "<rootDir>/node_modules/fbjs/lib/UserAgent.js",
-      "<rootDir>/node_modules/fbjs/lib/UserAgentData.js",
-      "<rootDir>/node_modules/fbjs-scripts/",
-      "<rootDir>/node_modules/object-assign/",
-      "<rootDir>/node_modules/react/",
-      "<rootDir>/node_modules/react-dom/"
-    ]
-  }
+    "jest": {
+        "preset": "ts-jest",
+        "testEnvironment": "jsdom",
+        "globals": {
+            "__DEV__": true,
+            "ts-jest": {
+                "diagnostics": {
+                    "warnOnly": true
+                }
+            }
+        },
+        "rootDir": "./",
+        "roots": [
+            "<rootDir>/src/"
+        ],
+        "setupFiles": [
+            "<rootDir>/scripts/jest/shims.js"
+        ],
+        "setupFilesAfterEnv": [
+            "<rootDir>/scripts/jest/setupAfterEnv.ts"
+        ],
+        "haste": {
+            "hasteImplModulePath": "<rootDir>/scripts/jest/hasteImpl.js"
+        },
+        "modulePathIgnorePatterns": [
+            "<rootDir>/lib/",
+            "<rootDir>/node_modules/"
+        ],
+        "transformIgnorePatterns": [
+            "<rootDir>/node_modules/"
+        ],
+        "unmockedModulePathPatterns": [
+            "<rootDir>/node_modules/fbjs/node_modules/",
+            "<rootDir>/node_modules/fbjs/lib/UserAgent.js",
+            "<rootDir>/node_modules/fbjs/lib/UserAgentData.js",
+            "<rootDir>/node_modules/fbjs-scripts/",
+            "<rootDir>/node_modules/object-assign/",
+            "<rootDir>/node_modules/react/",
+            "<rootDir>/node_modules/react-dom/"
+        ]
+    }
 }

pnpm-workspace.yaml

@@ -1,3 +1,6 @@
 packages:
   - '.'
-  - 'examples'
+  - 'examples'
+allowBuilds:
+  core-js: set this to true or false
+  esbuild: set this to true or false

src/Draft.ts

@@ -10,7 +10,11 @@
 import Editor from './component/base/DraftEditor.react';
 export {Editor};
 import DraftEditorBlock from './component/contents/DraftEditorBlock.react';
-export type {DraftEditorProps} from './component/base/DraftEditorProps';
+export type {
+  DraftEditorBlockSkeletonOptions,
+  DraftEditorProps,
+} from './component/base/DraftEditorProps';
+export {supportsBlockSkeletonRendering} from './component/hooks/useDraftEditorBlockSkeleton';
 export {CompositeDecorator} from './model/decorators/CompositeDraftDecorator';
 import DraftEntity from './model/entity/DraftEntity';
 import AtomicBlockUtils from './model/modifier/AtomicBlockUtils';
@@ -38,7 +42,10 @@ export type {RawDraftContentState} from './model/encoding/convertFromDraftStateT
 
 export type {DraftEditorCommand} from './model/constants/DraftEditorCommand';
 export type {DraftHandleValue} from './model/constants/DraftHandleValue';
-export type {DraftDecoratorType} from './model/decorators/DraftDecoratorType';
+export type {
+  DraftDecoratorDOMAnchorRange,
+  DraftDecoratorType,
+} from './model/decorators/DraftDecoratorType';
 export type {DraftDecorator, DraftDecoratorComponentProps} from './model/decorators/DraftDecorator';
 
 export const EditorBlock = DraftEditorBlock;

src/component/base/DraftEditor.react.tsx

@@ -35,7 +35,7 @@ import {hasText} from '../../model/immutable/ContentState';
 import {nullthrows} from '../../fbjs/nullthrows';
 import DraftEditorPlaceholder from './DraftEditorPlaceholder.react';
 import {DefaultDraftInlineStyle} from '../../model/immutable/DefaultDraftInlineStyle';
-import DraftEditorContents from '../contents/DraftEditorContents-core.react';
+import DraftEditorSkeletonContents from '../contents/DraftEditorSkeletonContents.react';
 
 const isIE = UserAgent.isBrowser('IE');
 
@@ -336,6 +336,7 @@ export default class DraftEditor extends React.Component<
       blockRenderMap,
       blockRendererFn,
       blockStyleFn,
+      blockSkeleton,
       customStyleFn,
       customStyleMap,
       editorState,
@@ -377,6 +378,7 @@ export default class DraftEditor extends React.Component<
       blockRenderMap,
       blockRendererFn,
       blockStyleFn,
+      blockSkeleton,
       customStyleMap: {
         ...DefaultDraftInlineStyle,
         ...customStyleMap,
@@ -471,7 +473,7 @@ export default class DraftEditor extends React.Component<
               all DraftEditorLeaf nodes so it's first in postorder traversal.
             */}
             <UpdateDraftEditorFlags editor={this} editorState={editorState} />
-            <DraftEditorContents
+            <DraftEditorSkeletonContents
               {...editorContentsProps}
               key={'contents' + this.state.contentsKey}
             />