@thangph2146/lexical-editor 0.0.4 → 0.0.6

package/src/editor-x/plugins.tsx

@@ -1,380 +1,385 @@
-"use client"
-import { useState } from "react"
-import {
-  CHECK_LIST,
-  ELEMENT_TRANSFORMERS,
-  MULTILINE_ELEMENT_TRANSFORMERS,
-  TEXT_FORMAT_TRANSFORMERS,
-  TEXT_MATCH_TRANSFORMERS,
-} from "@lexical/markdown"
-import { CheckListPlugin } from "@lexical/react/LexicalCheckListPlugin"
-import { ClearEditorPlugin } from "@lexical/react/LexicalClearEditorPlugin"
-import { ClickableLinkPlugin } from "@lexical/react/LexicalClickableLinkPlugin"
-import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary"
-import { HashtagPlugin } from "@lexical/react/LexicalHashtagPlugin"
-import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin"
-import { HorizontalRulePlugin } from "@lexical/react/LexicalHorizontalRulePlugin"
-import { ListPlugin } from "@lexical/react/LexicalListPlugin"
-import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin"
-import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin"
-import { TabIndentationPlugin } from "@lexical/react/LexicalTabIndentationPlugin"
-import { TablePlugin } from "@lexical/react/LexicalTablePlugin"
-
-import { ContentEditable } from "../editor-ui/content-editable"
-import { cn } from "../lib/utils"
-import { ActionsPlugin } from "../plugins/actions/actions-plugin"
-import { AlignPlugin } from "../plugins/align-plugin"
-import { ClearEditorActionPlugin } from "../plugins/actions/clear-editor-plugin"
-import { CounterCharacterPlugin } from "../plugins/actions/counter-character-plugin"
-import { EditModeTogglePlugin } from "../plugins/actions/edit-mode-toggle-plugin"
-import { ImportExportPlugin } from "../plugins/actions/import-export-plugin"
-import { MarkdownTogglePlugin } from "../plugins/actions/markdown-toggle-plugin"
-import { ShareContentPlugin } from "../plugins/actions/share-content-plugin"
-import { SpeechToTextPlugin } from "../plugins/actions/speech-to-text-plugin"
-import { TreeViewPlugin } from "../plugins/actions/tree-view-plugin"
-import { AutoLinkPlugin } from "../plugins/auto-link-plugin"
-import { AutocompletePlugin } from "../plugins/autocomplete-plugin"
-import { CodeActionMenuPlugin } from "../plugins/code-action-menu-plugin"
-import { CodeHighlightPlugin } from "../plugins/code-highlight-plugin"
-import { ComponentPickerMenuPlugin } from "../plugins/component-picker-menu-plugin"
-import { ContextMenuPlugin } from "../plugins/context-menu-plugin"
-import { DragDropPastePlugin } from "../plugins/drag-drop-paste-plugin"
-import { DraggableBlockPlugin } from "../plugins/draggable-block-plugin"
-import { AutoEmbedPlugin } from "../plugins/embeds/auto-embed-plugin"
-import { TwitterPlugin } from "../plugins/embeds/twitter-plugin"
-import { YouTubePlugin } from "../plugins/embeds/youtube-plugin"
-import { EmojiPickerPlugin } from "../plugins/emoji-picker-plugin"
-import { EmojisPlugin } from "../plugins/emojis-plugin"
-import { FloatingLinkEditorPlugin } from "../plugins/floating-link-editor-plugin"
-import { FloatingTextFormatToolbarPlugin } from "../plugins/floating-text-format-plugin"
-import { ImagesPlugin } from "../plugins/images-plugin"
-import { KeywordsPlugin } from "../plugins/keywords-plugin"
-import { LayoutPlugin } from "../plugins/layout-plugin"
-import { LinkPlugin } from "../plugins/link-plugin"
-import { ListColorPlugin } from "../plugins/list-color-plugin"
-import { ListMaxIndentLevelPlugin } from "../plugins/list-max-indent-level-plugin"
-import { MentionsPlugin } from "../plugins/mentions-plugin"
-import { AlignmentPickerPlugin } from "../plugins/picker/alignment-picker-plugin"
-import { BulletedListPickerPlugin } from "../plugins/picker/bulleted-list-picker-plugin"
-import { CheckListPickerPlugin } from "../plugins/picker/check-list-picker-plugin"
-import { CodePickerPlugin } from "../plugins/picker/code-picker-plugin"
-import { ColumnsLayoutPickerPlugin } from "../plugins/picker/columns-layout-picker-plugin"
-import { DividerPickerPlugin } from "../plugins/picker/divider-picker-plugin"
-import { EmbedsPickerPlugin } from "../plugins/picker/embeds-picker-plugin"
-import { HeadingPickerPlugin } from "../plugins/picker/heading-picker-plugin"
-import { ImagePickerPlugin } from "../plugins/picker/image-picker-plugin"
-import { NumberedListPickerPlugin } from "../plugins/picker/numbered-list-picker-plugin"
-import { ParagraphPickerPlugin } from "../plugins/picker/paragraph-picker-plugin"
-import { QuotePickerPlugin } from "../plugins/picker/quote-picker-plugin"
-import {
-  DynamicTablePickerPlugin,
-  TablePickerPlugin,
-} from "../plugins/picker/table-picker-plugin"
-import { TabFocusPlugin } from "../plugins/tab-focus-plugin"
-import { TableColumnResizerPlugin } from "../plugins/table-column-resizer-plugin"
-import {
-  InsertTableCommandPlugin,
-} from "../plugins/table-plugin"
-import { BlockFormatDropDown } from "../plugins/toolbar/block-format-toolbar-plugin"
-import { FormatBulletedList } from "../plugins/toolbar/block-format/format-bulleted-list"
-import { FormatCheckList } from "../plugins/toolbar/block-format/format-check-list"
-import { FormatCodeBlock } from "../plugins/toolbar/block-format/format-code-block"
-import { FormatHeading } from "../plugins/toolbar/block-format/format-heading"
-import { FormatListWithMarker } from "../plugins/toolbar/block-format/format-list-with-marker"
-import { FormatNumberedList } from "../plugins/toolbar/block-format/format-numbered-list"
-import { FormatParagraph } from "../plugins/toolbar/block-format/format-paragraph"
-import { FormatQuote } from "../plugins/toolbar/block-format/format-quote"
-import { BlockInsertPlugin } from "../plugins/toolbar/block-insert-plugin"
-import { InsertColumnsLayout } from "../plugins/toolbar/block-insert/insert-columns-layout"
-import { InsertEmbeds } from "../plugins/toolbar/block-insert/insert-embeds"
-import { InsertHorizontalRule } from "../plugins/toolbar/block-insert/insert-horizontal-rule"
-import { InsertImage } from "../plugins/toolbar/block-insert/insert-image"
-import { InsertTable } from "../plugins/toolbar/block-insert/insert-table"
-import { ClearFormattingToolbarPlugin } from "../plugins/toolbar/clear-formatting-toolbar-plugin"
-import { CodeLanguageToolbarPlugin } from "../plugins/toolbar/code-language-toolbar-plugin"
-import { ElementFormatToolbarPlugin } from "../plugins/toolbar/element-format-toolbar-plugin"
-import { FontBackgroundToolbarPlugin } from "../plugins/toolbar/font-background-toolbar-plugin"
-import { FontColorToolbarPlugin } from "../plugins/toolbar/font-color-toolbar-plugin"
-import { FontFamilyToolbarPlugin } from "../plugins/toolbar/font-family-toolbar-plugin"
-import { FontFormatToolbarPlugin } from "../plugins/toolbar/font-format-toolbar-plugin"
-import { FontSizeToolbarPlugin } from "../plugins/toolbar/font-size-toolbar-plugin"
-import { HistoryToolbarPlugin } from "../plugins/toolbar/history-toolbar-plugin"
-import { LinkToolbarPlugin } from "../plugins/toolbar/link-toolbar-plugin"
-import { SubSuperToolbarPlugin } from "../plugins/toolbar/subsuper-toolbar-plugin"
-import { ToolbarPlugin } from "../plugins/toolbar/toolbar-plugin"
-import { TypingPerfPlugin } from "../plugins/typing-pref-plugin"
-import { EMOJI } from "../transformers/markdown-emoji-transformer"
-import { HR } from "../transformers/markdown-hr-transformer"
-import { IMAGE } from "../transformers/markdown-image-transformer"
-import { TABLE } from "../transformers/markdown-table-transformer"
-import { TWEET } from "../transformers/markdown-tweet-transformer"
-import { UNORDERED_LIST } from "../transformers/markdown-list-transformer"
-import { Separator } from "../ui/separator"
-
-const placeholder = "Press / for commands..."
-
-export function Plugins({
-  readOnly = false,
-}: {
-  readOnly?: boolean
-}) {
-  const [floatingAnchorElem, setFloatingAnchorElem] =
-    useState<HTMLDivElement | null>(null)
-  const [isLinkEditMode, setIsLinkEditMode] = useState<boolean>(false)
-
-  const onRef = (_floatingAnchorElem: HTMLDivElement) => {
-    if (_floatingAnchorElem !== null) {
-      setFloatingAnchorElem(_floatingAnchorElem)
-    }
-  }
-
-  return (
-    <div className="editor-relative-full">
-      {!readOnly && (
-        <ToolbarPlugin
-          className="editor-toolbar"
-        >
-          {({ blockType }) => (
-            <>
-              <div className="editor-toolbar-group">
-                <HistoryToolbarPlugin />
-              </div>
-              <Separator orientation="vertical" className="editor-toolbar-separator" />
-              <div className="editor-toolbar-group">
-                <BlockInsertPlugin>
-                  <InsertHorizontalRule />
-                  <InsertImage />
-                  <InsertTable />
-                  <InsertColumnsLayout />
-                  <InsertEmbeds />
-                </BlockInsertPlugin>
-              </div>
-              <Separator orientation="vertical" className="editor-toolbar-separator" />
-              <div className="editor-toolbar-group">
-                <BlockFormatDropDown>
-                  <FormatParagraph />
-                  <FormatHeading levels={["h1", "h2", "h3"]} />
-                  <FormatNumberedList />
-                  <FormatListWithMarker
-                    blockFormatValue="number-alpha"
-                    listType="number"
-                    markerType="alpha"
-                  />
-                  <FormatBulletedList />
-                  <FormatListWithMarker
-                    blockFormatValue="bullet-dash"
-                    listType="bullet"
-                    markerType="-"
-                  />
-                  <FormatListWithMarker
-                    blockFormatValue="bullet-plus"
-                    listType="bullet"
-                    markerType="+"
-                  />
-                  <FormatCheckList />
-                  <FormatCodeBlock />
-                  <FormatQuote />
-                </BlockFormatDropDown>
-              </div>
-              {blockType === "code" ? (
-                <div className="editor-toolbar-group">
-                  <CodeLanguageToolbarPlugin />
-                </div>
-              ) : (
-                <>
-                  <div className="editor-toolbar-group">
-                    <FontFamilyToolbarPlugin />
-                    <FontSizeToolbarPlugin />
-                  </div>
-                  <Separator orientation="vertical" className="editor-toolbar-separator" />
-                  <div className="editor-toolbar-group">
-                    <FontFormatToolbarPlugin />
-                  </div>
-                  <Separator orientation="vertical" className="editor-toolbar-separator" />
-                  <div className="editor-toolbar-group">
-                    <SubSuperToolbarPlugin />
-                    <LinkToolbarPlugin setIsLinkEditMode={setIsLinkEditMode} />
-                  </div>
-                  <Separator orientation="vertical" className="editor-toolbar-separator" />
-                  <div className="editor-toolbar-group">
-                    <ClearFormattingToolbarPlugin />
-                  </div>
-                  <Separator orientation="vertical" className="editor-toolbar-separator" />
-                  <div className="editor-toolbar-group">
-                    <FontColorToolbarPlugin />
-                    <FontBackgroundToolbarPlugin />
-                  </div>
-                  <Separator orientation="vertical" className="editor-toolbar-separator" />
-                  <div className="editor-toolbar-group">
-                    <ElementFormatToolbarPlugin />
-                  </div>
-                </>
-              )}
-            </>
-          )}
-        </ToolbarPlugin>
-      )}
-
-      <div className={cn("editor-relative-full")}>
-        {/* AutoFocusPlugin removed to prevent auto-scroll on page load */}
-        <RichTextPlugin
-          contentEditable={
-            <div className={cn("editor-relative-full")}>
-              <div className={cn("editor-relative-full")} ref={onRef}>
-                <ContentEditable
-                  placeholder={readOnly ? "" : placeholder}
-                  className={cn(
-                    "editor-content-editable",
-                    readOnly && "editor-content-editable--readonly"
-                  )}
-                />
-              </div>
-            </div>
-          }
-          ErrorBoundary={LexicalErrorBoundary}
-          placeholder={readOnly ? null : <div className="editor-placeholder">{placeholder}</div>}
-        />
-
-        <ClickableLinkPlugin />
-        {!readOnly && (
-          <>
-            <CheckListPlugin />
-            <AlignPlugin />
-            <HorizontalRulePlugin />
-            <TablePlugin hasHorizontalScroll={true} />
-            <InsertTableCommandPlugin />
-            <TableColumnResizerPlugin />
-            <ListPlugin />
-            <TabIndentationPlugin />
-            <HistoryPlugin />
-          </>
-        )}
-        <HashtagPlugin />
-
-        <MentionsPlugin />
-        {!readOnly && <DraggableBlockPlugin anchorElem={floatingAnchorElem} />}
-        <KeywordsPlugin />
-        <EmojisPlugin />
-        {!readOnly && <ImagesPlugin />}
-
-        {!readOnly && <LayoutPlugin />}
-        {!readOnly && <ListColorPlugin />}
-
-        {!readOnly && (
-          <>
-            <AutoEmbedPlugin />
-            <TwitterPlugin />
-            <YouTubePlugin />
-          </>
-        )}
-
-        <CodeHighlightPlugin />
-        {!readOnly && <CodeActionMenuPlugin anchorElem={floatingAnchorElem} />}
-
-        {!readOnly && (
-          <>
-            <MarkdownShortcutPlugin
-              transformers={[
-                TABLE,
-                HR,
-                IMAGE,
-                EMOJI,
-                TWEET,
-                CHECK_LIST,
-                UNORDERED_LIST,
-                ...ELEMENT_TRANSFORMERS.filter(
-                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                  (t) => t.type !== "element" || (t as any).regExp?.toString().indexOf("[*+-]") === -1
-                ),
-                ...MULTILINE_ELEMENT_TRANSFORMERS,
-                ...TEXT_FORMAT_TRANSFORMERS,
-                ...TEXT_MATCH_TRANSFORMERS,
-              ]}
-            />
-            <TypingPerfPlugin />
-            <TabFocusPlugin />
-            <AutocompletePlugin />
-            <AutoLinkPlugin />
-            <LinkPlugin />
-            <ClearEditorPlugin />
-
-            <ComponentPickerMenuPlugin
-              baseOptions={[
-                ParagraphPickerPlugin(),
-                HeadingPickerPlugin({ n: 1 }),
-                HeadingPickerPlugin({ n: 2 }),
-                HeadingPickerPlugin({ n: 3 }),
-                TablePickerPlugin(),
-                CheckListPickerPlugin(),
-                NumberedListPickerPlugin(),
-                BulletedListPickerPlugin(),
-                QuotePickerPlugin(),
-                CodePickerPlugin(),
-                DividerPickerPlugin(),
-                EmbedsPickerPlugin({ embed: "tweet" }),
-                EmbedsPickerPlugin({ embed: "youtube-video" }),
-                ImagePickerPlugin(),
-                ColumnsLayoutPickerPlugin(),
-                AlignmentPickerPlugin({ alignment: "left" }),
-                AlignmentPickerPlugin({ alignment: "center" }),
-                AlignmentPickerPlugin({ alignment: "right" }),
-                AlignmentPickerPlugin({ alignment: "justify" }),
-              ]}
-              dynamicOptionsFn={DynamicTablePickerPlugin}
-            />
-
-            <ContextMenuPlugin />
-            <DragDropPastePlugin />
-            <EmojiPickerPlugin />
-
-            <FloatingLinkEditorPlugin
-              anchorElem={floatingAnchorElem}
-              isLinkEditMode={isLinkEditMode}
-              setIsLinkEditMode={setIsLinkEditMode}
-            />
-            <FloatingTextFormatToolbarPlugin
-              anchorElem={floatingAnchorElem}
-              setIsLinkEditMode={setIsLinkEditMode}
-            />
-
-            <ListMaxIndentLevelPlugin />
-          </>
-        )}
-      </div>
-      {!readOnly && (
-        <ActionsPlugin>
-          <div className="editor-actions-bar">
-            <div className="editor-flex-shrink-0">
-              <CounterCharacterPlugin charset="UTF-16" />
-            </div>
-            <div className="editor-flex-1" />
-            <div className="editor-flex-shrink-0 editor-flex-end">
-              <SpeechToTextPlugin />
-              <ShareContentPlugin />
-              <ImportExportPlugin />
-              <MarkdownTogglePlugin
-                shouldPreserveNewLinesInMarkdown={true}
-                transformers={[
-                  TABLE,
-                  HR,
-                  IMAGE,
-                  EMOJI,
-                  TWEET,
-                  CHECK_LIST,
-                  UNORDERED_LIST,
-                  ...ELEMENT_TRANSFORMERS,
-                  ...MULTILINE_ELEMENT_TRANSFORMERS,
-                  ...TEXT_FORMAT_TRANSFORMERS,
-                  ...TEXT_MATCH_TRANSFORMERS,
-                ]}
-              />
-              <EditModeTogglePlugin />
-              <ClearEditorActionPlugin />
-              <TreeViewPlugin />
-            </div>
-          </div>
-        </ActionsPlugin>
-      )}
-    </div>
-  )
-}
+"use client"
+import { useState } from "react"
+import {
+  CHECK_LIST,
+  ELEMENT_TRANSFORMERS,
+  MULTILINE_ELEMENT_TRANSFORMERS,
+  TEXT_FORMAT_TRANSFORMERS,
+  TEXT_MATCH_TRANSFORMERS,
+} from "@lexical/markdown"
+import { CheckListPlugin } from "@lexical/react/LexicalCheckListPlugin"
+import { ClearEditorPlugin } from "@lexical/react/LexicalClearEditorPlugin"
+import { ClickableLinkPlugin } from "@lexical/react/LexicalClickableLinkPlugin"
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary"
+import { HashtagPlugin } from "@lexical/react/LexicalHashtagPlugin"
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin"
+import { HorizontalRulePlugin } from "@lexical/react/LexicalHorizontalRulePlugin"
+import { ListPlugin } from "@lexical/react/LexicalListPlugin"
+import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin"
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin"
+import { TabIndentationPlugin } from "@lexical/react/LexicalTabIndentationPlugin"
+import { TablePlugin } from "@lexical/react/LexicalTablePlugin"
+
+import { ContentEditable } from "../editor-ui/content-editable"
+import { cn } from "../lib/utils"
+import { ActionsPlugin } from "../plugins/actions/actions-plugin"
+import { AlignPlugin } from "../plugins/align-plugin"
+import { ClearEditorActionPlugin } from "../plugins/actions/clear-editor-plugin"
+import { CounterCharacterPlugin } from "../plugins/actions/counter-character-plugin"
+import { EditModeTogglePlugin } from "../plugins/actions/edit-mode-toggle-plugin"
+import { ImportExportPlugin } from "../plugins/actions/import-export-plugin"
+import { MarkdownTogglePlugin } from "../plugins/actions/markdown-toggle-plugin"
+import { ShareContentPlugin } from "../plugins/actions/share-content-plugin"
+import { SpeechToTextPlugin } from "../plugins/actions/speech-to-text-plugin"
+import { TreeViewPlugin } from "../plugins/actions/tree-view-plugin"
+import { AutoLinkPlugin } from "../plugins/auto-link-plugin"
+import { AutocompletePlugin } from "../plugins/autocomplete-plugin"
+import { CodeActionMenuPlugin } from "../plugins/code-action-menu-plugin"
+import { CodeHighlightPlugin } from "../plugins/code-highlight-plugin"
+import { ComponentPickerMenuPlugin } from "../plugins/component-picker-menu-plugin"
+import { ContextMenuPlugin } from "../plugins/context-menu-plugin"
+import { DragDropPastePlugin } from "../plugins/drag-drop-paste-plugin"
+import { DraggableBlockPlugin } from "../plugins/draggable-block-plugin"
+import { AutoEmbedPlugin } from "../plugins/embeds/auto-embed-plugin"
+import { TwitterPlugin } from "../plugins/embeds/twitter-plugin"
+import { YouTubePlugin } from "../plugins/embeds/youtube-plugin"
+import { EmojiPickerPlugin } from "../plugins/emoji-picker-plugin"
+import { EmojisPlugin } from "../plugins/emojis-plugin"
+import { FloatingLinkEditorPlugin } from "../plugins/floating-link-editor-plugin"
+import { FloatingTextFormatToolbarPlugin } from "../plugins/floating-text-format-plugin"
+import { ImagesPlugin } from "../plugins/images-plugin"
+import { KeywordsPlugin } from "../plugins/keywords-plugin"
+import { LayoutPlugin } from "../plugins/layout-plugin"
+import { LinkPlugin } from "../plugins/link-plugin"
+import { ListColorPlugin } from "../plugins/list-color-plugin"
+import { ListMaxIndentLevelPlugin } from "../plugins/list-max-indent-level-plugin"
+import { MentionsPlugin } from "../plugins/mentions-plugin"
+import { AlignmentPickerPlugin } from "../plugins/picker/alignment-picker-plugin"
+import { BulletedListPickerPlugin } from "../plugins/picker/bulleted-list-picker-plugin"
+import { CheckListPickerPlugin } from "../plugins/picker/check-list-picker-plugin"
+import { CodePickerPlugin } from "../plugins/picker/code-picker-plugin"
+import { ColumnsLayoutPickerPlugin } from "../plugins/picker/columns-layout-picker-plugin"
+import { DividerPickerPlugin } from "../plugins/picker/divider-picker-plugin"
+import { EmbedsPickerPlugin } from "../plugins/picker/embeds-picker-plugin"
+import { HeadingPickerPlugin } from "../plugins/picker/heading-picker-plugin"
+import { ImagePickerPlugin } from "../plugins/picker/image-picker-plugin"
+import { NumberedListPickerPlugin } from "../plugins/picker/numbered-list-picker-plugin"
+import { ParagraphPickerPlugin } from "../plugins/picker/paragraph-picker-plugin"
+import { QuotePickerPlugin } from "../plugins/picker/quote-picker-plugin"
+import {
+  DynamicTablePickerPlugin,
+  TablePickerPlugin,
+} from "../plugins/picker/table-picker-plugin"
+import { TabFocusPlugin } from "../plugins/tab-focus-plugin"
+import { TableColumnResizerPlugin } from "../plugins/table-column-resizer-plugin"
+import {
+  InsertTableCommandPlugin,
+} from "../plugins/table-plugin"
+import { BlockFormatDropDown } from "../plugins/toolbar/block-format-toolbar-plugin"
+import { FormatBulletedList } from "../plugins/toolbar/block-format/format-bulleted-list"
+import { FormatCheckList } from "../plugins/toolbar/block-format/format-check-list"
+import { FormatCodeBlock } from "../plugins/toolbar/block-format/format-code-block"
+import { FormatHeading } from "../plugins/toolbar/block-format/format-heading"
+import { FormatListWithMarker } from "../plugins/toolbar/block-format/format-list-with-marker"
+import { FormatNumberedList } from "../plugins/toolbar/block-format/format-numbered-list"
+import { FormatParagraph } from "../plugins/toolbar/block-format/format-paragraph"
+import { FormatQuote } from "../plugins/toolbar/block-format/format-quote"
+import { BlockInsertPlugin } from "../plugins/toolbar/block-insert-plugin"
+import { InsertColumnsLayout } from "../plugins/toolbar/block-insert/insert-columns-layout"
+import { InsertEmbeds } from "../plugins/toolbar/block-insert/insert-embeds"
+import { InsertHorizontalRule } from "../plugins/toolbar/block-insert/insert-horizontal-rule"
+import { InsertImage } from "../plugins/toolbar/block-insert/insert-image"
+import { InsertTable } from "../plugins/toolbar/block-insert/insert-table"
+import { ClearFormattingToolbarPlugin } from "../plugins/toolbar/clear-formatting-toolbar-plugin"
+import { CodeLanguageToolbarPlugin } from "../plugins/toolbar/code-language-toolbar-plugin"
+import { ElementFormatToolbarPlugin } from "../plugins/toolbar/element-format-toolbar-plugin"
+import { FontBackgroundToolbarPlugin } from "../plugins/toolbar/font-background-toolbar-plugin"
+import { FontColorToolbarPlugin } from "../plugins/toolbar/font-color-toolbar-plugin"
+import { FontFamilyToolbarPlugin } from "../plugins/toolbar/font-family-toolbar-plugin"
+import { FontFormatToolbarPlugin } from "../plugins/toolbar/font-format-toolbar-plugin"
+import { FontSizeToolbarPlugin } from "../plugins/toolbar/font-size-toolbar-plugin"
+import { HistoryToolbarPlugin } from "../plugins/toolbar/history-toolbar-plugin"
+import { LinkToolbarPlugin } from "../plugins/toolbar/link-toolbar-plugin"
+import { SubSuperToolbarPlugin } from "../plugins/toolbar/subsuper-toolbar-plugin"
+import { ToolbarPlugin } from "../plugins/toolbar/toolbar-plugin"
+import { TypingPerfPlugin } from "../plugins/typing-pref-plugin"
+import { EMOJI } from "../transformers/markdown-emoji-transformer"
+import { HR } from "../transformers/markdown-hr-transformer"
+import { IMAGE } from "../transformers/markdown-image-transformer"
+import { TABLE } from "../transformers/markdown-table-transformer"
+import { TWEET } from "../transformers/markdown-tweet-transformer"
+import { UNORDERED_LIST } from "../transformers/markdown-list-transformer"
+import { Separator } from "../ui/separator"
+
+export function Plugins({
+  readOnly = false,
+  placeholder = "",
+}: {
+  readOnly?: boolean
+  placeholder?: string
+}) {
+  const [floatingAnchorElem, setFloatingAnchorElem] =
+    useState<HTMLDivElement | null>(null)
+  const [isLinkEditMode, setIsLinkEditMode] = useState<boolean>(false)
+
+  const onRef = (_floatingAnchorElem: HTMLDivElement) => {
+    if (_floatingAnchorElem !== null) {
+      setFloatingAnchorElem(_floatingAnchorElem)
+    }
+  }
+
+  return (
+    <div className="editor-relative-full">
+      {!readOnly && (
+        <ToolbarPlugin
+          className="editor-toolbar"
+        >
+          {({ blockType }) => (
+            <>
+              <div className="editor-toolbar-group">
+                <HistoryToolbarPlugin />
+              </div>
+              <Separator orientation="vertical" className="editor-toolbar-separator" />
+              {blockType !== "code" && (
+                <>
+                  <div className="editor-toolbar-group">
+                    <BlockInsertPlugin>
+                      <InsertHorizontalRule />
+                      <InsertImage />
+                      <InsertTable />
+                      <InsertColumnsLayout />
+                      <InsertEmbeds />
+                    </BlockInsertPlugin>
+                  </div>
+                  <Separator orientation="vertical" className="editor-toolbar-separator" />
+                  <div className="editor-toolbar-group">
+                    <BlockFormatDropDown>
+                      <FormatParagraph />
+                      <FormatHeading levels={["h1", "h2", "h3"]} />
+                      <FormatNumberedList />
+                      <FormatListWithMarker
+                        blockFormatValue="number-alpha"
+                        listType="number"
+                        markerType="alpha"
+                      />
+                      <FormatBulletedList />
+                      <FormatListWithMarker
+                        blockFormatValue="bullet-dash"
+                        listType="bullet"
+                        markerType="-"
+                      />
+                      <FormatListWithMarker
+                        blockFormatValue="bullet-plus"
+                        listType="bullet"
+                        markerType="+"
+                      />
+                      <FormatCheckList />
+                      <FormatCodeBlock />
+                      <FormatQuote />
+                    </BlockFormatDropDown>
+                  </div>
+                  <Separator orientation="vertical" className="editor-toolbar-separator" />
+                </>
+              )}
+              {blockType === "code" ? (
+                <div className="editor-toolbar-group">
+                  <CodeLanguageToolbarPlugin />
+                </div>
+              ) : (
+                <>
+                  <div className="editor-toolbar-group">
+                    <FontFamilyToolbarPlugin />
+                    <FontSizeToolbarPlugin />
+                  </div>
+                  <Separator orientation="vertical" className="editor-toolbar-separator" />
+                  <div className="editor-toolbar-group">
+                    <FontFormatToolbarPlugin />
+                  </div>
+                  <Separator orientation="vertical" className="editor-toolbar-separator" />
+                  <div className="editor-toolbar-group">
+                    <SubSuperToolbarPlugin />
+                    <LinkToolbarPlugin setIsLinkEditMode={setIsLinkEditMode} />
+                  </div>
+                  <Separator orientation="vertical" className="editor-toolbar-separator" />
+                  <div className="editor-toolbar-group">
+                    <ClearFormattingToolbarPlugin />
+                  </div>
+                  <Separator orientation="vertical" className="editor-toolbar-separator" />
+                  <div className="editor-toolbar-group">
+                    <FontColorToolbarPlugin />
+                    <FontBackgroundToolbarPlugin />
+                  </div>
+                  <Separator orientation="vertical" className="editor-toolbar-separator" />
+                  <div className="editor-toolbar-group">
+                    <ElementFormatToolbarPlugin />
+                  </div>
+                </>
+              )}
+            </>
+          )}
+        </ToolbarPlugin>
+      )}
+
+      <div className={cn("editor-relative-full")}>
+        {/* AutoFocusPlugin removed to prevent auto-scroll on page load */}
+        <RichTextPlugin
+          contentEditable={
+            <div className={cn("editor-relative-full")}>
+              <div className={cn("editor-relative-full")} ref={onRef}>
+                <ContentEditable
+                  placeholder={readOnly ? "" : placeholder}
+                  className={cn(
+                    "editor-content-editable",
+                    readOnly && "editor-content-editable--readonly"
+                  )}
+                />
+              </div>
+            </div>
+          }
+          ErrorBoundary={LexicalErrorBoundary}
+          placeholder={readOnly ? null : <div className="editor-placeholder">{placeholder}</div>}
+        />
+
+        <ClickableLinkPlugin />
+        {!readOnly && (
+          <>
+            <CheckListPlugin />
+            <AlignPlugin />
+            <HorizontalRulePlugin />
+            <TablePlugin hasHorizontalScroll={true} />
+            <InsertTableCommandPlugin />
+            <TableColumnResizerPlugin anchorElem={floatingAnchorElem ?? document.body} />
+            <ListPlugin />
+            <TabIndentationPlugin />
+            <HistoryPlugin />
+          </>
+        )}
+        <HashtagPlugin />
+
+        <MentionsPlugin />
+        {!readOnly && <DraggableBlockPlugin anchorElem={floatingAnchorElem} />}
+        <KeywordsPlugin />
+        <EmojisPlugin />
+        {!readOnly && <ImagesPlugin />}
+
+        {!readOnly && <LayoutPlugin />}
+        {!readOnly && <ListColorPlugin />}
+
+        {!readOnly && (
+          <>
+            <AutoEmbedPlugin />
+            <TwitterPlugin />
+            <YouTubePlugin />
+          </>
+        )}
+
+        <CodeHighlightPlugin />
+        {!readOnly && <CodeActionMenuPlugin anchorElem={floatingAnchorElem} />}
+
+        {!readOnly && (
+          <>
+            <MarkdownShortcutPlugin
+              transformers={[
+                TABLE,
+                HR,
+                IMAGE,
+                EMOJI,
+                TWEET,
+                CHECK_LIST,
+                UNORDERED_LIST,
+                ...ELEMENT_TRANSFORMERS.filter(
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  (t) => t.type !== "element" || (t as any).regExp?.toString().indexOf("[*+-]") === -1
+                ),
+                ...MULTILINE_ELEMENT_TRANSFORMERS,
+                ...TEXT_FORMAT_TRANSFORMERS,
+                ...TEXT_MATCH_TRANSFORMERS,
+              ]}
+            />
+            <TypingPerfPlugin />
+            <TabFocusPlugin />
+            <AutocompletePlugin />
+            <AutoLinkPlugin />
+            <LinkPlugin />
+            <ClearEditorPlugin />
+
+            <ComponentPickerMenuPlugin
+              baseOptions={[
+                ParagraphPickerPlugin(),
+                HeadingPickerPlugin({ n: 1 }),
+                HeadingPickerPlugin({ n: 2 }),
+                HeadingPickerPlugin({ n: 3 }),
+                TablePickerPlugin(),
+                CheckListPickerPlugin(),
+                NumberedListPickerPlugin(),
+                BulletedListPickerPlugin(),
+                QuotePickerPlugin(),
+                CodePickerPlugin(),
+                DividerPickerPlugin(),
+                EmbedsPickerPlugin({ embed: "tweet" }),
+                EmbedsPickerPlugin({ embed: "youtube-video" }),
+                ImagePickerPlugin(),
+                ColumnsLayoutPickerPlugin(),
+                AlignmentPickerPlugin({ alignment: "left" }),
+                AlignmentPickerPlugin({ alignment: "center" }),
+                AlignmentPickerPlugin({ alignment: "right" }),
+                AlignmentPickerPlugin({ alignment: "justify" }),
+              ]}
+              dynamicOptionsFn={DynamicTablePickerPlugin}
+            />
+
+            <ContextMenuPlugin />
+            <DragDropPastePlugin />
+            <EmojiPickerPlugin />
+
+            <FloatingLinkEditorPlugin
+              anchorElem={floatingAnchorElem}
+              isLinkEditMode={isLinkEditMode}
+              setIsLinkEditMode={setIsLinkEditMode}
+            />
+            <FloatingTextFormatToolbarPlugin
+              anchorElem={floatingAnchorElem}
+              setIsLinkEditMode={setIsLinkEditMode}
+            />
+
+            <ListMaxIndentLevelPlugin />
+          </>
+        )}
+      </div>
+      {!readOnly && (
+        <ActionsPlugin>
+          <div className="editor-actions-bar">
+            <div className="editor-flex-shrink-0">
+              <CounterCharacterPlugin charset="UTF-16" />
+            </div>
+            <div className="editor-flex-1" />
+            <div className="editor-flex-shrink-0 editor-flex-end">
+              <SpeechToTextPlugin />
+              <ShareContentPlugin />
+              <ImportExportPlugin />
+              <MarkdownTogglePlugin
+                shouldPreserveNewLinesInMarkdown={true}
+                transformers={[
+                  TABLE,
+                  HR,
+                  IMAGE,
+                  EMOJI,
+                  TWEET,
+                  CHECK_LIST,
+                  UNORDERED_LIST,
+                  ...ELEMENT_TRANSFORMERS,
+                  ...MULTILINE_ELEMENT_TRANSFORMERS,
+                  ...TEXT_FORMAT_TRANSFORMERS,
+                  ...TEXT_MATCH_TRANSFORMERS,
+                ]}
+              />
+              <EditModeTogglePlugin />
+              <ClearEditorActionPlugin />
+              <TreeViewPlugin />
+            </div>
+          </div>
+        </ActionsPlugin>
+      )}
+    </div>
+  )
+}