@thangph2146/lexical-editor 0.0.1

package/src/plugins/embeds/auto-embed-plugin.tsx

@@ -0,0 +1,324 @@
+"use client"
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { JSX, useMemo, useState } from "react"
+import {
+  AutoEmbedOption,
+  EmbedConfig,
+  EmbedMatchResult,
+  LexicalAutoEmbedPlugin,
+  URL_MATCHER,
+} from "@lexical/react/LexicalAutoEmbedPlugin"
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
+import type { LexicalEditor } from "lexical"
+import { TwitterIcon, YoutubeIcon } from "lucide-react"
+
+import { useEditorModal } from "../../editor-hooks/use-modal"
+import { INSERT_TWEET_COMMAND } from "./twitter-plugin"
+import { INSERT_YOUTUBE_COMMAND } from "./youtube-plugin"
+import { Button } from "../../ui/button"
+import {
+  Command,
+  CommandGroup,
+  CommandItem,
+  CommandList,
+} from "../../ui/command"
+import { DialogFooter } from "../../ui/dialog"
+import { Input } from "../../ui/input"
+import {
+  Popover,
+  PopoverContent,
+  PopoverPortal,
+  PopoverTrigger,
+} from "../../ui/popover"
+import { IconSize } from "../../ui/typography"
+
+export interface CustomEmbedConfig extends EmbedConfig {
+  // Human readable name of the embeded content e.g. Tweet or Google Map.
+  contentName: string
+
+  // Icon for display.
+  icon?: JSX.Element
+
+  // An example of a matching url https://twitter.com/jack/status/20
+  exampleUrl: string
+
+  // For extra searching.
+  keywords: Array<string>
+
+  // Embed a Project.
+  description?: string
+}
+
+export const YoutubeEmbedConfig: CustomEmbedConfig = {
+  contentName: "Youtube Video",
+
+  exampleUrl: "https://www.youtube.com/watch?v=jNQXAC9IVRw",
+
+  // Icon for display.
+  icon: <IconSize size="sm"><YoutubeIcon /></IconSize>,
+
+  insertNode: (editor: LexicalEditor, result: EmbedMatchResult) => {
+    editor.dispatchCommand(INSERT_YOUTUBE_COMMAND, result.id)
+  },
+
+  keywords: ["youtube", "video"],
+
+  // Determine if a given URL is a match and return url data.
+  parseUrl: async (url: string) => {
+    const match =
+      /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/.exec(url)
+
+    const id = match && match[2] && match[2].length === 11 ? match[2] : null
+
+    if (id != null) {
+      return {
+        id,
+        url,
+      }
+    }
+
+    return null
+  },
+
+  type: "youtube-video",
+}
+
+export const TwitterEmbedConfig: CustomEmbedConfig = {
+  // e.g. Tweet or Google Map.
+  contentName: "Tweet",
+
+  exampleUrl: "https://twitter.com/jack/status/20",
+
+  // Icon for display.
+  icon: <IconSize size="sm"><TwitterIcon /></IconSize>,
+
+  // Create the Lexical embed node from the url data.
+  insertNode: (editor: LexicalEditor, result: EmbedMatchResult) => {
+    editor.dispatchCommand(INSERT_TWEET_COMMAND, result.id)
+  },
+
+  // For extra searching.
+  keywords: ["tweet", "twitter"],
+
+  // Determine if a given URL is a match and return url data.
+  parseUrl: (text: string) => {
+    const match =
+      /^https:\/\/(twitter|x)\.com\/(#!\/)?(\w+)\/status(es)*\/(\d+)/.exec(text)
+
+    if (match != null && match[5]) {
+      return {
+        id: match[5],
+        url: text,
+      }
+    }
+
+    return null
+  },
+
+  type: "tweet",
+}
+
+export const EmbedConfigs = [TwitterEmbedConfig, YoutubeEmbedConfig]
+
+const debounce = (callback: (text: string) => void, delay: number) => {
+  let timeoutId: number
+  return (text: string) => {
+    window.clearTimeout(timeoutId)
+    timeoutId = window.setTimeout(() => {
+      callback(text)
+    }, delay)
+  }
+}
+
+// Dialog content component that doesn't depend on context
+function AutoEmbedDialogContent({
+  embedConfig,
+  onClose,
+  editor,
+}: {
+  embedConfig: CustomEmbedConfig
+  onClose: () => void
+  editor: LexicalEditor
+}): JSX.Element {
+  const [text, setText] = useState("")
+  const [embedResult, setEmbedResult] = useState<EmbedMatchResult | null>(null)
+
+  const validateText = useMemo(
+    () =>
+      debounce((inputText: string) => {
+        const urlMatch = URL_MATCHER.exec(inputText)
+        if (embedConfig != null && inputText != null && urlMatch != null) {
+          Promise.resolve(embedConfig.parseUrl(inputText)).then(
+            (parseResult) => {
+              setEmbedResult(parseResult)
+            }
+          )
+        } else if (embedResult != null) {
+          setEmbedResult(null)
+        }
+      }, 200),
+    [embedConfig, embedResult]
+  )
+
+  const onClick = () => {
+    if (embedResult != null) {
+      embedConfig.insertNode(editor, embedResult)
+      onClose()
+    }
+  }
+
+  return (
+    <div className="editor-flex-col-gap-4">
+      <Input
+        type="text"
+        placeholder={embedConfig.exampleUrl}
+        value={text}
+        data-test-id={`${embedConfig.type}-embed-modal-url`}
+        onChange={(e) => {
+          const { value } = e.target
+          setText(value)
+          validateText(value)
+        }}
+      />
+      <DialogFooter>
+        <Button
+          disabled={!embedResult}
+          onClick={onClick}
+          data-test-id={`${embedConfig.type}-embed-modal-submit-btn`}
+        >
+          Embed
+        </Button>
+      </DialogFooter>
+    </div>
+  )
+}
+
+// Wrapper that uses context for AutoEmbedPlugin
+export function AutoEmbedDialog({
+  embedConfig,
+  onClose,
+  editor,
+}: {
+  embedConfig: CustomEmbedConfig
+  onClose: () => void
+  editor?: LexicalEditor
+}): JSX.Element {
+  const [editorFromContext] = useLexicalComposerContext()
+  const activeEditor = editor ?? editorFromContext
+  
+  return (
+    <AutoEmbedDialogContent 
+      embedConfig={embedConfig} 
+      onClose={onClose} 
+      editor={activeEditor}
+    />
+  )
+}
+
+// Standalone version that doesn't use context (for toolbar usage)
+export function AutoEmbedDialogStandalone({
+  embedConfig,
+  onClose,
+  editor,
+}: {
+  embedConfig: CustomEmbedConfig
+  onClose: () => void
+  editor: LexicalEditor
+}): JSX.Element {
+  return (
+    <AutoEmbedDialogContent 
+      embedConfig={embedConfig} 
+      onClose={onClose} 
+      editor={editor}
+    />
+  )
+}
+
+export function AutoEmbedPlugin(): JSX.Element {
+  const [modal, showModal] = useEditorModal()
+
+  const openEmbedModal = (embedConfig: CustomEmbedConfig) => {
+    showModal(`Embed ${embedConfig.contentName}`, (onClose) => (
+      <AutoEmbedDialog embedConfig={embedConfig} onClose={onClose} />
+    ))
+  }
+
+  const getMenuOptions = (
+    activeEmbedConfig: CustomEmbedConfig,
+    embedFn: () => void,
+    dismissFn: () => void
+  ) => {
+    return [
+      new AutoEmbedOption("Dismiss", {
+        onSelect: dismissFn,
+      }),
+      new AutoEmbedOption(`Embed ${activeEmbedConfig.contentName}`, {
+        onSelect: embedFn,
+      }),
+    ]
+  }
+
+  return (
+    <>
+      {modal}
+      <LexicalAutoEmbedPlugin<CustomEmbedConfig>
+        embedConfigs={EmbedConfigs}
+        onOpenEmbedModalForConfig={openEmbedModal}
+        getMenuOptions={getMenuOptions}
+        menuRenderFn={(
+          anchorElementRef,
+          {
+            selectedIndex,
+            options,
+            selectOptionAndCleanUp,
+            setHighlightedIndex,
+          }
+        ) => {
+          void selectedIndex
+          void setHighlightedIndex
+          return anchorElementRef.current ? (
+            <Popover open={true}>
+              <PopoverPortal container={anchorElementRef.current}>
+                <div className="editor-auto-embed-wrapper">
+                  <PopoverTrigger>
+                    <span className="sr-only">Open Menu</span>
+                  </PopoverTrigger>
+                  <PopoverContent
+                    className="editor-auto-embed-menu"
+                    align="start"
+                  >
+                    <Command>
+                      <CommandList>
+                        <CommandGroup>
+                          {options.map((option) => (
+                            <CommandItem
+                              key={option.key}
+                              value={option.title}
+                              onSelect={() => {
+                                selectOptionAndCleanUp(option)
+                              }}
+                              className="editor-flex-row-center"
+                            >
+                              {option.title}
+                            </CommandItem>
+                          ))}
+                        </CommandGroup>
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </div>
+              </PopoverPortal>
+            </Popover>
+          ) : null
+        }}
+      />
+    </>
+  )
+}

package/src/plugins/embeds/twitter-plugin.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { JSX, useEffect } from "react"
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
+import { $insertNodeToNearestRoot } from "@lexical/utils"
+import { COMMAND_PRIORITY_EDITOR, createCommand, LexicalCommand } from "lexical"
+
+import {
+  $createTweetNode,
+  TweetNode,
+} from "../../nodes/embeds/tweet-node"
+
+export const INSERT_TWEET_COMMAND: LexicalCommand<string> = createCommand(
+  "INSERT_TWEET_COMMAND"
+)
+
+export function TwitterPlugin(): JSX.Element | null {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    if (!editor.hasNodes([TweetNode])) {
+      throw new Error("TwitterPlugin: TweetNode not registered on editor")
+    }
+
+    return editor.registerCommand<string>(
+      INSERT_TWEET_COMMAND,
+      (payload) => {
+        const tweetNode = $createTweetNode(payload)
+        $insertNodeToNearestRoot(tweetNode)
+
+        return true
+      },
+      COMMAND_PRIORITY_EDITOR
+    )
+  }, [editor])
+
+  return null
+}

