@thangph2146/lexical-editor 0.0.1

package/src/plugins/toolbar/font-color-toolbar-plugin.tsx

@@ -0,0 +1,101 @@
+"use client"
+
+import { useCallback, useState } from "react"
+import {
+  $getSelectionStyleValueForProperty,
+  $patchStyleText,
+} from "@lexical/selection"
+import { $getSelection, $isRangeSelection, BaseSelection } from "lexical"
+import { BaselineIcon } from "lucide-react"
+
+import { useToolbarContext } from "../../context/toolbar-context"
+import { useUpdateToolbarHandler } from "../../editor-hooks/use-update-toolbar"
+import {
+  ColorPicker,
+  ColorPickerAlphaSlider,
+  ColorPickerArea,
+  ColorPickerContent,
+  ColorPickerEyeDropper,
+  ColorPickerFormatSelect,
+  ColorPickerHueSlider,
+  ColorPickerInput,
+  ColorPickerPresets,
+  ColorPickerTrigger,
+} from "../../editor-ui/color-picker"
+import { Button } from "../../ui/button"
+import { Flex } from "../../ui/flex"
+import { IconSize } from "../../ui/typography"
+
+export function FontColorToolbarPlugin() {
+  const { activeEditor } = useToolbarContext()
+
+  const [fontColor, setFontColor] = useState("#000")
+
+  const $updateToolbar = (selection: BaseSelection) => {
+    if ($isRangeSelection(selection)) {
+      setFontColor(
+        $getSelectionStyleValueForProperty(selection, "color", "#000")
+      )
+    }
+  }
+
+  useUpdateToolbarHandler($updateToolbar)
+
+  const applyStyleText = useCallback(
+    (styles: Record<string, string>) => {
+      activeEditor.update(() => {
+        const selection = $getSelection()
+        activeEditor.setEditable(false)
+        if (selection !== null) {
+          $patchStyleText(selection, styles)
+        }
+      })
+    },
+    [activeEditor]
+  )
+
+  const onFontColorSelect = useCallback(
+    (value: string) => {
+      applyStyleText({ color: value })
+    },
+    [applyStyleText]
+  )
+
+  return (
+    <ColorPicker
+      modal
+      defaultFormat="hex"
+      defaultValue={fontColor}
+      onValueChange={onFontColorSelect}
+      onOpenChange={(open) => {
+        if (!open) {
+          activeEditor.setEditable(true)
+          activeEditor.focus()
+        }
+      }}
+    >
+      <ColorPickerTrigger asChild>
+        <Button variant="outline" size="icon" className="editor-toolbar-item--lg">
+          <IconSize size="sm">
+            <BaselineIcon />
+          </IconSize>
+        </Button>
+      </ColorPickerTrigger>
+      <ColorPickerContent>
+        <ColorPickerArea />
+        <Flex align="center" gap={2}>
+            <ColorPickerEyeDropper />
+            <Flex direction="column" gap={2} className="editor-flex-1">
+              <ColorPickerHueSlider />
+              <ColorPickerAlphaSlider />
+            </Flex>
+          </Flex>
+        <Flex align="center" gap={2}>
+          <ColorPickerFormatSelect />
+          <ColorPickerInput />
+        </Flex>
+        <ColorPickerPresets />
+      </ColorPickerContent>
+    </ColorPicker>
+  )
+}

package/src/plugins/toolbar/font-family-toolbar-plugin.tsx

