@thangph2146/lexical-editor 0.0.1

package/src/plugins/picker/alignment-picker-plugin.tsx

@@ -0,0 +1,40 @@
+import { FORMAT_ELEMENT_COMMAND } from "lexical"
+import {
+  AlignCenterIcon,
+  AlignJustifyIcon,
+  AlignLeftIcon,
+  AlignRightIcon,
+} from "lucide-react"
+
+import { ComponentPickerOption } from "../../plugins/picker/component-picker-option"
+import { IconSize } from "../../ui/typography"
+
+export function AlignmentPickerPlugin({
+  alignment,
+}: {
+  alignment: "left" | "center" | "right" | "justify"
+}) {
+  return new ComponentPickerOption(`Align ${alignment}`, {
+    icon: <AlignIcons alignment={alignment} />,
+    keywords: ["align", "justify", alignment],
+    onSelect: (_, editor) =>
+      editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, alignment),
+  })
+}
+
+function AlignIcons({
+  alignment,
+}: {
+  alignment: "left" | "center" | "right" | "justify"
+}) {
+  switch (alignment) {
+    case "left":
+      return <IconSize size="sm"><AlignLeftIcon /></IconSize>
+    case "center":
+      return <IconSize size="sm"><AlignCenterIcon /></IconSize>
+    case "right":
+      return <IconSize size="sm"><AlignRightIcon /></IconSize>
+    case "justify":
+      return <IconSize size="sm"><AlignJustifyIcon /></IconSize>
+  }
+}

package/src/plugins/picker/bulleted-list-picker-plugin.tsx

@@ -0,0 +1,14 @@
+import { INSERT_UNORDERED_LIST_COMMAND } from "@lexical/list"
+import { ListIcon } from "lucide-react"
+
+import { ComponentPickerOption } from "../../plugins/picker/component-picker-option"
+import { IconSize } from "../../ui/typography"
+
+export function BulletedListPickerPlugin() {
+  return new ComponentPickerOption("Bulleted List", {
+    icon: <IconSize size="sm"><ListIcon /></IconSize>,
+    keywords: ["bulleted list", "unordered list", "ul", "- list", "+ list"],
+    onSelect: (_, editor) =>
+      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined),
+  })
+}

package/src/plugins/picker/check-list-picker-plugin.tsx

@@ -0,0 +1,14 @@
+import { INSERT_CHECK_LIST_COMMAND } from "@lexical/list"
+import { ListTodoIcon } from "lucide-react"
+
+import { ComponentPickerOption } from "../../plugins/picker/component-picker-option"
+import { IconSize } from "../../ui/typography"
+
+export function CheckListPickerPlugin() {
+  return new ComponentPickerOption("Check List", {
+    icon: <IconSize size="sm"><ListTodoIcon /></IconSize>,
+    keywords: ["check list", "todo list"],
+    onSelect: (_, editor) =>
+      editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, undefined),
+  })
+}

package/src/plugins/picker/code-picker-plugin.tsx

@@ -0,0 +1,30 @@
+import { $createCodeNode } from "@lexical/code"
+import { $setBlocksType } from "@lexical/selection"
+import { $getSelection, $isRangeSelection } from "lexical"
+import { CodeIcon } from "lucide-react"
+
+import { ComponentPickerOption } from "../../plugins/picker/component-picker-option"
+import { IconSize } from "../../ui/typography"
+
+export function CodePickerPlugin() {
+  return new ComponentPickerOption("Code", {
+    icon: <IconSize size="sm"><CodeIcon /></IconSize>,
+    keywords: ["javascript", "python", "js", "codeblock"],
+    onSelect: (_, editor) =>
+      editor.update(() => {
+        const selection = $getSelection()
+
+        if ($isRangeSelection(selection)) {
+          if (selection.isCollapsed()) {
+            $setBlocksType(selection, () => $createCodeNode())
+          } else {
+            // Will this ever happen?
+            const textContent = selection.getTextContent()
+            const codeNode = $createCodeNode()
+            selection.insertNodes([codeNode])
+            selection.insertRawText(textContent)
+          }
+        }
+      }),
+  })
+}

