[WEB-1682] chore: additional document editor extensions (#4905)

* chore: additional document editor extensions

* chore: updated document editor hook

packages/editor/src/ce/extensions/document-extensions.tsx

@@ -0,0 +1,41 @@
+import { LayersIcon } from "lucide-react";
+import { SlashCommand } from "@/extensions";
+// hooks
+import { TFileHandler } from "@/hooks/use-editor";
+// plane editor types
+import { TIssueEmbedConfig } from "@/plane-editor/types";
+// types
+import { ISlashCommandItem } from "@/types";
+
+type Props = {
+  fileHandler: TFileHandler;
+  issueEmbedConfig: TIssueEmbedConfig | undefined;
+};
+
+export const DocumentEditorAdditionalExtensions = (props: Props) => {
+  const { fileHandler } = props;
+
+  const slashCommandAdditionalOptions: ISlashCommandItem[] = [
+    {
+      key: "issue_embed",
+      title: "Issue embed",
+      description: "Embed an issue from the project.",
+      searchTerms: ["issue", "link", "embed"],
+      icon: <LayersIcon className="h-3.5 w-3.5" />,
+      command: ({ editor, range }) => {
+        editor
+          .chain()
+          .focus()
+          .insertContentAt(
+            range,
+            "<p class='text-sm bg-gray-300 w-fit pl-3 pr-3 pt-1 pb-1 rounded shadow-sm'>#issue_</p>"
+          )
+          .run();
+      },
+    },
+  ];
+
+  const extensions = [SlashCommand(fileHandler.upload, slashCommandAdditionalOptions)];
+
+  return extensions;
+};

packages/editor/src/ce/extensions/index.ts

@@ -0,0 +1 @@
+export * from "./document-extensions";

packages/editor/src/core/hooks/use-document-editor.ts

@@ -4,9 +4,11 @@ import { EditorProps } from "@tiptap/pm/view";
 import { IndexeddbPersistence } from "y-indexeddb";
 import * as Y from "yjs";
 // extensions
-import { DragAndDrop, IssueWidget, SlashCommand } from "@/extensions";
+import { DragAndDrop, IssueWidget } from "@/extensions";
 // hooks
 import { TFileHandler, useEditor } from "@/hooks/use-editor";
+// plane editor extensions
+import { DocumentEditorAdditionalExtensions } from "@/plane-editor/extensions";
 // plane editor provider
 import { CollaborationProvider } from "@/plane-editor/providers";
 // plane editor types
@@ -85,7 +87,6 @@ export const useDocumentEditor = (props: DocumentEditorProps) => {
     forwardedRef,
     mentionHandler,
     extensions: [
-      SlashCommand(fileHandler.upload),
       DragAndDrop(setHideDragHandleFunction),
       embedHandler?.issue &&
         IssueWidget({
@@ -94,6 +95,10 @@ export const useDocumentEditor = (props: DocumentEditorProps) => {
       Collaboration.configure({
         document: provider.document,
       }),
+      ...DocumentEditorAdditionalExtensions({
+        fileHandler,
+        issueEmbedConfig: embedHandler?.issue,
+      }),
     ],
     placeholder,
     tabIndex,

packages/editor/src/ee/extensions/index.ts

@@ -0,0 +1 @@
+export * from "src/ce/extensions";