Merge branch 'dev' into fix/commands

Add npmrc so that newer node/npm version works (#806 )
* Add .npmrc so that it works with newer npm * Remove engine upper limit as it works with npmrc * Lockfile maintainace, created new mapping with npm install * Add npmrc so Docker doesnt fail on new npm version * Revert 8a1946d558 will set renovate
2022-09-03 21:42:56 +05:30 · 2022-09-03 21:36:47 +05:30 · 2022-09-03 08:42:36 +05:30 · 2022-09-02 19:31:28 +05:30 · 2022-09-02 19:21:45 +05:30 · 2022-09-02 19:16:28 +05:30
53 changed files with 1564 additions and 1956 deletions
@@ -25,7 +25,7 @@ jobs:
          path: dist
          retention-days: 1
      - name: Get PR info
-        uses: actions/github-script@v6.1.0
+        uses: actions/github-script@v6.2.0
        with:
          script: |
            var fs = require('fs');
@@ -17,7 +17,7 @@ jobs:
      # workflow_run action (https://github.com/actions/download-artifact/issues/60)
      # so instead we get this mess:
      - name: Download artifact
-        uses: actions/github-script@v6.1.0
+        uses: actions/github-script@v6.2.0
        with:
          script: |
            var artifacts = await github.rest.actions.listWorkflowRunArtifacts({
@@ -51,7 +51,7 @@ jobs:
        run: unzip -d dist previewbuild.zip && rm previewbuild.zip && unzip pr.json.zip && rm pr.json.zip
      - name: Read PR Info
        id: readctx
-        uses: actions/github-script@v6.1.0
+        uses: actions/github-script@v6.2.0
        with:
          script: |
            var fs = require('fs');
@@ -15,7 +15,7 @@ jobs:
      - name: Checkout repository
        uses: actions/checkout@v3.0.2
      - name: Build Docker image
-        uses: docker/build-push-action@v3.1.0
+        uses: docker/build-push-action@v3.1.1
        with:
          context: .
          push: false
@@ -64,10 +64,11 @@ jobs:
          NETLIFY_DEPLOY_TO_PROD: true

  push-to-dockerhub:
-    name: Push Docker image to Docker Hub
+    name: Push Docker image to Docker Hub, ghcr
    runs-on: ubuntu-latest
    permissions:
      contents: read
+      packages: write
    steps:
      - name: Checkout repository
        uses: actions/checkout@v3.0.2
@@ -80,13 +81,21 @@ jobs:
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}
+      - name: Login to the Container registry
+        uses: docker/login-action@v2.0.0
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
      - name: Extract metadata (tags, labels) for Docker
        id: meta
        uses: docker/metadata-action@v4.0.1
        with:
-          images: ajbura/cinny
+          images: |
+            ${{ secrets.DOCKER_USERNAME }}/cinny
+            ghcr.io/${{ github.repository }}
      - name: Build and push Docker image
-        uses: docker/build-push-action@v3.1.0
+        uses: docker/build-push-action@v3.1.1
        with:
          context: .
          platforms: linux/amd64,linux/arm64
@@ -0,0 +1 @@
+legacy-peer-deps=true
@@ -36,4 +36,9 @@ It is not always possible to phrase every change in such a manner, but it is des

 Also, we use [ESLint](https://eslint.org/) for clean and stylistically consistent code syntax, so make sure your pull request follow it.

-**For any query or design discussion, join our [Matrix room](https://matrix.to/#/#cinny:matrix.org).**
+**For any query or design discussion, join our [Matrix room](https://matrix.to/#/#cinny:matrix.org).**
+
+## 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/19.2.0/index.html)
@@ -3,7 +3,7 @@ FROM node:17.9.0-alpine3.15 as builder

 WORKDIR /src

-COPY package.json package-lock.json /src/
+COPY .npmrc package.json package-lock.json /src/
 RUN npm ci
 COPY . /src/
 RUN npm run build
@@ -1,6 +1,6 @@
 MIT License

-Copyright (c) 2021 Ajay Bura (ajbura)
+Copyright (c) 2021-present Ajay Bura (ajbura)

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -1,9 +1,5 @@
-<p align="center">
-    <img src="https://raw.githubusercontent.com/ajbura/cinny/dev/public/res/svg/cinny.svg?sanitize=true"
-        height="16">
-    <span><b>Cinny</b></span>
-</p>
-<p align="center">
+# Cinny
+<p>
    <a href="https://github.com/ajbura/cinny/releases">
        <img alt="GitHub release downloads" src="https://img.shields.io/github/downloads/ajbura/cinny/total?logo=github&style=social"></a>
    <a href="https://hub.docker.com/r/ajbura/cinny">
@@ -16,21 +12,30 @@
        <img alt="Sponsor Cinny" src="https://img.shields.io/opencollective/all/cinny?logo=opencollective&style=social"></a>
 </p>

-**Cinny** is a Matrix client focusing primarily on simple, elegant and secure interface. The main goal is to have a client that is easy on end user 
-and feels a modern chat application.
-
- [Contributing](./CONTRIBUTING.md)
+A Matrix client focusing primarily on simple, elegant and secure interface. The main goal is to have an instant messaging application that is easy on people and has a modern touch.
 - [Roadmap](https://github.com/ajbura/cinny/projects/11)
+- [Contributing](./CONTRIBUTING.md)

-## Building and Running
+## Getting started
+Web app is available at https://app.cinny.in and gets updated on each new release. The `dev` branch is continuously deployed at https://dev.cinny.in but keep in mind that it could have things broken.

-### Running pre-compiled
+You can also download our desktop app from [cinny-desktop repository](https://github.com/cinnyapp/cinny-desktop).

-A tarball of pre-compiled version of the app is provided with each [release](https://github.com/ajbura/cinny/releases).
-You can serve the application with a webserver of your choosing by simply copying `dist/` directory to the webroot.
+To host Cinny on your own, download tarball of the app from [GitHub release](https://github.com/cinnyapp/cinny/releases/latest).
+You can serve the application with a webserver of your choice by simply copying `dist/` directory to the webroot. 
+To set default Homeserver on login and register page, place a customized [`config.json`](config.json) in webroot of your choice.
+
+Alternatively you can just pull the [DockerHub image](https://hub.docker.com/r/ajbura/cinny) by:
+```
+docker pull ajbura/cinny
+```
+or [ghcr image](https://github.com/cinnyapp/cinny/pkgs/container/cinny) by:
+```
+docker pull ghcr.io/cinnyapp/cinny:latest
+```

 <details>
-<summary>PGP Public Key to verify pre-compiled tarball</summary>
+<summary>PGP Public Key to verify tarball</summary>

 ```
 -----BEGIN PGP PUBLIC KEY BLOCK-----
@@ -77,48 +82,39 @@ UeGsouhyuITLwEhScounZDqop+Dx
 ```
 </details>

-### Building from source
+## Local development
 > We recommend using a version manager as versions change very quickly. You will likely need to switch 
 between multiple Node.js versions based on the needs of different projects you're working on. [NVM on windows](https://github.com/coreybutler/nvm-windows#installation--upgrades) on Windows and [nvm](https://github.com/nvm-sh/nvm) on Linux/macOS are pretty good choices. Also recommended nodejs version is 16.15.0 LTS.

-Execute the following commands to compile the app from its source code:
-
+Execute the following commands to start a development server:
 ```sh
 npm ci # Installs all dependencies
+npm start # Serve a development version
+```
+
+To build the app:
+```sh
 npm run build # Compiles the app into the dist/ directory
 ```

-You can then copy the files to a webserver's webroot of your choice.
-
-To serve a development version of the app locally for testing, you need to use the command `npm start`.
-
 ### Running with Docker
-
 This repository includes a Dockerfile, which builds the application from source and serves it with Nginx on port 80. To
 use this locally, you can build the container like so:
-
 ```
 docker build -t cinny:latest .
 ```

 You can then run the container you've built with a command similar to this:
-
 ```
 docker run -p 8080:80 cinny:latest
 ```

-This will forward your `localhost` port 8080 to the container's port 80. You can visit the app in your browser by
-navigating to `http://localhost:8080`.
+This will forward your `localhost` port 8080 to the container's port 80. You can visit the app in your browser by navigating to `http://localhost:8080`.

-Alternatively you can just pull the [DockerHub image](https://hub.docker.com/r/ajbura/cinny) by `docker pull ajbura/cinny`.
-
-### Configuring default Homeserver
-
-To set default Homeserver on login and register page, place a customized [`config.json`](config.json) in webroot of your choice.

 ## License

-Copyright (c) 2021 Ajay Bura (ajbura)
+Copyright (c) 2021-present Ajay Bura (ajbura)

 Code licensed under the MIT License: <http://opensource.org/licenses/MIT>

@@ -1,11 +1,11 @@
 {
  "name": "cinny",
-  "version": "2.1.1",
+  "version": "2.1.3",
  "description": "Yet another matrix client",
  "main": "index.js",
  "engines": {
-    "npm": ">=6.14.8 <=8.5.5",
-    "node": ">=14.15.0 <=17.9.0"
+    "npm": ">=6.14.8",
+    "node": ">=14.15.0"
  },
  "scripts": {
    "start": "webpack serve --config ./webpack.dev.js --open",
@@ -15,8 +15,9 @@
  "author": "Ajay Bura",
  "license": "MIT",
  "dependencies": {
-    "@fontsource/inter": "^4.5.11",
-    "@fontsource/roboto": "^4.5.7",
+    "@fontsource/inter": "^4.5.12",
+    "@fontsource/roboto": "^4.5.8",
+    "@khanacademy/simple-markdown": "^0.8.3",
    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.12.tgz",
    "@tippyjs/react": "^4.2.6",
    "babel-polyfill": "^6.26.0",
@@ -27,17 +28,11 @@
    "file-saver": "^2.0.5",
    "flux": "^4.0.3",
    "formik": "^2.2.9",
-    "html-react-parser": "^3.0.1",
-    "katex": "^0.16.0",
+    "html-react-parser": "^3.0.4",
+    "katex": "^0.16.2",
    "linkify-html": "^4.0.0-beta.5",
    "linkifyjs": "^4.0.0-beta.5",
-    "matrix-js-sdk": "^19.2.0",
-    "micromark": "^3.0.10",
-    "micromark-extension-gfm": "^2.0.1",
-    "micromark-extension-math": "^2.0.2",
-    "micromark-util-chunked": "^1.0.0",
-    "micromark-util-resolve-all": "^1.0.0",
-    "micromark-util-symbol": "^1.0.1",
+    "matrix-js-sdk": "^19.4.0",
    "prop-types": "^15.8.1",
    "react": "^17.0.2",
    "react-autosize-textarea": "^7.1.0",
@@ -52,7 +47,7 @@
    "twemoji": "^14.0.2"
  },
  "devDependencies": {
-    "@babel/core": "^7.18.10",
+    "@babel/core": "^7.18.13",
    "@babel/preset-env": "^7.18.10",
    "@babel/preset-react": "^7.18.6",
    "assert": "^2.0.0",
@@ -64,11 +59,11 @@
    "crypto-browserify": "^3.12.0",
    "css-loader": "^6.7.1",
    "css-minimizer-webpack-plugin": "^4.0.0",
-    "eslint": "^8.21.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.30.1",
+    "eslint-plugin-react": "^7.31.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "favicons": "^6.2.2",
    "favicons-webpack-plugin": "^5.0.2",
@@ -76,7 +71,7 @@
    "html-webpack-plugin": "^5.3.1",
    "mini-css-extract-plugin": "^2.6.1",
    "path-browserify": "^1.0.1",
-    "sass": "^1.54.1",
+    "sass": "^1.54.5",
    "sass-loader": "^13.0.2",
    "stream-browserify": "^3.0.0",
    "style-loader": "^3.3.1",
@@ -84,7 +79,7 @@
    "util": "^0.12.4",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.9.3",
+    "webpack-dev-server": "^4.10.1",
    "webpack-merge": "^5.7.3"
  }
 }
@@ -1,4 +1,4 @@
-Graphics (c) by Ajay Bura (ajbura)
+Copyright (c) 2021-present Ajay Bura (ajbura)

 Graphic content is licensed under a
 Creative Commons Attribution 4.0 International License.
@@ -1,12 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g>
-	<polygon points="14,3 14,5 17.8,5 12.9,9.9 14.3,11.3 19,6.6 19,10.2 21,10.2 21,3 	"/>
-	<path d="M3,10.2h2V5h5V3H5C3.9,3,3,3.9,3,5V10.2z"/>
-	<path d="M5,14.2H3V19c0,1.1,0.9,2,2,2h5v-2H5V14.2z"/>
-	<path d="M19,19h-5v2h5c1.1,0,2-0.9,2-2v-4.8h-2V19z"/>
-</g>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 3V5H17.8L12.9 9.9L14.3 11.3L19 6.6V10.2H21V3H14Z" fill="black"/>
+<path d="M5 5H10V3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V14.2H19V19H5V5Z" fill="black"/>
 </svg>
@@ -42,7 +42,6 @@ function RawModal({
      shouldCloseOnEsc={closeFromOutside}
      shouldCloseOnOverlayClick={closeFromOutside}
      shouldReturnFocusAfterClose={false}
-      closeTimeoutMS={300}
    >
      {children}
    </Modal>
@@ -1,33 +1,9 @@
-.ReactModal__Overlay {
-  opacity: 0;
-  transition: opacity 200ms var(--fluid-slide-up);
-}
-.ReactModal__Overlay--after-open{
-  opacity: 1;
-}
-.ReactModal__Overlay--before-close{
-  opacity: 0;
-}
-
-.ReactModal__Content {
-  transform: translateY(100%);
-  transition: transform 200ms var(--fluid-slide-up);
-}
-
-.ReactModal__Content--after-open{
-  transform: translateY(0);
-}
-
-.ReactModal__Content--before-close{
-  transform: translateY(100%);
-}
-
 .raw-modal {
  --small-modal-width: 525px;
  --medium-modal-width: 712px;
  --large-modal-width: 1024px;

-
+  position: relative;
  width: 100%;
  max-height: 100%;
  border-radius: var(--bo-radius);
@@ -60,4 +36,31 @@
    height: 100%;
    background-color: var(--bg-overlay);
  }
-}
+}
+
+.ReactModal__Overlay {
+  animation: raw-modal--overlay 150ms;
+}
+
+.ReactModal__Content {
+  animation: raw-modal--content 150ms;
+}
+
+@keyframes raw-modal--content {
+  0% {
+    transform: translateY(100px);
+    opacity: .5;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes raw-modal--overlay {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './ImageLightbox.scss';
+import FileSaver from 'file-saver';
+
+import Text from '../../atoms/text/Text';
+import RawModal from '../../atoms/modal/RawModal';
+import IconButton from '../../atoms/button/IconButton';
+
+import DownloadSVG from '../../../../public/res/ic/outlined/download.svg';
+import ExternalSVG from '../../../../public/res/ic/outlined/external.svg';
+
+function ImageLightbox({
+  url, alt, isOpen, onRequestClose,
+}) {
+  const handleDownload = () => {
+    FileSaver.saveAs(url, alt);
+  };
+
+  return (
+    <RawModal
+      className="image-lightbox__modal"
+      overlayClassName="image-lightbox__overlay"
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      size="large"
+    >
+      <div className="image-lightbox__header">
+        <Text variant="b2" weight="medium">{alt}</Text>
+        <IconButton onClick={() => window.open(url)} size="small" src={ExternalSVG} />
+        <IconButton onClick={handleDownload} size="small" src={DownloadSVG} />
+      </div>
+      <div className="image-lightbox__content">
+        <img src={url} alt={alt} />
+      </div>
+    </RawModal>
+  );
+}
+
+ImageLightbox.propTypes = {
+  url: PropTypes.string.isRequired,
+  alt: PropTypes.string.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  onRequestClose: PropTypes.func.isRequired,
+};
+
+export default ImageLightbox;
@@ -0,0 +1,50 @@
+@use '../../partials/flex';
+@use '../../partials/text';
+
+.image-lightbox__modal {
+  box-shadow: none;
+  width: unset;
+  gap: var(--sp-normal);
+
+  border-radius: 0;
+  pointer-events: none;
+
+  & .text {
+    color: white;
+  }
+  & .ic-raw {
+    background-color: white;
+  }
+}
+
+.image-lightbox__overlay {
+  background-color: var(--bg-overlay-low);
+}
+
+
+.image-lightbox__header > *,
+.image-lightbox__content > * {
+  pointer-events: all;
+}
+.image-lightbox__header {
+  display: flex;
+  align-items: center;
+
+  & > .text {
+    @extend .cp-fx__item-one;
+    @extend .cp-txt__ellipsis;
+  }
+}
+.image-lightbox__content {
+  display: flex;
+  justify-content: center;
+  max-height: 80vh;
+
+  & img {
+    background-color: var(--bg-surface-low);
+    object-fit: contain;
+    max-width: 100%;
+    max-height: 100%;
+    border-radius: var(--bo-radius);
+  }
+}
@@ -118,7 +118,7 @@ function useImagePackHandles(pack, sendPackContent) {

  const getNewKey = (key) => {
    if (typeof key !== 'string') return undefined;
-    let newKey = key?.replace(/\s/g, '-');
+    let newKey = key?.replace(/\s/g, '_');
    if (pack.getImages().get(newKey)) {
      newKey = suffixRename(
        newKey,
@@ -41,11 +41,13 @@ function ImagePackUpload({ onUpload }) {
    const img = evt.target.files[0];
    if (!img) return;
    setImgFile(img);
+    shortcodeRef.current.value = img.name.slice(0, img.name.indexOf('.'));
    shortcodeRef.current.focus();
  };
  const handleRemove = () => {
    setImgFile(null);
    inputRef.current.value = null;
+    shortcodeRef.current.value = '';
  };

  return (
@@ -8,47 +8,13 @@ import { BlurhashCanvas } from 'react-blurhash';
 import Text from '../../atoms/text/Text';
 import IconButton from '../../atoms/button/IconButton';
 import Spinner from '../../atoms/spinner/Spinner';
+import ImageLightbox from '../image-lightbox/ImageLightbox';

 import DownloadSVG from '../../../../public/res/ic/outlined/download.svg';
 import ExternalSVG from '../../../../public/res/ic/outlined/external.svg';
 import PlaySVG from '../../../../public/res/ic/outlined/play.svg';

-// https://github.com/matrix-org/matrix-react-sdk/blob/cd15e08fc285da42134817cce50de8011809cd53/src/utils/blobs.ts#L73
-const ALLOWED_BLOB_MIMETYPES = [
-  'image/jpeg',
-  'image/gif',
-  'image/png',
-  'image/apng',
-  'image/webp',
-  'image/avif',
-
-  'video/mp4',
-  'video/webm',
-  'video/ogg',
-  'video/quicktime',
-
-  'audio/mp4',
-  'audio/webm',
-  'audio/aac',
-  'audio/mpeg',
-  'audio/ogg',
-  'audio/wave',
-  'audio/wav',
-  'audio/x-wav',
-  'audio/x-pn-wav',
-  'audio/flac',
-  'audio/x-flac',
-];
-function getBlobSafeMimeType(mimetype) {
-  if (!ALLOWED_BLOB_MIMETYPES.includes(mimetype)) {
-    return 'application/octet-stream';
-  }
-  // Required for Chromium browsers
-  if (mimetype === 'video/quicktime') {
-    return 'video/mp4';
-  }
-  return mimetype;
-}
+import { getBlobSafeMimeType } from '../../../util/mimetypes';

 async function getDecryptedBlob(response, type, decryptData) {
  const arrayBuffer = await response.arrayBuffer();
@@ -159,6 +125,7 @@ function Image({
 }) {
  const [url, setUrl] = useState(null);
  const [blur, setBlur] = useState(true);
+  const [lightbox, setLightbox] = useState(false);

  useEffect(() => {
    let unmounted = false;
@@ -173,14 +140,42 @@ function Image({
    };
  }, []);

+  const toggleLightbox = () => {
+    if (!url) return;
+    setLightbox(!lightbox);
+  };
+
  return (
-    <div className="file-container">
-      <FileHeader name={name} link={url || link} type={type} external />
-      <div style={{ height: width !== null ? getNativeHeight(width, height) : 'unset' }} className="image-container">
-        { blurhash && blur && <BlurhashCanvas hash={blurhash} punch={1} />}
-        { url !== null && <img onLoad={() => setBlur(false)} src={url || link} alt={name} />}
+    <>
+      <div className="file-container">
+        <div
+          style={{ height: width !== null ? getNativeHeight(width, height) : 'unset' }}
+          className="image-container"
+          role="button"
+          tabIndex="0"
+          onClick={toggleLightbox}
+          onKeyDown={toggleLightbox}
+        >
+          { blurhash && blur && <BlurhashCanvas hash={blurhash} punch={1} />}
+          { url !== null && (
+            <img
+              style={{ display: blur ? 'none' : 'unset' }}
+              onLoad={() => setBlur(false)}
+              src={url || link}
+              alt={name}
+            />
+          )}
+        </div>
      </div>
-    </div>
+      {url && (
+        <ImageLightbox
+          url={url}
+          alt={name}
+          isOpen={lightbox}
+          onRequestClose={toggleLightbox}
+        />
+      )}
+    </>
  );
 }
 Image.defaultProps = {
@@ -227,11 +222,11 @@ function Sticker({
 Sticker.defaultProps = {
  file: null,
  type: '',
+  width: null,
+  height: null,
 };
 Sticker.propTypes = {
  name: PropTypes.string.isRequired,
-  width: null,
-  height: null,
  width: PropTypes.number,
  height: PropTypes.number,
  link: PropTypes.string.isRequired,
@@ -289,6 +284,7 @@ function Video({
  const [isLoading, setIsLoading] = useState(false);
  const [url, setUrl] = useState(null);
  const [thumbUrl, setThumbUrl] = useState(null);
+  const [blur, setBlur] = useState(true);

  useEffect(() => {
    let unmounted = false;
@@ -303,16 +299,16 @@ function Video({
    };
  }, []);

-  async function loadVideo() {
+  const loadVideo = async () => {
    const myUrl = await getUrl(link, type, file);
    setUrl(myUrl);
    setIsLoading(false);
-  }
+  };

-  function handlePlayVideo() {
+  const handlePlayVideo = () => {
    setIsLoading(true);
    loadVideo();
-  }
+  };

  return (
    <div className="file-container">
@@ -323,15 +319,17 @@ function Video({
        }}
        className="video-container"
      >
-        { url === null && blurhash && <BlurhashCanvas hash={blurhash} punch={1} />}
-        { url === null && thumbUrl !== null && (
-          /* eslint-disable-next-line jsx-a11y/alt-text */
-          <img src={thumbUrl} />
-        )}
-        { url === null && isLoading && <Spinner size="small" /> }
-        { url === null && !isLoading && <IconButton onClick={handlePlayVideo} tooltip="Play video" src={PlaySVG} />}
-        { url !== null && (
-        /* eslint-disable-next-line jsx-a11y/media-has-caption */
+        { url === null ? (
+          <>
+            { blurhash && blur && <BlurhashCanvas hash={blurhash} punch={1} />}
+            { thumbUrl !== null && (
+              <img style={{ display: blur ? 'none' : 'unset' }} src={thumbUrl} onLoad={() => setBlur(false)} alt={name} />
+            )}
+            {isLoading && <Spinner size="small" />}
+            {!isLoading && <IconButton onClick={handlePlayVideo} tooltip="Play video" src={PlaySVG} />}
+          </>
+        ) : (
+          /* eslint-disable-next-line jsx-a11y/media-has-caption */
          <video autoPlay controls poster={thumbUrl}>
            <source src={url} type={getBlobSafeMimeType(type)} />
          </video>
@@ -27,14 +27,21 @@
  white-space: initial;
 }

+.sticker-container {
+  display: inline-flex;
+  max-width: 128px;
+  width: 100%;
+  & img {
+    width: 100% !important;
+  }
+}
+
 .image-container,
 .video-container,
 .audio-container {
  font-size: 0;
  line-height: 0;

-  position: relative;
-
  display: flex;
  justify-content: center;
  align-items: center;
@@ -48,7 +55,6 @@
 .video-container {
  & img,
  & canvas {
-    position: absolute;
    max-width: unset !important;
    width: 100% !important;
    height: 100%;
@@ -56,19 +62,21 @@
    margin: 0 !important;
  }
 }
-
-.sticker-container {
-  display: inline-flex;
-  max-width: 128px;
-  width: 100%;
-  & img {
-    width: 100% !important;
+.image-container {
+  max-height: 460px;
+  img {
+    cursor: pointer;
+    object-fit: cover;
  }
 }

 .video-container {
+  position: relative;
  & .ic-btn-surface {
    background-color: var(--bg-surface-low);
+  }
+  & .ic-btn-surface,
+  & .donut-spinner {
    position: absolute;
  }
  video {
@@ -37,6 +37,7 @@ import CmdIC from '../../../../public/res/ic/outlined/cmd.svg';
 import BinIC from '../../../../public/res/ic/outlined/bin.svg';

 import { confirmDialog } from '../confirm-dialog/ConfirmDialog';
+import { getBlobSafeMimeType } from '../../../util/mimetypes';

 function PlaceholderMessage() {
  return (
@@ -206,7 +207,13 @@ const MessageBody = React.memo(({
  let content = null;
  if (isCustomHTML) {
    try {
-      content = twemojify(sanitizeCustomHtml(body), undefined, true, false, true);
+      content = twemojify(
+        sanitizeCustomHtml(initMatrix.matrixClient, body),
+        undefined,
+        true,
+        false,
+        true,
+      );
    } catch {
      console.error('Malformed custom html: ', body);
      content = twemojify(body, undefined);
@@ -283,6 +290,11 @@ function MessageEdit({ body, onSave, onCancel }) {
  }, []);

  const handleKeyDown = (e) => {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      onCancel();
+    }
+
    if (e.key === 'Enter' && e.shiftKey === false) {
      e.preventDefault();
      onSave(editInputRef.current.value);
@@ -615,7 +627,12 @@ function genMediaContent(mE) {
  if (typeof mediaMXC === 'undefined' || mediaMXC === '') return <span style={{ color: 'var(--bg-danger)' }}>Malformed event</span>;

  let msgType = mE.getContent()?.msgtype;
-  if (mE.getType() === 'm.sticker') msgType = 'm.sticker';
+  const safeMimetype = getBlobSafeMimeType(mContent.info?.mimetype);
+  if (mE.getType() === 'm.sticker') {
+    msgType = 'm.sticker';
+  } else if (safeMimetype === 'application/octet-stream') {
+    msgType = 'm.file';
+  }

  const blurhash = mContent?.info?.['xyz.amorgan.blurhash'];

@@ -697,9 +714,9 @@ function getEditedBody(editedMEvent) {
 }

 function Message({
-  mEvent, isBodyOnly, roomTimeline, focus, fullTime,
+  mEvent, isBodyOnly, roomTimeline,
+  focus, fullTime, isEdit, setEdit, cancelEdit,
 }) {
-  const [isEditing, setIsEditing] = useState(false);
  const roomId = mEvent.getRoomId();
  const { editedTimeline, reactionTimeline } = roomTimeline ?? {};

@@ -714,7 +731,7 @@ function Message({
  const avatarSrc = mEvent.sender?.getAvatarUrl(initMatrix.matrixClient.baseUrl, 36, 36, 'crop') ?? null;

  const edit = useCallback(() => {
-    setIsEditing(true);
+    setEdit(eventId);
  }, []);
  const reply = useCallback(() => {
    replyTo(senderId, mEvent.getId(), body);
@@ -771,7 +788,7 @@ function Message({
            eventId={mEvent.replyEventId}
          />
        )}
-        {!isEditing && (
+        {!isEdit && (
          <MessageBody
            senderName={username}
            isCustomHTML={isCustomHTML}
@@ -780,22 +797,22 @@ function Message({
            isEdited={isEdited}
          />
        )}
-        {isEditing && (
+        {isEdit && (
          <MessageEdit
            body={body}
            onSave={(newBody) => {
              if (newBody !== body) {
                initMatrix.roomsInput.sendEditedMessage(roomId, mEvent, newBody);
              }
-              setIsEditing(false);
+              cancelEdit();
            }}
-            onCancel={() => setIsEditing(false)}
+            onCancel={cancelEdit}
          />
        )}
        {haveReactions && (
          <MessageReactionGroup roomTimeline={roomTimeline} mEvent={mEvent} />
        )}
-        {roomTimeline && !isEditing && (
+        {roomTimeline && !isEdit && (
          <MessageOptions
            roomTimeline={roomTimeline}
            mEvent={mEvent}
@@ -812,6 +829,9 @@ Message.defaultProps = {
  focus: false,
  roomTimeline: null,
  fullTime: false,
+  isEdit: false,
+  setEdit: null,
+  cancelEdit: null,
 };
 Message.propTypes = {
  mEvent: PropTypes.shape({}).isRequired,
@@ -819,6 +839,9 @@ Message.propTypes = {
  roomTimeline: PropTypes.shape({}),
  focus: PropTypes.bool,
  fullTime: PropTypes.bool,
+  isEdit: PropTypes.bool,
+  setEdit: PropTypes.func,
+  cancelEdit: PropTypes.func,
 };

 export { Message, MessageReply, PlaceholderMessage };
@@ -15,7 +15,7 @@
      display: flex;
    }
  }
-  
+
  &__avatar-container {
    padding-top: 6px;
    @include dir.side(margin, 0, var(--sp-tight));
@@ -101,7 +101,6 @@
  }
 }

-
 .message__header {
  display: flex;
  align-items: baseline;
@@ -115,10 +114,16 @@
      @extend .cp-txt__ellipsis;
      color: inherit;
    }
-    & > span:last-child { display: none; }
+    & > span:last-child {
+      display: none;
+    }
    &:hover {
-      & > span:first-child { display: none; }
-      & > span:last-child { display: block; }
+      & > span:first-child {
+        display: none;
+      }
+      & > span:last-child {
+        display: block;
+      }
    }
  }

@@ -168,7 +173,11 @@
  & > .text > a {
    white-space: initial !important;
  }
-  
+
+  & p:not(:last-child) {
+    margin-bottom: var(--sp-normal);
+  }
+
  & span[data-mx-pill] {
    background-color: hsla(0, 0%, 64%, 0.15);
    padding: 0 2px;
@@ -191,7 +200,7 @@
  & span[data-mx-spoiler] {
    border-radius: 4px;
    background-color: rgba(124, 124, 124, 0.5);
-    color:transparent;
+    color: transparent;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
@@ -220,6 +229,8 @@
  padding: var(--sp-extra-tight) 0;
  &-btns button {
    margin: var(--sp-tight) 0 0 0;
+    padding: var(--sp-ultra-tight) var(--sp-tight);
+    min-width: 0;
    @include dir.side(margin, 0, var(--sp-tight));
  }
 }
@@ -255,9 +266,9 @@
  }
  &-count {
    margin: 0 var(--sp-ultra-tight);
-    color: var(--tc-surface-normal)
+    color: var(--tc-surface-normal);
  }
-  &-tooltip .react-emoji  {
+  &-tooltip .react-emoji {
    width: 16px;
    height: 16px;
    margin: 0 var(--sp-ultra-tight);
@@ -270,19 +281,19 @@
    }
  }
  &:active {
-    background-color: var(--bg-surface-active)
+    background-color: var(--bg-surface-active);
  }

  &--active {
    background-color: var(--bg-caution-active);
-    
+
    @media (hover: hover) {
      &:hover {
        background-color: var(--bg-caution-hover);
      }
    }
    &:active {
-      background-color: var(--bg-caution-active)
+      background-color: var(--bg-caution-active);
    }
  }
 }
@@ -303,7 +314,12 @@

 // markdown formating
 .message__body {
-  & h1, h2, h3, h4, h5, h6 {
+  & h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
    margin: 0;
    margin-bottom: var(--sp-ultra-tight);
    font-weight: var(--fw-medium);
@@ -424,7 +440,8 @@
    @include scrollbar.scroll__h;
    @include scrollbar.scroll--auto-hide;

-    & td, & th {
+    & td,
+    & th {
      padding: var(--sp-extra-tight);
      border: 1px solid var(--bg-surface-border);
      border-width: 0 1px 1px 0;
@@ -432,11 +449,11 @@
      &:last-child {
        border-width: 0;
        border-bottom-width: 1px;
-        [dir=rtl] & {
+        [dir='rtl'] & {
          border-width: 0 1px 1px 0;
        }
      }
-      [dir=rtl] &:first-child {
+      [dir='rtl'] &:first-child {
        border-width: 0;
        border-bottom-width: 1px;
      }
@@ -38,10 +38,10 @@ function SpaceOptions({ roomId, afterOptionSelect }) {

  const handleMarkAsRead = () => {
    const spaceChildren = roomList.getCategorizedSpaces([roomId]);
-    spaceChildren?.forEach((childIds, spaceId) => {
+    spaceChildren?.forEach((childIds) => {
      childIds?.forEach((childId) => {
        markAsRead(childId);
-      })
+      });
    });
    afterOptionSelect();
  };
@@ -252,6 +252,58 @@ function EmojiBoard({ onSelect, searchRef }) {

  return (
    <div id="emoji-board" className="emoji-board">
+      <ScrollView invisible>
+        <div className="emoji-board__nav">
+          {recentEmojis.length > 0 && (
+            <IconButton
+              onClick={() => openGroup(0)}
+              src={RecentClockIC}
+              tooltip="Recent"
+              tooltipPlacement="left"
+            />
+          )}
+          <div className="emoji-board__nav-custom">
+            {
+              availableEmojis.map((pack) => {
+                const src = initMatrix.matrixClient
+                  .mxcUrlToHttp(pack.avatarUrl ?? pack.getEmojis()[0].mxc);
+                return (
+                  <IconButton
+                    onClick={() => openGroup(recentOffset + pack.packIndex)}
+                    src={src}
+                    key={pack.packIndex}
+                    tooltip={pack.displayName ?? 'Unknown'}
+                    tooltipPlacement="left"
+                    isImage
+                  />
+                );
+              })
+            }
+          </div>
+          <div className="emoji-board__nav-twemoji">
+            {
+              [
+                [0, EmojiIC, 'Smilies'],
+                [1, DogIC, 'Animals'],
+                [2, CupIC, 'Food'],
+                [3, BallIC, 'Activities'],
+                [4, PhotoIC, 'Travel'],
+                [5, BulbIC, 'Objects'],
+                [6, PeaceIC, 'Symbols'],
+                [7, FlagIC, 'Flags'],
+              ].map(([indx, ico, name]) => (
+                <IconButton
+                  onClick={() => openGroup(recentOffset + availableEmojis.length + indx)}
+                  key={indx}
+                  src={ico}
+                  tooltip={name}
+                  tooltipPlacement="left"
+                />
+              ))
+            }
+          </div>
+        </div>
+      </ScrollView>
      <div className="emoji-board__content">
        <div className="emoji-board__content__search">
          <RawIcon size="small" src={SearchIC} />
@@ -285,58 +337,6 @@ function EmojiBoard({ onSelect, searchRef }) {
          <Text>:slight_smile:</Text>
        </div>
      </div>
-      <ScrollView invisible>
-        <div className="emoji-board__nav">
-          {recentEmojis.length > 0 && (
-            <IconButton
-              onClick={() => openGroup(0)}
-              src={RecentClockIC}
-              tooltip="Recent"
-              tooltipPlacement="right"
-            />
-          )}
-          <div className="emoji-board__nav-custom">
-            {
-              availableEmojis.map((pack) => {
-                const src = initMatrix.matrixClient
-                  .mxcUrlToHttp(pack.avatarUrl ?? pack.getEmojis()[0].mxc);
-                return (
-                  <IconButton
-                    onClick={() => openGroup(recentOffset + pack.packIndex)}
-                    src={src}
-                    key={pack.packIndex}
-                    tooltip={pack.displayName ?? 'Unknown'}
-                    tooltipPlacement="right"
-                    isImage
-                  />
-                );
-              })
-            }
-          </div>
-          <div className="emoji-board__nav-twemoji">
-            {
-              [
-                [0, EmojiIC, 'Smilies'],
-                [1, DogIC, 'Animals'],
-                [2, CupIC, 'Food'],
-                [3, BallIC, 'Activities'],
-                [4, PhotoIC, 'Travel'],
-                [5, BulbIC, 'Objects'],
-                [6, PeaceIC, 'Symbols'],
-                [7, FlagIC, 'Flags'],
-              ].map(([indx, ico, name]) => (
-                <IconButton
-                  onClick={() => openGroup(recentOffset + availableEmojis.length + indx)}
-                  key={indx}
-                  src={ico}
-                  tooltip={name}
-                  tooltipPlacement="right"
-                />
-              ))
-            }
-          </div>
-        </div>
-      </ScrollView>
    </div>
  );
 }
@@ -25,8 +25,7 @@

    min-height: 100%;
    padding: 4px 6px;
-    background-color: var(--bg-surface-low);
-    @include dir.side(border, 1px solid var(--bg-surface-border), none);
+    @include dir.side(border, none, 1px solid var(--bg-surface-border));

    position: relative;
    
@@ -122,8 +121,11 @@
    @include dir.side(margin, var(--left-margin), var(--right-margin));
  }
  & .emoji {
-    width: 38px;
-    height: 38px;
+    max-width: 38px;
+    max-height: 38px;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
    object-fit: contain;
    padding: var(--emoji-padding);
    cursor: pointer;
@@ -177,7 +177,7 @@ function getUserImagePack(mx) {
  }

  const userImagePack = ImagePack.parsePack(mx.getUserId(), accountDataEmoji.event.content);
-  userImagePack.displayName ??= 'Personal Emoji';
+  if (userImagePack) userImagePack.displayName ??= 'Personal Emoji';
  return userImagePack;
 }

@@ -6,7 +6,7 @@ import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import navigation from '../../../client/state/navigation';
 import { join } from '../../../client/action/room';
-import { selectRoom, selectSpace } from '../../../client/action/navigation';
+import { selectRoom, selectTab } from '../../../client/action/navigation';

 import Text from '../../atoms/text/Text';
 import IconButton from '../../atoms/button/IconButton';
@@ -32,7 +32,7 @@ function JoinAliasContent({ term, requestClose }) {
  const openRoom = (roomId) => {
    const room = mx.getRoom(roomId);
    if (!room) return;
-    if (room.isSpaceRoom()) selectSpace(roomId);
+    if (room.isSpaceRoom()) selectTab(roomId);
    else selectRoom(roomId);
    requestClose();
  };
@@ -6,7 +6,7 @@ import { twemojify } from '../../../util/twemojify';

 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
-import { selectSpace } from '../../../client/action/navigation';
+import { selectTab, selectSpace } from '../../../client/action/navigation';
 import navigation from '../../../client/state/navigation';
 import { abbreviateNumber } from '../../../util/common';

@@ -107,7 +107,10 @@ function DrawerBreadcrumb({ spaceId }) {
                  { index !== 0 && <RawIcon size="extra-small" src={ChevronRightIC} />}
                  <Button
                    className={index === spacePath.length - 1 ? 'drawer-breadcrumb__btn--selected' : ''}
-                    onClick={() => selectSpace(id)}
+                    onClick={() => {
+                      if (id === cons.tabs.HOME) selectTab(id);
+                      else selectSpace(id);
+                    }}
                  >
                    <Text variant="b2">{id === cons.tabs.HOME ? 'Home' : twemojify(mx.getRoom(id).name)}</Text>
                    { noti !== null && (
@@ -30,7 +30,7 @@ function Home({ spaceId }) {
    roomIds = spaceChildIds.filter((roomId) => rooms.has(roomId));
    directIds = spaceChildIds.filter((roomId) => directs.has(roomId));
  } else {
-    spaceIds = roomList.getOrphanSpaces();
+    spaceIds = roomList.getOrphanSpaces().filter((id) => !accountData.spaceShortcut.has(id));
    roomIds = roomList.getOrphanRooms();
  }

@@ -80,10 +80,10 @@ function Home({ spaceId }) {
        <RoomsCategory name="People" roomIds={directIds.sort(roomIdByActivity)} drawerPostie={drawerPostie} />
      )}

-      { isCategorized && [...categories].map(([catId, childIds]) => {
+      { isCategorized && [...categories.keys()].sort(roomIdByAtoZ).map((catId) => {
        const rms = [];
        const dms = [];
-        childIds.forEach((id) => {
+        categories.get(catId).forEach((id) => {
          if (directs.has(id)) dms.push(id);
          else rms.push(id);
        });
@@ -11,7 +11,7 @@ import { selectRoom, openReusableContextMenu } from '../../../client/action/navi
 import * as roomActions from '../../../client/action/room';

 import {
-  getUsername, getUsernameOfRoomMember, getPowerLabel, hasDMWith, hasDevices
+  getUsername, getUsernameOfRoomMember, getPowerLabel, hasDMWith, hasDevices,
 } from '../../../util/matrixUtil';
 import { getEventCords } from '../../../util/common';
 import colorMXID from '../../../util/colorMXID';
@@ -209,19 +209,18 @@ function ProfileFooter({ roomId, userId, onRequestClose }) {
  };

  const toggleIgnore = async () => {
-    const ignoredUsers = mx.getIgnoredUsers();
-    const uIndex = ignoredUsers.indexOf(userId);
-    if (uIndex >= 0) {
-      if (uIndex === -1) return;
-      ignoredUsers.splice(uIndex, 1);
-    } else ignoredUsers.push(userId);
+    const isIgnored = mx.getIgnoredUsers().includes(userId);

    try {
      setIsIgnoring(true);
-      await mx.setIgnoredUsers(ignoredUsers);
+      if (isIgnored) {
+        await roomActions.unignore([userId]);
+      } else {
+        await roomActions.ignore([userId]);
+      }

      if (isMountedRef.current === false) return;
-      setIsUserIgnored(uIndex < 0);
+      setIsUserIgnored(!isIgnored);
      setIsIgnoring(false);
    } catch {
      setIsIgnoring(false);
@@ -8,13 +8,6 @@ import twemoji from 'twemoji';
 import { twemojify } from '../../../util/twemojify';

 import initMatrix from '../../../client/initMatrix';
-import { toggleMarkdown } from '../../../client/action/settings';
-import * as roomActions from '../../../client/action/room';
-import {
-  openCreateRoom,
-  openPublicRooms,
-  openInviteUser,
-} from '../../../client/action/navigation';
 import { getEmojiForCompletion } from '../emoji-board/custom-emoji';
 import AsyncSearch from '../../../util/AsyncSearch';

@@ -22,37 +15,7 @@ import Text from '../../atoms/text/Text';
 import ScrollView from '../../atoms/scroll/ScrollView';
 import FollowingMembers from '../../molecules/following-members/FollowingMembers';
 import { addRecentEmoji, getRecentEmojis } from '../emoji-board/recent';
-
-const commands = [{
-  name: 'markdown',
-  description: 'Toggle markdown for messages.',
-  exe: () => toggleMarkdown(),
-}, {
-  name: 'startDM',
-  isOptions: true,
-  description: 'Start direct message with user. Example: /startDM/@johndoe.matrix.org',
-  exe: (roomId, searchTerm) => openInviteUser(undefined, searchTerm),
-}, {
-  name: 'createRoom',
-  description: 'Create new room',
-  exe: () => openCreateRoom(),
-}, {
-  name: 'join',
-  isOptions: true,
-  description: 'Join room with alias. Example: /join/#cinny:matrix.org',
-  exe: (roomId, searchTerm) => openPublicRooms(searchTerm),
-}, {
-  name: 'leave',
-  description: 'Leave current room',
-  exe: (roomId) => {
-    roomActions.leave(roomId);
-  },
-}, {
-  name: 'invite',
-  isOptions: true,
-  description: 'Invite user to room. Example: /invite/@johndoe:matrix.org',
-  exe: (roomId, searchTerm) => openInviteUser(roomId, searchTerm),
-}];
+import commands from './commands';

 function CmdItem({ onClick, children }) {
  return (
@@ -71,16 +34,16 @@ function renderSuggestions({ prefix, option, suggestions }, fireCmd) {
    const cmdOptString = (typeof option === 'string') ? `/${option}` : '/?';
    return cmds.map((cmd) => (
      <CmdItem
-        key={cmd.name}
+        key={cmd}
        onClick={() => {
          fireCmd({
            prefix: cmdPrefix,
            option,
-            result: cmd,
+            result: commands[cmd],
          });
        }}
      >
-        <Text variant="b2">{`${cmd.name}${cmd.isOptions ? cmdOptString : ''}`}</Text>
+        <Text variant="b2">{`${cmd}${cmd.isOptions ? cmdOptString : ''}`}</Text>
      </CmdItem>
    ));
  }
@@ -209,8 +172,8 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
    const mx = initMatrix.matrixClient;
    const setupSearch = {
      '/': () => {
-        asyncSearch.setup(commands, { keys: ['name'], isContain: true });
-        setCmd({ prefix, suggestions: commands });
+        asyncSearch.setup(Object.keys(commands), { isContain: true });
+        setCmd({ prefix, suggestions: Object.keys(commands) });
      },
      ':': () => {
        const parentIds = initMatrix.roomList.getAllParentSpaces(roomId);
@@ -242,8 +205,9 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
  }
  function fireCmd(myCmd) {
    if (myCmd.prefix === '/') {
-      myCmd.result.exe(roomId, myCmd.option);
-      viewEvent.emit('cmd_fired');
+      viewEvent.emit('cmd_fired', {
+        replace: `/${myCmd.result.name}`,
+      });
    }
    if (myCmd.prefix === ':') {
      if (!myCmd.result.mxc) addRecentEmoji(myCmd.result.unicode);
@@ -118,7 +118,15 @@ function handleOnClickCapture(e) {
  }
 }

-function renderEvent(roomTimeline, mEvent, prevMEvent, isFocus = false) {
+function renderEvent(
+  roomTimeline,
+  mEvent,
+  prevMEvent,
+  isFocus,
+  isEdit,
+  setEdit,
+  cancelEdit,
+) {
  const isBodyOnly = (prevMEvent !== null
    && prevMEvent.getSender() === mEvent.getSender()
    && prevMEvent.getType() !== 'm.room.member'
@@ -147,6 +155,9 @@ function renderEvent(roomTimeline, mEvent, prevMEvent, isFocus = false) {
      roomTimeline={roomTimeline}
      focus={isFocus}
      fullTime={false}
+      isEdit={isEdit}
+      setEdit={setEdit}
+      cancelEdit={cancelEdit}
    />
  );
 }
@@ -386,6 +397,8 @@ function RoomViewContent({ eventId, roomTimeline }) {
  const timelineSVRef = useRef(null);
  const timelineScrollRef = useRef(null);
  const eventLimitRef = useRef(null);
+  const [editEventId, setEditEventId] = useState(null);
+  const cancelEdit = () => setEditEventId(null);

  const readUptoEvtStore = useStore(roomTimeline);
  const [onLimitUpdate, forceUpdateLimit] = useForceUpdate();
@@ -470,6 +483,42 @@ function RoomViewContent({ eventId, roomTimeline }) {
    }
  }, [newEvent]);

+  const listenKeyboard = useCallback((event) => {
+    if (event.ctrlKey || event.altKey || event.metaKey) return;
+    if (event.key !== 'ArrowUp') return;
+    if (navigation.isRawModalVisible) return;
+
+    if (document.activeElement.id !== 'message-textarea') return;
+    if (document.activeElement.value !== '') return;
+
+    const {
+      timeline: tl, activeTimeline, liveTimeline, matrixClient: mx,
+    } = roomTimeline;
+    const limit = eventLimitRef.current;
+    if (activeTimeline !== liveTimeline) return;
+    if (tl.length > limit.length) return;
+
+    const mTypes = ['m.text'];
+    for (let i = tl.length - 1; i >= 0; i -= 1) {
+      const mE = tl[i];
+      if (
+        mE.getSender() === mx.getUserId()
+        && mE.getType() === 'm.room.message'
+        && mTypes.includes(mE.getContent()?.msgtype)
+      ) {
+        setEditEventId(mE.getId());
+        return;
+      }
+    }
+  }, [roomTimeline]);
+
+  useEffect(() => {
+    document.body.addEventListener('keydown', listenKeyboard);
+    return () => {
+      document.body.removeEventListener('keydown', listenKeyboard);
+    };
+  }, [listenKeyboard]);
+
  const handleTimelineScroll = (event) => {
    const timelineScroll = timelineScrollRef.current;
    if (!event.target) return;
@@ -535,7 +584,15 @@ function RoomViewContent({ eventId, roomTimeline }) {
      const isFocus = focusId === mEvent.getId();
      if (isFocus) jumpToItemIndex = itemCountIndex;

-      tl.push(renderEvent(roomTimeline, mEvent, isNewEvent ? null : prevMEvent, isFocus));
+      tl.push(renderEvent(
+        roomTimeline,
+        mEvent,
+        isNewEvent ? null : prevMEvent,
+        isFocus,
+        editEventId === mEvent.getId(),
+        setEditEventId,
+        cancelEdit,
+      ));
      itemCountIndex += 1;
    }
    if (roomTimeline.canPaginateForward() || limit.length < timeline.length) {
@@ -21,6 +21,7 @@ import ScrollView from '../../atoms/scroll/ScrollView';
 import { MessageReply } from '../../molecules/message/Message';

 import StickerBoard from '../sticker-board/StickerBoard';
+import { confirmDialog } from '../../molecules/confirm-dialog/ConfirmDialog';

 import CirclePlusIC from '../../../../public/res/ic/outlined/circle-plus.svg';
 import EmojiIC from '../../../../public/res/ic/outlined/emoji.svg';
@@ -33,6 +34,8 @@ 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';

+import commands from './commands';
+
 const CMD_REGEX = /(^\/|:|@)(\S*)$/;
 let isTyping = false;
 let isCmdActivated = false;
@@ -182,30 +185,54 @@ function RoomViewInput({
    };
  }, [roomId]);

-  const sendMessage = async () => {
-    requestAnimationFrame(() => deactivateCmdAndEmit());
-    const msgBody = textAreaRef.current.value;
+  const sendBody = async (body, msgType = 'm.text') => {
    if (roomsInput.isSending(roomId)) return;
-    if (msgBody.trim() === '' && attachment === null) return;
    sendIsTyping(false);

-    roomsInput.setMessage(roomId, msgBody);
+    roomsInput.setMessage(roomId, body);
    if (attachment !== null) {
      roomsInput.setAttachment(roomId, attachment);
    }
    textAreaRef.current.disabled = true;
    textAreaRef.current.style.cursor = 'not-allowed';
-    await roomsInput.sendInput(roomId);
+    await roomsInput.sendInput(roomId, msgType);
    textAreaRef.current.disabled = false;
    textAreaRef.current.style.cursor = 'unset';
    focusInput();

    textAreaRef.current.value = roomsInput.getMessage(roomId);
-    viewEvent.emit('message_sent');
    textAreaRef.current.style.height = 'unset';
    if (replyTo !== null) setReplyTo(null);
  };

+  const processCommand = (cmdBody) => {
+    const spaceIndex = cmdBody.indexOf(' ');
+    const cmdName = cmdBody.slice(1, spaceIndex > -1 ? spaceIndex : undefined);
+    const cmdData = spaceIndex > -1 ? cmdBody.slice(spaceIndex + 1) : '';
+    if (!commands[cmdName]) {
+      confirmDialog('Invalid Command', `"${cmdName}" is not a valid command.`, 'Alright');
+      return;
+    }
+    if (['me', 'shrug'].includes(cmdName)) {
+      commands[cmdName].exe(roomId, cmdData, (message, msgType) => sendBody(message, msgType));
+      return;
+    }
+    commands[cmdName].exe(roomId, cmdData);
+  };
+
+  const sendMessage = async () => {
+    requestAnimationFrame(() => deactivateCmdAndEmit());
+    const msgBody = textAreaRef.current.value.trim();
+    if (msgBody.startsWith('/')) {
+      processCommand(msgBody.trim());
+      textAreaRef.current.value = '';
+      textAreaRef.current.style.height = 'unset';
+      return;
+    }
+    if (msgBody === '' && attachment === null) return;
+    sendBody(msgBody, 'm.text');
+  };
+
  const handleSendSticker = async (data) => {
    roomsInput.sendSticker(roomId, data);
  };
@@ -263,6 +290,11 @@ function RoomViewInput({
  };

  const handleKeyDown = (e) => {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      roomsInput.cancelReplyTo(roomId);
+      setReplyTo(null);
+    }
    if (e.key === 'Enter' && e.shiftKey === false) {
      e.preventDefault();
      sendMessage();
@@ -421,6 +453,7 @@ function RoomViewInput({
        />
        <MessageReply
          userId={replyTo.userId}
+          onKeyDown={handleKeyDown}
          name={getUsername(replyTo.userId)}
          color={colorMXID(replyTo.userId)}
          body={replyTo.body}
@@ -70,6 +70,7 @@
  &__preview > img {
    max-height: 40px;
    border-radius: var(--bo-radius);
+    max-width: 150px;
  }
  &__icon {
    padding: var(--sp-extra-tight);
@@ -0,0 +1,211 @@
+import React from 'react';
+import './commands.scss';
+
+import initMatrix from '../../../client/initMatrix';
+import * as roomActions from '../../../client/action/room';
+import { hasDMWith, hasDevices } from '../../../util/matrixUtil';
+import { selectRoom, openReusableDialog } from '../../../client/action/navigation';
+
+import Text from '../../atoms/text/Text';
+import SettingTile from '../../molecules/setting-tile/SettingTile';
+
+const MXID_REG = /^@\S+:\S+$/;
+const ROOM_ID_ALIAS_REG = /^(#|!)\S+:\S+$/;
+const ROOM_ID_REG = /^!\S+:\S+$/;
+const MXC_REG = /^mxc:\/\/\S+$/;
+
+export function processMxidAndReason(data) {
+  let reason;
+  let idData = data;
+  const reasonMatch = data.match(/\s-r\s/);
+  if (reasonMatch) {
+    idData = data.slice(0, reasonMatch.index);
+    reason = data.slice(reasonMatch.index + reasonMatch[0].length);
+    if (reason.trim() === '') reason = undefined;
+  }
+  const rawIds = idData.split(' ');
+  const userIds = rawIds.filter((id) => id.match(MXID_REG));
+  return {
+    userIds,
+    reason,
+  };
+}
+
+const commands = {
+  me: {
+    name: 'me',
+    description: 'Display action',
+    exe: (roomId, data, onSuccess) => {
+      const body = data.trim();
+      if (body === '') return;
+      onSuccess(body, 'm.emote');
+    },
+  },
+  shrug: {
+    name: 'shrug',
+    description: 'Send ¯\\_(ツ)_/¯ as message',
+    exe: (roomId, data, onSuccess) => onSuccess(
+      `¯\\_(ツ)_/¯${data.trim() !== '' ? ` ${data}` : ''}`,
+      'm.text',
+    ),
+  },
+  help: {
+    name: 'help',
+    description: 'View all commands',
+    // eslint-disable-next-line no-use-before-define
+    exe: () => openHelpDialog(),
+  },
+  startdm: {
+    name: 'startdm',
+    description: 'Start DM with user. Example: /startdm userId1 userId2',
+    exe: async (roomId, data) => {
+      const mx = initMatrix.matrixClient;
+      const rawIds = data.split(' ');
+      const userIds = rawIds.filter((id) => id.match(MXID_REG) && id !== mx.getUserId());
+      if (userIds.length === 0) return;
+      if (userIds.length === 1) {
+        const dmRoomId = hasDMWith(userIds[0]);
+        if (dmRoomId) {
+          selectRoom(dmRoomId);
+          return;
+        }
+      }
+      const devices = await Promise.all(userIds.map(hasDevices));
+      const isEncrypt = devices.every((hasDevice) => hasDevice);
+      const result = await roomActions.createDM(userIds, isEncrypt);
+      selectRoom(result.room_id);
+    },
+  },
+  join: {
+    name: 'join',
+    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));
+      roomIds.map((id) => roomActions.join(id));
+    },
+  },
+  leave: {
+    name: 'leave',
+    description: 'Leave current room.',
+    exe: (roomId, data) => {
+      if (data.trim() === '') {
+        roomActions.leave(roomId);
+        return;
+      }
+      const rawIds = data.split(' ');
+      const roomIds = rawIds.filter((id) => id.match(ROOM_ID_REG));
+      roomIds.map((id) => roomActions.leave(id));
+    },
+  },
+  invite: {
+    name: 'invite',
+    description: 'Invite user to room. Example: /invite userId1 userId2 [-r reason]',
+    exe: (roomId, data) => {
+      const { userIds, reason } = processMxidAndReason(data);
+      userIds.map((id) => roomActions.invite(roomId, id, reason));
+    },
+  },
+  disinvite: {
+    name: 'disinvite',
+    description: 'Disinvite user to room. Example: /disinvite userId1 userId2 [-r reason]',
+    exe: (roomId, data) => {
+      const { userIds, reason } = processMxidAndReason(data);
+      userIds.map((id) => roomActions.kick(roomId, id, reason));
+    },
+  },
+  kick: {
+    name: 'kick',
+    description: 'Kick user from room. Example: /kick userId1 userId2 [-r reason]',
+    exe: (roomId, data) => {
+      const { userIds, reason } = processMxidAndReason(data);
+      userIds.map((id) => roomActions.kick(roomId, id, reason));
+    },
+  },
+  ban: {
+    name: 'ban',
+    description: 'Ban user from room. Example: /ban userId1 userId2 [-r reason]',
+    exe: (roomId, data) => {
+      const { userIds, reason } = processMxidAndReason(data);
+      userIds.map((id) => roomActions.ban(roomId, id, reason));
+    },
+  },
+  unban: {
+    name: 'unban',
+    description: 'Unban user from room. Example: /unban userId1 userId2',
+    exe: (roomId, data) => {
+      const rawIds = data.split(' ');
+      const userIds = rawIds.filter((id) => id.match(MXID_REG));
+      userIds.map((id) => roomActions.unban(roomId, id));
+    },
+  },
+  ignore: {
+    name: 'ignore',
+    description: 'Ignore user. Example: /ignore userId1 userId2',
+    exe: (roomId, data) => {
+      const rawIds = data.split(' ');
+      const userIds = rawIds.filter((id) => id.match(MXID_REG));
+      if (userIds.length > 0) roomActions.ignore(userIds);
+    },
+  },
+  unignore: {
+    name: 'unignore',
+    description: 'Unignore user. Example: /unignore userId1 userId2',
+    exe: (roomId, data) => {
+      const rawIds = data.split(' ');
+      const userIds = rawIds.filter((id) => id.match(MXID_REG));
+      if (userIds.length > 0) roomActions.unignore(userIds);
+    },
+  },
+  myroomnick: {
+    name: 'myroomnick',
+    description: 'Change my room nick',
+    exe: (roomId, data) => {
+      const nick = data.trim();
+      if (nick === '') return;
+      roomActions.setMyRoomNick(roomId, nick);
+    },
+  },
+  myroomavatar: {
+    name: 'myroomavatar',
+    description: 'Change my room avatar. Example /myroomavatar mxc://xyzabc',
+    exe: (roomId, data) => {
+      if (data.match(MXC_REG)) {
+        roomActions.setMyRoomAvatar(roomId, data);
+      }
+    },
+  },
+  converttodm: {
+    name: 'converttodm',
+    description: 'Convert room to direct message',
+    exe: (roomId) => {
+      roomActions.convertToDm(roomId);
+    },
+  },
+  converttoroom: {
+    name: 'converttoroom',
+    description: 'Convert direct message to room',
+    exe: (roomId) => {
+      roomActions.convertToRoom(roomId);
+    },
+  },
+};
+
+function openHelpDialog() {
+  openReusableDialog(
+    <Text variant="s1" weight="medium">Commands</Text>,
+    () => (
+      <div className="commands-dialog">
+        {Object.keys(commands).map((cmdName) => (
+          <SettingTile
+            key={cmdName}
+            title={cmdName}
+            content={<Text variant="b3">{commands[cmdName].description}</Text>}
+          />
+        ))}
+      </div>
+    ),
+  );
+}
+
+export default commands;
@@ -0,0 +1,10 @@
+.commands-dialog {
+  & > * {
+    padding: var(--sp-tight) var(--sp-normal);
+    border-bottom: 1px solid var(--bg-surface-border);
+    &:last-child {
+      border-bottom: none;
+      margin-bottom: var(--sp-extra-loose);
+    }
+  }
+}
@@ -164,7 +164,7 @@ function getUsersActionJsx(roomId, userIds, actionStr) {

  const othersCount = userIds.length - MAX_VISIBLE_COUNT;
  // eslint-disable-next-line react/jsx-one-expression-per-line
-  return <>{u1Jsx}, {u2Jsx}, {u3Jsx} and {othersCount} other are {actionStr}</>;
+  return <>{u1Jsx}, {u2Jsx}, {u3Jsx} and {othersCount} others are {actionStr}</>;
 }

 function parseTimelineChange(mEvent) {
@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-import React from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import './StickerBoard.scss';

@@ -9,10 +9,12 @@ import { getRelevantPacks } from '../emoji-board/custom-emoji';

 import Text from '../../atoms/text/Text';
 import ScrollView from '../../atoms/scroll/ScrollView';
+import IconButton from '../../atoms/button/IconButton';

 function StickerBoard({ roomId, onSelect }) {
  const mx = initMatrix.matrixClient;
  const room = mx.getRoom(roomId);
+  const scrollRef = useRef(null);

  const parentIds = initMatrix.roomList.getAllParentSpaces(room.roomId);
  const parentRooms = [...parentIds].map((id) => mx.getRoom(id));
@@ -38,6 +40,11 @@ function StickerBoard({ roomId, onSelect }) {
    onSelect(stickerData);
  };

+  const openGroup = (groupIndex) => {
+    const scrollContent = scrollRef.current.firstElementChild;
+    scrollContent.children[groupIndex].scrollIntoView();
+  };
+
  const renderPack = (pack) => (
    <div className="sticker-board__pack" key={pack.id}>
      <Text className="sticker-board__pack-header" variant="b2" weight="bold">{pack.displayName ?? 'Unknown'}</Text>
@@ -50,6 +57,7 @@ function StickerBoard({ roomId, onSelect }) {
            alt={sticker.shortcode}
            title={sticker.body ?? sticker.shortcode}
            data-mx-sticker={sticker.mxc}
+            loading="lazy"
          />
        ))}
      </div>
@@ -58,8 +66,27 @@ function StickerBoard({ roomId, onSelect }) {

  return (
    <div className="sticker-board">
+      {packs.length > 0 && (
+        <ScrollView invisible>
+          <div className="sticker-board__sidebar">
+            {packs.map((pack, index) => {
+              const src = mx.mxcUrlToHttp(pack.avatarUrl ?? pack.getStickers()[0].mxc);
+              return (
+                <IconButton
+                  key={pack.id}
+                  onClick={() => openGroup(index)}
+                  src={src}
+                  tooltip={pack.displayName || 'Unknown'}
+                  tooltipPlacement="left"
+                  isImage
+                />
+              );
+            })}
+          </div>
+        </ScrollView>
+      )}
      <div className="sticker-board__container">
-        <ScrollView autoHide>
+        <ScrollView autoHide ref={scrollRef}>
          <div
            onClick={handleOnSelect}
            className="sticker-board__content"
@@ -5,6 +5,20 @@
  --sticker-board-width: 286px;
  display: flex;
  height: var(--sticker-board-height);
+  display: flex;
+
+  & > .scrollbar {
+    width: initial;    
+    height: var(--sticker-board-height);
+  }
+
+  &__sidebar {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    padding: 4px 6px;
+    @include dir.side(border, none, 1px solid var(--bg-surface-border));
+  }

  &__container {
    flex-grow: 1;
@@ -1,13 +1,16 @@
 import initMatrix from '../initMatrix';

-function logout() {
+async function logout() {
  const mx = initMatrix.matrixClient;
  mx.stopClient();
-  mx.logout().then(() => {
-    mx.clearStores();
-    window.localStorage.clear();
-    window.location.reload();
-  });
+  try {
+    await mx.logout();
+  } catch {
+    // ignore if failed to logout
+  }
+  mx.clearStores();
+  window.localStorage.clear();
+  window.location.reload();
 }

 export default logout;
@@ -6,7 +6,7 @@ import { getIdServer } from '../../util/matrixUtil';
 /**
 * https://github.com/matrix-org/matrix-react-sdk/blob/1e6c6e9d800890c732d60429449bc280de01a647/src/Rooms.js#L73
 * @param {string} roomId Id of room to add
- * @param {string} userId User id to which dm
+ * @param {string} userId User id to which dm || undefined to remove
 * @returns {Promise} A promise
 */
 function addRoomToMDirect(roomId, userId) {
@@ -79,13 +79,23 @@ function guessDMRoomTargetId(room, myUserId) {
  return oldestMember.userId;
 }

+function convertToDm(roomId) {
+  const mx = initMatrix.matrixClient;
+  const room = mx.getRoom(roomId);
+  return addRoomToMDirect(roomId, guessDMRoomTargetId(room, mx.getUserId()));
+}
+
+function convertToRoom(roomId) {
+  return addRoomToMDirect(roomId, undefined);
+}
+
 /**
 *
 * @param {string} roomId
 * @param {boolean} isDM
 * @param {string[]} via
 */
-async function join(roomIdOrAlias, isDM, via) {
+async function join(roomIdOrAlias, isDM = false, via = undefined) {
  const mx = initMatrix.matrixClient;
  const roomIdParts = roomIdOrAlias.split(':');
  const viaServers = via || [roomIdParts[1]];
@@ -150,10 +160,10 @@ async function create(options, isDM = false) {
  }
 }

-async function createDM(userId, isEncrypted = true) {
+async function createDM(userIdOrIds, isEncrypted = true) {
  const options = {
    is_direct: true,
-    invite: [userId],
+    invite: Array.isArray(userIdOrIds) ? userIdOrIds : [userIdOrIds],
    visibility: 'private',
    preset: 'trusted_private_chat',
    initial_state: [],
@@ -262,10 +272,10 @@ async function createRoom(opts) {
  return result;
 }

-async function invite(roomId, userId) {
+async function invite(roomId, userId, reason) {
  const mx = initMatrix.matrixClient;

-  const result = await mx.invite(roomId, userId);
+  const result = await mx.invite(roomId, userId, undefined, reason);
  return result;
 }

@@ -290,6 +300,21 @@ async function unban(roomId, userId) {
  return result;
 }

+async function ignore(userIds) {
+  const mx = initMatrix.matrixClient;
+
+  let ignoredUsers = mx.getIgnoredUsers().concat(userIds);
+  ignoredUsers = [...new Set(ignoredUsers)];
+  await mx.setIgnoredUsers(ignoredUsers);
+}
+
+async function unignore(userIds) {
+  const mx = initMatrix.matrixClient;
+
+  const ignoredUsers = mx.getIgnoredUsers();
+  await mx.setIgnoredUsers(ignoredUsers.filter((id) => !userIds.includes(id)));
+}
+
 async function setPowerLevel(roomId, userId, powerLevel) {
  const mx = initMatrix.matrixClient;
  const room = mx.getRoom(roomId);
@@ -300,9 +325,37 @@ async function setPowerLevel(roomId, userId, powerLevel) {
  return result;
 }

+async function setMyRoomNick(roomId, nick) {
+  const mx = initMatrix.matrixClient;
+  const room = mx.getRoom(roomId);
+  const mEvent = room.currentState.getStateEvents('m.room.member', mx.getUserId());
+  const content = mEvent?.getContent();
+  if (!content) return;
+  await mx.sendStateEvent(roomId, 'm.room.member', {
+    ...content,
+    displayname: nick,
+  }, mx.getUserId());
+}
+
+async function setMyRoomAvatar(roomId, mxc) {
+  const mx = initMatrix.matrixClient;
+  const room = mx.getRoom(roomId);
+  const mEvent = room.currentState.getStateEvents('m.room.member', mx.getUserId());
+  const content = mEvent?.getContent();
+  if (!content) return;
+  await mx.sendStateEvent(roomId, 'm.room.member', {
+    ...content,
+    avatar_url: mxc,
+  }, mx.getUserId());
+}
+
 export {
+  convertToDm,
+  convertToRoom,
  join, leave,
  createDM, createRoom,
  invite, kick, ban, unban,
+  ignore, unignore,
  setPowerLevel,
+  setMyRoomNick, setMyRoomAvatar,
 };
@@ -4,6 +4,17 @@ import { selectTab, selectSpace, selectRoom } from '../action/navigation';

 function initRoomListListener(roomList) {
  const listenRoomLeave = (roomId) => {
+    const parents = roomList.roomIdToParents.get(roomId);
+
+    if (parents) {
+      [...parents].forEach((pId) => {
+        const data = navigation.spaceToRoom.get(pId);
+        if (data?.roomId === roomId) {
+          navigation.spaceToRoom.delete(pId);
+        }
+      });
+    }
+
    if (navigation.selectedRoomId === roomId) {
      selectRoom(null);
    }
@@ -13,6 +24,8 @@ function initRoomListListener(roomList) {
      if (idIndex === 0) selectTab(cons.tabs.HOME);
      else selectSpace(navigation.selectedSpacePath[idIndex - 1]);
    }
+
+    navigation.removeRecentRoom(roomId);
  };

  roomList.on(cons.events.roomList.ROOM_LEAVED, listenRoomLeave);
@@ -8,12 +8,19 @@ import AccountData from './state/AccountData';
 import RoomsInput from './state/RoomsInput';
 import Notifications from './state/Notifications';
 import { cryptoCallbacks } from './state/secretStorageKeys';
+import navigation from './state/navigation';

 global.Olm = require('@matrix-org/olm');

 // logger.disableAll();

 class InitMatrix extends EventEmitter {
+  constructor() {
+    super();
+
+    navigation.initMatrix = this;
+  }
+
  async init() {
    await this.startClient();
    this.setupSync();
@@ -89,7 +89,7 @@ class RoomList extends EventEmitter {

      child.forEach((childId) => {
        const room = this.matrixClient.getRoom(childId);
-        if (room === null) return;
+        if (room === null || room.getMyMembership() !== 'join') return;
        if (room.isSpaceRoom()) categorizeSpace(childId);
        else mappedChild.add(childId);
      });
@@ -257,10 +257,10 @@ class RoomList extends EventEmitter {
      const latestMDirects = this.getMDirects();

      latestMDirects.forEach((directId) => {
-        const myRoom = this.matrixClient.getRoom(directId);
        if (this.mDirects.has(directId)) return;
        this.mDirects.add(directId);

+        const myRoom = this.matrixClient.getRoom(directId);
        if (myRoom === null) return;
        if (myRoom.getMyMembership() === 'join') {
          this.directs.add(directId);
@@ -268,6 +268,19 @@ class RoomList extends EventEmitter {
          this.emit(cons.events.roomList.ROOMLIST_UPDATED);
        }
      });
+
+      [...this.directs].forEach((directId) => {
+        if (latestMDirects.has(directId)) return;
+        this.mDirects.delete(directId);
+
+        const myRoom = this.matrixClient.getRoom(directId);
+        if (myRoom === null) return;
+        if (myRoom.getMyMembership() === 'join') {
+          this.directs.delete(directId);
+          this.rooms.add(directId);
+          this.emit(cons.events.roomList.ROOMLIST_UPDATED);
+        }
+      });
    });

    this.matrixClient.on('Room.name', (room) => {
@@ -1,13 +1,12 @@
 import EventEmitter from 'events';
-import { micromark } from 'micromark';
-import { gfm, gfmHtml } from 'micromark-extension-gfm';
 import encrypt from 'browser-encrypt-attachment';
-import { math } from 'micromark-extension-math';
 import { encode } from 'blurhash';
 import { getShortcodeToEmoji } from '../../app/organisms/emoji-board/custom-emoji';
-import { mathExtensionHtml, spoilerExtension, spoilerExtensionHtml } from '../../util/markdown';
+import { getBlobSafeMimeType } from '../../util/mimetypes';
+import { sanitizeText } from '../../util/sanitize';
 import cons from './cons';
 import settings from './settings';
+import { htmlOutput, parser } from '../../util/markdown';

 const blurhashField = 'xyz.amorgan.blurhash';
 const MXID_REGEX = /\B@\S+:\S+\.\S+[^.,:;?!\s]/g;
@@ -102,14 +101,11 @@ function getVideoThumbnail(video, width, height, mimeType) {
 }

 function getFormattedBody(markdown) {
-  const result = micromark(markdown, {
-    extensions: [gfm(), spoilerExtension(), math()],
-    htmlExtensions: [gfmHtml(), spoilerExtensionHtml, mathExtensionHtml],
-  });
-  const bodyParts = result.match(/^(<p>)(.*)(<\/p>)$/);
-  if (bodyParts === null) return result;
-  if (bodyParts[2].indexOf('</p>') >= 0) return result;
-  return bodyParts[2];
+  let content = parser(markdown);
+  if (content.length === 1 && content[0].type === 'paragraph') {
+    content = content[0].content;
+  }
+  return htmlOutput(content);
 }

 function getReplyFormattedBody(roomId, reply) {
@@ -148,29 +144,25 @@ function findAndReplace(text, regex, filter, replace) {
  return copyText;
 }

-function formatAndEmojifyText(mx, roomList, room, text) {
+function formatUserPill(room, text) {
  const { userIdsToDisplayNames } = room.currentState;
-  const parentIds = roomList.getAllParentSpaces(room.roomId);
-  const parentRooms = [...parentIds].map((id) => mx.getRoom(id));
-  const allEmoji = getShortcodeToEmoji(mx, [room, ...parentRooms]);
-
-  let formattedText;
-  if (settings.isMarkdown) {
-    formattedText = getFormattedBody(text);
-  } else {
-    formattedText = text;
-  }
-
-  formattedText = findAndReplace(
-    formattedText,
+  return findAndReplace(
+    text,
    MXID_REGEX,
    (match) => userIdsToDisplayNames[match[0]],
    (match) => (
      `<a href="https://matrix.to/#/${match[0]}">@${userIdsToDisplayNames[match[0]]}</a>`
    ),
  );
-  formattedText = findAndReplace(
-    formattedText,
+}
+
+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) => {
@@ -191,8 +183,6 @@ function formatAndEmojifyText(mx, roomList, room, text) {
      return tag;
    },
  );
-
-  return formattedText;
 }

 class RoomsInput extends EventEmitter {
@@ -284,7 +274,7 @@ class RoomsInput extends EventEmitter {
    return this.roomIdToInput.get(roomId)?.isSending || false;
  }

-  async sendInput(roomId) {
+  async sendInput(roomId, msgType) {
    const room = this.matrixClient.getRoom(roomId);
    const input = this.getInput(roomId);
    input.isSending = true;
@@ -295,25 +285,27 @@ class RoomsInput extends EventEmitter {
    }

    if (this.getMessage(roomId).trim() !== '') {
+      const rawMessage = input.message;
      let content = {
-        body: input.message,
-        msgtype: 'm.text',
+        body: rawMessage,
+        msgtype: msgType ?? 'm.text',
      };

      // Apply formatting if relevant
-      const formattedBody = formatAndEmojifyText(
-        this.matrixClient,
-        this.roomList,
-        room,
-        input.message,
-      );
+      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 !== input.message) {
+      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;
@@ -358,7 +350,7 @@ class RoomsInput extends EventEmitter {
  }

  async sendFile(roomId, file) {
-    const fileType = file.type.slice(0, file.type.indexOf('/'));
+    const fileType = getBlobSafeMimeType(file.type).slice(0, file.type.indexOf('/'));
    const info = {
      mimetype: file.type,
      size: file.size,
@@ -467,12 +459,14 @@ class RoomsInput extends EventEmitter {
    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.text',
+      msgtype,
      'm.new_content': {
        body: editedBody,
-        msgtype: 'm.text',
+        msgtype,
      },
      'm.relates_to': {
        event_id: mEvent.getId(),
@@ -481,19 +475,19 @@ class RoomsInput extends EventEmitter {
    };

    // Apply formatting if relevant
-    const formattedBody = formatAndEmojifyText(
-      this.matrixClient,
-      this.roomList,
-      room,
-      editedBody,
-    );
+    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 !== editedBody) {
+    if (formattedBody !== sanitizeText(editedBody)) {
      content.formatted_body = ` * ${formattedBody}`;
      content.format = 'org.matrix.custom.html';
      content['m.new_content'].formatted_body = formattedBody;
@@ -1,5 +1,5 @@
 const cons = {
-  version: '2.1.1',
+  version: '2.1.3',
  secretKey: {
    ACCESS_TOKEN: 'cinny_access_token',
    DEVICE_ID: 'cinny_device_id',
@@ -5,6 +5,8 @@ import cons from './cons';
 class Navigation extends EventEmitter {
  constructor() {
    super();
+    // this will attached by initMatrix
+    this.initMatrix = {};

    this.selectedTab = cons.tabs.HOME;
    this.selectedSpaceId = null;
@@ -14,14 +16,20 @@ class Navigation extends EventEmitter {
    this.isRoomSettings = false;
    this.recentRooms = [];

+    this.spaceToRoom = new Map();
+
    this.rawModelStack = [];
  }

-  _setSpacePath(roomId) {
-    if (roomId === null || roomId === cons.tabs.HOME) {
+  _addToSpacePath(roomId, asRoot) {
+    if (typeof roomId !== 'string') {
      this.selectedSpacePath = [cons.tabs.HOME];
      return;
    }
+    if (asRoot) {
+      this.selectedSpacePath = [roomId];
+      return;
+    }
    if (this.selectedSpacePath.includes(roomId)) {
      const spIndex = this.selectedSpacePath.indexOf(roomId);
      this.selectedSpacePath = this.selectedSpacePath.slice(0, spIndex + 1);
@@ -30,6 +38,223 @@ class Navigation extends EventEmitter {
    this.selectedSpacePath.push(roomId);
  }

+  _mapRoomToSpace(roomId) {
+    const { roomList, accountData } = this.initMatrix;
+    if (
+      this.selectedTab === cons.tabs.HOME
+      && roomList.rooms.has(roomId)
+      && !roomList.roomIdToParents.has(roomId)
+    ) {
+      this.spaceToRoom.set(cons.tabs.HOME, {
+        roomId,
+        timestamp: Date.now(),
+      });
+      return;
+    }
+    if (this.selectedTab === cons.tabs.DIRECTS && roomList.directs.has(roomId)) {
+      this.spaceToRoom.set(cons.tabs.DIRECTS, {
+        roomId,
+        timestamp: Date.now(),
+      });
+      return;
+    }
+
+    const parents = roomList.roomIdToParents.get(roomId);
+    if (!parents) return;
+    if (parents.has(this.selectedSpaceId)) {
+      this.spaceToRoom.set(this.selectedSpaceId, {
+        roomId,
+        timestamp: Date.now(),
+      });
+    } else if (accountData.categorizedSpaces.has(this.selectedSpaceId)) {
+      const categories = roomList.getCategorizedSpaces([this.selectedSpaceId]);
+      const parent = [...parents].find((pId) => categories.has(pId));
+      if (parent) {
+        this.spaceToRoom.set(parent, {
+          roomId,
+          timestamp: Date.now(),
+        });
+      }
+    }
+  }
+
+  _selectRoom(roomId, eventId) {
+    const prevSelectedRoomId = this.selectedRoomId;
+    this.selectedRoomId = roomId;
+    if (prevSelectedRoomId !== roomId) this._mapRoomToSpace(roomId);
+    this.removeRecentRoom(prevSelectedRoomId);
+    this.addRecentRoom(prevSelectedRoomId);
+    this.removeRecentRoom(this.selectedRoomId);
+    if (this.isRoomSettings && typeof this.selectedRoomId === 'string') {
+      this.isRoomSettings = !this.isRoomSettings;
+      this.emit(cons.events.navigation.ROOM_SETTINGS_TOGGLED, this.isRoomSettings);
+    }
+    this.emit(
+      cons.events.navigation.ROOM_SELECTED,
+      this.selectedRoomId,
+      prevSelectedRoomId,
+      eventId,
+    );
+  }
+
+  _selectTabWithRoom(roomId) {
+    const { roomList, accountData } = this.initMatrix;
+    const { categorizedSpaces } = accountData;
+
+    if (roomList.isOrphan(roomId)) {
+      if (roomList.directs.has(roomId)) {
+        this._selectSpace(null, true, false);
+        this._selectTab(cons.tabs.DIRECTS, false);
+        return;
+      }
+      this._selectSpace(null, true, false);
+      this._selectTab(cons.tabs.HOME, false);
+      return;
+    }
+
+    const parents = roomList.roomIdToParents.get(roomId);
+
+    if (parents.has(this.selectedSpaceId)) {
+      return;
+    }
+
+    if (categorizedSpaces.has(this.selectedSpaceId)) {
+      const categories = roomList.getCategorizedSpaces([this.selectedSpaceId]);
+      if ([...parents].find((pId) => categories.has(pId))) {
+        // No need to select tab
+        // As one of parent is child of selected categorized space.
+        return;
+      }
+    }
+
+    const spaceInPath = [...this.selectedSpacePath].reverse().find((sId) => parents.has(sId));
+    if (spaceInPath) {
+      this._selectSpace(spaceInPath, false, false);
+      return;
+    }
+
+    if (roomList.directs.has(roomId)) {
+      this._selectSpace(null, true, false);
+      this._selectTab(cons.tabs.DIRECTS, false);
+      return;
+    }
+
+    if (parents.size > 0) {
+      const sortedParents = [...parents].sort((p1, p2) => {
+        const t1 = this.spaceToRoom.get(p1)?.timestamp ?? 0;
+        const t2 = this.spaceToRoom.get(p2)?.timestamp ?? 0;
+        return t2 - t1;
+      });
+      this._selectSpace(sortedParents[0], true, false);
+      this._selectTab(sortedParents[0], false);
+    }
+  }
+
+  _getLatestActiveRoomId(roomIds) {
+    const mx = this.initMatrix.matrixClient;
+
+    let ts = 0;
+    let roomId = null;
+    roomIds.forEach((childId) => {
+      const room = mx.getRoom(childId);
+      if (!room) return;
+      const newTs = room.getLastActiveTimestamp();
+      if (newTs > ts) {
+        ts = newTs;
+        roomId = childId;
+      }
+    });
+    return roomId;
+  }
+
+  _getLatestSelectedRoomId(spaceIds) {
+    let ts = 0;
+    let roomId = null;
+
+    spaceIds.forEach((sId) => {
+      const data = this.spaceToRoom.get(sId);
+      if (!data) return;
+      const newTs = data.timestamp;
+      if (newTs > ts) {
+        ts = newTs;
+        roomId = data.roomId;
+      }
+    });
+    return roomId;
+  }
+
+  _selectTab(tabId, selectRoom = true) {
+    this.selectedTab = tabId;
+    if (selectRoom) this._selectRoomWithTab(this.selectedTab);
+    this.emit(cons.events.navigation.TAB_SELECTED, this.selectedTab);
+  }
+
+  _selectSpace(roomId, asRoot, selectRoom = true) {
+    this._addToSpacePath(roomId, asRoot);
+    this.selectedSpaceId = roomId;
+    if (!asRoot && selectRoom) this._selectRoomWithSpace(this.selectedSpaceId);
+    this.emit(cons.events.navigation.SPACE_SELECTED, this.selectedSpaceId);
+  }
+
+  _selectRoomWithSpace(spaceId) {
+    if (!spaceId) return;
+    const { roomList, accountData, matrixClient } = this.initMatrix;
+    const { categorizedSpaces } = accountData;
+
+    const data = this.spaceToRoom.get(spaceId);
+    if (data && !categorizedSpaces.has(spaceId)) {
+      this._selectRoom(data.roomId);
+      return;
+    }
+
+    const children = [];
+
+    if (categorizedSpaces.has(spaceId)) {
+      const categories = roomList.getCategorizedSpaces([spaceId]);
+
+      const latestSelectedRoom = this._getLatestSelectedRoomId([...categories.keys()]);
+
+      if (latestSelectedRoom) {
+        this._selectRoom(latestSelectedRoom);
+        return;
+      }
+
+      categories?.forEach((categoryId) => {
+        categoryId?.forEach((childId) => {
+          children.push(childId);
+        });
+      });
+    } else {
+      roomList.getSpaceChildren(spaceId).forEach((id) => {
+        if (matrixClient.getRoom(id)?.isSpaceRoom() === false) {
+          children.push(id);
+        }
+      });
+    }
+
+    if (!children) {
+      this._selectRoom(null);
+      return;
+    }
+
+    this._selectRoom(this._getLatestActiveRoomId(children));
+  }
+
+  _selectRoomWithTab(tabId) {
+    const { roomList } = this.initMatrix;
+    if (tabId === cons.tabs.HOME || tabId === cons.tabs.DIRECTS) {
+      const data = this.spaceToRoom.get(tabId);
+      if (data) {
+        this._selectRoom(data.roomId);
+        return;
+      }
+      const children = tabId === cons.tabs.HOME ? roomList.getOrphanRooms() : [...roomList.directs];
+      this._selectRoom(this._getLatestActiveRoomId(children));
+      return;
+    }
+    this._selectRoomWithSpace(tabId);
+  }
+
  removeRecentRoom(roomId) {
    if (typeof roomId !== 'string') return;
    const roomIdIndex = this.recentRooms.indexOf(roomId);
@@ -59,40 +284,19 @@ class Navigation extends EventEmitter {
  navigate(action) {
    const actions = {
      [cons.actions.navigation.SELECT_TAB]: () => {
-        this.selectedTab = action.tabId;
-        if (this.selectedTab !== cons.tabs.DIRECTS) {
-          if (this.selectedTab === cons.tabs.HOME) {
-            this.selectedSpacePath = [cons.tabs.HOME];
-            this.selectedSpaceId = null;
-          } else {
-            this.selectedSpacePath = [this.selectedTab];
-            this.selectedSpaceId = this.selectedTab;
-          }
-          this.emit(cons.events.navigation.SPACE_SELECTED, this.selectedSpaceId);
-        } else this.selectedSpaceId = null;
-        this.emit(cons.events.navigation.TAB_SELECTED, this.selectedTab);
+        const roomId = (
+          action.tabId !== cons.tabs.HOME && action.tabId !== cons.tabs.DIRECTS
+        ) ? action.tabId : null;
+
+        this._selectSpace(roomId, true);
+        this._selectTab(action.tabId);
      },
      [cons.actions.navigation.SELECT_SPACE]: () => {
-        this._setSpacePath(action.roomId);
-        this.selectedSpaceId = action.roomId === cons.tabs.HOME ? null : action.roomId;
-        this.emit(cons.events.navigation.SPACE_SELECTED, this.selectedSpaceId);
+        this._selectSpace(action.roomId, false);
      },
      [cons.actions.navigation.SELECT_ROOM]: () => {
-        const prevSelectedRoomId = this.selectedRoomId;
-        this.selectedRoomId = action.roomId;
-        this.removeRecentRoom(prevSelectedRoomId);
-        this.addRecentRoom(prevSelectedRoomId);
-        this.removeRecentRoom(this.selectedRoomId);
-        if (this.isRoomSettings && typeof this.selectedRoomId === 'string') {
-          this.isRoomSettings = !this.isRoomSettings;
-          this.emit(cons.events.navigation.ROOM_SETTINGS_TOGGLED, this.isRoomSettings);
-        }
-        this.emit(
-          cons.events.navigation.ROOM_SELECTED,
-          this.selectedRoomId,
-          prevSelectedRoomId,
-          action.eventId,
-        );
+        if (action.roomId) this._selectTabWithRoom(action.roomId);
+        this._selectRoom(action.roomId, action.eventId);
      },
      [cons.actions.navigation.OPEN_SPACE_SETTINGS]: () => {
        this.emit(cons.events.navigation.SPACE_SETTINGS_OPENED, action.roomId, action.tabText);
@@ -105,7 +105,7 @@

  /* shadow and overlay */
  --bg-overlay: rgba(0, 0, 0, 20%);
-  --bg-overlay-low: rgba(0, 0, 0, 85%);
+  --bg-overlay-low: rgba(0, 0, 0, 50%);

  --bs-popup: 0 0 16px rgba(0, 0, 0, 10%);

@@ -264,7 +264,8 @@
  }
  
  /* shadow and overlay */
-  --bg-overlay: rgba(0, 0, 0, 50%);
+  --bg-overlay: rgba(0, 0, 0, 60%);
+  --bg-overlay-low: rgba(0, 0, 0, 80%);

  --bs-popup: 0 0 16px rgba(0, 0, 0, 25%);

@@ -166,6 +166,9 @@ export function scaleDownImage(imageFile, width, height) {
    img.onload = () => {
      let newWidth = img.width;
      let newHeight = img.height;
+      if (newHeight <= height && newWidth <= width) {
+        resolve(imageFile);
+      }

      if (newHeight > height) {
        newWidth = Math.floor(newWidth * (height / newHeight));
@@ -1,198 +1,89 @@
-/* eslint-disable no-param-reassign */
-/* eslint-disable no-plusplus */
-/* eslint-disable no-continue */
+import SimpleMarkdown from '@khanacademy/simple-markdown';

-import { codes } from 'micromark-util-symbol/codes';
-import { types } from 'micromark-util-symbol/types';
-import { resolveAll } from 'micromark-util-resolve-all';
-import { splice } from 'micromark-util-chunked';
+const {
+  defaultRules, parserFor, outputFor, anyScopeRegex, blockRegex, inlineRegex, htmlTag, sanitizeText,
+} = SimpleMarkdown;

-function inlineExtension(marker, len, key) {
-  const keySeq = `${key}Sequence`;
-  const keySeqTmp = `${keySeq}Temporary`;
-
-  return () => {
-    function tokenize(effects, ok, nok) {
-      const { previous, events } = this;
-
-      let size = 0;
-
-      function more(code) {
-        // consume more markers if the maximum length hasn't been reached yet
-        if (code === marker && size < len) {
-          effects.consume(code);
-          size += 1;
-          return more;
-        }
-
-        // check for minimum length
-        if (size < len) return nok(code);
-
-        effects.exit(keySeqTmp);
-        return ok(code);
-      }
-
-      function start(code) {
-        // ignore code if it's not a marker
-        if (code !== marker) return nok(code);
-
-        if (previous === marker
-            && events[events.length - 1][1].type !== types.characterEscape) return nok(code);
-
-        effects.enter(keySeqTmp);
-        return more(code);
-      }
-
-      return start;
-    }
-
-    function resolve(events, context) {
-      let i = -1;
-
-      while (++i < events.length) {
-        if (events[i][0] !== 'enter' || events[i][1].type !== keySeqTmp) continue;
-
-        let open = i;
-        while (open--) {
-          if (events[open][0] !== 'exit' || events[open][1].type !== keySeqTmp) continue;
-
-          events[i][1].type = keySeq;
-          events[open][1].type = keySeq;
-
-          const border = {
-            type: key,
-            start: { ...events[open][1].start },
-            end: { ...events[i][1].end },
-          };
-
-          const text = {
-            type: `${key}Text`,
-            start: { ...events[open][1].end },
-            end: { ...events[i][1].start },
-          };
-
-          const nextEvents = [
-            ['enter', border, context],
-            ['enter', events[open][1], context],
-            ['exit', events[open][1], context],
-            ['enter', text, context],
-          ];
-
-          splice(
-            nextEvents,
-            nextEvents.length,
-            0,
-            resolveAll(
-              context.parser.constructs.insideSpan.null,
-              events.slice(open + 1, i),
-              context,
-            ),
-          );
-
-          splice(nextEvents, nextEvents.length, 0, [
-            ['exit', text, context],
-            ['enter', events[i][1], context],
-            ['exit', events[i][1], context],
-            ['exit', border, context],
-          ]);
-
-          splice(events, open - 1, i - open + 3, nextEvents);
-
-          i = open + nextEvents.length - 2;
-          break;
-        }
-      }
-
-      events.forEach((event) => {
-        if (event[1].type === keySeqTmp) {
-          event[1].type = types.data;
-        }
-      });
-
-      return events;
-    }
-
-    const tokenizer = {
-      tokenize,
-      resolveAll: resolve,
-    };
-
-    return {
-      text: { [marker]: tokenizer },
-      insideSpan: { null: [tokenizer] },
-      attentionMarkers: { null: [marker] },
-    };
-  };
+function mathHtml(wrap, node) {
+  return htmlTag(wrap, htmlTag('code', sanitizeText(node.content)), { 'data-mx-maths': node.content });
 }

-const spoilerExtension = inlineExtension(codes.verticalBar, 2, 'spoiler');
-
-const spoilerExtensionHtml = {
-  enter: {
-    spoiler() {
-      this.tag('<span data-mx-spoiler>');
-    },
+const rules = {
+  ...defaultRules,
+  Array: {
+    ...defaultRules.Array,
+    plain: (arr, output, state) => arr.map((node) => output(node, state)).join(''),
  },
-  exit: {
-    spoiler() {
-      this.tag('</span>');
-    },
+  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,
+    plain: () => '\n',
+  },
+  paragraph: {
+    ...defaultRules.paragraph,
+    plain: (node, output, state) => `${output(node.content, state)}\n\n`,
+    html: (node, output, state) => htmlTag('p', output(node.content, state)),
+  },
+  escape: {
+    ...defaultRules.escape,
+    plain: (node, output, state) => `\\${output(node.content, state)}`,
+  },
+  em: {
+    ...defaultRules.em,
+    plain: (node, output, state) => `_${output(node.content, state)}_`,
+  },
+  strong: {
+    ...defaultRules.strong,
+    plain: (node, output, state) => `**${output(node.content, state)}**`,
+  },
+  u: {
+    ...defaultRules.u,
+    plain: (node, output, state) => `__${output(node.content, state)}__`,
+  },
+  del: {
+    ...defaultRules.del,
+    plain: (node, output, state) => `~~${output(node.content, state)}~~`,
+  },
+  spoiler: {
+    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) => `[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.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,
  },
 };

-const mathExtensionHtml = {
-  enter: {
-    mathFlow() {
-      this.lineEndingIfNeeded();
-    },
-    mathFlowFenceMeta() {
-      this.buffer();
-    },
-    mathText() {
-      this.buffer();
-    },
-  },
-  exit: {
-    mathFlow() {
-      const value = this.encode(this.resume().replace(/(?:\r?\n|\r)$/, ''));
-      this.tag('<div data-mx-maths="');
-      this.tag(value);
-      this.tag('"><code>');
-      this.raw(value);
-      this.tag('</code></div>');
-      this.setData('mathFlowOpen');
-      this.setData('slurpOneLineEnding');
-    },
-    mathFlowFence() {
-      // After the first fence.
-      if (!this.getData('mathFlowOpen')) {
-        this.setData('mathFlowOpen', true);
-        this.setData('slurpOneLineEnding', true);
-        this.buffer();
-      }
-    },
-    mathFlowFenceMeta() {
-      this.resume();
-    },
-    mathFlowValue(token) {
-      this.raw(this.sliceSerialize(token));
-    },
-    mathText() {
-      const value = this.encode(this.resume());
-      this.tag('<span data-mx-maths="');
-      this.tag(value);
-      this.tag('"><code>');
-      this.raw(value);
-      this.tag('</code></span>');
-    },
-    mathTextData(token) {
-      this.raw(this.sliceSerialize(token));
-    },
-  },
-};
+const parser = parserFor(rules);
+
+const plainOutput = outputFor(rules, 'plain');
+const htmlOutput = outputFor(rules, 'html');

 export {
-  inlineExtension,
-  spoilerExtension, spoilerExtensionHtml,
-  mathExtensionHtml,
+  parser, plainOutput, htmlOutput,
 };
@@ -0,0 +1,37 @@
+// https://github.com/matrix-org/matrix-react-sdk/blob/cd15e08fc285da42134817cce50de8011809cd53/src/utils/blobs.ts
+export const ALLOWED_BLOB_MIMETYPES = [
+  'image/jpeg',
+  'image/gif',
+  'image/png',
+  'image/apng',
+  'image/webp',
+  'image/avif',
+
+  'video/mp4',
+  'video/webm',
+  'video/ogg',
+  'video/quicktime',
+
+  'audio/mp4',
+  'audio/webm',
+  'audio/aac',
+  'audio/mpeg',
+  'audio/ogg',
+  'audio/wave',
+  'audio/wav',
+  'audio/x-wav',
+  'audio/x-pn-wav',
+  'audio/flac',
+  'audio/x-flac',
+];
+
+export function getBlobSafeMimeType(mimetype) {
+  if (!ALLOWED_BLOB_MIMETYPES.includes(mimetype)) {
+    return 'application/octet-stream';
+  }
+  // Required for Chromium browsers
+  if (mimetype === 'video/quicktime') {
+    return 'video/mp4';
+  }
+  return mimetype;
+}
@@ -1,7 +1,7 @@
 import sanitizeHtml from 'sanitize-html';
-import initMatrix from '../client/initMatrix';

 const MAX_TAG_NESTING = 100;
+let mx = null;

 const permittedHtmlTags = [
  'font', 'del', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
@@ -19,7 +19,7 @@ const permittedTagToAttributes = {
  div: ['data-mx-maths'],
  a: ['name', 'target', 'href', 'rel'],
  img: ['width', 'height', 'alt', 'title', 'src', 'data-mx-emoticon'],
-  o: ['start'],
+  ol: ['start'],
  code: ['class'],
 };

@@ -54,7 +54,7 @@ function transformATag(tagName, attribs) {
        'data-mx-pill': userId,
      },
    };
-    if (userId === initMatrix.matrixClient.getUserId()) {
+    if (userId === mx?.getUserId()) {
      pill.attribs['data-mx-ping'] = undefined;
    }
    return pill;
@@ -76,17 +76,28 @@ function transformATag(tagName, attribs) {

 function transformImgTag(tagName, attribs) {
  const { src } = attribs;
-  const mx = initMatrix.matrixClient;
+  if (src.startsWith('mxc://') === false) {
+    return {
+      tagName: 'a',
+      attribs: {
+        href: src,
+        rel: 'noopener',
+        target: '_blank',
+      },
+      text: attribs.alt || src,
+    };
+  }
  return {
    tagName,
    attribs: {
      ...attribs,
-      src: src.startsWith('mxc://') ? mx.mxcUrlToHttp(src) : src,
+      src: mx?.mxcUrlToHttp(src),
    },
  };
 }

-export function sanitizeCustomHtml(body) {
+export function sanitizeCustomHtml(matrixClient, body) {
+  mx = matrixClient;
  return sanitizeHtml(body, {
    allowedTags: permittedHtmlTags,
    allowedAttributes: permittedTagToAttributes,
Author	SHA1	Message	Date
Ajay Bura	279c9460a9	Merge branch 'dev' into fix/commands	2022-09-03 21:42:56 +05:30
Krishan	0f6f65045d	Add npmrc so that newer node/npm version works (#806 ) * Add .npmrc so that it works with newer npm * Remove engine upper limit as it works with npmrc * Lockfile maintainace, created new mapping with npm install * Add npmrc so Docker doesnt fail on new npm version * Revert `8a1946d558` will set renovate	2022-09-03 21:36:47 +05:30
Ajay Bura	383b146d1b	Merge branch 'dev' into fix/commands	2022-09-03 08:42:36 +05:30
dependabot[bot]	843b9ddffd	Bump katex from 0.16.0 to 0.16.2 (#802 ) Bumps [katex](https://github.com/KaTeX/KaTeX) from 0.16.0 to 0.16.2. - [Release notes](https://github.com/KaTeX/KaTeX/releases) - [Changelog](https://github.com/KaTeX/KaTeX/blob/main/CHANGELOG.md) - [Commits](https://github.com/KaTeX/KaTeX/compare/v0.16.0...v0.16.2) --- updated-dependencies: - dependency-name: katex dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-09-02 19:31:28 +05:30
dependabot[bot]andAjay Bura	e283d4cd21	Bump eslint from 8.22.0 to 8.23.0 (#799 ) Bumps [eslint](https://github.com/eslint/eslint) from 8.22.0 to 8.23.0. - [Release notes](https://github.com/eslint/eslint/releases) - [Changelog](https://github.com/eslint/eslint/blob/main/CHANGELOG.md) - [Commits](https://github.com/eslint/eslint/compare/v8.22.0...v8.23.0) --- updated-dependencies: - dependency-name: eslint dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Ajay Bura <32841439+ajbura@users.noreply.github.com>	2022-09-02 19:21:45 +05:30
dependabot[bot]andAjay Bura	4fe02d27c8	Bump webpack-dev-server from 4.10.0 to 4.10.1 (#800 ) Bumps [webpack-dev-server](https://github.com/webpack/webpack-dev-server) from 4.10.0 to 4.10.1. - [Release notes](https://github.com/webpack/webpack-dev-server/releases) - [Changelog](https://github.com/webpack/webpack-dev-server/blob/master/CHANGELOG.md) - [Commits](https://github.com/webpack/webpack-dev-server/compare/v4.10.0...v4.10.1) --- updated-dependencies: - dependency-name: webpack-dev-server dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Ajay Bura <32841439+ajbura@users.noreply.github.com>	2022-09-02 19:16:28 +05:30
dependabot[bot]andAjay Bura	5a269c68ae	Bump html-react-parser from 3.0.1 to 3.0.4 (#797 ) Bumps [html-react-parser](https://github.com/remarkablemark/html-react-parser) from 3.0.1 to 3.0.4. - [Release notes](https://github.com/remarkablemark/html-react-parser/releases) - [Changelog](https://github.com/remarkablemark/html-react-parser/blob/master/CHANGELOG.md) - [Commits](https://github.com/remarkablemark/html-react-parser/compare/v3.0.1...v3.0.4) --- updated-dependencies: - dependency-name: html-react-parser dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Ajay Bura <32841439+ajbura@users.noreply.github.com>	2022-09-02 19:15:59 +05:30
dependabot[bot]andAjay Bura	570a1c85af	Bump eslint-plugin-react from 7.30.1 to 7.31.1 (#796 ) Bumps [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) from 7.30.1 to 7.31.1. - [Release notes](https://github.com/jsx-eslint/eslint-plugin-react/releases) - [Changelog](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/CHANGELOG.md) - [Commits](https://github.com/jsx-eslint/eslint-plugin-react/compare/v7.30.1...v7.31.1) --- updated-dependencies: - dependency-name: eslint-plugin-react dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Ajay Bura <32841439+ajbura@users.noreply.github.com>	2022-09-02 19:15:28 +05:30
dependabot[bot]andAjay Bura	f7ff1ef2bd	Bump actions/github-script from 6.1.1 to 6.2.0 (#794 ) Bumps [actions/github-script](https://github.com/actions/github-script) from 6.1.1 to 6.2.0. - [Release notes](https://github.com/actions/github-script/releases) - [Commits](https://github.com/actions/github-script/compare/v6.1.1...v6.2.0) --- updated-dependencies: - dependency-name: actions/github-script dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Ajay Bura <32841439+ajbura@users.noreply.github.com>	2022-09-02 19:15:03 +05:30
dependabot[bot]andAjay Bura	04530a801c	Bump @babel/core from 7.18.10 to 7.18.13 (#783 ) Bumps [@babel/core](https://github.com/babel/babel/tree/HEAD/packages/babel-core) from 7.18.10 to 7.18.13. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.18.13/packages/babel-core) --- updated-dependencies: - dependency-name: "@babel/core" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Ajay Bura <32841439+ajbura@users.noreply.github.com>	2022-09-02 19:14:34 +05:30
dependabot[bot]andAjay Bura	756cd0921b	Bump sass from 1.54.4 to 1.54.5 (#781 ) Bumps [sass](https://github.com/sass/dart-sass) from 1.54.4 to 1.54.5. - [Release notes](https://github.com/sass/dart-sass/releases) - [Changelog](https://github.com/sass/dart-sass/blob/main/CHANGELOG.md) - [Commits](https://github.com/sass/dart-sass/compare/1.54.4...1.54.5) --- updated-dependencies: - dependency-name: sass dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Ajay Bura <32841439+ajbura@users.noreply.github.com>	2022-09-02 19:14:14 +05:30
Krishan	292eee33b9	Release v2.1.3	2022-08-31 21:51:50 +05:30
Ajay Bura	583c834ba8	Bump matrix-js-sdk from 19.2.0 to 19.4.0	2022-08-31 21:51:02 +05:30
Ajay Bura	dc3c1a6be3	Add reason in command	2022-08-29 20:46:14 +05:30
Ajay Bura	180b908bd0	Fix cmd descriptions	2022-08-29 19:04:44 +05:30
Ajay Bura	cb5e8812e4	Add help command	2022-08-28 16:35:18 +05:30
Ajay Bura	685154889c	Add /me & /shrug commands	2022-08-28 15:49:54 +05:30
Ajay Bura	77f976392f	Fix commands and added more	2022-08-27 20:48:53 +05:30
jameskitt616	33949dbdb1	Implement cancel replyto on escape key press (#777 )	2022-08-27 08:21:41 +05:30
Krishan	fd79ea4b9b	Simplify readme and add various helpful links (#776 ) * Simplyfy readme and add various helpful links * update intro * Add desktop app link	2022-08-22 08:29:47 +05:30
Ajay Bura	b3bff6b43f	Edit last message with up arrow key (#774 )	2022-08-21 19:41:48 +05:30
ginnyTheCat	80aa55b706	Rework Markdown parsing (#719 ) * Switch markdown parser * Add inline maths * Basic plain text rendering * Add display math support * Remove unnecessary <p> tag * Fixed spoiler not working * Add spoiler reason input support * Make paragraphs display with newline in between * Handle single newlines * Fix typo when allowing start attribute * Cleanup for merge * Remove unused import	2022-08-21 19:34:09 +05:30
Ajay Bura	76c16ce294	Fix open room from search always open same space	2022-08-21 08:51:13 +05:30
Ajay Bura	715e6648ae	Fix image lightbox height	2022-08-21 08:33:47 +05:30
dependabot[bot]	984fad811c	Bump actions/github-script from 6.1.0 to 6.1.1 (#755 ) Bumps [actions/github-script](https://github.com/actions/github-script) from 6.1.0 to 6.1.1. - [Release notes](https://github.com/actions/github-script/releases) - [Commits](https://github.com/actions/github-script/compare/v6.1.0...v6.1.1) --- updated-dependencies: - dependency-name: actions/github-script dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-08-20 21:09:36 +05:30
dependabot[bot]	eafd2c8a13	Bump eslint from 8.21.0 to 8.22.0 (#756 ) Bumps [eslint](https://github.com/eslint/eslint) from 8.21.0 to 8.22.0. - [Release notes](https://github.com/eslint/eslint/releases) - [Changelog](https://github.com/eslint/eslint/blob/main/CHANGELOG.md) - [Commits](https://github.com/eslint/eslint/compare/v8.21.0...v8.22.0) --- updated-dependencies: - dependency-name: eslint dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-08-20 21:09:08 +05:30
Ajay Bura	82fb243ffe	Fix room not selecting with bad emoji data (#772 )	2022-08-20 21:07:20 +05:30
dependabot[bot]andKrishan	6cbf1b2eac	Bump sass from 1.54.3 to 1.54.4 (#757 ) Bumps [sass](https://github.com/sass/dart-sass) from 1.54.3 to 1.54.4. - [Release notes](https://github.com/sass/dart-sass/releases) - [Changelog](https://github.com/sass/dart-sass/blob/main/CHANGELOG.md) - [Commits](https://github.com/sass/dart-sass/compare/1.54.3...1.54.4) --- updated-dependencies: - dependency-name: sass dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Krishan <33421343+kfiven@users.noreply.github.com>	2022-08-20 21:05:35 +05:30
dependabot[bot]andKrishan	043e411a98	Bump webpack-dev-server from 4.9.3 to 4.10.0 (#758 ) Bumps [webpack-dev-server](https://github.com/webpack/webpack-dev-server) from 4.9.3 to 4.10.0. - [Release notes](https://github.com/webpack/webpack-dev-server/releases) - [Changelog](https://github.com/webpack/webpack-dev-server/blob/master/CHANGELOG.md) - [Commits](https://github.com/webpack/webpack-dev-server/compare/v4.9.3...v4.10.0) --- updated-dependencies: - dependency-name: webpack-dev-server dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Krishan <33421343+kfiven@users.noreply.github.com>	2022-08-20 21:03:02 +05:30
KrishanandAjay Bura	f93b666bbf	Push Docker image to ghcr registry (#764 ) * Push Docker image to ghcr registry * Fix secret name * add permission to token to write package to ghcr Co-authored-by: Ajay Bura <32841439+ajbura@users.noreply.github.com>	2022-08-20 20:59:02 +05:30
Ajay BuraandKrishan	7e28aa1474	Update sidebar on room/space switch (#768 ) * Select last room on space/tab change (#353) * Update sidbar on room select from search (#374) * Select last room on space/tab change (#353) * Update sidbar on room select from search (#374) * Fix wrong space gets selected with some rooms * Fix auto select room in categorized space * Fix room remain selected on leave * Fix leaved room appear in category & search * Remove globally exposed vars * Hide pin spaces from home * Fix selecting dm always open dm tab * Order category by AtoZ (#769) Co-authored-by: Krishan <33421343+kfiven@users.noreply.github.com>	2022-08-20 20:51:37 +05:30
jameskitt616	1deef51df0	Add cancel edit-message on Escape Key press (#765 )	2022-08-20 18:56:37 +05:30
Ajay Bura	6f7934badc	Fix more css bugs	2022-08-19 15:19:12 +05:30
Ajay Bura	2f2680be3c	Fix minor css bugs	2022-08-19 13:57:24 +05:30
Ajay Bura	4cd8f4a94c	Open image in lightbox (#767 ) * Add lightbox * Fix vertical media height (#467) * Update dialog animation * Fix overlay opacity * Fix dialog animation * Update open in new tab icon	2022-08-19 12:15:22 +05:30
James	a417980a81	Improve MIME type handling on File Upload and in Message Component (#688 ) * move allowed MIME types to own util file * add check for safe MIME type before choosing how to upload * check for allowed blob type to decide what component to load * re-add check for safe mimetype * fix bracket positioning	2022-08-14 16:31:17 +05:30
Andrew Morgan	af69955801	Fix grammar of read receipt text (#744 ) 'other' should be plural in this context.	2022-08-12 16:03:56 +05:30
Ajay Bura	214d49f1d9	Release v2.1.2	2022-08-11 19:10:12 +05:30
dependabot[bot]	c4e36a1f97	Bump @fontsource/inter from 4.5.11 to 4.5.12 (#726 ) Bumps [@fontsource/inter](https://github.com/fontsource/fontsource/tree/HEAD/fonts/google/inter) from 4.5.11 to 4.5.12. - [Release notes](https://github.com/fontsource/fontsource/releases) - [Changelog](https://github.com/fontsource/fontsource/blob/main/CHANGELOG.md) - [Commits](https://github.com/fontsource/fontsource/commits/HEAD/fonts/google/inter) --- updated-dependencies: - dependency-name: "@fontsource/inter" dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-08-11 18:46:19 +05:30
dependabot[bot]	5de6a1bea6	Bump @fontsource/roboto from 4.5.7 to 4.5.8 (#727 ) Bumps [@fontsource/roboto](https://github.com/fontsource/fontsource/tree/HEAD/fonts/google/roboto) from 4.5.7 to 4.5.8. - [Release notes](https://github.com/fontsource/fontsource/releases) - [Changelog](https://github.com/fontsource/fontsource/blob/main/CHANGELOG.md) - [Commits](https://github.com/fontsource/fontsource/commits/HEAD/fonts/google/roboto) --- updated-dependencies: - dependency-name: "@fontsource/roboto" dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-08-11 18:44:00 +05:30
dependabot[bot]	74a20a0e14	Bump sass from 1.54.1 to 1.54.3 (#728 ) Bumps [sass](https://github.com/sass/dart-sass) from 1.54.1 to 1.54.3. - [Release notes](https://github.com/sass/dart-sass/releases) - [Changelog](https://github.com/sass/dart-sass/blob/main/CHANGELOG.md) - [Commits](https://github.com/sass/dart-sass/compare/1.54.1...1.54.3) --- updated-dependencies: - dependency-name: sass dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-08-11 18:43:31 +05:30
Ajay Bura	820d08017a	Fix image not loading without h/w data (#738 )	2022-08-11 18:41:09 +05:30
Ajay Bura	258afec391	Only render mxc images in markdown	2022-08-11 17:20:55 +05:30
Ajay Bura	0cf5aac591	Fix emoji board style	2022-08-11 16:31:02 +05:30
Ajay Bura	59fd34a4b4	Replace space by underscore in emoji shortcodes	2022-08-11 16:24:22 +05:30
Ajay Bura	1da3d252e8	Add navigation bar to sticker board	2022-08-11 16:13:53 +05:30
Ajay Bura	3c1cc59d59	Escape html with markdown off (#732 )	2022-08-11 14:28:39 +05:30
Ajay Bura	1692098d5d	Fix logout not working when server offline	2022-08-11 13:41:07 +05:30
Ajay Bura	fbab53af22	Merge branch 'dev' of https://github.com/ajbura/cinny into dev	2022-08-11 13:33:59 +05:30
Ajay Bura	ce1e263d57	Only scale image bigger than 512px (#731 )	2022-08-11 13:33:54 +05:30
dependabot[bot]	9f99320fda	Bump docker/build-push-action from 3.1.0 to 3.1.1 (#725 ) Bumps [docker/build-push-action](https://github.com/docker/build-push-action) from 3.1.0 to 3.1.1. - [Release notes](https://github.com/docker/build-push-action/releases) - [Commits](https://github.com/docker/build-push-action/compare/v3.1.0...v3.1.1) --- updated-dependencies: - dependency-name: docker/build-push-action dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-08-09 09:30:34 +05:30