package/src/plugins/picker/columns-layout-picker-plugin.tsx

@@ -0,0 +1,16 @@
+import { Columns3Icon } from "lucide-react"
+
+import { InsertLayoutDialog } from "../../plugins/layout-plugin"
+import { ComponentPickerOption } from "../../plugins/picker/component-picker-option"
+import { IconSize } from "../../ui/typography"
+
+export function ColumnsLayoutPickerPlugin() {
+  return new ComponentPickerOption("Columns Layout", {
+    icon: <IconSize size="sm"><Columns3Icon /></IconSize>,
+    keywords: ["columns", "layout", "grid"],
+    onSelect: (_, editor, showModal) =>
+      showModal("Insert Columns Layout", (onClose) => (
+        <InsertLayoutDialog activeEditor={editor} onClose={onClose} />
+      )),
+  })
+}

package/src/plugins/picker/component-picker-option.tsx

@@ -0,0 +1,47 @@
+import { JSX } from "react"
+import { MenuOption } from "@lexical/react/LexicalTypeaheadMenuPlugin"
+import { LexicalEditor } from "lexical"
+
+export class ComponentPickerOption extends MenuOption {
+  // What shows up in the editor
+  title: string
+  // Icon for display
+  icon?: JSX.Element
+  // For extra searching.
+  keywords: Array<string>
+  // TBD
+  keyboardShortcut?: string
+  // What happens when you select this option?
+  onSelect: (
+    queryString: string,
+    editor: LexicalEditor,
+    showModal: (
+      title: string,
+      showModal: (onClose: () => void) => JSX.Element
+    ) => void
+  ) => void
+
+  constructor(
+    title: string,
+    options: {
+      icon?: JSX.Element
+      keywords?: Array<string>
+      keyboardShortcut?: string
+      onSelect: (
+        queryString: string,
+        editor: LexicalEditor,
+        showModal: (
+          title: string,
+          showModal: (onClose: () => void) => JSX.Element
+        ) => void
+      ) => void
+    }
+  ) {
+    super(title)
+    this.title = title
+    this.keywords = options.keywords || []
+    this.icon = options.icon
+    this.keyboardShortcut = options.keyboardShortcut
+    this.onSelect = options.onSelect.bind(this)
+  }
+}

package/src/plugins/picker/divider-picker-plugin.tsx

@@ -0,0 +1,14 @@
+import { INSERT_HORIZONTAL_RULE_COMMAND } from "@lexical/react/LexicalHorizontalRuleNode"
+import { MinusIcon } from "lucide-react"
+
+import { ComponentPickerOption } from "../../plugins/picker/component-picker-option"
+import { IconSize } from "../../ui/typography"
+
+export function DividerPickerPlugin() {
+  return new ComponentPickerOption("Divider", {
+    icon: <IconSize size="sm"><MinusIcon /></IconSize>,
+    keywords: ["horizontal rule", "divider", "hr"],
+    onSelect: (_, editor) =>
+      editor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined),
+  })
+}

package/src/plugins/picker/embeds-picker-plugin.tsx

@@ -0,0 +1,24 @@
+import { INSERT_EMBED_COMMAND } from "@lexical/react/LexicalAutoEmbedPlugin"
+
+import {
+  CustomEmbedConfig,
+  EmbedConfigs,
+} from "../../plugins/embeds/auto-embed-plugin"
+import { ComponentPickerOption } from "../../plugins/picker/component-picker-option"
+
+export function EmbedsPickerPlugin({
+  embed,
+}: {
+  embed: "tweet" | "youtube-video"
+}) {
+  const embedConfig = EmbedConfigs.find(
+    (config) => config.type === embed
+  ) as CustomEmbedConfig
+
+  return new ComponentPickerOption(`Embed ${embedConfig.contentName}`, {
+    icon: embedConfig.icon,
+    keywords: [...embedConfig.keywords, "embed"],
+    onSelect: (_, editor) =>
+      editor.dispatchCommand(INSERT_EMBED_COMMAND, embedConfig.type),
+  })
+}

package/src/plugins/picker/heading-picker-plugin.tsx

