@thangph2146/lexical-editor 0.0.1

package/src/editor-x/plugins.tsx

@@ -0,0 +1,380 @@
+"use client"
+import { useState } from "react"
+import {
+  CHECK_LIST,
+  ELEMENT_TRANSFORMERS,
+  MULTILINE_ELEMENT_TRANSFORMERS,
+  TEXT_FORMAT_TRANSFORMERS,
+  TEXT_MATCH_TRANSFORMERS,
+} from "@lexical/markdown"
+import { CheckListPlugin } from "@lexical/react/LexicalCheckListPlugin"
+import { ClearEditorPlugin } from "@lexical/react/LexicalClearEditorPlugin"
+import { ClickableLinkPlugin } from "@lexical/react/LexicalClickableLinkPlugin"
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary"
+import { HashtagPlugin } from "@lexical/react/LexicalHashtagPlugin"
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin"
+import { HorizontalRulePlugin } from "@lexical/react/LexicalHorizontalRulePlugin"
+import { ListPlugin } from "@lexical/react/LexicalListPlugin"
+import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin"
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin"
+import { TabIndentationPlugin } from "@lexical/react/LexicalTabIndentationPlugin"
+import { TablePlugin } from "@lexical/react/LexicalTablePlugin"
+
+import { ContentEditable } from "../editor-ui/content-editable"
+import { cn } from "../lib/utils"
+import { ActionsPlugin } from "../plugins/actions/actions-plugin"
+import { AlignPlugin } from "../plugins/align-plugin"
+import { ClearEditorActionPlugin } from "../plugins/actions/clear-editor-plugin"
+import { CounterCharacterPlugin } from "../plugins/actions/counter-character-plugin"
+import { EditModeTogglePlugin } from "../plugins/actions/edit-mode-toggle-plugin"
+import { ImportExportPlugin } from "../plugins/actions/import-export-plugin"
+import { MarkdownTogglePlugin } from "../plugins/actions/markdown-toggle-plugin"
+import { ShareContentPlugin } from "../plugins/actions/share-content-plugin"
+import { SpeechToTextPlugin } from "../plugins/actions/speech-to-text-plugin"
+import { TreeViewPlugin } from "../plugins/actions/tree-view-plugin"
+import { AutoLinkPlugin } from "../plugins/auto-link-plugin"
+import { AutocompletePlugin } from "../plugins/autocomplete-plugin"
+import { CodeActionMenuPlugin } from "../plugins/code-action-menu-plugin"
+import { CodeHighlightPlugin } from "../plugins/code-highlight-plugin"
+import { ComponentPickerMenuPlugin } from "../plugins/component-picker-menu-plugin"
+import { ContextMenuPlugin } from "../plugins/context-menu-plugin"
+import { DragDropPastePlugin } from "../plugins/drag-drop-paste-plugin"
+import { DraggableBlockPlugin } from "../plugins/draggable-block-plugin"
+import { AutoEmbedPlugin } from "../plugins/embeds/auto-embed-plugin"
+import { TwitterPlugin } from "../plugins/embeds/twitter-plugin"
+import { YouTubePlugin } from "../plugins/embeds/youtube-plugin"
+import { EmojiPickerPlugin } from "../plugins/emoji-picker-plugin"
+import { EmojisPlugin } from "../plugins/emojis-plugin"
+import { FloatingLinkEditorPlugin } from "../plugins/floating-link-editor-plugin"
+import { FloatingTextFormatToolbarPlugin } from "../plugins/floating-text-format-plugin"
+import { ImagesPlugin } from "../plugins/images-plugin"
+import { KeywordsPlugin } from "../plugins/keywords-plugin"
+import { LayoutPlugin } from "../plugins/layout-plugin"
+import { LinkPlugin } from "../plugins/link-plugin"
+import { ListColorPlugin } from "../plugins/list-color-plugin"
+import { ListMaxIndentLevelPlugin } from "../plugins/list-max-indent-level-plugin"
+import { MentionsPlugin } from "../plugins/mentions-plugin"
+import { AlignmentPickerPlugin } from "../plugins/picker/alignment-picker-plugin"
+import { BulletedListPickerPlugin } from "../plugins/picker/bulleted-list-picker-plugin"
+import { CheckListPickerPlugin } from "../plugins/picker/check-list-picker-plugin"
+import { CodePickerPlugin } from "../plugins/picker/code-picker-plugin"
+import { ColumnsLayoutPickerPlugin } from "../plugins/picker/columns-layout-picker-plugin"
+import { DividerPickerPlugin } from "../plugins/picker/divider-picker-plugin"
+import { EmbedsPickerPlugin } from "../plugins/picker/embeds-picker-plugin"
+import { HeadingPickerPlugin } from "../plugins/picker/heading-picker-plugin"
+import { ImagePickerPlugin } from "../plugins/picker/image-picker-plugin"
+import { NumberedListPickerPlugin } from "../plugins/picker/numbered-list-picker-plugin"
+import { ParagraphPickerPlugin } from "../plugins/picker/paragraph-picker-plugin"
+import { QuotePickerPlugin } from "../plugins/picker/quote-picker-plugin"
+import {
+  DynamicTablePickerPlugin,
+  TablePickerPlugin,
+} from "../plugins/picker/table-picker-plugin"
+import { TabFocusPlugin } from "../plugins/tab-focus-plugin"
+import { TableColumnResizerPlugin } from "../plugins/table-column-resizer-plugin"
+import {
+  InsertTableCommandPlugin,
+} from "../plugins/table-plugin"
+import { BlockFormatDropDown } from "../plugins/toolbar/block-format-toolbar-plugin"
+import { FormatBulletedList } from "../plugins/toolbar/block-format/format-bulleted-list"
+import { FormatCheckList } from "../plugins/toolbar/block-format/format-check-list"
+import { FormatCodeBlock } from "../plugins/toolbar/block-format/format-code-block"
+import { FormatHeading } from "../plugins/toolbar/block-format/format-heading"
+import { FormatListWithMarker } from "../plugins/toolbar/block-format/format-list-with-marker"
+import { FormatNumberedList } from "../plugins/toolbar/block-format/format-numbered-list"
+import { FormatParagraph } from "../plugins/toolbar/block-format/format-paragraph"
+import { FormatQuote } from "../plugins/toolbar/block-format/format-quote"
+import { BlockInsertPlugin } from "../plugins/toolbar/block-insert-plugin"
+import { InsertColumnsLayout } from "../plugins/toolbar/block-insert/insert-columns-layout"
+import { InsertEmbeds } from "../plugins/toolbar/block-insert/insert-embeds"
+import { InsertHorizontalRule } from "../plugins/toolbar/block-insert/insert-horizontal-rule"
+import { InsertImage } from "../plugins/toolbar/block-insert/insert-image"
+import { InsertTable } from "../plugins/toolbar/block-insert/insert-table"
+import { ClearFormattingToolbarPlugin } from "../plugins/toolbar/clear-formatting-toolbar-plugin"
+import { CodeLanguageToolbarPlugin } from "../plugins/toolbar/code-language-toolbar-plugin"
+import { ElementFormatToolbarPlugin } from "../plugins/toolbar/element-format-toolbar-plugin"
+import { FontBackgroundToolbarPlugin } from "../plugins/toolbar/font-background-toolbar-plugin"
+import { FontColorToolbarPlugin } from "../plugins/toolbar/font-color-toolbar-plugin"
+import { FontFamilyToolbarPlugin } from "../plugins/toolbar/font-family-toolbar-plugin"
+import { FontFormatToolbarPlugin } from "../plugins/toolbar/font-format-toolbar-plugin"
+import { FontSizeToolbarPlugin } from "../plugins/toolbar/font-size-toolbar-plugin"
+import { HistoryToolbarPlugin } from "../plugins/toolbar/history-toolbar-plugin"
+import { LinkToolbarPlugin } from "../plugins/toolbar/link-toolbar-plugin"
+import { SubSuperToolbarPlugin } from "../plugins/toolbar/subsuper-toolbar-plugin"
+import { ToolbarPlugin } from "../plugins/toolbar/toolbar-plugin"
+import { TypingPerfPlugin } from "../plugins/typing-pref-plugin"
+import { EMOJI } from "../transformers/markdown-emoji-transformer"
+import { HR } from "../transformers/markdown-hr-transformer"
+import { IMAGE } from "../transformers/markdown-image-transformer"
+import { TABLE } from "../transformers/markdown-table-transformer"
+import { TWEET } from "../transformers/markdown-tweet-transformer"
+import { UNORDERED_LIST } from "../transformers/markdown-list-transformer"
+import { Separator } from "../ui/separator"
+
+const placeholder = "Press / for commands..."
+
+export function Plugins({
+  readOnly = false,
+}: {
+  readOnly?: boolean
+}) {
+  const [floatingAnchorElem, setFloatingAnchorElem] =
+    useState<HTMLDivElement | null>(null)
+  const [isLinkEditMode, setIsLinkEditMode] = useState<boolean>(false)
+
+  const onRef = (_floatingAnchorElem: HTMLDivElement) => {
+    if (_floatingAnchorElem !== null) {
+      setFloatingAnchorElem(_floatingAnchorElem)
+    }
+  }
+
+  return (
+    <div className="editor-relative-full">
+      {!readOnly && (
+        <ToolbarPlugin
+          className="editor-toolbar"
+        >
+          {({ blockType }) => (
+            <>
+              <div className="editor-toolbar-group">
+                <HistoryToolbarPlugin />
+              </div>
+              <Separator orientation="vertical" className="editor-toolbar-separator" />
+              <div className="editor-toolbar-group">
+                <BlockInsertPlugin>
+                  <InsertHorizontalRule />
+                  <InsertImage />
+                  <InsertTable />
+                  <InsertColumnsLayout />
+                  <InsertEmbeds />
+                </BlockInsertPlugin>
+              </div>
+              <Separator orientation="vertical" className="editor-toolbar-separator" />
+              <div className="editor-toolbar-group">
+                <BlockFormatDropDown>
+                  <FormatParagraph />
+                  <FormatHeading levels={["h1", "h2", "h3"]} />
+                  <FormatNumberedList />
+                  <FormatListWithMarker
+                    blockFormatValue="number-alpha"
+                    listType="number"
+                    markerType="alpha"
+                  />
+                  <FormatBulletedList />
+                  <FormatListWithMarker
+                    blockFormatValue="bullet-dash"
+                    listType="bullet"
+                    markerType="-"
+                  />
+                  <FormatListWithMarker
+                    blockFormatValue="bullet-plus"
+                    listType="bullet"
+                    markerType="+"
+                  />
+                  <FormatCheckList />
+                  <FormatCodeBlock />
+                  <FormatQuote />
+                </BlockFormatDropDown>
+              </div>
+              {blockType === "code" ? (
+                <div className="editor-toolbar-group">
+                  <CodeLanguageToolbarPlugin />
+                </div>
+              ) : (
+                <>
+                  <div className="editor-toolbar-group">
+                    <FontFamilyToolbarPlugin />
+                    <FontSizeToolbarPlugin />
+                  </div>
+                  <Separator orientation="vertical" className="editor-toolbar-separator" />
+                  <div className="editor-toolbar-group">
+                    <FontFormatToolbarPlugin />
+                  </div>
+                  <Separator orientation="vertical" className="editor-toolbar-separator" />
+                  <div className="editor-toolbar-group">
+                    <SubSuperToolbarPlugin />
+                    <LinkToolbarPlugin setIsLinkEditMode={setIsLinkEditMode} />
+                  </div>
+                  <Separator orientation="vertical" className="editor-toolbar-separator" />
+                  <div className="editor-toolbar-group">
+                    <ClearFormattingToolbarPlugin />
+                  </div>
+                  <Separator orientation="vertical" className="editor-toolbar-separator" />
+                  <div className="editor-toolbar-group">
+                    <FontColorToolbarPlugin />
+                    <FontBackgroundToolbarPlugin />
+                  </div>
+                  <Separator orientation="vertical" className="editor-toolbar-separator" />
+                  <div className="editor-toolbar-group">
+                    <ElementFormatToolbarPlugin />
+                  </div>
+                </>
+              )}
+            </>
+          )}
+        </ToolbarPlugin>
+      )}
+
+      <div className="editor-relative-full">
+        {/* AutoFocusPlugin removed to prevent auto-scroll on page load */}
+        <RichTextPlugin
+          contentEditable={
+            <div className="editor-relative-full">
+              <div className="editor-relative-full" ref={onRef}>
+                <ContentEditable
+                  placeholder={readOnly ? "" : placeholder}
+                  className={cn(
+                    "editor-content-editable",
+                    readOnly && "editor-content-editable--readonly"
+                  )}
+                />
+              </div>
+            </div>
+          }
+          ErrorBoundary={LexicalErrorBoundary}
+          placeholder={readOnly ? null : <div className="editor-placeholder">{placeholder}</div>}
+        />
+
+        <ClickableLinkPlugin />
+        {!readOnly && (
+          <>
+            <CheckListPlugin />
+            <AlignPlugin />
+            <HorizontalRulePlugin />
+            <TablePlugin hasHorizontalScroll={true} />
+            <InsertTableCommandPlugin />
+            <TableColumnResizerPlugin />
+            <ListPlugin />
+            <TabIndentationPlugin />
+            <HistoryPlugin />
+          </>
+        )}
+        <HashtagPlugin />
+
+        <MentionsPlugin />
+        {!readOnly && <DraggableBlockPlugin anchorElem={floatingAnchorElem} />}
+        <KeywordsPlugin />
+        <EmojisPlugin />
+        {!readOnly && <ImagesPlugin />}
+
+        {!readOnly && <LayoutPlugin />}
+        {!readOnly && <ListColorPlugin />}
+
+        {!readOnly && (
+          <>
+            <AutoEmbedPlugin />
+            <TwitterPlugin />
+            <YouTubePlugin />
+          </>
+        )}
+
+        <CodeHighlightPlugin />
+        {!readOnly && <CodeActionMenuPlugin anchorElem={floatingAnchorElem} />}
+
+        {!readOnly && (
+          <>
+            <MarkdownShortcutPlugin
+              transformers={[
+                TABLE,
+                HR,
+                IMAGE,
+                EMOJI,
+                TWEET,
+                CHECK_LIST,
+                UNORDERED_LIST,
+                ...ELEMENT_TRANSFORMERS.filter(
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  (t) => t.type !== "element" || (t as any).regExp?.toString().indexOf("[*+-]") === -1
+                ),
+                ...MULTILINE_ELEMENT_TRANSFORMERS,
+                ...TEXT_FORMAT_TRANSFORMERS,
+                ...TEXT_MATCH_TRANSFORMERS,
+              ]}
+            />
+            <TypingPerfPlugin />
+            <TabFocusPlugin />
+            <AutocompletePlugin />
+            <AutoLinkPlugin />
+            <LinkPlugin />
+            <ClearEditorPlugin />
+
+            <ComponentPickerMenuPlugin
+              baseOptions={[
+                ParagraphPickerPlugin(),
+                HeadingPickerPlugin({ n: 1 }),
+                HeadingPickerPlugin({ n: 2 }),
+                HeadingPickerPlugin({ n: 3 }),
+                TablePickerPlugin(),
+                CheckListPickerPlugin(),
+                NumberedListPickerPlugin(),
+                BulletedListPickerPlugin(),
+                QuotePickerPlugin(),
+                CodePickerPlugin(),
+                DividerPickerPlugin(),
+                EmbedsPickerPlugin({ embed: "tweet" }),
+                EmbedsPickerPlugin({ embed: "youtube-video" }),
+                ImagePickerPlugin(),
+                ColumnsLayoutPickerPlugin(),
+                AlignmentPickerPlugin({ alignment: "left" }),
+                AlignmentPickerPlugin({ alignment: "center" }),
+                AlignmentPickerPlugin({ alignment: "right" }),
+                AlignmentPickerPlugin({ alignment: "justify" }),
+              ]}
+              dynamicOptionsFn={DynamicTablePickerPlugin}
+            />
+
+            <ContextMenuPlugin />
+            <DragDropPastePlugin />
+            <EmojiPickerPlugin />
+
+            <FloatingLinkEditorPlugin
+              anchorElem={floatingAnchorElem}
+              isLinkEditMode={isLinkEditMode}
+              setIsLinkEditMode={setIsLinkEditMode}
+            />
+            <FloatingTextFormatToolbarPlugin
+              anchorElem={floatingAnchorElem}
+              setIsLinkEditMode={setIsLinkEditMode}
+            />
+
+            <ListMaxIndentLevelPlugin />
+          </>
+        )}
+      </div>
+      {!readOnly && (
+        <ActionsPlugin>
+          <div className="editor-actions-bar">
+            <div className="editor-flex-shrink-0">
+              <CounterCharacterPlugin charset="UTF-16" />
+            </div>
+            <div className="editor-flex-1" />
+            <div className="editor-flex-shrink-0 editor-flex-end">
+              <SpeechToTextPlugin />
+              <ShareContentPlugin />
+              <ImportExportPlugin />
+              <MarkdownTogglePlugin
+                shouldPreserveNewLinesInMarkdown={true}
+                transformers={[
+                  TABLE,
+                  HR,
+                  IMAGE,
+                  EMOJI,
+                  TWEET,
+                  CHECK_LIST,
+                  UNORDERED_LIST,
+                  ...ELEMENT_TRANSFORMERS,
+                  ...MULTILINE_ELEMENT_TRANSFORMERS,
+                  ...TEXT_FORMAT_TRANSFORMERS,
+                  ...TEXT_MATCH_TRANSFORMERS,
+                ]}
+              />
+              <EditModeTogglePlugin />
+              <ClearEditorActionPlugin />
+              <TreeViewPlugin />
+            </div>
+          </div>
+        </ActionsPlugin>
+      )}
+    </div>
+  )
+}

