@thangph2146/lexical-editor 0.0.1

package/src/transformers/markdown-emoji-transformer.ts

@@ -0,0 +1,20 @@
+import { TextMatchTransformer } from "@lexical/markdown"
+import { $createTextNode } from "lexical"
+
+import emojiList from "../utils/emoji-list"
+
+export const EMOJI: TextMatchTransformer = {
+  dependencies: [],
+  export: () => null,
+  importRegExp: /:([a-z0-9_]+):/,
+  regExp: /:([a-z0-9_]+):/,
+  replace: (textNode, [, name]) => {
+    if (!name) return
+    const emoji = emojiList.find((e) => e.aliases.includes(name))?.emoji
+    if (emoji) {
+      textNode.replace($createTextNode(emoji))
+    }
+  },
+  trigger: ":",
+  type: "text-match",
+}

package/src/transformers/markdown-hr-transformer.ts

@@ -0,0 +1,28 @@
+import { ElementTransformer } from "@lexical/markdown"
+import {
+  $createHorizontalRuleNode,
+  $isHorizontalRuleNode,
+  HorizontalRuleNode,
+} from "@lexical/react/LexicalHorizontalRuleNode"
+import { LexicalNode } from "lexical"
+
+export const HR: ElementTransformer = {
+  dependencies: [HorizontalRuleNode],
+  export: (node: LexicalNode) => {
+    return $isHorizontalRuleNode(node) ? "***" : null
+  },
+  regExp: /^(---|\*\*\*|___)\s?$/,
+  replace: (parentNode, _1, _2, isImport) => {
+    const line = $createHorizontalRuleNode()
+
+    // TODO: Get rid of isImport flag
+    if (isImport || parentNode.getNextSibling() != null) {
+      parentNode.replace(line)
+    } else {
+      parentNode.insertBefore(line)
+    }
+
+    line.selectNext()
+  },
+  type: "element",
+}

package/src/transformers/markdown-image-transformer.ts

