Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Remove mention kit

This commit is contained in:
Nate Kelley 2025-09-22 10:03:27 -06:00
parent 3f2430327f
commit a396dc302e
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
9 changed files with 63 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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,

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

@ -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 },
}),
];

185
apps/web/src/components/ui/report/elements/MentionNode.tsx
View File

@ -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' },
];

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

@ -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 => {

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

@ -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', () => {

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

@ -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' }),
});

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

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

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

@ -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),
];

7
apps/web/src/components/ui/report/useReportEditor.tsx
View File

@ -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({