diff --git a/package.json b/package.json
index 3fc096c..10c9eb3 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,8 @@
"preview": "vite preview"
},
"dependencies": {
+ "@lexical/react": "^0.18.0",
+ "lexical": "^0.18.0",
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 84ef77e..2c37d22 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,12 @@ importers:
.:
dependencies:
+ '@lexical/react':
+ specifier: ^0.18.0
+ version: 0.18.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(yjs@13.6.19)
+ lexical:
+ specifier: ^0.18.0
+ version: 0.18.0
react:
specifier: ^18.3.1
version: 18.3.1
@@ -130,6 +136,10 @@ packages:
peerDependencies:
'@babel/core': ^7.0.0-0
+ '@babel/runtime@7.25.6':
+ resolution: {integrity: sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==}
+ engines: {node: '>=6.9.0'}
+
'@babel/template@7.25.0':
resolution: {integrity: sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==}
engines: {node: '>=6.9.0'}
@@ -336,6 +346,77 @@ packages:
'@jridgewell/trace-mapping@0.3.25':
resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
+ '@lexical/clipboard@0.18.0':
+ resolution: {integrity: sha512-ybc+hx14wj0n2ZjdOkLcZ02MRB3UprXjpLDXlByFIuVcZpUxVcp3NzA0UBPOKXYKvdt0bmgjnAsFWM5OSbwS0w==}
+
+ '@lexical/code@0.18.0':
+ resolution: {integrity: sha512-VB8fRHIrB8QTqyZUvGBMVWP2tpKe3ArOjPdWAqgrS8MVFldqUhuTHcW+XJFkVxcEBYCXynNT29YRYtQhfQ+vDQ==}
+
+ '@lexical/devtools-core@0.18.0':
+ resolution: {integrity: sha512-gVgtEkLwGjz1frOmDpFJzDPFxPgAcC9n5ZaaZWHo5GLcptnQmkuLm1t+UInQWujXhFmcyJzfiqDaMJ8EIcb2Ww==}
+ peerDependencies:
+ react: '>=17.x'
+ react-dom: '>=17.x'
+
+ '@lexical/dragon@0.18.0':
+ resolution: {integrity: sha512-toD/y2/TgtG+eFVKXf65kDk/Mv02FwgmcGH18nyAabZnO1TLBaMYPkGFdTTZ8hVmQxqIu9nZuLWUbdIBMs8UWw==}
+
+ '@lexical/hashtag@0.18.0':
+ resolution: {integrity: sha512-bm+Sv7keguVYbUY0ngd+iAv2Owd3dePzdVkzkmw9Al8GPXkE5ll8fjq6Xjw2u3OVhf+9pTnesIo/AS7H+h0exw==}
+
+ '@lexical/history@0.18.0':
+ resolution: {integrity: sha512-c87J4ke1Sae03coElJay2Ikac/4OcA2OmhtNbt2gAi/XBtcsP4mPuz1yZfZf9XIe+weekObgjinvZekQ2AFw0g==}
+
+ '@lexical/html@0.18.0':
+ resolution: {integrity: sha512-8lhba1DFnnobXgYm4Rk5Gr2tZedD4Gl6A/NKCt7whO/CET63vT3UnK2ggcVVgtIJG530Cv0bdZoJbJu5DauI5w==}
+
+ '@lexical/link@0.18.0':
+ resolution: {integrity: sha512-GCYcbNTSTwJk0lr+GMc8nn6Meq44BZs3QL2d1B0skpZAspd8yI53sRS6HDy5P+jW5P0dzyZr/XJAU4U+7zsEEg==}
+
+ '@lexical/list@0.18.0':
+ resolution: {integrity: sha512-DEWs9Scbg3+STZeE2O0OoG8SWnKnxQccObBzyeHRjn4GAN6JA7lgcAzfrdgp0fNWTbMM/ku876MmXKGnqhvg9Q==}
+
+ '@lexical/mark@0.18.0':
+ resolution: {integrity: sha512-QA4YWfTP5WWnCnoH/RmfcsSZyhhd7oeFWDpfP7S8Bbmhz6kiPwGcsVr+uRQBBT56AqEX167xX2rX8JR6FiYZqA==}
+
+ '@lexical/markdown@0.18.0':
+ resolution: {integrity: sha512-uSWwcK8eJw5C+waEhU5WoX8W+JxNZbKuFnZwsn5nsp+iQgqMj4qY6g0yJub4sq8vvh6jjl4vVXhXTq2up9aykw==}
+
+ '@lexical/offset@0.18.0':
+ resolution: {integrity: sha512-KGlboyLSxQAH5PMOlJmyvHlbYXZneVnKiHpfyBV5IUX5kuyB/eZbQEYcJP9saekfQ5Xb1FWXWmsZEo+sWtrrZA==}
+
+ '@lexical/overflow@0.18.0':
+ resolution: {integrity: sha512-3ATTwttVgZtVLq60ZUWbpbXBbpuMa3PZD5CxSP3nulviL+2I4phvacV4WUN+8wMeq+PGmuarl+cYfrFL02ii3g==}
+
+ '@lexical/plain-text@0.18.0':
+ resolution: {integrity: sha512-L6yQpiwW0ZacY1oNwvRBxSuW2TZaUcveZLheJc8JzGcZoVxzII/CAbLZG8691VbNuKsbOURiNXZIsgwujKmo4Q==}
+
+ '@lexical/react@0.18.0':
+ resolution: {integrity: sha512-DLvIbTsjvFIFqm+9zvAjEwuZHAbSxzZf1AGqf1lLctlL/Ran0f+8EZOv5jttELTe7xISZ2+xSXTLRfyxhNwGXQ==}
+ peerDependencies:
+ react: '>=17.x'
+ react-dom: '>=17.x'
+
+ '@lexical/rich-text@0.18.0':
+ resolution: {integrity: sha512-xMANCB7WueMsmWK8qxik5FZN4ApyaHWHQILS9r4FTbdv/DlNepsR7Pt8kg2317xZ56NAueQLIdyyKYXG1nBrHw==}
+
+ '@lexical/selection@0.18.0':
+ resolution: {integrity: sha512-mJoMhmxeZLfM9K2JMYETs9u179IkHQUlgtYG5GZJHjKx2iUn+9KvJ9RVssq+Lusi7C/N42wWPGNHDPdUvFtxXg==}
+
+ '@lexical/table@0.18.0':
+ resolution: {integrity: sha512-TeTAnuFAAgVjm1QE8adRB3GFWN+DUUiS4vzGq+ynPRCtNdpmW27NmTkRMyxKsetUtt7nIFfj4DvLvor4RwqIpA==}
+
+ '@lexical/text@0.18.0':
+ resolution: {integrity: sha512-MTHSBeq3K0+lqSsP5oysBMnY4tPVhB8kAa2xBnEc3dYgXFxEEvJwZahbHNX93EPObtJkxXfUuI63Al4G3lYK8A==}
+
+ '@lexical/utils@0.18.0':
+ resolution: {integrity: sha512-4s9dVpBZjqIaA/1q2GtfWFjKsv2Wqhjer0Zw2mcl1TIVN0zreXxcTKN316QppAWmSQJxVGvkWHjjaZJwl6/TSw==}
+
+ '@lexical/yjs@0.18.0':
+ resolution: {integrity: sha512-rl7Rl9XIb3ygQEEHOFtACdXs3BE+UUUmdyNqB6kK9A6IRGz+w4Azp+qzt8It/t+c0oaSYHpAtcLNXg1amJz+kA==}
+ peerDependencies:
+ yjs: '>=13.5.22'
+
'@nodelib/fs.scandir@2.1.5':
resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
engines: {node: '>= 8'}
@@ -793,6 +874,9 @@ packages:
isexe@2.0.0:
resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+ isomorphic.js@0.2.5:
+ resolution: {integrity: sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==}
+
js-tokens@4.0.0:
resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
@@ -826,6 +910,14 @@ packages:
resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
engines: {node: '>= 0.8.0'}
+ lexical@0.18.0:
+ resolution: {integrity: sha512-3K/B0RpzjoW+Wj2E455wWXxkqxqK8UgdIiuqkOqdOsoSSo5mCkHOU6eVw7Nlmlr1MFvAMzGmz4RPn8NZaLQ2Mw==}
+
+ lib0@0.2.98:
+ resolution: {integrity: sha512-XteTiNO0qEXqqweWx+b21p/fBnNHUA1NwAtJNJek1oPrewEZs2uiT4gWivHKr9GqCjDPAhchz0UQO8NwU3bBNA==}
+ engines: {node: '>=16'}
+ hasBin: true
+
locate-path@6.0.0:
resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
engines: {node: '>=10'}
@@ -908,6 +1000,10 @@ packages:
resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
engines: {node: '>= 0.8.0'}
+ prismjs@1.29.0:
+ resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
+ engines: {node: '>=6'}
+
punycode@2.3.1:
resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
engines: {node: '>=6'}
@@ -920,6 +1016,12 @@ packages:
peerDependencies:
react: ^18.3.1
+ react-error-boundary@3.1.4:
+ resolution: {integrity: sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==}
+ engines: {node: '>=10', npm: '>=6'}
+ peerDependencies:
+ react: '>=16.13.1'
+
react-refresh@0.14.2:
resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
engines: {node: '>=0.10.0'}
@@ -928,6 +1030,9 @@ packages:
resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
engines: {node: '>=0.10.0'}
+ regenerator-runtime@0.14.1:
+ resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
+
resolve-from@4.0.0:
resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
engines: {node: '>=4'}
@@ -1071,6 +1176,10 @@ packages:
yallist@3.1.1:
resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+ yjs@13.6.19:
+ resolution: {integrity: sha512-GNKw4mEUn5yWU2QPHRx8jppxmCm9KzbBhB4qJLUJFiiYD0g/tDVgXQ7aPkyh01YO28kbs2J/BEbWBagjuWyejw==}
+ engines: {node: '>=16.0.0', npm: '>=8.0.0'}
+
yocto-queue@0.1.0:
resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
engines: {node: '>=10'}
@@ -1182,6 +1291,10 @@ snapshots:
'@babel/core': 7.25.2
'@babel/helper-plugin-utils': 7.24.8
+ '@babel/runtime@7.25.6':
+ dependencies:
+ regenerator-runtime: 0.14.1
+
'@babel/template@7.25.0':
dependencies:
'@babel/code-frame': 7.24.7
@@ -1333,6 +1446,153 @@ snapshots:
'@jridgewell/resolve-uri': 3.1.2
'@jridgewell/sourcemap-codec': 1.5.0
+ '@lexical/clipboard@0.18.0':
+ dependencies:
+ '@lexical/html': 0.18.0
+ '@lexical/list': 0.18.0
+ '@lexical/selection': 0.18.0
+ '@lexical/utils': 0.18.0
+ lexical: 0.18.0
+
+ '@lexical/code@0.18.0':
+ dependencies:
+ '@lexical/utils': 0.18.0
+ lexical: 0.18.0
+ prismjs: 1.29.0
+
+ '@lexical/devtools-core@0.18.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+ dependencies:
+ '@lexical/html': 0.18.0
+ '@lexical/link': 0.18.0
+ '@lexical/mark': 0.18.0
+ '@lexical/table': 0.18.0
+ '@lexical/utils': 0.18.0
+ lexical: 0.18.0
+ react: 18.3.1
+ react-dom: 18.3.1(react@18.3.1)
+
+ '@lexical/dragon@0.18.0':
+ dependencies:
+ lexical: 0.18.0
+
+ '@lexical/hashtag@0.18.0':
+ dependencies:
+ '@lexical/utils': 0.18.0
+ lexical: 0.18.0
+
+ '@lexical/history@0.18.0':
+ dependencies:
+ '@lexical/utils': 0.18.0
+ lexical: 0.18.0
+
+ '@lexical/html@0.18.0':
+ dependencies:
+ '@lexical/selection': 0.18.0
+ '@lexical/utils': 0.18.0
+ lexical: 0.18.0
+
+ '@lexical/link@0.18.0':
+ dependencies:
+ '@lexical/utils': 0.18.0
+ lexical: 0.18.0
+
+ '@lexical/list@0.18.0':
+ dependencies:
+ '@lexical/utils': 0.18.0
+ lexical: 0.18.0
+
+ '@lexical/mark@0.18.0':
+ dependencies:
+ '@lexical/utils': 0.18.0
+ lexical: 0.18.0
+
+ '@lexical/markdown@0.18.0':
+ dependencies:
+ '@lexical/code': 0.18.0
+ '@lexical/link': 0.18.0
+ '@lexical/list': 0.18.0
+ '@lexical/rich-text': 0.18.0
+ '@lexical/text': 0.18.0
+ '@lexical/utils': 0.18.0
+ lexical: 0.18.0
+
+ '@lexical/offset@0.18.0':
+ dependencies:
+ lexical: 0.18.0
+
+ '@lexical/overflow@0.18.0':
+ dependencies:
+ lexical: 0.18.0
+
+ '@lexical/plain-text@0.18.0':
+ dependencies:
+ '@lexical/clipboard': 0.18.0
+ '@lexical/selection': 0.18.0
+ '@lexical/utils': 0.18.0
+ lexical: 0.18.0
+
+ '@lexical/react@0.18.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(yjs@13.6.19)':
+ dependencies:
+ '@lexical/clipboard': 0.18.0
+ '@lexical/code': 0.18.0
+ '@lexical/devtools-core': 0.18.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+ '@lexical/dragon': 0.18.0
+ '@lexical/hashtag': 0.18.0
+ '@lexical/history': 0.18.0
+ '@lexical/link': 0.18.0
+ '@lexical/list': 0.18.0
+ '@lexical/mark': 0.18.0
+ '@lexical/markdown': 0.18.0
+ '@lexical/overflow': 0.18.0
+ '@lexical/plain-text': 0.18.0
+ '@lexical/rich-text': 0.18.0
+ '@lexical/selection': 0.18.0
+ '@lexical/table': 0.18.0
+ '@lexical/text': 0.18.0
+ '@lexical/utils': 0.18.0
+ '@lexical/yjs': 0.18.0(yjs@13.6.19)
+ lexical: 0.18.0
+ react: 18.3.1
+ react-dom: 18.3.1(react@18.3.1)
+ react-error-boundary: 3.1.4(react@18.3.1)
+ transitivePeerDependencies:
+ - yjs
+
+ '@lexical/rich-text@0.18.0':
+ dependencies:
+ '@lexical/clipboard': 0.18.0
+ '@lexical/selection': 0.18.0
+ '@lexical/utils': 0.18.0
+ lexical: 0.18.0
+
+ '@lexical/selection@0.18.0':
+ dependencies:
+ lexical: 0.18.0
+
+ '@lexical/table@0.18.0':
+ dependencies:
+ '@lexical/clipboard': 0.18.0
+ '@lexical/utils': 0.18.0
+ lexical: 0.18.0
+
+ '@lexical/text@0.18.0':
+ dependencies:
+ lexical: 0.18.0
+
+ '@lexical/utils@0.18.0':
+ dependencies:
+ '@lexical/list': 0.18.0
+ '@lexical/selection': 0.18.0
+ '@lexical/table': 0.18.0
+ lexical: 0.18.0
+
+ '@lexical/yjs@0.18.0(yjs@13.6.19)':
+ dependencies:
+ '@lexical/offset': 0.18.0
+ '@lexical/selection': 0.18.0
+ lexical: 0.18.0
+ yjs: 13.6.19
+
'@nodelib/fs.scandir@2.1.5':
dependencies:
'@nodelib/fs.stat': 2.0.5
@@ -1803,6 +2063,8 @@ snapshots:
isexe@2.0.0: {}
+ isomorphic.js@0.2.5: {}
+
js-tokens@4.0.0: {}
js-yaml@4.1.0:
@@ -1828,6 +2090,12 @@ snapshots:
prelude-ls: 1.2.1
type-check: 0.4.0
+ lexical@0.18.0: {}
+
+ lib0@0.2.98:
+ dependencies:
+ isomorphic.js: 0.2.5
+
locate-path@6.0.0:
dependencies:
p-locate: 5.0.0
@@ -1902,6 +2170,8 @@ snapshots:
prelude-ls@1.2.1: {}
+ prismjs@1.29.0: {}
+
punycode@2.3.1: {}
queue-microtask@1.2.3: {}
@@ -1912,12 +2182,19 @@ snapshots:
react: 18.3.1
scheduler: 0.23.2
+ react-error-boundary@3.1.4(react@18.3.1):
+ dependencies:
+ '@babel/runtime': 7.25.6
+ react: 18.3.1
+
react-refresh@0.14.2: {}
react@18.3.1:
dependencies:
loose-envify: 1.4.0
+ regenerator-runtime@0.14.1: {}
+
resolve-from@4.0.0: {}
reusify@1.0.4: {}
@@ -2033,4 +2310,8 @@ snapshots:
yallist@3.1.1: {}
+ yjs@13.6.19:
+ dependencies:
+ lib0: 0.2.98
+
yocto-queue@0.1.0: {}
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index b9d355d..0000000
--- a/src/App.css
+++ /dev/null
@@ -1,42 +0,0 @@
-#root {
- max-width: 1280px;
- margin: 0 auto;
- padding: 2rem;
- text-align: center;
-}
-
-.logo {
- height: 6em;
- padding: 1.5em;
- will-change: filter;
- transition: filter 300ms;
-}
-.logo:hover {
- filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
- filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-}
-
-@media (prefers-reduced-motion: no-preference) {
- a:nth-of-type(2) .logo {
- animation: logo-spin infinite 20s linear;
- }
-}
-
-.card {
- padding: 2em;
-}
-
-.read-the-docs {
- color: #888;
-}
diff --git a/src/App.tsx b/src/App.tsx
index afe48ac..f4e6241 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,35 +1,11 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
+import { Editor } from "./editor";
function App() {
- const [count, setCount] = useState(0)
-
return (
<>
-
- Vite + React
-
-
-
- Edit src/App.tsx and save to test HMR
-
-
- Click on the Vite and React logos to learn more
-
+
- )
+ );
}
-export default App
+export default App;
diff --git a/src/editor.tsx b/src/editor.tsx
new file mode 100644
index 0000000..970fab6
--- /dev/null
+++ b/src/editor.tsx
@@ -0,0 +1,42 @@
+import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
+import {
+ LexicalComposer,
+ type InitialConfigType,
+} from "@lexical/react/LexicalComposer";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+//import { $getRoot, $getSelection } from "lexical";
+
+const theme = {
+ // Theme styling goes here
+ //...
+};
+
+// Catch any errors that occur during Lexical updates and log them
+// or throw them as needed. If you don't throw them, Lexical will
+// try to recover gracefully without losing user data.
+function onError(error: Error) {
+ console.error(error);
+}
+
+export const Editor = () => {
+ const initialConfig: InitialConfigType = {
+ namespace: "MyEditor",
+ theme,
+ onError,
+ };
+
+ return (
+
+ }
+ placeholder={Enter some text...
}
+ ErrorBoundary={LexicalErrorBoundary}
+ />
+
+
+
+ );
+};