├── src ├── lib │ ├── pinecone-client.ts │ ├── utils.ts │ └── edgestore.ts ├── app │ ├── actions.ts │ ├── favicon.ico │ ├── page.tsx │ ├── api │ │ ├── edgestore │ │ │ └── [...edgestore] │ │ │ │ └── route.ts │ │ └── ai │ │ │ └── route.ts │ ├── layout.tsx │ └── globals.css └── components │ ├── editor │ ├── utils │ │ ├── setNodePlaceholderFromSelection │ │ │ ├── styles.css │ │ │ ├── setNodePlaceholderFromSelection.ts │ │ │ ├── getNodePlaceholder.ts │ │ │ └── setPlaceholderOnSelection.ts │ │ ├── invariant.ts │ │ ├── canUseDOM.ts │ │ ├── useLayoutEffect.ts │ │ ├── getAllLexicalChildren.ts │ │ ├── gif.ts │ │ ├── getDOMRangeRect.ts │ │ ├── getSelectedNode.ts │ │ ├── setFloatingElemPositionForLinkEditor.ts │ │ ├── environment.ts │ │ ├── setFloatingElemPosition.ts │ │ ├── url.ts │ │ └── extract-data.ts │ ├── ui │ │ ├── image │ │ │ ├── error-image.tsx │ │ │ ├── lazy-image.tsx │ │ │ └── lazy-video.tsx │ │ ├── models │ │ │ ├── insert-poll.tsx │ │ │ ├── insert-image.tsx │ │ │ ├── insert-table.tsx │ │ │ ├── use-model.tsx │ │ │ └── insert-gif.tsx │ │ ├── drop-downs │ │ │ ├── code.tsx │ │ │ ├── text-format.tsx │ │ │ ├── text-align.tsx │ │ │ ├── index.tsx │ │ │ ├── font.tsx │ │ │ ├── font-size.tsx │ │ │ └── block-format.tsx │ │ ├── stepper │ │ │ └── stepper.tsx │ │ └── ai │ │ │ └── border.tsx │ ├── plugins │ │ ├── MarkdownShortcutPlugin │ │ │ └── index.tsx │ │ ├── CodeActionMenuPlugin │ │ │ ├── utils.ts │ │ │ ├── components │ │ │ │ └── CopyButton.tsx │ │ │ └── index.tsx │ │ ├── CodeHighlightPlugin │ │ │ └── index.ts │ │ ├── TwitterPlugin │ │ │ └── index.ts │ │ ├── YouTubePlugin │ │ │ └── index.ts │ │ ├── DragDropPastePlugin │ │ │ └── index.tsx │ │ ├── PollPlugin │ │ │ └── index.tsx │ │ ├── TabFocusPlugin │ │ │ └── index.ts │ │ ├── CollapsiblePlugin │ │ │ └── Collapsible.css │ │ ├── DraggableBlockPlugin │ │ │ └── index.tsx │ │ ├── AutoLinkPlugin │ │ │ └── index.tsx │ │ ├── TablePlugin │ │ │ └── index.tsx │ │ ├── YouTubeNode │ │ │ └── index.tsx │ │ ├── ShortcutsPlugin │ │ │ └── index.tsx │ │ └── ImagesPlugin │ │ │ └── index.tsx │ ├── hooks │ │ ├── useResizeObservert.ts │ │ └── use-mobile.ts │ ├── lexical-on-change.tsx │ ├── index.tsx │ ├── nodes │ │ ├── CollapsibleNode │ │ │ ├── CollapsibleContentNode.ts │ │ │ ├── CollapsibleContainerNode.ts │ │ │ └── CollapsibleTitleNode.ts │ │ ├── index.ts │ │ ├── LayoutNode │ │ │ ├── LayoutItemNode.ts │ │ │ └── LayoutContainerNode.ts │ │ ├── Hint │ │ │ └── index.tsx │ │ ├── PollNode │ │ │ └── index.tsx │ │ └── TweetNode │ │ │ └── index.tsx │ └── themes │ │ └── editor-theme.ts │ ├── ui │ ├── skeleton.tsx │ ├── textarea.tsx │ ├── input.tsx │ ├── separator.tsx │ ├── progress.tsx │ ├── sonner.tsx │ ├── checkbox.tsx │ ├── hover-card.tsx │ ├── tooltip.tsx │ ├── popover.tsx │ ├── scroll-area.tsx │ ├── card.tsx │ ├── toggle.tsx │ ├── button.tsx │ ├── dialog.tsx │ └── command.tsx │ └── providers │ ├── theme-provider.tsx │ ├── QueryProvider.tsx │ ├── SharedHistoryContext.tsx │ └── ToolbarContext.tsx ├── public ├── vercel.svg ├── window.svg ├── file.svg ├── globe.svg └── next.svg ├── postcss.config.mjs ├── next.config.ts ├── eslint.config.mjs ├── components.json ├── .gitignore ├── tsconfig.json ├── README.md ├── tailwind.config.ts └── package.json /src/lib/pinecone-client.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/actions.ts: -------------------------------------------------------------------------------- 1 | "use server" 2 | 3 | -------------------------------------------------------------------------------- /src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohe22/Next-lexical-editor/HEAD/src/app/favicon.ico -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /postcss.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('postcss-load-config').Config} */ 2 | const config = { 3 | plugins: { 4 | tailwindcss: {}, 5 | }, 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /src/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { clsx, type ClassValue } from "clsx" 2 | import { twMerge } from "tailwind-merge" 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)) 6 | } 7 | -------------------------------------------------------------------------------- /src/components/editor/utils/setNodePlaceholderFromSelection/styles.css: -------------------------------------------------------------------------------- 1 | .node-placeholder:has(br):not(:has(span))::before { 2 | position: absolute; 3 | content: attr(data-placeholder); 4 | color: rgba(136, 136, 136, 0.6); 5 | 6 | } -------------------------------------------------------------------------------- /next.config.ts: -------------------------------------------------------------------------------- 1 | import type { NextConfig } from "next"; 2 | 3 | const nextConfig: NextConfig = { 4 | typescript: { 5 | ignoreBuildErrors: true, 6 | }, 7 | eslint: { 8 | ignoreDuringBuilds: true, 9 | }, 10 | }; 11 | 12 | export default nextConfig; 13 | -------------------------------------------------------------------------------- /src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import Editor from "@/components/editor"; 2 | 3 | 4 | 5 | 6 | 7 | export default function Home() { 8 | return ( 9 |
10 | 11 |
12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /src/lib/edgestore.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import { type EdgeStoreRouter } from '../app/api/edgestore/[...edgestore]/route'; 4 | import { createEdgeStoreProvider } from '@edgestore/react'; 5 | 6 | const { EdgeStoreProvider, useEdgeStore } = 7 | createEdgeStoreProvider(); 8 | 9 | export { EdgeStoreProvider, useEdgeStore }; -------------------------------------------------------------------------------- /src/components/ui/skeleton.tsx: -------------------------------------------------------------------------------- 1 | import { cn } from "@/lib/utils" 2 | 3 | function Skeleton({ 4 | className, 5 | ...props 6 | }: React.HTMLAttributes) { 7 | return ( 8 |
12 | ) 13 | } 14 | 15 | export { Skeleton } 16 | -------------------------------------------------------------------------------- /src/components/providers/theme-provider.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import { ThemeProvider as NextThemesProvider } from "next-themes" 5 | 6 | export function ThemeProvider({ 7 | children, 8 | ...props 9 | }: React.ComponentProps) { 10 | return {children} 11 | } 12 | -------------------------------------------------------------------------------- /public/window.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/file.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/editor/ui/image/error-image.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function ErrorImage() { 4 | return ( 5 | 13 | ); 14 | 15 | } 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/components/editor/utils/invariant.ts: -------------------------------------------------------------------------------- 1 | 2 | export default function invariant( 3 | cond?: boolean, 4 | message?: string, 5 | ): asserts cond { 6 | if (cond) { 7 | return; 8 | } 9 | 10 | throw new Error( 11 | 'Internal Lexical error: invariant() is meant to be replaced at compile ' + 12 | 'time. There is no runtime version. Error: ' + 13 | message, 14 | ); 15 | } -------------------------------------------------------------------------------- /src/components/editor/utils/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'; -------------------------------------------------------------------------------- /src/components/editor/plugins/MarkdownShortcutPlugin/index.tsx: -------------------------------------------------------------------------------- 1 | 2 | import type {JSX} from 'react'; 3 | 4 | import {MarkdownShortcutPlugin} from '@lexical/react/LexicalMarkdownShortcutPlugin'; 5 | import * as React from 'react'; 6 | 7 | import {PLAYGROUND_TRANSFORMERS} from '../MarkdownTransformers'; 8 | 9 | export default function MarkdownPlugin(): JSX.Element { 10 | return ; 11 | } -------------------------------------------------------------------------------- /src/components/editor/utils/useLayoutEffect.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | import {useEffect, useLayoutEffect} from 'react'; 4 | import { CAN_USE_DOM } from './canUseDOM'; 5 | 6 | // This workaround is no longer necessary in React 19, 7 | // but we currently support React >=17.x 8 | // https://github.com/facebook/react/pull/26395 9 | const useLayoutEffectImpl: typeof useLayoutEffect = CAN_USE_DOM 10 | ? useLayoutEffect 11 | : useEffect; 12 | 13 | export default useLayoutEffectImpl; -------------------------------------------------------------------------------- /eslint.config.mjs: -------------------------------------------------------------------------------- 1 | import { dirname } from "path"; 2 | import { fileURLToPath } from "url"; 3 | import { FlatCompat } from "@eslint/eslintrc"; 4 | 5 | const __filename = fileURLToPath(import.meta.url); 6 | const __dirname = dirname(__filename); 7 | 8 | const compat = new FlatCompat({ 9 | baseDirectory: __dirname, 10 | }); 11 | 12 | const eslintConfig = [ 13 | ...compat.extends("next/core-web-vitals", "next/typescript"), 14 | ]; 15 | 16 | export default eslintConfig; 17 | -------------------------------------------------------------------------------- /src/components/editor/utils/getAllLexicalChildren.ts: -------------------------------------------------------------------------------- 1 | import { $getNodeByKey, $getRoot, LexicalEditor } from 'lexical'; 2 | 3 | export const getAllLexicalChildren = (editor: LexicalEditor) => { 4 | const childrenKeys = editor 5 | .getEditorState() 6 | .read(() => $getRoot().getChildrenKeys()); 7 | 8 | return childrenKeys.map((key) => ({ 9 | key: key, 10 | node: $getNodeByKey(key), 11 | htmlElement: editor.getElementByKey(key), 12 | })); 13 | }; -------------------------------------------------------------------------------- /src/components/providers/QueryProvider.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { QueryClientProvider, QueryClient } from "@tanstack/react-query"; 4 | import { useState } from "react"; 5 | 6 | interface Props { 7 | children: React.ReactNode; 8 | } 9 | 10 | export default function QueryProvider({ children }: Props) { 11 | const [queryClient] = useState(() => new QueryClient()); 12 | return ( 13 | {children} 14 | ); 15 | } -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "new-york", 4 | "rsc": true, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.ts", 8 | "css": "src/app/globals.css", 9 | "baseColor": "neutral", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils", 16 | "ui": "@/components/ui", 17 | "lib": "@/lib", 18 | "hooks": "@/hooks" 19 | }, 20 | "iconLibrary": "lucide" 21 | } -------------------------------------------------------------------------------- /src/components/editor/utils/setNodePlaceholderFromSelection/setNodePlaceholderFromSelection.ts: -------------------------------------------------------------------------------- 1 | 2 | import { $getSelection, $isRangeSelection, LexicalEditor } from 'lexical'; 3 | import { setPlaceholderOnSelection } from './setPlaceholderOnSelection'; 4 | 5 | export const setNodePlaceholderFromSelection = ( 6 | editor: LexicalEditor, 7 | ): void => { 8 | editor.getEditorState().read(() => { 9 | const selection = $getSelection(); 10 | if (!$isRangeSelection(selection)) { 11 | return; 12 | } 13 | setPlaceholderOnSelection({ selection, editor }); 14 | }); 15 | }; -------------------------------------------------------------------------------- /src/components/editor/hooks/useResizeObservert.ts: -------------------------------------------------------------------------------- 1 | import {useEffect, useState} from 'react'; 2 | 3 | export const useResizeObserver = ( 4 | target: Element | null, 5 | callback?: (entry: DOMRectReadOnly) => void 6 | ) => { 7 | const [size, setSize] = useState(); 8 | 9 | useEffect(() => { 10 | if (!target) return; 11 | 12 | const observer = new ResizeObserver(([entry]) => { 13 | setSize(entry.contentRect); 14 | callback?.(entry.contentRect); 15 | }); 16 | 17 | observer.observe(target); 18 | return () => observer.disconnect(); 19 | }, [target, callback]); 20 | 21 | return size; 22 | }; -------------------------------------------------------------------------------- /src/components/editor/plugins/CodeActionMenuPlugin/utils.ts: -------------------------------------------------------------------------------- 1 | 2 | import {debounce} from 'lodash-es'; 3 | import {useMemo, useRef} from 'react'; 4 | 5 | export function useDebounce void>( 6 | fn: T, 7 | ms: number, 8 | maxWait?: number, 9 | ) { 10 | const funcRef = useRef(null); 11 | funcRef.current = fn; 12 | 13 | return useMemo( 14 | () => 15 | debounce( 16 | (...args: Parameters) => { 17 | if (funcRef.current) { 18 | funcRef.current(...args); 19 | } 20 | }, 21 | ms, 22 | {maxWait}, 23 | ), 24 | [ms, maxWait], 25 | ); 26 | } -------------------------------------------------------------------------------- /.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.* 7 | .yarn/* 8 | !.yarn/patches 9 | !.yarn/plugins 10 | !.yarn/releases 11 | !.yarn/versions 12 | 13 | # testing 14 | /coverage 15 | 16 | # next.js 17 | /.next/ 18 | /out/ 19 | 20 | # production 21 | /build 22 | 23 | # misc 24 | .DS_Store 25 | *.pem 26 | 27 | # debug 28 | npm-debug.log* 29 | yarn-debug.log* 30 | yarn-error.log* 31 | .pnpm-debug.log* 32 | 33 | # env files (can opt-in for committing if needed) 34 | .env* 35 | 36 | # vercel 37 | .vercel 38 | 39 | # typescript 40 | *.tsbuildinfo 41 | next-env.d.ts 42 | -------------------------------------------------------------------------------- /src/components/editor/hooks/use-mobile.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | const MOBILE_BREAKPOINT = 768 4 | 5 | export function useIsMobile() { 6 | const [isMobile, setIsMobile] = React.useState(undefined) 7 | 8 | React.useEffect(() => { 9 | const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`) 10 | const onChange = () => { 11 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) 12 | } 13 | mql.addEventListener("change", onChange) 14 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) 15 | return () => mql.removeEventListener("change", onChange) 16 | }, []) 17 | 18 | return !!isMobile 19 | } 20 | -------------------------------------------------------------------------------- /src/components/editor/plugins/CodeHighlightPlugin/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 {registerCodeHighlighting} from '@lexical/code'; 10 | import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext'; 11 | import {useEffect} from 'react'; 12 | 13 | export default function CodeHighlightPlugin(): JSX.Element | null { 14 | const [editor] = useLexicalComposerContext(); 15 | 16 | useEffect(() => { 17 | return registerCodeHighlighting(editor); 18 | }, [editor]); 19 | 20 | return null; 21 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2017", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ], 21 | "paths": { 22 | "@/*": ["./src/*"] 23 | } 24 | }, 25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 26 | "exclude": ["node_modules"] 27 | } 28 | -------------------------------------------------------------------------------- /src/components/ui/textarea.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | 5 | const Textarea = React.forwardRef< 6 | HTMLTextAreaElement, 7 | React.ComponentProps<"textarea"> 8 | >(({ className, ...props }, ref) => { 9 | return ( 10 |