9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/tsconfig.test.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "allowJs": true,
4 | "esModuleInterop": true,
5 | "strict": false
6 | },
7 | "include": ["./libdefs", "./packages"],
8 | "exclude": [
9 | "./libdefs/*.js",
10 | "**/dist/**",
11 | "**/npm/**",
12 | "**/node_modules/**",
13 | "./packages/lexical-devtools/**"
14 | ],
15 | "extends": "./tsconfig.json"
16 | }
17 |
--------------------------------------------------------------------------------
/examples/react-rich-collab/app.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | React.js Collaborative Lexical Example
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/examples/react-rich-collab/public/icons/arrow-clockwise.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-website/docs/getting-started/supported-browsers.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 4
3 | ---
4 |
5 | # Supported Browsers
6 |
7 | > Note: Lexical does not support Internet Explorer or legacy versions of Edge.
8 |
9 | - Firefox 52+
10 | - Chrome 49+
11 | - Edge 79+ (when Edge switched to Chromium)
12 | - Safari 11+
13 | - iOS 11+ (Safari)
14 | - iPad OS 13+ (Safari)
15 | - Android Chrome 72+
16 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/file-image.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/plus-slash-minus.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-astro-react/.gitignore:
--------------------------------------------------------------------------------
1 | .vscode
2 |
3 | # build output
4 | dist/
5 |
6 | # generated types
7 | .astro/
8 |
9 | # dependencies
10 | node_modules/
11 |
12 | # logs
13 | npm-debug.log*
14 | yarn-debug.log*
15 | yarn-error.log*
16 | pnpm-debug.log*
17 |
18 | # environment variables
19 | .env
20 | .env.production
21 |
22 | # macOS-specific files
23 | .DS_Store
24 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-nextjs/postcss.config.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | module.exports = {
10 | plugins: {
11 | tailwindcss: {},
12 | autoprefixer: {},
13 | },
14 | };
15 |
--------------------------------------------------------------------------------
/examples/react-plain-text/icons/arrow-counterclockwise.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/react-rich/public/icons/arrow-counterclockwise.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/react-table/public/icons/arrow-counterclockwise.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/link.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/mic.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-react/flow/LexicalHorizontalRulePlugin.js.flow:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | * @flow strict
8 | */
9 |
10 | type Props = $ReadOnly<{}>;
11 |
12 | declare export function HorizontalRulePlugin(props: Props): null;
13 |
--------------------------------------------------------------------------------
/packages/lexical-website/.gitignore:
--------------------------------------------------------------------------------
1 | # Dependencies
2 | /node_modules
3 |
4 | # Production
5 | /build
6 |
7 | # Generated files
8 | .docusaurus
9 | .cache-loader
10 | /docs/api
11 | /docs/packages
12 |
13 | # Misc
14 | .DS_Store
15 | .env.local
16 | .env.development.local
17 | .env.test.local
18 | .env.production.local
19 |
20 | npm-debug.log*
21 | yarn-debug.log*
22 | yarn-error.log*
23 | /fb/sdoc-cache.json
24 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-nextjs/public/icons/type-underline.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/react-rich-collab/public/icons/arrow-counterclockwise.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-react/flow/LexicalCharacterLimitPlugin.js.flow:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | * @flow strict
8 | */
9 |
10 | declare export function CharacterLimitPlugin(props: {
11 | charset: 'UTF-8' | 'UTF-16',
12 | }): React.Node;
13 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-astro-react/public/icons/type-underline.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-sveltekit-vanilla-js/vite.config.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | import { sveltekit } from '@sveltejs/kit/vite';
10 |
11 | export default {
12 | plugins: [sveltekit()],
13 | };
14 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/justify.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/text-left.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/plugins/CodeActionMenuPlugin/components/PrettierButton/index.css:
--------------------------------------------------------------------------------
1 | .code-action-menu-container .prettier-wrapper {
2 | position: relative;
3 | }
4 |
5 | .code-action-menu-container .prettier-wrapper .code-error-tips {
6 | padding: 5px;
7 | border-radius: 4px;
8 | color: #fff;
9 | background: #222;
10 | margin-top: 4px;
11 | position: absolute;
12 | top: 26px;
13 | right: 0;
14 | }
15 |
--------------------------------------------------------------------------------
/packages/lexical-react/flow/LexicalSelectionAlwaysOnDisplay.js.flow:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | * @flow strict
8 | */
9 |
10 | /**
11 | * LexicalSelectionAlwaysOnDisplay
12 | */
13 | declare export function SelectionAlwaysOnDisplay(): null;
14 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-nextjs/public/icons/type-italic.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/eslint-plugin/src/rules/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | 'use strict';
10 |
11 | const noOptionalChaining = require('./no-optional-chaining');
12 |
13 | module.exports = {
14 | 'no-optional-chaining': noOptionalChaining,
15 | };
16 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/text-center.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/text-right.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/upload.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/utils/joinClasses.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | export default function joinClasses(
10 | ...args: Array
11 | ) {
12 | return args.filter(Boolean).join(' ');
13 | }
14 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-astro-react/public/icons/type-italic.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/3-columns.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/download.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/text-paragraph.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-react/flow/LexicalClearEditorPlugin.js.flow:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | * @flow strict
8 | */
9 |
10 | type Props = $ReadOnly<{
11 | onClear?: () => void,
12 | }>;
13 |
14 | declare export function ClearEditorPlugin(Props): React.Node;
15 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-nextjs/public/icons/arrow-clockwise.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/react-rich/vite.config.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 | import react from '@vitejs/plugin-react';
9 | import {defineConfig} from 'vite';
10 |
11 | // https://vitejs.dev/config/
12 | export default defineConfig({
13 | plugins: [react()],
14 | });
15 |
--------------------------------------------------------------------------------
/packages/lexical-devtools/safari-xcode/Lexical Developer Tools/Lexical Developer Tools/Info.plist:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | ITSAppUsesNonExemptEncryption
6 |
7 | SFSafariWebExtensionConverterVersion
8 | 15.3
9 |
10 |
11 |
--------------------------------------------------------------------------------
/packages/lexical-hashtag/src/index.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | import {
10 | $createHashtagNode,
11 | $isHashtagNode,
12 | HashtagNode,
13 | } from './LexicalHashtagNode';
14 |
15 | export {$createHashtagNode, $isHashtagNode, HashtagNode};
16 |
--------------------------------------------------------------------------------
/packages/lexical-plain-text/flow/LexicalPlainText.js.flow:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | * @flow strict
8 | */
9 | import type {EditorState, LexicalEditor} from 'lexical';
10 |
11 | declare export function registerPlainText(editor: LexicalEditor): () => void;
12 |
--------------------------------------------------------------------------------
/packages/lexical-react/flow/LexicalLinkPlugin.js.flow:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | * @flow strict
8 | */
9 |
10 | type Props = $ReadOnly<{
11 | validateUrl?: (url: string) => boolean,
12 | }>;
13 |
14 | declare export function LinkPlugin(props: Props): null;
15 |
--------------------------------------------------------------------------------
/packages/shared/src/canUseDOM.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | export const CAN_USE_DOM: boolean =
10 | typeof window !== 'undefined' &&
11 | typeof window.document !== 'undefined' &&
12 | typeof window.document.createElement !== 'undefined';
13 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-astro-react/public/icons/arrow-clockwise.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/react-rich/public/icons/justify.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/react-rich/public/icons/text-left.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/react-table/public/icons/justify.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/react-table/public/icons/text-left.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/react-table/vite.config.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 | import react from '@vitejs/plugin-react';
9 | import {defineConfig} from 'vite';
10 |
11 | // https://vitejs.dev/config/
12 | export default defineConfig({
13 | plugins: [react()],
14 | });
15 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/copy.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/sticky.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-website/i18n/en/docusaurus-plugin-content-blog/options.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": {
3 | "message": "Blog",
4 | "description": "The title for the blog used in SEO"
5 | },
6 | "description": {
7 | "message": "Blog",
8 | "description": "The description for the blog used in SEO"
9 | },
10 | "sidebar.title": {
11 | "message": "Recent posts",
12 | "description": "The label for the left sidebar"
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-nextjs/public/icons/arrow-counterclockwise.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/react-plain-text/vite.config.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 | import react from '@vitejs/plugin-react';
9 | import {defineConfig} from 'vite';
10 |
11 | // https://vitejs.dev/config/
12 | export default defineConfig({
13 | plugins: [react()],
14 | });
15 |
--------------------------------------------------------------------------------
/examples/react-rich-collab/public/icons/justify.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/react-rich-collab/public/icons/text-left.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/react-rich/public/icons/text-center.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/react-rich/public/icons/text-right.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/react-table/public/icons/text-center.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/react-table/public/icons/text-right.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-devtools/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | .output
12 | stats.html
13 | stats-*.json
14 | .wxt
15 | web-ext.config.ts
16 | .env.secrets
17 |
18 | # Editor directories and files
19 | .vscode/*
20 | !.vscode/extensions.json
21 | .idea
22 | .DS_Store
23 | *.suo
24 | *.ntvs*
25 | *.njsproj
26 | *.sln
27 | *.sw?
28 |
--------------------------------------------------------------------------------
/packages/lexical-file/src/index.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | export {
10 | editorStateFromSerializedDocument,
11 | exportFile,
12 | importFile,
13 | type SerializedDocument,
14 | serializedDocumentFromEditorState,
15 | } from './fileImportExport';
16 |
--------------------------------------------------------------------------------
/packages/lexical-react/flow/LexicalClickableLinkPlugin.js.flow:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | * @flow strict
8 | */
9 |
10 | declare export function ClickableLinkPlugin({
11 | newTab?: boolean,
12 | }): null;
13 |
14 | declare export default typeof ClickableLinkPlugin;
15 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-astro-react/public/icons/arrow-counterclockwise.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-nextjs/next.config.mjs:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | /** @type {import('next').NextConfig} */
10 | const nextConfig = {
11 | eslint: {ignoreDuringBuilds: true},
12 | };
13 |
14 | export default nextConfig;
15 |
--------------------------------------------------------------------------------
/examples/react-rich-collab/public/icons/text-right.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/react-rich/public/icons/text-paragraph.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/react-table/public/icons/text-paragraph.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-devtools/safari-xcode/Lexical Developer Tools/Config.xcconfig:
--------------------------------------------------------------------------------
1 | //
2 | // Config.xcconfig
3 | // Lexical Developer Tools
4 | //
5 | // Created by Vladlen Fedosov on 5/21/24.
6 | //
7 |
8 | // Configuration settings file format documentation can be found at:
9 | // https://help.apple.com/xcode/#/dev745c5c974
10 |
11 | VERSION=0.0.0
12 |
13 | // This file is generated during npm run safari:archive
14 | #include? "VersioningConfig.xcconfig"
15 |
--------------------------------------------------------------------------------
/packages/lexical-react/flow/LexicalAutoFocusPlugin.js.flow:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | * @flow strict
8 | */
9 |
10 | type Props = $ReadOnly<{
11 | defaultSelection?: 'rootStart' | 'rootEnd',
12 | }>;
13 |
14 | declare export function AutoFocusPlugin(props: Props): null;
15 |
--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | module.exports = {
4 | bracketSpacing: false,
5 | singleQuote: true,
6 | bracketSameLine: true,
7 | printWidth: 80,
8 | trailingComma: 'all',
9 | htmlWhitespaceSensitivity: 'ignore',
10 | attributeGroups: ['^class$', '^(id|name)$', '$DEFAULT', '^aria-', '^data-'],
11 | attributeSort: 'ASC',
12 | plugins: [
13 | 'prettier-plugin-tailwindcss',
14 | 'prettier-plugin-organize-attributes',
15 | ],
16 | };
17 |
--------------------------------------------------------------------------------
/examples/react-rich-collab/public/icons/text-center.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/react-rich-collab/public/icons/text-paragraph.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-devtools/src/entrypoints/devtools/main.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | // Create the panel which appears within the browser devtools
10 | browser.devtools.panels.create(
11 | 'Lexical',
12 | '/icon/logo.svg',
13 | 'devtools-panel.html',
14 | );
15 |
--------------------------------------------------------------------------------
/packages/lexical-devtools/src/entrypoints/popup/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Lexical DevTools
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/list-ul.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/react-rich-collab/README.md:
--------------------------------------------------------------------------------
1 | # Basic Vanilla JS example
2 |
3 | Here we have simplest Lexical collaboration mode setup. Use it as a starting point for your own projects as well as platform for bug reporting!
4 |
5 | **Run it locally:** `npm i && npm run dev:local`
6 |
7 | [](https://stackblitz.com/github/facebook/lexical/tree/fix/collab_example/examples/react-rich-collab?file=src/main.ts)
8 |
--------------------------------------------------------------------------------
/examples/react-rich/README.md:
--------------------------------------------------------------------------------
1 | # React Rich Text example
2 |
3 | Here we have simplest Lexical setup in rich text configuration (`@lexical/rich-text`) with history (`@lexical/history`) and accessibility (`@lexical/dragon`) features enabled.
4 |
5 | **Run it locally:** `npm i && npm run dev`
6 |
7 | [](https://stackblitz.com/github/facebook/lexical/tree/main/examples/react-rich?file=src/main.tsx)
8 |
--------------------------------------------------------------------------------
/examples/vanilla-js/README.md:
--------------------------------------------------------------------------------
1 | # Basic Vanilla JS example
2 |
3 | Here we have simplest Lexical setup in rich text configuration (`@lexical/rich-text`) with history (`@lexical/history`) and accessibility (`@lexical/dragon`) features enabled.
4 |
5 | **Run it locally:** `npm i && npm run dev`
6 |
7 | [](https://stackblitz.com/github/facebook/lexical/tree/main/examples/vanilla-js?file=src/main.ts)
8 |
--------------------------------------------------------------------------------
/packages/lexical-devtools/safari-xcode/Lexical Developer Tools/Lexical Developer Tools/Lexical_Developer_Tools.entitlements:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | com.apple.security.app-sandbox
6 |
7 | com.apple.security.files.user-selected.read-only
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/image-broken.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/packages/lexical-react/flow/useLexicalNodeSelection.js.flow:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | * @flow strict
8 | */
9 |
10 | import type {NodeKey} from 'lexical';
11 |
12 | declare export function useLexicalNodeSelection(
13 | key: NodeKey,
14 | ): [boolean, (boolean) => void, () => void];
15 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-sveltekit-vanilla-js/src/app.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | %sveltekit.head%
8 |
9 |
10 |
%sveltekit.body%
11 |
12 |
13 |
--------------------------------------------------------------------------------
/packages/lexical-devtools/safari-xcode/Lexical Developer Tools/Lexical Developer Tools/Assets.xcassets/LargeIcon.imageset/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "images": [
3 | {
4 | "idiom": "universal",
5 | "scale": "1x"
6 | },
7 | {
8 | "idiom": "universal",
9 | "scale": "2x"
10 | },
11 | {
12 | "idiom": "universal",
13 | "scale": "3x"
14 | }
15 | ],
16 | "info": {
17 | "author": "xcode",
18 | "version": 1
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/square-check.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/shared/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "shared",
3 | "private": "true",
4 | "keywords": [
5 | "react",
6 | "lexical",
7 | "editor",
8 | "rich-text"
9 | ],
10 | "license": "MIT",
11 | "version": "0.22.0",
12 | "dependencies": {
13 | "lexical": "0.22.0"
14 | },
15 | "repository": {
16 | "type": "git",
17 | "url": "https://github.com/facebook/lexical",
18 | "directory": "packages/shared"
19 | },
20 | "sideEffects": false
21 | }
22 |
--------------------------------------------------------------------------------
/examples/react-plain-text/README.md:
--------------------------------------------------------------------------------
1 | # React Plain Text Lexical example
2 |
3 | Here we have simplest Lexical setup in plaintext configuration (`@lexical/plain-text`) with history (`@lexical/history`) and accessibility (`@lexical/dragon`) features enabled.
4 |
5 | **Run it locally:** `npm i && npm run dev`
6 |
7 | [](https://stackblitz.com/github/facebook/lexical/tree/main/examples/react-plain-text?file=src/main.tsx)
8 |
--------------------------------------------------------------------------------
/examples/react-table/README.md:
--------------------------------------------------------------------------------
1 | # React Table Plugin example
2 |
3 | Here we have simplest Lexical Table Plugin setup in rich text configuration (`@lexical/rich-text`) with history (`@lexical/history`) and accessibility (`@lexical/dragon`) features enabled.
4 |
5 | **Run it locally:** `npm i && npm run dev`
6 |
7 | [](https://stackblitz.com/github/facebook/lexical/tree/main/examples/react-table?file=src/main.tsx)
8 |
--------------------------------------------------------------------------------
/libdefs/react.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | // Flow comes with a pretty good library definitions for React, and it
10 | // includes a type for useRef but no definition for the ref object itself.
11 |
12 | // eslint-disable-next-line strict
13 | declare type RefObject = {current: null | T};
14 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/chat-right-dots.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/type-bold.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-react/flow/useLexicalIsTextContentEmpty.js.flow:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | * @flow strict
8 | */
9 |
10 | import type {LexicalEditor} from 'lexical';
11 |
12 | declare export function useLexicalIsTextContentEmpty(
13 | editor: LexicalEditor,
14 | trim?: boolean,
15 | ): boolean;
16 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-nextjs/public/icons/justify.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-nextjs/public/icons/text-left.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-nextjs/public/icons/text-right.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-table/src/constants.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | export const PIXEL_VALUE_REG_EXP = /^(\d+(?:\.\d+)?)px$/;
10 |
11 | // .PlaygroundEditorTheme__tableCell width value from
12 | // packages/lexical-playground/src/themes/PlaygroundEditorTheme.css
13 | export const COLUMN_WIDTH = 75;
14 |
--------------------------------------------------------------------------------
/packages/lexical-website/blog/2019-05-28-first-blog-post.md:
--------------------------------------------------------------------------------
1 | ---
2 | slug: first-blog-post
3 | title: First Blog Post
4 | authors:
5 | name: Gao Wei
6 | title: Docusaurus Core Team
7 | url: https://github.com/wgao19
8 | image_url: https://github.com/wgao19.png
9 | tags: [hola, docusaurus]
10 | ---
11 |
12 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
13 |
--------------------------------------------------------------------------------
/packages/lexical-website/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | /* eslint-disable strict */
10 |
11 | /** @type {import('tailwindcss').Config} */
12 | module.exports = {
13 | content: ['src/**/*.{js,jsx,ts,tsx}'],
14 | plugins: [],
15 | theme: {
16 | extend: {},
17 | },
18 | };
19 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-astro-react/public/icons/justify.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-astro-react/public/icons/text-left.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-astro-react/public/icons/text-right.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-nextjs/public/icons/text-center.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-devtools/safari-xcode/Lexical Developer Tools/Lexical Developer Tools Extension/Lexical_Developer_Tools_Extension.entitlements:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | com.apple.security.app-sandbox
6 |
7 | com.apple.security.files.user-selected.read-only
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/packages/lexical-devtools/src/public/inspect.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/type-h2.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-react/flow/LexicalTablePlugin.js.flow:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | * @flow strict
8 | */
9 |
10 | type Props = $ReadOnly<{
11 | hasCellMerge?: boolean,
12 | hasCellBackgroundColor?: boolean,
13 | hasTabHandler?: boolean,
14 | }>;
15 | declare export function TablePlugin(props: Props): null;
16 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-astro-react/public/icons/text-center.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-nextjs/public/icons/text-paragraph.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-eslint-plugin/LexicalEslintPlugin.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | 'use strict';
10 | // This file is here for bootstrapping reasons so we can use it without
11 | // building anything and still comply with the monorepo conventions
12 | module.exports = require('./src/LexicalEslintPlugin.js');
13 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-astro-react/public/icons/text-paragraph.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/react-rich/public/icons/type-bold.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/react-table/public/icons/type-bold.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-dragon/flow/LexicalDragon.js.flow:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | * @flow strict
8 | */
9 | import type {LexicalEditor} from 'lexical';
10 | import {$getSelection, $isRangeSelection, $isTextNode} from 'lexical';
11 | declare export function registerDragonSupport(
12 | editor: LexicalEditor,
13 | ): () => void;
14 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/clipboard.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/react-rich-collab/public/icons/type-bold.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-website/static/img/stack-overflow.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/packages/shared/src/warnOnlyOnce.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | export default function warnOnlyOnce(message: string) {
10 | if (!__DEV__) {
11 | return;
12 | }
13 | let run = false;
14 | return () => {
15 | if (!run) {
16 | console.warn(message);
17 | }
18 | run = true;
19 | };
20 | }
21 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-astro-react/astro.config.mjs:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | import { defineConfig } from "astro/config";
10 |
11 | import react from "@astrojs/react";
12 |
13 | // https://astro.build/config
14 | export default defineConfig({
15 | integrations: [react()],
16 | });
17 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/hooks/useFlashMessage.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | import {
10 | type ShowFlashMessage,
11 | useFlashMessageContext,
12 | } from '../context/FlashMessageContext';
13 |
14 | export default function useFlashMessage(): ShowFlashMessage {
15 | return useFlashMessageContext();
16 | }
17 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/outdent.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/scissors.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-react/flow/LexicalTabIndentationPlugin.js.flow:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | * @flow strict
8 | */
9 |
10 | import type {LexicalEditor} from 'lexical';
11 |
12 | declare export function registerTabIndentation(
13 | editor: LexicalEditor,
14 | ): () => void;
15 |
16 | declare export function TabIndentationPlugin(): null;
17 |
--------------------------------------------------------------------------------
/scripts/shared/readMonorepoPackageJson.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 | // @ts-check
9 | 'use strict';
10 |
11 | const fs = require('fs-extra');
12 | const path = require('node:path');
13 |
14 | module.exports = function readMonorepoPackageJson() {
15 | return fs.readJsonSync(path.resolve(__dirname, '../../package.json'));
16 | };
17 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/indent.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-devtools/safari-xcode/Lexical Developer Tools/Lexical Developer Tools/Lexical Developer Tools.entitlements:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | com.apple.security.app-sandbox
6 |
7 | com.apple.security.files.user-selected.read-only
8 |
9 | com.apple.security.network.client
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/packages/lexical-react/flow/LexicalTableOfContents.js.flow:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | * @flow strict
8 | */
9 |
10 | import {TableOfContentsPlugin} from '@lexical/react/LexicalTableOfContentsPlugin';
11 |
12 | /** @deprecated use the named export {@link LexicalTableOfContentsPlugin} */
13 | declare export default typeof TableOfContentsPlugin;
14 |
--------------------------------------------------------------------------------
/packages/lexical-text/src/rootTextContent.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 | import {$getRoot} from 'lexical';
9 |
10 | /**
11 | * Returns the root's text content.
12 | * @returns The root's text content.
13 | */
14 | export function $rootTextContent(): string {
15 | const root = $getRoot();
16 |
17 | return root.getTextContent();
18 | }
19 |
--------------------------------------------------------------------------------
/packages/lexical-website/src/css/tailwind.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | /* TODO: This base reset is commented out because it unstyles many elements on
9 | * the home and docs pages. When the full website redesign happens, this should
10 | * be reapplied.
11 | */
12 | /* @tailwind base; */
13 | @tailwind components;
14 | @tailwind utilities;
15 |
--------------------------------------------------------------------------------
/packages/lexical-website/src/components/Gallery/GalleryPage.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | import React from 'react';
10 |
11 | import GalleryCards from './GalleryCards';
12 |
13 | export default function GalleryPage() {
14 | return (
15 |
16 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/file-earmark-text.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-react/flow/useLexicalEditable.js.flow:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | * @flow strict
8 | */
9 |
10 | import type {LexicalEditor} from 'lexical';
11 |
12 | declare export function useLexicalEditable(): boolean;
13 |
14 | /** @deprecated use the named export {@link useLexicalEditable} */
15 | declare export default typeof useLexicalEditable;
16 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-nextjs/public/icons/type-bold.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-astro-react/public/icons/type-bold.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-website/blog/authors.yml:
--------------------------------------------------------------------------------
1 | endi:
2 | name: Endilie Yacop Sucipto
3 | title: Maintainer of Docusaurus
4 | url: https://github.com/endiliey
5 | image_url: https://github.com/endiliey.png
6 |
7 | yangshun:
8 | name: Yangshun Tay
9 | title: Front End Engineer @ Facebook
10 | url: https://github.com/yangshun
11 | image_url: https://github.com/yangshun.png
12 |
13 | slorber:
14 | name: Sébastien Lorber
15 | title: Docusaurus maintainer
16 | url: https://sebastienlorber.com
17 | image_url: https://github.com/slorber.png
18 |
--------------------------------------------------------------------------------
/packages/lexical-react/flow/LexicalMarkdownShortcutPlugin.js.flow:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | * @flow strict
8 | */
9 |
10 | import type {Transformer} from '@lexical/markdown';
11 |
12 | declare export var DEFAULT_TRANSFORMERS: Array;
13 |
14 | declare export function MarkdownShortcutPlugin({
15 | transformers?: Array,
16 | }): React.Node;
17 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/chat-left-text.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-react/src/shared/useList.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | import type {LexicalEditor} from 'lexical';
10 |
11 | import {registerList} from '@lexical/list';
12 | import {useEffect} from 'react';
13 |
14 | export function useList(editor: LexicalEditor): void {
15 | useEffect(() => {
16 | return registerList(editor);
17 | }, [editor]);
18 | }
19 |
--------------------------------------------------------------------------------
/packages/lexical-website/src/components/ImageSwitcher/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | import {useColorMode} from '@docusaurus/theme-common';
10 |
11 | export default function ImageSwitcher({light, dark}) {
12 | const Light = light;
13 | const Dark = dark;
14 | const {isDarkTheme} = useColorMode();
15 | return isDarkTheme ? : ;
16 | }
17 |
--------------------------------------------------------------------------------
/packages/lexical-file/flow/LexicalFile.js.flow:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | * @flow strict
8 | *
9 | */
10 |
11 | import type {LexicalEditor} from 'lexical';
12 |
13 | declare export function importFile(editor: LexicalEditor): void;
14 | declare export function exportFile(
15 | editor: LexicalEditor,
16 | config?: $ReadOnly<{fileName?: string, source?: string}>,
17 | ): void;
18 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/chat-right-text.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-devtools/src/utils/isLexicalNode.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | import {getEditorPropertyFromDOMNode} from 'lexical';
10 |
11 | import {LexicalHTMLElement} from '../types';
12 |
13 | export function isLexicalNode(
14 | node: LexicalHTMLElement | Element,
15 | ): node is LexicalHTMLElement {
16 | return getEditorPropertyFromDOMNode(node) !== undefined;
17 | }
18 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/user.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-website/blog/2021-08-01-mdx-blog-post.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | slug: mdx-blog-post
3 | title: MDX Blog Post
4 | authors: [slorber]
5 | tags: [docusaurus]
6 | ---
7 |
8 | Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/).
9 |
10 | :::tip
11 |
12 | Use the power of React to create interactive blog posts.
13 |
14 | ```js
15 |
16 | ```
17 |
18 |
19 |
20 | :::
21 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/trash.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-nextjs/app/page.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | import EditorUseClient from "./EditorUseClient";
10 |
11 | export const dynamic = 'force-dynamic';
12 |
13 | export default function Home() {
14 | return (
15 |
16 |
Next.js Rich Text Lexical Example
17 |
18 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/themes/StickyEditorTheme.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | import type {EditorThemeClasses} from 'lexical';
10 |
11 | import './StickyEditorTheme.css';
12 |
13 | import baseTheme from './PlaygroundEditorTheme';
14 |
15 | const theme: EditorThemeClasses = {
16 | ...baseTheme,
17 | paragraph: 'StickyEditorTheme__paragraph',
18 | };
19 |
20 | export default theme;
21 |
--------------------------------------------------------------------------------
/examples/vanilla-js/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@lexical/vanilla-js-example",
3 | "private": true,
4 | "version": "0.22.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "tsc && vite build",
9 | "preview": "vite preview"
10 | },
11 | "dependencies": {
12 | "@lexical/dragon": "0.22.0",
13 | "@lexical/history": "0.22.0",
14 | "@lexical/rich-text": "0.22.0",
15 | "@lexical/utils": "0.22.0",
16 | "lexical": "0.22.0"
17 | },
18 | "devDependencies": {
19 | "typescript": "^5.2.2",
20 | "vite": "^5.2.11"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/plugins/CollapsiblePlugin/CollapsibleUtils.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | export function setDomHiddenUntilFound(dom: HTMLElement): void {
10 | // @ts-expect-error
11 | dom.hidden = 'until-found';
12 | }
13 |
14 | export function domOnBeforeMatch(dom: HTMLElement, callback: () => void): void {
15 | // @ts-expect-error
16 | dom.onbeforematch = callback;
17 | }
18 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/themes/CommentEditorTheme.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | import type {EditorThemeClasses} from 'lexical';
10 |
11 | import './CommentEditorTheme.css';
12 |
13 | import baseTheme from './PlaygroundEditorTheme';
14 |
15 | const theme: EditorThemeClasses = {
16 | ...baseTheme,
17 | paragraph: 'CommentEditorTheme__paragraph',
18 | };
19 |
20 | export default theme;
21 |
--------------------------------------------------------------------------------
/packages/lexical-website/static/img/see-api-documentation.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/react-rich-collab/src/main.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 | import './styles.css';
9 |
10 | import React from 'react';
11 | import ReactDOM from 'react-dom/client';
12 |
13 | import App from './App.tsx';
14 |
15 | ReactDOM.createRoot(document.getElementById('root')!).render(
16 |
17 |
18 |
19 |
20 | ,
21 | );
22 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/type-strikethrough.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-nextjs/playwright.config.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | import type { PlaywrightTestConfig } from '@playwright/test';
10 |
11 | const config: PlaywrightTestConfig = {
12 | webServer: {
13 | command: 'npm run start',
14 | port: 3000
15 | },
16 | testDir: 'tests',
17 | testMatch: /(.+\.)?(test|spec)\.[jt]s/
18 | };
19 |
20 | export default config;
21 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/pencil-fill.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-react/flow/LexicalOnChangePlugin.js.flow:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | * @flow strict
8 | */
9 |
10 | import type {EditorState, LexicalEditor} from 'lexical';
11 |
12 | declare export function OnChangePlugin({
13 | ignoreHistoryMergeTagChange?: boolean,
14 | ignoreSelectionChange?: boolean,
15 | onChange: (editorState: EditorState, editor: LexicalEditor, tags: Set) => void,
16 | }): null;
17 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-astro-react/playwright.config.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | import type { PlaywrightTestConfig } from '@playwright/test';
10 |
11 | const config: PlaywrightTestConfig = {
12 | webServer: {
13 | command: 'npm run preview',
14 | port: 4321
15 | },
16 | testDir: 'tests',
17 | testMatch: /(.+\.)?(test|spec)\.[jt]s/
18 | };
19 |
20 | export default config;
21 |
--------------------------------------------------------------------------------
/.github/workflows/tests.yml:
--------------------------------------------------------------------------------
1 | name: Lexical Tests
2 |
3 | on:
4 | push:
5 | branches:
6 | - main
7 | paths-ignore:
8 | - 'examples/**'
9 | - 'packages/lexical-website/**'
10 | pull_request:
11 | types: [opened, synchronize, reopened]
12 | merge_group:
13 |
14 | concurrency:
15 | group: ${{ github.workflow }}-${{ github.ref }}
16 | cancel-in-progress: true
17 |
18 | jobs:
19 | core-tests:
20 | uses: ./.github/workflows/call-core-tests.yml
21 |
22 | e2e-tests:
23 | if: github.repository_owner == 'facebook'
24 | uses: ./.github/workflows/call-e2e-canary-tests.yml
25 |
--------------------------------------------------------------------------------
/packages/lexical-devtools/src/entrypoints/injected/utils/queryLexicalNodes.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 | import {LexicalHTMLElement} from '../../../types';
9 | import {isLexicalNode} from '../../../utils/isLexicalNode';
10 |
11 | export default function queryLexicalNodes(): LexicalHTMLElement[] {
12 | return Array.from(
13 | document.querySelectorAll('div[data-lexical-editor]'),
14 | ).filter(isLexicalNode);
15 | }
16 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/ui/Dialog.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | .DialogActions {
10 | display: flex;
11 | flex-direction: row;
12 | justify-content: right;
13 | margin-top: 20px;
14 | }
15 |
16 | .DialogButtonsList {
17 | display: flex;
18 | flex-direction: column;
19 | justify-content: right;
20 | margin-top: 20px;
21 | }
22 |
23 | .DialogButtonsList button {
24 | margin-bottom: 20px;
25 | }
26 |
--------------------------------------------------------------------------------
/packages/lexical-react/flow/useLexicalTextEntity.js.flow:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | * @flow strict
8 | */
9 |
10 | import type {TextNode} from 'lexical';
11 |
12 | export type EntityMatch = {end: number, start: number};
13 |
14 | declare export function useLexicalTextEntity(
15 | getMatch: (text: string) => null | EntityMatch,
16 | targetNode: Class,
17 | createNode: (textNode: TextNode) => N,
18 | ): void;
19 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-sveltekit-vanilla-js/playwright.config.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | import type { PlaywrightTestConfig } from '@playwright/test';
10 |
11 | const config: PlaywrightTestConfig = {
12 | webServer: {
13 | command: 'npm run preview',
14 | port: 4173
15 | },
16 | testDir: 'tests',
17 | testMatch: /(.+\.)?(test|spec)\.[jt]s/
18 | };
19 |
20 | export default config;
21 |
--------------------------------------------------------------------------------
/examples/react-rich/public/icons/type-strikethrough.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/react-table/public/icons/type-strikethrough.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/vanilla-js-plugin/README.md:
--------------------------------------------------------------------------------
1 | # Basic Vanilla JS Plugin example
2 |
3 | Plugin that replaces smiles (`:)`, `:P`, etc...) with actual emojis (using [Node Transforms](https://lexical.dev/docs/concepts/transforms)) and uses own graphics for emojis rendering by creating our own custom node that extends [TextNode](https://lexical.dev/docs/concepts/nodes#textnode).
4 |
5 | **Run it locally:** `npm i && npm run dev`
6 |
7 | [](https://stackblitz.com/github/facebook/lexical/tree/main/examples/vanilla-js-plugin?file=src/emoji-plugin/EmojiPlugin.ts)
8 |
--------------------------------------------------------------------------------
/packages/lexical-eslint-plugin/src/index.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | /**
10 | * For bootstrapping reasons, this module is written in CJS JavaScript so no
11 | * compilation is necessary
12 | */
13 |
14 | import * as plugin from './LexicalEslintPlugin.js';
15 |
16 | export type {RulesOfLexicalOptions} from './rules/rules-of-lexical.js';
17 | // eslint-disable-next-line no-restricted-exports
18 | export default plugin;
19 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-nextjs/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 | .yarn/install-state.gz
8 |
9 | # testing
10 | /coverage
11 |
12 | # next.js
13 | /.next/
14 | /out/
15 |
16 | # production
17 | /build
18 |
19 | # misc
20 | .DS_Store
21 | *.pem
22 |
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 |
28 | # local env files
29 | .env*.local
30 |
31 | # vercel
32 | .vercel
33 |
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 |
--------------------------------------------------------------------------------
/eslint-plugin/src/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | 'use strict';
10 |
11 | const rules = require('./rules');
12 |
13 | module.exports = {
14 | configs: {
15 | all: {
16 | rules: {
17 | 'lexical/no-optional-chaining': 'error',
18 | },
19 | },
20 | recommended: {
21 | rules: {
22 | 'lexical/no-optional-chaining': 'error',
23 | },
24 | },
25 | },
26 | rules,
27 | };
28 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/plugins/DocsPlugin/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 | import * as React from 'react';
9 |
10 | export default function DocsPlugin(): JSX.Element {
11 | return (
12 |
13 |
18 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/packages/lexical-react/flow/LexicalEditorRefPlugin.js.flow:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | * @flow strict
8 | */
9 |
10 | import type {LexicalEditor} from 'lexical';
11 | // $FlowFixMe - Not able to type this with a flow extension
12 | import type {TRefFor} from 'CoreTypes.flow';
13 |
14 |
15 | type Props = $ReadOnly<{
16 | editorRef: TRefFor,
17 | }>;
18 |
19 | declare export function EditorRefPlugin(props: Props): null;
20 |
--------------------------------------------------------------------------------
/examples/react-rich-collab/public/icons/type-strikethrough.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/vanilla-js-plugin/vite.config.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 | import path from 'path';
9 | import {defineConfig} from 'vite';
10 |
11 | // https://vitejs.dev/config/
12 | export default defineConfig({
13 | resolve: {
14 | alias: {
15 | '@emoji-datasource-facebook': path.resolve(
16 | __dirname,
17 | 'node_modules/emoji-datasource-facebook/img/facebook/64/',
18 | ),
19 | },
20 | },
21 | });
22 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/plug-fill.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/type-h5.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.github/workflows/close-stale-pr.yml:
--------------------------------------------------------------------------------
1 | name: Close stale PR
2 | on:
3 | pull_request:
4 | types: labeled
5 | jobs:
6 | close-pr:
7 | if: github.event.label.name == 'stale-pr'
8 | permissions:
9 | pull-requests: write
10 | runs-on: ubuntu-latest
11 | steps:
12 | - run: gh pr close "$NUMBER" --comment "$COMMENT"
13 | env:
14 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
15 | GH_REPO: ${{ github.repository }}
16 | NUMBER: ${{ github.event.number }}
17 | COMMENT: >
18 | Closing this PR due to staleness! If there are new updates, please reopen the PR.
19 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-sveltekit-vanilla-js/src/app.d.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | // See https://kit.svelte.dev/docs/types#app
10 | // for information about these interfaces
11 | declare global {
12 | namespace App {
13 | // interface Error {}
14 | // interface Locals {}
15 | // interface PageData {}
16 | // interface PageState {}
17 | // interface Platform {}
18 | }
19 | }
20 |
21 | export {};
22 |
--------------------------------------------------------------------------------
/.github/workflows/call-integration-tests.yml:
--------------------------------------------------------------------------------
1 | name: Lexical Integration Tests
2 |
3 | on:
4 | workflow_call:
5 |
6 | jobs:
7 | integration:
8 | runs-on: ubuntu-latest
9 | strategy:
10 | matrix:
11 | node-version: [20.15.1]
12 | env:
13 | CI: true
14 | steps:
15 | - uses: actions/checkout@v4
16 | - name: Use Node.js ${{ matrix.node-version }}
17 | uses: actions/setup-node@v4
18 | with:
19 | node-version: ${{ matrix.node-version }}
20 | cache: npm
21 | - name: Install dependencies
22 | run: npm ci
23 | - run: npm run test-integration
24 |
--------------------------------------------------------------------------------
/libdefs/dom.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | // eslint-disable-next-line strict
10 | declare type WindowSelection = {
11 | anchorNode: Node | null,
12 | anchorOffset: number,
13 | focusNode: Node | null,
14 | focusOffset: number,
15 | isCollapsed: boolean,
16 | // Note that this is non-exhaustive, I just defined
17 | // what we use. Used MDN for reference:
18 | // https://developer.mozilla.org/en-US/docs/Web/API/Selection
19 | };
20 |
--------------------------------------------------------------------------------
/packages/lexical-devtools/safari-xcode/Lexical Developer Tools/Lexical Developer Tools Extension/Info.plist:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | ITSAppUsesNonExemptEncryption
6 |
7 | NSExtension
8 |
9 | NSExtensionPointIdentifier
10 | com.apple.Safari.web-extension
11 | NSExtensionPrincipalClass
12 | $(PRODUCT_MODULE_NAME).SafariWebExtensionHandler
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/packages/lexical-devtools/src/entrypoints/content/injectScript.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | import {PublicPath} from 'wxt/browser';
10 |
11 | export default function injectScript(src: PublicPath) {
12 | const s = document.createElement('script');
13 | s.src = browser.runtime.getURL(src);
14 | s.type = 'module'; // ESM module support
15 | s.onload = () => s.remove();
16 | (document.head || document.documentElement).append(s);
17 | }
18 |
--------------------------------------------------------------------------------
/packages/lexical-react/flow/LexicalTableOfContentsPlugin.js.flow:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | * @flow strict
8 | */
9 |
10 | import type {HeadingTagType} from '@lexical/rich-text';
11 | import type {LexicalEditor, NodeKey} from 'lexical';
12 |
13 | declare export function TableOfContentsPlugin({
14 | children: (
15 | tableOfContents: Array<[NodeKey, string, HeadingTagType]>,
16 | editor: LexicalEditor,
17 | ) => React.Node,
18 | }): React.Node;
19 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-astro-react/src/pages/index.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import Layout from '../layouts/Layout.astro';
3 | import App from '../components/App.tsx';
4 | import '../components/styles.css';
5 | ---
6 |
7 |
8 |
9 |
Astro React.js Rich Text Lexical Example
10 |
11 |
12 |
13 |
14 |
25 |
--------------------------------------------------------------------------------
/examples/react-table/src/main.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 | import './styles.css';
9 |
10 | import React from 'react';
11 | import ReactDOM from 'react-dom/client';
12 |
13 | import App from './App.tsx';
14 |
15 | ReactDOM.createRoot(document.getElementById('root')!).render(
16 |
17 |
18 |
Table Plugin Lexical Example
19 |
20 |
21 | ,
22 | );
23 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/camera.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/close.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/plugins/MarkdownShortcutPlugin/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | import {MarkdownShortcutPlugin} from '@lexical/react/LexicalMarkdownShortcutPlugin';
10 | import * as React from 'react';
11 |
12 | import {PLAYGROUND_TRANSFORMERS} from '../MarkdownTransformers';
13 |
14 | export default function MarkdownPlugin(): JSX.Element {
15 | return ;
16 | }
17 |
--------------------------------------------------------------------------------
/packages/lexical-website/docs/react/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_label: 'Introduction'
3 | ---
4 |
5 | # Lexical + React
6 |
7 | To make it easier for React users to implement rich-text editors, Lexical exposes a set of abstractions that aim to cover a wide range of use cases out-of-the-box.
8 |
9 |
12 | {`Getting Started Guide`}
13 |
14 |
15 | ## Supported Versions
16 |
17 | React 17+ (tested with React 18 and React 19 beta)
18 |
--------------------------------------------------------------------------------
/.github/workflows/call-e2e-canary-tests.yml:
--------------------------------------------------------------------------------
1 | name: Lexical e2e canary test
2 |
3 | on:
4 | workflow_call:
5 |
6 | jobs:
7 | canary:
8 | strategy:
9 | matrix:
10 | os: ['ubuntu-latest']
11 | node-version: [18.18.0]
12 | browser: ['chromium']
13 | editor-mode: ['rich-text']
14 | events-mode: ['modern-events']
15 | uses: ./.github/workflows/call-e2e-test.yml
16 | with:
17 | os: ${{ matrix.os }}
18 | node-version: ${{ matrix.node-version }}
19 | browser: ${{ matrix.browser }}
20 | editor-mode: ${{ matrix.editor-mode }}
21 | events-mode: ${{ matrix.events-mode }}
22 |
--------------------------------------------------------------------------------
/examples/react-rich/src/main.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 | import './styles.css';
9 |
10 | import React from 'react';
11 | import ReactDOM from 'react-dom/client';
12 |
13 | import App from './App.tsx';
14 |
15 | ReactDOM.createRoot(document.getElementById('root')!).render(
16 |
17 |
18 |
React.js Rich Text Lexical Example
19 |
20 |
21 | ,
22 | );
23 |
--------------------------------------------------------------------------------
/packages/lexical-plain-text/README.md:
--------------------------------------------------------------------------------
1 | # `@lexical/plain-text`
2 |
3 | This package provides a starting point for Lexical users by registering listeners for a set of basic commands that cover simple text-editing behavior such as entering text, deleting characters, copy + paste, or changing the selection with arrow keys.
4 |
5 | You can use this package as a starting point, and then add additional command listeners to customize the functionality of your editor. If you want to add rich-text features, such as headings, blockquotes, or formatted text, you may want to consider using [@lexical/rich-text](https://lexical.dev/docs/packages/lexical-rich-text) instead.
6 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/tweet.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/react-plain-text/src/main.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 | import './styles.css';
9 |
10 | import React from 'react';
11 | import ReactDOM from 'react-dom/client';
12 |
13 | import App from './App.tsx';
14 |
15 | ReactDOM.createRoot(document.getElementById('root')!).render(
16 |
17 |
18 |
React.js Plain Text Lexical Example
19 |
20 |
21 | ,
22 | );
23 |
--------------------------------------------------------------------------------
/examples/vanilla-js-plugin/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@lexical/vanilla-js-plugin-example",
3 | "private": true,
4 | "version": "0.22.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "tsc && vite build",
9 | "preview": "vite preview"
10 | },
11 | "dependencies": {
12 | "@lexical/dragon": "0.22.0",
13 | "@lexical/history": "0.22.0",
14 | "@lexical/rich-text": "0.22.0",
15 | "@lexical/utils": "0.22.0",
16 | "emoji-datasource-facebook": "15.1.2",
17 | "lexical": "0.22.0"
18 | },
19 | "devDependencies": {
20 | "typescript": "^5.2.2",
21 | "vite": "^5.2.11"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/examples/vanilla-js/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2020",
4 | "useDefineForClassFields": true,
5 | "module": "ESNext",
6 | "lib": ["ES2020", "DOM", "DOM.Iterable"],
7 | "skipLibCheck": true,
8 |
9 | /* Bundler mode */
10 | "moduleResolution": "bundler",
11 | "allowImportingTsExtensions": true,
12 | "resolveJsonModule": true,
13 | "isolatedModules": true,
14 | "noEmit": true,
15 |
16 | /* Linting */
17 | "strict": true,
18 | "noUnusedLocals": true,
19 | "noUnusedParameters": true,
20 | "noFallthroughCasesInSwitch": true
21 | },
22 | "include": ["src"]
23 | }
24 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/type-h3.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/shared/src/react-test-utils.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 | import * as React from 'react';
9 | import * as ReactTestUtils from 'react-dom/test-utils';
10 |
11 | /**
12 | * React 19 moved act from react-dom/test-utils to react
13 | * https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-react-dom-test-utils
14 | */
15 | export const act =
16 | 'act' in React
17 | ? (React.act as typeof ReactTestUtils.act)
18 | : ReactTestUtils.act;
19 |
--------------------------------------------------------------------------------
/examples/react-rich/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@lexical/react-rich-example",
3 | "private": true,
4 | "version": "0.22.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "tsc && vite build",
9 | "preview": "vite preview"
10 | },
11 | "dependencies": {
12 | "@lexical/react": "0.22.0",
13 | "lexical": "0.22.0",
14 | "react": "^18.2.0",
15 | "react-dom": "^18.2.0"
16 | },
17 | "devDependencies": {
18 | "@types/react": "^18.2.59",
19 | "@types/react-dom": "^18.2.19",
20 | "@vitejs/plugin-react": "^4.2.1",
21 | "typescript": "^5.2.2",
22 | "vite": "^5.2.11"
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/examples/react-table/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@lexical/react-table-example",
3 | "private": true,
4 | "version": "0.22.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "tsc && vite build",
9 | "preview": "vite preview"
10 | },
11 | "dependencies": {
12 | "@lexical/react": "0.22.0",
13 | "lexical": "0.22.0",
14 | "react": "^18.2.0",
15 | "react-dom": "^18.2.0"
16 | },
17 | "devDependencies": {
18 | "@types/react": "^18.2.59",
19 | "@types/react-dom": "^18.2.19",
20 | "@vitejs/plugin-react": "^4.2.1",
21 | "typescript": "^5.2.2",
22 | "vite": "^5.2.11"
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/examples/vanilla-js-plugin/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2020",
4 | "useDefineForClassFields": true,
5 | "module": "ESNext",
6 | "lib": ["ES2020", "DOM", "DOM.Iterable"],
7 | "skipLibCheck": true,
8 |
9 | /* Bundler mode */
10 | "moduleResolution": "bundler",
11 | "allowImportingTsExtensions": true,
12 | "resolveJsonModule": true,
13 | "isolatedModules": true,
14 | "noEmit": true,
15 |
16 | /* Linting */
17 | "strict": true,
18 | "noUnusedLocals": true,
19 | "noUnusedParameters": true,
20 | "noFallthroughCasesInSwitch": true
21 | },
22 | "include": ["src"]
23 | }
24 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/bg-color.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-nextjs/public/icons/type-strikethrough.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-astro-react/public/icons/type-strikethrough.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/scripts/clean.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | 'use strict';
10 |
11 | const fs = require('fs-extra');
12 | const path = require('node:path');
13 | const {packagesManager} = require('./shared/packagesManager');
14 |
15 | fs.removeSync(path.resolve(`./npm`));
16 | fs.removeSync(path.resolve(`./.ts-temp`));
17 | packagesManager
18 | .getPublicPackages()
19 | .forEach((pkg) =>
20 | ['dist', 'npm'].forEach((subdir) => fs.removeSync(pkg.resolve(subdir))),
21 | );
22 |
--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | # NOTE: In general this should be kept in sync with .eslintignore
2 |
3 | **/dist/**
4 | **/build/**
5 | **/npm/**
6 | !scripts/npm/**
7 | **/.output/**
8 | **/.browser-profiles/**
9 | !scripts/npm/**
10 | **/__tests__/integration/fixtures/**
11 | packages/**/.wxt/**
12 | packages/playwright
13 | packages/playwright-core
14 | packages/**/vite.config.js
15 | packages/**/vite.prod.config.js
16 | packages/lexical-website/docs/api
17 | packages/lexical-website/fb/*.json
18 | **/*.md
19 | **/*.js.flow
20 | **/node_modules
21 | .ts-temp
22 | flow-typed
23 | .github/CODEOWNERS
24 | .prettierignore
25 | **/.docusaurus
26 | /playwright-report
27 | test-results
28 |
--------------------------------------------------------------------------------
/examples/react-plain-text/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@lexical/react-plain-text-example",
3 | "private": true,
4 | "version": "0.22.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "tsc && vite build",
9 | "preview": "vite preview"
10 | },
11 | "dependencies": {
12 | "@lexical/react": "0.22.0",
13 | "lexical": "0.22.0",
14 | "react": "^18.2.0",
15 | "react-dom": "^18.2.0"
16 | },
17 | "devDependencies": {
18 | "@types/react": "^18.2.59",
19 | "@types/react-dom": "^18.2.19",
20 | "@vitejs/plugin-react": "^4.2.1",
21 | "typescript": "^5.2.2",
22 | "vite": "^5.2.11"
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/markdown.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-clipboard/src/index.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | export {
10 | $generateJSONFromSelectedNodes,
11 | $generateNodesFromSerializedNodes,
12 | $getClipboardDataFromSelection,
13 | $getHtmlContent,
14 | $getLexicalContent,
15 | $insertDataTransferForPlainText,
16 | $insertDataTransferForRichText,
17 | $insertGeneratedNodes,
18 | copyToClipboard,
19 | type LexicalClipboardData,
20 | setLexicalClipboardDataTransfer,
21 | } from './clipboard';
22 |
--------------------------------------------------------------------------------
/packages/lexical-playground/__tests__/unit/jsdom-with-compression-environment.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 | import {TestEnvironment} from 'jest-environment-jsdom';
9 |
10 | export default class JSDomWithCompressionEnvironment extends TestEnvironment {
11 | async setup() {
12 | await super.setup();
13 | Object.assign(this.global, {
14 | CompressionStream,
15 | DecompressionStream,
16 | TextDecoderStream,
17 | TextEncoder,
18 | });
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/plug.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lexical-react/flow/LexicalErrorBoundary.js.flow:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | * @flow strict
8 | */
9 |
10 | export type LexicalErrorBoundaryProps = $ReadOnly<{
11 | children: React.Node,
12 | onError: (error: Error) => void,
13 | }>;
14 |
15 | declare export function LexicalErrorBoundary(
16 | props: LexicalErrorBoundaryProps,
17 | ): React.Node;
18 |
19 | /** @deprecated use the named export {@link LexicalErrorBoundary} */
20 | export default typeof LexicalErrorBoundary;
21 |
--------------------------------------------------------------------------------
/packages/shared/src/normalizeClassNames.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | export default function normalizeClassNames(
10 | ...classNames: Array
11 | ): Array {
12 | const rval = [];
13 | for (const className of classNames) {
14 | if (className && typeof className === 'string') {
15 | for (const [s] of className.matchAll(/\S+/g)) {
16 | rval.push(s);
17 | }
18 | }
19 | }
20 | return rval;
21 | }
22 |
--------------------------------------------------------------------------------
/packages/shared/src/useLayoutEffect.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | import {useEffect, useLayoutEffect} from 'react';
10 | import {CAN_USE_DOM} from 'shared/canUseDOM';
11 |
12 | // This workaround is no longer necessary in React 19,
13 | // but we currently support React >=17.x
14 | // https://github.com/facebook/react/pull/26395
15 | const useLayoutEffectImpl: typeof useLayoutEffect = CAN_USE_DOM
16 | ? useLayoutEffect
17 | : useEffect;
18 |
19 | export default useLayoutEffectImpl;
20 |
--------------------------------------------------------------------------------
/examples/react-rich-collab/vite.config.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 | import react from '@vitejs/plugin-react';
9 | import {resolve} from 'path';
10 | import {defineConfig} from 'vite';
11 |
12 | // https://vitejs.dev/config/
13 | export default defineConfig({
14 | build: {
15 | rollupOptions: {
16 | input: {
17 | main: resolve(__dirname, 'index.html'),
18 | nested: resolve(__dirname, 'app.html'),
19 | },
20 | },
21 | },
22 | plugins: [react()],
23 | });
24 |
--------------------------------------------------------------------------------
/examples/vanilla-js/src/styles.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | .editor-wrapper {
10 | border: 2px solid gray;
11 | }
12 | #lexical-state {
13 | width: 100%;
14 | height: 300px;
15 | }
16 |
17 | .PlaygroundEditorTheme__quote {
18 | margin: 0;
19 | margin-left: 20px;
20 | margin-bottom: 10px;
21 | font-size: 15px;
22 | color: rgb(101, 103, 107);
23 | border-left-color: rgb(206, 208, 212);
24 | border-left-width: 4px;
25 | border-left-style: solid;
26 | padding-left: 16px;
27 | }
28 |
--------------------------------------------------------------------------------
/packages/lexical-react/flow/LexicalCollaborationContext.js.flow:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | * @flow strict
8 | */
9 |
10 | import type {Doc} from 'yjs';
11 |
12 | type CollaborationContextType = {
13 | clientID: number,
14 | color: string,
15 | isCollabActive: boolean,
16 | name: string,
17 | yjsDocMap: Map,
18 | };
19 |
20 | declare export var CollaborationContext: React$Context;
21 | declare export function useCollaborationContext(): CollaborationContextType;
22 |
--------------------------------------------------------------------------------
/packages/lexical-playground/esm/styles.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | .editor-wrapper {
10 | border: 2px solid gray;
11 | }
12 | #lexical-state {
13 | width: 100%;
14 | height: 300px;
15 | }
16 |
17 | .PlaygroundEditorTheme__quote {
18 | margin: 0;
19 | margin-left: 20px;
20 | margin-bottom: 10px;
21 | font-size: 15px;
22 | color: rgb(101, 103, 107);
23 | border-left-color: rgb(206, 208, 212);
24 | border-left-width: 4px;
25 | border-left-style: solid;
26 | padding-left: 16px;
27 | }
28 |
--------------------------------------------------------------------------------
/packages/lexical-react/flow/LexicalNestedComposer.js.flow:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | * @flow strict
8 | */
9 |
10 | import type {
11 | LexicalEditor,
12 | EditorThemeClasses,
13 | LexicalNode,
14 | LexicalNodeReplacement,
15 | } from 'lexical';
16 |
17 | declare export function LexicalNestedComposer({
18 | children: React.Node,
19 | initialEditor: LexicalEditor,
20 | initialTheme?: EditorThemeClasses,
21 | initialNodes?: $ReadOnlyArray | LexicalNodeReplacement>,
22 | }): React.Node;
23 |
--------------------------------------------------------------------------------
/packages/lexical-react/src/LexicalSelectionAlwaysOnDisplay.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
10 | import {selectionAlwaysOnDisplay} from '@lexical/utils';
11 | import {useEffect} from 'react';
12 |
13 | export function SelectionAlwaysOnDisplay(): null {
14 | const [editor] = useLexicalComposerContext();
15 | useEffect(() => {
16 | return selectionAlwaysOnDisplay(editor);
17 | }, [editor]);
18 |
19 | return null;
20 | }
21 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-astro-react/src/components/main.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 | import './styles.css';
9 |
10 | import React from 'react';
11 | import ReactDOM from 'react-dom/client';
12 |
13 | import App from './App.tsx';
14 |
15 | ReactDOM.createRoot(document.getElementById('root')!).render(
16 |
17 |
18 |
React.js Rich Text Lexical Example
19 |
20 |
21 | ,
22 | );
23 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-nextjs/tests/test.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | import { expect, test } from '@playwright/test';
10 |
11 | test('index page has expected h1 and lexical state', async ({ page }) => {
12 | await page.goto('/');
13 | await expect(
14 | page.getByRole('heading', { name: 'Next.js Rich Text Lexical Example' })
15 | ).toBeVisible();
16 | await expect(page.locator('.editor-input .editor-paragraph').first()).toContainText(/^Registered:.*typescript/);
17 | });
18 |
--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | 'use strict';
10 |
11 | module.exports = {
12 | plugins: [
13 | [
14 | require('./scripts/error-codes/transform-error-messages'),
15 | {noMinify: true},
16 | ],
17 | ],
18 | presets: [
19 | [
20 | '@babel/preset-env',
21 | {
22 | targets: {
23 | node: 'current',
24 | },
25 | },
26 | ],
27 | ['@babel/preset-react', {runtime: 'automatic'}],
28 | '@babel/preset-flow',
29 | ],
30 | };
31 |
--------------------------------------------------------------------------------
/packages/lexical-playground/src/images/icons/comments.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-astro-react/tests/test.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | import { expect, test } from '@playwright/test';
10 |
11 | test('index page has expected h1 and lexical state', async ({ page }) => {
12 | await page.goto('/');
13 | await expect(
14 | page.getByRole('heading', { name: 'Astro React.js Rich Text Lexical Example' })
15 | ).toBeVisible();
16 | await expect(page.locator('.editor-input .editor-paragraph').first()).toContainText(/^Registered:.*typescript/);
17 | });
18 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | /.pnp
3 | .pnp.js
4 |
5 | base-build
6 | build
7 | coverage
8 | dist
9 | npm
10 | !scripts/npm
11 | .DS_Store
12 | .env.local
13 | .env.development.local
14 | .env.test.local
15 | .env.production.local
16 | .ts-temp
17 | .docusaurus
18 | .playwright-clipboard.lock
19 | e2e-screenshots
20 | test-results
21 | playwright-report
22 | /SOURCE_CODE_REVIEW.md
23 |
24 | npm-debug.log*
25 |
26 | .vscode/*
27 | !.vscode/settings.json
28 | !.vscode/tasks.json
29 | !.vscode/launch.json
30 | !.vscode/extensions.json
31 | !.vscode/*.code-snippets
32 |
33 | .idea/**/workspace.xml
34 | .idea/**/tasks.xml
35 | .idea/**/usage.statistics.xml
36 | .idea/**/dictionaries
37 | .idea/**/shelf
38 |
39 | .idea
40 |
--------------------------------------------------------------------------------
/packages/lexical-rich-text/README.md:
--------------------------------------------------------------------------------
1 | # `@lexical/rich-text`
2 |
3 | This package provides a starting point for Lexical users by registering listeners for a set of basic commands that cover simple text-editing behavior such as entering text, deleting characters, copy + paste, or changing the selection with arrow keys. It also provides default behavior for rich text features, such as headings, formatted, text and blockquotes.
4 |
5 | You can use this package as a starting point, and then add additional command listeners to customize the functionality of your editor. If you don't want or need rich text functionality, you may want to consider using [@lexical/plain-text](https://lexical.dev/docs/packages/lexical-plain-text) instead.
6 |
--------------------------------------------------------------------------------
/scripts/__tests__/integration/fixtures/lexical-esm-sveltekit-vanilla-js/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./.svelte-kit/tsconfig.json",
3 | "compilerOptions": {
4 | "allowJs": true,
5 | "checkJs": true,
6 | "esModuleInterop": true,
7 | "forceConsistentCasingInFileNames": true,
8 | "resolveJsonModule": true,
9 | "skipLibCheck": true,
10 | "sourceMap": true,
11 | "strict": true,
12 | "moduleResolution": "bundler"
13 | }
14 | // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
15 | //
16 | // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
17 | // from the referenced tsconfig.json - TypeScript does not merge them in
18 | }
19 |
--------------------------------------------------------------------------------