@thangph2146/lexical-editor 0.0.1

package/src/plugins/toolbar/clear-formatting-toolbar-plugin.tsx

@@ -0,0 +1,92 @@
+"use client"
+
+import { useCallback } from "react"
+import { $isDecoratorBlockNode } from "@lexical/react/LexicalDecoratorBlockNode"
+import { $isHeadingNode, $isQuoteNode } from "@lexical/rich-text"
+import { $isTableSelection } from "@lexical/table"
+import { $getNearestBlockElementAncestorOrThrow } from "@lexical/utils"
+import {
+  $createParagraphNode,
+  $getSelection,
+  $isRangeSelection,
+  $isTextNode,
+} from "lexical"
+import { EraserIcon } from "lucide-react"
+
+import { useToolbarContext } from "../../context/toolbar-context"
+import { Button } from "../../ui/button"
+import { IconSize } from "../../ui/typography"
+
+export function ClearFormattingToolbarPlugin() {
+  const { activeEditor } = useToolbarContext()
+
+  const clearFormatting = useCallback(() => {
+    activeEditor.update(() => {
+      const selection = $getSelection()
+      if ($isRangeSelection(selection) || $isTableSelection(selection)) {
+        const anchor = selection.anchor
+        const focus = selection.focus
+        const nodes = selection.getNodes()
+        const extractedNodes = selection.extract()
+
+        if (anchor.key === focus.key && anchor.offset === focus.offset) {
+          return
+        }
+
+        nodes.forEach((node, idx) => {
+          // We split the first and last node by the selection
+          // So that we don't format unselected text inside those nodes
+          if ($isTextNode(node)) {
+            // Use a separate variable to ensure TS does not lose the refinement
+            let textNode = node
+            if (idx === 0 && anchor.offset !== 0) {
+              textNode = textNode.splitText(anchor.offset)[1] || textNode
+            }
+            if (idx === nodes.length - 1) {
+              textNode = textNode.splitText(focus.offset)[0] || textNode
+            }
+            /**
+             * If the selected text has one format applied
+             * selecting a portion of the text, could
+             * clear the format to the wrong portion of the text.
+             *
+             * The cleared text is based on the length of the selected text.
+             */
+            // We need this in case the selected text only has one format
+            const extractedTextNode = extractedNodes[0]
+            if (nodes.length === 1 && $isTextNode(extractedTextNode)) {
+              textNode = extractedTextNode
+            }
+
+            if (textNode.__style !== "") {
+              textNode.setStyle("")
+            }
+            if (textNode.__format !== 0) {
+              textNode.setFormat(0)
+              $getNearestBlockElementAncestorOrThrow(textNode).setFormat("")
+            }
+            node = textNode
+          } else if ($isHeadingNode(node) || $isQuoteNode(node)) {
+            node.replace($createParagraphNode(), true)
+          } else if ($isDecoratorBlockNode(node)) {
+            node.setFormat("")
+          }
+        })
+      }
+    })
+  }, [activeEditor])
+
+  return (
+    <Button
+      className="editor-toolbar-item"
+      aria-label="Clear formatting"
+      variant={"outline"}
+      size={"icon"}
+      onClick={clearFormatting}
+    >
+      <IconSize size="sm">
+        <EraserIcon />
+      </IconSize>
+    </Button>
+  )
+}

package/src/plugins/toolbar/code-language-toolbar-plugin.tsx

