@thangph2146/lexical-editor 0.0.1

package/src/plugins/floating-text-format-plugin.tsx

@@ -0,0 +1,710 @@
+"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 { Dispatch, JSX, useCallback, useEffect, useRef, useState } from "react"
+import * as React from "react"
+import { $isCodeHighlightNode } from "@lexical/code"
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link"
+import {
+  $getSelectionStyleValueForProperty,
+  $patchStyleText,
+} from "@lexical/selection"
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
+import { mergeRegister } from "@lexical/utils"
+import {
+  $getSelection,
+  $isParagraphNode,
+  $isRangeSelection,
+  $isTextNode,
+  COMMAND_PRIORITY_LOW,
+  FORMAT_TEXT_COMMAND,
+  LexicalEditor,
+  SELECTION_CHANGE_COMMAND,
+} from "lexical"
+import {
+  BoldIcon,
+  CodeIcon,
+  ItalicIcon,
+  LinkIcon,
+  PaintBucketIcon,
+  StrikethroughIcon,
+  SubscriptIcon,
+  SuperscriptIcon,
+  UnderlineIcon,
+  BaselineIcon,
+} from "lucide-react"
+import { createPortal } from "react-dom"
+
+import {
+  ColorPicker,
+  ColorPickerAlphaSlider,
+  ColorPickerArea,
+  ColorPickerContent,
+  ColorPickerHueSlider,
+  ColorPickerInput,
+  ColorPickerPresets,
+} from "../editor-ui/color-picker"
+import { useEditorModal } from "../editor-hooks/use-modal"
+import { getDOMRangeRect } from "../utils/get-dom-range-rect"
+import { getSelectedNode } from "../utils/get-selected-node"
+import { setFloatingElemPosition } from "../utils/set-floating-elem-position"
+import { Button } from "../ui/button"
+import { DialogFooter } from "../ui/dialog"
+import { Flex } from "../ui/flex"
+import { Separator } from "../ui/separator"
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "../ui/toggle-group"
+import { IconSize } from "../ui/typography"
+
+function FontColorModalContent({
+  initialColor,
+  onApply,
+  onClose,
+}: {
+  initialColor: string
+  onApply: (color: string) => void
+  onClose: () => void
+}) {
+  const [color, setColor] = useState(initialColor)
+
+  return (
+    <div className="editor-list-color-dialog">
+      <Flex direction="column" gap={4}>
+        <div className="editor-text-xs-muted">Chọn màu cho văn bản đang chọn.</div>
+
+        <ColorPicker inline value={color} onValueChange={setColor}>
+          <ColorPickerContent className="editor-w-full editor-border-0 editor-shadow-none editor-p-0">
+            <ColorPickerArea className="editor-h-40 editor-w-full editor-rounded-md" />
+            <Flex direction="column" gap={3} className="editor-mt-3">
+              <Flex direction="column" gap={2}>
+                <ColorPickerHueSlider className="editor-w-full" />
+                <ColorPickerAlphaSlider className="editor-w-full" />
+                <ColorPickerInput className="editor-w-full" />
+              </Flex>
+              <ColorPickerPresets />
+            </Flex>
+          </ColorPickerContent>
+        </ColorPicker>
+
+        <DialogFooter className="editor-px-0">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => {
+              onApply(color)
+              onClose()
+            }}
+            className="editor-w-full"
+          >
+            Hoàn tất
+          </Button>
+        </DialogFooter>
+      </Flex>
+    </div>
+  )
+}
+
+function BgColorModalContent({
+  initialColor,
+  onApply,
+  onClose,
+}: {
+  initialColor: string
+  onApply: (color: string) => void
+  onClose: () => void
+}) {
+  const [color, setColor] = useState(initialColor)
+
+  return (
+    <div className="editor-list-color-dialog">
+      <Flex direction="column" gap={4}>
+        <div className="editor-text-xs-muted">
+          Chọn màu nền cho văn bản đang chọn.
+        </div>
+
+        <ColorPicker inline value={color} onValueChange={setColor}>
+          <ColorPickerContent className="editor-w-full editor-border-0 editor-shadow-none editor-p-0">
+            <ColorPickerArea className="editor-h-40 editor-w-full editor-rounded-md" />
+            <Flex direction="column" gap={3} className="editor-mt-3">
+              <Flex direction="column" gap={2}>
+                <ColorPickerHueSlider className="editor-w-full" />
+                <ColorPickerAlphaSlider className="editor-w-full" />
+                <ColorPickerInput className="editor-w-full" />
+              </Flex>
+              <ColorPickerPresets />
+            </Flex>
+          </ColorPickerContent>
+        </ColorPicker>
+
+        <DialogFooter className="editor-px-0">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => {
+              onApply(color)
+              onClose()
+            }}
+            className="editor-w-full"
+          >
+            Hoàn tất
+          </Button>
+        </DialogFooter>
+      </Flex>
+    </div>
+  )
+}
+
+function FloatingTextFormat({
+  editor,
+  anchorElem,
+  isLink,
+  isBold,
+  isItalic,
+  isUnderline,
+  isCode,
+  isStrikethrough,
+  isSubscript,
+  isSuperscript,
+  fontColor,
+  bgColor,
+  setIsLinkEditMode,
+  showModal,
+  isModalOpen,
+}: {
+  editor: LexicalEditor
+  anchorElem: HTMLElement
+  isBold: boolean
+  isCode: boolean
+  isItalic: boolean
+  isLink: boolean
+  isStrikethrough: boolean
+  isSubscript: boolean
+  isSuperscript: boolean
+  isUnderline: boolean
+  fontColor: string
+  bgColor: string
+  setIsLinkEditMode: Dispatch<boolean>
+  showModal: (
+    title: string,
+    content: (onClose: () => void) => JSX.Element
+  ) => void
+  isModalOpen: boolean
+}): JSX.Element {
+  const popupCharStylesEditorRef = useRef<HTMLDivElement | null>(null)
+
+  const insertLink = useCallback(() => {
+    if (!isLink) {
+      setIsLinkEditMode(true)
+      editor.dispatchCommand(TOGGLE_LINK_COMMAND, "https://")
+    } else {
+      setIsLinkEditMode(false)
+      editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)
+    }
+  }, [editor, isLink, setIsLinkEditMode])
+
+  const applyStyleText = useCallback(
+    (styles: Record<string, string>) => {
+      editor.update(() => {
+        const selection = $getSelection()
+        if ($isRangeSelection(selection)) {
+          $patchStyleText(selection, styles)
+        }
+      })
+    },
+    [editor]
+  )
+
+  const onFontColorSelect = useCallback(
+    (value: string) => {
+      if (value !== "inherit") {
+        applyStyleText({ color: value })
+      }
+    },
+    [applyStyleText]
+  )
+
+  const onBgColorSelect = useCallback(
+    (value: string) => {
+      if (value !== "inherit") {
+        applyStyleText({ "background-color": value })
+      }
+    },
+    [applyStyleText]
+  )
+
+  const openFontColorModal = () => {
+    showModal("Đổi màu chữ", (onClose) => (
+      <FontColorModalContent
+        initialColor={fontColor}
+        onApply={onFontColorSelect}
+        onClose={onClose}
+      />
+    ))
+  }
+
+  const openBgColorModal = () => {
+    showModal("Đổi màu nền", (onClose) => (
+      <BgColorModalContent
+        initialColor={bgColor}
+        onApply={onBgColorSelect}
+        onClose={onClose}
+      />
+    ))
+  }
+
+  useEffect(() => {
+    function mouseMoveListener(e: MouseEvent) {
+      if (
+        popupCharStylesEditorRef?.current &&
+        (e.buttons === 1 || e.buttons === 3)
+      ) {
+        if (popupCharStylesEditorRef.current.style.pointerEvents !== "none") {
+          const x = e.clientX
+          const y = e.clientY
+          const elementUnderMouse = document.elementFromPoint(x, y)
+
+          if (
+            !popupCharStylesEditorRef.current.contains(elementUnderMouse) &&
+            !isModalOpen
+          ) {
+            // Mouse is not over the target element => not a normal click, but probably a drag
+            popupCharStylesEditorRef.current.style.pointerEvents = "none"
+          }
+        }
+      }
+    }
+    function mouseUpListener(_e: MouseEvent) {
+      void _e
+      if (popupCharStylesEditorRef?.current) {
+        if (popupCharStylesEditorRef.current.style.pointerEvents !== "auto") {
+          popupCharStylesEditorRef.current.style.pointerEvents = "auto"
+        }
+      }
+    }
+
+    if (popupCharStylesEditorRef?.current) {
+      document.addEventListener("mousemove", mouseMoveListener)
+      document.addEventListener("mouseup", mouseUpListener)
+
+      return () => {
+        document.removeEventListener("mousemove", mouseMoveListener)
+        document.removeEventListener("mouseup", mouseUpListener)
+      }
+    }
+  }, [popupCharStylesEditorRef, isModalOpen])
+
+  const $updateTextFormatFloatingToolbar = useCallback(() => {
+    const selection = $getSelection()
+
+    const popupCharStylesEditorElem = popupCharStylesEditorRef.current
+    const nativeSelection = window.getSelection()
+
+    if (popupCharStylesEditorElem === null) {
+      return
+    }
+
+    const rootElement = editor.getRootElement()
+    if (
+      selection !== null &&
+      nativeSelection !== null &&
+      !nativeSelection.isCollapsed &&
+      rootElement !== null &&
+      rootElement.contains(nativeSelection.anchorNode)
+    ) {
+      const rangeRect = getDOMRangeRect(nativeSelection, rootElement)
+
+      setFloatingElemPosition(
+        rangeRect,
+        popupCharStylesEditorElem,
+        anchorElem,
+        isLink
+      )
+      popupCharStylesEditorElem.classList.add(
+        "editor-floating-text-format--visible"
+      )
+    } else {
+      setFloatingElemPosition(null, popupCharStylesEditorElem, anchorElem, isLink)
+      popupCharStylesEditorElem.classList.remove(
+        "editor-floating-text-format--visible"
+      )
+    }
+  }, [editor, anchorElem, isLink])
+
+  useEffect(() => {
+    const scrollerElem = anchorElem.parentElement
+
+    const update = () => {
+      editor.getEditorState().read(() => {
+        $updateTextFormatFloatingToolbar()
+      })
+    }
+
+    window.addEventListener("resize", update)
+    if (scrollerElem) {
+      scrollerElem.addEventListener("scroll", update, { passive: true })
+    }
+
+    return () => {
+      window.removeEventListener("resize", update)
+      if (scrollerElem) {
+        scrollerElem.removeEventListener("scroll", update)
+      }
+    }
+  }, [editor, $updateTextFormatFloatingToolbar, anchorElem])
+
+  useEffect(() => {
+    editor.getEditorState().read(() => {
+      $updateTextFormatFloatingToolbar()
+    })
+    return mergeRegister(
+      editor.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          $updateTextFormatFloatingToolbar()
+        })
+      }),
+
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        () => {
+          $updateTextFormatFloatingToolbar()
+          return false
+        },
+        COMMAND_PRIORITY_LOW
+      )
+    )
+  }, [editor, $updateTextFormatFloatingToolbar])
+
+  return (
+    <div
+      ref={popupCharStylesEditorRef}
+      className="editor-floating-text-format"
+    >
+      {editor.isEditable() && (
+        <Flex align="center" gap={1} className="editor-flex-nowrap">
+          <div className="editor-floating-group editor-flex editor-items-center">
+            <ToggleGroup
+              type="multiple"
+              className="editor-flex editor-items-center"
+              value={[
+                isBold ? "bold" : "",
+                isItalic ? "italic" : "",
+                isUnderline ? "underline" : "",
+                isStrikethrough ? "strikethrough" : "",
+                isCode ? "code" : "",
+                isLink ? "link" : "",
+              ].filter(Boolean)}
+            >
+              <ToggleGroupItem
+                value="bold"
+                aria-label="Toggle bold"
+                className="editor-toolbar-item"
+                onClick={() => {
+                  editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold")
+                }}
+                size="sm"
+              >
+                <IconSize size="sm">
+                  <BoldIcon />
+                </IconSize>
+              </ToggleGroupItem>
+              <ToggleGroupItem
+                value="italic"
+                aria-label="Toggle italic"
+                className="editor-toolbar-item"
+                onClick={() => {
+                  editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic")
+                }}
+                size="sm"
+              >
+                <IconSize size="sm">
+                  <ItalicIcon />
+                </IconSize>
+              </ToggleGroupItem>
+              <ToggleGroupItem
+                value="underline"
+                aria-label="Toggle underline"
+                className="editor-toolbar-item"
+                onClick={() => {
+                  editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline")
+                }}
+                size="sm"
+              >
+                <IconSize size="sm">
+                  <UnderlineIcon />
+                </IconSize>
+              </ToggleGroupItem>
+              <ToggleGroupItem
+                value="strikethrough"
+                aria-label="Toggle strikethrough"
+                className="editor-toolbar-item"
+                onClick={() => {
+                  editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough")
+                }}
+                size="sm"
+              >
+                <IconSize size="sm">
+                  <StrikethroughIcon />
+                </IconSize>
+              </ToggleGroupItem>
+              <ToggleGroupItem
+                value="code"
+                aria-label="Toggle code"
+                className="editor-toolbar-item"
+                onClick={() => {
+                  editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code")
+                }}
+                size="sm"
+              >
+                <IconSize size="sm">
+                  <CodeIcon />
+                </IconSize>
+              </ToggleGroupItem>
+              <ToggleGroupItem
+                value="link"
+                aria-label="Toggle link"
+                className="editor-toolbar-item"
+                onClick={insertLink}
+                size="sm"
+              >
+                <IconSize size="sm">
+                  <LinkIcon />
+                </IconSize>
+              </ToggleGroupItem>
+            </ToggleGroup>
+          </div>
+
+          <Separator orientation="vertical" className="editor-separator--vertical" />
+
+          <div className="editor-floating-group--lg editor-flex editor-items-center">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="editor-toolbar-item"
+              onClick={openFontColorModal}
+            >
+              <IconSize size="sm">
+                <BaselineIcon />
+              </IconSize>
+            </Button>
+            
+            <Button
+              variant="ghost"
+              size="sm"
+              className="editor-toolbar-item"
+              onClick={openBgColorModal}
+            >
+              <IconSize size="sm">
+                <PaintBucketIcon />
+              </IconSize>
+            </Button>
+          </div>
+
+          <Separator orientation="vertical" className="editor-separator--vertical" />
+
+          <div className="editor-floating-group editor-flex editor-items-center">
+            <ToggleGroup
+              type="single"
+              className="editor-flex editor-items-center"
+              value={
+                isSubscript ? "subscript" : isSuperscript ? "superscript" : ""
+              }
+            >
+              <ToggleGroupItem
+                value="subscript"
+                aria-label="Toggle subscript"
+                className="editor-toolbar-item"
+                onClick={() => {
+                  editor.dispatchCommand(FORMAT_TEXT_COMMAND, "subscript")
+                }}
+                size="sm"
+              >
+                <IconSize size="sm">
+                  <SubscriptIcon />
+                </IconSize>
+              </ToggleGroupItem>
+              <ToggleGroupItem
+                value="superscript"
+                aria-label="Toggle superscript"
+                className="editor-toolbar-item"
+                onClick={() => {
+                  editor.dispatchCommand(FORMAT_TEXT_COMMAND, "superscript")
+                }}
+                size="sm"
+              >
+                <IconSize size="sm">
+                  <SuperscriptIcon />
+                </IconSize>
+              </ToggleGroupItem>
+            </ToggleGroup>
+          </div>
+        </Flex>
+      )}
+    </div>
+  )
+}
+
+function useFloatingTextFormatToolbar(
+  editor: LexicalEditor,
+  anchorElem: HTMLDivElement | null,
+  setIsLinkEditMode: Dispatch<boolean>,
+  showModal: (
+    title: string,
+    content: (onClose: () => void) => JSX.Element
+  ) => void,
+  isModalOpen: boolean
+): JSX.Element | null {
+  const [isText, setIsText] = useState(false)
+  const [isLink, setIsLink] = useState(false)
+  const [isBold, setIsBold] = useState(false)
+  const [isItalic, setIsItalic] = useState(false)
+  const [isUnderline, setIsUnderline] = useState(false)
+  const [isStrikethrough, setIsStrikethrough] = useState(false)
+  const [isSubscript, setIsSubscript] = useState(false)
+  const [isSuperscript, setIsSuperscript] = useState(false)
+  const [isCode, setIsCode] = useState(false)
+  const [fontColor, setFontColor] = useState("inherit")
+  const [bgColor, setBgColor] = useState("inherit")
+
+  const updatePopup = useCallback(() => {
+    editor.getEditorState().read(() => {
+      // Should not to pop up the floating toolbar when using IME input
+      if (editor.isComposing()) {
+        return
+      }
+      const selection = $getSelection()
+      const nativeSelection = window.getSelection()
+      const rootElement = editor.getRootElement()
+
+      if (
+        nativeSelection !== null &&
+        (!$isRangeSelection(selection) ||
+          rootElement === null ||
+          !rootElement.contains(nativeSelection.anchorNode))
+      ) {
+        setIsText(false)
+        return
+      }
+
+      if (!$isRangeSelection(selection)) {
+        return
+      }
+
+      const node = getSelectedNode(selection)
+
+      // Update text format
+      setIsBold(selection.hasFormat("bold"))
+      setIsItalic(selection.hasFormat("italic"))
+      setIsUnderline(selection.hasFormat("underline"))
+      setIsStrikethrough(selection.hasFormat("strikethrough"))
+      setIsSubscript(selection.hasFormat("subscript"))
+      setIsSuperscript(selection.hasFormat("superscript"))
+      setIsCode(selection.hasFormat("code"))
+      setFontColor($getSelectionStyleValueForProperty(selection, "color", "inherit"))
+      setBgColor(
+        $getSelectionStyleValueForProperty(selection, "background-color", "inherit")
+      )
+
+      // Update links
+      const parent = node.getParent()
+      if ($isLinkNode(parent) || $isLinkNode(node)) {
+        setIsLink(true)
+      } else {
+        setIsLink(false)
+      }
+
+      if (
+        !$isCodeHighlightNode(selection.anchor.getNode()) &&
+        selection.getTextContent() !== ""
+      ) {
+        setIsText($isTextNode(node) || $isParagraphNode(node))
+      } else {
+        setIsText(false)
+      }
+
+      const rawTextContent = selection.getTextContent().replace(/\n/g, "")
+      if (!selection.isCollapsed() && rawTextContent === "") {
+        setIsText(false)
+        return
+      }
+    })
+  }, [editor])
+
+  useEffect(() => {
+    document.addEventListener("selectionchange", updatePopup)
+    return () => {
+      document.removeEventListener("selectionchange", updatePopup)
+    }
+  }, [updatePopup])
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerUpdateListener(() => {
+        updatePopup()
+      }),
+      editor.registerRootListener(() => {
+        if (editor.getRootElement() === null) {
+          setIsText(false)
+        }
+      })
+    )
+  }, [editor, updatePopup])
+
+  if (!isText || !anchorElem) {
+    return null
+  }
+
+  return createPortal(
+    <FloatingTextFormat
+      editor={editor}
+      anchorElem={anchorElem}
+      isLink={isLink}
+      isBold={isBold}
+      isItalic={isItalic}
+      isStrikethrough={isStrikethrough}
+      isSubscript={isSubscript}
+      isSuperscript={isSuperscript}
+      isUnderline={isUnderline}
+      isCode={isCode}
+      fontColor={fontColor}
+      bgColor={bgColor}
+      setIsLinkEditMode={setIsLinkEditMode}
+      showModal={showModal}
+      isModalOpen={isModalOpen}
+    />,
+    anchorElem
+  )
+}
+
+export function FloatingTextFormatToolbarPlugin({
+  anchorElem,
+  setIsLinkEditMode,
+}: {
+  anchorElem: HTMLDivElement | null
+  setIsLinkEditMode: Dispatch<boolean>
+}): JSX.Element | null {
+  const [editor] = useLexicalComposerContext()
+  const [modal, showModal] = useEditorModal()
+
+  const toolbar = useFloatingTextFormatToolbar(
+    editor,
+    anchorElem,
+    setIsLinkEditMode,
+    showModal,
+    modal !== null
+  )
+
+  return (
+    <>
+      {toolbar}
+      {modal}
+    </>
+  )
+}