Inline markdown in editor (#1442)

* add inline markdown in editor

* send markdown re-generative data in tags

* enable vscode format on save

* fix match italic and diff order

* prevent formatting in code block

* make code md rule highest

* improve inline markdown parsing

* add comment

* improve code logic
This commit is contained in:
Ajay Bura 2023-10-09 22:26:54 +11:00 committed by GitHub
parent 60b5b5d312
commit 5940cf24a0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 237 additions and 18 deletions

View file

@ -108,6 +108,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
({ editor, roomViewRef, roomId }, ref) => {
const mx = useMatrixClient();
const room = mx.getRoom(roomId);
const [isMarkdown] = useSetting(settingsAtom, 'isMarkdown');
const [msgDraft, setMsgDraft] = useAtom(roomIdToMsgDraftAtomFamily(roomId));
const [replyDraft, setReplyDraft] = useAtom(roomIdToReplyDraftAtomFamily(roomId));
@ -251,7 +252,12 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
uploadBoardHandlers.current?.handleSend();
const plainText = toPlainText(editor.children).trim();
const customHtml = trimCustomHtml(toMatrixCustomHTML(editor.children));
const customHtml = trimCustomHtml(
toMatrixCustomHTML(editor.children, {
allowTextFormatting: true,
allowMarkdown: isMarkdown,
})
);
if (plainText === '') return;
@ -288,7 +294,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
resetEditorHistory(editor);
setReplyDraft();
sendTypingStatus(false);
}, [mx, roomId, editor, replyDraft, sendTypingStatus, setReplyDraft]);
}, [mx, roomId, editor, replyDraft, sendTypingStatus, setReplyDraft, isMarkdown]);
const handleKeyDown: KeyboardEventHandler = useCallback(
(evt) => {

View file

@ -6,7 +6,7 @@ import cons from '../../../client/state/cons';
import settings from '../../../client/state/settings';
import navigation from '../../../client/state/navigation';
import {
toggleSystemTheme, toggleMarkdown,
toggleSystemTheme,
toggleNotifications, toggleNotificationSounds,
} from '../../../client/action/settings';
import { usePermission } from '../../hooks/usePermission';
@ -52,6 +52,7 @@ function AppearanceSection() {
const [messageLayout, setMessageLayout] = useSetting(settingsAtom, 'messageLayout');
const [messageSpacing, setMessageSpacing] = useSetting(settingsAtom, 'messageSpacing');
const [useSystemEmoji, setUseSystemEmoji] = useSetting(settingsAtom, 'useSystemEmoji');
const [isMarkdown, setIsMarkdown] = useSetting(settingsAtom, 'isMarkdown');
const [hideMembershipEvents, setHideMembershipEvents] = useSetting(settingsAtom, 'hideMembershipEvents');
const [hideNickAvatarEvents, setHideNickAvatarEvents] = useSetting(settingsAtom, 'hideNickAvatarEvents');
const [mediaAutoLoad, setMediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
@ -138,14 +139,14 @@ function AppearanceSection() {
}
/>
<SettingTile
title="Markdown formatting"
title="Inline Markdown formatting"
options={(
<Toggle
isActive={settings.isMarkdown}
onToggle={() => { toggleMarkdown(); updateState({}); }}
isActive={isMarkdown}
onToggle={() => setIsMarkdown(!isMarkdown) }
/>
)}
content={<Text variant="b3">Format messages with markdown syntax before sending.</Text>}
content={<Text variant="b3">Format messages with inline markdown syntax before sending.</Text>}
/>
<SettingTile
title="Hide membership events"