From c1c5d5a5dc67097d179142888408a482fe5172b4 Mon Sep 17 00:00:00 2001
From: Phodal Huang <gmszone@qq.com>
Date: Fri, 1 Nov 2024 17:48:21 +0800
Subject: [PATCH] feat(editor): add custom actions and update mapping for
 Tiptap Editor

This commit introduces the ability to add custom actions to the Tiptap Editor and updates the actions map to include these custom slash commands. It enhances the editor's functionality and user experience by enabling the execution of custom actions within the editor interface.
---
 README.md | 61 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 61 insertions(+)

diff --git a/README.md b/README.md
index 5d7f7dd..e59e6fc 100644
--- a/README.md
+++ b/README.md
@@ -101,6 +101,67 @@ const BubbleMenu: PromptAction[] = [
 ];
 ```
 
+Custom Smamples:
+
+
+```tsx
+const actionExecutor: AiActionExecutor = new AiActionExecutor();
+actionExecutor.setEndpointUrl("/api/chat");
+
+const instance = PromptsManager.getInstance();
+const map = customSlashActions?.map((action) => {
+  return {
+    name: action.name,
+    i18Name: false,
+    template: `123125`,
+    facetType: FacetType.SLASH_COMMAND,
+    outputForm: OutputForm.STREAMING,
+    action: async (editor: Editor) => {
+      if (action.action) {
+        await action.action(editor);
+      }
+    },
+  };
+}) || [];
+
+instance.updateActionsMap("article", ArticlePrompts.concat(map));
+
+const editor = useEditor({
+  extensions: setupExtensions(instance, actionExecutor).concat([
+    Markdown.configure({
+      transformPastedText: true,
+      transformCopiedText: false,
+    }),
+  ]),
+  content: md.render(value),
+  immediatelyRender: false,
+  editorProps: {
+    attributes: {
+      class: "prose lg:prose-xl bb-editor-inner",
+    },
+  },
+  onUpdate: ({ editor }) => {
+    if (onChange) {
+      const schema = editor.state.schema;
+      try {
+        const serializer = DOMSerializer.fromSchema(schema);
+        const serialized: HTMLElement | DocumentFragment = serializer.serializeFragment(editor.state.doc.content);
+
+        const html: string = Array.from(serialized.childNodes)
+                .map((node: ChildNode) => (node as HTMLElement).outerHTML)
+                .join("");
+
+        const turndownService = new TurndownService();
+        const markdown = turndownService.turndown(html);
+        onChange(markdown);
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  },
+});
+```
+
 ## Refs
 
 ### Tiptap Editor extensions