package/src/hooks/use-click-outside.ts

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from "react"
+
+export function useClickOutside<T extends HTMLElement>(
+  handler: (event: MouseEvent | TouchEvent) => void
+) {
+  const ref = useRef<T>(null)
+
+  useEffect(() => {
+    const listener = (event: MouseEvent | TouchEvent) => {
+      const el = ref.current
+      if (!el || el.contains(event.target as Node)) {
+        return
+      }
+      handler(event)
+    }
+
+    document.addEventListener("mousedown", listener)
+    document.addEventListener("touchstart", listener)
+
+    return () => {
+      document.removeEventListener("mousedown", listener)
+      document.removeEventListener("touchstart", listener)
+    }
+  }, [handler])
+
+  return ref
+}

package/src/hooks/use-element-size.ts

@@ -0,0 +1,54 @@
+import { useCallback, useState } from "react"
+import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect"
+
+interface Size {
+  width: number
+  height: number
+}
+
+export function useElementSize<T extends HTMLElement = HTMLDivElement>() {
+  // Mutable values like 'ref.current' aren't valid dependencies
+  // instead we manage the current node in state
+  const [node, setNode] = useState<T | null>(null)
+  const [size, setSize] = useState<Size>({
+    width: 0,
+    height: 0,
+  })
+
+  // Prevent too many renders with useCallback
+  const handleSize = useCallback(() => {
+    if (!node) return
+    
+    setSize({
+      width: node.offsetWidth || 0,
+      height: node.offsetHeight || 0,
+    })
+  }, [node])
+
+  useIsomorphicLayoutEffect(() => {
+    if (!node) {
+      return
+    }
+
+    handleSize()
+    
+    // Use ResizeObserver for better accuracy and performance
+    if (typeof ResizeObserver !== 'undefined') {
+      const observer = new ResizeObserver(() => {
+        handleSize()
+      })
+      
+      observer.observe(node)
+      
+      return () => {
+        observer.disconnect()
+      }
+    }
+
+    // Fallback to resize event
+    window.addEventListener("resize", handleSize)
+    return () => window.removeEventListener("resize", handleSize)
+  }, [node, handleSize])
+
+  return { ref: setNode, ...size }
+}

