0 && '!rounded-bs-[0]'
)}
id={id}
>
{t('drop_files_here_to_upload', 'Drop your files here to upload')}
{
if (editorRef?.current?.editor?.isFocused) {
return;
}
editorRef?.current?.editor?.commands?.focus('end');
}}
/>
{
if (editorRef?.current?.editor?.isFocused) {
return;
}
editorRef?.current?.editor?.commands?.focus('end');
}}
/>
{setImages && (
0 && comments === 'no-media'}
allData={allValues}
text={valueWithoutHtml}
label={t('attachments', 'Attachments')}
description=""
value={props.pictures}
dummy={dummy}
name="image"
information={
0}
chars={chars}
totalChars={valueWithoutHtml.length}
totalAllowedChars={props.totalChars}
text={valueWithoutHtml}
/>
}
toolBar={
{editorType !== 'none' && (
<>
)}
{(editorType === 'markdown' || editorType === 'html') &&
identifier !== 'telegram' && (
<>
)}
setEmojiPickerOpen(!emojiPickerOpen)}
>
1
? 'top-[35px]'
: 'bottom-[35px]'
)}
>
{
addText(e.emoji);
setEmojiPickerOpen(false);
}}
open={emojiPickerOpen}
/>
}
onChange={(value) => {
setImages(value.target.value);
}}
onOpen={() => {}}
onClose={() => {}}
/>
)}
{childButton}
);
};
export const OnlyEditor = forwardRef<
any,
{
editorType: 'none' | 'normal' | 'markdown' | 'html';
value: string;
onChange: (value: string) => void;
paste?: (event: ClipboardEvent | File[]) => void;
}
>(({ editorType, value, onChange, paste }, ref) => {
const t = useT();
const fetch = useFetch();
const { internal } = useLaunchStore(
useShallow((state) => ({
internal: state.internal.find((p) => p.integration.id === state.current),
}))
);
const loadList = useCallback(
async (query: string) => {
if (query.length < 2) {
return [];
}
if (!internal?.integration.id) {
return [];
}
try {
const load = await fetch('/integrations/mentions', {
method: 'POST',
body: JSON.stringify({
name: 'mention',
id: internal.integration.id,
data: { query },
}),
});
const result = await load.json();
return result;
} catch (error) {
console.error('Error loading mentions:', error);
return [];
}
},
[internal, fetch]
);
const editor = useEditor({
extensions: [
Document,
Paragraph,
Text,
Underline,
Bold,
InterceptBoldShortcut,
InterceptUnderlineShortcut,
BulletList,
ListItem,
Placeholder.configure({
placeholder: t('write_something', 'Write something …'),
emptyEditorClass: 'is-editor-empty',
}),
...(editorType === 'html' || editorType === 'markdown'
? [
Link.configure({
openOnClick: false,
autolink: true,
defaultProtocol: 'https',
protocols: ['http', 'https'],
isAllowedUri: (url, ctx) => {
try {
// prevent transforming plain emails like foo@bar.com into links
const trimmed = String(url).trim();
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (emailPattern.test(trimmed)) {
return false;
}
// construct URL
const parsedUrl = url.includes(':')
? new URL(url)
: new URL(`${ctx.defaultProtocol}://${url}`);
// use default validation
if (!ctx.defaultValidate(parsedUrl.href)) {
return false;
}
// disallowed protocols
const disallowedProtocols = ['ftp', 'file', 'mailto'];
const protocol = parsedUrl.protocol.replace(':', '');
if (disallowedProtocols.includes(protocol)) {
return false;
}
// only allow protocols specified in ctx.protocols
const allowedProtocols = ctx.protocols.map((p) =>
typeof p === 'string' ? p : p.scheme
);
if (!allowedProtocols.includes(protocol)) {
return false;
}
// all checks have passed
return true;
} catch {
return false;
}
},
shouldAutoLink: (url) => {
try {
// prevent auto-linking of plain emails like foo@bar.com
const trimmed = String(url).trim();
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (emailPattern.test(trimmed)) {
return false;
}
// construct URL
const parsedUrl = url.includes(':')
? new URL(url)
: new URL(`https://${url}`);
// only auto-link if the domain is not in the disallowed list
const disallowedDomains = [
'example-no-autolink.com',
'another-no-autolink.com',
];
const domain = parsedUrl.hostname;
return !disallowedDomains.includes(domain);
} catch {
return false;
}
},
}),
]
: []),
...(internal?.integration?.id
? [
Mention.configure({
HTMLAttributes: {
class: 'mention',
},
renderHTML({ options, node }) {
return [
'span',
mergeAttributes(options.HTMLAttributes, {
'data-mention-id': node.attrs.id || '',
'data-mention-label': node.attrs.label || '',
}),
`@${node.attrs.label}`,
];
},
suggestion: suggestion(loadList),
}),
]
: []),
...(editorType === 'html' || editorType === 'markdown'
? [
Heading.configure({
levels: [1, 2, 3],
}),
]
: []),
History.configure({
depth: 100, // default is 100
newGroupDelay: 100, // default is 500ms
}),
],
content: value || '',
shouldRerenderOnTransaction: true,
immediatelyRender: false,
// @ts-ignore
onPaste: paste,
onUpdate: (innerProps) => {
onChange?.(innerProps.editor.getHTML());
},
});
useImperativeHandle(ref, () => ({
editor,
}));
return
;
});