Merge branch 'dev' into update-actions

.github/renovate.json

@@ -1,8 +1,7 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
   "extends": [
-    "config:base",
-    ":dependencyDashboardApproval"
+    "config:base"
   ],
   "labels": [ "Dependencies" ],
   "packageRules": [
@@ -11,5 +10,6 @@
     }
   ],
   "lockFileMaintenance": { "enabled": true },
-  "dependencyDashboard": true
+  "dependencyDashboard": true,
+  "dependencyDashboardApproval": true
 }

.github/workflows/docker-pr.yml

@@ -9,6 +9,8 @@ on:
 jobs:
   docker-build:
     runs-on: ubuntu-latest
+    env:
+      PR_NUMBER: ${{github.event.number}}
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3.0.2

CONTRIBUTING.md

@@ -41,4 +41,4 @@ Also, we use [ESLint](https://eslint.org/) for clean and stylistically consisten
 ## Helpful links
 - [BEM methodology](http://getbem.com/introduction/)
 - [Atomic design](https://bradfrost.com/blog/post/atomic-web-design/)
-- [Matrix JavaScript SDK documentation](https://matrix-org.github.io/matrix-js-sdk/index.html)
+- [Matrix JavaScript SDK documentation](https://matrix-org.github.io/matrix-js-sdk/19.2.0/index.html)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cinny",
-  "version": "2.2.2",
+  "version": "2.1.3",
   "description": "Yet another matrix client",
   "main": "index.js",
   "engines": {
@@ -17,11 +17,11 @@
   "dependencies": {
     "@fontsource/inter": "4.5.12",
     "@fontsource/roboto": "4.5.8",
-    "@khanacademy/simple-markdown": "0.8.4",
+    "@khanacademy/simple-markdown": "0.8.3",
     "@matrix-org/olm": "3.2.12",
     "@tippyjs/react": "4.2.6",
     "babel-polyfill": "6.26.0",
-    "blurhash": "2.0.0",
+    "blurhash": "1.1.5",
     "browser-encrypt-attachment": "0.3.0",
     "dateformat": "5.0.3",
     "emojibase-data": "7.0.1",
@@ -30,9 +30,9 @@
     "formik": "2.2.9",
     "html-react-parser": "3.0.4",
     "katex": "0.16.2",
-    "linkify-html": "4.0.0",
-    "linkifyjs": "4.0.0",
-    "matrix-js-sdk": "20.0.0",
+    "linkify-html": "4.0.0-beta.5",
+    "linkifyjs": "4.0.0-beta.5",
+    "matrix-js-sdk": "19.4.0",
     "prop-types": "15.8.1",
     "react": "17.0.2",
     "react-autosize-textarea": "7.1.0",
@@ -42,13 +42,13 @@
     "react-dom": "17.0.2",
     "react-google-recaptcha": "2.1.0",
     "react-modal": "3.15.1",
-    "sanitize-html": "2.7.2",
+    "sanitize-html": "2.7.1",
     "tippy.js": "6.3.7",
     "twemoji": "14.0.2"
   },
   "devDependencies": {
-    "@babel/core": "7.19.1",
-    "@babel/preset-env": "7.19.1",
+    "@babel/core": "7.18.13",
+    "@babel/preset-env": "7.18.10",
     "@babel/preset-react": "7.18.6",
     "assert": "2.0.0",
     "babel-loader": "8.2.5",
@@ -58,18 +58,18 @@
     "copy-webpack-plugin": "11.0.0",
     "crypto-browserify": "3.12.0",
     "css-loader": "6.7.1",
-    "css-minimizer-webpack-plugin": "4.1.0",
-    "eslint": "8.24.0",
+    "css-minimizer-webpack-plugin": "4.0.0",
+    "eslint": "8.23.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-jsx-a11y": "6.6.1",
-    "eslint-plugin-react": "7.31.8",
+    "eslint-plugin-react": "7.31.1",
     "eslint-plugin-react-hooks": "4.6.0",
-    "html-loader": "4.2.0",
-    "html-webpack-plugin": "5.5.0",
+    "html-loader": "4.1.0",
+    "html-webpack-plugin": "5.3.1",
     "mini-css-extract-plugin": "2.6.1",
     "path-browserify": "1.0.1",
-    "sass": "1.55.0",
+    "sass": "1.54.5",
     "sass-loader": "13.0.2",
     "stream-browserify": "3.0.0",
     "style-loader": "3.3.1",
@@ -77,7 +77,7 @@
     "util": "0.12.4",
     "webpack": "5.74.0",
     "webpack-cli": "4.10.0",
-    "webpack-dev-server": "4.11.1",
-    "webpack-merge": "5.8.0"
+    "webpack-dev-server": "4.10.1",
+    "webpack-merge": "5.7.3"
   }
 }

src/app/atoms/math/Math.jsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import './Math.scss';
 
 import katex from 'katex';
 import 'katex/dist/katex.min.css';

src/app/atoms/math/Math.scss

@@ -1,3 +0,0 @@
-.katex-display {
-  margin: 0 !important;
-}

src/app/molecules/message/Message.jsx

@@ -8,9 +8,7 @@ import './Message.scss';
 import { twemojify } from '../../../util/twemojify';
 
 import initMatrix from '../../../client/initMatrix';
-import {
-  getUsername, getUsernameOfRoomMember, parseReply, trimHTMLReply,
-} from '../../../util/matrixUtil';
+import { getUsername, getUsernameOfRoomMember, parseReply } from '../../../util/matrixUtil';
 import colorMXID from '../../../util/colorMXID';
 import { getEventCords } from '../../../util/common';
 import { redactEvent, sendReaction } from '../../../client/action/roomTimeline';
@@ -40,7 +38,6 @@ import BinIC from '../../../../public/res/ic/outlined/bin.svg';
 
 import { confirmDialog } from '../confirm-dialog/ConfirmDialog';
 import { getBlobSafeMimeType } from '../../../util/mimetypes';
-import { html, plain } from '../../../util/markdown';
 
 function PlaceholderMessage() {
   return (
@@ -251,7 +248,7 @@ const MessageBody = React.memo(({
   if (!isCustomHTML) {
     // If this is a plaintext message, wrap it in a <p> element (automatically applying
     // white-space: pre-wrap) in order to preserve newlines
-    content = (<p className="message__body-plain">{content}</p>);
+    content = (<p>{content}</p>);
   }
 
   return (
@@ -300,12 +297,12 @@ function MessageEdit({ body, onSave, onCancel }) {
 
     if (e.key === 'Enter' && e.shiftKey === false) {
       e.preventDefault();
-      onSave(editInputRef.current.value, body);
+      onSave(editInputRef.current.value);
     }
   };
 
   return (
-    <form className="message__edit" onSubmit={(e) => { e.preventDefault(); onSave(editInputRef.current.value, body); }}>
+    <form className="message__edit" onSubmit={(e) => { e.preventDefault(); onSave(editInputRef.current.value); }}>
       <Input
         forwardRef={editInputRef}
         onKeyDown={handleKeyDown}
@@ -732,37 +729,36 @@ function Message({
   let { body } = content;
   const username = mEvent.sender ? getUsernameOfRoomMember(mEvent.sender) : getUsername(senderId);
   const avatarSrc = mEvent.sender?.getAvatarUrl(initMatrix.matrixClient.baseUrl, 36, 36, 'crop') ?? null;
-  let isCustomHTML = content.format === 'org.matrix.custom.html';
-  let customHTML = isCustomHTML ? content.formatted_body : null;
 
   const edit = useCallback(() => {
     setEdit(eventId);
   }, []);
   const reply = useCallback(() => {
-    replyTo(senderId, mEvent.getId(), body, customHTML);
-  }, [body, customHTML]);
+    replyTo(senderId, mEvent.getId(), body);
+  }, [body]);
 
+  if (body === undefined) return null;
   if (msgType === 'm.emote') className.push('message--type-emote');
 
+  let isCustomHTML = content.format === 'org.matrix.custom.html';
   const isEdited = roomTimeline ? editedTimeline.has(eventId) : false;
   const haveReactions = roomTimeline
     ? reactionTimeline.has(eventId) || !!mEvent.getServerAggregatedRelation('m.annotation')
     : false;
   const isReply = !!mEvent.replyEventId;
+  let customHTML = isCustomHTML ? content.formatted_body : null;
 
   if (isEdited) {
     const editedList = editedTimeline.get(eventId);
     const editedMEvent = editedList[editedList.length - 1];
     [body, isCustomHTML, customHTML] = getEditedBody(editedMEvent);
+    if (typeof body !== 'string') return null;
   }
 
   if (isReply) {
     body = parseReply(body)?.body ?? body;
-    customHTML = trimHTMLReply(customHTML);
   }
 
-  if (typeof body !== 'string') body = '';
-
   return (
     <div className={className.join(' ')}>
       {
@@ -803,11 +799,9 @@ function Message({
         )}
         {isEdit && (
           <MessageEdit
-            body={(customHTML
-              ? html(customHTML, { kind: 'edit', onlyPlain: true }).plain
-              : plain(body, { kind: 'edit', onlyPlain: true }).plain)}
-            onSave={(newBody, oldBody) => {
-              if (newBody !== oldBody) {
+            body={body}
+            onSave={(newBody) => {
+              if (newBody !== body) {
                 initMatrix.roomsInput.sendEditedMessage(roomId, mEvent, newBody);
               }
               cancelEdit();

src/app/molecules/message/Message.scss

@@ -163,7 +163,7 @@
 .message__body {
   word-break: break-word;
 
-  & > .text > .message__body-plain {
+  & > .text > * {
     white-space: pre-wrap;
   }
 
@@ -174,8 +174,8 @@
     white-space: initial !important;
   }
 
-  & > .text > p + p {
-    margin-top: var(--sp-normal);
+  & p:not(:last-child) {
+    margin-bottom: var(--sp-normal);
   }
 
   & span[data-mx-pill] {

src/app/organisms/navigation/DrawerHeader.jsx

@@ -57,7 +57,7 @@ export function HomeSpaceOptions({ spaceId, afterOptionSelect }) {
           iconSrc={HashGlobeIC}
           onClick={() => { afterOptionSelect(); openPublicRooms(); }}
         >
-          Explore public rooms
+          Join public room
         </MenuItem>
       )}
       { !spaceId && (

src/app/organisms/navigation/Home.jsx

@@ -25,7 +25,7 @@ function Home({ spaceId }) {
   let directIds = [];
 
   if (spaceId) {
-    const spaceChildIds = roomList.getSpaceChildren(spaceId) ?? [];
+    const spaceChildIds = roomList.getSpaceChildren(spaceId);
     spaceIds = spaceChildIds.filter((roomId) => spaces.has(roomId));
     roomIds = spaceChildIds.filter((roomId) => rooms.has(roomId));
     directIds = spaceChildIds.filter((roomId) => directs.has(roomId));

src/app/organisms/profile-editor/ProfileEditor.jsx

@@ -20,6 +20,7 @@ function ProfileEditor({ userId }) {
   const [isEditing, setIsEditing] = useState(false);
   const mx = initMatrix.matrixClient;
   const user = mx.getUser(mx.getUserId());
+  const fallbackUsername = userId.match(/^@?(\S+):(\S+)$/)[1];
 
   const displayNameRef = useRef(null);
   const [avatarSrc, setAvatarSrc] = useState(user.avatarUrl ? mx.mxcUrlToHttp(user.avatarUrl, 80, 80, 'crop') : null);
@@ -95,7 +96,7 @@ function ProfileEditor({ userId }) {
   const renderInfo = () => (
     <div className="profile-editor__info" style={{ marginBottom: avatarSrc ? '24px' : '0' }}>
       <div>
-        <Text variant="h2" primary weight="medium">{twemojify(username) ?? userId}</Text>
+        <Text variant="h2" primary weight="medium">{twemojify(username) ?? fallbackUsername}</Text>
         <IconButton
           src={PencilIC}
           size="extra-small"
@@ -110,7 +111,7 @@ function ProfileEditor({ userId }) {
   return (
     <div className="profile-editor">
       <ImageUpload
-        text={username ?? userId}
+        text={username ?? fallbackUsername}
         bgColor={colorMXID(userId)}
         imageSrc={avatarSrc}
         onUpload={handleAvatarUpload}

src/app/organisms/room/RoomViewInput.jsx

@@ -30,6 +30,7 @@ import StickerIC from '../../../../public/res/ic/outlined/sticker.svg';
 import ShieldIC from '../../../../public/res/ic/outlined/shield.svg';
 import VLCIC from '../../../../public/res/ic/outlined/vlc.svg';
 import VolumeFullIC from '../../../../public/res/ic/outlined/volume-full.svg';
+import MarkdownIC from '../../../../public/res/ic/outlined/markdown.svg';
 import FileIC from '../../../../public/res/ic/outlined/file.svg';
 import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
 
@@ -43,6 +44,7 @@ function RoomViewInput({
   roomId, roomTimeline, viewEvent,
 }) {
   const [attachment, setAttachment] = useState(null);
+  const [isMarkdown, setIsMarkdown] = useState(settings.isMarkdown);
   const [replyTo, setReplyTo] = useState(null);
 
   const textAreaRef = useRef(null);
@@ -61,9 +63,11 @@ function RoomViewInput({
   }
 
   useEffect(() => {
+    settings.on(cons.events.settings.MARKDOWN_TOGGLED, setIsMarkdown);
     roomsInput.on(cons.events.roomsInput.ATTACHMENT_SET, setAttachment);
     viewEvent.on('focus_msg_input', requestFocusInput);
     return () => {
+      settings.removeListener(cons.events.settings.MARKDOWN_TOGGLED, setIsMarkdown);
       roomsInput.removeListener(cons.events.roomsInput.ATTACHMENT_SET, setAttachment);
       viewEvent.removeListener('focus_msg_input', requestFocusInput);
     };
@@ -143,11 +147,9 @@ function RoomViewInput({
     textAreaRef.current.focus();
   }
 
-  function setUpReply(userId, eventId, body, formattedBody) {
+  function setUpReply(userId, eventId, body) {
     setReplyTo({ userId, eventId, body });
-    roomsInput.setReplyTo(roomId, {
-      userId, eventId, body, formattedBody,
-    });
+    roomsInput.setReplyTo(roomId, { userId, eventId, body });
     focusInput();
   }
 
@@ -183,10 +185,7 @@ function RoomViewInput({
     };
   }, [roomId]);
 
-  const sendBody = async (body, options) => {
-    const opt = options ?? {};
-    if (!opt.msgType) opt.msgType = 'm.text';
-    if (typeof opt.autoMarkdown !== 'boolean') opt.autoMarkdown = true;
+  const sendBody = async (body, msgType = 'm.text') => {
     if (roomsInput.isSending(roomId)) return;
     sendIsTyping(false);
 
@@ -196,7 +195,7 @@ function RoomViewInput({
     }
     textAreaRef.current.disabled = true;
     textAreaRef.current.style.cursor = 'not-allowed';
-    await roomsInput.sendInput(roomId, opt);
+    await roomsInput.sendInput(roomId, msgType);
     textAreaRef.current.disabled = false;
     textAreaRef.current.style.cursor = 'unset';
     focusInput();
@@ -214,8 +213,8 @@ function RoomViewInput({
       confirmDialog('Invalid Command', `"${cmdName}" is not a valid command.`, 'Alright');
       return;
     }
-    if (['me', 'shrug', 'plain'].includes(cmdName)) {
-      commands[cmdName].exe(roomId, cmdData, sendBody);
+    if (['me', 'shrug'].includes(cmdName)) {
+      commands[cmdName].exe(roomId, cmdData, (message, msgType) => sendBody(message, msgType));
       return;
     }
     commands[cmdName].exe(roomId, cmdData);
@@ -231,7 +230,7 @@ function RoomViewInput({
       return;
     }
     if (msgBody === '' && attachment === null) return;
-    sendBody(msgBody);
+    sendBody(msgBody, 'm.text');
   };
 
   const handleSendSticker = async (data) => {
@@ -380,6 +379,7 @@ function RoomViewInput({
               />
             </Text>
           </ScrollView>
+          {isMarkdown && <RawIcon size="extra-small" src={MarkdownIC} />}
         </div>
         <div ref={rightOptionsRef} className="room-input__option-container">
           <IconButton

src/app/organisms/room/commands.jsx

@@ -38,7 +38,7 @@ const commands = {
     exe: (roomId, data, onSuccess) => {
       const body = data.trim();
       if (body === '') return;
-      onSuccess(body, { msgType: 'm.emote' });
+      onSuccess(body, 'm.emote');
     },
   },
   shrug: {
@@ -46,18 +46,9 @@ const commands = {
     description: 'Send ¯\\_(ツ)_/¯ as message',
     exe: (roomId, data, onSuccess) => onSuccess(
       `¯\\_(ツ)_/¯${data.trim() !== '' ? ` ${data}` : ''}`,
-      { msgType: 'm.text' },
+      'm.text',
     ),
   },
-  plain: {
-    name: 'plain',
-    description: 'Send plain text message',
-    exe: (roomId, data, onSuccess) => {
-      const body = data.trim();
-      if (body === '') return;
-      onSuccess(body, { msgType: 'm.text', autoMarkdown: false });
-    },
-  },
   help: {
     name: 'help',
     description: 'View all commands',
@@ -66,7 +57,7 @@ const commands = {
   },
   startdm: {
     name: 'startdm',
-    description: 'Start direct message with user. Example: /startdm userId1',
+    description: 'Start DM with user. Example: /startdm userId1 userId2',
     exe: async (roomId, data) => {
       const mx = initMatrix.matrixClient;
       const rawIds = data.split(' ');
@@ -87,7 +78,7 @@ const commands = {
   },
   join: {
     name: 'join',
-    description: 'Join room with address. Example: /join address1 address2',
+    description: 'Join room with alias. Example: /join alias1 alias2',
     exe: (roomId, data) => {
       const rawIds = data.split(' ');
       const roomIds = rawIds.filter((id) => id.match(ROOM_ID_ALIAS_REG));
@@ -168,7 +159,7 @@ const commands = {
   },
   myroomnick: {
     name: 'myroomnick',
-    description: 'Change nick in current room.',
+    description: 'Change my room nick',
     exe: (roomId, data) => {
       const nick = data.trim();
       if (nick === '') return;
@@ -177,7 +168,7 @@ const commands = {
   },
   myroomavatar: {
     name: 'myroomavatar',
-    description: 'Change profile picture in current room. Example /myroomavatar mxc://xyzabc',
+    description: 'Change my room avatar. Example /myroomavatar mxc://xyzabc',
     exe: (roomId, data) => {
       if (data.match(MXC_REG)) {
         roomActions.setMyRoomAvatar(roomId, data);

src/app/organisms/settings/Settings.jsx

@@ -9,6 +9,7 @@ import {
   toggleSystemTheme, toggleMarkdown, toggleMembershipEvents, toggleNickAvatarEvents,
   toggleNotifications, toggleNotificationSounds,
 } from '../../../client/action/settings';
+import logout from '../../../client/action/logout';
 import { usePermission } from '../../hooks/usePermission';
 
 import Text from '../../atoms/text/Text';
@@ -238,7 +239,6 @@ function AboutSection() {
             <div className="settings-about__btns">
               <Button onClick={() => window.open('https://github.com/ajbura/cinny')}>Source code</Button>
               <Button onClick={() => window.open('https://cinny.in/#sponsor')}>Support</Button>
-              <Button onClick={() => initMatrix.clearCacheAndReload()} variant="danger">Clear cache & reload</Button>
             </div>
           </div>
         </div>
@@ -327,7 +327,7 @@ function Settings() {
   const handleTabChange = (tabItem) => setSelectedTab(tabItem);
   const handleLogout = async () => {
     if (await confirmDialog('Logout', 'Are you sure that you want to logout your session?', 'Logout', 'danger')) {
-      initMatrix.logout();
+      logout();
     }
   };
 

src/app/organisms/view-source/ViewSource.scss

@@ -5,8 +5,6 @@
 
   & pre {
     padding: var(--sp-extra-tight);
-    white-space: pre-wrap;
-    word-break: break-all;
   }
 
   &__card {

src/app/templates/client/Client.jsx

@@ -7,21 +7,18 @@ import { initRoomListListener } from '../../../client/event/roomList';
 import Text from '../../atoms/text/Text';
 import Spinner from '../../atoms/spinner/Spinner';
 import Navigation from '../../organisms/navigation/Navigation';
-import ContextMenu, { MenuItem } from '../../atoms/context-menu/ContextMenu';
-import IconButton from '../../atoms/button/IconButton';
 import ReusableContextMenu from '../../atoms/context-menu/ReusableContextMenu';
 import Room from '../../organisms/room/Room';
 import Windows from '../../organisms/pw/Windows';
 import Dialogs from '../../organisms/pw/Dialogs';
 import EmojiBoardOpener from '../../organisms/emoji-board/EmojiBoardOpener';
+import logout from '../../../client/action/logout';
 
 import initMatrix from '../../../client/initMatrix';
 import navigation from '../../../client/state/navigation';
 import cons from '../../../client/state/cons';
 import DragDrop from '../../organisms/drag-drop/DragDrop';
 
-import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
-
 function Client() {
   const [isLoading, changeLoading] = useState(true);
   const [loadingMsg, setLoadingMsg] = useState('Heating up');
@@ -77,20 +74,9 @@ function Client() {
   if (isLoading) {
     return (
       <div className="loading-display">
-        <div className="loading__menu">
-          <ContextMenu
-            placement="bottom"
-            content={(
-              <>
-                <MenuItem onClick={() => initMatrix.clearCacheAndReload()}>
-                  Clear cache & reload
-                </MenuItem>
-                <MenuItem onClick={() => initMatrix.logout()}>Logout</MenuItem>
-              </>
-            )}
-            render={(toggle) => <IconButton size="extra-small" onClick={toggle} src={VerticalMenuIC} />}
-          />
-        </div>
+        <button className="loading__logout" onClick={logout} type="button">
+          <Text variant="b3">Logout</Text>
+        </button>
         <Spinner />
         <Text className="loading__message" variant="b2">{loadingMsg}</Text>
 

src/app/templates/client/Client.scss

@@ -45,12 +45,12 @@
   position: absolute;
   bottom: var(--sp-normal);
 }
-.loading__menu {
+.loading__logout {
   position: absolute;
-  top: var(--sp-extra-tight);
+  bottom: var(--sp-extra-tight);
   right: var(--sp-extra-tight);
   cursor: pointer;
-  .context-menu__item .text {
-    margin: 0 !important;
+  .text {
+    color: var(--tc-link);
   }
 }

src/client/action/logout.js

@@ -0,0 +1,16 @@
+import initMatrix from '../initMatrix';
+
+async function logout() {
+  const mx = initMatrix.matrixClient;
+  mx.stopClient();
+  try {
+    await mx.logout();
+  } catch {
+    // ignore if failed to logout
+  }
+  mx.clearStores();
+  window.localStorage.clear();
+  window.location.reload();
+}
+
+export default logout;

src/client/action/navigation.js

@@ -139,13 +139,12 @@ export function openViewSource(event) {
   });
 }
 
-export function replyTo(userId, eventId, body, formattedBody) {
+export function replyTo(userId, eventId, body) {
   appDispatcher.dispatch({
     type: cons.actions.navigation.CLICK_REPLY_TO,
     userId,
     eventId,
     body,
-    formattedBody,
   });
 }
 

src/client/initMatrix.js

@@ -98,32 +98,13 @@ class InitMatrix extends EventEmitter {
   }
 
   listenEvents() {
-    this.matrixClient.on('Session.logged_out', async () => {
+    this.matrixClient.on('Session.logged_out', () => {
       this.matrixClient.stopClient();
-      await this.matrixClient.clearStores();
+      this.matrixClient.clearStores();
       window.localStorage.clear();
       window.location.reload();
     });
   }
-
-  async logout() {
-    this.matrixClient.stopClient();
-    try {
-      await this.matrixClient.logout();
-    } catch {
-      // ignore if failed to logout
-    }
-    await this.matrixClient.clearStores();
-    window.localStorage.clear();
-    window.location.reload();
-  }
-
-  clearCacheAndReload() {
-    this.matrixClient.stopClient();
-    this.matrixClient.store.deleteAllData().then(() => {
-      window.location.reload();
-    });
-  }
 }
 
 const initMatrix = new InitMatrix();

src/client/state/Notifications.js

@@ -10,7 +10,6 @@ import { setFavicon } from '../../util/common';
 import LogoSVG from '../../../public/res/svg/cinny.svg';
 import LogoUnreadSVG from '../../../public/res/svg/cinny-unread.svg';
 import LogoHighlightSVG from '../../../public/res/svg/cinny-highlight.svg';
-import { html, plain } from '../../util/markdown';
 
 function isNotifEvent(mEvent) {
   const eType = mEvent.getType();
@@ -44,8 +43,6 @@ class Notifications extends EventEmitter {
     this.roomList = roomList;
 
     this.roomIdToNoti = new Map();
-    this.roomIdToPopupNotis = new Map();
-    this.eventIdToPopupNoti = new Map();
 
     // this._initNoti();
     this._listenEvents();
@@ -258,51 +255,20 @@ class Notifications extends EventEmitter {
         scale: 8,
       });
 
-      const content = mEvent.getContent();
-
-      const state = { kind: 'notification', onlyPlain: true };
-      let body;
-      if (content.format === 'org.matrix.custom.html') {
-        body = html(content.formatted_body, state);
-      } else {
-        body = plain(content.body, state);
-      }
-
       const noti = new window.Notification(title, {
-        body: body.plain,
+        body: mEvent.getContent().body,
         icon,
-        tag: mEvent.getId(),
         silent: settings.isNotificationSounds,
       });
       if (settings.isNotificationSounds) {
         noti.onshow = () => this._playNotiSound();
       }
       noti.onclick = () => selectRoom(room.roomId, mEvent.getId());
-
-      this.eventIdToPopupNoti.set(mEvent.getId(), noti);
-      if (this.roomIdToPopupNotis.has(room.roomId)) {
-        this.roomIdToPopupNotis.get(room.roomId).push(noti);
-      } else {
-        this.roomIdToPopupNotis.set(room.roomId, [noti]);
-      }
     } else {
       this._playNotiSound();
     }
   }
 
-  _deletePopupNoti(eventId) {
-    this.eventIdToPopupNoti.get(eventId)?.close();
-    this.eventIdToPopupNoti.delete(eventId);
-  }
-
-  _deletePopupRoomNotis(roomId) {
-    this.roomIdToPopupNotis.get(roomId)?.forEach((n) => {
-      this.eventIdToPopupNoti.delete(n.tag);
-      n.close();
-    });
-    this.roomIdToPopupNotis.delete(roomId);
-  }
-
   _playNotiSound() {
     if (!this._notiAudio) {
       this._notiAudio = document.getElementById('notificationSound');
@@ -319,8 +285,6 @@ class Notifications extends EventEmitter {
 
   _listenEvents() {
     this.matrixClient.on('Room.timeline', (mEvent, room) => {
-      if (mEvent.isRedaction()) this._deletePopupNoti(mEvent.event.redacts);
-
       if (room.isSpaceRoom()) return;
       if (!isNotifEvent(mEvent)) return;
 
@@ -391,8 +355,6 @@ class Notifications extends EventEmitter {
         if (readerUserId !== this.matrixClient.getUserId()) return;
 
         this.deleteNoti(room.roomId);
-
-        this._deletePopupRoomNotis(room.roomId);
       }
     });
 

src/client/state/RoomsInput.js

@@ -6,9 +6,11 @@ import { getBlobSafeMimeType } from '../../util/mimetypes';
 import { sanitizeText } from '../../util/sanitize';
 import cons from './cons';
 import settings from './settings';
-import { markdown, plain } from '../../util/markdown';
+import { htmlOutput, parser } from '../../util/markdown';
 
 const blurhashField = 'xyz.amorgan.blurhash';
+const MXID_REGEX = /\B@\S+:\S+\.\S+[^.,:;?!\s]/g;
+const SHORTCODE_REGEX = /\B:([\w-]+):\B/g;
 
 function encodeBlurhash(img) {
   const canvas = document.createElement('canvas');
@@ -98,6 +100,91 @@ function getVideoThumbnail(video, width, height, mimeType) {
   });
 }
 
+function getFormattedBody(markdown) {
+  let content = parser(markdown);
+  if (content.length === 1 && content[0].type === 'paragraph') {
+    content = content[0].content;
+  }
+  return htmlOutput(content);
+}
+
+function getReplyFormattedBody(roomId, reply) {
+  const replyToLink = `<a href="https://matrix.to/#/${roomId}/${reply.eventId}">In reply to</a>`;
+  const userLink = `<a href="https://matrix.to/#/${reply.userId}">${reply.userId}</a>`;
+  const formattedReply = getFormattedBody(reply.body.replace(/\n/g, '\n> '));
+  return `<mx-reply><blockquote>${replyToLink}${userLink}<br />${formattedReply}</blockquote></mx-reply>`;
+}
+
+function bindReplyToContent(roomId, reply, content) {
+  const newContent = { ...content };
+  newContent.body = `> <${reply.userId}> ${reply.body.replace(/\n/g, '\n> ')}`;
+  newContent.body += `\n\n${content.body}`;
+  newContent.format = 'org.matrix.custom.html';
+  newContent['m.relates_to'] = content['m.relates_to'] || {};
+  newContent['m.relates_to']['m.in_reply_to'] = { event_id: reply.eventId };
+
+  const formattedReply = getReplyFormattedBody(roomId, reply);
+  newContent.formatted_body = formattedReply + (content.formatted_body || content.body);
+  return newContent;
+}
+
+function findAndReplace(text, regex, filter, replace) {
+  let copyText = text;
+  Array.from(copyText.matchAll(regex))
+    .filter(filter)
+    .reverse() /* to replace backward to forward */
+    .forEach((match) => {
+      const matchText = match[0];
+      const tag = replace(match);
+
+      copyText = copyText.substr(0, match.index)
+        + tag
+        + copyText.substr(match.index + matchText.length);
+    });
+  return copyText;
+}
+
+function formatUserPill(room, text) {
+  const { userIdsToDisplayNames } = room.currentState;
+  return findAndReplace(
+    text,
+    MXID_REGEX,
+    (match) => userIdsToDisplayNames[match[0]],
+    (match) => (
+      `<a href="https://matrix.to/#/${match[0]}">@${userIdsToDisplayNames[match[0]]}</a>`
+    ),
+  );
+}
+
+function formatEmoji(mx, room, roomList, text) {
+  const parentIds = roomList.getAllParentSpaces(room.roomId);
+  const parentRooms = [...parentIds].map((id) => mx.getRoom(id));
+  const allEmoji = getShortcodeToEmoji(mx, [room, ...parentRooms]);
+
+  return findAndReplace(
+    text,
+    SHORTCODE_REGEX,
+    (match) => allEmoji.has(match[1]),
+    (match) => {
+      const emoji = allEmoji.get(match[1]);
+
+      let tag;
+      if (emoji.mxc) {
+        tag = `<img data-mx-emoticon="" src="${
+          emoji.mxc
+        }" alt=":${
+          emoji.shortcode
+        }:" title=":${
+          emoji.shortcode
+        }:" height="32" />`;
+      } else {
+        tag = emoji.unicode;
+      }
+      return tag;
+    },
+  );
+}
+
 class RoomsInput extends EventEmitter {
   constructor(mx, roomList) {
     super();
@@ -187,76 +274,8 @@ class RoomsInput extends EventEmitter {
     return this.roomIdToInput.get(roomId)?.isSending || false;
   }
 
-  getContent(roomId, options, message, reply, edit) {
-    const msgType = options?.msgType || 'm.text';
-    const autoMarkdown = options?.autoMarkdown ?? true;
-
+  async sendInput(roomId, msgType) {
     const room = this.matrixClient.getRoom(roomId);
-
-    const userNames = room.currentState.userIdsToDisplayNames;
-    const parentIds = this.roomList.getAllParentSpaces(room.roomId);
-    const parentRooms = [...parentIds].map((id) => this.matrixClient.getRoom(id));
-    const emojis = getShortcodeToEmoji(this.matrixClient, [room, ...parentRooms]);
-
-    const output = settings.isMarkdown && autoMarkdown ? markdown : plain;
-    const body = output(message, { userNames, emojis });
-
-    const content = {
-      body: body.plain,
-      msgtype: msgType,
-    };
-
-    if (!body.onlyPlain || reply) {
-      content.format = 'org.matrix.custom.html';
-      content.formatted_body = body.html;
-    }
-
-    if (edit) {
-      content['m.new_content'] = { ...content };
-      content['m.relates_to'] = {
-        event_id: edit.getId(),
-        rel_type: 'm.replace',
-      };
-
-      const isReply = edit.getWireContent()['m.relates_to']?.['m.in_reply_to'];
-      if (isReply) {
-        content.format = 'org.matrix.custom.html';
-        content.formatted_body = body.html;
-      }
-
-      content.body = ` * ${content.body}`;
-      if (content.formatted_body) content.formatted_body = ` * ${content.formatted_body}`;
-
-      if (isReply) {
-        const eBody = edit.getContent().body;
-        const replyHead = eBody.substring(0, eBody.indexOf('\n\n'));
-        if (replyHead) content.body = `${replyHead}\n\n${content.body}`;
-
-        const eFBody = edit.getContent().formatted_body;
-        const fReplyHead = eFBody.substring(0, eFBody.indexOf('</mx-reply>'));
-        if (fReplyHead) content.formatted_body = `${fReplyHead}</mx-reply>${content.formatted_body}`;
-      }
-    }
-
-    if (reply) {
-      content['m.relates_to'] = {
-        'm.in_reply_to': {
-          event_id: reply.eventId,
-        },
-      };
-
-      content.body = `> <${reply.userId}> ${reply.body.replace(/\n/g, '\n> ')}\n\n${content.body}`;
-
-      const replyToLink = `<a href="https://matrix.to/#/${encodeURIComponent(roomId)}/${encodeURIComponent(reply.eventId)}">In reply to</a>`;
-      const userLink = `<a href="https://matrix.to/#/${encodeURIComponent(reply.userId)}">${sanitizeText(reply.userId)}</a>`;
-      const fallback = `<mx-reply><blockquote>${replyToLink}${userLink}<br />${reply.formattedBody || sanitizeText(reply.body)}</blockquote></mx-reply>`;
-      content.formatted_body = fallback + content.formatted_body;
-    }
-
-    return content;
-  }
-
-  async sendInput(roomId, options) {
     const input = this.getInput(roomId);
     input.isSending = true;
     this.roomIdToInput.set(roomId, input);
@@ -266,7 +285,35 @@ class RoomsInput extends EventEmitter {
     }
 
     if (this.getMessage(roomId).trim() !== '') {
-      const content = this.getContent(roomId, options, input.message, input.replyTo);
+      const rawMessage = input.message;
+      let content = {
+        body: rawMessage,
+        msgtype: msgType ?? 'm.text',
+      };
+
+      // Apply formatting if relevant
+      let formattedBody = settings.isMarkdown
+        ? getFormattedBody(rawMessage)
+        : sanitizeText(rawMessage);
+
+      formattedBody = formatUserPill(room, formattedBody);
+      formattedBody = formatEmoji(this.matrixClient, room, this.roomList, formattedBody);
+
+      content.body = findAndReplace(
+        content.body,
+        MXID_REGEX,
+        (match) => room.currentState.userIdsToDisplayNames[match[0]],
+        (match) => `@${room.currentState.userIdsToDisplayNames[match[0]]}`,
+      );
+      if (formattedBody !== sanitizeText(rawMessage)) {
+        // Formatting was applied, and we need to switch to custom HTML
+        content.format = 'org.matrix.custom.html';
+        content.formatted_body = formattedBody;
+      }
+
+      if (typeof input.replyTo !== 'undefined') {
+        content = bindReplyToContent(roomId, input.replyTo, content);
+      }
       this.matrixClient.sendMessage(roomId, content);
     }
 
@@ -409,13 +456,55 @@ class RoomsInput extends EventEmitter {
   }
 
   async sendEditedMessage(roomId, mEvent, editedBody) {
-    const content = this.getContent(
-      roomId,
-      { msgType: mEvent.getWireContent().msgtype },
-      editedBody,
-      null,
-      mEvent,
+    const room = this.matrixClient.getRoom(roomId);
+    const isReply = typeof mEvent.getWireContent()['m.relates_to']?.['m.in_reply_to'] !== 'undefined';
+
+    const msgtype = mEvent.getWireContent().msgtype ?? 'm.text';
+
+    const content = {
+      body: ` * ${editedBody}`,
+      msgtype,
+      'm.new_content': {
+        body: editedBody,
+        msgtype,
+      },
+      'm.relates_to': {
+        event_id: mEvent.getId(),
+        rel_type: 'm.replace',
+      },
+    };
+
+    // Apply formatting if relevant
+    let formattedBody = settings.isMarkdown
+      ? getFormattedBody(editedBody)
+      : sanitizeText(editedBody);
+    formattedBody = formatUserPill(room, formattedBody);
+    formattedBody = formatEmoji(this.matrixClient, room, this.roomList, formattedBody);
+
+    content.body = findAndReplace(
+      content.body,
+      MXID_REGEX,
+      (match) => room.currentState.userIdsToDisplayNames[match[0]],
+      (match) => `@${room.currentState.userIdsToDisplayNames[match[0]]}`,
     );
+    if (formattedBody !== sanitizeText(editedBody)) {
+      content.formatted_body = ` * ${formattedBody}`;
+      content.format = 'org.matrix.custom.html';
+      content['m.new_content'].formatted_body = formattedBody;
+      content['m.new_content'].format = 'org.matrix.custom.html';
+    }
+    if (isReply) {
+      const evBody = mEvent.getContent().body;
+      const replyHead = evBody.slice(0, evBody.indexOf('\n\n'));
+      const evFBody = mEvent.getContent().formatted_body;
+      const fReplyHead = evFBody.slice(0, evFBody.indexOf('</mx-reply>'));
+
+      content.format = 'org.matrix.custom.html';
+      content.formatted_body = `${fReplyHead}</mx-reply>${(content.formatted_body || content.body)}`;
+
+      content.body = `${replyHead}\n\n${content.body}`;
+    }
+
     this.matrixClient.sendMessage(roomId, content);
   }
 }

src/client/state/cons.js

@@ -1,5 +1,5 @@
 const cons = {
-  version: '2.2.2',
+  version: '2.1.3',
   secretKey: {
     ACCESS_TOKEN: 'cinny_access_token',
     DEVICE_ID: 'cinny_device_id',

src/client/state/navigation.js

@@ -375,7 +375,6 @@ class Navigation extends EventEmitter {
           action.userId,
           action.eventId,
           action.body,
-          action.formattedBody,
         );
       },
       [cons.actions.navigation.OPEN_SEARCH]: () => {

src/util/common.js

@@ -204,27 +204,3 @@ export function scaleDownImage(imageFile, width, height) {
     img.src = imgURL;
   });
 }
-
-/**
- * @param {sigil} string sigil to search for (for example '@', '#' or '$')
- * @param {flags} string regex flags
- * @param {prefix} string prefix appended at the beginning of the regex
- * @returns {RegExp}
- */
-export function idRegex(sigil, flags, prefix) {
-  const servername = '(?:[a-zA-Z0-9-.]*[a-zA-Z0-9]+|\\[\\S+?\\])(?::\\d+)?';
-  return new RegExp(`${prefix}(${sigil}\\S+:${servername})`, flags);
-}
-
-const matrixToRegex = /^https?:\/\/matrix.to\/#\/(\S+:\S+)/;
-/**
- * Parses a matrix.to URL into an matrix id.
- * This function can later be extended to support matrix: URIs
- * @param {string} uri The URI to parse
- * @returns {string|null} The id or null if the URI does not match
- */
-export function parseIdUri(uri) {
-  const res = decodeURIComponent(uri).match(matrixToRegex);
-  if (!res) return null;
-  return res[1];
-}

src/util/markdown.js

@@ -1,84 +1,25 @@
-/* eslint-disable no-param-reassign */
-/* eslint-disable no-use-before-define */
 import SimpleMarkdown from '@khanacademy/simple-markdown';
-import { idRegex, parseIdUri } from './common';
 
 const {
-  defaultRules, parserFor, outputFor, anyScopeRegex, blockRegex, inlineRegex,
-  sanitizeText, sanitizeUrl,
+  defaultRules, parserFor, outputFor, anyScopeRegex, blockRegex, inlineRegex, htmlTag, sanitizeText,
 } = SimpleMarkdown;
 
-function htmlTag(tagName, content, attributes, isClosed) {
-  let s = '';
-  Object.entries(attributes || {}).forEach(([k, v]) => {
-    if (v !== undefined) {
-      s += ` ${sanitizeText(k)}`;
-      if (v !== null) s += `="${sanitizeText(v)}"`;
-    }
-  });
-
-  s = `<${tagName}${s}>`;
-
-  if (isClosed === false) {
-    return s;
-  }
-  return `${s}${content}</${tagName}>`;
-}
-
 function mathHtml(wrap, node) {
   return htmlTag(wrap, htmlTag('code', sanitizeText(node.content)), { 'data-mx-maths': node.content });
 }
 
-const emojiRegex = /^:([\w-]+):/;
-
-const plainRules = {
+const rules = {
+  ...defaultRules,
   Array: {
     ...defaultRules.Array,
-    plain: defaultRules.Array.html,
+    plain: (arr, output, state) => arr.map((node) => output(node, state)).join(''),
   },
-  userMention: {
-    order: defaultRules.em.order - 0.9,
-    match: inlineRegex(idRegex('@', undefined, '^')),
-    parse: (capture, _, state) => ({
-      type: 'mention',
-      content: state.userNames[capture[1]] ? `@${state.userNames[capture[1]]}` : capture[1],
-      id: capture[1],
-    }),
-  },
-  roomMention: {
-    order: defaultRules.em.order - 0.8,
-    match: inlineRegex(idRegex('#', undefined, '^')),
-    parse: (capture) => ({ type: 'mention', content: capture[1], id: capture[1] }),
-  },
-  mention: {
-    plain: (node, _, state) => (state.kind === 'edit' ? node.id : node.content),
-    html: (node) => htmlTag('a', sanitizeText(node.content), {
-      href: `https://matrix.to/#/${encodeURIComponent(node.id)}`,
-    }),
-  },
-  emoji: {
-    order: defaultRules.em.order - 0.1,
-    match: (source, state) => {
-      if (!state.inline) return null;
-      const capture = emojiRegex.exec(source);
-      if (!capture) return null;
-      const emoji = state.emojis.get(capture[1]);
-      if (emoji) return capture;
-      return null;
-    },
-    parse: (capture, _, state) => ({ content: capture[1], emoji: state.emojis.get(capture[1]) }),
-    plain: ({ emoji }) => (emoji.mxc
-      ? `:${emoji.shortcode}:`
-      : emoji.unicode),
-    html: ({ emoji }) => (emoji.mxc
-      ? htmlTag('img', null, {
-        'data-mx-emoticon': null,
-        src: emoji.mxc,
-        alt: `:${emoji.shortcode}:`,
-        title: `:${emoji.shortcode}:`,
-        height: 32,
-      }, false)
-      : emoji.unicode),
+  displayMath: {
+    order: defaultRules.list.order + 0.5,
+    match: blockRegex(/^\$\$\n*([\s\S]+?)\n*\$\$/),
+    parse: (capture) => ({ content: capture[1] }),
+    plain: (node) => `$$\n${node.content}\n$$`,
+    html: (node) => mathHtml('div', node),
   },
   newline: {
     ...defaultRules.newline,
@@ -93,186 +34,6 @@ const plainRules = {
     ...defaultRules.escape,
     plain: (node, output, state) => `\\${output(node.content, state)}`,
   },
-  br: {
-    ...defaultRules.br,
-    match: anyScopeRegex(/^ *\n/),
-    plain: () => '\n',
-  },
-  text: {
-    ...defaultRules.text,
-    match: anyScopeRegex(/^[\s\S]+?(?=[^0-9A-Za-z\s\u00c0-\uffff]| *\n|\w+:\S|$)/),
-    plain: (node, _, state) => (state.kind === 'edit'
-      ? node.content.replace(/(\*|_|!\[|\[|\|\||\$\$?)/g, '\\$1')
-      : node.content),
-  },
-};
-
-const markdownRules = {
-  ...defaultRules,
-  ...plainRules,
-  heading: {
-    ...defaultRules.heading,
-    match: blockRegex(/^ *(#{1,6})([^\n:]*?(?: [^\n]*?)?)#* *(?:\n *)*\n/),
-    plain: (node, output, state) => {
-      const out = output(node.content, state);
-      if (state.kind === 'edit' || state.kind === 'notification' || node.level > 2) {
-        return `${'#'.repeat(node.level)} ${out}\n\n`;
-      }
-      return `${out}\n${(node.level === 1 ? '=' : '-').repeat(out.length)}\n\n`;
-    },
-  },
-  hr: {
-    ...defaultRules.hr,
-    plain: () => '---\n\n',
-  },
-  codeBlock: {
-    ...defaultRules.codeBlock,
-    plain: (node) => `\`\`\`${node.lang || ''}\n${node.content}\n\`\`\`\n`,
-    html: (node) => htmlTag('pre', htmlTag('code', sanitizeText(node.content), {
-      class: node.lang ? `language-${node.lang}` : undefined,
-    })),
-  },
-  fence: {
-    ...defaultRules.fence,
-    match: blockRegex(/^ *(`{3,}|~{3,}) *(?:(\S+) *)?\n([\s\S]+?)\n?\1 *(?:\n *)*\n/),
-  },
-  blockQuote: {
-    ...defaultRules.blockQuote,
-    plain: (node, output, state) => `> ${output(node.content, state).trim().replace(/\n/g, '\n> ')}\n\n`,
-  },
-  list: {
-    ...defaultRules.list,
-    plain: (node, output, state) => {
-      const oldList = state._list;
-      state._list = true;
-
-      let items = node.items.map((item, i) => {
-        const prefix = node.ordered ? `${node.start + i}. ` : '* ';
-        return prefix + output(item, state).replace(/\n/g, `\n${' '.repeat(prefix.length)}`);
-      }).join('\n');
-
-      state._list = oldList;
-
-      if (!state._list) {
-        items += '\n\n';
-      }
-      return items;
-    },
-  },
-  def: undefined,
-  table: {
-    ...defaultRules.table,
-    plain: (node, output, state) => {
-      const header = node.header.map((content) => output(content, state));
-
-      const colWidth = node.align.map((align) => {
-        switch (align) {
-          case 'left':
-          case 'right':
-            return 2;
-          case 'center':
-            return 3;
-          default:
-            return 1;
-        }
-      });
-      header.forEach((s, i) => {
-        if (s.length > colWidth[i])colWidth[i] = s.length;
-      });
-
-      const cells = node.cells.map((row) => row.map((content, i) => {
-        const s = output(content, state);
-        if (colWidth[i] === undefined || s.length > colWidth[i]) {
-          colWidth[i] = s.length;
-        }
-        return s;
-      }));
-
-      function pad(s, i) {
-        switch (node.align[i]) {
-          case 'right':
-            return s.padStart(colWidth[i]);
-          case 'center':
-            return s
-              .padStart(s.length + Math.floor((colWidth[i] - s.length) / 2))
-              .padEnd(colWidth[i]);
-          default:
-            return s.padEnd(colWidth[i]);
-        }
-      }
-
-      const line = colWidth.map((len, i) => {
-        switch (node.align[i]) {
-          case 'left':
-            return `:${'-'.repeat(len - 1)}`;
-          case 'center':
-            return `:${'-'.repeat(len - 2)}:`;
-          case 'right':
-            return `${'-'.repeat(len - 1)}:`;
-          default:
-            return '-'.repeat(len);
-        }
-      });
-
-      const table = [
-        header.map(pad),
-        line,
-        ...cells.map((row) => row.map(pad))];
-
-      return table.map((row) => `| ${row.join(' | ')} |\n`).join('');
-    },
-  },
-  displayMath: {
-    order: defaultRules.table.order + 0.1,
-    match: blockRegex(/^ *\$\$ *\n?([\s\S]+?)\n?\$\$ *(?:\n *)*\n/),
-    parse: (capture) => ({ content: capture[1] }),
-    plain: (node) => (node.content.includes('\n')
-      ? `$$\n${node.content}\n$$\n`
-      : `$$${node.content}$$\n`),
-    html: (node) => mathHtml('div', node),
-  },
-  shrug: {
-    order: defaultRules.escape.order - 0.1,
-    match: inlineRegex(/^¯\\_\(ツ\)_\/¯/),
-    parse: (capture) => ({ type: 'text', content: capture[0] }),
-  },
-  tableSeparator: {
-    ...defaultRules.tableSeparator,
-    plain: () => ' | ',
-  },
-  link: {
-    ...defaultRules.link,
-    plain: (node, output, state) => {
-      const out = output(node.content, state);
-      const target = sanitizeUrl(node.target) || '';
-      if (out !== target || node.title) {
-        return `[${out}](${target}${node.title ? ` "${node.title}"` : ''})`;
-      }
-      return out;
-    },
-    html: (node, output, state) => {
-      const out = output(node.content, state);
-      const target = sanitizeUrl(node.target) || '';
-      if (out !== target || node.title) {
-        return htmlTag('a', out, {
-          href: target,
-          title: node.title,
-        });
-      }
-      return target;
-    },
-  },
-  image: {
-    ...defaultRules.image,
-    plain: (node) => `![${node.alt}](${sanitizeUrl(node.target) || ''}${node.title ? ` "${node.title}"` : ''})`,
-    html: (node) => htmlTag('img', '', {
-      src: sanitizeUrl(node.target) || '',
-      alt: node.alt,
-      title: node.title,
-    }, false),
-  },
-  reflink: undefined,
-  refimage: undefined,
   em: {
     ...defaultRules.em,
     plain: (node, output, state) => `_${output(node.content, state)}_`,
@@ -289,227 +50,40 @@ const markdownRules = {
     ...defaultRules.del,
     plain: (node, output, state) => `~~${output(node.content, state)}~~`,
   },
-  inlineCode: {
-    ...defaultRules.inlineCode,
-    match: inlineRegex(/^(`+)([^\n]*?[^`\n])\1(?!`)/),
-    plain: (node) => `\`${node.content}\``,
-  },
   spoiler: {
-    order: defaultRules.inlineCode.order + 0.1,
+    order: defaultRules.em.order - 0.5,
     match: inlineRegex(/^\|\|([\s\S]+?)\|\|(?:\(([\s\S]+?)\))?/),
     parse: (capture, parse, state) => ({
       content: parse(capture[1], state),
       reason: capture[2],
     }),
-    plain: (node, output, state) => {
-      const warning = `spoiler${node.reason ? `: ${node.reason}` : ''}`;
-      switch (state.kind) {
-        case 'edit':
-          return `||${output(node.content, state)}||${node.reason ? `(${node.reason})` : ''}`;
-        case 'notification':
-          return `<${warning}>`;
-        default:
-          return `[${warning}](${output(node.content, state)})`;
-      }
-    },
-    html: (node, output, state) => htmlTag(
-      'span',
-      output(node.content, state),
-      { 'data-mx-spoiler': node.reason || null },
-    ),
+    plain: (node) => `[spoiler${node.reason ? `: ${node.reason}` : ''}](mxc://somewhere)`,
+    html: (node, output, state) => `<span data-mx-spoiler${node.reason ? `="${sanitizeText(node.reason)}"` : ''}>${output(node.content, state)}</span>`,
   },
   inlineMath: {
-    order: defaultRules.del.order + 0.2,
+    order: defaultRules.del.order + 0.5,
     match: inlineRegex(/^\$(\S[\s\S]+?\S|\S)\$(?!\d)/),
     parse: (capture) => ({ content: capture[1] }),
     plain: (node) => `$${node.content}$`,
     html: (node) => mathHtml('span', node),
   },
+  br: {
+    ...defaultRules.br,
+    match: anyScopeRegex(/^ *\n/),
+    plain: () => '\n',
+  },
+  text: {
+    ...defaultRules.text,
+    match: anyScopeRegex(/^[\s\S]+?(?=[^0-9A-Za-z\s\u00c0-\uffff]| *\n|\w+:\S|$)/),
+    plain: (node) => node.content,
+  },
 };
 
-function mapElement(el) {
-  switch (el.tagName) {
-    case 'MX-REPLY':
-      return [];
+const parser = parserFor(rules);
 
-    case 'P':
-      return [{ type: 'paragraph', content: mapChildren(el) }];
-    case 'BR':
-      return [{ type: 'br' }];
+const plainOutput = outputFor(rules, 'plain');
+const htmlOutput = outputFor(rules, 'html');
 
-    case 'H1':
-    case 'H2':
-    case 'H3':
-    case 'H4':
-    case 'H5':
-    case 'H6':
-      return [{ type: 'heading', level: Number(el.tagName[1]), content: mapChildren(el) }];
-    case 'HR':
-      return [{ type: 'hr' }];
-    case 'PRE': {
-      let lang;
-      if (el.firstChild) {
-        Array.from(el.firstChild.classList).some((c) => {
-          const langPrefix = 'language-';
-          if (c.startsWith(langPrefix)) {
-            lang = c.slice(langPrefix.length);
-            return true;
-          }
-          return false;
-        });
-      }
-      return [{ type: 'codeBlock', lang, content: el.innerText }];
-    }
-    case 'BLOCKQUOTE':
-      return [{ type: 'blockQuote', content: mapChildren(el) }];
-    case 'UL':
-      return [{ type: 'list', items: Array.from(el.childNodes).map(mapNode) }];
-    case 'OL':
-      return [{
-        type: 'list',
-        ordered: true,
-        start: Number(el.getAttribute('start')),
-        items: Array.from(el.childNodes).map(mapNode),
-      }];
-    case 'TABLE': {
-      const headerEl = Array.from(el.querySelector('thead > tr').childNodes);
-      const align = headerEl.map((childE) => childE.style['text-align']);
-      return [{
-        type: 'table',
-        header: headerEl.map(mapChildren),
-        align,
-        cells: Array.from(el.querySelectorAll('tbody > tr')).map((rowEl) => Array.from(rowEl.childNodes).map((childEl, i) => {
-          if (align[i] === undefined) align[i] = childEl.style['text-align'];
-          return mapChildren(childEl);
-        })),
-      }];
-    }
-    case 'A': {
-      const href = el.getAttribute('href');
-
-      const id = parseIdUri(href);
-      if (id) return [{ type: 'mention', content: el.innerText, id }];
-
-      return [{
-        type: 'link',
-        target: el.getAttribute('href'),
-        title: el.getAttribute('title'),
-        content: mapChildren(el),
-      }];
-    }
-    case 'IMG': {
-      const src = el.getAttribute('src');
-      let title = el.getAttribute('title');
-      if (el.hasAttribute('data-mx-emoticon')) {
-        if (title.length > 2 && title.startsWith(':') && title.endsWith(':')) {
-          title = title.slice(1, -1);
-        }
-        return [{
-          type: 'emoji',
-          content: title,
-          emoji: {
-            mxc: src,
-            shortcode: title,
-          },
-        }];
-      }
-
-      return [{
-        type: 'image',
-        alt: el.getAttribute('alt'),
-        target: src,
-        title,
-      }];
-    }
-    case 'EM':
-    case 'I':
-      return [{ type: 'em', content: mapChildren(el) }];
-    case 'STRONG':
-    case 'B':
-      return [{ type: 'strong', content: mapChildren(el) }];
-    case 'U':
-      return [{ type: 'u', content: mapChildren(el) }];
-    case 'DEL':
-    case 'STRIKE':
-      return [{ type: 'del', content: mapChildren(el) }];
-    case 'CODE':
-      return [{ type: 'inlineCode', content: el.innerText }];
-
-    case 'DIV':
-      if (el.hasAttribute('data-mx-maths')) {
-        return [{ type: 'displayMath', content: el.getAttribute('data-mx-maths') }];
-      }
-      return mapChildren(el);
-    case 'SPAN':
-      if (el.hasAttribute('data-mx-spoiler')) {
-        return [{ type: 'spoiler', reason: el.getAttribute('data-mx-spoiler'), content: mapChildren(el) }];
-      }
-      if (el.hasAttribute('data-mx-maths')) {
-        return [{ type: 'inlineMath', content: el.getAttribute('data-mx-maths') }];
-      }
-      return mapChildren(el);
-    default:
-      return mapChildren(el);
-  }
-}
-
-function mapNode(n) {
-  switch (n.nodeType) {
-    case Node.TEXT_NODE:
-      return [{ type: 'text', content: n.textContent }];
-    case Node.ELEMENT_NODE:
-      return mapElement(n);
-    default:
-      return [];
-  }
-}
-
-function mapChildren(n) {
-  return Array.from(n.childNodes).reduce((ast, childN) => {
-    ast.push(...mapNode(childN));
-    return ast;
-  }, []);
-}
-
-function render(content, state, plainOut, htmlOut) {
-  let c = content;
-  if (content.length === 1 && content[0].type === 'paragraph') {
-    c = c[0].content;
-  }
-
-  const plainStr = plainOut(c, state).trim();
-  if (state.onlyPlain) return { plain: plainStr };
-
-  const htmlStr = htmlOut(c, state);
-
-  const plainHtml = htmlStr.replace(/<br>/g, '\n').replace(/<\/p><p>/g, '\n\n').replace(/<\/?p>/g, '');
-  const onlyPlain = sanitizeText(plainStr) === plainHtml;
-
-  return {
-    onlyPlain,
-    plain: plainStr,
-    html: htmlStr,
-  };
-}
-
-const plainParser = parserFor(plainRules);
-const plainPlainOut = outputFor(plainRules, 'plain');
-const plainHtmlOut = outputFor(plainRules, 'html');
-
-const mdParser = parserFor(markdownRules);
-const mdPlainOut = outputFor(markdownRules, 'plain');
-const mdHtmlOut = outputFor(markdownRules, 'html');
-
-export function plain(source, state) {
-  return render(plainParser(source, state), state, plainPlainOut, plainHtmlOut);
-}
-
-export function markdown(source, state) {
-  return render(mdParser(source, state), state, mdPlainOut, mdHtmlOut);
-}
-
-export function html(source, state) {
-  const el = document.createElement('template');
-  el.innerHTML = source;
-  return render(mapChildren(el.content), state, mdPlainOut, mdHtmlOut);
-}
+export {
+  parser, plainOutput, htmlOutput,
+};

src/util/matrixUtil.js

@@ -79,16 +79,6 @@ export function parseReply(rawBody) {
   };
 }
 
-export function trimHTMLReply(html) {
-  if (!html) return html;
-  const suffix = '</mx-reply>';
-  const i = html.indexOf(suffix);
-  if (i < 0) {
-    return html;
-  }
-  return html.slice(i + suffix.length);
-}
-
 export function hasDMWith(userId) {
   const mx = initMatrix.matrixClient;
   const directIds = [...initMatrix.roomList.directs];