@@ -0,0 +1,91 @@
+"use client"
+
+import { useCallback, useState } from "react"
+import {
+  $getSelectionStyleValueForProperty,
+  $patchStyleText,
+} from "@lexical/selection"
+import { $getSelection, $isRangeSelection, BaseSelection } from "lexical"
+import { TypeIcon } from "lucide-react"
+
+import { useToolbarContext } from "../../context/toolbar-context"
+import { useUpdateToolbarHandler } from "../../editor-hooks/use-update-toolbar"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+} from "../../ui/select"
+import { IconSize } from "../../ui/typography"
+
+const FONT_FAMILY_OPTIONS = [
+  "Arial",
+  "Verdana",
+  "Times New Roman",
+  "Georgia",
+  "Courier New",
+  "Trebuchet MS",
+]
+
+export function FontFamilyToolbarPlugin() {
+  const style = "font-family"
+  const [fontFamily, setFontFamily] = useState("Arial")
+
+  const { activeEditor } = useToolbarContext()
+
+  const $updateToolbar = (selection: BaseSelection) => {
+    if ($isRangeSelection(selection)) {
+      setFontFamily(
+        $getSelectionStyleValueForProperty(selection, "font-family", "Arial")
+      )
+    }
+  }
+
+  useUpdateToolbarHandler($updateToolbar)
+
+  const handleClick = useCallback(
+    (option: string) => {
+      activeEditor.update(() => {
+        const selection = $getSelection()
+        if (selection !== null) {
+          $patchStyleText(selection, {
+            [style]: option,
+          })
+        }
+      })
+    },
+    [activeEditor, style]
+  )
+
+  const buttonAriaLabel = "Formatting options for font family"
+
+  return (
+    <Select
+      modal={false}
+      value={fontFamily}
+      onValueChange={(value) => {
+        setFontFamily(value)
+        handleClick(value)
+      }}
+      aria-label={buttonAriaLabel}
+    >
+      <SelectTrigger className="editor-toolbar-select-trigger editor-toolbar-select-trigger--w-auto editor-toolbar-item--gap-sm">
+        <IconSize size="sm">
+          <TypeIcon />
+        </IconSize>
+        <span style={{ fontFamily }}>{fontFamily}</span>
+      </SelectTrigger>
+      <SelectContent>
+        {FONT_FAMILY_OPTIONS.map((option) => (
+          <SelectItem
+            key={option}
+            value={option}
+            style={{ fontFamily: option }}
+          >
+            {option}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}

package/src/plugins/toolbar/font-format-toolbar-plugin.tsx

@@ -0,0 +1,85 @@
+"use client"
+
+import { useCallback, useState } from "react"
+import { $isTableSelection } from "@lexical/table"
+import {
+  $isRangeSelection,
+  BaseSelection,
+  FORMAT_TEXT_COMMAND,
+  TextFormatType,
+} from "lexical"
+import {
+  BoldIcon,
+  ItalicIcon,
+  StrikethroughIcon,
+  UnderlineIcon,
+} from "lucide-react"
+
+import { useToolbarContext } from "../../context/toolbar-context"
+import { useUpdateToolbarHandler } from "../../editor-hooks/use-update-toolbar"
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "../../ui/toggle-group"
+
+const FORMATS = [
+  { format: "bold", icon: BoldIcon, label: "Bold" },
+  { format: "italic", icon: ItalicIcon, label: "Italic" },
+  { format: "underline", icon: UnderlineIcon, label: "Underline" },
+  { format: "strikethrough", icon: StrikethroughIcon, label: "Strikethrough" },
+] as const
+
+export function FontFormatToolbarPlugin() {
+  const { activeEditor } = useToolbarContext()
+  const [activeFormats, setActiveFormats] = useState<string[]>([])
+
+  const $updateToolbar = useCallback((selection: BaseSelection) => {
+    if ($isRangeSelection(selection) || $isTableSelection(selection)) {
+      const formats: string[] = []
+      FORMATS.forEach(({ format }) => {
+        if (selection.hasFormat(format as TextFormatType)) {
+          formats.push(format)
+        }
+      })
+      setActiveFormats((prev) => {
+        // Only update if formats have changed
+        if (
+          prev.length !== formats.length ||
+          !formats.every((f) => prev.includes(f))
+        ) {
+          return formats
+        }
+        return prev
+      })
+    }
+  }, [])
+
+  useUpdateToolbarHandler($updateToolbar)
+
+  return (
+    <ToggleGroup
+      type="multiple"
+      value={activeFormats}
+      onValueChange={setActiveFormats}
+      variant="default"
+      size="sm"
+    >
+      {FORMATS.map(({ format, icon: Icon, label }) => (
+        <ToggleGroupItem
+          key={format}
+          value={format}
+          aria-label={label}
+          className="editor-toolbar-item"
+          onClick={() => {
+            activeEditor.dispatchCommand(
+              FORMAT_TEXT_COMMAND,
+              format as TextFormatType
+            )
+          }}
+        >
+          <Icon className="editor-icon-sm" />
+        </ToggleGroupItem>
+      ))}
+    </ToggleGroup>
+  )
+}

package/src/plugins/toolbar/font-size-toolbar-plugin.tsx

@@ -0,0 +1,177 @@
+"use client"
+
+import { useCallback, useEffect, useRef, useState } from "react"
+import {
+  $getSelectionStyleValueForProperty,
+  $patchStyleText,
+} from "@lexical/selection"
+import { $getSelection, $isRangeSelection, BaseSelection } from "lexical"
+import { Minus, Plus } from "lucide-react"
+
+import { useToolbarContext } from "../../context/toolbar-context"
+import { useUpdateToolbarHandler } from "../../editor-hooks/use-update-toolbar"
+import { Button } from "../../ui/button"
+import { ButtonGroup } from "../../ui/button-group"
+import { Input } from "../../ui/input"
+import { IconSize } from "../../ui/typography"
+
+const DEFAULT_FONT_SIZE = 16
+const MIN_FONT_SIZE = 1
+const MAX_FONT_SIZE = 72
+const HOLD_DELAY = 500
+const HOLD_INTERVAL = 50
+
+export function FontSizeToolbarPlugin() {
+  const style = "font-size"
+  const [fontSize, setFontSize] = useState<number | string>(DEFAULT_FONT_SIZE)
+  const fontSizeRef = useRef(fontSize)
+
+  // Update ref when state changes
+  useEffect(() => {
+    fontSizeRef.current = fontSize
+  }, [fontSize])
+
+  const { activeEditor } = useToolbarContext()
+
+  const $updateToolbar = (selection: BaseSelection) => {
+    if ($isRangeSelection(selection)) {
+      const value = $getSelectionStyleValueForProperty(
+        selection,
+        "font-size",
+        `${DEFAULT_FONT_SIZE}px`
+      )
+      const size = parseInt(value) || DEFAULT_FONT_SIZE
+      setFontSize(size)
+    }
+  }
+
+  useUpdateToolbarHandler($updateToolbar)
+
+  const updateFontSize = useCallback(
+    (newSize: number) => {
+      const size = Math.min(Math.max(newSize, MIN_FONT_SIZE), MAX_FONT_SIZE)
+      activeEditor.update(() => {
+        const selection = $getSelection()
+        if (selection !== null) {
+          $patchStyleText(selection, {
+            [style]: `${size}px`,
+          })
+        }
+      })
+      setFontSize(size)
+    },
+    [activeEditor, style]
+  )
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value
+    if (value === "") {
+      setFontSize("")
+      return
+    }
+    const size = parseInt(value)
+    if (!isNaN(size)) {
+      setFontSize(size)
+    }
+  }
+
+  const handleInputBlur = () => {
+    if (fontSize === "" || (typeof fontSize === "number" && (fontSize < MIN_FONT_SIZE || fontSize > MAX_FONT_SIZE))) {
+      setFontSize(DEFAULT_FONT_SIZE)
+      updateFontSize(DEFAULT_FONT_SIZE)
+    } else {
+      updateFontSize(fontSize as number)
+    }
+  }
+
+  const timerRef = useRef<NodeJS.Timeout | null>(null)
+  const intervalRef = useRef<NodeJS.Timeout | null>(null)
+
+  const stopTimer = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current)
+      timerRef.current = null
+    }
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current)
+      intervalRef.current = null
+    }
+  }, [])
+
+  const startTimer = useCallback(
+    (increment: boolean) => {
+      stopTimer()
+
+      // Initial click
+      const currentSize = typeof fontSizeRef.current === "number" ? fontSizeRef.current : DEFAULT_FONT_SIZE
+      updateFontSize(currentSize + (increment ? 1 : -1))
+
+      timerRef.current = setTimeout(() => {
+        intervalRef.current = setInterval(() => {
+          const currentSizeLoop = typeof fontSizeRef.current === "number" ? fontSizeRef.current : DEFAULT_FONT_SIZE
+          if (increment && currentSizeLoop < MAX_FONT_SIZE) {
+            updateFontSize(currentSizeLoop + 1)
+          } else if (!increment && currentSizeLoop > MIN_FONT_SIZE) {
+            updateFontSize(currentSizeLoop - 1)
+          } else {
+            stopTimer()
+          }
+        }, HOLD_INTERVAL)
+      }, HOLD_DELAY)
+    },
+    [updateFontSize, stopTimer]
+  )
+
+  useEffect(() => {
+    return () => stopTimer()
+  }, [stopTimer])
+
+  return (
+    <ButtonGroup>
+      <Button
+        variant="outline"
+        size="icon"
+        className="editor-toolbar-item"
+        onPointerDown={() => startTimer(false)}
+        onPointerUp={stopTimer}
+        onPointerLeave={stopTimer}
+        disabled={typeof fontSize === "number" && fontSize <= MIN_FONT_SIZE}
+        title="Decrease font size"
+      >
+        <IconSize size="xs">
+          <Minus />
+        </IconSize>
+      </Button>
+      <Input
+        type="number"
+        value={fontSize}
+        onChange={handleInputChange}
+        onBlur={handleInputBlur}
+        className="editor-toolbar-item editor-toolbar-item--w-fit editor-toolbar-item--bg-background editor-toolbar-item--text-center editor-w-14"
+        min={MIN_FONT_SIZE}
+        max={MAX_FONT_SIZE}
+        onKeyDown={(event) => {
+          if (event.key === "Enter") {
+            event.preventDefault()
+            handleInputBlur()
+          }
+          event.stopPropagation()
+        }}
+      />
+      <Button
+        variant="outline"
+        size="icon"
+        className="editor-toolbar-item"
+        onPointerDown={() => startTimer(true)}
+        onPointerUp={stopTimer}
+        onPointerLeave={stopTimer}
+        disabled={typeof fontSize === "number" && fontSize >= MAX_FONT_SIZE}
+        title="Increase font size"
+      >
+        <IconSize size="xs">
+          <Plus />
+        </IconSize>
+      </Button>
+    </ButtonGroup>
+  )
+}