package/src/hooks/use-header-height.ts

@@ -0,0 +1,95 @@
+import { useEffect, useState, useCallback } from "react"
+import { useElementSize } from "./use-element-size"
+
+const PUBLIC_HEADER_SELECTOR = 'header[data-public-header="true"]'
+const ADMIN_HEADER_SELECTOR = 'header[data-admin-header="true"]'
+
+/**
+ * Hook để đo chiều cao của header động trong editor
+ */
+export function useHeaderHeight() {
+  const { ref: headerRef, height: headerHeightValue } = useElementSize<HTMLElement>()
+  const [headerHeight, setHeaderHeight] = useState(0)
+
+  const findAndSetHeader = useCallback(() => {
+    if (typeof document === "undefined") {
+      return null
+    }
+
+    // Ưu tiên tìm header với data-admin-header="true" hoặc data-public-header="true"
+    let header = document.querySelector<HTMLElement>(ADMIN_HEADER_SELECTOR) || 
+                 document.querySelector<HTMLElement>(PUBLIC_HEADER_SELECTOR)
+    
+    // Fallback: đo header bằng cách tìm element header đầu tiên
+    if (!header) {
+      header = document.querySelector<HTMLElement>("header")
+    }
+
+    if (header) {
+      headerRef(header)
+      return header
+    }
+
+    return null
+  }, [headerRef])
+
+  useEffect(() => {
+    if (typeof document === "undefined") {
+      return
+    }
+
+    // Tìm header ngay lập tức
+    findAndSetHeader()
+
+    // Retry tìm header nếu chưa tìm thấy (có thể do SSR hoặc component chưa mount)
+    let retryCount = 0
+    const maxRetries = 10
+    const retryInterval = 100
+
+    const retryTimer = setInterval(() => {
+      const header = findAndSetHeader()
+      if (header || retryCount >= maxRetries) {
+        clearInterval(retryTimer)
+      }
+      retryCount++
+    }, retryInterval)
+
+    // Sử dụng MutationObserver để theo dõi khi header được thêm vào DOM
+    const observer = new MutationObserver(() => {
+      findAndSetHeader()
+    })
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+    })
+
+    return () => {
+      clearInterval(retryTimer)
+      observer.disconnect()
+      headerRef(null)
+    }
+  }, [findAndSetHeader, headerRef])
+
+  useEffect(() => {
+    // Cập nhật headerHeight khi headerSize.height thay đổi
+    if (headerHeightValue > 0) {
+      setHeaderHeight(headerHeightValue)
+    } else {
+      // Nếu chưa có height, thử đo lại bằng getBoundingClientRect
+      if (typeof document !== "undefined") {
+        const header = document.querySelector<HTMLElement>(ADMIN_HEADER_SELECTOR) ||
+                      document.querySelector<HTMLElement>(PUBLIC_HEADER_SELECTOR) || 
+                      document.querySelector<HTMLElement>("header")
+        if (header) {
+          const rect = header.getBoundingClientRect()
+          if (rect.height > 0) {
+            setHeaderHeight(rect.height)
+          }
+        }
+      }
+    }
+  }, [headerHeightValue])
+
+  return { headerHeight }
+}

package/src/hooks/use-isomorphic-layout-effect.ts

@@ -0,0 +1,4 @@
+import { useEffect, useLayoutEffect } from 'react'
+
+export const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect

package/src/index.ts

@@ -0,0 +1,4 @@
+"use client"
+export * from "./editor-x/editor"
+export * from "./components/lexical-editor"
+export type { SerializedEditorState } from "lexical"

package/src/lib/logger.ts

@@ -0,0 +1,6 @@
+export const logger = {
+  debug: console.debug,
+  info: console.info,
+  warn: console.warn,
+  error: console.error,
+}

package/src/lib/utils.ts

@@ -0,0 +1,19 @@
+export function cn(...inputs: (string | undefined | null | boolean | Record<string, boolean>)[]): string {
+  const classes: string[] = []
+
+  for (const input of inputs) {
+    if (!input) continue
+
+    if (typeof input === "string") {
+      classes.push(input)
+    } else if (typeof input === "object") {
+      for (const key in input) {
+        if (input[key]) {
+          classes.push(key)
+        }
+      }
+    }
+  }
+
+  return classes.join(" ")
+}