@@ -0,0 +1,31 @@
+import { TextMatchTransformer } from "@lexical/markdown"
+
+import {
+  $createImageNode,
+  $isImageNode,
+  ImageNode,
+} from "../nodes/image-node"
+
+export const IMAGE: TextMatchTransformer = {
+  dependencies: [ImageNode],
+  export: (node) => {
+    if (!$isImageNode(node)) {
+      return null
+    }
+
+    return `![${node.getAltText()}](${node.getSrc()})`
+  },
+  importRegExp: /!(?:\[([^[]*)\])(?:\(([^(]+)\))/,
+  regExp: /!(?:\[([^[]*)\])(?:\(([^(]+)\))$/,
+  replace: (textNode, match) => {
+    const [, altText, src] = match
+    const imageNode = $createImageNode({
+      altText: altText || "",
+      maxWidth: 800,
+      src: src || "",
+    })
+    textNode.replace(imageNode)
+  },
+  trigger: ")",
+  type: "text-match",
+}

package/src/transformers/markdown-list-transformer.ts

@@ -0,0 +1,51 @@
+import {
+  $createListItemNode,
+  $isListItemNode,
+  $isListNode,
+  ListItemNode,
+  ListNode,
+} from "@lexical/list"
+import { ElementTransformer } from "@lexical/markdown"
+
+import {
+  $createListWithColorNode,
+  $isListWithColorNode,
+  ListWithColorNode,
+} from "../nodes/list-with-color-node"
+
+export const UNORDERED_LIST: ElementTransformer = {
+  dependencies: [ListWithColorNode, ListNode, ListItemNode],
+  export: (node) => {
+    if (!$isListNode(node) || node.getListType() !== "bullet") {
+      return null
+    }
+    const marker = $isListWithColorNode(node) ? node.getMarkerType() || "-" : "-"
+    const children = node.getChildren()
+    const output = []
+    for (const child of children) {
+      if ($isListItemNode(child)) {
+        output.push(`${marker} ${child.getTextContent()}`)
+      }
+    }
+    return output.join("\n")
+  },
+  regExp: /^(\s*)([*+-])\s/,
+  replace: (parentNode, _children, match, isImport) => {
+    const marker = match[2]
+    const list = $createListWithColorNode("bullet")
+
+    if (marker === "-" || marker === "+") {
+      list.setMarkerType(marker)
+    }
+
+    if (isImport || parentNode.getNextSibling() != null) {
+      parentNode.replace(list)
+    } else {
+      parentNode.insertBefore(list)
+    }
+    const item = $createListItemNode()
+    list.append(item)
+    item.select()
+  },
+  type: "element",
+}

package/src/transformers/markdown-table-transformer.ts

@@ -0,0 +1,200 @@
+import {
+  $convertFromMarkdownString,
+  $convertToMarkdownString,
+  CHECK_LIST,
+  ELEMENT_TRANSFORMERS,
+  ElementTransformer,
+  MULTILINE_ELEMENT_TRANSFORMERS,
+  TEXT_FORMAT_TRANSFORMERS,
+  TEXT_MATCH_TRANSFORMERS,
+} from "@lexical/markdown"
+import {
+  $createTableCellNode,
+  $createTableNode,
+  $createTableRowNode,
+  $isTableCellNode,
+  $isTableNode,
+  $isTableRowNode,
+  TableCellHeaderStates,
+  TableCellNode,
+  TableNode,
+  TableRowNode,
+} from "@lexical/table"
+import { $isParagraphNode, $isTextNode, LexicalNode } from "lexical"
+
+import { HR } from "../transformers/markdown-hr-transformer"
+import { IMAGE } from "../transformers/markdown-image-transformer"
+
+// Very primitive table setup
+const TABLE_ROW_REG_EXP = /^(?:\|)(.+)(?:\|)\s?$/
+const TABLE_ROW_DIVIDER_REG_EXP = /^(\| ?:?-*:? ?)+\|\s?$/
+
+const OTHER_MARKDOWN_TRANSFORMERS = [
+  HR,
+  IMAGE,
+  // EMOJI,
+  // TWEET,
+  CHECK_LIST,
+  ...ELEMENT_TRANSFORMERS,
+  ...MULTILINE_ELEMENT_TRANSFORMERS,
+  ...TEXT_FORMAT_TRANSFORMERS,
+  ...TEXT_MATCH_TRANSFORMERS,
+]
+
+export const TABLE: ElementTransformer = {
+  dependencies: [TableNode, TableRowNode, TableCellNode],
+  export: (node: LexicalNode) => {
+    if (!$isTableNode(node)) {
+      return null
+    }
+
+    const output: string[] = []
+
+    for (const row of node.getChildren()) {
+      const rowOutput = []
+      if (!$isTableRowNode(row)) {
+        continue
+      }
+
+      let isHeaderRow = false
+      for (const cell of row.getChildren()) {
+        // It's TableCellNode so it's just to make flow happy
+        if ($isTableCellNode(cell)) {
+          rowOutput.push(
+            $convertToMarkdownString(OTHER_MARKDOWN_TRANSFORMERS, cell).replace(
+              /\n/g,
+              "\\n"
+            )
+          )
+          if (cell.__headerState === TableCellHeaderStates.ROW) {
+            isHeaderRow = true
+          }
+        }
+      }
+
+      output.push(`| ${rowOutput.join(" | ")} |`)
+      if (isHeaderRow) {
+        output.push(`| ${rowOutput.map(() => "---").join(" | ")} |`)
+      }
+    }
+
+    return output.join("\n")
+  },
+  regExp: TABLE_ROW_REG_EXP,
+  replace: (parentNode, _1, match) => {
+    if (!match || !match[0]) return
+
+    // Header row
+    if (TABLE_ROW_DIVIDER_REG_EXP.test(match[0])) {
+      const table = parentNode.getPreviousSibling()
+      if (!table || !$isTableNode(table)) {
+        return
+      }
+
+      const rows = table.getChildren()
+      const lastRow = rows[rows.length - 1]
+      if (!lastRow || !$isTableRowNode(lastRow)) {
+        return
+      }
+
+      // Add header state to row cells
+      lastRow.getChildren().forEach((cell) => {
+        if (!$isTableCellNode(cell)) {
+          return
+        }
+        cell.setHeaderStyles(
+          TableCellHeaderStates.ROW,
+          TableCellHeaderStates.ROW
+        )
+      })
+
+      // Remove line
+      parentNode.remove()
+      return
+    }
+
+    const matchCells = mapToTableCells(match[0])
+
+    if (matchCells == null) {
+      return
+    }
+
+    const rows = [matchCells]
+    let sibling = parentNode.getPreviousSibling()
+    let maxCells = matchCells.length
+
+    while (sibling) {
+      if (!$isParagraphNode(sibling)) {
+        break
+      }
+
+      if (sibling.getChildrenSize() !== 1) {
+        break
+      }
+
+      const firstChild = sibling.getFirstChild()
+
+      if (!$isTextNode(firstChild)) {
+        break
+      }
+
+      const cells = mapToTableCells(firstChild.getTextContent())
+
+      if (cells == null) {
+        break
+      }
+
+      maxCells = Math.max(maxCells, cells.length)
+      rows.unshift(cells)
+      const previousSibling = sibling.getPreviousSibling()
+      sibling.remove()
+      sibling = previousSibling
+    }
+
+    const table = $createTableNode()
+
+    for (const cells of rows) {
+      const tableRow = $createTableRowNode()
+      table.append(tableRow)
+
+      for (let i = 0; i < maxCells; i++) {
+        const cell = cells[i] || $createTableCell("")
+        tableRow.append(cell)
+      }
+    }
+
+    const previousSibling = parentNode.getPreviousSibling()
+    if (
+      $isTableNode(previousSibling) &&
+      getTableColumnsSize(previousSibling) === maxCells
+    ) {
+      previousSibling.append(...table.getChildren())
+      parentNode.remove()
+    } else {
+      parentNode.replace(table)
+    }
+
+    table.selectEnd()
+  },
+  type: "element",
+}
+
+function getTableColumnsSize(table: TableNode) {
+  const row = table.getFirstChild()
+  return $isTableRowNode(row) ? row.getChildrenSize() : 0
+}
+
+const $createTableCell = (textContent: string): TableCellNode => {
+  textContent = textContent.replace(/\\n/g, "\n")
+  const cell = $createTableCellNode(TableCellHeaderStates.NO_STATUS)
+  $convertFromMarkdownString(textContent, OTHER_MARKDOWN_TRANSFORMERS, cell)
+  return cell
+}
+
+const mapToTableCells = (textContent: string): Array<TableCellNode> | null => {
+  const match = textContent.match(TABLE_ROW_REG_EXP)
+  if (!match || !match[1]) {
+    return null
+  }
+  return match[1].split("|").map((text) => $createTableCell(text))
+}

package/src/transformers/markdown-tweet-transformer.ts

@@ -0,0 +1,26 @@
+import { ElementTransformer } from "@lexical/markdown"
+
+import {
+  $createTweetNode,
+  $isTweetNode,
+  TweetNode,
+} from "../nodes/embeds/tweet-node"
+
+export const TWEET: ElementTransformer = {
+  dependencies: [TweetNode],
+  export: (node) => {
+    if (!$isTweetNode(node)) {
+      return null
+    }
+
+    return `<tweet id="${node.getId()}" />`
+  },
+  regExp: /<tweet id="([^"]+?)"\s?\/>\s?$/,
+  replace: (textNode, _1, match) => {
+    const [, id] = match
+    if (!id) return
+    const tweetNode = $createTweetNode(id)
+    textNode.replace(tweetNode)
+  },
+  type: "element",
+}

package/src/ui/button-group.tsx

@@ -0,0 +1,10 @@
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+export function ButtonGroup({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn("editor-button-group", className)} {...props}>
+      {children}
+    </div>
+  )
+}

package/src/ui/button.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link"
+  size?: "default" | "sm" | "md" | "lg" | "icon"
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = "default", size = "default", type = "button", ...props }, ref) => {
+    return (
+      <button
+        type={type}
+        className={cn(
+          "editor-btn",
+          variant !== "default" && `editor-btn--${variant}`,
+          size !== "default" && `editor-btn--size-${size}`,
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button }

package/src/ui/collapsible.tsx

@@ -0,0 +1,67 @@
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+const CollapsibleContext = React.createContext<{
+  open: boolean
+  setOpen: (open: boolean) => void
+} | null>(null)
+
+export function Collapsible({
+  children,
+  open: controlledOpen,
+  onOpenChange,
+  className,
+  ...props
+}: {
+  children: React.ReactNode
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  className?: string
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false)
+  const open = controlledOpen ?? uncontrolledOpen
+  const setOpen = onOpenChange ?? setUncontrolledOpen
+
+  return (
+    <CollapsibleContext.Provider value={{ open, setOpen }}>
+      <div className={cn("editor-collapsible", className)} data-state={open ? "open" : "closed"} {...props}>
+        {children}
+      </div>
+    </CollapsibleContext.Provider>
+  )
+}
+
+export function CollapsibleTrigger({ children, asChild, ...props }: React.HTMLAttributes<HTMLElement> & { asChild?: boolean, children: React.ReactNode }) {
+  const context = React.useContext(CollapsibleContext)
+  if (!context) throw new Error("CollapsibleTrigger must be used within Collapsible")
+
+  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
+    context.setOpen(!context.open)
+    if (React.isValidElement(children)) {
+      (children as React.ReactElement<{ onClick?: React.MouseEventHandler<HTMLElement> }>).props.onClick?.(e)
+    }
+  }
+
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children as React.ReactElement<any>, { onClick: handleClick, ...props })
+  }
+
+  return (
+    <button type="button" onClick={handleClick} {...props}>
+      {children}
+    </button>
+  )
+}
+
+export function CollapsibleContent({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  const context = React.useContext(CollapsibleContext)
+  if (!context) throw new Error("CollapsibleContent must be used within Collapsible")
+
+  if (!context.open) return null
+
+  return (
+    <div className={cn("editor-overflow-hidden", className)} {...props}>
+      {children}
+    </div>
+  )
+}

package/src/ui/command.tsx

@@ -0,0 +1,48 @@
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+export const Command = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("editor-command", className)}
+      {...props}
+    />
+  )
+)
+Command.displayName = "Command"
+
+export const CommandList = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("editor-command-list", className)}
+      {...props}
+    />
+  )
+)
+CommandList.displayName = "CommandList"
+
+export const CommandGroup = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("editor-command-group", className)}
+      {...props}
+    />
+  )
+)
+CommandGroup.displayName = "CommandGroup"
+
+export const CommandItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & { onSelect?: () => void; value?: string }
+>(({ className, onSelect, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("editor-command-item", className)}
+    onClick={onSelect}
+    {...props}
+  />
+))
+CommandItem.displayName = "CommandItem"