@@ -0,0 +1,121 @@
+"use client"
+
+import { useCallback, useState } from "react"
+import {
+  $isCodeNode,
+  CODE_LANGUAGE_FRIENDLY_NAME_MAP,
+  CODE_LANGUAGE_MAP,
+  getLanguageFriendlyName,
+} from "@lexical/code"
+import { $isListNode } from "@lexical/list"
+import { $findMatchingParent } from "@lexical/utils"
+import {
+  $getNodeByKey,
+  $isRangeSelection,
+  $isRootOrShadowRoot,
+  BaseSelection,
+} from "lexical"
+
+import { useToolbarContext } from "../../context/toolbar-context"
+import { useUpdateToolbarHandler } from "../../editor-hooks/use-update-toolbar"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+} from "../../ui/select"
+
+function getCodeLanguageOptions(): [string, string][] {
+  const options: [string, string][] = []
+
+  for (const [lang, friendlyName] of Object.entries(
+    CODE_LANGUAGE_FRIENDLY_NAME_MAP
+  )) {
+    options.push([lang, friendlyName])
+  }
+
+  return options
+}
+
+const CODE_LANGUAGE_OPTIONS = getCodeLanguageOptions()
+
+export function CodeLanguageToolbarPlugin() {
+  const { activeEditor } = useToolbarContext()
+  const [codeLanguage, setCodeLanguage] = useState<string>("")
+  const [selectedElementKey, setSelectedElementKey] = useState<string | null>(
+    null
+  )
+
+  const $updateToolbar = (selection: BaseSelection) => {
+    if ($isRangeSelection(selection)) {
+      const anchorNode = selection.anchor.getNode()
+      let element =
+        anchorNode.getKey() === "root"
+          ? anchorNode
+          : $findMatchingParent(anchorNode, (e) => {
+              const parent = e.getParent()
+              return parent !== null && $isRootOrShadowRoot(parent)
+            })
+
+      if (element === null) {
+        element = anchorNode.getTopLevelElementOrThrow()
+      }
+
+      const elementKey = element.getKey()
+      const elementDOM = activeEditor.getElementByKey(elementKey)
+
+      if (elementDOM !== null) {
+        setSelectedElementKey(elementKey)
+
+        if (!$isListNode(element) && $isCodeNode(element)) {
+          const language =
+            element.getLanguage() as keyof typeof CODE_LANGUAGE_MAP
+          setCodeLanguage(
+            language ? CODE_LANGUAGE_MAP[language] || language : ""
+          )
+          return
+        }
+      }
+    }
+  }
+
+  useUpdateToolbarHandler($updateToolbar)
+
+  const onCodeLanguageSelect = useCallback(
+    (value: string) => {
+      activeEditor.update(() => {
+        if (selectedElementKey !== null) {
+          const node = $getNodeByKey(selectedElementKey)
+          if ($isCodeNode(node)) {
+            node.setLanguage(value)
+          }
+        }
+      })
+    },
+    [activeEditor, selectedElementKey]
+  )
+
+  return (
+    <Select
+      modal={false}
+      value={codeLanguage}
+      onValueChange={onCodeLanguageSelect}
+    >
+      <SelectTrigger className="editor-toolbar-select-trigger editor-toolbar-select-trigger--w-auto editor-toolbar-item--gap-sm">
+        <span>
+          {getLanguageFriendlyName(codeLanguage) || "Select Language"}
+        </span>
+      </SelectTrigger>
+      <SelectContent>
+        {CODE_LANGUAGE_OPTIONS.map(([value, label]) => (
+          <SelectItem
+            key={value}
+            value={value}
+          >
+            {label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}

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

@@ -0,0 +1,251 @@
+"use client"
+
+import { useRef, useState } from "react"
+import { $isLinkNode } from "@lexical/link"
+import { $findMatchingParent } from "@lexical/utils"
+import {
+  $getNodeByKey,
+  $getSelection,
+  $isElementNode,
+  $isRangeSelection,
+  BaseSelection,
+  ElementFormatType,
+  FORMAT_ELEMENT_COMMAND,
+  INDENT_CONTENT_COMMAND,
+  NodeKey,
+  OUTDENT_CONTENT_COMMAND,
+} from "lexical"
+import {
+  AlignCenterIcon,
+  AlignJustifyIcon,
+  AlignLeftIcon,
+  AlignRightIcon,
+  IndentDecreaseIcon,
+  IndentIncreaseIcon,
+} from "lucide-react"
+
+import { useToolbarContext } from "../../context/toolbar-context"
+import { $isLayoutItemNode } from "../../nodes/layout-item-node"
+import { useUpdateToolbarHandler } from "../../editor-hooks/use-update-toolbar"
+import { getSelectedNode } from "../../utils/get-selected-node"
+import { Separator } from "../../ui/separator"
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "../../ui/toggle-group"
+import { IconSize } from "../../ui/typography"
+
+const ELEMENT_FORMAT_OPTIONS: {
+  [key in Exclude<ElementFormatType, "start" | "end" | "">]: {
+    icon: React.ReactNode
+    iconRTL: string
+    name: string
+  }
+} = {
+  left: {
+    icon: <IconSize size="sm"><AlignLeftIcon /></IconSize>,
+    iconRTL: "left-align",
+    name: "Left Align",
+  },
+  center: {
+    icon: <IconSize size="sm"><AlignCenterIcon /></IconSize>,
+    iconRTL: "center-align",
+    name: "Center Align",
+  },
+  right: {
+    icon: <IconSize size="sm"><AlignRightIcon /></IconSize>,
+    iconRTL: "right-align",
+    name: "Right Align",
+  },
+  justify: {
+    icon: <IconSize size="sm"><AlignJustifyIcon /></IconSize>,
+    iconRTL: "justify-align",
+    name: "Justify Align",
+  },
+} as const
+
+export function ElementFormatToolbarPlugin({
+  separator = true,
+}: {
+  separator?: boolean
+}) {
+  const { activeEditor } = useToolbarContext()
+  const [elementFormat, setElementFormat] = useState<ElementFormatType>("left")
+  const activeLayoutItemKeyRef = useRef<NodeKey | null>(null)
+
+  const extractPadding = (style: string): number | null => {
+    const match = style.match(/padding\s*:\s*(\d+)px/i)
+    if (!match?.[1]) return null
+    const value = Number.parseInt(match[1], 10)
+    return Number.isFinite(value) ? value : null
+  }
+
+  const setPadding = (style: string, nextPadding: number): string => {
+    if (/padding\s*:\s*\d+px/i.test(style)) {
+      return style.replace(/padding\s*:\s*\d+px/i, `padding: ${nextPadding}px`)
+    }
+    return `${style.trim().replace(/;?$/, ";")} padding: ${nextPadding}px`.trim()
+  }
+
+  const $updateToolbar = (selection: BaseSelection) => {
+    if ($isRangeSelection(selection)) {
+      const layoutItem = $findMatchingParent(selection.anchor.getNode(), (node) =>
+        $isLayoutItemNode(node)
+      )
+      activeLayoutItemKeyRef.current = $isLayoutItemNode(layoutItem)
+        ? layoutItem.getKey()
+        : null
+
+      const node = getSelectedNode(selection)
+      const parent = node.getParent()
+
+      let matchingParent
+      if ($isLinkNode(parent)) {
+        // If node is a link, we need to fetch the parent paragraph node to set format
+        matchingParent = $findMatchingParent(
+          node,
+          (parentNode) => $isElementNode(parentNode) && !parentNode.isInline()
+        )
+      }
+      setElementFormat(
+        $isElementNode(matchingParent)
+          ? matchingParent.getFormatType()
+          : $isElementNode(node)
+            ? node.getFormatType()
+            : parent?.getFormatType() || "left"
+      )
+    }
+  }
+
+  useUpdateToolbarHandler($updateToolbar)
+
+  const handleValueChange = (value: string) => {
+    if (!value) return // Prevent unselecting current value
+
+    setElementFormat(value as ElementFormatType)
+
+    if (value === "indent") {
+      activeEditor.update(() => {
+        const selectedLayoutItemKey = activeLayoutItemKeyRef.current
+        if (selectedLayoutItemKey) {
+          const node = $getNodeByKey(selectedLayoutItemKey)
+          if ($isLayoutItemNode(node)) {
+            const currentPadding = extractPadding(node.getStyle()) ?? 0
+            const nextPadding = Math.min(currentPadding + 4, 64)
+            node.setStyle(setPadding(node.getStyle(), nextPadding))
+            return
+          }
+        }
+
+        const selection = $getSelection()
+        if (!$isRangeSelection(selection)) {
+          activeEditor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined)
+          return
+        }
+        const layoutItem = $findMatchingParent(selection.anchor.getNode(), (node) =>
+          $isLayoutItemNode(node)
+        )
+        if ($isLayoutItemNode(layoutItem)) {
+          const currentPadding = extractPadding(layoutItem.getStyle()) ?? 0
+          const nextPadding = Math.min(currentPadding + 4, 64)
+          layoutItem.setStyle(setPadding(layoutItem.getStyle(), nextPadding))
+          return
+        }
+        activeEditor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined)
+      })
+    } else if (value === "outdent") {
+      activeEditor.update(() => {
+        const selectedLayoutItemKey = activeLayoutItemKeyRef.current
+        if (selectedLayoutItemKey) {
+          const node = $getNodeByKey(selectedLayoutItemKey)
+          if ($isLayoutItemNode(node)) {
+            const currentPadding = extractPadding(node.getStyle()) ?? 0
+            const nextPadding = Math.max(currentPadding - 4, 0)
+            node.setStyle(setPadding(node.getStyle(), nextPadding))
+            return
+          }
+        }
+
+        const selection = $getSelection()
+        if (!$isRangeSelection(selection)) {
+          activeEditor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined)
+          return
+        }
+        const layoutItem = $findMatchingParent(selection.anchor.getNode(), (node) =>
+          $isLayoutItemNode(node)
+        )
+        if ($isLayoutItemNode(layoutItem)) {
+          const currentPadding = extractPadding(layoutItem.getStyle()) ?? 0
+          const nextPadding = Math.max(currentPadding - 4, 0)
+          layoutItem.setStyle(setPadding(layoutItem.getStyle(), nextPadding))
+          return
+        }
+        activeEditor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined)
+      })
+    } else {
+      activeEditor.dispatchCommand(
+        FORMAT_ELEMENT_COMMAND,
+        value as ElementFormatType
+      )
+    }
+  }
+
+  return (
+    <>
+      <ToggleGroup
+        type="single"
+        value={elementFormat}
+        onValueChange={handleValueChange}
+        size="sm"
+        variant="outline"
+      >
+        {/* Alignment toggles */}
+        {Object.entries(ELEMENT_FORMAT_OPTIONS).map(([value, option]) => (
+          <ToggleGroupItem
+            key={value}
+            value={value}
+            variant={"outline"}
+            size="sm"
+            aria-label={option.name}
+            className="editor-toolbar-item"
+          >
+            {option.icon}
+          </ToggleGroupItem>
+        ))}
+      </ToggleGroup>
+      {separator && <Separator orientation="vertical" className="editor-toolbar-separator" />}
+      {/* Indentation toggles */}
+      <ToggleGroup
+        type="single"
+        value={elementFormat}
+        onValueChange={handleValueChange}
+        size="sm"
+        variant="outline"
+      >
+        <ToggleGroupItem
+          value="outdent"
+          aria-label="Outdent"
+          variant={"outline"}
+          size="sm"
+          className="editor-toolbar-item"
+        >
+          <IconSize size="sm">
+            <IndentDecreaseIcon />
+          </IconSize>
+        </ToggleGroupItem>
+
+        <ToggleGroupItem
+          value="indent"
+          variant={"outline"}
+          aria-label="Indent"
+          size="sm"
+          className="editor-toolbar-item"
+        >
+          <IconSize size="sm">
+            <IndentIncreaseIcon />
+          </IconSize>
+        </ToggleGroupItem>
+      </ToggleGroup>
+    </>
+  )
+}

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

@@ -0,0 +1,179 @@
+"use client"
+
+import { useCallback, useRef, useState } from "react"
+import {
+  $getSelectionStyleValueForProperty,
+  $patchStyleText,
+} from "@lexical/selection"
+import { $findMatchingParent } from "@lexical/utils"
+import {
+  $getNodeByKey,
+  $getSelection,
+  $isRangeSelection,
+  BaseSelection,
+  NodeKey,
+} from "lexical"
+import { PaintBucketIcon } from "lucide-react"
+
+import { $isLayoutItemNode } from "../../nodes/layout-item-node"
+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 FontBackgroundToolbarPlugin() {
+  const { activeEditor } = useToolbarContext()
+
+  const [bgColor, setBgColor] = useState("#fff")
+  const activeLayoutItemKeyRef = useRef<NodeKey | null>(null)
+
+  const extractStyleValue = (style: string, property: string): string | null => {
+    const escapedProperty = property.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+    const match = style.match(new RegExp(`${escapedProperty}\\s*:\\s*([^;]+)`, "i"))
+    return match?.[1]?.trim() ?? null
+  }
+
+  const setStyleProperty = (
+    style: string,
+    property: string,
+    value: string
+  ): string => {
+    const escapedProperty = property.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+    const regex = new RegExp(`${escapedProperty}\\s*:\\s*[^;]+`, "i")
+    if (regex.test(style)) {
+      return style.replace(regex, `${property}: ${value}`)
+    }
+    return `${style.trim().replace(/;?$/, ";")} ${property}: ${value}`.trim()
+  }
+
+  const $updateToolbar = (selection: BaseSelection) => {
+    if ($isRangeSelection(selection)) {
+      const layoutItem = $findMatchingParent(selection.anchor.getNode(), (node) =>
+        $isLayoutItemNode(node)
+      )
+      if ($isLayoutItemNode(layoutItem)) {
+        activeLayoutItemKeyRef.current = layoutItem.getKey()
+        const layoutStyle = layoutItem.getStyle()
+        const layoutBg = extractStyleValue(layoutStyle, "background-color")
+        if (layoutBg) {
+          setBgColor(layoutBg)
+          return
+        }
+      } else {
+        activeLayoutItemKeyRef.current = null
+      }
+
+      setBgColor(
+        $getSelectionStyleValueForProperty(
+          selection,
+          "background-color",
+          "#fff"
+        )
+      )
+    }
+  }
+
+  useUpdateToolbarHandler($updateToolbar)
+
+  const applyStyleText = useCallback(
+    (styles: Record<string, string>, skipHistoryStack?: boolean) => {
+      void skipHistoryStack
+      activeEditor.update(
+        () => {
+          const selection = $getSelection()
+          activeEditor.setEditable(false)
+          if (selection !== null) {
+            $patchStyleText(selection, styles)
+          }
+        },
+        { tag: "historic" }
+      )
+    },
+    [activeEditor]
+  )
+
+  const onBgColorSelect = useCallback(
+    (value: string) => {
+      let shouldApplyTextStyle = true
+      activeEditor.update(() => {
+        const selectedLayoutItemKey = activeLayoutItemKeyRef.current
+        if (selectedLayoutItemKey) {
+          const node = $getNodeByKey(selectedLayoutItemKey)
+          if ($isLayoutItemNode(node)) {
+            node.setStyle(setStyleProperty(node.getStyle(), "background-color", value))
+            shouldApplyTextStyle = false
+            return
+          }
+        }
+
+        const selection = $getSelection()
+        if (!$isRangeSelection(selection)) return
+        const layoutItem = $findMatchingParent(selection.anchor.getNode(), (node) =>
+          $isLayoutItemNode(node)
+        )
+        if ($isLayoutItemNode(layoutItem)) {
+          layoutItem.setStyle(
+            setStyleProperty(layoutItem.getStyle(), "background-color", value)
+          )
+          shouldApplyTextStyle = false
+          return
+        }
+      })
+      if (shouldApplyTextStyle) {
+        applyStyleText({ "background-color": value }, true)
+      }
+    },
+    [activeEditor, applyStyleText]
+  )
+
+  return (
+    <ColorPicker
+      modal
+      defaultFormat="hex"
+      defaultValue={bgColor}
+      onValueChange={onBgColorSelect}
+      onOpenChange={(open) => {
+        if (!open) {
+          activeEditor.setEditable(true)
+          activeEditor.focus()
+        }
+      }}
+    >
+      <ColorPickerTrigger asChild>
+        <Button variant={"outline"} size={"icon"} className="editor-toolbar-item--lg">
+          <IconSize size="sm">
+            <PaintBucketIcon />
+          </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>
+  )
+}