package/src/plugins/toolbar/history-toolbar-plugin.tsx

@@ -0,0 +1,87 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
+import { IS_APPLE, mergeRegister } from "@lexical/utils"
+import {
+  CAN_REDO_COMMAND,
+  CAN_UNDO_COMMAND,
+  COMMAND_PRIORITY_CRITICAL,
+  REDO_COMMAND,
+  UNDO_COMMAND,
+} from "lexical"
+import { RedoIcon, UndoIcon } from "lucide-react"
+
+import { useToolbarContext } from "../../context/toolbar-context"
+import { Button } from "../../ui/button"
+import { ButtonGroup } from "../../ui/button-group"
+
+export function HistoryToolbarPlugin() {
+  const [editor] = useLexicalComposerContext()
+  const { activeEditor, $updateToolbar } = useToolbarContext()
+  const [isEditable, setIsEditable] = useState(editor.isEditable())
+  const [canUndo, setCanUndo] = useState(false)
+  const [canRedo, setCanRedo] = useState(false)
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerEditableListener((editable) => {
+        setIsEditable(editable)
+      }),
+      activeEditor.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          $updateToolbar()
+        })
+      }),
+      activeEditor.registerCommand<boolean>(
+        CAN_UNDO_COMMAND,
+        (payload) => {
+          setCanUndo(payload)
+          return false
+        },
+        COMMAND_PRIORITY_CRITICAL
+      ),
+      activeEditor.registerCommand<boolean>(
+        CAN_REDO_COMMAND,
+        (payload) => {
+          setCanRedo(payload)
+          return false
+        },
+        COMMAND_PRIORITY_CRITICAL
+      )
+    )
+  }, [$updateToolbar, activeEditor, editor])
+
+  return (
+    <ButtonGroup>
+      <Button
+        disabled={!canUndo || !isEditable}
+        onClick={() => {
+          activeEditor.dispatchCommand(UNDO_COMMAND, undefined)
+        }}
+        title={IS_APPLE ? "Undo (⌘Z)" : "Undo (Ctrl+Z)"}
+        type="button"
+        aria-label="Undo"
+        size="sm"
+        variant="ghost"
+        className="editor-toolbar-item"
+      >
+        <UndoIcon className="editor-icon-sm" />
+      </Button>
+      <Button
+        disabled={!canRedo || !isEditable}
+        onClick={() => {
+          activeEditor.dispatchCommand(REDO_COMMAND, undefined)
+        }}
+        title={IS_APPLE ? "Redo (⇧⌘Z)" : "Redo (Ctrl+Y)"}
+        type="button"
+        aria-label="Redo"
+        size="sm"
+        variant="ghost"
+        className="editor-toolbar-item"
+      >
+        <RedoIcon className="editor-icon-sm" />
+      </Button>
+    </ButtonGroup>
+  )
+}