package/src/plugins/embeds/youtube-plugin.tsx

@@ -0,0 +1,84 @@
+"use client"
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { JSX, useEffect } from "react"
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
+import { $insertNodeToNearestRoot } from "@lexical/utils"
+import { COMMAND_PRIORITY_EDITOR, createCommand, LexicalCommand } from "lexical"
+
+import {
+  $createYouTubeNode,
+  YouTubeNode,
+} from "../../nodes/embeds/youtube-node"
+
+export type InsertYouTubePayload =
+  | string
+  | { id: string; width?: number; height?: number; maxWidth?: number; fullWidth?: boolean }
+
+export const INSERT_YOUTUBE_COMMAND: LexicalCommand<InsertYouTubePayload> =
+  createCommand("INSERT_YOUTUBE_COMMAND")
+
+export function YouTubePlugin(): JSX.Element | null {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    if (!editor.hasNodes([YouTubeNode])) {
+      throw new Error("YouTubePlugin: YouTubeNode not registered on editor")
+    }
+
+    return editor.registerCommand<InsertYouTubePayload>(
+      INSERT_YOUTUBE_COMMAND,
+      (payload) => {
+        const rootElement = editor.getRootElement()
+        const fallbackWidth =
+          rootElement?.getBoundingClientRect().width ?? 640
+        const resolvedMaxWidth =
+          fallbackWidth > 0 ? Math.round(fallbackWidth) : 640
+        const clampToEditorWidth = (value?: number) => {
+          if (typeof value !== "number") {
+            return value
+          }
+          return Math.min(value, resolvedMaxWidth)
+        }
+        const normalizedPayload =
+          typeof payload === "string"
+            ? {
+                id: payload,
+                width: undefined,
+                height: undefined,
+                maxWidth: resolvedMaxWidth,
+                fullWidth: false,
+              }
+            : {
+                id: payload.id,
+                width: clampToEditorWidth(payload.width),
+                height: payload.height,
+                maxWidth:
+                  payload.maxWidth !== undefined
+                    ? clampToEditorWidth(payload.maxWidth)
+                    : resolvedMaxWidth,
+                fullWidth: payload.fullWidth ?? false,
+              }
+        const youTubeNode = $createYouTubeNode(
+          normalizedPayload.id,
+          normalizedPayload.width,
+          normalizedPayload.height,
+          normalizedPayload.maxWidth,
+          normalizedPayload.fullWidth
+        )
+        $insertNodeToNearestRoot(youTubeNode)
+
+        return true
+      },
+      COMMAND_PRIORITY_EDITOR
+    )
+  }, [editor])
+
+  return null
+}