@@ -0,0 +1,32 @@
+import { $createHeadingNode } from "@lexical/rich-text"
+import { $setBlocksType } from "@lexical/selection"
+import { $getSelection, $isRangeSelection } from "lexical"
+import { Heading1Icon, Heading2Icon, Heading3Icon } from "lucide-react"
+
+import { ComponentPickerOption } from "../../plugins/picker/component-picker-option"
+import { IconSize } from "../../ui/typography"
+
+export function HeadingPickerPlugin({ n }: { n: 1 | 2 | 3 }) {
+  return new ComponentPickerOption(`Heading ${n}`, {
+    icon: <HeadingIcons n={n} />,
+    keywords: ["heading", "header", `h${n}`],
+    onSelect: (_, editor) =>
+      editor.update(() => {
+        const selection = $getSelection()
+        if ($isRangeSelection(selection)) {
+          $setBlocksType(selection, () => $createHeadingNode(`h${n}`))
+        }
+      }),
+  })
+}
+
+function HeadingIcons({ n }: { n: number }) {
+  switch (n) {
+    case 1:
+      return <IconSize size="sm"><Heading1Icon /></IconSize>
+    case 2:
+      return <IconSize size="sm"><Heading2Icon /></IconSize>
+    case 3:
+      return <IconSize size="sm"><Heading3Icon /></IconSize>
+  }
+}

package/src/plugins/picker/image-picker-plugin.tsx

@@ -0,0 +1,16 @@
+import { ImageIcon } from "lucide-react"
+
+import { InsertImageDialog } from "../../plugins/images-plugin"
+import { ComponentPickerOption } from "../../plugins/picker/component-picker-option"
+import { IconSize } from "../../ui/typography"
+
+export function ImagePickerPlugin() {
+  return new ComponentPickerOption("Image", {
+    icon: <IconSize size="sm"><ImageIcon /></IconSize>,
+    keywords: ["image", "photo", "picture", "file"],
+    onSelect: (_, editor, showModal) =>
+      showModal("Insert Image", (onClose) => (
+        <InsertImageDialog activeEditor={editor} onClose={onClose} />
+      )),
+  })
+}

package/src/plugins/picker/numbered-list-picker-plugin.tsx

@@ -0,0 +1,14 @@
+import { INSERT_ORDERED_LIST_COMMAND } from "@lexical/list"
+import { ListOrderedIcon } from "lucide-react"
+
+import { ComponentPickerOption } from "../../plugins/picker/component-picker-option"
+import { IconSize } from "../../ui/typography"
+
+export function NumberedListPickerPlugin() {
+  return new ComponentPickerOption("Numbered List", {
+    icon: <IconSize size="sm"><ListOrderedIcon /></IconSize>,
+    keywords: ["numbered list", "ordered list", "ol"],
+    onSelect: (_, editor) =>
+      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined),
+  })
+}

package/src/plugins/picker/paragraph-picker-plugin.tsx

@@ -0,0 +1,20 @@
+import { $setBlocksType } from "@lexical/selection"
+import { $createParagraphNode, $getSelection, $isRangeSelection } from "lexical"
+import { TextIcon } from "lucide-react"
+
+import { ComponentPickerOption } from "../../plugins/picker/component-picker-option"
+import { IconSize } from "../../ui/typography"
+
+export function ParagraphPickerPlugin() {
+  return new ComponentPickerOption("Paragraph", {
+    icon: <IconSize size="sm"><TextIcon /></IconSize>,
+    keywords: ["normal", "paragraph", "p", "text"],
+    onSelect: (_, editor) =>
+      editor.update(() => {
+        const selection = $getSelection()
+        if ($isRangeSelection(selection)) {
+          $setBlocksType(selection, () => $createParagraphNode())
+        }
+      }),
+  })
+}

package/src/plugins/picker/quote-picker-plugin.tsx