package/src/plugins/toolbar/link-toolbar-plugin.tsx

@@ -0,0 +1,90 @@
+"use client"
+
+import { useCallback, useEffect, useState } from "react"
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link"
+import {
+  $isRangeSelection,
+  BaseSelection,
+  COMMAND_PRIORITY_NORMAL,
+  KEY_MODIFIER_COMMAND,
+} from "lexical"
+import { LinkIcon } from "lucide-react"
+
+import { useToolbarContext } from "../../context/toolbar-context"
+import { useUpdateToolbarHandler } from "../../editor-hooks/use-update-toolbar"
+import { getSelectedNode } from "../../utils/get-selected-node"
+import { sanitizeUrl } from "../../utils/url"
+import { Toggle } from "../../ui/toggle"
+import { IconSize } from "../../ui/typography"
+
+export function LinkToolbarPlugin({
+  setIsLinkEditMode,
+}: {
+  setIsLinkEditMode: (isEditMode: boolean) => void
+}) {
+  const { activeEditor } = useToolbarContext()
+  const [isLink, setIsLink] = useState(false)
+
+  const $updateToolbar = (selection: BaseSelection) => {
+    if ($isRangeSelection(selection)) {
+      const node = getSelectedNode(selection)
+      const parent = node.getParent()
+      if ($isLinkNode(parent) || $isLinkNode(node)) {
+        setIsLink(true)
+      } else {
+        setIsLink(false)
+      }
+    }
+  }
+
+  useUpdateToolbarHandler($updateToolbar)
+
+  useEffect(() => {
+    return activeEditor.registerCommand(
+      KEY_MODIFIER_COMMAND,
+      (payload) => {
+        const event: KeyboardEvent = payload
+        const { code, ctrlKey, metaKey } = event
+
+        if (code === "KeyK" && (ctrlKey || metaKey)) {
+          event.preventDefault()
+          let url: string | null
+          if (!isLink) {
+            setIsLinkEditMode(true)
+            url = sanitizeUrl("https://")
+          } else {
+            setIsLinkEditMode(false)
+            url = null
+          }
+          return activeEditor.dispatchCommand(TOGGLE_LINK_COMMAND, url)
+        }
+        return false
+      },
+      COMMAND_PRIORITY_NORMAL
+    )
+  }, [activeEditor, isLink, setIsLinkEditMode])
+
+  const insertLink = useCallback(() => {
+    if (!isLink) {
+      setIsLinkEditMode(true)
+      activeEditor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl("https://"))
+    } else {
+      setIsLinkEditMode(false)
+      activeEditor.dispatchCommand(TOGGLE_LINK_COMMAND, null)
+    }
+  }, [activeEditor, isLink, setIsLinkEditMode])
+
+  return (
+    <Toggle
+      variant={"outline"}
+      size="sm"
+      className="editor-toolbar-item"
+      aria-label="Toggle link"
+      onClick={insertLink}
+    >
+      <IconSize size="sm">
+        <LinkIcon />
+      </IconSize>
+    </Toggle>
+  )
+}

