Remove mention kit

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

@@ -13,8 +13,6 @@ import { BaseListKit } from './plugins/list-base-kit';
 import { MarkdownKit } from './plugins/markdown-kit';
 import { BaseMathKit } from './plugins/math-base-kit';
 import { BaseMediaKit } from './plugins/media-base-kit';
-import { BaseMentionKit } from './plugins/mention-base-kit';
-import { MetricKit } from './plugins/metric-kit';
 import { MetricBaseKit } from './plugins/metric-kit/metric-base-kit';
 import { BaseSuggestionKit } from './plugins/suggestion-base-kit';
 import { BaseTableKit } from './plugins/table-base-kit';
@@ -34,8 +32,6 @@ export const BaseEditorKit = [
   ...BaseMathKit,
   ...BaseDateKit,
   ...BaseLinkKit,
-  ...BaseMentionKit,
-  ...BaseBasicMarksKit,
   ...BaseFontKit,
   ...BaseListKit,
   ...BaseAlignKit,

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

@@ -23,13 +23,13 @@ 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 { GlobalVariablePlugin } from './plugins/global-variable-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 { MetricKit } from './plugins/metric-kit';
 import { SlashKit } from './plugins/slash-kit';
 import { StreamContentKit } from './plugins/stream-content-kit';
@@ -40,8 +40,10 @@ import { ToggleKit } from './plugins/toggle-kit';
 
 export const EditorKit = ({
   scrollAreaRef,
+  mode,
 }: {
   scrollAreaRef?: React.RefObject<HTMLDivElement | null>;
+  mode: 'default' | 'export';
 }) => [
   // Editing
   ...SlashKit,
@@ -63,7 +65,6 @@ export const EditorKit = ({
   // ...MathKit,
   ...DateKit,
   ...LinkKit,
-  ...MentionKit,
   ...CaptionKit,
 
   // Marks
@@ -98,4 +99,9 @@ export const EditorKit = ({
 
   // Dnd
   ...DndKit({ scrollAreaRef }),
+
+  //Global
+  GlobalVariablePlugin.configure({
+    options: { mode },
+  }),
 ];

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

@@ -1,185 +0,0 @@
-import { getMentionOnSelectItem } from '@platejs/mention';
-
-import type { TComboboxInputElement, TMentionElement } from 'platejs';
-import { IS_APPLE, KEYS } from 'platejs';
-import type { PlateElementProps } from 'platejs/react';
-import { PlateElement, useFocused, useReadOnly, useSelected } from 'platejs/react';
-import * as React from 'react';
-import { useMounted } from '@/hooks/useMount';
-import { cn } from '@/lib/utils';
-
-import {
-  InlineCombobox,
-  InlineComboboxContent,
-  InlineComboboxEmpty,
-  InlineComboboxGroup,
-  InlineComboboxInput,
-  InlineComboboxItem,
-} from './InlineCombobox';
-
-export function MentionElement(
-  props: PlateElementProps<TMentionElement> & {
-    prefix?: string;
-  }
-) {
-  const element = props.element;
-
-  const selected = useSelected();
-  const focused = useFocused();
-  const mounted = useMounted();
-  const readOnly = useReadOnly();
-
-  return (
-    <PlateElement
-      {...props}
-      className={cn(
-        'bg-muted inline-block rounded px-1.5 py-0.5 align-baseline text-sm font-medium',
-        !readOnly && 'cursor-pointer',
-        selected && focused && 'ring-ring ring-2',
-        element.children[0][KEYS.bold] === true && 'font-semibold',
-        element.children[0][KEYS.italic] === true && 'italic',
-        element.children[0][KEYS.underline] === true && 'underline'
-      )}
-      attributes={{
-        ...props.attributes,
-        contentEditable: false,
-        'data-slate-value': element.value,
-        draggable: true,
-      }}
-    >
-      {mounted && IS_APPLE ? (
-        // Mac OS IME https://github.com/ianstormtaylor/slate/issues/3490
-        <React.Fragment>
-          {props.children}
-          {props.prefix}
-          {element.value}
-        </React.Fragment>
-      ) : (
-        // Others like Android https://github.com/ianstormtaylor/slate/pull/5360
-        <React.Fragment>
-          {props.prefix}
-          {element.value}
-          {props.children}
-        </React.Fragment>
-      )}
-    </PlateElement>
-  );
-}
-
-const onSelectItem = getMentionOnSelectItem();
-
-export function MentionInputElement(props: PlateElementProps<TComboboxInputElement>) {
-  const { editor, element } = props;
-  const [search, setSearch] = React.useState('');
-
-  return (
-    <PlateElement {...props} as="span">
-      <InlineCombobox
-        value={search}
-        element={element}
-        setValue={setSearch}
-        showTrigger={false}
-        trigger="@"
-      >
-        <span className="bg-muted ring-ring inline-block rounded px-1.5 py-0.5 align-baseline text-sm focus-within:ring-2">
-          <InlineComboboxInput />
-        </span>
-
-        <InlineComboboxContent className="my-1.5">
-          <InlineComboboxEmpty>No results</InlineComboboxEmpty>
-
-          <InlineComboboxGroup>
-            {MENTIONABLES.map((item) => (
-              <InlineComboboxItem
-                key={item.key}
-                value={item.text}
-                onClick={() => onSelectItem(editor, item, search)}
-              >
-                {item.text}
-              </InlineComboboxItem>
-            ))}
-          </InlineComboboxGroup>
-        </InlineComboboxContent>
-      </InlineCombobox>
-
-      {props.children}
-    </PlateElement>
-  );
-}
-
-const MENTIONABLES = [
-  { key: '0', text: 'Aayla Secura' },
-  { key: '1', text: 'Adi Gallia' },
-  {
-    key: '2',
-    text: 'Admiral Dodd Rancit',
-  },
-  {
-    key: '3',
-    text: 'Admiral Firmus Piett',
-  },
-  {
-    key: '4',
-    text: 'Admiral Gial Ackbar',
-  },
-  { key: '5', text: 'Admiral Ozzel' },
-  { key: '6', text: 'Admiral Raddus' },
-  {
-    key: '7',
-    text: 'Admiral Terrinald Screed',
-  },
-  { key: '8', text: 'Admiral Trench' },
-  {
-    key: '9',
-    text: 'Admiral U.O. Statura',
-  },
-  { key: '10', text: 'Agen Kolar' },
-  { key: '11', text: 'Agent Kallus' },
-  {
-    key: '12',
-    text: 'Aiolin and Morit Astarte',
-  },
-  { key: '13', text: 'Aks Moe' },
-  { key: '14', text: 'Almec' },
-  { key: '15', text: 'Alton Kastle' },
-  { key: '16', text: 'Amee' },
-  { key: '17', text: 'AP-5' },
-  { key: '18', text: 'Armitage Hux' },
-  { key: '19', text: 'Artoo' },
-  { key: '20', text: 'Arvel Crynyd' },
-  { key: '21', text: 'Asajj Ventress' },
-  { key: '22', text: 'Aurra Sing' },
-  { key: '23', text: 'AZI-3' },
-  { key: '24', text: 'Bala-Tik' },
-  { key: '25', text: 'Barada' },
-  { key: '26', text: 'Bargwill Tomder' },
-  { key: '27', text: 'Baron Papanoida' },
-  { key: '28', text: 'Barriss Offee' },
-  { key: '29', text: 'Baze Malbus' },
-  { key: '30', text: 'Bazine Netal' },
-  { key: '31', text: 'BB-8' },
-  { key: '32', text: 'BB-9E' },
-  { key: '33', text: 'Ben Quadinaros' },
-  { key: '34', text: 'Berch Teller' },
-  { key: '35', text: 'Beru Lars' },
-  { key: '36', text: 'Bib Fortuna' },
-  {
-    key: '37',
-    text: 'Biggs Darklighter',
-  },
-  { key: '38', text: 'Black Krrsantan' },
-  { key: '39', text: 'Bo-Katan Kryze' },
-  { key: '40', text: 'Boba Fett' },
-  { key: '41', text: 'Bobbajo' },
-  { key: '42', text: 'Bodhi Rook' },
-  { key: '43', text: 'Borvo the Hutt' },
-  { key: '44', text: 'Boss Nass' },
-  { key: '45', text: 'Bossk' },
-  {
-    key: '46',
-    text: 'Breha Antilles-Organa',
-  },
-  { key: '47', text: 'Bren Derlin' },
-  { key: '48', text: 'Brendol Hux' },
-  { key: '49', text: 'BT-1' },
-];

apps/web/src/components/ui/report/plugins/markdown-kit/metric-serializer.ts

@@ -25,7 +25,7 @@ export const metricSerializer: MetricMdNode = {
 
     return {
       type: 'html',
-      value: `<metric metricId="${metricId}" versionNumber="${node.versionNumber}" width="${hasWidth ? width : '100%'}" caption="${captionText}"></metric>`,
+      value: `<metric metricId="${metricId}" versionNumber="${node.versionNumber || ''}" width="${hasWidth ? width : '100%'}" caption="${captionText}"></metric>`,
     };
   },
   deserialize: (node): MetricElement => {

apps/web/src/components/ui/report/plugins/markdown-kit/platejs-conversion.test.ts

@@ -271,8 +271,7 @@ Here's an unordered list:
   it('callout and a metric', async () => {
     const markdown = `<metric metricId="33af38a8-c40f-437d-98ed-1ec78ce35232" width="100%" caption=""></metric>
 
-<callout icon="💡">Testing123
-</callout>`;
+<callout icon="💡">Testing123</callout>`;
     const elements = await markdownToPlatejs(editor, markdown);
     expect(elements).toBeDefined();
     const firstElement = elements[0];
@@ -1344,9 +1343,53 @@ describe('platejsToMarkdown', () => {
     const markdownFromPlatejs = await platejsToMarkdown(editor, elements);
     expect(markdownFromPlatejs).toBeDefined();
     expect(markdownFromPlatejs).toContain(
-      '<metric metricId="1234" versionNumber="undefined" width="100%" caption="This is a caption.. AND IT REALLY WORKS!"></metric>'
+      '<metric metricId="1234" versionNumber="" width="100%" caption="This is a caption.. AND IT REALLY WORKS!"></metric>'
     );
   });
+
+  it('two metrics', async () => {
+    const elements: Value = [
+      {
+        type: 'metric',
+        children: [
+          {
+            text: '',
+          },
+        ],
+        metricId: 'nate-rulez',
+        caption: [
+          {
+            text: 'Cool',
+          },
+        ],
+        id: 'nate-rulez',
+      },
+      {
+        type: 'metric',
+        children: [
+          {
+            text: '',
+          },
+        ],
+        metricId: 'wells-droolz',
+        caption: [
+          {
+            text: 'Wow',
+          },
+        ],
+        id: 'wells-droolz',
+      },
+    ];
+    const markdownFromPlatejs = await platejsToMarkdown(editor, elements);
+    expect(markdownFromPlatejs).toBeDefined();
+    expect(markdownFromPlatejs).toContain(
+      '<metric metricId="nate-rulez" versionNumber="" width="100%" caption="Cool"></metric>'
+    );
+    expect(markdownFromPlatejs).toContain(
+      '<metric metricId="wells-droolz" versionNumber="" width="100%" caption="Wow"></metric>'
+    );
+    expect(markdownFromPlatejs).not.toContain('\\metric');
+  });
 });
 
 describe('platejs to markdown and back to platejs', () => {

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

@@ -34,7 +34,6 @@ import { BaseIndentPlugin } from '@platejs/indent';
 import { BaseColumnItemPlugin, BaseColumnPlugin } from '@platejs/layout';
 import { BaseLinkPlugin } from '@platejs/link';
 import { BaseListPlugin } from '@platejs/list';
-import { BaseEquationPlugin, BaseInlineEquationPlugin } from '@platejs/math';
 import {
   BaseAudioPlugin,
   BaseFilePlugin,
@@ -51,8 +50,9 @@ import {
 } from '@platejs/table';
 import { BaseTocPlugin } from '@platejs/toc';
 import { BaseTogglePlugin } from '@platejs/toggle';
-import { createSlateEditor, KEYS } from 'platejs';
+import { KEYS } from 'platejs';
 import { createPlateEditor } from 'platejs/react';
+import { EditorKit } from '../../editor-kit';
 import { MarkdownKit } from './markdown-kit';
 
 export const BaseTableKit = [
@@ -118,6 +118,10 @@ const serverNode = [
   }),
 ];
 
-export const SERVER_EDITOR = createPlateEditor({
+export const SERVER_EDITOR_OLD = createPlateEditor({
   plugins: serverNode,
 });
+
+export const SERVER_EDITOR = createPlateEditor({
+  plugins: EditorKit({ scrollAreaRef: undefined, mode: 'default' }),
+});

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

@@ -1,5 +0,0 @@
-import { BaseMentionPlugin } from '@platejs/mention';
-
-import { MentionElementStatic } from '../elements/MentionNodeStatic';
-
-export const BaseMentionKit = [BaseMentionPlugin.withComponent(MentionElementStatic)];

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

@@ -1,9 +0,0 @@
-import { MentionInputPlugin, MentionPlugin } from '@platejs/mention/react';
-import { MentionElement, MentionInputElement } from '../elements/MentionNode';
-
-export const MentionKit = [
-  MentionPlugin.configure({
-    options: { triggerPreviousCharPattern: /^$|^[\s"']$/ },
-  }).withComponent(MentionElement),
-  MentionInputPlugin.withComponent(MentionInputElement),
-];

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

@@ -31,12 +31,7 @@ export const useReportEditor = ({
       filteredKeys.push(FIXED_TOOLBAR_KIT_KEY);
     }
 
-    return [
-      ...EditorKit({ scrollAreaRef }),
-      GlobalVariablePlugin.configure({
-        options: { mode },
-      }),
-    ].filter((p) => !filteredKeys.includes(p.key));
+    return EditorKit({ scrollAreaRef, mode }).filter((p) => !filteredKeys.includes(p.key));
   }, []);
 
   const editor = usePlateEditor({