From 55a5c2d38345b63740cda0dfb29ae5cea394ea63 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Fri, 21 Jun 2024 18:53:35 +0530
Subject: [PATCH] [WEB-1682] chore: additional document editor extensions
 (#4905)

* chore: additional document editor extensions

* chore: updated document editor hook
---
 .../src/ce/extensions/document-extensions.tsx | 41 +++++++++++++++++++
 packages/editor/src/ce/extensions/index.ts    |  1 +
 .../src/core/hooks/use-document-editor.ts     |  9 +++-
 packages/editor/src/ee/extensions/index.ts    |  1 +
 4 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 packages/editor/src/ce/extensions/document-extensions.tsx
 create mode 100644 packages/editor/src/ce/extensions/index.ts
 create mode 100644 packages/editor/src/ee/extensions/index.ts

diff --git a/packages/editor/src/ce/extensions/document-extensions.tsx b/packages/editor/src/ce/extensions/document-extensions.tsx
new file mode 100644
index 0000000000..efb6618db1
--- /dev/null
+++ b/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;
+};
diff --git a/packages/editor/src/ce/extensions/index.ts b/packages/editor/src/ce/extensions/index.ts
new file mode 100644
index 0000000000..4a975b8c5a
--- /dev/null
+++ b/packages/editor/src/ce/extensions/index.ts
@@ -0,0 +1 @@
+export * from "./document-extensions";
diff --git a/packages/editor/src/core/hooks/use-document-editor.ts b/packages/editor/src/core/hooks/use-document-editor.ts
index 5ab5bc08fa..706e102257 100644
--- a/packages/editor/src/core/hooks/use-document-editor.ts
+++ b/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,
diff --git a/packages/editor/src/ee/extensions/index.ts b/packages/editor/src/ee/extensions/index.ts
new file mode 100644
index 0000000000..1c59af5c6a
--- /dev/null
+++ b/packages/editor/src/ee/extensions/index.ts
@@ -0,0 +1 @@
+export * from "src/ce/extensions";