diff --git a/apps/web/src/components/ui/report/editor-base-kit.tsx b/apps/web/src/components/ui/report/editor-base-kit.tsx index da1e3ea5c..e352e07ae 100644 --- a/apps/web/src/components/ui/report/editor-base-kit.tsx +++ b/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, diff --git a/apps/web/src/components/ui/report/editor-kit.ts b/apps/web/src/components/ui/report/editor-kit.ts index 9e68329fb..3a21bee73 100644 --- a/apps/web/src/components/ui/report/editor-kit.ts +++ b/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; + 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 }, + }), ]; diff --git a/apps/web/src/components/ui/report/elements/MentionNode.tsx b/apps/web/src/components/ui/report/elements/MentionNode.tsx deleted file mode 100644 index 277ede3cf..000000000 --- a/apps/web/src/components/ui/report/elements/MentionNode.tsx +++ /dev/null @@ -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 & { - prefix?: string; - } -) { - const element = props.element; - - const selected = useSelected(); - const focused = useFocused(); - const mounted = useMounted(); - const readOnly = useReadOnly(); - - return ( - - {mounted && IS_APPLE ? ( - // Mac OS IME https://github.com/ianstormtaylor/slate/issues/3490 - - {props.children} - {props.prefix} - {element.value} - - ) : ( - // Others like Android https://github.com/ianstormtaylor/slate/pull/5360 - - {props.prefix} - {element.value} - {props.children} - - )} - - ); -} - -const onSelectItem = getMentionOnSelectItem(); - -export function MentionInputElement(props: PlateElementProps) { - const { editor, element } = props; - const [search, setSearch] = React.useState(''); - - return ( - - - - - - - - No results - - - {MENTIONABLES.map((item) => ( - onSelectItem(editor, item, search)} - > - {item.text} - - ))} - - - - - {props.children} - - ); -} - -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' }, -]; diff --git a/apps/web/src/components/ui/report/plugins/markdown-kit/metric-serializer.ts b/apps/web/src/components/ui/report/plugins/markdown-kit/metric-serializer.ts index c7c8819b0..1cdeda3e9 100644 --- a/apps/web/src/components/ui/report/plugins/markdown-kit/metric-serializer.ts +++ b/apps/web/src/components/ui/report/plugins/markdown-kit/metric-serializer.ts @@ -25,7 +25,7 @@ export const metricSerializer: MetricMdNode = { return { type: 'html', - value: ``, + value: ``, }; }, deserialize: (node): MetricElement => { diff --git a/apps/web/src/components/ui/report/plugins/markdown-kit/platejs-conversion.test.ts b/apps/web/src/components/ui/report/plugins/markdown-kit/platejs-conversion.test.ts index 166010d65..723c673d9 100644 --- a/apps/web/src/components/ui/report/plugins/markdown-kit/platejs-conversion.test.ts +++ b/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 = ` -Testing123 -`; +Testing123`; 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( - '' + '' ); }); + + 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( + '' + ); + expect(markdownFromPlatejs).toContain( + '' + ); + expect(markdownFromPlatejs).not.toContain('\\metric'); + }); }); describe('platejs to markdown and back to platejs', () => { diff --git a/apps/web/src/components/ui/report/plugins/markdown-kit/server-editor.ts b/apps/web/src/components/ui/report/plugins/markdown-kit/server-editor.ts index d46972bda..906902a2c 100644 --- a/apps/web/src/components/ui/report/plugins/markdown-kit/server-editor.ts +++ b/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' }), +}); diff --git a/apps/web/src/components/ui/report/plugins/mention-base-kit.tsx b/apps/web/src/components/ui/report/plugins/mention-base-kit.tsx deleted file mode 100644 index 4b7669843..000000000 --- a/apps/web/src/components/ui/report/plugins/mention-base-kit.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { BaseMentionPlugin } from '@platejs/mention'; - -import { MentionElementStatic } from '../elements/MentionNodeStatic'; - -export const BaseMentionKit = [BaseMentionPlugin.withComponent(MentionElementStatic)]; diff --git a/apps/web/src/components/ui/report/plugins/mention-kit.tsx b/apps/web/src/components/ui/report/plugins/mention-kit.tsx deleted file mode 100644 index 7570291f0..000000000 --- a/apps/web/src/components/ui/report/plugins/mention-kit.tsx +++ /dev/null @@ -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), -]; diff --git a/apps/web/src/components/ui/report/useReportEditor.tsx b/apps/web/src/components/ui/report/useReportEditor.tsx index e824ed6ca..d6e614f4f 100644 --- a/apps/web/src/components/ui/report/useReportEditor.tsx +++ b/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({