package/src/ui/dialog.tsx

@@ -0,0 +1,146 @@
+import * as React from "react"
+import { createPortal } from "react-dom"
+import { cn } from "../lib/utils"
+
+interface DialogProps {
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  children: React.ReactNode
+}
+
+interface DialogContextValue {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+const DialogContext = React.createContext<DialogContextValue | null>(null)
+
+export function Dialog({ open = false, onOpenChange = () => {}, children }: DialogProps) {
+  return (
+    <DialogContext.Provider value={{ open, onOpenChange }}>
+      {children}
+    </DialogContext.Provider>
+  )
+}
+
+export function DialogTrigger({ asChild, children, className, ...props }: React.HTMLAttributes<HTMLElement> & { asChild?: boolean, children: React.ReactNode }) {
+  const context = React.useContext(DialogContext)
+  
+  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
+    context?.onOpenChange(true)
+    if (React.isValidElement(children)) {
+      (children as React.ReactElement<{ onClick?: React.MouseEventHandler<HTMLElement> }>).props.onClick?.(e)
+    }
+  }
+
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children as React.ReactElement<any>, {
+      onClick: handleClick,
+      ...props
+    })
+  }
+
+  return (
+    <button type="button" onClick={handleClick} className={className} {...props}>
+      {children}
+    </button>
+  )
+}
+
+export function DialogClose({ asChild, children, className, ...props }: React.HTMLAttributes<HTMLElement> & { asChild?: boolean, children: React.ReactNode }) {
+  const context = React.useContext(DialogContext)
+  
+  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
+    context?.onOpenChange(false)
+    if (React.isValidElement(children)) {
+      (children as React.ReactElement<{ onClick?: React.MouseEventHandler<HTMLElement> }>).props.onClick?.(e)
+    }
+  }
+
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children as React.ReactElement<any>, {
+      onClick: handleClick,
+      ...props
+    })
+  }
+
+  return (
+    <button type="button" onClick={handleClick} className={className} {...props}>
+      {children}
+    </button>
+  )
+}
+
+export interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  disableOutsideClick?: boolean
+}
+
+export function DialogContent({ children, className, disableOutsideClick, ...props }: DialogContentProps) {
+  const context = React.useContext(DialogContext)
+  const [mounted, setMounted] = React.useState(false)
+
+  React.useEffect(() => {
+    setMounted(true)
+    return () => setMounted(false)
+  }, [])
+
+  if (!mounted || !context?.open) return null
+
+  const handleOverlayClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget && !disableOutsideClick) {
+      context.onOpenChange(false)
+    }
+  }
+
+  const content = (
+    <div 
+      className="editor-dialog-overlay" 
+      data-state="open"
+      onClick={handleOverlayClick}
+    >
+      <div 
+        className={cn("editor-dialog-content", className)} 
+        data-state="open"
+        {...props}
+      >
+        {children}
+        <button 
+          type="button"
+          className="editor-dialog-content__close" 
+          onClick={() => context.onOpenChange(false)}
+        >
+          <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" className="editor-icon-sm">
+            <path d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path>
+          </svg>
+          <span className="editor-sr-only">Close</span>
+        </button>
+      </div>
+    </div>
+  )
+
+  return createPortal(content, document.body)
+}
+
+export function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn("editor-dialog-header", className)} {...props} />
+  )
+}
+
+export function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn("editor-dialog-footer", className)} {...props} />
+  )
+}
+
+export function DialogTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h3 className={cn("editor-dialog-header__title", className)} {...props} />
+  )
+}
+
+export function DialogDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return (
+    <p className={cn("editor-dialog-header__description", className)} {...props} />
+  )
+}