@@ -0,0 +1,21 @@
+import { $createQuoteNode } from "@lexical/rich-text"
+import { $setBlocksType } from "@lexical/selection"
+import { $getSelection, $isRangeSelection } from "lexical"
+import { QuoteIcon } from "lucide-react"
+
+import { ComponentPickerOption } from "../../plugins/picker/component-picker-option"
+import { IconSize } from "../../ui/typography"
+
+export function QuotePickerPlugin() {
+  return new ComponentPickerOption("Quote", {
+    icon: <IconSize size="sm"><QuoteIcon /></IconSize>,
+    keywords: ["block quote"],
+    onSelect: (_, editor) =>
+      editor.update(() => {
+        const selection = $getSelection()
+        if ($isRangeSelection(selection)) {
+          $setBlocksType(selection, () => $createQuoteNode())
+        }
+      }),
+  })
+}

package/src/plugins/picker/table-picker-plugin.tsx

@@ -0,0 +1,56 @@
+import { INSERT_TABLE_COMMAND } from "@lexical/table"
+import { TableIcon } from "lucide-react"
+
+import { ComponentPickerOption } from "../../plugins/picker/component-picker-option"
+import { InsertTableDialog } from "../../plugins/table-plugin"
+import { IconSize } from "../../ui/typography"
+
+export function TablePickerPlugin() {
+  return new ComponentPickerOption("Table", {
+    icon: <IconSize size="sm"><TableIcon /></IconSize>,
+    keywords: ["table", "grid", "spreadsheet", "rows", "columns"],
+    onSelect: (_, editor, showModal) =>
+      showModal("Insert Table", (onClose) => (
+        <InsertTableDialog activeEditor={editor} onClose={onClose} />
+      )),
+  })
+}
+
+export function DynamicTablePickerPlugin({
+  queryString,
+}: {
+  queryString: string
+}) {
+  const options: Array<ComponentPickerOption> = []
+
+  if (queryString == null) {
+    return options
+  }
+
+  const tableMatch = queryString.match(/^([1-9]\d?)(?:x([1-9]\d?)?)?$/)
+
+  if (tableMatch !== null && tableMatch[1]) {
+    const rows = tableMatch[1]
+    const colOptions = tableMatch[2]
+      ? [tableMatch[2]]
+      : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(String)
+
+    options.push(
+      ...colOptions.map(
+        (columns) =>
+          new ComponentPickerOption(`${rows}x${columns} Table`, {
+            icon: (
+              <IconSize size="sm">
+                <TableIcon />
+              </IconSize>
+            ),
+            keywords: ["table"],
+            onSelect: (_, editor) =>
+              editor.dispatchCommand(INSERT_TABLE_COMMAND, { columns: columns || "1", rows }),
+          })
+      )
+    )
+  }
+
+  return options
+}

package/src/plugins/tab-focus-plugin.tsx

@@ -0,0 +1,66 @@
+"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 { useEffect } from "react"
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
+import {
+  $getSelection,
+  $isRangeSelection,
+  $setSelection,
+  FOCUS_COMMAND,
+} from "lexical"
+
+const COMMAND_PRIORITY_LOW = 1
+const TAB_TO_FOCUS_INTERVAL = 100
+
+let lastTabKeyDownTimestamp = 0
+let hasRegisteredKeyDownListener = false
+
+function registerKeyTimeStampTracker() {
+  window.addEventListener(
+    "keydown",
+    (event: KeyboardEvent) => {
+      // Tab
+      if (event.key === "Tab") {
+        lastTabKeyDownTimestamp = event.timeStamp
+      }
+    },
+    true
+  )
+}
+
+export function TabFocusPlugin(): null {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    if (!hasRegisteredKeyDownListener) {
+      registerKeyTimeStampTracker()
+      hasRegisteredKeyDownListener = true
+    }
+
+    return editor.registerCommand(
+      FOCUS_COMMAND,
+      (event: FocusEvent) => {
+        const selection = $getSelection()
+        if ($isRangeSelection(selection)) {
+          if (
+            lastTabKeyDownTimestamp + TAB_TO_FOCUS_INTERVAL >
+            event.timeStamp
+          ) {
+            $setSelection(selection.clone())
+          }
+        }
+        return false
+      },
+      COMMAND_PRIORITY_LOW
+    )
+  }, [editor])
+
+  return null
+}