Add additinional callout and toolbar

apps/web/src/components/ui/report/elements/EmojiToolbarButton.tsx

@@ -252,7 +252,7 @@ function EmojiPickerContent({
         return (
           <div
             key={categoryId}
-            ref={section.root}
+            ref={section.root as React.RefObject<HTMLDivElement>}
             style={{ width: getRowWidth }}
             data-id={categoryId}>
             <div className="bg-popover/90 sticky -top-px z-1 p-1 py-2 text-sm font-semibold backdrop-blur-xs">
@@ -310,7 +310,7 @@ function EmojiPickerContent({
 
   return (
     <div
-      ref={refs.current.contentRoot}
+      ref={refs.current.contentRoot as React.RefObject<HTMLDivElement>}
       className={cn(
         'h-full min-h-[50%] overflow-x-hidden overflow-y-auto px-2',
         '[&::-webkit-scrollbar]:w-4',
@@ -319,7 +319,7 @@ function EmojiPickerContent({
         '[&::-webkit-scrollbar-thumb]:border-popover [&::-webkit-scrollbar-thumb]:border-4 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:bg-clip-padding'
       )}
       data-id="scroll">
-      <div ref={refs.current.content} className="h-full">
+      <div ref={refs.current.content as React.RefObject<HTMLDivElement>} className="h-full">
         {isSearching ? SearchList() : EmojiList()}
       </div>
     </div>

apps/web/src/components/ui/report/plugins/callout-base-kit.tsx

@@ -1,5 +0,0 @@
-import { BaseCalloutPlugin } from '@platejs/callout';
-
-import { CalloutElementStatic } from '@/components/ui/callout-node-static';
-
-export const BaseCalloutKit = [BaseCalloutPlugin.withComponent(CalloutElementStatic)];

apps/web/src/components/ui/report/plugins/callout-kit.tsx

@@ -0,0 +1,5 @@
+import { BaseCalloutPlugin } from '@platejs/callout';
+
+import { CalloutElement } from '../elements/CalloutNode';
+
+export const CalloutKit = [BaseCalloutPlugin.withComponent(CalloutElement)];

apps/web/src/components/ui/report/plugins/test-plugin.tsx

@@ -0,0 +1,34 @@
+import { createPlatePlugin, Key } from 'platejs/react';
+
+// Example: A simplified plugin with both transforms and API
+export const MyTestPlugin = createPlatePlugin({
+  key: 'doc'
+})
+  // Define editor.tf.doc.format()
+  .extendTransforms(({ editor, type }) => ({
+    format: () => {
+      console.log('format', editor, type);
+      editor.tf.normalize({ force: true });
+    }
+  }))
+  // Define editor.api.doc.format()
+  .extendApi(({ editor, type }) => ({
+    save: async () => {
+      console.log('save', editor, type);
+      // Save the document
+      // await fetch(...);
+    }
+  }))
+  .extend({
+    // Or .configure() if extending an existing plugin
+    shortcuts: {
+      // This will call editor.tf.doc.format()
+      format: {
+        keys: [[Key.Mod, Key.Shift, 'f']] // e.g., Cmd/Ctrl + Shift + F
+      },
+      // This will call editor.api.doc.save()
+      save: {
+        keys: [[Key.Mod, 's']] // e.g., Cmd/Ctrl + S
+      }
+    }
+  });

apps/web/src/components/ui/report/useEditor.tsx

@@ -1,6 +1,4 @@
 import { AnyPluginConfig, type Value } from 'platejs';
-import { CodePlugin } from '@platejs/basic-nodes/react';
-import { CalloutPlugin } from '@platejs/callout/react';
 import { KEYS } from 'platejs';
 import { AutoformatPlugin } from '@platejs/autoformat';
 
@@ -8,13 +6,14 @@ import { usePlateEditor } from 'platejs/react';
 import { BasicBlocksKit } from './plugins/basic-blocks-kit';
 import { BaseBasicMarksKit } from './plugins/basic-markd-kit';
 import { CodeBlockKit } from './plugins/code-block-kit';
+import { CalloutKit } from './plugins/callout-kit';
+import { MyDocumentPlugin } from './plugins/test-plugin';
 
 export const editorPlugins: AnyPluginConfig[] = [
   ...BaseBasicMarksKit,
   ...BasicBlocksKit,
   ...CodeBlockKit,
-  CalloutPlugin,
-  CodePlugin,
+  ...CalloutKit,
   AutoformatPlugin.configure({
     options: {
       rules: [