package/src/plugins/emoji-picker-plugin.tsx

@@ -0,0 +1,206 @@
+"use client"
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import * as React from "react"
+import { useCallback, useEffect, useMemo, useState } from "react"
+import dynamic from "next/dynamic"
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
+import {
+  MenuOption,
+  useBasicTypeaheadTriggerMatch,
+} from "@lexical/react/LexicalTypeaheadMenuPlugin"
+import {
+  $createTextNode,
+  $getSelection,
+  $isRangeSelection,
+  TextNode,
+} from "lexical"
+import { createPortal } from "react-dom"
+
+import {
+  Command,
+  CommandGroup,
+  CommandItem,
+  CommandList,
+} from "../ui/command"
+
+const LexicalTypeaheadMenuPlugin = dynamic(
+  () =>
+    import("@lexical/react/LexicalTypeaheadMenuPlugin").then(
+      (mod) => mod.LexicalTypeaheadMenuPlugin<EmojiOption>
+    ),
+  { ssr: false }
+)
+
+class EmojiOption extends MenuOption {
+  title: string
+  emoji: string
+  keywords: Array<string>
+
+  constructor(
+    title: string,
+    emoji: string,
+    options: {
+      keywords?: Array<string>
+    }
+  ) {
+    super(title)
+    this.title = title
+    this.emoji = emoji
+    this.keywords = options.keywords || []
+  }
+}
+
+type Emoji = {
+  emoji: string
+  description: string
+  category: string
+  aliases: Array<string>
+  tags: Array<string>
+  unicode_version: string
+  ios_version: string
+  skin_tones?: boolean
+}
+
+const MAX_EMOJI_SUGGESTION_COUNT = 10
+
+export function EmojiPickerPlugin() {
+  const [editor] = useLexicalComposerContext()
+  const [queryString, setQueryString] = useState<string | null>(null)
+  const [emojis, setEmojis] = useState<Array<Emoji>>([])
+  const [, setIsOpen] = useState(false)
+  useEffect(() => {
+    import("../utils/emoji-list").then((file) => setEmojis(file.default))
+  }, [])
+
+  const emojiOptions = useMemo(
+    () =>
+      emojis != null
+        ? emojis.map(
+            ({ emoji, aliases, tags }) =>
+              new EmojiOption(aliases[0] || "emoji", emoji, {
+                keywords: [...aliases, ...tags],
+              })
+          )
+        : [],
+    [emojis]
+  )
+
+  const checkForTriggerMatch = useBasicTypeaheadTriggerMatch(":", {
+    minLength: 0,
+  })
+
+  const options: Array<EmojiOption> = useMemo(() => {
+    return emojiOptions
+      .filter((option: EmojiOption) => {
+        return queryString != null
+          ? new RegExp(queryString, "gi").exec(option.title) ||
+            option.keywords != null
+            ? option.keywords.some((keyword: string) =>
+                new RegExp(queryString, "gi").exec(keyword)
+              )
+            : false
+          : emojiOptions
+      })
+      .slice(0, MAX_EMOJI_SUGGESTION_COUNT)
+  }, [emojiOptions, queryString])
+
+  const onSelectOption = useCallback(
+    (
+      selectedOption: EmojiOption,
+      nodeToRemove: TextNode | null,
+      closeMenu: () => void
+    ) => {
+      editor.update(() => {
+        const selection = $getSelection()
+
+        if (!$isRangeSelection(selection) || selectedOption == null) {
+          return
+        }
+
+        if (nodeToRemove) {
+          nodeToRemove.remove()
+        }
+
+        selection.insertNodes([$createTextNode(selectedOption.emoji)])
+
+        closeMenu()
+      })
+    },
+    [editor]
+  )
+
+  return (
+    <LexicalTypeaheadMenuPlugin
+      onQueryChange={setQueryString}
+      onSelectOption={onSelectOption}
+      triggerFn={checkForTriggerMatch}
+      options={options}
+      onOpen={() => {
+        setIsOpen(true)
+      }}
+      onClose={() => {
+        setIsOpen(false)
+      }}
+      menuRenderFn={(
+        anchorElementRef,
+        { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }
+      ) => {
+        return anchorElementRef.current && options.length
+          ? createPortal(
+              <div className="editor-fixed editor-z-10 editor-w-[200px] editor-rounded-md editor-shadow-md">
+                <Command
+                  onKeyDown={(e) => {
+                    if (e.key === "ArrowUp") {
+                      e.preventDefault()
+                      setHighlightedIndex(
+                        selectedIndex !== null
+                          ? (selectedIndex - 1 + options.length) %
+                              options.length
+                          : options.length - 1
+                      )
+                    } else if (e.key === "ArrowDown") {
+                      e.preventDefault()
+                      setHighlightedIndex(
+                        selectedIndex !== null
+                          ? (selectedIndex + 1) % options.length
+                          : 0
+                      )
+                    }
+                  }}
+                >
+                  <CommandList>
+                    <CommandGroup>
+                      {options.map((option, index) => (
+                        <CommandItem
+                          key={option.key}
+                          value={option.title}
+                          onSelect={() => {
+                            selectOptionAndCleanUp(option)
+                          }}
+                          className={`editor-flex editor-items-center editor-gap-2 ${
+                            selectedIndex === index
+                              ? "editor-bg-accent"
+                              : "editor-bg-transparent"
+                          }`}
+                        >
+                          {option.emoji} {option.title}
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </div>,
+              anchorElementRef.current
+            )
+          : null
+      }}
+    />
+  )
+}