reframe editor

apps/web/src/app/test/report-playground/ReportPlayground.tsx

@@ -70,6 +70,8 @@ export const ReportPlayground: React.FC = () => {
           value={usedValue}
           useFixedToolbarKit={true}
           readOnly={false}
+          containerClassName="overflow-y-auto!"
+          className="overflow-y-auto!"
           onValueChange={logValueChanges}
         />
       </div>
@@ -178,6 +180,16 @@ const value: ReportElements = [
     type: 'callout',
     id: 'KQ0_YKgdqy'
   },
+  {
+    type: 'metric',
+    children: [{ text: '' }],
+    metricId: '',
+    caption: [{ text: 'This is a caption' }]
+  },
+  {
+    type: 'characterCounter' as 'p',
+    children: [{ text: 'This is my character counter' }]
+  },
   {
     type: 'p',
     id: 'k5Id6hcBYM',

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

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useImperativeHandle, useRef } from 'react';
 import type { Value, AnyPluginConfig } from 'platejs';
 import { Plate, type TPlateEditor } from 'platejs/react';

apps/web/src/components/ui/report/editor-kit.ts

@@ -3,7 +3,7 @@
 import { type Value, TrailingBlockPlugin } from 'platejs';
 import { type TPlateEditor, useEditorRef } from 'platejs/react';
 
-import { AIKit } from './plugins/ai-kit';
+// import { AIKit } from './plugins/ai-kit';
 import { AlignKit } from './plugins/align-kit';
 import { AutoformatKit } from './plugins/autoformat-kit';
 import { BasicBlocksKit } from './plugins/basic-blocks-kit';
@@ -39,8 +39,14 @@ import { ToggleKit } from './plugins/toggle-kit';
 import { BusterStreamKit } from './plugins/buster-stream-kit';
 
 export const EditorKit = [
-  ...AIKit,
-  ...BlockMenuKit,
+  // Editing
+  ...SlashKit,
+  ...AutoformatKit,
+  ...CursorOverlayKit,
+  ...DndKit,
+  ...EmojiKit,
+  ...ExitBreakKit,
+  TrailingBlockPlugin,
 
   // Elements
   ...BasicBlocksKit,
@@ -60,6 +66,9 @@ export const EditorKit = [
   ...BasicMarksKit,
   ...FontKit,
 
+  // ...AIKit,
+  ...BlockMenuKit,
+
   // Block Style
   ...ListKit,
   ...AlignKit,
@@ -70,15 +79,6 @@ export const EditorKit = [
   ...CommentKit,
   ...SuggestionKit,
 
-  // Editing
-  ...SlashKit,
-  ...AutoformatKit,
-  ...CursorOverlayKit,
-  ...DndKit,
-  ...EmojiKit,
-  ...ExitBreakKit,
-  TrailingBlockPlugin,
-
   // Custom
   ...BusterStreamKit,
 

apps/web/src/components/ui/report/editor-kit.tsx

@@ -1,93 +0,0 @@
-'use client';
-
-import { type Value, TrailingBlockPlugin } from 'platejs';
-import { type TPlateEditor, useEditorRef } from 'platejs/react';
-
-import { AIKit } from './plugins/ai-kit';
-import { AlignKit } from './plugins/align-kit';
-import { AutoformatKit } from './plugins/autoformat-kit';
-import { BasicBlocksKit } from './plugins/basic-blocks-kit';
-import { BasicMarksKit } from './plugins/basic-marks-kit';
-import { BlockMenuKit } from './plugins/block-menu-kit';
-import { BlockPlaceholderKit } from './plugins/block-placeholder-kit';
-import { CalloutKit } from './plugins/callout-kit';
-import { CodeBlockKit } from './plugins/code-block-kit';
-import { ColumnKit } from './plugins/column-kit';
-import { CommentKit } from './plugins/comment-kit';
-import { CursorOverlayKit } from './plugins/cursor-overlay-kit';
-import { DateKit } from './plugins/date-kit';
-import { DiscussionKit } from './plugins/discussion-kit';
-import { DndKit } from './plugins/dnd-kit';
-import { DocxKit } from './plugins/docx-kit';
-import { EmojiKit } from './plugins/emoji-kit';
-import { ExitBreakKit } from './plugins/exit-break-kit';
-import { FixedToolbarKit } from './plugins/fixed-toolbar-kit';
-import { FloatingToolbarKit } from './plugins/floating-toolbar-kit';
-import { FontKit } from './plugins/font-kit';
-import { LineHeightKit } from './plugins/line-height-kit';
-import { LinkKit } from './plugins/link-kit';
-import { ListKit } from './plugins/list-kit';
-import { MarkdownKit } from './plugins/markdown-kit';
-import { MathKit } from './plugins/math-kit';
-import { MediaKit } from './plugins/media-kit';
-import { MentionKit } from './plugins/mention-kit';
-import { SlashKit } from './plugins/slash-kit';
-import { SuggestionKit } from './plugins/suggestion-kit';
-import { TableKit } from './plugins/table-kit';
-import { TocKit } from './plugins/toc-kit';
-import { ToggleKit } from './plugins/toggle-kit';
-
-export const EditorKit = [
-  ...AIKit,
-  ...BlockMenuKit,
-
-  // Elements
-  ...BasicBlocksKit,
-  ...CodeBlockKit,
-  ...TableKit,
-  ...ToggleKit,
-  ...TocKit,
-  ...MediaKit,
-  ...CalloutKit,
-  ...ColumnKit,
-  ...MathKit,
-  ...DateKit,
-  ...LinkKit,
-  ...MentionKit,
-
-  // Marks
-  ...BasicMarksKit,
-  ...FontKit,
-
-  // Block Style
-  ...ListKit,
-  ...AlignKit,
-  ...LineHeightKit,
-
-  // Collaboration
-  ...DiscussionKit,
-  ...CommentKit,
-  ...SuggestionKit,
-
-  // Editing
-  ...SlashKit,
-  ...AutoformatKit,
-  ...CursorOverlayKit,
-  ...DndKit,
-  ...EmojiKit,
-  ...ExitBreakKit,
-  TrailingBlockPlugin,
-
-  // Parsers
-  ...DocxKit,
-  ...MarkdownKit,
-
-  // UI
-  ...BlockPlaceholderKit,
-  ...FixedToolbarKit,
-  ...FloatingToolbarKit
-];
-
-export type MyEditor = TPlateEditor<Value, (typeof EditorKit)[number]>;
-
-export const useEditor = () => useEditorRef<MyEditor>();

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { MarkdownPlugin } from '@platejs/markdown'; //use this an not the one from server-utils
 
 export const MarkdownKit = [MarkdownPlugin];

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { type Value } from 'platejs';
 import { useEditorRef, usePlateEditor, type TPlateEditor } from 'platejs/react';
 import { useMemo } from 'react';
@@ -6,6 +8,8 @@ import { EditorKit } from './editor-kit';
 import { FIXED_TOOLBAR_KIT_KEY } from './plugins/fixed-toolbar-kit';
 import type { IReportEditor } from './ReportEditor';
 
+// Debug logs removed to avoid module-evaluation side effects
+
 export const useReportEditor = ({
   value,
   disabled,
@@ -30,6 +34,8 @@ export const useReportEditor = ({
     return EditorKit;
   }, [useFixedToolbarKit]);
 
+  // console.log('plugins', { plugins });
+
   return usePlateEditor({
     plugins,
     value,

apps/web/src/controllers/ReportPageControllers/ReportPageController/ReportPageController.tsx

@@ -9,6 +9,9 @@ import { useDebounceFn } from '@/hooks/useDebounce';
 import type { ReportElements } from '@buster/server-shared/reports';
 //import DynamicReportEditor from '@/components/ui/report/DynamicReportEditor';
 import { ReportEditor } from '@/components/ui/report/ReportEditor';
+import { ReportEditorSkeleton } from '../../../components/ui/report/ReportEditorSkeleton';
+import DynamicReportEditor from '@/components/ui/report/DynamicReportEditor';
+import type { Value } from 'platejs';
 
 export const ReportPageController: React.FC<{
   reportId: string;
@@ -42,19 +45,29 @@ export const ReportPageController: React.FC<{
 
   return (
     <div className={cn('space-y-1.5 pt-9 sm:px-[max(64px,calc(50%-350px))]', className)}>
-      <ReportPageHeader
-        name={report?.name}
-        updatedAt={report?.updated_at}
-        onChangeName={onChangeName}
-      />
+      {report ? (
+        <>
+          <ReportPageHeader
+            name={report?.name}
+            updatedAt={report?.updated_at}
+            onChangeName={onChangeName}
+          />
 
-      <ReportEditor
-        //   ref={editor}
-        value={content}
-        onValueChange={onChangeContent}
-        readOnly={readOnly || !report}
-        className="px-0!"
-      />
+          <ReportEditor
+            //   ref={editor}
+            value={content}
+            placeholder="Start typing..."
+            disabled={false}
+            variant="default"
+            useFixedToolbarKit={true}
+            onValueChange={onChangeContent}
+            readOnly={readOnly || !report}
+            className="px-0!"
+          />
+        </>
+      ) : (
+        <ReportEditorSkeleton />
+      )}
     </div>
   );
 };