package/src/plugins/toolbar/subsuper-toolbar-plugin.tsx

@@ -0,0 +1,69 @@
+"use client"
+
+import { useState } from "react"
+import { $isTableSelection } from "@lexical/table"
+import { $isRangeSelection, BaseSelection, FORMAT_TEXT_COMMAND } from "lexical"
+import { SubscriptIcon, SuperscriptIcon } from "lucide-react"
+
+import { useToolbarContext } from "../../context/toolbar-context"
+import { useUpdateToolbarHandler } from "../../editor-hooks/use-update-toolbar"
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "../../ui/toggle-group"
+import { IconSize } from "../../ui/typography"
+
+export function SubSuperToolbarPlugin() {
+  const { activeEditor } = useToolbarContext()
+  const [isSubscript, setIsSubscript] = useState(false)
+  const [isSuperscript, setIsSuperscript] = useState(false)
+
+  const $updateToolbar = (selection: BaseSelection) => {
+    if ($isRangeSelection(selection) || $isTableSelection(selection)) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      setIsSubscript((selection as any).hasFormat("subscript"))
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      setIsSuperscript((selection as any).hasFormat("superscript"))
+    }
+  }
+
+  useUpdateToolbarHandler($updateToolbar)
+
+  return (
+    <ToggleGroup
+      type="single"
+      value={
+        isSubscript ? "subscript" : isSuperscript ? "superscript" : ""
+      }
+      size="default"
+      variant="outline"
+    >
+      <ToggleGroupItem
+        value="subscript"
+        size="default"
+        aria-label="Toggle subscript"
+        onClick={() => {
+          activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, "subscript")
+        }}
+        variant={"outline"}
+      >
+        <IconSize size="sm">
+          <SubscriptIcon />
+        </IconSize>
+      </ToggleGroupItem>
+      <ToggleGroupItem
+        value="superscript"
+        size="default"
+        aria-label="Toggle superscript"
+        onClick={() => {
+          activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, "superscript")
+        }}
+        variant={"outline"}
+      >
+        <IconSize size="sm">
+          <SuperscriptIcon />
+        </IconSize>
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}